le-kit 0.0.3 → 0.1.1

package/dist/types/components/le-box/le-box.d.ts

@@ -0,0 +1,111 @@
+/**
+ * A flexible box component for use as a flex item within le-stack.
+ *
+ * `le-box` wraps content and provides flex item properties like grow, shrink,
+ * basis, and self-alignment. It can also control its internal content alignment.
+ *
+ * @slot - Default slot for box content
+ *
+ * @cssprop --le-box-bg - Background color
+ * @cssprop --le-box-padding - Padding inside the box
+ * @cssprop --le-box-border-radius - Border radius
+ *
+ * @csspart box - The main box container
+ * @csspart content - The inner content wrapper
+ *
+ * @cmsEditable true
+ * @cmsCategory Layout
+ */
+export declare class LeBox {
+    el: HTMLElement;
+    /**
+     * Flex grow factor - how much the item should grow relative to siblings
+     * @min 0
+     */
+    grow: number;
+    /**
+     * Flex shrink factor - how much the item should shrink relative to siblings
+     * @min 0
+     */
+    shrink: number;
+    /**
+     * Flex basis - initial size before growing/shrinking (e.g., '200px', '25%', 'auto')
+     */
+    basis: string;
+    /**
+     * Width of the box (CSS value like '100px', '50%', 'auto')
+     */
+    width?: string;
+    /**
+     * Height of the box (CSS value)
+     */
+    height?: string;
+    /**
+     * Minimum width constraint
+     */
+    minWidth?: string;
+    /**
+     * Maximum width constraint
+     */
+    maxWidth?: string;
+    /**
+     * Minimum height constraint
+     */
+    minHeight?: string;
+    /**
+     * Maximum height constraint
+     */
+    maxHeight?: string;
+    /**
+     * Background color or CSS value (e.g., '#f0f0f0', 'var(--le-color-primary-light)')
+     */
+    background?: string;
+    /**
+     * Border radius (e.g., '8px', 'var(--le-radius-md)')
+     */
+    borderRadius?: string;
+    /**
+     * Border style (e.g., '1px solid #ccc', '2px dashed var(--le-color-border)')
+     */
+    border?: string;
+    /**
+     * Self-alignment override for this item on the cross axis
+     * @allowedValues auto | start | center | end | stretch | baseline
+     */
+    alignSelf: 'auto' | 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    /**
+     * Internal horizontal alignment of content
+     * @allowedValues start | center | end | stretch
+     */
+    alignContent: 'start' | 'center' | 'end' | 'stretch';
+    /**
+     * Internal vertical alignment of content
+     * @allowedValues start | center | end | stretch
+     */
+    justifyContent: 'start' | 'center' | 'end' | 'stretch';
+    /**
+     * Padding inside the box (CSS value like '8px', '1rem')
+     */
+    padding?: string;
+    /**
+     * Order in the flex container (lower values come first)
+     */
+    order?: number;
+    /**
+     * Whether to display box content as flex (for internal alignment)
+     */
+    displayFlex: boolean;
+    /**
+     * Direction of internal flex layout when displayFlex is true
+     * @allowedValues horizontal | vertical
+     */
+    innerDirection: 'horizontal' | 'vertical';
+    /**
+     * Gap between internal flex items when displayFlex is true
+     */
+    innerGap?: string;
+    private getAlignSelf;
+    private getContentAlign;
+    private getContentJustify;
+    render(): any;
+}

package/dist/types/components/le-button/le-button.d.ts

@@ -0,0 +1,78 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A flexible button component with multiple variants and states.
+ *
+ * @slot - Button text content
+ * @slot icon-start - Icon before the text
+ * @slot icon-end - Icon after the text
+ *
+ * @cssprop --le-button-bg - Button background color
+ * @cssprop --le-button-color - Button text color
+ * @cssprop --le-button-border-radius - Button border radius
+ * @cssprop --le-button-padding-x - Button horizontal padding
+ * @cssprop --le-button-padding-y - Button vertical padding
+ *
+ * @csspart button - The native button element
+ * @csspart content - The button content wrapper
+ *
+ * @cmsEditable true
+ * @cmsCategory Actions
+ */
+export declare class LeButton {
+    el: HTMLElement;
+    /**
+     * Mode of the popover should be 'default' for internal use
+     */
+    mode: 'default' | 'admin';
+    /**
+     * Button variant style
+     * @allowedValues solid | outlined | clear
+     */
+    variant: 'solid' | 'outlined' | 'clear' | 'system';
+    /**
+     * Button color theme (uses theme semantic colors)
+     * @allowedValues primary | secondary | success | warning | danger | info
+     */
+    color: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+    /**
+     * Button size
+     * @allowedValues small | medium | large
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * Whether the button is in a selected/active state
+     */
+    selected: boolean;
+    /**
+     * Whether the button takes full width of its container
+     */
+    fullWidth: boolean;
+    /**
+     * Whether the button displays only an icon (square aspect ratio)
+     */
+    iconOnly: boolean;
+    /**
+     * Whether the button is disabled
+     */
+    disabled: boolean;
+    /**
+     * The button type attribute
+     * @allowedValues button | submit | reset
+     */
+    type: 'button' | 'submit' | 'reset';
+    /**
+     * Optional href to make the button act as a link
+     */
+    href?: string;
+    /**
+     * Link target when href is set
+     */
+    target?: string;
+    /**
+     * Emitted when the button is clicked.
+     * This is a custom event that wraps the native click but ensures the target is the le-button.
+     */
+    leClick: EventEmitter<PointerEvent>;
+    private handleClick;
+    render(): any;
+}

package/dist/types/components/le-card/le-card.d.ts

@@ -0,0 +1,37 @@
+/**
+ * A flexible card component with header, content, and footer slots.
+ *
+ * The card uses le-slot wrappers for each slot area. In admin mode,
+ * le-slot shows placeholders for CMS editing. In default mode,
+ * le-slot acts as a transparent passthrough.
+ *
+ * @slot header - Card header content (title, actions)
+ * @slot - Default slot for main card content
+ * @slot footer - Card footer content (buttons, links)
+ *
+ * @cssprop --le-card-bg - Card background color
+ * @cssprop --le-card-border-radius - Card border radius
+ * @cssprop --le-card-shadow - Card box shadow
+ * @cssprop --le-card-padding - Card content padding
+ *
+ * @csspart card - The main card container
+ * @csspart header - The card header section
+ * @csspart content - The card content section
+ * @csspart footer - The card footer section
+ *
+ * @cmsEditable true
+ * @cmsCategory Layout
+ */
+export declare class LeCard {
+    el: HTMLElement;
+    /**
+     * Card variant style
+     * @allowedValues default | outlined | elevated
+     */
+    variant: 'default' | 'outlined' | 'elevated';
+    /**
+     * Whether the card is interactive (clickable)
+     */
+    interactive: boolean;
+    render(): any;
+}

package/dist/types/components/le-checkbox/le-checkbox.d.ts

@@ -0,0 +1,46 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A checkbox component with support for labels, descriptions, and external IDs.
+ *
+ * @slot - The label text for the checkbox
+ * @slot description - Additional description text displayed below the label
+ *
+ * @cssprop --le-checkbox-size - Size of the checkbox input
+ * @cssprop --le-checkbox-color - Color of the checkbox when checked
+ * @cssprop --le-checkbox-label-color - Color of the label text
+ * @cssprop --le-checkbox-desc-color - Color of the description text
+ */
+export declare class LeCheckbox {
+    el: HTMLElement;
+    /**
+     * Whether the checkbox is checked
+     */
+    checked: boolean;
+    /**
+     * Whether the checkbox is disabled
+     */
+    disabled: boolean;
+    /**
+     * The name of the checkbox input
+     */
+    name: string;
+    /**
+     * The value of the checkbox input
+     */
+    value: string;
+    /**
+     * External ID for linking with external systems (e.g. database ID, PDF form field ID)
+     */
+    externalId: string;
+    /**
+     * Emitted when the checked state changes
+     */
+    leChange: EventEmitter<{
+        checked: boolean;
+        value: string;
+        name: string;
+        externalId: string;
+    }>;
+    private handleChange;
+    render(): any;
+}

package/dist/types/components/le-component/le-component.d.ts

@@ -0,0 +1,115 @@
+/**
+ * Component wrapper for admin mode editing.
+ *
+ * This component is used internally by other components to provide admin-mode
+ * editing capabilities. It wraps the component's rendered output and shows
+ * a settings popover for editing properties.
+ *
+ * In default mode, it acts as a simple passthrough (display: contents).
+ * In admin mode, it shows a border, component name header, and settings popover.
+ *
+ * The host element is found automatically by traversing up through the shadow DOM.
+ *
+ * Usage inside a component's render method:
+ * ```tsx
+ * render() {
+ *   return (
+ *     <le-component component="le-card">
+ *       <Host>...</Host>
+ *     </le-component>
+ *   );
+ * }
+ * ```
+ *
+ * @slot - The component's rendered content
+ *
+ * @cmsInternal true
+ * @cmsCategory System
+ */
+export declare class LeComponent {
+    el: HTMLElement;
+    /**
+     * The tag name of the component (e.g., 'le-card').
+     * Used to look up property metadata and display the component name.
+     */
+    component: string;
+    /**
+     * Optional display name for the component.
+     * If not provided, the tag name will be formatted as the display name.
+     */
+    displayName?: string;
+    /**
+     * Classes to apply to the host element.
+     * Allows parent components to pass their styling classes.
+     */
+    hostClass?: string;
+    /**
+     * Inline styles to apply to the host element.
+     * Allows parent components to pass dynamic styles (e.g., flex properties).
+     */
+    hostStyle?: {
+        [key: string]: string;
+    };
+    /**
+     * Reference to the host element (found automatically from parent)
+     */
+    private hostElement?;
+    /**
+     * Internal state to track admin mode
+     */
+    private adminMode;
+    /**
+     * Component metadata loaded from Custom Elements Manifest
+     */
+    private componentMeta;
+    /**
+     * Current property values of the host component
+     */
+    private propertyValues;
+    private disconnectModeObserver?;
+    connectedCallback(): void;
+    /**
+     * Find the host element by traversing up through shadow DOM
+     */
+    private findHostElement;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /**
+     * Formats a tag name into a display name
+     * e.g., 'le-card' -> 'Card'
+     */
+    private formatDisplayName;
+    /**
+     * Load component metadata from the Custom Elements Manifest
+     */
+    private loadComponentMetadata;
+    /**
+     * Check if an attribute is internal (should not be shown in editor)
+     */
+    private isInternalAttribute;
+    /**
+     * Read current property values from the host element
+     */
+    private readPropertyValues;
+    /**
+     * Parse an attribute value based on its type
+     */
+    private parseAttributeValue;
+    /**
+     * Handle property value changes from the editor
+     */
+    private handlePropertyChange;
+    /**
+     * Delete this component from the DOM
+     */
+    private deleteComponent;
+    /**
+     * Render the property editor form
+     */
+    private renderPropertyEditor;
+    /**
+     * Render a single property field based on its type
+     */
+    private renderPropertyField;
+    render(): any;
+}

package/dist/types/components/le-number-input/le-number-input.d.ts

@@ -0,0 +1,106 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A number input component with validation, keyboard controls, and custom spinners.
+ *
+ * @slot - The label text for the input
+ * @slot description - Additional description text displayed below the input
+ * @slot icon-start - Icon to display at the start of the input
+ *
+ * @cssprop --le-input-bg - Input background color
+ * @cssprop --le-input-color - Input text color
+ * @cssprop --le-input-border - Input border style
+ * @cssprop --le-input-border-focus - Input border style when focused
+ * @cssprop --le-input-border-error - Input border style when invalid
+ * @cssprop --le-input-radius - Input border radius
+ * @cssprop --le-input-padding - Input padding
+ */
+export declare class LeNumberInput {
+    el: HTMLElement;
+    /**
+     * The value of the input
+     */
+    value: number;
+    /**
+     * The name of the input
+     */
+    name: string;
+    /**
+     * Label for the input
+     */
+    label: string;
+    /**
+     * Placeholder text
+     */
+    placeholder: string;
+    /**
+     * Minimum allowed value
+     */
+    min?: number;
+    /**
+     * Maximum allowed value
+     */
+    max?: number;
+    /**
+     * Step value for increment/decrement
+     */
+    step: number;
+    /**
+     * Whether the input is required
+     */
+    required: boolean;
+    /**
+     * Whether the input is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the input is read-only
+     */
+    readonly: boolean;
+    /**
+     * Icon for the start icon
+     */
+    iconStart?: string;
+    /**
+     * Whether to show the spinner controls
+     */
+    showSpinners: boolean;
+    /**
+     * External ID for linking with external systems
+     */
+    externalId: string;
+    /**
+     * Internal validation state
+     */
+    private isValid;
+    private validationMessage;
+    /**
+     * Emitted when the value changes (on blur or Enter)
+     */
+    leChange: EventEmitter<{
+        value: number;
+        name: string;
+        externalId: string;
+        isValid: boolean;
+    }>;
+    /**
+     * Emitted when the input value changes (on keystroke/spin)
+     */
+    leInput: EventEmitter<{
+        value: number;
+        name: string;
+        externalId: string;
+        isValid: boolean;
+    }>;
+    valueChanged(): void;
+    private validate;
+    private emitChange;
+    private emitInput;
+    private updateValue;
+    private handleInput;
+    private handleChange;
+    private handleKeyDown;
+    private handleWheel;
+    private increment;
+    private decrement;
+    render(): any;
+}

package/dist/types/components/le-popover/le-popover.d.ts

@@ -0,0 +1,109 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A popover component for displaying floating content.
+ *
+ * Uses the native HTML Popover API for proper layering with dialogs
+ * and other top-layer elements. Falls back gracefully in older browsers.
+ *
+ * @slot - Content to display inside the popover
+ * @slot trigger - Element that triggers the popover (optional)
+ *
+ * @cmsInternal true
+ * @cmsCategory System
+ */
+export declare class LePopover {
+    el: HTMLElement;
+    /**
+     * Mode of the popover should be 'default' for internal use
+     */
+    mode: 'default' | 'admin';
+    /**
+     * Whether the popover is currently open
+     */
+    open: boolean;
+    /**
+     * Position of the popover relative to its trigger
+     */
+    position: 'top' | 'bottom' | 'left' | 'right' | 'auto';
+    /**
+     * Alignment of the popover
+     */
+    align: 'start' | 'center' | 'end';
+    /**
+     * Optional title for the popover header
+     */
+    popoverTitle?: string;
+    /**
+     * Whether to show a close button in the header
+     */
+    showClose: boolean;
+    /**
+     * Whether clicking outside closes the popover
+     */
+    closeOnClickOutside: boolean;
+    /**
+     * Whether pressing Escape closes the popover
+     */
+    closeOnEscape: boolean;
+    /**
+     * Offset from the trigger element (in pixels)
+     */
+    offset: number;
+    /**
+     * Fixed width for the popover (e.g., '300px', '20rem')
+     */
+    width?: string;
+    /**
+     * Minimum width for the popover (e.g., '200px', '15rem')
+     */
+    minWidth?: string;
+    /**
+     * Maximum width for the popover (e.g., '400px', '25rem')
+     */
+    maxWidth?: string;
+    /**
+     * Emitted when the popover opens
+     */
+    lePopoverOpen: EventEmitter<void>;
+    /**
+     * Emitted when the popover closes
+     */
+    lePopoverClose: EventEmitter<void>;
+    private isPositioned;
+    private triggerEl?;
+    private popoverEl?;
+    private uniqueId;
+    private scrollParents;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /**
+     * Find all scrollable parent elements
+     */
+    private getScrollParents;
+    /**
+     * Add scroll listeners to all scrollable parents
+     */
+    private addScrollListeners;
+    /**
+     * Remove scroll listeners
+     */
+    private removeScrollListeners;
+    private handleScroll;
+    private handlePopoverToggle;
+    private handleOtherPopoverOpen;
+    /**
+     * Opens the popover
+     */
+    show(): Promise<void>;
+    /**
+     * Closes the popover
+     */
+    hide(): Promise<void>;
+    /**
+     * Toggles the popover
+     */
+    toggle(): Promise<void>;
+    private handleTriggerClick;
+    private updatePosition;
+    render(): any[];
+}

package/dist/types/components/le-popup/le-popup.api.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Programmatic API for le-popup component
+ *
+ * These functions allow you to show popups without manually creating elements.
+ *
+ * @example
+ * // Alert
+ * await leAlert('Something happened!');
+ *
+ * // Confirm
+ * const confirmed = await leConfirm('Are you sure?');
+ * if (confirmed) { ... }
+ *
+ * // Prompt
+ * const name = await lePrompt('What is your name?');
+ * if (name !== null) { ... }
+ */
+import type { PopupType, PopupPosition } from './le-popup';
+/**
+ * Options for programmatic popup functions
+ */
+export interface PopupOptions {
+    title?: string;
+    type?: PopupType;
+    modal?: boolean;
+    position?: PopupPosition;
+    confirmText?: string;
+    cancelText?: string;
+    placeholder?: string;
+    defaultValue?: string;
+    theme?: string;
+}
+/**
+ * Show an alert popup with a message
+ * @param message - The message to display
+ * @param options - Optional configuration
+ * @returns Promise that resolves when closed
+ *
+ * @example
+ * await leAlert('File saved successfully!');
+ * await leAlert('Error occurred', { title: 'Error', theme: 'dark' });
+ */
+export declare function leAlert(message: string, options?: PopupOptions): Promise<void>;
+/**
+ * Show a confirm popup with OK/Cancel buttons
+ * @param message - The message to display
+ * @param options - Optional configuration
+ * @returns Promise that resolves to true (confirmed) or false (cancelled)
+ *
+ * @example
+ * const confirmed = await leConfirm('Delete this item?');
+ * if (confirmed) {
+ *   deleteItem();
+ * }
+ */
+export declare function leConfirm(message: string, options?: PopupOptions): Promise<boolean>;
+/**
+ * Show a prompt popup with an input field
+ * @param message - The message to display
+ * @param options - Optional configuration (including defaultValue, placeholder)
+ * @returns Promise that resolves to the input value or null if cancelled
+ *
+ * @example
+ * const name = await lePrompt('Enter your name:', {
+ *   title: 'Welcome',
+ *   placeholder: 'John Doe',
+ *   defaultValue: 'Guest'
+ * });
+ * if (name !== null) {
+ *   greetUser(name);
+ * }
+ */
+export declare function lePrompt(message: string, options?: PopupOptions): Promise<string | null>;