le-kit 0.1.6 → 0.1.8

package/dist/core/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/core/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>;

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

@@ -0,0 +1,122 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Popup type determines the buttons shown
+ */
+export type PopupType = 'alert' | 'confirm' | 'prompt' | 'custom';
+/**
+ * Popup position on the screen
+ */
+export type PopupPosition = 'center' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/**
+ * Result returned by the popup when closed
+ */
+export interface PopupResult {
+    confirmed: boolean;
+    value?: string;
+}
+/**
+ * A flexible popup/dialog component for alerts, confirms, prompts, and custom content.
+ *
+ * Uses the native HTML <dialog> element for proper modal behavior, accessibility,
+ * and focus management. Can be used declaratively in HTML or programmatically
+ * via leAlert(), leConfirm(), lePrompt().
+ *
+ * @slot - Default slot for custom body content
+ * @slot header - Custom header content (replaces title)
+ * @slot footer - Custom footer content (replaces default buttons)
+ *
+ * @cmsInternal true
+ * @cmsCategory System
+ */
+export declare class LePopup {
+    el: HTMLElement;
+    /**
+     * Whether the popup is currently visible
+     */
+    open: boolean;
+    /**
+     * Type of popup: alert (OK only), confirm (OK/Cancel), prompt (input + OK/Cancel), custom
+     */
+    type: PopupType;
+    /**
+     * Optional title for the popup header
+     */
+    popupTitle?: string;
+    /**
+     * Message text to display (for alert/confirm/prompt types)
+     */
+    message?: string;
+    /**
+     * Whether the popup is modal (blocks interaction with page behind)
+     */
+    modal: boolean;
+    /**
+     * Position of the popup on screen
+     */
+    position: PopupPosition;
+    /**
+     * Text for the confirm/OK button
+     */
+    confirmText: string;
+    /**
+     * Text for the cancel button
+     */
+    cancelText: string;
+    /**
+     * Placeholder text for prompt input
+     */
+    placeholder: string;
+    /**
+     * Default value for prompt input
+     */
+    defaultValue: string;
+    /**
+     * Whether clicking the backdrop closes the popup (modal only)
+     */
+    closeOnBackdrop: boolean;
+    /**
+     * Internal state for prompt input value
+     */
+    inputValue: string;
+    /**
+     * Emitted when the popup is confirmed (OK clicked)
+     */
+    leConfirm: EventEmitter<PopupResult>;
+    /**
+     * Emitted when the popup is cancelled (Cancel clicked or dismissed)
+     */
+    leCancel: EventEmitter<PopupResult>;
+    /**
+     * Emitted when the popup opens
+     */
+    leOpen: EventEmitter<void>;
+    /**
+     * Emitted when the popup closes
+     */
+    leClose: EventEmitter<PopupResult>;
+    private dialogEl?;
+    private inputEl?;
+    private resolvePromise?;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private handleDialogCancel;
+    /**
+     * Opens the popup and returns a promise that resolves when closed
+     */
+    show(): Promise<PopupResult>;
+    /**
+     * Closes the popup with a result
+     */
+    hide(confirmed?: boolean): Promise<void>;
+    private handleConfirm;
+    private handleCancel;
+    private handleBackdropClick;
+    private handleInputChange;
+    private handleKeyDown;
+    private hasSlot;
+    private renderHeader;
+    private renderBody;
+    private renderFooter;
+    render(): any;
+}

package/dist/core/types/components/le-round-progress/le-round-progress.d.ts

@@ -0,0 +1,37 @@
+export declare class LeRoundProgress {
+    el: HTMLElement;
+    value: number;
+    updateValue(newValue: string): void;
+    padding: number;
+    updatePadding(newValue: string): void;
+    paths: string;
+    updateProgressBackgrounds(newValue: string): void;
+    progressPaths: any[];
+    params: {
+        width: number;
+        diameter: number;
+        circumference: number;
+    };
+    /**
+     * 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(): void;
+    calcParams(): void;
+    /**
+     * Returns the viewPath attribute value for the SVG
+     * based on the width of the parent element
+     */
+    getViewBox(): string;
+    /**
+     * Returns the circular path for the progress stroke
+     * and additional paths in the background
+     */
+    getPath(): string;
+    getStrokeDashArray(): string;
+    getPaths(): any;
+    render(): any;
+}

package/dist/core/types/components/le-stack/le-stack.d.ts

@@ -0,0 +1,73 @@
+/**
+ * A flexible stack layout component using CSS flexbox.
+ *
+ * `le-stack` arranges its children in a row (horizontal) or column (vertical)
+ * with configurable spacing, alignment, and wrapping behavior. Perfect for
+ * creating responsive layouts.
+ *
+ * @slot - Default slot for stack items (le-box components recommended)
+ *
+ * @cssprop --le-stack-gap - Gap between items (defaults to var(--le-space-md))
+ *
+ * @csspart stack - The main stack container
+ *
+ * @cmsEditable true
+ * @cmsCategory Layout
+ */
+export declare class LeStack {
+    el: HTMLElement;
+    /**
+     * Direction of the stack layout
+     * @allowedValues horizontal | vertical
+     */
+    direction: 'horizontal' | 'vertical';
+    /**
+     * Gap between items (CSS value like '8px', '1rem', 'var(--le-space-md)')
+     */
+    gap?: string;
+    /**
+     * Alignment of items on the cross axis
+     * @allowedValues start | center | end | stretch | baseline
+     */
+    align: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    /**
+     * Distribution of items on the main axis
+     * @allowedValues start | center | end | space-between | space-around | space-evenly
+     */
+    justify: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+    /**
+     * Whether items should wrap to multiple lines
+     */
+    wrap: boolean;
+    /**
+     * Alignment of wrapped lines (only applies when wrap is true)
+     * @allowedValues start | center | end | stretch | space-between | space-around
+     */
+    alignContent: 'start' | 'center' | 'end' | 'stretch' | 'space-between' | 'space-around';
+    /**
+     * Whether to reverse the order of items
+     */
+    reverse: boolean;
+    /**
+     * Maximum number of items allowed in the stack (for CMS validation)
+     * @min 1
+     */
+    maxItems?: number;
+    /**
+     * Whether the stack should take full width of its container
+     */
+    fullWidth: boolean;
+    /**
+     * Whether the stack should take full height of its container
+     */
+    fullHeight: boolean;
+    /**
+     * Padding inside the stack container (CSS value)
+     */
+    padding?: string;
+    private getFlexDirection;
+    private getAlignItems;
+    private getJustifyContent;
+    private getAlignContent;
+    render(): any;
+}

package/dist/core/types/components/le-string-input/le-string-input.d.ts

@@ -0,0 +1,83 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A text input component with support for labels, descriptions, icons, and external IDs.
+ *
+ * @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
+ * @slot icon-end - Icon to display at the end 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-radius - Input border radius
+ * @cssprop --le-input-padding - Input padding
+ */
+export declare class LeStringInput {
+    el: HTMLElement;
+    /**
+     * Mode of the popover should be 'default' for internal use
+     */
+    mode: 'default' | 'admin';
+    /**
+     * The value of the input
+     */
+    value: string;
+    /**
+     * The name of the input
+     */
+    name: string;
+    /**
+     * The type of the input (text, email, password, etc.)
+     */
+    type: 'text' | 'email' | 'password' | 'tel' | 'url';
+    /**
+     * Label for the input
+     */
+    label: string;
+    /**
+     * Icon for the start icon
+     */
+    iconStart: string;
+    /**
+     * Icon for the end icon
+     */
+    iconEnd: string;
+    /**
+     * Placeholder text
+     */
+    placeholder: string;
+    /**
+     * Whether the input is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the input is read-only
+     */
+    readonly: boolean;
+    /**
+     * External ID for linking with external systems
+     */
+    externalId: string;
+    /**
+     * Emitted when the value changes (on blur or Enter)
+     */
+    leChange: EventEmitter<{
+        value: string;
+        name: string;
+        externalId: string;
+    }>;
+    /**
+     * Emitted when the input value changes (on keystroke)
+     */
+    leInput: EventEmitter<{
+        value: string;
+        name: string;
+        externalId: string;
+    }>;
+    private handleInput;
+    private handleChange;
+    private handleClick;
+    render(): any;
+}

package/dist/core/types/components/le-text/le-text.d.ts

@@ -0,0 +1,141 @@
+/**
+ * A text component with rich text editing capabilities in admin mode.
+ *
+ * `le-text` renders semantic text elements (headings, paragraphs, code, quotes)
+ * and provides a Notion-like rich text editor in admin mode with formatting
+ * toolbar for bold, italic, links, and paragraph type selection.
+ *
+ * @slot - Default slot for text content
+ *
+ * @cssprop --le-text-color - Text color
+ * @cssprop --le-text-font-size - Font size
+ * @cssprop --le-text-line-height - Line height
+ * @cssprop --le-text-font-weight - Font weight
+ *
+ * @csspart text - The text container element
+ *
+ * @cmsEditable true
+ * @cmsCategory Content
+ */
+export declare class LeText {
+    el: HTMLElement;
+    /**
+     * The semantic variant/type of text element
+     * @allowedValues p | h1 | h2 | h3 | h4 | h5 | h6 | code | quote | label | small
+     */
+    variant: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'quote' | 'label' | 'small';
+    /**
+     * Text alignment
+     * @allowedValues left | center | right | justify
+     */
+    align: 'left' | 'center' | 'right' | 'justify';
+    /**
+     * Text color (CSS value or theme token)
+     */
+    color?: string;
+    /**
+     * Whether the text should truncate with ellipsis
+     */
+    truncate: boolean;
+    /**
+     * Maximum number of lines before truncating (requires truncate=true)
+     */
+    maxLines?: number;
+    /**
+     * Internal state to track admin mode
+     */
+    private adminMode;
+    /**
+     * The HTML content being edited
+     */
+    private content;
+    /**
+     * Whether the editor is focused (shows toolbar)
+     */
+    private isFocused;
+    /**
+     * Current selection state for toolbar button highlighting
+     */
+    private selectionState;
+    /**
+     * Reference to the contenteditable element
+     */
+    private editorRef?;
+    /**
+     * Reference to the slot element
+     */
+    private slotRef?;
+    private disconnectModeObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    onVariantChange(): void;
+    /**
+     * Read content from slotted elements
+     */
+    private readSlottedContent;
+    /**
+     * Sync edited content back to the slot
+     */
+    private syncContentToSlot;
+    /**
+     * Handle input in the contenteditable
+     */
+    private handleInput;
+    /**
+     * Handle focus on the editor
+     */
+    private handleFocus;
+    /**
+     * Handle blur on the editor
+     */
+    private handleBlur;
+    /**
+     * Handle selection change to update toolbar state
+     */
+    private handleSelectionChange;
+    /**
+     * Update the selection state for toolbar highlighting
+     */
+    private updateSelectionState;
+    /**
+     * Check if current selection is within a link
+     */
+    private isSelectionInLink;
+    /**
+     * Execute a formatting command
+     */
+    private execCommand;
+    /**
+     * Toggle bold formatting
+     */
+    private toggleBold;
+    /**
+     * Toggle italic formatting
+     */
+    private toggleItalic;
+    /**
+     * Toggle underline formatting
+     */
+    private toggleUnderline;
+    /**
+     * Toggle strikethrough formatting
+     */
+    private toggleStrikethrough;
+    /**
+     * Add or edit a link
+     */
+    private toggleLink;
+    /**
+     * Change the block type/variant
+     */
+    private changeVariant;
+    /**
+     * Render the formatting toolbar
+     */
+    private renderToolbar;
+    /**
+     * Get the semantic tag for the current variant
+     */
+    private getTag;
+    render(): any;
+}

package/dist/core/types/components/le-turntable/le-turntable.d.ts

@@ -0,0 +1,55 @@
+export declare class LeTurntable {
+    el: HTMLElement;
+    center: string;
+    value: number;
+    updateValue(newValue: any): void;
+    /**
+     * 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
+     */
+    rotating: boolean;
+    centerX: number;
+    centerY: number;
+    pageX: number;
+    pageY: number;
+    currentAngle: number;
+    startAngle: number;
+    /**
+     * Event listeners
+     */
+    handleMouseDown(evt: MouseEvent): boolean;
+    /**
+     * 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: MouseEvent): boolean;
+    handleMouseUp(evt: MouseEvent): boolean;
+    handleWindowResize(): void;
+    /**
+     * Component lifecycles
+     */
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    /**
+     * 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(): void;
+    /**
+     * Calculates current angle
+     *
+     * @param {number} posX  horizontal mouse position
+     * @param {number} posY  vertical mouse position
+     */
+    getAngle(posX: number, posY: number): number;
+    setAngle(angle: any): void;
+    render(): any;
+}