@tmorrow/cre8-wc 1.0.25 → 1.1.1

package/lib/components/chart/chart.js

@@ -1,101 +1,15 @@
-import { css as m, html as u } from "lit";
-import { property as n, state as y, query as C } from "lit/decorators.js";
-import { Cre8Element as v } from "../cre8-element.js";
-import { Chart as g, registerables as x } from "chart.js";
-const I = m`
-  :host {
-    display: block;
-    position: relative;
-    width: 100%;
-  }
-
-  :host([loading]) .cre8-c-chart__container {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-
-  .cre8-c-chart {
-    position: relative;
-    width: 100%;
-  }
-
-  .cre8-c-chart__container {
-    position: relative;
-    width: 100%;
-    transition: opacity 0.2s ease;
-  }
-
-  .cre8-c-chart__canvas-wrapper {
-    position: relative;
-    width: 100%;
-  }
-
-  canvas {
-    display: block;
-    width: 100% !important;
-    max-width: 100%;
-  }
-
-  .cre8-c-chart__loading {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    z-index: 10;
-  }
-
-  .cre8-c-chart__spinner {
-    width: 40px;
-    height: 40px;
-    border: 3px solid var(--cre8-color-border-default, #e5e7eb);
-    border-top-color: var(--cre8-color-bg-brand, #0066B3);
-    border-radius: 50%;
-    animation: cre8-chart-spin 0.8s linear infinite;
-  }
-
-  .cre8-c-chart__loading-text {
-    margin-top: var(--cre8-spacing-2, 8px);
-    font-size: var(--cre8-font-size-sm, 14px);
-    color: var(--cre8-color-content-subtle, #6b7280);
-  }
-
-  @keyframes cre8-chart-spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  /* Tooltip customization */
-  .cre8-c-chart__tooltip {
-    background-color: var(--cre8-color-bg-default, #ffffff);
-    border: 1px solid var(--cre8-color-border-default, #e5e7eb);
-    border-radius: var(--cre8-border-radius-default, 4px);
-    box-shadow: var(--cre8-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
-    padding: var(--cre8-spacing-2, 8px) var(--cre8-spacing-3, 12px);
-    font-family: var(--cre8-font-family-default, inherit);
-    font-size: var(--cre8-font-size-sm, 14px);
-    color: var(--cre8-color-content-default, #1f2937);
-  }
-
-  /* Responsive adjustments */
-  @media (max-width: 640px) {
-    .cre8-c-chart__spinner {
-      width: 32px;
-      height: 32px;
-    }
-  }
-`;
-var k = Object.defineProperty, s = (b, e, t, a) => {
-  for (var r = void 0, o = b.length - 1, c; o >= 0; o--)
-    (c = b[o]) && (r = c(e, t, r) || r);
-  return r && k(e, t, r), r;
+import { css as x, html as h } from "lit";
+import { property as s, state as f, query as _ } from "lit/decorators.js";
+import { Cre8Element as z } from "../cre8-element.js";
+import { Chart as b, registerables as C } from "chart.js";
+const v = x`.cre8-u-content-knockout-brand{color:var(----cre8-color-content-knockout-brand)}.cre8-u-is-hidden{display:none !important;visibility:hidden !important}.cre8-u-is-vishidden{position:absolute !important;overflow:hidden;width:1px;height:1px;padding:0;border:0;clip:rect(1px, 1px, 1px, 1px)}@media all and (min-width: 23.4375rem){.cre8-u-hide-sm{display:none !important}}@media all and (min-width: 35rem){.cre8-u-hide-sm-2{display:none !important}}@media all and (min-width: 48rem){.cre8-u-hide-md{display:none !important}}@media all and (min-width: 60rem){.cre8-u-hide-lg{display:none !important}}@media all and (min-width: 75rem){.cre8-u-hide-xl{display:none !important}}@media all and (max-width: 23.4375rem){.cre8-u-show-sm{display:none !important}}@media all and (max-width: 35rem){.cre8-u-show-sm-2{display:none !important}}@media all and (max-width: 48rem){.cre8-u-show-md{display:none !important}}@media all and (max-width: 60rem){.cre8-u-show-lg{display:none !important}}@media all and (max-width: 75rem){.cre8-u-show-xl{display:none !important}}.cre8-u-margin-none{margin:0 !important}.cre8-u-margin-sm{margin:size(1) !important}.cre8-u-margin-md{margin:size(2) !important}.cre8-u-margin-lg{margin:size(3) !important}.cre8-u-margin-xl{margin:size(4) !important}.cre8-u-margin-xxl{margin:size(8) !important}.cre8-u-margin-top-none{margin-top:0 !important}.cre8-u-margin-top-sm{margin-top:size(1) !important}.cre8-u-margin-top-md{margin-top:size(2) !important}.cre8-u-margin-top-lg{margin-top:size(3) !important}.cre8-u-margin-top-xl{margin-top:size(4) !important}.cre8-u-margin-top-xxl{margin-top:size(8) !important}.cre8-u-margin-right-none{margin-right:0 !important}.cre8-u-margin-right-sm{margin-right:size(1) !important}.cre8-u-margin-right-md{margin-right:size(2) !important}.cre8-u-margin-right-lg{margin-right:size(3) !important}.cre8-u-margin-right-xl{margin-right:size(4) !important}.cre8-u-margin-right-xxl{margin-right:size(8) !important}.cre8-u-margin-bottom-none{margin-bottom:0 !important}.cre8-u-margin-bottom-sm{margin-bottom:size(1) !important}.cre8-u-margin-bottom-md{margin-bottom:size(2) !important}.cre8-u-margin-bottom-lg{margin-bottom:size(3) !important}.cre8-u-margin-bottom-xl{margin-bottom:size(4) !important}.cre8-u-margin-bottom-xxl{margin-bottom:size(8) !important}.cre8-u-margin-bottom-xl-xxl{margin-bottom:size(4) !important}@media all and (min-width: 768px){.cre8-u-margin-bottom-xl-xxl{margin-bottom:size(8) !important}}.cre8-u-margin-left-none{margin-left:0 !important}.cre8-u-margin-left-sm{margin-left:size(1) !important}.cre8-u-margin-left-md{margin-left:size(2) !important}.cre8-u-margin-left-lg{margin-left:size(3) !important}.cre8-u-margin-left-xl{margin-left:size(4) !important}.cre8-u-margin-left-xxl{margin-left:size(8) !important}.cre8-u-padding-none{padding:0 !important}.cre8-u-padding-sm{padding:size(1) !important}.cre8-u-padding-md{padding:size(2) !important}.cre8-u-padding-lg{padding:size(3) !important}.cre8-u-padding-xl{padding:size(4) !important}.cre8-u-padding-xxl{padding:size(8) !important}.cre8-u-padding-top-none{padding-top:0 !important}.cre8-u-padding-top-sm{padding-top:size(1) !important}.cre8-u-padding-top-md{padding-top:size(2) !important}.cre8-u-padding-top-lg{padding-top:size(3) !important}.cre8-u-padding-top-xl{padding-top:size(4) !important}.cre8-u-padding-top-xxl{padding-top:size(8) !important}.cre8-u-padding-right-none{padding-right:0 !important}.cre8-u-padding-right-sm{padding-right:size(1) !important}.cre8-u-padding-right-md{padding-right:size(2) !important}.cre8-u-padding-right-lg{padding-right:size(3) !important}.cre8-u-padding-right-xl{padding-right:size(4) !important}.cre8-u-padding-right-xxl{padding-right:size(8) !important}.cre8-u-padding-bottom-none{padding-bottom:0 !important}.cre8-u-padding-bottom-sm{padding-bottom:size(1) !important}.cre8-u-padding-bottom-md{padding-bottom:size(2) !important}.cre8-u-padding-bottom-lg{padding-bottom:size(3) !important}.cre8-u-padding-bottom-xl{padding-bottom:size(4) !important}.cre8-u-padding-bottom-xxl{padding-bottom:size(8) !important}.cre8-u-padding-left-none{padding-left:0 !important}.cre8-u-padding-left-sm{padding-left:size(1) !important}.cre8-u-padding-left-md{padding-left:size(2) !important}.cre8-u-padding-left-lg{padding-left:size(3) !important}.cre8-u-padding-left-xl{padding-left:size(4) !important}.cre8-u-padding-left-xxl{padding-left:size(8) !important}.cre8-u-display-flex{display:flex !important}.cre8-u-display-block{display:block !important}body{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);display:flex;flex-direction:column;padding:0;margin:0;color:var(--cre8-color-content-default);background:var(--background-default)}@media all and (min-width: 60rem){.page-container{background:linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0)}}.band__inner{margin-left:2rem;margin-right:2rem}@media all and (min-width: 60rem){.band__inner{margin-right:0}}img{max-width:100%;height:auto}`;
+var w = Object.defineProperty, o = (u, i, t, a) => {
+  for (var e = void 0, n = u.length - 1, d; n >= 0; n--)
+    (d = u[n]) && (e = d(i, t, e) || e);
+  return e && w(i, t, e), e;
 };
-g.register(...x);
-const f = class f extends v {
+b.register(...C);
+const g = class g extends z {
   constructor() {
     super(...arguments), this.type = "bar", this.data = { datasets: [] }, this.options = {}, this.height = 400, this.maintainAspectRatio = !0, this.responsive = !0, this.loading = !1, this.ariaLabel = "Chart", this.showLegend = !0, this.legendPosition = "top", this.enableAnimation = !0, this.animationDuration = 750, this.colors = [
       "#0066B3",
@@ -122,20 +36,20 @@ const f = class f extends v {
   disconnectedCallback() {
     super.disconnectedCallback(), this._isConnected = !1, this._destroyChart();
   }
-  firstUpdated(e) {
-    super.firstUpdated(e), this.loading || this._initializeChart();
+  firstUpdated(i) {
+    super.firstUpdated(i), this.loading || this._initializeChart();
   }
-  updated(e) {
-    if (super.updated(e), e.has("loading") && !this.loading && !this._chartInstance) {
+  updated(i) {
+    if (super.updated(i), i.has("loading") && !this.loading && !this._chartInstance) {
       this._initializeChart();
       return;
     }
     if (!this.loading) {
-      if (e.has("type") && this._chartInstance) {
+      if (i.has("type") && this._chartInstance) {
         this._destroyChart(), this._initializeChart();
         return;
       }
-      (e.has("data") || e.has("options") || e.has("showLegend") || e.has("legendPosition") || e.has("colors")) && this._chartInstance && this._updateChart();
+      (i.has("data") || i.has("options") || i.has("showLegend") || i.has("legendPosition") || i.has("colors")) && this._chartInstance && this._updateChart();
     }
   }
   /**
@@ -144,13 +58,13 @@ const f = class f extends v {
   _initializeChart() {
     if (!this._canvas || !this._isConnected)
       return;
-    const e = this._canvas.getContext("2d");
-    if (!e) {
+    const i = this._canvas.getContext("2d");
+    if (!i) {
       console.error("Cre8Chart: Unable to get canvas 2D context");
       return;
     }
     const t = this._buildChartConfig();
-    this._chartInstance = new g(e, t), this.dispatch({
+    this._chartInstance = new b(i, t), this.dispatch({
       eventName: "cre8-chart-ready",
       detailObj: { chart: this._chartInstance }
     });
@@ -159,10 +73,10 @@ const f = class f extends v {
    * Build the complete Chart.js configuration.
    */
   _buildChartConfig() {
-    const e = this._processData();
+    const i = this._processData();
     return {
       type: this.type,
-      data: e,
+      data: i,
       options: this._mergeOptions()
     };
   }
@@ -172,24 +86,24 @@ const f = class f extends v {
   _processData() {
     if (!this.data || !this.data.datasets)
       return { labels: [], datasets: [] };
-    const e = this.data.datasets.map((t, a) => {
-      const r = a % this.colors.length, o = this.colors[r];
+    const i = this.data.datasets.map((t, a) => {
+      const e = a % this.colors.length, n = this.colors[e];
       if (["pie", "doughnut", "polarArea"].includes(this.type)) {
-        const c = Array.isArray(t.data) ? t.data.length : 0, l = Array.from(
-          { length: c },
-          (h, d) => this.colors[d % this.colors.length]
+        const d = Array.isArray(t.data) ? t.data.length : 0, p = Array.from(
+          { length: d },
+          (m, l) => this.colors[l % this.colors.length]
         );
         return {
           ...t,
-          backgroundColor: t.backgroundColor || l,
+          backgroundColor: t.backgroundColor || p,
           borderColor: t.borderColor || "#ffffff",
           borderWidth: t.borderWidth ?? 2
         };
       }
       return this.type === "line" ? {
         ...t,
-        backgroundColor: t.backgroundColor || `${o}20`,
-        borderColor: t.borderColor || o,
+        backgroundColor: t.backgroundColor || `${n}20`,
+        borderColor: t.borderColor || n,
         borderWidth: t.borderWidth ?? 2,
         fill: t.fill ?? !1,
         tension: t.tension ?? 0.4,
@@ -197,33 +111,33 @@ const f = class f extends v {
         pointHoverRadius: t.pointHoverRadius ?? 6
       } : this.type === "bar" ? {
         ...t,
-        backgroundColor: t.backgroundColor || o,
-        borderColor: t.borderColor || o,
+        backgroundColor: t.backgroundColor || n,
+        borderColor: t.borderColor || n,
         borderWidth: t.borderWidth ?? 0,
         borderRadius: 4
       } : this.type === "radar" ? {
         ...t,
-        backgroundColor: t.backgroundColor || `${o}40`,
-        borderColor: t.borderColor || o,
+        backgroundColor: t.backgroundColor || `${n}40`,
+        borderColor: t.borderColor || n,
         borderWidth: t.borderWidth ?? 2,
-        pointBackgroundColor: o,
+        pointBackgroundColor: n,
         pointBorderColor: "#ffffff"
       } : {
         ...t,
-        backgroundColor: t.backgroundColor || o,
-        borderColor: t.borderColor || o
+        backgroundColor: t.backgroundColor || n,
+        borderColor: t.borderColor || n
       };
     });
     return {
       labels: this.data.labels || [],
-      datasets: e
+      datasets: i
     };
   }
   /**
    * Merge user options with default options.
    */
   _mergeOptions() {
-    const e = {
+    const i = {
       responsive: this.responsive,
       maintainAspectRatio: this.maintainAspectRatio,
       animation: this.enableAnimation ? { duration: this.animationDuration } : !1,
@@ -255,20 +169,20 @@ const f = class f extends v {
           cornerRadius: 8,
           callbacks: {
             label: (t) => {
-              const a = t.dataset.label || "", r = t.parsed.y ?? t.parsed;
-              return `${a}: ${r}`;
+              const a = t.dataset.label || "", e = t.parsed.y ?? t.parsed;
+              return `${a}: ${e}`;
             }
           }
         }
       },
-      onClick: (t, a, r) => {
-        this._handleChartClick(t, a, r);
+      onClick: (t, a, e) => {
+        this._handleChartClick(t, a, e);
       },
-      onHover: (t, a, r) => {
-        this._handleChartHover(t, a, r);
+      onHover: (t, a, e) => {
+        this._handleChartHover(t, a, e);
       }
     };
-    return ["line", "bar", "scatter", "bubble"].includes(this.type) && (e.scales = {
+    return ["line", "bar", "scatter", "bubble"].includes(this.type) && (i.scales = {
       x: {
         grid: {
           display: !0,
@@ -296,18 +210,18 @@ const f = class f extends v {
         },
         beginAtZero: !0
       }
-    }), this._deepMerge(e, this.options);
+    }), this._deepMerge(i, this.options);
   }
   /**
    * Deep merge two objects.
    */
-  _deepMerge(e, t) {
-    const a = { ...e };
-    for (const r in t)
-      Object.prototype.hasOwnProperty.call(t, r) && (t[r] && typeof t[r] == "object" && !Array.isArray(t[r]) ? a[r] = this._deepMerge(
-        e[r] || {},
-        t[r]
-      ) : a[r] = t[r]);
+  _deepMerge(i, t) {
+    const a = { ...i };
+    for (const e in t)
+      Object.prototype.hasOwnProperty.call(t, e) && (t[e] && typeof t[e] == "object" && !Array.isArray(t[e]) ? a[e] = this._deepMerge(
+        i[e] || {},
+        t[e]
+      ) : a[e] = t[e]);
     return a;
   }
   /**
@@ -316,8 +230,8 @@ const f = class f extends v {
   _updateChart() {
     if (!this._chartInstance)
       return;
-    const e = this._processData();
-    this._chartInstance.data = e, this._chartInstance.options = this._mergeOptions(), this._chartInstance.update(this.enableAnimation ? "default" : "none");
+    const i = this._processData();
+    this._chartInstance.data = i, this._chartInstance.options = this._mergeOptions(), this._chartInstance.update(this.enableAnimation ? "default" : "none");
   }
   /**
    * Destroy the chart instance.
@@ -328,36 +242,36 @@ const f = class f extends v {
   /**
    * Handle chart click events.
    */
-  _handleChartClick(e, t, a) {
+  _handleChartClick(i, t, a) {
     if (t.length > 0) {
-      const r = t[0], o = r.datasetIndex, c = r.index, h = this.data.datasets[o]?.data[c], d = this.data.labels?.[c], p = {
-        event: e,
+      const e = t[0], n = e.datasetIndex, d = e.index, m = this.data.datasets[n]?.data[d], l = this.data.labels?.[d], c = {
+        event: i,
         elements: t,
         chart: a,
-        dataIndex: c,
-        datasetIndex: o,
-        value: h,
-        label: d
+        dataIndex: d,
+        datasetIndex: n,
+        value: m,
+        label: l
       };
-      this.dispatch({ eventName: "cre8-chart-click", detailObj: p });
+      this.dispatch({ eventName: "cre8-chart-click", detailObj: c });
     }
   }
   /**
    * Handle chart hover events.
    */
-  _handleChartHover(e, t, a) {
-    const r = a.canvas;
-    if (r.style.cursor = t.length > 0 ? "pointer" : "default", t.length > 0) {
-      const o = t[0], c = o.datasetIndex, l = o.index, d = this.data.datasets[c]?.data[l], p = this.data.labels?.[l], _ = {
-        event: e,
+  _handleChartHover(i, t, a) {
+    const e = a.canvas;
+    if (e.style.cursor = t.length > 0 ? "pointer" : "default", t.length > 0) {
+      const n = t[0], d = n.datasetIndex, p = n.index, l = this.data.datasets[d]?.data[p], c = this.data.labels?.[p], y = {
+        event: i,
         elements: t,
         chart: a,
-        dataIndex: l,
-        datasetIndex: c,
-        value: d,
-        label: p
+        dataIndex: p,
+        datasetIndex: d,
+        value: l,
+        label: c
       };
-      this.dispatch({ eventName: "cre8-chart-hover", detailObj: _ });
+      this.dispatch({ eventName: "cre8-chart-hover", detailObj: y });
     }
   }
   /**
@@ -375,27 +289,27 @@ const f = class f extends v {
   /**
    * Public method to download chart as image.
    */
-  downloadImage(e = "chart.png") {
+  downloadImage(i = "chart.png") {
     if (!this._chartInstance)
       return;
     const t = this._chartInstance.toBase64Image(), a = document.createElement("a");
-    a.download = e, a.href = t, a.click();
+    a.download = i, a.href = t, a.click();
   }
   render() {
-    const e = this.componentClassNames("cre8-c-chart", {
+    const i = this.componentClassNames("cre8-c-chart", {
       "cre8-c-chart--loading": this.loading
     }), t = `
             width: ${this.width ? `${this.width}px` : "100%"};
             height: ${this.height}px;
         `;
-    return u`
-            <div class="${e}" style="${t}">
-                ${this.loading ? u`
+    return h`
+            <div class="${i}" style="${t}">
+                ${this.loading ? h`
                         <div class="cre8-c-chart__loading">
                             <div class="cre8-c-chart__spinner"></div>
                             <span class="cre8-c-chart__loading-text">Loading chart...</span>
                         </div>
-                    ` : u`
+                    ` : h`
                         <canvas
                             role="img"
                             aria-label="${this.ariaLabel}"
@@ -405,61 +319,61 @@ const f = class f extends v {
         `;
   }
 };
-f.styles = [I];
-let i = f;
-s([
-  n({ type: String })
-], i.prototype, "type");
-s([
-  n({ type: Object, attribute: !1 })
-], i.prototype, "data");
-s([
-  n({ type: Object, attribute: !1 })
-], i.prototype, "options");
-s([
-  n({ type: Number })
-], i.prototype, "width");
-s([
-  n({ type: Number })
-], i.prototype, "height");
-s([
-  n({ type: Boolean, attribute: "maintain-aspect-ratio" })
-], i.prototype, "maintainAspectRatio");
-s([
-  n({ type: Boolean })
-], i.prototype, "responsive");
-s([
-  n({ type: Boolean, reflect: !0 })
-], i.prototype, "loading");
-s([
-  n({ type: String, attribute: "aria-label" })
-], i.prototype, "ariaLabel");
-s([
-  n({ type: Boolean, attribute: "show-legend" })
-], i.prototype, "showLegend");
-s([
-  n({ type: String, attribute: "legend-position" })
-], i.prototype, "legendPosition");
-s([
-  n({ type: Boolean, attribute: "enable-animation" })
-], i.prototype, "enableAnimation");
-s([
-  n({ type: Number, attribute: "animation-duration" })
-], i.prototype, "animationDuration");
-s([
-  n({ type: Array, attribute: !1 })
-], i.prototype, "colors");
-s([
-  y()
-], i.prototype, "_chartInstance");
-s([
-  y()
-], i.prototype, "_isConnected");
-s([
-  C("canvas")
-], i.prototype, "_canvas");
-customElements.get("cre8-chart") === void 0 && customElements.define("cre8-chart", i);
+g.styles = [v];
+let r = g;
+o([
+  s({ type: String })
+], r.prototype, "type");
+o([
+  s({ type: Object, attribute: !1 })
+], r.prototype, "data");
+o([
+  s({ type: Object, attribute: !1 })
+], r.prototype, "options");
+o([
+  s({ type: Number })
+], r.prototype, "width");
+o([
+  s({ type: Number })
+], r.prototype, "height");
+o([
+  s({ type: Boolean, attribute: "maintain-aspect-ratio" })
+], r.prototype, "maintainAspectRatio");
+o([
+  s({ type: Boolean })
+], r.prototype, "responsive");
+o([
+  s({ type: Boolean, reflect: !0 })
+], r.prototype, "loading");
+o([
+  s({ type: String, attribute: "aria-label" })
+], r.prototype, "ariaLabel");
+o([
+  s({ type: Boolean, attribute: "show-legend" })
+], r.prototype, "showLegend");
+o([
+  s({ type: String, attribute: "legend-position" })
+], r.prototype, "legendPosition");
+o([
+  s({ type: Boolean, attribute: "enable-animation" })
+], r.prototype, "enableAnimation");
+o([
+  s({ type: Number, attribute: "animation-duration" })
+], r.prototype, "animationDuration");
+o([
+  s({ type: Array, attribute: !1 })
+], r.prototype, "colors");
+o([
+  f()
+], r.prototype, "_chartInstance");
+o([
+  f()
+], r.prototype, "_isConnected");
+o([
+  _("canvas")
+], r.prototype, "_canvas");
+customElements.get("cre8-chart") === void 0 && customElements.define("cre8-chart", r);
 export {
-  i as Cre8Chart,
-  i as default
+  r as Cre8Chart,
+  r as default
 };

package/lib/components/chart/chart.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart.styles.d.ts","sourceRoot":"","sources":["../../../components/chart/chart.styles.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,MAAM,yBAsFX,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"chart.styles.d.ts","sourceRoot":"","sources":["../../../components/chart/chart.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAoqK,CAAC;AACjrK,eAAe,MAAM,CAAC"}

package/lib/components/checkbox-field/checkbox-field.js

@@ -1,66 +1,33 @@
-import { css as p, html as f } from "lit";
-import { ifDefined as r } from "lit-html/directives/if-defined.js";
+import { css as h, html as p } from "lit";
+import { ifDefined as l } from "lit-html/directives/if-defined.js";
 import { property as t } from "lit/decorators.js";
-import { nanoid as m } from "nanoid";
-import { Cre8Element as h } from "../cre8-element.js";
+import { nanoid as f } from "nanoid";
+import { Cre8Element as m } from "../cre8-element.js";
 import "../field-note/field-note.js";
-const b = p`@import '../../design-tokens/core/scss/theming/component';
-
-/*------------------------------------*\
- #CHECKBOX-FIELD
-\*------------------------------------*/
-
-:host {
-  display: flex;
-}
-
-/** 
- * 1) Fieldset used for checkbox items
- */
-.cre8-c-checkbox-field {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-/** 
-   * Checkbox field legend
-   */
-.cre8-c-checkbox-field__legend {
-  @include cre8-typography-label-small();
-  margin-bottom: calc(8px * 1);
-}
-
-/** 
-   * Checkbox list
-   */
-.cre8-c-checkbox-field__list {
-  display: flex;
-  flex-direction: column;
-}`;
-var y = Object.defineProperty, o = (d, c, n, u) => {
-  for (var i = void 0, s = d.length - 1, a; s >= 0; s--)
-    (a = d[s]) && (i = a(c, n, i) || i);
-  return i && y(c, n, i), i;
+const x = h`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:flex}.cre8-c-checkbox-field{border:none;padding:0;margin:0}.cre8-c-checkbox-field__legend{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);margin-bottom:0.5rem}.cre8-c-checkbox-field__list{display:flex;flex-direction:column}`;
+var y = Object.defineProperty, r = (d, a, c, g) => {
+  for (var i = void 0, s = d.length - 1, n; s >= 0; s--)
+    (n = d[s]) && (i = n(a, c, i) || i);
+  return i && y(a, c, i), i;
 };
-const l = class l extends h {
+const o = class o extends m {
   connectedCallback() {
-    super.connectedCallback(), this.fieldNote && (this.ariaDescribedBy = this.ariaDescribedBy || m());
+    super.connectedCallback(), this.fieldNote && (this.ariaDescribedBy = this.ariaDescribedBy || f());
   }
   render() {
-    const c = this.componentClassNames("cre8-c-checkbox-field", {});
-    return f`
-      <fieldset class="${c}" aria-describedby="${r(this.ariaDescribedBy)}">
+    const a = this.componentClassNames("cre8-c-checkbox-field", {});
+    return p`
+      <fieldset class="${a}" aria-describedby="${l(this.ariaDescribedBy)}">
       <legend class="cre8-c-checkbox-field__legend">${this.label}</legend>
         <div class="cre8-c-checkbox-field__body">
           <div class="cre8-c-checkbox-field__list" role="list">
             <slot></slot>
           </div>
         </div>
-        ${this.fieldNote ? f`<cre8-field-note
+        ${this.fieldNote ? p`<cre8-field-note
           ?inverted=${this.fieldNoteKnockout}
-          id=${r(this.ariaDescribedBy)}
-          iconName=${r(this.fieldNoteIconName)}
+          id=${l(this.ariaDescribedBy)}
+          iconName=${l(this.fieldNoteIconName)}
           ?isSuccess=${this.fieldNoteIsSuccess}
           ?isError=${this.fieldNoteIsError}
         >
@@ -70,27 +37,27 @@ const l = class l extends h {
     `;
   }
 };
-l.styles = [b];
-let e = l;
-o([
+o.styles = [x];
+let e = o;
+r([
   t()
 ], e.prototype, "label");
-o([
+r([
   t()
 ], e.prototype, "fieldNote");
-o([
+r([
   t()
 ], e.prototype, "ariaDescribedBy");
-o([
+r([
   t()
 ], e.prototype, "fieldNoteIconName");
-o([
+r([
   t({ type: Boolean, reflect: !0 })
 ], e.prototype, "fieldNoteKnockout");
-o([
+r([
   t({ type: Boolean, reflect: !0 })
 ], e.prototype, "fieldNoteIsSuccess");
-o([
+r([
   t({ type: Boolean, reflect: !0 })
 ], e.prototype, "fieldNoteIsError");
 customElements.get("cre8-checkbox-field") === void 0 && customElements.define("cre8-checkbox-field", e);

package/lib/components/checkbox-field/checkbox-field.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-field.styles.d.ts","sourceRoot":"","sources":["../../../components/checkbox-field/checkbox-field.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAiCV,CAAC;AACH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"checkbox-field.styles.d.ts","sourceRoot":"","sources":["../../../components/checkbox-field/checkbox-field.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAyzE,CAAC;AACt0E,eAAe,MAAM,CAAC"}