le-kit 0.1.14 → 0.1.15

package/dist/core/esm/le-popup.entry.js

@@ -1,210 +0,0 @@
-import { r as registerInstance, i as createEvent, j as getElement, k as h } from './index-SKsXnjWI.js';
-
-const lePopupCss = ":host{display:contents}.le-popup-dialog{position:fixed;z-index:100;top:0;right:0;bottom:0;left:0;padding:0;border:none;background:transparent;max-width:none;max-height:none;overflow:visible;--_popup-min-width:var(--le-popup-min-width, 320px);--_popup-max-width:var(--le-popup-max-width, min(500px, 90vw));--_popup-min-height:var(--le-popup-min-height, auto)}.le-popup-dialog::backdrop{background:var(--le-popup-backdrop-color, rgba(0, 0, 0, 0.5));animation:le-popup-backdrop-fade 0.2s ease-out}@keyframes le-popup-backdrop-fade{from{opacity:0}to{opacity:1}}.le-popup-position-center{margin:auto}.le-popup-position-top{margin:var(--le-space-2xl, 48px) auto auto auto}.le-popup-position-top-left{margin:var(--le-space-lg, 24px) auto auto var(--le-space-lg, 24px)}.le-popup-position-top-right{margin:var(--le-space-lg, 24px) var(--le-space-lg, 24px) auto auto}.le-popup-position-bottom{margin:auto auto var(--le-space-2xl, 48px) auto}.le-popup-position-bottom-left{margin:auto auto var(--le-space-lg, 24px) var(--le-space-lg, 24px)}.le-popup-position-bottom-right{margin:auto var(--le-space-lg, 24px) var(--le-space-lg, 24px) auto}.le-popup-container{display:flex;flex-direction:column;min-width:var(--_popup-min-width);max-width:var(--_popup-max-width);min-height:var(--_popup-min-height);max-height:calc(100vh - var(--le-space-2xl, 48px) * 2);background:var(--le-color-surface, #ffffff);border:1px solid var(--le-color-border, #e0e0e0);border-radius:var(--le-radius-lg, 12px);box-shadow:var(--le-shadow-xl, 0 8px 32px rgba(0, 0, 0, 0.15));overflow:hidden;font-family:var(--le-font-family, system-ui, -apple-system, sans-serif);color:var(--le-color-text, #333);animation:le-popup-appear 0.2s ease-out}@keyframes le-popup-appear{from{opacity:0;transform:scale(0.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.le-popup-header{flex-shrink:0;padding:var(--le-space-md, 16px) var(--le-space-lg, 24px);border-bottom:1px solid var(--le-color-border, #e0e0e0);background:var(--le-color-surface-alt, #f9f9f9);font-size:var(--le-font-size-lg, 1.125rem);font-weight:var(--le-font-weight-semibold, 600);color:var(--le-color-text, #333)}.le-popup-body{flex:1;padding:var(--le-space-lg, 24px);overflow-y:auto}.le-popup-message{margin:0;font-size:var(--le-font-size-md, 1rem);line-height:var(--le-line-height-relaxed, 1.6);color:var(--le-color-text, #333)}.le-popup-message+::slotted(*){margin-top:var(--le-space-md, 16px)}.le-popup-input{display:block;width:100%;margin-top:var(--le-space-md, 16px);padding:var(--le-space-sm, 8px) var(--le-space-md, 16px);font-family:inherit;font-size:var(--le-font-size-md, 1rem);color:var(--le-color-text, #333);background:var(--le-color-background, #fff);border:1px solid var(--le-color-border, #e0e0e0);border-radius:var(--le-radius-md, 8px);outline:none;transition:border-color var(--le-transition-fast, 0.15s ease),\n              box-shadow var(--le-transition-fast, 0.15s ease);box-sizing:border-box}.le-popup-input:focus{border-color:var(--le-color-primary, #2196f3);box-shadow:0 0 0 3px var(--le-color-primary-light, rgba(33, 150, 243, 0.2))}.le-popup-input::placeholder{color:var(--le-color-text-muted, #999)}.le-popup-footer{flex-shrink:0;display:flex;justify-content:flex-end;gap:var(--le-space-sm, 8px);padding:var(--le-space-md, 16px) var(--le-space-lg, 24px);border-top:1px solid var(--le-color-border, #e0e0e0);background:var(--le-color-surface-alt, #f9f9f9)}.le-popup-btn{min-width:80px}@media (max-width: 480px){.le-popup-container{min-width:calc(100vw - var(--le-space-md, 16px) * 2);max-width:calc(100vw - var(--le-space-md, 16px) * 2)}.le-popup-footer{flex-direction:column-reverse}.le-popup-btn{width:100%}}";
-
-const LePopup = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.leConfirm = createEvent(this, "leConfirm");
-        this.leCancel = createEvent(this, "leCancel");
-        this.leOpen = createEvent(this, "leOpen");
-        this.leClose = createEvent(this, "leClose");
-    }
-    get el() { return getElement(this); }
-    /**
-     * Whether the popup is currently visible
-     */
-    open = false;
-    /**
-     * Type of popup: alert (OK only), confirm (OK/Cancel), prompt (input + OK/Cancel), custom
-     */
-    type = 'alert';
-    /**
-     * Optional title for the popup header
-     */
-    popupTitle;
-    /**
-     * Message text to display (for alert/confirm/prompt types)
-     */
-    message;
-    /**
-     * Whether the popup is modal (blocks interaction with page behind)
-     */
-    modal = true;
-    /**
-     * Position of the popup on screen
-     */
-    position = 'center';
-    /**
-     * Text for the confirm/OK button
-     */
-    confirmText = 'OK';
-    /**
-     * Text for the cancel button
-     */
-    cancelText = 'Cancel';
-    /**
-     * Placeholder text for prompt input
-     */
-    placeholder = '';
-    /**
-     * Default value for prompt input
-     */
-    defaultValue = '';
-    /**
-     * Whether clicking the backdrop closes the popup (modal only)
-     */
-    closeOnBackdrop = true;
-    /**
-     * Internal state for prompt input value
-     */
-    inputValue = '';
-    /**
-     * Emitted when the popup is confirmed (OK clicked)
-     */
-    leConfirm;
-    /**
-     * Emitted when the popup is cancelled (Cancel clicked or dismissed)
-     */
-    leCancel;
-    /**
-     * Emitted when the popup opens
-     */
-    leOpen;
-    /**
-     * Emitted when the popup closes
-     */
-    leClose;
-    dialogEl;
-    inputEl;
-    resolvePromise;
-    componentWillLoad() {
-        this.inputValue = this.defaultValue;
-    }
-    componentDidLoad() {
-        // Native dialog handles Escape key automatically when modal
-        // We just need to listen for the cancel event
-        this.dialogEl?.addEventListener('cancel', this.handleDialogCancel);
-    }
-    disconnectedCallback() {
-        this.dialogEl?.removeEventListener('cancel', this.handleDialogCancel);
-    }
-    handleDialogCancel = (e) => {
-        e.preventDefault(); // Prevent default close to handle it ourselves
-        this.handleCancel();
-    };
-    /**
-     * Opens the popup and returns a promise that resolves when closed
-     */
-    async show() {
-        return new Promise((resolve) => {
-            this.resolvePromise = resolve;
-            this.inputValue = this.defaultValue;
-            this.open = true;
-            // Use requestAnimationFrame to ensure the dialog element is rendered
-            requestAnimationFrame(() => {
-                if (this.dialogEl) {
-                    if (this.modal) {
-                        this.dialogEl.showModal();
-                    }
-                    else {
-                        this.dialogEl.show();
-                    }
-                    this.leOpen.emit();
-                    // Focus input for prompt type
-                    if (this.type === 'prompt' && this.inputEl) {
-                        this.inputEl.focus();
-                        this.inputEl.select();
-                    }
-                }
-            });
-        });
-    }
-    /**
-     * Closes the popup with a result
-     */
-    async hide(confirmed = false) {
-        const result = {
-            confirmed,
-            value: this.type === 'prompt' ? this.inputValue : undefined,
-        };
-        this.dialogEl?.close();
-        this.open = false;
-        this.leClose.emit(result);
-        if (this.resolvePromise) {
-            this.resolvePromise(result);
-            this.resolvePromise = undefined;
-        }
-    }
-    handleConfirm = () => {
-        const result = {
-            confirmed: true,
-            value: this.type === 'prompt' ? this.inputValue : undefined,
-        };
-        this.leConfirm.emit(result);
-        this.hide(true);
-    };
-    handleCancel = () => {
-        const result = {
-            confirmed: false,
-            value: undefined,
-        };
-        this.leCancel.emit(result);
-        this.hide(false);
-    };
-    handleBackdropClick = (e) => {
-        // Check if click was on the dialog backdrop (outside the dialog box)
-        if (this.closeOnBackdrop && e.target === this.dialogEl) {
-            const rect = this.dialogEl.getBoundingClientRect();
-            const clickedInDialog = (e.clientX >= rect.left &&
-                e.clientX <= rect.right &&
-                e.clientY >= rect.top &&
-                e.clientY <= rect.bottom);
-            if (!clickedInDialog) {
-                this.handleCancel();
-            }
-        }
-    };
-    handleInputChange = (e) => {
-        this.inputValue = e.target.value;
-    };
-    handleKeyDown = (e) => {
-        if (e.key === 'Enter' && this.type !== 'custom') {
-            e.preventDefault();
-            this.handleConfirm();
-        }
-    };
-    hasSlot(name) {
-        return !!this.el.querySelector(`[slot="${name}"]`);
-    }
-    renderHeader() {
-        if (this.hasSlot('header')) {
-            return (h("div", { class: "le-popup-header", part: "header" }, h("slot", { name: "header" })));
-        }
-        if (this.popupTitle) {
-            return (h("div", { class: "le-popup-header", part: "header" }, this.popupTitle));
-        }
-        return null;
-    }
-    renderBody() {
-        return (h("div", { class: "le-popup-body", part: "body" }, this.message && h("p", { class: "le-popup-message" }, this.message), this.type === 'prompt' && (h("input", { type: "text", class: "le-popup-input", part: "input", placeholder: this.placeholder, value: this.inputValue, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, ref: (el) => (this.inputEl = el) })), h("slot", null)));
-    }
-    renderFooter() {
-        if (this.hasSlot('footer')) {
-            return (h("div", { class: "le-popup-footer", part: "footer" }, h("slot", { name: "footer" })));
-        }
-        // For custom type without footer slot, don't render default buttons
-        if (this.type === 'custom') {
-            return null;
-        }
-        return (h("div", { class: "le-popup-footer", part: "footer" }, (this.type === 'confirm' || this.type === 'prompt') && (h("le-button", { variant: "outlined", part: "button-cancel", class: "le-popup-btn", onClick: this.handleCancel }, this.cancelText)), h("le-button", { variant: "solid", part: "button-confirm", class: "le-popup-btn", onClick: this.handleConfirm }, this.confirmText)));
-    }
-    render() {
-        const positionClass = `le-popup-position-${this.position}`;
-        return (h("dialog", { key: '2577d13672e69f8e6667a88aa089e4785d5eef9b', class: `le-popup-dialog ${positionClass}`, part: "dialog", ref: (el) => (this.dialogEl = el), onClick: this.handleBackdropClick }, h("div", { key: '7e4cf46898f81d8a0690ebc8649b356d8ffeb360', class: "le-popup-container", part: "container" }, this.renderHeader(), this.renderBody(), this.renderFooter())));
-    }
-};
-LePopup.style = lePopupCss;
-
-export { LePopup as le_popup };
-//# sourceMappingURL=le-popup.entry.js.map

package/dist/core/esm/le-popup.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"le-popup.entry.js","sources":["src-core/components/le-popup/le-popup.css?tag=le-popup&encapsulation=shadow","src-core/components/le-popup/le-popup.tsx"],"sourcesContent":["/* ============================================\n   le-popup.css\n   Popup/Dialog component using native <dialog>\n   Uses CSS variables for easy theming\n   ============================================ */\n\n:host {\n  display: contents;\n}\n\n/* ============================================\n   Native Dialog Element\n   ============================================ */\n\n.le-popup-dialog {\n  /* Reset default dialog styles */\n  position: fixed;\n  z-index: 100;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  padding: 0;\n  border: none;\n  background: transparent;\n  max-width: none;\n  max-height: none;\n  overflow: visible;\n  \n  /* Sizing variables */\n  --_popup-min-width: var(--le-popup-min-width, 320px);\n  --_popup-max-width: var(--le-popup-max-width, min(500px, 90vw));\n  --_popup-min-height: var(--le-popup-min-height, auto);\n}\n\n/* Backdrop styling (native ::backdrop pseudo-element) */\n.le-popup-dialog::backdrop {\n  background: var(--le-popup-backdrop-color, rgba(0, 0, 0, 0.5));\n  animation: le-popup-backdrop-fade 0.2s ease-out;\n}\n\n@keyframes le-popup-backdrop-fade {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n/* ============================================\n   Position Variants\n   Using margin to position within viewport\n   ============================================ */\n\n/* Center (default) */\n.le-popup-position-center {\n  margin: auto;\n}\n\n/* Top positions */\n.le-popup-position-top {\n  margin: var(--le-space-2xl, 48px) auto auto auto;\n}\n\n.le-popup-position-top-left {\n  margin: var(--le-space-lg, 24px) auto auto var(--le-space-lg, 24px);\n}\n\n.le-popup-position-top-right {\n  margin: var(--le-space-lg, 24px) var(--le-space-lg, 24px) auto auto;\n}\n\n/* Bottom positions */\n.le-popup-position-bottom {\n  margin: auto auto var(--le-space-2xl, 48px) auto;\n}\n\n.le-popup-position-bottom-left {\n  margin: auto auto var(--le-space-lg, 24px) var(--le-space-lg, 24px);\n}\n\n.le-popup-position-bottom-right {\n  margin: auto var(--le-space-lg, 24px) var(--le-space-lg, 24px) auto;\n}\n\n/* ============================================\n   Container (the visible dialog box)\n   ============================================ */\n\n.le-popup-container {\n  display: flex;\n  flex-direction: column;\n  min-width: var(--_popup-min-width);\n  max-width: var(--_popup-max-width);\n  min-height: var(--_popup-min-height);\n  max-height: calc(100vh - var(--le-space-2xl, 48px) * 2);\n  background: var(--le-color-surface, #ffffff);\n  border: 1px solid var(--le-color-border, #e0e0e0);\n  border-radius: var(--le-radius-lg, 12px);\n  box-shadow: var(--le-shadow-xl, 0 8px 32px rgba(0, 0, 0, 0.15));\n  overflow: hidden;\n  font-family: var(--le-font-family, system-ui, -apple-system, sans-serif);\n  color: var(--le-color-text, #333);\n  \n  /* Animation */\n  animation: le-popup-appear 0.2s ease-out;\n}\n\n@keyframes le-popup-appear {\n  from {\n    opacity: 0;\n    transform: scale(0.95) translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* ============================================\n   Header\n   ============================================ */\n\n.le-popup-header {\n  flex-shrink: 0;\n  padding: var(--le-space-md, 16px) var(--le-space-lg, 24px);\n  border-bottom: 1px solid var(--le-color-border, #e0e0e0);\n  background: var(--le-color-surface-alt, #f9f9f9);\n  font-size: var(--le-font-size-lg, 1.125rem);\n  font-weight: var(--le-font-weight-semibold, 600);\n  color: var(--le-color-text, #333);\n}\n\n/* ============================================\n   Body\n   ============================================ */\n\n.le-popup-body {\n  flex: 1;\n  padding: var(--le-space-lg, 24px);\n  overflow-y: auto;\n}\n\n.le-popup-message {\n  margin: 0;\n  font-size: var(--le-font-size-md, 1rem);\n  line-height: var(--le-line-height-relaxed, 1.6);\n  color: var(--le-color-text, #333);\n}\n\n/* When there's both message and slot content */\n.le-popup-message + ::slotted(*) {\n  margin-top: var(--le-space-md, 16px);\n}\n\n/* ============================================\n   Input (for prompt type)\n   ============================================ */\n\n.le-popup-input {\n  display: block;\n  width: 100%;\n  margin-top: var(--le-space-md, 16px);\n  padding: var(--le-space-sm, 8px) var(--le-space-md, 16px);\n  font-family: inherit;\n  font-size: var(--le-font-size-md, 1rem);\n  color: var(--le-color-text, #333);\n  background: var(--le-color-background, #fff);\n  border: 1px solid var(--le-color-border, #e0e0e0);\n  border-radius: var(--le-radius-md, 8px);\n  outline: none;\n  transition: border-color var(--le-transition-fast, 0.15s ease),\n              box-shadow var(--le-transition-fast, 0.15s ease);\n  box-sizing: border-box;\n}\n\n.le-popup-input:focus {\n  border-color: var(--le-color-primary, #2196f3);\n  box-shadow: 0 0 0 3px var(--le-color-primary-light, rgba(33, 150, 243, 0.2));\n}\n\n.le-popup-input::placeholder {\n  color: var(--le-color-text-muted, #999);\n}\n\n/* ============================================\n   Footer (buttons)\n   ============================================ */\n\n.le-popup-footer {\n  flex-shrink: 0;\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--le-space-sm, 8px);\n  padding: var(--le-space-md, 16px) var(--le-space-lg, 24px);\n  border-top: 1px solid var(--le-color-border, #e0e0e0);\n  background: var(--le-color-surface-alt, #f9f9f9);\n}\n\n/* ============================================\n   Buttons\n   ============================================ */\n\n.le-popup-btn {\n  min-width: 80px;\n}\n\n/* ============================================\n   Responsive adjustments\n   ============================================ */\n\n@media (max-width: 480px) {\n  .le-popup-container {\n    min-width: calc(100vw - var(--le-space-md, 16px) * 2);\n    max-width: calc(100vw - var(--le-space-md, 16px) * 2);\n  }\n  \n  .le-popup-footer {\n    flex-direction: column-reverse;\n  }\n  \n  .le-popup-btn {\n    width: 100%;\n  }\n}","import { Component, Prop, Method, Event, EventEmitter, State, Element, h } from '@stencil/core';\n\n/**\n * Popup type determines the buttons shown\n */\nexport type PopupType = 'alert' | 'confirm' | 'prompt' | 'custom';\n\n/**\n * Popup position on the screen\n */\nexport type PopupPosition = 'center' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n\n/**\n * Result returned by the popup when closed\n */\nexport interface PopupResult {\n  confirmed: boolean;\n  value?: string;\n}\n\n/**\n * A flexible popup/dialog component for alerts, confirms, prompts, and custom content.\n * \n * Uses the native HTML <dialog> element for proper modal behavior, accessibility,\n * and focus management. Can be used declaratively in HTML or programmatically \n * via leAlert(), leConfirm(), lePrompt().\n *\n * @slot - Default slot for custom body content\n * @slot header - Custom header content (replaces title)\n * @slot footer - Custom footer content (replaces default buttons)\n * \n * @cmsInternal true\n * @cmsCategory System\n */\n@Component({\n  tag: 'le-popup',\n  styleUrl: 'le-popup.css',\n  shadow: true,\n})\nexport class LePopup {\n  @Element() el: HTMLElement;\n\n  /**\n   * Whether the popup is currently visible\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Type of popup: alert (OK only), confirm (OK/Cancel), prompt (input + OK/Cancel), custom\n   */\n  @Prop() type: PopupType = 'alert';\n\n  /**\n   * Optional title for the popup header\n   */\n  @Prop() popupTitle?: string;\n\n  /**\n   * Message text to display (for alert/confirm/prompt types)\n   */\n  @Prop() message?: string;\n\n  /**\n   * Whether the popup is modal (blocks interaction with page behind)\n   */\n  @Prop() modal: boolean = true;\n\n  /**\n   * Position of the popup on screen\n   */\n  @Prop() position: PopupPosition = 'center';\n\n  /**\n   * Text for the confirm/OK button\n   */\n  @Prop() confirmText: string = 'OK';\n\n  /**\n   * Text for the cancel button\n   */\n  @Prop() cancelText: string = 'Cancel';\n\n  /**\n   * Placeholder text for prompt input\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * Default value for prompt input\n   */\n  @Prop() defaultValue: string = '';\n\n  /**\n   * Whether clicking the backdrop closes the popup (modal only)\n   */\n  @Prop() closeOnBackdrop: boolean = true;\n\n  /**\n   * Internal state for prompt input value\n   */\n  @State() inputValue: string = '';\n\n  /**\n   * Emitted when the popup is confirmed (OK clicked)\n   */\n  @Event() leConfirm: EventEmitter<PopupResult>;\n\n  /**\n   * Emitted when the popup is cancelled (Cancel clicked or dismissed)\n   */\n  @Event() leCancel: EventEmitter<PopupResult>;\n\n  /**\n   * Emitted when the popup opens\n   */\n  @Event() leOpen: EventEmitter<void>;\n\n  /**\n   * Emitted when the popup closes\n   */\n  @Event() leClose: EventEmitter<PopupResult>;\n\n  private dialogEl?: HTMLDialogElement;\n  private inputEl?: HTMLInputElement;\n  private resolvePromise?: (result: PopupResult) => void;\n\n  componentWillLoad() {\n    this.inputValue = this.defaultValue;\n  }\n\n  componentDidLoad() {\n    // Native dialog handles Escape key automatically when modal\n    // We just need to listen for the cancel event\n    this.dialogEl?.addEventListener('cancel', this.handleDialogCancel);\n  }\n\n  disconnectedCallback() {\n    this.dialogEl?.removeEventListener('cancel', this.handleDialogCancel);\n  }\n\n  private handleDialogCancel = (e: Event) => {\n    e.preventDefault(); // Prevent default close to handle it ourselves\n    this.handleCancel();\n  };\n\n  /**\n   * Opens the popup and returns a promise that resolves when closed\n   */\n  @Method()\n  async show(): Promise<PopupResult> {\n    return new Promise((resolve) => {\n      this.resolvePromise = resolve;\n      this.inputValue = this.defaultValue;\n      this.open = true;\n      \n      // Use requestAnimationFrame to ensure the dialog element is rendered\n      requestAnimationFrame(() => {\n        if (this.dialogEl) {\n          if (this.modal) {\n            this.dialogEl.showModal();\n          } else {\n            this.dialogEl.show();\n          }\n          \n          this.leOpen.emit();\n          \n          // Focus input for prompt type\n          if (this.type === 'prompt' && this.inputEl) {\n            this.inputEl.focus();\n            this.inputEl.select();\n          }\n        }\n      });\n    });\n  }\n\n  /**\n   * Closes the popup with a result\n   */\n  @Method()\n  async hide(confirmed: boolean = false) {\n    const result: PopupResult = {\n      confirmed,\n      value: this.type === 'prompt' ? this.inputValue : undefined,\n    };\n    \n    this.dialogEl?.close();\n    this.open = false;\n    this.leClose.emit(result);\n    \n    if (this.resolvePromise) {\n      this.resolvePromise(result);\n      this.resolvePromise = undefined;\n    }\n  }\n\n  private handleConfirm = () => {\n    const result: PopupResult = {\n      confirmed: true,\n      value: this.type === 'prompt' ? this.inputValue : undefined,\n    };\n    this.leConfirm.emit(result);\n    this.hide(true);\n  };\n\n  private handleCancel = () => {\n    const result: PopupResult = {\n      confirmed: false,\n      value: undefined,\n    };\n    this.leCancel.emit(result);\n    this.hide(false);\n  };\n\n  private handleBackdropClick = (e: MouseEvent) => {\n    // Check if click was on the dialog backdrop (outside the dialog box)\n    if (this.closeOnBackdrop && e.target === this.dialogEl) {\n      const rect = this.dialogEl.getBoundingClientRect();\n      const clickedInDialog = (\n        e.clientX >= rect.left &&\n        e.clientX <= rect.right &&\n        e.clientY >= rect.top &&\n        e.clientY <= rect.bottom\n      );\n      if (!clickedInDialog) {\n        this.handleCancel();\n      }\n    }\n  };\n\n  private handleInputChange = (e: Event) => {\n    this.inputValue = (e.target as HTMLInputElement).value;\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' && this.type !== 'custom') {\n      e.preventDefault();\n      this.handleConfirm();\n    }\n  };\n\n  private hasSlot(name: string): boolean {\n    return !!this.el.querySelector(`[slot=\"${name}\"]`);\n  }\n\n  private renderHeader() {\n    if (this.hasSlot('header')) {\n      return (\n        <div class=\"le-popup-header\" part=\"header\">\n          <slot name=\"header\"></slot>\n        </div>\n      );\n    }\n    \n    if (this.popupTitle) {\n      return (\n        <div class=\"le-popup-header\" part=\"header\">\n          {this.popupTitle}\n        </div>\n      );\n    }\n    \n    return null;\n  }\n\n  private renderBody() {\n    return (\n      <div class=\"le-popup-body\" part=\"body\">\n        {this.message && <p class=\"le-popup-message\">{this.message}</p>}\n        \n        {this.type === 'prompt' && (\n          <input\n            type=\"text\"\n            class=\"le-popup-input\"\n            part=\"input\"\n            placeholder={this.placeholder}\n            value={this.inputValue}\n            onInput={this.handleInputChange}\n            onKeyDown={this.handleKeyDown}\n            ref={(el) => (this.inputEl = el)}\n          />\n        )}\n        \n        {/* Default slot for custom content */}\n        \n          <slot></slot>\n        \n      </div>\n    );\n  }\n\n  private renderFooter() {\n    if (this.hasSlot('footer')) {\n      return (\n        <div class=\"le-popup-footer\" part=\"footer\">\n          <slot name=\"footer\"></slot>\n        </div>\n      );\n    }\n    \n    // For custom type without footer slot, don't render default buttons\n    if (this.type === 'custom') {\n      return null;\n    }\n    \n    return (\n      <div class=\"le-popup-footer\" part=\"footer\">\n        {(this.type === 'confirm' || this.type === 'prompt') && (\n          <le-button\n            variant=\"outlined\"\n            part=\"button-cancel\"\n            class=\"le-popup-btn\"\n            onClick={this.handleCancel}\n          >\n            {this.cancelText}\n          </le-button>\n        )}\n        <le-button\n          variant=\"solid\"\n          part=\"button-confirm\"\n          class=\"le-popup-btn\"\n          onClick={this.handleConfirm}\n        >\n          {this.confirmText}\n        </le-button>\n      </div>\n    );\n  }\n\n  render() {\n    const positionClass = `le-popup-position-${this.position}`;\n    \n    return (\n      <dialog\n        class={`le-popup-dialog ${positionClass}`}\n        part=\"dialog\"\n        ref={(el) => (this.dialogEl = el)}\n        onClick={this.handleBackdropClick}\n      >\n        \n          <div class=\"le-popup-container\" part=\"container\">\n            {this.renderHeader()}\n            {this.renderBody()}\n            {this.renderFooter()}\n          </div>\n        \n      </dialog>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/core/esm/le-round-progress.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"le-round-progress.entry.js","sources":["src-core/components/le-round-progress/le-round-progress.css?tag=le-round-progress&encapsulation=shadow","src-core/components/le-round-progress/le-round-progress.tsx"],"sourcesContent":[".round-progress--container {\n  position: relative;\n}\n\n.round-progress {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: block;\n}\n\n.round-progress--progress {\n  filter: drop-shadow(var(--progress-shadow));\n}\n\n.round-progress--circle {\n  fill: none;\n  stroke: var(--progress-color, #999);\n  stroke-width: var(--progress-width, 4);\n  stroke-linecap: var(--progress-linecap, round);\n  animation: progress--circle 0.5s ease-out forwards;\n  transition: stroke-dasharray 0.5s ease-out;\n}\n\n@keyframes progress--circle {\n  0% { stroke-dasharray: 0 1000; }\n}\n\n.round-progress--path {\n  fill: none;\n  stroke-linecap: round;\n}\n","import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'le-round-progress',\n  styleUrl: 'le-round-progress.css',\n  shadow: true,\n})\nexport class LeRoundProgress {\n  // host element\n  @Element() el: HTMLElement;\n\n  // progress value coming from an attribute\n  @Prop() value: number = 0;\n  @Watch('value')\n  updateValue(newValue: string) {\n    this.value = parseFloat(newValue);\n  }\n\n  // padding value coming from an attribute\n  @Prop() padding: number = 0;\n  @Watch('padding')\n  updatePadding(newValue: string) {\n    this.padding = parseFloat(newValue);\n    this.calcParams();\n  }\n\n  // the progress backgrounds can be as many as needed\n  // but it should be JSON format: double quotes and strict commas\n  @Prop() paths: string;\n  @Watch('paths')\n  updateProgressBackgrounds(newValue: string) {\n    this.progressPaths = JSON.parse(newValue);\n  }\n  progressPaths: any[];\n\n  @State() params: {\n    width: number;\n    diameter: number;\n    circumference: number;\n  };\n\n  /**\n   * Component lifecycles\n   *\n   * Before the component is loaded, we need to calculate and update params\n   * using the component size (width of the round progress)\n   * and progress width (max of )\n   */\n  componentWillLoad() {\n    if (typeof this.paths === 'string') {\n      this.updateProgressBackgrounds(this.paths);\n    }\n    this.calcParams();\n  }\n\n  calcParams() {\n    // get element width\n    const width = this.el.getBoundingClientRect().width;\n    const diameter = width - this.padding;\n    // calc circumference — we'll need it later to calc the stroke paths\n    const circumference = Math.PI * diameter;\n\n    this.params = { width, diameter, circumference };\n  }\n\n  /**\n   * Returns the viewPath attribute value for the SVG\n   * based on the width of the parent element\n   */\n  getViewBox() {\n    return '0 0 ' + this.params.width + ' ' + this.params.width;\n  }\n\n  /**\n   * Returns the circular path for the progress stroke\n   * and additional paths in the background\n   */\n  getPath() {\n    return (\n      'M' +\n      this.params.width / 2 +\n      ' ' +\n      (this.params.width - this.params.diameter) / 2 +\n      ' a ' +\n      this.params.diameter / 2 +\n      ' ' +\n      this.params.diameter / 2 +\n      ' 0 0 1 0 ' +\n      this.params.diameter +\n      ' a ' +\n      this.params.diameter / 2 +\n      ' ' +\n      this.params.diameter / 2 +\n      ' 0 0 1 0 -' +\n      this.params.diameter\n    );\n  }\n\n  getStrokeDashArray() {\n    return (this.value / 100) * this.params.circumference + ', ' + this.params.circumference;\n  }\n\n  getPaths() {\n    if (!this.progressPaths || !this.progressPaths.length) {\n      return null;\n    }\n    let paths = [];\n    this.progressPaths.forEach(bg => {\n      paths.push(<path class=\"round-progress--path\" d={this.getPath()} stroke={bg.color} stroke-width={bg.width} stroke-dasharray={bg.dasharray} stroke-linecap={bg.linecap} />);\n    });\n    return (\n      <svg viewBox={this.getViewBox()} class=\"round-progress\">\n        {paths}\n      </svg>\n    );\n  }\n\n  render() {\n    return (\n      <div class=\"round-progress--container\">\n        {this.getPaths()}\n        <svg viewBox={this.getViewBox()} class=\"round-progress round-progress--progress\">\n          <path class=\"round-progress--circle\" stroke-dasharray={this.getStrokeDashArray()} d={this.getPath()} />\n        </svg>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/core/esm/le-stack.entry.js

@@ -1,133 +0,0 @@
-import { r as registerInstance, j as getElement, k as h, H as Host } from './index-SKsXnjWI.js';
-import { c as classnames } from './utils-DZdP1JiG.js';
-
-const leStackDefaultCss = ":host{display:block}:host([hidden]){display:none}.stack{gap:var(--le-stack-gap, var(--le-space-md))}:host(.full-width){width:100%}:host(.full-height){height:100%}:host(.direction-horizontal) .stack{min-height:0}:host(.direction-vertical) .stack{min-width:0}";
-
-const LeStack = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    get el() { return getElement(this); }
-    /**
-     * Direction of the stack layout
-     * @allowedValues horizontal | vertical
-     */
-    direction = 'horizontal';
-    /**
-     * Gap between items (CSS value like '8px', '1rem', 'var(--le-space-md)')
-     */
-    gap;
-    /**
-     * Alignment of items on the cross axis
-     * @allowedValues start | center | end | stretch | baseline
-     */
-    align = 'stretch';
-    /**
-     * Distribution of items on the main axis
-     * @allowedValues start | center | end | space-between | space-around | space-evenly
-     */
-    justify = 'start';
-    /**
-     * Whether items should wrap to multiple lines
-     */
-    wrap = false;
-    /**
-     * Alignment of wrapped lines (only applies when wrap is true)
-     * @allowedValues start | center | end | stretch | space-between | space-around
-     */
-    alignContent = 'stretch';
-    /**
-     * Whether to reverse the order of items
-     */
-    reverse = false;
-    /**
-     * Maximum number of items allowed in the stack (for CMS validation)
-     * @min 1
-     */
-    maxItems;
-    /**
-     * Whether the stack should take full width of its container
-     */
-    fullWidth = false;
-    /**
-     * Whether the stack should take full height of its container
-     */
-    fullHeight = false;
-    /**
-     * Padding inside the stack container (CSS value)
-     */
-    padding;
-    getFlexDirection() {
-        const base = this.direction === 'vertical' ? 'column' : 'row';
-        return this.reverse ? `${base}-reverse` : base;
-    }
-    getAlignItems() {
-        const alignMap = {
-            start: 'flex-start',
-            center: 'center',
-            end: 'flex-end',
-            stretch: 'stretch',
-            baseline: 'baseline',
-        };
-        return alignMap[this.align] || 'stretch';
-    }
-    getJustifyContent() {
-        const justifyMap = {
-            start: 'flex-start',
-            center: 'center',
-            end: 'flex-end',
-            'space-between': 'space-between',
-            'space-around': 'space-around',
-            'space-evenly': 'space-evenly',
-        };
-        return justifyMap[this.justify] || 'flex-start';
-    }
-    getAlignContent() {
-        const alignContentMap = {
-            start: 'flex-start',
-            center: 'center',
-            end: 'flex-end',
-            stretch: 'stretch',
-            'space-between': 'space-between',
-            'space-around': 'space-around',
-        };
-        return alignContentMap[this.alignContent] || 'stretch';
-    }
-    render() {
-        const style = {
-            display: 'flex',
-            flexDirection: this.getFlexDirection(),
-            alignItems: this.getAlignItems(),
-            justifyContent: this.getJustifyContent(),
-            flexWrap: this.wrap ? 'wrap' : 'nowrap',
-        };
-        if (this.wrap) {
-            style.alignContent = this.getAlignContent();
-        }
-        if (this.gap) {
-            style.gap = this.gap;
-        }
-        if (this.padding) {
-            style.padding = this.padding;
-        }
-        // if (this.fullWidth) {
-        //   style.width = '100%';
-        // }
-        // if (this.fullHeight) {
-        //   style.height = '100%';
-        // }
-        const hostClass = classnames(`direction-${this.direction}`, {
-            'wrap': this.wrap,
-            'reverse': this.reverse,
-            'full-width': this.fullWidth,
-            'full-height': this.fullHeight,
-        });
-        // Slot style for admin mode - make items display in the same direction
-        `display: flex; flex-direction: ${this.getFlexDirection()}; gap: ${this.gap || 'var(--le-space-md)'}; flex-wrap: ${this.wrap ? 'wrap' : 'nowrap'}; justify-content: ${this.getJustifyContent()}; align-items: ${this.getAlignItems()};`;
-        return (h(Host, { key: '2cb4f4d86677c74c2db364f5d401d7911067c9d2', class: hostClass }, h("div", { key: '4f3a69840cf5c1efd22ef3bb9d18198f8d578a20', class: "stack", part: "stack", style: style }, h("slot", { key: 'ce93b2e01cb09e5351839894464f8f64e203f98e' }))));
-    }
-};
-LeStack.style = leStackDefaultCss;
-
-export { LeStack as le_stack };
-//# sourceMappingURL=le-stack.entry.js.map

package/dist/core/esm/le-stack.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"le-stack.entry.js","sources":["src-core/components/le-stack/le-stack.default.css?tag=le-stack&encapsulation=shadow","src-core/components/le-stack/le-stack.tsx"],"sourcesContent":["/**\n * le-stack default styles\n *\n * The component uses inline styles for flex properties to allow\n * dynamic prop-based configuration. This CSS handles theming.\n */\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* Base stack container */\n.stack {\n  gap: var(--le-stack-gap, var(--le-space-md));\n}\n\n/* Full width/height variants */\n:host(.full-width) {\n  width: 100%;\n}\n\n:host(.full-height) {\n  height: 100%;\n}\n\n/* Direction-specific defaults */\n:host(.direction-horizontal) .stack {\n  min-height: 0;\n}\n\n:host(.direction-vertical) .stack {\n  min-width: 0;\n}\n","import { Component, Prop, h, Element , Host } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible stack layout component using CSS flexbox.\n *\n * `le-stack` arranges its children in a row (horizontal) or column (vertical)\n * with configurable spacing, alignment, and wrapping behavior. Perfect for\n * creating responsive layouts.\n *\n * @slot - Default slot for stack items (le-box components recommended)\n *\n * @cssprop --le-stack-gap - Gap between items (defaults to var(--le-space-md))\n *\n * @csspart stack - The main stack container\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-stack',\n  styleUrl: 'le-stack.default.css',\n  shadow: true,\n})\nexport class LeStack {\n  @Element() el: HTMLElement;\n\n  /**\n   * Direction of the stack layout\n   * @allowedValues horizontal | vertical\n   */\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Gap between items (CSS value like '8px', '1rem', 'var(--le-space-md)')\n   */\n  @Prop() gap?: string;\n\n  /**\n   * Alignment of items on the cross axis\n   * @allowedValues start | center | end | stretch | baseline\n   */\n  @Prop() align: 'start' | 'center' | 'end' | 'stretch' | 'baseline' = 'stretch';\n\n  /**\n   * Distribution of items on the main axis\n   * @allowedValues start | center | end | space-between | space-around | space-evenly\n   */\n  @Prop() justify: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly' = 'start';\n\n  /**\n   * Whether items should wrap to multiple lines\n   */\n  @Prop() wrap: boolean = false;\n\n  /**\n   * Alignment of wrapped lines (only applies when wrap is true)\n   * @allowedValues start | center | end | stretch | space-between | space-around\n   */\n  @Prop() alignContent: 'start' | 'center' | 'end' | 'stretch' | 'space-between' | 'space-around' = 'stretch';\n\n  /**\n   * Whether to reverse the order of items\n   */\n  @Prop() reverse: boolean = false;\n\n  /**\n   * Maximum number of items allowed in the stack (for CMS validation)\n   * @min 1\n   */\n  @Prop() maxItems?: number;\n\n  /**\n   * Whether the stack should take full width of its container\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * Whether the stack should take full height of its container\n   */\n  @Prop() fullHeight: boolean = false;\n\n  /**\n   * Padding inside the stack container (CSS value)\n   */\n  @Prop() padding?: string;\n\n  private getFlexDirection(): string {\n    const base = this.direction === 'vertical' ? 'column' : 'row';\n    return this.reverse ? `${base}-reverse` : base;\n  }\n\n  private getAlignItems(): string {\n    const alignMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n      baseline: 'baseline',\n    };\n    return alignMap[this.align] || 'stretch';\n  }\n\n  private getJustifyContent(): string {\n    const justifyMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      'space-between': 'space-between',\n      'space-around': 'space-around',\n      'space-evenly': 'space-evenly',\n    };\n    return justifyMap[this.justify] || 'flex-start';\n  }\n\n  private getAlignContent(): string {\n    const alignContentMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n      'space-between': 'space-between',\n      'space-around': 'space-around',\n    };\n    return alignContentMap[this.alignContent] || 'stretch';\n  }\n\n  render() {\n    const style: { [key: string]: string } = {\n      display: 'flex',\n      flexDirection: this.getFlexDirection(),\n      alignItems: this.getAlignItems(),\n      justifyContent: this.getJustifyContent(),\n      flexWrap: this.wrap ? 'wrap' : 'nowrap',\n    };\n\n    if (this.wrap) {\n      style.alignContent = this.getAlignContent();\n    }\n\n    if (this.gap) {\n      style.gap = this.gap;\n    }\n\n    if (this.padding) {\n      style.padding = this.padding;\n    }\n\n    // if (this.fullWidth) {\n    //   style.width = '100%';\n    // }\n\n    // if (this.fullHeight) {\n    //   style.height = '100%';\n    // }\n\n    const hostClass = classnames(\n      `direction-${this.direction}`,\n      {\n        'wrap': this.wrap,\n        'reverse': this.reverse,\n        'full-width': this.fullWidth,\n        'full-height': this.fullHeight,\n      }\n    );\n\n    // Slot style for admin mode - make items display in the same direction\n    const slotStyle = `display: flex; flex-direction: ${this.getFlexDirection()}; gap: ${this.gap || 'var(--le-space-md)'}; flex-wrap: ${this.wrap ? 'wrap' : 'nowrap'}; justify-content: ${this.getJustifyContent()}; align-items: ${this.getAlignItems()};`;\n\n    return (\n      <Host  class={hostClass}>\n        <div class=\"stack\" part=\"stack\" style={style}>\n          \n            <slot></slot>\n          \n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/core/esm/le-string-input.entry.js

@@ -1,93 +0,0 @@
-import { r as registerInstance, i as createEvent, j as getElement, k as h, H as Host } from './index-SKsXnjWI.js';
-import { c as classnames } from './utils-DZdP1JiG.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(slot[name=description]:empty){display:none}";
-
-const LeStringInput = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.leChange = createEvent(this, "change");
-        this.leInput = createEvent(this, "input");
-    }
-    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(Host, { key: '5c841074ac9288c448c2c09e18530c91bc62e3da', class: classnames({ 'disabled': this.disabled }) }, h("div", { key: 'b2f7bea3e6c52033153caf9f18df4a815e9de14e', class: "le-input-wrapper" }, this.label && (h("label", { key: 'ce3cb46e176ec1016c93f5742ff0856badfe7d26', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: 'ea5cbbe1e178f964631aa67ec9833a17c3362be7', class: "le-input-container" }, this.iconStart && (h("span", { key: 'df8b39dcbe87ecb232ed23f2d965c707b16b1b50', class: "icon-start" }, this.iconStart)), h("input", { key: '53aff08b71412d2676c3ff90dc9af6e45d8aa438', 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: 'a726a70aa97b74ecd1a69266bcbfff18b504266b', class: "icon-end" }, this.iconEnd))), h("div", { key: '950270b513255a6dd7a53b80d3827efe3b043aac', class: "le-input-description" }, h("slot", { key: 'cb083064937a07085c11d421d2f42cf700f47892', name: "description" })))));
-    }
-};
-LeStringInput.style = leStringInputCss;
-
-export { LeStringInput as le_string_input };
-//# sourceMappingURL=le-string-input.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"le-string-input.entry.js","sources":["src-core/components/le-string-input/le-string-input.css?tag=le-string-input&encapsulation=shadow","src-core/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(slot[name=description]:empty) {\n  display: none;\n}\n","import { Component, Prop, Event, EventEmitter, h, Element , Host } 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      <Host  class={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            \n              <slot name=\"description\"></slot>\n            \n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}