@keycloakify/angular 0.0.1-rc.10 → 0.0.1-rc.12

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

@@ -0,0 +1,139 @@
+import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, output, Signal } from '@angular/core';
+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';
+
+@Component({
+    standalone: true,
+    styles: [
+        `
+            :host {
+                display: contents;
+            }
+        `
+    ],
+    imports: [KcClassDirective],
+    selector: 'kc-input-tag-selects',
+    templateUrl: 'input-tag-selects.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => InputTagSelectsComponent)
+        }
+    ]
+})
+export class InputTagSelectsComponent extends ComponentReference {
+    i18n = inject<I18n>(LOGIN_I18N);
+    attribute = input<Attribute>();
+    valueOrValues = input<string | string[]>();
+    dispatchFormAction = output<FormAction>();
+    displayableErrors = input<FormFieldError[]>();
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
+
+    context: Signal<{
+        inputType: 'radio' | 'checkbox';
+        classDiv: ClassKey;
+        classInput: ClassKey;
+        classLabel: ClassKey;
+    } | null> = computed(() => {
+        const attribute = this.attribute();
+        if (attribute) {
+            const { inputType } = attribute.annotations;
+            switch (inputType) {
+                case 'select-radiobuttons':
+                    return {
+                        inputType: 'radio',
+                        classDiv: 'kcInputClassRadio',
+                        classInput: 'kcInputClassRadioInput',
+                        classLabel: 'kcInputClassRadioLabel'
+                    };
+                case 'multiselect-checkboxes':
+                    return {
+                        inputType: 'checkbox',
+                        classDiv: 'kcInputClassCheckbox',
+                        classInput: 'kcInputClassCheckboxInput',
+                        classLabel: 'kcInputClassCheckboxLabel'
+                    };
+            }
+        }
+        return null;
+    });
+
+    options = computed(() => {
+        const attribute = this.attribute();
+        if (attribute) {
+            return (() => {
+                walk: {
+                    const { inputOptionsFromValidation } = attribute.annotations;
+
+                    if (inputOptionsFromValidation === undefined) {
+                        break walk;
+                    }
+
+                    const validator = (attribute.validators as Record<string, { options?: string[] }>)[inputOptionsFromValidation];
+
+                    if (validator === undefined) {
+                        break walk;
+                    }
+
+                    if (validator.options === undefined) {
+                        break walk;
+                    }
+
+                    return validator.options;
+                }
+
+                return attribute.validators.options?.options ?? [];
+            })();
+        }
+        return [];
+    });
+
+    checked(option: string) {
+        const valueOrValues = this.valueOrValues();
+        if (valueOrValues instanceof Array) {
+            return valueOrValues.includes(option);
+        }
+        return valueOrValues === option;
+    }
+
+    onChange(event: Event, option: string) {
+        const valueOrValues = this.valueOrValues();
+        const isChecked = (event.target as HTMLInputElement).checked;
+        this.dispatchFormAction.emit({
+            action: 'update',
+            name: this.attribute()?.name ?? '',
+            valueOrValues: (() => {
+                if (valueOrValues instanceof Array) {
+                    const newValues = [...valueOrValues];
+
+                    if (isChecked) {
+                        newValues.push(option);
+                    } else {
+                        newValues.splice(newValues.indexOf(option), 1);
+                    }
+
+                    return newValues;
+                }
+
+                return (event.target as HTMLInputElement)?.checked ? option : '';
+            })()
+        });
+    }
+
+    onBlur() {
+        this.dispatchFormAction.emit({
+            action: 'focus lost',
+            name: this.attribute()?.name ?? '',
+            fieldIndex: undefined
+        });
+    }
+}

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

@@ -0,0 +1 @@
+export * from './public-api';

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

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, forwardRef, inject } from '@angular/core';
+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 '../../i18n';
+
+@Component({
+    selector: 'kc-logout-other-sessions',
+    styles: [
+        `
+            :host {
+                display: contents;
+            }
+        `
+    ],
+    standalone: true,
+    imports: [KcClassDirective],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './logout-other-sessions.component.html',
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => LogoutOtherSessionsComponent)
+        }
+    ]
+})
+export class LogoutOtherSessionsComponent extends ComponentReference {
+    i18n = inject<I18n>(LOGIN_I18N);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
+}

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

@@ -0,0 +1 @@
+export * from './public-api';

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

@@ -0,0 +1,51 @@
+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';
+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 '../../i18n';
+
+@Component({
+    selector: 'kc-password-wrapper',
+    styles: [
+        `
+            :host {
+                display: contents;
+            }
+        `
+    ],
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [KcClassDirective, AsyncPipe],
+    templateUrl: './password-wrapper.component.html',
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => PasswordWrapperComponent)
+        }
+    ]
+})
+export class PasswordWrapperComponent extends ComponentReference {
+    i18n = inject<I18n>(LOGIN_I18N);
+    private renderer = inject(Renderer2);
+    passwordInputId = input.required<string>();
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
+
+    isPasswordRevealed: WritableSignal<boolean> = signal(false);
+
+    togglePasswordVisibility(): void {
+        this.isPasswordRevealed.update(revealed => !revealed);
+        this.setPasswordInputType();
+    }
+
+    private setPasswordInputType(): void {
+        const input = document.getElementById(this.passwordInputId());
+        if (input) {
+            this.renderer.setProperty(input, 'type', this.isPasswordRevealed() ? 'text' : 'password');
+        }
+    }
+}

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

@@ -0,0 +1 @@
+export * from './public-api';

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

@@ -0,0 +1,97 @@
+import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, output } from '@angular/core';
+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';
+
+@Component({
+    standalone: true,
+    styles: [
+        `
+            :host {
+                display: contents;
+            }
+        `
+    ],
+    imports: [KcClassDirective, ToNumberPipe],
+    selector: 'kc-select-tag',
+    templateUrl: 'select-tag.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => SelectTagComponent)
+        }
+    ]
+})
+export class SelectTagComponent extends ComponentReference {
+    i18n = inject<I18n>(LOGIN_I18N);
+    attribute = input<Attribute>();
+    valueOrValues = input<string | string[]>();
+    displayableErrors = input<FormFieldError[]>();
+    dispatchFormAction = output<FormAction>();
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
+
+    isMultiple = computed(() => {
+        return this.attribute()?.annotations?.inputType === 'multiselect';
+    });
+
+    options = computed(() => {
+        const attribute = this.attribute();
+        if (attribute) {
+            return (() => {
+                walk: {
+                    const { inputOptionsFromValidation } = attribute.annotations;
+
+                    if (inputOptionsFromValidation === undefined) {
+                        break walk;
+                    }
+
+                    const validator = (attribute.validators as Record<string, { options?: string[] }>)[inputOptionsFromValidation];
+
+                    if (validator === undefined) {
+                        break walk;
+                    }
+
+                    if (validator.options === undefined) {
+                        break walk;
+                    }
+
+                    return validator.options;
+                }
+
+                return attribute.validators.options?.options ?? [];
+            })();
+        }
+        return [];
+    });
+
+    onChange(event: Event) {
+        this.dispatchFormAction.emit({
+            action: 'update',
+            name: this.attribute()?.name ?? '',
+            valueOrValues: (() => {
+                if (this.isMultiple()) {
+                    return Array.from((event.target as HTMLSelectElement).selectedOptions).map(option => option.value);
+                }
+
+                return (event.target as HTMLSelectElement).value;
+            })()
+        });
+    }
+
+    onBlur() {
+        this.dispatchFormAction.emit({
+            action: 'focus lost',
+            name: this.attribute()?.name ?? '',
+            fieldIndex: undefined
+        });
+    }
+}

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

@@ -0,0 +1 @@
+export * from './public-api';

package/dist/src/login/components/textarea-tag/textarea-tag.component.ts

@@ -0,0 +1,54 @@
+import { ChangeDetectionStrategy, Component, forwardRef, inject, input, output } from '@angular/core';
+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 { type Attribute } from 'keycloakify/login/KcContext';
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
+
+@Component({
+    standalone: true,
+    styles: [
+        `
+            :host {
+                display: contents;
+            }
+        `
+    ],
+    imports: [KcClassDirective, ToNumberPipe],
+    selector: 'kc-textarea-tag',
+    templateUrl: 'textarea-tag.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => TextareaTagComponent)
+        }
+    ]
+})
+export class TextareaTagComponent extends ComponentReference {
+    attribute = input<Attribute>();
+    value = input<string>();
+    displayableErrors = input<FormFieldError[]>();
+    dispatchFormAction = output<FormAction>();
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
+
+    onChange(event: Event) {
+        this.dispatchFormAction.emit({
+            action: 'update',
+            name: this.attribute()?.name ?? '',
+            valueOrValues: (event.target as HTMLTextAreaElement).value
+        });
+    }
+
+    onBlur() {
+        this.dispatchFormAction.emit({
+            action: 'focus lost',
+            name: this.attribute()?.name ?? '',
+            fieldIndex: undefined
+        });
+    }
+}

package/dist/src/login/components/user-profile-form-fields/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/dist/src/login/components/user-profile-form-fields/user-profile-form-fields.component.ts

@@ -0,0 +1,70 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, ContentChild, effect, forwardRef, inject, output, TemplateRef } from '@angular/core';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
+import { FieldErrorsComponent } from '@keycloakify/angular/login/components/field-errors';
+import { GroupLabelComponent } from '@keycloakify/angular/login/components/group-label';
+import { InputFieldByTypeComponent } from '@keycloakify/angular/login/components/input-field-by-type';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
+import type { I18n } from '../../i18n';
+import type { KcContext } from '../../KcContext';
+import { SubmitService } from '@keycloakify/angular/login/services/submit';
+import { type FormAction, UserProfileFormService } 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 { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context';
+import { DO_MAKE_USER_CONFIRM_PASSWORD } from '@keycloakify/angular/login/tokens/make-user-confirm-password';
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
+
+@Component({
+    standalone: true,
+    styles: [
+        `
+            :host {
+                display: contents;
+            }
+        `
+    ],
+    imports: [KcClassDirective, FieldErrorsComponent, InputFieldByTypeComponent, GroupLabelComponent, NgTemplateOutlet],
+    selector: 'kc-user-profile-form-fields',
+    templateUrl: 'user-profile-form-fields.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        UserProfileFormService,
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => UserProfileFormFieldsComponent)
+        }
+    ]
+})
+export class UserProfileFormFieldsComponent extends ComponentReference {
+    i18n = inject<I18n>(LOGIN_I18N);
+    kcContext = inject<KcContext>(KC_LOGIN_CONTEXT);
+    userProfileFormService = inject(UserProfileFormService);
+    #submitService = inject(SubmitService);
+    doMakeUserConfirmPassword = inject(DO_MAKE_USER_CONFIRM_PASSWORD);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
+
+    onIsFormSubmittable = output<boolean>();
+
+    formState = this.userProfileFormService.formState;
+
+    @ContentChild('beforField') beforeField: TemplateRef<unknown> | undefined;
+    @ContentChild('afterField') afterField: TemplateRef<unknown> | undefined;
+
+    constructor() {
+        super();
+        effect(
+            () => {
+                const isFormSubmittable = this.formState().isFormSubmittable;
+                this.#submitService.setIsSubmittable(isFormSubmittable);
+            },
+            { allowSignalWrites: true }
+        );
+    }
+
+    onDispatch(formAction: FormAction) {
+        this.userProfileFormService.dispatchFormAction(formAction);
+    }
+}

package/dist/src/login/containers/template/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/dist/src/login/containers/template/template.component.ts

@@ -0,0 +1,78 @@
+import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, forwardRef, inject, input, OnInit, Renderer2 } 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';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
+import { LoginResourceInjectorService } from '@keycloakify/angular/login/services/login-resource-injector';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
+import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context';
+import { type ClassKey, getKcClsx } from 'keycloakify/login/lib/kcClsx';
+import { Observable } from 'rxjs';
+import type { I18n } from '../../i18n';
+import { KcContext } from '../../KcContext';
+
+@Component({
+    selector: 'kc-login-template',
+    templateUrl: './template.component.html',
+    standalone: true,
+    imports: [AsyncPipe, KcSanitizePipe, NgTemplateOutlet, KcClassDirective],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => TemplateComponent)
+        }
+    ]
+})
+export class TemplateComponent extends ComponentReference implements OnInit {
+    i18n = inject<I18n>(LOGIN_I18N);
+    renderer = inject(Renderer2);
+    meta = inject(Meta);
+    title = inject(Title);
+    kcContext = inject<KcContext>(KC_LOGIN_CONTEXT);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
+    loginResourceInjectorService = inject(LoginResourceInjectorService);
+
+    displayInfo = input(false);
+    displayMessage = input(true);
+    displayRequiredFields = input(false);
+    documentTitle = input<string>();
+    bodyClassName = input<string>();
+
+    isReadyToRender$: Observable<boolean>;
+
+    constructor() {
+        super();
+        this.title.setTitle(this.documentTitle() ?? this.i18n.msgStr('loginTitle', this.kcContext.realm.displayName));
+        this.isReadyToRender$ = this.loginResourceInjectorService.injectResource(this.doUseDefaultCss);
+    }
+
+    ngOnInit() {
+        this.applyKcIndexClasses();
+    }
+
+    private applyKcIndexClasses() {
+        const kcClsx = getKcClsx({
+            doUseDefaultCss: this.doUseDefaultCss,
+            classes: this.classes
+        }).kcClsx;
+        const kcBodyClass = this.bodyClassName() ?? kcClsx('kcBodyClass');
+        const kcHtmlClass = kcClsx('kcHtmlClass');
+        const kcBodyClasses = kcBodyClass.split(/\s+/);
+        const kcHtmlClasses = kcHtmlClass.split(/\s+/);
+        kcBodyClasses.forEach(klass => {
+            this.renderer.addClass(document.body, klass);
+        });
+        kcHtmlClasses.forEach(klass => {
+            this.renderer.addClass(document.documentElement, klass);
+        });
+    }
+
+    tryAnotherWay() {
+        document.forms['kc-select-try-another-way-form' as never].submit();
+    }
+}

package/dist/src/login/directives/kc-class/index.ts

@@ -0,0 +1 @@
+export * from './public-api';