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

package/dist/src/account/pages/totp/totp.component.ts

@@ -1,32 +0,0 @@
-import { NgClass } from '@angular/common';
-import { Component, forwardRef, inject } from '@angular/core';
-import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';
-import { TemplateComponent } from '@keycloakify/angular/account/containers/template';
-import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
-import { ACCOUNT_CLASSES } from '@keycloakify/angular/account/tokens/classes';
-import { ACCOUNT_I18N } from '@keycloakify/angular/account/tokens/i18n';
-import { KC_ACCOUNT_CONTEXT } from '@keycloakify/angular/account/tokens/kc-context';
-import { KcSanitizePipe } from '@keycloakify/angular/lib/pipes/kc-sanitize';
-import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
-import type { ClassKey } from 'keycloakify/account';
-import type { I18n } from '../../i18n';
-import type { KcContext } from '../../KcContext';
-
-@Component({
-    standalone: true,
-    imports: [KcClassDirective, TemplateComponent, KcSanitizePipe, NgClass],
-    selector: 'kc-root',
-    templateUrl: 'totp.component.html',
-    providers: [
-        {
-            provide: ComponentReference,
-            useExisting: forwardRef(() => TotpComponent)
-        }
-    ]
-})
-export class TotpComponent extends ComponentReference {
-    i18n = inject<I18n>(ACCOUNT_I18N);
-    kcContext = inject<Extract<KcContext, { pageId: 'totp.ftl' }>>(KC_ACCOUNT_CONTEXT);
-    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
-    override classes = inject<Partial<Record<ClassKey, string>>>(ACCOUNT_CLASSES);
-}

package/dist/src/account/providers/keycloakify-angular/keycloakify-angular.providers.ts

@@ -1,64 +0,0 @@
-import { DOCUMENT } from '@angular/common';
-import { APP_INITIALIZER, LOCALE_ID, makeEnvironmentProviders } from '@angular/core';
-import { I18nService } from '@keycloakify/angular/account/services/i18n';
-import { ACCOUNT_CLASSES } from '@keycloakify/angular/account/tokens/classes';
-import { ACCOUNT_I18N } from '@keycloakify/angular/account/tokens/i18n';
-import { KC_ACCOUNT_CONTEXT } from '@keycloakify/angular/account/tokens/kc-context';
-import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
-import { type KcContextLike } from 'keycloakify/account/i18n/noJsx';
-import type { ClassKey } from 'keycloakify/account/lib/kcClsx';
-import type { KcContext } from '../../KcContext';
-
-export type KeycloakifyAngularAccountConfig = {
-    doUseDefaultCss?: boolean;
-    classes?: { [key in ClassKey]?: string };
-    getI18n: (params: { kcContext: KcContextLike }) => {
-        i18n: unknown;
-        prI18n_currentLanguage: Promise<unknown> | undefined;
-    };
-};
-
-export const provideKeycloakifyAngularAccount = (
-    config: KeycloakifyAngularAccountConfig
-) =>
-    makeEnvironmentProviders([
-        {
-            provide: KC_ACCOUNT_CONTEXT,
-            // @ts-ignore
-            useValue: window.kcContext
-        },
-        {
-            provide: LOCALE_ID,
-            useFactory: (document: Document) => {
-                return document.documentElement.lang ?? 'en';
-            },
-            deps: [DOCUMENT]
-        },
-        {
-            provide: APP_INITIALIZER,
-            multi: true,
-            useFactory: (i18nService: I18nService, kcContext: KcContext) => async () => {
-                const getI18n = config.getI18n;
-
-                const { i18n, prI18n_currentLanguage } = getI18n({
-                    kcContext
-                });
-                let i18nPromise = new Promise<typeof i18n>(resolve => resolve(i18n));
-                if (prI18n_currentLanguage) {
-                    i18nPromise = prI18n_currentLanguage;
-                }
-                return i18nPromise.then(i18n => {
-                    i18nService.i18n = i18n;
-                    return true;
-                });
-            },
-            deps: [I18nService, KC_ACCOUNT_CONTEXT]
-        },
-        {
-            provide: ACCOUNT_I18N,
-            useFactory: (i18nService: I18nService) => i18nService.i18n,
-            deps: [I18nService]
-        },
-        { provide: USE_DEFAULT_CSS, useValue: config?.doUseDefaultCss ?? true },
-        { provide: ACCOUNT_CLASSES, useValue: config?.classes ?? {} }
-    ]);

package/dist/src/account/services/account-resource-injector/account-resource-injector.service.ts

@@ -1,41 +0,0 @@
-import { inject, Injectable } from '@angular/core';
-import { KC_ACCOUNT_CONTEXT } from '@keycloakify/angular/account/tokens/kc-context';
-import { Script } from '@keycloakify/angular/lib/models/script';
-import { ResourceInjectorService } from '@keycloakify/angular/lib/services/resource-injector';
-import { catchError, forkJoin, of, switchMap } from 'rxjs';
-import type { KcContext } from '../../KcContext';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class AccountResourceInjectorService {
-    private kcContext: KcContext = inject<KcContext>(KC_ACCOUNT_CONTEXT);
-    private resourceInjectorService: ResourceInjectorService = inject(
-        ResourceInjectorService
-    );
-
-    injectResource(doUseDefaultCss = true) {
-        if (!doUseDefaultCss) {
-            return of(true);
-        }
-        const stylesheets = [
-            `${this.kcContext.url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
-            `${this.kcContext.url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
-            `${this.kcContext.url.resourcesPath}/css/account.css`
-        ];
-
-        return forkJoin(
-            stylesheets.map(url => this.resourceInjectorService.createLink(url))
-        ).pipe(
-            switchMap(() => of(true)),
-            catchError(error => {
-                console.error('Error loading styles:', error);
-                return of(false);
-            })
-        );
-    }
-
-    insertAdditionalScripts(scripts: Script[]) {
-        scripts.map(script => this.resourceInjectorService.createScript(script));
-    }
-}

package/dist/src/account/tokens/kc-context/kc-context.token.ts

@@ -1,6 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import type { KcContext } from '../../KcContext';
-
-export const KC_ACCOUNT_CONTEXT = new InjectionToken<KcContext>(
-    'keycloak account context'
-);

package/dist/src/login/DefaultPage.ts

@@ -1,208 +0,0 @@
-import { Type } from '@angular/core';
-import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import type { KcContext } from 'KcContext';
-
-const DefaultPage = async (
-    pageId: KcContext['pageId'],
-    doMakeUserConfirmPassword = true,
-    doUseDefaultCss = true,
-    classes: { [key in ClassKey]?: string } = {}
-): Promise<{
-    ComponentBootstrap: Type<unknown>;
-    doMakeUserConfirmPassword: boolean;
-    doUseDefaultCss: boolean;
-    classes: { [key in ClassKey]?: string };
-}> => {
-    let ComponentBootstrapPromise;
-    switch (pageId) {
-        case 'login.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/login'
-            ).then(c => c.LoginComponent);
-            break;
-        case 'login-username.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/login-username'
-            ).then(c => c.LoginUsernameComponent);
-            break;
-        case 'login-password.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/login-password'
-            ).then(c => c.LoginPasswordComponent);
-            break;
-        case 'webauthn-authenticate.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/webauthn-authenticate'
-            ).then(c => c.WebauthnAuthenticateComponent);
-            break;
-        case 'webauthn-register.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/webauthn-register'
-            ).then(c => c.WebauthnRegisterComponent);
-            break;
-        case 'register.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/register'
-            ).then(c => c.RegisterComponent);
-            break;
-        case 'info.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/info'
-            ).then(c => c.InfoComponent);
-            break;
-        case 'error.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/error'
-            ).then(c => c.ErrorComponent);
-            break;
-        case 'login-reset-password.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/login-reset-password'
-            ).then(c => c.LoginResetPasswordComponent);
-            break;
-        case 'login-verify-email.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/login-verify-email'
-            ).then(c => c.LoginVerifyEmailComponent);
-            break;
-        case 'terms.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/terms'
-            ).then(c => c.TermsComponent);
-            break;
-        case 'login-oauth2-device-verify-user-code.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/login-oauth2-device-verify-user-code'
-            ).then(c => c.LoginOauth2DeviceVerifyUserCodeComponent);
-            break;
-        case 'login-oauth-grant.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/login-oauth-grant'
-            ).then(c => c.LoginOauthGrantComponent);
-            break;
-        case 'login-otp.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/login-otp'
-            ).then(c => c.LoginOtpComponent);
-
-            break;
-        case 'login-update-profile.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/login-update-profile'
-            ).then(c => c.LoginUpdateProfileComponent);
-            break;
-        case 'login-update-password.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/login-update-password'
-            ).then(c => c.LoginUpdatePasswordComponent);
-            break;
-        case 'login-idp-link-confirm.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/login-idp-link-confirm'
-            ).then(c => c.LoginIdpLinkConfirmComponent);
-            break;
-        case 'login-idp-link-email.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/login-idp-link-email'
-            ).then(c => c.LoginIdpLinkEmailComponent);
-            break;
-        case 'login-page-expired.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/login-page-expired'
-            ).then(c => c.LoginPageExpiredComponent);
-            break;
-        case 'login-config-totp.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/login-config-totp'
-            ).then(c => c.LoginConfigTotpComponent);
-            break;
-        case 'logout-confirm.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/logout-confirm'
-            ).then(c => c.LogoutConfirmComponent);
-            break;
-        case 'idp-review-user-profile.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/idp-review-user-profile'
-            ).then(c => c.IdpReviewUserProfileComponent);
-            break;
-        case 'update-email.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/update-email'
-            ).then(c => c.UpdateEmailComponent);
-            break;
-        case 'select-authenticator.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/select-authenticator'
-            ).then(c => c.SelectAuthenticatorComponent);
-            break;
-        case 'saml-post-form.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/saml-post-form'
-            ).then(c => c.SamlPostFormComponent);
-            break;
-        case 'delete-credential.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/delete-credential'
-            ).then(c => c.DeleteCredentialComponent);
-            break;
-        case 'code.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/code'
-            ).then(c => c.CodeComponent);
-            break;
-        case 'delete-account-confirm.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/delete-account-confirm'
-            ).then(c => c.DeleteAccountConfirmComponent);
-            break;
-        case 'frontchannel-logout.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/frontchannel-logout'
-            ).then(c => c.FrontchannelLogoutComponent);
-            break;
-        case 'login-recovery-authn-code-config.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/login-recovery-authn-code-config'
-            ).then(c => c.LoginRecoveryAuthnCodeConfigComponent);
-            break;
-        case 'login-recovery-authn-code-input.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/login-recovery-authn-code-input'
-            ).then(c => c.LoginRecoveryAuthnCodeInputComponent);
-            break;
-        case 'login-reset-otp.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/login-reset-otp'
-            ).then(c => c.LoginResetOtpComponent);
-            break;
-        case 'login-x509-info.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/login-x509-info'
-            ).then(c => c.LoginX509InfoComponent);
-            break;
-        case 'webauthn-error.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/webauthn-error'
-            ).then(c => c.WebauthnErrorComponent);
-            break;
-        case 'login-passkeys-conditional-authenticate.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/login-passkeys-conditional-authenticate'
-            ).then(c => c.LoginPasskeysConditionalAuthenticateComponent);
-            break;
-        case 'login-idp-link-confirm-override.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/login/pages/login-idp-link-confirm-override'
-            ).then(c => c.LoginIdpLinkConfirmOverrideComponent);
-            break;
-    }
-    return ComponentBootstrapPromise?.then(ComponentBootstrap => ({
-        ComponentBootstrap,
-        doMakeUserConfirmPassword,
-        doUseDefaultCss,
-        classes
-    }));
-};
-
-export { DefaultPage };

package/dist/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';
-import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
-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/dist/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';
-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';
-
-@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/dist/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';
-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 '../../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()
-        });
-    }
-}