@kubex/zinc 1.1.31 → 1.1.33

package/src/components/rating/rating.component.ts

@@ -1,4 +1,3 @@
-import {clamp} from "lodash";
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
 import {FormControlController, validValidityState} from "../../internal/form";
@@ -98,7 +97,7 @@ export default class ZnRating extends ZincElement implements ZincFormControl {
     const {left, width} = this.rating.getBoundingClientRect();
     const value = this._roundToPrecision(((coordinate - left) / width) * this.max, this.precision);
 
-    return clamp(value, 0, this.max);
+    return Math.min(Math.max(value, 0), this.max);
   }
 
   private _getValueFromMousePosition(event: MouseEvent): number {

package/src/components/simple-chart/simple-chart.component.ts

@@ -1,16 +1,11 @@
-import * as echarts from 'echarts/core';
-import { BarChart } from 'echarts/charts';
-import { CanvasRenderer } from 'echarts/renderers';
 import { type CSSResultGroup, html, unsafeCSS } from 'lit';
-import { GridComponent, TooltipComponent } from 'echarts/components';
+import { loadECharts } from '../chart/echarts-loader';
 import { property } from 'lit/decorators.js';
 import { ResizeController } from '@lit-labs/observers/resize-controller.js';
 import styles from './simple-chart.scss';
 import ZincElement from '../../internal/zinc-element';
 import type { ECharts } from 'echarts/core';
 
-echarts.use([BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
-
 const DEFAULT_LABELS = [
   'Jun 2016', 'Jul 2016', 'Aug 2016', 'Sep 2016', 'Oct 2016', 'Nov 2016',
   'Dec 2016', 'Jan 2017', 'Feb 2017', 'Mar 2017', 'Apr 2017', 'May 2017',
@@ -41,6 +36,7 @@ export default class ZnSimpleChart extends ZincElement {
   }) enableAnimations: boolean | number = false;
 
   private chart?: ECharts;
+  private initPromise?: Promise<void>;
   private readonly resizeObserver = new ResizeController(this, {
     target: null,
     skipInitial: true,
@@ -48,8 +44,21 @@ export default class ZnSimpleChart extends ZincElement {
   });
 
   firstUpdated() {
+    this.initPromise = this.initChart().catch(() => undefined);
+  }
+
+  // Make `await el.updateComplete` cover the lazy echarts load and chart init
+  protected override async getUpdateComplete(): Promise<boolean> {
+    const result = await super.getUpdateComplete();
+    await this.initPromise;
+    return result;
+  }
+
+  private async initChart() {
     const host = this.shadowRoot?.getElementById('chart') as HTMLElement | null;
     if (!host) return;
+    const echarts = await loadECharts();
+    if (!this.isConnected || this.chart) return;
     this.chart = echarts.init(host);
     const data = this.datasets?.[0]?.data ?? DEFAULT_DATA;
     const labels = this.labels ?? DEFAULT_LABELS;

package/src/zinc-autoloader.ts

@@ -45,8 +45,6 @@ function register(tagName: string): Promise<void> {
 
   // Register it
   return new Promise((resolve, reject) => {
-    // @ts-expect-error  Dynamic imports are only supported when the --module flag is set to es2020, es2022, esnext,
-    // commonjs, amd, system, umd, node16, or nodenext
     import(path).then(() => resolve()).catch(() => reject(new Error(`Unable to autoload <${tagName}> from ${path}`)));
   });
 }

package/tsconfig.json

@@ -2,7 +2,8 @@
 {
   "compilerOptions": {
     /* Visit https://aka.ms/tsconfig.json to read more about this file */
-    "target": "es2017",
+    "target": "es2020",
+    "module": "esnext",
     "moduleResolution": "node",
     "lib": [
       "dom",