@xplor-education/core-stencil-components 2.0.0

package/dist/types/components/xplor-date-picker/xplor-date-picker.d.ts

@@ -0,0 +1,53 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XplorDatePicker {
+    el: HTMLElement;
+    /** Selected date in YYYY-MM-DD format */
+    value: string;
+    label: string;
+    placeholder: string;
+    /** 'date' or 'month' */
+    type: 'date' | 'month';
+    /** For month type: select start or end of month */
+    monthType: 'start' | 'end';
+    /** 'input' shows text input, 'text' shows clickable text */
+    display: 'input' | 'text';
+    /** Date display format: 'short' (DD/MM/YYYY), 'long' (1 Jan 2025), 'iso' (YYYY-MM-DD) */
+    dateFormat: 'short' | 'long' | 'iso';
+    min: string;
+    max: string;
+    readonly: boolean;
+    disabled: boolean;
+    clearable: boolean;
+    closeOnSelect: boolean;
+    bgColor: string;
+    color: string;
+    startWeekOnSunday: boolean;
+    error: string;
+    hideDetails: boolean | 'auto';
+    required: boolean;
+    isOpen: boolean;
+    inputText: string;
+    dropdownPosition: 'bottom' | 'top';
+    dateChange: EventEmitter<string>;
+    xplorFocus: EventEmitter<FocusEvent>;
+    xplorBlur: EventEmitter<FocusEvent>;
+    xplorClear: EventEmitter<void>;
+    componentWillLoad(): void;
+    handleDocumentClick(event: MouseEvent): void;
+    /** Parse YYYY-MM-DD safely without UTC shift */
+    private parseISODate;
+    private formatDateForDisplay;
+    private toISO;
+    /** Parse user-typed text into YYYY-MM-DD */
+    private parseInputText;
+    private isDateInRange;
+    private updateDropdownPosition;
+    private toggleDropdown;
+    private handleInputFocus;
+    private handleInputBlur;
+    private handleInputChange;
+    private handleDateSelected;
+    private handleClear;
+    private handleTextClick;
+    render(): any;
+}

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

@@ -0,0 +1,42 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XplorDragAndDropInput {
+    /**
+     * Disable the file upload
+     */
+    disabled: boolean;
+    /**
+     * Accepted file types (e.g., 'image/png,.pdf')
+     */
+    accepts: string;
+    /**
+     * Instruction text displayed in the drop zone
+     */
+    label: string;
+    /**
+     * Browse button label text
+     */
+    browseLabel: string;
+    dragover: boolean;
+    currentFile: File | null;
+    /**
+     * Emitted when a file is selected via drop or click
+     */
+    fileSelect: EventEmitter<File>;
+    /**
+     * Emitted when the current file is cleared
+     */
+    fileClear: EventEmitter<void>;
+    private fileInputEl;
+    /**
+     * Clears the currently selected file
+     */
+    clearCurrentFile(): Promise<void>;
+    private onDrop;
+    private onDragOver;
+    private onDragEnter;
+    private onDragLeave;
+    private onFileSelect;
+    private openFileDialog;
+    private getAcceptsLabel;
+    render(): any;
+}

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

@@ -0,0 +1,6 @@
+export declare class XplorDropdown {
+    options: string[];
+    selected: string;
+    handleChange: (event: Event) => void;
+    render(): any;
+}

package/dist/types/components/xplor-expansion-panel/xplor-expansion-panel.d.ts

@@ -0,0 +1,18 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XplorExpansionPanel {
+    el: HTMLElement;
+    disabled: boolean;
+    open: boolean;
+    panelId: string;
+    contentHeight: number;
+    xplorPanelToggle: EventEmitter<{
+        id: string;
+        isOpen: boolean;
+    }>;
+    private contentEl;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    private updateContentHeight;
+    private handleToggle;
+    render(): any;
+}

package/dist/types/components/xplor-expansion-panels/xplor-expansion-panels.d.ts

@@ -0,0 +1,12 @@
+export declare class XplorExpansionPanels {
+    value: string | string[];
+    multiple: boolean;
+    accordion: boolean;
+    openPanels: Set<string>;
+    componentWillLoad(): void;
+    handlePanelToggle(event: CustomEvent<{
+        id: string;
+        isOpen: boolean;
+    }>): void;
+    render(): any;
+}

package/dist/types/components/xplor-file-upload/xplor-file-upload.d.ts

@@ -0,0 +1,51 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface UploadedFile {
+    file: File;
+    id: string;
+    name: string;
+    size: number;
+    type: string;
+    dataUrl?: string;
+}
+export declare class XplorFileUpload {
+    /**
+     * Accepted file types (e.g., 'image/png', '.pdf', 'image/star'). Default accepts all types.
+     */
+    accepts: string;
+    /**
+     * Maximum file size in bytes
+     */
+    maxSize: number;
+    /**
+     * Allow multiple file selection
+     */
+    multiple: boolean;
+    /**
+     * Disable the file upload
+     */
+    disabled: boolean;
+    /**
+     * Show image preview for uploaded images
+     */
+    showPreview: boolean;
+    /**
+     * Label text for the upload button
+     */
+    label: string;
+    files: UploadedFile[];
+    isDragging: boolean;
+    error: string;
+    xplorFileAdd: EventEmitter<UploadedFile[]>;
+    xplorFileRemove: EventEmitter<UploadedFile>;
+    xplorError: EventEmitter<string>;
+    private fileInputEl;
+    private handleFileSelect;
+    private handleDragOver;
+    private handleDragLeave;
+    private handleDrop;
+    private processFiles;
+    private handleRemoveFile;
+    private handleButtonClick;
+    private formatFileSize;
+    render(): any;
+}

package/dist/types/components/xplor-inline-checkbox/xplor-inline-checkbox.d.ts

@@ -0,0 +1,33 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XplorInlineCheckbox {
+    /**
+     * Checked state
+     */
+    checked: boolean;
+    /**
+     * Value (for use in forms)
+     */
+    value: any;
+    /**
+     * Checkbox color
+     */
+    color: string;
+    /**
+     * Whether the checkbox is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the checkbox is indeterminate
+     */
+    indeterminate: boolean;
+    /**
+     * Label text
+     */
+    label: string;
+    /**
+     * Change event
+     */
+    xplorChange: EventEmitter<boolean>;
+    private handleChange;
+    render(): any;
+}

package/dist/types/components/xplor-inline-date-picker/xplor-inline-date-picker.d.ts

@@ -0,0 +1,57 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XplorInlineDatePicker {
+    /**
+     * Selected date (YYYY-MM-DD format)
+     */
+    selectedDate: string;
+    /**
+     * Minimum selectable date (YYYY-MM-DD format)
+     */
+    min: string;
+    /**
+     * Maximum selectable date (YYYY-MM-DD format)
+     */
+    max: string;
+    /**
+     * Whether the date picker is readonly
+     */
+    readonly: boolean;
+    /**
+     * Primary color
+     */
+    color: string;
+    /**
+     * Whether to start week on Sunday (default: true)
+     */
+    startWeekOnSunday: boolean;
+    /**
+     * Date selection event
+     */
+    dateSelected: EventEmitter<string>;
+    /**
+     * Month change event
+     */
+    monthChanged: EventEmitter<{
+        year: number;
+        month: number;
+    }>;
+    currentYear: number;
+    currentMonth: number;
+    viewDate: Date;
+    private monthNames;
+    private dayNames;
+    private dayNamesStartMonday;
+    componentWillLoad(): void;
+    private previousMonth;
+    private nextMonth;
+    private selectDate;
+    private formatDate;
+    private isDateDisabled;
+    private isToday;
+    private isSelected;
+    private getDaysInMonth;
+    private getFirstDayOfMonth;
+    private renderCalendarDays;
+    private getSidebarDate;
+    render(): any;
+}

package/dist/types/components/xplor-inline-switch/xplor-inline-switch.d.ts

@@ -0,0 +1,29 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XplorInlineSwitch {
+    /**
+     * Checked state
+     */
+    checked: boolean;
+    /**
+     * Value (for use in forms)
+     */
+    value: any;
+    /**
+     * Switch color (applies when checked)
+     */
+    color: string;
+    /**
+     * Whether the switch is disabled
+     */
+    disabled: boolean;
+    /**
+     * Label text
+     */
+    label: string;
+    /**
+     * Change event
+     */
+    xplorChange: EventEmitter<boolean>;
+    private handleChange;
+    render(): any;
+}

package/dist/types/components/xplor-input-file/xplor-input-file.d.ts

@@ -0,0 +1,60 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XplorInputFile {
+    private fileInputRef;
+    /**
+     * Input label
+     */
+    label: string;
+    /**
+     * Input placeholder
+     */
+    placeholder: string;
+    /**
+     * Border/focus color
+     */
+    color: string;
+    /**
+     * Whether the input is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether multiple files can be selected
+     */
+    multiple: boolean;
+    /**
+     * Accepted file types
+     */
+    accept: string;
+    /**
+     * Maximum number of chips to show
+     */
+    maxChips: number;
+    /**
+     * Whether to show file counter
+     */
+    counter: boolean;
+    /**
+     * Whether to show file size
+     */
+    showSize: number;
+    /**
+     * Prepend inner icon (default: paperclip)
+     */
+    prependInnerIcon: string;
+    /**
+     * Files selected
+     */
+    selectedFiles: File[];
+    /**
+     * Attach/change event
+     */
+    attach: EventEmitter<File[]>;
+    /**
+     * Clear event
+     */
+    xplorClear: EventEmitter<void>;
+    private handleFileChange;
+    private handleClear;
+    private formatFileSize;
+    render(): any;
+}

package/dist/types/components/xplor-input-search/xplor-input-search.d.ts

@@ -0,0 +1,36 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XplorInputSearch {
+    /**
+     * Search value
+     */
+    value: string;
+    /**
+     * Input placeholder
+     */
+    placeholder: string;
+    /**
+     * Background color
+     */
+    bgColor: string;
+    /**
+     * Button/focus color
+     */
+    color: string;
+    /**
+     * Whether the input is disabled
+     */
+    disabled: boolean;
+    /**
+     * Density (compact, default, comfortable)
+     */
+    density: 'compact' | 'default' | 'comfortable';
+    /**
+     * Search event (triggered on button click or Enter key)
+     */
+    search: EventEmitter<string>;
+    isFocused: boolean;
+    private handleInput;
+    private handleSearch;
+    private handleKeyDown;
+    render(): any;
+}

package/dist/types/components/xplor-input-select/xplor-input-select.d.ts

@@ -0,0 +1,76 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface SelectOption {
+    value: any;
+    title: string;
+    subtitle?: string;
+    [key: string]: any;
+}
+export declare class XplorInputSelect {
+    private selectRef;
+    /**
+     * Selected value(s)
+     */
+    value: any | any[];
+    /**
+     * Input label
+     */
+    label: string;
+    /**
+     * Input placeholder
+     */
+    placeholder: string;
+    /**
+     * Options array
+     */
+    options: SelectOption[];
+    /**
+     * Whether multiple selection is allowed
+     */
+    multiple: boolean;
+    /**
+     * Background color
+     */
+    bgColor: string;
+    /**
+     * Border/focus color
+     */
+    color: string;
+    /**
+     * Whether the select is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the select is readonly
+     */
+    readonly: boolean;
+    /**
+     * Whether to hide validation details
+     */
+    hideDetails: boolean | 'auto';
+    /**
+     * Error message
+     */
+    error: string;
+    /**
+     * Helper text
+     */
+    helperText: string;
+    /**
+     * Whether the input is required
+     */
+    required: boolean;
+    /**
+     * Change event
+     */
+    xplorChange: EventEmitter<any>;
+    isOpen: boolean;
+    isFocused: boolean;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private handleOutsideClick;
+    private toggleDropdown;
+    private handleOptionClick;
+    private isSelected;
+    private getDisplayValue;
+    render(): any;
+}

package/dist/types/components/xplor-input-send/xplor-input-send.d.ts

@@ -0,0 +1,18 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XplorInputSend {
+    placeholder: string;
+    disabled: boolean;
+    maxLength: number;
+    value: string;
+    buttonText: string;
+    buttonType: 'primary' | 'secondary' | 'ghost';
+    internalValue: string;
+    xplorSend: EventEmitter<string>;
+    xplorValueChange: EventEmitter<string>;
+    private inputEl;
+    componentWillLoad(): void;
+    private handleInput;
+    private handleKeyDown;
+    private handleSend;
+    render(): any;
+}

package/dist/types/components/xplor-input-text/xplor-input-text.d.ts

@@ -0,0 +1,73 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XplorInputText {
+    /**
+     * Input value
+     */
+    value: string;
+    /**
+     * Input label
+     */
+    label: string;
+    /**
+     * Input placeholder
+     */
+    placeholder: string;
+    /**
+     * Input type (text, email, password, number, etc.)
+     */
+    type: string;
+    /**
+     * Background color
+     */
+    bgColor: string;
+    /**
+     * Border/focus color
+     */
+    color: string;
+    /**
+     * Whether the input is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the input is readonly
+     */
+    readonly: boolean;
+    /**
+     * Whether to hide validation details
+     */
+    hideDetails: boolean | 'auto';
+    /**
+     * Error message
+     */
+    error: string;
+    /**
+     * Helper text
+     */
+    helperText: string;
+    /**
+     * Whether the input is required
+     */
+    required: boolean;
+    /**
+     * Input event
+     */
+    xplorInput: EventEmitter<string>;
+    /**
+     * Change event
+     */
+    xplorChange: EventEmitter<string>;
+    /**
+     * Focus event
+     */
+    xplorFocus: EventEmitter<FocusEvent>;
+    /**
+     * Blur event
+     */
+    xplorBlur: EventEmitter<FocusEvent>;
+    isFocused: boolean;
+    private handleInput;
+    private handleChange;
+    private handleFocus;
+    private handleBlur;
+    render(): any;
+}

package/dist/types/components/xplor-input-text-area/xplor-input-text-area.d.ts

@@ -0,0 +1,72 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XplorInputTextArea {
+    /**
+     * Input value
+     */
+    value: string;
+    /**
+     * Input label
+     */
+    label: string;
+    /**
+     * Input placeholder
+     */
+    placeholder: string;
+    /**
+     * Background color
+     */
+    bgColor: string;
+    /**
+     * Border/focus color
+     */
+    color: string;
+    /**
+     * Whether the input is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the input is readonly
+     */
+    readonly: boolean;
+    /**
+     * Whether to show clear button
+     */
+    clearable: boolean;
+    /**
+     * Number of rows
+     */
+    rows: number;
+    /**
+     * Whether to hide validation details
+     */
+    hideDetails: boolean | 'auto';
+    /**
+     * Error message
+     */
+    error: string;
+    /**
+     * Helper text
+     */
+    helperText: string;
+    /**
+     * Whether the input is required
+     */
+    required: boolean;
+    /**
+     * Input event
+     */
+    xplorInput: EventEmitter<string>;
+    /**
+     * Change event
+     */
+    xplorChange: EventEmitter<string>;
+    /**
+     * Clear event
+     */
+    xplorClear: EventEmitter<void>;
+    isFocused: boolean;
+    private handleInput;
+    private handleChange;
+    private handleClear;
+    render(): any;
+}

package/dist/types/components/xplor-input-text-secondary/xplor-input-text-secondary.d.ts

@@ -0,0 +1,25 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XplorInputTextSecondary {
+    value: string;
+    label: string;
+    placeholder: string;
+    type: string;
+    bgColor: string;
+    disabled: boolean;
+    readonly: boolean;
+    hideDetails: boolean | 'auto';
+    error: string;
+    helperText: string;
+    required: boolean;
+    isDirty: boolean;
+    xplorInput: EventEmitter<string>;
+    xplorChange: EventEmitter<string>;
+    xplorFocus: EventEmitter<FocusEvent>;
+    xplorBlur: EventEmitter<FocusEvent>;
+    isFocused: boolean;
+    private handleInput;
+    private handleChange;
+    private handleFocus;
+    private handleBlur;
+    render(): any;
+}