@m4l/components 0.2.35 → 0.2.36

package/components/DynamicFilter/types.d.ts

@@ -1,3 +1,5 @@
+import { Theme } from '@mui/material/styles';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { Maybe } from '@m4l/core';
 import { RHFAutocompleteAsyncProps } from '../hook-form/RHFAutocompleteAsync/types';
 export declare type FieldType = 'number' | 'string' | 'boolean' | 'datetime' | 'select';
@@ -50,11 +52,11 @@ export declare type Field<T extends FieldType = FieldType> = T extends 'select'
 export interface BaseApplyFilter<T extends FieldType = FieldType> {
     id: number;
     field: Field<T>;
-    isSetted: boolean;
+    isSet: boolean;
     fixed: boolean;
 }
 /**
- * @interface FilterValueBase Base para el tipado de overloading de los valor de un filtro
+ * Base para el tipado de overloading de los valores de un filtro
  */
 export interface FilterValueBase {
     fieldType: FieldType;
@@ -103,13 +105,17 @@ export interface FilterValueSelect extends FilterValueBase {
     operandsArray: OperandsArrayValues;
 }
 /**
- * @type FilterValue Valor de un filtro sobrecargado para cada tipo de dato
+ * Valor de un filtro sobrecargado para cada tipo de dato
+ *
+ * @type
  */
 export declare type FilterValue = FilterValueBoolean | FilterValueDateTime | FilterValueNumber | FilterValueString | FilterValueSelect;
 /**
- * @type FilterFieldApplyed Estado del Filtro + Valor valor del filtro.
+ * Estado del Filtro + Valor valor del filtro.
+ *
+ * @type
  */
-export declare type FilterFieldApplyed<T extends FieldType = FieldType> = BaseApplyFilter<T> & FilterValue;
+export declare type FilterFieldApplied<T extends FieldType = FieldType> = BaseApplyFilter<T> & FilterValue;
 /**
  * @interface RawFilterFieldApply Formato para enviar los filtros a las APIs.
  */
@@ -120,18 +126,18 @@ export interface RawFilterFieldApply {
     o2: Maybe<OperandType>;
     oa: Maybe<OperandType>;
 }
-export declare type FilterToEditApply = FilterFieldApplyed;
+export declare type FilterToEditApply = FilterFieldApplied;
 export interface DataTypeFilerLabels {
     labelField: string;
     labelOperator: string;
     labelOperands: string;
 }
 /**
+ * Tipado de los filtros a inicializar el componente DynamicFilter
+ *
  * @interface
- * @name InitialFilterApplyed
- * @description Tipado de los filtros a inicializar el componente DynamicFilter
  */
-export declare type InitialFilterApplyed = {
+export declare type InitialFilterApplied = {
     name: string;
     operator: Operator;
     operand1?: Maybe<OperandInitialFilterType>;
@@ -151,7 +157,9 @@ export declare type FormOperandNumber = number;
 export declare type FormOperandString = string;
 export declare type FormOperand = FormOperandBoolean | FormOperandDateTime | FormOperandNumber | FormOperandString | FormOperandSelect;
 /**
- * @interface FilterValueBase Base para el tipado de overloading de los valor de un filtro
+ * Base para el tipado de overloading de los valor de un filtro
+ *
+ * @interface
  */
 export interface FormFilterValueBase {
     fieldType: FieldType;
@@ -185,57 +193,120 @@ export interface FormFilterValueSelect extends FormFilterValueBase {
     formValueOperandsArray: Array<FormOperandSelect> | FormOperandSelect;
 }
 /**
- * @type FormFilterValue Valor de un filtro sobrecargado para cada tipo de dato
+ * Valor de un filtro sobrecargado para cada tipo de dato
+ *
+ * @type
  */
 export declare type FormFilterValue = FormFilterValueBoolean | FormFilterValueDateTime | FormFilterValueNumber | FormFilterValueString | FormFilterValueSelect;
 /**
- * @type FilterFieldApplyed Estado del Filtro + Valor valor del filtro.
+ * Estado del Filtro + Valor valor del filtro.
+ *
+ * @type
  */
-export declare type FormFilterFieldApplyed<T extends FieldType = FieldType> = BaseApplyFilter<T> & FormFilterValue;
+export declare type FormFilterFieldApplied<T extends FieldType = FieldType> = BaseApplyFilter<T> & FormFilterValue;
 /**
- * @interface
- * @name OnChangeFilters
- * @description Tipado del handler cuando se ejecuta el filtro
+ * Tipado del handler cuando se ejecuta el filtro
+ *
+ * @interface OnChangeFilters
  */
 export declare type OnChangeFilters = (
 /**
  *  "filters" Vector de filtros aplicados, los cuales pueden servir como entrada del campo "i"nitialApplyedFilters" en un refresh,
  */
-filters: Array<InitialFilterApplyed>, 
+filters: Array<InitialFilterApplied>, 
 /**
  *  "rawFilters" Vector de filtros aplicados, en el formato que puede ser llevado a un endpoint.
  *   ver:  https://www.notion.so/made4labs/Filtrado-de-listas-55afdd8ac92e483abd34e5365b74ee29
  */
 rawFilters: Array<RawFilterFieldApply>) => void;
 /**
- * @interface
- * @name DynamicFilterProps
- * @description Interface que define los props que puede recibir el componente DynamiFilter
+ * Propiedades que recibe el componente DynamicFilter
+ *
+ * @interface DynamicFilterProps
  */
 export interface DynamicFilterProps {
     /**
-     *  "automatic" Configura si el filtro se ejecuta automaticamente cuando se agrega o se modifica un filtro. (Default true)
+     *  Define si el filtro se ejecuta automáticamente cuando se agrega o se modifica un filtro.
+     *  @default true
      */
     automatic?: boolean;
     /**
-     *  "withAllField" indica si permite o no filtrar por todos los campos  (Default true)
+     *  Permite tener el filtro tipo `all`, que filtra por todos los campos.
+     *  @default true
      */
     withAllField?: boolean;
+    /** Array con la configuración de cada campo por el que se podrá filtrar. */
+    fields: Array<Field>;
+    /** Array con la configuración de cada campo por el que se podrá filtrar.*/
+    initialAppliedFilters?: Array<InitialFilterApplied>;
+    /** Handler que se dispara cuando el filtro cambia en automatico, o cuando es manual y se presion el boton de filtrar */
+    onChangeFilters?: OnChangeFilters;
+    /** Key único para necesario para las pruebas del componente. */
+    dataTestId?: string;
+}
+/**
+ * Interface que define la variables que se van a usar en clases del componente
+ *
+ * @interface
+ */
+export interface OwnerState {
     /**
-     *  "fields" Campos por los que se puede filtrar
+     *  "isSkeleton" indica si el componente está estado skeleton.
      */
-    fields: Array<Field>;
+    isSkeleton: boolean;
     /**
-     *  "initialApplyedFilters" filtros iniciales que pueden venir de un almacenamiento local o remoto
+     *  "inEdition" se establece cuando se está en edición.
      */
-    initialApplyedFilters?: Array<InitialFilterApplyed>;
+    inEdition: boolean;
     /**
-     *  "onChangeFilters" Handler que se dispara cuando el filtro cambia en automatico, o cuando es manual y se presion a el boton de filtrar
+     *  "isDirty" cuando el componente tiene filtros por aplicar
      */
-    onChangeFilters: OnChangeFilters;
+    isDirty: boolean;
     /**
-     *  "dataTestId" Propiedad única que permite crear un selector atributo necesario para las pruebas del componente.
+     *  "isValid" cuando el comnponente está en un estado invalido
      */
-    dataTestId?: string;
+    isValid: boolean;
+    /**
+     *  "isMobile" cuando el navegador está en modo celular
+     */
+    isMobile: boolean;
+    /**
+     *  "isEmpty" Define si existen filtros aplicados
+     */
+    isEmpty: boolean;
+}
+export interface DynamicFilterOwnerState extends DynamicFilterProps, OwnerState {
+}
+export declare enum DynamicFilterSlots {
+    root = "root",
+    innerContainer = "innerContainer",
+    inputFilter = "inputFilter",
+    inputFilterInput = "inputFilterInput",
+    inputFilterIcon = "inputFilterIcon",
+    appliedFilters = "appliedFilters",
+    appliedFilterInnerContainer = "appliedFilterInnerContainer",
+    appliedFilterChip = "appliedFilterChip",
+    appliedFilterChipIcon = "appliedFilterChipIcon",
+    appliedFilterChipInfo = "appliedFilterChipInfo",
+    appliedFilterChipInfoFieldName = "appliedFilterChipInfoFieldName",
+    appliedFilterChipInfoOperator = "appliedFilterChipInfoOperator",
+    appliedFilterChipInfoOperands = "appliedFilterChipInfoOperands",
+    appliedFilterChipRemoveButton = "appliedFilterChipRemoveButton",
+    actions = "actions",
+    actionsSkeletonButton = "actionsSkeletonButton",
+    actionsClearButton = "actionsClearButton",
+    actionsSubmitButton = "actionsSubmitButton",
+    popoverMenu = "popoverMenu",
+    popoverMenuItem = "popoverMenuItem",
+    popoverMenuItemIcon = "popoverMenuItemIcon",
+    popoverMenuItemLabel = "popoverMenuItemLabel",
+    popoverFilter = "popoverFilter",
+    popoverFilterContainerFields = "popoverFilterContainerFields",
+    popoverFilterHeader = "popoverFilterHeader",
+    popoverFilterHeaderIcon = "popoverFilterHeaderIcon",
+    popoverFilterHeaderTitle = "popoverFilterHeaderTitle",
+    popoverFilterActions = "popoverFilterActions"
 }
+export declare type DynamicFilterSlotsType = keyof typeof DynamicFilterSlots;
+export declare type DynamicFilterStyles = Partial<OverridesStyleRules<DynamicFilterSlotsType, 'M4LDynamicFilter', Theme> | undefined> | undefined;
 export {};

package/components/FieldLabel/classes/types.d.ts

@@ -1,4 +1,4 @@
-import { useUtilityClasses } from ".";
+import { useUtilityClasses } from '.';
 export interface FieldLabelClassesType {
     root: string;
     label: string;

package/components/FieldLabel/index.2622ee40.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useEnvironment, useModuleSkeleton } from "@m4l/core";
+import { styled, generateUtilityClasses, Tooltip, Skeleton } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { g as getComponentUtilityClass } from "../../utils/index.0718eeac.js";
+import clsx from "clsx";
+import { T as Typography } from "../mui_extended/Typography/index.a1e774a2.js";
+import { I as Icon } from "../Icon/index.ee7b85c9.js";
+const FieldLabelRoot = styled("label")(({ theme }) => ({
+  ...theme.components?.M4LFieldLabel?.styleOverrides
+}));
+const componentName = "M4LFieldLabel";
+generateUtilityClasses(componentName, [
+  "root",
+  "label",
+  "tooltip",
+  "tooltipIcon",
+  "containerIcon",
+  "mandatory"
+]);
+const useUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    label: ["label"],
+    tooltip: ["tooltip"],
+    tooltipIcon: ["tooltipIcon"],
+    containerIcon: ["containerIcon"],
+    mandatory: ["mandatory"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getComponentUtilityClass(componentName), {});
+  return {
+    ...composedClasses
+  };
+};
+const FieldLabel = (props) => {
+  const { helperMessage: message, label, mandatory, mandatoryMessage, htmlFor, className } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const classes = useUtilityClasses();
+  const isSkeleton = useModuleSkeleton();
+  return /* @__PURE__ */ jsx(FieldLabelRoot, { htmlFor, className: clsx(classes.root, className), children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "body", className: classes.label, children: label }),
+    mandatory && /* @__PURE__ */ jsx(Typography, { variant: "body", className: classes.mandatory, children: mandatoryMessage ? `(${mandatoryMessage})` : "*" }),
+    message && /* @__PURE__ */ jsx(Tooltip, { title: message, className: classes.tooltip, children: /* @__PURE__ */ jsx("div", { className: classes.containerIcon, children: /* @__PURE__ */ jsx(
+      Icon,
+      {
+        className: classes.tooltipIcon,
+        src: `${host_static_assets}/${environment_assets}/frontend/components/LabelMessage/assets/icons/information.svg`
+      }
+    ) }) })
+  ] }) : /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "30%", height: "14px" }) });
+};
+export {
+  FieldLabel as F
+};

package/components/FieldLabel/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const FieldLabelRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;