@xplor-education/core-stencil-components 2.0.0

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

@@ -0,0 +1,30 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XplorInputTitle {
+    /**
+     * Input value
+     */
+    value: string;
+    /**
+     * Input placeholder
+     */
+    placeholder: string;
+    /**
+     * Whether the input is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the input is readonly
+     */
+    readonly: boolean;
+    /**
+     * Input event
+     */
+    xplorInput: EventEmitter<string>;
+    /**
+     * Change event
+     */
+    xplorChange: EventEmitter<string>;
+    private handleInput;
+    private handleChange;
+    render(): any;
+}

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

@@ -0,0 +1,4 @@
+export declare class XplorLinks {
+    brand: string;
+    render(): any;
+}

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

@@ -0,0 +1,12 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    parameters: {
+        actions: {
+            argTypesRegex: string;
+            handles: string[];
+        };
+    };
+};
+export default _default;
+export declare const Example: any;

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

@@ -0,0 +1,45 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XplorModal {
+    /**
+     * Whether the modal is open
+     */
+    open: boolean;
+    /**
+     * Modal width
+     */
+    width: string;
+    /**
+     * Maximum width
+     */
+    maxWidth: string;
+    /**
+     * Maximum height
+     */
+    maxHeight: string;
+    /**
+     * Whether the modal content is scrollable
+     */
+    scrollable: boolean;
+    /**
+     * Persistent mode - prevents closing on backdrop click
+     */
+    persistent: boolean;
+    /**
+     * Loading state
+     */
+    loading: boolean;
+    /**
+     * Whether to show the title area (for spacing)
+     */
+    showTitle: boolean;
+    /**
+     * Close event
+     */
+    xplorClose: EventEmitter<void>;
+    handleOpenChange(newValue: boolean): void;
+    disconnectedCallback(): void;
+    private handleBackdropClick;
+    private handleCardClick;
+    private closeModal;
+    render(): any;
+}

package/dist/types/components/xplor-modal-persistent/xplor-modal-persistent.d.ts

@@ -0,0 +1,28 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XplorModalPersistent {
+    /**
+     * Whether the modal is open
+     */
+    open: boolean;
+    /**
+     * Modal width
+     */
+    width: string;
+    /**
+     * Maximum width
+     */
+    maxWidth: string;
+    /**
+     * Maximum height
+     */
+    maxHeight: string;
+    /**
+     * Loading state
+     */
+    loading: boolean;
+    /**
+     * Close event
+     */
+    xplorClose: EventEmitter<void>;
+    render(): any;
+}

package/dist/types/components/xplor-nav-tabs/xplor-nav-tabs.d.ts

@@ -0,0 +1,15 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface NavTabItem {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export declare class XplorNavTabs {
+    value: string;
+    items: NavTabItem[];
+    color: 'primary' | 'secondary';
+    grow: boolean;
+    xplorChange: EventEmitter<string>;
+    private handleTabClick;
+    render(): any;
+}

package/dist/types/components/xplor-section-card/xplor-section-card.d.ts

@@ -0,0 +1,6 @@
+export declare class XplorSectionCard {
+    outlined: boolean;
+    rounded: boolean;
+    padding: string;
+    render(): any;
+}

package/dist/types/components/xplor-section-heading/xplor-section-heading.d.ts

@@ -0,0 +1,5 @@
+export declare class XplorSectionHeading {
+    size: 'small' | 'medium' | 'large';
+    text: string;
+    render(): any;
+}

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

@@ -0,0 +1,65 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XplorTable {
+    el: HTMLXplorTableElement;
+    /**
+     * The header values for each column.
+     */
+    columns?: string[];
+    /**
+     * The data for the body of the table.
+     */
+    data?: string[][];
+    /**
+     * When true, the first column of the table is sticky and will cover the leftmost rows in a horizontally scrollable container.
+     */
+    freeze?: boolean;
+    /**
+     * Toggles a selectable checkbox for each row in the table
+     */
+    multiselect?: boolean;
+    /**
+     * Toggles an optional styling of the background of each even row of the table body.
+     */
+    striped?: boolean;
+    /**
+     * The values for the input for each row when multiselect is activated.
+     */
+    selectedValues?: string[];
+    /**
+     * Toggles to show the sort button on each table head
+     */
+    isSortable?: boolean;
+    /**
+     * Manually determined if the column is sortable
+     */
+    sortableColumns?: boolean[];
+    areAllSelected: boolean;
+    rowData: string[][];
+    hasScrolled: boolean;
+    selected: (string | boolean)[];
+    sortTypeArray: ('asc' | 'desc' | null)[];
+    selectedDateRange: string;
+    /**
+     * Callback function that is called when the checkbox for a row of a
+     * `multiselect` table is checked
+     */
+    currentPage: number;
+    totalPages: number;
+    tableSelect: EventEmitter;
+    private handlePagination;
+    private handleDateRangeChange;
+    private handleFilterReports;
+    private handleDownloadAll;
+    private selectAllValue;
+    private container;
+    private selectAll;
+    private selectOne;
+    private onChange;
+    private onScroll;
+    private sortBy;
+    private setData;
+    private getPaginatedData;
+    watchData(): void;
+    componentWillLoad(): void;
+    render(): any;
+}

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

@@ -0,0 +1,77 @@
+declare const _default: {
+    title: string;
+    argTypes: {
+        freeze: {
+            control: {
+                type: string;
+            };
+        };
+        multiselect: {
+            control: {
+                type: string;
+            };
+        };
+        striped: {
+            control: {
+                type: string;
+            };
+        };
+        columns: {
+            control: {
+                type: string;
+            };
+        };
+        data: {
+            control: {
+                type: string;
+            };
+        };
+        isSortable: {
+            control: {
+                type: string;
+            };
+        };
+        sortableColumns: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    parameters: {
+        actions: {
+            handles: string[];
+        };
+    };
+};
+export default _default;
+export declare const Table: {
+    ({ columns, data, freeze, multiselect, selectedValues, striped, isSortable, sortableColumns, }: {
+        columns: any;
+        data: any;
+        freeze: any;
+        multiselect: any;
+        selectedValues: any;
+        striped: any;
+        isSortable: any;
+        sortableColumns: any;
+    }): string;
+    args: {
+        freeze: boolean;
+        multiselect: boolean;
+        striped: boolean;
+        columns: string[];
+        data: string[][];
+        selectedValues: string[];
+        isSortable: boolean;
+        sortableColumns: boolean[];
+    };
+    parameters: {
+        layout: string;
+        'web-component': {
+            render: string[];
+        };
+        html: {
+            render: string[];
+        };
+    };
+};

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

@@ -0,0 +1,4 @@
+export declare class XplorTextBubble {
+    color: 'green' | 'orange';
+    render(): any;
+}

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

@@ -0,0 +1,111 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XplorTextField {
+    el: HTMLElement;
+    /**
+     * The current value of the text field
+     */
+    value: string;
+    /**
+     * The label text for the input
+     */
+    label: string;
+    /**
+     * Placeholder text when input is empty
+     */
+    placeholder: string;
+    /**
+     * Input type (text, email, password, number, etc.)
+     */
+    type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
+    /**
+     * Color variant (primary, secondary, success, error, warning, info)
+     */
+    color: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
+    /**
+     * Visual variant style
+     */
+    variant: 'outlined' | 'filled' | 'underlined';
+    /**
+     * Background color
+     */
+    bgColor: string;
+    /**
+     * Error messages to display
+     */
+    errorMessages: string[];
+    /**
+     * When to show details: true (always), false (never), 'auto' (only when error)
+     */
+    hideDetails: boolean | 'auto';
+    /**
+     * Whether the field is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the field is readonly
+     */
+    readonly: boolean;
+    /**
+     * Whether the field is required
+     */
+    required: boolean;
+    /**
+     * Whether the field has been modified (dirty state)
+     */
+    isDirty: boolean;
+    /**
+     * Whether the field should be clearable
+     */
+    clearable: boolean;
+    /**
+     * Custom CSS classes to apply
+     */
+    customClass: string;
+    /**
+     * Maximum length of input
+     */
+    maxlength: number;
+    /**
+     * Minimum value (for number type)
+     */
+    min: number;
+    /**
+     * Maximum value (for number type)
+     */
+    max: number;
+    /**
+     * Internal focused state
+     */
+    isFocused: boolean;
+    /**
+     * Internal hasValue state
+     */
+    hasValue: boolean;
+    /**
+     * Emitted when value changes
+     */
+    valueChange: EventEmitter<string>;
+    /**
+     * Emitted when input loses focus
+     */
+    inputBlur: EventEmitter<FocusEvent>;
+    /**
+     * Emitted when input gains focus
+     */
+    inputFocus: EventEmitter<FocusEvent>;
+    /**
+     * Emitted when clear button is clicked
+     */
+    clearClick: EventEmitter<void>;
+    private inputElement?;
+    handleValueChange(newValue: string): void;
+    componentWillLoad(): void;
+    private handleInput;
+    private handleFocus;
+    private handleBlur;
+    private handleClear;
+    private get hasError();
+    private get showDetails();
+    private get computedClasses();
+    render(): any;
+}

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

@@ -0,0 +1,55 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XplorTimePicker {
+    el: HTMLElement;
+    /** Time value in HH:mm:ss 24-hour format */
+    value: string;
+    label: string;
+    placeholder: string;
+    clearable: boolean;
+    /** Auto-fill current time on focus if value is empty */
+    prefill: boolean;
+    bgColor: string;
+    showSeconds: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    error: string;
+    hideDetails: boolean | 'auto';
+    required: boolean;
+    isOpen: boolean;
+    inputText: string;
+    hours: number;
+    minutes: number;
+    seconds: number;
+    period: 'AM' | 'PM';
+    lastGoodValue: string;
+    timeChange: EventEmitter<string>;
+    xplorFocus: EventEmitter<FocusEvent>;
+    xplorBlur: EventEmitter<FocusEvent>;
+    xplorClear: EventEmitter<void>;
+    componentWillLoad(): void;
+    handleDocumentClick(event: MouseEvent): void;
+    /** Parse HH:mm:ss (24h) into component state */
+    private parseValueToState;
+    /** Convert current state to HH:mm:ss (24h) */
+    private stateToValue;
+    /** Format for display: "12:00 PM" or "12:00:00 PM" */
+    private formatDisplayTime;
+    /** Port of Vue handleOnBlur time parsing logic */
+    private parseInputText;
+    private emitChange;
+    private toggleDropdown;
+    private handleInputFocus;
+    private handleInputBlur;
+    private handleInputChange;
+    private handleClear;
+    private incrementHours;
+    private decrementHours;
+    private incrementMinutes;
+    private decrementMinutes;
+    private incrementSeconds;
+    private decrementSeconds;
+    private togglePeriod;
+    private renderChevronUp;
+    private renderChevronDown;
+    render(): any;
+}

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

@@ -0,0 +1,28 @@
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipTrigger = 'hover' | 'click' | 'manual';
+export declare class XplorTooltip {
+    el: HTMLElement;
+    position: TooltipPosition;
+    trigger: TooltipTrigger;
+    arrow: boolean;
+    open: boolean;
+    content: string;
+    disabled: boolean;
+    tooltipStyle: any;
+    arrowStyle: any;
+    private triggerEl;
+    private tooltipEl;
+    private hideTimeout;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private setupHoverListeners;
+    private cleanupListeners;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleClick;
+    handleDocumentClick(event: MouseEvent): void;
+    private showTooltip;
+    private hideTooltip;
+    private updatePosition;
+    render(): any;
+}