feat(): update to latest stencil

package.json

@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/ionic-team/ionic-pwa-elements",
   "devDependencies": {
-    "@stencil/core": "^1.8.11",
+    "@stencil/core": "^2.14.0",
     "np": "^6.5.0",
     "workbox-build": "^4.3.1"
   }

src/components.d.ts

@@ -4,136 +4,124 @@
  * This is an autogenerated file created by the Stencil compiler.
  * It contains typing information for all components that exist in this project.
  */
-
-
-import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
-import {
-  ActionSheetOption,
-} from './definitions';
-
+import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+import { ActionSheetOption } from "./definitions";
 export namespace Components {
-  interface PwaActionSheet {
-    'cancelable': boolean;
-    'header': string;
-    'options': ActionSheetOption[];
-  }
-  interface PwaCamera {
-    'facingMode': string;
-    'handleNoDeviceError': (e?: any) => void;
-    'handlePhoto': (photo: Blob) => void;
-    'noDevicesButtonText': string;
-    'noDevicesText': string;
-  }
-  interface PwaCameraModal {
-    'dismiss': () => Promise<void>;
-    'facingMode': string;
-    'present': () => Promise<void>;
-  }
-  interface PwaCameraModalInstance {
-    'facingMode': string;
-    'noDevicesButtonText': string;
-    'noDevicesText': string;
-  }
-  interface PwaToast {
-    'duration': number;
-    'message': string;
-  }
+    interface PwaActionSheet {
+        "cancelable": boolean;
+        "header": string;
+        "options": ActionSheetOption[];
+    }
+    interface PwaCamera {
+        "facingMode": string;
+        "handleNoDeviceError": (e?: any) => void;
+        "handlePhoto": (photo: Blob) => void;
+        "isServer": boolean;
+        "noDevicesButtonText": string;
+        "noDevicesText": string;
+    }
+    interface PwaCameraModal {
+        "dismiss": () => Promise<void>;
+        "facingMode": string;
+        "present": () => Promise<void>;
+    }
+    interface PwaCameraModalInstance {
+        "facingMode": string;
+        "noDevicesButtonText": string;
+        "noDevicesText": string;
+    }
+    interface PwaToast {
+        "duration": number;
+        "message": string;
+    }
 }
-
 declare global {
-
-
-  interface HTMLPwaActionSheetElement extends Components.PwaActionSheet, HTMLStencilElement {}
-  var HTMLPwaActionSheetElement: {
-    prototype: HTMLPwaActionSheetElement;
-    new (): HTMLPwaActionSheetElement;
-  };
-
-  interface HTMLPwaCameraElement extends Components.PwaCamera, HTMLStencilElement {}
-  var HTMLPwaCameraElement: {
-    prototype: HTMLPwaCameraElement;
-    new (): HTMLPwaCameraElement;
-  };
-
-  interface HTMLPwaCameraModalElement extends Components.PwaCameraModal, HTMLStencilElement {}
-  var HTMLPwaCameraModalElement: {
-    prototype: HTMLPwaCameraModalElement;
-    new (): HTMLPwaCameraModalElement;
-  };
-
-  interface HTMLPwaCameraModalInstanceElement extends Components.PwaCameraModalInstance, HTMLStencilElement {}
-  var HTMLPwaCameraModalInstanceElement: {
-    prototype: HTMLPwaCameraModalInstanceElement;
-    new (): HTMLPwaCameraModalInstanceElement;
-  };
-
-  interface HTMLPwaToastElement extends Components.PwaToast, HTMLStencilElement {}
-  var HTMLPwaToastElement: {
-    prototype: HTMLPwaToastElement;
-    new (): HTMLPwaToastElement;
-  };
-  interface HTMLElementTagNameMap {
-    'pwa-action-sheet': HTMLPwaActionSheetElement;
-    'pwa-camera': HTMLPwaCameraElement;
-    'pwa-camera-modal': HTMLPwaCameraModalElement;
-    'pwa-camera-modal-instance': HTMLPwaCameraModalInstanceElement;
-    'pwa-toast': HTMLPwaToastElement;
-  }
+    interface HTMLPwaActionSheetElement extends Components.PwaActionSheet, HTMLStencilElement {
+    }
+    var HTMLPwaActionSheetElement: {
+        prototype: HTMLPwaActionSheetElement;
+        new (): HTMLPwaActionSheetElement;
+    };
+    interface HTMLPwaCameraElement extends Components.PwaCamera, HTMLStencilElement {
+    }
+    var HTMLPwaCameraElement: {
+        prototype: HTMLPwaCameraElement;
+        new (): HTMLPwaCameraElement;
+    };
+    interface HTMLPwaCameraModalElement extends Components.PwaCameraModal, HTMLStencilElement {
+    }
+    var HTMLPwaCameraModalElement: {
+        prototype: HTMLPwaCameraModalElement;
+        new (): HTMLPwaCameraModalElement;
+    };
+    interface HTMLPwaCameraModalInstanceElement extends Components.PwaCameraModalInstance, HTMLStencilElement {
+    }
+    var HTMLPwaCameraModalInstanceElement: {
+        prototype: HTMLPwaCameraModalInstanceElement;
+        new (): HTMLPwaCameraModalInstanceElement;
+    };
+    interface HTMLPwaToastElement extends Components.PwaToast, HTMLStencilElement {
+    }
+    var HTMLPwaToastElement: {
+        prototype: HTMLPwaToastElement;
+        new (): HTMLPwaToastElement;
+    };
+    interface HTMLElementTagNameMap {
+        "pwa-action-sheet": HTMLPwaActionSheetElement;
+        "pwa-camera": HTMLPwaCameraElement;
+        "pwa-camera-modal": HTMLPwaCameraModalElement;
+        "pwa-camera-modal-instance": HTMLPwaCameraModalInstanceElement;
+        "pwa-toast": HTMLPwaToastElement;
+    }
 }
-
 declare namespace LocalJSX {
-  interface PwaActionSheet {
-    'cancelable'?: boolean;
-    'header'?: string;
-    'onOnSelection'?: (event: CustomEvent<any>) => void;
-    'options'?: ActionSheetOption[];
-  }
-  interface PwaCamera {
-    'facingMode'?: string;
-    'handleNoDeviceError'?: (e?: any) => void;
-    'handlePhoto'?: (photo: Blob) => void;
-    'noDevicesButtonText'?: string;
-    'noDevicesText'?: string;
-  }
-  interface PwaCameraModal {
-    'facingMode'?: string;
-    'onNoDeviceError'?: (event: CustomEvent<any>) => void;
-    'onOnPhoto'?: (event: CustomEvent<any>) => void;
-  }
-  interface PwaCameraModalInstance {
-    'facingMode'?: string;
-    'noDevicesButtonText'?: string;
-    'noDevicesText'?: string;
-    'onNoDeviceError'?: (event: CustomEvent<any>) => void;
-    'onOnPhoto'?: (event: CustomEvent<any>) => void;
-  }
-  interface PwaToast {
-    'duration'?: number;
-    'message'?: string;
-  }
-
-  interface IntrinsicElements {
-    'pwa-action-sheet': PwaActionSheet;
-    'pwa-camera': PwaCamera;
-    'pwa-camera-modal': PwaCameraModal;
-    'pwa-camera-modal-instance': PwaCameraModalInstance;
-    'pwa-toast': PwaToast;
-  }
+    interface PwaActionSheet {
+        "cancelable"?: boolean;
+        "header"?: string;
+        "onOnSelection"?: (event: CustomEvent<any>) => void;
+        "options"?: ActionSheetOption[];
+    }
+    interface PwaCamera {
+        "facingMode"?: string;
+        "handleNoDeviceError"?: (e?: any) => void;
+        "handlePhoto"?: (photo: Blob) => void;
+        "isServer"?: boolean;
+        "noDevicesButtonText"?: string;
+        "noDevicesText"?: string;
+    }
+    interface PwaCameraModal {
+        "facingMode"?: string;
+        "onNoDeviceError"?: (event: CustomEvent<any>) => void;
+        "onOnPhoto"?: (event: CustomEvent<any>) => void;
+    }
+    interface PwaCameraModalInstance {
+        "facingMode"?: string;
+        "noDevicesButtonText"?: string;
+        "noDevicesText"?: string;
+        "onNoDeviceError"?: (event: CustomEvent<any>) => void;
+        "onOnPhoto"?: (event: CustomEvent<any>) => void;
+    }
+    interface PwaToast {
+        "duration"?: number;
+        "message"?: string;
+    }
+    interface IntrinsicElements {
+        "pwa-action-sheet": PwaActionSheet;
+        "pwa-camera": PwaCamera;
+        "pwa-camera-modal": PwaCameraModal;
+        "pwa-camera-modal-instance": PwaCameraModalInstance;
+        "pwa-toast": PwaToast;
+    }
 }
-
 export { LocalJSX as JSX };
-
-
 declare module "@stencil/core" {
-  export namespace JSX {
-    interface IntrinsicElements {
-      'pwa-action-sheet': LocalJSX.PwaActionSheet & JSXBase.HTMLAttributes<HTMLPwaActionSheetElement>;
-      'pwa-camera': LocalJSX.PwaCamera & JSXBase.HTMLAttributes<HTMLPwaCameraElement>;
-      'pwa-camera-modal': LocalJSX.PwaCameraModal & JSXBase.HTMLAttributes<HTMLPwaCameraModalElement>;
-      'pwa-camera-modal-instance': LocalJSX.PwaCameraModalInstance & JSXBase.HTMLAttributes<HTMLPwaCameraModalInstanceElement>;
-      'pwa-toast': LocalJSX.PwaToast & JSXBase.HTMLAttributes<HTMLPwaToastElement>;
+    export namespace JSX {
+        interface IntrinsicElements {
+            "pwa-action-sheet": LocalJSX.PwaActionSheet & JSXBase.HTMLAttributes<HTMLPwaActionSheetElement>;
+            "pwa-camera": LocalJSX.PwaCamera & JSXBase.HTMLAttributes<HTMLPwaCameraElement>;
+            "pwa-camera-modal": LocalJSX.PwaCameraModal & JSXBase.HTMLAttributes<HTMLPwaCameraModalElement>;
+            "pwa-camera-modal-instance": LocalJSX.PwaCameraModalInstance & JSXBase.HTMLAttributes<HTMLPwaCameraModalInstanceElement>;
+            "pwa-toast": LocalJSX.PwaToast & JSXBase.HTMLAttributes<HTMLPwaToastElement>;
+        }
     }
-  }
 }
-
-

src/components/action-sheet/action-sheet.css

@@ -10,7 +10,8 @@
 
   user-select: none;
 
-  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto",
+    sans-serif;
 }
 
 .wrapper {
@@ -19,7 +20,7 @@
   align-items: center;
   justify-content: center;
   background-color: rgba(0, 0, 0, 0);
-  transition: 400ms background-color cubic-bezier(.36,.66,.04,1);
+  transition: 400ms background-color cubic-bezier(0.36, 0.66, 0.04, 1);
 }
 
 .wrapper.open {
@@ -41,8 +42,8 @@
 .content {
   width: 568px;
   align-self: flex-end;
-  background-color:#fff;
-  transition: 400ms transform cubic-bezier(.36,.66,.04,1);
+  background-color: #fff;
+  transition: 400ms transform cubic-bezier(0.36, 0.66, 0.04, 1);
   transform: translateY(100%);
 }
 
@@ -73,7 +74,5 @@
 }
 
 .action-sheet-button:hover {
-  background-color: #F6F6F6;
+  background-color: #f6f6f6;
 }
-
-

src/components/action-sheet/action-sheet.tsx

@@ -1,12 +1,19 @@
-import { h, Component, Prop, Element, Event, EventEmitter, State } from '@stencil/core';
-import { ActionSheetOption } from '../../definitions';
+import {
+  h,
+  Component,
+  Prop,
+  Element,
+  Event,
+  EventEmitter,
+  State,
+} from "@stencil/core";
+import { ActionSheetOption } from "../../definitions";
 
 @Component({
-  tag: 'pwa-action-sheet',
-  styleUrl: 'action-sheet.css',
-  shadow: true
+  tag: "pwa-action-sheet",
+  styleUrl: "action-sheet.css",
+  shadow: true,
 })
-
 export class PWAActionSheet {
   @Element() el: HTMLElement;
 
@@ -47,16 +54,20 @@ export class PWAActionSheet {
 
   render() {
     return (
-      <div class={`wrapper${this.open ? ' open' : ''}`} onClick={() => this.dismiss()}>
+      <div
+        class={`wrapper${this.open ? " open" : ""}`}
+        onClick={() => this.dismiss()}
+      >
         <div class="content">
           <div class="title">{this.header}</div>
-          {
-            this.options.map((option, i) => 
-              <div class="action-sheet-option" onClick={(e) => this.handleOptionClick(e, i)}>
-                <div class="action-sheet-button">{option.title}</div>
-              </div>
-            )
-          }
+          {this.options.map((option, i) => (
+            <div
+              class="action-sheet-option"
+              onClick={(e) => this.handleOptionClick(e, i)}
+            >
+              <div class="action-sheet-button">{option.title}</div>
+            </div>
+          ))}
         </div>
       </div>
     );