@liquidcommerce/elements-sdk 2.2.0-beta.16 → 2.2.0-beta.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/index.esm.js +8230 -7691
  2. package/dist/types/core/client/client-config.service.d.ts +4 -3
  3. package/dist/types/core/debug-panel/debug-panel.service.d.ts +43 -0
  4. package/dist/types/core/debug-panel/debug-panel.styles.d.ts +1 -0
  5. package/dist/types/enums/debug.enum.d.ts +6 -0
  6. package/dist/types/enums/index.d.ts +1 -0
  7. package/dist/types/interfaces/core.interface.d.ts +2 -2
  8. package/dist/types/modules/cart/cart.commands.d.ts +1 -0
  9. package/dist/types/modules/product/product.commands.d.ts +1 -0
  10. package/package.json +1 -1
  11. package/umd/elements.js +1 -1
package/dist/types/core/client/client-config.service.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { type ElementsEnv } from '@/enums';
1
+ import { type DebugMode, type ElementsEnv } from '@/enums';
2
2
  import type { IPromoTicker } from '@/interfaces/configs';
3
3
  import type { IClientCustomThemeConfig, IElementsProxyConfig } from '@/interfaces/core.interface';
4
4
  export type DeviceType = 'desktop' | 'tablet' | 'mobile';
@@ -6,7 +6,7 @@ export interface IClientConfigs {
6
6
  apiKey: string;
7
7
  env: ElementsEnv;
8
8
  isBuilder: boolean;
9
- enableDebugging: boolean;
9
+ debugMode: DebugMode;
10
10
  baseUrl: string;
11
11
  partnerCode?: string;
12
12
  customTheme: IClientCustomThemeConfig | null;
@@ -21,7 +21,7 @@ export interface IClientConfigs {
21
21
  export interface IClientConfigInput {
22
22
  env?: ElementsEnv;
23
23
  isBuilder?: boolean;
24
- enableDebugging?: boolean;
24
+ debugMode?: DebugMode;
25
25
  customTheme?: IClientCustomThemeConfig;
26
26
  proxy?: IElementsProxyConfig;
27
27
  promoTicker?: IPromoTicker[];
@@ -38,6 +38,7 @@ export declare class ClientConfigService {
38
38
  isProduction(): boolean;
39
39
  isBuilder(): boolean;
40
40
  isDebuggingEnabled(): boolean;
41
+ isDebugPanelEnabled(): boolean;
41
42
  debuggingDisabled(): boolean;
42
43
  hasCustomTheme(): boolean;
43
44
  isMobile(): boolean;
package/dist/types/core/debug-panel/debug-panel.service.d.ts ADDED
@@ -0,0 +1,43 @@
1
+ export interface IDebugLogEntry {
2
+ id: string;
3
+ timestamp: number;
4
+ type: 'event' | 'gtm' | 'logger';
5
+ level: 'debug' | 'info' | 'warn' | 'error';
6
+ message: string;
7
+ data?: any;
8
+ context?: string;
9
+ }
10
+ export declare class DebugPanelService {
11
+ private panelElement;
12
+ private panelContainer;
13
+ private floatingButton;
14
+ private logContainer;
15
+ private logs;
16
+ private isVisible;
17
+ private showEvents;
18
+ private showGtmEvents;
19
+ private showLogs;
20
+ static getInstance(): DebugPanelService;
21
+ initialize(): void;
22
+ toggleVisibility(): void;
23
+ destroy(): void;
24
+ private interceptLoggerService;
25
+ private interceptLoggerInstance;
26
+ private interceptPubSubEvents;
27
+ private interceptGtmEvents;
28
+ private addLogEntry;
29
+ private renderLogs;
30
+ private clearLogs;
31
+ private createPanel;
32
+ private createPanelContent;
33
+ private createHeader;
34
+ private createToggles;
35
+ private createResizeHandle;
36
+ private setupShadowEventListeners;
37
+ private createFloatingButton;
38
+ private showPanelContent;
39
+ private hidePanelContent;
40
+ private createLogElement;
41
+ private formatJsonData;
42
+ private escapeHtml;
43
+ }
package/dist/types/core/debug-panel/debug-panel.styles.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const DEBUG_PANEL_STYLES = "\n :host {\n position: fixed;\n z-index: 2147483647;\n display: block;\n }\n\n .panel {\n position: relative;\n background: rgba(15, 23, 42, 0.95);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(148, 163, 184, 0.2);\n border-radius: 12px;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;\n font-size: 12px;\n color: #e2e8f0;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n user-select: none;\n transition: all 0.2s ease;\n width: 100%;\n height: 100%;\n }\n\n .panel:hover {\n border-color: rgba(148, 163, 184, 0.4);\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);\n }\n\n .header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n border-bottom: 1px solid rgba(148, 163, 184, 0.2);\n background: rgba(30, 41, 59, 0.5);\n cursor: move;\n }\n\n .icon {\n font-size: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n }\n\n .title-container {\n display: flex;\n flex-direction: column;\n gap: 2px;\n flex: 1;\n margin: 0 12px;\n }\n\n .title {\n font-weight: 600;\n color: #f1f5f9;\n font-size: 13px;\n }\n\n\n .subtitle {\n font-size: 10px;\n color: #94a3b8;\n }\n\n .minimize {\n background: none;\n border: none;\n color: #94a3b8;\n font-size: 18px;\n cursor: pointer;\n padding: 4px;\n border-radius: 4px;\n transition: all 0.2s ease;\n line-height: 1;\n font-weight: bold;\n }\n\n .minimize:hover {\n background: rgba(148, 163, 184, 0.1);\n color: #cbd5e1;\n }\n\n .toggles {\n display: flex;\n gap: 12px;\n padding: 8px 16px;\n border-bottom: 1px solid rgba(148, 163, 184, 0.2);\n background: rgba(30, 41, 59, 0.3);\n align-items: center;\n }\n\n .toggle {\n display: flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n font-size: 11px;\n color: #cbd5e1;\n transition: color 0.2s ease;\n }\n\n .toggle:hover {\n color: #f1f5f9;\n }\n\n .toggle input[type=\"checkbox\"] {\n width: 12px;\n height: 12px;\n accent-color: #3b82f6;\n cursor: pointer;\n }\n\n .clear-btn {\n background: none;\n border: none;\n color: #ef4444;\n font-size: 14px;\n padding: 0;\n cursor: pointer;\n transition: all 0.2s ease;\n margin-left: auto;\n min-width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .clear-btn:hover {\n transform: scale(1.1);\n color: #dc2626;\n }\n\n .logs {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 8px;\n background: rgba(15, 23, 42, 0.8);\n min-height: 0;\n max-height: 100%;\n }\n\n .log-entry {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 8px 12px;\n margin-bottom: 2px;\n border-radius: 6px;\n font-size: 11px;\n line-height: 1.4;\n transition: background-color 0.2s ease;\n user-select: text;\n }\n\n .log-entry:hover {\n background-color: rgba(148, 163, 184, 0.1);\n }\n\n /* Event type background colors */\n .log-entry.event {\n background: rgba(59, 130, 246, 0.1);\n }\n\n .log-entry.action {\n background: rgba(16, 185, 129, 0.1);\n }\n\n .log-entry.gtm {\n background: rgba(245, 158, 11, 0.1);\n }\n\n .log-entry.logger {\n background: rgba(139, 92, 246, 0.1);\n }\n\n\n .log-meta {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 2px;\n min-width: 50px;\n }\n\n .log-type {\n font-weight: 600;\n font-size: 9px;\n padding: 2px 0;\n border-radius: 3px;\n white-space: nowrap;\n text-align: center;\n line-height: 1;\n font-weight: bold;\n letter-spacing: 0.5px;\n }\n\n .log-timestamp {\n color: #64748b;\n font-size: 9px;\n white-space: nowrap;\n line-height: 1;\n }\n\n .log-type.event {\n background: rgba(59, 130, 246, 0.2);\n color: #60a5fa;\n }\n\n .log-type.action {\n color: #34d399;\n }\n\n .log-type.gtm {\n color: #fbbf24;\n }\n\n .log-type.logger {\n color: #a78bfa;\n }\n\n .log-message {\n flex: 1;\n word-break: break-word;\n user-select: text;\n }\n\n .log-context {\n color: #94a3b8;\n font-size: 10px;\n margin-top: 2px;\n font-style: italic;\n }\n\n .log-data {\n background: rgba(30, 41, 59, 0.6);\n border: 1px solid rgba(148, 163, 184, 0.2);\n border-radius: 4px;\n padding: 8px;\n margin-top: 6px;\n font-size: 10px;\n color: #cbd5e1;\n max-height: 120px;\n overflow-y: auto;\n font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;\n user-select: text;\n }\n\n .log-data pre {\n margin: 0;\n white-space: pre-wrap;\n word-break: break-word;\n }\n\n .resize-handle {\n position: absolute;\n bottom: 0;\n right: 0;\n width: 12px;\n height: 12px;\n background: linear-gradient(-45deg, transparent 30%, rgba(148, 163, 184, 0.3) 30%, rgba(148, 163, 184, 0.3) 70%, transparent 70%);\n cursor: nw-resize;\n border-radius: 0 0 12px 0;\n }\n\n .resize-handle:hover {\n background: linear-gradient(-45deg, transparent 30%, rgba(148, 163, 184, 0.7) 30%, rgba(148, 163, 184, 0.7) 70%, transparent 70%);\n transform: scale(1.1);\n }\n\n .resize-handle:active {\n background: linear-gradient(-45deg, transparent 30%, rgba(148, 163, 184, 0.9) 30%, rgba(148, 163, 184, 0.9) 70%, transparent 70%);\n }\n\n /* Scrollbar styling */\n .logs::-webkit-scrollbar {\n width: 6px;\n }\n\n .logs::-webkit-scrollbar-track {\n background: rgba(30, 41, 59, 0.3);\n border-radius: 3px;\n }\n\n .logs::-webkit-scrollbar-thumb {\n background: rgba(148, 163, 184, 0.3);\n border-radius: 3px;\n }\n\n .logs::-webkit-scrollbar-thumb:hover {\n background: rgba(148, 163, 184, 0.5);\n }\n\n .log-data::-webkit-scrollbar {\n width: 4px;\n }\n\n .log-data::-webkit-scrollbar-track {\n background: rgba(30, 41, 59, 0.3);\n border-radius: 2px;\n }\n\n .log-data::-webkit-scrollbar-thumb {\n background: rgba(148, 163, 184, 0.3);\n border-radius: 2px;\n }\n\n .log-data::-webkit-scrollbar-thumb:hover {\n background: rgba(148, 163, 184, 0.5);\n }\n\n /* Floating button styles */\n .floating-btn {\n position: absolute;\n top: 20px;\n left: 20px;\n width: 40px;\n height: 40px;\n background: rgba(15, 23, 42, 0.95);\n border: 1px solid rgba(148, 163, 184, 0.2);\n border-radius: 50%;\n display: none;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n font-size: 18px;\n user-select: none;\n z-index: 1;\n }\n\n .floating-btn:hover {\n background: rgba(30, 41, 59, 0.95);\n border-color: rgba(148, 163, 184, 0.4);\n }\n\n /* Mobile Responsiveness */\n @media (max-width: 768px) {\n .panel {\n font-size: 11px;\n border-radius: 8px;\n }\n\n .header {\n padding: 8px 12px;\n }\n\n .title {\n font-size: 12px;\n }\n\n .subtitle {\n font-size: 9px;\n }\n\n .toggles {\n padding: 6px 12px;\n gap: 8px;\n flex-wrap: wrap;\n }\n\n .toggle {\n font-size: 10px;\n }\n\n .toggle input[type=\"checkbox\"] {\n width: 10px;\n height: 10px;\n }\n\n .logs {\n padding: 6px;\n }\n\n .log-entry {\n padding: 6px 8px;\n font-size: 10px;\n }\n\n .log-type {\n font-size: 8px;\n }\n\n .log-timestamp {\n font-size: 8px;\n }\n\n .log-data {\n font-size: 9px;\n padding: 6px;\n max-height: 80px;\n }\n\n .floating-btn {\n width: 36px;\n height: 36px;\n font-size: 16px;\n top: 15px;\n left: 15px;\n }\n }\n\n @media (max-width: 480px) {\n .panel {\n font-size: 10px;\n border-radius: 6px;\n }\n\n .header {\n padding: 6px 10px;\n }\n\n .title {\n font-size: 11px;\n }\n\n .subtitle {\n font-size: 8px;\n }\n\n .toggles {\n padding: 4px 10px;\n gap: 6px;\n }\n\n .toggle {\n font-size: 9px;\n }\n\n .logs {\n padding: 4px;\n }\n\n .log-entry {\n padding: 4px 6px;\n font-size: 9px;\n gap: 4px;\n }\n\n .log-meta {\n min-width: 40px;\n }\n\n .log-type {\n font-size: 7px;\n }\n\n .log-timestamp {\n font-size: 7px;\n }\n\n .log-data {\n font-size: 8px;\n padding: 4px;\n max-height: 60px;\n }\n\n .floating-btn {\n width: 32px;\n height: 32px;\n font-size: 14px;\n top: 10px;\n left: 10px;\n }\n }\n";
package/dist/types/enums/debug.enum.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ export declare const DEBUG_MODE: {
2
+ readonly NONE: "none";
3
+ readonly CONSOLE: "console";
4
+ readonly PANEL: "panel";
5
+ };
6
+ export type DebugMode = (typeof DEBUG_MODE)[keyof typeof DEBUG_MODE];
package/dist/types/enums/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from './cloud.enum';
2
2
  export * from './core.enum';
3
+ export * from './debug.enum';
package/dist/types/interfaces/core.interface.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { IAddressActions, ICartActions, ICheckoutActions, IProductActions } from '@/core/client/client-action.service';
2
2
  import type { IClientConfigs } from '@/core/client/client-config.service';
3
- import type { ComponentType, ElementsEnv } from '@/enums';
3
+ import type { ComponentType, DebugMode, ElementsEnv } from '@/enums';
4
4
  import type { IAddressOptions } from '@/modules/address/address.interface';
5
5
  import type { IPromoTicker, UpdateAddressComponent, UpdateCartComponent, UpdateCheckoutComponent, UpdateComponentGlobalConfigs, UpdateProductComponent } from './configs';
6
6
  export type DeepPartial<T> = {
@@ -23,7 +23,7 @@ export interface ILiquidCommerceElementsConfig {
23
23
  customTheme?: IClientCustomThemeConfig;
24
24
  proxy?: IElementsProxyConfig;
25
25
  isBuilder?: boolean;
26
- enableDebugging?: boolean;
26
+ debugMode?: DebugMode;
27
27
  }
28
28
  export interface IInjectProductElement {
29
29
  containerId: string;
package/dist/types/modules/cart/cart.commands.d.ts CHANGED
@@ -29,6 +29,7 @@ export declare class CartCommands extends BaseCommand {
29
29
  private buildItemUpdate;
30
30
  private syncItemsFromApiResponse;
31
31
  private syncCartMetaFromApiResponse;
32
+ private syncRetailersFromApiResponse;
32
33
  private updateFulfillment;
33
34
  private addNewFulfillmentAndRetailer;
34
35
  private cleanupAfterItemRemoval;
package/dist/types/modules/product/product.commands.d.ts CHANGED
@@ -25,5 +25,6 @@ export declare class ProductCommands extends BaseCommand {
25
25
  addToCart(productId: string, params: AddItemParams): Promise<void>;
26
26
  addPresaleToCart(productId: string, params: AddItemParams): Promise<void>;
27
27
  productDataForEventFromStore(identifier: string): IBaseProductEventData;
28
+ private findFirstAvailableSize;
28
29
  private loadProductStoreUpdate;
29
30
  }
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "LiquidCommerce Elements SDK",
4
4
  "license": "UNLICENSED",
5
5
  "author": "LiquidCommerce Team",
6
- "version": "2.2.0-beta.16",
6
+ "version": "2.2.0-beta.18",
7
7
  "homepage": "https://docs.liquidcommerce.co/elements-sdk",
8
8
  "repository": {
9
9
  "type": "git",