refactor(angular): Set components to host block by default

Author: Ehesp

examples/angular/src/app/screens/oauth-screen/oauth-screen.component.ts

@@ -14,15 +14,49 @@
  * limitations under the License.
  */
 
-import { Component } from "@angular/core";
+import { Component, signal } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { OAuthScreenComponent } from "@invertase/firebaseui-angular";
+import {
+  OAuthScreenComponent,
+  GoogleSignInButtonComponent,
+  FacebookSignInButtonComponent,
+  AppleSignInButtonComponent,
+  GitHubSignInButtonComponent,
+  MicrosoftSignInButtonComponent,
+  TwitterSignInButtonComponent,
+} from "@invertase/firebaseui-angular";
 
 @Component({
   selector: "app-oauth-screen",
   standalone: true,
-  imports: [CommonModule, OAuthScreenComponent],
-  template: ` <fui-oauth-screen></fui-oauth-screen> `,
+  imports: [
+    CommonModule,
+    OAuthScreenComponent,
+    GoogleSignInButtonComponent,
+    FacebookSignInButtonComponent,
+    AppleSignInButtonComponent,
+    GitHubSignInButtonComponent,
+    MicrosoftSignInButtonComponent,
+    TwitterSignInButtonComponent,
+  ],
+  template: `
+    <fui-oauth-screen>
+      <fui-google-sign-in-button [themed]="themed() ? 'neutral' : false" />
+      <fui-facebook-sign-in-button [themed]="themed()" />
+      <fui-apple-sign-in-button [themed]="themed()" />
+      <fui-github-sign-in-button [themed]="themed()" />
+      <fui-microsoft-sign-in-button [themed]="themed()" />
+      <fui-twitter-sign-in-button [themed]="themed()" />
+    </fui-oauth-screen>
+    <div class="max-w-sm mx-auto mt-12">
+      <label for="themed">
+        <input type="checkbox" id="themed" [checked]="themed()" (change)="themed.set(!themed())" />
+        Themed</label
+      >
+    </div>
+  `,
   styles: [],
 })
-export class OAuthScreenWrapperComponent {}
+export class OAuthScreenWrapperComponent {
+  themed = signal(false);
+}

examples/angular/src/app/screens/sign-in-auth-screen-w-oauth/sign-in-auth-screen-w-oauth.component.ts

@@ -16,15 +16,41 @@
 
 import { Component } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { SignInAuthScreenComponent, GoogleSignInButtonComponent } from "@invertase/firebaseui-angular";
+import {
+  SignInAuthScreenComponent,
+  ContentComponent,
+  GoogleSignInButtonComponent,
+  FacebookSignInButtonComponent,
+  AppleSignInButtonComponent,
+  GitHubSignInButtonComponent,
+  MicrosoftSignInButtonComponent,
+  TwitterSignInButtonComponent,
+} from "@invertase/firebaseui-angular";
 
 @Component({
   selector: "app-sign-in-auth-screen-w-oauth",
   standalone: true,
-  imports: [CommonModule, SignInAuthScreenComponent, GoogleSignInButtonComponent],
+  imports: [
+    CommonModule,
+    SignInAuthScreenComponent,
+    ContentComponent,
+    GoogleSignInButtonComponent,
+    FacebookSignInButtonComponent,
+    AppleSignInButtonComponent,
+    GitHubSignInButtonComponent,
+    MicrosoftSignInButtonComponent,
+    TwitterSignInButtonComponent,
+  ],
   template: `
     <fui-sign-in-auth-screen>
-      <fui-google-sign-in-button></fui-google-sign-in-button>
+      <fui-content>
+        <fui-google-sign-in-button />
+        <fui-facebook-sign-in-button />
+        <fui-apple-sign-in-button />
+        <fui-github-sign-in-button />
+        <fui-microsoft-sign-in-button />
+        <fui-twitter-sign-in-button />
+      </fui-content>
     </fui-sign-in-auth-screen>
   `,
   styles: [],

examples/angular/src/app/screens/sign-up-auth-screen-w-oauth/sign-up-auth-screen-w-oauth.component.ts

@@ -16,15 +16,41 @@
 
 import { Component } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { SignUpAuthScreenComponent, GoogleSignInButtonComponent } from "@invertase/firebaseui-angular";
+import {
+  SignUpAuthScreenComponent,
+  ContentComponent,
+  GoogleSignInButtonComponent,
+  FacebookSignInButtonComponent,
+  AppleSignInButtonComponent,
+  GitHubSignInButtonComponent,
+  MicrosoftSignInButtonComponent,
+  TwitterSignInButtonComponent,
+} from "@invertase/firebaseui-angular";
 
 @Component({
   selector: "app-sign-up-auth-screen-w-oauth",
   standalone: true,
-  imports: [CommonModule, SignUpAuthScreenComponent, GoogleSignInButtonComponent],
+  imports: [
+    CommonModule,
+    SignUpAuthScreenComponent,
+    ContentComponent,
+    GoogleSignInButtonComponent,
+    FacebookSignInButtonComponent,
+    AppleSignInButtonComponent,
+    GitHubSignInButtonComponent,
+    MicrosoftSignInButtonComponent,
+    TwitterSignInButtonComponent,
+  ],
   template: `
     <fui-sign-up-auth-screen>
-      <fui-google-sign-in-button></fui-google-sign-in-button>
+      <fui-content>
+        <fui-google-sign-in-button />
+        <fui-facebook-sign-in-button />
+        <fui-apple-sign-in-button />
+        <fui-github-sign-in-button />
+        <fui-microsoft-sign-in-button />
+        <fui-twitter-sign-in-button />
+      </fui-content>
     </fui-sign-up-auth-screen>
   `,
   styles: [],

packages/angular/src/lib/auth/forms/email-link-auth-form.ts

@@ -27,6 +27,9 @@ import { injectEmailLinkAuthFormSchema, injectTranslation, injectUI } from "../.
 @Component({
   selector: "fui-email-link-auth-form",
   standalone: true,
+  host: {
+    style: "display: block;",
+  },
   imports: [
     CommonModule,
     TanStackField,

packages/angular/src/lib/auth/forms/forgot-password-auth-form.ts

@@ -31,6 +31,9 @@ import { injectForgotPasswordAuthFormSchema, injectTranslation, injectUI } from
 @Component({
   selector: "fui-forgot-password-auth-form",
   standalone: true,
+  host: {
+    style: "display: block;",
+  },
   imports: [
     CommonModule,
     TanStackField,

packages/angular/src/lib/auth/forms/mfa/sms-multi-factor-assertion-form.ts

@@ -39,6 +39,9 @@ type PhoneMultiFactorInfo = MultiFactorInfo & {
   selector: "fui-sms-multi-factor-assertion-phone-form",
   standalone: true,
   imports: [CommonModule, FormSubmitComponent, FormErrorMessageComponent],
+  host: {
+    style: "display: block;",
+  },
   template: `
     <form (submit)="handleSubmit($event)" class="fui-form">
       <fieldset>
@@ -129,6 +132,9 @@ export class SmsMultiFactorAssertionPhoneFormComponent {
 @Component({
   selector: "fui-sms-multi-factor-assertion-verify-form",
   standalone: true,
+  host: {
+    style: "display: block;",
+  },
   imports: [
     CommonModule,
     TanStackField,
@@ -216,6 +222,9 @@ export class SmsMultiFactorAssertionVerifyFormComponent {
   selector: "fui-sms-multi-factor-assertion-form",
   standalone: true,
   imports: [CommonModule, SmsMultiFactorAssertionPhoneFormComponent, SmsMultiFactorAssertionVerifyFormComponent],
+  host: {
+    style: "display: block;",
+  },
   template: `
     <div class="fui-content">
       @if (verification()) {

packages/angular/src/lib/auth/forms/mfa/sms-multi-factor-enrollment-form.ts

@@ -42,6 +42,9 @@ import {
 @Component({
   selector: "fui-sms-multi-factor-enrollment-form",
   standalone: true,
+  host: {
+    style: "display: block;",
+  },
   imports: [
     CommonModule,
     TanStackField,

packages/angular/src/lib/auth/forms/mfa/totp-multi-factor-assertion-form.ts

@@ -24,6 +24,9 @@ import { TotpMultiFactorGenerator, type MultiFactorInfo, type UserCredential } f
 @Component({
   selector: "fui-totp-multi-factor-assertion-form",
   standalone: true,
+  host: {
+    style: "display: block;",
+  },
   imports: [
     CommonModule,
     TanStackField,

packages/angular/src/lib/auth/forms/mfa/totp-multi-factor-enrollment-form.ts

@@ -35,6 +35,9 @@ import {
 @Component({
   selector: "fui-totp-multi-factor-secret-generation-form",
   standalone: true,
+  host: {
+    style: "display: block;",
+  },
   imports: [
     CommonModule,
     TanStackField,
@@ -110,6 +113,9 @@ export class TotpMultiFactorSecretGenerationFormComponent {
 @Component({
   selector: "fui-totp-multi-factor-verification-form",
   standalone: true,
+  host: {
+    style: "display: block;",
+  },
   imports: [
     CommonModule,
     TanStackField,
@@ -201,6 +207,9 @@ export class TotpMultiFactorVerificationFormComponent {
   selector: "fui-totp-multi-factor-enrollment-form",
   standalone: true,
   imports: [CommonModule, TotpMultiFactorSecretGenerationFormComponent, TotpMultiFactorVerificationFormComponent],
+  host: {
+    style: "display: block;",
+  },
   template: `
     <div class="fui-form-container">
       @if (!enrollment()) {

packages/angular/src/lib/auth/forms/multi-factor-auth-assertion-form.ts

@@ -31,6 +31,9 @@ import { ButtonComponent } from "../../components/button";
   selector: "fui-multi-factor-auth-assertion-form",
   standalone: true,
   imports: [CommonModule, SmsMultiFactorAssertionFormComponent, TotpMultiFactorAssertionFormComponent, ButtonComponent],
+  host: {
+    style: "display: block;",
+  },
   template: `
     <div class="fui-content">
       @if (selectedHint()) {