@liquidcommerce/elements-sdk 2.6.7 → 2.7.0

package/dist/types/modules/product-list/product-list.component.d.ts

@@ -1,73 +1,45 @@
+import type { IProductListComponent } from 'interfaces/configs';
 import { BaseComponent, type IOnStoreChanged } from '@/core/base-component.service';
-import type { ProductListCardVariantType, ProductListFilterType } from '@/interfaces/core.interface';
+import type { ProductListFilterType } from '@/interfaces/core.interface';
 export interface IProductListComponentParams {
-    cardVariant: ProductListCardVariantType;
     rows: number;
     columns: number;
-    fillCard: boolean;
     filters: ProductListFilterType[];
     productUrl?: string;
 }
-export declare class ProductListComponent extends BaseComponent<IProductListComponentParams> {
+export declare class ProductListComponent extends BaseComponent<IProductListComponentParams, IProductListComponent> {
     private products;
     private retailers;
     private pagination;
-    private filters;
-    private searchFilter;
-    private currentFilters;
     private cardsContainer;
-    private filtersContainer;
-    private searchContainer;
     private sentinelElement;
-    private personalizedSwitch;
-    private preOrderSwitch;
-    private deliveryRadios;
-    private deliveryRadioLabels;
     private loadingState;
     private scrollObserver;
     private initializationPromise;
-    private filterDebounceTimer;
-    private readonly FILTER_DEBOUNCE_MS;
-    private filterButton;
+    private unsubscribeFromState?;
     get hostClasses(): string[];
     constructor();
     protected connected(): Promise<void>;
-    disconnectedCallback(): void;
+    disconnected(): void;
     private initializeComponent;
-    protected template(): HTMLElement[];
+    private handleStateUpdate;
+    private updateLoadingState;
+    private hasProductsChanged;
+    private updateProductData;
+    private handleProductRendering;
+    private renderSimplifiedProducts;
     private setLoadingState;
     private renderCurrentState;
     private loadInitialProducts;
-    private updateFiltersComponent;
     private loadMoreProducts;
-    private mergeRetailers;
-    private updatePagination;
-    private buildApiParams;
-    private buildFiltersFromState;
-    private syncFiltersFromResponse;
-    private onFilterChange;
-    private resetPagination;
-    private updateFiltersUI;
-    private updatePersonalizedSwitch;
-    private updatePreOrderSwitch;
-    private updateDeliveryOptions;
-    private updateRadioLabel;
-    private isPersonalizationDisabled;
-    private isPreOrderDisabled;
-    private isSameDayDeliveryDisabled;
+    private buildCurrentFiltersFromState;
+    private mapStateFilterToComponentFilter;
     private createCardsContainer;
-    private getResponsiveColumns;
     private renderLoadingState;
     private renderProducts;
     private appendNewProducts;
     private createProductCard;
-    private filterSanitizedFilters;
-    private buildFiltersParams;
-    private createSearchContainer;
-    private createFiltersContainer;
-    private storeFilterElementReferences;
-    private openFiltersDrawer;
-    private createFilterButton;
+    private getResponsiveColumns;
     private setupInfiniteScroll;
     private createScrollSentinel;
     private updateSentinel;
@@ -79,6 +51,7 @@ export declare class ProductListComponent extends BaseComponent<IProductListComp
     private showErrorState;
     private clearCardsContainer;
     private cleanupScrollObserver;
-    onStoreWatch(changes: IOnStoreChanged[]): Promise<void>;
     private doCleanup;
+    onStoreWatch(changes: IOnStoreChanged[]): Promise<void>;
+    protected template(): HTMLElement[];
 }

package/dist/types/{enums/cloud.enum.d.ts → modules/product-list/product-list.constants.d.ts}

@@ -1,4 +1,4 @@
-export declare const ENUM_FILTER_KEYS: {
+export declare const FILTER_KEYS: {
     readonly BRANDS: "brands";
     readonly FLAVOR: "flavor";
     readonly FULFILLMENT: "fulfillment";
@@ -18,3 +18,22 @@ export declare const ENUM_FILTER_KEYS: {
     readonly MATERIALS: "materials";
     readonly COLLECTION_TAGS: "collectionTags";
 };
+export declare const FULFILLMENT_OPTIONS: {
+    readonly ALL: "all";
+    readonly SHIPPING: "shipping";
+    readonly ON_DEMAND: "onDemand";
+};
+export declare const PRICE_OPTIONS: {
+    readonly MIN: "0";
+    readonly MAX: "1000";
+};
+export declare const FILTER_VALUE_OPTIONS: {
+    readonly YES: "YES";
+    readonly NO: "NO";
+};
+export declare const FILTER_LOADING_STATE: {
+    readonly IDLE: "idle";
+    readonly LOADING_INITIAL: "loading_initial";
+    readonly LOADING_MORE: "loading_more";
+    readonly ERROR: "error";
+};

package/dist/types/modules/product-list/product-list.interface.d.ts

@@ -1,24 +1,24 @@
+import type { IProductFulfillmentStore, IProductSizeStore } from 'core/store/interfaces/product.interface';
 import type { IFilterValue } from '@/interfaces/api/product-list.interface';
+export interface IPriceConfig {
+    min?: string;
+    max?: string;
+}
 export interface IProductListFilters {
-    personalized: boolean;
-    preOrder: boolean;
-    deliveryOptions: 'all' | 'shipping' | 'onDemand';
-    price?: {
-        min?: string;
-        max?: string;
-    };
-    [key: string]: any;
+    price?: IPriceConfig;
+    [key: string]: boolean | string | string[] | IPriceConfig | undefined;
 }
 export interface IExtendedFilterSchema {
-    category: string;
+    type: string;
     values: IFilterValue[];
 }
 export interface IProductListSearch {
-    searchTerm?: string;
+    searchTerm: string;
 }
 export interface IPagination {
     currentPage: number;
     totalPages: number;
+    totalCount: number;
     hasMorePages: boolean;
 }
 export interface ICheckboxLabelStates {
@@ -31,20 +31,6 @@ export interface ICheckboxLabelStates {
     iconElement: HTMLElement | null;
     hasUserInteraction: boolean;
 }
-export interface ICurrentFilters {
-    personalized: boolean;
-    preOrder: boolean;
-    deliveryOptions: 'all' | 'shipping' | 'onDemand';
-    price?: {
-        min?: string;
-        max?: string;
-    };
-    [key: string]: any;
-}
-export interface IPriceConfig {
-    min: string;
-    max: string;
-}
 export interface ICreateCheckboxItemParams {
     filter: IExtendedFilterSchema;
     state: ICheckboxLabelStates;
@@ -75,3 +61,25 @@ export interface IRenderCheckboxItemsParams {
 export interface ICreateFiltersContainerParams {
     isDrawerMode?: boolean;
 }
+export interface IProductAvailabilityData {
+    hasAvailability: boolean;
+    upc: string;
+    fulfillmentId: string;
+    partNumber: string;
+    quantity: number;
+    state: string;
+    isPresale: boolean;
+    isPresaleActive: boolean;
+}
+export interface IProductVariantParams {
+    image: string;
+    name: string;
+    size: string | null;
+    price: number;
+    availability: IProductAvailabilityData;
+    hasPersonalization: boolean;
+    sizes: Record<string, IProductSizeStore>;
+    maxQuantityPerOrder: number;
+    shippingVariants: Record<string, IProductFulfillmentStore>;
+    onDemandVariants: Record<string, IProductFulfillmentStore>;
+}

package/dist/types/modules/product-list/styles/product-list-card.style.d.ts

@@ -0,0 +1 @@
+export declare const getProductListCardStyles: () => string;

package/dist/types/modules/product-list/styles/product-list-filters.style.d.ts

@@ -0,0 +1 @@
+export declare const getProductListFiltersStyles: () => string;

package/dist/types/modules/product-list/styles/register-styles.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/modules/theme-provider/constants/component-groupings.d.ts

@@ -3,3 +3,4 @@ export declare const productGroupComponents: ComponentType[];
 export declare const addressGroupComponents: ComponentType[];
 export declare const cartGroupComponents: ComponentType[];
 export declare const checkoutGroupComponents: ComponentType[];
+export declare const productListGroupComponent: ComponentType[];

package/dist/types/modules/theme-provider/constants/css-variable-mappings.d.ts

@@ -1,2 +1,2 @@
-export type StylesheetType = 'global' | 'ui' | 'product' | 'address' | 'cart' | 'checkout';
+export type StylesheetType = 'global' | 'ui' | 'product' | 'address' | 'cart' | 'checkout' | 'product-list';
 export declare function getCSSVariableMapping(componentPrefix: string): Record<string, string>;

package/dist/types/modules/theme-provider/services/style-registry.service.d.ts

@@ -0,0 +1,16 @@
+import type { StylesheetType } from '../constants/css-variable-mappings';
+export type StyleGetter = () => string;
+declare class StyleRegistryService {
+    private static instance;
+    private registry;
+    private constructor();
+    static getInstance(): StyleRegistryService;
+    register(type: StylesheetType, getter: StyleGetter, priority?: number): void;
+    getStyleGetters(type: StylesheetType): StyleGetter[];
+    getStyles(type: StylesheetType): string[];
+    hasStyles(type: StylesheetType): boolean;
+    getRegisteredTypes(): StylesheetType[];
+    clear(): void;
+}
+export declare const styleRegistry: StyleRegistryService;
+export { StyleRegistryService };

package/dist/types/modules/theme-provider/services/stylesheet-generator.service.d.ts

@@ -9,5 +9,4 @@ export declare class StylesheetGeneratorService {
     private createStylesheet;
     private isCSSStyleSheetSupported;
     updateVariablesInStylesheet(type: StylesheetType, themeConfig: any, prefix: string): void;
-    private getStylesheetStyles;
 }

package/dist/types/modules/theme-provider/styles/register-styles.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/modules/theme-provider/theme-provider.service.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentType } from '@/enums';
-import type { ConfigsKeyType, ConfigsType, IAllConfigs, UpdateAddressComponent, UpdateCartComponent, UpdateCheckoutComponent, UpdateComponentGlobalConfigs, UpdateProductComponent } from '@/interfaces/configs';
+import type { ConfigsKeyType, ConfigsType, IAllConfigs, UpdateAddressComponent, UpdateCartComponent, UpdateCheckoutComponent, UpdateComponentGlobalConfigs, UpdateProductComponent, UpdateProductListComponent } from '@/interfaces/configs';
 import { type GeneratedStylesheet } from './services/stylesheet-generator.service';
 export declare class ThemeProviderService {
     private data;
@@ -14,6 +14,7 @@ export declare class ThemeProviderService {
     updateAddressComponent(data: UpdateAddressComponent): void;
     updateCartComponent(data: UpdateCartComponent): void;
     updateCheckoutComponent(data: UpdateCheckoutComponent): void;
+    updateProductListComponent(data: UpdateProductListComponent): void;
     getConfigs<T = any>(type: ConfigsKeyType): T;
     getComponentConfig(componentType: ComponentType): ConfigsType | undefined;
     getStylesheet(componentType: ComponentType): GeneratedStylesheet[];

package/dist/types/modules/ui-components/engraving/engraving-form.component.d.ts

@@ -1,12 +1,14 @@
 import { BaseComponent } from '@/core/base-component.service';
+import type { IDisplayMode } from '@/interfaces/configs';
 export interface IEngravingFormComponentParams {
     identifier: string;
-    context: 'product' | 'cart';
+    context: 'product' | 'cart' | 'product-list';
     lines: string[];
     maxLines: number;
     maxCharsPerLine: number;
     fee: number;
     location?: string;
+    displayMode?: IDisplayMode;
 }
 export declare class EngravingFormComponent extends BaseComponent<IEngravingFormComponentParams, null> {
     get hostClasses(): string[];
@@ -20,6 +22,7 @@ export declare class EngravingFormComponent extends BaseComponent<IEngravingForm
     private calculateTotalPrice;
     private productInformationSection;
     private addToCartButtonText;
+    private getFulfillmentData;
     private retailersSection;
     private engravingLinesSection;
     private actionButtonsSection;

package/dist/types/modules/ui-components/input/index.d.ts

@@ -1,2 +1 @@
-export * from './birthdate-input.component';
 export * from './input.component';

package/dist/types/modules/ui-components/input/input.component.d.ts

@@ -5,9 +5,13 @@ export interface IInputValidation {
     max?: number;
     pattern?: string;
     customValidator?: (value: string) => string | null;
+    minYear?: number;
+    maxYear?: number;
+    minAge?: number;
+    maxAge?: number;
 }
 export interface IInputComponentParams {
-    inputType: 'text' | 'number' | 'email' | 'tel' | 'date';
+    inputType: 'text' | 'number' | 'email' | 'tel' | 'date' | 'birthdate';
     value?: string | null;
     placeholder?: string;
     className?: string;
@@ -31,6 +35,9 @@ export declare class InputComponent extends BaseComponent<IInputComponentParams,
     private validateEmail;
     private validateTel;
     private validateDate;
+    private parseDateString;
+    private calculateAge;
+    private validateDateConstraints;
     private isFieldComplete;
     private validateInput;
     private scheduleValidation;

package/dist/types/modules/ui-components/modal/modal.component.d.ts

@@ -0,0 +1,23 @@
+import { BaseComponent, type IOnStoreChanged } from '@/core/base-component.service';
+export declare class ModalComponent extends BaseComponent {
+    private isOpen;
+    private wrapperElement;
+    private modalElement;
+    private backdropElement;
+    private contentContainer;
+    private currentContentType;
+    private readonly boundHandleKeydown;
+    constructor();
+    disconnected(): void;
+    onStoreChanged(changes: IOnStoreChanged[]): boolean;
+    private openWithContent;
+    private open;
+    private close;
+    private cleanupCurrentContent;
+    private handleBackdropClick;
+    private handleKeydown;
+    private updateModalContentTypeClass;
+    private updateModalState;
+    private isElementsEnabled;
+    protected template(): HTMLElement;
+}

package/dist/types/modules/ui-components/styles/modal.style.d.ts

@@ -0,0 +1 @@
+export declare function getModalStyles(): string;

package/dist/types/modules/ui-components/ui.commands.d.ts

@@ -1,7 +1,9 @@
 import { BaseCommand } from '@/core/command/base-command.service';
-import type { IDrawerContentConfig } from '@/core/store/interfaces/core.interface';
+import type { IDrawerContentConfig, IModalContentConfig } from '@/core/store/interfaces/core.interface';
 export declare class UICommands extends BaseCommand {
     static getInstance(): UICommands;
     openDrawer(contentType: IDrawerContentConfig['type'], data?: Record<string, any>): void;
     closeDrawer(): void;
+    openModal(contentType: IModalContentConfig['type'], data?: Record<string, any>): void;
+    closeModal(): void;
 }

package/dist/types/static/icon/check.icon.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from './icon.types';
+export declare const CheckIcon: ({ width, height, className, color }: IconProps) => string;

package/dist/types/static/icon/index.d.ts

@@ -1,5 +1,6 @@
 export * from './arrow-right.icon';
 export * from './bag.icon';
+export * from './check.icon';
 export * from './checkbox.icon';
 export * from './chevron-down.icon';
 export * from './chevron-left.icon';

package/docs/ACTIONS.md

@@ -524,6 +524,7 @@ await actions.cart.resetCart();
 actions.checkout.openCheckout();
 actions.checkout.closeCheckout();
 actions.checkout.toggleCheckout();
+actions.checkout.exitCheckout();
 
 // Example: Open checkout automatically for high-value carts
 const cart = actions.cart.getDetails();

package/docs/CONFIGURATION.md

@@ -11,7 +11,10 @@ const client = await Elements('YOUR_API_KEY', {
   isBuilder: false,
   customTheme: {},
   proxy: {},
-  promoTicker: []
+  promoTicker: [],
+  checkout: {
+    pageUrl: 'https://yoursite.com/checkout?id={id}'  // Optional: hosted checkout
+  }
 });
 ```
 
@@ -262,6 +265,33 @@ activeUntil: '2025-12-31T23:59:59Z'
 
 **Note:** Only active promotions are displayed.
 
+### `checkout`
+
+**Type:** `object`
+**Default:** `undefined`
+
+Configuration for hosted checkout (external checkout page).
+
+```javascript
+checkout: {
+  pageUrl: 'https://yoursite.com/checkout?id={id}'
+}
+```
+
+**Properties:**
+
+#### `checkout.pageUrl`
+
+**Type:** `string` (required)
+
+URL of your dedicated checkout page. The `{id}` placeholder is replaced with the checkout token.
+
+```javascript
+pageUrl: 'https://yoursite.com/checkout?id={id}'
+```
+
+When set, the "Go to Checkout" button in the cart redirects to this URL instead of opening the checkout drawer.
+
 ## Auto-Initialization Configuration
 
 When using auto-initialization, configure via `data-` attributes on the script tag.
@@ -376,6 +406,28 @@ data-cart-badge-button=""                   <!-- Empty value = floating button w
 - `replace:` - Replace the target element
 - `inside:` - Place inside the target element (default)
 
+#### `data-cart-mobile-button`
+
+**Type:** `string`
+
+Mobile-specific cart button (no badge). Same syntax as `data-cart-button` but only shown on mobile devices.
+
+```html
+data-cart-mobile-button="below:.mobile-header"
+data-cart-mobile-button="inside:.mobile-nav"
+```
+
+#### `data-cart-mobile-badge-button`
+
+**Type:** `string`
+
+Mobile-specific cart button with item count badge. Same syntax as `data-cart-badge-button` but only shown on mobile devices.
+
+```html
+data-cart-mobile-badge-button="below:.mobile-header"
+data-cart-mobile-badge-button="inside:.mobile-nav"
+```
+
 #### `data-cart-button-hidden`
 
 **Type:** flag (no value)
@@ -517,11 +569,9 @@ data-product-2="00832889005513"
 
 ```html
 <div data-liquid-commerce-elements-products-list
-     data-card="standard"
      data-rows="3"
      data-columns="4"
-     data-card-fill
-     data-filters="personalization,pre-order,delivery-options"
+     data-filters="engraving,presale,fulfillment,price,brands"
      data-product-url="/product/{upc}">
 </div>
 ```
@@ -534,23 +584,12 @@ data-product-2="00832889005513"
 
 Enables product list on this div element.
 
-##### `data-card`
-
-**Type:** `'standard'`  
-**Default:** `'standard'`
-
-Card variant style.
-
-```html
-data-card="standard"
-```
-
 ##### `data-rows`
 
-**Type:** `number`  
+**Type:** `number`
 **Default:** `3`
 
-Number of rows to display per page.
+Number of rows to display per page (1-10).
 
 ```html
 data-rows="4"
@@ -558,39 +597,40 @@ data-rows="4"
 
 ##### `data-columns`
 
-**Type:** `number`  
+**Type:** `number`
 **Default:** `4`
 
-Number of columns in the grid.
+Number of columns in the grid (1-4).
 
 ```html
 data-columns="4"
 ```
 
-##### `data-card-fill`
-
-**Type:** flag (no value)
-
-Whether cards should fill the whole card with white background color to match the image background color.
-
-```html
-data-card-fill
-```
-
 ##### `data-filters`
 
 **Type:** `string` (comma-separated)
 
-Filter types to enable: `personalization`, `pre-order`, `delivery-options`.
+Filter types to enable.
 
 ```html
-data-filters="personalization,pre-order,delivery-options"
+data-filters="engraving,presale,fulfillment,price,brands"
 ```
 
 **Available filters:**
-- `personalization` - Show filter for personalized/engravable products
-- `pre-order` - Show filter for pre-order products
-- `delivery-options` - Show filter for delivery type (all, shipping, onDemand)
+- `engraving` - Show filter for personalized/engravable products
+- `presale` - Show filter for pre-order products
+- `fulfillment` - Show filter for delivery type (shipping, onDemand)
+- `price` - Show price range filter
+- `brands` - Show brand filter
+- `categories` - Show category filter
+- `flavor` - Show flavor filter
+- `region` - Show region filter
+- `variety` - Show variety filter
+- `vintage` - Show vintage year filter
+- `country` - Show country filter
+- `appellation` - Show appellation filter
+- `materials` - Show materials filter
+- `sizes` - Show size filter
 
 ##### `data-product-url`
 
@@ -607,6 +647,60 @@ data-product-url="/products/{grouping}"
 - `{upc}` - Replaced with product UPC
 - `{grouping}` - Replaced with Salsify grouping ID
 
+### Product List Search and Filters Containers
+
+You can place search and filter components in separate containers:
+
+```html
+<!-- Search bar (any div) -->
+<div data-search-container></div>
+
+<!-- Filter panel (any div) -->
+<div data-filters-container></div>
+```
+
+These work alongside the main `data-liquid-commerce-elements-products-list` container. The search and filter components communicate with the product list automatically.
+
+### Checkout URL Configuration
+
+#### `data-checkout-url`
+
+**Type:** `string`
+
+URL for hosted checkout page. The `{id}` placeholder is replaced with the checkout token.
+
+```html
+data-checkout-url="https://yoursite.com/checkout?id={id}"
+```
+
+When set, the "Go to Checkout" button in the cart redirects to this URL instead of opening the checkout drawer.
+
+### Custom Cart Elements
+
+#### `data-lce-cart-toggle-button`
+
+**Type:** flag (no value)
+
+Add to any element to make it toggle the cart open/closed on click.
+
+```html
+<button data-lce-cart-toggle-button>Open Cart</button>
+```
+
+#### `data-lce-cart-items-count`
+
+**Type:** `string` (optional value: `"keep-zero"`)
+
+Displays the current cart item count inside the element. Updated automatically.
+
+```html
+<!-- Hides when count is 0 -->
+<span data-lce-cart-items-count></span>
+
+<!-- Always shows count, even when 0 -->
+<span data-lce-cart-items-count="keep-zero">0</span>
+```
+
 ### URL Parameter Configuration
 
 #### `data-product-param`
@@ -692,6 +786,51 @@ data-promo-active-from="2025-01-01T00:00:00Z"
 data-promo-active-until="2025-12-31T23:59:59Z"
 ```
 
+## Checkout-Only Build (Hosted Checkout)
+
+For hosted checkout pages, use the checkout-only build for a smaller bundle.
+
+### Auto-Initialization
+
+```html
+<script
+  data-liquid-commerce-checkout
+  data-token="YOUR_API_KEY"
+  data-env="production"
+  data-debug-mode="none"
+  src="https://assets-elements.liquidcommerce.us/checkout/elements.js"
+></script>
+```
+
+**Attributes:**
+- `data-liquid-commerce-checkout` - Enables checkout-only auto-initialization (required)
+- `data-token` - Your API key (required)
+- `data-env` - Environment: `production`, `staging`, `development`
+- `data-debug-mode` - Debug mode: `console`, `panel`
+- `data-checkout-url` - Checkout page URL (for redirect behavior)
+
+### Programmatic Initialization
+
+```javascript
+import { ElementsCheckout } from '@liquidcommerce/elements-sdk/checkout';
+
+const client = await ElementsCheckout('YOUR_API_KEY', {
+  env: 'production'
+});
+
+const component = await client.injectCheckout({
+  containerId: 'checkout-container',
+  checkoutId: 'checkout-token-from-url',  // Optional: checkout token
+  hideHeader: true                  // Optional
+});
+```
+
+**Differences from full SDK:**
+- Smaller bundle (tree-shaken, no product/cart/PLP components)
+- Only `injectCheckout()` method available (no `injectProductElement`, `injectCartElement`, etc.)
+- Checkout actions only (no `openCheckout`/`closeCheckout`/`toggleCheckout` drawer controls)
+- Same theming, events, and configuration system
+
 ## TypeScript Types
 
 ### `ILiquidCommerceElementsConfig`
@@ -704,6 +843,11 @@ interface ILiquidCommerceElementsConfig {
   customTheme?: IClientCustomThemeConfig;
   proxy?: IElementsProxyConfig;
   promoTicker?: IPromoTicker[];
+  checkout?: ILiquidCommerceElementsCheckoutConfig;
+}
+
+interface ILiquidCommerceElementsCheckoutConfig {
+  pageUrl: string; // URL with {id} placeholder for checkout token
 }
 ```