@mobielnl/elements 0.12.9 → 0.12.11

package/dist/index.d.ts

@@ -276,6 +276,11 @@ declare type DetailsModalClassNames = {
     costOverview?: CostOverviewClassNames;
 };
 
+export declare type DetailsModalState = {
+    proposition: ProductCardPropositionFragment;
+    tab: DetailsModalTab;
+};
+
 declare type DetailsModalTab = 'general' | 'conditions' | 'channels' | 'costs';
 
 /** Event fired when proposition details are viewed */
@@ -508,6 +513,45 @@ declare type GeneralClassNames = {
     base?: string;
 } & SectionClassNames;
 
+/**
+ * ClassNames for styling different parts of the `HandsetCreditSelector` component
+ */
+declare type HandsetCreditSelectorClassNames = {
+    /** Root container */
+    base?: string;
+    /** Info text about the handset price */
+    handsetPriceInfo?: string;
+    /** Row containing the one-time and monthly fee display */
+    priceRow?: string;
+    /** One-time fee label */
+    oneTimeLabel?: string;
+    /** One-time fee value */
+    oneTimeValue?: string;
+    /** Monthly fee label */
+    monthlyLabel?: string;
+    /** Monthly fee value */
+    monthlyValue?: string;
+    /** Row containing the slider and buttons */
+    sliderRow?: string;
+    /** Decrement button */
+    decrementButton?: string;
+    /** Increment button */
+    incrementButton?: string;
+    /** Slider component class styling slots - matches HeroUI Slider classNames */
+    slider?: {
+        /** Represents individual steps or intervals on the Slider */
+        step?: string;
+        /** The base bar of the Slider, along which the thumb moves */
+        track?: string;
+        /** A visual representation of the selected value */
+        filler?: string;
+        /** The interactive element that users drag along the track */
+        thumb?: string;
+    };
+    /** Credit check info text */
+    creditCheckText?: string;
+};
+
 /**
  * ClassNames for styling the `Label` component within `PropositionCard`
  */
@@ -1160,6 +1204,26 @@ declare type ProductCardPropositionFragment = {
 
 export declare type ProductCategory = 'sim-only-proposition' | 'fixed-proposition' | 'smartphone-proposition' | 'smartphone-proposition-extended';
 
+/** ClassNames for styling the `ProductHeader` component */
+declare type ProductHeaderClassNames = {
+    /** Wrapper container for the product header */
+    base?: string;
+    /** Product image (smartphone) – wrapper and img */
+    productImage?: {
+        wrapper?: string;
+        img?: string;
+    };
+    /** Provider image (fixed/sim-only) – wrapper and img */
+    providerImage?: {
+        wrapper?: string;
+        img?: string;
+    };
+    /** Stock status indicator – see ProductStockStatus */
+    productStockStatus?: NonNullable<MainImageClassNames['phoneImage']>['stockIndicator'];
+    /** Proposition header class styling slots */
+    propositionHeader?: PropositionHeaderClassNames;
+};
+
 export declare function ProductResults({ classNames, initialSelectedFilters, initialProfile, onProfileChange, onError, onAction, ...props }: ProductResultsProps): JSX.Element;
 
 /**
@@ -1538,6 +1602,38 @@ declare type PropositionOverviewClassNames = {
     creditInfo?: CreditInfoClassNames_2;
 };
 
+export declare function PropositionSelector({ propositionKey, classNames, initialProfile, onProfileChange, onError, ...props }: PropositionSelectorProps): JSX.Element;
+
+export declare type PropositionSelectorClassNames = {
+    base?: string;
+    /** HandsetCreditSelector component class styling slots */
+    handsetCreditSelector?: HandsetCreditSelectorClassNames;
+    /** ProductHeader class styling slots (base, productImage, providerImage, productStockStatus, propositionHeader) */
+    productHeader?: ProductHeaderClassNames;
+};
+
+export declare type PropositionSelectorProps = {
+    /** Initial proposition key
+     * @example
+     * '1412-10116|1413-10646|plv-398' */
+    propositionKey: string;
+    /** Class slots for styling */
+    classNames?: PropositionSelectorClassNames;
+    /** Initial user profile */
+    initialProfile?: Partial<Profile>;
+    /** Target for the click-out URL on mobiel.nl
+     * @default 'cart' */
+    clickOutTarget?: 'cart' | 'checkout';
+    /** Callback function to handle profile changes */
+    onProfileChange?: (profile: Partial<Profile>) => void;
+    /** Callback function to add search params for the click-out URL */
+    addClickoutSearchParams?: (searchParams: URLSearchParams) => URLSearchParams;
+    /** Callback function called when an error occurs */
+    onError?: (error: Error) => void;
+    /** Callback function to handle return click */
+    onReturnClick?: () => void;
+};
+
 export declare type ProviderOption = {
     slug: string;
     name: string;
@@ -2175,6 +2271,7 @@ export declare type Translations = {
         showMore: string;
     };
     handsetCreditSelector: {
+        handsetPriceInfo: string;
         oneTime: string;
         monthly: string;
         decrease: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobielnl/elements",
-  "version": "0.12.9",
+  "version": "0.12.11",
   "description": "Mobiel.nl Elements - React component library for partner websites",
   "private": false,
   "type": "module",