@xplor-education/core-stencil-components 2.0.0

package/dist/hydrate/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@xplor-education/core-stencil-components/hydrate",
+  "description": "XplorComponentLibrary component hydration app.",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./index.js",
+      "import": "./index.mjs"
+    }
+  }
+}

package/dist/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('./cjs/index.cjs.js');

package/dist/index.js

@@ -0,0 +1 @@
+export * from './esm/index.js';

package/dist/types/components/element-interface.d.ts

@@ -0,0 +1,19 @@
+export interface AnchorInterface {
+    href: string | undefined;
+    target: string | undefined;
+    rel: string | undefined;
+    download: string | undefined;
+}
+export interface ButtonInterface {
+    type: 'submit' | 'reset' | 'button';
+    disabled: boolean;
+}
+export type PredefinedColors = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark';
+export type Color = PredefinedColors | string;
+export interface StyleEventDetail {
+    [styleName: string]: boolean;
+}
+export interface CheckboxChangeEventDetail {
+    value: any;
+    checked: boolean;
+}

package/dist/types/components/helpers.d.ts

@@ -0,0 +1,47 @@
+import { EventEmitter } from '../stencil-public-runtime';
+import { Side } from '../interfaces';
+/**
+ * Gets the root context of a shadow dom element
+ * On newer browsers this will be the shadowRoot,
+ * but for older browser this may just be the
+ * element itself.
+ *
+ * Useful for whenever you need to explicitly
+ * do "myElement.shadowRoot!.querySelector(...)".
+ */
+export declare const getElementRoot: (el: HTMLElement, fallback?: HTMLElement) => HTMLElement | ShadowRoot;
+/**
+ * Patched version of requestAnimationFrame that avoids ngzone
+ * Use only when you know ngzone should not run
+ */
+export declare const raf: (h: any) => any;
+export declare const hasShadowDom: (el: HTMLElement) => boolean;
+export declare const findItemLabel: (componentEl: HTMLElement) => Element;
+export declare const renderHiddenInput: (always: boolean, container: HTMLElement, name: string, value: string | undefined | null, disabled: boolean) => void;
+export declare const clamp: (min: number, n: number, max: number) => number;
+export declare const assert: (actual: any, reason: string) => void;
+export declare const now: (ev: UIEvent) => number;
+export declare const pointerCoord: (ev: any) => {
+    x: number;
+    y: number;
+};
+/**
+ * @hidden
+ * Given a side, return if it should be on the end
+ * based on the value of dir
+ * @param side the side
+ * @param isRTL whether the application dir is rtl
+ */
+export declare const isEndSide: (side: Side) => boolean;
+export declare const deferEvent: (event: EventEmitter) => EventEmitter;
+export declare const debounceEvent: (event: EventEmitter, wait: number) => EventEmitter;
+export declare const debounce: (func: (...args: any[]) => void, wait?: number) => (...args: any[]) => any;
+export declare const eventMethod: <T>(element: HTMLElement, eventName: string) => Promise<T>;
+export declare const onceEvent: (element: HTMLElement, eventName: string, callback: (ev: Event) => void) => void;
+export declare namespace IMyComponent {
+    /** Variables */
+    type someVar = number;
+    namespace SomeMoreComplexType {
+        type SubType = string;
+    }
+}

package/dist/types/components/xplor-alert-dialog/xplor-alert-dialog.d.ts

@@ -0,0 +1,29 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XplorAlertDialog {
+    /**
+     * Whether the dialog is open
+     */
+    open: boolean;
+    /**
+     * Dialog width (can be pixel value or percentage)
+     */
+    width: string;
+    /**
+     * Persistent mode - prevents closing on backdrop click
+     */
+    persistent: boolean;
+    /**
+     * Close event
+     */
+    xplorClose: EventEmitter<void>;
+    /**
+     * Dialog state change event
+     */
+    xplorDialogChange: EventEmitter<boolean>;
+    handleOpenChange(newValue: boolean): void;
+    disconnectedCallback(): void;
+    private handleBackdropClick;
+    private handleCardClick;
+    private closeDialog;
+    render(): any;
+}

package/dist/types/components/xplor-alert-message/xplor-alert-message.d.ts

@@ -0,0 +1,9 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XplorAlertMessage {
+    type: 'info' | 'warning' | 'success' | 'error';
+    alertTitle: string;
+    dismissible: boolean;
+    xplorDismiss: EventEmitter<void>;
+    private handleDismiss;
+    render(): any;
+}

package/dist/types/components/xplor-assistant/internal/AssistantInput.d.ts

@@ -0,0 +1,17 @@
+/**
+ * AssistantInput - Internal component
+ * Renders the input field with voice and send buttons
+ */
+export interface AssistantInputInternalProps {
+    placeholder: string;
+    disabled: boolean;
+    isLoading: boolean;
+    enableVoiceInput: boolean;
+    isListening: boolean;
+    inputValue: string;
+    onSendMessage: (message: string) => void;
+    onStartListening: () => void;
+    onStopListening: () => void;
+    setInputValue: (value: string) => void;
+}
+export declare const AssistantInput: (props: AssistantInputInternalProps) => any;

package/dist/types/components/xplor-assistant/internal/AssistantMessage.d.ts

@@ -0,0 +1,6 @@
+/**
+ * AssistantMessage - Internal component
+ * Renders a single message bubble with optional text-to-speech functionality
+ */
+import { AssistantMessageProps } from './types';
+export declare const AssistantMessage: (props: AssistantMessageProps) => any;

package/dist/types/components/xplor-assistant/internal/QuickReplies.d.ts

@@ -0,0 +1,6 @@
+/**
+ * QuickReplies - Internal component
+ * Renders quick reply suggestion buttons
+ */
+import { QuickRepliesProps } from './types';
+export declare const QuickReplies: (props: QuickRepliesProps) => any;

package/dist/types/components/xplor-assistant/internal/TypingIndicator.d.ts

@@ -0,0 +1,5 @@
+/**
+ * TypingIndicator - Internal component
+ * Displays animated dots to indicate the assistant is processing/typing
+ */
+export declare const TypingIndicator: () => any;

package/dist/types/components/xplor-assistant/internal/types.d.ts

@@ -0,0 +1,106 @@
+/**
+ * Type definitions for the xplor-assistant component
+ */
+/**
+ * Represents a single message in the conversation
+ */
+export interface AssistantMessage {
+    id: string;
+    role: 'user' | 'assistant';
+    content: string;
+    timestamp: Date;
+}
+/**
+ * API Request payload sent to the backend
+ */
+export interface AssistantAPIRequest {
+    message: string;
+    sessionId: string;
+    userId: string;
+    userEmail: string;
+    userName: string;
+    currentDate: string;
+    currentTime: string;
+}
+/**
+ * API Response received from the backend
+ */
+export interface AssistantAPIResponse {
+    message: string;
+    sessionId: string;
+}
+/**
+ * Event emitted when a message is sent
+ */
+export interface AssistantMessageSentEvent {
+    message: string;
+    sessionId: string;
+    timestamp: Date;
+}
+/**
+ * Event emitted when a message is received from the API
+ */
+export interface AssistantMessageReceivedEvent {
+    message: string;
+    sessionId: string;
+    timestamp: Date;
+}
+/**
+ * Event emitted when an error occurs
+ */
+export interface AssistantErrorEvent {
+    error: string;
+    type: 'api' | 'voice' | 'tts' | 'network' | 'validation';
+    timestamp: Date;
+}
+/**
+ * Event emitted when a session is created or updated
+ */
+export interface AssistantSessionEvent {
+    sessionId: string;
+    timestamp: Date;
+}
+/**
+ * Props for internal AssistantMessage component
+ */
+export interface AssistantMessageProps {
+    message: AssistantMessage;
+    enableTextToSpeech: boolean;
+    autoSpeak: boolean;
+    onSpeak?: (text: string) => void;
+    onStopSpeaking?: () => void;
+    isSpeaking?: boolean;
+}
+/**
+ * Props for internal AssistantInput component
+ */
+export interface AssistantInputProps {
+    placeholder: string;
+    disabled: boolean;
+    isLoading: boolean;
+    enableVoiceInput: boolean;
+    isListening: boolean;
+    onSendMessage: (message: string) => void;
+    onStartListening: () => void;
+    onStopListening: () => void;
+}
+/**
+ * Props for internal QuickReplies component
+ */
+export interface QuickRepliesProps {
+    replies: string[];
+    disabled: boolean;
+    onReplyClick: (reply: string) => void;
+}
+/**
+ * Props for internal TypingIndicator component
+ */
+export interface TypingIndicatorProps {
+}
+/**
+ * Browser capabilities detection result
+ */
+export interface BrowserCapabilities {
+    voiceInput: boolean;
+    textToSpeech: boolean;
+}

package/dist/types/components/xplor-assistant/utils/api.d.ts

@@ -0,0 +1,48 @@
+/**
+ * API integration utilities for the xplor-assistant component
+ */
+import { AssistantAPIResponse } from '../internal/types';
+/**
+ * Generates a unique session ID
+ * Format: session_${timestamp}_${random}
+ */
+export declare function generateSessionId(): string;
+/**
+ * Formats the current date as YYYY-MM-DD
+ */
+export declare function getCurrentDate(): string;
+/**
+ * Formats the current time as HH:MM:SS
+ */
+export declare function getCurrentTime(): string;
+/**
+ * Sends a message to the assistant API
+ *
+ * @param endpoint - The API endpoint URL
+ * @param message - The user's message
+ * @param sessionId - The current session ID
+ * @param userId - The user's ID
+ * @param userEmail - The user's email
+ * @param userName - The user's name
+ * @returns Promise with the API response
+ * @throws Error if the API call fails
+ */
+export declare function sendMessageToAPI(endpoint: string, message: string, sessionId: string, userId: string, userEmail: string, userName: string): Promise<AssistantAPIResponse>;
+/**
+ * Creates an AbortController for cancelling requests
+ * Useful for cleanup when component unmounts
+ */
+export declare function createRequestController(): AbortController;
+/**
+ * Sends a message to the API with abort support
+ *
+ * @param endpoint - The API endpoint URL
+ * @param message - The user's message
+ * @param sessionId - The current session ID
+ * @param userId - The user's ID
+ * @param userEmail - The user's email
+ * @param userName - The user's name
+ * @param signal - AbortSignal for cancelling the request
+ * @returns Promise with the API response
+ */
+export declare function sendMessageWithAbort(endpoint: string, message: string, sessionId: string, userId: string, userEmail: string, userName: string, signal?: AbortSignal): Promise<AssistantAPIResponse>;

package/dist/types/components/xplor-assistant/utils/icons.d.ts

@@ -0,0 +1,24 @@
+/**
+ * SVG icon definitions for the xplor-assistant component
+ * Following the pattern used in xplor-button component
+ */
+/**
+ * Microphone icon for voice input button
+ */
+export declare const microphoneIcon = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"></path>\n  <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"></path>\n  <line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"></line>\n  <line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"></line>\n</svg>\n";
+/**
+ * Send arrow icon for send message button
+ */
+export declare const sendIcon = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"></line>\n  <polygon points=\"22 2 15 22 11 13 2 9 22 2\"></polygon>\n</svg>\n";
+/**
+ * Speaker icon for text-to-speech button
+ */
+export declare const speakerIcon = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"></polygon>\n  <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\"></path>\n  <path d=\"M19.07 4.93a10 10 0 0 1 0 14.14\"></path>\n</svg>\n";
+/**
+ * Stop square icon for stopping speech
+ */
+export declare const stopIcon = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"none\">\n  <rect x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"2\"></rect>\n</svg>\n";
+/**
+ * Muted speaker icon for when TTS is disabled
+ */
+export declare const speakerMutedIcon = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"></polygon>\n  <line x1=\"23\" y1=\"9\" x2=\"17\" y2=\"15\"></line>\n  <line x1=\"17\" y1=\"9\" x2=\"23\" y2=\"15\"></line>\n</svg>\n";

package/dist/types/components/xplor-assistant/utils/speech.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Web Speech API helpers for the xplor-assistant component
+ * Handles both Speech Recognition (voice input) and Speech Synthesis (text-to-speech)
+ */
+import { BrowserCapabilities } from '../internal/types';
+/**
+ * Detects browser capabilities for speech features
+ */
+export declare function detectBrowserCapabilities(): BrowserCapabilities;
+/**
+ * Speech Recognition Manager
+ * Handles voice-to-text functionality
+ */
+export declare class SpeechRecognitionManager {
+    private recognition;
+    private onResultCallback;
+    private onErrorCallback;
+    private onStartCallback;
+    private onEndCallback;
+    constructor();
+    /**
+     * Converts speech recognition error codes to user-friendly messages
+     */
+    private getErrorMessage;
+    /**
+     * Starts listening for voice input
+     */
+    start(): void;
+    /**
+     * Stops listening for voice input
+     */
+    stop(): void;
+    /**
+     * Sets the callback for when a result is received
+     */
+    onResult(callback: (transcript: string) => void): void;
+    /**
+     * Sets the callback for when an error occurs
+     */
+    onError(callback: (error: string) => void): void;
+    /**
+     * Sets the callback for when recognition starts
+     */
+    onStart(callback: () => void): void;
+    /**
+     * Sets the callback for when recognition ends
+     */
+    onEnd(callback: () => void): void;
+    /**
+     * Checks if speech recognition is available
+     */
+    isAvailable(): boolean;
+}
+/**
+ * Speech Synthesis Manager
+ * Handles text-to-speech functionality
+ */
+export declare class SpeechSynthesisManager {
+    private currentUtterance;
+    private onStartCallback;
+    private onEndCallback;
+    /**
+     * Speaks the given text
+     */
+    speak(text: string): void;
+    /**
+     * Stops any ongoing speech
+     */
+    stop(): void;
+    /**
+     * Checks if currently speaking
+     */
+    isSpeaking(): boolean;
+    /**
+     * Sets the callback for when speech starts
+     */
+    onStart(callback: () => void): void;
+    /**
+     * Sets the callback for when speech ends
+     */
+    onEnd(callback: () => void): void;
+    /**
+     * Checks if speech synthesis is available
+     */
+    isAvailable(): boolean;
+}

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

@@ -0,0 +1,52 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { AssistantMessage as MessageType, AssistantMessageSentEvent, AssistantMessageReceivedEvent, AssistantErrorEvent, AssistantSessionEvent } from './internal/types';
+export declare class XplorAssistant {
+    el: HTMLElement;
+    apiEndpoint: string;
+    userId: string;
+    userEmail: string;
+    userName: string;
+    sessionId?: string;
+    quickReplies?: string[];
+    placeholder: string;
+    enableVoiceInput: boolean;
+    enableTextToSpeech: boolean;
+    autoSpeak: boolean;
+    maxHeight: string;
+    disabled: boolean;
+    messages: MessageType[];
+    internalSessionId: string;
+    isLoading: boolean;
+    isListening: boolean;
+    isSpeaking: boolean;
+    error: string;
+    inputValue: string;
+    hasVoiceSupport: boolean;
+    hasTTSSupport: boolean;
+    assistantMessageSent: EventEmitter<AssistantMessageSentEvent>;
+    assistantMessageReceived: EventEmitter<AssistantMessageReceivedEvent>;
+    assistantError: EventEmitter<AssistantErrorEvent>;
+    assistantSessionCreated: EventEmitter<AssistantSessionEvent>;
+    private speechRecognition;
+    private speechSynthesis;
+    private messagesContainerRef;
+    componentWillLoad(): void;
+    handleSessionIdChange(newSessionId: string): void;
+    componentDidUpdate(): void;
+    disconnectedCallback(): void;
+    sendMessage(message: string): Promise<void>;
+    clearHistory(): Promise<void>;
+    speak(text: string): Promise<void>;
+    stopSpeaking(): Promise<void>;
+    private scrollToBottom;
+    private handleSendMessage;
+    private handleVoiceInput;
+    private handleError;
+    private handleStartListening;
+    private handleStopListening;
+    private handleSpeak;
+    private handleStopSpeaking;
+    private handleQuickReply;
+    private setInputValue;
+    render(): any;
+}

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

@@ -0,0 +1,92 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface AutocompleteItem {
+    label: string;
+    value: any;
+    disabled?: boolean;
+    [key: string]: any;
+}
+export declare class XplorAutocomplete {
+    el: HTMLElement;
+    /**
+     * Array of items to display in the dropdown
+     */
+    items: AutocompleteItem[];
+    /**
+     * Selected value
+     */
+    value: any;
+    /**
+     * Placeholder text
+     */
+    placeholder: string;
+    /**
+     * Label for the input
+     */
+    label: string;
+    /**
+     * Disable the autocomplete
+     */
+    disabled: boolean;
+    /**
+     * Make the autocomplete readonly
+     */
+    readonly: boolean;
+    /**
+     * Clear button
+     */
+    clearable: boolean;
+    /**
+     * Allow multiple selection
+     */
+    multiple: boolean;
+    /**
+     * Minimum characters to trigger search
+     */
+    minSearchLength: number;
+    /**
+     * Key to extract value from item objects
+     */
+    itemValue: string;
+    /**
+     * Key to extract display text from item objects
+     */
+    itemText: string;
+    /**
+     * Max width of the dropdown menu
+     */
+    menuMaxWidth: string;
+    /**
+     * Custom render function for dropdown items
+     */
+    renderItem: (item: AutocompleteItem) => any;
+    /**
+     * Custom render function for selected items (chips)
+     */
+    renderSelection: (item: AutocompleteItem) => any;
+    isOpen: boolean;
+    searchQuery: string;
+    filteredItems: AutocompleteItem[];
+    selectedItems: any[];
+    highlightedIndex: number;
+    xplorChange: EventEmitter<any>;
+    xplorSelect: EventEmitter<AutocompleteItem>;
+    xplorClear: EventEmitter<void>;
+    xplorSearch: EventEmitter<string>;
+    private inputEl;
+    private dropdownEl;
+    private getItemValue;
+    private getItemText;
+    componentWillLoad(): void;
+    handleDocumentClick(event: MouseEvent): void;
+    private filterItems;
+    private handleInputFocus;
+    private handleInputChange;
+    private handleInputKeyDown;
+    private scrollToHighlighted;
+    private selectItem;
+    private removeItem;
+    private handleClear;
+    private getSelectedItemLabel;
+    private findItemByValue;
+    render(): any;
+}

package/dist/types/components/xplor-avatar/avatar.stories.d.ts

@@ -0,0 +1,75 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Avatar: {
+    ({ placeholder, name, size, color, status, link, disabled }: {
+        placeholder: any;
+        name: any;
+        size: any;
+        color: any;
+        status: any;
+        link: any;
+        disabled: any;
+    }): string;
+    argTypes: {
+        placeholder: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+        };
+        name: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+        };
+        size: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        color: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        status: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        link: {
+            control: {
+                type: string;
+            };
+        };
+        disabled: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    args: {
+        placeholder: string;
+        name: string;
+        size: string;
+        color: string;
+        status: string;
+        link: boolean;
+        disabled: boolean;
+    };
+    parameters: {
+        layout: string;
+        'web-component': {
+            render: string;
+        };
+        html: {
+            render: string;
+        };
+    };
+};

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

@@ -0,0 +1,21 @@
+export declare class XplorAvatar {
+    /** Background color when there is no image src */
+    color?: 'green' | 'yellow' | 'pink' | 'primary' | 'secondary';
+    disabled?: boolean;
+    /** The URL if the avatar should be hyperlinked */
+    href?: string;
+    /** Alt text for the image if there is an image src */
+    name?: string;
+    /** Size of the avatar */
+    size?: 'md' | 'sm';
+    /** The image URL */
+    src?: string;
+    /** Color styles for the dot indicator to indicate varied states */
+    status?: 'active' | 'warning' | 'inactive';
+    /**
+     * Where to open the URL chosen for the `href` prop:
+     * `_self` (default), `_blank`, `_parent`, or `_top`
+     */
+    target?: string;
+    render(): any;
+}