build(package.json): update @stencil/core

BREAKING CHANGE: **lime-elements** has been updated to use
Stencil One. This makes it incompatible with any components
built with older versions of Stencil. To upgrade to this
version of **lime-elements**, also upgrade your own code to
use Stencil One (v1.0.0 or later).

package.json

@@ -4,7 +4,10 @@
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "UNLICENSED",
-  "module": "dist/esm/index.js",
+  "module": "dist/index.mjs",
+  "es2015": "dist/esm/index.mjs",
+  "es2017": "dist/esm/index.mjs",
+  "jsnext:main": "dist/esm/index.mjs",
   "main": "dist/index.js",
   "types": "dist/types/interface.d.ts",
   "collection": "dist/collection/collection-manifest.json",
@@ -37,32 +40,28 @@
     "release": "npm run build && semantic-release",
     "start": "concurrently \"npm run dev:watch\" \"docz dev\"",
     "start:es5": "npm run dev:es5 && concurrently \"npm run dev:es5:watch\" \"docz dev\"",
-    "test": "cross-env-shell SASS_PATH=node_modules \"stencil test --spec --e2e\"",
-    "test:e2e": "cross-env-shell SASS_PATH=node_modules \"stencil test --e2e\"",
-    "test:e2e:watch": "cross-env-shell SASS_PATH=node_modules \"stencil test --e2e --watch\"",
-    "test:specs": "stencil test --spec",
-    "test:specs:watch": "stencil test --spec --watch"
+    "test": "cross-env-shell SASS_PATH=node_modules \"stencil test --e2e\"",
+    "test:watch": "cross-env-shell SASS_PATH=node_modules \"stencil test --e2e --watch\""
   },
   "dependencies": {
     "awesome-debounce-promise": "^2.1.0",
     "chart.js": "^2.8.0",
     "flatpickr": "4.5.5-lime2",
     "jsx-dom": "^6.3.1",
     "lime-material-components-web-16px": "1.1.1-chrome.ripple.fix.2",
-    "moment": "^2.24.0",
-    "static-server": "^2.2.1"
+    "moment": "^2.24.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^7.6.1",
     "@commitlint/config-conventional": "^7.6.0",
     "@semantic-release/changelog": "^3.0.2",
     "@semantic-release/exec": "^3.3.2",
     "@semantic-release/git": "^7.0.8",
-    "@stencil/core": "^0.18.1",
-    "@stencil/sass": "^0.2.1",
+    "@stencil/core": "^1.0.2",
+    "@stencil/sass": "^0.2.3",
     "@types/chart.js": "^2.7.52",
-    "@types/jest": "^23.3.14",
-    "@types/puppeteer": "1.11.2",
+    "@types/jest": "24.0.13",
+    "@types/puppeteer": "1.12.4",
     "commitizen": "^3.1.1",
     "concurrently": "^4.1.0",
     "cross-env": "^5.2.0",
@@ -71,19 +70,20 @@
     "eslint": "^5.16.0",
     "eslint-config-prettier": "^4.3.0",
     "eslint-plugin-prettier": "^3.1.0",
-    "jest": "23.6.0",
-    "jest-cli": "23.6.0",
+    "jest": "24.8.0",
+    "jest-cli": "24.8.0",
     "lodash-es": "^4.17.11",
     "ncp": "^2.0.0",
     "pixelmatch": "4.0.2",
     "prettier": "^1.17.1",
     "prismjs": "^1.16.0",
-    "puppeteer": "1.11.0",
+    "puppeteer": "1.17.0",
     "replace-in-file": "^4.1.0",
     "semantic-release": "^15.13.12",
     "serve": "^11.0.0",
     "shelljs": "^0.8.3",
     "showdown": "^1.9.0",
+    "static-server": "^2.2.1",
     "tslint": "^5.16.0",
     "tslint-config-prettier": "^1.18.0",
     "tslint-eslint-rules": "^5.4.0",

src/components/button/button.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Prop, Watch } from '@stencil/core';
+import { Component, Element, h, Prop, Watch } from '@stencil/core';
 
 @Component({
     tag: 'limel-button',
@@ -78,6 +78,7 @@ export class Button {
     protected loadingWatcher(newValue: boolean, oldValue: boolean) {
         const button = this.limelButton.shadowRoot.querySelector('button');
         if (oldValue && !newValue) {
+            button.classList.remove('loading');
             button.classList.add('just-loaded');
             const TIMEOUT = 2000;
             setTimeout(() => {

src/components/chart/chart.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Prop } from '@stencil/core';
+import { Component, Element, h, Prop } from '@stencil/core';
 import Chart from 'chart.js';
 
 @Component({

src/components/checkbox/checkbox.template.tsx

@@ -1,4 +1,4 @@
-import { FunctionalComponent } from '@stencil/core';
+import { FunctionalComponent, h } from '@stencil/core';
 
 interface CheckboxTemplateProps {
     disabled?: boolean;

src/components/checkbox/checkbox.tsx

@@ -1,6 +1,13 @@
 import { MDCCheckbox } from '@lime-material-16px/checkbox';
 import { MDCFormField } from '@lime-material-16px/form-field';
-import { Component, Element, Event, EventEmitter, Prop } from '@stencil/core';
+import {
+    Component,
+    Element,
+    Event,
+    EventEmitter,
+    h,
+    Prop,
+} from '@stencil/core';
 import { createRandomString } from '../../util/random-string';
 import { CheckboxTemplate } from './checkbox.template';
 

src/components/chip-set/chip-set.tsx

@@ -9,6 +9,7 @@ import {
     Element,
     Event,
     EventEmitter,
+    h,
     Method,
     Prop,
     State,
@@ -114,20 +115,19 @@ export class ChipSet {
     /**
      * Used to find out whether the chip-set is in edit mode.
      *
-     * @returns {boolean} `true` if the chip-set is in edit mode, `false` otherwise.
+     * @returns {Promise<boolean>} `true` if the chip-set is in edit mode, `false` otherwise.
      */
     @Method()
-    public async getEditMode() {
+    public async getEditMode(): Promise<boolean> {
         return this.editMode;
     }
 
+    // tslint:disable-next-line:valid-jsdoc
     /**
      * Used to set focus to the chip-set input field.
-     *
-     * @returns {void}
      */
     @Method()
-    public setFocus() {
+    public async setFocus() {
         this.editMode = true;
         this.host.shadowRoot.querySelector('input').focus();
     }

src/components/collapsible-section/collapsible-section.tsx

@@ -1,4 +1,4 @@
-import { Component, Event, EventEmitter, Prop } from '@stencil/core';
+import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';
 import { dispatchResizeEvent } from '../../util/dispatch-resize-event';
 
 @Component({

src/components/config/config.tsx

@@ -1,4 +1,5 @@
 import { Component, Prop } from '@stencil/core';
+import globalConfig from '../../global/config';
 
 @Component({
     tag: 'limel-config',
@@ -8,15 +9,12 @@ export class Config {
     @Prop()
     public config: object;
 
-    @Prop({ context: 'config' })
-    public globalConfig: Config;
-
     /*
      * Copy any config settings to the global config object
      */
     public componentDidLoad() {
         Object.keys(this.config).forEach(key => {
-            this.globalConfig[key] = this.config[key];
+            globalConfig[key] = this.config[key];
         });
     }
 

src/components/date-picker/date-picker.tsx

@@ -3,12 +3,13 @@ import {
     Element,
     Event,
     EventEmitter,
+    h,
     Listen,
     Prop,
     State,
 } from '@stencil/core';
 
-import { Translations } from '../../global/translations';
+import translate from '../../global/translations';
 import { DateType, Languages } from './date.types';
 import { DatePicker as DateDatePicker } from './pickers/DatePicker';
 import { DatetimePicker } from './pickers/DatetimePicker';
@@ -78,9 +79,6 @@ export class DatePicker {
     @Prop()
     public language: Languages = 'en';
 
-    @Prop({ context: 'translations' })
-    public translate: Translations;
-
     @Element()
     private host: HTMLElement;
 
@@ -133,7 +131,7 @@ export class DatePicker {
                     this.format,
                     this.language,
                     this.change,
-                    this.translate
+                    translate
                 );
                 break;
 
@@ -142,15 +140,15 @@ export class DatePicker {
                     this.format,
                     this.language,
                     this.change,
-                    this.translate
+                    translate
                 );
                 break;
             case 'year':
                 this.picker = new YearPicker(
                     this.format,
                     this.language,
                     this.change,
-                    this.translate
+                    translate
                 );
                 break;
 
@@ -195,7 +193,7 @@ export class DatePicker {
         );
     }
 
-    @Listen('window:resize')
+    @Listen('resize', { target: 'window' })
     public resizeEvent() {
         this.picker.init(this.input, this.container, this.value);
     }

src/components/dialog/dialog.tsx

@@ -4,6 +4,7 @@ import {
     Element,
     Event,
     EventEmitter,
+    h,
     Prop,
     Watch,
 } from '@stencil/core';

src/components/file/file.tsx

@@ -1,5 +1,12 @@
 import { MDCTextField } from '@lime-material-16px/textfield';
-import { Component, Element, Event, EventEmitter, Prop } from '@stencil/core';
+import {
+    Component,
+    Element,
+    Event,
+    EventEmitter,
+    h,
+    Prop,
+} from '@stencil/core';
 import { createRandomString } from '../../util/random-string';
 import { Chip } from '../chip-set/chip.types';
 import { FileInfo } from './file.types';

src/components/flex-container/flex-container.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, h, Prop } from '@stencil/core';
 import {
     FlexContainerAlign,
     FlexContainerDirection,

src/components/grid/grid.tsx

@@ -1,4 +1,4 @@
-import { Component } from '@stencil/core';
+import { Component, h } from '@stencil/core';
 
 @Component({
     tag: 'limel-grid',

src/components/icon-button/icon-button.tsx

@@ -1,5 +1,5 @@
 import { MDCRipple } from '@lime-material-16px/ripple';
-import { Component, Element, Method, Prop } from '@stencil/core';
+import { Component, Element, h, Method, Prop } from '@stencil/core';
 
 @Component({
     tag: 'limel-icon-button',
@@ -31,16 +31,15 @@ export class IconButton {
 
     private mdcIconButtonRipple;
 
+    // tslint:disable-next-line:valid-jsdoc
     /**
      * If the button is hidden or inside another element that is animating
      * while the button is instantiated, the hover-highlight may become
      * misaligned. If so, calling this method will make the button re-layout
      * the highlight.
-     *
-     * @returns {void}
      */
     @Method()
-    public relayout() {
+    public async relayout() {
         if (this.mdcIconButtonRipple) {
             this.mdcIconButtonRipple.layout();
         }

src/components/icon/icon.tsx

@@ -1,6 +1,6 @@
-import { Component, Element, Prop, Watch } from '@stencil/core';
-import { Config } from '../../global/config';
-import { IconCache } from '../../global/icon-cache';
+import { Component, Element, h, Prop, Watch } from '@stencil/core';
+import config from '../../global/config';
+import iconCache from '../../global/icon-cache';
 import { IconSize } from './icon.types';
 
 @Component({
@@ -28,12 +28,6 @@ export class Icon {
     @Prop({ reflectToAttr: true })
     public badge: boolean;
 
-    @Prop({ context: 'config' })
-    public config: Config;
-
-    @Prop({ context: 'iconCache' })
-    public iconCache: IconCache;
-
     @Element()
     private host: HTMLElement;
 
@@ -59,7 +53,7 @@ export class Icon {
      * @returns {string} the icon SVG data
      */
     private loadSvg(name: string) {
-        return this.iconCache.get(name, this.config.iconPath);
+        return iconCache.get(name, config.iconPath);
     }
 
     /*

src/components/input-field/input-field.tsx

@@ -4,6 +4,7 @@ import {
     Element,
     Event,
     EventEmitter,
+    h,
     Prop,
     State,
 } from '@stencil/core';

src/components/linear-progress/linear-progress.tsx

@@ -1,5 +1,5 @@
 import { MDCLinearProgress } from '@lime-material-16px/linear-progress';
-import { Component, Element, Prop, Watch } from '@stencil/core';
+import { Component, Element, h, Prop, Watch } from '@stencil/core';
 
 @Component({
     tag: 'limel-linear-progress',

src/components/list/list-renderer.tsx

@@ -1,3 +1,4 @@
+import { h } from '@stencil/core';
 import { ListItem, ListSeparator } from '../../interface';
 import { CheckboxTemplate } from '../checkbox/checkbox.template';
 import { ListRendererConfig } from './list-renderer-config';

src/components/list/radio-button/radio-button.template.tsx

@@ -1,4 +1,4 @@
-import { FunctionalComponent } from '@stencil/core';
+import { FunctionalComponent, h } from '@stencil/core';
 
 interface RadioButtonTemplateProps {
     disabled?: boolean;

src/components/menu/menu.tsx

@@ -4,6 +4,7 @@ import {
     Element,
     Event,
     EventEmitter,
+    h,
     Prop,
     Watch,
 } from '@stencil/core';

src/components/picker/picker.tsx

@@ -3,6 +3,7 @@ import {
     Element,
     Event,
     EventEmitter,
+    h,
     Prop,
     State,
     Watch,

src/components/select/select.template.tsx

@@ -1,4 +1,4 @@
-import { FunctionalComponent } from '@stencil/core';
+import { FunctionalComponent, h } from '@stencil/core';
 import {
     ENTER,
     ENTER_KEY_CODE,

src/components/select/select.tsx

@@ -7,6 +7,7 @@ import {
     Element,
     Event,
     EventEmitter,
+    h,
     Prop,
     State,
     Watch,

src/components/select/test/select.test-wrapper.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, h, Prop } from '@stencil/core';
 import { Option } from '../../../interface';
 
 @Component({ tag: 'select-test-wrapper' })