@m4l/gclick 0.1.0 → 0.2.0-JAEBeta.1

package/components/Device/slots/DeviceSlots.d.ts

@@ -0,0 +1,15 @@
+export declare const DeviceRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').DeviceOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const DeviceStatusIconStyled: 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: Partial<import('../types').DeviceOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const DeviceStatusRigthContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').DeviceOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const DeviceTitleContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').DeviceOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const DeviceStatusLabelStyled: 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').DeviceOwnerState> & Record<string, unknown>;
+}, {}, {}>;

package/components/Device/slots/DeviceSlots.js

@@ -0,0 +1,32 @@
+import { styled } from "@mui/material/styles";
+import { C as COMPONET_DEVICE_KEY_COMPONENT } from "../constants.js";
+import { d as deviceStatusStyles } from "../Device.styles.js";
+import { D as DeviceSlots } from "./slots.js";
+import { Icon, Typography } from "@m4l/components";
+const DeviceRootStyled = styled("div", {
+  name: COMPONET_DEVICE_KEY_COMPONENT,
+  slot: DeviceSlots.root
+})(deviceStatusStyles?.root);
+const DeviceStatusIconStyled = styled(Icon, {
+  name: COMPONET_DEVICE_KEY_COMPONENT,
+  slot: DeviceSlots.statusIcon
+})(deviceStatusStyles?.statusIcon);
+const DeviceStatusRigthContainerStyled = styled("div", {
+  name: COMPONET_DEVICE_KEY_COMPONENT,
+  slot: DeviceSlots.statusRigthContainer
+})(deviceStatusStyles?.statusRigthContainer);
+const DeviceTitleContainerStyled = styled("div", {
+  name: COMPONET_DEVICE_KEY_COMPONENT,
+  slot: DeviceSlots.titleContainer
+})(deviceStatusStyles?.titleContainer);
+const DeviceStatusLabelStyled = styled(Typography, {
+  name: COMPONET_DEVICE_KEY_COMPONENT,
+  slot: DeviceSlots.statusLabel
+})(deviceStatusStyles?.statusLabel);
+export {
+  DeviceRootStyled as D,
+  DeviceStatusIconStyled as a,
+  DeviceStatusRigthContainerStyled as b,
+  DeviceTitleContainerStyled as c,
+  DeviceStatusLabelStyled as d
+};

package/components/Device/slots/slots.d.ts

@@ -0,0 +1,7 @@
+export declare enum DeviceSlots {
+    root = "root",
+    statusIcon = "statusIcon",
+    statusRigthContainer = "statusRigthContainer",
+    titleContainer = "titleContainer",
+    statusLabel = "statusLabel"
+}

package/components/Device/slots/slots.js

@@ -0,0 +1,11 @@
+var DeviceSlots = /* @__PURE__ */ ((DeviceSlots2) => {
+  DeviceSlots2["root"] = "root";
+  DeviceSlots2["statusIcon"] = "statusIcon";
+  DeviceSlots2["statusRigthContainer"] = "statusRigthContainer";
+  DeviceSlots2["titleContainer"] = "titleContainer";
+  DeviceSlots2["statusLabel"] = "statusLabel";
+  return DeviceSlots2;
+})(DeviceSlots || {});
+export {
+  DeviceSlots as D
+};

package/components/Device/types.d.ts

@@ -0,0 +1,30 @@
+import { DeviceSlots } from './slots/slots';
+import { COMPONET_DEVICE_KEY_COMPONENT } from './constants';
+import { Theme } from '@mui/material/styles';
+import { DeviceDataType } from '../../@types';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+import { ChipColorOptions, Sizes } from '@m4l/styles';
+import { IconColorDeep } from '@m4l/components';
+export interface DeviceProps {
+    variant?: 'withStatus' | 'withId';
+    deviceData: DeviceDataType;
+    size?: Sizes;
+}
+export type useDeviceProps = Pick<DeviceProps, 'deviceData' | 'variant'> & {
+    withLabel?: boolean;
+};
+export type useDeviceStatusProps = Pick<DeviceProps, 'deviceData'> & {
+    withLabel?: boolean;
+};
+export type DeviceSlotsType = keyof typeof DeviceSlots;
+export type DeviceOwnerState = {
+    iconKey: string;
+    size: Sizes;
+    variant: 'withStatus' | 'withId';
+    /**
+     * Color compatible con chip para reestilar el typography
+     */
+    color: IconColorDeep;
+    palletColor?: ChipColorOptions;
+};
+export type DeviceStyles = M4LOverridesStyleRules<DeviceSlotsType, typeof COMPONET_DEVICE_KEY_COMPONENT, Theme>;

package/components/DeviceLabel/DeviceLabel.js

@@ -8,7 +8,7 @@ const regex = /#[^#]+#/g;
 const DeviceLabel = (props) => {
   const { deviceData, labelTemplate = "#settings.name# #resourceSerialId#", withImage, className } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
-  const src = `${host_static_assets}/${environment_assets}/frontend/components/device/assets/images/${deviceData?.settings?.imageUrl}`;
+  const src = `${host_static_assets}/${environment_assets}/frontend/components/device/assets/images/${deviceData?.settings?.iconId}`;
   let label = labelTemplate;
   const matches = label.match(regex);
   if (matches) {

package/components/DeviceLabel/slots/DeviceLabelSlots.d.ts

@@ -1,3 +1,9 @@
-export declare const DeviceRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const ImageStyled: import('@emotion/styled').StyledComponent<Pick<import('@m4l/components/src/components/Image').ImageProps, keyof import('@m4l/components/src/components/Image').ImageProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
-export declare const LabelStyled: 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>, {}, {}>;
+export declare const DeviceRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../../Device/types').DeviceOwnerState> & 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 ImageStyled: import('@emotion/styled').StyledComponent<Pick<import('@m4l/components/src/components/Image').ImageProps, keyof import('@m4l/components/src/components/Image').ImageProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../../Device/types').DeviceOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const LabelStyled: 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('../../Device/types').DeviceOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;

package/components/DeviceLabel/types.d.ts

@@ -1,8 +1,8 @@
-import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { DeviceSlots } from './slots/slots';
 import { COMPONET_KEY_COMPONENT } from './constants';
 import { Theme } from '@mui/material/styles';
 import { DeviceDataType } from '../../@types';
+import { M4LOverridesStyleRules } from '@m4l/components';
 export type DeviceProps = {
     /**
      * Plantilla de la etiqueta que se muestra en el componente.
@@ -23,4 +23,4 @@ export type DeviceProps = {
 };
 export type DeviceSlotsType = keyof typeof DeviceSlots;
 export type DeviceOwnerState = {};
-export type DeviceStyles = Partial<OverridesStyleRules<DeviceSlotsType, typeof COMPONET_KEY_COMPONENT, Theme> | undefined> | undefined;
+export type DeviceStyles = M4LOverridesStyleRules<DeviceSlotsType, typeof COMPONET_KEY_COMPONENT, Theme>;

package/components/DeviceStatus/DeviceStatus.js

@@ -1,15 +1,3 @@
-import { jsx } from "react/jsx-runtime";
-import { useEnvironment } from "@m4l/core";
-import { D as DeviceStatusRootStyled } from "./slots/DeviceStatusSlots.js";
-import { Icon } from "@m4l/components";
-import { u as useDeviceStatus } from "./hooks/useDeviceStatus.js";
-const DeviceStatus = (props) => {
-  const { deviceData } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { iconKey, color } = useDeviceStatus({ deviceData });
-  const src = `${host_static_assets}/${environment_assets}/frontend/components/device_status/assets/icons/${iconKey}.svg`;
-  return /* @__PURE__ */ jsx(DeviceStatusRootStyled, { ownerState: { iconKey }, children: /* @__PURE__ */ jsx(Icon, { src, color }) });
-};
-export {
-  DeviceStatus as D
-};
+import "react/jsx-runtime";
+import "@m4l/core";
+import "@m4l/components";

package/components/DeviceStatus/DeviceStatus.styles.js

@@ -1,13 +1 @@
-const deviceStatusStyles = {
-  /**
-   * TODO: Documentar
-   */
-  root: () => ({
-    display: "flex",
-    alignItems: "center"
-    // flexGrow: 1,
-  })
-};
-export {
-  deviceStatusStyles as d
-};
+

package/components/DeviceStatus/constants.js

@@ -1,4 +1 @@
-const COMPONET_KEY_COMPONENT = "M4LDeviceStatus";
-export {
-  COMPONET_KEY_COMPONENT as C
-};
+

package/components/DeviceStatus/dictionary.d.ts

@@ -1,13 +1,13 @@
-export declare const MDS_DICTIONARY_ID = "my_device_status";
+export declare const MDS_DICTIONARY_ID = "device";
 export declare function getDeviceStatusComponentsDictionary(): string[];
 export declare const MDS_DICTIONARY: {
-    readonly LABEL_OFF: "my_device_status.label_off";
-    readonly LABEL_MOVING: "my_device_status.label_moving";
-    readonly LABEL_STOPPED: "my_device_status.label_stopped";
-    readonly LABEL_STOPPED_RALENTI: "my_device_status.label_stopped_ralenti";
-    readonly LABEL_STOPPED_E_RALENTI: "my_device_status.label_stopped_e_ralenti";
-    readonly LABEL_TOWING: "my_device_status.label_towing";
-    readonly LABEL_NO_GPS_SIGNAL: "my_device_status.label_no_gps_signal";
-    readonly LABEL_POWER_SAVING: "my_device_status.label_power_saving";
-    readonly LABEL_MAX_SPEED: "my_device_status.label_max_speed";
+    readonly LABEL_OFF: "device.label_off";
+    readonly LABEL_MOVING: "device.label_moving";
+    readonly LABEL_STOPPED: "device.label_stopped";
+    readonly LABEL_STOPPED_RALENTI: "device.label_stopped_ralenti";
+    readonly LABEL_STOPPED_E_RALENTI: "device.label_stopped_e_ralenti";
+    readonly LABEL_TOWING: "device.label_towing";
+    readonly LABEL_NO_GPS_SIGNAL: "device.label_no_gps_signal";
+    readonly LABEL_POWER_SAVING: "device.label_power_saving";
+    readonly LABEL_MAX_SPEED: "device.label_max_speed";
 };

package/components/DeviceStatus/dictionary.js

@@ -1,18 +1,7 @@
-const MDS_DICTIONARY_ID = "my_device_status";
+const MDS_DICTIONARY_ID = "device";
 function getDeviceStatusComponentsDictionary() {
   return [MDS_DICTIONARY_ID].concat();
 }
-const MDS_DICTIONARY = {
-  LABEL_OFF: `${MDS_DICTIONARY_ID}.label_off`,
-  LABEL_MOVING: `${MDS_DICTIONARY_ID}.label_moving`,
-  LABEL_STOPPED: `${MDS_DICTIONARY_ID}.label_stopped`,
-  LABEL_STOPPED_RALENTI: `${MDS_DICTIONARY_ID}.label_stopped_ralenti`,
-  LABEL_STOPPED_E_RALENTI: `${MDS_DICTIONARY_ID}.label_stopped_e_ralenti`,
-  LABEL_TOWING: `${MDS_DICTIONARY_ID}.label_towing`,
-  LABEL_POWER_SAVING: `${MDS_DICTIONARY_ID}.label_power_saving`,
-  LABEL_MAX_SPEED: `${MDS_DICTIONARY_ID}.label_max_speed`
-};
 export {
-  MDS_DICTIONARY as M,
   getDeviceStatusComponentsDictionary as g
 };

package/components/DeviceStatus/icons.d.ts

@@ -1,4 +1,4 @@
-export declare const MDS_ICONS: {
+export declare const DEVICE_STATUS_ICONS: {
     NO_GPS_SIGNAL: string;
     OFF: string;
     MOVING: string;

package/components/DeviceStatus/index.d.ts

@@ -1,4 +1,5 @@
 export * from './DeviceStatus';
 export { getDeviceStatusComponentsDictionary } from './dictionary';
-export { getDeviceStatusByData } from './hooks/helper';
-export { DEVICE_STATUSES_CONFIG } from './hooks/constants';
+export { getDeviceStatusByData } from '../Device/helpers/helperDeviceStatus';
+export { DEVICE_STATUSES_CONFIG } from '../Device/hooks/constants';
+export { useDeviceStatus } from '../Device/hooks/useDeviceStatus';

package/components/DeviceStatus/slots/DeviceStatusSlots.js

@@ -1,11 +1 @@
-import { styled } from "@mui/material/styles";
-import { C as COMPONET_KEY_COMPONENT } from "../constants.js";
-import { d as deviceStatusStyles } from "../DeviceStatus.styles.js";
-import { D as DeviceStatusSlots } from "./slots.js";
-const DeviceStatusRootStyled = styled("div", {
-  name: COMPONET_KEY_COMPONENT,
-  slot: DeviceStatusSlots.root
-})(deviceStatusStyles?.root);
-export {
-  DeviceStatusRootStyled as D
-};
+import "@mui/material/styles";

package/components/DeviceStatus/slots/slots.js

@@ -1,7 +1 @@
-var DeviceStatusSlots = /* @__PURE__ */ ((DeviceStatusSlots2) => {
-  DeviceStatusSlots2["root"] = "root";
-  return DeviceStatusSlots2;
-})(DeviceStatusSlots || {});
-export {
-  DeviceStatusSlots as D
-};
+

package/components/index.d.ts

@@ -1,4 +1,4 @@
+export * from './Device';
 export * from './DeviceLabel';
-export * from './DeviceStatus';
 export * from './maps';
 export * from './indicators';

package/components/indicators/IndicatorBattery/IndicatorBattery.styles.js

@@ -4,11 +4,11 @@ const indicatorBatteryStyles = {
    * Contenedor del indicador de batería
    */
   root: ({ theme }) => ({
-    width: "fit-content",
+    // width: 'fit-content',
     display: "flex",
     flexDirection: "column",
     gap: theme.vars.size.baseSpacings.sp2,
-    backgroundColor: theme.vars.palette.background.base
+    backgroundColor: theme.vars.palette?.background.base
   }),
   /**
    * Título del indicador de batería

package/components/indicators/IndicatorBattery/dictionary.js

@@ -1,4 +1,7 @@
 const INDICATOR_BATTERY_DICTIONARY_KEY = "indicator_battery";
+const getIndicatorBatteryComponentsDictionary = () => {
+  return [INDICATOR_BATTERY_DICTIONARY_KEY];
+};
 const INDICATOR_BATTERY_DICTIONARY = {
   titleMain: `${INDICATOR_BATTERY_DICTIONARY_KEY}.title_main`,
   titleBackup: `${INDICATOR_BATTERY_DICTIONARY_KEY}.title_backup`,
@@ -12,5 +15,6 @@ const INDICATOR_BATTERY_DICTIONARY = {
   statusOverVoltage: `${INDICATOR_BATTERY_DICTIONARY_KEY}.label_status_over_voltage`
 };
 export {
-  INDICATOR_BATTERY_DICTIONARY as I
+  INDICATOR_BATTERY_DICTIONARY as I,
+  getIndicatorBatteryComponentsDictionary as g
 };

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

@@ -1 +1,2 @@
 export { IndicatorBattery } from './IndicatorBattery';
+export { getIndicatorBatteryComponentsDictionary } from './dictionary';

package/components/indicators/IndicatorCSQ/IndicatorCSQ.js

@@ -2,17 +2,19 @@ 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 { I as INDICATOR_CSQ_DICTIONARY } from "./dictionary.js";
+import { I as INDICATOR_CSQ_CLASSES } from "./constants.js";
+import clsx from "clsx";
 import { S as SignalIcon } from "./subcomponents/SignalIcon/SignalIcon.js";
 const IndicatorCSQ = (props) => {
-  const { value, size } = props;
+  const { value, size, className } = props;
   const { getLabel } = useModuleDictionary();
   const { labelQuality, color, percentage } = getQualityLabel({ getLabel, quality: value });
-  return /* @__PURE__ */ jsxs(IndicatorCSQRootStyled, { role: "status", "aria-label": "CSQ Signal", children: [
+  return /* @__PURE__ */ jsxs(IndicatorCSQRootStyled, { className: clsx(className, INDICATOR_CSQ_CLASSES.root), 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 })
+      /* @__PURE__ */ jsx(TitleStyled, { variant: "paragraphDens", children: getLabel(INDICATOR_CSQ_DICTIONARY.LABEL_CSQ_TITLE) }),
+      /* @__PURE__ */ jsx(ChipStyled, { label: value !== null && value !== void 0 ? `${value} - ${labelQuality}` : labelQuality, variant: "contained", color })
     ] })
   ] });
 };

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

@@ -1,8 +1,8 @@
 /**
  * Key component for the CSQSignal component
  */
-export declare const CSQ_SIGNAL_KEY_COMPONENT = "M4LCSQSignal";
+export declare const INDICATOR_CSQ_KEY_COMPONENT = "M4LCSQSignal";
 /**
  * Classes for the CSQSignal component
  */
-export declare const CSQ_SIGNAL_CLASSES: Record<string, string>;
+export declare const INDICATOR_CSQ_CLASSES: Record<string, string>;

package/components/indicators/IndicatorCSQ/constants.js

@@ -1,7 +1,8 @@
 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);
+const INDICATOR_CSQ_KEY_COMPONENT = "M4LCSQSignal";
+const INDICATOR_CSQ_CLASSES = getComponentClasses(INDICATOR_CSQ_KEY_COMPONENT, IndicatorCSQSlots);
 export {
-  CSQ_SIGNAL_KEY_COMPONENT as C
+  INDICATOR_CSQ_CLASSES as I,
+  INDICATOR_CSQ_KEY_COMPONENT as a
 };

package/components/indicators/IndicatorCSQ/dictionary.d.ts

@@ -1,7 +1,10 @@
-export declare const getCSQSignalComponentsDictionary: () => string[];
-export declare const CSQ_SIGNAL_DICTIONARY: {
+export declare const getIndicatorCSQComponentsDictionary: () => string[];
+export declare const INDICATOR_CSQ_DICTIONARY: {
     readonly LABEL_CSQ_TITLE: "indicator_csq.label_csq_title";
+    readonly LABEL_QUALITY_NOT_AVAILABLE: "indicator_csq.label_quality_not_available";
     readonly LABEL_QUALITY_NOT_DETECTABLE: "indicator_csq.label_quality_not_detectable";
+    readonly LABEL_QUALITY_NOT_SIGNAL: "indicator_csq.label_quality_not_signal";
+    readonly LABEL_QUALITY_VERY_WEAK: "indicator_csq.label_quality_very_weak";
     readonly LABEL_QUALITY_WEAK: "indicator_csq.label_quality_weak";
     readonly LABEL_QUALITY_ACCEPTABLE: "indicator_csq.label_quality_acceptable";
     readonly LABEL_QUALITY_GOOD: "indicator_csq.label_quality_good";

package/components/indicators/IndicatorCSQ/dictionary.js

@@ -1,16 +1,19 @@
-const CSQ_SIGNAL_KEY_DICTIONARY = "indicator_csq";
-const getCSQSignalComponentsDictionary = () => {
-  return [CSQ_SIGNAL_KEY_DICTIONARY];
+const INDICATOR_CSQ_KEY_DICTIONARY = "indicator_csq";
+const getIndicatorCSQComponentsDictionary = () => {
+  return [INDICATOR_CSQ_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`
+const INDICATOR_CSQ_DICTIONARY = {
+  LABEL_CSQ_TITLE: `${INDICATOR_CSQ_KEY_DICTIONARY}.label_csq_title`,
+  LABEL_QUALITY_NOT_AVAILABLE: `${INDICATOR_CSQ_KEY_DICTIONARY}.label_quality_not_available`,
+  LABEL_QUALITY_NOT_DETECTABLE: `${INDICATOR_CSQ_KEY_DICTIONARY}.label_quality_not_detectable`,
+  LABEL_QUALITY_NOT_SIGNAL: `${INDICATOR_CSQ_KEY_DICTIONARY}.label_quality_not_signal`,
+  LABEL_QUALITY_VERY_WEAK: `${INDICATOR_CSQ_KEY_DICTIONARY}.label_quality_very_weak`,
+  LABEL_QUALITY_WEAK: `${INDICATOR_CSQ_KEY_DICTIONARY}.label_quality_weak`,
+  LABEL_QUALITY_ACCEPTABLE: `${INDICATOR_CSQ_KEY_DICTIONARY}.label_quality_acceptable`,
+  LABEL_QUALITY_GOOD: `${INDICATOR_CSQ_KEY_DICTIONARY}.label_quality_good`,
+  LABEL_QUALITY_EXCELLENT: `${INDICATOR_CSQ_KEY_DICTIONARY}.label_quality_excellent`
 };
 export {
-  CSQ_SIGNAL_DICTIONARY as C,
-  getCSQSignalComponentsDictionary as g
+  INDICATOR_CSQ_DICTIONARY as I,
+  getIndicatorCSQComponentsDictionary as g
 };

package/components/indicators/IndicatorCSQ/helpers/getQualityLabel/getQualityLabel.d.ts

@@ -1,5 +1,17 @@
 import { GetQualityLabelProps, GetQualityLabelReturn } from './types';
 export declare const QUALITY_RANGES: readonly [{
+    readonly min: 0;
+    readonly max: 0;
+    readonly value: "indicator_csq.label_quality_not_signal";
+    readonly color: "error";
+    readonly percentage: 0;
+}, {
+    readonly min: 1;
+    readonly max: 1;
+    readonly value: "indicator_csq.label_quality_very_weak";
+    readonly color: "error";
+    readonly percentage: 0;
+}, {
     readonly min: 2;
     readonly max: 9;
     readonly value: "indicator_csq.label_quality_weak";
@@ -19,10 +31,16 @@ export declare const QUALITY_RANGES: readonly [{
     readonly percentage: 75;
 }, {
     readonly min: 20;
-    readonly max: 32;
+    readonly max: 31;
     readonly value: "indicator_csq.label_quality_excellent";
     readonly color: "persianGreen";
     readonly percentage: 100;
+}, {
+    readonly min: 32;
+    readonly max: number;
+    readonly value: "indicator_csq.label_quality_not_detectable";
+    readonly color: "error";
+    readonly percentage: 0;
 }];
 /**
  * Get quality label based on CSQ signal quality value
@@ -30,7 +48,9 @@ export declare const QUALITY_RANGES: readonly [{
  * @returns quality label string
  *
  * Quality ranges:
- * - 0, 1, 99: Not detectable
+ * - null / undefined / NaN:  not available
+ * - 0: Not signal
+ * - 1: Very weak
  * - 2-9: Weak
  * - 10-14: Acceptable
  * - 15-19: Good

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

@@ -1,41 +1,27 @@
-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;
+import { I as INDICATOR_CSQ_DICTIONARY } from "../../dictionary.js";
 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 }
+  { min: 0, max: 0, value: INDICATOR_CSQ_DICTIONARY.LABEL_QUALITY_NOT_SIGNAL, color: "error", percentage: 0 },
+  { min: 1, max: 1, value: INDICATOR_CSQ_DICTIONARY.LABEL_QUALITY_VERY_WEAK, color: "error", percentage: 0 },
+  { min: 2, max: 9, value: INDICATOR_CSQ_DICTIONARY.LABEL_QUALITY_WEAK, color: "orange", percentage: 25 },
+  { min: 10, max: 14, value: INDICATOR_CSQ_DICTIONARY.LABEL_QUALITY_ACCEPTABLE, color: "warning", percentage: 50 },
+  { min: 15, max: 19, value: INDICATOR_CSQ_DICTIONARY.LABEL_QUALITY_GOOD, color: "info", percentage: 75 },
+  { min: 20, max: 31, value: INDICATOR_CSQ_DICTIONARY.LABEL_QUALITY_EXCELLENT, color: "persianGreen", percentage: 100 },
+  { min: 32, max: Infinity, value: INDICATOR_CSQ_DICTIONARY.LABEL_QUALITY_NOT_DETECTABLE, color: "error", percentage: 0 }
 ];
 const getQualityLabel = (props) => {
   const { getLabel, quality } = props;
-  if (quality === null || quality === void 0) {
+  if (quality === null || quality === void 0 || isNaN(quality)) {
     return {
-      labelQuality: getLabel(DEFAULT_QUALITY_LABEL),
-      color: "error",
+      labelQuality: getLabel(INDICATOR_CSQ_DICTIONARY.LABEL_QUALITY_NOT_AVAILABLE),
+      color: "default",
       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);
+  const qualityRange = QUALITY_RANGES.find((range) => quality >= range.min && quality <= range.max) ?? QUALITY_RANGES[QUALITY_RANGES.length - 1];
   return {
-    labelQuality: getLabel(qualityRange?.value ?? DEFAULT_QUALITY_LABEL),
-    color: qualityRange?.color ?? "error",
-    percentage: qualityRange?.percentage ?? 0
+    labelQuality: getLabel(qualityRange.value),
+    color: qualityRange.color,
+    percentage: qualityRange.percentage
   };
 };
 export {

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

@@ -1,3 +1,3 @@
-export { IndicatorCSQ as CSQSignal } from './IndicatorCSQ';
-export type { IndicatorCSQProps as CSQSignalProps } from './types';
-export { getCSQSignalComponentsDictionary } from './dictionary';
+export { IndicatorCSQ } from './IndicatorCSQ';
+export type { IndicatorCSQProps } from './types';
+export { getIndicatorCSQComponentsDictionary } from './dictionary';

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

@@ -1,26 +1,26 @@
 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 { a as INDICATOR_CSQ_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,
+  name: INDICATOR_CSQ_KEY_COMPONENT,
   slot: IndicatorCSQSlots.root
 })(indicatorCSQStyles?.root);
 const SignalIconStyled = styled("svg", {
-  name: CSQ_SIGNAL_KEY_COMPONENT,
+  name: INDICATOR_CSQ_KEY_COMPONENT,
   slot: IndicatorCSQSlots.signalIcon
 })(indicatorCSQStyles?.signalIcon);
 const ContainerTitleAndChipStyled = styled("div", {
-  name: CSQ_SIGNAL_KEY_COMPONENT,
+  name: INDICATOR_CSQ_KEY_COMPONENT,
   slot: IndicatorCSQSlots.containerTitleAndChip
 })(indicatorCSQStyles?.containerTitleAndChip);
 const TitleStyled = styled(Typography, {
-  name: CSQ_SIGNAL_KEY_COMPONENT,
+  name: INDICATOR_CSQ_KEY_COMPONENT,
   slot: IndicatorCSQSlots.title
 })(indicatorCSQStyles?.title);
 const ChipStyled = styled(Chip, {
-  name: CSQ_SIGNAL_KEY_COMPONENT,
+  name: INDICATOR_CSQ_KEY_COMPONENT,
   slot: IndicatorCSQSlots.chip
 })(indicatorCSQStyles?.chip);
 export {

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

@@ -1,6 +1,6 @@
 import { M4LOverridesStyleRules } from '@m4l/components';
 import { IndicatorCSQSlots } from './slots/IndicatorCSQEnum';
-import { CSQ_SIGNAL_KEY_COMPONENT } from './constants';
+import { INDICATOR_CSQ_KEY_COMPONENT } from './constants';
 import { Theme } from '@mui/material';
 import { Sizes } from '@m4l/styles';
 export interface IndicatorCSQProps {
@@ -12,10 +12,14 @@ export interface IndicatorCSQProps {
      * Size of the indicator
      */
     size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * className
+     */
+    className?: string;
 }
 export type IndicatorCSQSlotsType = keyof typeof IndicatorCSQSlots;
 export type IndicatorCSQOwnerState = {
     percentage: number;
     size: IndicatorCSQProps['size'];
 };
-export type IndicatorCSQStyles = M4LOverridesStyleRules<IndicatorCSQSlotsType, typeof CSQ_SIGNAL_KEY_COMPONENT, Theme>;
+export type IndicatorCSQStyles = M4LOverridesStyleRules<IndicatorCSQSlotsType, typeof INDICATOR_CSQ_KEY_COMPONENT, Theme>;

package/components/indicators/IndicatorValueAndMagnitude/IndicatorValueAndMagnitude.d.ts

@@ -0,0 +1,5 @@
+import { IndicatorValueAndMagnitudeProps } from './types';
+/**
+ * Valor y magnitud component, para mostrar en los IndicatorValueStatus
+ */
+export declare const IndicatorValueAndMagnitude: (props: IndicatorValueAndMagnitudeProps) => import("react/jsx-runtime").JSX.Element;

package/components/indicators/IndicatorValueAndMagnitude/IndicatorValueAndMagnitude.js

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { R as RootStyled, V as ValueStyled, C as ContainerUnitStyled, U as UnitStyled } from "./slots/styled.js";
+const IndicatorValueAndMagnitude = (props) => {
+  const { value, magnitude, minWidth } = props;
+  const ownerState = {
+    minWidth
+  };
+  return /* @__PURE__ */ jsxs(RootStyled, { children: [
+    /* @__PURE__ */ jsx(ValueStyled, { variant: "subtitleDens", fontFamily: "Jura", color: "text.secondary", ellipsis: true, skeletonWidth: "30px", ownerState, children: value }),
+    magnitude && /* @__PURE__ */ jsx(ContainerUnitStyled, { children: /* @__PURE__ */ jsx(UnitStyled, { variant: "body", fontFamily: "Jura", skeletonWidth: "15px", ellipsis: true, children: magnitude }) })
+  ] });
+};
+export {
+  IndicatorValueAndMagnitude as I
+};

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

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