@memberjunction/ng-auth-services 6.1.3 → 6.2.0-edge.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"login-picker.component.d.ts","sourceRoot":"","sources":["../../src/lib/login-picker.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAAiB,MAAM,eAAe,CAAC;AAEvE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;;AAiBnE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,
|
|
1
|
+
{"version":3,"file":"login-picker.component.d.ts","sourceRoot":"","sources":["../../src/lib/login-picker.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAAiB,MAAM,eAAe,CAAC;AAEvE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;;AAiBnE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBAyMa,sBAAsB;IACjC,yDAAyD;IAChD,SAAS,EAAE,sBAAsB,EAAE,CAAM;IAElD,gDAAgD;IACvC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAY;IAE3C,2DAA2D;IAClD,UAAU,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE1C;;;OAGG;IACM,IAAI,UAAS;IAEtB;;;;;;OAMG;IACM,aAAa,UAAQ;IAE9B;;;;;;;OAOG;IACM,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEhD,gFAAgF;IACtE,gBAAgB,uCAA8C;IAExE,6FAA6F;IACnF,gBAAgB,qBAA4B;IAEtD,kFAAkF;IAClF,IAAW,gBAAgB,IAAI,OAAO,CAErC;IAED,oEAAoE;IAC7D,QAAQ,CAAC,QAAQ,EAAE,sBAAsB,GAAG,MAAM;IAIzD;;;OAGG;IACI,YAAY,CAAC,QAAQ,EAAE,sBAAsB,GAAG,MAAM,GAAG,IAAI;IAOpE,mDAAmD;IAC5C,UAAU,CAAC,QAAQ,EAAE,sBAAsB,GAAG,MAAM;IAIpD,MAAM,CAAC,QAAQ,EAAE,sBAAsB,GAAG,IAAI;yCAnE1C,sBAAsB;2CAAtB,sBAAsB;CAwElC"}
|
|
@@ -199,7 +199,7 @@ export class MJLoginPickerComponent {
|
|
|
199
199
|
i0.ɵɵconditional(!ctx.Providers.length && ctx.FallbackCtaLabel ? 6 : -1);
|
|
200
200
|
i0.ɵɵadvance();
|
|
201
201
|
i0.ɵɵconditional(ctx.ShowPoweredBy ? 7 : -1);
|
|
202
|
-
} }, dependencies: [MJButtonDirective], styles: [".mj-login-picker[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: var(--mj-space-3, 0.75rem);\n width: 100%;\n max-width: 400px;\n }\n\n \n\n .mj-login-picker__heading[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-2xl, 1.5rem);\n font-weight: var(--mj-font-bold, 700);\n color: var(--mj-text-primary);\n text-align: left;\n }\n\n .mj-login-picker__subheading[_ngcontent-%COMP%] {\n margin: 0 0 var(--mj-space-5, 1.25rem);\n font-size: var(--mj-text-base, 1rem);\n color: var(--mj-text-secondary);\n text-align: left;\n }\n\n .mj-login-picker__list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: var(--mj-space-2, 0.5rem);\n }\n\n \n\n .mj-login-picker__row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: var(--mj-space-3, 0.75rem);\n width: 100%;\n text-align: left;\n }\n\n \n\n\n .mj-login-picker__row--default[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n }\n\n \n .mj-login-picker__row--fallback[_ngcontent-%COMP%] {\n justify-content: center;\n text-align: center;\n }\n\n .mj-login-picker__chip[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: 1.75rem;\n height: 1.75rem;\n border-radius: var(--mj-radius-sm, 0.25rem);\n background: color-mix(in srgb, currentColor 12%, transparent);\n font-size: var(--mj-text-sm, 0.875rem);\n font-weight: 700;\n }\n\n \n .mj-login-picker__label[_ngcontent-%COMP%] {\n flex: 1 1 auto;\n min-width: 0;\n white-space: normal;\n }\n\n .mj-login-picker__pill[_ngcontent-%COMP%] {\n flex: 0 0 auto;\n padding: 0.125rem var(--mj-space-2, 0.5rem);\n border-radius: var(--mj-radius-full, 999px);\n \n\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n font-size: var(--mj-text-xs, 0.75rem);\n font-weight: var(--mj-font-bold, 700);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n }\n\n \n\n\n .mj-login-picker__chevron[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n font-size: var(--mj-text-sm, 0.875rem);\n color: var(--mj-text-muted);\n transition: color 120ms ease, transform 120ms ease;\n }\n\n .mj-login-picker__row[_ngcontent-%COMP%]:hover .mj-login-picker__chevron[_ngcontent-%COMP%], \n .mj-login-picker__row[_ngcontent-%COMP%]:focus-visible .mj-login-picker__chevron[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n transform: translateX(2px);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .mj-login-picker__chevron[_ngcontent-%COMP%] {\n transition: none;\n }\n\n .mj-login-picker__row[_ngcontent-%COMP%]:hover .mj-login-picker__chevron[_ngcontent-%COMP%], \n .mj-login-picker__row[_ngcontent-%COMP%]:focus-visible .mj-login-picker__chevron[_ngcontent-%COMP%] {\n transform: none;\n }\n }\n\n .mj-login-picker__attribution[_ngcontent-%COMP%] {\n margin: var(--mj-space-2, 0.5rem) 0 0;\n font-size: var(--mj-text-xs, 0.75rem);\n color: var(--mj-text-muted);\n text-align: center;\n }"] });
|
|
202
|
+
} }, dependencies: [MJButtonDirective], styles: [".mj-login-picker[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: var(--mj-space-3, 0.75rem);\n width: 100%;\n \n\n max-width: var(--mj-login-picker-max-width, 400px);\n }\n\n \n\n .mj-login-picker__heading[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-2xl, 1.5rem);\n font-weight: var(--mj-font-bold, 700);\n \n\n\n\n\n\n\n color: var(--mj-login-panel-text, var(--mj-text-primary));\n text-align: left;\n }\n\n .mj-login-picker__subheading[_ngcontent-%COMP%] {\n margin: 0 0 var(--mj-space-5, 1.25rem);\n font-size: var(--mj-text-base, 1rem);\n color: var(--mj-login-panel-text-secondary, var(--mj-text-secondary));\n text-align: left;\n }\n\n .mj-login-picker__list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: var(--mj-space-2, 0.5rem);\n }\n\n \n\n .mj-login-picker__row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: var(--mj-space-3, 0.75rem);\n width: 100%;\n text-align: left;\n }\n\n \n\n\n .mj-login-picker__row--default[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n }\n\n \n .mj-login-picker__row--fallback[_ngcontent-%COMP%] {\n justify-content: center;\n text-align: center;\n }\n\n .mj-login-picker__chip[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: 1.75rem;\n height: 1.75rem;\n border-radius: var(--mj-radius-sm, 0.25rem);\n background: color-mix(in srgb, currentColor 12%, transparent);\n font-size: var(--mj-text-sm, 0.875rem);\n font-weight: 700;\n }\n\n \n .mj-login-picker__label[_ngcontent-%COMP%] {\n flex: 1 1 auto;\n min-width: 0;\n white-space: normal;\n }\n\n .mj-login-picker__pill[_ngcontent-%COMP%] {\n flex: 0 0 auto;\n padding: 0.125rem var(--mj-space-2, 0.5rem);\n border-radius: var(--mj-radius-full, 999px);\n \n\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n font-size: var(--mj-text-xs, 0.75rem);\n font-weight: var(--mj-font-bold, 700);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n }\n\n \n\n\n .mj-login-picker__chevron[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n font-size: var(--mj-text-sm, 0.875rem);\n color: var(--mj-login-panel-text-muted, var(--mj-text-muted));\n transition: color 120ms ease, transform 120ms ease;\n }\n\n .mj-login-picker__row[_ngcontent-%COMP%]:hover .mj-login-picker__chevron[_ngcontent-%COMP%], \n .mj-login-picker__row[_ngcontent-%COMP%]:focus-visible .mj-login-picker__chevron[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n transform: translateX(2px);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .mj-login-picker__chevron[_ngcontent-%COMP%] {\n transition: none;\n }\n\n .mj-login-picker__row[_ngcontent-%COMP%]:hover .mj-login-picker__chevron[_ngcontent-%COMP%], \n .mj-login-picker__row[_ngcontent-%COMP%]:focus-visible .mj-login-picker__chevron[_ngcontent-%COMP%] {\n transform: none;\n }\n }\n\n .mj-login-picker__attribution[_ngcontent-%COMP%] {\n margin: var(--mj-space-2, 0.5rem) 0 0;\n font-size: var(--mj-text-xs, 0.75rem);\n color: var(--mj-login-panel-text-muted, var(--mj-text-muted));\n text-align: center;\n }"] });
|
|
203
203
|
}
|
|
204
204
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJLoginPickerComponent, [{
|
|
205
205
|
type: Component,
|
|
@@ -262,7 +262,7 @@ export class MJLoginPickerComponent {
|
|
|
262
262
|
<p class="mj-login-picker__attribution">Powered by MemberJunction</p>
|
|
263
263
|
}
|
|
264
264
|
</div>
|
|
265
|
-
`, styles: ["\n .mj-login-picker {\n display: flex;\n flex-direction: column;\n gap: var(--mj-space-3, 0.75rem);\n width: 100%;\n max-width: 400px;\n }\n\n /* Left-aligned per the locked Login C direction \u2014 the heading, lede and rows share\n one leading edge; only the attribution centers. */\n .mj-login-picker__heading {\n margin: 0;\n font-size: var(--mj-text-2xl, 1.5rem);\n font-weight: var(--mj-font-bold, 700);\n color: var(--mj-text-primary);\n text-align: left;\n }\n\n .mj-login-picker__subheading {\n margin: 0 0 var(--mj-space-5, 1.25rem);\n font-size: var(--mj-text-base, 1rem);\n color: var(--mj-text-secondary);\n text-align: left;\n }\n\n .mj-login-picker__list {\n display: flex;\n flex-direction: column;\n gap: var(--mj-space-2, 0.5rem);\n }\n\n /* Layout only \u2014 every visual affordance of the row (fill, radius, focus ring,\n hit target) belongs to the mjButton directive and is deliberately not restated. */\n .mj-login-picker__row {\n display: flex;\n align-items: center;\n gap: var(--mj-space-3, 0.75rem);\n width: 100%;\n text-align: left;\n }\n\n /* The default provider reads as the recommended path. Border only \u2014 fill, radius, focus\n ring and hit target all still come from the mjButton directive, and this targets the\n picker's own row class rather than .mj-btn, so the directive stays authoritative. */\n .mj-login-picker__row--default {\n border-color: var(--mj-brand-primary);\n }\n\n /* No icon chip or chevron to align against, so this one centres. */\n .mj-login-picker__row--fallback {\n justify-content: center;\n text-align: center;\n }\n\n .mj-login-picker__chip {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: 1.75rem;\n height: 1.75rem;\n border-radius: var(--mj-radius-sm, 0.25rem);\n background: color-mix(in srgb, currentColor 12%, transparent);\n font-size: var(--mj-text-sm, 0.875rem);\n font-weight: 700;\n }\n\n /* Long provider names wrap instead of forcing horizontal overflow on narrow screens. */\n .mj-login-picker__label {\n flex: 1 1 auto;\n min-width: 0;\n white-space: normal;\n }\n\n .mj-login-picker__pill {\n flex: 0 0 auto;\n padding: 0.125rem var(--mj-space-2, 0.5rem);\n border-radius: var(--mj-radius-full, 999px);\n /* Brand-tinted rather than currentColor \u2014 the default provider is the one call to\n action on the surface, and Login C gives it the brand accent. */\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n font-size: var(--mj-text-xs, 0.75rem);\n font-weight: var(--mj-font-bold, 700);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n }\n\n /* Trailing affordance from the locked login mockup \u2014 signals that a row navigates\n away rather than toggling in place. Decorative, so it is aria-hidden and the row's\n accessible name still comes from the directive's ariaLabel. */\n .mj-login-picker__chevron {\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n font-size: var(--mj-text-sm, 0.875rem);\n color: var(--mj-text-muted);\n transition: color 120ms ease, transform 120ms ease;\n }\n\n .mj-login-picker__row:hover .mj-login-picker__chevron,\n .mj-login-picker__row:focus-visible .mj-login-picker__chevron {\n color: var(--mj-brand-primary);\n transform: translateX(2px);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .mj-login-picker__chevron {\n transition: none;\n }\n\n .mj-login-picker__row:hover .mj-login-picker__chevron,\n .mj-login-picker__row:focus-visible .mj-login-picker__chevron {\n transform: none;\n }\n }\n\n .mj-login-picker__attribution {\n margin: var(--mj-space-2, 0.5rem) 0 0;\n font-size: var(--mj-text-xs, 0.75rem);\n color: var(--mj-text-muted);\n text-align: center;\n }\n "] }]
|
|
265
|
+
`, styles: ["\n .mj-login-picker {\n display: flex;\n flex-direction: column;\n gap: var(--mj-space-3, 0.75rem);\n width: 100%;\n /* From the login token group so a themed deployment can widen or narrow the\n sign-in column without reaching into this component's internals. */\n max-width: var(--mj-login-picker-max-width, 400px);\n }\n\n /* Left-aligned per the locked Login C direction \u2014 the heading, lede and rows share\n one leading edge; only the attribution centers. */\n .mj-login-picker__heading {\n margin: 0;\n font-size: var(--mj-text-2xl, 1.5rem);\n font-weight: var(--mj-font-bold, 700);\n /* LOGIN PANEL TOKEN FIRST, semantic token as the fallback \u2014 and the same pattern on the\n lede and attribution below. The pitch of the login surface is \"override tokens, never\n write CSS against this DOM\"; without this the heading kept --mj-text-primary while the\n panel behind it took --mj-login-panel-bg, so the first thing a white-label deployment\n does (a dark panel in light mode) left a near-black heading on it and the only way out\n was piercing into these internals. Unset tokens fall through to the semantics, so an\n app that themes nothing is byte-identical. */\n color: var(--mj-login-panel-text, var(--mj-text-primary));\n text-align: left;\n }\n\n .mj-login-picker__subheading {\n margin: 0 0 var(--mj-space-5, 1.25rem);\n font-size: var(--mj-text-base, 1rem);\n color: var(--mj-login-panel-text-secondary, var(--mj-text-secondary));\n text-align: left;\n }\n\n .mj-login-picker__list {\n display: flex;\n flex-direction: column;\n gap: var(--mj-space-2, 0.5rem);\n }\n\n /* Layout only \u2014 every visual affordance of the row (fill, radius, focus ring,\n hit target) belongs to the mjButton directive and is deliberately not restated. */\n .mj-login-picker__row {\n display: flex;\n align-items: center;\n gap: var(--mj-space-3, 0.75rem);\n width: 100%;\n text-align: left;\n }\n\n /* The default provider reads as the recommended path. Border only \u2014 fill, radius, focus\n ring and hit target all still come from the mjButton directive, and this targets the\n picker's own row class rather than .mj-btn, so the directive stays authoritative. */\n .mj-login-picker__row--default {\n border-color: var(--mj-brand-primary);\n }\n\n /* No icon chip or chevron to align against, so this one centres. */\n .mj-login-picker__row--fallback {\n justify-content: center;\n text-align: center;\n }\n\n .mj-login-picker__chip {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: 1.75rem;\n height: 1.75rem;\n border-radius: var(--mj-radius-sm, 0.25rem);\n background: color-mix(in srgb, currentColor 12%, transparent);\n font-size: var(--mj-text-sm, 0.875rem);\n font-weight: 700;\n }\n\n /* Long provider names wrap instead of forcing horizontal overflow on narrow screens. */\n .mj-login-picker__label {\n flex: 1 1 auto;\n min-width: 0;\n white-space: normal;\n }\n\n .mj-login-picker__pill {\n flex: 0 0 auto;\n padding: 0.125rem var(--mj-space-2, 0.5rem);\n border-radius: var(--mj-radius-full, 999px);\n /* Brand-tinted rather than currentColor \u2014 the default provider is the one call to\n action on the surface, and Login C gives it the brand accent. */\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n font-size: var(--mj-text-xs, 0.75rem);\n font-weight: var(--mj-font-bold, 700);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n }\n\n /* Trailing affordance from the locked login mockup \u2014 signals that a row navigates\n away rather than toggling in place. Decorative, so it is aria-hidden and the row's\n accessible name still comes from the directive's ariaLabel. */\n .mj-login-picker__chevron {\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n font-size: var(--mj-text-sm, 0.875rem);\n color: var(--mj-login-panel-text-muted, var(--mj-text-muted));\n transition: color 120ms ease, transform 120ms ease;\n }\n\n .mj-login-picker__row:hover .mj-login-picker__chevron,\n .mj-login-picker__row:focus-visible .mj-login-picker__chevron {\n color: var(--mj-brand-primary);\n transform: translateX(2px);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .mj-login-picker__chevron {\n transition: none;\n }\n\n .mj-login-picker__row:hover .mj-login-picker__chevron,\n .mj-login-picker__row:focus-visible .mj-login-picker__chevron {\n transform: none;\n }\n }\n\n .mj-login-picker__attribution {\n margin: var(--mj-space-2, 0.5rem) 0 0;\n font-size: var(--mj-text-xs, 0.75rem);\n color: var(--mj-login-panel-text-muted, var(--mj-text-muted));\n text-align: center;\n }\n "] }]
|
|
266
266
|
}], null, { Providers: [{
|
|
267
267
|
type: Input
|
|
268
268
|
}], Heading: [{
|
|
@@ -280,5 +280,5 @@ export class MJLoginPickerComponent {
|
|
|
280
280
|
}], FallbackSelected: [{
|
|
281
281
|
type: Output
|
|
282
282
|
}] }); })();
|
|
283
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJLoginPickerComponent, { className: "MJLoginPickerComponent", filePath: "src/lib/login-picker.component.ts", lineNumber:
|
|
283
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJLoginPickerComponent, { className: "MJLoginPickerComponent", filePath: "src/lib/login-picker.component.ts", lineNumber: 241 }); })();
|
|
284
284
|
//# sourceMappingURL=login-picker.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"login-picker.component.js","sourceRoot":"","sources":["../../src/lib/login-picker.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { MJButtonDirective } from '@memberjunction/ng-ui-components';\nimport type { PublicAuthProviderInfo } from '@memberjunction/core';\n\n/**\n * Brand keys the picker knows how to render as a coloured chip. Anything else falls back to a\n * neutral chip with the provider's Font Awesome icon (or its initial).\n */\nconst BRAND_ICON_CLASSES: Readonly<Record<string, string>> = {\n msal: 'fa-brands fa-microsoft',\n microsoft: 'fa-brands fa-microsoft',\n google: 'fa-brands fa-google',\n okta: 'fa-solid fa-circle-half-stroke',\n auth0: 'fa-solid fa-shield-halved',\n cognito: 'fa-brands fa-aws',\n workos: 'fa-solid fa-building-lock',\n 'magic-link': 'fa-solid fa-wand-magic-sparkles'\n};\n\n/**\n * Reusable, app-agnostic multi-IdP login picker.\n *\n * Presentational by design: it takes a provider catalog in and emits the user's choice out. It\n * owns no routing, no branding, and no knowledge of which app embeds it, so Explorer and any\n * other MJ application get the identical accessible picker by dropping in the element and\n * supplying their own surrounding login surface.\n *\n * Accessibility comes from the shared `mjButton` directive (focus ring, hit target, disabled\n * semantics) rather than from styles restated here, so it cannot drift from the rest of the app.\n *\n * @example\n * ```html\n * <mj-login-picker\n * [Providers]=\"Catalog\"\n * [Busy]=\"SigningIn\"\n * (ProviderSelected)=\"OnProviderSelected($event)\">\n * </mj-login-picker>\n * ```\n */\n@Component({\n selector: 'mj-login-picker',\n standalone: true,\n imports: [MJButtonDirective],\n template: `\n <div class=\"mj-login-picker\">\n @if (Heading) {\n <h3 class=\"mj-login-picker__heading\">{{ Heading }}</h3>\n }\n @if (Subheading) {\n <p class=\"mj-login-picker__subheading\">{{ Subheading }}</p>\n }\n\n <div class=\"mj-login-picker__list\" role=\"group\" [attr.aria-label]=\"Heading || 'Sign-in options'\">\n @for (provider of Providers; track provider.name) {\n <button\n mjButton\n [variant]=\"IsSingleProvider ? 'primary' : 'secondary'\"\n size=\"lg\"\n class=\"mj-login-picker__row\"\n [class.mj-login-picker__row--default]=\"provider.isDefault && !IsSingleProvider\"\n type=\"button\"\n [disabled]=\"Busy\"\n [ariaLabel]=\"LabelFor(provider)\"\n (click)=\"Select(provider)\">\n <span class=\"mj-login-picker__chip\" aria-hidden=\"true\">\n @if (IconClassFor(provider); as iconClass) {\n <i [class]=\"iconClass\"></i>\n } @else {\n {{ InitialFor(provider) }}\n }\n </span>\n <span class=\"mj-login-picker__label\">{{ LabelFor(provider) }}</span>\n @if (provider.isDefault && !IsSingleProvider) {\n <span class=\"mj-login-picker__pill\">Default</span>\n }\n <span class=\"mj-login-picker__chevron\" aria-hidden=\"true\">\n <i class=\"fa-solid fa-arrow-right\"></i>\n </span>\n </button>\n }\n </div>\n\n <!-- Empty catalog: the deployment is configured through config/env with nothing published,\n so there is no provider to name. Opt-in via FallbackCtaLabel — an app that passes\n nothing renders nothing, which is the prior behaviour. -->\n @if (!Providers.length && FallbackCtaLabel) {\n <button\n mjButton\n variant=\"primary\"\n size=\"lg\"\n class=\"mj-login-picker__row mj-login-picker__row--fallback\"\n type=\"button\"\n [disabled]=\"Busy\"\n (click)=\"FallbackSelected.emit()\">\n {{ FallbackCtaLabel }}\n </button>\n }\n\n @if (ShowPoweredBy) {\n <p class=\"mj-login-picker__attribution\">Powered by MemberJunction</p>\n }\n </div>\n `,\n styles: [\n `\n .mj-login-picker {\n display: flex;\n flex-direction: column;\n gap: var(--mj-space-3, 0.75rem);\n width: 100%;\n max-width: 400px;\n }\n\n /* Left-aligned per the locked Login C direction — the heading, lede and rows share\n one leading edge; only the attribution centers. */\n .mj-login-picker__heading {\n margin: 0;\n font-size: var(--mj-text-2xl, 1.5rem);\n font-weight: var(--mj-font-bold, 700);\n color: var(--mj-text-primary);\n text-align: left;\n }\n\n .mj-login-picker__subheading {\n margin: 0 0 var(--mj-space-5, 1.25rem);\n font-size: var(--mj-text-base, 1rem);\n color: var(--mj-text-secondary);\n text-align: left;\n }\n\n .mj-login-picker__list {\n display: flex;\n flex-direction: column;\n gap: var(--mj-space-2, 0.5rem);\n }\n\n /* Layout only — every visual affordance of the row (fill, radius, focus ring,\n hit target) belongs to the mjButton directive and is deliberately not restated. */\n .mj-login-picker__row {\n display: flex;\n align-items: center;\n gap: var(--mj-space-3, 0.75rem);\n width: 100%;\n text-align: left;\n }\n\n /* The default provider reads as the recommended path. Border only — fill, radius, focus\n ring and hit target all still come from the mjButton directive, and this targets the\n picker's own row class rather than .mj-btn, so the directive stays authoritative. */\n .mj-login-picker__row--default {\n border-color: var(--mj-brand-primary);\n }\n\n /* No icon chip or chevron to align against, so this one centres. */\n .mj-login-picker__row--fallback {\n justify-content: center;\n text-align: center;\n }\n\n .mj-login-picker__chip {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: 1.75rem;\n height: 1.75rem;\n border-radius: var(--mj-radius-sm, 0.25rem);\n background: color-mix(in srgb, currentColor 12%, transparent);\n font-size: var(--mj-text-sm, 0.875rem);\n font-weight: 700;\n }\n\n /* Long provider names wrap instead of forcing horizontal overflow on narrow screens. */\n .mj-login-picker__label {\n flex: 1 1 auto;\n min-width: 0;\n white-space: normal;\n }\n\n .mj-login-picker__pill {\n flex: 0 0 auto;\n padding: 0.125rem var(--mj-space-2, 0.5rem);\n border-radius: var(--mj-radius-full, 999px);\n /* Brand-tinted rather than currentColor — the default provider is the one call to\n action on the surface, and Login C gives it the brand accent. */\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n font-size: var(--mj-text-xs, 0.75rem);\n font-weight: var(--mj-font-bold, 700);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n }\n\n /* Trailing affordance from the locked login mockup — signals that a row navigates\n away rather than toggling in place. Decorative, so it is aria-hidden and the row's\n accessible name still comes from the directive's ariaLabel. */\n .mj-login-picker__chevron {\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n font-size: var(--mj-text-sm, 0.875rem);\n color: var(--mj-text-muted);\n transition: color 120ms ease, transform 120ms ease;\n }\n\n .mj-login-picker__row:hover .mj-login-picker__chevron,\n .mj-login-picker__row:focus-visible .mj-login-picker__chevron {\n color: var(--mj-brand-primary);\n transform: translateX(2px);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .mj-login-picker__chevron {\n transition: none;\n }\n\n .mj-login-picker__row:hover .mj-login-picker__chevron,\n .mj-login-picker__row:focus-visible .mj-login-picker__chevron {\n transform: none;\n }\n }\n\n .mj-login-picker__attribution {\n margin: var(--mj-space-2, 0.5rem) 0 0;\n font-size: var(--mj-text-xs, 0.75rem);\n color: var(--mj-text-muted);\n text-align: center;\n }\n `\n ]\n})\nexport class MJLoginPickerComponent {\n /** Providers to offer, already ordered by the caller. */\n @Input() Providers: PublicAuthProviderInfo[] = [];\n\n /** Optional heading rendered above the list. */\n @Input() Heading: string | null = 'Log in';\n\n /** Optional supporting line rendered under the heading. */\n @Input() Subheading: string | null = null;\n\n /**\n * Disables every row — set while a sign-in is being initiated so a second click cannot\n * start a competing redirect.\n */\n @Input() Busy = false;\n\n /**\n * Whether to render the \"Powered by MemberJunction\" attribution.\n *\n * On by default, and a host-supplied flag rather than a code change, because full\n * white-labelling is a commercial entitlement: a tenant that has paid to remove the\n * attribution must be satisfiable by configuration alone.\n */\n @Input() ShowPoweredBy = true;\n\n /**\n * Label for the call to action shown when the catalog published nothing.\n *\n * Lets one component cover all three states — 2+ providers (a list), exactly one (a single\n * primary CTA naming it), and none at all (this generic CTA, for deployments still configured\n * through `mj.config.cjs` / `AUTH_TYPE`). Null renders nothing, which is the prior behaviour\n * for hosts that handle the empty case themselves.\n */\n @Input() FallbackCtaLabel: string | null = null;\n\n /** Emitted with the chosen provider. The host decides what signing in means. */\n @Output() ProviderSelected = new EventEmitter<PublicAuthProviderInfo>();\n\n /** Emitted when the empty-catalog CTA is clicked. The host starts its configured sign-in. */\n @Output() FallbackSelected = new EventEmitter<void>();\n\n /** A single option is not a choice — it renders as one primary call to action. */\n public get IsSingleProvider(): boolean {\n return this.Providers.length === 1;\n }\n\n /** \"Continue with Okta\" — the conventional modern auth phrasing. */\n public LabelFor(provider: PublicAuthProviderInfo): string {\n return `Continue with ${provider.displayName || provider.name}`;\n }\n\n /**\n * Resolves the icon class for a provider: an explicit `Icon` from metadata wins, otherwise\n * a known brand mapping for the driver, otherwise null (the chip falls back to an initial).\n */\n public IconClassFor(provider: PublicAuthProviderInfo): string | null {\n if (provider.icon) {\n return provider.icon.startsWith('fa-') ? provider.icon : (BRAND_ICON_CLASSES[provider.icon.toLowerCase()] ?? null);\n }\n return BRAND_ICON_CLASSES[provider.driverClass?.toLowerCase()] ?? null;\n }\n\n /** Fallback chip content when no icon resolves. */\n public InitialFor(provider: PublicAuthProviderInfo): string {\n return (provider.displayName || provider.name || '?').charAt(0).toUpperCase();\n }\n\n public Select(provider: PublicAuthProviderInfo): void {\n if (!this.Busy) {\n this.ProviderSelected.emit(provider);\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"login-picker.component.js","sourceRoot":"","sources":["../../src/lib/login-picker.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { MJButtonDirective } from '@memberjunction/ng-ui-components';\nimport type { PublicAuthProviderInfo } from '@memberjunction/core';\n\n/**\n * Brand keys the picker knows how to render as a coloured chip. Anything else falls back to a\n * neutral chip with the provider's Font Awesome icon (or its initial).\n */\nconst BRAND_ICON_CLASSES: Readonly<Record<string, string>> = {\n msal: 'fa-brands fa-microsoft',\n microsoft: 'fa-brands fa-microsoft',\n google: 'fa-brands fa-google',\n okta: 'fa-solid fa-circle-half-stroke',\n auth0: 'fa-solid fa-shield-halved',\n cognito: 'fa-brands fa-aws',\n workos: 'fa-solid fa-building-lock',\n 'magic-link': 'fa-solid fa-wand-magic-sparkles'\n};\n\n/**\n * Reusable, app-agnostic multi-IdP login picker.\n *\n * Presentational by design: it takes a provider catalog in and emits the user's choice out. It\n * owns no routing, no branding, and no knowledge of which app embeds it, so Explorer and any\n * other MJ application get the identical accessible picker by dropping in the element and\n * supplying their own surrounding login surface.\n *\n * Accessibility comes from the shared `mjButton` directive (focus ring, hit target, disabled\n * semantics) rather than from styles restated here, so it cannot drift from the rest of the app.\n *\n * @example\n * ```html\n * <mj-login-picker\n * [Providers]=\"Catalog\"\n * [Busy]=\"SigningIn\"\n * (ProviderSelected)=\"OnProviderSelected($event)\">\n * </mj-login-picker>\n * ```\n */\n@Component({\n selector: 'mj-login-picker',\n standalone: true,\n imports: [MJButtonDirective],\n template: `\n <div class=\"mj-login-picker\">\n @if (Heading) {\n <h3 class=\"mj-login-picker__heading\">{{ Heading }}</h3>\n }\n @if (Subheading) {\n <p class=\"mj-login-picker__subheading\">{{ Subheading }}</p>\n }\n\n <div class=\"mj-login-picker__list\" role=\"group\" [attr.aria-label]=\"Heading || 'Sign-in options'\">\n @for (provider of Providers; track provider.name) {\n <button\n mjButton\n [variant]=\"IsSingleProvider ? 'primary' : 'secondary'\"\n size=\"lg\"\n class=\"mj-login-picker__row\"\n [class.mj-login-picker__row--default]=\"provider.isDefault && !IsSingleProvider\"\n type=\"button\"\n [disabled]=\"Busy\"\n [ariaLabel]=\"LabelFor(provider)\"\n (click)=\"Select(provider)\">\n <span class=\"mj-login-picker__chip\" aria-hidden=\"true\">\n @if (IconClassFor(provider); as iconClass) {\n <i [class]=\"iconClass\"></i>\n } @else {\n {{ InitialFor(provider) }}\n }\n </span>\n <span class=\"mj-login-picker__label\">{{ LabelFor(provider) }}</span>\n @if (provider.isDefault && !IsSingleProvider) {\n <span class=\"mj-login-picker__pill\">Default</span>\n }\n <span class=\"mj-login-picker__chevron\" aria-hidden=\"true\">\n <i class=\"fa-solid fa-arrow-right\"></i>\n </span>\n </button>\n }\n </div>\n\n <!-- Empty catalog: the deployment is configured through config/env with nothing published,\n so there is no provider to name. Opt-in via FallbackCtaLabel — an app that passes\n nothing renders nothing, which is the prior behaviour. -->\n @if (!Providers.length && FallbackCtaLabel) {\n <button\n mjButton\n variant=\"primary\"\n size=\"lg\"\n class=\"mj-login-picker__row mj-login-picker__row--fallback\"\n type=\"button\"\n [disabled]=\"Busy\"\n (click)=\"FallbackSelected.emit()\">\n {{ FallbackCtaLabel }}\n </button>\n }\n\n @if (ShowPoweredBy) {\n <p class=\"mj-login-picker__attribution\">Powered by MemberJunction</p>\n }\n </div>\n `,\n styles: [\n `\n .mj-login-picker {\n display: flex;\n flex-direction: column;\n gap: var(--mj-space-3, 0.75rem);\n width: 100%;\n /* From the login token group so a themed deployment can widen or narrow the\n sign-in column without reaching into this component's internals. */\n max-width: var(--mj-login-picker-max-width, 400px);\n }\n\n /* Left-aligned per the locked Login C direction — the heading, lede and rows share\n one leading edge; only the attribution centers. */\n .mj-login-picker__heading {\n margin: 0;\n font-size: var(--mj-text-2xl, 1.5rem);\n font-weight: var(--mj-font-bold, 700);\n /* LOGIN PANEL TOKEN FIRST, semantic token as the fallback — and the same pattern on the\n lede and attribution below. The pitch of the login surface is \"override tokens, never\n write CSS against this DOM\"; without this the heading kept --mj-text-primary while the\n panel behind it took --mj-login-panel-bg, so the first thing a white-label deployment\n does (a dark panel in light mode) left a near-black heading on it and the only way out\n was piercing into these internals. Unset tokens fall through to the semantics, so an\n app that themes nothing is byte-identical. */\n color: var(--mj-login-panel-text, var(--mj-text-primary));\n text-align: left;\n }\n\n .mj-login-picker__subheading {\n margin: 0 0 var(--mj-space-5, 1.25rem);\n font-size: var(--mj-text-base, 1rem);\n color: var(--mj-login-panel-text-secondary, var(--mj-text-secondary));\n text-align: left;\n }\n\n .mj-login-picker__list {\n display: flex;\n flex-direction: column;\n gap: var(--mj-space-2, 0.5rem);\n }\n\n /* Layout only — every visual affordance of the row (fill, radius, focus ring,\n hit target) belongs to the mjButton directive and is deliberately not restated. */\n .mj-login-picker__row {\n display: flex;\n align-items: center;\n gap: var(--mj-space-3, 0.75rem);\n width: 100%;\n text-align: left;\n }\n\n /* The default provider reads as the recommended path. Border only — fill, radius, focus\n ring and hit target all still come from the mjButton directive, and this targets the\n picker's own row class rather than .mj-btn, so the directive stays authoritative. */\n .mj-login-picker__row--default {\n border-color: var(--mj-brand-primary);\n }\n\n /* No icon chip or chevron to align against, so this one centres. */\n .mj-login-picker__row--fallback {\n justify-content: center;\n text-align: center;\n }\n\n .mj-login-picker__chip {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: 1.75rem;\n height: 1.75rem;\n border-radius: var(--mj-radius-sm, 0.25rem);\n background: color-mix(in srgb, currentColor 12%, transparent);\n font-size: var(--mj-text-sm, 0.875rem);\n font-weight: 700;\n }\n\n /* Long provider names wrap instead of forcing horizontal overflow on narrow screens. */\n .mj-login-picker__label {\n flex: 1 1 auto;\n min-width: 0;\n white-space: normal;\n }\n\n .mj-login-picker__pill {\n flex: 0 0 auto;\n padding: 0.125rem var(--mj-space-2, 0.5rem);\n border-radius: var(--mj-radius-full, 999px);\n /* Brand-tinted rather than currentColor — the default provider is the one call to\n action on the surface, and Login C gives it the brand accent. */\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n font-size: var(--mj-text-xs, 0.75rem);\n font-weight: var(--mj-font-bold, 700);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n }\n\n /* Trailing affordance from the locked login mockup — signals that a row navigates\n away rather than toggling in place. Decorative, so it is aria-hidden and the row's\n accessible name still comes from the directive's ariaLabel. */\n .mj-login-picker__chevron {\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n font-size: var(--mj-text-sm, 0.875rem);\n color: var(--mj-login-panel-text-muted, var(--mj-text-muted));\n transition: color 120ms ease, transform 120ms ease;\n }\n\n .mj-login-picker__row:hover .mj-login-picker__chevron,\n .mj-login-picker__row:focus-visible .mj-login-picker__chevron {\n color: var(--mj-brand-primary);\n transform: translateX(2px);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .mj-login-picker__chevron {\n transition: none;\n }\n\n .mj-login-picker__row:hover .mj-login-picker__chevron,\n .mj-login-picker__row:focus-visible .mj-login-picker__chevron {\n transform: none;\n }\n }\n\n .mj-login-picker__attribution {\n margin: var(--mj-space-2, 0.5rem) 0 0;\n font-size: var(--mj-text-xs, 0.75rem);\n color: var(--mj-login-panel-text-muted, var(--mj-text-muted));\n text-align: center;\n }\n `\n ]\n})\nexport class MJLoginPickerComponent {\n /** Providers to offer, already ordered by the caller. */\n @Input() Providers: PublicAuthProviderInfo[] = [];\n\n /** Optional heading rendered above the list. */\n @Input() Heading: string | null = 'Log in';\n\n /** Optional supporting line rendered under the heading. */\n @Input() Subheading: string | null = null;\n\n /**\n * Disables every row — set while a sign-in is being initiated so a second click cannot\n * start a competing redirect.\n */\n @Input() Busy = false;\n\n /**\n * Whether to render the \"Powered by MemberJunction\" attribution.\n *\n * On by default, and a host-supplied flag rather than a code change, because full\n * white-labelling is a commercial entitlement: a tenant that has paid to remove the\n * attribution must be satisfiable by configuration alone.\n */\n @Input() ShowPoweredBy = true;\n\n /**\n * Label for the call to action shown when the catalog published nothing.\n *\n * Lets one component cover all three states — 2+ providers (a list), exactly one (a single\n * primary CTA naming it), and none at all (this generic CTA, for deployments still configured\n * through `mj.config.cjs` / `AUTH_TYPE`). Null renders nothing, which is the prior behaviour\n * for hosts that handle the empty case themselves.\n */\n @Input() FallbackCtaLabel: string | null = null;\n\n /** Emitted with the chosen provider. The host decides what signing in means. */\n @Output() ProviderSelected = new EventEmitter<PublicAuthProviderInfo>();\n\n /** Emitted when the empty-catalog CTA is clicked. The host starts its configured sign-in. */\n @Output() FallbackSelected = new EventEmitter<void>();\n\n /** A single option is not a choice — it renders as one primary call to action. */\n public get IsSingleProvider(): boolean {\n return this.Providers.length === 1;\n }\n\n /** \"Continue with Okta\" — the conventional modern auth phrasing. */\n public LabelFor(provider: PublicAuthProviderInfo): string {\n return `Continue with ${provider.displayName || provider.name}`;\n }\n\n /**\n * Resolves the icon class for a provider: an explicit `Icon` from metadata wins, otherwise\n * a known brand mapping for the driver, otherwise null (the chip falls back to an initial).\n */\n public IconClassFor(provider: PublicAuthProviderInfo): string | null {\n if (provider.icon) {\n return provider.icon.startsWith('fa-') ? provider.icon : (BRAND_ICON_CLASSES[provider.icon.toLowerCase()] ?? null);\n }\n return BRAND_ICON_CLASSES[provider.driverClass?.toLowerCase()] ?? null;\n }\n\n /** Fallback chip content when no icon resolves. */\n public InitialFor(provider: PublicAuthProviderInfo): string {\n return (provider.displayName || provider.name || '?').charAt(0).toUpperCase();\n }\n\n public Select(provider: PublicAuthProviderInfo): void {\n if (!this.Busy) {\n this.ProviderSelected.emit(provider);\n }\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-auth-services",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.2.0-edge.0",
|
|
4
4
|
"description": "MemberJunction Explorer: Authentication Services",
|
|
5
5
|
"main": "./dist/public-api.js",
|
|
6
6
|
"typings": "./dist/public-api.d.ts",
|
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@auth0/auth0-spa-js": "^2.14.0",
|
|
31
|
-
"@memberjunction/core": "6.
|
|
32
|
-
"@memberjunction/global": "6.
|
|
33
|
-
"@memberjunction/ng-ui-components": "6.
|
|
31
|
+
"@memberjunction/core": "6.2.0-edge.0",
|
|
32
|
+
"@memberjunction/global": "6.2.0-edge.0",
|
|
33
|
+
"@memberjunction/ng-ui-components": "6.2.0-edge.0",
|
|
34
34
|
"rxjs": "^7.8.2",
|
|
35
35
|
"tslib": "^2.8.1"
|
|
36
36
|
},
|