chore(apps/playground): add popovers playground page (#1958)

apps/playground/src/app/components/popovers/popovers.module.ts

@@ -7,6 +7,11 @@ const routes: Routes = [
     loadChildren: () =>
       import('./dropdown/dropdown.module').then((m) => m.DropdownModule),
   },
+  {
+    path: 'popovers',
+    loadChildren: () =>
+      import('./popovers/popovers.module').then((m) => m.PopoversModule),
+  },
 ];
 
 @NgModule({

apps/playground/src/app/components/popovers/popovers/popovers-routing.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { ComponentRouteInfo } from '../../../shared/component-info/component-route-info';
+
+import { PopoversComponent } from './popovers.component';
+
+const routes: ComponentRouteInfo[] = [
+  {
+    path: '',
+    component: PopoversComponent,
+    data: {
+      name: 'Popover',
+      icon: 'caret-down',
+      library: 'popovers',
+    },
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class PopoversRoutingModule {
+  public static routes = routes;
+}

apps/playground/src/app/components/popovers/popovers/popovers.component.html

@@ -0,0 +1,24 @@
+<sky-page layout="blocks">
+  <sky-page-content>
+    <button
+      class="sky-btn sky-btn-primary sky-margin-inline-default"
+      type="button"
+      [skyPopover]="myPopover0"
+    >
+      Popover demo on click
+    </button>
+
+    <button
+      class="sky-btn sky-btn-link"
+      type="button"
+      [skyPopover]="myPopover0"
+      [skyPopoverTrigger]="'mouseenter'"
+    >
+      Popover demo on hover
+    </button>
+
+    <sky-popover popoverTitle="Playground popover" #myPopover0>
+      The content of a popover can be text, HTML, or Angular components.
+    </sky-popover>
+  </sky-page-content>
+</sky-page>

apps/playground/src/app/components/popovers/popovers/popovers.component.ts

@@ -0,0 +1,17 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+} from '@angular/core';
+import { SkyPageModule } from '@skyux/pages';
+import { SkyPopoverModule } from '@skyux/popovers';
+
+@Component({
+  selector: 'app-popovers',
+  templateUrl: './popovers.component.html',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [SkyPopoverModule, SkyPageModule],
+})
+export class PopoversComponent {}

apps/playground/src/app/components/popovers/popovers/popovers.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { PopoversRoutingModule } from './popovers-routing.module';
+import { PopoversComponent } from './popovers.component';
+
+@NgModule({
+  imports: [CommonModule, PopoversRoutingModule, PopoversComponent],
+})
+export class PopoversModule {
+  public static routes = PopoversRoutingModule.routes;
+}