@mobielnl/elements 0.6.1 → 0.7.0

package/dist/{index-DkHYB7u1.js → index-D-uHa1PI.js}

@@ -1,5 +1,5 @@
 "use client";
-import { r as pt, t as Z, i as Re, a as q, n as De, p as mt, b as fn, c as Ve, d as pn, v as mn, e as gn, f as x, g as le, s as vn, h as yn, j as Ie, k as H, l as gt, m as Y, o as bn, q as Tn, u as te, w as ue, x as I, y as ne, z as Vn, A as An, B as vt, C as Ne, D as Sn, E as wn, F as Pn, G as D, H as yt, I as bt, J as Tt, K as je, L as Vt, M as xn, N as Cn, O as Mn, P as ze, Q as Fn, R as On, S as Rn, T as Dn, U as In, V as Nn, W as Kn, X as En, Y as Bn, Z as Ln, _ as kn } from "./index-DAyzaGWL.js";
+import { r as pt, t as Z, i as Re, a as q, n as De, p as mt, b as fn, c as Ve, d as pn, v as mn, e as gn, f as x, g as le, s as vn, h as yn, j as Ie, k as H, l as gt, m as Y, o as bn, q as Tn, u as te, w as ue, x as I, y as ne, z as Vn, A as An, B as vt, C as Ne, D as Sn, E as wn, F as Pn, G as D, H as yt, I as bt, J as Tt, K as je, L as Vt, M as xn, N as Cn, O as Mn, P as ze, Q as Fn, R as On, S as Rn, T as Dn, U as In, V as Nn, W as Kn, X as En, Y as Bn, Z as Ln, _ as kn } from "./index-C4M3Nf9p.js";
 import { Fragment as _n } from "react";
 var ae = typeof globalThis < "u" && globalThis.process ? globalThis.process : { env: { NODE_ENV: "production" } };
 function At(t, e) {

package/dist/index.d.ts

@@ -290,6 +290,11 @@ declare type GetPageByPathQuery = {
     } | null;
 };
 
+declare type LabelClassNames = {
+    wrapper?: string;
+    text?: string;
+};
+
 declare type ListBoxClassNames = {
     base?: string;
     wrapper?: string;
@@ -338,6 +343,97 @@ declare type ModalClassNames_2 = {
     closeButton?: string;
 };
 
+declare type ModalClassNames_3 = {
+    /** 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 NumberPreservationModalClassNames = {
+    /** Modal dialog class styling slots - see type `ModalClassNames` */
+    modal?: ModalClassNames_3;
+    /** Header section containing icon and title */
+    header?: {
+        /** Container wrapping the header content */
+        container?: string;
+        /** Icon wrapper with background (contains "06" text) */
+        iconWrapper?: string;
+        /** Main title text */
+        title?: string;
+        /** Description text below title */
+        description?: string;
+    };
+    /** Form section for number input */
+    form?: {
+        /** Form element container */
+        container?: string;
+        /** Input field styling slots */
+        input?: {
+            /** Input wrapper styling */
+            inputWrapper?: string;
+            /** Input element styling */
+            input?: string;
+        };
+    };
+    /** Provider selection section */
+    provider?: {
+        /** Select component styling */
+        select?: {
+            /** Select label styling */
+            label?: string;
+            /** Select trigger button styling */
+            trigger?: string;
+            /** Provider item container in select */
+            itemContainer?: string;
+            /** Provider icon styling */
+            icon?: string;
+        };
+    };
+    /** Options section (Ja/Nee buttons) */
+    options?: {
+        /** Container for the option buttons */
+        container?: string;
+        /** Option button styling */
+        button?: string;
+        /** Button content wrapper */
+        buttonContent?: string;
+        /** Button label text */
+        buttonLabel?: string;
+        /** Button description text */
+        buttonDescription?: string;
+        /** Button icon styling */
+        buttonIcon?: string;
+    };
+    /** Radio group for subscription type selection */
+    radioGroup?: {
+        /** Radio group base styling */
+        base?: string;
+        /** Radio group wrapper styling */
+        wrapper?: string;
+        /** Radio group label styling */
+        label?: string;
+        /** Radio group description styling */
+        description?: string;
+        /** Radio group error message styling */
+        errorMessage?: string;
+        /** Radio styling */
+        radio?: string;
+    };
+    /** Submit button styling */
+    submitButton?: string;
+};
+
 declare type PhoneListContainerClassNames = {
     base?: string;
     wrapper?: string;
@@ -501,7 +597,7 @@ export declare type PricingSectionProps = Pick<PropositionCardProps, 'onInfoClic
 
 declare type ProductCategory = 'sim-only-proposition' | 'fixed-proposition' | 'smartphone-proposition' | 'smartphone-proposition-extended';
 
-export declare function ProductResults({ productCategory, initialSelectedFilters, limit, classNames, initialProfile, onProfileChange, onError, }: ProductResultsProps): JSX.Element;
+export declare function ProductResults({ productCategory, initialSelectedFilters, limit, classNames, initialProfile, texts, showTopPropositions, onProfileChange, onError, }: ProductResultsProps): JSX.Element;
 
 /**
  * ClassNames for styling different parts of the `ProductResults` component
@@ -518,26 +614,31 @@ export declare type ProductResultsClassNames = {
     /** Filter button (only on mobile & tablet screens) */
     filterButton?: string;
     /** Filter modal class styling slots - see type `ModalClassNames` */
-    modal?: ModalClassNames;
-    /** Grid wrapper of the results */
-    resultsGrid?: string;
-    /** Credit info component class styling slots - see type `CreditInfoClassNames` */
-    creditInfo?: CreditInfoClassNames;
-    /** Load more button */
-    loadMoreButton?: string;
-    /** Results not found component class styling slots - see type `ResultsNotFoundClassNames` */
-    resultsNotFound?: ResultsNotFoundClassNames;
-    /** Proposition card class styling slots - see type `PropositionCardClassNames` */
-    propositionCard?: PropositionCardClassNames;
-    /** PostcodeCheck loading card class styling slots (only for fixed propositions) - see type `PostcodeCheckLoadingClassNames` */
-    postcodeCheckLoading?: PostcodeCheckLoadingClassNames;
+    filterModal?: ModalClassNames;
     /** Postcode check modal class styling slots - see type `PostcodeCheckModalClassNames` */
     postcodeCheckModal?: PostcodeCheckModalClassNames;
+    /** Number preservation modal class styling slots - see type `NumberPreservationModalClassNames` */
+    numberPreservationModal?: NumberPreservationModalClassNames;
+    /** Results class styling slots - see type `ResultsClassNames` */
+    results?: ResultsClassNames;
 };
 
 export declare type ProductResultsProps = {
     /** Product type of the results */
     productCategory: Exclude<ProductCategory, 'smartphone-proposition-extended'>;
+    /** Whether to show the dynamic top 3 propositions based on the user's profile
+     *
+     * Not available for smartphone propositions when no phone is selected */
+    showTopPropositions?: boolean;
+    /** Customize texts  */
+    texts?: {
+        /** Title above top propositions (only shown when `showTopPropositions` is set to `true`)
+         * @default "Beste providers voor jou" */
+        topPropositionsTitle: string;
+        /** Title above all propositions (only shown when `showTopPropositions` is set to `true`)
+         * @default "Alle providers op een rijtje" */
+        allPropositionsTitle: string;
+    };
     /** Initial selected filters */
     initialSelectedFilters?: FilterValue[];
     /** Limit the number of propositions to display */
@@ -662,8 +763,8 @@ export declare type PropositionCardClassNames = {
     button?: string;
     /** Card wrapper (container for the label and card) */
     cardWrapper?: string;
-    /** Label text styling */
-    label?: string;
+    /** Label class styling slots - see type `LabelClassNames` */
+    label?: LabelClassNames;
 };
 
 export declare type PropositionCardProps = {
@@ -724,9 +825,8 @@ export declare type PropositionCardProps = {
     /** Urgent text for urgent special promotion
      * @example "Actie nog 6 dagen" */
     urgentText?: string;
-    /** Label text to display above the card
-     * @example "Meest gekozen" */
-    label?: string;
+    /** Label properties to display above the card */
+    label?: Pick<PropositionLabel, 'displayName' | 'color'>;
     /** Class slots for styling */
     classNames?: PropositionCardClassNames;
     horizontal?: boolean;
@@ -784,6 +884,17 @@ export declare type PropositionHeaderProps = {
     horizontal?: boolean;
 };
 
+declare type PropositionLabel = {
+    type: PropositionLabelType;
+    displayName: string;
+    rank: number;
+    color: PropositionLabelColor;
+};
+
+declare type PropositionLabelColor = 'primary' | 'secondary' | 'default';
+
+declare type PropositionLabelType = 'isRetention' | 'isCheapestPhone' | 'isBudget' | 'isBudgetFiber' | 'isCombi' | 'isFastestInternet' | 'isBudgetOwnNetwork' | 'isBudgetNetwork';
+
 export declare function RadioFilter({ id, options, value, onChange, classNames, }: RadioFilterProps): JSX.Element;
 
 /**
@@ -837,6 +948,29 @@ export declare type RadioFilterProps = {
 
 export declare function RangeFilter({ min, max, step, value, options, maxOptionValue, marks, formatType, onChange, classNames, }: SliderFilterProps): JSX.Element;
 
+declare type ResultsClassNames = {
+    /** Title above top propositions (only shown when `showTopPropositions` is set to `true`)
+     * @example "Beste providers voor jou" */
+    topPropositionsTitle?: string;
+    /** Title above all propositions (only shown when `showTopPropositions` is set to `true`)
+     * @example "Alle providers op een rijtje" */
+    allPropositionsTitle?: string;
+    /** Grid wrapper of the top propositions */
+    topPropositionsGrid?: string;
+    /** Grid wrapper of the all propositions */
+    allPropositionsGrid?: string;
+    /** Results not found component class styling slots - see type `ResultsNotFoundClassNames` */
+    resultsNotFound?: ResultsNotFoundClassNames;
+    /** Credit info component class styling slots - see type `CreditInfoClassNames` */
+    creditInfo?: CreditInfoClassNames;
+    /** Load more button */
+    loadMoreButton?: string;
+    /** Proposition card class styling slots - see type `PropositionCardClassNames` */
+    propositionCard?: PropositionCardClassNames;
+    /** PostcodeCheck loading card class styling slots (only for fixed propositions) - see type `PostcodeCheckLoadingClassNames` */
+    postcodeCheckLoading?: PostcodeCheckLoadingClassNames;
+};
+
 declare type ResultsNotFoundClassNames = {
     filterChips?: ActiveFilterChipsClassNames & {
         /** The title element above the filter chips

package/package.json

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