Add new Menu Component

apps/cookbook/src/app/examples/examples.common.ts

@@ -51,6 +51,7 @@ import { PagePullToRefreshExampleComponent } from './page-example/pull-to-refres
 import { DropdownExampleComponent } from './dropdown-example/dropdown-example.component';
 import { DataTableExampleComponent } from './data-table-example/data-table-example.component';
 import { LoadingOverlayServiceExampleComponent } from './loading-overlay-example/service/loading-overlay-service-example.component';
+import { MenuExampleComponent } from './menu-example/menu-example.component';
 
 export const COMPONENT_DECLARATIONS: any[] = [
   ExamplesComponent,
@@ -107,4 +108,5 @@ export const COMPONENT_DECLARATIONS: any[] = [
   SectionHeaderExampleComponent,
   ListExperimentalExampleComponent,
   DataTableExampleComponent,
+  MenuExampleComponent,
 ];

apps/cookbook/src/app/examples/examples.module.ts

@@ -41,6 +41,7 @@ import { SectionHeaderExampleModule } from './section-header-example/section-hea
 import { SegmentedControlExampleModule } from './segmented-control-example/segmented-control-example.module';
 import { ToggleButtonExampleModule } from './toggle-button-example/toggle-button-example.module';
 import { VirtualScrollExampleModule } from './virtual-scroll-example/virtual-scroll-example.module';
+import { MenuExampleModule } from './menu-example/menu-example.module';
 
 const IMPORTS = [
   CodeViewerModule,
@@ -72,6 +73,7 @@ const IMPORTS = [
   VirtualScrollExampleModule,
   ExperimentalExamplesModule,
   DataTableExampleModule,
+  MenuExampleModule,
   SlideModule,
   HeaderExampleModule,
   AlertExperimentalModule,

apps/cookbook/src/app/examples/examples.routes.ts

@@ -79,8 +79,8 @@ import { DropdownExampleComponent } from './dropdown-example/dropdown-example.co
 import { DataTableExampleComponent } from './data-table-example/data-table-example.component';
 import { HeaderExampleComponent } from './header-example/header-example.component';
 import { NestedModalsV2ExampleComponent } from './modal-v2-example/nested-modals/nested-modals-v2-example.component';
+import { MenuExampleComponent } from './menu-example/menu-example.component';
 
-VirtualScrollListExampleComponent;
 export const routes: Routes = [
   {
     path: '',
@@ -522,8 +522,16 @@ export const routes: Routes = [
     path: 'data-table',
     component: DataTableExampleComponent,
   },
+  {
+    path: 'menu',
+    component: MenuExampleComponent,
+  },
   {
     path: 'header',
     component: HeaderExampleComponent,
   },
+  {
+    path: 'menu',
+    component: MenuExampleComponent,
+  },
 ];

apps/cookbook/src/app/examples/menu-example/examples/advanced.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+
+const config = {
+  selector: 'cookbook-menu-advanced-example',
+  template: `<kirby-menu>
+  <kirby-item (click)="actionClicked()">
+    <kirby-icon name="notification" slot="start"></kirby-icon>
+    <h3>Title</h3>
+    <kirby-toggle slot="end" checked="true" (checkedChange)="toggled()"></kirby-toggle>
+  </kirby-item>
+</kirby-menu>`,
+};
+
+@Component({
+  selector: config.selector,
+  template: config.template,
+})
+export class MenuAdvancedExampleComponent {
+  template: string = config.template;
+
+  public actionClicked(): void {
+    console.log('Action clicked');
+  }
+
+  public toggled(): void {
+    console.log('Toggle changed');
+  }
+}

apps/cookbook/src/app/examples/menu-example/examples/customButton.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+
+const config = {
+  selector: 'cookbook-menu-custom-button-example',
+  template: `<kirby-menu>
+  <button
+    kirby-button
+    type="button"
+    [attentionLevel]="'3'"
+  >
+    <kirby-icon [name]="'menu-outline'"></kirby-icon>
+  </button>
+  <kirby-item>
+    <h3>Action 1</h3>
+  </kirby-item>
+</kirby-menu>`,
+};
+
+@Component({
+  selector: config.selector,
+  template: config.template,
+})
+export class MenuCustomButtonExampleComponent {
+  template: string = config.template;
+
+  public actionClicked(): void {
+    console.log('Action clicked');
+  }
+
+  public toggled(): void {
+    console.log('Toggle changed');
+  }
+}

apps/cookbook/src/app/examples/menu-example/examples/customPlacement.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+const config = {
+  selector: 'cookbook-menu-custom-placement-example',
+  template: `<kirby-menu [placement]="'bottom-end'">
+  <kirby-item>
+    <h3>Action 1</h3>
+  </kirby-item>
+  ...
+</kirby-menu>`,
+};
+
+@Component({
+  selector: config.selector,
+  template: config.template,
+})
+export class MenuCustomPlacementExampleComponent {
+  template: string = config.template;
+}

apps/cookbook/src/app/examples/menu-example/examples/default.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+const config = {
+  selector: 'cookbook-menu-default-example',
+  template: `<kirby-menu>
+  <kirby-item>
+    <h3>Action 1</h3>
+  </kirby-item>
+</kirby-menu>
+`,
+};
+
+@Component({
+  selector: config.selector,
+  template: config.template,
+})
+export class MenuDefaultExampleComponent {
+  template: string = config.template;
+}

apps/cookbook/src/app/examples/menu-example/examples/portal-in-list-wrapper.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'cookbook-menu-portal-in-list-wrapper-example',
+  template: `
+    <kirby-list [items]="[{}, {}]">
+      <kirby-list-header *kirbyListHeader>
+        <ng-content select="[header]"></ng-content>
+      </kirby-list-header>
+      <kirby-list-item>
+        <kirby-item *kirbyListItemTemplate="let item">
+          <ng-content select="[body]"></ng-content>
+        </kirby-item>
+      </kirby-list-item>
+    </kirby-list>
+  `,
+})
+export class PortalInListWrapperComponent {}

apps/cookbook/src/app/examples/menu-example/examples/portal.ts

@@ -0,0 +1,54 @@
+import { ChangeDetectorRef, Component, Input } from '@angular/core';
+
+const config = {
+  selector: 'cookbook-menu-portal-example',
+  template: `<kirby-menu 
+  [DOMPortalOutlet]="_outlet"
+  >
+  <kirby-item [selectable]="true">
+    <h3>Action 1</h3>
+  </kirby-item>
+  <kirby-item [selectable]="true">
+    <h3>Action 2</h3>
+  </kirby-item>
+</kirby-menu>
+`,
+};
+
+@Component({
+  selector: config.selector,
+  template: config.template,
+})
+export class MenuPortalExampleComponent {
+  template: string = config.template;
+  public _outlet: HTMLElement;
+
+  /**
+   *
+   */
+  constructor(private cd: ChangeDetectorRef) {}
+
+  @Input() set isOutletElementSet(isSet: boolean) {
+    this._outlet = isSet ? this.outletElement : null;
+  }
+  private outletTag: string = 'cookbook-root';
+
+  public outletElement: HTMLElement = this.getOutletElement();
+
+  private getOutletElement(): HTMLElement {
+    const elements: HTMLCollectionOf<Element> = document.getElementsByTagName(this.outletTag);
+
+    if (!elements || elements.length === 0) {
+      throw Error(`Could not locate HTMLElement for ${this.outletTag}. Did you misspell it?`);
+    }
+
+    if (elements.length > 1) {
+      throw Error(
+        `Multiple HTMLElements found for ${this.outletTag}.
+      This can lead to unintended behaviours. Provide an unique outlet`
+      );
+    }
+
+    return elements[0] as HTMLElement;
+  }
+}

apps/cookbook/src/app/examples/menu-example/examples/portalConfig.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import { OutletSelector, PortalOutletConfig } from '@kirbydesign/designsystem/shared/floating';
+
+const config = {
+  selector: 'cookbook-menu-portal-config-example',
+  template: `<kirby-menu [portalOutletConfig]="outletConfig">
+  <kirby-item [selectable]="true">
+    <h3>Action 1</h3>
+  </kirby-item>
+  <kirby-item [selectable]="true">
+    <h3>Action 2</h3>
+  </kirby-item>
+</kirby-menu>`,
+  codeSnippet: `public outletConfig: PortalOutletConfig = {
+    selector: OutletSelector.tag,
+    value: 'cookbook-root',
+  };`,
+};
+
+@Component({
+  selector: config.selector,
+  template: config.template,
+})
+export class MenuPortalConfigExampleComponent {
+  template: string = config.template;
+
+  public outletConfig: PortalOutletConfig = {
+    selector: OutletSelector.tag,
+    value: 'cookbook-root',
+  };
+}

apps/cookbook/src/app/examples/menu-example/examples/portalOutletConfig.ts

@@ -0,0 +1,9 @@
+export const portalOutletConfigExampleHTML = `<!-- This is the target outlet --->
+<div id="target-div"></div>
+`;
+
+export const portalOutletConfigExampleTS = `const outletConfig: PortalOutletConfig = {
+    selector: 'id',
+    value: 'target-div'
+}
+`;

apps/cookbook/src/app/examples/menu-example/examples/selectable.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+const config = {
+  selector: 'cookbook-menu-selectable-example',
+  template: `<kirby-menu [closeOnSelect]="true">
+  <kirby-item [selectable]="true">
+    <h3>Action 1</h3>
+  </kirby-item>
+  ...
+</kirby-menu>`,
+};
+
+@Component({
+  selector: config.selector,
+  template: config.template,
+})
+export class MenuSelectableExampleComponent {
+  template: string = config.template;
+}

apps/cookbook/src/app/examples/menu-example/menu-example.component.html

@@ -0,0 +1,13 @@
+<h1>Menu</h1>
+<h2>Simple</h2>
+<cookbook-menu-default-example></cookbook-menu-default-example>
+<h2>Selectable items</h2>
+<cookbook-menu-selectable-example></cookbook-menu-selectable-example>
+<h2>Advanced item</h2>
+<cookbook-menu-advanced-example></cookbook-menu-advanced-example>
+<h2>Custom button</h2>
+<cookbook-menu-custom-button-example></cookbook-menu-custom-button-example>
+<h2>Portal</h2>
+<cookbook-menu-portal-example></cookbook-menu-portal-example>
+<h2>Portal config</h2>
+<cookbook-menu-portal-config-example></cookbook-menu-portal-config-example>

apps/cookbook/src/app/examples/menu-example/menu-example.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'cookbook-action-list-example',
+  templateUrl: './menu-example.component.html',
+})
+export class MenuExampleComponent {}

apps/cookbook/src/app/examples/menu-example/menu-example.module.ts

@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { KirbyModule, ListHeaderDirective } from '@kirbydesign/designsystem';
+import { MenuDefaultExampleComponent } from './examples/default';
+import { MenuAdvancedExampleComponent } from './examples/advanced';
+import { MenuSelectableExampleComponent } from './examples/selectable';
+import { PortalInListWrapperComponent as MenuPortalInListWrapperComponent } from './examples/portal-in-list-wrapper';
+import { MenuCustomButtonExampleComponent } from '~/app/examples/menu-example/examples/customButton';
+import { MenuPortalExampleComponent } from '~/app/examples/menu-example/examples/portal';
+import { MenuCustomPlacementExampleComponent } from '~/app/examples/menu-example/examples/customPlacement';
+import { MenuPortalConfigExampleComponent } from '~/app/examples/menu-example/examples/portalConfig';
+
+const COMPONENT_DECLARATIONS = [
+  MenuPortalInListWrapperComponent,
+  MenuDefaultExampleComponent,
+  MenuAdvancedExampleComponent,
+  MenuSelectableExampleComponent,
+  MenuCustomButtonExampleComponent,
+  MenuPortalExampleComponent,
+  MenuPortalConfigExampleComponent,
+  MenuCustomPlacementExampleComponent,
+];
+
+@NgModule({
+  imports: [CommonModule, KirbyModule],
+  declarations: COMPONENT_DECLARATIONS,
+  exports: COMPONENT_DECLARATIONS,
+})
+export class MenuExampleModule {}

apps/cookbook/src/app/shared/example-viewer/example-viewer.component.html

@@ -1,5 +1,11 @@
 <ng-content></ng-content>
-<button kirby-button size="sm" attentionLevel="3" (click)="expanded = !expanded">
+<button
+  *ngIf="html || ts || css"
+  kirby-button
+  size="sm"
+  attentionLevel="3"
+  (click)="expanded = !expanded"
+>
   {{ expanded ? 'Hide Code' : 'View Code' }}
 </button>
 <cookbook-code-viewer *ngIf="expanded && html" [html]="html"></cookbook-code-viewer>