le-kit 0.1.14 → 0.1.15

package/dist/le-kit/le-round-progress.entry.js

@@ -1,104 +0,0 @@
-import { r as registerInstance, j as getElement, k as h } from './index-CAY3Hk_i.js';
-
-const leRoundProgressCss = ".round-progress--container{position:relative}.round-progress{position:absolute;top:0;left:0;right:0;bottom:0;display:block}.round-progress--progress{filter:drop-shadow(var(--progress-shadow))}.round-progress--circle{fill:none;stroke:var(--progress-color, #999);stroke-width:var(--progress-width, 4);stroke-linecap:var(--progress-linecap, round);animation:progress--circle 0.5s ease-out forwards;transition:stroke-dasharray 0.5s ease-out}@keyframes progress--circle{0%{stroke-dasharray:0 1000}}.round-progress--path{fill:none;stroke-linecap:round}";
-
-const LeRoundProgress = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    get el() { return getElement(this); }
-    // progress value coming from an attribute
-    value = 0;
-    updateValue(newValue) {
-        this.value = parseFloat(newValue);
-    }
-    // padding value coming from an attribute
-    padding = 0;
-    updatePadding(newValue) {
-        this.padding = parseFloat(newValue);
-        this.calcParams();
-    }
-    // the progress backgrounds can be as many as needed
-    // but it should be JSON format: double quotes and strict commas
-    paths;
-    updateProgressBackgrounds(newValue) {
-        this.progressPaths = JSON.parse(newValue);
-    }
-    progressPaths;
-    params;
-    /**
-     * Component lifecycles
-     *
-     * Before the component is loaded, we need to calculate and update params
-     * using the component size (width of the round progress)
-     * and progress width (max of )
-     */
-    componentWillLoad() {
-        if (typeof this.paths === 'string') {
-            this.updateProgressBackgrounds(this.paths);
-        }
-        this.calcParams();
-    }
-    calcParams() {
-        // get element width
-        const width = this.el.getBoundingClientRect().width;
-        const diameter = width - this.padding;
-        // calc circumference — we'll need it later to calc the stroke paths
-        const circumference = Math.PI * diameter;
-        this.params = { width, diameter, circumference };
-    }
-    /**
-     * Returns the viewPath attribute value for the SVG
-     * based on the width of the parent element
-     */
-    getViewBox() {
-        return '0 0 ' + this.params.width + ' ' + this.params.width;
-    }
-    /**
-     * Returns the circular path for the progress stroke
-     * and additional paths in the background
-     */
-    getPath() {
-        return ('M' +
-            this.params.width / 2 +
-            ' ' +
-            (this.params.width - this.params.diameter) / 2 +
-            ' a ' +
-            this.params.diameter / 2 +
-            ' ' +
-            this.params.diameter / 2 +
-            ' 0 0 1 0 ' +
-            this.params.diameter +
-            ' a ' +
-            this.params.diameter / 2 +
-            ' ' +
-            this.params.diameter / 2 +
-            ' 0 0 1 0 -' +
-            this.params.diameter);
-    }
-    getStrokeDashArray() {
-        return (this.value / 100) * this.params.circumference + ', ' + this.params.circumference;
-    }
-    getPaths() {
-        if (!this.progressPaths || !this.progressPaths.length) {
-            return null;
-        }
-        let paths = [];
-        this.progressPaths.forEach(bg => {
-            paths.push(h("path", { class: "round-progress--path", d: this.getPath(), stroke: bg.color, "stroke-width": bg.width, "stroke-dasharray": bg.dasharray, "stroke-linecap": bg.linecap }));
-        });
-        return (h("svg", { viewBox: this.getViewBox(), class: "round-progress" }, paths));
-    }
-    render() {
-        return (h("div", { key: '1ffc36704bee5d0822623ac4559ad2d4690095a4', class: "round-progress--container" }, this.getPaths(), h("svg", { key: '12e4dfe5fe2df0cb672d4c001459b8dcc8253591', viewBox: this.getViewBox(), class: "round-progress round-progress--progress" }, h("path", { key: 'd8ce69610687fb578ce2104bd3eccba24951dd96', class: "round-progress--circle", "stroke-dasharray": this.getStrokeDashArray(), d: this.getPath() })), h("slot", { key: '3976b08a7e838579d6af34a778a8756255d98e57' })));
-    }
-    static get watchers() { return {
-        "value": ["updateValue"],
-        "padding": ["updatePadding"],
-        "paths": ["updateProgressBackgrounds"]
-    }; }
-};
-LeRoundProgress.style = leRoundProgressCss;
-
-export { LeRoundProgress as le_round_progress };
-//# sourceMappingURL=le-round-progress.entry.esm.js.map

package/dist/le-kit/le-slot.entry.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"le-slot.entry.esm.js","sources":["src/components/le-slot/le-slot.default.css?tag=le-slot&encapsulation=shadow","src/components/le-slot/le-slot.tsx"],"sourcesContent":["/**\n * Styles for le-slot component\n * Uses :host(.admin-mode) to toggle between default and admin styles\n */\n\n/* ============================================\n   DEFAULT MODE - Invisible passthrough\n   ============================================ */\n:host {\n  display: contents;\n  --le-slot-border-color: #0088ff;\n  --le-slot-bg-color: rgba(0, 136, 255, 0.05);\n  --le-slot-header-bg: rgb(218, 238, 255);\n  --le-slot-label-color: #0066cc;\n  --le-slot-description-color: #666;\n  --le-slot-required-color: #e53935;\n  --le-slot-dropzone-min-height: 20px;\n  --le-slot-dropzone-border-color: #ccc;\n}\n\n.le-slot-container,\n.le-slot-header,\n.le-slot-description,\n.le-slot-dropzone,\n.le-slot-input {\n  display: none;\n}\n\n/* Hidden slot wrapper - keeps slot in DOM but invisible */\n.hidden-slot {\n  display: none;\n}\n\n/* ============================================\n   ADMIN MODE - Visible placeholder UI\n   ============================================ */\n:host(.admin-mode) {\n  display: block;\n  flex: 1;\n}\n\n:host(.admin-mode) .le-slot-container {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  border: 2px dashed var(--le-slot-border-color);\n  border-radius: 4px;\n  background: var(--le-slot-bg-color);\n  margin: 4px 0;\n}\n\n:host(.admin-mode) .le-slot-header {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0 0 0 var(--le-spacing-1, 4px);\n  background: var(--le-slot-header-bg);\n  border-bottom: 1px solid var(--le-slot-border-color);\n  font-size: var(--le-font-size-xs, 11px);\n  font-weight: 400;\n  text-transform: capitalize;\n}\n:host(.admin-mode) .le-slot-header-no-label {\n  justify-content: flex-end;\n  height: 16px;\n  border: none;\n  background-color: transparent;\n}\n\n.le-slot-label {\n  color: var(--le-slot-label-color);\n  text-align: start;\n  overflow: hidden;\n  width: 0;\n  flex: 1 1 0%;\n}\n\n.le-slot-required {\n  color: var(--le-slot-required-color);\n  font-weight: bold;\n}\n\n:host(.admin-mode) .le-slot-description {\n  display: block;\n  padding: 4px 8px;\n  font-size: 12px;\n  color: var(--le-slot-description-color);\n  font-style: italic;\n}\n:host(.admin-mode) .le-slot-description-icon {\n  display: inline-block;\n  font-size: 9px;\n  line-height: 1;\n  cursor: pointer;\n  color: var(--le-slot-description-color);\n}\n\n:host(.admin-mode) .le-slot-dropzone {\n  display: block;\n  min-height: var(--le-slot-dropzone-min-height);\n  padding: var(--le-spacing-1, 4px);\n  position: relative;\n}\n\n:host(.admin-mode) .le-slot-dropzone:empty::before {\n  content: 'Drop content here';\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  inset: 8px;\n  border: 2px dashed var(--le-slot-dropzone-border-color);\n  border-radius: 4px;\n  color: #999;\n  font-size: 12px;\n  pointer-events: none;\n}\n\n/* Highlight when dragging over */\n:host(.admin-mode.drag-over) .le-slot-container {\n  border-color: #00cc66;\n  background: rgba(0, 204, 102, 0.1);\n}\n\n:host(.admin-mode.drag-over) .le-slot-dropzone:empty::before {\n  border-color: #00cc66;\n  color: #00cc66;\n  content: 'Release to drop';\n}\n\n/* ============================================\n   TEXT INPUT STYLES (Admin mode)\n   ============================================ */\n:host(.admin-mode) .le-slot-input {\n  display: block;\n  padding: var(--le-spacing-1, 4px);\n}\n\n:host(.admin-mode) .le-slot-input input,\n:host(.admin-mode) .le-slot-input textarea {\n  display: block;\n  width: 100%;\n  padding: 8px 10px;\n  border: 1px solid var(--le-slot-dropzone-border-color);\n  border-radius: 4px;\n  font-family: inherit;\n  font-size: 14px;\n  line-height: 1.4;\n  background: #fff;\n  color: #333;\n  box-sizing: border-box;\n  transition: border-color 0.2s, box-shadow 0.2s;\n}\n\n:host(.admin-mode) .le-slot-input input:focus,\n:host(.admin-mode) .le-slot-input textarea:focus {\n  outline: none;\n  border-color: var(--le-slot-border-color);\n  box-shadow: 0 0 0 3px rgba(0, 136, 255, 0.15);\n}\n\n:host(.admin-mode) .le-slot-input input::placeholder,\n:host(.admin-mode) .le-slot-input textarea::placeholder {\n  color: #999;\n}\n\n:host(.admin-mode) .le-slot-input textarea {\n  resize: vertical;\n  min-height: 60px;\n}\n\n/* Hide the slot content in text/textarea mode - it's just for default value */\n:host(.admin-mode) .le-slot-input slot {\n  display: none;\n}\n\n/* ============================================\n   INVALID HTML STATE\n   ============================================ */\n.le-slot-invalid {\n  color: var(--le-slot-required-color);\n  font-size: 10px;\n  margin-left: auto;\n  font-weight: normal;\n  text-transform: none;\n}\n\n:host(.admin-mode) .le-slot-input.has-error input,\n:host(.admin-mode) .le-slot-input.has-error textarea {\n  border-color: var(--le-slot-required-color);\n  background: rgba(229, 57, 53, 0.05);\n}\n\n:host(.admin-mode) .le-slot-input.has-error input:focus,\n:host(.admin-mode) .le-slot-input.has-error textarea:focus {\n  border-color: var(--le-slot-required-color);\n  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.15);\n}\n\n\n/* ========================================\n   Component Picker (Add Button & Popover)\n   ======================================== */\n.le-slot-add-btn {\n  font-size: 24px;\n  line-height: 0px;\n  width: 12px;\n  height: 12px;\n}\n\n.le-slot-header-no-label .le-slot-add-btn {\n  font-size: 16px;\n}\n\n.le-slot-button {\n  width: 20px;\n  height: 20px;\n}\n\n:host(.admin-mode) .le-slot-header-no-label.le-slot-header-text {\n  height: 0;\n}\n","import { Component, Prop, State, h, Host, Element, Event, EventEmitter, getAssetPath } from '@stencil/core';\nimport { classnames, observeModeChanges } from '../../utils/utils';\nimport { getLeKitConfig } from '../../global/app';\n\n/**\n * Slot placeholder component for admin/CMS mode.\n *\n * This component renders a visual placeholder for slots when in admin mode,\n * allowing CMS systems to show available drop zones for content or inline editing.\n *\n * In non-admin mode, this component renders nothing and acts as a passthrough.\n *\n * @slot - Default slot for placeholder content or drop zone UI\n *\n * @cmsInternal true\n * @cmsCategory System\n */\n@Component({\n  tag: 'le-slot',\n  styleUrl: 'le-slot.default.css',\n  shadow: true,\n})\nexport class LeSlot {\n  @Element() el: HTMLElement;\n\n  /**\n   * 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\n   */\n  @Prop() type: 'slot' | 'text' | 'textarea' = 'slot';\n\n  /**\n   * The name of the slot this placeholder represents.\n   * Should match the slot name in the parent component.\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Label to display in admin mode.\n   * If not provided, the slot name will be used.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Description of what content this slot accepts.\n   * Shown in admin mode to guide content editors.\n   */\n  @Prop() description?: string;\n\n  /**\n   * Comma-separated list of allowed component tags for this slot.\n   * Used by CMS to filter available components.\n   *\n   * @example \"le-card,le-button,le-text\"\n   */\n  @Prop() allowedComponents?: string;\n\n  /**\n   * Whether multiple components can be dropped in this slot.\n   */\n  @Prop() multiple: boolean = true;\n\n  /**\n   * Whether this slot is required to have content.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Placeholder text for text/textarea inputs in admin mode.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * The HTML tag to create when there's no slotted element.\n   * Used with type=\"text\" or type=\"textarea\" to auto-create elements.\n   *\n   * @example \"h3\" - creates <h3 slot=\"header\">content</h3>\n   * @example \"p\" - creates <p slot=\"content\">content</p>\n   */\n  @Prop() tag?: string;\n\n  /**\n   * CSS styles for the slot dropzone container.\n   * Useful for layouts - e.g., \"flex-direction: row\" for horizontal stacks.\n   * Only applies in admin mode for type=\"slot\".\n   */\n  @Prop() slotStyle?: string;\n\n  /**\n   * Internal state to track admin mode\n   */\n  @State() private adminMode: boolean = false;\n\n  /**\n   * Internal state for text input value (synced from slot content)\n   */\n  @State() private textValue: string = '';\n\n  /**\n   * Whether the current textValue contains valid HTML\n   */\n  @State() private isValidHtml: boolean = true;\n\n  /**\n   * Available components loaded from Custom Elements Manifest\n   */\n  @State() private availableComponents: ComponentInfo[] = [];\n\n  /**\n   * Whether the component picker popover is open\n   */\n  @State() private pickerOpen: boolean = false;\n\n  /**\n   * Reference to the slot element to access assignedNodes\n   */\n  private slotRef?: HTMLSlotElement;\n\n  /**\n   * The original slotted element (e.g., <h3 slot=\"header\">)\n   */\n  private slottedElement?: Element;\n\n  /**\n   * Emitted when text content changes in admin mode.\n   * The event detail contains the new text value and validity.\n   */\n  @Event() leSlotChange: EventEmitter<{ name: string; value: string; isValid: boolean }>;\n\n  private disconnectModeObserver?: () => void;\n\n  connectedCallback() {\n    this.disconnectModeObserver = observeModeChanges(this.el, mode => {\n      const wasAdmin = this.adminMode;\n      this.adminMode = mode === 'admin';\n\n      // When entering admin mode, read content from slotted elements\n      if (this.adminMode && !wasAdmin) {\n        // Need to wait for render to access slot ref\n        requestAnimationFrame(() => this.readSlottedContent());\n\n        // Load available components for the component picker\n        if (this.type === 'slot') {\n          this.loadAvailableComponents();\n        }\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    this.disconnectModeObserver?.();\n  }\n\n  /**\n   * Flag to prevent re-reading content right after we updated it\n   */\n  private isUpdating: boolean = false;\n\n  /**\n   * Read content from slotted elements via assignedNodes()\n   */\n  private readSlottedContent() {\n    if (!this.slotRef) return;\n\n    // Skip if we just updated the content ourselves\n    if (this.isUpdating) {\n      this.isUpdating = false;\n      return;\n    }\n\n    const assignedNodes = this.slotRef.assignedNodes({ flatten: true });\n\n    // For text/textarea types, we want to edit the innerHTML of slotted elements\n    if (this.type === 'text' || this.type === 'textarea') {\n      // Find the first element node (skip text nodes that are just whitespace)\n      const elementNode = assignedNodes.find(node => node.nodeType === Node.ELEMENT_NODE) as Element | undefined;\n\n      if (elementNode) {\n        // Only update textValue if slotted element changed or we don't have one yet\n        if (this.slottedElement !== elementNode) {\n          this.slottedElement = elementNode;\n          this.textValue = elementNode.innerHTML?.trim() || '';\n          // console.log(`[le-slot \"${this.name}\"] Read slotted content:`, this.textValue);\n        }\n      } else {\n        // No element, check for direct text content\n        const textContent = assignedNodes\n          .filter(node => node.nodeType === Node.TEXT_NODE)\n          .map(node => node.textContent)\n          .join('')\n          .trim();\n\n        if (textContent && !this.textValue) {\n          this.textValue = textContent;\n          // console.log(`[le-slot \"${this.name}\"] Read text content:`, this.textValue);\n        }\n      }\n    }\n  }\n\n  /**\n   * Validates if a string contains valid HTML\n   */\n  private validateHtml(html: string): boolean {\n    // Empty string is valid\n    if (!html.trim()) return true;\n\n    // Create a template element to parse the HTML\n    const template = document.createElement('template');\n    template.innerHTML = html;\n\n    // Check that we don't have obviously broken HTML\n    // Count opening and closing tags for common elements\n    const openTags = (html.match(/<[a-z][^>]*(?<!\\/)>/gi) || []).length;\n    const closeTags = (html.match(/<\\/[a-z][^>]*>/gi) || []).length;\n    const selfClosing = (html.match(/<[a-z][^>]*\\/>/gi) || []).length;\n\n    // Simple validation: opening tags (minus self-closing) should roughly match closing tags\n    // Allow some tolerance for void elements like <br>, <img>, etc.\n    const voidElements = (html.match(/<(br|hr|img|input|meta|link|area|base|col|embed|param|source|track|wbr)[^>]*>/gi) || []).length;\n\n    const effectiveOpenTags = openTags - selfClosing - voidElements;\n\n    // If difference is too large, HTML is likely broken\n    if (Math.abs(effectiveOpenTags - closeTags) > 1) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private handleTextInput = (event: Event) => {\n    const target = event.target as HTMLInputElement | HTMLTextAreaElement;\n    this.textValue = target.value;\n    this.isValidHtml = this.validateHtml(this.textValue);\n\n    if (this.isValidHtml) {\n      // Set flag to prevent slotchange from re-reading what we just wrote\n      this.isUpdating = true;\n\n      console.log('Updating text value:', this.textValue, 'slottedElement:', this.slottedElement);\n\n      if (this.slottedElement) {\n        // Update existing slotted element's innerHTML\n        this.slottedElement.innerHTML = this.textValue;\n      } else if (this.tag && this.textValue) {\n        // No slotted element exists\n        // If the slot doesn't have a name, then it's the default slot\n        // remove the existing non-slotted content (text nodes and elements without slot attribute)\n        const rootNode = this.el.getRootNode();\n        if (!this.name && rootNode instanceof ShadowRoot) {\n          const hostComponent = rootNode.host;\n          Array.from(hostComponent.childNodes).forEach(node => {\n            if (node.nodeType === Node.TEXT_NODE || (node.nodeType === Node.ELEMENT_NODE && !(node as Element).hasAttribute('slot'))) {\n              node.remove();\n            }\n          });\n        }\n        // create one using the specified tag\n        this.createSlottedElement();\n      } else if (this.textValue) {\n        // no tag specified - just replace everything in the host component\n        const rootNode = this.el.getRootNode();\n        if (rootNode instanceof ShadowRoot) {\n          const hostComponent = rootNode.host;\n          hostComponent.innerHTML = this.textValue;\n        }\n      }\n    }\n\n    this.leSlotChange.emit({\n      name: this.name,\n      value: this.textValue,\n      isValid: this.isValidHtml,\n    });\n  };\n\n  /**\n   * Create a new slotted element when none exists.\n   * The element is appended to the host component's light DOM.\n   */\n  private createSlottedElement() {\n    if (!this.tag) return;\n\n    // Find the host component (le-card, etc.) by traversing up through shadow DOM\n    // le-slot is inside le-card's shadow DOM, so we need to find le-card's host\n    const rootNode = this.el.getRootNode();\n    if (!(rootNode instanceof ShadowRoot)) return;\n\n    const hostComponent = rootNode.host;\n    if (!hostComponent) return;\n\n    // Create the new element\n    const newElement = document.createElement(this.tag);\n    newElement.innerHTML = this.textValue;\n\n    // Set the slot attribute if this is a named slot\n    if (this.name) {\n      newElement.setAttribute('slot', this.name);\n    }\n\n    // Append to the host component's light DOM\n    hostComponent.appendChild(newElement);\n\n    // Store reference to the new element\n    this.slottedElement = newElement;\n\n    // console.log(`[le-slot \"${this.name}\"] Created new <${this.tag}> element`);\n  }\n\n  /**\n   * Load available components from Custom Elements Manifest\n   */\n  private async loadAvailableComponents() {\n    try {\n      const { manifestFile } = getLeKitConfig();\n      const manifestFileResolved = getAssetPath(`./assets/${manifestFile}`);\n      const response = await fetch(manifestFileResolved);\n      const manifest = await response.json();\n\n      const components: ComponentInfo[] = [];\n      const allowedList = this.allowedComponents?.split(',').map(s => s.trim()) || [];\n\n      for (const module of manifest.modules) {\n        for (const declaration of module.declarations || []) {\n          if (declaration.tagName && declaration.customElement) {\n            // Skip internal components (le-slot, le-component, le-popover)\n            const isInternal = ['le-slot', 'le-component', 'le-popover'].includes(declaration.tagName);\n            if (isInternal) continue;\n\n            // If allowedComponents is specified, filter by it\n            if (allowedList.length > 0 && !allowedList.includes(declaration.tagName)) {\n              continue;\n            }\n\n            components.push({\n              tagName: declaration.tagName,\n              name: this.formatComponentName(declaration.tagName),\n              description: declaration.description || '',\n            });\n          }\n        }\n      }\n\n      this.availableComponents = components || [];\n    } catch (error) {\n      console.warn('[le-slot] Failed to load component manifest:', error);\n    }\n  }\n\n  /**\n   * Format a tag name into a display name\n   * e.g., 'le-card' -> 'Card'\n   */\n  private formatComponentName(tagName: string): string {\n    return tagName\n      .replace(/^le-/, '')\n      .split('-')\n      .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n      .join(' ');\n  }\n\n  /**\n   * Add a new component to the slot\n   */\n  private addComponent(tagName: string) {\n    // Find the host component by traversing up through shadow DOM\n    const rootNode = this.el.getRootNode();\n    if (!(rootNode instanceof ShadowRoot)) return;\n\n    const hostComponent = rootNode.host;\n    if (!hostComponent) return;\n\n    // Create the new component element\n    const newElement = document.createElement(tagName);\n\n    // Set the slot attribute if this is a named slot\n    if (this.name) {\n      newElement.setAttribute('slot', this.name);\n    }\n\n    // Append to the host component's light DOM\n    hostComponent.appendChild(newElement);\n\n    // Emit change event so the page can save\n    this.leSlotChange.emit({\n      name: this.name,\n      value: hostComponent.innerHTML,\n      isValid: true,\n    });\n  }\n\n  /**\n   * Handle slot change event to re-read content when nodes are assigned\n   */\n  private handleSlotChange = () => {\n    this.readSlottedContent();\n  };\n\n  render() {\n    const displayLabel = this.label || this.name;\n\n    // Always render the same structure, CSS handles visibility via .admin-mode class\n    return (\n      <Host\n        class={{\n          'admin-mode': this.adminMode,\n          'invalid-html': !this.isValidHtml,\n        }}\n        role={this.adminMode ? 'region' : undefined}\n        aria-label={this.adminMode ? `Slot: ${displayLabel}` : undefined}\n        data-slot-name={this.name}\n        data-slot-type={this.type}\n        data-allowed={this.allowedComponents}\n        data-multiple={this.multiple}\n        data-required={this.required}\n      >\n        {this.adminMode ? (\n          <div class=\"le-slot-container\">\n            <div\n              class={classnames('le-slot-header', {\n                'le-slot-header-no-label': !displayLabel,\n                'le-slot-header-text': this.type === 'text',\n                'le-slot-header-error': !this.isValidHtml,\n              })}\n            >\n              {displayLabel && (\n                <span class=\"le-slot-label\">\n                  {displayLabel}\n                  {this.required && <span class=\"le-slot-required\">*</span>}\n                </span>\n              )}\n              {/* {this.description && <le-popover mode=\"default\" showClose={false} align=\"end\" position=\"bottom\">\n                <span slot=\"trigger\" class=\"le-slot-description-icon\">ℹ️</span>\n                {this.description}\n              </le-popover>} */}\n              {!this.isValidHtml && <span class=\"le-slot-invalid\">⚠ Invalid HTML</span>}\n              {this.type === 'slot' && this.adminMode && (\n                <le-popover\n                  mode=\"default\"\n                  showClose={true}\n                  align=\"start\"\n                  position=\"right\"\n                  popoverTitle=\"Add Component\"\n                  open={this.pickerOpen}\n                  onLePopoverOpen={() => (this.pickerOpen = true)}\n                  onLePopoverClose={() => (this.pickerOpen = false)}\n                >\n                  <le-button type=\"button\" class=\"le-slot-button\" slot=\"trigger\" variant=\"clear\" size=\"small\" aria-label=\"Add component\" icon-only>\n                    <span class=\"le-slot-add-btn\" slot=\"icon-only\">\n                      +\n                    </span>\n                  </le-button>\n                  <div class=\"le-slot-picker\">\n                    {this.availableComponents.length > 0 ? (\n                      <ul class=\"le-slot-picker-list\">\n                        {this.availableComponents.map(component => (\n                          <li key={component.tagName}>\n                            <button\n                              class=\"le-slot-picker-item\"\n                              onClick={() => {\n                                this.addComponent(component.tagName);\n                                this.pickerOpen = false;\n                              }}\n                            >\n                              <span class=\"le-slot-picker-name\">{component.name}</span>\n                              {component.description && <span class=\"le-slot-picker-desc\">{component.description}</span>}\n                            </button>\n                          </li>\n                        ))}\n                      </ul>\n                    ) : (\n                      <div class=\"le-slot-picker-empty\">No components available</div>\n                    )}\n                  </div>\n                </le-popover>\n              )}\n            </div>\n            {this.renderContent()}\n          </div>\n        ) : (\n          // In default mode, just pass through the slot - slotted content renders naturally\n          // Note: We use unnamed slot here because named slots from parent component\n          // are passed as le-slot's light DOM children\n          <slot\n          // ref={(el) => this.slotRef = el as HTMLSlotElement}\n          // onSlotchange={this.handleSlotChange}\n          ></slot>\n        )}\n      </Host>\n    );\n  }\n\n  private renderContent() {\n    // Create the slot element with ref for reading assignedNodes\n    // Wrap in a hidden div since slot elements can't have style prop in Stencil\n    // Note: We use unnamed slot here because named slots from parent component\n    // are passed as le-slot's light DOM children\n    const slotElement = (\n      <div class=\"hidden-slot\">\n        <slot ref={el => (this.slotRef = el as HTMLSlotElement)} onSlotchange={this.handleSlotChange}></slot>\n      </div>\n    );\n\n    switch (this.type) {\n      case 'text':\n        return (\n          <div class={{ 'le-slot-input': true, 'has-error': !this.isValidHtml }}>\n            <le-string-input\n              mode=\"default\"\n              value={this.textValue}\n              placeholder={this.placeholder || `Enter ${this.label || this.name || 'text'}...`}\n              onChange={this.handleTextInput}\n              // required={this.required}\n            ></le-string-input>\n            {slotElement}\n          </div>\n        );\n\n      case 'textarea':\n        return (\n          <div class={{ 'le-slot-input': true, 'has-error': !this.isValidHtml }}>\n            <textarea\n              value={this.textValue}\n              placeholder={this.placeholder || `Enter ${this.label || this.name || 'text'}...`}\n              onInput={this.handleTextInput}\n              required={this.required}\n              rows={3}\n            ></textarea>\n            {slotElement}\n          </div>\n        );\n\n      case 'slot':\n      default:\n        // Parse slotStyle string into style object if provided\n        const dropzoneStyle: { [key: string]: string } = {};\n        if (this.slotStyle) {\n          this.slotStyle.split(';').forEach(rule => {\n            const [prop, value] = rule.split(':').map(s => s.trim());\n            if (prop && value) {\n              // Convert kebab-case to camelCase for style object\n              const camelProp = prop.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());\n              dropzoneStyle[camelProp] = value;\n            }\n          });\n        }\n        return (\n          <div class=\"le-slot-dropzone\" style={dropzoneStyle}>\n            <slot ref={el => (this.slotRef = el as HTMLSlotElement)} onSlotchange={this.handleSlotChange}></slot>\n          </div>\n        );\n    }\n  }\n}\n\n/**\n * Component info from the manifest\n */\ninterface ComponentInfo {\n  tagName: string;\n  name: string;\n  description: string;\n}\n"],"names":[],"mappings":"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"}

package/dist/le-kit/le-string-input.entry.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"le-string-input.entry.esm.js","sources":["src/components/le-string-input/le-string-input.css?tag=le-string-input&encapsulation=shadow","src/components/le-string-input/le-string-input.tsx"],"sourcesContent":[":host {\n  display: block;\n  --le-input-bg: var(--le-color-surface, #ffffff);\n  --le-input-color: var(--le-color-text-primary, #333333);\n  --le-input-border: var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);\n  --le-input-radius: var(--le-radius-sm, 4px);\n  --le-input-padding: 2px 6px;\n  --le-input-height: 1.5rem;\n  --le-input-label-color: var(--le-color-text-primary, #333333);\n  --le-input-desc-color: var(--le-color-text-secondary, #666666);\n  --le-input-placeholder-color: #999999;\n}\n\n.le-input-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.le-input-label {\n  display: block;\n  font-size: 0.9em;\n  font-weight: 500;\n  color: var(--le-input-label-color);\n  margin-bottom: 2px;\n}\n\n.le-input-container {\n  position: relative;\n  display: flex;\n  align-items: center;\n  background: var(--le-input-bg);\n  border: var(--le-input-border);\n  border-radius: var(--le-input-radius);\n  transition: border-color 0.2s;\n}\n\n.le-input-container:focus-within {\n  outline: 2px solid var(--le-color-focus);\n  outline-offset: 2px;\n}\n\n\n:host([disabled]) .le-input-container {\n  opacity: 0.6;\n  background-color: rgba(0,0,0,0.05);\n  cursor: not-allowed;\n}\n\ninput {\n  flex: 1;\n  min-height: var(--le-input-height);\n  padding: var(--le-input-padding);\n  border: none;\n  background: transparent;\n  color: var(--le-input-color);\n  font-family: inherit;\n  font-size: inherit;\n  outline: none;\n  width: 100%;\n}\n\ninput::placeholder {\n  color: var(--le-input-placeholder-color);\n}\n\n.icon-start, .icon-end {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 8px;\n  color: var(--le-input-desc-color);\n}\n\n.le-input-description {\n  font-size: 0.85em;\n  color: var(--le-input-desc-color);\n  margin-top: 2px;\n}\n\n.le-input-description::has(le-slot > slot[name=description]:empty) {\n  display: none;\n}\n","import { Component, Prop, Event, EventEmitter, h, Element } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A text input component with support for labels, descriptions, icons, and external IDs.\n *\n * @slot - The label text for the input\n * @slot description - Additional description text displayed below the input\n * @slot icon-start - Icon to display at the start of the input\n * @slot icon-end - Icon to display at the end of the input\n *\n * @cssprop --le-input-bg - Input background color\n * @cssprop --le-input-color - Input text color\n * @cssprop --le-input-border - Input border style\n * @cssprop --le-input-border-focus - Input border style when focused\n * @cssprop --le-input-radius - Input border radius\n * @cssprop --le-input-padding - Input padding\n */\n@Component({\n  tag: 'le-string-input',\n  styleUrl: 'le-string-input.css',\n  shadow: true,\n})\nexport class LeStringInput {\n  @Element() el: HTMLElement;\n\n  /**\n   * Mode of the popover should be 'default' for internal use\n   */\n  @Prop({ mutable: true, reflect: true }) mode: 'default' | 'admin';\n\n  /**\n   * The value of the input\n   */\n  @Prop({ mutable: true, reflect: true }) value: string;\n\n  /**\n   * The name of the input\n   */\n  @Prop() name: string;\n\n  /**\n   * The type of the input (text, email, password, etc.)\n   */\n  @Prop() type: 'text' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n  /**\n   * Label for the input\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon for the start icon\n   */\n  @Prop() iconStart: string;\n\n  /**\n   * Icon for the end icon\n   */\n  @Prop() iconEnd: string;\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the input is read-only\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * External ID for linking with external systems\n   */\n  @Prop() externalId: string;\n\n  /**\n   * Emitted when the value changes (on blur or Enter)\n   */\n  @Event({ eventName: 'change' }) leChange: EventEmitter<{ value: string; name: string; externalId: string }>;\n\n  /**\n   * Emitted when the input value changes (on keystroke)\n   */\n  @Event({ eventName: 'input' }) leInput: EventEmitter<{ value: string; name: string; externalId: string }>;\n\n  private handleInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement;\n    this.value = input.value;\n    this.leInput.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId\n    });\n  };\n\n  private handleChange = (ev: Event) => {\n    const input = ev.target as HTMLInputElement;\n    this.value = input.value;\n    this.leChange.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId\n    });\n  };\n\n  private handleClick = (ev: Event) => {\n    ev.stopPropagation();\n  };\n\n  render() {\n    return (\n      <le-component component=\"le-string-input\" hostClass={classnames({ 'disabled': this.disabled })}>\n        <div class=\"le-input-wrapper\">\n          {this.label && (\n            <label class=\"le-input-label\" htmlFor={this.name}>{this.label}</label>\n          )}\n          \n          <div class=\"le-input-container\">\n            {this.iconStart && (\n              <span class=\"icon-start\">{this.iconStart}</span>\n            )}\n            <input\n              id={this.name}\n              type={this.type}\n              name={this.name}\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              onInput={this.handleInput}\n              onChange={this.handleChange}\n              onClick={this.handleClick}\n            />\n            {this.iconEnd && (\n              <span class=\"icon-end\">{this.iconEnd}</span>\n            )}\n          </div>\n\n          <div class=\"le-input-description\">\n            <le-slot name=\"description\" type=\"text\" tag=\"p\" label=\"Description\">\n              <slot name=\"description\"></slot>\n            </le-slot>\n          </div>\n        </div>\n      </le-component>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/le-kit/le-string-input.entry.js

@@ -1,93 +0,0 @@
-import { r as registerInstance, m as createEvent, j as getElement, k as h } from './index-CAY3Hk_i.js';
-import { c as classnames } from './utils-cwSNy7ZS.js';
-
-const leStringInputCss = ":host{display:block;--le-input-bg:var(--le-color-surface, #ffffff);--le-input-color:var(--le-color-text-primary, #333333);--le-input-border:var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);--le-input-radius:var(--le-radius-sm, 4px);--le-input-padding:2px 6px;--le-input-height:1.5rem;--le-input-label-color:var(--le-color-text-primary, #333333);--le-input-desc-color:var(--le-color-text-secondary, #666666);--le-input-placeholder-color:#999999}.le-input-wrapper{display:flex;flex-direction:column;gap:2px}.le-input-label{display:block;font-size:0.9em;font-weight:500;color:var(--le-input-label-color);margin-bottom:2px}.le-input-container{position:relative;display:flex;align-items:center;background:var(--le-input-bg);border:var(--le-input-border);border-radius:var(--le-input-radius);transition:border-color 0.2s}.le-input-container:focus-within{outline:2px solid var(--le-color-focus);outline-offset:2px}:host([disabled]) .le-input-container{opacity:0.6;background-color:rgba(0,0,0,0.05);cursor:not-allowed}input{flex:1;min-height:var(--le-input-height);padding:var(--le-input-padding);border:none;background:transparent;color:var(--le-input-color);font-family:inherit;font-size:inherit;outline:none;width:100%}input::placeholder{color:var(--le-input-placeholder-color)}.icon-start,.icon-end{display:flex;align-items:center;justify-content:center;padding:0 8px;color:var(--le-input-desc-color)}.le-input-description{font-size:0.85em;color:var(--le-input-desc-color);margin-top:2px}.le-input-description::has(le-slot>slot[name=description]:empty){display:none}";
-
-const LeStringInput = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.leChange = createEvent(this, "change", 7);
-        this.leInput = createEvent(this, "input", 7);
-    }
-    get el() { return getElement(this); }
-    /**
-     * Mode of the popover should be 'default' for internal use
-     */
-    mode;
-    /**
-     * The value of the input
-     */
-    value;
-    /**
-     * The name of the input
-     */
-    name;
-    /**
-     * The type of the input (text, email, password, etc.)
-     */
-    type = 'text';
-    /**
-     * Label for the input
-     */
-    label;
-    /**
-     * Icon for the start icon
-     */
-    iconStart;
-    /**
-     * Icon for the end icon
-     */
-    iconEnd;
-    /**
-     * Placeholder text
-     */
-    placeholder;
-    /**
-     * Whether the input is disabled
-     */
-    disabled = false;
-    /**
-     * Whether the input is read-only
-     */
-    readonly = false;
-    /**
-     * External ID for linking with external systems
-     */
-    externalId;
-    /**
-     * Emitted when the value changes (on blur or Enter)
-     */
-    leChange;
-    /**
-     * Emitted when the input value changes (on keystroke)
-     */
-    leInput;
-    handleInput = (ev) => {
-        const input = ev.target;
-        this.value = input.value;
-        this.leInput.emit({
-            value: this.value,
-            name: this.name,
-            externalId: this.externalId
-        });
-    };
-    handleChange = (ev) => {
-        const input = ev.target;
-        this.value = input.value;
-        this.leChange.emit({
-            value: this.value,
-            name: this.name,
-            externalId: this.externalId
-        });
-    };
-    handleClick = (ev) => {
-        ev.stopPropagation();
-    };
-    render() {
-        return (h("le-component", { key: 'd0c69370dae2d1fee5700954e4823d2a03a51331', component: "le-string-input", hostClass: classnames({ 'disabled': this.disabled }) }, h("div", { key: '4acae8d3c34da2a86970a616c493ff210d561f5f', class: "le-input-wrapper" }, this.label && (h("label", { key: '609191b45187b6b1a65d05cd594b149760ac6882', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: '36b4caff4468ac7421db03f811cb3ef4a622b001', class: "le-input-container" }, this.iconStart && (h("span", { key: '344f88887fe8270bbef7e26ec1ad5da9fae1f8e4', class: "icon-start" }, this.iconStart)), h("input", { key: '4ba7beeddd7fb3cf23d03e029d11a804764cdd6e', id: this.name, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }), this.iconEnd && (h("span", { key: '7cdd4b52c3e1a1b18b19e697bdb42431941bba01', class: "icon-end" }, this.iconEnd))), h("div", { key: '113a75aa413e4d95300aeaa97d1ce7a75cf68c7a', class: "le-input-description" }, h("le-slot", { key: '0b37fc14e6df68f6c44cf9001d63a70f019e1cc3', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: '2674056dc915fabdb4fcbcaa13294a116b9509a6', name: "description" }))))));
-    }
-};
-LeStringInput.style = leStringInputCss;
-
-export { LeStringInput as le_string_input };
-//# sourceMappingURL=le-string-input.entry.esm.js.map

package/dist/le-kit/le-turntable.entry.js

@@ -1,137 +0,0 @@
-import { r as registerInstance, j as getElement, k as h } from './index-CAY3Hk_i.js';
-
-const leTurntableCss = ":host{display:block;cursor:grab}div.turntable{width:100%;height:100%;padding:1px}";
-
-const LeTurntable = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    get el() { return getElement(this); }
-    // transform origin
-    // gets the same values as transform-origin css property
-    center = 'center';
-    // transform rotate
-    value = 0;
-    updateValue(newValue) {
-        if (!this.rotating) {
-            this.currentAngle = parseFloat(newValue);
-            this.setAngle(this.currentAngle);
-        }
-    }
-    /**
-     * Internal state
-     *
-     * using properties instead of @State decoratorm
-     * because we are only changing styles of the element and don't
-     * need the element to be rerendered
-     */
-    // indicates is the element being manually rotated right now
-    rotating = false;
-    // coordinates of the transform origin in pixels
-    centerX;
-    centerY;
-    // element page (body?) offset in pixels
-    pageX;
-    pageY;
-    currentAngle = 0;
-    // angle at the start of the drag
-    startAngle;
-    /**
-     * Event listeners
-     */
-    handleMouseDown(evt) {
-        // set rotating mode on
-        this.rotating = true;
-        // get start angle
-        //   getting pageX/Y, because when the element is transformed
-        //   relative values are useless
-        this.startAngle = this.getAngle(evt.pageX, evt.pageY);
-        // cancel the event to prevent text selection
-        evt.preventDefault();
-        evt.stopPropagation();
-        return false;
-    }
-    /**
-     * Fires when the mouse moves
-     * checks is the element rotating right now and if it is
-     * then calc the current angle and rotate the element
-     *
-     * TODO: attach events only after the dragStart?
-     */
-    handleMouseMove(evt) {
-        if (this.rotating) {
-            // calc angle update and rotate element
-            this.setAngle(this.currentAngle + (this.getAngle(evt.pageX, evt.pageY) - this.startAngle));
-            return false;
-        }
-    }
-    handleMouseUp(evt) {
-        if (this.rotating) {
-            const angle = this.currentAngle + (this.getAngle(evt.pageX, evt.pageY) - this.startAngle);
-            this.setAngle(angle);
-            this.currentAngle = angle;
-            this.rotating = false;
-            return false;
-        }
-    }
-    // on window resize the center should be recalculated
-    handleWindowResize() {
-        this.getTransformOrigin();
-    }
-    /**
-     * Component lifecycles
-     */
-    componentDidLoad() {
-        this.el.style.transformOrigin = this.center;
-        this.currentAngle = this.value;
-        this.getTransformOrigin();
-        this.setAngle(this.currentAngle);
-    }
-    componentDidUpdate() {
-        this.getTransformOrigin();
-    }
-    /**
-     * Calculates the transform origin of the component
-     * and the page offset in pixels
-     *
-     * We'll need these values to calculate the angle of pointer event
-     */
-    getTransformOrigin() {
-        // transform origin
-        [this.centerX, this.centerY] = window
-            .getComputedStyle(this.el, null)
-            .transformOrigin.split(' ')
-            .map(val => Math.round(parseFloat(val)));
-        // page offset
-        let t = null;
-        const scrollContainer = ((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollLeft === 'number' ? t : document.body;
-        const clientRects = this.el.getBoundingClientRect();
-        this.pageX = Math.round(clientRects.left + scrollContainer.scrollLeft);
-        this.pageY = Math.round(clientRects.top + scrollContainer.scrollTop);
-    }
-    /**
-     * Calculates current angle
-     *
-     * @param {number} posX  horizontal mouse position
-     * @param {number} posY  vertical mouse position
-     */
-    getAngle(posX, posY) {
-        const x = posX - this.pageX - this.centerX;
-        const y = posY - this.pageY - this.centerY;
-        const angle = Math.round(((Math.atan2(y, x) * 180) / Math.PI) * 100) / 100;
-        return angle;
-    }
-    setAngle(angle) {
-        this.el.style.transform = `rotate(${angle}deg)`;
-    }
-    render() {
-        return (h("div", { key: 'ec9a506a360881ab3c3df97027c8a25d663f6819', class: "turntable", onMouseDown: this.handleMouseDown.bind(this) }, h("slot", { key: '926a84fa75952bdc3e44f1b2146848401e8ab10f' })));
-    }
-    static get watchers() { return {
-        "value": ["updateValue"]
-    }; }
-};
-LeTurntable.style = leTurntableCss;
-
-export { LeTurntable as le_turntable };
-//# sourceMappingURL=le-turntable.entry.esm.js.map