@xplortech/apollo-core 2.11.0 → 3.0.0

package/dist/esm/xpl-list-item.entry.js

@@ -0,0 +1,458 @@
+import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment, g as getElement } from './index-ukZKsqqq.js';
+
+function emptyXplListItemSlotPresence() {
+    return {
+        actions: false,
+        avatar: false,
+        badges: false,
+        details: false,
+        errorText: false,
+        metadata: false,
+        stackedExtra1: false,
+        stackedExtra2: false,
+        stackedExtra3: false,
+        titleBadge: false,
+        title: false,
+    };
+}
+function renderLegacyAvatarCell(item) {
+    if (!item.avatar || typeof item.avatar !== 'string') {
+        return null;
+    }
+    return item.avatar.slice(0, 1) === '/' || item.avatar.slice(0, 4) === 'http' ? (h("xpl-avatar", { src: item.avatar, name: item.title })) : (h("xpl-avatar", { name: item.title }, item.avatar));
+}
+const XplListItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.itemDragEnd = createEvent(this, "itemDragEnd", 7);
+        this.itemDragStart = createEvent(this, "itemDragStart", 7);
+        this.itemDrop = createEvent(this, "itemDrop", 7);
+        this.itemSelect = createEvent(this, "itemSelect", 7);
+        this.dragFromHandle = false;
+        this.slotPresence = emptyXplListItemSlotPresence();
+        this.isKeyboardMode = false;
+        this.disabled = false;
+        this.error = false;
+        this.hidden = false;
+        this.keyboardActive = false;
+        this.reorderable = false;
+        this.selectable = false;
+        this.selected = false;
+        this.showDivider = false;
+        this.handleDragStart = (e) => {
+            if (this.disabled) {
+                e.preventDefault();
+                return;
+            }
+            if (!this.dragFromHandle) {
+                e.preventDefault();
+                return;
+            }
+            this.detachDragHandlePointerReleaseListeners();
+            if (e.dataTransfer) {
+                e.dataTransfer.effectAllowed = 'move';
+                e.dataTransfer.setData('text/plain', this.itemId || this.el.id || '');
+            }
+            const wrapper = this.el.querySelector('.xpl-list-item__wrapper');
+            wrapper?.classList.add('dragging');
+            this.itemDragStart.emit({ itemId: this.itemId, item: this.el });
+        };
+        this.handleDrop = (e) => {
+            if (this.disabled) {
+                return;
+            }
+            e.preventDefault();
+            this.detachDragHandlePointerReleaseListeners();
+            this.dragFromHandle = false;
+            this.itemDrop.emit({ itemId: this.itemId, item: this.el });
+        };
+        this.handleDragOver = (e) => {
+            if (this.disabled) {
+                return;
+            }
+            e.preventDefault();
+            if (e.dataTransfer && this.reorderable) {
+                e.dataTransfer.dropEffect = 'move';
+            }
+        };
+        this.handleDragEnter = (e) => {
+            if (this.disabled) {
+                return;
+            }
+            e.preventDefault();
+            const wrapper = this.el.querySelector('.xpl-list-item__wrapper');
+            wrapper?.classList.add('drag-over');
+        };
+        this.handleDragLeave = (e) => {
+            if (this.disabled) {
+                return;
+            }
+            const wrapper = this.el.querySelector('.xpl-list-item__wrapper');
+            if (wrapper && !wrapper.contains(e.relatedTarget)) {
+                wrapper.classList.remove('drag-over');
+            }
+        };
+        this.handleDragEnd = () => {
+            this.detachDragHandlePointerReleaseListeners();
+            this.dragFromHandle = false;
+            const wrapper = this.el.querySelector('.xpl-list-item__wrapper');
+            wrapper?.classList.remove('dragging', 'drag-over');
+            const parent = this.el.parentElement;
+            if (parent) {
+                Array.from(parent.children).forEach((sibling) => {
+                    if (sibling.tagName.toLowerCase() !== 'xpl-list-item') {
+                        return;
+                    }
+                    const siblingWrapper = sibling.querySelector('.xpl-list-item__wrapper');
+                    siblingWrapper?.classList.remove('drag-over');
+                });
+            }
+            this.itemDragEnd.emit({ itemId: this.itemId, item: this.el });
+        };
+        this.handleDragHandleMouseDown = () => {
+            if (this.disabled) {
+                return;
+            }
+            this.detachDragHandlePointerReleaseListeners();
+            this.dragFromHandle = true;
+            const onPointerEnd = () => {
+                this.detachDragHandlePointerReleaseListeners();
+                this.dragFromHandle = false;
+            };
+            document.addEventListener('pointerup', onPointerEnd, true);
+            document.addEventListener('pointercancel', onPointerEnd, true);
+            this.dragHandlePointerReleaseCleanup = () => {
+                document.removeEventListener('pointerup', onPointerEnd, true);
+                document.removeEventListener('pointercancel', onPointerEnd, true);
+            };
+            this.el.dispatchEvent(new CustomEvent('xplListItemReorder', {
+                bubbles: true,
+                composed: true,
+                detail: { exitKeyboardMode: true },
+            }));
+        };
+        this.preventRowLinkNavigation = (ev) => {
+            if (this.href) {
+                ev.preventDefault();
+                ev.stopPropagation();
+            }
+        };
+        this.handleMouseDown = () => {
+            if (this.isKeyboardMode) {
+                this.el.dispatchEvent(new CustomEvent('xplListItemReorder', {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        itemId: this.itemId,
+                        exitKeyboardMode: true,
+                    },
+                }));
+            }
+        };
+        this.handleDragHandleKeyDown = (e) => {
+            if (this.disabled) {
+                if (e.key === 'Escape' && this.isKeyboardMode) {
+                    e.preventDefault();
+                    this.el.dispatchEvent(new CustomEvent('xplListItemReorder', {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            itemId: this.itemId,
+                            exitKeyboardMode: true,
+                        },
+                    }));
+                }
+                return;
+            }
+            if (e.key === 'Escape') {
+                if (this.isKeyboardMode) {
+                    e.preventDefault();
+                    this.el.dispatchEvent(new CustomEvent('xplListItemReorder', {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            itemId: this.itemId,
+                            exitKeyboardMode: true,
+                        },
+                    }));
+                }
+                return;
+            }
+            if (this.isKeyboardMode) {
+                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    this.el.dispatchEvent(new CustomEvent('xplListItemReorder', {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            direction: e.key === 'ArrowUp' ? 'up' : 'down',
+                            item: this.el,
+                            itemId: this.itemId,
+                            keyboardMode: true,
+                        },
+                    }));
+                }
+                return;
+            }
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.el.dispatchEvent(new CustomEvent('xplListItemReorder', {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        item: this.el,
+                        itemId: this.itemId,
+                        keyboardMode: true,
+                    },
+                }));
+            }
+        };
+        this.handleRadioChange = () => {
+            if (!this.disabled) {
+                this.itemSelect.emit({ itemId: this.itemId });
+            }
+        };
+        this.handleRadioClick = (ev) => {
+            if (this.href) {
+                ev.stopPropagation();
+            }
+        };
+    }
+    handleItemChange() {
+        this.updateSlotPresence();
+    }
+    handleKeyboardActiveChange(newValue) {
+        this.isKeyboardMode = newValue;
+    }
+    handleSelectedChange(newValue) {
+        const radio = this.el.querySelector('.xpl-list-item__selectable input[type="radio"]');
+        if (radio instanceof HTMLInputElement && radio.checked !== newValue) {
+            radio.checked = newValue;
+        }
+    }
+    handleTitleBadgeVariantChange() {
+        this.updateSlotPresence();
+    }
+    connectedCallback() {
+        this.el.addEventListener('mousedown', this.handleMouseDown, true);
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener('mousedown', this.handleMouseDown, true);
+        this.detachDragHandlePointerReleaseListeners();
+    }
+    componentWillLoad() {
+        this.updateSlotPresence();
+        this.isKeyboardMode = !!this.keyboardActive;
+        const attrItemId = this.el.getAttribute('item-id');
+        if (attrItemId && !this.itemId) {
+            this.itemId = attrItemId;
+        }
+        if (this.el.id && !this.itemId) {
+            this.itemId = this.el.id;
+        }
+    }
+    componentDidRender() {
+        this.syncReorderDragHandleA11y();
+    }
+    handleSlotChange() {
+        this.updateSlotPresence();
+    }
+    updateSlotPresence() {
+        const attrVariant = this.el.getAttribute('title-badge-variant') ||
+            this.el.getAttribute('titlebadgevariant');
+        this.slotPresence = {
+            actions: this.hasSlot('actions'),
+            avatar: this.hasSlot('avatar'),
+            badges: this.hasSlot('badges'),
+            details: this.hasSlot('details'),
+            errorText: this.hasSlot('error-text'),
+            metadata: this.hasSlot('metadata'),
+            stackedExtra1: this.hasSlot('stacked-extra-1'),
+            stackedExtra2: this.hasSlot('stacked-extra-2'),
+            stackedExtra3: this.hasSlot('stacked-extra-3'),
+            title: this.hasSlot('title'),
+            titleBadge: !!((this.titleBadgeVariant && String(this.titleBadgeVariant).length > 0) ||
+                (attrVariant && attrVariant.length > 0)),
+        };
+    }
+    detachDragHandlePointerReleaseListeners() {
+        if (this.dragHandlePointerReleaseCleanup) {
+            this.dragHandlePointerReleaseCleanup();
+            this.dragHandlePointerReleaseCleanup = undefined;
+        }
+    }
+    hasSlot(name) {
+        const hasDirectChildWithSlot = Array.from(this.el.children).some((c) => c.getAttribute('slot') === name);
+        if (hasDirectChildWithSlot) {
+            return true;
+        }
+        const slotEl = Array.from(this.el.querySelectorAll(`slot[name="${name}"]`)).find((s) => s.closest('xpl-list-item') === this.el);
+        if (slotEl && typeof slotEl.assignedNodes === 'function') {
+            return slotEl.assignedNodes({ flatten: true }).length > 0;
+        }
+        return false;
+    }
+    getTitleSlotAccessibleText() {
+        const directTitle = Array.from(this.el.children).find((c) => c.getAttribute('slot') === 'title');
+        if (directTitle) {
+            return directTitle.textContent ?? undefined;
+        }
+        const slotEl = Array.from(this.el.querySelectorAll('slot[name="title"]')).find((s) => s.closest('xpl-list-item') === this.el);
+        if (slotEl && typeof slotEl.assignedNodes === 'function') {
+            const combined = slotEl
+                .assignedNodes({ flatten: true })
+                .map((node) => {
+                if (node.nodeType === Node.TEXT_NODE) {
+                    return node.textContent ?? '';
+                }
+                if (node.nodeType === Node.ELEMENT_NODE) {
+                    return node.textContent ?? '';
+                }
+                return '';
+            })
+                .join('')
+                .trim();
+            return combined || undefined;
+        }
+        return undefined;
+    }
+    getRowIdForAccessibleLabel() {
+        const fromProp = this.itemId?.trim();
+        if (fromProp) {
+            return fromProp;
+        }
+        const fromAttr = this.el.getAttribute('item-id')?.trim();
+        if (fromAttr) {
+            return fromAttr;
+        }
+        const fromId = this.el.id?.trim();
+        if (fromId) {
+            return fromId;
+        }
+        return '';
+    }
+    getSelectableRadioLabel() {
+        const rowId = this.getRowIdForAccessibleLabel();
+        if (this.slotPresence.title) {
+            const titleText = this.getTitleSlotAccessibleText()?.trim();
+            if (titleText) {
+                return titleText;
+            }
+            if (rowId) {
+                return `Select ${rowId}`;
+            }
+            return 'Select list item';
+        }
+        if (rowId) {
+            return `Select ${rowId}`;
+        }
+        return 'Select list item';
+    }
+    renderPropBasedItem() {
+        const { item } = this;
+        if (!item) {
+            return null;
+        }
+        const hasRight = item.avatars || item.badges || item.subtext;
+        const Tag = item.href ? 'a' : 'div';
+        const linkProps = item.href ? { href: item.href } : {};
+        return (h(Host, { role: "listitem", class: {
+                'xpl-list-item': true,
+                'xpl-list-item--error': !!this.error,
+                'xpl-list-item--disabled': !!this.disabled,
+            }, hidden: this.hidden }, renderLegacyAvatarCell(item), h(Tag, { class: "xpl-list-item-content", ...linkProps }, h("div", { class: "xpl-list-left" }, h("div", null, h("h4", null, item.title), item.metadata && (h("ul", { class: "xpl-list-item-metadata" }, item.metadata.map((d) => {
+            if (typeof d === 'string') {
+                return h("li", null, d);
+            }
+            return (h("li", null, h("xpl-icon", { icon: d.icon }), " ", d.text));
+        }))))), hasRight && (h("div", { class: "xpl-list-right" }, item.subtext && (h("div", { class: "xpl-list-item-subtext" }, item.subtext)), item.avatars && (h("div", { class: "xpl-avatar-group xpl-avatar-group--s" }, item.avatars.map((a) => (h("img", { src: a, alt: "" }))))), item.badges &&
+            item.badges.map((b) => {
+                if (typeof b === 'string') {
+                    return h("xpl-badge", null, b);
+                }
+                return (h("xpl-badge", { dot: b.dot, variant: b.variant }, b.text));
+            }))), item.href ? (h("span", { class: "xpl-list-item__link-chevron", "aria-hidden": "true" }, h("xpl-icon", { icon: "chevron-right", size: 12 }))) : null)));
+    }
+    renderTitleBadge() {
+        if (!this.slotPresence.titleBadge) {
+            return null;
+        }
+        const variant = (this.titleBadgeVariant ||
+            this.el.getAttribute('title-badge-variant') ||
+            this.el.getAttribute('titlebadgevariant') ||
+            'purple');
+        return (h("div", { class: "xpl-list-item__title-badge" }, h("xpl-badge", { dotOnly: true, size: "small", variant: variant })));
+    }
+    renderSlotBasedItem() {
+        const hasRightSideContent = this.slotPresence.details || this.slotPresence.badges || this.slotPresence.actions;
+        const hasStackedContent = this.slotPresence.title ||
+            this.slotPresence.metadata ||
+            this.slotPresence.stackedExtra1 ||
+            this.slotPresence.stackedExtra2 ||
+            this.slotPresence.stackedExtra3;
+        const radioGroupName = this.radioName || this.el.getAttribute('radio-name') || '';
+        const reorderActive = this.reorderable && !this.disabled;
+        const wrapperClass = 'xpl-list-item__wrapper';
+        const dragSurfaceProps = {
+            draggable: reorderActive,
+            onDragStart: this.handleDragStart,
+            onDragOver: this.handleDragOver,
+            onDragEnter: this.handleDragEnter,
+            onDragLeave: this.handleDragLeave,
+            onDrop: this.handleDrop,
+            onDragEnd: this.handleDragEnd,
+        };
+        const rowBody = (h(Fragment, null, reorderActive && (h("div", { class: "xpl-list-item__reorderable" }, h("xpl-button", { class: {
+                'xpl-list-item__drag-handle': true,
+                'xpl-list-item__drag-handle--keyboard-mode': this.isKeyboardMode,
+            }, type: "button", variant: "tertiary", sentiment: "neutral", iconOnly: true, icon: this.isKeyboardMode ? 'caret-expand-y' : 'grip-dots-vertical', disabled: this.disabled, onClick: this.preventRowLinkNavigation, onMouseDown: this.handleDragHandleMouseDown, onKeyDown: this.handleDragHandleKeyDown }))), this.selectable && radioGroupName ? (h("div", { class: "xpl-list-item__selectable", onClick: this.handleRadioClick }, h("xpl-radio", { checked: this.selected, disabled: this.disabled, name: radioGroupName, value: this.itemId ?? '', onRadioChange: this.handleRadioChange }, this.getSelectableRadioLabel()))) : null, this.slotPresence.avatar && (h("div", { class: "xpl-list-item__avatar", onClick: this.preventRowLinkNavigation }, h("slot", { name: "avatar" }))), hasStackedContent && (h("div", { class: "xpl-list-item__stacked" }, (this.slotPresence.title || this.slotPresence.titleBadge) && (h("div", { class: "xpl-list-item__title-row" }, h("div", { class: "xpl-list-item__title-wrapper" }, this.renderTitleBadge(), h("slot", { name: "title" })))), this.showDivider && h("xpl-divider", null), this.slotPresence.metadata && (h("div", { class: "xpl-list-item__metadata-row" }, h("slot", { name: "metadata" }))), this.slotPresence.stackedExtra1 && (h("div", { class: "xpl-list-item__stacked-extra-1" }, h("slot", { name: "stacked-extra-1" }))), this.slotPresence.stackedExtra2 && (h("div", { class: "xpl-list-item__stacked-extra-2" }, h("slot", { name: "stacked-extra-2" }))), this.slotPresence.stackedExtra3 && (h("div", { class: "xpl-list-item__stacked-extra-3" }, h("slot", { name: "stacked-extra-3" }))))), hasRightSideContent && (h("div", { class: "xpl-list-item__right" }, this.slotPresence.details && (h("div", { class: "xpl-list-item__details" }, h("slot", { name: "details" }))), this.slotPresence.badges && (h("div", { class: "xpl-list-item__badges" }, h("slot", { name: "badges" }))), this.slotPresence.actions && (h("div", { class: "xpl-list-item__actions", onClick: this.preventRowLinkNavigation }, h("slot", { name: "actions" }))))), this.href ? (h("span", { class: "xpl-list-item__link-chevron", "aria-hidden": "true" }, h("xpl-icon", { icon: "chevron-right", size: 12 }))) : null));
+        return (h(Host, { class: {
+                'xpl-list-item': true,
+                'xpl-list-item--error': !!(this.error || this.slotPresence.errorText),
+                'xpl-list-item--disabled': !!this.disabled,
+                'xpl-list-item--slot-based': true,
+                'xpl-list-item--selected': !!this.selected,
+            }, hidden: this.hidden }, this.href ? (h("div", { role: "listitem", class: "xpl-list-item__listitem-shell" }, h("a", { class: wrapperClass, href: this.href, ...dragSurfaceProps }, rowBody))) : (h("div", { role: "listitem", class: wrapperClass, ...dragSurfaceProps }, rowBody)), this.slotPresence.errorText && (h("div", { class: "xpl-list-item__error-text" }, h("xpl-icon", { icon: "circle-warning", size: 16 }), h("slot", { name: "error-text" })))));
+    }
+    syncReorderDragHandleA11y() {
+        if (!this.reorderable || this.disabled) {
+            return;
+        }
+        const host = this.el.querySelector('xpl-button.xpl-list-item__drag-handle');
+        const nativeBtn = host?.querySelector('button');
+        if (!nativeBtn) {
+            return;
+        }
+        const label = this.isKeyboardMode
+            ? 'Press arrow up or down to reorder, Escape to exit'
+            : 'Press Enter or Space to activate keyboard reorder mode, or drag to reorder';
+        nativeBtn.setAttribute('aria-label', label);
+        nativeBtn.setAttribute('aria-pressed', this.isKeyboardMode ? 'true' : 'false');
+    }
+    render() {
+        if (this.hidden) {
+            return h(Host, { hidden: true });
+        }
+        if (this.item) {
+            return this.renderPropBasedItem();
+        }
+        return this.renderSlotBasedItem();
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "item": [{
+                "handleItemChange": 0
+            }],
+        "keyboardActive": [{
+                "handleKeyboardActiveChange": 0
+            }],
+        "selected": [{
+                "handleSelectedChange": 0
+            }],
+        "titleBadgeVariant": [{
+                "handleTitleBadgeVariantChange": 0
+            }]
+    }; }
+};
+
+export { XplListItem as xpl_list_item };