@soyio/soyio-widget 2.20.0 → 2.22.0

package/README.md

@@ -20,6 +20,7 @@
 - [Consent Request Box](#consent-request-box)
 - [Privacy Center](#privacy-center)
 - [Disclosure Request](#disclosure-request)
+- [Disclosure Request Box](#disclosure-request-box)
 - [Signature Attempt](#signature-attempt)
 - [Auth Request](#auth-request)
 - [Appearance](#appearance)
@@ -216,6 +217,10 @@ The `PrivacyCenterBox` lets you embed the Privacy Center inside your page. You c
   - `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.
@@ -362,6 +367,41 @@ The `onEvent` callback is designed to handle various events that occur during wi
 - **`onEvent`**: A callback function triggered upon event occurrences, used for capturing and logging event-related data.
 - **`customColor`**: A hex code string that specifies the base color of the interface.
 
+## Disclosure Request Box
+
+Use `DisclosureRequestBox` when you want to keep the disclosure flow inside your page, without popup windows.
+
+This embedded API currently supports disclosure flows created in advance (existing disclosure requests only).
+
+```html
+<div id="embedded-disclosure"></div>
+
+<script>
+  import { DisclosureRequestBox } from "@soyio/soyio-widget";
+
+  const widget = new DisclosureRequestBox({
+    disclosureRequestId: "<disclosure request id>",
+    customColor: "#0F172A", // Optional
+    onEvent: (event) => {
+      console.log("DisclosureRequestBox event:", event);
+    },
+    onReady: () => {
+      console.log("DisclosureRequestBox is ready");
+    },
+    minHeight: "640px", // Optional
+    height: "720px", // Optional
+    isSandbox: true, // Optional
+  });
+
+  widget.mount("#embedded-disclosure");
+
+  // Optional cleanup
+  // widget.unmount();
+</script>
+```
+
+Passkey registration and passkey authentication are handled through a temporary popup tunnel and then return control to the embedded iframe flow.
+
 ## Signature Attempt
 
 > 📖 [Integration Guide](https://docs.soyio.id/docs/integration-guide/signature/introduction)
@@ -543,6 +583,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

package/dist/index.d.ts

@@ -16,15 +16,15 @@ declare type AuthRequestProps = {
     customColor?: string;
 };
 
-declare type BaseConfig = {
-    onEvent: (event: Record<string, unknown>) => void;
+declare type BaseConfig<TEvent = Record<string, unknown>> = {
+    onEvent: (event: TEvent) => void;
     onReady?: () => void;
     isSandbox?: boolean;
     appearance?: SoyioAppearance;
     developmentUrl?: string;
 };
 
-declare abstract class BaseIframeBox<T extends BaseConfig> {
+declare abstract class BaseIframeBox<TEvent, T extends BaseConfig<TEvent>> {
     protected iframe: HTMLIFrameElement | null;
     protected wrapper: HTMLDivElement | null;
     protected skeleton: ISkeletonView | null;
@@ -58,7 +58,7 @@ declare const CLOSED_EVENT = "WIDGET_CLOSED";
 
 export { configSchema }
 
-export declare class ConsentBox extends BaseIframeBox<ConsentConfig> {
+export declare class ConsentBox extends BaseIframeBox<Record<string, unknown>, ConsentConfig> {
     readonly defaultIframePrefix = "consent-box";
     readonly defaultIframeCSSConfig: IframeCSSConfig;
     private state;
@@ -185,6 +185,72 @@ declare type CSSProperties = {
 
 declare type DataSubject = 'anonymous_user' | 'citizen_voter' | 'commuter' | 'consultant' | 'customer' | 'employee' | 'job_applicant' | 'next_of_kin' | 'passenger' | 'patient' | 'prospect' | 'shareholder' | 'supplier_vendor' | 'trainee' | 'visitor';
 
+export declare class DisclosureRequestBox extends BaseIframeBox<DisclosureRequestBoxEvent, DisclosureRequestBoxConfig> {
+    readonly defaultIframePrefix = "disclosure-request-box";
+    private passkeyPopupWindow;
+    private popupListener;
+    private isReadyCallbackFired;
+    iframeUrl(): string;
+    mount(selector: string): Promise<this>;
+    unmount(): void;
+    protected setupListeners(): Promise<void>;
+    protected handleIframeReady(): Promise<void>;
+    private notifyReady;
+    private triggerEvent;
+    private mountPopupListener;
+    private removePopupListener;
+    private handleInfoEvent;
+    private notifyPasskeyEvent;
+    private notifyPasskeyRegistered;
+    private notifyPasskeyAuthenticated;
+    private openPasskeyRegistrationPopup;
+    private openPasskeyAuthenticationPopup;
+}
+
+declare type DisclosureRequestBoxConfig = DisclosureRequestBoxProps & {
+    onEvent: (data: DisclosureRequestBoxEvent) => void;
+    onReady?: () => void;
+    isSandbox?: boolean;
+    developmentUrl?: string;
+} & DisclosureRequestBoxSizing;
+
+declare type DisclosureRequestBoxEvent = EventData | DisclosureRequestBoxPasskeyRequiredEvent | DisclosureRequestBoxPasskeyAuthenticationRequiredEvent | DisclosureRequestBoxPasskeyRegisteredEvent | DisclosureRequestBoxPasskeyAuthenticatedEvent;
+
+declare type DisclosureRequestBoxPasskeyAuthenticatedEvent = {
+    eventName: 'PASSKEY_AUTHENTICATED';
+    type: 'PASSKEY_AUTHENTICATED';
+    identifier: string;
+};
+
+declare type DisclosureRequestBoxPasskeyAuthenticationRequiredEvent = {
+    eventName: 'PASSKEY_AUTHENTICATION_REQUIRED';
+    type: 'PASSKEY_AUTHENTICATION_REQUIRED';
+    requestableToken: string;
+};
+
+declare type DisclosureRequestBoxPasskeyRegisteredEvent = {
+    eventName: 'PASSKEY_REGISTERED';
+    type: 'PASSKEY_REGISTERED';
+    identifier: string;
+};
+
+declare type DisclosureRequestBoxPasskeyRequiredEvent = {
+    eventName: 'PASSKEY_REQUIRED';
+    type: 'PASSKEY_REQUIRED';
+    sessionToken: string;
+    companyId: `com_${string}`;
+};
+
+declare type DisclosureRequestBoxProps = {
+    disclosureRequestId: `dreq_${string}`;
+    customColor?: string;
+};
+
+declare type DisclosureRequestBoxSizing = {
+    height?: string;
+    minHeight?: string;
+};
+
 declare type DisclosureRequestConfig = {
     request: 'disclosure';
     configProps: DisclosureRequestProps;
@@ -245,7 +311,7 @@ declare type NewDisclosureRequestProps = {
     customColor?: string;
 };
 
-export declare class PrivacyCenterBox extends BaseIframeBox<PrivacyCenterConfig> {
+export declare class PrivacyCenterBox extends BaseIframeBox<Record<string, unknown>, PrivacyCenterConfig> {
     readonly defaultIframePrefix = "privacy-center";
     protected readonly _uniqueIdentifier = "privacy-center";
     readonly defaultIframeCSSConfig: IframeCSSConfig;
@@ -264,6 +330,9 @@ declare type PrivacyCenterConfig = BaseConfig & {
         allowedExtensions?: string[];
         maxFileSize?: number;
     };
+    consentMode?: 'immediate' | 'batch';
+    consentRetentionPeriod?: string;
+    showBatchConsentConfirmation?: boolean;
     redecOperationIds?: RedecOperationId[];
 } & ({
     companyId: `com_${string}`;
@@ -310,6 +379,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.
@@ -340,6 +416,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)
@@ -389,7 +470,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';
 
@@ -427,7 +508,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';
 
@@ -447,7 +528,15 @@ declare namespace SoyioTypes {
         DisclosureRequestConfig,
         SignatureRequestConfig,
         AuthRequestConfig,
-        RequestConfig
+        RequestConfig,
+        DisclosureRequestBoxPasskeyAuthenticatedEvent,
+        DisclosureRequestBoxPasskeyAuthenticationRequiredEvent,
+        DisclosureRequestBoxEvent,
+        DisclosureRequestBoxProps,
+        DisclosureRequestBoxPasskeyRegisteredEvent,
+        DisclosureRequestBoxPasskeyRequiredEvent,
+        DisclosureRequestBoxSizing,
+        DisclosureRequestBoxConfig
     }
 }
 export { SoyioTypes }
@@ -461,10 +550,18 @@ declare namespace SoyioTypes_2 {
         SignatureAttemptProps,
         AuthRequestProps,
         EventData,
+        DisclosureRequestBoxPasskeyRequiredEvent,
+        DisclosureRequestBoxPasskeyAuthenticationRequiredEvent,
+        DisclosureRequestBoxPasskeyRegisteredEvent,
+        DisclosureRequestBoxPasskeyAuthenticatedEvent,
+        DisclosureRequestBoxEvent,
         DisclosureRequestConfig,
         SignatureRequestConfig,
         AuthRequestConfig,
-        RequestConfig
+        RequestConfig,
+        DisclosureRequestBoxProps,
+        DisclosureRequestBoxSizing,
+        DisclosureRequestBoxConfig
     }
 }