le-kit 0.1.4 → 0.1.5

package/dist/{collection/components/le-component/le-component.js → le-kit/le-component.entry.js}

@@ -1,35 +1,13 @@
-import { h, Host } from "@stencil/core";
-import { classnames, observeModeChanges } from "../../utils/utils";
-/**
- * Component wrapper for admin mode editing.
- *
- * This component is used internally by other components to provide admin-mode
- * editing capabilities. It wraps the component's rendered output and shows
- * a settings popover for editing properties.
- *
- * In default mode, it acts as a simple passthrough (display: contents).
- * In admin mode, it shows a border, component name header, and settings popover.
- *
- * The host element is found automatically by traversing up through the shadow DOM.
- *
- * Usage inside a component's render method:
- * ```tsx
- * render() {
- *   return (
- *     <le-component component="le-card">
- *       <Host>...</Host>
- *     </le-component>
- *   );
- * }
- * ```
- *
- * @slot - The component's rendered content
- *
- * @cmsInternal true
- * @cmsCategory System
- */
-export class LeComponent {
-    el;
+import { r as registerInstance, h as getElement, l as getAssetPath, i as h, j as Host } from './index-Da-89pOc.js';
+import { o as observeModeChanges, c as classnames } from './utils-FDOApZ53.js';
+
+const leComponentCss = ":host{display:contents}:host(.admin-mode){display:block}.le-component-wrapper{position:relative;border:2px dashed var(--le-admin-border-color, #90caf9);border-radius:var(--le-radius-md, 8px);background:var(--le-admin-bg, rgba(144, 202, 249, 0.05));transition:border-color 0.2s ease, box-shadow 0.2s ease}.le-component-wrapper:hover{border-color:var(--le-admin-border-hover, #42a5f5);box-shadow:0 0 0 2px var(--le-admin-glow, rgba(66, 165, 245, 0.2))}.le-component-header{display:flex;align-items:center;justify-content:space-between;gap:var(--le-spacing-1, 4px);padding:0 0 0 var(--le-spacing-1, 4px);background:var(--le-admin-header-bg, rgba(144, 202, 249, 0.15));border-bottom:1px solid var(--le-admin-border-color, #90caf9);border-radius:var(--le-radius-md, 8px) var(--le-radius-md, 8px) 0 0;font-size:var(--le-font-size-xs, 11px)}.le-component-name{font-weight:var(--le-font-weight-medium, 500);color:var(--le-admin-text, #1976d2);text-transform:capitalize;text-align:start;overflow:hidden;width:0;flex:1 1 0%}.le-component-content{padding:var(--le-space-xs, 4px)}.le-component-trigger{font-size:24px;line-height:0px;width:12px;height:12px}.le-component-button{width:20px}.property-editor{display:flex;flex-direction:column;gap:var(--le-space-sm, 8px);max-width:380px}.property-field{display:flex;flex-direction:column;gap:var(--le-space-xs, 4px)}.property-field label{display:flex;flex-direction:column;gap:2px;font-size:var(--le-font-size-sm, 13px);font-weight:var(--le-font-weight-medium, 500);color:var(--le-color-text, #333)}.property-hint{font-size:var(--le-font-size-xs, 11px);font-weight:normal;color:var(--le-color-text-secondary, #666);line-height:1.3}.property-field input[type=\"text\"],.property-field input[type=\"number\"],.property-field select{padding:var(--le-space-xs, 4px) var(--le-space-sm, 8px);border:1px solid var(--le-color-border, #ddd);border-radius:var(--le-radius-md, 7px);font-size:var(--le-font-size-sm, 13px);font-family:inherit;background:var(--le-color-surface, #fff);color:var(--le-color-text, #333);transition:border-color 0.15s ease, box-shadow 0.15s ease}.property-field input:focus,.property-field select:focus{outline:none;border-color:var(--le-color-primary, #1976d2);box-shadow:0 0 0 2px var(--le-color-primary-light, rgba(25, 118, 210, 0.2))}.property-field--checkbox{flex-direction:column}.property-field--checkbox label{flex-direction:row;align-items:center;gap:var(--le-space-sm, 8px);cursor:pointer}.property-field--checkbox input[type=\"checkbox\"]{width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--le-color-primary, #1976d2)}.property-field--checkbox .property-hint{margin-left:24px}.no-properties{margin:0;padding:var(--le-space-sm, 8px);font-size:var(--le-font-size-sm, 13px);color:var(--le-color-text-secondary, #666);text-align:center}.property-editor-container{display:flex;flex-direction:column;gap:var(--le-space-md, 12px)}.property-editor-actions{padding-top:var(--le-space-sm, 8px);border-top:1px solid var(--le-color-border, #e5e5e5)}.delete-component-btn{display:flex;align-items:center;justify-content:center;gap:var(--le-space-xs, 4px);width:100%;padding:var(--le-space-sm, 8px) var(--le-space-md, 12px);border:1px solid var(--le-color-danger, #e53935);border-radius:var(--le-radius-md, 6px);background:transparent;color:var(--le-color-danger, #e53935);font-size:var(--le-font-size-sm, 13px);font-weight:500;cursor:pointer;transition:background-color 0.15s, color 0.15s}.delete-component-btn:hover{background:var(--le-color-danger, #e53935);color:white}.delete-component-btn:active{opacity:0.9}";
+
+const LeComponent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
     /**
      * The tag name of the component (e.g., 'le-card').
      * Used to look up property metadata and display the component name.
@@ -118,8 +96,9 @@ export class LeComponent {
      */
     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) {
@@ -257,103 +236,9 @@ export class LeComponent {
         // 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 is() { return "le-component"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["le-component.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["le-component.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "component": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The tag name of the component (e.g., 'le-card').\nUsed to look up property metadata and display the component name."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "component"
-            },
-            "displayName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Optional display name for the component.\nIf not provided, the tag name will be formatted as the display name."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "display-name"
-            },
-            "hostClass": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Classes to apply to the host element.\nAllows parent components to pass their styling classes."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "host-class"
-            },
-            "hostStyle": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "{ [key: string]: string }",
-                    "resolved": "{ [key: string]: string; }",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Inline styles to apply to the host element.\nAllows parent components to pass dynamic styles (e.g., flex properties)."
-                },
-                "getter": false,
-                "setter": false
-            }
-        };
-    }
-    static get states() {
-        return {
-            "adminMode": {},
-            "componentMeta": {},
-            "propertyValues": {}
-        };
-    }
-    static get elementRef() { return "el"; }
-}
-//# sourceMappingURL=le-component.js.map
+    static get assetsDirs() { return ["../../assets"]; }
+};
+LeComponent.style = leComponentCss;
+
+export { LeComponent as le_component };
+//# sourceMappingURL=le-component.entry.esm.js.map