npm - @keycloakify/angular - Versions diffs - 0.0.1-rc.18 → 0.0.1-rc.19 - Mend

@keycloakify/angular 0.0.1-rc.18 → 0.0.1-rc.19

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.

Files changed (271) hide show

package/fesm2022/keycloakify-angular-account-pages-sessions.mjs CHANGED Viewed

@@ -16,23 +16,24 @@ class SessionsComponent extends ComponentReference {
         this.kcContext = inject(KC_ACCOUNT_CONTEXT);
         this.doUseDefaultCss = inject(USE_DEFAULT_CSS);
         this.classes = inject(ACCOUNT_CLASSES);
+        this.active = 'sessions';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SessionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: SessionsComponent, isStandalone: true, selector: "kc-root", providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: SessionsComponent, isStandalone: true, selector: "kc-sessions", providers: [
             {
                 provide: ComponentReference,
                 useExisting: forwardRef(() => SessionsComponent)
             }
-        ], usesInheritance: true, ngImport: i0, template: "@let url = kcContext.url;\n@let sessions = kcContext.sessions;\n@let stateChecker = kcContext.stateChecker;\n\n<kc-account-template [active]=\"'sessions'\">\n    <ng-container content>\n        <div [kcClass]=\"'kcContentWrapperClass'\">\n            <div class=\"col-md-10\">\n                <h2>{{ i18n.msgStr('sessionsHtmlTitle') }}</h2>\n            </div>\n        </div>\n\n        <table class=\"table table-striped table-bordered\">\n            <thead>\n                <tr>\n                    <th>{{ i18n.msgStr('ip') }}</th>\n                    <th>{{ i18n.msgStr('started') }}</th>\n                    <th>{{ i18n.msgStr('lastAccess') }}</th>\n                    <th>{{ i18n.msgStr('expires') }}</th>\n                    <th>{{ i18n.msgStr('clients') }}</th>\n                </tr>\n            </thead>\n\n            <tbody role=\"rowgroup\">\n                @for (session of sessions.sessions; track session) {\n                    <tr>\n                        <td>{{ session.ipAddress }}</td>\n                        <td>{{ session?.started }}</td>\n                        <td>{{ session?.lastAccess }}</td>\n                        <td>{{ session?.expires }}</td>\n                        <td>\n                            @for (client of session.clients; track client) {\n                                <div>\n                                    {{ client }}\n                                    <br />\n                                </div>\n                            }\n                        </td>\n                    </tr>\n                }\n            </tbody>\n        </table>\n\n        <form\n            method=\"post\"\n            [action]=\"url.sessionsUrl\"\n        >\n            <input\n                type=\"hidden\"\n                id=\"stateChecker\"\n                name=\"stateChecker\"\n                [value]=\"stateChecker\"\n            />\n            <button\n                id=\"logout-all-sessions\"\n                type=\"submit\"\n                [kcClass]=\"['kcButtonDefaultClass', 'kcButtonClass']\"\n            >\n                {{ i18n.msgStr('doLogOutAllSessions') }}\n            </button>\n        </form>\n    </ng-container>\n</kc-account-template>\n", dependencies: [{ kind: "directive", type: KcClassDirective, selector: "[kcClass]", inputs: ["class", "ngClass", "kcClass"] }, { kind: "component", type: TemplateComponent, selector: "kc-account-template", inputs: ["active"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "@let url = kcContext.url;\n@let sessions = kcContext.sessions;\n@let stateChecker = kcContext.stateChecker;\n\n<div [kcClass]=\"'kcContentWrapperClass'\">\n    <div class=\"col-md-10\">\n        <h2>{{ i18n.msgStr('sessionsHtmlTitle') }}</h2>\n    </div>\n</div>\n\n<table class=\"table table-striped table-bordered\">\n    <thead>\n        <tr>\n            <th>{{ i18n.msgStr('ip') }}</th>\n            <th>{{ i18n.msgStr('started') }}</th>\n            <th>{{ i18n.msgStr('lastAccess') }}</th>\n            <th>{{ i18n.msgStr('expires') }}</th>\n            <th>{{ i18n.msgStr('clients') }}</th>\n        </tr>\n    </thead>\n\n    <tbody role=\"rowgroup\">\n        @for (session of sessions.sessions; track session) {\n            <tr>\n                <td>{{ session.ipAddress }}</td>\n                <td>{{ session?.started }}</td>\n                <td>{{ session?.lastAccess }}</td>\n                <td>{{ session?.expires }}</td>\n                <td>\n                    @for (client of session.clients; track client) {\n                        <div>\n                            {{ client }}\n                            <br />\n                        </div>\n                    }\n                </td>\n            </tr>\n        }\n    </tbody>\n</table>\n\n<form\n    method=\"post\"\n    [action]=\"url.sessionsUrl\"\n>\n    <input\n        type=\"hidden\"\n        id=\"stateChecker\"\n        name=\"stateChecker\"\n        [value]=\"stateChecker\"\n    />\n    <button\n        id=\"logout-all-sessions\"\n        type=\"submit\"\n        [kcClass]=\"['kcButtonDefaultClass', 'kcButtonClass']\"\n    >\n        {{ i18n.msgStr('doLogOutAllSessions') }}\n    </button>\n</form>\n", dependencies: [{ kind: "directive", type: KcClassDirective, selector: "[kcClass]", inputs: ["class", "ngClass", "kcClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SessionsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [KcClassDirective, TemplateComponent, NgClass], selector: 'kc-root', providers: [
+            args: [{ standalone: true, imports: [KcClassDirective, TemplateComponent, NgClass], selector: 'kc-sessions', providers: [
                         {
                             provide: ComponentReference,
                             useExisting: forwardRef(() => SessionsComponent)
                         }
-                    ], template: "@let url = kcContext.url;\n@let sessions = kcContext.sessions;\n@let stateChecker = kcContext.stateChecker;\n\n<kc-account-template [active]=\"'sessions'\">\n    <ng-container content>\n        <div [kcClass]=\"'kcContentWrapperClass'\">\n            <div class=\"col-md-10\">\n                <h2>{{ i18n.msgStr('sessionsHtmlTitle') }}</h2>\n            </div>\n        </div>\n\n        <table class=\"table table-striped table-bordered\">\n            <thead>\n                <tr>\n                    <th>{{ i18n.msgStr('ip') }}</th>\n                    <th>{{ i18n.msgStr('started') }}</th>\n                    <th>{{ i18n.msgStr('lastAccess') }}</th>\n                    <th>{{ i18n.msgStr('expires') }}</th>\n                    <th>{{ i18n.msgStr('clients') }}</th>\n                </tr>\n            </thead>\n\n            <tbody role=\"rowgroup\">\n                @for (session of sessions.sessions; track session) {\n                    <tr>\n                        <td>{{ session.ipAddress }}</td>\n                        <td>{{ session?.started }}</td>\n                        <td>{{ session?.lastAccess }}</td>\n                        <td>{{ session?.expires }}</td>\n                        <td>\n                            @for (client of session.clients; track client) {\n                                <div>\n                                    {{ client }}\n                                    <br />\n                                </div>\n                            }\n                        </td>\n                    </tr>\n                }\n            </tbody>\n        </table>\n\n        <form\n            method=\"post\"\n            [action]=\"url.sessionsUrl\"\n        >\n            <input\n                type=\"hidden\"\n                id=\"stateChecker\"\n                name=\"stateChecker\"\n                [value]=\"stateChecker\"\n            />\n            <button\n                id=\"logout-all-sessions\"\n                type=\"submit\"\n                [kcClass]=\"['kcButtonDefaultClass', 'kcButtonClass']\"\n            >\n                {{ i18n.msgStr('doLogOutAllSessions') }}\n            </button>\n        </form>\n    </ng-container>\n</kc-account-template>\n" }]
+                    ], template: "@let url = kcContext.url;\n@let sessions = kcContext.sessions;\n@let stateChecker = kcContext.stateChecker;\n\n<div [kcClass]=\"'kcContentWrapperClass'\">\n    <div class=\"col-md-10\">\n        <h2>{{ i18n.msgStr('sessionsHtmlTitle') }}</h2>\n    </div>\n</div>\n\n<table class=\"table table-striped table-bordered\">\n    <thead>\n        <tr>\n            <th>{{ i18n.msgStr('ip') }}</th>\n            <th>{{ i18n.msgStr('started') }}</th>\n            <th>{{ i18n.msgStr('lastAccess') }}</th>\n            <th>{{ i18n.msgStr('expires') }}</th>\n            <th>{{ i18n.msgStr('clients') }}</th>\n        </tr>\n    </thead>\n\n    <tbody role=\"rowgroup\">\n        @for (session of sessions.sessions; track session) {\n            <tr>\n                <td>{{ session.ipAddress }}</td>\n                <td>{{ session?.started }}</td>\n                <td>{{ session?.lastAccess }}</td>\n                <td>{{ session?.expires }}</td>\n                <td>\n                    @for (client of session.clients; track client) {\n                        <div>\n                            {{ client }}\n                            <br />\n                        </div>\n                    }\n                </td>\n            </tr>\n        }\n    </tbody>\n</table>\n\n<form\n    method=\"post\"\n    [action]=\"url.sessionsUrl\"\n>\n    <input\n        type=\"hidden\"\n        id=\"stateChecker\"\n        name=\"stateChecker\"\n        [value]=\"stateChecker\"\n    />\n    <button\n        id=\"logout-all-sessions\"\n        type=\"submit\"\n        [kcClass]=\"['kcButtonDefaultClass', 'kcButtonClass']\"\n    >\n        {{ i18n.msgStr('doLogOutAllSessions') }}\n    </button>\n</form>\n" }]
         }] });
 /**

package/fesm2022/keycloakify-angular-account-pages-sessions.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"keycloakify-angular-account-pages-sessions.mjs","sources":["../../src/account/pages/sessions/sessions.component.ts","../../src/account/pages/sessions/sessions.component.html","../../src/account/pages/sessions/keycloakify-angular-account-pages-sessions.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\nimport { Component, forwardRef, inject } from '@angular/core';\nimport { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';\nimport { TemplateComponent } from '@keycloakify/angular/account/containers/template';\nimport { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';\nimport { ~~ACCOUNT_CLASSES~~ } from '@keycloakify/angular/account/~~tokens/classes~~';\nimport { ~~ACCOUNT_I18N~~ } from '@keycloakify/angular/account/~~tokens/i18n~~';\nimport { ~~KC_ACCOUNT_CONTEXT~~ } from '@keycloakify/angular/account/tokens/~~kc-context~~';\nimport { ~~USE_DEFAULT_CSS~~ } from '@keycloakify/angular/~~lib~~/tokens/~~use-default-css~~';\nimport ~~type~~ { ~~ClassKey~~ } from 'keycloakify/account';\nimport ~~type~~ { ~~I18n~~ } from '@keycloakify/angular/~~account~~/~~i18n~~';\nimport type { ~~KcContext~~ } from '@keycloakify/~~angular/~~account~~/KcContext~~';\n\n@Component({\n standalone: true,\n imports: [KcClassDirective, TemplateComponent, NgClass],\n selector: 'kc-~~root~~',\n templateUrl: 'sessions.component.html',\n providers: [\n {\n provide: ComponentReference,\n useExisting: forwardRef(() => SessionsComponent)\n }\n ]\n})\nexport class SessionsComponent extends ComponentReference {\n i18n = inject<I18n>(ACCOUNT_I18N);\n kcContext = inject<Extract<KcContext, { pageId: 'sessions.ftl' }>>(KC_ACCOUNT_CONTEXT);\n override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);\n override classes = inject<Partial<Record<ClassKey, string>>>(ACCOUNT_CLASSES);\n}\n","@let url = kcContext.url;\n@let sessions = kcContext.sessions;\n@let stateChecker = kcContext.stateChecker;\n\n<~~kc-account-template [active]=\"'sessions'\">\n <ng-container content>\n <~~div [kcClass]=\"'kcContentWrapperClass'\">\n <div class=\"col-md-10\">\n <h2>{{ i18n.msgStr('sessionsHtmlTitle') }}</h2>\n </div>\n </div>\n\n <table class=\"table table-striped table-bordered\">\n <thead>\n <tr>\n <th>{{ i18n.msgStr('ip') }}</th>\n <th>{{ i18n.msgStr('started') }}</th>\n <th>{{ i18n.msgStr('lastAccess') }}</th>\n <th>{{ i18n.msgStr('expires') }}</th>\n <th>{{ i18n.msgStr('clients') }}</th>\n </tr>\n </thead>\n\n <tbody role=\"rowgroup\">\n @for (session of sessions.sessions; track session) {\n <tr>\n <td>{{ session.ipAddress }}</td>\n <td>{{ session?.started }}</td>\n <td>{{ session?.lastAccess }}</td>\n <td>{{ session?.expires }}</td>\n <td>\n @for (client of session.clients; track client) {\n <div>\n {{ client }}\n <br />\n </div>\n }\n </td>\n </tr>\n }\n </tbody>\n </table>\n\n <form\n method=\"post\"\n [action]=\"url.sessionsUrl\"\n >\n <input\n type=\"hidden\"\n id=\"stateChecker\"\n name=\"stateChecker\"\n [value]=\"stateChecker\"\n />\n <button\n id=\"logout-all-sessions\"\n type=\"submit\"\n [kcClass]=\"['kcButtonDefaultClass', 'kcButtonClass']\"\n >\n {{ i18n.msgStr('doLogOutAllSessions') }}\n </button>\n </form>\n ~~</ng-container>\n</kc-account-template>\n~~","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;AAyBM,MAAO,iBAAkB,SAAQ,kBAAkB,CAAA;AAZzD,IAAA,WAAA,GAAA;;AAaI,QAAA,IAAA,CAAA,IAAI,GAAG,MAAM,CAAO,YAAY,CAAC,CAAC;AAClC,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAiD,kBAAkB,CAAC,CAAC;AAC9E,QAAA,IAAA,CAAA,eAAe,GAAG,MAAM,CAAU,eAAe,CAAC,CAAC;AACnD,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAoC,eAAe,CAAC,CAAC;~~AACjF~~,KAAA;~~8GALY~~,iBAAiB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EAPf,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,~~SAAA~~,EAAA,SAAA,EAAA;AACP,YAAA;AACI,gBAAA,OAAO,EAAE,kBAAkB;AAC3B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,iBAAiB,CAAC;AACnD,aAAA;~~AACJ~~,~~SAAA~~,~~EAAA,~~eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,~~ECvBL,+rEA+DA,~~EAAA,~~YAAA~~,~~EAAA~~,~~CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDhDc,~~gBAAgB,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,EAAA,SAAA,CAAA,EAAA,~~EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,iBAAiB,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,~~CAAA,~~QAAA,CAAA,~~EAAA,CAAA,~~EAAA,~~CAAA,~~CAAA,~~EAAA;;~~2FAUpC~~,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAZ7B,SAAS;iCACM,IAAI,EAAA,OAAA,EACP,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,OAAO,CAAC,EAC7C,QAAA,EAAA,~~SAAS~~,~~EAER~~,SAAA,EAAA;AACP,wBAAA;AACI,4BAAA,OAAO,EAAE,kBAAkB;AAC3B,4BAAA,WAAW,EAAE,UAAU,CAAC,uBAAuB,CAAC;AACnD,yBAAA;AACJ,qBAAA,EAAA,QAAA,EAAA~~,+rEAAA~~,EAAA,CAAA;;;AEvBL;;AAEG;;;;"}
1	+ {"version":3,"file":"keycloakify-angular-account-pages-sessions.mjs","sources":["../../src/account/pages/sessions/sessions.component.ts","../../src/account/pages/sessions/sessions.component.html","../../src/account/pages/sessions/keycloakify-angular-account-pages-sessions.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\nimport { Component, forwardRef, inject } from '@angular/core';\nimport { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';\nimport { TemplateComponent } from '@keycloakify/angular/account/containers/template';\nimport { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';\nimport type { I18n } from '@keycloakify/angular/account/i18n';\nimport type { KcContext } from '@keycloakify/angular/account/KcContext';\nimport { ACCOUNT_CLASSES } from '@keycloakify/angular/account/tokens/classes';\nimport { ACCOUNT_I18N } from '@keycloakify/angular/account/tokens/i18n';\nimport { KC_ACCOUNT_CONTEXT } from '@keycloakify/angular/account/tokens/kc-context';\nimport { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';\nimport type { ClassKey } from 'keycloakify/account';\n\n@Component({\n standalone: true,\n imports: [KcClassDirective, TemplateComponent, NgClass],\n selector: 'kc-sessions',\n templateUrl: 'sessions.component.html',\n providers: [\n {\n provide: ComponentReference,\n useExisting: forwardRef(() => SessionsComponent)\n }\n ]\n})\nexport class SessionsComponent extends ComponentReference {\n i18n = inject<I18n>(ACCOUNT_I18N);\n kcContext = inject<Extract<KcContext, { pageId: 'sessions.ftl' }>>(KC_ACCOUNT_CONTEXT);\n override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);\n override classes = inject<Partial<Record<ClassKey, string>>>(ACCOUNT_CLASSES);\n active = 'sessions';\n}\n","@let url = kcContext.url;\n@let sessions = kcContext.sessions;\n@let stateChecker = kcContext.stateChecker;\n\n<div [kcClass]=\"'kcContentWrapperClass'\">\n <div class=\"col-md-10\">\n <h2>{{ i18n.msgStr('sessionsHtmlTitle') }}</h2>\n </div>\n</div>\n\n<table class=\"table table-striped table-bordered\">\n <thead>\n <tr>\n <th>{{ i18n.msgStr('ip') }}</th>\n <th>{{ i18n.msgStr('started') }}</th>\n <th>{{ i18n.msgStr('lastAccess') }}</th>\n <th>{{ i18n.msgStr('expires') }}</th>\n <th>{{ i18n.msgStr('clients') }}</th>\n </tr>\n </thead>\n\n <tbody role=\"rowgroup\">\n @for (session of sessions.sessions; track session) {\n <tr>\n <td>{{ session.ipAddress }}</td>\n <td>{{ session?.started }}</td>\n <td>{{ session?.lastAccess }}</td>\n <td>{{ session?.expires }}</td>\n <td>\n @for (client of session.clients; track client) {\n <div>\n {{ client }}\n <br />\n </div>\n }\n </td>\n </tr>\n }\n </tbody>\n</table>\n\n<form\n method=\"post\"\n [action]=\"url.sessionsUrl\"\n>\n <input\n type=\"hidden\"\n id=\"stateChecker\"\n name=\"stateChecker\"\n [value]=\"stateChecker\"\n />\n <button\n id=\"logout-all-sessions\"\n type=\"submit\"\n [kcClass]=\"['kcButtonDefaultClass', 'kcButtonClass']\"\n >\n {{ i18n.msgStr('doLogOutAllSessions') }}\n </button>\n</form>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;AAyBM,MAAO,iBAAkB,SAAQ,kBAAkB,CAAA;AAZzD,IAAA,WAAA,GAAA;;AAaI,QAAA,IAAA,CAAA,IAAI,GAAG,MAAM,CAAO,YAAY,CAAC,CAAC;AAClC,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAiD,kBAAkB,CAAC,CAAC;AAC9E,QAAA,IAAA,CAAA,eAAe,GAAG,MAAM,CAAU,eAAe,CAAC,CAAC;AACnD,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAoC,eAAe,CAAC,CAAC;QAC9E,IAAM,CAAA,MAAA,GAAG,UAAU,CAAC;AACvB,KAAA;8GANY,iBAAiB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EAPf,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,SAAA,EAAA;AACP,YAAA;AACI,gBAAA,OAAO,EAAE,kBAAkB;AAC3B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,iBAAiB,CAAC;AACnD,aAAA;SACJ,ECvBL,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,uqDA2DA,4CD5Cc,gBAAgB,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAUjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAZ7B,SAAS;iCACM,IAAI,EAAA,OAAA,EACP,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,OAAO,CAAC,EAC7C,QAAA,EAAA,aAAa,EAEZ,SAAA,EAAA;AACP,wBAAA;AACI,4BAAA,OAAO,EAAE,kBAAkB;AAC3B,4BAAA,WAAW,EAAE,UAAU,CAAC,uBAAuB,CAAC;AACnD,yBAAA;AACJ,qBAAA,EAAA,QAAA,EAAA,uqDAAA,EAAA,CAAA;;;AEvBL;;AAEG;;;;"}

package/fesm2022/keycloakify-angular-account-pages-totp.mjs CHANGED Viewed

@@ -17,23 +17,24 @@ class TotpComponent extends ComponentReference {
         this.kcContext = inject(KC_ACCOUNT_CONTEXT);
         this.doUseDefaultCss = inject(USE_DEFAULT_CSS);
         this.classes = inject(ACCOUNT_CLASSES);
+        this.active = 'totp';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TotpComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: TotpComponent, isStandalone: true, selector: "kc-root", providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: TotpComponent, isStandalone: true, selector: "kc-totp", providers: [
             {
                 provide: ComponentReference,
                 useExisting: forwardRef(() => TotpComponent)
             }
-        ], usesInheritance: true, ngImport: i0, template: "@let url = kcContext.url;\n@let mode = kcContext.mode;\n@let messagesPerField = kcContext.messagesPerField;\n@let stateChecker = kcContext.stateChecker;\n@let totp = kcContext.totp;\n\n<kc-account-template [active]=\"'totp'\">\n    <ng-container content>\n        <div class=\"row\">\n            <div class=\"col-md-10\">\n                <h2>{{ i18n.msgStr('authenticatorTitle') }}</h2>\n            </div>\n            @if (totp.otpCredentials.length) {\n                <div class=\"subtitle col-md-2\">\n                    <span class=\"required\">*</span>\n                    {{ i18n.msgStr('requiredFields') }}\n                </div>\n            }\n        </div>\n        @if (totp.enabled) {\n            <table class=\"table table-bordered table-striped\">\n                <thead>\n                    @if (totp.otpCredentials.length > 1) {\n                        <tr>\n                            <th [colSpan]=\"4\">{{ i18n.msgStr('configureAuthenticators') }}</th>\n                        </tr>\n                    } @else {\n                        <tr>\n                            <th [colSpan]=\"3\">{{ i18n.msgStr('configureAuthenticators') }}</th>\n                        </tr>\n                    }\n                </thead>\n                <tbody>\n                    @for (credential of totp.otpCredentials; track credential; let index = $index) {\n                        <tr>\n                            <td class=\"provider\">{{ i18n.msgStr('mobile') }}</td>\n                            @if (totp.otpCredentials.length > 1) {\n                                <td class=\"provider\">{{ credential.id }}</td>\n                            }\n                            <td class=\"provider\">{{ credential.userLabel || '' }}</td>\n                            <td class=\"action\">\n                                <form\n                                    method=\"post\"\n                                    class=\"form-inline\"\n                                    [action]=\"url.totpUrl\"\n                                >\n                                    <input\n                                        type=\"hidden\"\n                                        id=\"stateChecker\"\n                                        name=\"stateChecker\"\n                                        [value]=\"stateChecker\"\n                                    />\n                                    <input\n                                        type=\"hidden\"\n                                        id=\"submitAction\"\n                                        name=\"submitAction\"\n                                        value=\"Delete\"\n                                    />\n                                    <input\n                                        type=\"hidden\"\n                                        id=\"credentialId\"\n                                        name=\"credentialId\"\n                                        [value]=\"credential.id\"\n                                    />\n                                    <button\n                                        class=\"btn btn-default\"\n                                        [id]=\"'remove-mobile-' + index\"\n                                    >\n                                        <i class=\"pficon pficon-delete\"></i>\n                                    </button>\n                                </form>\n                            </td>\n                        </tr>\n                    }\n                </tbody>\n            </table>\n        } @else {\n            <div>\n                <hr />\n                <ol id=\"kc-totp-settings\">\n                    <li>\n                        <p>{{ i18n.msgStr('totpStep1') }}</p>\n\n                        <ul id=\"kc-totp-supported-apps\">\n                            @for (app of totp.supportedApplications; track app) {\n                                <li>{{ i18n.advancedMsgStr(app) }}</li>\n                            }\n                        </ul>\n                    </li>\n                    @if (mode && mode === 'manual') {\n                        <li>\n                            <p>{{ i18n.msgStr('totpManualStep2') }}</p>\n                            <p>\n                                <span id=\"kc-totp-secret-key\">{{ totp.totpSecretEncoded }}</span>\n                            </p>\n                            <p>\n                                <a\n                                    id=\"mode-barcode\"\n                                    [href]=\"totp.qrUrl\"\n                                >\n                                    {{ i18n.msgStr('totpScanBarcode') }}\n                                </a>\n                            </p>\n                        </li>\n                        <li>\n                            <p>{{ i18n.msgStr('totpManualStep3') }}</p>\n                            <ul>\n                                <li id=\"kc-totp-type\">{{ i18n.msgStr('totpType') }}: {{ i18n.msgStr($any('totp.' + totp.policy.type)) }}</li>\n                                <li id=\"kc-totp-algorithm\">{{ i18n.msgStr('totpAlgorithm') }}: {{ totp.policy.getAlgorithmKey() }}</li>\n                                <li id=\"kc-totp-digits\">{{ i18n.msgStr('totpDigits') }}: {{ totp.policy.digits }}</li>\n                                @if (totp.policy.type === 'totp') {\n                                    <li id=\"kc-totp-period\">{{ i18n.msgStr('totpInterval') }}: {{ totp.policy.period }}</li>\n                                } @else {\n                                    <li id=\"kc-totp-counter\">{{ i18n.msgStr('totpCounter') }}: {{ totp.policy.initialCounter }}</li>\n                                }\n                            </ul>\n                        </li>\n                    } @else {\n                        <li>\n                            <p>{{ i18n.msgStr('totpStep2') }}</p>\n                            <p>\n                                <img\n                                    id=\"kc-totp-secret-qr-code\"\n                                    alt=\"Figure: Barcode\"\n                                    [src]=\"'data:image/png;base64, ' + totp.totpSecretQrCode\"\n                                />\n                            </p>\n                            <p>\n                                <a\n                                    id=\"mode-manual\"\n                                    [href]=\"totp.manualUrl\"\n                                >\n                                    {{ i18n.msgStr('totpUnableToScan') }}\n                                </a>\n                            </p>\n                        </li>\n                    }\n                    <li>\n                        <p>{{ i18n.msgStr('totpStep3') }}</p>\n                        <p>{{ i18n.msgStr('totpStep3DeviceName') }}</p>\n                    </li>\n                </ol>\n                <hr />\n                <form\n                    id=\"kc-totp-settings-form\"\n                    method=\"post\"\n                    [action]=\"url.totpUrl\"\n                    [kcClass]=\"'kcFormClass'\"\n                >\n                    <input\n                        type=\"hidden\"\n                        id=\"stateChecker\"\n                        name=\"stateChecker\"\n                        [value]=\"stateChecker\"\n                    />\n                    <div [kcClass]=\"'kcFormGroupClass'\">\n                        <div class=\"col-sm-2 col-md-2\">\n                            <label\n                                for=\"totp\"\n                                class=\"control-label\"\n                            >\n                                {{ i18n.msgStr('authenticatorCode') }}\n                            </label>\n                            <span class=\"required\">*</span>\n                        </div>\n                        <div class=\"col-sm-10 col-md-10\">\n                            <input\n                                type=\"text\"\n                                id=\"totp\"\n                                name=\"totp\"\n                                autoComplete=\"off\"\n                                [kcClass]=\"'kcInputClass'\"\n                                [attr.aria-invalid]=\"messagesPerField.existsError('totp')\"\n                            />\n                            @if (messagesPerField.existsError('totp')) {\n                                <span\n                                    id=\"input-error-otp-code\"\n                                    aria-live=\"polite\"\n                                    [kcClass]=\"'kcInputErrorMessageClass'\"\n                                    [innerHTML]=\"messagesPerField.get('totp') | kcSanitize: 'html'\"\n                                ></span>\n                            }\n                        </div>\n                        <input\n                            type=\"hidden\"\n                            id=\"totpSecret\"\n                            name=\"totpSecret\"\n                            [value]=\"totp.totpSecret\"\n                        />\n                        @if (mode) {\n                            <input\n                                type=\"hidden\"\n                                id=\"mode\"\n                                [value]=\"mode\"\n                            />\n                        }\n                    </div>\n\n                    <div [kcClass]=\"'kcFormGroupClass'\">\n                        <div class=\"col-sm-2 col-md-2\">\n                            <label\n                                for=\"userLabel\"\n                                [kcClass]=\"'kcLabelClass'\"\n                            >\n                                {{ i18n.msgStr('totpDeviceName') }}\n                            </label>\n                            @if (totp.otpCredentials.length >= 1) {\n                                <span class=\"required\">*</span>\n                            }\n                        </div>\n                        <div class=\"col-sm-10 col-md-10\">\n                            <input\n                                type=\"text\"\n                                id=\"userLabel\"\n                                name=\"userLabel\"\n                                autoComplete=\"off\"\n                                [kcClass]=\"'kcInputClass'\"\n                                [attr.aria-invalid]=\"messagesPerField.existsError('userLabel')\"\n                            />\n                            @if (messagesPerField.existsError('userLabel')) {\n                                <span\n                                    id=\"input-error-otp-label\"\n                                    aria-live=\"polite\"\n                                    [kcClass]=\"'kcInputErrorMessageClass'\"\n                                    [innerHTML]=\"messagesPerField.get('userLabel') | kcSanitize: 'html'\"\n                                ></span>\n                            }\n                        </div>\n                    </div>\n\n                    <div\n                        id=\"kc-form-buttons\"\n                        class=\"text-right\"\n                        [kcClass]=\"'kcFormGroupClass'\"\n                    >\n                        <div [kcClass]=\"'kcInputWrapperClass'\">\n                            <input\n                                type=\"submit\"\n                                id=\"saveTOTPBtn\"\n                                [kcClass]=\"['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']\"\n                                [value]=\"i18n.msgStr('doSave')\"\n                            />\n                            <button\n                                type=\"submit\"\n                                id=\"cancelTOTPBtn\"\n                                name=\"submitAction\"\n                                value=\"Cancel\"\n                                [kcClass]=\"['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']\"\n                            >\n                                {{ i18n.msgStr('doCancel') }}\n                            </button>\n                        </div>\n                    </div>\n                </form>\n            </div>\n        }\n    </ng-container>\n</kc-account-template>\n", dependencies: [{ kind: "directive", type: KcClassDirective, selector: "[kcClass]", inputs: ["class", "ngClass", "kcClass"] }, { kind: "component", type: TemplateComponent, selector: "kc-account-template", inputs: ["active"] }, { kind: "pipe", type: KcSanitizePipe, name: "kcSanitize" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "@let url = kcContext.url;\n@let mode = kcContext.mode;\n@let messagesPerField = kcContext.messagesPerField;\n@let stateChecker = kcContext.stateChecker;\n@let totp = kcContext.totp;\n\n<div class=\"row\">\n    <div class=\"col-md-10\">\n        <h2>{{ i18n.msgStr('authenticatorTitle') }}</h2>\n    </div>\n    @if (totp.otpCredentials.length) {\n        <div class=\"subtitle col-md-2\">\n            <span class=\"required\">*</span>\n            {{ i18n.msgStr('requiredFields') }}\n        </div>\n    }\n</div>\n@if (totp.enabled) {\n    <table class=\"table table-bordered table-striped\">\n        <thead>\n            @if (totp.otpCredentials.length > 1) {\n                <tr>\n                    <th [colSpan]=\"4\">{{ i18n.msgStr('configureAuthenticators') }}</th>\n                </tr>\n            } @else {\n                <tr>\n                    <th [colSpan]=\"3\">{{ i18n.msgStr('configureAuthenticators') }}</th>\n                </tr>\n            }\n        </thead>\n        <tbody>\n            @for (credential of totp.otpCredentials; track credential; let index = $index) {\n                <tr>\n                    <td class=\"provider\">{{ i18n.msgStr('mobile') }}</td>\n                    @if (totp.otpCredentials.length > 1) {\n                        <td class=\"provider\">{{ credential.id }}</td>\n                    }\n                    <td class=\"provider\">{{ credential.userLabel || '' }}</td>\n                    <td class=\"action\">\n                        <form\n                            method=\"post\"\n                            class=\"form-inline\"\n                            [action]=\"url.totpUrl\"\n                        >\n                            <input\n                                type=\"hidden\"\n                                id=\"stateChecker\"\n                                name=\"stateChecker\"\n                                [value]=\"stateChecker\"\n                            />\n                            <input\n                                type=\"hidden\"\n                                id=\"submitAction\"\n                                name=\"submitAction\"\n                                value=\"Delete\"\n                            />\n                            <input\n                                type=\"hidden\"\n                                id=\"credentialId\"\n                                name=\"credentialId\"\n                                [value]=\"credential.id\"\n                            />\n                            <button\n                                class=\"btn btn-default\"\n                                [id]=\"'remove-mobile-' + index\"\n                            >\n                                <i class=\"pficon pficon-delete\"></i>\n                            </button>\n                        </form>\n                    </td>\n                </tr>\n            }\n        </tbody>\n    </table>\n} @else {\n    <div>\n        <hr />\n        <ol id=\"kc-totp-settings\">\n            <li>\n                <p>{{ i18n.msgStr('totpStep1') }}</p>\n\n                <ul id=\"kc-totp-supported-apps\">\n                    @for (app of totp.supportedApplications; track app) {\n                        <li>{{ i18n.advancedMsgStr(app) }}</li>\n                    }\n                </ul>\n            </li>\n            @if (mode && mode === 'manual') {\n                <li>\n                    <p>{{ i18n.msgStr('totpManualStep2') }}</p>\n                    <p>\n                        <span id=\"kc-totp-secret-key\">{{ totp.totpSecretEncoded }}</span>\n                    </p>\n                    <p>\n                        <a\n                            id=\"mode-barcode\"\n                            [href]=\"totp.qrUrl\"\n                        >\n                            {{ i18n.msgStr('totpScanBarcode') }}\n                        </a>\n                    </p>\n                </li>\n                <li>\n                    <p>{{ i18n.msgStr('totpManualStep3') }}</p>\n                    <ul>\n                        <li id=\"kc-totp-type\">{{ i18n.msgStr('totpType') }}: {{ i18n.msgStr($any('totp.' + totp.policy.type)) }}</li>\n                        <li id=\"kc-totp-algorithm\">{{ i18n.msgStr('totpAlgorithm') }}: {{ totp.policy.getAlgorithmKey() }}</li>\n                        <li id=\"kc-totp-digits\">{{ i18n.msgStr('totpDigits') }}: {{ totp.policy.digits }}</li>\n                        @if (totp.policy.type === 'totp') {\n                            <li id=\"kc-totp-period\">{{ i18n.msgStr('totpInterval') }}: {{ totp.policy.period }}</li>\n                        } @else {\n                            <li id=\"kc-totp-counter\">{{ i18n.msgStr('totpCounter') }}: {{ totp.policy.initialCounter }}</li>\n                        }\n                    </ul>\n                </li>\n            } @else {\n                <li>\n                    <p>{{ i18n.msgStr('totpStep2') }}</p>\n                    <p>\n                        <img\n                            id=\"kc-totp-secret-qr-code\"\n                            alt=\"Figure: Barcode\"\n                            [src]=\"'data:image/png;base64, ' + totp.totpSecretQrCode\"\n                        />\n                    </p>\n                    <p>\n                        <a\n                            id=\"mode-manual\"\n                            [href]=\"totp.manualUrl\"\n                        >\n                            {{ i18n.msgStr('totpUnableToScan') }}\n                        </a>\n                    </p>\n                </li>\n            }\n            <li>\n                <p>{{ i18n.msgStr('totpStep3') }}</p>\n                <p>{{ i18n.msgStr('totpStep3DeviceName') }}</p>\n            </li>\n        </ol>\n        <hr />\n        <form\n            id=\"kc-totp-settings-form\"\n            method=\"post\"\n            [action]=\"url.totpUrl\"\n            [kcClass]=\"'kcFormClass'\"\n        >\n            <input\n                type=\"hidden\"\n                id=\"stateChecker\"\n                name=\"stateChecker\"\n                [value]=\"stateChecker\"\n            />\n            <div [kcClass]=\"'kcFormGroupClass'\">\n                <div class=\"col-sm-2 col-md-2\">\n                    <label\n                        for=\"totp\"\n                        class=\"control-label\"\n                    >\n                        {{ i18n.msgStr('authenticatorCode') }}\n                    </label>\n                    <span class=\"required\">*</span>\n                </div>\n                <div class=\"col-sm-10 col-md-10\">\n                    <input\n                        type=\"text\"\n                        id=\"totp\"\n                        name=\"totp\"\n                        autoComplete=\"off\"\n                        [kcClass]=\"'kcInputClass'\"\n                        [attr.aria-invalid]=\"messagesPerField.existsError('totp')\"\n                    />\n                    @if (messagesPerField.existsError('totp')) {\n                        <span\n                            id=\"input-error-otp-code\"\n                            aria-live=\"polite\"\n                            [kcClass]=\"'kcInputErrorMessageClass'\"\n                            [innerHTML]=\"messagesPerField.get('totp') | kcSanitize: 'html'\"\n                        ></span>\n                    }\n                </div>\n                <input\n                    type=\"hidden\"\n                    id=\"totpSecret\"\n                    name=\"totpSecret\"\n                    [value]=\"totp.totpSecret\"\n                />\n                @if (mode) {\n                    <input\n                        type=\"hidden\"\n                        id=\"mode\"\n                        [value]=\"mode\"\n                    />\n                }\n            </div>\n\n            <div [kcClass]=\"'kcFormGroupClass'\">\n                <div class=\"col-sm-2 col-md-2\">\n                    <label\n                        for=\"userLabel\"\n                        [kcClass]=\"'kcLabelClass'\"\n                    >\n                        {{ i18n.msgStr('totpDeviceName') }}\n                    </label>\n                    @if (totp.otpCredentials.length >= 1) {\n                        <span class=\"required\">*</span>\n                    }\n                </div>\n                <div class=\"col-sm-10 col-md-10\">\n                    <input\n                        type=\"text\"\n                        id=\"userLabel\"\n                        name=\"userLabel\"\n                        autoComplete=\"off\"\n                        [kcClass]=\"'kcInputClass'\"\n                        [attr.aria-invalid]=\"messagesPerField.existsError('userLabel')\"\n                    />\n                    @if (messagesPerField.existsError('userLabel')) {\n                        <span\n                            id=\"input-error-otp-label\"\n                            aria-live=\"polite\"\n                            [kcClass]=\"'kcInputErrorMessageClass'\"\n                            [innerHTML]=\"messagesPerField.get('userLabel') | kcSanitize: 'html'\"\n                        ></span>\n                    }\n                </div>\n            </div>\n\n            <div\n                id=\"kc-form-buttons\"\n                class=\"text-right\"\n                [kcClass]=\"'kcFormGroupClass'\"\n            >\n                <div [kcClass]=\"'kcInputWrapperClass'\">\n                    <input\n                        type=\"submit\"\n                        id=\"saveTOTPBtn\"\n                        [kcClass]=\"['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']\"\n                        [value]=\"i18n.msgStr('doSave')\"\n                    />\n                    <button\n                        type=\"submit\"\n                        id=\"cancelTOTPBtn\"\n                        name=\"submitAction\"\n                        value=\"Cancel\"\n                        [kcClass]=\"['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']\"\n                    >\n                        {{ i18n.msgStr('doCancel') }}\n                    </button>\n                </div>\n            </div>\n        </form>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: KcClassDirective, selector: "[kcClass]", inputs: ["class", "ngClass", "kcClass"] }, { kind: "pipe", type: KcSanitizePipe, name: "kcSanitize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TotpComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [KcClassDirective, TemplateComponent, KcSanitizePipe, NgClass], selector: 'kc-root', providers: [
+            args: [{ standalone: true, imports: [KcClassDirective, TemplateComponent, KcSanitizePipe, NgClass], selector: 'kc-totp', providers: [
                         {
                             provide: ComponentReference,
                             useExisting: forwardRef(() => TotpComponent)
                         }
-                    ], template: "@let url = kcContext.url;\n@let mode = kcContext.mode;\n@let messagesPerField = kcContext.messagesPerField;\n@let stateChecker = kcContext.stateChecker;\n@let totp = kcContext.totp;\n\n<kc-account-template [active]=\"'totp'\">\n    <ng-container content>\n        <div class=\"row\">\n            <div class=\"col-md-10\">\n                <h2>{{ i18n.msgStr('authenticatorTitle') }}</h2>\n            </div>\n            @if (totp.otpCredentials.length) {\n                <div class=\"subtitle col-md-2\">\n                    <span class=\"required\">*</span>\n                    {{ i18n.msgStr('requiredFields') }}\n                </div>\n            }\n        </div>\n        @if (totp.enabled) {\n            <table class=\"table table-bordered table-striped\">\n                <thead>\n                    @if (totp.otpCredentials.length > 1) {\n                        <tr>\n                            <th [colSpan]=\"4\">{{ i18n.msgStr('configureAuthenticators') }}</th>\n                        </tr>\n                    } @else {\n                        <tr>\n                            <th [colSpan]=\"3\">{{ i18n.msgStr('configureAuthenticators') }}</th>\n                        </tr>\n                    }\n                </thead>\n                <tbody>\n                    @for (credential of totp.otpCredentials; track credential; let index = $index) {\n                        <tr>\n                            <td class=\"provider\">{{ i18n.msgStr('mobile') }}</td>\n                            @if (totp.otpCredentials.length > 1) {\n                                <td class=\"provider\">{{ credential.id }}</td>\n                            }\n                            <td class=\"provider\">{{ credential.userLabel || '' }}</td>\n                            <td class=\"action\">\n                                <form\n                                    method=\"post\"\n                                    class=\"form-inline\"\n                                    [action]=\"url.totpUrl\"\n                                >\n                                    <input\n                                        type=\"hidden\"\n                                        id=\"stateChecker\"\n                                        name=\"stateChecker\"\n                                        [value]=\"stateChecker\"\n                                    />\n                                    <input\n                                        type=\"hidden\"\n                                        id=\"submitAction\"\n                                        name=\"submitAction\"\n                                        value=\"Delete\"\n                                    />\n                                    <input\n                                        type=\"hidden\"\n                                        id=\"credentialId\"\n                                        name=\"credentialId\"\n                                        [value]=\"credential.id\"\n                                    />\n                                    <button\n                                        class=\"btn btn-default\"\n                                        [id]=\"'remove-mobile-' + index\"\n                                    >\n                                        <i class=\"pficon pficon-delete\"></i>\n                                    </button>\n                                </form>\n                            </td>\n                        </tr>\n                    }\n                </tbody>\n            </table>\n        } @else {\n            <div>\n                <hr />\n                <ol id=\"kc-totp-settings\">\n                    <li>\n                        <p>{{ i18n.msgStr('totpStep1') }}</p>\n\n                        <ul id=\"kc-totp-supported-apps\">\n                            @for (app of totp.supportedApplications; track app) {\n                                <li>{{ i18n.advancedMsgStr(app) }}</li>\n                            }\n                        </ul>\n                    </li>\n                    @if (mode && mode === 'manual') {\n                        <li>\n                            <p>{{ i18n.msgStr('totpManualStep2') }}</p>\n                            <p>\n                                <span id=\"kc-totp-secret-key\">{{ totp.totpSecretEncoded }}</span>\n                            </p>\n                            <p>\n                                <a\n                                    id=\"mode-barcode\"\n                                    [href]=\"totp.qrUrl\"\n                                >\n                                    {{ i18n.msgStr('totpScanBarcode') }}\n                                </a>\n                            </p>\n                        </li>\n                        <li>\n                            <p>{{ i18n.msgStr('totpManualStep3') }}</p>\n                            <ul>\n                                <li id=\"kc-totp-type\">{{ i18n.msgStr('totpType') }}: {{ i18n.msgStr($any('totp.' + totp.policy.type)) }}</li>\n                                <li id=\"kc-totp-algorithm\">{{ i18n.msgStr('totpAlgorithm') }}: {{ totp.policy.getAlgorithmKey() }}</li>\n                                <li id=\"kc-totp-digits\">{{ i18n.msgStr('totpDigits') }}: {{ totp.policy.digits }}</li>\n                                @if (totp.policy.type === 'totp') {\n                                    <li id=\"kc-totp-period\">{{ i18n.msgStr('totpInterval') }}: {{ totp.policy.period }}</li>\n                                } @else {\n                                    <li id=\"kc-totp-counter\">{{ i18n.msgStr('totpCounter') }}: {{ totp.policy.initialCounter }}</li>\n                                }\n                            </ul>\n                        </li>\n                    } @else {\n                        <li>\n                            <p>{{ i18n.msgStr('totpStep2') }}</p>\n                            <p>\n                                <img\n                                    id=\"kc-totp-secret-qr-code\"\n                                    alt=\"Figure: Barcode\"\n                                    [src]=\"'data:image/png;base64, ' + totp.totpSecretQrCode\"\n                                />\n                            </p>\n                            <p>\n                                <a\n                                    id=\"mode-manual\"\n                                    [href]=\"totp.manualUrl\"\n                                >\n                                    {{ i18n.msgStr('totpUnableToScan') }}\n                                </a>\n                            </p>\n                        </li>\n                    }\n                    <li>\n                        <p>{{ i18n.msgStr('totpStep3') }}</p>\n                        <p>{{ i18n.msgStr('totpStep3DeviceName') }}</p>\n                    </li>\n                </ol>\n                <hr />\n                <form\n                    id=\"kc-totp-settings-form\"\n                    method=\"post\"\n                    [action]=\"url.totpUrl\"\n                    [kcClass]=\"'kcFormClass'\"\n                >\n                    <input\n                        type=\"hidden\"\n                        id=\"stateChecker\"\n                        name=\"stateChecker\"\n                        [value]=\"stateChecker\"\n                    />\n                    <div [kcClass]=\"'kcFormGroupClass'\">\n                        <div class=\"col-sm-2 col-md-2\">\n                            <label\n                                for=\"totp\"\n                                class=\"control-label\"\n                            >\n                                {{ i18n.msgStr('authenticatorCode') }}\n                            </label>\n                            <span class=\"required\">*</span>\n                        </div>\n                        <div class=\"col-sm-10 col-md-10\">\n                            <input\n                                type=\"text\"\n                                id=\"totp\"\n                                name=\"totp\"\n                                autoComplete=\"off\"\n                                [kcClass]=\"'kcInputClass'\"\n                                [attr.aria-invalid]=\"messagesPerField.existsError('totp')\"\n                            />\n                            @if (messagesPerField.existsError('totp')) {\n                                <span\n                                    id=\"input-error-otp-code\"\n                                    aria-live=\"polite\"\n                                    [kcClass]=\"'kcInputErrorMessageClass'\"\n                                    [innerHTML]=\"messagesPerField.get('totp') | kcSanitize: 'html'\"\n                                ></span>\n                            }\n                        </div>\n                        <input\n                            type=\"hidden\"\n                            id=\"totpSecret\"\n                            name=\"totpSecret\"\n                            [value]=\"totp.totpSecret\"\n                        />\n                        @if (mode) {\n                            <input\n                                type=\"hidden\"\n                                id=\"mode\"\n                                [value]=\"mode\"\n                            />\n                        }\n                    </div>\n\n                    <div [kcClass]=\"'kcFormGroupClass'\">\n                        <div class=\"col-sm-2 col-md-2\">\n                            <label\n                                for=\"userLabel\"\n                                [kcClass]=\"'kcLabelClass'\"\n                            >\n                                {{ i18n.msgStr('totpDeviceName') }}\n                            </label>\n                            @if (totp.otpCredentials.length >= 1) {\n                                <span class=\"required\">*</span>\n                            }\n                        </div>\n                        <div class=\"col-sm-10 col-md-10\">\n                            <input\n                                type=\"text\"\n                                id=\"userLabel\"\n                                name=\"userLabel\"\n                                autoComplete=\"off\"\n                                [kcClass]=\"'kcInputClass'\"\n                                [attr.aria-invalid]=\"messagesPerField.existsError('userLabel')\"\n                            />\n                            @if (messagesPerField.existsError('userLabel')) {\n                                <span\n                                    id=\"input-error-otp-label\"\n                                    aria-live=\"polite\"\n                                    [kcClass]=\"'kcInputErrorMessageClass'\"\n                                    [innerHTML]=\"messagesPerField.get('userLabel') | kcSanitize: 'html'\"\n                                ></span>\n                            }\n                        </div>\n                    </div>\n\n                    <div\n                        id=\"kc-form-buttons\"\n                        class=\"text-right\"\n                        [kcClass]=\"'kcFormGroupClass'\"\n                    >\n                        <div [kcClass]=\"'kcInputWrapperClass'\">\n                            <input\n                                type=\"submit\"\n                                id=\"saveTOTPBtn\"\n                                [kcClass]=\"['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']\"\n                                [value]=\"i18n.msgStr('doSave')\"\n                            />\n                            <button\n                                type=\"submit\"\n                                id=\"cancelTOTPBtn\"\n                                name=\"submitAction\"\n                                value=\"Cancel\"\n                                [kcClass]=\"['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']\"\n                            >\n                                {{ i18n.msgStr('doCancel') }}\n                            </button>\n                        </div>\n                    </div>\n                </form>\n            </div>\n        }\n    </ng-container>\n</kc-account-template>\n" }]
+                    ], template: "@let url = kcContext.url;\n@let mode = kcContext.mode;\n@let messagesPerField = kcContext.messagesPerField;\n@let stateChecker = kcContext.stateChecker;\n@let totp = kcContext.totp;\n\n<div class=\"row\">\n    <div class=\"col-md-10\">\n        <h2>{{ i18n.msgStr('authenticatorTitle') }}</h2>\n    </div>\n    @if (totp.otpCredentials.length) {\n        <div class=\"subtitle col-md-2\">\n            <span class=\"required\">*</span>\n            {{ i18n.msgStr('requiredFields') }}\n        </div>\n    }\n</div>\n@if (totp.enabled) {\n    <table class=\"table table-bordered table-striped\">\n        <thead>\n            @if (totp.otpCredentials.length > 1) {\n                <tr>\n                    <th [colSpan]=\"4\">{{ i18n.msgStr('configureAuthenticators') }}</th>\n                </tr>\n            } @else {\n                <tr>\n                    <th [colSpan]=\"3\">{{ i18n.msgStr('configureAuthenticators') }}</th>\n                </tr>\n            }\n        </thead>\n        <tbody>\n            @for (credential of totp.otpCredentials; track credential; let index = $index) {\n                <tr>\n                    <td class=\"provider\">{{ i18n.msgStr('mobile') }}</td>\n                    @if (totp.otpCredentials.length > 1) {\n                        <td class=\"provider\">{{ credential.id }}</td>\n                    }\n                    <td class=\"provider\">{{ credential.userLabel || '' }}</td>\n                    <td class=\"action\">\n                        <form\n                            method=\"post\"\n                            class=\"form-inline\"\n                            [action]=\"url.totpUrl\"\n                        >\n                            <input\n                                type=\"hidden\"\n                                id=\"stateChecker\"\n                                name=\"stateChecker\"\n                                [value]=\"stateChecker\"\n                            />\n                            <input\n                                type=\"hidden\"\n                                id=\"submitAction\"\n                                name=\"submitAction\"\n                                value=\"Delete\"\n                            />\n                            <input\n                                type=\"hidden\"\n                                id=\"credentialId\"\n                                name=\"credentialId\"\n                                [value]=\"credential.id\"\n                            />\n                            <button\n                                class=\"btn btn-default\"\n                                [id]=\"'remove-mobile-' + index\"\n                            >\n                                <i class=\"pficon pficon-delete\"></i>\n                            </button>\n                        </form>\n                    </td>\n                </tr>\n            }\n        </tbody>\n    </table>\n} @else {\n    <div>\n        <hr />\n        <ol id=\"kc-totp-settings\">\n            <li>\n                <p>{{ i18n.msgStr('totpStep1') }}</p>\n\n                <ul id=\"kc-totp-supported-apps\">\n                    @for (app of totp.supportedApplications; track app) {\n                        <li>{{ i18n.advancedMsgStr(app) }}</li>\n                    }\n                </ul>\n            </li>\n            @if (mode && mode === 'manual') {\n                <li>\n                    <p>{{ i18n.msgStr('totpManualStep2') }}</p>\n                    <p>\n                        <span id=\"kc-totp-secret-key\">{{ totp.totpSecretEncoded }}</span>\n                    </p>\n                    <p>\n                        <a\n                            id=\"mode-barcode\"\n                            [href]=\"totp.qrUrl\"\n                        >\n                            {{ i18n.msgStr('totpScanBarcode') }}\n                        </a>\n                    </p>\n                </li>\n                <li>\n                    <p>{{ i18n.msgStr('totpManualStep3') }}</p>\n                    <ul>\n                        <li id=\"kc-totp-type\">{{ i18n.msgStr('totpType') }}: {{ i18n.msgStr($any('totp.' + totp.policy.type)) }}</li>\n                        <li id=\"kc-totp-algorithm\">{{ i18n.msgStr('totpAlgorithm') }}: {{ totp.policy.getAlgorithmKey() }}</li>\n                        <li id=\"kc-totp-digits\">{{ i18n.msgStr('totpDigits') }}: {{ totp.policy.digits }}</li>\n                        @if (totp.policy.type === 'totp') {\n                            <li id=\"kc-totp-period\">{{ i18n.msgStr('totpInterval') }}: {{ totp.policy.period }}</li>\n                        } @else {\n                            <li id=\"kc-totp-counter\">{{ i18n.msgStr('totpCounter') }}: {{ totp.policy.initialCounter }}</li>\n                        }\n                    </ul>\n                </li>\n            } @else {\n                <li>\n                    <p>{{ i18n.msgStr('totpStep2') }}</p>\n                    <p>\n                        <img\n                            id=\"kc-totp-secret-qr-code\"\n                            alt=\"Figure: Barcode\"\n                            [src]=\"'data:image/png;base64, ' + totp.totpSecretQrCode\"\n                        />\n                    </p>\n                    <p>\n                        <a\n                            id=\"mode-manual\"\n                            [href]=\"totp.manualUrl\"\n                        >\n                            {{ i18n.msgStr('totpUnableToScan') }}\n                        </a>\n                    </p>\n                </li>\n            }\n            <li>\n                <p>{{ i18n.msgStr('totpStep3') }}</p>\n                <p>{{ i18n.msgStr('totpStep3DeviceName') }}</p>\n            </li>\n        </ol>\n        <hr />\n        <form\n            id=\"kc-totp-settings-form\"\n            method=\"post\"\n            [action]=\"url.totpUrl\"\n            [kcClass]=\"'kcFormClass'\"\n        >\n            <input\n                type=\"hidden\"\n                id=\"stateChecker\"\n                name=\"stateChecker\"\n                [value]=\"stateChecker\"\n            />\n            <div [kcClass]=\"'kcFormGroupClass'\">\n                <div class=\"col-sm-2 col-md-2\">\n                    <label\n                        for=\"totp\"\n                        class=\"control-label\"\n                    >\n                        {{ i18n.msgStr('authenticatorCode') }}\n                    </label>\n                    <span class=\"required\">*</span>\n                </div>\n                <div class=\"col-sm-10 col-md-10\">\n                    <input\n                        type=\"text\"\n                        id=\"totp\"\n                        name=\"totp\"\n                        autoComplete=\"off\"\n                        [kcClass]=\"'kcInputClass'\"\n                        [attr.aria-invalid]=\"messagesPerField.existsError('totp')\"\n                    />\n                    @if (messagesPerField.existsError('totp')) {\n                        <span\n                            id=\"input-error-otp-code\"\n                            aria-live=\"polite\"\n                            [kcClass]=\"'kcInputErrorMessageClass'\"\n                            [innerHTML]=\"messagesPerField.get('totp') | kcSanitize: 'html'\"\n                        ></span>\n                    }\n                </div>\n                <input\n                    type=\"hidden\"\n                    id=\"totpSecret\"\n                    name=\"totpSecret\"\n                    [value]=\"totp.totpSecret\"\n                />\n                @if (mode) {\n                    <input\n                        type=\"hidden\"\n                        id=\"mode\"\n                        [value]=\"mode\"\n                    />\n                }\n            </div>\n\n            <div [kcClass]=\"'kcFormGroupClass'\">\n                <div class=\"col-sm-2 col-md-2\">\n                    <label\n                        for=\"userLabel\"\n                        [kcClass]=\"'kcLabelClass'\"\n                    >\n                        {{ i18n.msgStr('totpDeviceName') }}\n                    </label>\n                    @if (totp.otpCredentials.length >= 1) {\n                        <span class=\"required\">*</span>\n                    }\n                </div>\n                <div class=\"col-sm-10 col-md-10\">\n                    <input\n                        type=\"text\"\n                        id=\"userLabel\"\n                        name=\"userLabel\"\n                        autoComplete=\"off\"\n                        [kcClass]=\"'kcInputClass'\"\n                        [attr.aria-invalid]=\"messagesPerField.existsError('userLabel')\"\n                    />\n                    @if (messagesPerField.existsError('userLabel')) {\n                        <span\n                            id=\"input-error-otp-label\"\n                            aria-live=\"polite\"\n                            [kcClass]=\"'kcInputErrorMessageClass'\"\n                            [innerHTML]=\"messagesPerField.get('userLabel') | kcSanitize: 'html'\"\n                        ></span>\n                    }\n                </div>\n            </div>\n\n            <div\n                id=\"kc-form-buttons\"\n                class=\"text-right\"\n                [kcClass]=\"'kcFormGroupClass'\"\n            >\n                <div [kcClass]=\"'kcInputWrapperClass'\">\n                    <input\n                        type=\"submit\"\n                        id=\"saveTOTPBtn\"\n                        [kcClass]=\"['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']\"\n                        [value]=\"i18n.msgStr('doSave')\"\n                    />\n                    <button\n                        type=\"submit\"\n                        id=\"cancelTOTPBtn\"\n                        name=\"submitAction\"\n                        value=\"Cancel\"\n                        [kcClass]=\"['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']\"\n                    >\n                        {{ i18n.msgStr('doCancel') }}\n                    </button>\n                </div>\n            </div>\n        </form>\n    </div>\n}\n" }]
         }] });
 /**

package/fesm2022/keycloakify-angular-account-pages-totp.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"keycloakify-angular-account-pages-totp.mjs","sources":["../../src/account/pages/totp/totp.component.ts","../../src/account/pages/totp/totp.component.html","../../src/account/pages/totp/keycloakify-angular-account-pages-totp.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\nimport { Component, forwardRef, inject } from '@angular/core';\nimport { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';\nimport { TemplateComponent } from '@keycloakify/angular/account/containers/template';\nimport { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';\nimport { ACCOUNT_CLASSES } from '@keycloakify/angular/account/tokens/classes';\nimport { ACCOUNT_I18N } from '@keycloakify/angular/account/tokens/i18n';\nimport { KC_ACCOUNT_CONTEXT } from '@keycloakify/angular/account/tokens/kc-context';\nimport { KcSanitizePipe } from '@keycloakify/angular/lib/pipes/kc-sanitize';\nimport { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';\nimport type { ClassKey } from 'keycloakify/account';\nimport type { I18n } from '@keycloakify/angular/account/i18n';\nimport type { KcContext } from '@keycloakify/angular/account/KcContext';\n\n@Component({\n standalone: true,\n imports: [KcClassDirective, TemplateComponent, KcSanitizePipe, NgClass],\n selector: 'kc-root',\n templateUrl: 'totp.component.html',\n providers: [\n {\n provide: ComponentReference,\n useExisting: forwardRef(() => TotpComponent)\n }\n ]\n})\nexport class TotpComponent extends ComponentReference {\n i18n = inject<I18n>(ACCOUNT_I18N);\n kcContext = inject<Extract<KcContext, { pageId: 'totp.ftl' }>>(KC_ACCOUNT_CONTEXT);\n override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);\n override classes = inject<Partial<Record<ClassKey, string>>>(ACCOUNT_CLASSES);\n}\n","@let url = kcContext.url;\n@let mode = kcContext.mode;\n@let messagesPerField = kcContext.messagesPerField;\n@let stateChecker = kcContext.stateChecker;\n@let totp = kcContext.totp;\n\n<kc-account-template [active]=\"'totp'\">\n <ng-container content>\n <div class=\"row\">\n <div class=\"col-md-10\">\n <h2>{{ i18n.msgStr('authenticatorTitle') }}</h2>\n </div>\n @if (totp.otpCredentials.length) {\n <div class=\"subtitle col-md-2\">\n <span class=\"required\"></span>\n {{ i18n.msgStr('requiredFields') }}\n </div>\n }\n </div>\n @if (totp.enabled) {\n <table class=\"table table-bordered table-striped\">\n <thead>\n @if (totp.otpCredentials.length > 1) {\n <tr>\n <th [colSpan]=\"4\">{{ i18n.msgStr('configureAuthenticators') }}</th>\n </tr>\n } @else {\n <tr>\n <th [colSpan]=\"3\">{{ i18n.msgStr('configureAuthenticators') }}</th>\n </tr>\n }\n </thead>\n <tbody>\n @for (credential of totp.otpCredentials; track credential; let index = $index) {\n <tr>\n <td class=\"provider\">{{ i18n.msgStr('mobile') }}</td>\n @if (totp.otpCredentials.length > 1) {\n <td class=\"provider\">{{ credential.id }}</td>\n }\n <td class=\"provider\">{{ credential.userLabel \|\| '' }}</td>\n <td class=\"action\">\n <form\n method=\"post\"\n class=\"form-inline\"\n [action]=\"url.totpUrl\"\n >\n <input\n type=\"hidden\"\n id=\"stateChecker\"\n name=\"stateChecker\"\n [value]=\"stateChecker\"\n />\n <input\n type=\"hidden\"\n id=\"submitAction\"\n name=\"submitAction\"\n value=\"Delete\"\n />\n <input\n type=\"hidden\"\n id=\"credentialId\"\n name=\"credentialId\"\n [value]=\"credential.id\"\n />\n <button\n class=\"btn btn-default\"\n [id]=\"'remove-mobile-' + index\"\n >\n <i class=\"pficon pficon-delete\"></i>\n </button>\n </form>\n </td>\n </tr>\n }\n </tbody>\n </table>\n } @else {\n <div>\n <hr />\n <ol id=\"kc-totp-settings\">\n <li>\n <p>{{ i18n.msgStr('totpStep1') }}</p>\n\n <ul id=\"kc-totp-supported-apps\">\n @for (app of totp.supportedApplications; track app) {\n <li>{{ i18n.advancedMsgStr(app) }}</li>\n }\n </ul>\n </li>\n @if (mode && mode === 'manual') {\n <li>\n <p>{{ i18n.msgStr('totpManualStep2') }}</p>\n <p>\n <span id=\"kc-totp-secret-key\">{{ totp.totpSecretEncoded }}</span>\n </p>\n <p>\n <a\n id=\"mode-barcode\"\n [href]=\"totp.qrUrl\"\n >\n {{ i18n.msgStr('totpScanBarcode') }}\n </a>\n </p>\n </li>\n <li>\n <p>{{ i18n.msgStr('totpManualStep3') }}</p>\n <ul>\n <li id=\"kc-totp-type\">{{ i18n.msgStr('totpType') }}: {{ i18n.msgStr($any('totp.' + totp.policy.type)) }}</li>\n <li id=\"kc-totp-algorithm\">{{ i18n.msgStr('totpAlgorithm') }}: {{ totp.policy.getAlgorithmKey() }}</li>\n <li id=\"kc-totp-digits\">{{ i18n.msgStr('totpDigits') }}: {{ totp.policy.digits }}</li>\n @if (totp.policy.type === 'totp') {\n <li id=\"kc-totp-period\">{{ i18n.msgStr('totpInterval') }}: {{ totp.policy.period }}</li>\n } @else {\n <li id=\"kc-totp-counter\">{{ i18n.msgStr('totpCounter') }}: {{ totp.policy.initialCounter }}</li>\n }\n </ul>\n </li>\n } @else {\n <li>\n <p>{{ i18n.msgStr('totpStep2') }}</p>\n <p>\n <img\n id=\"kc-totp-secret-qr-code\"\n alt=\"Figure: Barcode\"\n [src]=\"'data:image/png;base64, ' + totp.totpSecretQrCode\"\n />\n </p>\n <p>\n <a\n id=\"mode-manual\"\n [href]=\"totp.manualUrl\"\n >\n {{ i18n.msgStr('totpUnableToScan') }}\n </a>\n </p>\n </li>\n }\n <li>\n <p>{{ i18n.msgStr('totpStep3') }}</p>\n <p>{{ i18n.msgStr('totpStep3DeviceName') }}</p>\n </li>\n </ol>\n <hr />\n <form\n id=\"kc-totp-settings-form\"\n method=\"post\"\n [action]=\"url.totpUrl\"\n [kcClass]=\"'kcFormClass'\"\n >\n <input\n type=\"hidden\"\n id=\"stateChecker\"\n name=\"stateChecker\"\n [value]=\"stateChecker\"\n />\n <div [kcClass]=\"'kcFormGroupClass'\">\n <div class=\"col-sm-2 col-md-2\">\n <label\n for=\"totp\"\n class=\"control-label\"\n >\n {{ i18n.msgStr('authenticatorCode') }}\n </label>\n <span class=\"required\"></span>\n </div>\n <div class=\"col-sm-10 col-md-10\">\n <input\n type=\"text\"\n id=\"totp\"\n name=\"totp\"\n autoComplete=\"off\"\n [kcClass]=\"'kcInputClass'\"\n [attr.aria-invalid]=\"messagesPerField.existsError('totp')\"\n />\n @if (messagesPerField.existsError('totp')) {\n <span\n id=\"input-error-otp-code\"\n aria-live=\"polite\"\n [kcClass]=\"'kcInputErrorMessageClass'\"\n [innerHTML]=\"messagesPerField.get('totp') \| kcSanitize: 'html'\"\n ></span>\n }\n </div>\n <input\n type=\"hidden\"\n id=\"totpSecret\"\n name=\"totpSecret\"\n [value]=\"totp.totpSecret\"\n />\n @if (mode) {\n <input\n type=\"hidden\"\n id=\"mode\"\n [value]=\"mode\"\n />\n }\n </div>\n\n <div [kcClass]=\"'kcFormGroupClass'\">\n <div class=\"col-sm-2 col-md-2\">\n <label\n for=\"userLabel\"\n [kcClass]=\"'kcLabelClass'\"\n >\n {{ i18n.msgStr('totpDeviceName') }}\n </label>\n @if (totp.otpCredentials.length >= 1) {\n <span class=\"required\"></span>\n }\n </div>\n <div class=\"col-sm-10 col-md-10\">\n <input\n type=\"text\"\n id=\"userLabel\"\n name=\"userLabel\"\n autoComplete=\"off\"\n [kcClass]=\"'kcInputClass'\"\n [attr.aria-invalid]=\"messagesPerField.existsError('userLabel')\"\n />\n @if (messagesPerField.existsError('userLabel')) {\n <span\n id=\"input-error-otp-label\"\n aria-live=\"polite\"\n [kcClass]=\"'kcInputErrorMessageClass'\"\n [innerHTML]=\"messagesPerField.get('userLabel') \| kcSanitize: 'html'\"\n ></span>\n }\n </div>\n </div>\n\n <div\n id=\"kc-form-buttons\"\n class=\"text-right\"\n [kcClass]=\"'kcFormGroupClass'\"\n >\n <div [kcClass]=\"'kcInputWrapperClass'\">\n <input\n type=\"submit\"\n id=\"saveTOTPBtn\"\n [kcClass]=\"['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']\"\n [value]=\"i18n.msgStr('doSave')\"\n />\n <button\n type=\"submit\"\n id=\"cancelTOTPBtn\"\n name=\"submitAction\"\n value=\"Cancel\"\n [kcClass]=\"['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']\"\n >\n {{ i18n.msgStr('doCancel') }}\n </button>\n </div>\n </div>\n </form>\n </div>\n }\n </ng-container>\n</kc-account-template>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;AA0BM,MAAO,aAAc,SAAQ,kBAAkB,CAAA;AAZrD,IAAA,WAAA,GAAA;;AAaI,QAAA,IAAA,CAAA,IAAI,GAAG,MAAM,CAAO,YAAY,CAAC,CAAC;AAClC,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAA6C,kBAAkB,CAAC,CAAC;AAC1E,QAAA,IAAA,CAAA,eAAe,GAAG,MAAM,CAAU,eAAe,CAAC,CAAC;AACnD,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAoC,eAAe,CAAC,CAAC;AACjF,KAAA;8GALY,aAAa,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAb,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,EAPX,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA;AACP,YAAA;AACI,gBAAA,OAAO,EAAE,kBAAkB;AAC3B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,aAAa,CAAC;AAC/C,aAAA;AACJ,SAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECxBL,gpYAkQA,EDlPc,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,gBAAgB,EAAE,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,iBAAiB,+EAAE,cAAc,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAUpD,aAAa,EAAA,UAAA,EAAA,CAAA;kBAZzB,SAAS;AACM,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,cAAc,EAAE,OAAO,CAAC,EAC7D,QAAA,EAAA,SAAS,EAER,SAAA,EAAA;AACP,wBAAA;AACI,4BAAA,OAAO,EAAE,kBAAkB;AAC3B,4BAAA,WAAW,EAAE,UAAU,CAAC,mBAAmB,CAAC;AAC/C,yBAAA;AACJ,qBAAA,EAAA,QAAA,EAAA,gpYAAA,EAAA,CAAA;;;AExBL;;AAEG;;;;"}
1	+ {"version":3,"file":"keycloakify-angular-account-pages-totp.mjs","sources":["../../src/account/pages/totp/totp.component.ts","../../src/account/pages/totp/totp.component.html","../../src/account/pages/totp/keycloakify-angular-account-pages-totp.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\nimport { Component, forwardRef, inject } from '@angular/core';\nimport { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';\nimport { TemplateComponent } from '@keycloakify/angular/account/containers/template';\nimport { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';\nimport type { I18n } from '@keycloakify/angular/account/i18n';\nimport type { KcContext } from '@keycloakify/angular/account/KcContext';\nimport { ACCOUNT_CLASSES } from '@keycloakify/angular/account/tokens/classes';\nimport { ACCOUNT_I18N } from '@keycloakify/angular/account/tokens/i18n';\nimport { KC_ACCOUNT_CONTEXT } from '@keycloakify/angular/account/tokens/kc-context';\nimport { KcSanitizePipe } from '@keycloakify/angular/lib/pipes/kc-sanitize';\nimport { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';\nimport type { ClassKey } from 'keycloakify/account';\n\n@Component({\n standalone: true,\n imports: [KcClassDirective, TemplateComponent, KcSanitizePipe, NgClass],\n selector: 'kc-totp',\n templateUrl: 'totp.component.html',\n providers: [\n {\n provide: ComponentReference,\n useExisting: forwardRef(() => TotpComponent)\n }\n ]\n})\nexport class TotpComponent extends ComponentReference {\n i18n = inject<I18n>(ACCOUNT_I18N);\n kcContext = inject<Extract<KcContext, { pageId: 'totp.ftl' }>>(KC_ACCOUNT_CONTEXT);\n override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);\n override classes = inject<Partial<Record<ClassKey, string>>>(ACCOUNT_CLASSES);\n active = 'totp';\n}\n","@let url = kcContext.url;\n@let mode = kcContext.mode;\n@let messagesPerField = kcContext.messagesPerField;\n@let stateChecker = kcContext.stateChecker;\n@let totp = kcContext.totp;\n\n<div class=\"row\">\n <div class=\"col-md-10\">\n <h2>{{ i18n.msgStr('authenticatorTitle') }}</h2>\n </div>\n @if (totp.otpCredentials.length) {\n <div class=\"subtitle col-md-2\">\n <span class=\"required\"></span>\n {{ i18n.msgStr('requiredFields') }}\n </div>\n }\n</div>\n@if (totp.enabled) {\n <table class=\"table table-bordered table-striped\">\n <thead>\n @if (totp.otpCredentials.length > 1) {\n <tr>\n <th [colSpan]=\"4\">{{ i18n.msgStr('configureAuthenticators') }}</th>\n </tr>\n } @else {\n <tr>\n <th [colSpan]=\"3\">{{ i18n.msgStr('configureAuthenticators') }}</th>\n </tr>\n }\n </thead>\n <tbody>\n @for (credential of totp.otpCredentials; track credential; let index = $index) {\n <tr>\n <td class=\"provider\">{{ i18n.msgStr('mobile') }}</td>\n @if (totp.otpCredentials.length > 1) {\n <td class=\"provider\">{{ credential.id }}</td>\n }\n <td class=\"provider\">{{ credential.userLabel \|\| '' }}</td>\n <td class=\"action\">\n <form\n method=\"post\"\n class=\"form-inline\"\n [action]=\"url.totpUrl\"\n >\n <input\n type=\"hidden\"\n id=\"stateChecker\"\n name=\"stateChecker\"\n [value]=\"stateChecker\"\n />\n <input\n type=\"hidden\"\n id=\"submitAction\"\n name=\"submitAction\"\n value=\"Delete\"\n />\n <input\n type=\"hidden\"\n id=\"credentialId\"\n name=\"credentialId\"\n [value]=\"credential.id\"\n />\n <button\n class=\"btn btn-default\"\n [id]=\"'remove-mobile-' + index\"\n >\n <i class=\"pficon pficon-delete\"></i>\n </button>\n </form>\n </td>\n </tr>\n }\n </tbody>\n </table>\n} @else {\n <div>\n <hr />\n <ol id=\"kc-totp-settings\">\n <li>\n <p>{{ i18n.msgStr('totpStep1') }}</p>\n\n <ul id=\"kc-totp-supported-apps\">\n @for (app of totp.supportedApplications; track app) {\n <li>{{ i18n.advancedMsgStr(app) }}</li>\n }\n </ul>\n </li>\n @if (mode && mode === 'manual') {\n <li>\n <p>{{ i18n.msgStr('totpManualStep2') }}</p>\n <p>\n <span id=\"kc-totp-secret-key\">{{ totp.totpSecretEncoded }}</span>\n </p>\n <p>\n <a\n id=\"mode-barcode\"\n [href]=\"totp.qrUrl\"\n >\n {{ i18n.msgStr('totpScanBarcode') }}\n </a>\n </p>\n </li>\n <li>\n <p>{{ i18n.msgStr('totpManualStep3') }}</p>\n <ul>\n <li id=\"kc-totp-type\">{{ i18n.msgStr('totpType') }}: {{ i18n.msgStr($any('totp.' + totp.policy.type)) }}</li>\n <li id=\"kc-totp-algorithm\">{{ i18n.msgStr('totpAlgorithm') }}: {{ totp.policy.getAlgorithmKey() }}</li>\n <li id=\"kc-totp-digits\">{{ i18n.msgStr('totpDigits') }}: {{ totp.policy.digits }}</li>\n @if (totp.policy.type === 'totp') {\n <li id=\"kc-totp-period\">{{ i18n.msgStr('totpInterval') }}: {{ totp.policy.period }}</li>\n } @else {\n <li id=\"kc-totp-counter\">{{ i18n.msgStr('totpCounter') }}: {{ totp.policy.initialCounter }}</li>\n }\n </ul>\n </li>\n } @else {\n <li>\n <p>{{ i18n.msgStr('totpStep2') }}</p>\n <p>\n <img\n id=\"kc-totp-secret-qr-code\"\n alt=\"Figure: Barcode\"\n [src]=\"'data:image/png;base64, ' + totp.totpSecretQrCode\"\n />\n </p>\n <p>\n <a\n id=\"mode-manual\"\n [href]=\"totp.manualUrl\"\n >\n {{ i18n.msgStr('totpUnableToScan') }}\n </a>\n </p>\n </li>\n }\n <li>\n <p>{{ i18n.msgStr('totpStep3') }}</p>\n <p>{{ i18n.msgStr('totpStep3DeviceName') }}</p>\n </li>\n </ol>\n <hr />\n <form\n id=\"kc-totp-settings-form\"\n method=\"post\"\n [action]=\"url.totpUrl\"\n [kcClass]=\"'kcFormClass'\"\n >\n <input\n type=\"hidden\"\n id=\"stateChecker\"\n name=\"stateChecker\"\n [value]=\"stateChecker\"\n />\n <div [kcClass]=\"'kcFormGroupClass'\">\n <div class=\"col-sm-2 col-md-2\">\n <label\n for=\"totp\"\n class=\"control-label\"\n >\n {{ i18n.msgStr('authenticatorCode') }}\n </label>\n <span class=\"required\"></span>\n </div>\n <div class=\"col-sm-10 col-md-10\">\n <input\n type=\"text\"\n id=\"totp\"\n name=\"totp\"\n autoComplete=\"off\"\n [kcClass]=\"'kcInputClass'\"\n [attr.aria-invalid]=\"messagesPerField.existsError('totp')\"\n />\n @if (messagesPerField.existsError('totp')) {\n <span\n id=\"input-error-otp-code\"\n aria-live=\"polite\"\n [kcClass]=\"'kcInputErrorMessageClass'\"\n [innerHTML]=\"messagesPerField.get('totp') \| kcSanitize: 'html'\"\n ></span>\n }\n </div>\n <input\n type=\"hidden\"\n id=\"totpSecret\"\n name=\"totpSecret\"\n [value]=\"totp.totpSecret\"\n />\n @if (mode) {\n <input\n type=\"hidden\"\n id=\"mode\"\n [value]=\"mode\"\n />\n }\n </div>\n\n <div [kcClass]=\"'kcFormGroupClass'\">\n <div class=\"col-sm-2 col-md-2\">\n <label\n for=\"userLabel\"\n [kcClass]=\"'kcLabelClass'\"\n >\n {{ i18n.msgStr('totpDeviceName') }}\n </label>\n @if (totp.otpCredentials.length >= 1) {\n <span class=\"required\"></span>\n }\n </div>\n <div class=\"col-sm-10 col-md-10\">\n <input\n type=\"text\"\n id=\"userLabel\"\n name=\"userLabel\"\n autoComplete=\"off\"\n [kcClass]=\"'kcInputClass'\"\n [attr.aria-invalid]=\"messagesPerField.existsError('userLabel')\"\n />\n @if (messagesPerField.existsError('userLabel')) {\n <span\n id=\"input-error-otp-label\"\n aria-live=\"polite\"\n [kcClass]=\"'kcInputErrorMessageClass'\"\n [innerHTML]=\"messagesPerField.get('userLabel') \| kcSanitize: 'html'\"\n ></span>\n }\n </div>\n </div>\n\n <div\n id=\"kc-form-buttons\"\n class=\"text-right\"\n [kcClass]=\"'kcFormGroupClass'\"\n >\n <div [kcClass]=\"'kcInputWrapperClass'\">\n <input\n type=\"submit\"\n id=\"saveTOTPBtn\"\n [kcClass]=\"['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']\"\n [value]=\"i18n.msgStr('doSave')\"\n />\n <button\n type=\"submit\"\n id=\"cancelTOTPBtn\"\n name=\"submitAction\"\n value=\"Cancel\"\n [kcClass]=\"['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']\"\n >\n {{ i18n.msgStr('doCancel') }}\n </button>\n </div>\n </div>\n </form>\n </div>\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;AA0BM,MAAO,aAAc,SAAQ,kBAAkB,CAAA;AAZrD,IAAA,WAAA,GAAA;;AAaI,QAAA,IAAA,CAAA,IAAI,GAAG,MAAM,CAAO,YAAY,CAAC,CAAC;AAClC,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAA6C,kBAAkB,CAAC,CAAC;AAC1E,QAAA,IAAA,CAAA,eAAe,GAAG,MAAM,CAAU,eAAe,CAAC,CAAC;AACnD,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAoC,eAAe,CAAC,CAAC;QAC9E,IAAM,CAAA,MAAA,GAAG,MAAM,CAAC;AACnB,KAAA;8GANY,aAAa,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAb,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,EAPX,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA;AACP,YAAA;AACI,gBAAA,OAAO,EAAE,kBAAkB;AAC3B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,aAAa,CAAC;AAC/C,aAAA;AACJ,SAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECxBL,onUA8PA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED9Oc,gBAAgB,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAqB,cAAc,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAUpD,aAAa,EAAA,UAAA,EAAA,CAAA;kBAZzB,SAAS;AACM,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,cAAc,EAAE,OAAO,CAAC,EAC7D,QAAA,EAAA,SAAS,EAER,SAAA,EAAA;AACP,wBAAA;AACI,4BAAA,OAAO,EAAE,kBAAkB;AAC3B,4BAAA,WAAW,EAAE,UAAU,CAAC,mBAAmB,CAAC;AAC/C,yBAAA;AACJ,qBAAA,EAAA,QAAA,EAAA,onUAAA,EAAA,CAAA;;;AExBL;;AAEG;;;;"}

package/fesm2022/keycloakify-angular-login-containers-template.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, Renderer2, input, forwardRef, Component, ChangeDetectionStrategy } from '@angular/core';
+import { input, output, inject, ViewContainerRef, effect, Component, Renderer2, ChangeDetectorRef, computed, forwardRef, ChangeDetectionStrategy } from '@angular/core';
 import { Meta, Title } from '@angular/platform-browser';
 import { KcSanitizePipe } from '@keycloakify/angular/lib/pipes/kc-sanitize';
 import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
@@ -12,23 +12,55 @@ import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
 import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context';
 import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+class DynamicPageInjectorComponent {
+    #vcr;
+    constructor() {
+        this.page = input();
+        this.userProfileFormFields = input();
+        this.componentCreated = output();
+        this.#vcr = inject(ViewContainerRef);
+        effect(() => {
+            const page = this.page();
+            const userProfileFormFields = this.userProfileFormFields();
+            if (!page)
+                return;
+            const compRef = this.#vcr.createComponent(page);
+            if ('userProfileFormFields' in compRef && userProfileFormFields) {
+                compRef.setInput('userProfileFormFields', userProfileFormFields);
+            }
+            this.componentCreated.emit(compRef.instance);
+        }, { allowSignalWrites: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DynamicPageInjectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.7", type: DynamicPageInjectorComponent, isStandalone: true, selector: "kc-dynamic-page-injector", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, userProfileFormFields: { classPropertyName: "userProfileFormFields", publicName: "userProfileFormFields", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { componentCreated: "componentCreated" }, ngImport: i0, template: ``, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DynamicPageInjectorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kc-dynamic-page-injector',
+                    standalone: true,
+                    template: ``
+                }]
+        }], ctorParameters: () => [] });
 class TemplateComponent extends ComponentReference {
+    #cdr;
     constructor() {
         super();
         this.i18n = inject(LOGIN_I18N);
         this.renderer = inject(Renderer2);
+        this.#cdr = inject(ChangeDetectorRef);
         this.meta = inject(Meta);
         this.title = inject(Title);
         this.kcContext = inject(KC_LOGIN_CONTEXT);
         this.doUseDefaultCss = inject(USE_DEFAULT_CSS);
         this.classes = inject(LOGIN_CLASSES);
         this.loginResourceInjectorService = inject(LoginResourceInjectorService);
-        this.displayInfo = input(false);
-        this.displayMessage = input(true);
-        this.displayRequiredFields = input(false);
-        this.documentTitle = input();
-        this.bodyClassName = input();
-        this.title.setTitle(this.documentTitle() ?? this.i18n.msgStr('loginTitle', this.kcContext.realm.displayName));
+        this.displayInfo = false;
+        this.displayMessage = true;
+        this.displayRequiredFields = false;
+        this.page = input();
+        this.userProfileFormFields = input();
+        this.title.setTitle(this.documentTitle ?? this.i18n.msgStr('loginTitle', this.kcContext.realm.displayName));
         this.isReadyToRender$ = this.loginResourceInjectorService.injectResource(this.doUseDefaultCss);
     }
     ngOnInit() {
@@ -39,7 +71,7 @@ class TemplateComponent extends ComponentReference {
             doUseDefaultCss: this.doUseDefaultCss,
             classes: this.classes
         }).kcClsx;
-        const kcBodyClass = this.bodyClassName() ?? kcClsx('kcBodyClass');
+        const kcBodyClass = this.bodyClassName ?? kcClsx('kcBodyClass');
         const kcHtmlClass = kcClsx('kcHtmlClass');
         const kcBodyClasses = kcBodyClass.split(/\s+/);
         const kcHtmlClasses = kcHtmlClass.split(/\s+/);
@@ -53,27 +85,63 @@ class TemplateComponent extends ComponentReference {
     tryAnotherWay() {
         document.forms['kc-select-try-another-way-form'].submit();
     }
+    onComponentCreated(compRef) {
+        if ('displayInfo' in compRef && compRef.displayInfo) {
+            this.displayInfo = compRef.displayInfo;
+        }
+        if ('displayMessage' in compRef && compRef.displayMessage) {
+            this.displayMessage = compRef.displayMessage;
+        }
+        if ('displayRequiredFields' in compRef && compRef.displayRequiredFields) {
+            this.displayRequiredFields = compRef.displayRequiredFields;
+        }
+        if ('documentTitle' in compRef && compRef.documentTitle) {
+            this.documentTitle = compRef.documentTitle;
+        }
+        if ('bodyClassName' in compRef && compRef.bodyClassName) {
+            this.bodyClassName = compRef.bodyClassName;
+        }
+        if ('headerNode' in compRef && compRef.headerNode) {
+            this.headerNode = computed(() => {
+                const headerNode = compRef.headerNode();
+                return headerNode;
+            });
+        }
+        if ('infoNode' in compRef && compRef.infoNode) {
+            this.infoNode = computed(() => {
+                const infoNode = compRef.infoNode();
+                return infoNode;
+            });
+        }
+        if ('socialProvidersNode' in compRef && compRef.socialProvidersNode) {
+            this.socialProvidersNode = computed(() => {
+                const socialProvidersNode = compRef.socialProvidersNode();
+                return socialProvidersNode;
+            });
+        }
+        this.#cdr.markForCheck();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: TemplateComponent, isStandalone: true, selector: "kc-login-template", inputs: { displayInfo: { classPropertyName: "displayInfo", publicName: "displayInfo", isSignal: true, isRequired: false, transformFunction: null }, displayMessage: { classPropertyName: "displayMessage", publicName: "displayMessage", isSignal: true, isRequired: false, transformFunction: null }, displayRequiredFields: { classPropertyName: "displayRequiredFields", publicName: "displayRequiredFields", isSignal: true, isRequired: false, transformFunction: null }, documentTitle: { classPropertyName: "documentTitle", publicName: "documentTitle", isSignal: true, isRequired: false, transformFunction: null }, bodyClassName: { classPropertyName: "bodyClassName", publicName: "bodyClassName", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: TemplateComponent, isStandalone: true, selector: "kc-root", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, userProfileFormFields: { classPropertyName: "userProfileFormFields", publicName: "userProfileFormFields", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: ComponentReference,
                 useExisting: forwardRef(() => TemplateComponent)
             }
-        ], usesInheritance: true, ngImport: i0, template: "@let realm = kcContext.realm;\n@let message = kcContext.message;\n@let auth = kcContext.auth;\n@let isAppInitiatedAction = kcContext.isAppInitiatedAction;\n@let url = kcContext.url;\n@let isReadyToRender = isReadyToRender$ | async;\n\n@if (isReadyToRender) {\n    <div [kcClass]=\"'kcLoginClass'\">\n        <div\n            id=\"kc-header\"\n            [kcClass]=\"'kcHeaderClass'\"\n        >\n            <div\n                id=\"kc-header-wrapper\"\n                [kcClass]=\"'kcHeaderWrapperClass'\"\n            >\n                <div [innerHTML]=\"realm?.displayNameHtml ?? '' | kcSanitize: 'html'\"></div>\n            </div>\n        </div>\n\n        <div [kcClass]=\"'kcFormCardClass'\">\n            <header [kcClass]=\"'kcFormHeaderClass'\">\n                <!-- Locale switcher -->\n                @if (i18n.enabledLanguages.length > 1) {\n                    <div\n                        id=\"kc-locale\"\n                        [kcClass]=\"'kcLocaleMainClass'\"\n                    >\n                        <div\n                            id=\"kc-locale-wrapper\"\n                            [kcClass]=\"'kcLocaleWrapperClass'\"\n                        >\n                            <div\n                                id=\"kc-locale-dropdown\"\n                                class=\"menu-button-links\"\n                                [kcClass]=\"'kcLocaleDropDownClass'\"\n                            >\n                                <button\n                                    tabindex=\"1\"\n                                    id=\"kc-current-locale-link\"\n                                    aria-haspopup=\"true\"\n                                    aria-expanded=\"false\"\n                                    aria-controls=\"language-switch1\"\n                                    [attr.aria-label]=\"i18n.msgStr('languages')\"\n                                >\n                                    {{ i18n.currentLanguage.label }}\n                                </button>\n                                <ul\n                                    role=\"menu\"\n                                    tabindex=\"-1\"\n                                    aria-labelledby=\"kc-current-locale-link\"\n                                    aria-activedescendant=\"\"\n                                    id=\"language-switch1\"\n                                    [kcClass]=\"'kcLocaleListClass'\"\n                                >\n                                    @for (entry of i18n.enabledLanguages; track entry; let idx = $index) {\n                                        <li\n                                            role=\"none\"\n                                            [kcClass]=\"'kcLocaleListItemClass'\"\n                                        >\n                                            <a\n                                                role=\"menuitem\"\n                                                tabindex=\"-1\"\n                                                [href]=\"entry.href\"\n                                                [kcClass]=\"'kcLocaleItemClass'\"\n                                                [id]=\"'language-' + idx\"\n                                            >\n                                                {{ entry.label }}\n                                            </a>\n                                        </li>\n                                    }\n                                </ul>\n                            </div>\n                        </div>\n                    </div>\n                }\n\n                <!-- Header content -->\n                <ng-template #node>\n                    @if (auth && !auth.showUsername && !auth.showResetCredentials) {\n                        <h1 id=\"kc-page-title\">\n                            <ng-content select=\"[headerNode]\" />\n                        </h1>\n                    } @else {\n                        <div\n                            id=\"kc-username\"\n                            [kcClass]=\"'kcFormGroupClass'\"\n                        >\n                            <label id=\"kc-attempted-username\">{{ auth?.attemptedUsername }}</label>\n                            <a\n                                id=\"reset-login\"\n                                [href]=\"url?.loginRestartFlowUrl\"\n                                [attr.aria-label]=\"i18n.msgStr('restartLoginTooltip')\"\n                            >\n                                <div class=\"kc-login-tooltip\">\n                                    <i [kcClass]=\"'kcResetFlowIcon'\"></i>\n                                    <span class=\"kc-tooltip-text\">\n                                        {{ i18n.msgStr('restartLoginTooltip') }}\n                                    </span>\n                                </div>\n                            </a>\n                        </div>\n                    }\n                </ng-template>\n\n                @if (displayRequiredFields()) {\n                    <div [kcClass]=\"'kcContentWrapperClass'\">\n                        <div\n                            class=\"subtitle\"\n                            [kcClass]=\"'kcLabelWrapperClass'\"\n                        >\n                            <span class=\"subtitle\">\n                                <span class=\"required\">*</span>\n                                {{ i18n.msgStr('requiredFields') }}\n                            </span>\n                        </div>\n                        <div class=\"col-md-10\">\n                            <ng-container [ngTemplateOutlet]=\"node\" />\n                        </div>\n                    </div>\n                } @else {\n                    <ng-container [ngTemplateOutlet]=\"node\" />\n                }\n            </header>\n\n            <div id=\"kc-content\">\n                <div id=\"kc-content-wrapper\">\n                    <!-- Message display -->\n                    @if (displayMessage() && message && (message.type !== 'warning' || !isAppInitiatedAction)) {\n                        <div\n                            [kcClass]=\"'kcAlertClass'\"\n                            [ngClass]=\"message.type === 'error' ? 'pf-m-danger' : 'pf-m-' + message.type\"\n                            [class]=\"'alert-' + message.type\"\n                        >\n                            <div class=\"pf-c-alert__icon\">\n                                @switch (message.type) {\n                                    @case ('success') {\n                                        <span [kcClass]=\"'kcFeedbackSuccessIcon'\"></span>\n                                    }\n                                    @case ('warning') {\n                                        <span [kcClass]=\"'kcFeedbackWarningIcon'\"></span>\n                                    }\n                                    @case ('info') {\n                                        <span [kcClass]=\"'kcFeedbackInfoIcon'\"></span>\n                                    }\n                                    @case ('error') {\n                                        <span [kcClass]=\"'kcFeedbackErrorIcon'\"></span>\n                                    }\n                                }\n                            </div>\n                            <span\n                                [kcClass]=\"'kcAlertTitleClass'\"\n                                [innerHTML]=\"message.summary | kcSanitize: 'html'\"\n                            ></span>\n                        </div>\n                    }\n                    <!-- Content -->\n                    <ng-content select=\"[content]\" />\n                    @if (!!auth && auth?.showTryAnotherWayLink) {\n                        <form\n                            id=\"kc-select-try-another-way-form\"\n                            method=\"post\"\n                            [action]=\"url?.loginAction\"\n                        >\n                            <div [kcClass]=\"'kcFormGroupClass'\">\n                                <div [kcClass]=\"'kcFormGroupClass'\">\n                                    <input\n                                        type=\"hidden\"\n                                        name=\"tryAnotherWay\"\n                                        value=\"on\"\n                                    />\n                                    <a\n                                        id=\"try-another-way\"\n                                        (click)=\"tryAnotherWay()\"\n                                    >\n                                        {{ i18n.msgStr('doTryAnotherWay') }}\n                                    </a>\n                                </div>\n                            </div>\n                        </form>\n                    }\n\n                    <ng-content select=\"[socialProvidersNode]\" />\n                    <!-- Info display -->\n                    @if (displayInfo()) {\n                        <div\n                            id=\"kc-info\"\n                            [kcClass]=\"'kcSignUpClass'\"\n                        >\n                            <div\n                                id=\"kc-info-wrapper\"\n                                [kcClass]=\"'kcInfoAreaWrapperClass'\"\n                            >\n                                <ng-content select=\"[infoNode]\" />\n                            </div>\n                        </div>\n                    }\n                </div>\n            </div>\n        </div>\n    </div>\n}\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KcSanitizePipe, name: "kcSanitize" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KcClassDirective, selector: "[kcClass]", inputs: ["class", "ngClass", "kcClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "@let realm = kcContext.realm;\n@let message = kcContext.message;\n@let auth = kcContext.auth;\n@let isAppInitiatedAction = kcContext.isAppInitiatedAction;\n@let url = kcContext.url;\n@let isReadyToRender = isReadyToRender$ | async;\n\n@if (isReadyToRender) {\n    <div [kcClass]=\"'kcLoginClass'\">\n        <div\n            id=\"kc-header\"\n            [kcClass]=\"'kcHeaderClass'\"\n        >\n            <div\n                id=\"kc-header-wrapper\"\n                [kcClass]=\"'kcHeaderWrapperClass'\"\n            >\n                <div [innerHTML]=\"realm?.displayNameHtml ?? '' | kcSanitize: 'html'\"></div>\n            </div>\n        </div>\n\n        <div [kcClass]=\"'kcFormCardClass'\">\n            <header [kcClass]=\"'kcFormHeaderClass'\">\n                <!-- Locale switcher -->\n                @if (i18n.enabledLanguages.length > 1) {\n                    <div\n                        id=\"kc-locale\"\n                        [kcClass]=\"'kcLocaleMainClass'\"\n                    >\n                        <div\n                            id=\"kc-locale-wrapper\"\n                            [kcClass]=\"'kcLocaleWrapperClass'\"\n                        >\n                            <div\n                                id=\"kc-locale-dropdown\"\n                                class=\"menu-button-links\"\n                                [kcClass]=\"'kcLocaleDropDownClass'\"\n                            >\n                                <button\n                                    tabindex=\"1\"\n                                    id=\"kc-current-locale-link\"\n                                    aria-haspopup=\"true\"\n                                    aria-expanded=\"false\"\n                                    aria-controls=\"language-switch1\"\n                                    [attr.aria-label]=\"i18n.msgStr('languages')\"\n                                >\n                                    {{ i18n.currentLanguage.label }}\n                                </button>\n                                <ul\n                                    role=\"menu\"\n                                    tabindex=\"-1\"\n                                    aria-labelledby=\"kc-current-locale-link\"\n                                    aria-activedescendant=\"\"\n                                    id=\"language-switch1\"\n                                    [kcClass]=\"'kcLocaleListClass'\"\n                                >\n                                    @for (entry of i18n.enabledLanguages; track entry; let idx = $index) {\n                                        <li\n                                            role=\"none\"\n                                            [kcClass]=\"'kcLocaleListItemClass'\"\n                                        >\n                                            <a\n                                                role=\"menuitem\"\n                                                tabindex=\"-1\"\n                                                [href]=\"entry.href\"\n                                                [kcClass]=\"'kcLocaleItemClass'\"\n                                                [id]=\"'language-' + idx\"\n                                            >\n                                                {{ entry.label }}\n                                            </a>\n                                        </li>\n                                    }\n                                </ul>\n                            </div>\n                        </div>\n                    </div>\n                }\n\n                <!-- Header content -->\n                <ng-template #node>\n                    @if (auth && !auth.showUsername && !auth.showResetCredentials) {\n                        <h1 id=\"kc-page-title\">\n                            @let header = headerNode && headerNode();\n                            @if (header) {\n                                <ng-container [ngTemplateOutlet]=\"header\" />\n                            }\n                        </h1>\n                    } @else {\n                        <div\n                            id=\"kc-username\"\n                            [kcClass]=\"'kcFormGroupClass'\"\n                        >\n                            <label id=\"kc-attempted-username\">{{ auth?.attemptedUsername }}</label>\n                            <a\n                                id=\"reset-login\"\n                                [href]=\"url?.loginRestartFlowUrl\"\n                                [attr.aria-label]=\"i18n.msgStr('restartLoginTooltip')\"\n                            >\n                                <div class=\"kc-login-tooltip\">\n                                    <i [kcClass]=\"'kcResetFlowIcon'\"></i>\n                                    <span class=\"kc-tooltip-text\">\n                                        {{ i18n.msgStr('restartLoginTooltip') }}\n                                    </span>\n                                </div>\n                            </a>\n                        </div>\n                    }\n                </ng-template>\n\n                @if (displayRequiredFields) {\n                    <div [kcClass]=\"'kcContentWrapperClass'\">\n                        <div\n                            class=\"subtitle\"\n                            [kcClass]=\"'kcLabelWrapperClass'\"\n                        >\n                            <span class=\"subtitle\">\n                                <span class=\"required\">*</span>\n                                {{ i18n.msgStr('requiredFields') }}\n                            </span>\n                        </div>\n                        <div class=\"col-md-10\">\n                            <ng-container [ngTemplateOutlet]=\"node\" />\n                        </div>\n                    </div>\n                } @else {\n                    <ng-container [ngTemplateOutlet]=\"node\" />\n                }\n            </header>\n\n            <div id=\"kc-content\">\n                <div id=\"kc-content-wrapper\">\n                    <!-- Message display -->\n                    @if (displayMessage && message && (message.type !== 'warning' || !isAppInitiatedAction)) {\n                        <div\n                            [kcClass]=\"'kcAlertClass'\"\n                            [ngClass]=\"message.type === 'error' ? 'pf-m-danger' : 'pf-m-' + message.type\"\n                            [class]=\"'alert-' + message.type\"\n                        >\n                            <div class=\"pf-c-alert__icon\">\n                                @switch (message.type) {\n                                    @case ('success') {\n                                        <span [kcClass]=\"'kcFeedbackSuccessIcon'\"></span>\n                                    }\n                                    @case ('warning') {\n                                        <span [kcClass]=\"'kcFeedbackWarningIcon'\"></span>\n                                    }\n                                    @case ('info') {\n                                        <span [kcClass]=\"'kcFeedbackInfoIcon'\"></span>\n                                    }\n                                    @case ('error') {\n                                        <span [kcClass]=\"'kcFeedbackErrorIcon'\"></span>\n                                    }\n                                }\n                            </div>\n                            <span\n                                [kcClass]=\"'kcAlertTitleClass'\"\n                                [innerHTML]=\"message.summary | kcSanitize: 'html'\"\n                            ></span>\n                        </div>\n                    }\n                    <!-- Content -->\n                    @let pageRef = page();\n                    @if (!!pageRef) {\n                        <kc-dynamic-page-injector\n                            [page]=\"pageRef\"\n                            (componentCreated)=\"onComponentCreated($event)\"\n                        />\n                    }\n                    @if (!!auth && auth?.showTryAnotherWayLink) {\n                        <form\n                            id=\"kc-select-try-another-way-form\"\n                            method=\"post\"\n                            [action]=\"url?.loginAction\"\n                        >\n                            <div [kcClass]=\"'kcFormGroupClass'\">\n                                <div [kcClass]=\"'kcFormGroupClass'\">\n                                    <input\n                                        type=\"hidden\"\n                                        name=\"tryAnotherWay\"\n                                        value=\"on\"\n                                    />\n                                    <a\n                                        id=\"try-another-way\"\n                                        (click)=\"tryAnotherWay()\"\n                                    >\n                                        {{ i18n.msgStr('doTryAnotherWay') }}\n                                    </a>\n                                </div>\n                            </div>\n                        </form>\n                    }\n                    @let socialProviders = socialProvidersNode && socialProvidersNode();\n                    @if (socialProviders) {\n                        <ng-container [ngTemplateOutlet]=\"socialProviders\" />\n                    }\n                    <!-- Info display -->\n                    @if (displayInfo) {\n                        <div\n                            id=\"kc-info\"\n                            [kcClass]=\"'kcSignUpClass'\"\n                        >\n                            <div\n                                id=\"kc-info-wrapper\"\n                                [kcClass]=\"'kcInfoAreaWrapperClass'\"\n                            >\n                                @let info = infoNode && infoNode();\n                                @if (info) {\n                                    <ng-container [ngTemplateOutlet]=\"info\" />\n                                }\n                            </div>\n                        </div>\n                    }\n                </div>\n            </div>\n        </div>\n    </div>\n}\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KcSanitizePipe, name: "kcSanitize" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KcClassDirective, selector: "[kcClass]", inputs: ["class", "ngClass", "kcClass"] }, { kind: "component", type: DynamicPageInjectorComponent, selector: "kc-dynamic-page-injector", inputs: ["page", "userProfileFormFields"], outputs: ["componentCreated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kc-login-template', standalone: true, imports: [AsyncPipe, KcSanitizePipe, NgTemplateOutlet, KcClassDirective], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'kc-root', standalone: true, imports: [AsyncPipe, KcSanitizePipe, NgTemplateOutlet, KcClassDirective, DynamicPageInjectorComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: ComponentReference,
                             useExisting: forwardRef(() => TemplateComponent)
                         }
-                    ], template: "@let realm = kcContext.realm;\n@let message = kcContext.message;\n@let auth = kcContext.auth;\n@let isAppInitiatedAction = kcContext.isAppInitiatedAction;\n@let url = kcContext.url;\n@let isReadyToRender = isReadyToRender$ | async;\n\n@if (isReadyToRender) {\n    <div [kcClass]=\"'kcLoginClass'\">\n        <div\n            id=\"kc-header\"\n            [kcClass]=\"'kcHeaderClass'\"\n        >\n            <div\n                id=\"kc-header-wrapper\"\n                [kcClass]=\"'kcHeaderWrapperClass'\"\n            >\n                <div [innerHTML]=\"realm?.displayNameHtml ?? '' | kcSanitize: 'html'\"></div>\n            </div>\n        </div>\n\n        <div [kcClass]=\"'kcFormCardClass'\">\n            <header [kcClass]=\"'kcFormHeaderClass'\">\n                <!-- Locale switcher -->\n                @if (i18n.enabledLanguages.length > 1) {\n                    <div\n                        id=\"kc-locale\"\n                        [kcClass]=\"'kcLocaleMainClass'\"\n                    >\n                        <div\n                            id=\"kc-locale-wrapper\"\n                            [kcClass]=\"'kcLocaleWrapperClass'\"\n                        >\n                            <div\n                                id=\"kc-locale-dropdown\"\n                                class=\"menu-button-links\"\n                                [kcClass]=\"'kcLocaleDropDownClass'\"\n                            >\n                                <button\n                                    tabindex=\"1\"\n                                    id=\"kc-current-locale-link\"\n                                    aria-haspopup=\"true\"\n                                    aria-expanded=\"false\"\n                                    aria-controls=\"language-switch1\"\n                                    [attr.aria-label]=\"i18n.msgStr('languages')\"\n                                >\n                                    {{ i18n.currentLanguage.label }}\n                                </button>\n                                <ul\n                                    role=\"menu\"\n                                    tabindex=\"-1\"\n                                    aria-labelledby=\"kc-current-locale-link\"\n                                    aria-activedescendant=\"\"\n                                    id=\"language-switch1\"\n                                    [kcClass]=\"'kcLocaleListClass'\"\n                                >\n                                    @for (entry of i18n.enabledLanguages; track entry; let idx = $index) {\n                                        <li\n                                            role=\"none\"\n                                            [kcClass]=\"'kcLocaleListItemClass'\"\n                                        >\n                                            <a\n                                                role=\"menuitem\"\n                                                tabindex=\"-1\"\n                                                [href]=\"entry.href\"\n                                                [kcClass]=\"'kcLocaleItemClass'\"\n                                                [id]=\"'language-' + idx\"\n                                            >\n                                                {{ entry.label }}\n                                            </a>\n                                        </li>\n                                    }\n                                </ul>\n                            </div>\n                        </div>\n                    </div>\n                }\n\n                <!-- Header content -->\n                <ng-template #node>\n                    @if (auth && !auth.showUsername && !auth.showResetCredentials) {\n                        <h1 id=\"kc-page-title\">\n                            <ng-content select=\"[headerNode]\" />\n                        </h1>\n                    } @else {\n                        <div\n                            id=\"kc-username\"\n                            [kcClass]=\"'kcFormGroupClass'\"\n                        >\n                            <label id=\"kc-attempted-username\">{{ auth?.attemptedUsername }}</label>\n                            <a\n                                id=\"reset-login\"\n                                [href]=\"url?.loginRestartFlowUrl\"\n                                [attr.aria-label]=\"i18n.msgStr('restartLoginTooltip')\"\n                            >\n                                <div class=\"kc-login-tooltip\">\n                                    <i [kcClass]=\"'kcResetFlowIcon'\"></i>\n                                    <span class=\"kc-tooltip-text\">\n                                        {{ i18n.msgStr('restartLoginTooltip') }}\n                                    </span>\n                                </div>\n                            </a>\n                        </div>\n                    }\n                </ng-template>\n\n                @if (displayRequiredFields()) {\n                    <div [kcClass]=\"'kcContentWrapperClass'\">\n                        <div\n                            class=\"subtitle\"\n                            [kcClass]=\"'kcLabelWrapperClass'\"\n                        >\n                            <span class=\"subtitle\">\n                                <span class=\"required\">*</span>\n                                {{ i18n.msgStr('requiredFields') }}\n                            </span>\n                        </div>\n                        <div class=\"col-md-10\">\n                            <ng-container [ngTemplateOutlet]=\"node\" />\n                        </div>\n                    </div>\n                } @else {\n                    <ng-container [ngTemplateOutlet]=\"node\" />\n                }\n            </header>\n\n            <div id=\"kc-content\">\n                <div id=\"kc-content-wrapper\">\n                    <!-- Message display -->\n                    @if (displayMessage() && message && (message.type !== 'warning' || !isAppInitiatedAction)) {\n                        <div\n                            [kcClass]=\"'kcAlertClass'\"\n                            [ngClass]=\"message.type === 'error' ? 'pf-m-danger' : 'pf-m-' + message.type\"\n                            [class]=\"'alert-' + message.type\"\n                        >\n                            <div class=\"pf-c-alert__icon\">\n                                @switch (message.type) {\n                                    @case ('success') {\n                                        <span [kcClass]=\"'kcFeedbackSuccessIcon'\"></span>\n                                    }\n                                    @case ('warning') {\n                                        <span [kcClass]=\"'kcFeedbackWarningIcon'\"></span>\n                                    }\n                                    @case ('info') {\n                                        <span [kcClass]=\"'kcFeedbackInfoIcon'\"></span>\n                                    }\n                                    @case ('error') {\n                                        <span [kcClass]=\"'kcFeedbackErrorIcon'\"></span>\n                                    }\n                                }\n                            </div>\n                            <span\n                                [kcClass]=\"'kcAlertTitleClass'\"\n                                [innerHTML]=\"message.summary | kcSanitize: 'html'\"\n                            ></span>\n                        </div>\n                    }\n                    <!-- Content -->\n                    <ng-content select=\"[content]\" />\n                    @if (!!auth && auth?.showTryAnotherWayLink) {\n                        <form\n                            id=\"kc-select-try-another-way-form\"\n                            method=\"post\"\n                            [action]=\"url?.loginAction\"\n                        >\n                            <div [kcClass]=\"'kcFormGroupClass'\">\n                                <div [kcClass]=\"'kcFormGroupClass'\">\n                                    <input\n                                        type=\"hidden\"\n                                        name=\"tryAnotherWay\"\n                                        value=\"on\"\n                                    />\n                                    <a\n                                        id=\"try-another-way\"\n                                        (click)=\"tryAnotherWay()\"\n                                    >\n                                        {{ i18n.msgStr('doTryAnotherWay') }}\n                                    </a>\n                                </div>\n                            </div>\n                        </form>\n                    }\n\n                    <ng-content select=\"[socialProvidersNode]\" />\n                    <!-- Info display -->\n                    @if (displayInfo()) {\n                        <div\n                            id=\"kc-info\"\n                            [kcClass]=\"'kcSignUpClass'\"\n                        >\n                            <div\n                                id=\"kc-info-wrapper\"\n                                [kcClass]=\"'kcInfoAreaWrapperClass'\"\n                            >\n                                <ng-content select=\"[infoNode]\" />\n                            </div>\n                        </div>\n                    }\n                </div>\n            </div>\n        </div>\n    </div>\n}\n" }]
+                    ], template: "@let realm = kcContext.realm;\n@let message = kcContext.message;\n@let auth = kcContext.auth;\n@let isAppInitiatedAction = kcContext.isAppInitiatedAction;\n@let url = kcContext.url;\n@let isReadyToRender = isReadyToRender$ | async;\n\n@if (isReadyToRender) {\n    <div [kcClass]=\"'kcLoginClass'\">\n        <div\n            id=\"kc-header\"\n            [kcClass]=\"'kcHeaderClass'\"\n        >\n            <div\n                id=\"kc-header-wrapper\"\n                [kcClass]=\"'kcHeaderWrapperClass'\"\n            >\n                <div [innerHTML]=\"realm?.displayNameHtml ?? '' | kcSanitize: 'html'\"></div>\n            </div>\n        </div>\n\n        <div [kcClass]=\"'kcFormCardClass'\">\n            <header [kcClass]=\"'kcFormHeaderClass'\">\n                <!-- Locale switcher -->\n                @if (i18n.enabledLanguages.length > 1) {\n                    <div\n                        id=\"kc-locale\"\n                        [kcClass]=\"'kcLocaleMainClass'\"\n                    >\n                        <div\n                            id=\"kc-locale-wrapper\"\n                            [kcClass]=\"'kcLocaleWrapperClass'\"\n                        >\n                            <div\n                                id=\"kc-locale-dropdown\"\n                                class=\"menu-button-links\"\n                                [kcClass]=\"'kcLocaleDropDownClass'\"\n                            >\n                                <button\n                                    tabindex=\"1\"\n                                    id=\"kc-current-locale-link\"\n                                    aria-haspopup=\"true\"\n                                    aria-expanded=\"false\"\n                                    aria-controls=\"language-switch1\"\n                                    [attr.aria-label]=\"i18n.msgStr('languages')\"\n                                >\n                                    {{ i18n.currentLanguage.label }}\n                                </button>\n                                <ul\n                                    role=\"menu\"\n                                    tabindex=\"-1\"\n                                    aria-labelledby=\"kc-current-locale-link\"\n                                    aria-activedescendant=\"\"\n                                    id=\"language-switch1\"\n                                    [kcClass]=\"'kcLocaleListClass'\"\n                                >\n                                    @for (entry of i18n.enabledLanguages; track entry; let idx = $index) {\n                                        <li\n                                            role=\"none\"\n                                            [kcClass]=\"'kcLocaleListItemClass'\"\n                                        >\n                                            <a\n                                                role=\"menuitem\"\n                                                tabindex=\"-1\"\n                                                [href]=\"entry.href\"\n                                                [kcClass]=\"'kcLocaleItemClass'\"\n                                                [id]=\"'language-' + idx\"\n                                            >\n                                                {{ entry.label }}\n                                            </a>\n                                        </li>\n                                    }\n                                </ul>\n                            </div>\n                        </div>\n                    </div>\n                }\n\n                <!-- Header content -->\n                <ng-template #node>\n                    @if (auth && !auth.showUsername && !auth.showResetCredentials) {\n                        <h1 id=\"kc-page-title\">\n                            @let header = headerNode && headerNode();\n                            @if (header) {\n                                <ng-container [ngTemplateOutlet]=\"header\" />\n                            }\n                        </h1>\n                    } @else {\n                        <div\n                            id=\"kc-username\"\n                            [kcClass]=\"'kcFormGroupClass'\"\n                        >\n                            <label id=\"kc-attempted-username\">{{ auth?.attemptedUsername }}</label>\n                            <a\n                                id=\"reset-login\"\n                                [href]=\"url?.loginRestartFlowUrl\"\n                                [attr.aria-label]=\"i18n.msgStr('restartLoginTooltip')\"\n                            >\n                                <div class=\"kc-login-tooltip\">\n                                    <i [kcClass]=\"'kcResetFlowIcon'\"></i>\n                                    <span class=\"kc-tooltip-text\">\n                                        {{ i18n.msgStr('restartLoginTooltip') }}\n                                    </span>\n                                </div>\n                            </a>\n                        </div>\n                    }\n                </ng-template>\n\n                @if (displayRequiredFields) {\n                    <div [kcClass]=\"'kcContentWrapperClass'\">\n                        <div\n                            class=\"subtitle\"\n                            [kcClass]=\"'kcLabelWrapperClass'\"\n                        >\n                            <span class=\"subtitle\">\n                                <span class=\"required\">*</span>\n                                {{ i18n.msgStr('requiredFields') }}\n                            </span>\n                        </div>\n                        <div class=\"col-md-10\">\n                            <ng-container [ngTemplateOutlet]=\"node\" />\n                        </div>\n                    </div>\n                } @else {\n                    <ng-container [ngTemplateOutlet]=\"node\" />\n                }\n            </header>\n\n            <div id=\"kc-content\">\n                <div id=\"kc-content-wrapper\">\n                    <!-- Message display -->\n                    @if (displayMessage && message && (message.type !== 'warning' || !isAppInitiatedAction)) {\n                        <div\n                            [kcClass]=\"'kcAlertClass'\"\n                            [ngClass]=\"message.type === 'error' ? 'pf-m-danger' : 'pf-m-' + message.type\"\n                            [class]=\"'alert-' + message.type\"\n                        >\n                            <div class=\"pf-c-alert__icon\">\n                                @switch (message.type) {\n                                    @case ('success') {\n                                        <span [kcClass]=\"'kcFeedbackSuccessIcon'\"></span>\n                                    }\n                                    @case ('warning') {\n                                        <span [kcClass]=\"'kcFeedbackWarningIcon'\"></span>\n                                    }\n                                    @case ('info') {\n                                        <span [kcClass]=\"'kcFeedbackInfoIcon'\"></span>\n                                    }\n                                    @case ('error') {\n                                        <span [kcClass]=\"'kcFeedbackErrorIcon'\"></span>\n                                    }\n                                }\n                            </div>\n                            <span\n                                [kcClass]=\"'kcAlertTitleClass'\"\n                                [innerHTML]=\"message.summary | kcSanitize: 'html'\"\n                            ></span>\n                        </div>\n                    }\n                    <!-- Content -->\n                    @let pageRef = page();\n                    @if (!!pageRef) {\n                        <kc-dynamic-page-injector\n                            [page]=\"pageRef\"\n                            (componentCreated)=\"onComponentCreated($event)\"\n                        />\n                    }\n                    @if (!!auth && auth?.showTryAnotherWayLink) {\n                        <form\n                            id=\"kc-select-try-another-way-form\"\n                            method=\"post\"\n                            [action]=\"url?.loginAction\"\n                        >\n                            <div [kcClass]=\"'kcFormGroupClass'\">\n                                <div [kcClass]=\"'kcFormGroupClass'\">\n                                    <input\n                                        type=\"hidden\"\n                                        name=\"tryAnotherWay\"\n                                        value=\"on\"\n                                    />\n                                    <a\n                                        id=\"try-another-way\"\n                                        (click)=\"tryAnotherWay()\"\n                                    >\n                                        {{ i18n.msgStr('doTryAnotherWay') }}\n                                    </a>\n                                </div>\n                            </div>\n                        </form>\n                    }\n                    @let socialProviders = socialProvidersNode && socialProvidersNode();\n                    @if (socialProviders) {\n                        <ng-container [ngTemplateOutlet]=\"socialProviders\" />\n                    }\n                    <!-- Info display -->\n                    @if (displayInfo) {\n                        <div\n                            id=\"kc-info\"\n                            [kcClass]=\"'kcSignUpClass'\"\n                        >\n                            <div\n                                id=\"kc-info-wrapper\"\n                                [kcClass]=\"'kcInfoAreaWrapperClass'\"\n                            >\n                                @let info = infoNode && infoNode();\n                                @if (info) {\n                                    <ng-container [ngTemplateOutlet]=\"info\" />\n                                }\n                            </div>\n                        </div>\n                    }\n                </div>\n            </div>\n        </div>\n    </div>\n}\n" }]
         }], ctorParameters: () => [] });
 /**
  * Generated bundle index. Do not edit.
  */
-export { TemplateComponent };
+export { DynamicPageInjectorComponent, TemplateComponent };
 //# sourceMappingURL=keycloakify-angular-login-containers-template.mjs.map