Merge 06940f0 into 3b413b9

klemenoslaj · Jan 1, 2020 · 57e58f6 · 57e58f6
2 parents 3b413b9 + 06940f0
commit 57e58f6
Show file tree

Hide file tree

Showing 20 changed files with 936 additions and 262 deletions.
diff --git a/docs/classes/ActionAbstract.html b/docs/classes/ActionAbstract.html
diff --git a/docs/classes/ActionButton.html b/docs/classes/ActionButton.html
diff --git a/docs/classes/ActionGroup.html b/docs/classes/ActionGroup.html
diff --git a/docs/classes/ActionToggle.html b/docs/classes/ActionToggle.html
diff --git a/docs/coverage.html b/docs/coverage.html
@@ -97,7 +97,7 @@
             <td>ActionAbstractOptions</td>
             <td align="right" data-sort="100">
                 <span class="coverage-percent">100 %</span>
-                <span class="coverage-count">(5/5)</span>
+                <span class="coverage-count">(6/6)</span>
             </td>
         </tr>
         <tr class="very-good">
@@ -109,7 +109,7 @@
             <td>ActionAbstract</td>
             <td align="right" data-sort="100">
                 <span class="coverage-percent">100 %</span>
-                <span class="coverage-count">(32/32)</span>
+                <span class="coverage-count">(34/34)</span>
             </td>
         </tr>
         <tr class="very-good">
@@ -157,7 +157,7 @@
             <td>ActionButton</td>
             <td align="right" data-sort="100">
                 <span class="coverage-percent">100 %</span>
-                <span class="coverage-count">(35/35)</span>
+                <span class="coverage-count">(37/37)</span>
             </td>
         </tr>
         <tr class="very-good">
@@ -205,7 +205,7 @@
             <td>ActionGroup</td>
             <td align="right" data-sort="100">
                 <span class="coverage-percent">100 %</span>
-                <span class="coverage-count">(58/58)</span>
+                <span class="coverage-count">(60/60)</span>
             </td>
         </tr>
         <tr class="very-good">
@@ -301,7 +301,7 @@
             <td>ActionToggle</td>
             <td align="right" data-sort="100">
                 <span class="coverage-percent">100 %</span>
-                <span class="coverage-count">(39/39)</span>
+                <span class="coverage-count">(41/41)</span>
             </td>
         </tr>
         <tr class="very-good">

diff --git a/docs/dependencies.html b/docs/dependencies.html
@@ -48,29 +48,29 @@
     </ol>
     <ul class="dependencies-list">
         <li>
-            <b>@angular/animations</b> : ^8.2.13</li>
+            <b>@angular/animations</b> : ^8.2.14</li>
         <li>
             <b>@angular/cdk</b> : ^8.2.3</li>
         <li>
-            <b>@angular/common</b> : ^8.2.13</li>
+            <b>@angular/common</b> : ^8.2.14</li>
         <li>
-            <b>@angular/compiler</b> : ^8.2.13</li>
+            <b>@angular/compiler</b> : ^8.2.14</li>
         <li>
-            <b>@angular/core</b> : ^8.2.13</li>
+            <b>@angular/core</b> : ^8.2.14</li>
         <li>
-            <b>@angular/forms</b> : ^8.2.13</li>
+            <b>@angular/forms</b> : ^8.2.14</li>
         <li>
             <b>@angular/material</b> : ^8.2.3</li>
         <li>
-            <b>@angular/platform-browser</b> : ^8.2.13</li>
+            <b>@angular/platform-browser</b> : ^8.2.14</li>
         <li>
-            <b>@angular/platform-browser-dynamic</b> : ^8.2.13</li>
+            <b>@angular/platform-browser-dynamic</b> : ^8.2.14</li>
         <li>
-            <b>@angular/router</b> : ^8.2.13</li>
+            <b>@angular/router</b> : ^8.2.14</li>
         <li>
             <b>hammerjs</b> : ^2.0.8</li>
         <li>
-            <b>rxjs</b> : ^6.5.3</li>
+            <b>rxjs</b> : ^6.5.4</li>
         <li>
             <b>travis-deploy-once</b> : ^5.0.11</li>
         <li>

diff --git a/docs/index.html b/docs/index.html
@@ -62,7 +62,10 @@
 <h1 id="ngactionoutlet"><a href="https://klemenoslaj.github.io/ng-action-outlet/">NgActionOutlet</a></h1>
 <p>The goal of <code>ActionOutlet</code> is to provide an easy API to build dynamic menus on runtime and have the possibility to get notified for each and every change, that happens to any particular action in the menu (<em>e.g. Title change, icon change, disabled state, ...</em>).</p>
 <p>The most natural use case is when back-end is in charge over the visibility of actions and menus of the front-end application (<em>e.g. hide/show actions based on permissions</em>).</p>
-<p><a href="https://stackblitz.com/edit/ng-action-outlet-demo?file=src/app/app.component.ts"><strong>DEMO</strong></a></p>
+<p><strong>DEMO 1</strong> <em>Basic</em></p>
+<p><a href="https://codesandbox.io/s/ng-action-outletmaterial-demo-t1n4n?fontsize=14&amp;module=%2Fsrc%2Fapp%2Fapp.component.ts"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit @ng-action-outlet/material DEMO" class="img-responsive"></a></p>
+<p><strong>DEMO 2</strong> <em>Advanced</em></p>
+<p><a href="https://codesandbox.io/s/material-angular-shell-vttrp?fontsize=14&amp;module=%2Fsrc%2Fapp%2Fapp.component.ts"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit @ng-action-outlet/material DEMO" class="img-responsive"></a></p>
 <h2 id="getting-started">Getting started</h2>
 <h3 id="step-1-install-ng-action-outlet">Step 1: Install <code>ng-action-outlet</code></h3>
 <p>You can use either <strong>npm</strong> or <strong>yarn</strong> command-line tool.<br>Choose the tool that is appropriate for your project.</p>

diff --git a/docs/interfaces/ActionAbstractComponentImpl.html b/docs/interfaces/ActionAbstractComponentImpl.html
@@ -179,6 +179,10 @@ <h3 id="inputs">Properties</h3>
      * Optional **initial** action disabled state
      */
     readonly disabled?: boolean;
+    /**
+     * An aria label added to the button element: https://www.w3.org/TR/wai-aria/#aria-label
+     */
+    readonly ariaLabel?: string;
 }
 
 /**

diff --git a/docs/interfaces/ActionAbstractEvent.html b/docs/interfaces/ActionAbstractEvent.html
@@ -174,6 +174,10 @@ <h3 id="inputs">Properties</h3>
      * Optional **initial** action disabled state
      */
     readonly disabled?: boolean;
+    /**
+     * An aria label added to the button element: https://www.w3.org/TR/wai-aria/#aria-label
+     */
+    readonly ariaLabel?: string;
 }
 
 /**

diff --git a/docs/interfaces/ActionAbstractOptions.html b/docs/interfaces/ActionAbstractOptions.html
@@ -85,6 +85,10 @@ <h6><b>Properties</b></h6>
                     <tr>
                         <td class="col-md-4">
                             <ul class="index-list">
+                                <li>
+                                            <span class="modifier">Optional</span>
+                                        <a href="#ariaLabel">ariaLabel</a>
+                                </li>
                                 <li>
                                             <span class="modifier">Optional</span>
                                         <a href="#disabled">disabled</a>
@@ -112,6 +116,46 @@ <h6><b>Properties</b></h6>
 
             <section>
                 <h3 id="inputs">Properties</h3>
+                    <table class="table table-sm table-bordered">
+                        <tbody>
+                                <tr>
+                                    <td class="col-md-4">
+                                        <a name="ariaLabel"></a>
+                                        <span class="name"><b>ariaLabel</b><a href="#ariaLabel"><span class="icon ion-ios-link"></span></a></span>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class="col-md-4">
+                                        <code>ariaLabel:         <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+</code>
+                                    </td>
+                                </tr>
+
+
+                                    <tr>
+                                        <td class="col-md-4">
+                                            <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+
+                                        </td>
+                                    </tr>
+
+                                    <tr>
+                                        <td class="col-md-4">
+                                            <i>Optional</i>
+                                        </td>
+                                    </tr>
+
+
+
+
+                            <tr>
+                                <td class="col-md-4">
+                                    <div class="io-description"><p>An aria label added to the button element: <a href="https://www.w3.org/TR/wai-aria/#aria-label">https://www.w3.org/TR/wai-aria/#aria-label</a></p>
+</div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
                     <table class="table table-sm table-bordered">
                         <tbody>
                                 <tr>
@@ -310,6 +354,10 @@ <h3 id="inputs">Properties</h3>
      * Optional **initial** action disabled state
      */
     readonly disabled?: boolean;
+    /**
+     * An aria label added to the button element: https://www.w3.org/TR/wai-aria/#aria-label
+     */
+    readonly ariaLabel?: string;
 }
 
 /**

diff --git a/docs/js/search/search_index.js b/docs/js/search/search_index.js
diff --git a/docs/miscellaneous/variables.html b/docs/miscellaneous/variables.html
@@ -103,6 +103,7 @@ <h3></h3>        <table class="table table-sm table-bordered">
                         <td class="col-md-4">
                             <i>Default value : </i><code>{
     title: &#x27;&#x27;,
+    ariaLabel: &#x27;&#x27;,
     icon: &#x27;&#x27;,
     visible: true,
     disabled: false,

diff --git a/projects/core/src/lib/action-abstract/action-abstract.model.ts b/projects/core/src/lib/action-abstract/action-abstract.model.ts
@@ -31,6 +31,10 @@ export interface ActionAbstractOptions {
      * Optional **initial** action disabled state
      */
     readonly disabled?: boolean;
+    /**
+     * An aria label added to the button element: https://www.w3.org/TR/wai-aria/#aria-label
+     */
+    readonly ariaLabel?: string;
 }
 
 /**

diff --git a/projects/core/src/lib/action-abstract/action-abstract.spec.ts b/projects/core/src/lib/action-abstract/action-abstract.spec.ts
@@ -90,6 +90,8 @@ describe('Class: ActionAbstract', function (): void {
         expect(this.action.isEnabled).toEqual(jasmine.any(Function));
         expect(this.action.getForcedComponent).toEqual(jasmine.any(Function));
         expect(this.action.getParent).toEqual(jasmine.any(Function));
+        expect(this.action.setAriaLabel).toEqual(jasmine.any(Function));
+        expect(this.action.getAriaLabel).toEqual(jasmine.any(Function));
 
         // Private api
         expect(this.action._setParent).toEqual(jasmine.any(Function));
@@ -108,6 +110,7 @@ describe('Class: ActionAbstract', function (): void {
         expect(this.action.setVisibility(true)).toBe(this.action);
         expect(this.action.enable()).toBe(this.action);
         expect(this.action.disable()).toBe(this.action);
+        expect(this.action.setAriaLabel('Aria Label')).toBe(this.action);
 
         // Private api
         expect(this.action._setParent(this.parent)).toBe(this.action);
@@ -120,13 +123,15 @@ describe('Class: ActionAbstract', function (): void {
         expect(this.action.visible$).toEqual(jasmine.any(Observable));
         expect(this.action.disabled$).toEqual(jasmine.any(Observable));
         expect(this.action.state$).toEqual(jasmine.any(Observable));
+        expect(this.action.ariaLabel$).toEqual(jasmine.any(Observable));
         expect(this.action.fire$).toEqual(jasmine.any(Observable));
         expect(this.action.changes$).toEqual(jasmine.any(Observable));
     });
 
     it('should match default values', function (this: TestContext): void {
         expect(this.action.getTitle()).toBe('');
         expect(this.action.getIcon()).toBe('');
+        expect(this.action.getAriaLabel()).toBe('');
         expect(this.action.isVisible()).toBe(true);
         expect(this.action.isDisabled()).toBe(false);
     });
@@ -143,6 +148,18 @@ describe('Class: ActionAbstract', function (): void {
         this.testScheduler.flush();
     });
 
+    it('should set ariaLabel correctly', function (this: TestContext): void {
+        const label = 'Test Aria Label 1';
+        const values = { l: label };
+        const expected = 'l';
+
+        expect(this.action.setAriaLabel(label)).toBe(this.action);
+        expect(this.action.getAriaLabel()).toBe(label);
+
+        this.testScheduler.expectObservable(this.action.ariaLabel$).toBe(expected, values);
+        this.testScheduler.flush();
+    });
+
     it('should set icon correctly', function (this: TestContext): void {
         const icon = 'action-icon';
         const values = { i: icon };

diff --git a/projects/core/src/lib/action-abstract/action-abstract.ts b/projects/core/src/lib/action-abstract/action-abstract.ts
@@ -11,6 +11,7 @@ import { ActionGroup } from '../action-group/action-group';
  */
 const defaultAbstractOptions: Required<ActionAbstractOptions> = {
     title: '',
+    ariaLabel: '',
     icon: '',
     visible: true,
     disabled: false,
@@ -110,6 +111,10 @@ export abstract class ActionAbstract<Options extends ActionAbstractOptions, Fire
      * e.g. `Active`, `Inactive`, `Destroyed`
      */
     readonly state$: Observable<ActionState>;
+    /**
+     * `Observable` that notifies subscribers when the ariaLabel changes.
+     */
+    readonly ariaLabel$: Observable<string>;
     /**
      * **Abstract** property, holding `Observable`
      * Each derived class **should** implement it's own `fire$` observable,
@@ -165,18 +170,17 @@ export abstract class ActionAbstract<Options extends ActionAbstractOptions, Fire
      * Used to complete all **internal** subjects
      */
     protected readonly finish: Observable<ActionState>;
+    /**
+     * `BehaviorSubject`, used to notify subscribers on aria label changes.
+     */
+    protected readonly _ariaLabel$: BehaviorSubject<string>;
 
     /**
      * Parent of current action. This is a parent action,
      * to whom current action belongs to, and renders into
      */
     private parent?: ActionGroup;
 
-    /**
-     * `constructor` should be `ActionAbstract`
-     */
-    ['constructor']: typeof ActionAbstract;
-
     /**
      * Abstract action `constructor`. It will:
      * - **Extend** default options with derived default options and custom options
@@ -189,19 +193,21 @@ export abstract class ActionAbstract<Options extends ActionAbstractOptions, Fire
      */
     constructor(options: Options,
                 component?: Type<ActionAbstractComponentImpl>) {
-        const { title, icon, visible, disabled } = this.options = { ...defaultAbstractOptions, ...options };
+        const { title, icon, visible, disabled, ariaLabel } = this.options = { ...defaultAbstractOptions, ...options };
 
         this.title = new BehaviorSubject(title);
         this.icon = new BehaviorSubject(icon);
         this.visible = new BehaviorSubject(visible);
         this.disabled = new BehaviorSubject(disabled);
+        this._ariaLabel$ = new BehaviorSubject(ariaLabel);
         this.state = new BehaviorSubject(<ActionState>ActionState.Inactive);
         this.finish = this.state.pipe(
             filter(state => state === ActionState.Destroyed)
         );
 
         this.title$ = this.handleLivecycleDistinct(this.title.asObservable());
         this.icon$ = this.handleLivecycleDistinct(this.icon.asObservable());
+        this.ariaLabel$ = this.handleLivecycleDistinct(this._ariaLabel$.asObservable());
         this.visible$ = this.handleLivecycleDistinct(this.visible.asObservable());
         this.disabled$ = this.handleLivecycleDistinct(this.disabled.asObservable());
         this.state$ = this.state.asObservable().pipe(
@@ -337,6 +343,23 @@ export abstract class ActionAbstract<Options extends ActionAbstractOptions, Fire
         return this.title.getValue();
     }
 
+    /**
+     * Will set the new ariaLabel and notify all ariaLabel subscribers
+     *
+     * @param ariaLabel The new action title
+     */
+    setAriaLabel(ariaLabel: string): this {
+        this._ariaLabel$.next(ariaLabel);
+        return this;
+    }
+
+    /**
+     * Returns current action ariaLabel
+     */
+    getAriaLabel(): string {
+        return this._ariaLabel$.getValue();
+    }
+
     /**
      * Will set the new icon and notify all icon subscriptions
      *