@soyio/soyio-widget 2.19.0 → 2.21.0

package/README.md

@@ -182,6 +182,12 @@ The `PrivacyCenterBox` lets you embed the Privacy Center inside your page. You c
       maxFileSize: 5 * 1024 * 1024, // 5MB
     },
 
+    // Redec operation options (optional unless "redec" is in enabledRights)
+    redecOperationIds: [
+      { id: "op_update", label: "Update" },
+      { id: "op_rectification", label: "Rectification" },
+    ],
+
     // Common options
     onEvent: (event) => console.log(event),
     onReady: () => console.log("PrivacyCenterBox is ready"), // Optional
@@ -208,7 +214,12 @@ The `PrivacyCenterBox` lets you embed the Privacy Center inside your page. You c
 - `fileRequisites`: Optional object to configure file upload constraints.
   - `allowedExtensions`: Array of allowed file extensions (e.g. `['pdf', 'jpg']`). Default: `['pdf', 'png', 'jpeg', 'jpg']`.
   - `maxFileSize`: Maximum file size in bytes. Default: `5 * 1024 * 1024` (5MB).
+- `redecOperationIds`: Optional array of `{ id, label }` values for the Redec operation select. Required if `redec` right is included in `enabledRights` param.
 - `isSandbox`: Whether to use the sandbox environment. Defaults to `false`.
+- `consentControl`: Optional, controls the visual interaction for consent toggles. Values: `'switch'` (default) or `'checkbox'`.
+- `consentMode`: Optional, controls how consent changes are committed. Values: `'immediate'` (default) or `'batch'` (save multiple changes at once).
+- `consentRetentionPeriod`: Optional, specifies a duration during which a consent cannot be revoked after being granted. Format: `"<value> <unit>"`. Supported units: `day`, `week`, `month`, `year` (and their plural forms). Example: `'30 days'`, `'1 week'`.
+- `showBatchConsentConfirmation`: Optional boolean, whether to show a confirmation dialog before saving consent changes in batch mode.
 - `appearance`: Customize the iframe appearance. See Appearance section below.
 - `onEvent`: Callback that receives events from the iframe.
 - `onReady`: Optional callback fired when the iframe becomes ready.
@@ -536,6 +547,7 @@ interface Config {
 | `icon.size` | Global default icon size in pixels | `24` |
 | `iconRules` | Per-component icon style overrides | `{}` |
 | `mainPageColumns` | Number of columns in the main page feature cards grid (1-4) | `2` |
+| `consentManagementColumns` | Number of columns in the consent management grid (1-4) | `2` |
 | `brandTheme` | Theme variant for branded elements like the footer (`default`, `dark`, `light`) | `"default"` |
 
 #### Icons
@@ -1125,6 +1137,20 @@ VITE_CONSENT_URL=http://localhost:5173
 VITE_CONSENT_TEMPLATE_ID=constpl_test
 ```
 
+To test DSR rights in the Privacy Center tab, add these parameters to the JSON config in the editor:
+
+```json
+{
+  "enabledRights": ["arsop", "redec"],
+  "redecOperationIds": [
+    { "id": "op_update", "label": "Update" },
+    { "id": "op_rectification", "label": "Rectification" }
+  ]
+}
+```
+
+`redecOperationIds` is required when `redec` is included in `enabledRights`.
+
 ### Presets Management
 
 The smoke test includes preset management functionality that allows you to save, load, and share widget configurations:

package/dist/index.d.ts

@@ -250,6 +250,7 @@ export declare class PrivacyCenterBox extends BaseIframeBox<PrivacyCenterConfig>
     protected readonly _uniqueIdentifier = "privacy-center";
     readonly defaultIframeCSSConfig: IframeCSSConfig;
     get uniqueIdentifier(): string;
+    protected handleIframeReady(): Promise<void>;
     iframeUrl(): string;
 }
 
@@ -263,6 +264,10 @@ declare type PrivacyCenterConfig = BaseConfig & {
         allowedExtensions?: string[];
         maxFileSize?: number;
     };
+    consentMode?: 'immediate' | 'batch';
+    consentRetentionPeriod?: string;
+    showBatchConsentConfirmation?: boolean;
+    redecOperationIds?: RedecOperationId[];
 } & ({
     companyId: `com_${string}`;
     sessionToken?: never;
@@ -275,6 +280,11 @@ declare type PrivacyCenterRight = 'arsop' | 'redec';
 
 declare type PrivacyManagerFeature = 'DataSubjectRequest' | 'ConsentManagement' | 'RequestTracking';
 
+declare type RedecOperationId = {
+    id: string;
+    label: string;
+};
+
 declare type Request_2 = 'disclosure' | 'signature' | 'authentication';
 
 declare type RequestConfig = DisclosureRequestConfig | SignatureRequestConfig | AuthRequestConfig;
@@ -303,6 +313,13 @@ declare interface SoyioAppearance {
 
 declare interface SoyioAppearanceConfig {
     helperTextPosition?: 'top' | 'bottom';
+    /**
+     * Control type for consent items.
+     * - 'switch': Toggle switch (default)
+     * - 'checkbox': Checkbox
+     * @default 'switch'
+     */
+    consentControl?: 'switch' | 'checkbox';
     /**
      * Icon name to use for hint/help tooltips on input labels.
      * Available icons: 'Question' (default), 'Info', 'QuestionMark', etc.
@@ -333,6 +350,11 @@ declare interface SoyioAppearanceConfig {
      * @default 2
      */
     mainPageColumns?: 1 | 2 | 3 | 4;
+    /**
+     * Number of columns in the consent management grid.
+     * @default 2
+     */
+    consentManagementColumns?: 1 | 2 | 3 | 4;
     /**
      * Theme variant for branded elements like the footer.
      * - 'default': Standard Soyio brand colors (purple/indigo)
@@ -382,7 +404,7 @@ declare interface SoyioAppearanceVariables {
     dataUseIconColor?: string;
 }
 
-declare type SoyioBaseRule = '.MainContainer' | '.Button' | '.Checkbox' | '.CheckboxInput' | '.CheckboxLabel' | '.Input' | '.Label' | '.HintIcon' | '.Title' | '.StepTitle' | '.Link' | '.Card' | '.CardTitle' | '.Select' | '.Loader' | '.TextArea' | '.ErrorMessage' | '.Description' | '.Switch' | '.SwitchRoot' | '.SwitchThumb' | '.SwitchIcon' | '.Alert' | '.AlertIcon' | '.AlertContent' | '.Radio' | '.RadioButton' | '.RadioIndicator' | '.RadioLabel' | '.Chip' | '.Dialog' | '.DialogOverlay' | '.DialogContent' | '.DialogTitle' | '.DialogDescription' | '.Combobox' | '.NinInput' | '.TrackingCodeInput' | '.TrackingCodeInputCell' | '.TrackingCodeInputSeparator' | '.RadioCard' | '.RadioCardButton' | '.RadioCardIndicator' | '.RadioCardTitle' | '.StepIndicatorContainer' | '.StepIndicator' | '.StepIndicatorLine' | '.StepIndicatorIcon' | '.StepIndicatorDot' | '.StepIndicatorNumber' | '.TooltipContent';
+declare type SoyioBaseRule = '.MainContainer' | '.Button' | '.Checkbox' | '.CheckboxInput' | '.CheckboxLabel' | '.CheckboxCheck' | '.Input' | '.Label' | '.HintIcon' | '.Title' | '.CategoryTag' | '.StepTitle' | '.Link' | '.Card' | '.CardTitle' | '.Select' | '.Loader' | '.TextArea' | '.ErrorMessage' | '.Description' | '.Switch' | '.SwitchRoot' | '.SwitchThumb' | '.SwitchIcon' | '.Alert' | '.AlertIcon' | '.AlertContent' | '.Radio' | '.RadioButton' | '.RadioIndicator' | '.RadioLabel' | '.Chip' | '.Dialog' | '.DialogOverlay' | '.DialogContent' | '.DialogTitle' | '.DialogDescription' | '.Combobox' | '.NinInput' | '.TrackingCodeInput' | '.TrackingCodeInputCell' | '.TrackingCodeInputSeparator' | '.RadioCard' | '.RadioCardButton' | '.RadioCardIndicator' | '.RadioCardTitle' | '.StepIndicatorContainer' | '.StepIndicator' | '.StepIndicatorLine' | '.StepIndicatorIcon' | '.StepIndicatorDot' | '.StepIndicatorNumber' | '.TooltipContent';
 
 declare type SoyioElementState = '--checked';
 
@@ -420,7 +442,7 @@ declare type SoyioRule = {
 
 declare type SoyioRuleKey = `${SoyioBaseRule}${SoyioElementState | SoyioPseudoClass | SoyioPseudoElement | ''}` | SoyioStateRule;
 
-declare type SoyioStateRule = '.Input--error' | '.Alert--error' | '.Alert--warning' | '.Alert--info' | '.Alert--success' | '.Chip--info' | '.Chip--green' | '.Chip--red' | '.Chip--amber' | '.RadioCard--checked' | '.RadioCardIndicator--checked' | '.StepIndicator--active' | '.StepIndicator--completed' | '.StepIndicator--pending' | '.StepIndicatorLine--top' | '.StepIndicatorLine--bottom';
+declare type SoyioStateRule = '.Input--error' | '.Alert--error' | '.Alert--warning' | '.Alert--info' | '.Alert--note' | '.Alert--success' | '.Chip--info' | '.Chip--green' | '.Chip--red' | '.Chip--amber' | '.RadioCard--checked' | '.RadioCardIndicator--checked' | '.StepIndicator--active' | '.StepIndicator--completed' | '.StepIndicator--pending' | '.StepIndicatorLine--top' | '.StepIndicatorLine--bottom';
 
 declare type SoyioTheme = 'soyio' | 'night' | 'flat';