feat: created directives for menu addon (#1183)

* #1132 add a menu example with an addon

* #1132 add directives for the addon

* #1132 update the directived

* #1132 add a checkbox example

Author: droshev

docs/app/documentation/component-docs/menu/examples/menu-addon-example.component.html

@@ -0,0 +1,37 @@
+<fd-menu fd-menu-addon>
+    <ul fd-menu-list>
+        <li>
+            <div fd-menu-item-addon>
+                <fd-icon [glyph]="'cart-5'"></fd-icon>
+            </div>
+            <a href=""
+               fd-menu-item>Option 1</a>
+        </li>
+        <li>
+            <div fd-menu-item-addon>
+                <fd-icon [glyph]="'accept'"></fd-icon>
+            </div>
+            <a href=""
+               fd-menu-item>Option 2</a>
+        </li>
+        <li>
+            <div fd-menu-item-addon></div>
+            <a href=""
+               fd-menu-item>Option 3</a>
+        </li>
+        <li>
+            <div fd-menu-item-addon>
+                <input type="checkbox" class="fd-form__control">
+            </div>
+            <a href=""
+               fd-menu-item>Option 4</a>
+        </li>
+        <li>
+            <div fd-menu-item-addon>
+                <fd-icon [glyph]="'cart'"></fd-icon>
+            </div>
+            <a href=""
+               fd-menu-item>Option 5</a>
+        </li>
+    </ul>
+</fd-menu>

docs/app/documentation/component-docs/menu/examples/menu-addon-examples.component.ts

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

docs/app/documentation/component-docs/menu/menu-docs.component.html

@@ -6,6 +6,17 @@ <h2>Menu</h2>
 
 <separator></separator>
 
+<h2>Menu with Addon</h2>
+<description>This is an additional container that can be used for an icon
+or checkbox before the meni item text. This can be achieved with the directives
+<code>fd-menu-item-addon</code> and <code>fd-menu-addon</code> </description>
+<component-example [name]="'ex10'">
+    <fd-menu-addon-example></fd-menu-addon-example>
+</component-example>
+<code-example [exampleFiles]="menuAddon"></code-example>
+
+<separator></separator>
+
 <h2>Menu with Group</h2>
 <component-example [name]="'ex2'">
     <fd-menu-group-example></fd-menu-group-example>

docs/app/documentation/component-docs/menu/menu-docs.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 import * as menuSrc from '!raw-loader!./examples/menu-example.component.html';
+import * as menuAddon from '!raw-loader!./examples/menu-addon-example.component.html';
 import * as menuGroupSrc from '!raw-loader!./examples/menu-group-example.component.html';
 import * as menuKeyboardSrcH from '!raw-loader!./examples/menu-keyboard-support-example.component.html';
 import * as menuKeyboardSrcT from '!raw-loader!./examples/menu-keyboard-support-example.component.ts';
@@ -18,6 +19,10 @@ export class MenuDocsComponent {
         language: 'html',
         code: menuSrc
     }];
+    menuAddon: ExampleFile[] = [{
+        language: 'html',
+        code: menuAddon
+    }];
 
     menuGroup: ExampleFile[] = [{
         language: 'html',

docs/app/documentation/documentation.module.ts

@@ -147,6 +147,7 @@ import {
     MenuGroupExampleComponent,
     MenuSeparatorExampleComponent
 } from './component-docs/menu/examples/menu-examples.component';
+import { MenuAddonExampleComponent } from './component-docs/menu/examples/menu-addon-examples.component';
 import { ModalOpenTemplateExampleComponent } from './component-docs/modal/examples/template-as-content/modal-open-template-example.component';
 import { ModalContentComponent } from './component-docs/modal/examples/component-as-content/modal-content.component';
 import { ModalComponentAsContentExampleComponent } from './component-docs/modal/examples/component-as-content/modal-component-as-content-example.component';
@@ -552,6 +553,7 @@ import { ComboboxSearchFunctionExampleComponent } from './component-docs/combobo
         ListCheckboxFormExampleComponent,
         ListSingleSelectExampleComponent,
         MenuExampleComponent,
+        MenuAddonExampleComponent,
         MenuGroupExampleComponent,
         MenuSeparatorExampleComponent,
         MenuKeyboardSupportExampleComponent,

docs/app/documentation/utilities/api-files.ts

@@ -108,9 +108,11 @@ export const API_FILES = {
         'LocalizationEditorMainComponent',
     ],
     menu: [
+        'MenuAddonDirective',
         'MenuComponent',
         'MenuGroupComponent',
         'MenuItemDirective',
+        'MenuItemAddonDirective',
         'MenuListDirective',
         'MenuTitleDirective',
         'MenuKeyboardService'

library/src/lib/menu/menu-addon.directive.ts

@@ -0,0 +1,13 @@
+import { Directive, HostBinding } from '@angular/core';
+
+/**
+ * The directive for menu addon(for icons).
+ */
+@Directive({
+    selector: '[fd-menu-addon], [fdMenuAddon]'
+})
+export class MenuAddonDirective {
+    /** @hidden */
+    @HostBinding('class.fd-menu--addon-before')
+    fdMenuAddonClass: boolean = true;
+}

library/src/lib/menu/menu-item-addon.directive.ts

@@ -0,0 +1,13 @@
+import { Directive, HostBinding } from '@angular/core';
+
+/**
+ * The directive for menu item addon(for icons).
+ */
+@Directive({
+    selector: '[fd-menu-item-addon], [fdMenuItemAddon]'
+})
+export class MenuItemAddonDirective {
+    /** @hidden */
+    @HostBinding('class.fd-menu__addon-before')
+    fdMenuItemAddonClass: boolean = true;
+}

library/src/lib/menu/menu.component.spec.ts

@@ -9,9 +9,10 @@ import { MenuItemDirective } from './menu-item.directive';
 @Component({
     selector: 'fd-menu-test',
     template: `
-        <fd-menu>
+        <fd-menu fd-menu-addon>
             <ul fd-menu-list>
                 <li fd-menu-item #element1>
+                    <div fd-menu-item-addon></div>
                     Option 1
                 </li>
                 <li fd-menu-item #element2>
@@ -38,7 +39,7 @@ export class TestMenuComponent implements AfterViewInit {
     @ViewChild('elementOutOfScope') elementOutOfScope: ElementRef;
     @ViewChildren(MenuItemDirective)
     menuItems: QueryList<MenuItemDirective>;
-    public ngAfterViewInit(): void {}
+    public ngAfterViewInit(): void { }
 }
 
 
@@ -81,15 +82,15 @@ describe('MenuComponent', () => {
     it('should focus second element', () => {
         const list = elements.map(element => element.nativeElement);
         spyOn(list[1], 'focus');
-        const event: any = { code: 'ArrowDown', preventDefault: () => {} };
+        const event: any = { code: 'ArrowDown', preventDefault: () => { } };
         service.keyDownHandler(event, 0, items.toArray());
         expect(list[1].focus).toHaveBeenCalled();
     });
-    
+
     it('Should use default function and select last element, when encounter a beginning and arrow up', () => {
         const list = elements.map(element => element.nativeElement);
         spyOn(list[3], 'focus');
-        const event: any = { code: 'ArrowUp', preventDefault: () => {} };
+        const event: any = { code: 'ArrowUp', preventDefault: () => { } };
         service.keyDownHandler(event, 0, items.toArray());
         expect(list[3].focus).toHaveBeenCalled();
     });
@@ -98,7 +99,7 @@ describe('MenuComponent', () => {
         const _elementOutOfScope = elementOutOfScope.nativeElement;
         service.focusEscapeAfterList = () => { _elementOutOfScope.focus(); };
         spyOn(_elementOutOfScope, 'focus');
-        const event: any = { code: 'ArrowDown', preventDefault: () => {} };
+        const event: any = { code: 'ArrowDown', preventDefault: () => { } };
         service.keyDownHandler(event, 3, items.toArray());
         expect(_elementOutOfScope.focus).toHaveBeenCalled();
     });
@@ -107,7 +108,7 @@ describe('MenuComponent', () => {
         const _elementOutOfScope = elementOutOfScope.nativeElement;
         service.focusEscapeBeforeList = () => { _elementOutOfScope.focus(); };
         spyOn(_elementOutOfScope, 'focus');
-        const event: any = { code: 'ArrowUp', preventDefault: () => {} };
+        const event: any = { code: 'ArrowUp', preventDefault: () => { } };
         service.keyDownHandler(event, 0, items.toArray());
         expect(_elementOutOfScope.focus).toHaveBeenCalled();
     });

library/src/lib/menu/menu.module.ts

@@ -6,10 +6,28 @@ import { MenuGroupComponent } from './menu-group.component';
 import { MenuTitleDirective } from './menu-title.directive';
 import { MenuListDirective } from './menu-list.directive';
 import { MenuItemDirective } from './menu-item.directive';
+import { MenuAddonDirective } from './menu-addon.directive';
+import { MenuItemAddonDirective } from './menu-item-addon.directive';
 
 @NgModule({
     imports: [CommonModule],
-    exports: [MenuComponent, MenuGroupComponent, MenuTitleDirective, MenuListDirective, MenuItemDirective],
-    declarations: [MenuComponent, MenuGroupComponent, MenuTitleDirective, MenuListDirective, MenuItemDirective]
+    exports: [
+        MenuComponent,
+        MenuGroupComponent,
+        MenuTitleDirective,
+        MenuListDirective,
+        MenuItemDirective,
+        MenuAddonDirective,
+        MenuItemAddonDirective
+    ],
+    declarations: [
+        MenuComponent,
+        MenuGroupComponent,
+        MenuTitleDirective,
+        MenuListDirective,
+        MenuItemDirective,
+        MenuAddonDirective,
+        MenuItemAddonDirective
+    ]
 })
-export class MenuModule {}
+export class MenuModule { }