@liquidcommerce/elements-sdk 2.6.0-beta.2 → 2.6.0-beta.4

package/dist/types/modules/product/product.commands.d.ts

@@ -2,7 +2,7 @@ import { BaseCommand } from '@/core/command/base-command.service';
 import type { IBaseProductEventData } from '@/core/pubsub/interfaces/product.interface';
 import type { IProductDrawerContentConfig } from '@/core/store/interfaces/product.interface';
 import { type FulfillmentType } from '@/enums';
-import type { IProductData } from '@/interfaces/cloud';
+import type { IProductAvailabilityResponse } from '@/interfaces/api/product.interface';
 import { type AddItemParams } from '@/modules/cart/cart.commands';
 export declare class ProductCommands extends BaseCommand {
     private readonly uiCommands;
@@ -11,7 +11,7 @@ export declare class ProductCommands extends BaseCommand {
     static getInstance(): ProductCommands;
     createProductInstance(productId: string, firstTime?: boolean): Promise<void>;
     loadMultipleProducts(productIds: string[]): Promise<void>;
-    loadProduct(productId: string, customProductData?: IProductData | null): Promise<void>;
+    loadProduct(productId: string, customProductData?: IProductAvailabilityResponse | null): Promise<void>;
     selectSize(productId: string, sizeId: string): Promise<void>;
     selectFulfillment(productId: string, selectedFulfillmentId: string): Promise<void>;
     updateQuantity(productId: string, delta: number): Promise<void>;

package/dist/types/modules/product-list/components/index.d.ts

@@ -1,3 +1,5 @@
 export * from './product-list-card.component';
 export * from './product-list-card-loading.component';
 export * from './product-list-filters.component';
+export * from './product-list-filters-subcomponents';
+export * from './product-list-filters-subcomponents/product-list-apply-filter-button.component';

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

@@ -1,5 +1,6 @@
 import { BaseComponent } from '@/core/base-component.service';
-import type { IProduct, IRetailerFulfillments } from '@/interfaces/cloud';
+import type { IProduct } from '@/interfaces/api/product.interface';
+import type { IRetailerFulfillments } from '@/interfaces/cloud';
 import type { ProductListCardVariantType } from '@/interfaces/core.interface';
 export interface IProductListCardParams {
     variant: ProductListCardVariantType;

package/dist/types/modules/product-list/components/product-list-filters-subcomponents/index.d.ts

@@ -0,0 +1,6 @@
+export * from './product-list-apply-filter-button.component';
+export * from './product-list-checkbox-filter.components';
+export * from './product-list-delivery-options-filter.components';
+export * from './product-list-price-filter.components';
+export * from './product-list-search.component';
+export * from './product-list-toggle-filters.components';

package/dist/types/modules/product-list/components/product-list-filters-subcomponents/product-list-apply-filter-button.component.d.ts

@@ -0,0 +1 @@
+export declare function createApplyFiltersButton(onCloseDrawer: VoidFunction): HTMLElement;

package/dist/types/modules/product-list/components/product-list-filters-subcomponents/product-list-checkbox-filter.components.d.ts

@@ -0,0 +1,7 @@
+import type { ICheckboxLabelStates, ICreateCheckboxFilterHeaderParams, ICreateCheckboxFilterSearchContainerParams, ICreateCheckboxItemParams, IHandleCheckboxFilterSearchParams, IRenderCheckboxItemsParams } from '../../product-list.interface';
+export declare function createCheckboxItem(params: ICreateCheckboxItemParams): HTMLElement;
+export declare function handleCheckboxFilterSearch(params: IHandleCheckboxFilterSearchParams): void;
+export declare function createCheckboxFilterHeader(params: ICreateCheckboxFilterHeaderParams): HTMLElement;
+export declare function createCheckboxFilterSearchContainer(params: ICreateCheckboxFilterSearchContainerParams): HTMLElement;
+export declare function renderCheckboxItems(params: IRenderCheckboxItemsParams): void;
+export declare function updateFilterExpandState(state: ICheckboxLabelStates): void;

package/dist/types/modules/product-list/components/product-list-filters-subcomponents/product-list-delivery-options-filter.components.d.ts

@@ -0,0 +1,16 @@
+export interface ICreateDeliveryOptionsFilterParams {
+    currentFilters?: {
+        deliveryOptions?: string;
+        personalized?: boolean;
+        preOrder?: boolean;
+    };
+    deliveryCollapsed: boolean;
+    isSameDayDeliveryDisabled: boolean;
+    onDeliveryOptionsChange?: (value: 'all' | 'shipping' | 'onDemand') => void;
+    onToggleCollapse: () => void;
+}
+export declare function createDeliveryOptionsFilter(params: ICreateDeliveryOptionsFilterParams): {
+    elements: HTMLElement[];
+    chevronContainer: HTMLElement;
+    deliveryOptionsList: HTMLElement;
+};

package/dist/types/modules/product-list/components/product-list-filters-subcomponents/product-list-price-filter.components.d.ts

@@ -0,0 +1,22 @@
+export interface ICreatePriceFilterParams {
+    priceConfig?: {
+        min?: string;
+        max?: string;
+    };
+    currentFilters?: {
+        price?: {
+            min?: string;
+            max?: string;
+        };
+    };
+    priceCollapsed: boolean;
+    onPriceChange?: (min: string, max: string) => void;
+    onToggleCollapse: () => void;
+    DEFAULT_MIN: string;
+    DEFAULT_MAX: string;
+}
+export declare function createPriceFilter(params: ICreatePriceFilterParams): {
+    elements: HTMLElement[];
+    chevronContainer: HTMLElement;
+    sliderContainer: HTMLElement;
+};

package/dist/types/modules/product-list/components/product-list-filters-subcomponents/product-list-search.component.d.ts

@@ -0,0 +1,16 @@
+import { BaseComponent } from '@/core/base-component.service';
+export interface IProductListSearchParams {
+    searchTerm?: string;
+    handleInputChange?: (search: string) => void;
+    clearSearch?: VoidFunction;
+}
+export declare class ProductListSearchComponent extends BaseComponent<IProductListSearchParams> {
+    private searchInput?;
+    private clearButton?;
+    private readonly ALLOWED_CHARACTERS;
+    private readonly MAX_LENGTH;
+    get hostClasses(): string[];
+    protected template(): HTMLElement[];
+    private sanitizeInput;
+    private updateClearButtonVisibility;
+}

package/dist/types/modules/product-list/components/product-list-filters-subcomponents/product-list-toggle-filters.components.d.ts

@@ -0,0 +1,18 @@
+export interface ICreatePersonalizedFilterParams {
+    currentFilters?: {
+        personalized?: boolean;
+        deliveryOptions?: string;
+    };
+    isPersonalizationDisabled: boolean;
+    onPersonalizedChange?: (enabled: boolean) => void;
+}
+export interface ICreatePreOrderFilterParams {
+    currentFilters?: {
+        preOrder?: boolean;
+        deliveryOptions?: string;
+    };
+    isPreOrderDisabled: boolean;
+    onPreOrderChange?: (enabled: boolean) => void;
+}
+export declare function createPersonalizedFilter(params: ICreatePersonalizedFilterParams): HTMLElement[];
+export declare function createPreOrderFilter(params: ICreatePreOrderFilterParams): HTMLElement[];

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

@@ -1,21 +1,43 @@
 import { BaseComponent } from '@/core/base-component.service';
+import type { ICurrentFilters, IExtendedFilterSchema, IPriceConfig } from '../product-list.interface';
 export interface IProductListFiltersParams {
     enablePersonalized: boolean;
     enablePreOrder: boolean;
     enableDeliveryOptions: boolean;
+    sanitizedFilters?: IExtendedFilterSchema[];
+    currentFilters?: ICurrentFilters;
+    priceConfig?: IPriceConfig;
+    isDrawerMode?: boolean;
     onPersonalizedChange?: (enabled: boolean) => void;
     onPreOrderChange?: (enabled: boolean) => void;
     onDeliveryOptionsChange?: (value: 'all' | 'shipping' | 'onDemand') => void;
-    currentFilters?: {
-        personalized: boolean;
-        preOrder: boolean;
-        deliveryOptions: 'all' | 'shipping' | 'onDemand';
-    };
+    onPriceChange?: (min: string, max: string) => void;
+    onCheckboxFilterChange?: (bucket: string, selectedValues: string[]) => void;
+    onApplyFilters?: () => void;
 }
 export declare class ProductListFiltersComponent extends BaseComponent<IProductListFiltersParams> {
+    private priceCollapsed;
+    private deliveryCollapsed;
+    private checkboxFilterStates;
+    private readonly DEFAULT_MIN;
+    private readonly DEFAULT_MAX;
+    private priceChevronContainer?;
+    private priceSliderContainer?;
+    private deliveryChevronContainer?;
+    private deliveryOptionsList?;
     get hostClasses(): string[];
     private isSameDayDeliveryDisabled;
     private isPersonalizationDisabled;
     private isPreOrderDisabled;
+    private createPersonalizedFilterWrapper;
+    private createPreOrderFilterWrapper;
+    private createDeliveryOptionsFilterWrapper;
+    private toggleDeliveryCollapse;
+    private createPriceFilterWrapper;
+    private togglePriceCollapse;
+    private createCheckboxFilter;
+    private renderCheckboxItemsWrapper;
+    private handleCheckboxChange;
+    private toggleCheckboxFilter;
     protected template(): HTMLElement[];
 }

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

@@ -1,5 +1,6 @@
 import { BaseCommand } from '@/core/command/base-command.service';
-import type { ICatalog, ICatalogParams, IProduct } from '@/interfaces/cloud';
+import type { IProduct } from '@/interfaces/api/product.interface';
+import type { ICatalog, ICatalogParams } from '@/interfaces/cloud';
 import { type AddItemParams } from '@/modules/cart/cart.commands';
 export declare class ProductListCommands extends BaseCommand {
     private readonly uiCommands;

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

@@ -8,18 +8,16 @@ export interface IProductListComponentParams {
     filters: ProductListFilterType[];
     productUrl?: string;
 }
-export interface IProductListFilters {
-    personalized: boolean;
-    preOrder: boolean;
-    deliveryOptions: 'all' | 'shipping' | 'onDemand';
-}
 export declare class ProductListComponent extends BaseComponent<IProductListComponentParams> {
     private products;
     private retailers;
     private pagination;
+    private sanitizedFilters;
+    private searchFilter;
     private currentFilters;
     private cardsContainer;
     private filtersContainer;
+    private searchContainer;
     private sentinelElement;
     private personalizedSwitch;
     private preOrderSwitch;
@@ -28,6 +26,9 @@ export declare class ProductListComponent extends BaseComponent<IProductListComp
     private loadingState;
     private scrollObserver;
     private initializationPromise;
+    private filterDebounceTimer;
+    private readonly FILTER_DEBOUNCE_MS;
+    private filterButton;
     get hostClasses(): string[];
     constructor();
     protected connected(): Promise<void>;
@@ -36,7 +37,10 @@ export declare class ProductListComponent extends BaseComponent<IProductListComp
     protected template(): HTMLElement[];
     private setLoadingState;
     private renderCurrentState;
+    private sanitizeFilterValues;
+    private processResponseFilters;
     private loadInitialProducts;
+    private updateFiltersComponent;
     private loadMoreProducts;
     private mergeRetailers;
     private updatePagination;
@@ -58,8 +62,13 @@ export declare class ProductListComponent extends BaseComponent<IProductListComp
     private renderProducts;
     private appendNewProducts;
     private createProductCard;
+    private filterSanitizedFilters;
+    private buildFiltersParams;
+    private createSearchContainer;
     private createFiltersContainer;
     private storeFilterElementReferences;
+    private openFiltersDrawer;
+    private createFilterButton;
     private setupInfiniteScroll;
     private createScrollSentinel;
     private updateSentinel;

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

@@ -0,0 +1,80 @@
+import type { IFilterValue } from 'enums';
+export interface IProductListFilters {
+    personalized: boolean;
+    preOrder: boolean;
+    deliveryOptions: 'all' | 'shipping' | 'onDemand';
+    price?: {
+        min?: string;
+        max?: string;
+    };
+    [key: string]: any;
+}
+export interface IExtendedFilterValue extends IFilterValue {
+    formattedValue?: string;
+}
+export interface IExtendedFilterSchema {
+    bucket: string;
+    values: IExtendedFilterValue[];
+}
+export interface IProductListSearch {
+    searchTerm?: string;
+}
+export interface IPagination {
+    currentPage: number;
+    totalPages: number;
+    hasMorePages: boolean;
+}
+export interface ICheckboxLabelStates {
+    isExpanded: boolean;
+    selectedValues: Set<string>;
+    searchInput: HTMLInputElement | null;
+    checkboxList: HTMLElement | null;
+    filteredItems: IExtendedFilterValue[];
+    contentElement: HTMLElement | null;
+    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;
+    item: IExtendedFilterValue;
+    onChange: VoidFunction;
+}
+export interface IHandleCheckboxFilterSearchParams {
+    filter: IExtendedFilterSchema;
+    state: ICheckboxLabelStates;
+    searchTerm: string;
+    renderCheckboxItems: VoidFunction;
+}
+export interface ICreateCheckboxFilterHeaderParams {
+    filter: IExtendedFilterSchema;
+    state: ICheckboxLabelStates;
+    onToggle: (bucket: string) => void;
+}
+export interface ICreateCheckboxFilterSearchContainerParams {
+    filter: IExtendedFilterSchema;
+    state: ICheckboxLabelStates;
+    onSearch: (searchTerm: string) => void;
+}
+export interface IRenderCheckboxItemsParams {
+    filter: IExtendedFilterSchema;
+    state: ICheckboxLabelStates;
+    onCheckboxChange: (value: string, checked: boolean) => void;
+}
+export interface ICreateFiltersContainerParams {
+    isDrawerMode?: boolean;
+}

package/dist/types/static/icon/chevron-up.icon.d.ts

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

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

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

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

@@ -3,6 +3,7 @@ export * from './bag.icon';
 export * from './checkbox.icon';
 export * from './chevron-down.icon';
 export * from './chevron-left.icon';
+export * from './chevron-up.icon';
 export * from './close.icon';
 export * from './error-info.icon';
 export * from './icon.types';

package/package.json

@@ -3,7 +3,7 @@
   "description": "LiquidCommerce Elements SDK",
   "license": "UNLICENSED",
   "author": "LiquidCommerce Team",
-  "version": "2.6.0-beta.2",
+  "version": "2.6.0-beta.4",
   "homepage": "https://docs.liquidcommerce.co/elements-sdk",
   "repository": {
     "type": "git",
@@ -53,8 +53,7 @@
     "check": "pnpm biome check --write .",
     "fl": "pnpm check && pnpm build:dev",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
-    "clean": "rm -rf dist umd",
-    "clean:hard": "rm -rf dist umd node_modules && pnpm install && pnpm build",
+    "clean": "rm -rf dist umd node_modules && pnpm install && pnpm build",
     "prepublishOnly": "pnpm run build",
     "deprecate:old": "npm deprecate @liquidcommerceteam/elements-sdk@\"*\" \"Package moved to @liquidcommerce/elements-sdk\"",
     "prepare": "husky"