le-kit 0.5.2 → 0.5.4

package/dist/collection/components/le-slot/le-slot.js

@@ -1,638 +0,0 @@
-import { h, Host, getAssetPath } from "@stencil/core";
-import { classnames, observeModeChanges } from "../../utils/utils";
-import { getLeKitConfig } from "../../global/app";
-/**
- * Slot placeholder component for admin/CMS mode.
- *
- * This component renders a visual placeholder for slots when in admin mode,
- * allowing CMS systems to show available drop zones for content or inline editing.
- *
- * In non-admin mode, this component renders nothing and acts as a passthrough.
- *
- * @slot - Default slot for placeholder content or drop zone UI
- *
- * @cmsInternal true
- * @cmsCategory System
- */
-export class LeSlot {
-    el;
-    /**
-     * The type of slot content.
-     * - `slot`: Default, shows a dropzone for components (default)
-     * - `text`: Shows a single-line text input
-     * - `textarea`: Shows a multi-line text area
-     */
-    type = 'slot';
-    /**
-     * The name of the slot this placeholder represents.
-     * Should match the slot name in the parent component.
-     */
-    name = '';
-    /**
-     * Label to display in admin mode.
-     * If not provided, the slot name will be used.
-     */
-    label;
-    /**
-     * Description of what content this slot accepts.
-     * Shown in admin mode to guide content editors.
-     */
-    description;
-    /**
-     * Comma-separated list of allowed component tags for this slot.
-     * Used by CMS to filter available components.
-     *
-     * @example "le-card,le-button,le-text"
-     */
-    allowedComponents;
-    /**
-     * Whether multiple components can be dropped in this slot.
-     */
-    multiple = true;
-    /**
-     * Whether this slot is required to have content.
-     */
-    required = false;
-    /**
-     * Placeholder text for text/textarea inputs in admin mode.
-     */
-    placeholder;
-    /**
-     * The HTML tag to create when there's no slotted element.
-     * Used with type="text" or type="textarea" to auto-create elements.
-     *
-     * @example "h3" - creates <h3 slot="header">content</h3>
-     * @example "p" - creates <p slot="content">content</p>
-     */
-    tag;
-    /**
-     * CSS styles for the slot dropzone container.
-     * Useful for layouts - e.g., "flex-direction: row" for horizontal stacks.
-     * Only applies in admin mode for type="slot".
-     */
-    slotStyle;
-    /**
-     * Internal state to track admin mode
-     */
-    adminMode = false;
-    /**
-     * Internal state for text input value (synced from slot content)
-     */
-    textValue = '';
-    /**
-     * Whether the current textValue contains valid HTML
-     */
-    isValidHtml = true;
-    /**
-     * Available components loaded from Custom Elements Manifest
-     */
-    availableComponents = [];
-    /**
-     * Whether the component picker popover is open
-     */
-    pickerOpen = false;
-    /**
-     * Reference to the slot element to access assignedNodes
-     */
-    slotRef;
-    /**
-     * The original slotted element (e.g., <h3 slot="header">)
-     */
-    slottedElement;
-    /**
-     * Emitted when text content changes in admin mode.
-     * The event detail contains the new text value and validity.
-     */
-    leSlotChange;
-    disconnectModeObserver;
-    connectedCallback() {
-        this.disconnectModeObserver = observeModeChanges(this.el, mode => {
-            const wasAdmin = this.adminMode;
-            this.adminMode = mode === 'admin';
-            // When entering admin mode, read content from slotted elements
-            if (this.adminMode && !wasAdmin) {
-                // Need to wait for render to access slot ref
-                requestAnimationFrame(() => this.readSlottedContent());
-                // Load available components for the component picker
-                if (this.type === 'slot') {
-                    this.loadAvailableComponents();
-                }
-            }
-        });
-    }
-    disconnectedCallback() {
-        this.disconnectModeObserver?.();
-    }
-    /**
-     * Flag to prevent re-reading content right after we updated it
-     */
-    isUpdating = false;
-    /**
-     * Read content from slotted elements via assignedNodes()
-     */
-    readSlottedContent() {
-        if (!this.slotRef)
-            return;
-        // Skip if we just updated the content ourselves
-        if (this.isUpdating) {
-            this.isUpdating = false;
-            return;
-        }
-        const assignedNodes = this.slotRef.assignedNodes({ flatten: true });
-        // For text/textarea types, we want to edit the innerHTML of slotted elements
-        if (this.type === 'text' || this.type === 'textarea') {
-            // Find the first element node (skip text nodes that are just whitespace)
-            const elementNode = assignedNodes.find(node => node.nodeType === Node.ELEMENT_NODE);
-            if (elementNode) {
-                // Only update textValue if slotted element changed or we don't have one yet
-                if (this.slottedElement !== elementNode) {
-                    this.slottedElement = elementNode;
-                    this.textValue = elementNode.innerHTML?.trim() || '';
-                    // console.log(`[le-slot "${this.name}"] Read slotted content:`, this.textValue);
-                }
-            }
-            else {
-                // No element, check for direct text content
-                const textContent = assignedNodes
-                    .filter(node => node.nodeType === Node.TEXT_NODE)
-                    .map(node => node.textContent)
-                    .join('')
-                    .trim();
-                if (textContent && !this.textValue) {
-                    this.textValue = textContent;
-                    // console.log(`[le-slot "${this.name}"] Read text content:`, this.textValue);
-                }
-            }
-        }
-    }
-    /**
-     * Validates if a string contains valid HTML
-     */
-    validateHtml(html) {
-        // Empty string is valid
-        if (!html.trim())
-            return true;
-        // Create a template element to parse the HTML
-        const template = document.createElement('template');
-        template.innerHTML = html;
-        // Check that we don't have obviously broken HTML
-        // Count opening and closing tags for common elements
-        const openTags = (html.match(/<[a-z][^>]*(?<!\/)>/gi) || []).length;
-        const closeTags = (html.match(/<\/[a-z][^>]*>/gi) || []).length;
-        const selfClosing = (html.match(/<[a-z][^>]*\/>/gi) || []).length;
-        // Simple validation: opening tags (minus self-closing) should roughly match closing tags
-        // Allow some tolerance for void elements like <br>, <img>, etc.
-        const voidElements = (html.match(/<(br|hr|img|input|meta|link|area|base|col|embed|param|source|track|wbr)[^>]*>/gi) || []).length;
-        const effectiveOpenTags = openTags - selfClosing - voidElements;
-        // If difference is too large, HTML is likely broken
-        if (Math.abs(effectiveOpenTags - closeTags) > 1) {
-            return false;
-        }
-        return true;
-    }
-    handleTextInput = (event) => {
-        const target = event.target;
-        this.textValue = target.value;
-        this.isValidHtml = this.validateHtml(this.textValue);
-        if (this.isValidHtml) {
-            // Set flag to prevent slotchange from re-reading what we just wrote
-            this.isUpdating = true;
-            console.log('Updating text value:', this.textValue, 'slottedElement:', this.slottedElement);
-            if (this.slottedElement) {
-                // Update existing slotted element's innerHTML
-                this.slottedElement.innerHTML = this.textValue;
-            }
-            else if (this.tag && this.textValue) {
-                // No slotted element exists
-                // If the slot doesn't have a name, then it's the default slot
-                // remove the existing non-slotted content (text nodes and elements without slot attribute)
-                const rootNode = this.el.getRootNode();
-                if (!this.name && rootNode instanceof ShadowRoot) {
-                    const hostComponent = rootNode.host;
-                    Array.from(hostComponent.childNodes).forEach(node => {
-                        if (node.nodeType === Node.TEXT_NODE || (node.nodeType === Node.ELEMENT_NODE && !node.hasAttribute('slot'))) {
-                            node.remove();
-                        }
-                    });
-                }
-                // create one using the specified tag
-                this.createSlottedElement();
-            }
-            else if (this.textValue) {
-                // no tag specified - just replace everything in the host component
-                const rootNode = this.el.getRootNode();
-                if (rootNode instanceof ShadowRoot) {
-                    const hostComponent = rootNode.host;
-                    hostComponent.innerHTML = this.textValue;
-                }
-            }
-        }
-        this.leSlotChange.emit({
-            name: this.name,
-            value: this.textValue,
-            isValid: this.isValidHtml,
-        });
-    };
-    /**
-     * Create a new slotted element when none exists.
-     * The element is appended to the host component's light DOM.
-     */
-    createSlottedElement() {
-        if (!this.tag)
-            return;
-        // Find the host component (le-card, etc.) by traversing up through shadow DOM
-        // le-slot is inside le-card's shadow DOM, so we need to find le-card's host
-        const rootNode = this.el.getRootNode();
-        if (!(rootNode instanceof ShadowRoot))
-            return;
-        const hostComponent = rootNode.host;
-        if (!hostComponent)
-            return;
-        // Create the new element
-        const newElement = document.createElement(this.tag);
-        newElement.innerHTML = this.textValue;
-        // Set the slot attribute if this is a named slot
-        if (this.name) {
-            newElement.setAttribute('slot', this.name);
-        }
-        // Append to the host component's light DOM
-        hostComponent.appendChild(newElement);
-        // Store reference to the new element
-        this.slottedElement = newElement;
-        // console.log(`[le-slot "${this.name}"] Created new <${this.tag}> element`);
-    }
-    /**
-     * Load available components from Custom Elements Manifest
-     */
-    async loadAvailableComponents() {
-        try {
-            const { manifestFile } = getLeKitConfig();
-            const manifestFileResolved = getAssetPath(`./assets/${manifestFile}`);
-            const response = await fetch(manifestFileResolved);
-            const manifest = await response.json();
-            const components = [];
-            const allowedList = this.allowedComponents?.split(',').map(s => s.trim()) || [];
-            for (const module of manifest.modules) {
-                for (const declaration of module.declarations || []) {
-                    if (declaration.tagName && declaration.customElement) {
-                        // Skip internal components (le-slot, le-component, le-popover)
-                        const isInternal = ['le-slot', 'le-component', 'le-popover'].includes(declaration.tagName);
-                        if (isInternal)
-                            continue;
-                        // If allowedComponents is specified, filter by it
-                        if (allowedList.length > 0 && !allowedList.includes(declaration.tagName)) {
-                            continue;
-                        }
-                        components.push({
-                            tagName: declaration.tagName,
-                            name: this.formatComponentName(declaration.tagName),
-                            description: declaration.description || '',
-                        });
-                    }
-                }
-            }
-            this.availableComponents = components || [];
-        }
-        catch (error) {
-            console.warn('[le-slot] Failed to load component manifest:', error);
-        }
-    }
-    /**
-     * Format a tag name into a display name
-     * e.g., 'le-card' -> 'Card'
-     */
-    formatComponentName(tagName) {
-        return tagName
-            .replace(/^le-/, '')
-            .split('-')
-            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-            .join(' ');
-    }
-    /**
-     * Add a new component to the slot
-     */
-    addComponent(tagName) {
-        // Find the host component by traversing up through shadow DOM
-        const rootNode = this.el.getRootNode();
-        if (!(rootNode instanceof ShadowRoot))
-            return;
-        const hostComponent = rootNode.host;
-        if (!hostComponent)
-            return;
-        // Create the new component element
-        const newElement = document.createElement(tagName);
-        // Set the slot attribute if this is a named slot
-        if (this.name) {
-            newElement.setAttribute('slot', this.name);
-        }
-        // Append to the host component's light DOM
-        hostComponent.appendChild(newElement);
-        // Emit change event so the page can save
-        this.leSlotChange.emit({
-            name: this.name,
-            value: hostComponent.innerHTML,
-            isValid: true,
-        });
-    }
-    /**
-     * Handle slot change event to re-read content when nodes are assigned
-     */
-    handleSlotChange = () => {
-        this.readSlottedContent();
-    };
-    render() {
-        const displayLabel = this.label || this.name;
-        // Always render the same structure, CSS handles visibility via .admin-mode class
-        return (h(Host, { key: '8a48f7865340d9a2e201a2f878b2f1c66c55d86c', class: {
-                'admin-mode': this.adminMode,
-                'invalid-html': !this.isValidHtml,
-            }, role: this.adminMode ? 'region' : undefined, "aria-label": this.adminMode ? `Slot: ${displayLabel}` : undefined, "data-slot-name": this.name, "data-slot-type": this.type, "data-allowed": this.allowedComponents, "data-multiple": this.multiple, "data-required": this.required }, this.adminMode ? (h("div", { class: "le-slot-container" }, h("div", { class: classnames('le-slot-header', {
-                'le-slot-header-no-label': !displayLabel,
-                'le-slot-header-text': this.type === 'text',
-                'le-slot-header-error': !this.isValidHtml,
-            }) }, displayLabel && (h("span", { class: "le-slot-label" }, displayLabel, this.required && h("span", { class: "le-slot-required" }, "*"))), !this.isValidHtml && h("span", { class: "le-slot-invalid" }, "\u26A0 Invalid HTML"), this.type === 'slot' && this.adminMode && (h("le-popover", { mode: "default", showClose: true, align: "start", position: "right", popoverTitle: "Add Component", open: this.pickerOpen, onLePopoverOpen: () => (this.pickerOpen = true), onLePopoverClose: () => (this.pickerOpen = false) }, h("le-button", { type: "button", class: "le-slot-button", slot: "trigger", variant: "clear", size: "small", "aria-label": "Add component", "icon-only": true }, h("span", { class: "le-slot-add-btn", slot: "icon-only" }, "+")), h("div", { class: "le-slot-picker" }, this.availableComponents.length > 0 ? (h("ul", { class: "le-slot-picker-list" }, this.availableComponents.map(component => (h("li", { key: component.tagName }, h("button", { class: "le-slot-picker-item", onClick: () => {
-                this.addComponent(component.tagName);
-                this.pickerOpen = false;
-            } }, h("span", { class: "le-slot-picker-name" }, component.name), component.description && h("span", { class: "le-slot-picker-desc" }, component.description))))))) : (h("div", { class: "le-slot-picker-empty" }, "No components available")))))), this.renderContent())) : (
-        // In default mode, just pass through the slot - slotted content renders naturally
-        // Note: We use unnamed slot here because named slots from parent component
-        // are passed as le-slot's light DOM children
-        h("slot", null))));
-    }
-    renderContent() {
-        // Create the slot element with ref for reading assignedNodes
-        // Wrap in a hidden div since slot elements can't have style prop in Stencil
-        // Note: We use unnamed slot here because named slots from parent component
-        // are passed as le-slot's light DOM children
-        const slotElement = (h("div", { class: "hidden-slot" }, h("slot", { ref: el => (this.slotRef = el), onSlotchange: this.handleSlotChange })));
-        switch (this.type) {
-            case 'text':
-                return (h("div", { class: { 'le-slot-input': true, 'has-error': !this.isValidHtml } }, h("le-string-input", { mode: "default", value: this.textValue, placeholder: this.placeholder || `Enter ${this.label || this.name || 'text'}...`, onChange: this.handleTextInput }), slotElement));
-            case 'textarea':
-                return (h("div", { class: { 'le-slot-input': true, 'has-error': !this.isValidHtml } }, h("textarea", { value: this.textValue, placeholder: this.placeholder || `Enter ${this.label || this.name || 'text'}...`, onInput: this.handleTextInput, required: this.required, rows: 3 }), slotElement));
-            case 'slot':
-            default:
-                // Parse slotStyle string into style object if provided
-                const dropzoneStyle = {};
-                if (this.slotStyle) {
-                    this.slotStyle.split(';').forEach(rule => {
-                        const [prop, value] = rule.split(':').map(s => s.trim());
-                        if (prop && value) {
-                            // Convert kebab-case to camelCase for style object
-                            const camelProp = prop.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
-                            dropzoneStyle[camelProp] = value;
-                        }
-                    });
-                }
-                return (h("div", { class: "le-slot-dropzone", style: dropzoneStyle }, h("slot", { ref: el => (this.slotRef = el), onSlotchange: this.handleSlotChange })));
-        }
-    }
-    static get is() { return "le-slot"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["le-slot.default.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["le-slot.default.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'slot' | 'text' | 'textarea'",
-                    "resolved": "\"slot\" | \"text\" | \"textarea\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The type of slot content.\n- `slot`: Default, shows a dropzone for components (default)\n- `text`: Shows a single-line text input\n- `textarea`: Shows a multi-line text area"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "type",
-                "defaultValue": "'slot'"
-            },
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The name of the slot this placeholder represents.\nShould match the slot name in the parent component."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "name",
-                "defaultValue": "''"
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Label to display in admin mode.\nIf not provided, the slot name will be used."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label"
-            },
-            "description": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Description of what content this slot accepts.\nShown in admin mode to guide content editors."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "description"
-            },
-            "allowedComponents": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "example",
-                            "text": "\"le-card,le-button,le-text\""
-                        }],
-                    "text": "Comma-separated list of allowed component tags for this slot.\nUsed by CMS to filter available components."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "allowed-components"
-            },
-            "multiple": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether multiple components can be dropped in this slot."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "multiple",
-                "defaultValue": "true"
-            },
-            "required": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether this slot is required to have content."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "required",
-                "defaultValue": "false"
-            },
-            "placeholder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Placeholder text for text/textarea inputs in admin mode."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "placeholder"
-            },
-            "tag": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "example",
-                            "text": "\"h3\" - creates <h3 slot=\"header\">content</h3>"
-                        }, {
-                            "name": "example",
-                            "text": "\"p\" - creates <p slot=\"content\">content</p>"
-                        }],
-                    "text": "The HTML tag to create when there's no slotted element.\nUsed with type=\"text\" or type=\"textarea\" to auto-create elements."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "tag"
-            },
-            "slotStyle": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "CSS styles for the slot dropzone container.\nUseful for layouts - e.g., \"flex-direction: row\" for horizontal stacks.\nOnly applies in admin mode for type=\"slot\"."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "slot-style"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "adminMode": {},
-            "textValue": {},
-            "isValidHtml": {},
-            "availableComponents": {},
-            "pickerOpen": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "leSlotChange",
-                "name": "leSlotChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when text content changes in admin mode.\nThe event detail contains the new text value and validity."
-                },
-                "complexType": {
-                    "original": "{ name: string; value: string; isValid: boolean }",
-                    "resolved": "{ name: string; value: string; isValid: boolean; }",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-}
-//# sourceMappingURL=le-slot.js.map