feat(overlay-panel): add samples

projects/demo/src/app/components-example/overlay-panel/overlay-panel-appearances-example/overlay-panel-appearances-example.component.html

@@ -0,0 +1,58 @@
+<div class="flex flex-col gap-ids-container-gap-8 w-full">
+  <div class="grid gap-2 px-3">
+    <span>{{ "EXAMPLES.OVERLAY_PANEL.APPEARANCES.CONTENT.FILLED" | translate }}</span>
+    <button
+      #filledOrigin="cdkOverlayOrigin"
+      type="button"
+      cdkOverlayOrigin
+      idsButton
+      appearance="outlined"
+      size="compact"
+      variant="primary"
+      (click)="filledPanel.toggle()"
+    >
+      {{ (filledPanel.open() ? "EXAMPLES.OVERLAY_PANEL.COMMON.CLOSE" : "EXAMPLES.OVERLAY_PANEL.COMMON.OPEN") | translate }}
+    </button>
+    <ids-overlay-panel #filledPanel appearance="filled" [origin]="filledOrigin">
+      <p class="min-w-48 px-4 py-3">{{ "EXAMPLES.OVERLAY_PANEL.COMMON.SAMPLE_CONTENT" | translate }}</p>
+    </ids-overlay-panel>
+  </div>
+
+  <div class="grid gap-2 px-3">
+    <span>{{ "EXAMPLES.OVERLAY_PANEL.APPEARANCES.CONTENT.ELEVATED" | translate }}</span>
+    <button
+      #elevatedOrigin="cdkOverlayOrigin"
+      type="button"
+      cdkOverlayOrigin
+      idsButton
+      appearance="outlined"
+      size="compact"
+      variant="primary"
+      (click)="elevatedPanel.toggle()"
+    >
+      {{ (elevatedPanel.open() ? "EXAMPLES.OVERLAY_PANEL.COMMON.CLOSE" : "EXAMPLES.OVERLAY_PANEL.COMMON.OPEN") | translate }}
+    </button>
+    <ids-overlay-panel #elevatedPanel appearance="elevated" [origin]="elevatedOrigin">
+      <p class="min-w-48 px-4 py-3">{{ "EXAMPLES.OVERLAY_PANEL.COMMON.SAMPLE_CONTENT" | translate }}</p>
+    </ids-overlay-panel>
+  </div>
+
+  <div class="grid gap-2 px-3">
+    <span>{{ "EXAMPLES.OVERLAY_PANEL.APPEARANCES.CONTENT.OUTLINED" | translate }}</span>
+    <button
+      #outlinedOrigin="cdkOverlayOrigin"
+      type="button"
+      cdkOverlayOrigin
+      idsButton
+      appearance="outlined"
+      size="compact"
+      variant="primary"
+      (click)="outlinedPanel.toggle()"
+    >
+      {{ (outlinedPanel.open() ? "EXAMPLES.OVERLAY_PANEL.COMMON.CLOSE" : "EXAMPLES.OVERLAY_PANEL.COMMON.OPEN") | translate }}
+    </button>
+    <ids-overlay-panel #outlinedPanel appearance="outlined" [origin]="outlinedOrigin">
+      <p class="min-w-48 px-4 py-3">{{ "EXAMPLES.OVERLAY_PANEL.COMMON.SAMPLE_CONTENT" | translate }}</p>
+    </ids-overlay-panel>
+  </div>
+</div>

projects/demo/src/app/components-example/overlay-panel/overlay-panel-appearances-example/overlay-panel-appearances-example.component.ts

@@ -0,0 +1,17 @@
+import { OverlayModule } from '@angular/cdk/overlay';
+import { Component } from '@angular/core';
+import { IdsButtonComponent } from '@i-cell/ids-angular/button';
+import { IdsOverlayPanelComponent } from '@i-cell/ids-angular/overlay-panel';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-overlay-panel-appearances-example',
+  imports: [
+    OverlayModule,
+    IdsButtonComponent,
+    IdsOverlayPanelComponent,
+    TranslateModule,
+  ],
+  templateUrl: './overlay-panel-appearances-example.component.html',
+})
+export class OverlayPanelAppearancesExampleComponent {}

projects/demo/src/app/components-example/overlay-panel/overlay-panel-basic-example/overlay-panel-basic-example.component.html

@@ -0,0 +1,16 @@
+<button
+  #origin="cdkOverlayOrigin"
+  type="button"
+  cdkOverlayOrigin
+  idsButton
+  appearance="outlined"
+  size="compact"
+  variant="primary"
+  (click)="panel.toggle()"
+>
+  {{ (panel.open() ? "EXAMPLES.OVERLAY_PANEL.COMMON.CLOSE" : "EXAMPLES.OVERLAY_PANEL.COMMON.OPEN") | translate }}
+</button>
+
+<ids-overlay-panel #panel [origin]="origin">
+  <p class="min-w-48 px-4 py-3">{{ "EXAMPLES.OVERLAY_PANEL.BASIC.CONTENT.BODY" | translate }}</p>
+</ids-overlay-panel>

projects/demo/src/app/components-example/overlay-panel/overlay-panel-basic-example/overlay-panel-basic-example.component.ts

@@ -0,0 +1,17 @@
+import { OverlayModule } from '@angular/cdk/overlay';
+import { Component } from '@angular/core';
+import { IdsButtonComponent } from '@i-cell/ids-angular/button';
+import { IdsOverlayPanelComponent } from '@i-cell/ids-angular/overlay-panel';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-overlay-panel-basic-example',
+  imports: [
+    OverlayModule,
+    IdsButtonComponent,
+    IdsOverlayPanelComponent,
+    TranslateModule,
+  ],
+  templateUrl: './overlay-panel-basic-example.component.html',
+})
+export class OverlayPanelBasicExampleComponent {}

projects/demo/src/app/components-example/overlay-panel/overlay-panel-examples.ts

@@ -0,0 +1,70 @@
+import { OverlayPanelAppearancesExampleComponent } from './overlay-panel-appearances-example/overlay-panel-appearances-example.component';
+import { OverlayPanelBasicExampleComponent } from './overlay-panel-basic-example/overlay-panel-basic-example.component';
+import { OverlayPanelMenuExampleComponent } from './overlay-panel-menu-example/overlay-panel-menu-example.component';
+import { OverlayPanelSizesExampleComponent } from './overlay-panel-sizes-example/overlay-panel-sizes-example.component';
+import { OverlayPanelVariantsExampleComponent } from './overlay-panel-variants-example/overlay-panel-variants-example.component';
+
+import { IdsExampleDef } from '../../shared/ids-example-viewer/ids-example.model';
+
+export const OVERLAY_PANEL_EXAMPLES: IdsExampleDef[] = [
+  {
+    id: 'overlay-panel-basic',
+    title: 'EXAMPLES.OVERLAY_PANEL.BASIC.TITLE',
+    description: 'EXAMPLES.OVERLAY_PANEL.BASIC.DESCRIPTION',
+    component: OverlayPanelBasicExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/overlay-panel/overlay-panel-basic-example/overlay-panel-basic-example.component.html',
+        TSpath: 'assets/examples/overlay-panel/overlay-panel-basic-example/overlay-panel-basic-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'overlay-panel-appearances',
+    title: 'EXAMPLES.OVERLAY_PANEL.APPEARANCES.TITLE',
+    description: 'EXAMPLES.OVERLAY_PANEL.APPEARANCES.DESCRIPTION',
+    component: OverlayPanelAppearancesExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/overlay-panel/overlay-panel-appearances-example/overlay-panel-appearances-example.component.html',
+        TSpath: 'assets/examples/overlay-panel/overlay-panel-appearances-example/overlay-panel-appearances-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'overlay-panel-variants',
+    title: 'EXAMPLES.OVERLAY_PANEL.VARIANTS.TITLE',
+    description: 'EXAMPLES.OVERLAY_PANEL.VARIANTS.DESCRIPTION',
+    component: OverlayPanelVariantsExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/overlay-panel/overlay-panel-variants-example/overlay-panel-variants-example.component.html',
+        TSpath: 'assets/examples/overlay-panel/overlay-panel-variants-example/overlay-panel-variants-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'overlay-panel-sizes',
+    title: 'EXAMPLES.OVERLAY_PANEL.SIZES.TITLE',
+    description: 'EXAMPLES.OVERLAY_PANEL.SIZES.DESCRIPTION',
+    component: OverlayPanelSizesExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/overlay-panel/overlay-panel-sizes-example/overlay-panel-sizes-example.component.html',
+        TSpath: 'assets/examples/overlay-panel/overlay-panel-sizes-example/overlay-panel-sizes-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'overlay-panel-menu',
+    title: 'EXAMPLES.OVERLAY_PANEL.MENU.TITLE',
+    description: 'EXAMPLES.OVERLAY_PANEL.MENU.DESCRIPTION',
+    component: OverlayPanelMenuExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/overlay-panel/overlay-panel-menu-example/overlay-panel-menu-example.component.html',
+        TSpath: 'assets/examples/overlay-panel/overlay-panel-menu-example/overlay-panel-menu-example.component.ts',
+      },
+    ],
+  },
+];

projects/demo/src/app/components-example/overlay-panel/overlay-panel-menu-example/overlay-panel-menu-example.component.html

@@ -0,0 +1,34 @@
+<button
+  #origin="cdkOverlayOrigin"
+  type="button"
+  cdkOverlayOrigin
+  idsButton
+  appearance="outlined"
+  size="compact"
+  variant="primary"
+  (click)="panel.toggle()"
+>
+  {{ (panel.open() ? "EXAMPLES.OVERLAY_PANEL.COMMON.CLOSE" : "EXAMPLES.OVERLAY_PANEL.MENU.CONTENT.OPEN_MENU") | translate }}
+</button>
+
+<ids-overlay-panel #panel [origin]="origin">
+  <div cdkMenu>
+    <button type="button" idsMenuItem [label]="'EXAMPLES.OVERLAY_PANEL.MENU.CONTENT.ITEM_1' | translate">
+      <ids-icon icon-leading aria-hidden="true" fontIcon="edit" />
+    </button>
+    <button type="button" idsMenuItem [label]="'EXAMPLES.OVERLAY_PANEL.MENU.CONTENT.ITEM_2' | translate">
+      <ids-icon icon-leading aria-hidden="true" fontIcon="file-copy" />
+    </button>
+    <button type="button" idsMenuItem [label]="'EXAMPLES.OVERLAY_PANEL.MENU.CONTENT.ITEM_3' | translate">
+      <ids-icon icon-leading aria-hidden="true" fontIcon="delete" />
+    </button>
+    <button
+      type="button"
+      idsMenuItem
+      [label]="'EXAMPLES.OVERLAY_PANEL.MENU.CONTENT.ITEM_CLOSE' | translate"
+      (click)="_closePanel(panel)"
+    >
+      <ids-icon icon-leading aria-hidden="true" fontIcon="close" />
+    </button>
+  </div>
+</ids-overlay-panel>

projects/demo/src/app/components-example/overlay-panel/overlay-panel-menu-example/overlay-panel-menu-example.component.ts

@@ -0,0 +1,27 @@
+import { CdkMenu } from '@angular/cdk/menu';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { Component } from '@angular/core';
+import { IdsButtonComponent } from '@i-cell/ids-angular/button';
+import { IdsIconComponent } from '@i-cell/ids-angular/icon';
+import { IdsMenuItemComponent } from '@i-cell/ids-angular/menu';
+import { IdsOverlayPanelComponent } from '@i-cell/ids-angular/overlay-panel';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-overlay-panel-menu-example',
+  imports: [
+    CdkMenu,
+    OverlayModule,
+    IdsButtonComponent,
+    IdsIconComponent,
+    IdsMenuItemComponent,
+    IdsOverlayPanelComponent,
+    TranslateModule,
+  ],
+  templateUrl: './overlay-panel-menu-example.component.html',
+})
+export class OverlayPanelMenuExampleComponent {
+  protected _closePanel(panel: IdsOverlayPanelComponent): void {
+    panel.open.set(false);
+  }
+}

projects/demo/src/app/components-example/overlay-panel/overlay-panel-sizes-example/overlay-panel-sizes-example.component.html

@@ -0,0 +1,41 @@
+<div class="flex flex-col gap-ids-container-gap-8 w-full">
+  <div class="grid gap-2 px-3">
+    <span>dense</span>
+    <button #denseOrigin="cdkOverlayOrigin" type="button" cdkOverlayOrigin idsButton appearance="outlined" size="compact" variant="primary" (click)="densePanel.toggle()">
+      {{ (densePanel.open() ? "EXAMPLES.OVERLAY_PANEL.COMMON.CLOSE" : "EXAMPLES.OVERLAY_PANEL.COMMON.OPEN") | translate }}
+    </button>
+    <ids-overlay-panel #densePanel size="dense" [origin]="denseOrigin">
+      <p class="min-w-48 px-4 py-3">{{ "EXAMPLES.OVERLAY_PANEL.COMMON.SAMPLE_CONTENT" | translate }}</p>
+    </ids-overlay-panel>
+  </div>
+
+  <div class="grid gap-2 px-3">
+    <span>compact</span>
+    <button #compactOrigin="cdkOverlayOrigin" type="button" cdkOverlayOrigin idsButton appearance="outlined" size="compact" variant="primary" (click)="compactPanel.toggle()">
+      {{ (compactPanel.open() ? "EXAMPLES.OVERLAY_PANEL.COMMON.CLOSE" : "EXAMPLES.OVERLAY_PANEL.COMMON.OPEN") | translate }}
+    </button>
+    <ids-overlay-panel #compactPanel size="compact" [origin]="compactOrigin">
+      <p class="min-w-48 px-4 py-3">{{ "EXAMPLES.OVERLAY_PANEL.COMMON.SAMPLE_CONTENT" | translate }}</p>
+    </ids-overlay-panel>
+  </div>
+
+  <div class="grid gap-2 px-3">
+    <span>comfortable</span>
+    <button #comfortableOrigin="cdkOverlayOrigin" type="button" cdkOverlayOrigin idsButton appearance="outlined" size="compact" variant="primary" (click)="comfortablePanel.toggle()">
+      {{ (comfortablePanel.open() ? "EXAMPLES.OVERLAY_PANEL.COMMON.CLOSE" : "EXAMPLES.OVERLAY_PANEL.COMMON.OPEN") | translate }}
+    </button>
+    <ids-overlay-panel #comfortablePanel size="comfortable" [origin]="comfortableOrigin">
+      <p class="min-w-48 px-4 py-3">{{ "EXAMPLES.OVERLAY_PANEL.COMMON.SAMPLE_CONTENT" | translate }}</p>
+    </ids-overlay-panel>
+  </div>
+
+  <div class="grid gap-2 px-3">
+    <span>spacious</span>
+    <button #spaciousOrigin="cdkOverlayOrigin" type="button" cdkOverlayOrigin idsButton appearance="outlined" size="compact" variant="primary" (click)="spaciousPanel.toggle()">
+      {{ (spaciousPanel.open() ? "EXAMPLES.OVERLAY_PANEL.COMMON.CLOSE" : "EXAMPLES.OVERLAY_PANEL.COMMON.OPEN") | translate }}
+    </button>
+    <ids-overlay-panel #spaciousPanel size="spacious" [origin]="spaciousOrigin">
+      <p class="min-w-48 px-4 py-3">{{ "EXAMPLES.OVERLAY_PANEL.COMMON.SAMPLE_CONTENT" | translate }}</p>
+    </ids-overlay-panel>
+  </div>
+</div>

projects/demo/src/app/components-example/overlay-panel/overlay-panel-sizes-example/overlay-panel-sizes-example.component.ts

@@ -0,0 +1,17 @@
+import { OverlayModule } from '@angular/cdk/overlay';
+import { Component } from '@angular/core';
+import { IdsButtonComponent } from '@i-cell/ids-angular/button';
+import { IdsOverlayPanelComponent } from '@i-cell/ids-angular/overlay-panel';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-overlay-panel-sizes-example',
+  imports: [
+    OverlayModule,
+    IdsButtonComponent,
+    IdsOverlayPanelComponent,
+    TranslateModule,
+  ],
+  templateUrl: './overlay-panel-sizes-example.component.html',
+})
+export class OverlayPanelSizesExampleComponent {}

projects/demo/src/app/components-example/overlay-panel/overlay-panel-variants-example/overlay-panel-variants-example.component.html

@@ -0,0 +1,39 @@
+<div class="flex flex-col gap-ids-container-gap-8 w-full">
+  <div class="grid gap-2 px-3">
+    <span>{{ "EXAMPLES.OVERLAY_PANEL.VARIANTS.CONTENT.SURFACE" | translate }}</span>
+    <button
+      #surfaceOrigin="cdkOverlayOrigin"
+      type="button"
+      cdkOverlayOrigin
+      idsButton
+      appearance="outlined"
+      size="compact"
+      variant="primary"
+      (click)="surfacePanel.toggle()"
+    >
+      {{ (surfacePanel.open() ? "EXAMPLES.OVERLAY_PANEL.COMMON.CLOSE" : "EXAMPLES.OVERLAY_PANEL.COMMON.OPEN") | translate }}
+    </button>
+    <ids-overlay-panel #surfacePanel variant="surface" [origin]="surfaceOrigin">
+      <p class="min-w-48 px-4 py-3">{{ "EXAMPLES.OVERLAY_PANEL.COMMON.SAMPLE_CONTENT" | translate }}</p>
+    </ids-overlay-panel>
+  </div>
+
+  <div class="grid gap-2 rounded-lg p-3 bg-[var(--ids-color-surface-inverse,#1a1a1a)]">
+    <span class="text-white">{{ "EXAMPLES.OVERLAY_PANEL.VARIANTS.CONTENT.LIGHT" | translate }}</span>
+    <button
+      #lightOrigin="cdkOverlayOrigin"
+      type="button"
+      cdkOverlayOrigin
+      idsButton
+      appearance="outlined"
+      size="compact"
+      variant="light"
+      (click)="lightPanel.toggle()"
+    >
+      {{ (lightPanel.open() ? "EXAMPLES.OVERLAY_PANEL.COMMON.CLOSE" : "EXAMPLES.OVERLAY_PANEL.COMMON.OPEN") | translate }}
+    </button>
+    <ids-overlay-panel #lightPanel variant="light" [origin]="lightOrigin">
+      <p class="min-w-48 px-4 py-3">{{ "EXAMPLES.OVERLAY_PANEL.COMMON.SAMPLE_CONTENT" | translate }}</p>
+    </ids-overlay-panel>
+  </div>
+</div>

projects/demo/src/app/components-example/overlay-panel/overlay-panel-variants-example/overlay-panel-variants-example.component.ts

@@ -0,0 +1,17 @@
+import { OverlayModule } from '@angular/cdk/overlay';
+import { Component } from '@angular/core';
+import { IdsButtonComponent } from '@i-cell/ids-angular/button';
+import { IdsOverlayPanelComponent } from '@i-cell/ids-angular/overlay-panel';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-overlay-panel-variants-example',
+  imports: [
+    OverlayModule,
+    IdsButtonComponent,
+    IdsOverlayPanelComponent,
+    TranslateModule,
+  ],
+  templateUrl: './overlay-panel-variants-example.component.html',
+})
+export class OverlayPanelVariantsExampleComponent {}

projects/demo/src/app/pages/overlay-panel/overlay-panel-demo.component.html

@@ -115,3 +115,9 @@
     </app-tryout-controls>
   </div>
 </app-demo-and-code>
+
+<div examples class="flex flex-col gap-6 w-full pt-6 pb-2">
+  @for (example of overlayPanelExamples; track example.id) {
+    <ids-example-viewer [example]="example" />
+  }
+</div>

projects/demo/src/app/pages/overlay-panel/overlay-panel-demo.component.ts

@@ -4,6 +4,8 @@ import { ControlTableComponent } from '../../components/control-table/control-ta
 import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component';
 import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component';
 import { TryoutComponent } from '../../components/tryout/tryout.component';
+import { OVERLAY_PANEL_EXAMPLES } from '../../components-example/overlay-panel/overlay-panel-examples';
+import { IdsExampleViewerComponent } from '../../shared/ids-example-viewer/ids-example-viewer.component';
 
 import { CdkMenu } from '@angular/cdk/menu';
 import { OverlayModule } from '@angular/cdk/overlay';
@@ -40,12 +42,15 @@ import { TranslateModule } from '@ngx-translate/core';
     IdsMenuItemComponent,
     IdsActiveIndicatorDirective,
     CdkMenu,
+    IdsExampleViewerComponent,
 
   ],
   templateUrl: './overlay-panel-demo.component.html',
   styleUrls: ['../demo-page.scss'],
 })
 export class OverlayPanelDemoComponent {
+  public readonly overlayPanelExamples = OVERLAY_PANEL_EXAMPLES;
+
   protected _overlayPanelDemoService = inject(OverlayPanelDemoService);
 
   // eslint-disable-next-line no-magic-numbers