@kubex/zinc 1.0.105 → 1.0.107

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

@@ -1,204 +1,96 @@
-import { property } from 'lit/decorators.js';
+import * as echarts from 'echarts/core';
+import { BarChart } from 'echarts/charts';
+import { CanvasRenderer } from 'echarts/renderers';
 import { type CSSResultGroup, html, unsafeCSS } from 'lit';
-import { Chart, ChartConfiguration, registerables } from "chart.js";
+import { GridComponent, TooltipComponent } from 'echarts/components';
+import { property } from 'lit/decorators.js';
+import styles from './simple-chart.scss';
 import ZincElement from '../../internal/zinc-element';
+import type { ECharts } from 'echarts/core';
 
-import styles from './simple-chart.scss';
+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',
+];
+const DEFAULT_DATA = [56.4, 39.8, 66.8, 66.4, 40.6, 55.2, 77.4, 69.8, 57.8, 76, 110.8, 142.6];
 
 /**
- * @summary Short summary of the component's intended use.
+ * @summary A simple, pre-styled bar chart.
  * @documentation https://zinc.style/components/simple-chart
  * @status experimental
  * @since 1.0
- *
- * @dependency zn-example
- *
- * @event zn-event-name - Emitted as an example.
- *
- * @slot - The default slot.
- * @slot example - An example slot.
- *
- * @csspart base - The component's base wrapper.
- *
- * @cssproperty --example - An example CSS custom property.
  */
 export default class ZnSimpleChart extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
 
-  @property({ attribute: 'datasets', type: Array }) datasets: any[];
-  @property({ attribute: 'labels', type: Array }) labels: any[];
-
-  myChart: Chart;
+  @property({ attribute: 'datasets', type: Array }) datasets?: { data: number[] }[];
+  @property({ attribute: 'labels', type: Array }) labels?: string[];
+  @property({
+    attribute: 'enable-animations',
+    converter: {
+      fromAttribute: (value: string | null) => {
+        if (value === null) return false;
+        if (value === '' || value === 'true') return true;
+        const num = parseFloat(value);
+        return Number.isNaN(num) ? true : num;
+      },
+    },
+  }) enableAnimations: boolean | number = false;
 
-  constructor() {
-    super();
-    Chart.register(...registerables);
-  }
+  private chart?: ECharts;
+  private resizeObserver?: ResizeObserver;
 
   firstUpdated() {
-    const ctx = (this.renderRoot.querySelector('#myChart') as HTMLCanvasElement).getContext('2d');
-
-    const config = {
-      type: 'bar',
-      data: {
-        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"
-        ],
-        datasets: [
-          {
-            data: [
-              56.4,
-              39.8,
-              66.8,
-              66.4,
-              40.6,
-              55.2,
-              77.4,
-              69.8,
-              57.8,
-              76,
-              110.8,
-              142.6
-            ],
-          }
-        ]
+    const host = this.shadowRoot?.getElementById('chart') as HTMLElement | null;
+    if (!host) return;
+    this.chart = echarts.init(host);
+    const data = this.datasets?.[0]?.data ?? DEFAULT_DATA;
+    const labels = this.labels ?? DEFAULT_LABELS;
+    const animEnabled = this.enableAnimations !== false && this.enableAnimations !== 0;
+    const animDuration = typeof this.enableAnimations === 'number' ? this.enableAnimations : 1500;
+    this.chart.setOption({
+      animation: animEnabled,
+      animationDuration: animDuration,
+      animationEasing: 'cubicOut',
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: 'rgba(0,0,0,0.7)',
+        borderWidth: 0,
+        textStyle: { color: '#fff' },
       },
-      options: {
-        responsive: true,
-        maintainAspectRatio: false,
-        plugins: {
-          legend: {
-            display: false
-          },
-          tooltip: {
-            enabled: false,
-            external: function (context: any) {
-              // Tooltip Element
-              let tooltipEl = document.getElementById("chartjs-tooltip");
-
-              // Create element on first render
-              if (!tooltipEl) {
-                tooltipEl = document.createElement("div");
-                tooltipEl.id = "chartjs-tooltip";
-                tooltipEl.innerHTML = "<table></table>";
-                document.body.appendChild(tooltipEl);
-              }
-
-              // Hide if no tooltip
-              const tooltipModel = context.tooltip;
-              if (tooltipModel.opacity === 0) {
-                tooltipEl.style.opacity = "0";
-                return;
-              }
-
-              // Set caret Position
-              tooltipEl.classList.remove("above", "below", "no-transform");
-              if (tooltipModel.yAlign) {
-                tooltipEl.classList.add(tooltipModel.yAlign);
-              } else {
-                tooltipEl.classList.add("no-transform");
-              }
-
-              function getBody(bodyItem: any) {
-                return bodyItem.lines;
-              }
-
-              // Set Text
-              if (tooltipModel.body) {
-                const titleLines = tooltipModel.title || [];
-                const bodyLines = tooltipModel.body.map(getBody);
-
-                let innerHtml = "<thead>";
-
-                titleLines.forEach(function (title: any) {
-                  innerHtml += "<tr><th>" + title + "</th></tr>";
-                });
-                innerHtml += "</thead><tbody>";
-
-                bodyLines.forEach(function (body: any, i: any) {
-                  const colors = tooltipModel.labelColors[i];
-                  let style = "background:" + colors.backgroundColor;
-                  style += "; border-color:" + colors.borderColor;
-                  style += "; border-width: 2px";
-                  const span = '<span style="' + style + '"></span>';
-                  innerHtml += "<tr><td>" + span + body + "</td></tr>";
-                });
-                innerHtml += "</tbody>";
-
-                const tableRoot = tooltipEl.querySelector("table");
-                if (tableRoot) {
-                  tableRoot.innerHTML = innerHtml;
-                }
-              }
-
-              const position = context.chart.canvas.getBoundingClientRect();
-              const bodyFont = Chart.defaults.font;
-
-              tooltipModel.padding = 3;
-
-              // Display, position, and set styles for font
-              tooltipEl.style.opacity = "1";
-              tooltipEl.style.position = "absolute";
-              tooltipEl.style.left =
-                position.left +
-                window.pageXOffset +
-                tooltipModel.caretX +
-                5 +
-                "px";
-              tooltipEl.style.top =
-                position.top +
-                window.pageYOffset +
-                tooltipModel.caretY +
-                10 +
-                "px";
-              tooltipEl.style.font = bodyFont.family ?? "Helvetica Neue";
-              tooltipEl.style.color = "white";
-              tooltipEl.style.padding = tooltipModel.padding + "px " + tooltipModel.padding + "px";
-              tooltipEl.style.pointerEvents = "none";
-              tooltipEl.style.background = "rgba(0, 0, 0, 0.7)";
-              tooltipEl.style.borderRadius = "10px";
-            }
-          }
+      xAxis: { type: 'category', data: labels, show: false },
+      yAxis: { type: 'value', show: false },
+      grid: { left: 0, right: 0, top: 0, bottom: 0 },
+      series: [{
+        type: 'bar',
+        data,
+        barWidth: 7,
+        itemStyle: {
+          color: '#29C1BC',
+          borderRadius: 10,
         },
-        elements: {
-          bar: {
-            borderRadius: 10,
-            barThickness: 2,
-            maxBarThickness: 2,
-            backgroundColor: "#29C1BC",
-            hoverBackgroundColor: "#19837f",
-          }
+        emphasis: {
+          itemStyle: { color: '#19837f' },
         },
-        scales: {
-          x: {
-            display: false
-          },
-          y: {
-            display: false
-          }
-        }
-      }
-    };
+      }],
+    });
+    let firstResize = true;
+    this.resizeObserver = new ResizeObserver(() => {
+      if (firstResize) { firstResize = false; return; }
+      this.chart?.resize();
+    });
+    this.resizeObserver.observe(host);
+  }
 
-    this.myChart = new Chart(ctx as CanvasRenderingContext2D, config as ChartConfiguration);
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver?.disconnect();
+    this.chart?.dispose();
   }
 
   render() {
-    return html`
-      <div>
-        <canvas id="myChart"></canvas>
-      </div>
-    `;
+    return html`<div id="chart"></div>`;
   }
 }

package/src/components/textarea/textarea.component.ts

@@ -78,7 +78,7 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
   @property() placeholder = '';
 
   /** The number of rows to display by default. */
-  @property({type: Number}) rows = 4;
+  @property({attribute: 'rows',type: Number}) rows = 4;
 
   /** Controls how the textarea can be resized. */
   @property() resize: 'none' | 'vertical' | 'auto' = 'vertical';

package/src/components/translation-group/translation-group.component.ts

@@ -54,9 +54,39 @@ export default class ZnTranslationGroup extends ZnPanel {
   /** Tracks all language codes that have been activated across children. */
   @state() private _activatedLanguages: string[] = ['en'];
 
+  @state() private _overflowIndex = -1;
+
+  private _resizeObserver?: ResizeObserver;
+  private _lastObservedWidth = 0;
+  private _measureRafId = 0;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._resizeObserver = new ResizeObserver(entries => {
+      const width = entries[0]?.contentRect.width ?? 0;
+      if (Math.abs(width - this._lastObservedWidth) < 1) return;
+      this._lastObservedWidth = width;
+      if (this._overflowIndex !== -1) {
+        this._overflowIndex = -1;
+      } else {
+        this._scheduleLangOverflow();
+      }
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._resizeObserver?.disconnect();
+    if (this._measureRafId) {
+      cancelAnimationFrame(this._measureRafId);
+      this._measureRafId = 0;
+    }
+  }
+
   protected firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
     this.syncChildren();
+    this._resizeObserver?.observe(this);
   }
 
   protected updated(changedProperties: PropertyValues) {
@@ -64,6 +94,52 @@ export default class ZnTranslationGroup extends ZnPanel {
     if (changedProperties.has('languages')) {
       this.syncChildLanguages();
     }
+    this._scheduleLangOverflow();
+  }
+
+  private _scheduleLangOverflow() {
+    if (this._measureRafId) return;
+    this._measureRafId = requestAnimationFrame(() => {
+      this._measureRafId = 0;
+      this._computeLangOverflow();
+    });
+  }
+
+  private _computeLangOverflow() {
+    const group = this.shadowRoot?.querySelector<HTMLElement>('.translation-group__languages zn-button-group');
+    if (!group) return;
+
+    const buttons = Array.from(group.querySelectorAll<HTMLElement>('zn-button[data-lang-btn]'));
+    if (buttons.length < 2) {
+      if (this._overflowIndex !== -1) this._overflowIndex = -1;
+      return;
+    }
+
+    const firstTop = buttons[0].getBoundingClientRect().top;
+    let wrapAt = -1;
+    for (let i = 1; i < buttons.length; i++) {
+      if (buttons[i].getBoundingClientRect().top > firstTop + 1) {
+        wrapAt = i;
+        break;
+      }
+    }
+
+    if (wrapAt === -1) {
+      const trailing = group.querySelector<HTMLElement>('[data-lang-overflow], [data-lang-add]');
+      if (trailing && trailing.getBoundingClientRect().top > firstTop + 1) {
+        wrapAt = buttons.length;
+      }
+    }
+
+    if (wrapAt === -1) return;
+
+    const newIndex = this._overflowIndex === -1
+      ? wrapAt
+      : Math.max(1, Math.min(wrapAt, this._overflowIndex - 1));
+
+    if (newIndex !== this._overflowIndex) {
+      this._overflowIndex = newIndex;
+    }
   }
 
   private getAllTranslations(): ZnTranslations[] {
@@ -124,6 +200,15 @@ export default class ZnTranslationGroup extends ZnPanel {
     }
   };
 
+  private handleOverflowSelect = (e: ZnMenuSelectEvent) => {
+    e.stopPropagation();
+    const element = e.detail.element as HTMLElement;
+    const languageCode = element.getAttribute('data-path');
+    if (languageCode) {
+      this.switchLanguage(languageCode);
+    }
+  };
+
   render() {
     const hasActionSlot = this._slotController.test('actions');
     const hasFooterSlot = this._slotController.test('footer');
@@ -142,6 +227,16 @@ export default class ZnTranslationGroup extends ZnPanel {
       visibleTabs.unshift('en');
     }
 
+    const overflowCutoff = this._overflowIndex === -1 ? visibleTabs.length : this._overflowIndex;
+    const visibleLangTabs = visibleTabs.slice(0, overflowCutoff);
+    const overflowLangTabs = visibleTabs.slice(overflowCutoff);
+    const overflowActions = overflowLangTabs.map(code => ({
+      title: code.toUpperCase(),
+      type: 'dropdown',
+      path: code,
+      icon: code === this._activeLanguage ? 'check' : ''
+    }));
+
     const hasMultipleLanguages = Object.keys(this.languages).length > 1;
     const hasHeader = headerCaption || hasMultipleLanguages || hasActionSlot;
 
@@ -163,8 +258,9 @@ export default class ZnTranslationGroup extends ZnPanel {
               ${hasMultipleLanguages ? html`
                 <div slot="actions" class="translation-group__languages">
                   <zn-button-group>
-                    ${visibleTabs.map(code => html`
+                    ${visibleLangTabs.map(code => html`
                       <zn-button
+                        data-lang-btn
                         size="x-small"
                         color="default"
                         ?outline="${code !== this._activeLanguage}"
@@ -172,8 +268,23 @@ export default class ZnTranslationGroup extends ZnPanel {
                       >${code.toUpperCase()}
                       </zn-button>
                     `)}
+                    ${overflowActions.length > 0 ? html`
+                      <zn-dropdown placement="bottom-end" data-lang-overflow>
+                        <zn-button
+                          slot="trigger"
+                          size="x-small"
+                          color="default"
+                          icon="keyboard_arrow_down"
+                          ?outline="${!overflowLangTabs.includes(this._activeLanguage)}"
+                        ></zn-button>
+                        <zn-menu
+                          .actions=${overflowActions}
+                          @zn-menu-select="${this.handleOverflowSelect}"
+                        ></zn-menu>
+                      </zn-dropdown>
+                    ` : nothing}
                     ${availableLanguages.length > 0 ? html`
-                      <zn-dropdown placement="bottom-end">
+                      <zn-dropdown placement="bottom-end" data-lang-add>
                         <zn-button
                           slot="trigger"
                           size="x-small"

package/src/components/translations/translations.component.ts

@@ -2,6 +2,7 @@ import {classMap} from 'lit/directives/class-map.js';
 import {FormControlController, validValidityState} from '../../internal/form';
 import {HasSlotController} from '../../internal/slot';
 import {html, nothing, unsafeCSS} from 'lit';
+import {ifDefined} from 'lit/directives/if-defined.js';
 import {keyed} from 'lit/directives/keyed.js';
 import {live} from 'lit/directives/live.js';
 import {property, state} from 'lit/decorators.js';
@@ -39,6 +40,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
   @property({type: Boolean, reflect: true}) required = false;
   @property({type: Boolean, reflect: true}) flush = false;
   @property({attribute: "input-type"}) inputType: 'select' | 'text' | 'number' | 'textarea' = 'text';
+  @property({attribute: "textarea-rows", type: Number}) textareaRows: number | undefined;
 
   /** When true, hides the individual language navbar and defers language control to a parent zn-translation-group. */
   @property({type: Boolean, reflect: true}) grouped = false;
@@ -49,6 +51,11 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
   @property({type: Object}) values: Record<string, string> = {};
 
   @state() private _activeLanguage = 'en';
+  @state() private _overflowIndex = -1;
+
+  private _resizeObserver?: ResizeObserver;
+  private _lastObservedWidth = 0;
+  private _measureRafId = 0;
 
   get validity(): ValidityState {
     return validValidityState;
@@ -99,8 +106,82 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
     return Object.keys(this.values);
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    this._resizeObserver = new ResizeObserver(entries => {
+      const width = entries[0]?.contentRect.width ?? 0;
+      if (Math.abs(width - this._lastObservedWidth) < 1) return;
+      this._lastObservedWidth = width;
+      if (this._overflowIndex !== -1) {
+        this._overflowIndex = -1;
+      } else {
+        this._scheduleLangOverflow();
+      }
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._resizeObserver?.disconnect();
+    if (this._measureRafId) {
+      cancelAnimationFrame(this._measureRafId);
+      this._measureRafId = 0;
+    }
+  }
+
   protected firstUpdated() {
     this.formControlController.updateValidity();
+    this._resizeObserver?.observe(this);
+  }
+
+  protected updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    this._scheduleLangOverflow();
+  }
+
+  private _scheduleLangOverflow() {
+    if (this._measureRafId) return;
+    this._measureRafId = requestAnimationFrame(() => {
+      this._measureRafId = 0;
+      this._computeLangOverflow();
+    });
+  }
+
+  private _computeLangOverflow() {
+    const group = this.shadowRoot?.querySelector<HTMLElement>('.translations__language-group');
+    if (!group) return;
+
+    const buttons = Array.from(group.querySelectorAll<HTMLElement>('zn-button[data-lang-btn]'));
+    if (buttons.length < 2) {
+      if (this._overflowIndex !== -1) this._overflowIndex = -1;
+      return;
+    }
+
+    const firstTop = buttons[0].getBoundingClientRect().top;
+    let wrapAt = -1;
+    for (let i = 1; i < buttons.length; i++) {
+      if (buttons[i].getBoundingClientRect().top > firstTop + 1) {
+        wrapAt = i;
+        break;
+      }
+    }
+
+    if (wrapAt === -1) {
+      const trailing = group.querySelector<HTMLElement>('[data-lang-overflow], [data-lang-add]');
+      if (trailing && trailing.getBoundingClientRect().top > firstTop + 1) {
+        wrapAt = buttons.length;
+      }
+    }
+
+    if (wrapAt === -1) return;
+
+    const newIndex = this._overflowIndex === -1
+      ? wrapAt
+      : Math.max(1, Math.min(wrapAt, this._overflowIndex - 1));
+
+    if (newIndex !== this._overflowIndex) {
+      this._overflowIndex = newIndex;
+    }
   }
 
   willUpdate(changedProperties: PropertyValues) {
@@ -164,6 +245,15 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
     }
   };
 
+  private handleOverflowSelect = (e: ZnMenuSelectEvent) => {
+    e.stopPropagation();
+    const element = e.detail.element as HTMLElement;
+    const languageCode = element.getAttribute('data-path');
+    if (languageCode) {
+      this.switchLanguage(languageCode);
+    }
+  };
+
   private switchLanguage = (lang: string) => {
     this._activeLanguage = lang;
     this.requestUpdate();
@@ -223,6 +313,16 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
       visibleTabs.unshift('en');
     }
 
+    const overflowCutoff = this._overflowIndex === -1 ? visibleTabs.length : this._overflowIndex;
+    const visibleLangTabs = visibleTabs.slice(0, overflowCutoff);
+    const overflowLangTabs = visibleTabs.slice(overflowCutoff);
+    const overflowActions = overflowLangTabs.map(code => ({
+      title: code.toUpperCase(),
+      type: 'dropdown',
+      path: code,
+      icon: code === this._activeLanguage ? 'check' : ''
+    }));
+
     const currentTranslation = this.values[this._activeLanguage] ?? '';
     const isRTL = this.isRTLLanguage(this._activeLanguage);
 
@@ -252,9 +352,10 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
             <div class="translations__actions">
               ${hasExpandSlot ? html`<slot name="expand"></slot>` : nothing}
               ${hasMultipleLanguages ? html`
-                <zn-button-group>
-                  ${visibleTabs.map(code => html`
+                <zn-button-group class="translations__language-group">
+                  ${visibleLangTabs.map(code => html`
                     <zn-button
+                      data-lang-btn
                       size="x-small"
                       color="default"
                       ?outline="${code !== this._activeLanguage}"
@@ -262,8 +363,23 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
                     >${code.toUpperCase()}
                     </zn-button>
                   `)}
+                  ${overflowActions.length > 0 ? html`
+                    <zn-dropdown placement="bottom-end" data-lang-overflow>
+                      <zn-button
+                        slot="trigger"
+                        size="x-small"
+                        color="default"
+                        icon="keyboard_arrow_down"
+                        ?outline="${!overflowLangTabs.includes(this._activeLanguage)}"
+                      ></zn-button>
+                      <zn-menu
+                        .actions=${overflowActions}
+                        @zn-menu-select="${this.handleOverflowSelect}"
+                      ></zn-menu>
+                    </zn-dropdown>
+                  ` : nothing}
                   ${availableLanguages.length > 0 ? html`
-                    <zn-dropdown placement="bottom-end">
+                    <zn-dropdown placement="bottom-end" data-lang-add>
                       <zn-button
                         slot="trigger"
                         size="x-small"
@@ -287,6 +403,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
           ${keyed(this._activeLanguage, html`
             <zn-inline-edit
               input-type=${this.inputType}
+              textarea-rows=${ifDefined(this.textareaRows)}
               .value=${live(currentTranslation)}
               name="${this.name}"
               placeholder="Enter translation..."