@everymatrix/mini-games-lobby 1.14.0 → 1.15.0

package/dist/cjs/{index-787a0452.js → index-90b83e7e.js}

@@ -678,6 +678,11 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
     const endSchedule = createTime('scheduleUpdate', hostRef.$cmpMeta$.$tagName$);
     const instance = hostRef.$lazyInstance$ ;
     let promise;
+    if (isInitialLoad) {
+        {
+            promise = safeCall(instance, 'componentWillLoad');
+        }
+    }
     endSchedule();
     return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
@@ -849,6 +854,7 @@ const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propNam
 const setValue = (ref, propName, newVal, cmpMeta) => {
     // check our new property value against our internal value
     const hostRef = getHostRef(ref);
+    const elm = hostRef.$hostElement$ ;
     const oldVal = hostRef.$instanceValues$.get(propName);
     const flags = hostRef.$flags$;
     const instance = hostRef.$lazyInstance$ ;
@@ -861,7 +867,28 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
         // set our new value!
         hostRef.$instanceValues$.set(propName, newVal);
         if (instance) {
+            // get an array of method names of watch functions to call
+            if (cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
+                const watchMethods = cmpMeta.$watchers$[propName];
+                if (watchMethods) {
+                    // this instance is watching for when this property changed
+                    watchMethods.map((watchMethodName) => {
+                        try {
+                            // fire off each of the watch methods that are watching this property
+                            instance[watchMethodName](newVal, oldVal, propName);
+                        }
+                        catch (e) {
+                            consoleError(e, elm);
+                        }
+                    });
+                }
+            }
             if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+                if (instance.componentShouldUpdate) {
+                    if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
+                        return;
+                    }
+                }
                 // looks like this value actually changed, so we've got work to do!
                 // but only if we've already rendered, otherwise just chill out
                 // queue that we need to do an update, but don't worry about queuing
@@ -873,6 +900,9 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 };
 const proxyComponent = (Cstr, cmpMeta, flags) => {
     if (cmpMeta.$members$) {
+        if (Cstr.watchers) {
+            cmpMeta.$watchers$ = Cstr.watchers;
+        }
         // It's better to have a const than two Object.entries()
         const members = Object.entries(cmpMeta.$members$);
         const prototype = Cstr.prototype;
@@ -977,6 +1007,12 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
                 endLoad();
             }
             if (!Cstr.isProxied) {
+                // we've never proxied this Constructor before
+                // let's add the getters/setters to its prototype before
+                // the first time we create an instance of the implementation
+                {
+                    cmpMeta.$watchers$ = Cstr.watchers;
+                }
                 proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
                 Cstr.isProxied = true;
             }
@@ -1000,6 +1036,9 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
             {
                 hostRef.$flags$ &= ~8 /* isConstructingInstance */;
             }
+            {
+                hostRef.$flags$ |= 128 /* isWatchReady */;
+            }
             endNewInstance();
         }
         if (Cstr.style) {
@@ -1099,6 +1138,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             {
                 cmpMeta.$members$ = compactMeta[2];
             }
+            {
+                cmpMeta.$watchers$ = {};
+            }
             const tagName = cmpMeta.$tagName$;
             const HostElement = class extends HTMLElement {
                 // StencilLazyHost

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-787a0452.js');
+const index = require('./index-90b83e7e.js');
 
 /*
  Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["mini-games-lobby.cjs",[[1,"mini-games-lobby",{"session":[1],"endpoint":[1],"language":[1],"launchUrl":[32],"games":[32]}]]]], options);
+  return index.bootstrapLazy([["mini-games-lobby.cjs",[[1,"mini-games-lobby",{"filter":[1],"session":[1],"endpoint":[1],"language":[1],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"locale":[32],"launchUrl":[32],"games":[32]}]]]], options);
   });
 };
 

package/dist/cjs/mini-games-lobby.cjs.entry.js

@@ -2,7 +2,38 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-787a0452.js');
+const index = require('./index-90b83e7e.js');
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __metadata(metadataKey, metadataValue) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 const fetcher = async (url) => {
   let res;
@@ -18,14 +49,14 @@ const fetcher = async (url) => {
 const getUrl = (path, params = {}) => {
   return path + '?' + Object.keys(params).map(key => `${key}=${params[key]}`).join('&');
 };
-const fetchGames = async (endpoint, language) => {
-  const url = getUrl(`${endpoint}/casino/games`, {
-    language,
-    filter: 'categories(id=MINIGAMES)',
+async function fetchGames() {
+  const url = getUrl(`${this.endpoint}/casino/games`, {
+    language: this.language,
+    filter: this.filter || `categories(id=MINIGAMES),vendor(name=PragmaticPlay)`,
   });
   const res = await fetcher(url);
   return res.items;
-};
+}
 
 const crossIconSvg = 'data:image/svg+xml;base64,ICA8c3ZnIGNsYXNzPSJpY29uIHN2Zy13aXRoLXN0cm9rZSBudWxsIiB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTAuMyAxMC4zIgogICAgdmVyc2lvbj0iMS4xIgogICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogID4KICAgIDxnIGNsYXNzPSJzdmdfX2ZpbGwiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSIjMjIyMjIyIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICA8cGF0aCBkPSJNMTAsMC40TDAuNCwxMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPgogICAgICA8cGF0aCBkPSJNMTAsMTBMMC40LDAuNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPgogICAgPC9nPgogIDwvc3ZnPg==';
 
@@ -61,35 +92,204 @@ const Games = ({ text, games, onClickGame }) => (index.h("div", { class: "GamesC
   index.h("div", { id: "Games" }, games.map((game) => index.h("div", { class: "Game" },
     index.h("div", Object.assign({ class: "GameImg" }, getProps(game, onClickGame))))))));
 
+const apply = (proto, lifecycle, run) => {
+  const existLifeCycle = proto[lifecycle];
+  if (!existLifeCycle) {
+    throw new Error('lifecycle ' + lifecycle + ' not defined');
+  }
+  proto[lifecycle] = function (...args) {
+    run.bind(this, ...args).call();
+    if (existLifeCycle) {
+      return existLifeCycle.bind(this, ...args).call();
+    }
+  };
+};
+
+const translation = {
+  en: {
+    MiniGames: 'Mini Games',
+  },
+  'zh-hk': {
+    MiniGames: '小游戲',
+  }
+};
+
+const getLocale = (_translations, language) => {
+  return _translations[language] || _translations['en'];
+};
+function setLocale() {
+  this.locale = getLocale(this.translation, this.language);
+}
+async function setLocaleByUrl(isInit = true) {
+  if (this.translationUrl) {
+    this.translation = await fetcher(this.translationUrl);
+    setLocale.bind(this).call();
+  }
+  else {
+    if (!isInit) {
+      this.translation = translation;
+      setLocale.bind(this).call();
+    }
+  }
+}
+const Locale = () => {
+  // @ts-ignore
+  return (proto, prop) => {
+    apply(proto, 'componentWillLoad', async function () {
+      this.translation = translation;
+      setLocale.bind(this).call();
+      setLocaleByUrl.bind(this, true).call();
+    });
+    // @ts-ignore
+    apply(proto, 'componentShouldUpdate', async function (newValue, oldValue, key) {
+      if (key === 'language') {
+        setLocale.bind(this).call();
+      }
+      if (key === 'translationUrl') {
+        setLocaleByUrl.bind(this, false).call();
+      }
+    });
+  };
+};
+
+const fetchText = async (url) => {
+  let styleCode;
+  try {
+    let res = await fetch(url);
+    styleCode = await res.text();
+  }
+  catch (err) {
+    console.error('error ', err);
+  }
+  return styleCode;
+};
+const setStyle = (container, index, styleCode) => {
+  const sheet = new CSSStyleSheet();
+  styleCode && sheet.insertRule(styleCode);
+  try {
+    container.adoptedStyleSheets[index] = sheet;
+  }
+  catch (err) { }
+};
+const getCode = async (url) => {
+  let styleCode;
+  if (url) {
+    styleCode = await fetchText(url);
+  }
+  return styleCode;
+};
+const setClientStyling = (root, styleCode) => {
+  if (!root)
+    return;
+  setStyle(root, 1, styleCode);
+};
+const setClientStylingUrl = async (root, url) => {
+  if (!root)
+    return;
+  setStyle(root, 2, await getCode(url));
+};
+
+const matchStyleProcess = (root, value, key) => {
+  switch (key) {
+    case 'clientStyling':
+      setClientStyling(root, value);
+      break;
+    case 'clientStylingUrl':
+      setClientStylingUrl(root, value);
+      break;
+  }
+};
+const Style = () => {
+  return (proto, prop) => {
+    apply(proto, 'componentDidLoad', function () {
+      const root = index.getElement(this).shadowRoot;
+      matchStyleProcess(root, this[prop], prop);
+    });
+    // @ts-ignore
+    apply(proto, 'componentShouldUpdate', function (newValue, oldValue, key) {
+      if (key !== prop)
+        return;
+      const root = index.getElement(this).shadowRoot;
+      matchStyleProcess(root, this[prop], prop);
+    });
+  };
+};
+
 const miniGamesLobbyCss = ":host{display:block}*{box-sizing:border-box}#LobbyContainer{display:flex;flex-direction:column;flex-grow:1;position:relative}#GameLaunchHeader{align-items:center;display:flex;background:var(--mini-games-header-bg, var(--base-bg, #fff));height:40px;justify-content:space-between;padding:0 15px}#GameLaunchHeader button{border:none;color:inherit;cursor:pointer;outline:0}#GameLaunchHeader .GameIcon--full-screen{margin:0 10px 0 auto}#GameLaunchHeader .GameIcon{background:var(--mini-game-icon-bg, transparent);padding:0}#GamesHeader{align-items:center;display:flex;background:var(--mini-games-header-bg, var(--base-bg, #fff));height:40px;justify-content:space-between;padding:0 15px;color:var(--mini-games-header-color, var(--text, #000))}#GamesHeader button{border:none;color:inherit;cursor:pointer;outline:0}#GamesHeader>div{align-items:center;display:flex}#GamesHeader p{font-weight:600;margin:0 5px}@media (min-width: 340px){#Games{gap:15px;justify-content:center}}#Games{display:inline-flex;flex-wrap:wrap;justify-content:space-between;gap:4px;padding:15px 15px 54px}.Game{width:68px;height:68px;border-radius:50%;box-shadow:0 4px 12px 0 rgba(13, 19, 29, 0.3);cursor:pointer}.GameImg{width:68px;height:68px;background-position:center center;background-size:cover;transition:0.3s}.GameImg:hover{transform:scale(1.5)}";
 
 const MiniGamesLobby = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * Language of the widget
+     */
+    this.language = 'en';
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+     * translation via url
+     */
+    this.translationUrl = '';
     this.launchUrl = undefined;
     this.games = [];
   }
-  async componentDidLoad() {
-    this.games = await fetchGames(this.endpoint, this.language);
-  }
-  onClickGame(launchUrl_raw) {
-    this.launchUrl = getUrl(launchUrl_raw, {
-      language: this.language,
-      _sid: this.session,
-    });
-  }
   render() {
     return (index.h("div", { id: "LobbyContainer" }, index.h(GameLauncher, Object.assign({}, {
       src: this.launchUrl,
       host: this.host
     })), index.h(Games, Object.assign({}, {
-      text: 'Mini Games',
+      text: this.locale.MiniGames,
       games: this.games,
       onClickGame: this.onClickGame.bind(this)
     }))));
   }
+  async updateGames() {
+    this.games = await fetchGames.bind(this).call();
+  }
+  onClickGame(launchUrl_raw) {
+    this.launchUrl = getUrl(launchUrl_raw, {
+      language: this.language,
+      _sid: this.session,
+    });
+  }
+  /**
+   * define for @Style Decorator
+   */
+  async componentDidLoad() {
+    this.updateGames();
+  }
+  /**
+   * define for @Locale and @Style
+   */
+  componentShouldUpdate() { }
+  /**
+   * define for @Locale
+   */
+  componentWillLoad() { }
   get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "endpoint": ["updateGames"],
+    "language": ["updateGames"]
+  }; }
 };
+__decorate([
+  Locale(),
+  __metadata("design:type", String)
+], MiniGamesLobby.prototype, "language", void 0);
+__decorate([
+  Style(),
+  __metadata("design:type", String)
+], MiniGamesLobby.prototype, "clientStyling", void 0);
+__decorate([
+  Style(),
+  __metadata("design:type", String)
+], MiniGamesLobby.prototype, "clientStylingUrl", void 0);
 MiniGamesLobby.style = miniGamesLobbyCss;
 
 exports.mini_games_lobby = MiniGamesLobby;

package/dist/cjs/mini-games-lobby.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-787a0452.js');
+const index = require('./index-90b83e7e.js');
 
 /*
  Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["mini-games-lobby.cjs",[[1,"mini-games-lobby",{"session":[1],"endpoint":[1],"language":[1],"launchUrl":[32],"games":[32]}]]]], options);
+  return index.bootstrapLazy([["mini-games-lobby.cjs",[[1,"mini-games-lobby",{"filter":[1],"session":[1],"endpoint":[1],"language":[1],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"locale":[32],"launchUrl":[32],"games":[32]}]]]], options);
 });

package/dist/collection/components/mini-games-lobby/mini-games-lobby.js

@@ -1,20 +1,30 @@
-import { Component, Element, Prop, State, h } from '@stencil/core';
+import { __decorate, __metadata } from "tslib";
+import { Component, Element, Prop, State, Watch, h } from '@stencil/core';
 import { fetchGames, getUrl } from '../../utils/fetch';
 import { Games, GameLauncher } from '../../renders';
+import { Locale } from '../../decorators/locale.decorator';
+import { Style } from '../../decorators/style.decorator';
 export class MiniGamesLobby {
   constructor() {
+    /**
+     * Language of the widget
+     */
+    this.language = 'en';
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+     * translation via url
+     */
+    this.translationUrl = '';
     this.launchUrl = undefined;
     this.games = [];
   }
-  async componentDidLoad() {
-    this.games = await fetchGames(this.endpoint, this.language);
-  }
-  onClickGame(launchUrl_raw) {
-    this.launchUrl = getUrl(launchUrl_raw, {
-      language: this.language,
-      _sid: this.session,
-    });
-  }
   render() {
     return (h("div", { id: "LobbyContainer" },
       h(GameLauncher, Object.assign({}, {
@@ -22,11 +32,34 @@ export class MiniGamesLobby {
         host: this.host
       })),
       h(Games, Object.assign({}, {
-        text: 'Mini Games',
+        text: this.locale.MiniGames,
         games: this.games,
         onClickGame: this.onClickGame.bind(this)
       }))));
   }
+  async updateGames() {
+    this.games = await fetchGames.bind(this).call();
+  }
+  onClickGame(launchUrl_raw) {
+    this.launchUrl = getUrl(launchUrl_raw, {
+      language: this.language,
+      _sid: this.session,
+    });
+  }
+  /**
+   * define for @Style Decorator
+   */
+  async componentDidLoad() {
+    this.updateGames();
+  }
+  /**
+   * define for @Locale and @Style
+   */
+  componentShouldUpdate() { }
+  /**
+   * define for @Locale
+   */
+  componentWillLoad() { }
   static get is() { return "mini-games-lobby"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -36,6 +69,23 @@ export class MiniGamesLobby {
     "$": ["mini-games-lobby.css"]
   }; }
   static get properties() { return {
+    "filter": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "filter for interface /casino/games"
+      },
+      "attribute": "filter",
+      "reflect": false
+    },
     "session": {
       "type": "string",
       "mutable": false,
@@ -85,12 +135,87 @@ export class MiniGamesLobby {
         "text": "Language of the widget"
       },
       "attribute": "language",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "'en'"
+    },
+    "clientStyling": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via string"
+      },
+      "attribute": "client-styling",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "clientStylingUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via url"
+      },
+      "attribute": "client-styling-url",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "translationUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "translation via url"
+      },
+      "attribute": "translation-url",
+      "reflect": false,
+      "defaultValue": "''"
     }
   }; }
   static get states() { return {
+    "locale": {},
     "launchUrl": {},
     "games": {}
   }; }
   static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "endpoint",
+      "methodName": "updateGames"
+    }, {
+      "propName": "language",
+      "methodName": "updateGames"
+    }]; }
 }
+__decorate([
+  Locale(),
+  __metadata("design:type", String)
+], MiniGamesLobby.prototype, "language", void 0);
+__decorate([
+  Style(),
+  __metadata("design:type", String)
+], MiniGamesLobby.prototype, "clientStyling", void 0);
+__decorate([
+  Style(),
+  __metadata("design:type", String)
+], MiniGamesLobby.prototype, "clientStylingUrl", void 0);

package/dist/collection/decorators/base.decorator.js

@@ -0,0 +1,12 @@
+export const apply = (proto, lifecycle, run) => {
+  const existLifeCycle = proto[lifecycle];
+  if (!existLifeCycle) {
+    throw new Error('lifecycle ' + lifecycle + ' not defined');
+  }
+  proto[lifecycle] = function (...args) {
+    run.bind(this, ...args).call();
+    if (existLifeCycle) {
+      return existLifeCycle.bind(this, ...args).call();
+    }
+  };
+};

package/dist/collection/decorators/locale.decorator.js

@@ -0,0 +1,40 @@
+import { apply } from "./base.decorator";
+import { translation } from "../utils/translation";
+import { fetcher } from "../utils/fetch";
+const getLocale = (_translations, language) => {
+  return _translations[language] || _translations['en'];
+};
+function setLocale() {
+  this.locale = getLocale(this.translation, this.language);
+}
+async function setLocaleByUrl(isInit = true) {
+  if (this.translationUrl) {
+    this.translation = await fetcher(this.translationUrl);
+    setLocale.bind(this).call();
+  }
+  else {
+    if (!isInit) {
+      this.translation = translation;
+      setLocale.bind(this).call();
+    }
+  }
+}
+export const Locale = () => {
+  // @ts-ignore
+  return (proto, prop) => {
+    apply(proto, 'componentWillLoad', async function () {
+      this.translation = translation;
+      setLocale.bind(this).call();
+      setLocaleByUrl.bind(this, true).call();
+    });
+    // @ts-ignore
+    apply(proto, 'componentShouldUpdate', async function (newValue, oldValue, key) {
+      if (key === 'language') {
+        setLocale.bind(this).call();
+      }
+      if (key === 'translationUrl') {
+        setLocaleByUrl.bind(this, false).call();
+      }
+    });
+  };
+};

package/dist/collection/decorators/style.decorator.js

@@ -0,0 +1,28 @@
+import { getElement } from "@stencil/core";
+import { apply } from "./base.decorator";
+import { setClientStyling, setClientStylingUrl } from "./style.util";
+const matchStyleProcess = (root, value, key) => {
+  switch (key) {
+    case 'clientStyling':
+      setClientStyling(root, value);
+      break;
+    case 'clientStylingUrl':
+      setClientStylingUrl(root, value);
+      break;
+  }
+};
+export const Style = () => {
+  return (proto, prop) => {
+    apply(proto, 'componentDidLoad', function () {
+      const root = getElement(this).shadowRoot;
+      matchStyleProcess(root, this[prop], prop);
+    });
+    // @ts-ignore
+    apply(proto, 'componentShouldUpdate', function (newValue, oldValue, key) {
+      if (key !== prop)
+        return;
+      const root = getElement(this).shadowRoot;
+      matchStyleProcess(root, this[prop], prop);
+    });
+  };
+};