@m4l/components 9.38.0 → 9.40.0

package/components/DynamicFilter/DynamicFilter.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicFilter.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/DynamicFilter/DynamicFilter.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAInD,eAAO,MAAM,mBAAmB,EAAE,mBAkejC,CAAC"}
+{"version":3,"file":"DynamicFilter.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/DynamicFilter/DynamicFilter.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAInD,eAAO,MAAM,mBAAmB,EAAE,mBAwfjC,CAAC"}

package/components/DynamicFilter/DynamicFilter.styles.js

@@ -1,23 +1,23 @@
 import { getTypographyStyles as e } from "../../utils/getTypographyStyles.js";
-import { getSizeStyles as i } from "../../utils/getSizeStyles/getSizeStyles.js";
-const n = "dynamic", p = {
+import { getSizeStyles as o } from "../../utils/getSizeStyles/getSizeStyles.js";
+const t = "dynamic", p = {
   /**
    * root: Estilos del contenedor principal del componente.
    */
-  root: ({ theme: r, ownerState: a }) => ({
-    containerName: n,
+  root: ({ theme: r, ownerState: i }) => ({
+    containerName: t,
     containerType: "inline-size",
     width: "100%",
     height: "auto",
     padding: 0,
-    ...i(
+    ...o(
       r,
-      a?.size || "medium",
+      i?.size || "medium",
       "container",
-      (o) => ({
-        height: o,
-        maxHeight: o,
-        minHeight: o
+      (a) => ({
+        height: a,
+        maxHeight: a,
+        minHeight: a
       })
     )
   }),
@@ -40,7 +40,7 @@ const n = "dynamic", p = {
    * Ahora se usa como header dentro del `PopoverMenuFields`, donde el icono
    * queda a la izquierda y el input "Filtrar por" se alinea a continuación.
    */
-  inputFilter: ({ theme: r, ownerState: a }) => ({
+  inputFilter: ({ theme: r, ownerState: i }) => ({
     display: "flex",
     flexDirection: "row",
     paddingLeft: r.vars.size.baseSpacings.sp2,
@@ -50,12 +50,12 @@ const n = "dynamic", p = {
     alignItems: "center",
     borderRadius: r.vars.size.borderRadius["r1-5"],
     backgroundColor: r.vars.palette.default.enabledOpacity,
-    ...i(
+    ...o(
       r,
-      a?.size || "medium",
+      i?.size || "medium",
       "container",
-      (o) => ({
-        height: o
+      (a) => ({
+        height: a
       })
     )
   }),
@@ -66,11 +66,11 @@ const n = "dynamic", p = {
    * el chip "Más" activo — fondo `info.contained.backgroundColor` y border
    * `info.semanticText` — para mantener consistencia visual.
    */
-  inputFilterTriggerButton: ({ theme: r, ownerState: a }) => ({
+  inputFilterTriggerButton: ({ theme: r, ownerState: i }) => ({
     flexShrink: 0,
     cursor: "pointer",
     borderRadius: r.vars.size.borderRadius.r1,
-    ...a?.selected && {
+    ...i?.selected && {
       backgroundColor: `${r.vars.palette.chips.info.contained.backgroundColor} !important`,
       border: `${r.vars.size.borderStroke.container} ${r.vars.palette.info.semanticText}`,
       outline: "none !important",
@@ -84,23 +84,23 @@ const n = "dynamic", p = {
   /**
    * inputFilterInput: Estilos del campo de entrada de filtrado.
    */
-  inputFilterInput: ({ theme: r, ownerState: a }) => ({
+  inputFilterInput: ({ theme: r, ownerState: i }) => ({
     width: "100%",
     background: "#ffffff00",
-    ...i(
+    ...o(
       r,
-      a?.size || "medium",
+      i?.size || "medium",
       "action",
-      (o) => ({
-        height: o,
-        minHeight: o,
-        maxHeight: o
+      (a) => ({
+        height: a,
+        minHeight: a,
+        maxHeight: a
       })
     ),
     fontFamily: "inherit",
     ...e(
       r.generalSettings.isMobile,
-      a?.size || "medium",
+      i?.size || "medium",
       "bodyStandard"
     ),
     color: r.vars.palette.text.secondary,
@@ -123,7 +123,7 @@ const n = "dynamic", p = {
   /**
    * appliedFilters: Estilos del contenedor de los filtros aplicados.
    */
-  appliedFilters: ({ theme: r, ownerState: a }) => ({
+  appliedFilters: ({ theme: r, ownerState: i }) => ({
     width: "100%",
     height: "fit-content",
     display: "flex",
@@ -133,22 +133,25 @@ const n = "dynamic", p = {
     margin: "0px",
     padding: "0px",
     flex: 1,
+    // min-width:0 lets this flex item shrink below its content min-content so
+    // the empty-state label can truncate with ellipsis instead of overflowing.
+    minWidth: 0,
     overflow: "hidden",
-    ...i(
+    ...o(
       r,
-      a?.size || "medium",
+      i?.size || "medium",
       "container",
-      (o) => ({
-        height: o,
-        maxHeight: o,
-        minHeight: o
+      (a) => ({
+        height: a,
+        maxHeight: a,
+        minHeight: a
       })
     )
   }),
   /**
    * appliedFilterInnerContainer: Estilos del contenedor interno de los filtros aplicados.
    */
-  appliedFilterInnerContainer: ({ theme: r, ownerState: a }) => ({
+  appliedFilterInnerContainer: ({ theme: r, ownerState: i }) => ({
     padding: r.vars.size.baseSpacings["sp0-5"],
     gap: r.vars.size.baseSpacings.sp1,
     height: "fit-content",
@@ -172,12 +175,12 @@ const n = "dynamic", p = {
       // (r1-5 = 6px). Este override por descendencia gana por especificidad
       // sobre el radio base del Chip, por eso debe fijar r1-5 explícitamente.
       borderRadius: r.vars.size.borderRadius["r1-5"],
-      ...i(
+      ...o(
         r,
-        a?.size || "medium",
+        i?.size || "medium",
         "action",
-        (o) => ({
-          height: o
+        (a) => ({
+          height: a
         })
       ),
       "& .M4LIconButton-styledMUIIconButton:hover": {
@@ -194,15 +197,34 @@ const n = "dynamic", p = {
    * para desaturar el mensaje y no competir visualmente con los chips.
    */
   emptyStateLabel: ({ theme: r }) => ({
-    display: "inline-flex",
-    alignItems: "center",
+    // Truncate with ellipsis when the label does not fit (e.g. narrow column).
+    display: "block",
+    minWidth: 0,
+    maxWidth: "100%",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
     color: r.vars.palette.text.secondary,
     cursor: "pointer"
   }),
+  /**
+   * appliedFilterChipLabel: Acota el ancho del label del chip en la barra y lo
+   * trunca con ellipsis. Evita que un valor largo infle el filtro y empuje el
+   * sort a otro renglón; el valor completo sigue visible en "Más (N)".
+   */
+  appliedFilterChipLabel: () => ({
+    display: "inline-block",
+    maxWidth: 300,
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    verticalAlign: "middle"
+  }),
   /**
    * actions: Estilos del contenedor de los botones de acción.
    */
-  actions: ({ theme: r, ownerState: a }) => ({
+  actions: ({ theme: r, ownerState: i }) => ({
     gridArea: "actions-filter",
     overflow: "hidden",
     display: "flex",
@@ -213,7 +235,7 @@ const n = "dynamic", p = {
     alignItems: "center",
     borderTopRightRadius: r.vars.size.borderRadius.r1,
     borderBottomRightRadius: r.vars.size.borderRadius.r1,
-    ...!a?.visibleRefresh && !a?.isDirty && {
+    ...!i?.visibleRefresh && !i?.isDirty && {
       display: "none"
     }
   }),
@@ -236,8 +258,8 @@ const n = "dynamic", p = {
   /**
    * actionsSubmitButton: Estilos del botón de acción de filtrado.
    */
-  actionsSubmitButton: ({ theme: r, ownerState: a }) => ({
-    ...a?.isDirty ? {
+  actionsSubmitButton: ({ theme: r, ownerState: i }) => ({
+    ...i?.isDirty ? {
       animation: "changeBgColor 0.9s ease infinite",
       "& .M4LIcon-icon": {
         background: `${r.vars.palette.primary.main} !important`
@@ -314,19 +336,19 @@ const n = "dynamic", p = {
   /**
    * inputSortInputSkeleton: Estilos del esqueleto del campo de entrada de ordenamiento.
    */
-  inputFilterInputSkeleton: ({ theme: r, ownerState: a }) => ({
+  inputFilterInputSkeleton: ({ theme: r, ownerState: i }) => ({
     width: "100%",
     minWidth: "80px",
     marginLeft: r.vars.size.baseSpacings.sp2,
     marginRight: r.vars.size.baseSpacings.sp2,
-    ...i(
+    ...o(
       r,
-      a?.size || "medium",
+      i?.size || "medium",
       "base",
-      (o) => ({
-        height: o,
-        minHeight: o,
-        maxHeight: o
+      (a) => ({
+        height: a,
+        minHeight: a,
+        maxHeight: a
       })
     )
   }),
@@ -341,10 +363,10 @@ const n = "dynamic", p = {
   /**
    * chipWrapper: Wrapper for each chip used for overflow measurement.
    */
-  chipWrapper: ({ theme: r, ownerState: a }) => ({
+  chipWrapper: ({ theme: r, ownerState: i }) => ({
     display: "inline-flex",
     flexShrink: 0,
-    ...a?.isWarning && {
+    ...i?.isWarning && {
       "@keyframes m4lDynamicFilterWarningPulse": {
         "0%, 100%": {
           backgroundColor: r.vars.palette.chips.warning.contained.backgroundColor
@@ -361,7 +383,7 @@ const n = "dynamic", p = {
   /**
    * overflowMoreChip: Styles for the "More (N)..." chip button that appears when filters overflow.
    */
-  overflowMoreChip: ({ theme: r, ownerState: a }) => ({
+  overflowMoreChip: ({ theme: r, ownerState: i }) => ({
     flexShrink: 0,
     cursor: "pointer",
     // Match the applied filter chips radius (r1-5 = 6px) so the "More (N)"
@@ -369,18 +391,18 @@ const n = "dynamic", p = {
     // Igualar el radio de los chips aplicados (r1-5 = 6px) para que el botón
     // "More (N)" sea visualmente consistente con el resto de la fila de chips.
     borderRadius: r.vars.size.borderRadius["r1-5"],
-    ...i(
+    ...o(
       r,
-      a?.size || "medium",
+      i?.size || "medium",
       "action",
-      (o) => ({
-        height: o
+      (a) => ({
+        height: a
       })
     ),
     // While the overflow popover is open, lock the chip to the info palette's
     // background and add the container border in `info.semanticText` so the
     // chip visually stays active regardless of hover/focus transitions.
-    ...a?.selected && {
+    ...i?.selected && {
       backgroundColor: `${r.vars.palette.chips.info.contained.backgroundColor} !important`,
       border: `${r.vars.size.borderStroke.container} ${r.vars.palette.info.semanticText}`,
       outline: "none !important",
@@ -418,7 +440,7 @@ const n = "dynamic", p = {
    * overflowPopoverItem: Styles for each filter item inside the overflow popover.
    * Row layout: icon | text column | close button, all vertically centered.
    */
-  overflowPopoverItem: ({ theme: r, ownerState: a }) => ({
+  overflowPopoverItem: ({ theme: r, ownerState: i }) => ({
     display: "flex",
     alignItems: "center",
     alignSelf: "stretch",
@@ -432,7 +454,7 @@ const n = "dynamic", p = {
     "&:hover": {
       backgroundColor: `${r.vars.palette.default.hoverOpacity} !important`
     },
-    ...a?.selected && {
+    ...i?.selected && {
       backgroundColor: `${r.vars.palette.default.hoverOpacity} !important`
     },
     "&:last-child": {

package/components/DynamicFilter/hooks/useChipsOverflow.d.ts

@@ -26,5 +26,6 @@ export declare function useChipsOverflow(filters: FilterFieldApplied[]): {
     setChipRef: (id: number, el: HTMLElement | null) => void;
     setMoreChipRef: (el: HTMLElement | null) => void;
     setActionsRef: (el: HTMLElement | null) => void;
+    setLeadingRef: (el: HTMLElement | null) => void;
 };
 //# sourceMappingURL=useChipsOverflow.d.ts.map

package/components/DynamicFilter/hooks/useChipsOverflow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useChipsOverflow.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/DynamicFilter/hooks/useChipsOverflow.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAEnD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,EAAE;;;;;qBAmHxB,MAAM,MAAM,WAAW,GAAG,IAAI;yBAc3D,WAAW,GAAG,IAAI;wBAalB,WAAW,GAAG,IAAI;EA6D1B"}
+{"version":3,"file":"useChipsOverflow.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/DynamicFilter/hooks/useChipsOverflow.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAEnD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,EAAE;;;;;qBA2HxB,MAAM,MAAM,WAAW,GAAG,IAAI;yBAc3D,WAAW,GAAG,IAAI;wBAalB,WAAW,GAAG,IAAI;wBAYlB,WAAW,GAAG,IAAI;EA8D1B"}

package/components/DynamicFilter/hooks/useChipsOverflow.js

@@ -1,77 +1,83 @@
-import { useRef as i, useState as j, useEffect as m, useCallback as d, useMemo as D } from "react";
-import { calculateVisibleChipsCount as S } from "../helpers/calculateVisibleChipsCount.js";
-function K(t) {
-  const h = i(null), v = i(null), R = i(null), C = i(null), p = i(/* @__PURE__ */ new Map()), s = i(/* @__PURE__ */ new Map()), [a, u] = j(null);
-  m(() => {
+import { useRef as s, useState as J, useEffect as R, useCallback as u, useMemo as K } from "react";
+import { calculateVisibleChipsCount as L } from "../helpers/calculateVisibleChipsCount.js";
+function X(t) {
+  const h = s(null), m = s(null), v = s(null), C = s(null), W = s(null), p = s(/* @__PURE__ */ new Map()), i = s(/* @__PURE__ */ new Map()), [a, d] = J(null);
+  R(() => {
     const e = new Set(t.map((r) => r.id));
-    for (const r of s.current.keys())
-      e.has(r) || s.current.delete(r);
-    t.some((r) => !s.current.has(r.id)) && u(null);
+    for (const r of i.current.keys())
+      e.has(r) || i.current.delete(r);
+    t.some((r) => !i.current.has(r.id)) && d(null);
   }, [t]);
-  const o = d(() => {
-    const e = h.current, n = v.current;
-    if (!e || !n || t.length === 0) {
-      u(null);
+  const n = u(() => {
+    const e = h.current, o = m.current;
+    if (!e || !o || t.length === 0) {
+      d(null);
       return;
     }
     if (t.forEach((c) => {
       const g = p.current.get(c.id);
-      g && g.offsetWidth > 0 && s.current.set(c.id, g.offsetWidth);
-    }), !t.every((c) => s.current.has(c.id)))
+      g && g.offsetWidth > 0 && i.current.set(c.id, g.offsetWidth);
+    }), !t.every((c) => i.current.has(c.id)))
       return;
-    const b = getComputedStyle(e), f = getComputedStyle(n), k = parseFloat(b.paddingLeft) || 0, I = parseFloat(b.paddingRight) || 0, U = parseFloat(f.paddingLeft) || 0, V = parseFloat(f.paddingRight) || 0, l = parseFloat(f.gap) || 0, F = e.getBoundingClientRect().width || e.clientWidth;
+    const b = getComputedStyle(e), f = getComputedStyle(o), V = parseFloat(b.paddingLeft) || 0, q = parseFloat(b.paddingRight) || 0, x = parseFloat(f.paddingLeft) || 0, z = parseFloat(f.paddingRight) || 0, l = parseFloat(f.gap) || 0, F = e.getBoundingClientRect().width || e.clientWidth;
     if (F === 0)
       return;
-    const W = C.current?.offsetWidth ?? 0, q = W > 0 ? W + l : 0, w = F - k - I - U - V - q, M = t.map((c) => s.current.get(c.id) ?? 0);
-    if (S(w, l, M) >= t.length) {
-      u(t.length);
+    const w = C.current?.offsetWidth ?? 0, B = w > 0 ? w + l : 0, M = W.current?.offsetWidth ?? 0, j = M > 0 ? M + l : 0, y = F - V - q - x - z - B - j, S = t.map((c) => i.current.get(c.id) ?? 0);
+    if (L(y, l, S) >= t.length) {
+      d(t.length);
       return;
     }
-    const y = R.current?.offsetWidth ?? 0, x = y > 0 ? y + l : 0, z = w - x, B = S(z, l, M);
-    u(B);
-  }, [t]), E = d((e, n) => {
-    n ? p.current.set(e, n) : p.current.delete(e);
-  }, []), A = d(
+    const E = v.current?.offsetWidth ?? 0, D = E > 0 ? E + l : 0, G = y - D, H = L(G, l, S);
+    d(H);
+  }, [t]), A = u((e, o) => {
+    o ? p.current.set(e, o) : p.current.delete(e);
+  }, []), P = u(
     (e) => {
-      R.current = e, o();
+      v.current = e, n();
     },
-    [o]
-  ), L = d(
+    [n]
+  ), O = u(
     (e) => {
-      C.current = e, o();
+      C.current = e, n();
     },
-    [o]
+    [n]
+  ), k = u(
+    (e) => {
+      W.current = e, n();
+    },
+    [n]
   );
-  m(() => {
+  R(() => {
     const e = h.current;
     if (!e)
       return;
-    const n = new ResizeObserver(() => {
-      o();
+    const o = new ResizeObserver(() => {
+      n();
     });
-    return n.observe(e), () => {
-      n.disconnect();
+    return o.observe(e), () => {
+      o.disconnect();
     };
-  }, [o]), m(() => {
+  }, [n]), R(() => {
     const e = requestAnimationFrame(() => {
-      o();
+      n();
     });
     return () => cancelAnimationFrame(e);
-  }, [t, o]);
-  const { visibleFilters: P, overflowFilters: O } = D(() => a === null || a >= t.length ? { visibleFilters: t, overflowFilters: [] } : {
+  }, [t, n]);
+  const { visibleFilters: I, overflowFilters: U } = K(() => a === null || a >= t.length ? { visibleFilters: t, overflowFilters: [] } : {
     visibleFilters: t.slice(0, a),
     overflowFilters: t.slice(a)
   }, [t, a]);
   return {
-    visibleFilters: P,
-    overflowFilters: O,
+    visibleFilters: I,
+    overflowFilters: U,
     parentRef: h,
-    containerRef: v,
-    setChipRef: E,
-    setMoreChipRef: A,
-    setActionsRef: L
+    containerRef: m,
+    setChipRef: A,
+    setMoreChipRef: P,
+    setActionsRef: O,
+    setLeadingRef: k
   };
 }
 export {
-  K as useChipsOverflow
+  X as useChipsOverflow
 };

package/components/DynamicFilter/slots/SlotsEnum.d.ts

@@ -16,6 +16,7 @@ export declare enum DynamicFilterSlots {
     popoverFilterActions = "popoverFilterActions",
     inputFilterInputSkeleton = "inputFilterInputSkeleton",
     chipWrapper = "chipWrapper",
+    appliedFilterChipLabel = "appliedFilterChipLabel",
     overflowMoreChip = "overflowMoreChip",
     overflowPopover = "overflowPopover",
     overflowPopoverList = "overflowPopoverList",

package/components/DynamicFilter/slots/SlotsEnum.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SlotsEnum.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/DynamicFilter/slots/SlotsEnum.ts"],"names":[],"mappings":"AAAA,oBAAY,kBAAkB;IAC5B,IAAI,SAAS;IACb,cAAc,mBAAmB;IACjC,WAAW,gBAAgB;IAC3B,wBAAwB,6BAA6B;IACrD,gBAAgB,qBAAqB;IACrC,cAAc,mBAAmB;IACjC,2BAA2B,gCAAgC;IAC3D,eAAe,oBAAoB;IACnC,OAAO,YAAY;IACnB,kBAAkB,uBAAuB;IACzC,mBAAmB,wBAAwB;IAC3C,WAAW,gBAAgB;IAC3B,aAAa,kBAAkB;IAC/B,4BAA4B,iCAAiC;IAC7D,oBAAoB,yBAAyB;IAC7C,wBAAwB,6BAA4B;IACpD,WAAW,gBAAgB;IAC3B,gBAAgB,qBAAqB;IACrC,eAAe,oBAAoB;IACnC,mBAAmB,wBAAwB;IAC3C,mBAAmB,wBAAwB;IAC3C,yBAAyB,8BAA8B;IACvD,wBAAwB,6BAA6B;CACtD"}
+{"version":3,"file":"SlotsEnum.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/DynamicFilter/slots/SlotsEnum.ts"],"names":[],"mappings":"AAAA,oBAAY,kBAAkB;IAC5B,IAAI,SAAS;IACb,cAAc,mBAAmB;IACjC,WAAW,gBAAgB;IAC3B,wBAAwB,6BAA6B;IACrD,gBAAgB,qBAAqB;IACrC,cAAc,mBAAmB;IACjC,2BAA2B,gCAAgC;IAC3D,eAAe,oBAAoB;IACnC,OAAO,YAAY;IACnB,kBAAkB,uBAAuB;IACzC,mBAAmB,wBAAwB;IAC3C,WAAW,gBAAgB;IAC3B,aAAa,kBAAkB;IAC/B,4BAA4B,iCAAiC;IAC7D,oBAAoB,yBAAyB;IAC7C,wBAAwB,6BAA4B;IACpD,WAAW,gBAAgB;IAC3B,sBAAsB,2BAA2B;IACjD,gBAAgB,qBAAqB;IACrC,eAAe,oBAAoB;IACnC,mBAAmB,wBAAwB;IAC3C,mBAAmB,wBAAwB;IAC3C,yBAAyB,8BAA8B;IACvD,wBAAwB,6BAA6B;CACtD"}

package/components/DynamicFilter/slots/SlotsEnum.js

@@ -1,4 +1,4 @@
-var o = /* @__PURE__ */ ((e) => (e.root = "root", e.innerContainer = "innerContainer", e.inputFilter = "inputFilter", e.inputFilterTriggerButton = "inputFilterTriggerButton", e.inputFilterInput = "inputFilterInput", e.appliedFilters = "appliedFilters", e.appliedFilterInnerContainer = "appliedFilterInnerContainer", e.emptyStateLabel = "emptyStateLabel", e.actions = "actions", e.actionsClearButton = "actionsClearButton", e.actionsSubmitButton = "actionsSubmitButton", e.popoverMenu = "popoverMenu", e.popoverFilter = "popoverFilter", e.popoverFilterContainerFields = "popoverFilterContainerFields", e.popoverFilterActions = "popoverFilterActions", e.inputFilterInputSkeleton = "inputFilterInputSkeleton", e.chipWrapper = "chipWrapper", e.overflowMoreChip = "overflowMoreChip", e.overflowPopover = "overflowPopover", e.overflowPopoverList = "overflowPopoverList", e.overflowPopoverItem = "overflowPopoverItem", e.overflowPopoverItemHeader = "overflowPopoverItemHeader", e.overflowPopoverItemLabel = "overflowPopoverItemLabel", e))(o || {});
+var o = /* @__PURE__ */ ((e) => (e.root = "root", e.innerContainer = "innerContainer", e.inputFilter = "inputFilter", e.inputFilterTriggerButton = "inputFilterTriggerButton", e.inputFilterInput = "inputFilterInput", e.appliedFilters = "appliedFilters", e.appliedFilterInnerContainer = "appliedFilterInnerContainer", e.emptyStateLabel = "emptyStateLabel", e.actions = "actions", e.actionsClearButton = "actionsClearButton", e.actionsSubmitButton = "actionsSubmitButton", e.popoverMenu = "popoverMenu", e.popoverFilter = "popoverFilter", e.popoverFilterContainerFields = "popoverFilterContainerFields", e.popoverFilterActions = "popoverFilterActions", e.inputFilterInputSkeleton = "inputFilterInputSkeleton", e.chipWrapper = "chipWrapper", e.appliedFilterChipLabel = "appliedFilterChipLabel", e.overflowMoreChip = "overflowMoreChip", e.overflowPopover = "overflowPopover", e.overflowPopoverList = "overflowPopoverList", e.overflowPopoverItem = "overflowPopoverItem", e.overflowPopoverItemHeader = "overflowPopoverItemHeader", e.overflowPopoverItemLabel = "overflowPopoverItemLabel", e))(o || {});
 export {
   o as DynamicFilterSlots
 };

package/components/DynamicFilter/slots/dynamicFilterSlots.d.ts

@@ -49,6 +49,9 @@ export declare const InputFilterInputSkeletonStyled: import('@emotion/styled').S
 export declare const ChipWrapperStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').DynamicFilterOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const AppliedFilterChipLabelStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').DynamicFilterOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;
 export declare const OverflowMoreChipStyled: import('@emotion/styled').StyledComponent<Pick<import('../..').ChipProps & import('react').RefAttributes<HTMLDivElement>, keyof import('react').RefAttributes<HTMLDivElement> | keyof import('../..').ChipProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').DynamicFilterOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;

package/components/DynamicFilter/slots/dynamicFilterSlots.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamicFilterSlots.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/DynamicFilter/slots/dynamicFilterSlots.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,UAAU;;6NAGM,CAAC;AAC9B,eAAO,MAAM,oBAAoB;;6NAGM,CAAC;AACxC,eAAO,MAAM,iBAAiB;;6NAGM,CAAC;AACrC,eAAO,MAAM,8BAA8B;;UAGM,CAAC;AAClD,eAAO,MAAM,sBAAsB;;+OAGM,CAAC;AAC1C,eAAO,MAAM,oBAAoB;;6NAGM,CAAC;AACxC,eAAO,MAAM,iCAAiC;;6NAGM,CAAC;AACrD,eAAO,MAAM,qBAAqB;;UAGM,CAAC;AACzC,eAAO,MAAM,aAAa;;6NAGM,CAAC;AACjC,eAAO,MAAM,wBAAwB;;UAGM,CAAC;AAC5C,eAAO,MAAM,yBAAyB;;UAGM,CAAC;AAC7C,eAAO,MAAM,iBAAiB;;UAGM,CAAC;AACrC,eAAO,MAAM,aAAa;;UAGY,CAAC;AACvC,eAAO,MAAM,4BAA4B;;6NAGY,CAAC;AACtD,eAAO,MAAM,0BAA0B;;UAGM,CAAC;AAE9C,eAAO,MAAM,8BAA8B;;UAGM,CAAC;AAElD,eAAO,MAAM,iBAAiB;;6NAGM,CAAC;AAErC,eAAO,MAAM,sBAAsB;;UAGM,CAAC;AAC1C,eAAO,MAAM,qBAAqB;;UAGM,CAAC;AACzC,eAAO,MAAM,yBAAyB;;6NAGM,CAAC;AAC7C,eAAO,MAAM,yBAAyB;;6NAGM,CAAC;AAC7C,eAAO,MAAM,+BAA+B;;6NAGM,CAAC;AACnD,eAAO,MAAM,8BAA8B;;iOAGM,CAAC"}
+{"version":3,"file":"dynamicFilterSlots.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/DynamicFilter/slots/dynamicFilterSlots.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,UAAU;;6NAGM,CAAC;AAC9B,eAAO,MAAM,oBAAoB;;6NAGM,CAAC;AACxC,eAAO,MAAM,iBAAiB;;6NAGM,CAAC;AACrC,eAAO,MAAM,8BAA8B;;UAGM,CAAC;AAClD,eAAO,MAAM,sBAAsB;;+OAGM,CAAC;AAC1C,eAAO,MAAM,oBAAoB;;6NAGM,CAAC;AACxC,eAAO,MAAM,iCAAiC;;6NAGM,CAAC;AACrD,eAAO,MAAM,qBAAqB;;UAGM,CAAC;AACzC,eAAO,MAAM,aAAa;;6NAGM,CAAC;AACjC,eAAO,MAAM,wBAAwB;;UAGM,CAAC;AAC5C,eAAO,MAAM,yBAAyB;;UAGM,CAAC;AAC7C,eAAO,MAAM,iBAAiB;;UAGM,CAAC;AACrC,eAAO,MAAM,aAAa;;UAGY,CAAC;AACvC,eAAO,MAAM,4BAA4B;;6NAGY,CAAC;AACtD,eAAO,MAAM,0BAA0B;;UAGM,CAAC;AAE9C,eAAO,MAAM,8BAA8B;;UAGM,CAAC;AAElD,eAAO,MAAM,iBAAiB;;6NAGM,CAAC;AAErC,eAAO,MAAM,4BAA4B;;iOAGM,CAAC;AAEhD,eAAO,MAAM,sBAAsB;;UAGM,CAAC;AAC1C,eAAO,MAAM,qBAAqB;;UAGM,CAAC;AACzC,eAAO,MAAM,yBAAyB;;6NAGM,CAAC;AAC7C,eAAO,MAAM,yBAAyB;;6NAGM,CAAC;AAC7C,eAAO,MAAM,+BAA+B;;6NAGM,CAAC;AACnD,eAAO,MAAM,8BAA8B;;iOAGM,CAAC"}

package/components/DynamicFilter/slots/dynamicFilterSlots.js

@@ -1,105 +1,109 @@
-import { styled as o } from "@mui/material/styles";
+import { styled as e } from "@mui/material/styles";
 import { Chip as i } from "../../Chip/Chip.js";
 import { DYNAMIC_FILTER_KEY_COMPONENT as t } from "../constants.js";
-import { dynamicFilterStyles as e } from "../DynamicFilter.styles.js";
+import { dynamicFilterStyles as o } from "../DynamicFilter.styles.js";
 import { DynamicFilterSlots as r } from "./SlotsEnum.js";
 import { IconButton as n } from "../../extended/mui/IconButton/IconButton.js";
 import { Typography as p } from "../../extended/mui/Typography/Typography.js";
 import { ActionsContainer as s } from "../../CommonActions/components/ActionsContainer/ActionsContainer.js";
 import { Skeleton as a } from "../../extended/mui/Skeleton/Skeleton.js";
 import { Popover as l } from "../../extended/mui/Popover/Popover.js";
-const P = o("div", {
+const C = e("div", {
   name: t,
   slot: r.root
-})(e?.root), C = o("div", {
+})(o?.root), P = e("div", {
   name: t,
   slot: r.innerContainer
-})(e?.innerContainer), w = o("div", {
+})(o?.innerContainer), w = e("div", {
   name: t,
   slot: r.inputFilter
-})(e?.inputFilter), A = o(n, {
+})(o?.inputFilter), L = e(n, {
   name: t,
   slot: r.inputFilterTriggerButton
-})(e?.inputFilterTriggerButton), B = o("input", {
+})(o?.inputFilterTriggerButton), b = e("input", {
   name: t,
   slot: r.inputFilterInput
-})(e?.inputFilterInput), L = o("div", {
+})(o?.inputFilterInput), h = e("div", {
   name: t,
   slot: r.appliedFilters
-})(e?.appliedFilters), b = o("div", {
+})(o?.appliedFilters), A = e("div", {
   name: t,
   slot: r.appliedFilterInnerContainer
-})(e?.appliedFilterInnerContainer), h = o(p, {
+})(o?.appliedFilterInnerContainer), B = e(p, {
   name: t,
   slot: r.emptyStateLabel
-})(e?.emptyStateLabel), M = o("div", {
+})(o?.emptyStateLabel), M = e("div", {
   name: t,
   slot: r.actions
-})(e?.actions), O = o(n, {
+})(o?.actions), O = e(n, {
   name: t,
   slot: r.actionsClearButton
-})(e?.actionsClearButton), g = o(n, {
+})(o?.actionsClearButton), g = e(n, {
   name: t,
   slot: r.actionsSubmitButton
-})(e?.actionsSubmitButton), T = o(l, {
+})(o?.actionsSubmitButton), T = e(l, {
   name: t,
   slot: r.popoverMenu
-})(e?.popoverMenu), k = o(l, {
+})(o?.popoverMenu), k = e(l, {
   name: t,
   slot: r.popoverFilter
-})(e?.popoverFilter), E = o("div", {
+})(o?.popoverFilter), E = e("div", {
   name: t,
   slot: r.popoverFilterContainerFields
-})(e?.popoverFilterContainerFields), H = o(s, {
+})(o?.popoverFilterContainerFields), H = e(s, {
   name: t,
   slot: r.popoverFilterActions
-})(e?.popoverFilterActions), N = o(a, {
+})(o?.popoverFilterActions), N = e(a, {
   name: t,
   slot: r.inputFilterInputSkeleton
-})(e?.inputFilterInputSkeleton), W = o("div", {
+})(o?.inputFilterInputSkeleton), W = e("div", {
   name: t,
   slot: r.chipWrapper
-})(e?.chipWrapper), _ = o(i, {
+})(o?.chipWrapper), _ = e("span", {
+  name: t,
+  slot: r.appliedFilterChipLabel
+})(o?.appliedFilterChipLabel), D = e(i, {
   name: t,
   slot: r.overflowMoreChip
-})(e?.overflowMoreChip), D = o(l, {
+})(o?.overflowMoreChip), R = e(l, {
   name: t,
   slot: r.overflowPopover
-})(e?.overflowPopover), R = o("div", {
+})(o?.overflowPopover), Y = e("div", {
   name: t,
   slot: r.overflowPopoverList
-})(e?.overflowPopoverList), Y = o("div", {
+})(o?.overflowPopoverList), x = e("div", {
   name: t,
   slot: r.overflowPopoverItem
-})(e?.overflowPopoverItem), x = o("div", {
+})(o?.overflowPopoverItem), K = e("div", {
   name: t,
   slot: r.overflowPopoverItemHeader
-})(e?.overflowPopoverItemHeader), K = o("span", {
+})(o?.overflowPopoverItemHeader), j = e("span", {
   name: t,
   slot: r.overflowPopoverItemLabel
-})(e?.overflowPopoverItemLabel);
+})(o?.overflowPopoverItemLabel);
 export {
   O as ActionsClearButtonStyled,
   M as ActionsStyled,
   g as ActionsSubmitButtonStyled,
-  b as AppliedFilterInnerContainerStyled,
-  L as AppliedFiltersStyled,
+  _ as AppliedFilterChipLabelStyled,
+  A as AppliedFilterInnerContainerStyled,
+  h as AppliedFiltersStyled,
   W as ChipWrapperStyled,
-  h as EmptyStateLabelStyled,
-  C as InnerContainerStyled,
+  B as EmptyStateLabelStyled,
+  P as InnerContainerStyled,
   N as InputFilterInputSkeletonStyled,
-  B as InputFilterInputStyled,
+  b as InputFilterInputStyled,
   w as InputFilterStyled,
-  A as InputFilterTriggerButtonStyled,
-  _ as OverflowMoreChipStyled,
-  x as OverflowPopoverItemHeaderStyled,
-  K as OverflowPopoverItemLabelStyled,
-  Y as OverflowPopoverItemStyled,
-  R as OverflowPopoverListStyled,
-  D as OverflowPopoverStyled,
+  L as InputFilterTriggerButtonStyled,
+  D as OverflowMoreChipStyled,
+  K as OverflowPopoverItemHeaderStyled,
+  j as OverflowPopoverItemLabelStyled,
+  x as OverflowPopoverItemStyled,
+  Y as OverflowPopoverListStyled,
+  R as OverflowPopoverStyled,
   E as PopoverContainerFieldsStyled,
   H as PopoverHeaderActionsStyled,
   T as PopoverMenuStyled,
   k as PopoverStyled,
-  P as RootStyled
+  C as RootStyled
 };