Merge 61daa9d into 8dc5c7d

angular.json

@@ -60,7 +60,8 @@
               "projects/playground/src/assets"
             ],
             "styles": [
-              "projects/playground/src/styles.css"
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "projects/playground/src/styles.scss"
             ],
             "scripts": [],
             "aot": true
@@ -110,7 +111,8 @@
             "tsConfig": "projects/playground/tsconfig.spec.json",
             "karmaConfig": "projects/playground/karma.conf.js",
             "styles": [
-              "projects/playground/src/styles.css"
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "projects/playground/src/styles.scss"
             ],
             "sourceMap": true,
             "scripts": [],
@@ -133,10 +135,50 @@
           }
         }
       }
+    },
+    "material": {
+      "root": "projects/material",
+      "sourceRoot": "projects/material/src",
+      "projectType": "library",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/material/tsconfig.lib.json",
+            "project": "projects/material/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/material/src/test.ts",
+            "tsConfig": "projects/material/tsconfig.spec.json",
+            "karmaConfig": "projects/material/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/material/tsconfig.lib.json",
+              "projects/material/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
     }
   },
   "defaultProject": "playground",
   "cli": {
     "packageManager": "yarn"
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "styleext": "scss"
+    }
   }
 }

package.json

@@ -7,8 +7,7 @@
     "url": "https://github.com/klemenoslaj/ng-action-outlet.git"
   },
   "scripts": {
-    "build": "yarn build:core",
-    "build:core": "ng build core",
+    "build": "ng build core && ng build material",
     "test:once": "ng test core --watch false --browsers ChromiumHeadless --code-coverage",
     "docs:coverage": "compodoc -p ./tsconfig.docs.json --disableLifeCycleHooks --disableInternal --coverageMinimumPerFile 100",
     "docs:build.prod": "yarn docs:coverage && compodoc -p ./tsconfig.docs.json --disableLifeCycleHooks --disableInternal --disablePrivate --disableProtected --name NgActionOutlet --output docs",
@@ -18,22 +17,25 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^7.0.0",
+    "@angular/cdk": "~7.3.3",
     "@angular/common": "^7.0.0",
     "@angular/compiler": "^7.0.0",
     "@angular/core": "^7.0.0",
     "@angular/forms": "^7.0.0",
     "@angular/http": "^7.0.0",
+    "@angular/material": "~7.3.3",
     "@angular/platform-browser": "^7.0.0",
     "@angular/platform-browser-dynamic": "^7.0.0",
     "@angular/router": "^7.0.0",
     "core-js": "^2.5.4",
+    "hammerjs": "^2.0.8",
     "rxjs": "^6.4.0",
     "travis-deploy-once": "^5.0.9",
     "zone.js": "~0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.13.3",
-    "@angular-devkit/build-ng-packagr": "^0.13.3",
+    "@angular-devkit/build-angular": "~0.13.0",
+    "@angular-devkit/build-ng-packagr": "~0.13.0",
     "@angular/cli": "^7.0.2",
     "@angular/compiler-cli": "^7.0.0",
     "@angular/language-service": "^7.0.0",

projects/core/src/lib/action-abstract/action-abstract.model.ts

@@ -9,10 +9,6 @@ export interface ActionAbstractComponentImpl<Action extends AnyAction = AnyActio
      * The derived action instance, as Input in angular component
      */
     action: Action; // @Input
-    /**
-     * Hidden property, that `HostBinding` should be used for, in order to show or hide action
-     */
-    hidden: boolean; // @HostBinding
 }
 
 /**

projects/core/src/lib/action-outlet.module.ts

@@ -1,5 +1,5 @@
+import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { NgModule, Type, ModuleWithProviders } from '@angular/core';
 
 import { ActionOutletDirective } from './action-outlet.directive';
 

projects/material/README.md

@@ -0,0 +1,24 @@
+# Material
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project material` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project material`.
+> Note: Don't forget to add `--project material` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build material` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build material`, go to the dist folder `cd dist/material` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test material` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

projects/material/karma.conf.js

@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/material'),
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

projects/material/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/material",
+  "lib": {
+    "entryFile": "src/public_api.ts"
+  }
+}

projects/material/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@ng-action-outlet/material",
+  "version": "0.0.0-development",
+  "peerDependencies": {
+    "@angular/common": "^7.2.0",
+    "@angular/core": "^7.2.0",
+    "@angular/material": "^7.2.0",
+    "@ng-action-outlet/core": "^0.0.0-development"
+  }
+}

projects/material/src/lib/action-mat-button.component.ts

@@ -0,0 +1,62 @@
+import { Component, Input, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import { ActionButton, ActionButtonComponentImpl, ActionGroup } from '@ng-action-outlet/core';
+
+import { isMenuItem } from './common';
+
+@Component({
+    selector: 'action-mat-button',
+    template: `
+    <ng-container *ngIf="action.visible$ | async">
+      <ng-container *ngIf="action && isMenuItem(); then menuItem else button"></ng-container>
+    </ng-container>
+
+    <ng-template #button>
+      <ng-container *ngIf="action.title$ | async; then titleButton else iconButton"></ng-container>
+    </ng-template>
+
+    <ng-template #titleButton>
+      <button
+        type="button"
+        mat-button
+        (click)="action.trigger()"
+        [disabled]="action.disabled$ | async">
+        <ng-container [ngTemplateOutlet]="content"></ng-container>
+      </button>
+    </ng-template>
+
+    <ng-template #iconButton>
+      <button
+        type="button"
+        mat-icon-button
+        (click)="action.trigger()"
+        [disabled]="action.disabled$ | async">
+        <ng-container [ngTemplateOutlet]="content"></ng-container>
+      </button>
+    </ng-template>
+
+    <ng-template #menuItem>
+      <button
+        type="button"
+        mat-menu-item
+        (click)="action.trigger()"
+        [disabled]="action.disabled$ | async">
+        <ng-container [ngTemplateOutlet]="content"></ng-container>
+      </button>
+    </ng-template>
+
+    <ng-template #content>
+      <mat-icon *ngIf="action.icon$ | async; let icon">{{ icon }}</mat-icon>
+      {{ action.title$ | async }}
+    </ng-template>
+  `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None
+})
+export class ActionMatButtonComponent implements ActionButtonComponentImpl {
+    @Input()
+    readonly action: ActionButton;
+
+    isMenuItem() {
+        return isMenuItem(this.action.getParent());
+    }
+}

projects/material/src/lib/action-mat-group.component.ts

@@ -0,0 +1,58 @@
+import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import { ActionGroup, ActionGroupComponentImpl } from '@ng-action-outlet/core';
+
+import { isMenuItem } from './common';
+
+@Component({
+  selector: 'action-mat-group',
+  template: `
+    <ng-container *ngIf="action.visible$ | async">
+      <ng-container *ngIf="action.dropdown$ | async; then dropdown else group"></ng-container>
+    </ng-container>
+
+    <ng-template #group>
+      <mat-divider *ngIf="showDivider()"></mat-divider>
+      <ng-container *ngFor="let child of action.children$ | async" [actionOutlet]="child"></ng-container>
+    </ng-template>
+
+    <ng-template #dropdown>
+      <mat-menu #menu="matMenu">
+        <ng-template matMenuContent>
+          <ng-container *ngFor="let child of action.children$ | async" [actionOutlet]="child"></ng-container>
+        </ng-template>
+      </mat-menu>
+
+      <ng-container *ngIf="isMenuItem(); then menuItem else menuButton"></ng-container>
+
+      <ng-template #menuItem>
+        <button
+          type="button"
+          mat-menu-item
+          [matMenuTriggerFor]="menu"
+          [disabled]="action.disabled$ | async">
+          <mat-icon *ngIf="action.icon$ | async; let icon">{{ icon }}</mat-icon>
+          {{ action.title$ | async }}
+        </button>
+      </ng-template>
+
+      <ng-template #menuButton>
+        <action-mat-button *ngIf="action.disabled$ | async" [action]="action"></action-mat-button>
+        <action-mat-button *ngIf="!(action.disabled$ | async)" [matMenuTriggerFor]="menu" [action]="action"></action-mat-button>
+      </ng-template>
+    </ng-template>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None
+})
+export class ActionMatGroupComponent implements ActionGroupComponentImpl {
+  readonly action: ActionGroup;
+
+  isMenuItem() {
+    return isMenuItem(this.action.getParent());
+  }
+
+  showDivider() {
+    const parent = this.action.getParent();
+    return parent && parent.isDropdown() && parent.getChild(0) !== this.action;
+  }
+}

projects/material/src/lib/action-mat.module.ts

@@ -0,0 +1,38 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ActionOutletModule, ActionButton, ActionGroup } from '@ng-action-outlet/core';
+import { MatButtonModule, MatMenuModule, MatIconModule, MatDividerModule } from '@angular/material';
+
+import { ActionMatButtonComponent } from './action-mat-button.component';
+import { ActionMatGroupComponent } from './action-mat-group.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ActionOutletModule,
+    MatButtonModule,
+    MatMenuModule,
+    MatIconModule,
+    MatDividerModule
+  ],
+  declarations: [
+    ActionMatButtonComponent,
+    ActionMatGroupComponent
+  ],
+  entryComponents: [
+    ActionMatButtonComponent,
+    ActionMatGroupComponent
+  ],
+  exports: [
+    ActionMatButtonComponent,
+    ActionMatGroupComponent
+  ],
+  providers: [{
+    provide: ActionButton,
+    useValue: ActionMatButtonComponent
+  }, {
+    provide: ActionGroup,
+    useValue: ActionMatGroupComponent
+  }]
+})
+export class ActionMatModule { }

projects/material/src/lib/common.ts

@@ -0,0 +1,5 @@
+import { AnyAction, ActionGroup } from '@ng-action-outlet/core';
+
+export const isMenuItem = (action: AnyAction) => {
+    return action && (action instanceof ActionGroup && action.isDropdown() || isMenuItem(action.getParent()));
+};

projects/material/src/public_api.ts

@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of material
+ */
+
+export * from './lib/action-mat-button.component';
+export * from './lib/action-mat-group.component';
+export * from './lib/action-mat.module';