@connectid-tools/idp-selector-react 6.10.0-alpha.9 → 6.11.0-alpha.1

package/Popup.js

@@ -1,30 +1,40 @@
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
         function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
-import { useMediaQuery } from 'react-responsive';
-import { filterAuthorisationServers, getManualAuthorisationServer } from './certification';
-import './global.css';
-import { InfoBox } from './InfoBox';
-import { getCurrentUrlOrigin } from './navigator';
-import { NoIdpError } from './NoIdpError';
-import { ParticipantsLoader } from './ParticipantsLoader';
-import './Popup.css';
-import { useOverrideShiftTab, useOverrideTab } from './TabHook';
-import detectIncognito from './incognito';
+import { useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+import { useMediaQuery } from "react-responsive";
+import { filterAuthorisationServers, getManualAuthorisationServer } from "./certification.js";
+import "./global.css";
+import { InfoBox } from "./InfoBox.js";
+import { getCurrentUrlOrigin } from "./navigator.js";
+import { NoIdpError } from "./NoIdpError.js";
+import { ParticipantsLoader } from "./ParticipantsLoader.js";
+import "./Popup.css";
+import { useOverrideShiftTab, useOverrideTab } from "./TabHook.js";
+import detectIncognito from "./incognito.js";
 export const Popup = ({ onProceed, onCancel, onError, claims, requiredClaims, showAllParticipants, certificationStatus, popupTitle, rpDataSharingDescription, enableManualVerification, requiredCertifications, rpLogoUrl, participants, error, isLoading, }) => {
     const [isIncognito, setIsIncognito] = useState();
     const [showClaims, setShowClaims] = useState(false); // mobile only
     const popupRef = useRef(null);
-    const isMobile = useMediaQuery({ query: '(max-width: 482px)' });
+    const isMobile = useMediaQuery({ query: "(max-width: 482px)" });
     const infoboxLinkRef = useRef(null);
     const closeButtonRef = useRef(null);
     useOverrideTab(infoboxLinkRef, closeButtonRef);
@@ -61,30 +71,30 @@ export const Popup = ({ onProceed, onCancel, onError, claims, requiredClaims, sh
         beneficiary_account_international: 16,
     };
     const claimsDescription = {
-        address: 'Residential address',
-        birthdate: 'Date of birth',
-        email: 'Email address',
-        family_name: 'Family name',
-        given_name: 'Given name',
-        middle_name: 'Middle name',
-        phone_number: 'Phone number',
-        over16: '16+ verification',
-        over18: '18+ verification',
-        over21: '21+ verification',
-        over25: '25+ verification',
-        over65: '65+ verification',
-        beneficiary_account_au: 'Bank account details',
-        beneficiary_account_au_payid: 'PayID',
-        beneficiary_account_international: 'International account',
+        address: "Residential address",
+        birthdate: "Date of birth",
+        email: "Email address",
+        family_name: "Family name",
+        given_name: "Given name",
+        middle_name: "Middle name",
+        phone_number: "Phone number",
+        over16: "16+ verification",
+        over18: "18+ verification",
+        over21: "21+ verification",
+        over25: "25+ verification",
+        over65: "65+ verification",
+        beneficiary_account_au: "Bank account details",
+        beneficiary_account_au_payid: "PayID",
+        beneficiary_account_international: "International account",
     };
     const sortClaims = (claims) => {
         const sortedClaims = [...claims];
         return sortedClaims.sort((claim1, claim2) => claimsOrder[claim1] - claimsOrder[claim2]);
     };
     const handleEnterEsc = (event) => {
-        if (event.key !== 'Enter' && event.key !== 'Escape')
+        if (event.key !== "Enter" && event.key !== "Escape")
             return;
-        if (event.key === 'Escape') {
+        if (event.key === "Escape") {
             onCancel();
             return;
         }
@@ -93,26 +103,26 @@ export const Popup = ({ onProceed, onCancel, onError, claims, requiredClaims, sh
             return;
         // Handling 'Enter' key
         const classList = activeElement.classList;
-        if (classList.contains('cid-idp-selector-popup-participant') ||
-            classList.contains('cid-idp-selector-popup-manual-action')) {
+        if (classList.contains("cid-idp-selector-popup-participant") ||
+            classList.contains("cid-idp-selector-popup-manual-action")) {
             activeElement.click();
         }
     };
     const handleConnectIdLinkClicked = () => __awaiter(void 0, void 0, void 0, function* () {
-        if (typeof analytics !== 'undefined') {
-            analytics.track('Link to External Page Clicked', {
-                source: 'what_is_connectid',
-                link_url: 'https://www.connectid.com.au',
+        if (typeof analytics !== "undefined") {
+            analytics.track("Link to External Page Clicked", {
+                source: "what_is_connectid",
+                link_url: "https://www.connectid.com.au",
                 rp_sub_brand: getCurrentUrlOrigin(),
                 incognito: isIncognito,
             });
         }
     });
     const renderClaimList = () => {
-        return (_jsx("ul", { id: "cid-idp-selector-popup-claims", className: `cid-idp-selector-popup-claims ${showClaims ? 'cid-idp-selector-popup-claims--visible' : ''}`, "data-testid": "claims", children: sortClaims(claims).map((claim) => (_jsxs("li", { className: "cid-idp-selector-popup-claim", "data-testid": `claim-${claim}`, children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z", fill: "#BEEDD2" }), _jsx("path", { d: "M4.81445 8.14121L6.95437 10.2811L11.472 5.76465", stroke: "#262626", strokeWidth: "1.7", strokeLinecap: "round" })] }), claimsDescription[claim]] }, claim))) }));
+        return (_jsx("ul", { id: "cid-idp-selector-popup-claims", className: `cid-idp-selector-popup-claims ${showClaims ? "cid-idp-selector-popup-claims--visible" : ""}`, "data-testid": "claims", children: sortClaims(claims).map((claim) => (_jsxs("li", { className: "cid-idp-selector-popup-claim", "data-testid": `claim-${claim}`, children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z", fill: "#BEEDD2" }), _jsx("path", { d: "M4.81445 8.14121L6.95437 10.2811L11.472 5.76465", stroke: "#262626", strokeWidth: "1.7", strokeLinecap: "round" })] }), claimsDescription[claim]] }, claim))) }));
     };
     const renderClaimsTitle = () => {
-        return (_jsxs(_Fragment, { children: [_jsx("h3", { className: "cid-idp-selector-popup-subtitle", children: "Details requested" }), _jsx("svg", { className: `cid-idp-selector-popup-claims-toggle ${showClaims ? 'cid-idp-selector-popup-claims-toggle--open' : ''}`, xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 24 24", children: _jsx("path", { d: "M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z" }) })] }));
+        return (_jsxs(_Fragment, { children: [_jsx("h3", { className: "cid-idp-selector-popup-subtitle", children: "Details requested" }), _jsx("svg", { className: `cid-idp-selector-popup-claims-toggle ${showClaims ? "cid-idp-selector-popup-claims-toggle--open" : ""}`, xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 24 24", children: _jsx("path", { d: "M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z" }) })] }));
     };
     const renderClaims = () => {
         if (!claims)
@@ -128,7 +138,7 @@ export const Popup = ({ onProceed, onCancel, onError, claims, requiredClaims, sh
         }
         if (error) {
             if (onError) {
-                onError('Unable to load participants');
+                onError("Unable to load participants");
             }
             return (_jsx("div", { className: "cid-idp-selector-popup-info-box-wrapper-warn", children: _jsx(NoIdpError, { dataTestId: "participant-error", hasManualIdp: false }) }));
         }
@@ -141,11 +151,11 @@ export const Popup = ({ onProceed, onCancel, onError, claims, requiredClaims, sh
         const filteredAuthorisationServers = filterAuthorisationServers(authorisationServersWithoutManual, showAllParticipants, certificationStatus, filterByClaims, requiredCertifications);
         // Getting all auth servers that have certifications with profile type 'Redirect' and profile variant 'FAPI2 Adv. OP w/Private Key, PAR'
         const authorisationServerWithProfileRedirectFapi2 = authorisationServersWithoutManual.filter(({ AuthorisationServerCertifications }) => {
-            return AuthorisationServerCertifications.find(({ ProfileType, ProfileVariant }) => ProfileType === 'Redirect' && ProfileVariant === 'FAPI2 Adv. OP w/Private Key, PAR');
+            return AuthorisationServerCertifications.find(({ ProfileType, ProfileVariant }) => ProfileType === "Redirect" && ProfileVariant === "FAPI2 Adv. OP w/Private Key, PAR");
         });
         const missingAuthorisationServerWithProfileRedirectFapi2 = authorisationServerWithProfileRedirectFapi2.length !== filteredAuthorisationServers.length;
         const hasManualIdp = enableManualVerification && !!manualAuthorisationServer;
-        return (_jsxs(_Fragment, { children: [filteredAuthorisationServers.length > 0 ? (_jsxs("div", { className: "cid-idp-selector-popup-provider-wrapper", children: [_jsx("h3", { className: "cid-idp-selector-popup-subtitle", children: "Choose a provider" }), _jsx("ul", { className: "cid-idp-selector-popup-participants", "data-testid": "participants", children: filteredAuthorisationServers.map(({ AuthorisationServerId, CustomerFriendlyName, CustomerFriendlyLogoUri, AuthorisationServerCertifications }) => (_jsxs("li", { "data-testid": "participant", className: "cid-idp-selector-popup-participant", tabIndex: 0, onClick: () => onProceed(AuthorisationServerId, CustomerFriendlyName, AuthorisationServerCertifications), children: [_jsx("img", { className: "cid-idp-selector-popup-participant-icon", src: CustomerFriendlyLogoUri, alt: "" }), _jsx("div", { className: "cid-idp-selector-popup-participant-name", title: CustomerFriendlyName, "data-testid": "participant-name", children: CustomerFriendlyName })] }, AuthorisationServerId))) }), missingAuthorisationServerWithProfileRedirectFapi2 && (_jsxs("div", { className: "cid-idp-selector-popup-missing", "data-testid": "missing-auth-server", children: [_jsx("h4", { className: "cid-idp-selector-popup-missing-title", children: "Can't find your provider?" }), _jsx("p", { className: "cid-idp-selector-popup-missing-text", children: "Not all of our identity providers are available for this verification." })] }))] })) : (_jsx("div", { className: "cid-idp-selector-popup-info-box-error-wrapper", "data-testid": "popup-error-info-box", children: _jsx(NoIdpError, { hasManualIdp: hasManualIdp }) })), enableManualVerification && manualAuthorisationServer && (_jsx(_Fragment, { children: _jsxs("p", { className: "cid-idp-selector-popup-manual", children: [_jsx("span", { className: "cid-idp-selector-popup-manual-title", "data-testid": "manual-verification-text", children: "Use a document to verify your identity" }), _jsx("span", { className: "cid-idp-selector-popup-manual-action", tabIndex: 0, onClick: () => onProceed(manualAuthorisationServer.AuthorisationServerId, manualAuthorisationServer.CustomerFriendlyName, manualAuthorisationServer.AuthorisationServerCertifications), "data-testid": "manual-verification-action", role: "link", children: "Verify with a document" }), _jsx("span", { className: "cid-idp-selector-popup-manual-description", children: "ConnectID does not collect, hold or store your personal information at any time." })] }) }))] }));
+        return (_jsxs(_Fragment, { children: [filteredAuthorisationServers.length > 0 ? (_jsxs("div", { className: "cid-idp-selector-popup-provider-wrapper", children: [_jsx("h3", { className: "cid-idp-selector-popup-subtitle", children: "Choose a provider" }), _jsx("ul", { className: "cid-idp-selector-popup-participants", "data-testid": "participants", children: filteredAuthorisationServers.map(({ AuthorisationServerId, CustomerFriendlyName, CustomerFriendlyLogoUri, AuthorisationServerCertifications, }) => (_jsxs("li", { role: "img", "data-testid": "participant", className: "cid-idp-selector-popup-participant", tabIndex: 0, onClick: () => onProceed(AuthorisationServerId, CustomerFriendlyName, AuthorisationServerCertifications), children: [_jsx("img", { className: "cid-idp-selector-popup-participant-icon", src: CustomerFriendlyLogoUri, alt: "" }), _jsx("div", { className: "cid-idp-selector-popup-participant-name", title: CustomerFriendlyName, "data-testid": "participant-name", children: CustomerFriendlyName })] }, AuthorisationServerId))) }), missingAuthorisationServerWithProfileRedirectFapi2 && (_jsxs("div", { className: "cid-idp-selector-popup-missing", "data-testid": "missing-auth-server", children: [_jsx("h4", { className: "cid-idp-selector-popup-missing-title", children: "Can't find your provider?" }), _jsx("p", { className: "cid-idp-selector-popup-missing-text", children: "Not all of our identity providers are available for this verification." })] }))] })) : (_jsx("div", { className: "cid-idp-selector-popup-info-box-error-wrapper", "data-testid": "popup-error-info-box", children: _jsx(NoIdpError, { hasManualIdp: hasManualIdp }) })), enableManualVerification && manualAuthorisationServer && (_jsx(_Fragment, { children: _jsxs("p", { className: "cid-idp-selector-popup-manual", children: [_jsx("span", { className: "cid-idp-selector-popup-manual-title", "data-testid": "manual-verification-text", children: "Use a document to verify your identity" }), _jsx("span", { className: "cid-idp-selector-popup-manual-action", tabIndex: 0, onClick: () => onProceed(manualAuthorisationServer.AuthorisationServerId, manualAuthorisationServer.CustomerFriendlyName, manualAuthorisationServer.AuthorisationServerCertifications), "data-testid": "manual-verification-action", role: "link", children: "Verify with a document" }), _jsx("span", { className: "cid-idp-selector-popup-manual-description", children: "ConnectID does not collect, hold or store your personal information at any time." })] }) }))] }));
     };
-    return ReactDOM.createPortal(_jsxs("div", { className: "cid-idp-selector-popup", tabIndex: 0, ref: popupRef, onKeyDown: handleEnterEsc, children: [_jsxs("div", { className: "cid-idp-selector-popup-logo-container", children: [_jsxs("div", { className: "cid-idp-selector-popup-logos", children: [_jsxs("svg", { role: "img", focusable: "false", className: "cid-idp-selector-popup-logo", viewBox: "0 0 132.37 157.84", "data-testid": "cid-logo", children: [_jsx("title", { children: "ConnectID logo" }), _jsx("path", { d: "M102.22,91.65c0,19.9-16.13,36.03-36.03,36.03s-36.03-16.13-36.03-36.03,16.13-36.03,36.03-36.03c9.95,0,18.96,4.03,25.48,10.55l40.71-40.71c-6.52-6.52-10.55-15.52-10.55-25.46h-30.14c0,13.45,4.02,25.95,10.92,36.39-10.45-6.9-22.96-10.93-36.42-10.93C29.63,25.47,0,55.1,0,91.65s29.63,66.19,66.19,66.19,66.19-29.63,66.19-66.19h-30.16Z" })] }), rpLogoUrl && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "cid-idp-selector-popup-logo-dots", children: [_jsx("div", { className: "cid-idp-selector-popup-logo-dot" }), _jsx("div", { className: "cid-idp-selector-popup-logo-dot" }), _jsx("div", { className: "cid-idp-selector-popup-logo-dot" })] }), _jsx("img", { className: "cid-idp-selector-popup-logo-rp", src: rpLogoUrl, alt: "RP logo", "data-testid": "rp-logo" })] }))] }), _jsxs("button", { "aria-label": "Close popup", "data-testid": "popup-close", className: "cid-idp-selector-popup-close", onClick: onCancel, tabIndex: 0, ref: closeButtonRef, children: [_jsx("span", { className: "cid-idp-selector-popup-close-label", children: "Close" }), _jsx("svg", { clipRule: "evenodd", fillRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "m12 10.93 5.719-5.72c.146-.146.339-.219.531-.219.404 0 .75.324.75.749 0 .193-.073.385-.219.532l-5.72 5.719 5.719 5.719c.147.147.22.339.22.531 0 .427-.349.75-.75.75-.192 0-.385-.073-.531-.219l-5.719-5.719-5.719 5.719c-.146.146-.339.219-.531.219-.401 0-.75-.323-.75-.75 0-.192.073-.384.22-.531l5.719-5.719-5.72-5.719c-.146-.147-.219-.339-.219-.532 0-.425.346-.749.75-.749.192 0 .385.073.531.219z" }) })] })] }), _jsxs("div", { className: "cid-idp-selector-popup-title-description-container", children: [_jsx("h2", { className: "cid-idp-selector-popup-title", children: popupTitle }), _jsx("p", { className: "cid-idp-selector-popup-description", children: rpDataSharingDescription })] }), renderClaims(), renderAuthorisationServers(), _jsx("div", { className: "cid-idp-selector-popup-info-box-wrapper", children: _jsxs(InfoBox, { children: [_jsx("h2", { className: "cid-idp-selector-popup-info-box-title", children: "What is ConnectID?" }), _jsxs("p", { className: "cid-idp-selector-popup-info-box-text", "data-testid": "whats-cid-text", children: ["ConnectID is an Australian-owned digital identity solution which allows you to securely prove who you are. ConnectID does not see or store your personal data. Visit", ' ', _jsx("a", { className: "cid-idp-selector-popup-info-box-link", href: "https://www.connectid.com.au", onClick: handleConnectIdLinkClicked, target: "_blank", tabIndex: 0, "data-testid": "info-box-link", ref: infoboxLinkRef, children: "connectid.com.au" }), ' ', "to find out more."] })] }) })] }), document.querySelector('body'));
+    return ReactDOM.createPortal(_jsxs("div", { className: "cid-idp-selector-popup", tabIndex: 0, ref: popupRef, onKeyDown: handleEnterEsc, children: [_jsxs("div", { className: "cid-idp-selector-popup-logo-container", children: [_jsxs("div", { className: "cid-idp-selector-popup-logos", children: [_jsxs("svg", { role: "img", focusable: "false", className: "cid-idp-selector-popup-logo", viewBox: "0 0 132.37 157.84", "data-testid": "cid-logo", children: [_jsx("title", { children: "ConnectID logo" }), _jsx("path", { d: "M102.22,91.65c0,19.9-16.13,36.03-36.03,36.03s-36.03-16.13-36.03-36.03,16.13-36.03,36.03-36.03c9.95,0,18.96,4.03,25.48,10.55l40.71-40.71c-6.52-6.52-10.55-15.52-10.55-25.46h-30.14c0,13.45,4.02,25.95,10.92,36.39-10.45-6.9-22.96-10.93-36.42-10.93C29.63,25.47,0,55.1,0,91.65s29.63,66.19,66.19,66.19,66.19-29.63,66.19-66.19h-30.16Z" })] }), rpLogoUrl && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "cid-idp-selector-popup-logo-dots", children: [_jsx("div", { className: "cid-idp-selector-popup-logo-dot" }), _jsx("div", { className: "cid-idp-selector-popup-logo-dot" }), _jsx("div", { className: "cid-idp-selector-popup-logo-dot" })] }), _jsx("img", { className: "cid-idp-selector-popup-logo-rp", src: rpLogoUrl, alt: "RP logo", "data-testid": "rp-logo" })] }))] }), _jsxs("button", { "aria-label": "Close popup", "data-testid": "popup-close", className: "cid-idp-selector-popup-close", onClick: onCancel, tabIndex: 0, ref: closeButtonRef, children: [_jsx("span", { className: "cid-idp-selector-popup-close-label", children: "Close" }), _jsx("svg", { clipRule: "evenodd", fillRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "m12 10.93 5.719-5.72c.146-.146.339-.219.531-.219.404 0 .75.324.75.749 0 .193-.073.385-.219.532l-5.72 5.719 5.719 5.719c.147.147.22.339.22.531 0 .427-.349.75-.75.75-.192 0-.385-.073-.531-.219l-5.719-5.719-5.719 5.719c-.146.146-.339.219-.531.219-.401 0-.75-.323-.75-.75 0-.192.073-.384.22-.531l5.719-5.719-5.72-5.719c-.146-.147-.219-.339-.219-.532 0-.425.346-.749.75-.749.192 0 .385.073.531.219z" }) })] })] }), _jsxs("div", { className: "cid-idp-selector-popup-title-description-container", children: [_jsx("h2", { className: "cid-idp-selector-popup-title", children: popupTitle }), _jsx("p", { className: "cid-idp-selector-popup-description", children: rpDataSharingDescription })] }), renderClaims(), renderAuthorisationServers(), _jsx("div", { className: "cid-idp-selector-popup-info-box-wrapper", children: _jsxs(InfoBox, { children: [_jsx("h2", { className: "cid-idp-selector-popup-info-box-title", children: "What is ConnectID?" }), _jsxs("p", { className: "cid-idp-selector-popup-info-box-text", "data-testid": "whats-cid-text", children: ["ConnectID is an Australian-owned digital identity solution which allows you to securely prove who you are. ConnectID does not see or store your personal data. Visit", " ", _jsx("a", { className: "cid-idp-selector-popup-info-box-link", href: "https://www.connectid.com.au", onClick: handleConnectIdLinkClicked, target: "_blank", tabIndex: 0, "data-testid": "info-box-link", ref: infoboxLinkRef, children: "connectid.com.au" }), " ", "to find out more."] })] }) })] }), document.querySelector("body"));
 };

package/Process.css

@@ -1,9 +1,12 @@
 .cid-idp-selector-process {
+  padding: 0;
+  margin-top: -12px;
+  margin-bottom: 9px;
+}
+.cid-idp-selector-process-item {
   display: grid;
   grid-template-columns: 6px 1fr;
   column-gap: 8px;
-  margin-top: -12px;
-  margin-bottom: 9px;
 }
 .cid-idp-selector-process-dot {
   width: 7px;

package/Process.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext } from 'react';
-import './Process.css';
-import { ThemeContext } from './ThemeContext';
+import { useContext } from "react";
+import "./Process.css";
+import { ThemeContext } from "./ThemeContext.js";
 export const Process = () => {
     const theme = useContext(ThemeContext);
-    const dotClasses = `cid-idp-selector-process-dot ${theme === 'light' ? 'cid-idp-selector-process-dot--grey' : ''}`;
-    const lineClasses = `cid-idp-selector-process-line ${theme === 'light' ? 'cid-idp-selector-process-line--grey' : ''}`;
-    const lastLineClass = `cid-idp-selector-process-line-last ${theme === 'light' ? 'cid-idp-selector-process-line-last--grey' : ''}`;
-    const stepClasses = `cid-idp-selector-process-step ${theme === 'light' ? 'cid-idp-selector-process-step--light' : ''}`;
-    return (_jsxs("div", { className: "cid-idp-selector-process", "data-testid": "process", children: [_jsxs("div", { children: [_jsx("div", { className: "cid-idp-selector-process-filler" }), _jsx("div", { className: dotClasses, "data-testid": "process-dot" }), _jsx("div", { className: lineClasses, "data-testid": "process-line" })] }), _jsx("div", { className: stepClasses, "data-testid": "process-step", children: "Select your bank" }), _jsxs("div", { children: [_jsx("div", { className: lineClasses }), _jsx("div", { className: dotClasses }), _jsx("div", { className: lineClasses })] }), _jsx("div", { className: stepClasses, children: "Log in to your account" }), _jsxs("div", { children: [_jsx("div", { className: lastLineClass }), _jsx("div", { className: dotClasses }), _jsx("div", { className: "cid-idp-selector-process-filler" })] }), _jsx("div", { className: stepClasses, children: "Review your details and provide consent" })] }));
+    const dotClasses = `cid-idp-selector-process-dot ${theme === "light" ? "cid-idp-selector-process-dot--grey" : ""}`;
+    const lineClasses = `cid-idp-selector-process-line ${theme === "light" ? "cid-idp-selector-process-line--grey" : ""}`;
+    const lastLineClass = `cid-idp-selector-process-line-last ${theme === "light" ? "cid-idp-selector-process-line-last--grey" : ""}`;
+    const stepClasses = `cid-idp-selector-process-step ${theme === "light" ? "cid-idp-selector-process-step--light" : ""}`;
+    return (_jsxs("ol", { className: "cid-idp-selector-process", "data-testid": "process", children: [_jsxs("li", { className: "cid-idp-selector-process-item", children: [_jsxs("div", { children: [_jsx("div", { className: "cid-idp-selector-process-filler" }), _jsx("div", { className: dotClasses, "data-testid": "process-dot" }), _jsx("div", { className: lineClasses, "data-testid": "process-line" })] }), _jsx("div", { className: stepClasses, "data-testid": "process-step", children: "Select your bank" })] }), _jsxs("li", { className: "cid-idp-selector-process-item", children: [_jsxs("div", { children: [_jsx("div", { className: lineClasses }), _jsx("div", { className: dotClasses }), _jsx("div", { className: lineClasses })] }), _jsx("div", { className: stepClasses, children: "Log in to your account" })] }), _jsxs("li", { className: "cid-idp-selector-process-item", children: [_jsxs("div", { children: [_jsx("div", { className: lastLineClass }), _jsx("div", { className: dotClasses }), _jsx("div", { className: "cid-idp-selector-process-filler" })] }), _jsx("div", { className: stepClasses, children: "Review your details and provide consent" })] })] }));
 };

package/README.md

@@ -229,7 +229,7 @@ This is an optional field in addition with the widgets below the ConnectID butto
 
 ### <a name="showCompatibilityWarnings"></a>showCompatibilityWarnings option
 
-If set to `true`, a popup with compatibility warnings will be displayed after an IDP is selected, if the conditions are met. The popup will show information about the compatibility of the user's browser, device, incognito/private mode with the ConnectID flow and the user can decide whether they want to proceed or not.
+If set to `true`, a popup with compatibility warnings will be displayed after an IDP is selected, if the conditions are met. The popup will show information about the compatibility of the user's browser, device, incognito/private mode with the ConnectID flow.
 
 <details> 
   <summary>Show compatibility warnings</summary>
@@ -259,6 +259,41 @@ The SVG image below the ConnectID button has either option dark or light mode. B
 
 ## 🚀 Release Notes
 
+
+### 6.11.0-alpha.1 (Jul 22, 2025)
+- Add file extension to output js files.
+
+### 6.10.0 (Jul 22, 2025)
+- Remove `Available on` from IDP logo list image.
+- Add `role="img"` to participant list item.
+- Show border on ConnectID button when on focus.
+- `medium process` as list.
+- Fix headings.
+- Set empty `alt` attribute for IDP logos.
+- Fix bank logos `alt` attribute.
+- Add `disableAnalytics` option.
+- Fix analytics double loading.
+- Add test support for Samsung and Chrome browsers.
+- Add `supportIncognito` option.
+- Add `showCompatibilityWarnings` option.
+- Rename `compabilityWarnings` to `compatibilityWarnings`.
+- Add `compabilityWarnings` to `onProceed` callback.
+
+### 6.10.0-alpha.14 (Jul 18, 2025)
+- Compatibility warning popup adjustments.
+
+### 6.10.0-alpha.13 (Jul 18, 2025)
+- Remove `Available on` from IDP logo list image.
+
+### 6.10.0-alpha.12 (Jul 17, 2025)
+- Add `role="img"` to participant list item.
+
+### 6.10.0-alpha.11 (Jul 17, 2025)
+- Show border on ConnectID button when on focus.
+
+### 6.10.0-alpha.10 (Jul 15, 2025)
+- `medium process` as list.
+
 ### 6.10.0-alpha.9 (Jul 14, 2025)
 - Fix headings.
 

package/ThemeContext.d.ts

@@ -1,2 +1,2 @@
-import { CidButtonTheme } from './types';
+import { CidButtonTheme } from "./types.js";
 export declare const ThemeContext: import("react").Context<CidButtonTheme>;

package/analytics.d.ts

@@ -1,2 +1,2 @@
-import { Analytics } from "./types";
+import { Analytics } from "./types.js";
 export declare const initialiseAnalytics: (onLoad: (analytics: Analytics) => void) => void;

package/certification.d.ts

@@ -1,4 +1,4 @@
-import { AuthorisationServer, AuthorisationServerCertification, CertificationProfileType, CertificationProfileVariant, CertificationStatus, Claim, Device, RequiredCertification } from './types';
+import { AuthorisationServer, AuthorisationServerCertification, CertificationProfileType, CertificationProfileVariant, CertificationStatus, Claim, Device, RequiredCertification } from "./types.js";
 export declare const filterAuthorisationServers: (authorisationServers: AuthorisationServer[], showAllParticipants: boolean, certificationStatus: CertificationStatus, claims: Claim[], requiredCertifications?: RequiredCertification[]) => AuthorisationServer[];
 export declare const getManualAuthorisationServer: (authorisationServers: AuthorisationServer[], showAllParticipants: boolean) => AuthorisationServer | undefined;
 export declare const removeExpiredOrNotStartedCertifications: (authorisationServers: AuthorisationServer[]) => AuthorisationServer[];

package/certification.js

@@ -1,7 +1,7 @@
-import { getDeviceType } from './userAgent';
+import { getDeviceType } from "./userAgent.js";
 const requiredCertificationsMap = {
-    'TDIF.IDP': { type: 'TDIF Accreditation', variant: 'Identity Provider' },
-    'Redirect.FAPI2': { type: 'Redirect', variant: 'FAPI2 Adv. OP w/Private Key, PAR' },
+    "TDIF.IDP": { type: "TDIF Accreditation", variant: "Identity Provider" },
+    "Redirect.FAPI2": { type: "Redirect", variant: "FAPI2 Adv. OP w/Private Key, PAR" },
 };
 export const filterAuthorisationServers = (authorisationServers, showAllParticipants, certificationStatus, claims, requiredCertifications) => {
     if (showAllParticipants)
@@ -17,26 +17,26 @@ export const getManualAuthorisationServer = (authorisationServers, showAllPartic
     const filtered = showAllParticipants
         ? authorisationServers
         : removeExpiredOrNotStartedCertifications(authorisationServers);
-    return filtered.find(({ AuthorisationServerCertifications }) => AuthorisationServerCertifications === null || AuthorisationServerCertifications === void 0 ? void 0 : AuthorisationServerCertifications.find(({ ProfileVariant }) => ProfileVariant === 'Fallback Identity Service Provider'));
+    return filtered.find(({ AuthorisationServerCertifications }) => AuthorisationServerCertifications === null || AuthorisationServerCertifications === void 0 ? void 0 : AuthorisationServerCertifications.find(({ ProfileVariant }) => ProfileVariant === "Fallback Identity Service Provider"));
 };
 export const removeExpiredOrNotStartedCertifications = (authorisationServers) => {
     const certifiedAuthorisationServers = [...authorisationServers];
     certifiedAuthorisationServers.forEach((authorisationServer) => {
         authorisationServer.AuthorisationServerCertifications =
-            authorisationServer.AuthorisationServerCertifications.filter(({ Status, CertificationStartDate, CertificationExpirationDate }) => Status === 'Certified' && !isExpired(CertificationExpirationDate) && hasStarted(CertificationStartDate));
+            authorisationServer.AuthorisationServerCertifications.filter(({ Status, CertificationStartDate, CertificationExpirationDate }) => Status === "Certified" && !isExpired(CertificationExpirationDate) && hasStarted(CertificationStartDate));
     });
     return certifiedAuthorisationServers;
 };
 export const filterAuthorisationServerByClaims = (authorisationServers, claims) => {
-    const nameClaims = ['given_name', 'middle_name', 'family_name'];
+    const nameClaims = ["given_name", "middle_name", "family_name"];
     const hasNameClaims = claims.find((claim) => nameClaims.includes(claim));
     // All name claims (given_name, middle_name, family_name) are mapped to `name` in the authorisation server
     // So if an authorisation server has any name claim, remove all name claims and leave only `name`
     const profileVariants = hasNameClaims
-        ? ['name', ...claims.filter((claim) => !nameClaims.includes(claim))]
+        ? ["name", ...claims.filter((claim) => !nameClaims.includes(claim))]
         : claims;
     return authorisationServers.filter((authorisationServer) => {
-        const authorisationServerProfileVariants = authorisationServer.AuthorisationServerCertifications.filter(({ ProfileType }) => ProfileType === 'ConnectID Claims').map((cert) => cert.ProfileVariant);
+        const authorisationServerProfileVariants = authorisationServer.AuthorisationServerCertifications.filter(({ ProfileType }) => ProfileType === "ConnectID Claims").map((cert) => cert.ProfileVariant);
         return profileVariants.every((profileVariant) => authorisationServerProfileVariants.includes(profileVariant));
     });
 };
@@ -46,10 +46,10 @@ export const filterAuthorisationServerByCertification = (authorisationServers, s
     return filteredByStatusAndRequiredCertifications;
 };
 const filterByStatus = (authorisationServers, status) => {
-    if (status === 'All')
+    if (status === "All")
         return authorisationServers;
-    if (status === 'Active') {
-        return authorisationServers.filter(({ AuthorisationServerCertifications }) => AuthorisationServerCertifications.find(({ ProfileVariant, ProfileType }) => ProfileType === 'Redirect' && ProfileVariant === 'FAPI2 Adv. OP w/Private Key, PAR'));
+    if (status === "Active") {
+        return authorisationServers.filter(({ AuthorisationServerCertifications }) => AuthorisationServerCertifications.find(({ ProfileVariant, ProfileType }) => ProfileType === "Redirect" && ProfileVariant === "FAPI2 Adv. OP w/Private Key, PAR"));
     }
     throw Error(`Status ${status} not supported`);
 };
@@ -73,11 +73,11 @@ const filterByRequiredCertifications = (authorisationServers, requiredCertificat
 // mobile return all authorisation servers
 // tablet and desktop return all authorisation servers but those ones with only one certification and that certification is app
 export const filterAuthorisationServerByDevice = (authorisationServers, deviceType) => {
-    if (deviceType === 'mobile')
+    if (deviceType === "mobile")
         return authorisationServers;
     const onlyAppAuthorisationServers = authorisationServers.filter((authorisationServer) => {
-        const channelCertifications = authorisationServer.AuthorisationServerCertifications.filter((cert) => cert.ProfileType === 'Channel');
-        return channelCertifications.length === 1 && channelCertifications[0].ProfileVariant === 'app';
+        const channelCertifications = authorisationServer.AuthorisationServerCertifications.filter((cert) => cert.ProfileType === "Channel");
+        return channelCertifications.length === 1 && channelCertifications[0].ProfileVariant === "app";
     });
     const onlyAppAuthorisationServersIds = onlyAppAuthorisationServers.map((authorisationServer) => authorisationServer.AuthorisationServerId);
     return authorisationServers.filter((authorisationServer) => !onlyAppAuthorisationServersIds.includes(authorisationServer.AuthorisationServerId));
@@ -102,6 +102,6 @@ export const hasStarted = (startDateStr) => {
     return startDate.getTime() <= today.getTime();
 };
 const parseCertificationDate = (dateStr) => {
-    const dateArr = dateStr.split('/');
+    const dateArr = dateStr.split("/");
     return new Date(`${dateArr[2]}-${dateArr[1]}-${dateArr[0]}`);
 };