@m4l/gclick 0.0.2 → 0.1.0

package/components/indicators/IndicatorBattery/hooks/useBatteryStatus/types.d.ts

@@ -0,0 +1,38 @@
+import { ChipColorOptions } from '@m4l/styles';
+import { INDICATOR_BATTERY_DICTIONARY } from '../../dictionary';
+import { IndicatorBatteryProps } from '../../types';
+export interface UseBatteryStatusProps {
+    value?: IndicatorBatteryProps['value'];
+    maxVoltage?: Extract<IndicatorBatteryProps, {
+        maxVoltage: number;
+    }>['maxVoltage'];
+    minVoltage?: Extract<IndicatorBatteryProps, {
+        minVoltage: number;
+    }>['minVoltage'];
+    valueWeak?: Extract<IndicatorBatteryProps, {
+        valueWeak: number;
+    }>['valueWeak'];
+    valueAcceptable?: Extract<IndicatorBatteryProps, {
+        valueAcceptable: number;
+    }>['valueAcceptable'];
+    valueGood?: Extract<IndicatorBatteryProps, {
+        valueGood: number;
+    }>['valueGood'];
+    valueExcellent?: Extract<IndicatorBatteryProps, {
+        valueExcellent: number;
+    }>['valueExcellent'];
+    type?: Extract<IndicatorBatteryProps, {
+        type: string;
+    }>['type'];
+}
+export interface BatteryThreshold {
+    min: number;
+    max: number;
+    label: keyof typeof INDICATOR_BATTERY_DICTIONARY;
+    color: ChipColorOptions;
+}
+export type UseBatteryStatusReturn = {
+    label: string;
+    color: ChipColorOptions;
+    maxVoltage: number;
+};

package/components/indicators/IndicatorBattery/hooks/useBatteryStatus/useBatteryStatus.d.ts

@@ -0,0 +1,7 @@
+import { UseBatteryStatusProps, UseBatteryStatusReturn } from './types';
+/**
+ * Hook para obtener el estado de la batería
+ * @param props - UseBatteryStatusProps
+ * @returns UseBatteryStatusReturn
+ */
+export declare const useBatteryStatus: (props: UseBatteryStatusProps) => UseBatteryStatusReturn;

package/components/indicators/IndicatorBattery/hooks/useBatteryStatus/useBatteryStatus.js

@@ -0,0 +1,68 @@
+import { useMemo } from "react";
+import { I as INDICATOR_BATTERY_DICTIONARY } from "../../dictionary.js";
+import { B as BATTERY_THRESHOLDS } from "./constants.js";
+import { useModuleDictionary } from "@m4l/core";
+const useBatteryStatus = (props) => {
+  const { getLabel } = useModuleDictionary();
+  const { value, maxVoltage, minVoltage, valueWeak, valueAcceptable, valueGood, valueExcellent, type } = props;
+  const status = useMemo(() => {
+    if (value === null || value === void 0 || value < 0) {
+      return {
+        label: getLabel(INDICATOR_BATTERY_DICTIONARY.statusNotDetectable),
+        color: "default",
+        maxVoltage: maxVoltage ?? 100
+      };
+    }
+    if (type && type in BATTERY_THRESHOLDS) {
+      const batteryConfig = BATTERY_THRESHOLDS[type];
+      const threshold = batteryConfig.thresholds.find(
+        ({ min, max }) => value >= min && value <= max
+      );
+      if (threshold) {
+        return {
+          label: getLabel(INDICATOR_BATTERY_DICTIONARY[threshold.label]),
+          color: threshold.color,
+          maxVoltage: batteryConfig.maxVoltage
+        };
+      }
+    } else {
+      if (maxVoltage !== void 0 && minVoltage !== void 0 && valueWeak !== void 0 && valueAcceptable !== void 0 && valueGood !== void 0 && valueExcellent !== void 0) {
+        const customBatteryConfig = {
+          maxVoltage,
+          thresholds: [
+            { min: 0, max: valueWeak, label: "statusWeak", color: "error" },
+            { min: valueWeak, max: valueAcceptable, label: "statusAcceptable", color: "warning" },
+            { min: valueAcceptable, max: valueGood, label: "statusGood", color: "info" },
+            { min: valueGood, max: valueExcellent, label: "statusExcellent", color: "success" },
+            { min: valueExcellent, max: 999, label: "statusExcellent", color: "success" }
+            /* { min: maxVoltage, max: 999, label: 'statusOverVoltage' as keyof typeof INDICATOR_BATTERY_DICTIONARY, color: 'candy' as ChipColorOptions }, */
+          ]
+        };
+        const threshold = customBatteryConfig.thresholds.find(
+          ({ min, max }) => {
+            if (min === 0) {
+              return value >= min && value <= max;
+            }
+            return value > min && value <= max;
+          }
+        );
+        if (threshold) {
+          return {
+            label: getLabel(INDICATOR_BATTERY_DICTIONARY[threshold.label]),
+            color: threshold.color,
+            maxVoltage: customBatteryConfig.maxVoltage
+          };
+        }
+      }
+    }
+    return {
+      label: getLabel(INDICATOR_BATTERY_DICTIONARY.statusNotDetectable),
+      color: "default",
+      maxVoltage: maxVoltage ?? 100
+    };
+  }, [value, type, maxVoltage, minVoltage, valueWeak, valueAcceptable, valueGood, valueExcellent, getLabel]);
+  return status;
+};
+export {
+  useBatteryStatus as u
+};

package/components/indicators/IndicatorBattery/icons.d.ts

@@ -0,0 +1,4 @@
+export declare const INDICATOR_BATTERY_ICONS: {
+    batteryStandard: string;
+    batteryCompact: string;
+};

package/components/indicators/IndicatorBattery/icons.js

@@ -0,0 +1,7 @@
+const INDICATOR_BATTERY_ICONS = {
+  batteryStandard: "frontend/components/IndicatorBattery/assets/icons/BatteryChargingVertical.svg",
+  batteryCompact: "frontend/components/IndicatorBattery/assets/icons/batery.svg"
+};
+export {
+  INDICATOR_BATTERY_ICONS as I
+};

package/components/indicators/IndicatorBattery/index.d.ts

@@ -0,0 +1 @@
+export { IndicatorBattery } from './IndicatorBattery';

package/components/indicators/IndicatorBattery/index.js

@@ -0,0 +1 @@
+

package/components/indicators/IndicatorBattery/slots/IndicatorBaterySlots.d.ts

@@ -0,0 +1,27 @@
+export declare const IndicatorBatteryRootStyled: import('@emotion/styled').StyledComponent<Pick<import('@m4l/components/src/components/Card/types').CardProps, keyof import('@m4l/components/src/components/Card/types').CardProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').IndicatorBatteryOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const TitleStyled: import('@emotion/styled').StyledComponent<Pick<import('@m4l/components/src/components/mui_extended/Typography/types').TypographyProps, keyof import('@m4l/components/src/components/mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').IndicatorBatteryOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const ContentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').IndicatorBatteryOwnerState> & 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 StatusVoltageContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').IndicatorBatteryOwnerState> & 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 StatusContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').IndicatorBatteryOwnerState> & 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 VoltageContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').IndicatorBatteryOwnerState> & 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 ContainerTitleBatteryPorcentageStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').IndicatorBatteryOwnerState> & 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 ContainerStatusVoltageStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').IndicatorBatteryOwnerState> & 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 ContainerIconPercentageStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').IndicatorBatteryOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/indicators/IndicatorBattery/slots/IndicatorBaterySlots.js

@@ -0,0 +1,52 @@
+import { styled } from "@mui/material/styles";
+import { Card, Typography } from "@m4l/components";
+import { I as IndicatorBatterySlots } from "./IndicatorBatteryEnum.js";
+import { a as INDICATOR_BATTERY_KEY_COMPONENT } from "../constants.js";
+import { i as indicatorBatteryStyles } from "../IndicatorBattery.styles.js";
+const IndicatorBatteryRootStyled = styled(Card, {
+  name: INDICATOR_BATTERY_KEY_COMPONENT,
+  slot: IndicatorBatterySlots.root
+})(indicatorBatteryStyles?.root);
+const TitleStyled = styled(Typography, {
+  name: INDICATOR_BATTERY_KEY_COMPONENT,
+  slot: IndicatorBatterySlots.title
+})(indicatorBatteryStyles?.title);
+const ContentStyled = styled("div", {
+  name: INDICATOR_BATTERY_KEY_COMPONENT,
+  slot: IndicatorBatterySlots.content
+})(indicatorBatteryStyles?.content);
+const StatusVoltageContainerStyled = styled("div", {
+  name: INDICATOR_BATTERY_KEY_COMPONENT,
+  slot: IndicatorBatterySlots.voltageStatusContainer
+})(indicatorBatteryStyles?.voltageStatusContainer);
+const StatusContainerStyled = styled("div", {
+  name: INDICATOR_BATTERY_KEY_COMPONENT,
+  slot: IndicatorBatterySlots.statusContainer
+})(indicatorBatteryStyles?.statusContainer);
+const VoltageContainerStyled = styled("div", {
+  name: INDICATOR_BATTERY_KEY_COMPONENT,
+  slot: IndicatorBatterySlots.voltageContainer
+})(indicatorBatteryStyles?.voltageContainer);
+const ContainerTitleBatteryPorcentageStyled = styled("div", {
+  name: INDICATOR_BATTERY_KEY_COMPONENT,
+  slot: IndicatorBatterySlots.containerTitleBatteryPorcentage
+})(indicatorBatteryStyles?.containerTitleBatteryPorcentage);
+const ContainerStatusVoltageStyled = styled("div", {
+  name: INDICATOR_BATTERY_KEY_COMPONENT,
+  slot: IndicatorBatterySlots.containerStatusVoltage
+})(indicatorBatteryStyles?.containerStatusVoltage);
+const ContainerIconPercentageStyled = styled("div", {
+  name: INDICATOR_BATTERY_KEY_COMPONENT,
+  slot: IndicatorBatterySlots.containerIconPercentage
+})(indicatorBatteryStyles?.containerIconPercentage);
+export {
+  ContentStyled as C,
+  IndicatorBatteryRootStyled as I,
+  StatusVoltageContainerStyled as S,
+  TitleStyled as T,
+  VoltageContainerStyled as V,
+  StatusContainerStyled as a,
+  ContainerTitleBatteryPorcentageStyled as b,
+  ContainerIconPercentageStyled as c,
+  ContainerStatusVoltageStyled as d
+};

package/components/indicators/IndicatorBattery/slots/IndicatorBatteryEnum.d.ts

@@ -0,0 +1,11 @@
+export declare enum IndicatorBatterySlots {
+    root = "root",
+    title = "title",
+    content = "content",
+    voltageStatusContainer = "voltageStatusContainer",
+    statusContainer = "statusContainer",
+    voltageContainer = "voltageContainer",
+    containerTitleBatteryPorcentage = "containerTitleBatteryPorcentage",
+    containerStatusVoltage = "containerStatusVoltage",
+    containerIconPercentage = "containerIconPercentage"
+}

package/components/indicators/IndicatorBattery/slots/IndicatorBatteryEnum.js

@@ -0,0 +1,15 @@
+var IndicatorBatterySlots = /* @__PURE__ */ ((IndicatorBatterySlots2) => {
+  IndicatorBatterySlots2["root"] = "root";
+  IndicatorBatterySlots2["title"] = "title";
+  IndicatorBatterySlots2["content"] = "content";
+  IndicatorBatterySlots2["voltageStatusContainer"] = "voltageStatusContainer";
+  IndicatorBatterySlots2["statusContainer"] = "statusContainer";
+  IndicatorBatterySlots2["voltageContainer"] = "voltageContainer";
+  IndicatorBatterySlots2["containerTitleBatteryPorcentage"] = "containerTitleBatteryPorcentage";
+  IndicatorBatterySlots2["containerStatusVoltage"] = "containerStatusVoltage";
+  IndicatorBatterySlots2["containerIconPercentage"] = "containerIconPercentage";
+  return IndicatorBatterySlots2;
+})(IndicatorBatterySlots || {});
+export {
+  IndicatorBatterySlots as I
+};

package/components/indicators/IndicatorBattery/test/IndicatorBattery.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/indicators/IndicatorBattery/types.d.ts

@@ -0,0 +1,69 @@
+import { M4LOverridesStyleRules } from '@m4l/components';
+import { IndicatorBatterySlots } from './slots/IndicatorBatteryEnum';
+import { INDICATOR_BATTERY_KEY_COMPONENT } from './constants';
+import { Theme } from '@mui/material';
+import { ChipColorOptions } from '@m4l/styles';
+export type IndicatorBatteryType = string;
+export interface IndicatorBatteryBaseProps {
+    /**
+     * Valor actual de voltaje de la batería
+     */
+    value?: number | null;
+    /**
+     * Clase del componente
+     */
+    className?: string;
+    /**
+     * Variante del indicador
+     */
+    variant?: 'standard' | 'compact';
+    /**
+     * Tipo de batería, respaldo o principal
+     */
+    batteryType?: 'main' | 'backup';
+    /**
+     * Data test id
+     */
+    dataTestId?: string;
+    type?: IndicatorBatteryType;
+}
+export interface IndicatorBatteryWithTypeProps extends IndicatorBatteryBaseProps {
+    /**
+     * Tipo de batería (string flexible para cualquier voltaje)
+     * Ejemplos: '4.5', '12', '24', '48', etc.
+     * Los umbrales se definen en las constantes BATTERY_THRESHOLDS
+     */
+    type: IndicatorBatteryType;
+}
+export interface IndicatorBatteryPropsWithoutType extends IndicatorBatteryBaseProps {
+    /**
+     * Valor de estado para considerarlo como débil
+     */
+    valueWeak: number;
+    /**
+     * Valor de estado para considerarlo como aceptable
+     */
+    valueAcceptable: number;
+    /**
+     * Valor de estado para considerarlo como bueno
+     */
+    valueGood: number;
+    /**
+     * Valor de estado para considerarlo como excelente
+     */
+    valueExcellent: number;
+    /**
+     * Voltaje mínimo de la batería
+     */
+    minVoltage: number;
+    /**
+     * Voltaje máximo de la batería
+     */
+    maxVoltage: number;
+}
+export type IndicatorBatteryProps = IndicatorBatteryWithTypeProps | IndicatorBatteryPropsWithoutType;
+export type IndicatorBatteryOwnerState = {
+    color: ChipColorOptions;
+};
+export type IndicatorBatterySlotsType = keyof typeof IndicatorBatterySlots;
+export type IndicatorBatteryStyles = M4LOverridesStyleRules<IndicatorBatterySlotsType, typeof INDICATOR_BATTERY_KEY_COMPONENT, Theme>;

package/components/indicators/IndicatorCSQ/IndicatorCSQ.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useModuleDictionary } from "@m4l/core";
+import { g as getQualityLabel } from "./helpers/getQualityLabel/getQualityLabel.js";
+import { I as IndicatorCSQRootStyled, C as ContainerTitleAndChipStyled, T as TitleStyled, a as ChipStyled } from "./slots/IndicatorCSQSlots.js";
+import { C as CSQ_SIGNAL_DICTIONARY } from "./dictionary.js";
+import { S as SignalIcon } from "./subcomponents/SignalIcon/SignalIcon.js";
+const IndicatorCSQ = (props) => {
+  const { value, size } = props;
+  const { getLabel } = useModuleDictionary();
+  const { labelQuality, color, percentage } = getQualityLabel({ getLabel, quality: value });
+  return /* @__PURE__ */ jsxs(IndicatorCSQRootStyled, { role: "status", "aria-label": "CSQ Signal", children: [
+    /* @__PURE__ */ jsx(SignalIcon, { percentage, size }),
+    /* @__PURE__ */ jsxs(ContainerTitleAndChipStyled, { children: [
+      /* @__PURE__ */ jsx(TitleStyled, { variant: "paragraphDens", children: getLabel(CSQ_SIGNAL_DICTIONARY.LABEL_CSQ_TITLE) }),
+      /* @__PURE__ */ jsx(ChipStyled, { label: `${value} - ${labelQuality}`, variant: "contained", color })
+    ] })
+  ] });
+};
+export {
+  IndicatorCSQ as I
+};

package/components/indicators/IndicatorCSQ/IndicatorCSQ.styles.js

@@ -0,0 +1,70 @@
+import { getSizeStyles } from "@m4l/components";
+const getPathsByPercentage = (percentage, theme) => {
+  const rectangles = ["rectangle-1", "rectangle-2", "rectangle-3", "rectangle-4"];
+  const filledCount = Math.floor(percentage / 25);
+  return rectangles.reduce((acc, rectangle, index) => {
+    const isFilled = index < filledCount;
+    acc[`& .${rectangle}`] = {
+      fill: percentage === 0 ? theme.vars.palette.text.disabled : isFilled ? theme.vars.palette.primary.enabled : theme.vars.palette.primary.hoverOpacity
+    };
+    return acc;
+  }, {});
+};
+const indicatorCSQStyles = {
+  /**
+   * Root styles
+   */
+  root: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.vars.size.baseSpacings.sp2,
+    borderRadius: theme.vars.size.borderRadius.r2,
+    backgroundColor: theme.vars.palette.background.base,
+    height: "fit-content",
+    width: "fit-content",
+    padding: theme.vars.size.baseSpacings.sp2
+  }),
+  /**
+   * Signal icon styles
+   */
+  signalIcon: ({ theme, ownerState }) => ({
+    ...getSizeStyles(
+      theme,
+      ownerState?.size ?? "medium",
+      "container",
+      (size) => ({
+        width: size,
+        height: size
+      })
+    ),
+    "& path": {
+      transition: "fill 0.3s ease-in-out"
+    },
+    ...getPathsByPercentage(ownerState?.percentage ?? 0, theme)
+  }),
+  /**
+   * Container title and chip styles
+   */
+  containerTitleAndChip: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.vars.size.baseSpacings.sp1,
+    height: "auto",
+    width: "100%"
+  }),
+  /**
+   * Title styles
+   */
+  title: {},
+  /**
+   * Chip styles
+   */
+  chip: {}
+};
+export {
+  indicatorCSQStyles as i
+};

package/components/indicators/IndicatorCSQ/constants.js

@@ -0,0 +1,7 @@
+import { getComponentClasses } from "@m4l/components";
+import { I as IndicatorCSQSlots } from "./slots/IndicatorCSQEnum.js";
+const CSQ_SIGNAL_KEY_COMPONENT = "M4LCSQSignal";
+getComponentClasses(CSQ_SIGNAL_KEY_COMPONENT, IndicatorCSQSlots);
+export {
+  CSQ_SIGNAL_KEY_COMPONENT as C
+};

package/components/indicators/IndicatorCSQ/dictionary.js

@@ -0,0 +1,16 @@
+const CSQ_SIGNAL_KEY_DICTIONARY = "indicator_csq";
+const getCSQSignalComponentsDictionary = () => {
+  return [CSQ_SIGNAL_KEY_DICTIONARY];
+};
+const CSQ_SIGNAL_DICTIONARY = {
+  LABEL_CSQ_TITLE: `${CSQ_SIGNAL_KEY_DICTIONARY}.label_csq_title`,
+  LABEL_QUALITY_NOT_DETECTABLE: `${CSQ_SIGNAL_KEY_DICTIONARY}.label_quality_not_detectable`,
+  LABEL_QUALITY_WEAK: `${CSQ_SIGNAL_KEY_DICTIONARY}.label_quality_weak`,
+  LABEL_QUALITY_ACCEPTABLE: `${CSQ_SIGNAL_KEY_DICTIONARY}.label_quality_acceptable`,
+  LABEL_QUALITY_GOOD: `${CSQ_SIGNAL_KEY_DICTIONARY}.label_quality_good`,
+  LABEL_QUALITY_EXCELLENT: `${CSQ_SIGNAL_KEY_DICTIONARY}.label_quality_excellent`
+};
+export {
+  CSQ_SIGNAL_DICTIONARY as C,
+  getCSQSignalComponentsDictionary as g
+};

package/components/indicators/IndicatorCSQ/helpers/getQualityLabel/getQualityLabel.js

@@ -0,0 +1,43 @@
+import { C as CSQ_SIGNAL_DICTIONARY } from "../../dictionary.js";
+const SPECIAL_QUALITY_VALUES = [0, 1, 99];
+const DEFAULT_QUALITY_LABEL = CSQ_SIGNAL_DICTIONARY.LABEL_QUALITY_NOT_DETECTABLE;
+const QUALITY_RANGES = [
+  { min: 2, max: 9, value: CSQ_SIGNAL_DICTIONARY.LABEL_QUALITY_WEAK, color: "orange", percentage: 25 },
+  { min: 10, max: 14, value: CSQ_SIGNAL_DICTIONARY.LABEL_QUALITY_ACCEPTABLE, color: "warning", percentage: 50 },
+  { min: 15, max: 19, value: CSQ_SIGNAL_DICTIONARY.LABEL_QUALITY_GOOD, color: "info", percentage: 75 },
+  { min: 20, max: 32, value: CSQ_SIGNAL_DICTIONARY.LABEL_QUALITY_EXCELLENT, color: "persianGreen", percentage: 100 }
+];
+const getQualityLabel = (props) => {
+  const { getLabel, quality } = props;
+  if (quality === null || quality === void 0) {
+    return {
+      labelQuality: getLabel(DEFAULT_QUALITY_LABEL),
+      color: "error",
+      percentage: 0
+    };
+  }
+  const key = Number(quality);
+  if (isNaN(key)) {
+    return {
+      labelQuality: getLabel(DEFAULT_QUALITY_LABEL),
+      color: "error",
+      percentage: 0
+    };
+  }
+  if (SPECIAL_QUALITY_VALUES.includes(key)) {
+    return {
+      labelQuality: getLabel(DEFAULT_QUALITY_LABEL),
+      color: "error",
+      percentage: 0
+    };
+  }
+  const qualityRange = QUALITY_RANGES.find((range) => key >= range.min && key <= range.max);
+  return {
+    labelQuality: getLabel(qualityRange?.value ?? DEFAULT_QUALITY_LABEL),
+    color: qualityRange?.color ?? "error",
+    percentage: qualityRange?.percentage ?? 0
+  };
+};
+export {
+  getQualityLabel as g
+};

package/components/indicators/IndicatorCSQ/index.js

@@ -0,0 +1 @@
+

package/components/indicators/IndicatorCSQ/slots/IndicatorCSQEnum.js

@@ -0,0 +1,11 @@
+var IndicatorCSQSlots = /* @__PURE__ */ ((IndicatorCSQSlots2) => {
+  IndicatorCSQSlots2["root"] = "root";
+  IndicatorCSQSlots2["signalIcon"] = "signalIcon";
+  IndicatorCSQSlots2["containerTitleAndChip"] = "containerTitleAndChip";
+  IndicatorCSQSlots2["title"] = "title";
+  IndicatorCSQSlots2["chip"] = "chip";
+  return IndicatorCSQSlots2;
+})(IndicatorCSQSlots || {});
+export {
+  IndicatorCSQSlots as I
+};

package/components/indicators/IndicatorCSQ/slots/IndicatorCSQSlots.js

@@ -0,0 +1,32 @@
+import { I as IndicatorCSQSlots } from "./IndicatorCSQEnum.js";
+import { i as indicatorCSQStyles } from "../IndicatorCSQ.styles.js";
+import { C as CSQ_SIGNAL_KEY_COMPONENT } from "../constants.js";
+import { Typography, Chip } from "@m4l/components";
+import { styled } from "@mui/material/styles";
+const IndicatorCSQRootStyled = styled("div", {
+  name: CSQ_SIGNAL_KEY_COMPONENT,
+  slot: IndicatorCSQSlots.root
+})(indicatorCSQStyles?.root);
+const SignalIconStyled = styled("svg", {
+  name: CSQ_SIGNAL_KEY_COMPONENT,
+  slot: IndicatorCSQSlots.signalIcon
+})(indicatorCSQStyles?.signalIcon);
+const ContainerTitleAndChipStyled = styled("div", {
+  name: CSQ_SIGNAL_KEY_COMPONENT,
+  slot: IndicatorCSQSlots.containerTitleAndChip
+})(indicatorCSQStyles?.containerTitleAndChip);
+const TitleStyled = styled(Typography, {
+  name: CSQ_SIGNAL_KEY_COMPONENT,
+  slot: IndicatorCSQSlots.title
+})(indicatorCSQStyles?.title);
+const ChipStyled = styled(Chip, {
+  name: CSQ_SIGNAL_KEY_COMPONENT,
+  slot: IndicatorCSQSlots.chip
+})(indicatorCSQStyles?.chip);
+export {
+  ContainerTitleAndChipStyled as C,
+  IndicatorCSQRootStyled as I,
+  SignalIconStyled as S,
+  TitleStyled as T,
+  ChipStyled as a
+};

package/components/indicators/IndicatorCSQ/subcomponents/SignalIcon/SignalIcon.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useComponentSize } from "@m4l/components";
+import { S as SignalIconStyled } from "../../slots/IndicatorCSQSlots.js";
+const SignalIcon = (props) => {
+  const { percentage, size } = props;
+  const { currentSize } = useComponentSize(size);
+  return /* @__PURE__ */ jsxs(SignalIconStyled, { role: "img", "aria-label": "icono de señal de CSQ", ownerState: { percentage, size: currentSize }, viewBox: "0 0 33 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsxs("g", { "clip-path": "url(#clip0_2048_402)", children: [
+      /* @__PURE__ */ jsx("path", { className: "rectangle-1", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.84 20.04C10.56 20.04 11.14 20.62 11.14 21.34V26.68C11.14 27.4 10.56 27.98 9.84 27.98C9.12 27.98 8.54 27.4 8.54 26.68V21.34C8.54 20.62 9.12 20.04 9.84 20.04Z", fill: "#fff" }),
+      /* @__PURE__ */ jsx("path", { className: "rectangle-2", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16.5 14.7C17.22 14.7 17.8 15.28 17.8 16V26.66C17.8 27.38 17.22 27.96 16.5 27.96C15.78 27.96 15.2 27.38 15.2 26.66V16C15.2 15.28 15.78 14.7 16.5 14.7Z", fill: "#fff" }),
+      /* @__PURE__ */ jsx("path", { className: "rectangle-3", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M23.16 9.35999C23.88 9.35999 24.46 9.93999 24.46 10.66V26.66C24.46 27.38 23.88 27.96 23.16 27.96C22.44 27.96 21.86 27.38 21.86 26.66V10.66C21.86 9.93999 22.44 9.35999 23.16 9.35999Z", fill: "#fff" }),
+      /* @__PURE__ */ jsx("path", { className: "rectangle-4", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M29.84 4.03998C30.56 4.03998 31.14 4.61998 31.14 5.33998V26.68C31.14 27.4 30.56 27.98 29.84 27.98C29.12 27.98 28.54 27.4 28.54 26.68V5.33998C28.54 4.61998 29.12 4.03998 29.84 4.03998Z", fill: "#fff" })
+    ] }),
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_2048_402", children: /* @__PURE__ */ jsx("rect", { width: "32", height: "32", fill: "white", transform: "translate(0.5)" }) }) })
+  ] });
+};
+export {
+  SignalIcon as S
+};

package/components/indicators/IndicatorCSQ/subcomponents/SignalIcon/index.js

@@ -0,0 +1 @@
+

package/components/indicators/IndicatorValueStatus/IndicatorValueStatus.d.ts

@@ -0,0 +1,7 @@
+import { IndicatorValueStatusProps } from './types';
+/**
+ * The indicator value status component
+ * @param props - The props of the indicator value status component
+ * @returns The indicator value status component
+ */
+export declare const IndicatorValueStatus: (props: IndicatorValueStatusProps) => import("react/jsx-runtime").JSX.Element;

package/components/indicators/IndicatorValueStatus/IndicatorValueStatus.styles.d.ts

@@ -0,0 +1,2 @@
+import { IndicatorValueStatusStyles } from './types';
+export declare const indicatorValueStatusStyles: IndicatorValueStatusStyles;

package/components/indicators/IndicatorValueStatus/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const INDICATOR_VALUE_STATUS_COMPONENT_KEY = "M4LIndicatorValueStatus";
+export declare const INDICATOR_VALUE_STATUS_CLASSES: Record<string, string>;

package/components/indicators/IndicatorValueStatus/index.d.ts

@@ -0,0 +1 @@
+export { IndicatorValueStatus } from './IndicatorValueStatus';

package/components/indicators/IndicatorValueStatus/slots/IndicatorValueStatusEnum.d.ts

@@ -0,0 +1,7 @@
+export declare enum IndicatorValueStatusSlots {
+    root = "root",
+    containerTitleIcon = "containerTitleIcon",
+    containerValue = "containerValue",
+    containerValueStatus = "containerValueStatus",
+    icon = "icon"
+}

package/components/indicators/IndicatorValueStatus/slots/IndicatorValueStatusSlots.d.ts

@@ -0,0 +1,15 @@
+export declare const IndicatorValueStatusRootStyled: import('@emotion/styled').StyledComponent<Pick<import('@m4l/components/src/components/Card/types').CardProps, keyof import('@m4l/components/src/components/Card/types').CardProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: any;
+}, {}, {}>;
+export declare const ContainerTitleIconStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: any;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ContainerValueStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: any;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ContainerValueStatusStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: any;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const IconStyled: import('@emotion/styled').StyledComponent<Pick<import('@m4l/components').IconProps, keyof import('@m4l/components').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: any;
+}, {}, {}>;

package/components/indicators/IndicatorValueStatus/test/DemoFormatter.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Formatter for the demo component
+ * @param {string} value - The value to display
+ * @param {string} magnitude - The magnitude of the value
+ * @returns {React.ReactNode} - The formatted value
+ */
+export declare const DemoFormatter: ({ value, magnitude, size }: {
+    value: string;
+    magnitude?: string;
+    size?: any;
+}) => import("react/jsx-runtime").JSX.Element;

package/components/indicators/IndicatorValueStatus/test/IndicatorValueStatus.test.d.ts

@@ -0,0 +1 @@
+export {};