@furystack/shades-common-components 1.8.0 → 2.0.0

package/dist/components/suggest/suggestion-list.js

@@ -8,54 +8,49 @@ exports.SuggestionList = (0, shades_1.Shade)({
     getInitialState: ({ props }) => ({
         suggestions: props.manager.currentSuggestions.getValue().map((v) => v.suggestion),
     }),
-    constructed: ({ updateState, element, props }) => {
-        const { manager } = props;
-        const subscriptions = [
-            manager.currentSuggestions.subscribe((s) => {
-                updateState({ suggestions: s.map((ss) => ss.suggestion) });
-            }),
-            manager.isOpened.subscribe(async (isOpened) => {
-                var _a;
-                const container = element.firstElementChild;
-                if (isOpened) {
-                    container.style.zIndex = '1';
-                    container.style.width = `calc(${Math.round(((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 200)}px - 3em)`;
-                    await (0, promisify_animation_1.promisifyAnimation)(container, [
-                        { opacity: 0, transform: 'translate(0, -50px)' },
-                        { opacity: 1, transform: 'translate(0, 0)' },
-                    ], { fill: 'forwards', duration: 500 });
+    resources: ({ updateState, element, props }) => [
+        props.manager.currentSuggestions.subscribe((s) => {
+            updateState({ suggestions: s.map((ss) => ss.suggestion) });
+        }),
+        props.manager.isOpened.subscribe(async (isOpened) => {
+            var _a;
+            const container = element.firstElementChild;
+            if (isOpened) {
+                container.style.zIndex = '1';
+                container.style.width = `calc(${Math.round(((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 200)}px - 3em)`;
+                await (0, promisify_animation_1.promisifyAnimation)(container, [
+                    { opacity: 0, transform: 'translate(0, -50px)' },
+                    { opacity: 1, transform: 'translate(0, 0)' },
+                ], { fill: 'forwards', duration: 500 });
+            }
+            else {
+                await (0, promisify_animation_1.promisifyAnimation)(container, [
+                    { opacity: 1, transform: 'translate(0, 0)' },
+                    { opacity: 0, transform: 'translate(0, -50px)' },
+                ], { fill: 'forwards', duration: 200 });
+                container.style.zIndex = '-1';
+            }
+        }, true),
+        props.manager.selectedIndex.subscribe((idx) => {
+            ;
+            [...element.querySelectorAll('.suggestion-item')].map((s, i) => {
+                if (i === idx) {
+                    ;
+                    s.style.background = 'rgba(128,128,128,0.2)';
                 }
                 else {
-                    await (0, promisify_animation_1.promisifyAnimation)(container, [
-                        { opacity: 1, transform: 'translate(0, 0)' },
-                        { opacity: 0, transform: 'translate(0, -50px)' },
-                    ], { fill: 'forwards', duration: 200 });
-                    container.style.zIndex = '-1';
+                    ;
+                    s.style.background = 'rgba(96,96,96,0.2)';
                 }
-            }),
-            manager.selectedIndex.subscribe((idx) => {
-                ;
-                [...element.querySelectorAll('.suggestion-item')].map((s, i) => {
-                    if (i === idx) {
-                        ;
-                        s.style.background = 'rgba(128,128,128,0.2)';
-                    }
-                    else {
-                        ;
-                        s.style.background = 'rgba(96,96,96,0.2)';
-                    }
-                });
-            }),
-        ];
-        return () => subscriptions.map((s) => s.dispose());
-    },
+            });
+        }),
+    ],
     render: ({ element, getState, props }) => {
         var _a;
         const { manager } = props;
         return ((0, shades_1.createComponent)("div", { className: "suggestion-items-container", style: {
                 borderTop: 'none',
                 position: 'absolute',
-                opacity: manager.isOpened.getValue() ? '1' : '0',
                 borderRadius: '0px 0px 5px 5px',
                 marginLeft: '14px',
                 overflow: 'hidden',

package/dist/components/suggest/suggestion-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"suggestion-list.js","sourceRoot":"","sources":["../../../src/components/suggest/suggestion-list.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"suggestion-list.js","sourceRoot":"","sources":["../../../src/components/suggest/suggestion-list.tsx"],"names":[],"mappings":"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"}

package/dist/components/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,GAAG;IAClB,MAAM,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,SAAS,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB;AAED,eAAO,MAAM,IAAI;UAEP,GAAG,EAAE;;;;uBAIO,MAAM,KAAK,IAAI;+EA0EnC,CAAA"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,GAAG;IAClB,MAAM,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,SAAS,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB;AAED,eAAO,MAAM,IAAI;UAEP,GAAG,EAAE;;;;uBAIO,MAAM,KAAK,IAAI;+EA6EnC,CAAA"}

package/dist/components/tabs.js

@@ -9,9 +9,10 @@ exports.Tabs = (0, shades_1.Shade)({
     getInitialState: ({ props }) => ({ activeIndex: props.activeTab || 0 }),
     constructed: ({ injector, updateState, element }) => {
         const subscriptions = [
-            injector.getInstance(shades_1.LocationService).onLocationChanged.subscribe((loc) => {
-                if (loc.hash && loc.hash.startsWith('#tab-')) {
-                    const page = parseInt(loc.hash.replace('#tab-', ''), 10);
+            injector.getInstance(shades_1.LocationService).onLocationChanged.subscribe(() => {
+                const { hash } = location;
+                if (hash && hash.startsWith('#tab-')) {
+                    const page = parseInt(hash.replace('#tab-', ''), 10);
                     page && updateState({ activeIndex: page });
                 }
             }, true),

package/dist/components/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":";;;AAAA,8CAA2E;AAC3E,0CAAkD;AAClD,sEAAiE;AAOpD,QAAA,IAAI,GAAG,IAAA,cAAK,EASvB;IACA,aAAa,EAAE,YAAY;IAC3B,eAAe,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,CAAC,SAAS,IAAI,CAAC,EAAE,CAAC;IACvE,WAAW,EAAE,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE;QAClD,MAAM,aAAa,GAAG;YACpB,QAAQ,CAAC,WAAW,CAAC,wBAAe,CAAC,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE;gBACxE,IAAI,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;oBAC5C,MAAM,IAAI,GAAG,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAA;oBACxD,IAAI,IAAI,WAAW,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAA;iBAC3C;YACH,CAAC,EAAE,IAAI,CAAC;YACR,QAAQ,CAAC,WAAW,CAAC,+BAAoB,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE;gBAC/D,MAAM,OAAO,GAAG,OAAO,CAAC,gBAAgB,CAAC,qBAAqB,CAAgC,CAAA;gBAC9F,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;oBACzB,MAAM,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;oBACpD,MAAM,CAAC,KAAK,CAAC,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAA;oBACnF,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAA;gBACnE,CAAC,CAAC,CAAA;YACJ,CAAC,CAAC;SACH,CAAA;QACD,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAA;IACxD,CAAC;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,EAAE;QACrD,MAAM,aAAa,GAAG,QAAQ,CAAC,WAAW,CAAC,+BAAoB,CAAC,CAAA;QAChE,MAAM,KAAK,GAAG,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAA;QAC5C,OAAO,CACL,uCAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC,cAAc,EAAE;YAC9G,uCACE,SAAS,EAAC,6BAA6B,EACvC,KAAK,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,IAClG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;gBAC7B,MAAM,QAAQ,GAAG,KAAK,KAAK,QAAQ,EAAE,CAAC,WAAW,CAAA;gBACjD,MAAM,UAAU,GAAG,CACjB,uCACE,SAAS,EAAE,qBAAqB,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EAC1D,KAAK,EAAE;wBACL,OAAO,EAAE,WAAW;wBACpB,MAAM,EAAE,SAAS;wBACjB,UAAU,EAAE,sBAAsB;wBAClC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;wBAC3C,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO;wBACxE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS;qBAC5D,EACD,OAAO,EAAE,GAAG,EAAE;wBACZ,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;wBACvC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,EAAE,QAAQ,KAAK,EAAE,CAAC,CAAA;wBACjD,WAAW,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,CAAA;oBACrC,CAAC,IACA,GAAG,CAAC,MAAM,CACP,CACP,CAAA;gBAED,IAAI,QAAQ,EAAE;oBACZ,UAAU,CAAC,GAAG,EAAE,CACd,IAAA,wCAAkB,EAChB,UAAU,EACV,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE,SAAS,EAAE,sCAAsC,EAAE,CAAC,EAC9E,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,0CAA0C,EAAE,CACxF,CACF,CAAA;iBACF;gBAED,OAAO,UAAU,CAAA;YACnB,CAAC,CAAC,CACE;YACN,uCAAK,SAAS,EAAC,2BAA2B,EAAC,KAAK,EAAE,KAAK,CAAC,KAAK,IAC1D,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,WAAW,CAAC,CAAC,SAAS,CACzC,CACF,CACP,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@furystack/shades-common-components",
-  "version": "1.8.0",
+  "version": "2.0.0",
   "description": "",
   "scripts": {
     "build": "tsc --b",
@@ -13,13 +13,13 @@
   "author": "gallay.lajos@gmail.com",
   "license": "GPL-2.0",
   "devDependencies": {
-    "typescript": "^4.4.4"
+    "typescript": "^4.5.2"
   },
   "dependencies": {
-    "@furystack/shades": "^3.7.0",
+    "@furystack/shades": "^4.0.0",
     "uuid": "^8.3.2"
   },
   "typings": "dist/index.d.ts",
   "main": "dist/index.js",
-  "gitHead": "2d69dcda432556ac8e2481f1d3a0cbf4bc9e40bd"
+  "gitHead": "8a1860a227691def1a94e8de5e95a7c5067356cc"
 }

package/src/components/app-bar.tsx

@@ -3,26 +3,24 @@ import { ThemeProviderService } from '../services/theme-provider-service'
 
 export const AppBar = Shade({
   shadowDomName: 'shade-app-bar',
-  constructed: ({ element, injector }) => {
+  resources: ({ element, injector }) => [
+    injector.getInstance(ThemeProviderService).theme.subscribe((t) => {
+      ;(element.children[0] as HTMLElement).style.color = t.text.secondary
+    }, true), // TODO: Check TRUE
+  ],
+  constructed: ({ element }) => {
     const container = element.children[0] as HTMLElement
     requestAnimationFrame(() => {
       container.style.padding = '8px 8px'
       container.style.opacity = '1'
     })
-    const themeChanged = injector.getInstance(ThemeProviderService).theme.subscribe((t) => {
-      container.style.color = t.text.secondary
-    })
-    return () => themeChanged.dispose()
   },
-  render: ({ children, injector }) => {
-    const themeProvider = injector.getInstance(ThemeProviderService)
-
+  render: ({ children }) => {
     return (
       <div
         style={{
           width: '100%',
           background: 'rgba(128,128,128,0.2)',
-          color: themeProvider.theme.getValue().text.secondary,
           backdropFilter: 'blur(15px)',
           display: 'flex',
           justifyContent: 'flex-start',
@@ -34,7 +32,8 @@ export const AppBar = Shade({
           opacity: '0',
           position: 'fixed',
           zIndex: '1',
-        }}>
+        }}
+      >
         {children}
       </div>
     )

package/src/components/avatar.tsx

@@ -17,7 +17,8 @@ export const Avatar = Shade<AvatarProps>({
           boxShadow: '0px 0px 8px 3px rgba(128,128,128,0.2)',
           backgroundColor: 'rgba(128,128,128,0.3)',
           ...(props.style || {}),
-        }}>
+        }}
+      >
         <img
           style={{ width: '100%', height: '100%' }}
           alt={'avatar image'}

package/src/components/button.tsx

@@ -111,7 +111,6 @@ export const Button = Shade<ButtonProps, { theme: Theme }>({
     const hoveredTextColor = getHoveredTextColor(props, theme, () =>
       injector.getInstance(ThemeProviderService).getTextColor(background),
     )
-
     return (
       <button
         onmousedown={function (ev) {
@@ -178,7 +177,8 @@ export const Button = Shade<ButtonProps, { theme: Theme }>({
           filter: 'drop-shadow(1px 1px 10px rgba(0,0,0,.5))',
           backdropFilter: props.variant === 'outlined' ? 'blur(35px)' : undefined,
           ...props.style,
-        }}>
+        }}
+      >
         {children}
       </button>
     )

package/src/components/command-palette/command-palette-suggestion-list.tsx

@@ -79,7 +79,8 @@ export const CommandPaletteSuggestionList = Shade<
           boxShadow: '3px 3px 5px rgba(0,0,0,0.3)',
           width: `calc(${Math.round(element.parentElement?.getBoundingClientRect().width || 200)}px - 3em)`,
           ...(props.fullScreenSuggestions ? { left: '0', width: 'calc(100% - 42px)' } : {}),
-        }}>
+        }}
+      >
         {getState().suggestions.map((s, i) => (
           <div
             className="suggestion-item"
@@ -90,7 +91,8 @@ export const CommandPaletteSuggestionList = Shade<
               padding: '1em',
               cursor: 'default',
               background: i === manager.selectedIndex.getValue() ? 'rgba(128,128,128,0.2)' : 'transparent',
-            }}>
+            }}
+          >
             {s.element}
           </div>
         ))}

package/src/components/command-palette/index.tsx

@@ -111,7 +111,8 @@ export const CommandPalette = Shade<CommandPaletteProps, CommandPaletteState>({
           }
 
           manager.getSuggestion({ injector, term: (ev.target as any).value })
-        }}>
+        }}
+      >
         <div
           className="input-container"
           style={{
@@ -122,7 +123,8 @@ export const CommandPalette = Shade<CommandPaletteProps, CommandPaletteState>({
             borderRadius: '5px',
             position: 'relative',
             ...props.style,
-          }}>
+          }}
+        >
           <div
             className="term-icon"
             style={{
@@ -131,7 +133,8 @@ export const CommandPalette = Shade<CommandPaletteProps, CommandPaletteState>({
               fontWeight: 'bolder',
               textShadow: '0 0 1px #aaa',
             }}
-            onclick={() => manager.isOpened.setValue(true)}>
+            onclick={() => manager.isOpened.setValue(true)}
+          >
             {props.defaultPrefix}
           </div>
           <CommandPaletteInput manager={manager} />
@@ -143,10 +146,12 @@ export const CommandPalette = Shade<CommandPaletteProps, CommandPaletteState>({
               justifyContent: 'space-between',
               width: manager.isOpened.getValue() ? '50px' : '0px',
               overflow: 'hidden',
-            }}>
+            }}
+          >
             <div
               className="loader-container"
-              style={{ width: '20px', height: '20px', opacity: manager.isLoading.getValue() ? '1' : '0' }}>
+              style={{ width: '20px', height: '20px', opacity: manager.isLoading.getValue() ? '1' : '0' }}
+            >
               <Loader style={{ width: '100%', height: '100%' }} />
             </div>
             <div
@@ -160,7 +165,8 @@ export const CommandPalette = Shade<CommandPaletteProps, CommandPaletteState>({
                 alignItems: 'center',
                 justifyContent: 'center',
                 cursor: 'pointer',
-              }}>
+              }}
+            >
               ✖
             </div>
           </div>

package/src/components/data-grid/body.tsx

@@ -71,7 +71,8 @@ export const DataGridBody: <T>(props: DataGridBodyProps<T>, children: ChildrenLi
                 props.service.selection.setValue([entry])
               }
             }}
-            ondblclick={() => props.onDoubleClick?.(entry)}>
+            ondblclick={() => props.onDoubleClick?.(entry)}
+          >
             {props.columns.map((column: any) => (
               <td style={{ padding: '0.5em', ...props.style }}>
                 {props.rowComponents?.[column]?.(entry, state) || props.rowComponents?.default?.(entry, state) || (

package/src/components/data-grid/data-grid.tsx

@@ -85,7 +85,8 @@ export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => J
           height: '100%',
           overflow: 'auto',
           zIndex: '1',
-        }}>
+        }}
+      >
         <table style={{ width: '100%', height: 'calc(100% - 4em)', position: 'relative' }}>
           <thead>
             <tr>

package/src/components/data-grid/footer.tsx

@@ -40,7 +40,8 @@ export const DataGridFooter = Shade<{ service: CollectionService<any> }, { data:
           justifyContent: 'flex-end',
           padding: '1em',
           alignItems: 'center',
-        }}>
+        }}
+      >
         <div>
           Goto page
           <select
@@ -49,7 +50,8 @@ export const DataGridFooter = Shade<{ service: CollectionService<any> }, { data:
               const value = parseInt((ev.target as any).value, 10)
               const currentQuery = props.service.querySettings.getValue()
               props.service.querySettings.setValue({ ...currentQuery, skip: (currentQuery.top || 0) * value })
-            }}>
+            }}
+          >
             {[...new Array(Math.ceil(state.data.count / (props.service.querySettings.getValue().top || Infinity)))].map(
               (_val, index) => (
                 <option value={index.toString()} selected={currentPage === index}>
@@ -71,7 +73,8 @@ export const DataGridFooter = Shade<{ service: CollectionService<any> }, { data:
                 top: value,
                 skip: currentPage * value,
               })
-            }}>
+            }}
+          >
             {dataGridItemsPerPage.map((no) => (
               <option value={no.toString()} selected={no === currentQuerySettings.top}>
                 {no.toString()}

package/src/components/data-grid/header.tsx

@@ -70,7 +70,8 @@ export const DataGridHeader: <T, K extends keyof T>(
     return (
       <div
         style={{ display: 'flex', width: '100%', height: '100%', justifyContent: 'space-around' }}
-        onclick={() => updateState({ isSearchOpened: true })}>
+        onclick={() => updateState({ isSearchOpened: true })}
+      >
         <div>{props.field}</div>
         <div className="header-controls" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
           <div
@@ -89,7 +90,8 @@ export const DataGridHeader: <T, K extends keyof T>(
                 ...currentState.querySettings,
                 order: newOrder,
               })
-            }}>
+            }}
+          >
             {(currentOrder === props.field && (currentOrderDirection === 'ASC' ? '⬇' : '⬆')) || '↕'}
           </div>
         </div>

package/src/components/fab.tsx

@@ -20,7 +20,8 @@ export const Fab = Shade<PartialElement<HTMLDivElement>>({
           boxShadow: '2px 2px 4px rgba(0,0,0,0.3)',
           cursor: 'pointer',
           ...props.style,
-        }}>
+        }}
+      >
         {children}
       </div>
     )

package/src/components/grid.tsx

@@ -24,16 +24,15 @@ export type RowCells<T> = {
 
 export const Grid: <T>(props: GridProps<T>, children: ChildrenList) => JSX.Element<any, any> = Shade({
   shadowDomName: 'shade-grid',
-  constructed: ({ injector, element }) => {
-    const themeChanged = injector.getInstance(ThemeProviderService).theme.subscribe((t) => {
+  resources: ({ injector, element }) => [
+    injector.getInstance(ThemeProviderService).theme.subscribe((t) => {
       const headers = element.querySelectorAll('th')
       headers.forEach((header) => {
         header.style.color = t.text.secondary
         header.style.background = t.background.paper
       })
-    })
-    return () => themeChanged.dispose()
-  },
+    }),
+  ],
   render: ({ props, injector }) => {
     const theme = injector.getInstance(ThemeProviderService).theme.getValue()
     const headerStyle: Partial<CSSStyleDeclaration> = {
@@ -55,7 +54,8 @@ export const Grid: <T>(props: GridProps<T>, children: ChildrenList) => JSX.Eleme
           width: '100%',
           height: '100%',
           overflow: 'auto',
-        }}>
+        }}
+      >
         <table style={{ width: '100%', position: 'relative' }}>
           <thead>
             <tr>

package/src/components/input.tsx

@@ -38,7 +38,8 @@ export const Input = Shade<TextInputProps>({
           marginBottom: '1em',
           padding: '1em',
           ...props.labelProps?.style,
-        }}>
+        }}
+      >
         {props.labelTitle}
         {props.multiLine ? (
           <div
@@ -52,7 +53,8 @@ export const Input = Shade<TextInputProps>({
               width: '100%',
               textOverflow: 'ellipsis',
               ...props.style,
-            }}>
+            }}
+          >
             {props.value}
           </div>
         ) : (

package/src/components/loader.tsx

@@ -7,7 +7,8 @@ export const Loader = Shade<{ style?: Partial<CSSStyleDeclaration> }>({
       <div
         style={{
           ...((props && props.style) || {}),
-        }}>
+        }}
+      >
         <style>
           {`/* LOADER 1 */
 
@@ -51,7 +52,8 @@ export const Loader = Shade<{ style?: Partial<CSSStyleDeclaration> }>({
             position: 'relative',
             width: '100%',
             height: '100%',
-          }}>
+          }}
+        >
           <div className="three col">
             <div className="loader" id="loader-1"></div>
           </div>

package/src/components/modal.tsx

@@ -14,7 +14,8 @@ export const Modal = Shade<{ isVisible: boolean; onClose?: () => void }>({
           position: 'fixed',
           top: '0',
           left: '0',
-        }}>
+        }}
+      >
         {children}
       </div>
     ) : (

package/src/components/noty-list.tsx

@@ -81,7 +81,8 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
           overflow: 'hidden',
           borderRadius: '6px',
           boxShadow: '1px 3px 6px rgba(0,0,0,0.3)',
-        }}>
+        }}
+      >
         <div
           style={{
             display: 'flex',
@@ -91,7 +92,8 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
             backgroundColor: colors.dark,
             color: headerTextColor,
             fontSize: '1.3em',
-          }}>
+          }}
+        >
           <h5
             style={{
               whiteSpace: 'nowrap',
@@ -99,7 +101,8 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
               textOverflow: 'ellipsis',
               margin: '0',
             }}
-            title={props.model.title}>
+            title={props.model.title}
+          >
             {props.model.title}
           </h5>
           <Button
@@ -108,9 +111,7 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
             title="Close Notification"
             variant="contained"
             color={props.model.type}
-            style={{
-              padding: '6px',
-            }}>
+          >
             ✖
           </Button>
         </div>
@@ -148,7 +149,8 @@ export const NotyList = Shade<unknown, { currentNotys: NotyModel[] }>({
           right: '1em',
           display: 'flex',
           flexDirection: 'column',
-        }}>
+        }}
+      >
         {getState().currentNotys.map((n) => (
           <NotyComponent model={n} onDismiss={() => injector.getInstance(NotyService).removeNoty(n)} />
         ))}

package/src/components/paper.tsx

@@ -3,13 +3,14 @@ import { ThemeProviderService } from '../services/theme-provider-service'
 
 export const Paper = Shade<PartialElement<HTMLDivElement> & { elevation?: 1 | 2 | 3 }>({
   shadowDomName: 'shade-paper',
-  constructed: ({ injector, element }) => {
+  resources: ({ injector, element }) => {
     const themeProvider = injector.getInstance(ThemeProviderService)
-    const observable = themeProvider.theme.subscribe((newTheme) => {
-      ;(element.firstChild as HTMLDivElement).style.background = newTheme.background.paper
-      ;(element.firstChild as HTMLDivElement).style.color = themeProvider.theme.getValue().text.secondary
-    })
-    return () => observable.dispose()
+    return [
+      themeProvider.theme.subscribe((newTheme) => {
+        ;(element.firstChild as HTMLDivElement).style.background = newTheme.background.paper
+        ;(element.firstChild as HTMLDivElement).style.color = themeProvider.theme.getValue().text.secondary
+      }),
+    ]
   },
   render: ({ injector, props, children }) => {
     const themeProvider = injector.getInstance(ThemeProviderService)
@@ -24,7 +25,8 @@ export const Paper = Shade<PartialElement<HTMLDivElement> & { elevation?: 1 | 2
           margin: '8px',
           padding: '6px 16px',
           ...(props ? props.style : {}),
-        }}>
+        }}
+      >
         {children}
       </div>
     )

package/src/components/suggest/index.tsx

@@ -114,7 +114,8 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
           }
 
           manager.getSuggestion({ injector, term: (ev.target as any).value })
-        }}>
+        }}
+      >
         <div
           className="input-container"
           style={{
@@ -126,7 +127,8 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
             position: 'relative',
             background: 'rgba(128,128,128,0.1)',
             ...props.style,
-          }}>
+          }}
+        >
           <div
             className="term-icon"
             style={{
@@ -135,7 +137,8 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
               fontWeight: 'bolder',
               textShadow: '0 0 1px #aaa',
             }}
-            onclick={() => manager.isOpened.setValue(true)}>
+            onclick={() => manager.isOpened.setValue(true)}
+          >
             {props.defaultPrefix}
           </div>
           <SuggestInput manager={manager} />
@@ -147,10 +150,12 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
               justifyContent: 'space-between',
               width: manager.isOpened.getValue() ? '50px' : '0px',
               overflow: 'hidden',
-            }}>
+            }}
+          >
             <div
               className="loader-container"
-              style={{ width: '20px', height: '20px', opacity: manager.isLoading.getValue() ? '1' : '0' }}>
+              style={{ width: '20px', height: '20px', opacity: manager.isLoading.getValue() ? '1' : '0' }}
+            >
               <Loader style={{ width: '100%', height: '100%' }} />
             </div>
             <div
@@ -164,7 +169,8 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
                 alignItems: 'center',
                 justifyContent: 'center',
                 cursor: 'pointer',
-              }}>
+              }}
+            >
               ✖
             </div>
           </div>