@xplor-education/core-stencil-components 2.0.0

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

@@ -0,0 +1,8 @@
+export declare class XplorAvatarAndName {
+    name: string;
+    src: string;
+    size: 'sm' | 'md';
+    color?: 'green' | 'yellow' | 'pink' | 'primary' | 'secondary';
+    status?: 'active' | 'warning' | 'inactive';
+    render(): any;
+}

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

@@ -0,0 +1,52 @@
+export declare class XplorBadge {
+    /**
+     * Background color (can be CSS color or theme color name)
+     */
+    backgroundColor: string;
+    /**
+     * Text color - 'auto' will calculate contrasting color
+     */
+    color: string;
+    /**
+     * Luminance threshold for auto contrast calculation (0-255)
+     */
+    threshold: number;
+    /**
+     * Visual variant
+     */
+    variant: 'flat' | 'outlined' | 'tonal';
+    /**
+     * Size variant
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * Whether to use datatable styling (slightly larger padding)
+     */
+    datatable: boolean;
+    /**
+     * Optional text content (can also use slot)
+     */
+    text: string;
+    /**
+     * Calculates relative luminance of a color
+     * Based on WCAG 2.0 formula
+     */
+    private calculateLuminance;
+    /**
+     * Parses hex/rgb/rgba color to RGB values
+     */
+    private parseColor;
+    /**
+     * Calculates contrasting color (black or white) based on background
+     */
+    private calculateContrastingColor;
+    /**
+     * Gets the computed CSS variables for the badge
+     */
+    private get cssVars();
+    /**
+     * Gets the computed CSS classes
+     */
+    private get computedClasses();
+    render(): any;
+}

package/dist/types/components/xplor-badge-active/xplor-badge-active.d.ts

@@ -0,0 +1,3 @@
+export declare class XplorBadgeActive {
+    render(): any;
+}

package/dist/types/components/xplor-badge-archived/xplor-badge-archived.d.ts

@@ -0,0 +1,3 @@
+export declare class XplorBadgeArchived {
+    render(): any;
+}

package/dist/types/components/xplor-badge-deleted/xplor-badge-deleted.d.ts

@@ -0,0 +1,3 @@
+export declare class XplorBadgeDeleted {
+    render(): any;
+}

package/dist/types/components/xplor-badge-expired/xplor-badge-expired.d.ts

@@ -0,0 +1,3 @@
+export declare class XplorBadgeExpired {
+    render(): any;
+}

package/dist/types/components/xplor-badge-inactive/xplor-badge-inactive.d.ts

@@ -0,0 +1,3 @@
+export declare class XplorBadgeInactive {
+    render(): any;
+}

package/dist/types/components/xplor-badge-recalled/xplor-badge-recalled.d.ts

@@ -0,0 +1,3 @@
+export declare class XplorBadgeRecalled {
+    render(): any;
+}

package/dist/types/components/xplor-badge-session-booking/xplor-badge-session-booking.d.ts

@@ -0,0 +1,20 @@
+export interface Booking {
+    type: 'absence' | 'attendance' | 'holiday' | string;
+    [key: string]: any;
+}
+export interface BookingItem {
+    ccs_gap_fee_is_waived?: boolean;
+    [key: string]: any;
+}
+export declare class XplorBadgeSessionBooking {
+    /**
+     * Booking object
+     */
+    booking: Booking;
+    /**
+     * Item object
+     */
+    item: BookingItem;
+    private getBookingTypeClass;
+    render(): any;
+}

package/dist/types/components/xplor-badge-upcoming/xplor-badge-upcoming.d.ts

@@ -0,0 +1,3 @@
+export declare class XplorBadgeUpcoming {
+    render(): any;
+}

package/dist/types/components/xplor-badge-waitlist/xplor-badge-waitlist.d.ts

@@ -0,0 +1,3 @@
+export declare class XplorBadgeWaitlist {
+    render(): any;
+}

package/dist/types/components/xplor-btn-back/xplor-btn-back.d.ts

@@ -0,0 +1,29 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XplorBtnBack {
+    /**
+     * Button color
+     */
+    color: string;
+    /**
+     * Minimum width
+     */
+    minWidth: string;
+    /**
+     * Minimum height
+     */
+    minHeight: string;
+    /**
+     * Gap between icon and text
+     */
+    gap: string;
+    /**
+     * Whether the button is disabled
+     */
+    disabled: boolean;
+    /**
+     * Click event
+     */
+    xplorClick: EventEmitter<MouseEvent>;
+    private handleClick;
+    render(): any;
+}

package/dist/types/components/xplor-btn-back-to-parent/xplor-btn-back-to-parent.d.ts

@@ -0,0 +1,29 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XplorBtnBackToParent {
+    /**
+     * Button size
+     */
+    size: string;
+    /**
+     * Whether to use inline (relative) positioning instead of absolute
+     */
+    inline: boolean;
+    /**
+     * Background color
+     */
+    bgColor: string;
+    /**
+     * Text/icon color
+     */
+    color: string;
+    /**
+     * Visual variant
+     */
+    variant: 'text' | 'outlined' | 'elevated' | 'tonal';
+    /**
+     * Back event (emitted on click)
+     */
+    back: EventEmitter<void>;
+    private handleClick;
+    render(): any;
+}

package/dist/types/components/xplor-btn-icon/xplor-btn-icon.d.ts

@@ -0,0 +1,29 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XplorBtnIcon {
+    /**
+     * Button color variant
+     */
+    color: 'primary' | 'secondary' | 'success' | string;
+    /**
+     * Button size (can be pixel value like '32' or '48')
+     */
+    size: string | number;
+    /**
+     * Icon size
+     */
+    iconSize: string | number;
+    /**
+     * Visual variant
+     */
+    variant: 'text' | 'outlined' | 'elevated' | 'tonal';
+    /**
+     * Whether the button is disabled
+     */
+    disabled: boolean;
+    /**
+     * Click event
+     */
+    xplorClick: EventEmitter<MouseEvent>;
+    private handleClick;
+    render(): any;
+}

package/dist/types/components/xplor-btn-menu/xplor-btn-menu.d.ts

@@ -0,0 +1,49 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface MenuOption {
+    key?: string;
+    label: string;
+    [key: string]: any;
+}
+export declare class XplorBtnMenu {
+    /**
+     * Button label
+     */
+    label: string;
+    /**
+     * Menu options
+     */
+    options: MenuOption[];
+    /**
+     * Hidden option keys
+     */
+    hiddenKeys: string[];
+    /**
+     * Disabled option keys
+     */
+    disabledKeys: string[];
+    /**
+     * Button color
+     */
+    color: string;
+    /**
+     * Button density (compact, default, comfortable)
+     */
+    density: string;
+    /**
+     * Whether the menu is open
+     */
+    show: boolean;
+    /**
+     * Click event - emits the clicked option
+     */
+    xplorClick: EventEmitter<MenuOption>;
+    private menuRef;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private handleOutsideClick;
+    private toggleMenu;
+    private handleClickOption;
+    private isHidden;
+    private isDisabled;
+    render(): any;
+}

package/dist/types/components/xplor-btn-toggle/xplor-btn-toggle.d.ts

@@ -0,0 +1,25 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XplorBtnToggle {
+    /**
+     * Whether the button is active/selected
+     */
+    active: boolean;
+    /**
+     * Button color when active
+     */
+    color: string;
+    /**
+     * Whether the button is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether to show outline when inactive
+     */
+    inactiveOutlined: boolean;
+    /**
+     * Toggle event
+     */
+    xplorToggle: EventEmitter<boolean>;
+    private handleClick;
+    render(): any;
+}

package/dist/types/components/xplor-btn-toggle-group/xplor-btn-toggle-group.d.ts

@@ -0,0 +1,11 @@
+export declare class XplorBtnToggleGroup {
+    /**
+     * Whether multiple buttons can be active at once
+     */
+    multiple: boolean;
+    /**
+     * Density variant
+     */
+    density: 'compact' | 'default' | 'comfortable';
+    render(): any;
+}

package/dist/types/components/xplor-btn-toggle-secondary/xplor-btn-toggle-secondary.d.ts

@@ -0,0 +1,21 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XplorBtnToggleSecondary {
+    /**
+     * Whether the button is active/selected
+     */
+    active: boolean;
+    /**
+     * Whether the button is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether to show outline when inactive
+     */
+    inactiveOutlined: boolean;
+    /**
+     * Toggle event
+     */
+    xplorToggle: EventEmitter<boolean>;
+    private handleClick;
+    render(): any;
+}

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

@@ -0,0 +1,10 @@
+export declare class XplorBtnTooltip {
+    text: string;
+    tooltipText: string;
+    tooltipPosition: 'top' | 'bottom' | 'left' | 'right';
+    type: 'primary' | 'secondary' | 'ghost' | 'disabled';
+    mode: 'office' | 'pg';
+    iconPosition: 'start' | 'end';
+    disabled: boolean;
+    render(): any;
+}

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

@@ -0,0 +1,19 @@
+export declare class XplorButton {
+    text: string;
+    type: 'minimal' | 'primary' | 'secondary' | 'ghost' | 'disabled' | 'success' | 'text';
+    mode?: 'dark' | 'pg' | 'office';
+    size?: string;
+    styles?: string;
+    clickAction: () => void;
+    /**
+     * Icon position: 'start' | 'end' | null
+     */
+    iconPosition: 'start' | 'end' | null;
+    /**
+     * Icon to display (defaults to plus sign)
+     */
+    icon: string;
+    iconSvg?: string;
+    private renderIcon;
+    render(): any;
+}

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

@@ -0,0 +1,32 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    parameters: {
+        actions: {
+            argTypesRegex: string;
+            handles: string[];
+        };
+    };
+    argTypes: {
+        text: {
+            control: string;
+        };
+        styles: {
+            control: string;
+        };
+        mode: {
+            control: string;
+        };
+        type: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+    };
+};
+export default _default;
+export declare const Primary: any;
+export declare const Ghost: any;
+export declare const Minimal: any;
+export declare const PG: any;

package/dist/types/components/xplor-chat-widget/xplor-chat-widget.d.ts

@@ -0,0 +1,13 @@
+export declare class XplorChatWidget {
+    languageOptions: string[];
+    textId: string;
+    apiKey: string;
+    host: HTMLElement;
+    selectedLanguage: string;
+    textValue: string;
+    'Hoy, nos divertimos mucho explorando el mundo de la arcilla. Estaban totalmente absortos en el proceso, formando cuidadosamente la arcilla en diseños y patrones únicos. Desde animales coloridos hasta formas extravagantes, la imaginación de tu hijo no tuvo límites durante este día lleno de diversión.': any;
+    componentDidLoad(): void;
+    handleClick: () => void;
+    handleChange: (event: Event) => void;
+    render(): any;
+}

package/dist/types/components/xplor-chat-widget/xplor-chat.stories.d.ts

@@ -0,0 +1,32 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    parameters: {
+        actions: {
+            argTypesRegex: string;
+            handles: string[];
+        };
+    };
+    argTypes: {
+        text: {
+            control: string;
+        };
+        styles: {
+            control: string;
+        };
+        mode: {
+            control: string;
+        };
+        apiKey: {
+            control: string;
+        };
+        type: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+    };
+};
+export default _default;
+export declare const Primary: any;

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

@@ -0,0 +1,25 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XplorCheckbox {
+    initialChecked: boolean;
+    initialIndeterminate: boolean;
+    disabled: boolean;
+    error: boolean;
+    label: string;
+    checked: boolean;
+    indeterminate: boolean;
+    isHovered: boolean;
+    isFocused: boolean;
+    isPressed: boolean;
+    checkboxChange: EventEmitter<{
+        checked: boolean;
+        indeterminate: boolean;
+    }>;
+    watchCheckedProp(newValue: boolean): void;
+    watchIndeterminateProp(newValue: boolean): void;
+    componentWillLoad(): void;
+    private handleClick;
+    private handleKeyDown;
+    private handleKeyUp;
+    private getCheckboxClass;
+    render(): any;
+}

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

@@ -0,0 +1,77 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface ComboboxItem {
+    label: string;
+    value: any;
+    disabled?: boolean;
+    [key: string]: any;
+}
+export declare class XplorCombobox {
+    el: HTMLElement;
+    /**
+     * Array of items to display in the dropdown
+     */
+    items: ComboboxItem[];
+    /**
+     * Selected value(s)
+     */
+    value: any;
+    /**
+     * Placeholder text
+     */
+    placeholder: string;
+    /**
+     * Label for the input
+     */
+    label: string;
+    /**
+     * Disable the combobox
+     */
+    disabled: boolean;
+    /**
+     * Make the combobox readonly
+     */
+    readonly: boolean;
+    /**
+     * Clear button
+     */
+    clearable: boolean;
+    /**
+     * Allow multiple selection
+     */
+    multiple: boolean;
+    /**
+     * Allow creating new items
+     */
+    allowCustom: boolean;
+    /**
+     * Message to display when creating new item
+     */
+    createMessage: string;
+    isOpen: boolean;
+    searchQuery: string;
+    filteredItems: ComboboxItem[];
+    selectedItems: any[];
+    highlightedIndex: number;
+    customItems: ComboboxItem[];
+    xplorChange: EventEmitter<any>;
+    xplorSelect: EventEmitter<ComboboxItem>;
+    xplorCreate: EventEmitter<string>;
+    xplorClear: EventEmitter<void>;
+    xplorSearch: EventEmitter<string>;
+    private inputEl;
+    private dropdownEl;
+    componentWillLoad(): void;
+    handleDocumentClick(event: MouseEvent): void;
+    private filterItems;
+    private canCreateNew;
+    private handleInputFocus;
+    private handleInputChange;
+    private handleInputKeyDown;
+    private scrollToHighlighted;
+    private selectItem;
+    private createNewItem;
+    private removeItem;
+    private handleClear;
+    private getSelectedItemLabel;
+    render(): any;
+}

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

@@ -0,0 +1,103 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface DatatableColumn {
+    text: string;
+    value: string;
+    sortable?: boolean;
+    width?: string | number;
+    align?: 'left' | 'center' | 'right';
+    fixed?: boolean;
+}
+export interface DatatablePagination {
+    page: number;
+    perpage: number;
+    total: number;
+    pages?: number;
+}
+export declare class XplorDatatable {
+    el: HTMLXplorDatatableElement;
+    /**
+     * Array of column definitions for the table headers
+     */
+    headers: DatatableColumn[];
+    /**
+     * Array of data items to display in the table
+     */
+    items: any[];
+    /**
+     * Whether the table is in a loading state
+     */
+    loading: boolean;
+    /**
+     * Pagination configuration object
+     */
+    pagination: DatatablePagination;
+    /**
+     * Array of selected items (for multiselect)
+     */
+    selected: any[];
+    /**
+     * Enable row selection with checkboxes
+     */
+    canSelect: boolean;
+    /**
+     * Enable horizontal lines between rows
+     */
+    horizontalLines: boolean;
+    /**
+     * Enable striped row styling
+     */
+    striped: boolean;
+    /**
+     * Fixed header height (e.g., "400px" or 400)
+     */
+    height?: string | number;
+    /**
+     * Show skeleton loader when loading
+     */
+    skeletonLoader: boolean;
+    /**
+     * Enable hover effect on rows
+     */
+    hover: boolean;
+    /**
+     * Per page options for pagination
+     */
+    perPageOptions: number[];
+    /**
+     * Emitted when a row is clicked
+     */
+    rowClick: EventEmitter<any>;
+    /**
+     * Emitted when row selection changes
+     */
+    xplorSelectionChange: EventEmitter<any[]>;
+    /**
+     * Emitted when pagination changes
+     */
+    paginationChange: EventEmitter<DatatablePagination>;
+    /**
+     * Emitted when sorting changes
+     */
+    sortChange: EventEmitter<{
+        column: string;
+        direction: 'asc' | 'desc' | null;
+    }>;
+    sortBy: string | null;
+    sortDirection: 'asc' | 'desc' | null;
+    internalSelected: Set<any>;
+    allSelected: boolean;
+    componentWillLoad(): void;
+    watchSelected(newSelected: any[]): void;
+    watchItems(): void;
+    private updateAllSelectedState;
+    private handleSort;
+    private handleSelectAll;
+    private handleSelectOne;
+    private handleRowClick;
+    private handlePageChange;
+    private handlePerPageChange;
+    private getSortIcon;
+    private renderSkeletonLoader;
+    private renderPagination;
+    render(): any;
+}

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

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/html';
+interface DatatableArgs {
+    canSelect: boolean;
+    horizontalLines: boolean;
+    striped: boolean;
+    hover: boolean;
+    loading: boolean;
+    height?: number;
+}
+declare const meta: Meta<DatatableArgs>;
+export default meta;
+type Story = StoryObj<DatatableArgs>;
+export declare const Default: Story;
+export declare const WithSelection: Story;
+export declare const Striped: Story;
+export declare const WithFixedHeight: Story;
+export declare const Loading: Story;
+export declare const WithSelectionAndStriped: Story;