feat(drawer): created drawer slide-over pane component

angular/src/directives/proxies-list.txt

@@ -19,6 +19,7 @@ d.IonApp,
   d.IonCol,
   d.IonContent,
   d.IonDatetime,
+  d.IonDrawer,
   d.IonFab,
   d.IonFabButton,
   d.IonFabList,

angular/src/directives/proxies.ts

@@ -210,6 +210,24 @@ export class IonDatetime {
   }
 }
 
+export declare interface IonDrawer extends Components.IonDrawer {}
+@ProxyCmp({inputs: ['mode', 'options', 'presentDefault'], 'methods': ['update', 'present', 'destroy', 'moveToBreak', 'hide', 'isHidden', 'getDrawer']})
+@Component({ selector: 'ion-drawer', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['mode', 'options', 'presentDefault'] })
+export class IonDrawer {
+  ionDrawerDidDismiss!: EventEmitter<CustomEvent>;
+  ionDrawerWillDismiss!: EventEmitter<CustomEvent>;
+  ionDrawerTransitionEnd!: EventEmitter<CustomEvent>;
+  ionDrawerWillPresent!: EventEmitter<CustomEvent>;
+  ionDrawerDragStart!: EventEmitter<CustomEvent>;
+  ionDrawerOnDrag!: EventEmitter<CustomEvent>;
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['ionDrawerDidDismiss', 'ionDrawerWillDismiss', 'ionDrawerTransitionEnd', 'ionDrawerWillPresent', 'ionDrawerDragStart', 'ionDrawerOnDrag']);
+  }
+}
+
 export declare interface IonFab extends Components.IonFab {}
 @ProxyCmp({inputs: ['activated', 'edge', 'horizontal', 'vertical'], 'methods': ['close']})
 @Component({ selector: 'ion-fab', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['activated', 'edge', 'horizontal', 'vertical'] })

core/api.txt

@@ -320,7 +320,7 @@ ion-datetime,prop,monthShortNames,string | string[] | undefined,undefined,false,
 ion-datetime,prop,monthValues,number | number[] | string | undefined,undefined,false,false
 ion-datetime,prop,name,string,this.inputId,false,false
 ion-datetime,prop,pickerFormat,string | undefined,undefined,false,false
-ion-datetime,prop,pickerOptions,undefined | { columns?: PickerColumn[] | undefined; buttons?: PickerButton[] | undefined; cssClass?: string | string[] | undefined; backdropDismiss?: boolean | undefined; animated?: boolean | undefined; mode?: "ios" | "md" | undefined; keyboardClose?: boolean | undefined; id?: string | undefined; enterAnimation?: AnimationBuilder | undefined; leaveAnimation?: AnimationBuilder | undefined; },undefined,false,false
+ion-datetime,prop,pickerOptions,undefined | { columns?: PickerColumn[] | undefined; buttons?: PickerButton[] | undefined; cssClass?: string | string[] | undefined; showBackdrop?: boolean | undefined; backdropDismiss?: boolean | undefined; animated?: boolean | undefined; mode?: "ios" | "md" | undefined; keyboardClose?: boolean | undefined; id?: string | undefined; enterAnimation?: AnimationBuilder | undefined; leaveAnimation?: AnimationBuilder | undefined; },undefined,false,false
 ion-datetime,prop,placeholder,null | string | undefined,undefined,false,false
 ion-datetime,prop,readonly,boolean,false,false,false
 ion-datetime,prop,value,null | string | undefined,undefined,false,false
@@ -336,6 +336,24 @@ ion-datetime,css-prop,--padding-start
 ion-datetime,css-prop,--padding-top
 ion-datetime,css-prop,--placeholder-color
 
+ion-drawer,none
+ion-drawer,prop,mode,"ios" | "md",undefined,false,false
+ion-drawer,prop,options,any,{},false,false
+ion-drawer,prop,presentDefault,boolean,false,false,false
+ion-drawer,method,destroy,destroy(conf?: {}) => Promise<void>
+ion-drawer,method,getDrawer,getDrawer() => Promise<any>
+ion-drawer,method,hide,hide() => Promise<void>
+ion-drawer,method,isHidden,isHidden() => Promise<boolean | null>
+ion-drawer,method,moveToBreak,moveToBreak(val: "top" | "middle" | "bottom") => Promise<void>
+ion-drawer,method,present,present(conf?: {}) => Promise<void>
+ion-drawer,method,update,update() => Promise<void>
+ion-drawer,event,ionDrawerDidDismiss,void,true
+ion-drawer,event,ionDrawerDragStart,void,true
+ion-drawer,event,ionDrawerOnDrag,void,true
+ion-drawer,event,ionDrawerTransitionEnd,void,true
+ion-drawer,event,ionDrawerWillDismiss,void,true
+ion-drawer,event,ionDrawerWillPresent,void,true
+
 ion-fab,shadow
 ion-fab,prop,activated,boolean,false,false,false
 ion-fab,prop,edge,boolean,false,false,false

core/package.json

@@ -42,6 +42,7 @@
     "@types/swiper": "4.4.4",
     "aws-sdk": "^2.497.0",
     "clean-css-cli": "^4.1.11",
+    "cupertino-pane": "^1.0.9",
     "domino": "^2.1.3",
     "fs-extra": "^8.0.1",
     "jest": "24.9.0",

core/src/components.d.ts

@@ -708,6 +708,48 @@ export namespace Components {
     */
     'yearValues'?: number[] | number | string;
   }
+  interface IonDrawer {
+    /**
+    * Remove pane from DOM and clear styles
+    */
+    'destroy': (conf?: {}) => Promise<void>;
+    /**
+    * Use this to access the full Drawer API.
+    */
+    'getDrawer': () => Promise<any>;
+    /**
+    * Dissappear pane from screen, still keep pane in DOM
+    */
+    'hide': () => Promise<void>;
+    /**
+    * Determinate if drawer position was moved out of screen, but pane still exist in DOM.
+    */
+    'isHidden': () => Promise<boolean | null>;
+    /**
+    * The mode determines which platform styles to use.
+    */
+    'mode'?: "ios" | "md";
+    /**
+    * Will change pane position with animation to selected breakpoint
+    */
+    'moveToBreak': (val: "top" | "middle" | "bottom") => Promise<void>;
+    /**
+    * Options to pass to the drawer instance. See https://github.com/roman-rr/cupertino-pane/ for valid options
+    */
+    'options': any;
+    /**
+    * Render and show Drawer pane from ion-drawer component
+    */
+    'present': (conf?: {}) => Promise<void>;
+    /**
+    * If `true`, show the drawer right after component loaded.
+    */
+    'presentDefault': boolean;
+    /**
+    * Update the underlying Drawer implementation.
+    */
+    'update': () => Promise<void>;
+  }
   interface IonFab {
     /**
     * If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.
@@ -2787,6 +2829,12 @@ declare global {
     new (): HTMLIonDatetimeElement;
   };
 
+  interface HTMLIonDrawerElement extends Components.IonDrawer, HTMLStencilElement {}
+  var HTMLIonDrawerElement: {
+    prototype: HTMLIonDrawerElement;
+    new (): HTMLIonDrawerElement;
+  };
+
   interface HTMLIonFabElement extends Components.IonFab, HTMLStencilElement {}
   var HTMLIonFabElement: {
     prototype: HTMLIonFabElement;
@@ -3214,6 +3262,7 @@ declare global {
     'ion-col': HTMLIonColElement;
     'ion-content': HTMLIonContentElement;
     'ion-datetime': HTMLIonDatetimeElement;
+    'ion-drawer': HTMLIonDrawerElement;
     'ion-fab': HTMLIonFabElement;
     'ion-fab-button': HTMLIonFabButtonElement;
     'ion-fab-list': HTMLIonFabListElement;
@@ -3938,6 +3987,44 @@ declare namespace LocalJSX {
     */
     'yearValues'?: number[] | number | string;
   }
+  interface IonDrawer {
+    /**
+    * The mode determines which platform styles to use.
+    */
+    'mode'?: "ios" | "md";
+    /**
+    * Emitted after pane will dissapeared
+    */
+    'onIonDrawerDidDismiss'?: (event: CustomEvent<void>) => void;
+    /**
+    * Emitted when detect user drag event on pane
+    */
+    'onIonDrawerDragStart'?: (event: CustomEvent<void>) => void;
+    /**
+    * Emitted executes on each new pane position
+    */
+    'onIonDrawerOnDrag'?: (event: CustomEvent<void>) => void;
+    /**
+    * Emitted after pane will present
+    */
+    'onIonDrawerTransitionEnd'?: (event: CustomEvent<void>) => void;
+    /**
+    * Emitted before pane will dissapeared
+    */
+    'onIonDrawerWillDismiss'?: (event: CustomEvent<void>) => void;
+    /**
+    * Emitted before panel will present
+    */
+    'onIonDrawerWillPresent'?: (event: CustomEvent<void>) => void;
+    /**
+    * Options to pass to the drawer instance. See https://github.com/roman-rr/cupertino-pane/ for valid options
+    */
+    'options'?: any;
+    /**
+    * If `true`, show the drawer right after component loaded.
+    */
+    'presentDefault'?: boolean;
+  }
   interface IonFab {
     /**
     * If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.
@@ -5846,6 +5933,7 @@ declare namespace LocalJSX {
     'ion-col': IonCol;
     'ion-content': IonContent;
     'ion-datetime': IonDatetime;
+    'ion-drawer': IonDrawer;
     'ion-fab': IonFab;
     'ion-fab-button': IonFabButton;
     'ion-fab-list': IonFabList;
@@ -5942,6 +6030,7 @@ declare module "@stencil/core" {
       'ion-col': LocalJSX.IonCol & JSXBase.HTMLAttributes<HTMLIonColElement>;
       'ion-content': LocalJSX.IonContent & JSXBase.HTMLAttributes<HTMLIonContentElement>;
       'ion-datetime': LocalJSX.IonDatetime & JSXBase.HTMLAttributes<HTMLIonDatetimeElement>;
+      'ion-drawer': LocalJSX.IonDrawer & JSXBase.HTMLAttributes<HTMLIonDrawerElement>;
       'ion-fab': LocalJSX.IonFab & JSXBase.HTMLAttributes<HTMLIonFabElement>;
       'ion-fab-button': LocalJSX.IonFabButton & JSXBase.HTMLAttributes<HTMLIonFabButtonElement>;
       'ion-fab-list': LocalJSX.IonFabList & JSXBase.HTMLAttributes<HTMLIonFabListElement>;

core/src/components/drawer/drawer.ios.scss

@@ -0,0 +1,4 @@
+@import "./drawer";
+
+// iOS Drawer
+// --------------------------------------------------

core/src/components/drawer/drawer.md.scss

@@ -0,0 +1,30 @@
+@import "./drawer";
+
+// Material Design Drawer
+// --------------------------------------------------
+/* stylelint-disable */
+.drawer-md .pane {
+    border-top-left-radius: 12px !important;
+    border-top-right-radius: 12px !important;
+
+    box-shadow: 0 3px 5px -1px rgba(184, 153, 153, 0.2), 
+                0 6px 10px 0 rgba(0,0,0,.17), 
+                0 1px 18px 0 rgba(0,0,0,.2) !important;
+
+    .draggable {
+        @include margin(3px, 0, 3px, 0);
+    }
+
+    .draggable .move {
+        width: 28px !important;
+
+        background: rgba(192, 192, 192, 0.55) !important;
+    }
+
+    .close-button {
+        top: 10px !important;
+        right: 10px !important;
+
+        background: #e0e0e0 !important;
+    }
+}

core/src/components/drawer/drawer.scss

@@ -0,0 +1,13 @@
+@import "../../themes/ionic.globals.md";
+
+// Drawer
+// --------------------------------------------------
+ion-drawer {
+  @include padding(0, 20px, 0, 20px);
+
+  display: none;
+}
+
+.pane > ion-drawer {
+  display: block;
+}