@xplor-education/core-stencil-components 3.1.2 → 3.1.4

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

@@ -9,6 +9,8 @@ export declare class XplorButton {
     ariaLabel: string;
     /** Whether the button is disabled */
     disabled: boolean;
+    /** Whether the button stretches to full width of its container */
+    fullWidth: boolean;
     /**
      * Icon position: 'start' | 'end' | null
      */

package/dist/types/components/xplor-canvas-editor/xplor-canvas-editor.d.ts

@@ -0,0 +1,63 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface Shape {
+    id: string;
+    type: 'rect' | 'circle' | 'line';
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    fill: string;
+    stroke: string;
+}
+export declare class XplorCanvasEditor {
+    el: HTMLElement;
+    private readonly componentId;
+    private svgEl;
+    private isDrawing;
+    private drawStart;
+    private isResizing;
+    private resizeHandle;
+    private resizeStart;
+    /** Width of the SVG canvas in pixels */
+    width: number;
+    /** Height of the SVG canvas in pixels */
+    height: number;
+    /**
+     * Initially active tool. The consumer can switch tool programmatically by
+     * updating this prop; the internal `activeTool` state takes over once the
+     * component mounts.
+     */
+    tool: 'select' | 'rect' | 'circle' | 'line';
+    private shapes;
+    private selectedId;
+    private activeTool;
+    private draftShape;
+    /** Emitted when a new shape is committed to the canvas */
+    xplorShapeAdd: EventEmitter<Shape>;
+    /** Emitted when a shape is removed; payload is the shape id */
+    xplorShapeRemove: EventEmitter<string>;
+    /** Emitted when a shape's bounds are updated via resize */
+    xplorShapeChange: EventEmitter<Shape>;
+    componentWillLoad(): void;
+    /** Removes all shapes and clears the selection */
+    clearAll(): Promise<void>;
+    /** Returns a shallow copy of all current shapes */
+    getShapes(): Promise<Shape[]>;
+    private generateId;
+    private getSvgPoint;
+    private setActiveTool;
+    private deleteSelected;
+    private onSvgMouseDown;
+    private onSvgMouseMove;
+    private onSvgMouseUp;
+    private onShapeClick;
+    private onResizeHandleMouseDown;
+    private onResizeMouseMove;
+    private onResizeMouseUp;
+    private onKeyDown;
+    private renderShape;
+    private renderSelectionOverlay;
+    private renderResizeHandles;
+    private renderToolbar;
+    render(): any;
+}

package/dist/types/components/xplor-canvas-editor/xplor-canvas-editor.stories.d.ts

@@ -0,0 +1,84 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    parameters: {
+        actions: {
+            handles: string[];
+        };
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        width: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+        };
+        height: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+        };
+        tool: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const DrawMode: any;
+export declare const CircleTool: any;
+export declare const LineTool: any;
+export declare const SmallCanvas: any;
+export declare const WideCanvas: any;
+export declare const PreloadedShapes: {
+    (): string;
+    storyName: string;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const DarkMode: {
+    (): string;
+    storyName: string;
+    parameters: {
+        backgrounds: {
+            default: string;
+        };
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const CustomTokens: {
+    (): string;
+    storyName: string;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};

package/dist/types/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.d.ts

@@ -26,6 +26,8 @@ export declare class XplorDragAndDropInput {
     progress: number;
     dragover: boolean;
     currentFile: File | null;
+    horizontal: boolean;
+    el: HTMLElement;
     /**
      * Emitted when a file is selected via drop or click
      */
@@ -35,6 +37,10 @@ export declare class XplorDragAndDropInput {
      */
     fileClear: EventEmitter<void>;
     private fileInputEl;
+    private resizeObserver;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
     /**
      * Clears the currently selected file
      */

package/dist/types/components/xplor-rich-text-editor/xplor-rich-text-editor.d.ts

@@ -0,0 +1,129 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/** Payload emitted by xplorChange */
+export interface RteChangePayload {
+    html: string;
+    text: string;
+    isEmpty: boolean;
+}
+export declare class XplorRichTextEditor {
+    el: HTMLElement;
+    private editor;
+    private editorEl;
+    private readonly editorId;
+    private readonly toolbarId;
+    private readonly charCountId;
+    private readonly labelId;
+    /**
+     * HTML string content of the editor. Supports two-way binding via xplorChange.
+     */
+    value: string;
+    /**
+     * Stringified Slate 0.42.x document JSON for backwards compatibility.
+     * When supplied, this takes precedence over `value` as the initial content.
+     */
+    legacySlateDocument: string;
+    /**
+     * Placeholder text shown when the editor is empty.
+     */
+    placeholder: string;
+    /**
+     * Visible label above the editor.
+     */
+    label: string;
+    /**
+     * Marks the field as required. Adds an asterisk to the label.
+     */
+    required: boolean;
+    /**
+     * Whether the editor is in read-only mode. Content is visible but not editable.
+     * The toolbar is hidden in this mode.
+     */
+    readonly: boolean;
+    /**
+     * Whether the editor is disabled. Content cannot be edited or interacted with.
+     */
+    disabled: boolean;
+    /**
+     * Accessible label for the editor region. Used when no `label` prop or
+     * `ariaLabelledBy` is provided.
+     */
+    ariaLabel: string;
+    /**
+     * ID of an external element that labels this editor (aria-labelledby).
+     */
+    ariaLabelledBy: string;
+    /**
+     * Controls which toolbar buttons are rendered.
+     * - `full`    — All formatting options (default)
+     * - `minimal` — Text style buttons only (bold, italic, underline, strike, code)
+     * - `none`    — No toolbar; editor acts as a plain rich-text input
+     */
+    toolbar: 'full' | 'minimal' | 'none';
+    /**
+     * Maximum character count. When set, a character counter is shown below the editor.
+     */
+    maxLength: number | undefined;
+    /**
+     * Validation error message. Turns the editor border red and shows the message below.
+     */
+    error: string;
+    /**
+     * Helper text shown below the editor when there is no error.
+     */
+    helperText: string;
+    /**
+     * Emitted whenever the content changes.
+     * Payload: `{ html: string; text: string; isEmpty: boolean }`
+     */
+    xplorChange: EventEmitter<RteChangePayload>;
+    /**
+     * Emitted when the editor gains focus.
+     */
+    xplorFocus: EventEmitter<void>;
+    /**
+     * Emitted when the editor loses focus.
+     */
+    xplorBlur: EventEmitter<void>;
+    /** Incremented on every TipTap transaction to force toolbar re-render */
+    private editorVersion;
+    private isFocused;
+    private showLinkPopover;
+    private linkUrl;
+    private charCount;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    handleValueChange(newValue: string): void;
+    handleReadonlyChange(): void;
+    handleDisabledChange(): void;
+    handleLegacyDocChange(newValue: string): void;
+    /**
+     * Returns the current content as an HTML string.
+     */
+    getHTMLContent(): Promise<string>;
+    /**
+     * Returns the current content as plain text (all markup stripped).
+     */
+    getText(): Promise<string>;
+    /**
+     * Replaces the editor content with the provided HTML string.
+     */
+    setContent(html: string): Promise<void>;
+    /**
+     * Clears all content from the editor.
+     */
+    clearContent(): Promise<void>;
+    /**
+     * Programmatically focuses the editor.
+     */
+    focusEditor(): Promise<void>;
+    private initEditor;
+    private execCommand;
+    private handleLinkButtonClick;
+    private handleLinkSubmit;
+    private handleLinkCancel;
+    private handleLinkKeyDown;
+    private renderToolbarButton;
+    private renderLinkPopover;
+    private renderToolbar;
+    render(): any;
+}

package/dist/types/components/xplor-rich-text-editor/xplor-rich-text-editor.stories.d.ts

@@ -0,0 +1,105 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    parameters: {
+        actions: {
+            handles: string[];
+        };
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        label: {
+            control: string;
+            description: string;
+        };
+        placeholder: {
+            control: string;
+            description: string;
+        };
+        value: {
+            control: string;
+            description: string;
+        };
+        toolbar: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+        };
+        readonly: {
+            control: string;
+            description: string;
+        };
+        disabled: {
+            control: string;
+            description: string;
+        };
+        required: {
+            control: string;
+            description: string;
+        };
+        error: {
+            control: string;
+            description: string;
+        };
+        helperText: {
+            control: string;
+            description: string;
+        };
+        maxLength: {
+            control: string;
+            description: string;
+        };
+        ariaLabel: {
+            control: string;
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const WithInitialContent: any;
+export declare const LegacySlateDocument: {
+    (args: any): string;
+    args: {
+        label: string;
+    };
+    storyName: string;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const Readonly: any;
+export declare const Disabled: any;
+export declare const MinimalToolbar: any;
+export declare const NoToolbar: any;
+export declare const WithMaxLength: any;
+export declare const WithError: any;
+export declare const WithHelperText: any;
+export declare const DarkMode: {
+    (args: any): string;
+    args: {
+        label: string;
+        placeholder: string;
+    };
+    storyName: string;
+    parameters: {
+        backgrounds: {
+            default: string;
+        };
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};