feat(panel-select): add style, dropdown prop

petkit-io · Sep 19, 2018 · b1149c3 · b1149c3
1 parent 72e93e4
commit b1149c3
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 42 deletions.
diff --git a/mat-panel-select/mat-panel-select.component.html b/mat-panel-select/mat-panel-select.component.html
@@ -1,26 +1,37 @@
-<div
-  class="ngx-mat-panel-select__container"
-  [class.ngx-mat-panel-select__grid-container]="type === 'grid'"
-  [class.ngx-mat-panel-select__list-container]="type === 'list'"
->
+<ng-container *ngIf="!dropdown">
+  <ng-container *ngTemplateOutlet="tpl"></ng-container>
+</ng-container>
+
+<mat-menu class="ngx-mat-panel-select__menu" #panelSelect>
+  <ng-container *ngTemplateOutlet="tpl"></ng-container>
+</mat-menu>
+
+<ng-template #tpl>
   <div
-    class="ngx-mat-panel-select__list"
-    *ngFor="let list of data"
+    class="ngx-mat-panel-select__container {{containerClass}}"
+    [class.ngx-mat-panel-select__grid-container]="type === 'grid'"
+    [class.ngx-mat-panel-select__list-container]="type === 'list'"
+    [class.ngx-mat-panel-select__dropdown-container]="dropdown === false"
   >
-    <div class="ngx-mat-panel-select__list-title">
-      {{list.title}}
-    </div>
+    <div
+      class="ngx-mat-panel-select__list"
+      *ngFor="let list of data"
+    >
+      <div class="ngx-mat-panel-select__list-title">
+        {{list.title}}
+      </div>
 
-    <div class="ngx-mat-panel-select__item-container">
-      <div
-        class="ngx-mat-panel-select__item"
-        *ngFor="let item of list.children"
-      >
-        <button mat-button (click)="itemClick.emit(item)">
-          <div class="ngx-mat-panel-select__item-text">{{item.text}}</div>
-        </button>
+      <div class="ngx-mat-panel-select__item-container">
+        <div
+          class="ngx-mat-panel-select__item"
+          *ngFor="let item of list.children"
+        >
+          <button mat-button (click)="itemClick.emit(item)">
+            <div class="ngx-mat-panel-select__item-text">{{item.text}}</div>
+          </button>
+        </div>
       </div>
     </div>
   </div>
-</div>
+</ng-template>
 
diff --git a/mat-panel-select/mat-panel-select.component.scss b/mat-panel-select/mat-panel-select.component.scss
@@ -1,5 +1,9 @@
 @mixin ngx-mat-panel-select-theme() {
   .ngx-mat-panel-select {
+    &__menu[class] {
+      max-width: none;
+    }
+
     &__container {
       overflow: hidden;
       width: 500px;
@@ -15,6 +19,10 @@
       @include ngx-mat-panel-select-grid-theme();
     }
 
+    &__dropdown-container {
+      width: auto;
+    }
+
     &__list {
       margin-top: 24px;
 
@@ -35,22 +43,6 @@
   }
 }
 
-@mixin ngx-mat-panel-select-list-theme() {
-  .ngx-mat-panel-select {
-    &__item {
-      &-container {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-      }
-
-      .mat-button {
-        min-width: auto;
-      }
-    }
-  }
-}
-
 @mixin ngx-mat-panel-select-grid-theme() {
   .ngx-mat-panel-select {
     &__item {
@@ -70,5 +62,23 @@
   }
 }
 
+@mixin ngx-mat-panel-select-list-theme() {
+  .ngx-mat-panel-select {
+    &__item {
+      margin: 4px;
+
+      &-container {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+      }
+
+      .mat-button {
+        min-width: auto;
+      }
+    }
+  }
+}
+
 @include ngx-mat-panel-select-theme();
 
diff --git a/mat-panel-select/mat-panel-select.component.ts b/mat-panel-select/mat-panel-select.component.ts
@@ -1,10 +1,14 @@
 import {
   Component,
-  OnInit,
   Input,
   Output,
   EventEmitter,
+  ViewChild,
+  ViewEncapsulation,
 } from '@angular/core';
+import {
+  MatMenu,
+} from '@angular/material';
 import {
   IMatPanelSelectData,
   IMatPanelSelectType,
@@ -13,21 +17,29 @@ import {
 @Component({
   selector: 'ngx-mat-panel-select',
   templateUrl: './mat-panel-select.component.html',
-  styleUrls: ['./mat-panel-select.component.scss']
+  styleUrls: ['./mat-panel-select.component.scss'],
+  // set encapsulation to None
+  encapsulation: ViewEncapsulation.None,
 })
-export class MatPanelSelectComponent implements OnInit {
+export class MatPanelSelectComponent {
   @Input()
   data: IMatPanelSelectData[] = [];
   @Input()
   type: IMatPanelSelectType = 'list';
+  @Input()
+  dropdown = true;
+  @Input('class')
+  containerClass = '';
 
   @Output()
   itemClick: EventEmitter<any> = new EventEmitter<any>();
 
+  @ViewChild(MatMenu)
+  private _menu: MatMenu;
+
   constructor() { }
 
-  ngOnInit() {
-    console.log(this.data);
+  get menu() {
+    return this._menu;
   }
-
 }
diff --git a/mat-panel-select/mat-panel-select.module.ts b/mat-panel-select/mat-panel-select.module.ts
@@ -1,13 +1,15 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatButtonModule } from '@angular/material';
+
+import { MatButtonModule, MatMenuModule } from '@angular/material';
 
 import { MatPanelSelectComponent } from './mat-panel-select.component';
 
 @NgModule({
   imports: [
     CommonModule,
     MatButtonModule,
+    MatMenuModule,
   ],
   declarations: [
     MatPanelSelectComponent,