le-kit 0.1.4 → 0.1.6

package/dist/components/le-button2.js

@@ -1,4 +1,4 @@
-import { setMode, proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
+import { setMode, proxyCustomElement, HTMLElement, createEvent, h, getAssetPath, Host, Fragment } from '@stencil/core/internal/client';
 import { d as defineCustomElement$5 } from './le-popover2.js';
 
 /**
@@ -517,7 +517,7 @@ const LeSlot = /*@__PURE__*/ proxyCustomElement(class LeSlot extends HTMLElement
     leSlotChange;
     disconnectModeObserver;
     connectedCallback() {
-        this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {
+        this.disconnectModeObserver = observeModeChanges(this.el, mode => {
             const wasAdmin = this.adminMode;
             this.adminMode = mode === 'admin';
             // When entering admin mode, read content from slotted elements
@@ -621,8 +621,7 @@ const LeSlot = /*@__PURE__*/ proxyCustomElement(class LeSlot extends HTMLElement
                 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'))) {
+                        if (node.nodeType === Node.TEXT_NODE || (node.nodeType === Node.ELEMENT_NODE && !node.hasAttribute('slot'))) {
                             node.remove();
                         }
                     });
@@ -642,7 +641,7 @@ const LeSlot = /*@__PURE__*/ proxyCustomElement(class LeSlot extends HTMLElement
         this.leSlotChange.emit({
             name: this.name,
             value: this.textValue,
-            isValid: this.isValidHtml
+            isValid: this.isValidHtml,
         });
     };
     /**
@@ -678,7 +677,8 @@ const LeSlot = /*@__PURE__*/ proxyCustomElement(class LeSlot extends HTMLElement
      */
     async loadAvailableComponents() {
         try {
-            const response = await fetch('/custom-elements.json');
+            const manifestPath = getAssetPath('assets/custom-elements.json');
+            const response = await fetch(manifestPath);
             const manifest = await response.json();
             const components = [];
             const allowedList = this.allowedComponents?.split(',').map(s => s.trim()) || [];
@@ -701,7 +701,7 @@ const LeSlot = /*@__PURE__*/ proxyCustomElement(class LeSlot extends HTMLElement
                     }
                 }
             }
-            this.availableComponents = components;
+            this.availableComponents = components || [];
         }
         catch (error) {
             console.warn('[le-slot] Failed to load component manifest:', error);
@@ -753,17 +753,17 @@ const LeSlot = /*@__PURE__*/ proxyCustomElement(class LeSlot extends HTMLElement
     render() {
         const displayLabel = this.label || this.name;
         // Always render the same structure, CSS handles visibility via .admin-mode class
-        return (h(Host, { key: 'bae03733e0443c10f1abe8b4c846d3eae0723d3d', class: {
+        return (h(Host, { key: 'af150a31db62d9c3df9a8c10be34b9bb6756d07f', class: {
                 'admin-mode': this.adminMode,
-                'invalid-html': !this.isValidHtml
+                '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: () => {
+                '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())) : (
+            } }, 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
@@ -774,7 +774,7 @@ const LeSlot = /*@__PURE__*/ proxyCustomElement(class LeSlot extends HTMLElement
         // 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 })));
+        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));
@@ -794,9 +794,10 @@ const LeSlot = /*@__PURE__*/ proxyCustomElement(class LeSlot extends HTMLElement
                         }
                     });
                 }
-                return (h("div", { class: "le-slot-dropzone", style: dropzoneStyle }, h("slot", { ref: (el) => this.slotRef = el, onSlotchange: this.handleSlotChange })));
+                return (h("div", { class: "le-slot-dropzone", style: dropzoneStyle }, h("slot", { ref: el => (this.slotRef = el), onSlotchange: this.handleSlotChange })));
         }
     }
+    static get assetsDirs() { return ["../../assets"]; }
     static get style() { return leSlotDefaultCss; }
 }, [769, "le-slot", {
         "type": [1],
@@ -911,7 +912,7 @@ const LeComponent = /*@__PURE__*/ proxyCustomElement(class LeComponent extends H
         // Find the host element - le-component is rendered inside the component's shadow DOM,
         // so we need to find the shadow root's host element
         this.findHostElement();
-        this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {
+        this.disconnectModeObserver = observeModeChanges(this.el, mode => {
             this.adminMode = mode === 'admin';
             // Load metadata and refresh property values only when entering admin mode
             if (this.adminMode) {
@@ -958,8 +959,9 @@ const LeComponent = /*@__PURE__*/ proxyCustomElement(class LeComponent extends H
      */
     async loadComponentMetadata() {
         try {
-            // Fetch the manifest - in production this would be bundled or cached
-            const response = await fetch('/custom-elements.json');
+            // Fetch the manifest using getAssetPath for correct bundle path
+            const manifestPath = getAssetPath('assets/custom-elements.json');
+            const response = await fetch(manifestPath);
             const manifest = await response.json();
             // Find the component definition
             for (const module of manifest.modules) {
@@ -1063,7 +1065,7 @@ const LeComponent = /*@__PURE__*/ proxyCustomElement(class LeComponent extends H
      */
     renderPropertyEditor() {
         const hasProperties = this.componentMeta && this.componentMeta.attributes.length > 0;
-        return (h("div", { class: "property-editor-container" }, hasProperties ? (h("form", { class: "property-editor", onSubmit: (e) => e.preventDefault() }, this.componentMeta.attributes.map(attr => this.renderPropertyField(attr)))) : (h("p", { class: "no-properties" }, "No editable properties")), h("div", { class: "property-editor-actions" }, h("le-button", { type: "button", variant: "outlined", color: "danger", "full-width": true, onClick: () => this.deleteComponent() }, h("span", { slot: "icon-start" }, "\uD83D\uDDD1\uFE0F"), h("span", null, "Delete Component")))));
+        return (h("div", { class: "property-editor-container" }, hasProperties ? (h("form", { class: "property-editor", onSubmit: e => e.preventDefault() }, this.componentMeta.attributes.map(attr => this.renderPropertyField(attr)))) : (h("p", { class: "no-properties" }, "No editable properties")), h("div", { class: "property-editor-actions" }, h("le-button", { type: "button", variant: "outlined", color: "danger", "full-width": true, onClick: () => this.deleteComponent() }, h("span", { slot: "icon-start" }, "\uD83D\uDDD1\uFE0F"), h("span", null, "Delete Component")))));
     }
     /**
      * Render a single property field based on its type
@@ -1075,15 +1077,15 @@ const LeComponent = /*@__PURE__*/ proxyCustomElement(class LeComponent extends H
         const enumMatch = type.match(/^'[^']+'/);
         if (enumMatch) {
             const options = type.split('|').map(opt => opt.trim().replace(/'/g, ''));
-            return (h("div", { class: "property-field" }, h("label", { htmlFor: `prop-${attr.name}` }, attr.name, attr.description && h("span", { class: "property-hint" }, attr.description)), h("select", { id: `prop-${attr.name}`, onChange: (e) => this.handlePropertyChange(attr.name, e.target.value, type) }, options.map(opt => (h("option", { value: opt, selected: value === opt || (!value && attr.default?.replace(/'/g, '') === opt) }, opt))))));
+            return (h("div", { class: "property-field" }, h("label", { htmlFor: `prop-${attr.name}` }, attr.name, attr.description && h("span", { class: "property-hint" }, attr.description)), h("select", { id: `prop-${attr.name}`, onChange: e => this.handlePropertyChange(attr.name, e.target.value, type) }, options.map(opt => (h("option", { value: opt, selected: value === opt || (!value && attr.default?.replace(/'/g, '') === opt) }, opt))))));
         }
         // Boolean type
         if (type === 'boolean') {
-            return (h("div", { class: "property-field property-field--checkbox" }, h("le-checkbox", { name: `prop-${attr.name}`, checked: value === true || value === '', onChange: (e) => this.handlePropertyChange(attr.name, e.target.checked, type) }, attr.name, attr.description && h("div", { slot: "description" }, attr.description))));
+            return (h("div", { class: "property-field property-field--checkbox" }, h("le-checkbox", { name: `prop-${attr.name}`, checked: value === true || value === '', onChange: e => this.handlePropertyChange(attr.name, e.target.checked, type) }, attr.name, attr.description && h("div", { slot: "description" }, attr.description))));
         }
         // Number type
         if (type === 'number') {
-            return (h("div", { class: "property-field" }, h("label", { htmlFor: `prop-${attr.name}` }, attr.name, attr.description && h("span", { class: "property-hint" }, attr.description)), h("input", { type: "number", id: `prop-${attr.name}`, value: value ?? '', placeholder: attr.default, onChange: (e) => this.handlePropertyChange(attr.name, e.target.value, type) })));
+            return (h("div", { class: "property-field" }, h("label", { htmlFor: `prop-${attr.name}` }, attr.name, attr.description && h("span", { class: "property-hint" }, attr.description)), h("input", { type: "number", id: `prop-${attr.name}`, value: value ?? '', placeholder: attr.default, onChange: e => this.handlePropertyChange(attr.name, e.target.value, type) })));
         }
         // Default: string/text input
         return (h("div", { class: "property-field" }, h("le-string-input", { name: `prop-${attr.name}`, label: attr.name, value: value ?? '', placeholder: attr.default?.replace(/'/g, ''), onChange: (e) => this.handlePropertyChange(attr.name, e.detail.value, type) }, h("span", { slot: "description" }, attr.description))));
@@ -1097,6 +1099,7 @@ const LeComponent = /*@__PURE__*/ proxyCustomElement(class LeComponent extends H
         // In admin mode, show wrapper with header and settings
         return (h(Host, { class: classnames(this.component, this.hostClass, 'admin-mode'), style: this.hostStyle }, h("div", { class: "le-component-wrapper" }, h("div", { class: "le-component-header" }, h("span", { class: "le-component-name" }, name), h("le-popover", { popoverTitle: `${name} Settings`, position: "right", align: "start", "min-width": "300px", mode: "default" }, h("le-button", { type: "button", class: "le-component-button", slot: "trigger", variant: "clear", size: "small", "aria-label": "Edit component properties", "icon-only": true }, h("span", { class: "le-component-trigger", slot: "icon-only" }, "\u2699")), this.renderPropertyEditor())), h("div", { class: "le-component-content" }, h("slot", null)))));
     }
+    static get assetsDirs() { return ["../../assets"]; }
     static get style() { return leComponentCss; }
 }, [769, "le-component", {
         "component": [1],