@mobielnl/elements 0.12.11 → 0.12.13

package/dist/{index-BaHMQzhD.js → index-DIr2VOJT.js}

@@ -1,5 +1,5 @@
 "use client";
-import { n as j, i as N, m as Z, r as ze, h as qe, a as Lt, w as Q, b as pe, c as Ce, d as Xe, e as oe, f as Pe, t as O, g as Nt, j as G, v as Gt, k as $, M as H, K as Ye, l as $t, o as Ht, p as ge, q as Wt, s as _t, u as jt, x as Je, y as Ut, z as zt, A as qt, B as ke, C as Fe, D as z, E as Oe, F as Xt, V as Yt, G as Jt, H as Zt, I as Qt, J as en, L as tn, N as Ze, O as nn, P as sn, Q as rn, R as an, S as on, T as Qe, U as et, W as tt, X as nt, Y as ln } from "./index-DZOjiJEi.js";
+import { n as j, i as N, m as Z, r as ze, h as qe, a as Lt, w as Q, b as pe, c as Ce, d as Xe, e as oe, f as Pe, t as O, g as Nt, j as G, v as Gt, k as $, M as H, K as Ye, l as $t, o as Ht, p as ge, q as Wt, s as _t, u as jt, x as Je, y as Ut, z as zt, A as qt, B as ke, C as Fe, D as z, E as Oe, F as Xt, V as Yt, G as Jt, H as Zt, I as Qt, J as en, L as tn, N as Ze, O as nn, P as sn, Q as rn, R as an, S as on, T as Qe, U as et, W as tt, X as nt, Y as ln } from "./index-D9WG7ZWU.js";
 import { Fragment as un } from "react";
 var Bt = typeof globalThis < "u" && globalThis.process ? globalThis.process : { env: { NODE_ENV: "production" } };
 // @__NO_SIDE_EFFECTS__
@@ -502,7 +502,7 @@ class we extends Se {
     if (f) {
       const g = Math.min(this.currentTime, s) / a;
       let D = Math.floor(g), C = g % 1;
-      !C && g >= 1 && (C = 1), C === 1 && D--, D = Math.min(D, f + 1), !!(D % 2) && (h === "reverse" ? (C = 1 - C, p && (C -= p / a)) : h === "mirror" && (M = o)), b = $(0, 1, C) * a;
+      !C && g >= 1 && (C = 1), C === 1 && D--, D = Math.min(D, f + 1), D % 2 && (h === "reverse" ? (C = 1 - C, p && (C -= p / a)) : h === "mirror" && (M = o)), b = $(0, 1, C) * a;
     }
     const m = A ? { done: !1, value: u[0] } : M.next(b);
     r && (m.value = r(m.value));

package/dist/index.d.ts

@@ -23,6 +23,13 @@ declare const addressSchema: z.ZodObject<{
     city: z.ZodString;
 }, z.core.$strip>;
 
+/** Event fired when the add-to-cart CTA is clicked */
+export declare type AddToCartEvent = {
+    type: 'add_to_cart';
+    /** The full proposition data */
+    proposition: ProductCardPropositionFragment;
+};
+
 declare type AverageSectionClassNames = {
     /** Container for the average per month section */
     container?: string;
@@ -81,6 +88,84 @@ export declare type Block = {
     amount: number;
 };
 
+/**
+ * ClassNames for styling different parts of the `BundleModal` component
+ */
+declare type BundleModalClassNames = {
+    /** The backdrop slot, it is displayed behind the modal */
+    backdrop?: string;
+    /** The wrapper slot of the modal. It wraps the base and the backdrop slots */
+    wrapper?: string;
+    /** The main slot of the modal content */
+    base?: string;
+    /** The header of the modal, it is displayed at the top of the modal */
+    header?: string;
+    /** The body of the modal, it is displayed in the middle of the modal */
+    body?: string;
+    /** The footer of the modal, it is displayed at the bottom of the modal */
+    footer?: string;
+    /** The close button (X) of the modal in top-right corner */
+    closeButton?: string;
+};
+
+/**
+ * ClassNames for styling different parts of the `BundleSelector` component
+ */
+declare type BundleSelectorClassNames = {
+    /** Root container wrapping all bundle sections */
+    base?: string;
+    /** Container wrapping the contract term heading and radio group */
+    contractTermGroup?: string;
+    /** Contract term section heading */
+    contractTermLabel?: string;
+    /** Contract term radio group class styling slots - see type `RadioGroupClassNames` */
+    contractTermRadioGroup?: RadioGroupClassNames;
+    /** Container wrapping each bundle type set heading and its radio/checkbox group */
+    bundleTypeSetGroup?: string;
+    /** Bundle type set section heading */
+    bundleTypeSetLabel?: string;
+    /** Bundle type set radio group class styling slots (used when `multiSelect` is false) - see type `RadioGroupClassNames` */
+    bundleTypeSetRadioGroup?: RadioGroupClassNames;
+    /** Bundle type set checkbox group class styling slots (used when `multiSelect` is true) - see type `CheckboxGroupClassNames` */
+    bundleTypeSetCheckboxGroup?: CheckboxGroupClassNames;
+};
+
+/**
+ * ClassNames for styling different parts of the `Carousel` component
+ */
+declare type CarouselClassNames = {
+    /** Root container */
+    base?: string;
+    /** Image */
+    image?: string;
+    /** Image wrapper */
+    imageWrapper?: string;
+    /** Thumbnail Card area */
+    thumbnailCard?: string;
+    /** Thumbnail Image */
+    thumbnailImage?: string;
+    /** Counter for hidden amount of thumbnails */
+    counter?: string;
+    /** Modal class names */
+    modal?: CarouselModalClassNames;
+};
+
+/**
+ * ClassNames for styling different parts of the `Carousel` component
+ */
+declare type CarouselModalClassNames = {
+    /** Image */
+    image?: string;
+    /** Image wrapper */
+    imageWrapper?: string;
+    /** Thumbnail Card area */
+    thumbnailCard?: string;
+    /** Thumbnail Image */
+    thumbnailImage?: string;
+    /** Modal class names */
+    modal?: ModalClassNames_6;
+};
+
 declare type ChannelsClassNames = {
     /** The base slot of the channels section, it is the container of the channels section */
     base?: string;
@@ -96,6 +181,32 @@ declare type ChannelsClassNames = {
     hdIcon?: string;
 };
 
+declare type CheckboxGroupClassNames = {
+    /** Checkbox group root wrapper, it wraps the label and the wrapper */
+    base?: string;
+    /** Checkbox group wrapper, it wraps all checkboxes */
+    wrapper?: string;
+    /** Checkbox group label, it is placed before the wrapper */
+    label?: string;
+    /** The description of the checkbox group */
+    description?: string;
+    /** The error message of the checkbox group */
+    errorMessage?: string;
+    /** Individual checkboxes located within `checkboxGroup` */
+    checkbox?: {
+        /** Checkbox wrapper, it handles alignment, placement, and general appearance */
+        base?: string;
+        /** An inner container that includes styles for relative positioning, flex properties, overflow handling and managing hover and selected states */
+        wrapper?: string;
+        /** The hidden input element that is used to handle the checkbox state */
+        hiddenInput?: string;
+        /** Icon within the checkbox, controlling size, visibility, and changes when checked */
+        icon?: string;
+        /** The text associated with the checkbox */
+        label?: string;
+    };
+};
+
 declare type CombiDealModalClassNames = {
     /** Modal dialog class styling slots - see type `ModalClassNames` */
     modal?: ModalClassNames_3;
@@ -713,6 +824,23 @@ declare type ModalClassNames_5 = {
     closeButton?: string;
 };
 
+declare type ModalClassNames_6 = {
+    /** The backdrop slot, it is displayed behind the modal */
+    backdrop?: string;
+    /** The wrapper slot of the modal. It wraps the base and the backdrop slots */
+    wrapper?: string;
+    /** The main slot of the modal content */
+    base?: string;
+    /** The header of the modal, it is displayed at the top of the modal */
+    header?: string;
+    /** The body of the modal, it is displayed in the middle of the modal */
+    body?: string;
+    /** The footer of the modal, it is displayed at the bottom of the modal */
+    footer?: string;
+    /** The close button (X) of the modal in top-right corner */
+    closeButton?: string;
+};
+
 declare type MonthlyFeeClassNames = {
     /** Container for the monthly fee row */
     container?: string;
@@ -809,6 +937,13 @@ declare type NumberPreservationModalClassNames = {
         /** Radio styling */
         radio?: string;
     };
+    /** Extra benefit section */
+    extraBenefit?: {
+        /** Extra benefit title styling */
+        title?: string;
+        /** Extra benefit description styling */
+        description?: string;
+    };
     /** Submit button styling */
     submitButton?: string;
 };
@@ -993,6 +1128,37 @@ declare type PricingClassNames = {
     averagePriceValue?: string;
 };
 
+/**
+ * ClassNames for styling the `Pricing` component within `PropositionCard`
+ */
+declare type PricingClassNames_2 = {
+    /** Wrapper container for the pricing section */
+    wrapper?: string;
+    /** Promotion text for monthly fee
+     * @example "12 mnd van 10,- voor:" */
+    promotionText?: string;
+    /** Wrapper container for the monthly fee */
+    monthlyFeeWrapper?: string;
+    /** Monthly fee value text (price per month)
+     * @example "10,-" */
+    monthlyFeeValue?: string;
+    /** Monthly fee label text
+     /* @example "/ maand" */
+    monthlyFeeLabel?: string;
+    /** Product price text (one-time fee for phone)
+     *
+     * Only visible for Smartphone Propositions
+     * @example "+ 100,- eenmalig" */
+    oneTimeFee?: string;
+    /** Wrapper container for the average price */
+    averagePriceWrapper?: string;
+    /** Average price Icon */
+    averagePriceIcon?: string;
+    /** Average price value text (TCO per month)
+     * @example "gem. 54,- / maand" */
+    averagePriceValue?: string;
+};
+
 declare type ProductCardPropositionFragment = {
     __typename?: 'Proposition';
     key: string;
@@ -1222,6 +1388,10 @@ declare type ProductHeaderClassNames = {
     productStockStatus?: NonNullable<MainImageClassNames['phoneImage']>['stockIndicator'];
     /** Proposition header class styling slots */
     propositionHeader?: PropositionHeaderClassNames;
+    /** Carousel class styling slots (smartphone product images) - see type `CarouselClassNames` */
+    carousel?: CarouselClassNames;
+    /** PromotionList class styling slots (special promotions in header) - see type `PromotionListClassNames` */
+    promotionList?: PromotionListClassNames;
 };
 
 export declare function ProductResults({ classNames, initialSelectedFilters, initialProfile, onProfileChange, onError, onAction, ...props }: ProductResultsProps): JSX.Element;
@@ -1436,7 +1606,9 @@ declare const profileSchema: z.ZodObject<{
         scope: z.ZodString;
         value: z.ZodString;
     }, z.core.$strip>>>;
+    birthdate: z.ZodOptional<z.ZodString>;
     customerSegment: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+    customerSegmentUpdatedAt: z.ZodOptional<z.ZodString>;
     address: z.ZodOptional<z.ZodObject<{
         postcode: z.ZodString;
         number: z.ZodString;
@@ -1602,14 +1774,63 @@ declare type PropositionOverviewClassNames = {
     creditInfo?: CreditInfoClassNames_2;
 };
 
-export declare function PropositionSelector({ propositionKey, classNames, initialProfile, onProfileChange, onError, ...props }: PropositionSelectorProps): JSX.Element;
+export declare function PropositionSelector({ propositionKey, classNames, initialProfile, onProfileChange, onError, onAction, ...props }: PropositionSelectorProps): JSX.Element;
 
+/**
+ * ClassNames for styling different parts of the `PropositionSelector` component
+ */
 export declare type PropositionSelectorClassNames = {
+    /** Wrapper container for the entire proposition selector */
     base?: string;
-    /** HandsetCreditSelector component class styling slots */
+    /** HandsetCreditSelector component class styling slots - see type `HandsetCreditSelectorClassNames` */
     handsetCreditSelector?: HandsetCreditSelectorClassNames;
-    /** ProductHeader class styling slots (base, productImage, providerImage, productStockStatus, propositionHeader) */
+    /** ProductHeader class styling slots - see type `ProductHeaderClassNames` */
     productHeader?: ProductHeaderClassNames;
+    /** StickySummary component class styling slots - see type `StickySummaryClassNames` */
+    stickySummary?: StickySummaryClassNames;
+    /** CostOverview component class styling slots (sticky sidebar card) - see type `CostOverviewClassNames` */
+    costOverview?: CostOverviewClassNames;
+    /** PromotionList component class styling slots (benefits section) - see type `PromotionListClassNames` */
+    promotionList?: PromotionListClassNames;
+    /** PropositionSpecifications class styling slots (bundle info section) */
+    propositionSpecifications?: {
+        /** Wrapper container for the specifications */
+        wrapper?: string;
+        /** Specification item */
+        item?: string;
+        /** Specification icon */
+        icon?: string;
+    };
+    /** VersionSelect component class styling slots (smartphone product version selector) - see type `VersionSelectClassNames` */
+    versionSelect?: VersionSelectClassNames;
+    /** Extra costs section root container class */
+    extraCosts?: string;
+    /** Sidebar card containing the cost overview, CTA button and extra costs */
+    sidebarCard?: {
+        /** The Card wrapper element */
+        base?: string;
+        /** The "Totale kosten overzicht" title heading */
+        title?: string;
+        /** The add-to-cart CTA button */
+        ctaButton?: string;
+    };
+    /** BundleSelector component class styling slots - see type `BundleSelectorClassNames` */
+    bundleSelector?: BundleSelectorClassNames;
+    /** BundleModal component class styling slots - see type `BundleModalClassNames` */
+    bundleModal?: BundleModalClassNames;
+    /** Profile buttons component class styling slots - see type `SelectorClassNames` */
+    profileButton?: SelectorClassNames;
+    /** Profile banner component class styling slots - see type `ProfileBannerClassNames` */
+    profileBanner?: ProfileBannerClassNames;
+    /** Error alert class styling slots - see type `ErrorAlertClassNames` */
+    errorAlert?: ErrorAlertClassNames;
+    /** Proposition results class styling slots (shared sub-keys with ProductResultsClassNames.results) */
+    results?: {
+        /** Details modal class styling slots - see type `DetailsModalClassNames` */
+        detailsModal?: DetailsModalClassNames;
+        /** Credit info class styling slots - see type `CreditInfoClassNames` */
+        creditInfo?: CreditInfoClassNames_2;
+    };
 };
 
 export declare type PropositionSelectorProps = {
@@ -1632,6 +1853,30 @@ export declare type PropositionSelectorProps = {
     onError?: (error: Error) => void;
     /** Callback function to handle return click */
     onReturnClick?: () => void;
+    /**
+     * Callback function fired when user actions occur.
+     *
+     * Events:
+     * - `details_viewed`: User opened proposition details modal
+     * - `add_to_cart`: User clicked the add-to-cart CTA
+     * - `profile_changed`: User profile changed (includes from/to values)
+     *
+     * @example
+     * onAction={(event) => {
+     *   switch(event.type) {
+     *     case 'details_viewed':
+     *       console.log(event.proposition, event.tab)
+     *       break
+     *     case 'add_to_cart':
+     *       console.log(event.proposition)
+     *       break
+     *     case 'profile_changed':
+     *       console.log(event.from, event.to)
+     *       break
+     *   }
+     * }}
+     */
+    onAction?: (event: SelectorActionEvent) => void;
 };
 
 export declare type ProviderOption = {
@@ -1679,6 +1924,39 @@ declare type RadioFilterClassNames = {
     };
 };
 
+/**
+ * ClassNames for styling different parts of the `RadioGroup` component
+ */
+declare type RadioGroupClassNames = {
+    /** Radio group root wrapper, it wraps the label and the wrapper */
+    base?: string;
+    /** Radio group wrapper, it wraps all radio items */
+    wrapper?: string;
+    /** Radio group label, it is placed before the wrapper */
+    label?: string;
+    /** Description slot for the radio group */
+    description?: string;
+    /** Error message slot for the radio group */
+    errorMessage?: string;
+    /** Individual radio items */
+    radio?: {
+        /** Radio root wrapper, it wraps all elements */
+        base?: string;
+        /** Radio wrapper, it wraps the control element */
+        wrapper?: string;
+        /** The hidden input element that is used to handle the radio state */
+        hiddenInput?: string;
+        /** Label and description wrapper */
+        labelWrapper?: string;
+        /** The label text associated with the radio */
+        label?: string;
+        /** Control element, it is the circle element */
+        control?: string;
+        /** Description slot for the radio */
+        description?: string;
+    };
+};
+
 declare type ResultsClassNames = {
     /** Title above top propositions (only shown when `showTopPropositions` is set to `true`)
      * @example "Beste providers voor jou" */
@@ -1779,6 +2057,14 @@ declare type SelectFilterClassNames = {
     collapseLink?: string;
 };
 
+/**
+ * Union type of all PropositionSelector action events.
+ *
+ * Re-uses `DetailsViewedEvent` and `ProfileChangedEvent` from `ProductResults`
+ * since the shape is identical.
+ */
+export declare type SelectorActionEvent = AddToCartEvent | DetailsViewedEvent | ProfileChangedEvent;
+
 /**
  * ClassNames for styling different parts of the `Selector` component
  */
@@ -1867,6 +2153,16 @@ declare type SortSelectClassNames = {
     endWrapper?: string;
 };
 
+/**
+ * ClassNames for styling different parts of the `Sticky` component
+ */
+declare type StickySummaryClassNames = {
+    /** Container */
+    container?: string;
+    /** Pricing section class styling slots - see type `PricingClassNames` */
+    pricing?: PricingClassNames_2;
+};
+
 declare type TableClassNames = {
     /** Defines a flexible column layout and relative positioning for the table component */
     base?: string;
@@ -1948,6 +2244,12 @@ export declare type Translations = {
         subscription: string;
         prepaid: string;
         otherProvider: string;
+        question: string;
+        yes: string;
+        no: string;
+        invalidBirthdate: string;
+        extraBenefitTitle: string;
+        extraBenefitDescription: string;
     };
     combiDeal: {
         title: string;
@@ -1962,6 +2264,7 @@ export declare type Translations = {
         movingOption: string;
         otherProvider: string;
         question: string;
+        questionOtherSubscriptions: string;
         yes: string;
         no: string;
     };
@@ -2281,4 +2584,25 @@ export declare type Translations = {
     };
 };
 
+declare type VersionSelectClassNames = {
+    description?: string;
+    errorMessage?: string;
+    label?: string;
+    base?: string;
+    cardBody?: string;
+    value?: string;
+    selectorIcon?: string;
+    endContent?: string;
+    trigger?: string;
+    mainWrapper?: string;
+    innerWrapper?: string;
+    spinner?: string;
+    listboxWrapper?: string;
+    listbox?: string;
+    popoverContent?: string;
+    helperWrapper?: string;
+    endWrapper?: string;
+    clearButton?: string;
+};
+
 export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobielnl/elements",
-  "version": "0.12.11",
+  "version": "0.12.13",
   "description": "Mobiel.nl Elements - React component library for partner websites",
   "private": false,
   "type": "module",
@@ -79,7 +79,7 @@
     "@testing-library/react": "^16.3.1",
     "@types/jest": "^30.0.0",
     "@types/js-cookie": "^3.0.6",
-    "@types/lodash": "^4.17.23",
+    "@types/lodash": "^4.17.24",
     "@types/node": "^22.13.1",
     "@types/postcss-prefix-selector": "^1.16.3",
     "@types/react": "^19.2.9",
@@ -92,7 +92,7 @@
     "graphql-request": "^7.2.0",
     "i18next": "^25.7.3",
     "js-cookie": "^3.0.5",
-    "lodash": "^4.17.23",
+    "lodash": "^4.18.1",
     "msw": "^2.12.7",
     "msw-storybook-addon": "^2.0.6",
     "postcss-prefix-selector": "^2.1.1",
@@ -105,7 +105,7 @@
     "swr": "^2.3.2",
     "tailwindcss": "^4.1.18",
     "typescript": "~5.8.3",
-    "vite": "7.1.11",
+    "vite": "7.3.2",
     "vite-plugin-dts": "^4.5.0",
     "vitest": "^3.2.4",
     "zod": "^4.1.12"