@design.estate/dees-catalog 3.76.1 → 3.77.0

package/dist_bundle/bundle.js

@@ -143064,12 +143064,6 @@ var demoFunc13 = /* @__PURE__ */ __name(() => b2`
         flex-wrap: wrap;
       }
       
-      .input-group {
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-      }
-
       .grid-layout {
         display: grid;
         grid-template-columns: 1fr 1fr;
@@ -144385,12 +144379,6 @@ var demoFunc15 = /* @__PURE__ */ __name(() => b2`
           margin: 0 auto;
         }
         
-        .input-group {
-          display: flex;
-          flex-direction: column;
-          gap: 16px;
-        }
-
         .shopping-grid {
           display: grid;
           grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
@@ -144792,12 +144780,6 @@ var demoFunc16 = /* @__PURE__ */ __name(() => b2`
           margin-bottom: 0;
         }
         
-        .input-group {
-          display: flex;
-          flex-direction: column;
-          gap: 16px;
-        }
-
         .demo-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -145508,12 +145490,6 @@ var demoFunc18 = /* @__PURE__ */ __name(() => b2`
         flex-wrap: wrap;
       }
       
-      .input-group {
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-      }
-
       .spacer {
         height: 200px;
         display: flex;
@@ -148770,12 +148746,6 @@ var demoFunc20 = /* @__PURE__ */ __name(() => b2`
           margin: 0 auto;
         }
         
-        .input-group {
-          display: flex;
-          flex-direction: column;
-          gap: 16px;
-        }
-
         .payment-group {
           display: flex;
           align-items: center;
@@ -149353,12 +149323,6 @@ var demoFunc22 = /* @__PURE__ */ __name(() => b2`
           margin: 0 auto;
         }
         
-        .input-group {
-          display: flex;
-          flex-direction: column;
-          gap: 16px;
-        }
-
         .horizontal-group {
           display: flex;
           align-items: center;
@@ -150181,12 +150145,6 @@ var demoFunc24 = /* @__PURE__ */ __name(() => b2`
           margin: 0 auto;
         }
         
-        .input-group {
-          display: flex;
-          flex-direction: column;
-          gap: 16px;
-        }
-
         .horizontal-group {
           display: flex;
           gap: 24px;
@@ -164614,11 +164572,44 @@ var tableStyles = [
         100% { color: var(--dees-color-text-primary); }
       }
 
+      /* Border/background flash variant for cells with styled content
+         (badges, icons, custom components) where a text-color animation
+         would be invisible. Activated via flashBorder on Column. */
+      .innerCellContainer.flashing-border {
+        animation: dees-table-cell-flash-border
+                   var(--dees-table-flash-duration, 900ms)
+                   var(--dees-table-flash-easing);
+        border-radius: 3px;
+      }
+
+      @keyframes dees-table-cell-flash-border {
+        0%,
+        35% {
+          box-shadow: inset 0 0 0 1.5px var(--dees-table-flash-color);
+          background: ${cssManager.bdTheme(
+    "hsl(45 93% 62% / 0.10)",
+    "hsl(45 93% 62% / 0.08)"
+  )};
+        }
+        100% {
+          box-shadow: inset 0 0 0 1.5px transparent;
+          background: transparent;
+        }
+      }
+
       @media (prefers-reduced-motion: reduce) {
         .innerCellContainer.flashing {
           animation: none;
           color: var(--dees-table-flash-color);
         }
+        .innerCellContainer.flashing-border {
+          animation: none;
+          box-shadow: inset 0 0 0 1.5px var(--dees-table-flash-color);
+          background: ${cssManager.bdTheme(
+    "hsl(45 93% 62% / 0.10)",
+    "hsl(45 93% 62% / 0.08)"
+  )};
+        }
       }
 
       /* Dev-time warning banner shown when highlight-updates="flash" but
@@ -165559,13 +165550,15 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
           const isFocused = this.__focusedCell?.rowId === rowId && this.__focusedCell?.colKey === editKey;
           const isEditing = this.__editingCell?.rowId === rowId && this.__editingCell?.colKey === editKey;
           const isFlashing = !!flashSet?.has(editKey);
+          const useFlashBorder = isFlashing && !!col.flashBorder;
           const cellClasses = [
             isEditable ? "editable" : "",
             isFocused && !isEditing ? "focused" : "",
             isEditing ? "editingCell" : ""
           ].filter(Boolean).join(" ");
+          const flashClass = isFlashing ? useFlashBorder ? "innerCellContainer flashing-border" : "innerCellContainer flashing" : "innerCellContainer";
           const innerHtml = b2`<div
-                              class=${isFlashing ? "innerCellContainer flashing" : "innerCellContainer"}
+                              class=${flashClass}
                             >
                               ${isEditing ? this.renderCellEditor(itemArg, col) : content3}
                             </div>`;
@@ -166097,6 +166090,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     if (!changedProperties.has("data")) return;
     const effectiveColumns = this.__getEffectiveColumns();
     const visibleCols = effectiveColumns.filter((c11) => !c11.hidden);
+    const colByKey = new Map(visibleCols.map((c11) => [String(c11.key), c11]));
     const nextSnapshot = /* @__PURE__ */ new Map();
     const newlyFlashing = /* @__PURE__ */ new Map();
     for (const row of this.data) {
@@ -166109,7 +166103,17 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
       const prevCells = this.__prevSnapshot?.get(rowId);
       if (!prevCells) continue;
       for (const [colKey, nextVal] of cellMap) {
-        if (prevCells.get(colKey) !== nextVal) {
+        const prevVal = prevCells.get(colKey);
+        const colDef = colByKey.get(colKey);
+        let changed;
+        if (colDef?.flashCompare) {
+          changed = colDef.flashCompare(prevVal, nextVal);
+        } else if (nextVal !== null && nextVal !== void 0 && typeof nextVal === "object") {
+          changed = false;
+        } else {
+          changed = prevVal !== nextVal;
+        }
+        if (changed) {
           if (this.__editingCell && this.__editingCell.rowId === rowId && this.__editingCell.colKey === colKey) continue;
           let set3 = newlyFlashing.get(rowId);
           if (!set3) {
@@ -201448,7 +201452,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "3.76.1",
+  version: "3.77.0",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };
 export {
@@ -203413,4 +203417,4 @@ ibantools/jsnext/ibantools.js:
    * @preferred
    *)
 */
-//# sourceMappingURL=bundle-1776020698391.js.map
+//# sourceMappingURL=bundle-1776025100805.js.map

package/dist_ts_web/00_commitinfo_data.js

@@ -3,7 +3,7 @@
  */
 export const commitinfo = {
     name: '@design.estate/dees-catalog',
-    version: '3.76.1',
+    version: '3.77.0',
     description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 };
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUsNkJBQTZCO0lBQ25DLE9BQU8sRUFBRSxRQUFRO0lBQ2pCLFdBQVcsRUFBRSxzSkFBc0o7Q0FDcEssQ0FBQSJ9