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

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

@@ -1,136 +0,0 @@
-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 Attribute } from 'keycloakify/login/KcContext';
-import { type I18n } from '../../i18n';
-
-@Component({
-    standalone: true,
-    styles: [
-        `
-            :host {
-                display: contents;
-            }
-        `
-    ],
-    imports: [],
-    selector: 'kc-add-remove-buttons-multi-valued-attribute',
-    templateUrl: 'add-remove-buttons-multi-valued-attribute.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class AddRemoveButtonsMultiValuedAttributeComponent {
-    i18n = inject<I18n>(LOGIN_I18N);
-    attribute = input<Attribute>();
-    values = input<string[]>();
-    fieldIndex = input<number>();
-    dispatchFormAction = output<FormAction>();
-
-    hasRemove = computed(() => {
-        const attribute = this.attribute();
-        const values = this.values();
-        const fieldIndex = this.fieldIndex();
-        if (attribute && values && fieldIndex) {
-            return this.getButtonToDisplayForMultivaluedAttributeField({
-                attribute,
-                values,
-                fieldIndex
-            }).hasRemove;
-        }
-        return false;
-    });
-    hasAdd = computed(() => {
-        const attribute = this.attribute();
-        const values = this.values();
-        const fieldIndex = this.fieldIndex();
-        if (attribute && values && fieldIndex) {
-            return this.getButtonToDisplayForMultivaluedAttributeField({
-                attribute,
-                values,
-                fieldIndex
-            }).hasAdd;
-        }
-        return false;
-    });
-
-    onAdd() {
-        this.dispatchFormAction.emit({
-            action: 'update',
-            name: this.attribute()?.name ?? '',
-            valueOrValues: [...(this.values() ?? []), '']
-        });
-    }
-
-    onRemove() {
-        this.dispatchFormAction.emit({
-            action: 'update',
-            name: this.attribute()?.name ?? '',
-            valueOrValues: (this.values() ?? []).filter((_, i) => i !== this.fieldIndex())
-        });
-    }
-
-    private getButtonToDisplayForMultivaluedAttributeField(params: { attribute: Attribute; values: string[]; fieldIndex: number }) {
-        const { attribute, values, fieldIndex } = params;
-
-        const hasRemove = (() => {
-            if (values.length === 1) {
-                return false;
-            }
-
-            const minCount = (() => {
-                const { multivalued } = attribute.validators;
-
-                if (multivalued === undefined) {
-                    return undefined;
-                }
-
-                const minStr = multivalued.min;
-
-                if (minStr === undefined) {
-                    return undefined;
-                }
-
-                return parseInt(`${minStr}`);
-            })();
-
-            if (minCount === undefined) {
-                return true;
-            }
-
-            if (values.length === minCount) {
-                return false;
-            }
-
-            return true;
-        })();
-
-        const hasAdd = (() => {
-            if (fieldIndex + 1 !== values.length) {
-                return false;
-            }
-
-            const maxCount = (() => {
-                const { multivalued } = attribute.validators;
-
-                if (multivalued === undefined) {
-                    return undefined;
-                }
-
-                const maxStr = multivalued.max;
-
-                if (maxStr === undefined) {
-                    return undefined;
-                }
-
-                return parseInt(`${maxStr}`);
-            })();
-
-            if (maxCount === undefined) {
-                return true;
-            }
-
-            return values.length !== maxCount;
-        })();
-
-        return { hasRemove, hasAdd };
-    }
-}

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

@@ -1,36 +0,0 @@
-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 { type Attribute } from 'keycloakify/login/KcContext';
-import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
-
-@Component({
-    standalone: true,
-    styles: [
-        `
-            :host {
-                display: contents;
-            }
-        `
-    ],
-    imports: [KcClassDirective],
-    selector: 'kc-field-errors',
-    templateUrl: 'field-errors.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [
-        {
-            provide: ComponentReference,
-            useExisting: forwardRef(() => FieldErrorsComponent)
-        }
-    ]
-})
-export class FieldErrorsComponent extends ComponentReference {
-    attribute = input<Attribute>();
-    displayableErrors = input<FormFieldError[]>();
-    fieldIndex = input<number>();
-    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
-    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
-}

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

@@ -1,46 +0,0 @@
-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/lib/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 { 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, 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/input-field-by-type/input-field-by-type.component.ts

@@ -1,50 +0,0 @@
-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 { 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/lib/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';
-
-@Component({
-    standalone: true,
-    styles: [
-        `
-            :host {
-                display: contents;
-            }
-        `
-    ],
-    imports: [ToArrayPipe, TextareaTagComponent, SelectTagComponent, InputTagSelectsComponent, InputTagComponent, PasswordWrapperComponent],
-    selector: 'kc-input-field-by-type',
-    templateUrl: 'input-field-by-type.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [
-        {
-            provide: ComponentReference,
-            useExisting: forwardRef(() => InputFieldByTypeComponent)
-        }
-    ]
-})
-export class InputFieldByTypeComponent extends ComponentReference {
-    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);
-
-    attributePassword = computed<Attribute>(() => {
-        const attribute: Attribute = this.attribute() ?? ({} as Attribute);
-        return {
-            ...attribute,
-            annotations: { ...(attribute.annotations ?? {}), inputType: 'password' }
-        };
-    });
-}

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

@@ -1,99 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, output } from '@angular/core';
-import { AttributesDirective } from '@keycloakify/angular/lib/directives/attributes.directive';
-import { InputTypePipe } from '@keycloakify/angular/lib/pipes/input-type.pipe';
-import { ToArrayPipe } from '@keycloakify/angular/lib/pipes/to-array.pipe';
-import { ToNumberPipe } from '@keycloakify/angular/lib/pipes/to-number.pipe';
-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 { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
-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 { 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: [
-        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-selects/input-tag-selects.component.ts

@@ -1,139 +0,0 @@
-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 { 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/src/login/components/logout-other-sessions/logout-other-sessions.component.ts

@@ -1,34 +0,0 @@
-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';
-
-@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/password-wrapper/password-wrapper.component.ts

@@ -1,51 +0,0 @@
-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';
-
-@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');
-        }
-    }
-}