@keycloakify/angular 0.0.1-rc.8 → 0.0.1

package/src/bin/update-kc-gen.ts

@@ -0,0 +1,149 @@
+import type { BuildContext } from './core';
+import * as fs from 'fs';
+import { join as pathJoin } from 'path';
+
+export function command(params: { buildContext: BuildContext }) {
+    const { buildContext } = params;
+
+    const filePath = pathJoin(buildContext.themeSrcDirPath, 'kc.gen.ts');
+
+    const currentContent = fs.existsSync(filePath)
+        ? fs.readFileSync(filePath)
+        : undefined;
+
+    const implementedThemeTypes = (['login', 'account'] as const).filter(
+        themeType => buildContext.implementedThemeTypes[themeType].isImplemented
+    );
+
+    const newContent = Buffer.from(
+        [
+            `/* prettier-ignore-start */`,
+            ``,
+            `/* eslint-disable */`,
+            ``,
+            `// noinspection JSUnusedGlobalSymbols`,
+            ``,
+            `// This file is auto-generated by Keycloakify`,
+            ``,
+            `import type { ComponentRef, EnvironmentProviders, Type } from "@angular/core";`,
+            ``,
+            `export type ThemeName = ${buildContext.themeNames.map(themeName => `"${themeName}"`).join(' | ')};`,
+            ``,
+            `export const themeNames: ThemeName[] = [${buildContext.themeNames.map(themeName => `"${themeName}"`).join(', ')}];`,
+            ``,
+            `export type KcEnvName = ${buildContext.environmentVariables.length === 0 ? 'never' : buildContext.environmentVariables.map(({ name }) => `"${name}"`).join(' | ')};`,
+            ``,
+            `export const kcEnvNames: KcEnvName[] = [${buildContext.environmentVariables.map(({ name }) => `"${name}"`).join(', ')}];`,
+            ``,
+            `export const kcEnvDefaults: Record<KcEnvName, string> = ${JSON.stringify(
+                Object.fromEntries(
+                    buildContext.environmentVariables.map(
+                        ({ name, default: defaultValue }) => [name, defaultValue]
+                    )
+                ),
+                null,
+                2
+            )};`,
+            ``,
+            `export type KcContext =`,
+            ...implementedThemeTypes.map(
+                themeType => `    | import("./${themeType}/KcContext").KcContext`
+            ),
+            `    ;`,
+            ``,
+            `declare global {`,
+            `    interface Window {`,
+            `        kcContext?: KcContext;`,
+            `    }`,
+            `}`,
+            ``,
+            `type ApplicationRefLike = {`,
+            `    components: ComponentRef<any>[];`,
+            `};`,
+            ``,
+            `export async function bootstrapKcApplication(params: {`,
+            `    kcContext: KcContext;`,
+            `    bootstrapApplication: (params: {`,
+            `        KcRootComponent: Type<unknown>;`,
+            `        kcProvider: EnvironmentProviders;`,
+            `    }) => Promise<ApplicationRefLike>;`,
+            `}) {`,
+            `    const { kcContext, bootstrapApplication } = params;`,
+            ``,
+            `    switch (kcContext.themeType) {`,
+            ...(['login', 'account'] as const)
+                .filter(
+                    themeType =>
+                        buildContext.implementedThemeTypes[themeType].isImplemented
+                )
+                .map(themeType => [
+                    `        case "${themeType}":`,
+                    `            {`,
+                    `                const [`,
+                    `                    { provideKeycloakifyAngular },`,
+                    `                    { getI18n },`,
+                    `                    {`,
+                    `                        PageComponent,`,
+                    `                        TemplateComponent,`,
+                    `                        doUseDefaultCss,`,
+                    `                        classes,`,
+                    ...(themeType === 'login'
+                        ? [
+                              `                        UserProfileFormFieldsComponent,`,
+                              `                        doMakeUserConfirmPassword,`
+                          ]
+                        : []),
+                    `                    },`,
+                    `                ] = await Promise.all([`,
+                    `                    import('@keycloakify/angular/login/providers/keycloakify-angular'),`,
+                    `                    import('./${themeType}/i18n'),`,
+                    `                    import('./${themeType}/KcPage').then(({ getKcPage }) => getKcPage(kcContext.pageId)),`,
+                    `                ] as const);`,
+                    ``,
+                    `                const appRef = await bootstrapApplication({`,
+                    `                    KcRootComponent: TemplateComponent,`,
+                    `                    kcProvider: provideKeycloakifyAngular({`,
+                    `                        kcContext,`,
+                    `                        classes,`,
+                    `                        getI18n,`,
+                    `                        doUseDefaultCss,`,
+                    ...(themeType === 'login'
+                        ? [`                        doMakeUserConfirmPassword,`]
+                        : []),
+                    `                    })`,
+                    `                });`,
+                    ``,
+                    `                appRef.components.forEach(componentRef => {`,
+                    `                    if ("page" in componentRef.instance) {`,
+                    `                        componentRef.setInput("page", PageComponent);`,
+                    `                    }`,
+                    ...(themeType === 'login'
+                        ? [
+                              `                    if ("userProfileFormFields" in componentRef.instance) {`,
+                              `                        componentRef.setInput(`,
+                              `                            "userProfileFormFields",`,
+                              `                            UserProfileFormFieldsComponent`,
+                              `                        );`,
+                              `                    }`
+                          ]
+                        : []),
+                    `                });`,
+                    `            }`,
+                    `            break;`
+                ])
+                .flat(),
+            `    }`,
+            `}`,
+            ``,
+            `/* prettier-ignore-end */`,
+            ``
+        ].join('\n'),
+        'utf8'
+    );
+
+    if (currentContent !== undefined && currentContent.equals(newContent)) {
+        return;
+    }
+
+    fs.writeFileSync(filePath, newContent);
+}

package/src/index.ts

@@ -0,0 +1 @@
+export const KEYCLOAKIFY_ANGULAR = '@keycloakify/angular';

package/src/lib/directives/attributes/index.ts

@@ -0,0 +1 @@
+export * from './attributes.directive';

package/src/lib/index.ts

@@ -0,0 +1 @@
+export const KEYCLOAKIFY_ANGULAR_LIB = '@keycloakify/angular/lib';

package/src/lib/models/script/index.ts

@@ -0,0 +1 @@
+export * from './script.model';

package/src/lib/pipes/input-type/index.ts

@@ -0,0 +1 @@
+export * from './input-type.pipe';

package/src/lib/pipes/is-array-with-empty-object/index.ts

@@ -0,0 +1 @@
+export * from './is-array-with-empty-object.pipe';

package/src/lib/pipes/is-array-with-empty-object/is-array-with-empty-object.pipe.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'isArrayWithEmptyObject',
+    standalone: true
+})
+export class IsArrayWithEmptyObjectPipe implements PipeTransform {
+    transform(variable: unknown): boolean {
+        return (
+            Array.isArray(variable) &&
+            variable.length === 1 &&
+            typeof variable[0] === 'object' &&
+            Object.keys(variable[0]).length === 0
+        );
+    }
+}

package/src/lib/pipes/kc-sanitize/index.ts

@@ -0,0 +1 @@
+export * from './kc-sanitize.pipe';

package/src/lib/pipes/to-array/index.ts

@@ -0,0 +1 @@
+export * from './to-array.pipe';

package/src/{login/pipes → lib/pipes/to-array}/to-array.pipe.ts

@@ -6,6 +6,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 })
 export class ToArrayPipe implements PipeTransform {
     transform(value: string | string[], emptyWhenString = false): string[] {
+        // if (!value) throw new Error('must pass a value');
         if (value instanceof Array) {
             return value;
         }

package/src/lib/pipes/to-number/index.ts

@@ -0,0 +1 @@
+export * from './to-number.pipe';

package/src/lib/services/resource-injector/index.ts

@@ -0,0 +1 @@
+export * from './resource-injector.service';

package/src/lib/services/{resource-injector.service.ts → resource-injector/resource-injector.service.ts}

@@ -1,6 +1,6 @@
 import { inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
 import { Observable } from 'rxjs';
-import { Script } from '../models/script.model';
+import { Script } from '@keycloakify/angular/lib/models/script';
 
 @Injectable({
     providedIn: 'root'

package/src/lib/tokens/use-default-css/index.ts

@@ -0,0 +1 @@
+export * from './use-default-css.token';

package/src/login/classes/{component-reference.class.ts → component-reference/component-reference.class.ts}

@@ -1,4 +1,4 @@
-import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
 export abstract class ComponentReference {
     doUseDefaultCss: boolean | undefined;
     classes: Partial<Record<ClassKey, string>> | undefined;

package/src/login/classes/component-reference/index.ts

@@ -0,0 +1 @@
+export * from './component-reference.class';

package/src/login/components/add-remove-buttons-multi-valued-attribute/add-remove-buttons-multi-valued-attribute.component.html

@@ -1,9 +1,9 @@
 @let idPostfix = attribute()?.name ?? '' + '-' + (fieldIndex() ?? 0 + 1);
 @if (hasRemove()) {
     <button
-        [id]="'kc-remove-' + idPostfix"
         type="button"
         class="pf-c-button pf-m-inline pf-m-link"
+        [id]="'kc-remove-' + idPostfix"
         (click)="onRemove()"
     >
         {{ i18n.msgStr('remove') }}
@@ -14,9 +14,9 @@
 }
 @if (hasAdd()) {
     <button
-        [id]="'kc-add-' + idPostfix"
         type="button"
         class="pf-c-button pf-m-inline pf-m-link"
+        [id]="'kc-add-' + idPostfix"
         (click)="onAdd()"
     >
         {{ i18n.msgStr('addValue') }}

package/src/login/components/add-remove-buttons-multi-valued-attribute/add-remove-buttons-multi-valued-attribute.component.ts

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';
-import { type FormAction } from '@keycloakify/angular/login/services/user-profile-form.service';
-import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { type FormAction } from '@keycloakify/angular/login/services/user-profile-form';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
 import { type Attribute } from 'keycloakify/login/KcContext';
-import { type I18n } from '../../i18n';
+import type { I18n } from '@keycloakify/angular/login/i18n';
 
 @Component({
     standalone: true,

package/src/login/components/add-remove-buttons-multi-valued-attribute/index.ts

@@ -0,0 +1 @@
+export * from './add-remove-buttons-multi-valued-attribute.component';

package/src/login/components/field-errors/field-errors.component.html

@@ -1,8 +1,8 @@
 @let index = fieldIndex();
 <span
+    aria-live="polite"
     [id]="'input-error-' + attribute.name + (index === undefined ? '' : '-' + index)"
     [kcClass]="'kcInputErrorMessageClass'"
-    aria-live="polite"
 >
     @for (error of displayableErrors(); track error; let i = $index) {
         @if (error.fieldIndex === index) {

package/src/login/components/field-errors/field-errors.component.ts

@@ -1,11 +1,11 @@
 import { ChangeDetectionStrategy, Component, forwardRef, inject, input } from '@angular/core';
-import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
-import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
-import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
-import { type FormFieldError } from '@keycloakify/angular/login/services/user-profile-form.service';
-import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
+import { type FormFieldError } from '@keycloakify/angular/login/services/user-profile-form';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
 import { type Attribute } from 'keycloakify/login/KcContext';
-import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
 
 @Component({
     standalone: true,

package/src/login/components/field-errors/index.ts

@@ -0,0 +1 @@
+export * from './field-errors.component';

package/src/login/components/group-label/group-label.component.ts

@@ -1,13 +1,13 @@
 import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input } from '@angular/core';
-import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
-import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
-import { AttributesDirective } from '@keycloakify/angular/login/directives/attributes.directive';
-import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
-import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
-import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
+import { AttributesDirective } from '@keycloakify/angular/lib/directives/attributes';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
 import { type Attribute } from 'keycloakify/login/KcContext';
-import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { type I18n } from '../../i18n';
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import type { I18n } from '@keycloakify/angular/login/i18n';
 
 @Component({
     standalone: true,

package/src/login/components/group-label/index.ts

@@ -0,0 +1 @@
+export * from './group-label.component';

package/src/login/components/input-field-by-type/index.ts

@@ -0,0 +1 @@
+export * from './input-field-by-type.component';

package/src/login/components/input-field-by-type/input-field-by-type.component.html

@@ -8,7 +8,7 @@
                 [value]="$any(valueOrValues())"
                 [displayableErrors]="displayableErrors()"
                 (dispatchFormAction)="dispatchFormAction.emit($event)"
-            ></kc-textarea-tag>
+            />
         }
         @case (type === 'select' || type === 'multiselect' ? type : '') {
             <kc-select-tag
@@ -16,7 +16,7 @@
                 [valueOrValues]="valueOrValues()"
                 [displayableErrors]="displayableErrors()"
                 (dispatchFormAction)="dispatchFormAction.emit($event)"
-            ></kc-select-tag>
+            />
         }
         @case (type === 'select-radiobuttons' || type === 'multiselect-checkboxes' ? type : '') {
             <kc-input-tag-selects
@@ -24,7 +24,7 @@
                 [valueOrValues]="valueOrValues()"
                 [displayableErrors]="displayableErrors()"
                 (dispatchFormAction)="dispatchFormAction.emit($event)"
-            ></kc-input-tag-selects>
+            />
         }
         @default {
             @let values = valueOrValues();
@@ -37,7 +37,7 @@
                         [fieldIndex]="i"
                         [displayableErrors]="displayableErrors()"
                         (dispatchFormAction)="dispatchFormAction.emit($event)"
-                    ></kc-input-tag>
+                    />
                 }
             } @else {
                 @if (attr.name === 'password' || attr.name === 'password-confirm') {
@@ -47,7 +47,7 @@
                             [valueOrValues]="valueOrValues()"
                             [displayableErrors]="displayableErrors()"
                             (dispatchFormAction)="dispatchFormAction.emit($event)"
-                        ></kc-input-tag>
+                        />
                     </kc-password-wrapper>
                 } @else {
                     <kc-input-tag
@@ -55,7 +55,7 @@
                         [valueOrValues]="valueOrValues()"
                         [displayableErrors]="displayableErrors()"
                         (dispatchFormAction)="dispatchFormAction.emit($event)"
-                    ></kc-input-tag>
+                    />
                 }
             }
         }

package/src/login/components/input-field-by-type/input-field-by-type.component.ts

@@ -1,16 +1,16 @@
 import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, output } from '@angular/core';
-import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
-import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
+import { ToArrayPipe } from '@keycloakify/angular/lib/pipes/to-array';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
+import { InputTagComponent } from '@keycloakify/angular/login/components/input-tag';
+import { InputTagSelectsComponent } from '@keycloakify/angular/login/components/input-tag-selects';
+import { PasswordWrapperComponent } from '@keycloakify/angular/login/components/password-wrapper';
+import { SelectTagComponent } from '@keycloakify/angular/login/components/select-tag';
+import { TextareaTagComponent } from '@keycloakify/angular/login/components/textarea-tag';
+import { FormAction, FormFieldError } from '@keycloakify/angular/login/services/user-profile-form';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
 import { type Attribute } from 'keycloakify/login/KcContext';
-import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
-import { ToArrayPipe } from '@keycloakify/angular/login/pipes/to-array.pipe';
-import { FormAction, FormFieldError } from '@keycloakify/angular/login/services/user-profile-form.service';
-import { InputTagSelectsComponent } from '@keycloakify/angular/login/components/input-tag-selects/input-tag-selects.component';
-import { InputTagComponent } from '@keycloakify/angular/login/components/input-tag/input-tag.component';
-import { PasswordWrapperComponent } from '@keycloakify/angular/login/components/password-wrapper/password-wrapper.component';
-import { SelectTagComponent } from '@keycloakify/angular/login/components/select-tag/select-tag.component';
-import { TextareaTagComponent } from '@keycloakify/angular/login/components/textarea-tag/textarea-tag.component';
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
 
 @Component({
     standalone: true,

package/src/login/components/input-tag/index.ts

@@ -0,0 +1 @@
+export * from './input-tag.component';

package/src/login/components/input-tag/input-tag.component.html

@@ -34,12 +34,12 @@
             [attribute]="attr"
             [displayableErrors]="displayableErrors()"
             [fieldIndex]="index"
-        ></kc-field-errors>
+        />
         <kc-add-remove-buttons-multi-valued-attribute
             [attribute]="attr"
             [values]="values"
             [fieldIndex]="index"
             (dispatchFormAction)="dispatchFormAction.emit($event)"
-        ></kc-add-remove-buttons-multi-valued-attribute>
+        />
     }
 }

package/src/login/components/input-tag/input-tag.component.ts

@@ -1,19 +1,19 @@
 import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, output } from '@angular/core';
-import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
-import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
-import { AddRemoveButtonsMultiValuedAttributeComponent } from '@keycloakify/angular/login/components/add-remove-buttons-multi-valued-attribute/add-remove-buttons-multi-valued-attribute.component';
-import { FieldErrorsComponent } from '@keycloakify/angular/login/components/field-errors/field-errors.component';
-import { AttributesDirective } from '@keycloakify/angular/login/directives/attributes.directive';
-import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
-import { InputTypePipe } from '@keycloakify/angular/login/pipes/input-type.pipe';
-import { ToArrayPipe } from '@keycloakify/angular/login/pipes/to-array.pipe';
-import { ToNumberPipe } from '@keycloakify/angular/login/pipes/to-number.pipe';
-import { FormAction, FormFieldError } from '@keycloakify/angular/login/services/user-profile-form.service';
-import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
-import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { AttributesDirective } from '@keycloakify/angular/lib/directives/attributes';
+import { InputTypePipe } from '@keycloakify/angular/lib/pipes/input-type';
+import { ToArrayPipe } from '@keycloakify/angular/lib/pipes/to-array';
+import { ToNumberPipe } from '@keycloakify/angular/lib/pipes/to-number';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
+import { AddRemoveButtonsMultiValuedAttributeComponent } from '@keycloakify/angular/login/components/add-remove-buttons-multi-valued-attribute';
+import { FieldErrorsComponent } from '@keycloakify/angular/login/components/field-errors';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
+import type { I18n } from '@keycloakify/angular/login/i18n';
+import { FormAction, FormFieldError } from '@keycloakify/angular/login/services/user-profile-form';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
 import { type Attribute } from 'keycloakify/login/KcContext';
-import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { type I18n } from '../../i18n';
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
 
 @Component({
     standalone: true,

package/src/login/components/input-tag-selects/index.ts

@@ -0,0 +1 @@
+export * from './input-tag-selects.component';

package/src/login/components/input-tag-selects/input-tag-selects.component.ts

@@ -1,13 +1,13 @@
 import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, output, Signal } from '@angular/core';
-import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
-import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
-import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
-import { type FormAction, type FormFieldError } from '@keycloakify/angular/login/services/user-profile-form.service';
-import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
-import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
+import { type FormAction, type FormFieldError } from '@keycloakify/angular/login/services/user-profile-form';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
 import { type Attribute } from 'keycloakify/login/KcContext';
-import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { type I18n } from '../../i18n';
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import type { I18n } from '@keycloakify/angular/login/i18n';
 
 @Component({
     standalone: true,

package/src/login/components/logout-other-sessions/index.ts

@@ -0,0 +1 @@
+export * from './logout-other-sessions.component';

package/src/login/components/logout-other-sessions/logout-other-sessions.component.ts

@@ -1,11 +1,11 @@
 import { ChangeDetectionStrategy, Component, forwardRef, inject } from '@angular/core';
-import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
-import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
-import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
-import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
-import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
-import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { type I18n } from '../../i18n';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import type { I18n } from '@keycloakify/angular/login/i18n';
 
 @Component({
     selector: 'kc-logout-other-sessions',
@@ -19,7 +19,7 @@ import { type I18n } from '../../i18n';
     standalone: true,
     imports: [KcClassDirective],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    templateUrl: './logout-other-sessions.component.html',
+    templateUrl: 'logout-other-sessions.component.html',
     providers: [
         {
             provide: ComponentReference,

package/src/login/components/password-wrapper/index.ts

@@ -0,0 +1 @@
+export * from './password-wrapper.component';

package/src/login/components/password-wrapper/password-wrapper.component.html

@@ -1,5 +1,5 @@
 <div [kcClass]="'kcInputGroup'">
-    <ng-content></ng-content>
+    <ng-content />
     <button
         type="button"
         [kcClass]="'kcFormPasswordVisibilityButtonClass'"
@@ -8,8 +8,8 @@
         (click)="togglePasswordVisibility()"
     >
         <i
-            [kcClass]="isPasswordRevealed() ? 'kcFormPasswordVisibilityIconHide' : 'kcFormPasswordVisibilityIconShow'"
             aria-hidden="true"
+            [kcClass]="isPasswordRevealed() ? 'kcFormPasswordVisibilityIconHide' : 'kcFormPasswordVisibilityIconShow'"
         ></i>
     </button>
 </div>

package/src/login/components/password-wrapper/password-wrapper.component.ts

@@ -1,12 +1,12 @@
 import { AsyncPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, forwardRef, inject, input, Renderer2, signal, WritableSignal } from '@angular/core';
-import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
-import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
-import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
-import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
-import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
-import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { type I18n } from '../../i18n';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import type { I18n } from '@keycloakify/angular/login/i18n';
 
 @Component({
     selector: 'kc-password-wrapper',
@@ -20,7 +20,7 @@ import { type I18n } from '../../i18n';
     standalone: true,
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [KcClassDirective, AsyncPipe],
-    templateUrl: './password-wrapper.component.html',
+    templateUrl: 'password-wrapper.component.html',
     providers: [
         {
             provide: ComponentReference,

package/src/login/components/select-tag/index.ts

@@ -0,0 +1 @@
+export * from './select-tag.component';

package/src/login/components/select-tag/select-tag.component.ts

@@ -1,14 +1,14 @@
 import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, output } from '@angular/core';
-import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
-import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
-import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
-import { ToNumberPipe } from '@keycloakify/angular/login/pipes/to-number.pipe';
-import { type FormAction, type FormFieldError } from '@keycloakify/angular/login/services/user-profile-form.service';
-import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
-import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
+import { ToNumberPipe } from '@keycloakify/angular/lib/pipes/to-number';
+import { type FormAction, type FormFieldError } from '@keycloakify/angular/login/services/user-profile-form';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
 import { type Attribute } from 'keycloakify/login/KcContext';
-import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { type I18n } from '../../i18n';
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import type { I18n } from '@keycloakify/angular/login/i18n';
 
 @Component({
     standalone: true,

package/src/login/components/textarea-tag/index.ts

@@ -0,0 +1 @@
+export * from './textarea-tag.component';