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

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

@@ -1,302 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c } from './index.esm.js';
-import { d as defineCustomElement$4 } from './chat-icon-list.js';
-import { d as defineCustomElement$3 } from './chat-item.js';
-import { d as defineCustomElement$2 } from './typing-indicator.js';
-
-function isIconList(item) {
-    return 'type' in item && item.type === 'iconList';
-}
-function getProcessedItemTimestamp(item) {
-    if (item.type === 'chat' || item.type === 'iconList') {
-        return item.item.timestamp;
-    }
-    return undefined;
-}
-/**
- * Processes a list of chat list inputs by adding date headers and a "new items" indicator.
- *
- * @param items - The list of items to process. Pre-sorted by `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. Used to position the
- *   "new items" indicator.
- *
- * @returns An array of processed items, including chat items, icon lists, date headers,
- *   and a "new items" indicator if applicable.
- */
-function processChatItems(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) {
-        if (isIconList(item)) {
-            context.processedItems.push({ type: 'iconList', item: item });
-        }
-        else {
-            context.processedItems.push({ type: 'chat', item: item });
-        }
-    }
-    return context;
-}
-/**
- *
- * @param context
- */
-function insertNewItemIndicator(context) {
-    const processedWithIndicator = [];
-    let newItemIndicatorInserted = context.newItemIndicatorInserted;
-    for (const item of context.processedItems) {
-        const timestamp = getProcessedItemTimestamp(item);
-        if (timestamp !== undefined &&
-            context.lastVisitedTimestamp &&
-            !newItemIndicatorInserted &&
-            new Date(timestamp) <= context.lastVisitedTimestamp &&
-            context.hasUnseenNotifications) {
-            processedWithIndicator.push({ type: 'newItemIndicator' });
-            newItemIndicatorInserted = true;
-        }
-        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;
-    for (const item of context.processedItems) {
-        if (item.type === 'chat' || item.type === 'iconList') {
-            const currentTimestamp = new Date(item.item.timestamp);
-            const currentDate = context.dateTimeFormatter.format(currentTimestamp, 'date');
-            if (currentDate !== lastProcessedDate) {
-                if (currentGroup) {
-                    newProcessedItems.push(currentGroup);
-                }
-                currentGroup = {
-                    type: 'group',
-                    groupType: 'dateGroup',
-                    heading: currentDate,
-                    items: [],
-                };
-                lastProcessedDate = currentDate;
-            }
-            if (currentGroup) {
-                currentGroup.items.push(item);
-            }
-        }
-        else if (item.type === 'newItemIndicator') {
-            if (currentGroup) {
-                currentGroup.items.push(item);
-            }
-            else {
-                newProcessedItems.push(item);
-            }
-        }
-    }
-    if (currentGroup) {
-        newProcessedItems.push(currentGroup);
-    }
-    return Object.assign(Object.assign({}, context), { processedItems: newProcessedItems });
-}
-
-const chatListCss = "@charset \"UTF-8\";:host(limebb-chat-list){--limel-top-edge-fade-height:0.75rem;isolation:isolate;--limel-overflow-mask-vertical:linear-gradient(\n      to bottom,\n      transparent 0%,\n      black calc(0% + var(--limel-top-edge-fade-height, 1rem)),\n      black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),\n      transparent 100%\n  );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);box-sizing:border-box;display:flex;gap:0.5rem;height:100%;width:100%;min-width:0;min-height:0;padding:var(--limel-top-edge-fade-height) 0.5rem;overflow:hidden auto}:host(limebb-chat-list.is-empty){padding:0}:host(limebb-chat-list[order=oldest-on-top]){flex-direction:column-reverse}:host(limebb-chat-list[order=newest-on-top]){flex-direction:column}*{box-sizing:border-box}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-group{isolation:isolate;display:flex;flex-direction:inherit;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 auto;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:rgb(var(--contrast-100))}.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:rgb(var(--contrast-100))}.typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.1s;--limebb-chat-typing-opacity-transition-delay:0s;--limebb-chat-typing-grid-template-rows-transition-speed:0.3s;position:sticky;top:0;z-index:1;transition:grid-template-rows var(--limebb-chat-typing-grid-template-rows-transition-speed) ease;display:grid;grid-template-rows:0}.typing-indicator-height-animation div{transition:opacity var(--limebb-chat-typing-opacity-transition-speed) ease var(--limebb-chat-typing-opacity-transition-delay);overflow:hidden;opacity:0}:host(limebb-chat-list[is-typing-indicator-visible]) .typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.4s;--limebb-chat-typing-opacity-transition-delay:0.3s;--limebb-chat-typing-grid-template-rows-transition-speed:0.46s;grid-template-rows:1.5rem}:host(limebb-chat-list[is-typing-indicator-visible]) .typing-indicator-height-animation div{opacity:1}.date-group limebb-chat-item{--limebb-promoted-action-bar-grid-template-rows:0fr}:host(limebb-chat-list[order=oldest-on-top]) .date-group:first-of-type limebb-chat-item:first-of-type{--limebb-promoted-action-bar-grid-template-rows:1fr}:host(limebb-chat-list[order=newest-on-top]) .date-group:first-of-type limebb-chat-item:first-of-type{--limebb-promoted-action-bar-grid-template-rows:1fr}";
-const LimebbChatListStyle0 = chatListCss;
-
-const ChatList = /*@__PURE__*/ proxyCustomElement(class ChatList extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /**
-         * List of items to display in the feed.
-         * These items must be sorted by their `timestamp` in descending order.
-         *
-         * See the [ChatListItem](#/type/ChatListItem/) type for the kinds of
-         * items that can appear in the list.
-         */
-        this.items = [];
-        /**
-         * - `newest-on-top` displays new messages at the top of the list;
-         * used if the chat input is located on top of the chat interface.
-         * - `oldest-on-top` displays new messages at the bottom of the list (default);
-         * used if the chat input is located at the bottom of the chat interface.
-         *
-         * :::important
-         * Using this prop will _not_ automatically sort the chat items for you!
-         * You still need to pass the items in the correct order (descending order by timestamp).
-         * This prop will only affect the direction of the elements in the user interface,
-         * such as the location of the typing indicator or the scrollbars.
-         * :::
-         */
-        this.order = 'oldest-on-top';
-        this.processedItems = [];
-    }
-    handleItemsChange() {
-        let lastVisited = null;
-        if (this.lastVisitedTimestamp) {
-            lastVisited = parseToUTCDate(this.lastVisitedTimestamp);
-        }
-        this.processedItems = processChatItems(this.items, this.dateTimeFormatter, lastVisited);
-    }
-    componentWillLoad() {
-        this.handleItemsChange();
-    }
-    render() {
-        return (h(Host, { key: '5eb5b8dde1fbec07b3c125752f561180ecbf2d71', class: {
-                'is-empty': this.items.length === 0 &&
-                    !this.isTypingIndicatorVisible,
-            }, "aria-busy": this.isBusy(), role: "log" }, this.renderSpinner(), h("div", { key: '706e0fe4eeb8f8afa40849b0422db06823614697', class: "typing-indicator-height-animation" }, h("div", { key: '6232ce470ae6ef21a87565ceb50f7cb9e3e251e5' }, this.renderTypingIndicator())), this.renderChatItems()));
-    }
-    renderSpinner() {
-        if (!this.loading) {
-            return;
-        }
-        return h("limel-spinner", null);
-    }
-    renderTypingIndicator() {
-        if (!this.isTypingIndicatorVisible) {
-            return;
-        }
-        return h("limebb-typing-indicator", null);
-    }
-    renderChatItems() {
-        return this.processedItems.map((item) => {
-            switch (item.type) {
-                case 'group': {
-                    return this.renderGroup(item);
-                }
-                case 'newItemIndicator': {
-                    return this.renderIndicator();
-                }
-                default: {
-                    return null;
-                }
-            }
-        });
-    }
-    renderGroup(group) {
-        const chatItems = group.items.map((item) => {
-            if (item.type === 'chat') {
-                return this.renderChatItem(item.item);
-            }
-            else if (item.type === 'iconList') {
-                return this.renderIconList(item.item);
-            }
-            else if (item.type === 'newItemIndicator') {
-                return this.renderIndicator();
-            }
-        });
-        const groupChatItems = group.items.filter((i) => i.type === 'chat');
-        const lastChatItem = groupChatItems.at(-1);
-        const stableId = (lastChatItem === null || lastChatItem === void 0 ? void 0 : lastChatItem.type) === 'chat' ? lastChatItem.item.id : '';
-        const sectionKey = 'date-group-' + group.heading + '-' + stableId;
-        const headingId = `heading-${sectionKey}`.replaceAll(/[^a-zA-Z0-9_-]/g, '_');
-        const dateHeading = (h("a", { id: headingId, class: "date-heading", role: "heading", "aria-level": 2 }, group.heading));
-        if (this.order === 'oldest-on-top') {
-            return (h("section", { class: "date-group", key: sectionKey, "aria-labelledby": headingId }, chatItems, dateHeading));
-        }
-        return (h("section", { class: "date-group", key: sectionKey, "aria-labelledby": headingId }, dateHeading, chatItems));
-    }
-    renderChatItem(item) {
-        return (h("limebb-chat-item", { platform: this.platform, context: this.context, item: item, helperText: item.helperText, hasError: item.hasError, key: item.id }));
-    }
-    renderIconList(item) {
-        return h("limebb-chat-icon-list", { item: item, key: item.id });
-    }
-    renderIndicator() {
-        return (h("div", { class: "new-items-indicator", role: "separator" }, h("hr", null), h("h3", null, this.translator.get('webclient.new'))));
-    }
-    isBusy() {
-        return this.loading || this.isTypingIndicatorVisible ? 'true' : 'false';
-    }
-    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 LimebbChatListStyle0; }
-}, [1, "limebb-chat-list", {
-        "platform": [16],
-        "context": [16],
-        "items": [16],
-        "loading": [516],
-        "isTypingIndicatorVisible": [516, "is-typing-indicator-visible"],
-        "lastVisitedTimestamp": [513, "last-visited-timestamp"],
-        "order": [513]
-    }, 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-chat-list", "limebb-chat-icon-list", "limebb-chat-item", "limebb-typing-indicator"];
-    components.forEach(tagName => { switch (tagName) {
-        case "limebb-chat-list":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ChatList);
-            }
-            break;
-        case "limebb-chat-icon-list":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "limebb-chat-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "limebb-typing-indicator":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const LimebbChatList = ChatList;
-const defineCustomElement = defineCustomElement$1;
-
-export { LimebbChatList, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as e,h as i,Host as r,transformTag as a}from"@stencil/core/internal/client";import{n as o}from"./index.esm.js";import{d as n}from"./chat-icon-list.js";import{d as s}from"./chat-item.js";import{d as l}from"./typing-indicator.js";function c(t){return"type"in t&&"iconList"===t.type}function d(t){if("chat"===t.type||"iconList"===t.type)return t.item.timestamp}function m(t){for(const e of t.items)c(e)?t.processedItems.push({type:"iconList",item:e}):t.processedItems.push({type:"chat",item:e});return t}function h(t){const e=[];let i=t.newItemIndicatorInserted;for(const r of t.processedItems){const a=d(r);void 0!==a&&t.lastVisitedTimestamp&&!i&&new Date(a)<=t.lastVisitedTimestamp&&t.hasUnseenNotifications&&(e.push({type:"newItemIndicator"}),i=!0),e.push(r)}return t.processedItems=e,t.newItemIndicatorInserted=i,t}function p(t){const e=[];let i=null,r=null;for(const a of t.processedItems)if("chat"===a.type||"iconList"===a.type){const o=t.dateTimeFormatter.format(new Date(a.item.timestamp),"date");o!==r&&(i&&e.push(i),i={type:"group",groupType:"dateGroup",heading:o,items:[]},r=o),i&&i.items.push(a)}else"newItemIndicator"===a.type&&(i?i.items.push(a):e.push(a));return i&&e.push(i),Object.assign(Object.assign({},t),{processedItems:e})}const b=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.items=[],this.order="oldest-on-top",this.processedItems=[]}handleItemsChange(){let t=null;this.lastVisitedTimestamp&&(t=function(t){return new Date("string"==typeof t?Date.parse(t):t)}(this.lastVisitedTimestamp)),this.processedItems=function(t,e,i){return function(t){return[m,h,p].reduce(((t,e)=>e(t)),t)}({items:t,processedItems:[],lastVisitedTimestamp:i,dateTimeFormatter:e,newItemIndicatorInserted:!1,lastProcessedDate:null,hasUnseenNotifications:t.some((t=>i&&new Date(t.timestamp)>i))}).processedItems}(this.items,this.dateTimeFormatter,t)}componentWillLoad(){this.handleItemsChange()}render(){return i(r,{key:"83ddfe2912d25cf344f63b56f4fe4a65c20b575e",class:{"is-empty":0===this.items.length&&!this.isTypingIndicatorVisible},"aria-busy":this.isBusy(),role:"log"},this.renderSpinner(),i("div",{key:"a4eec0bad09789e93c695680cf6fc0e0eab24465",class:"typing-indicator-height-animation"},i("div",{key:"0895e2f0afce0465513a8c89191128732304b008"},this.renderTypingIndicator())),this.renderChatItems())}renderSpinner(){if(this.loading)return i("limel-spinner",null)}renderTypingIndicator(){if(this.isTypingIndicatorVisible)return i("limebb-typing-indicator",null)}renderChatItems(){return this.processedItems.map((t=>{switch(t.type){case"group":return this.renderGroup(t);case"newItemIndicator":return this.renderIndicator();default:return null}}))}renderGroup(t){const e=t.items.map((t=>"chat"===t.type?this.renderChatItem(t.item):"iconList"===t.type?this.renderIconList(t.item):"newItemIndicator"===t.type?this.renderIndicator():void 0)),r=t.items.filter((t=>"chat"===t.type)).at(-1),a="date-group-"+t.heading+"-"+("chat"===(null==r?void 0:r.type)?r.item.id:""),o=("heading-"+a).replaceAll(/[^a-zA-Z0-9_-]/g,"_"),n=i("a",{id:o,class:"date-heading",role:"heading","aria-level":2},t.heading);return"oldest-on-top"===this.order?i("section",{class:"date-group",key:a,"aria-labelledby":o},e,n):i("section",{class:"date-group",key:a,"aria-labelledby":o},n,e)}renderChatItem(t){return i("limebb-chat-item",{platform:this.platform,context:this.context,item:t,helperText:t.helperText,hasError:t.hasError,key:t.id})}renderIconList(t){return i("limebb-chat-icon-list",{item:t,key:t.id})}renderIndicator(){return i("div",{class:"new-items-indicator",role:"separator"},i("hr",null),i("h3",null,this.translator.get("webclient.new")))}isBusy(){return this.loading||this.isTypingIndicatorVisible?"true":"false"}get dateTimeFormatter(){return this.platform.get(o.DateTimeFormatter)}get translator(){return this.platform.get(o.Translate)}static get watchers(){return{items:[{handleItemsChange:0}]}}static get style(){return'@charset "UTF-8";:host(limebb-chat-list){--limel-top-edge-fade-height:0.75rem;isolation:isolate;--limel-overflow-mask-vertical:linear-gradient(       to bottom,       transparent 0%,       black calc(0% + var(--limel-top-edge-fade-height, 1rem)),       black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),       transparent 100%   );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);box-sizing:border-box;display:flex;gap:0.5rem;height:100%;width:100%;min-width:0;min-height:0;padding:var(--limel-top-edge-fade-height) 0.5rem;overflow:hidden auto}:host(limebb-chat-list.is-empty){padding:0}:host(limebb-chat-list[order=oldest-on-top]){flex-direction:column-reverse}:host(limebb-chat-list[order=newest-on-top]){flex-direction:column}*{box-sizing:border-box}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-group{isolation:isolate;display:flex;flex-direction:inherit;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 auto;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:rgb(var(--contrast-100))}.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:rgb(var(--contrast-100))}.typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.1s;--limebb-chat-typing-opacity-transition-delay:0s;--limebb-chat-typing-grid-template-rows-transition-speed:0.3s;position:sticky;top:0;z-index:1;transition:grid-template-rows var(--limebb-chat-typing-grid-template-rows-transition-speed) ease;display:grid;grid-template-rows:0}.typing-indicator-height-animation div{transition:opacity var(--limebb-chat-typing-opacity-transition-speed) ease var(--limebb-chat-typing-opacity-transition-delay);overflow:hidden;opacity:0}:host(limebb-chat-list[is-typing-indicator-visible]) .typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.4s;--limebb-chat-typing-opacity-transition-delay:0.3s;--limebb-chat-typing-grid-template-rows-transition-speed:0.46s;grid-template-rows:1.5rem}:host(limebb-chat-list[is-typing-indicator-visible]) .typing-indicator-height-animation div{opacity:1}.date-group limebb-chat-item{--limebb-promoted-action-bar-grid-template-rows:0fr}:host(limebb-chat-list[order=oldest-on-top]) .date-group:first-of-type limebb-chat-item:first-of-type{--limebb-promoted-action-bar-grid-template-rows:1fr}:host(limebb-chat-list[order=newest-on-top]) .date-group:first-of-type limebb-chat-item:first-of-type{--limebb-promoted-action-bar-grid-template-rows:1fr}'}},[1,"limebb-chat-list",{platform:[16],context:[16],items:[16],loading:[516],isTypingIndicatorVisible:[516,"is-typing-indicator-visible"],lastVisitedTimestamp:[513,"last-visited-timestamp"],order:[513]},void 0,{items:[{handleItemsChange:0}]}]),g=b,u=function(){"undefined"!=typeof customElements&&["limebb-chat-list","limebb-chat-icon-list","limebb-chat-item","limebb-typing-indicator"].forEach((t=>{switch(t){case"limebb-chat-list":customElements.get(a(t))||customElements.define(a(t),b);break;case"limebb-chat-icon-list":customElements.get(a(t))||n();break;case"limebb-chat-item":customElements.get(a(t))||s();break;case"limebb-typing-indicator":customElements.get(a(t))||l()}}))};export{g as LimebbChatList,u as defineCustomElement}

package/dist/components/limebb-component-config.js

@@ -1,176 +1 @@
-import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
-import { c } from './index.esm.js';
-import { g as get } from './get.js';
-
-const LimeWebComponentTemplate = (props, children) => {
-    const Name = props.name;
-    const classList = props.class;
-    return (h(Name, Object.assign({ class: classList }, getComponentProps(props), { key: props.key }), children));
-};
-function getComponentProps(props) {
-    let componentProps = {};
-    if (props.props) {
-        componentProps = Object.assign({}, props.props);
-    }
-    return Object.assign({ context: props.context, platform: props.platform }, componentProps);
-}
-
-const componentConfigCss = ":host(*){--header-background-color:rgb(var(--contrast-600));display:flex;flex-direction:column;border:1px dashed rgb(var(--contrast-700));overflow:clip;border-radius:0.75rem;background-color:rgb(var(--contrast-500))}*{box-sizing:border-box}.label{margin-top:1rem;margin-bottom:1rem}.config-component{display:grid;column-gap:1rem;row-gap:1rem;margin:1rem;grid-template-columns:repeat(3, minmax(0, 1fr))}";
-const LimebbComponentConfigStyle0 = componentConfigCss;
-
-const ComponentConfig = /*@__PURE__*/ proxyCustomElement(class ComponentConfig extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.change = createEvent(this, "change", 7);
-        this.value = {};
-        /**
-         * If the value should be fetched from the commandbus or the web component registry
-         */
-        this.type = 'component';
-        this.configViewType = 'code';
-        this.findConfigComponent = (name) => {
-            var _a, _b;
-            if (this.type === 'component') {
-                return (_a = this.registry.getAll().find((config) => config.name === name)) === null || _a === void 0 ? void 0 : _a.configComponent;
-            }
-            if (this.type === 'command') {
-                return (_b = this.commandbus.getAll().find((config) => config.id === name)) === null || _b === void 0 ? void 0 : _b.configComponent;
-            }
-        };
-        this.handleChangeMode = (event) => {
-            event.stopPropagation();
-            this.configViewType = event.detail.id;
-        };
-        this.handleCodeEditorChange = (event) => {
-            event.stopPropagation();
-            try {
-                const value = JSON.parse(event.detail);
-                this.change.emit(value);
-            }
-            catch (_a) {
-                // Ignore invalid JSON
-            }
-        };
-    }
-    componentWillLoad() {
-        this.configComponent = this.getComponentName();
-    }
-    componentShouldUpdate(_newValue, _oldValue, property) {
-        return property !== 'formInfo';
-    }
-    watchFormInfo() {
-        this.configComponent = this.getComponentName();
-    }
-    watchconfigComponent(newValue, oldValue) {
-        if (newValue && !oldValue) {
-            this.configViewType = 'config';
-        }
-        if (!newValue) {
-            this.configViewType = 'code';
-        }
-    }
-    getComponentName() {
-        var _a, _b, _c;
-        const section = (_b = (_a = this.formInfo) === null || _a === void 0 ? void 0 : _a.schemaPath.slice(0, -1)) !== null && _b !== void 0 ? _b : [];
-        const path = [...section, this.getNameField()];
-        const name = get((_c = this.formInfo) === null || _c === void 0 ? void 0 : _c.rootValue, path);
-        const configComponent = this.findConfigComponent(name);
-        if (configComponent && customElements.get(configComponent.name)) {
-            return configComponent;
-        }
-    }
-    render() {
-        return [this.renderHeader(), this.renderContent()];
-    }
-    renderHeader() {
-        let buttons = [];
-        if (this.configComponent) {
-            buttons = [
-                {
-                    id: 'config',
-                    title: 'Config',
-                    selected: this.configViewType === 'config',
-                },
-                {
-                    id: 'code',
-                    title: 'Code',
-                    selected: this.configViewType === 'code',
-                },
-            ];
-        }
-        return (h("limel-header", { icon: "edit_property", heading: this.label, subheading: this.helperText }, h("limel-button-group", { slot: "actions", value: buttons, onChange: this.handleChangeMode })));
-    }
-    renderContent() {
-        if (this.configViewType === 'config') {
-            return this.renderConfigComponent();
-        }
-        return this.renderCodeEditor();
-    }
-    renderCodeEditor() {
-        return (h("limel-code-editor", { value: JSON.stringify(this.value, null, '\t'), language: "json", readonly: this.readonly, lineNumbers: true, fold: true, lint: true, onChange: this.handleCodeEditorChange }));
-    }
-    renderConfigComponent() {
-        var _a, _b;
-        return (h(LimeWebComponentTemplate, { class: "config-component", platform: this.platform, context: this.context,
-            // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
-            name: (_a = this.configComponent) === null || _a === void 0 ? void 0 : _a.name, props: Object.assign(Object.assign({}, (_b = this.configComponent) === null || _b === void 0 ? void 0 : _b.props), { value: this.value, required: this.required, readonly: this.readonly, disabled: this.disabled, label: this.label, helperText: this.helperText, formInfo: this.formInfo }) }));
-    }
-    getNameField() {
-        if (this.nameField) {
-            return this.nameField;
-        }
-        const fields = {
-            component: 'name',
-            command: 'id',
-        };
-        return fields[this.type];
-    }
-    get registry() {
-        return this.platform.get(c.WebComponentRegistry);
-    }
-    get commandbus() {
-        return this.platform.get(c.CommandBus);
-    }
-    static get watchers() { return {
-        "formInfo": ["watchFormInfo"],
-        "configComponent": ["watchconfigComponent"]
-    }; }
-    static get style() { return LimebbComponentConfigStyle0; }
-}, [1, "limebb-component-config", {
-        "platform": [16],
-        "context": [16],
-        "value": [16],
-        "required": [4],
-        "readonly": [4],
-        "disabled": [4],
-        "label": [1],
-        "helperText": [1, "helper-text"],
-        "formInfo": [16],
-        "type": [1],
-        "nameField": [1, "name-field"],
-        "configComponent": [32],
-        "configViewType": [32]
-    }, undefined, {
-        "formInfo": ["watchFormInfo"],
-        "configComponent": ["watchconfigComponent"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["limebb-component-config"];
-    components.forEach(tagName => { switch (tagName) {
-        case "limebb-component-config":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ComponentConfig);
-            }
-            break;
-    } });
-}
-
-const LimebbComponentConfig = ComponentConfig;
-const defineCustomElement = defineCustomElement$1;
-
-export { LimebbComponentConfig, defineCustomElement };
+import{h as t,proxyCustomElement as e,HTMLElement as o,createEvent as n,transformTag as i}from"@stencil/core/internal/client";import{n as r}from"./index.esm.js";import{g as s}from"./get.js";const c=(e,o)=>t(e.name,Object.assign({class:e.class},function(t){let e={};return t.props&&(e=Object.assign({},t.props)),Object.assign({context:t.context,platform:t.platform},e)}(e),{key:e.key}),o),l=e(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.change=n(this,"change",7),this.value={},this.type="component",this.configViewType="code",this.findConfigComponent=t=>{var e,o;return"component"===this.type?null===(e=this.registry.getAll().find((e=>e.name===t)))||void 0===e?void 0:e.configComponent:"command"===this.type?null===(o=this.commandbus.getAll().find((e=>e.id===t)))||void 0===o?void 0:o.configComponent:void 0},this.handleChangeMode=t=>{t.stopPropagation(),this.configViewType=t.detail.id},this.handleCodeEditorChange=t=>{t.stopPropagation();try{const e=JSON.parse(t.detail);this.change.emit(e)}catch(t){}}}componentWillLoad(){this.configComponent=this.getComponentName()}componentShouldUpdate(t,e,o){return"formInfo"!==o}watchFormInfo(){this.configComponent=this.getComponentName()}watchconfigComponent(t,e){t&&!e&&(this.configViewType="config"),t||(this.configViewType="code")}getComponentName(){var t,e,o;const n=[...null!==(e=null===(t=this.formInfo)||void 0===t?void 0:t.schemaPath.slice(0,-1))&&void 0!==e?e:[],this.getNameField()],i=s(null===(o=this.formInfo)||void 0===o?void 0:o.rootValue,n),r=this.findConfigComponent(i);if(r&&customElements.get(r.name))return r}render(){return[this.renderHeader(),this.renderContent()]}renderHeader(){let e=[];return this.configComponent&&(e=[{id:"config",title:"Config",selected:"config"===this.configViewType},{id:"code",title:"Code",selected:"code"===this.configViewType}]),t("limel-header",{icon:"edit_property",heading:this.label,subheading:this.helperText},t("limel-button-group",{slot:"actions",value:e,onChange:this.handleChangeMode}))}renderContent(){return"config"===this.configViewType?this.renderConfigComponent():this.renderCodeEditor()}renderCodeEditor(){return t("limel-code-editor",{value:JSON.stringify(this.value,null,"\t"),language:"json",readonly:this.readonly,lineNumbers:!0,fold:!0,lint:!0,onChange:this.handleCodeEditorChange})}renderConfigComponent(){var e,o;return t(c,{class:"config-component",platform:this.platform,context:this.context,name:null===(e=this.configComponent)||void 0===e?void 0:e.name,props:Object.assign(Object.assign({},null===(o=this.configComponent)||void 0===o?void 0:o.props),{value:this.value,required:this.required,readonly:this.readonly,disabled:this.disabled,label:this.label,helperText:this.helperText,formInfo:this.formInfo})})}getNameField(){return this.nameField?this.nameField:{component:"name",command:"id"}[this.type]}get registry(){return this.platform.get(r.WebComponentRegistry)}get commandbus(){return this.platform.get(r.CommandBus)}static get watchers(){return{formInfo:[{watchFormInfo:0}],configComponent:[{watchconfigComponent:0}]}}static get style(){return":host(*){--header-background-color:rgb(var(--contrast-600));display:flex;flex-direction:column;border:1px dashed rgb(var(--contrast-700));overflow:clip;border-radius:0.75rem;background-color:rgb(var(--contrast-500))}*{box-sizing:border-box}.label{margin-top:1rem;margin-bottom:1rem}.config-component{display:grid;column-gap:1rem;row-gap:1rem;margin:1rem;grid-template-columns:repeat(3, minmax(0, 1fr))}"}},[1,"limebb-component-config",{platform:[16],context:[16],value:[16],required:[4],readonly:[4],disabled:[4],label:[1],helperText:[1,"helper-text"],formInfo:[16],type:[1],nameField:[1,"name-field"],configComponent:[32],configViewType:[32]},void 0,{formInfo:[{watchFormInfo:0}],configComponent:[{watchconfigComponent:0}]}]),m=l,h=function(){"undefined"!=typeof customElements&&["limebb-component-config"].forEach((t=>{"limebb-component-config"===t&&(customElements.get(i(t))||customElements.define(i(t),l))}))};export{m as LimebbComponentConfig,h as defineCustomElement}