@keycloakify/angular 0.0.1-rc.13 → 0.0.1-rc.16

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

@@ -0,0 +1,46 @@
+import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input } 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 { 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 '@keycloakify/angular/login/i18n';
+
+@Component({
+    standalone: true,
+    styles: [
+        `
+            :host {
+                display: contents;
+            }
+        `
+    ],
+    imports: [KcClassDirective, AttributesDirective],
+    selector: 'kc-group-label',
+    templateUrl: 'group-label.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => GroupLabelComponent)
+        }
+    ]
+})
+export class GroupLabelComponent extends ComponentReference {
+    i18n = inject<I18n>(LOGIN_I18N);
+    attribute = input<Attribute>();
+    groupName = input<string>();
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
+    groupNameRef = computed(() => {
+        const attribute = this.attribute();
+        const groupName = this.groupName();
+        if (attribute?.group?.name !== groupName) {
+            return attribute?.group?.name ?? '';
+        }
+        return '';
+    });
+}

package/src/login/components/group-label/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    }
+}

package/src/login/components/input-field-by-type/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    }
+}

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

@@ -0,0 +1,99 @@
+import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, output } from '@angular/core';
+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';
+
+@Component({
+    standalone: true,
+    styles: [
+        `
+            :host {
+                display: contents;
+            }
+        `
+    ],
+    imports: [
+        InputTypePipe,
+        KcClassDirective,
+        ToNumberPipe,
+        AttributesDirective,
+        ToArrayPipe,
+        FieldErrorsComponent,
+        AddRemoveButtonsMultiValuedAttributeComponent
+    ],
+    selector: 'kc-input-tag',
+    templateUrl: 'input-tag.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => InputTagComponent)
+        }
+    ]
+})
+export class InputTagComponent extends ComponentReference {
+    i18n = inject<I18n>(LOGIN_I18N);
+    attribute = input<Attribute>();
+    valueOrValues = input<string | string[]>();
+    fieldIndex = input<number | undefined>(undefined);
+    values = input<string[]>();
+    displayableErrors = input<FormFieldError[]>();
+    dispatchFormAction = output<FormAction>();
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
+
+    value = computed(() => {
+        const valueOrValues = this.valueOrValues();
+        const index = this.fieldIndex();
+        if (valueOrValues instanceof Array) {
+            if (index) {
+                return valueOrValues[index] ?? null;
+            }
+            return null;
+        }
+        return valueOrValues ?? null;
+    });
+
+    onChange(event: Event) {
+        const valueOrValues = this.valueOrValues();
+        this.dispatchFormAction.emit({
+            action: 'update',
+            name: this.attribute()?.name ?? '',
+            valueOrValues: (() => {
+                if (this.fieldIndex !== undefined) {
+                    if (valueOrValues instanceof Array) {
+                        return valueOrValues.map((value, i) => {
+                            if (i === this.fieldIndex()) {
+                                return (event.target as HTMLInputElement)?.value;
+                            }
+
+                            return value;
+                        });
+                    }
+                }
+
+                return (event.target as HTMLInputElement)?.value;
+            })()
+        });
+    }
+
+    onBlur() {
+        this.dispatchFormAction.emit({
+            action: 'focus lost',
+            name: this.attribute()?.name ?? '',
+            fieldIndex: this.fieldIndex()
+        });
+    }
+}

package/src/login/components/input-tag/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    }
+}

package/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 '@keycloakify/angular/login/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/src/login/components/input-tag-selects/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    }
+}

package/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 '@keycloakify/angular/login/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/src/login/components/logout-other-sessions/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    }
+}

package/src/login/components/password-wrapper/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    }
+}

package/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 '@keycloakify/angular/login/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/src/login/components/select-tag/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    }
+}

package/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 '@keycloakify/angular/login/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/src/login/components/textarea-tag/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    }
+}

package/src/login/components/user-profile-form-fields/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    }
+}

package/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 '@keycloakify/angular/login/i18n';
+import type { KcContext } from '@keycloakify/angular/login/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/src/login/containers/template/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    }
+}