feat: Add "keyboard-showing" class to ion-app or app-root

[WhatsThatItsPat]

Prerequisites

• [x] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Currently, the class .tab-bar-hidden is added to ion-tab-bar when the keyboard is opened. But because it's deeply tucked away in the DOM at body > app-root > ion-app > ion-router-outlet > app-tabs > ion-tabs > ion-tab-bar, it's not useful elsewhere.

Could the code that adds this class be moved to the App component, where it could add a class to ion-app like <ion-app class="ios ion-page keyboard-showing"></ion-app>? Then we could use :host-context(.keyboard-showing) throughout the app. The tab bar itself could stop using .tab-bar-hidden and switch to this new class.

Yes, we can use the listeners in @capacitor/keyboard, but we have to finesse the timing to get it to match .tab-bar-hidden.

Describe the Use Case

I have some footers that need to hide just like the tab bar. I can imagine similar needs with ion-fab, fixed content, etc.

Describe Preferred Solution

No response

Describe Alternatives

I'm currently doing this:

import { Component, signal } from '@angular/core';
import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
import { Keyboard } from '@capacitor/keyboard';

@Component({
  selector: 'app-root',
  template: `
    <ion-app [class.keyboard-showing]="isKeyboardShowing()">
      <ion-router-outlet></ion-router-outlet>
    </ion-app>
  `,
  standalone: true,
  imports: [IonApp, IonRouterOutlet],
})
export class AppComponent {

  isKeyboardShowing = signal(false);

  constructor() {

    Keyboard.addListener('keyboardWillShow', info => {
      this.isKeyboardShowing.set(true);
    });

    Keyboard.addListener('keyboardWillHide', () => {
      /**
       * I have to finesse the timing here. I'd rather have the timing
       * match the tab bar exactly. And since the logic is already built-in,
       * why not move it so it's more useful?
       */
      setTimeout(() => this.isKeyboardShowing.set(false), 50);
    });

  }
}

Related Code

No response

Additional Information

No response