@keycloakify/angular 0.0.1-rc.0 → 0.0.1-rc.2

package/src/login/DefaultPage.ts

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

package/src/login/KcContext.ts

@@ -1 +1 @@
-export type { KcContext } from "keycloakify/login/KcContext";
+export type { KcContext } from 'keycloakify/login/KcContext';

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

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

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

@@ -4,10 +4,10 @@ import {
     computed,
     input,
     output
-} from "@angular/core";
-import { Attribute } from "keycloakify/login/KcContext";
-import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
-import { FormAction } from "@keycloakify/angular/login/services/user-profile-form.service";
+} from '@angular/core';
+import { Attribute } from 'keycloakify/login/KcContext';
+import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
+import { FormAction } from '@keycloakify/angular/login/services/user-profile-form.service';
 
 @Component({
     standalone: true,
@@ -19,8 +19,8 @@ import { FormAction } from "@keycloakify/angular/login/services/user-profile-for
         `
     ],
     imports: [MsgStrPipe],
-    selector: "kc-add-remove-buttons-multi-valued-attribute",
-    templateUrl: "add-remove-buttons-multi-valued-attribute.component.html",
+    selector: 'kc-add-remove-buttons-multi-valued-attribute',
+    templateUrl: 'add-remove-buttons-multi-valued-attribute.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AddRemoveButtonsMultiValuedAttributeComponent {
@@ -58,16 +58,16 @@ export class AddRemoveButtonsMultiValuedAttributeComponent {
 
     onAdd() {
         this.dispatchFormAction.emit({
-            action: "update",
-            name: this.attribute()?.name ?? "",
-            valueOrValues: [...(this.values() ?? []), ""]
+            action: 'update',
+            name: this.attribute()?.name ?? '',
+            valueOrValues: [...(this.values() ?? []), '']
         });
     }
 
     onRemove() {
         this.dispatchFormAction.emit({
-            action: "update",
-            name: this.attribute()?.name ?? "",
+            action: 'update',
+            name: this.attribute()?.name ?? '',
             valueOrValues: (this.values() ?? []).filter((_, i) => i !== this.fieldIndex())
         });
     }

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

@@ -4,13 +4,13 @@ import {
     forwardRef,
     inject,
     input
-} from "@angular/core";
-import { CLASSES, USE_DEFAULT_CSS } from "@keycloakify/angular/lib/public-api";
-import { Attribute } from "keycloakify/login/KcContext";
-import { ClassKey } from "keycloakify/login/lib/kcClsx";
-import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
-import { KcClassDirective } from "@keycloakify/angular/login/directives/kc-class.directive";
-import { FormFieldError } from "@keycloakify/angular/login/services/user-profile-form.service";
+} from '@angular/core';
+import { CLASSES, USE_DEFAULT_CSS } from '@keycloakify/angular/lib/public-api';
+import { Attribute } from 'keycloakify/login/KcContext';
+import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
+import { FormFieldError } from '@keycloakify/angular/login/services/user-profile-form.service';
 
 @Component({
     standalone: true,
@@ -22,8 +22,8 @@ import { FormFieldError } from "@keycloakify/angular/login/services/user-profile
         `
     ],
     imports: [KcClassDirective],
-    selector: "kc-field-errors",
-    templateUrl: "field-errors.component.html",
+    selector: 'kc-field-errors',
+    templateUrl: 'field-errors.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {

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

@@ -5,14 +5,14 @@ import {
     forwardRef,
     inject,
     input
-} from "@angular/core";
-import { CLASSES, USE_DEFAULT_CSS } from "@keycloakify/angular/lib/public-api";
-import { Attribute } from "keycloakify/login/KcContext";
-import { ClassKey } from "keycloakify/login/lib/kcClsx";
-import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
-import { AttributesDirective } from "@keycloakify/angular/login/directives/attributes.directive";
-import { KcClassDirective } from "@keycloakify/angular/login/directives/kc-class.directive";
-import { AdvancedMsgStrPipe } from "@keycloakify/angular/login/pipes/advanced-msg-str.pipe";
+} from '@angular/core';
+import { CLASSES, USE_DEFAULT_CSS } from '@keycloakify/angular/lib/public-api';
+import { Attribute } from 'keycloakify/login/KcContext';
+import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
+import { AttributesDirective } from '@keycloakify/angular/login/directives/attributes.directive';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
+import { AdvancedMsgStrPipe } from '@keycloakify/angular/login/pipes/advanced-msg-str.pipe';
 
 @Component({
     standalone: true,
@@ -24,8 +24,8 @@ import { AdvancedMsgStrPipe } from "@keycloakify/angular/login/pipes/advanced-ms
         `
     ],
     imports: [KcClassDirective, AttributesDirective, AdvancedMsgStrPipe],
-    selector: "kc-group-label",
-    templateUrl: "group-label.component.html",
+    selector: 'kc-group-label',
+    templateUrl: 'group-label.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {
@@ -43,8 +43,8 @@ export class GroupLabelComponent extends ComponentReference {
         const attribute = this.attribute();
         const groupName = this.groupName();
         if (attribute?.group?.name !== groupName) {
-            return attribute?.group?.name ?? "";
+            return attribute?.group?.name ?? '';
         }
-        return "";
+        return '';
     });
 }

package/src/login/components/hello-world/hello-world.component.html

@@ -0,0 +1 @@
+<p>hello-world works!</p>

package/src/login/components/hello-world/hello-world.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'kc-hello-world',
+    standalone: true,
+    imports: [],
+    templateUrl: './hello-world.component.html',
+    styleUrl: './hello-world.component.css'
+})
+export class HelloWorldComponent {}

package/src/login/components/index.ts

@@ -1,11 +1,11 @@
-export * from "./add-remove-buttons-multi-valued-attribute/add-remove-buttons-multi-valued-attribute.component";
-export * from "./field-errors/field-errors.component";
-export * from "./group-label/group-label.component";
-export * from "./input-field-by-type/input-field-by-type.component";
-export * from "./input-tag/input-tag.component";
-export * from "./input-tag-selects/input-tag-selects.component";
-export * from "./logout-other-sessions/logout-other-sessions.component";
-export * from "./password-wrapper/password-wrapper.component";
-export * from "./select-tag/select-tag.component";
-export * from "./textarea-tag/textarea-tag.component";
-export * from "./user-profile-form-fields/user-profile-form-fields.component";
+export * from './add-remove-buttons-multi-valued-attribute/add-remove-buttons-multi-valued-attribute.component';
+export * from './field-errors/field-errors.component';
+export * from './group-label/group-label.component';
+export * from './input-field-by-type/input-field-by-type.component';
+export * from './input-tag/input-tag.component';
+export * from './input-tag-selects/input-tag-selects.component';
+export * from './logout-other-sessions/logout-other-sessions.component';
+export * from './password-wrapper/password-wrapper.component';
+export * from './select-tag/select-tag.component';
+export * from './textarea-tag/textarea-tag.component';
+export * from './user-profile-form-fields/user-profile-form-fields.component';

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

@@ -6,21 +6,21 @@ import {
     inject,
     input,
     output
-} from "@angular/core";
-import { CLASSES, USE_DEFAULT_CSS } from "@keycloakify/angular/lib/public-api";
-import { Attribute } from "keycloakify/login/KcContext";
-import { ClassKey } from "keycloakify/login/lib/kcClsx";
-import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
-import { ToArrayPipe } from "@keycloakify/angular/login/pipes/to-array.pipe";
+} from '@angular/core';
+import { CLASSES, USE_DEFAULT_CSS } from '@keycloakify/angular/lib/public-api';
+import { Attribute } from 'keycloakify/login/KcContext';
+import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
+import { ToArrayPipe } from '@keycloakify/angular/login/pipes/to-array.pipe';
 import {
     FormAction,
     FormFieldError
-} from "@keycloakify/angular/login/services/user-profile-form.service";
-import { InputTagSelectsComponent } from "@keycloakify/angular/login/components/input-tag-selects/input-tag-selects.component";
-import { InputTagComponent } from "@keycloakify/angular/login/components/input-tag/input-tag.component";
-import { PasswordWrapperComponent } from "@keycloakify/angular/login/components/password-wrapper/password-wrapper.component";
-import { SelectTagComponent } from "@keycloakify/angular/login/components/select-tag/select-tag.component";
-import { TextareaTagComponent } from "@keycloakify/angular/login/components/textarea-tag/textarea-tag.component";
+} 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,
@@ -39,8 +39,8 @@ import { TextareaTagComponent } from "@keycloakify/angular/login/components/text
         InputTagComponent,
         PasswordWrapperComponent
     ],
-    selector: "kc-input-field-by-type",
-    templateUrl: "input-field-by-type.component.html",
+    selector: 'kc-input-field-by-type',
+    templateUrl: 'input-field-by-type.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {
@@ -61,7 +61,7 @@ export class InputFieldByTypeComponent extends ComponentReference {
         const attribute: Attribute = this.attribute() ?? ({} as Attribute);
         return {
             ...attribute,
-            annotations: { ...(attribute.annotations ?? {}), inputType: "password" }
+            annotations: { ...(attribute.annotations ?? {}), inputType: 'password' }
         };
     });
 }

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

@@ -6,23 +6,23 @@ import {
     inject,
     input,
     output
-} from "@angular/core";
-import { CLASSES, USE_DEFAULT_CSS } from "@keycloakify/angular/lib/public-api";
-import { Attribute } from "keycloakify/login/KcContext";
-import { ClassKey } from "keycloakify/login/lib/kcClsx";
-import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
-import { AttributesDirective } from "@keycloakify/angular/login/directives/attributes.directive";
-import { KcClassDirective } from "@keycloakify/angular/login/directives/kc-class.directive";
-import { AdvancedMsgStrPipe } from "@keycloakify/angular/login/pipes/advanced-msg-str.pipe";
-import { InputTypePipe } from "@keycloakify/angular/login/pipes/input-type.pipe";
-import { ToArrayPipe } from "@keycloakify/angular/login/pipes/to-array.pipe";
-import { ToNumberPipe } from "@keycloakify/angular/login/pipes/to-number.pipe";
+} from '@angular/core';
+import { CLASSES, USE_DEFAULT_CSS } from '@keycloakify/angular/lib/public-api';
+import { Attribute } from 'keycloakify/login/KcContext';
+import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
+import { AttributesDirective } from '@keycloakify/angular/login/directives/attributes.directive';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
+import { AdvancedMsgStrPipe } from '@keycloakify/angular/login/pipes/advanced-msg-str.pipe';
+import { InputTypePipe } from '@keycloakify/angular/login/pipes/input-type.pipe';
+import { ToArrayPipe } from '@keycloakify/angular/login/pipes/to-array.pipe';
+import { ToNumberPipe } from '@keycloakify/angular/login/pipes/to-number.pipe';
 import {
     FormAction,
     FormFieldError
-} from "@keycloakify/angular/login/services/user-profile-form.service";
-import { 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";
+} from '@keycloakify/angular/login/services/user-profile-form.service';
+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';
 
 @Component({
     standalone: true,
@@ -43,8 +43,8 @@ import { FieldErrorsComponent } from "@keycloakify/angular/login/components/fiel
         AddRemoveButtonsMultiValuedAttributeComponent,
         AdvancedMsgStrPipe
     ],
-    selector: "kc-input-tag",
-    templateUrl: "input-tag.component.html",
+    selector: 'kc-input-tag',
+    templateUrl: 'input-tag.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {
@@ -78,8 +78,8 @@ export class InputTagComponent extends ComponentReference {
     onChange(event: Event) {
         const valueOrValues = this.valueOrValues();
         this.dispatchFormAction.emit({
-            action: "update",
-            name: this.attribute()?.name ?? "",
+            action: 'update',
+            name: this.attribute()?.name ?? '',
             valueOrValues: (() => {
                 if (this.fieldIndex !== undefined) {
                     if (valueOrValues instanceof Array) {
@@ -100,8 +100,8 @@ export class InputTagComponent extends ComponentReference {
 
     onBlur() {
         this.dispatchFormAction.emit({
-            action: "focus lost",
-            name: this.attribute()?.name ?? "",
+            action: 'focus lost',
+            name: this.attribute()?.name ?? '',
             fieldIndex: this.fieldIndex()
         });
     }