@m4l/gclick 0.0.2

package/.storybook/constants.d.ts

@@ -0,0 +1,30 @@
+import { ThemeUserColor } from '@m4l/styles';
+export declare const MODES: {
+    light: string;
+    dark: string;
+};
+export declare const MODES_BACKGROUNDS: Record<keyof Omit<typeof MODES, 'both'>, string>;
+export declare const MODES_ITEMS: {
+    value: string;
+    title: string;
+}[];
+export declare const DEVICE_TYPES: {
+    automatic: string;
+    mobile: string;
+    desktop: string;
+};
+export declare const DEVICE_TYPES_ITEMS: {
+    value: string;
+    title: string;
+}[];
+export declare const COLORS_THEME: Record<ThemeUserColor, ThemeUserColor>;
+export declare const COLORS_THEME_ITEMS: Record<string, string>[];
+export declare const USER = "carloszapata@gmail.com";
+export declare const PWD = "Mayuscula123.";
+export declare const DATABASE = "";
+export declare const ENVIRONMENT_ASSETS = "d1";
+export declare const HOST_API_LOCAL = "http://localhost:3000/domain";
+export declare const HOST_API_REMOTE = "https://lab1.stage.made4labs.com/api/v1/domain";
+export declare const HOST_STATIC_ASSETS = "https://s3.amazonaws.com/static.made4labs/environments";
+export declare const DOMAIN_TOKEN = "lab1";
+export declare const STORYBOOK_MODULE_ID = "login";

package/.storybook/decorators/StorybookWithMapProvider/constants.d.ts

@@ -0,0 +1,2 @@
+import { LayerStore } from '../../../src/components/maps/components/GpsMap/contexts/MapContext/types';
+export declare const LAYER_MARKS_ABCD_my_gps_devices: LayerStore[];

package/.storybook/decorators/StorybookWithMapProvider/index.d.ts

@@ -0,0 +1 @@
+export * from './StorybookWithMapProvider';

package/.storybook/decorators/WithContexts/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const USER: any;
+export declare const PWD: any;
+export declare const DATABASE = "";
+export declare const ENVIRONMENT_ASSETS: any;
+export declare const HOST_API_LOCAL: any;
+export declare const HOST_API_REMOTE: any;
+export declare const HOST_STATIC_ASSETS: any;
+export declare const DOMAIN_TOKEN: any;
+export declare const STORYBOOK_MODULE_ID: any;
+export declare const STORYBOOK_ISOLATION_MODULE_ID: any;

package/.storybook/decorators/WithContexts/index.d.ts

@@ -0,0 +1 @@
+export * from './WithContexts';

package/.storybook/decorators/WithContexts/types.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { ThemeSettingsType } from '@m4l/graphics';
+export type AppThemeProps = {
+    themeMode: ThemeSettingsType['themeMode'];
+    themeColor: ThemeSettingsType['themeColor'];
+    children: ReactNode;
+};

package/.storybook/decorators/WithWindowsContainer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './WithWindowsContainer';
+export { WindowsContainer } from './subcomponents/WindowsContainer';

package/.storybook/decorators/WithWindowsContainer/subcomponents/WindowsContainer/index.d.ts

@@ -0,0 +1 @@
+export * from './WindowsContainer';

package/.storybook/decorators/WithWindowsContainer/subcomponents/WindowsContainer/types.d.ts

@@ -0,0 +1,4 @@
+export type WindowsContainerProps = {
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+};

package/.storybook/main.d.ts

@@ -0,0 +1,3 @@
+import { StorybookConfig } from '@storybook/react-vite';
+declare const config: StorybookConfig;
+export default config;

package/.storybook/mocks/config-msw.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Initializes Mock Service Worker (MSW) for Storybook
+ *
+ * MSW is used to intercept and mock network requests during development and testing.
+ * This initialization configures MSW to work with Storybook's environment.
+ *
+ * Configuration details:
+ * - Sets up the service worker with the correct path based on the environment
+ * - Handles unhandled requests by bypassing them
+ * - Configures the service worker scope
+ *
+ * Environment-specific paths:
+ * - Development: /mockServiceWorker.js
+ * - Review (MR): /{library_name}/{branch_name}/mockServiceWorker.js
+ *
+ * The path is determined by the VITE_STORYBOOK_BASE_PATH environment variable:
+ * - If set, prepends the value to the service worker path
+ * - If not set, uses the root path
+ * @see https://github.com/mswjs/msw-storybook-addon#configuring-msw
+ */
+export declare const initializeMSW: () => void;

package/.storybook/mocks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './network-mocks';
+export * from './config-msw';

package/.storybook/mocks/network-mocks.d.ts

@@ -0,0 +1 @@
+export declare const mswHandlers: import('msw').HttpHandler[];

package/.storybook/storybook.vite.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vite').UserConfig;
+export default _default;

package/@types/augmentations.d.ts

@@ -0,0 +1,38 @@
+import { Interpolation } from '@mui/material';
+import { ComponentsPropsList } from '@mui/material/styles';
+declare module '@mui/material/styles' {
+    interface TypographyVariants {
+        subtitle: Record<string, any>;
+        subtitleDens: Record<string, any>;
+        paragraph: Record<string, any>;
+        paragraphDens: Record<string, any>;
+        body: Record<string, any>;
+        bodyDens: Record<string, any>;
+        action: Record<string, any>;
+    }
+    interface TypographyVariantsOptions {
+        subtitle: React.CSSProperties;
+        subtitleDens: React.CSSProperties;
+        paragraph: React.CSSProperties;
+        paragraphDens: React.CSSProperties;
+        body: React.CSSProperties;
+        bodyDens: React.CSSProperties;
+        action: React.CSSProperties;
+    }
+}
+declare module '@mui/material/Typography' {
+    interface TypographyPropsVariantOverrides {
+        subtitle: true;
+        subtitleDens: true;
+        paragraph: true;
+        paragraphDens: true;
+        body: true;
+        bodyDens: true;
+        action: true;
+    }
+}
+export type M4LOverridesStyleRules<ClassKey extends string = string, ComponentName = keyof ComponentsPropsList, Theme = unknown> = Record<ClassKey, Interpolation<(ComponentName extends keyof ComponentsPropsList ? Record<string, unknown> & {
+    ownerState: ComponentsPropsList[ComponentName] & Record<string, unknown>;
+} : {}) & {
+    theme: Theme;
+} & Record<string, unknown>>>;

package/@types/constants.d.ts

@@ -0,0 +1,26 @@
+export declare const BASE_SVG_COLOR = "#1E96DC";
+export declare enum GNSSEnumMotionStatus {
+    off = 0,// - 0: apagado ( Ignición apagada velocidad 0)
+    moving = 1,// - 1: en movimiento ( Ignición prendida )
+    stopped = 2,// - 2: detenido ( Ignición prendida, motor apagado RPM en 0)
+    stoppedRalenti = 3,// - 3: stopped en ralenti ( Ignición prendida, motor encendido RPM  > 0)
+    stoppedExcesiveRalenti = 4,// - 4:stopped en ralenti excesivo ( Ignición prendida, motor encendido RPM  > 0)
+    towing = 5,// - 5: remolcado
+    powerSaving = 6,// - 6: En ahorro de energía
+    maxSpeed = 7
+}
+export declare enum GNSSEnumSignal {
+    reliable = 0,// - 0:Confiable
+    acceptable = 1,// - 1:Aceptable
+    noSignal = 2
+}
+export declare enum ADCPowerEnum {
+    ok = 0,// - 0: Ok
+    low = 1,// - 1: Low Batería baja
+    lost = 2
+}
+export declare enum AdminStatusEnum {
+    inactive = 0,// - 0: Inactivo
+    active = 1,// - 1: Activo
+    retired = 2
+}

package/@types/constants.js

@@ -0,0 +1,21 @@
+var GNSSEnumMotionStatus = /* @__PURE__ */ ((GNSSEnumMotionStatus2) => {
+  GNSSEnumMotionStatus2[GNSSEnumMotionStatus2["off"] = 0] = "off";
+  GNSSEnumMotionStatus2[GNSSEnumMotionStatus2["moving"] = 1] = "moving";
+  GNSSEnumMotionStatus2[GNSSEnumMotionStatus2["stopped"] = 2] = "stopped";
+  GNSSEnumMotionStatus2[GNSSEnumMotionStatus2["stoppedRalenti"] = 3] = "stoppedRalenti";
+  GNSSEnumMotionStatus2[GNSSEnumMotionStatus2["stoppedExcesiveRalenti"] = 4] = "stoppedExcesiveRalenti";
+  GNSSEnumMotionStatus2[GNSSEnumMotionStatus2["towing"] = 5] = "towing";
+  GNSSEnumMotionStatus2[GNSSEnumMotionStatus2["powerSaving"] = 6] = "powerSaving";
+  GNSSEnumMotionStatus2[GNSSEnumMotionStatus2["maxSpeed"] = 7] = "maxSpeed";
+  return GNSSEnumMotionStatus2;
+})(GNSSEnumMotionStatus || {});
+var GNSSEnumSignal = /* @__PURE__ */ ((GNSSEnumSignal2) => {
+  GNSSEnumSignal2[GNSSEnumSignal2["reliable"] = 0] = "reliable";
+  GNSSEnumSignal2[GNSSEnumSignal2["acceptable"] = 1] = "acceptable";
+  GNSSEnumSignal2[GNSSEnumSignal2["noSignal"] = 2] = "noSignal";
+  return GNSSEnumSignal2;
+})(GNSSEnumSignal || {});
+export {
+  GNSSEnumMotionStatus as G,
+  GNSSEnumSignal as a
+};

package/@types/deviceData.d.ts

@@ -0,0 +1,90 @@
+import { Maybe } from '@m4l/core';
+import { GNSSEnumMotionStatus, GNSSEnumSignal } from './constants';
+import { OperationalRoles, PropertyValue, PropertyValueWithTrack } from './general';
+import { VPTCurrentMultiple, VPTCurrentADCPower, VPTCurrentDIX, VPTCurrentModem, VPTSettingsDIX, VPTCurrentOWTempX } from './vpts';
+export type DeviceDataGeofence = {
+    id: number;
+    name: string;
+    inAt: Date;
+};
+export type DeviceDataPOI = {
+    id: number;
+    name: string;
+    inAt: Date;
+};
+export type DeviceCurrentVPTGnss = {
+    gnssAltitude: PropertyValue<number>;
+    gnssCourse: PropertyValue<number>;
+    gnssHdop: PropertyValue<number>;
+    gnssLatitude: PropertyValue<number>;
+    gnssLongitude: PropertyValue<number>;
+    gnssSatelliteQuantity: PropertyValue<number>;
+    gnssSpeed: PropertyValue<number>;
+    gnssAddress: PropertyValue<string>;
+    gnssMotionStatus: PropertyValueWithTrack<GNSSEnumMotionStatus>;
+    gnssSignal: PropertyValueWithTrack<GNSSEnumSignal>;
+    gnssOdometer: PropertyValue<number>;
+    geofences?: DeviceDataGeofence[];
+    pois?: DeviceDataPOI[];
+};
+/**
+ * Lo que viene del dispositivo.
+ */
+export type DeviceCurrent = {
+    reportProfiles?: {
+        trackerEvents?: {
+            lastEvent?: {
+                date: string;
+            };
+        };
+    };
+    vpts?: {
+        vptGnss?: DeviceCurrentVPTGnss;
+        vptDiX?: VPTCurrentMultiple<VPTCurrentDIX>;
+        vptOWTempX?: VPTCurrentMultiple<VPTCurrentOWTempX>;
+        vptModem?: VPTCurrentModem;
+        vptADCPower?: VPTCurrentADCPower;
+    };
+};
+export type SettingsGroup = {
+    id: number;
+    name: string;
+    bgColor: string;
+    color: string;
+};
+export type PropertyType = 'string' | 'number' | 'boolean' | 'date' | 'time' | 'datetime' | 'array' | 'object' | 'function' | 'symbol' | 'undefined' | 'null' | 'unknown';
+export type Property = {
+    value: string;
+    type: string;
+};
+export type Properties = {
+    [key: string]: Property;
+};
+/**
+ * Todas las configuraciones a nivel de vinculación.
+ */
+export type DeviceSettings = {
+    name: string;
+    inTechinalOrder: PropertyValue<boolean>;
+    adminStatus: PropertyValue<string>;
+    active: boolean;
+    blocked?: boolean;
+    imageUrl: string;
+    operationalRoles?: OperationalRoles;
+    group?: Maybe<SettingsGroup>;
+    properties?: Properties;
+    vpts?: {
+        vptDix?: VPTSettingsDIX;
+    };
+};
+export type DeviceDataType = {
+    resourceSerialId: number;
+    current: DeviceCurrent;
+    settings: DeviceSettings;
+    consumerDecorators?: {
+        statusDescription?: PropertyValue<string>;
+    } & Record<string, PropertyValue<string>>;
+    producerDecorators?: {
+        [key: string]: PropertyValue<string>;
+    };
+};

package/@types/general.d.ts

@@ -0,0 +1,21 @@
+import { GNSSEnumMotionStatus } from './constants';
+export type PropertyValueWithTrack<T> = {
+    value: T;
+    udaptedAt?: string;
+};
+export type PropertyValue<T> = T;
+export type GNSSSatus = keyof typeof GNSSEnumMotionStatus;
+export type OperationalRole = {
+    id: number;
+    firstName: string;
+    lastName: string;
+    documentId?: string;
+    mobile?: string;
+    assignedAt: Date;
+};
+export type OperationalRoles = {
+    driver: OperationalRole;
+    crew: OperationalRole[];
+    owner: OperationalRole;
+    [key: string]: OperationalRole | OperationalRole[];
+};

package/@types/index.d.ts

@@ -0,0 +1,2 @@
+export type { DeviceDataType, SettingsGroup } from './deviceData';
+export { GNSSEnumMotionStatus as GNSSEnumStatus } from './constants';

package/@types/index.js

@@ -0,0 +1 @@
+

package/@types/types.d.js

@@ -0,0 +1 @@
+

package/@types/types.d.ts

@@ -0,0 +1,43 @@
+import { ComponentsOverrides, ComponentsVariants } from '@mui/material/styles';
+import { MapPopupDeviceGpsOwnerState, MapPopupDeviceGpsSlotsType } from '../components/maps/components/GpsMap/popups/MapPopupDevice/types';
+import { CourseFormatterOwnerState, CourseFormatterSlotsType } from '../formatters/CourseFormatter/types';
+import { IndicatorCSQOwnerState, IndicatorCSQSlotsType } from '../components/indicators/IndicatorCSQ/types';
+import { GaugeSlotsType } from '../components/gauges/Gauge/types';
+declare module '@mui/material/styles' {
+  // Define the slots in the theme
+  interface ComponentNameToClassKey {
+    M4LMapPopupDevice:  MapPopupDeviceGpsSlotsType;
+    M4LCourseFormatter: CourseFormatterSlotsType;
+    M4LCSQSignal: IndicatorCSQSlotsType;
+    M4LGauge: GaugeSlotsType;
+  }
+  interface ComponentsPropsList {
+    // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
+    M4LMapPopupDevice:  Partial<MapPopupDeviceGpsOwnerState>;
+    M4LCourseFormatter:  Partial<CourseFormatterOwnerState>;
+    M4LCSQSignal:  Partial<IndicatorCSQOwnerState>;
+    M4LGauge:  Partial<GaugeOwnerState>;
+  }
+  interface Components {
+    M4LMapPopupDevice?: {
+      defaultProps?: ComponentsPropsList['M4LMapPopupDevice'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LMapPopupDevice'];
+      variants?: ComponentsVariants['M4LMapPopupDevice'];
+    };
+    M4LCourseFormatter?: {
+      defaultProps?: ComponentsPropsList['M4LCourseFormatter'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LCourseFormatter'];
+      variants?: ComponentsVariants['M4LCourseFormatter'];
+    };
+    M4LCSQSignal?: {
+      defaultProps?: ComponentsPropsList['M4LCSQSignal'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LCSQSignal'];
+      variants?: ComponentsVariants['M4LCSQSignal'];
+    };
+    M4LGauge?: {
+      defaultProps?: ComponentsPropsList['M4LGauge'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LGauge'];
+      variants?: ComponentsVariants['M4LGauge'];
+    };
+   }
+}

package/@types/vpts.d.ts

@@ -0,0 +1,49 @@
+import { ADCPowerEnum } from './constants';
+import { PropertyValue, PropertyValueWithTrack } from './general';
+export type VPTCurrentOWTempX = {
+    owTempXStatus: PropertyValueWithTrack<boolean>;
+    owTempXTemp: PropertyValueWithTrack<number>;
+};
+export type VPTCurrentDIX = {
+    diXValue: PropertyValueWithTrack<boolean>;
+    diXStatus: PropertyValueWithTrack<boolean>;
+};
+export type VPTCurrentMultiple<T> = {
+    [key: number]: T;
+};
+export type VPTSettingsDIX = {
+    pName: string;
+    pAlias?: string;
+    pRdOpenTitle: string;
+    pRdCloseTitle: string;
+    /**
+     * Ids de los iconos, que corresponden al parametro que se necesita para llamar el endpoint de icons
+     */
+    pIconId: string;
+    pIconOpenId: string;
+    pIconCloseId: string;
+};
+export type VPTSettingsAVX = {
+    name: string;
+    alias?: string;
+    alarmTime: number;
+    magnitudeSymbol: string;
+    lowerLimit: number;
+    upperLimit: number;
+};
+export type VPTSettingsDIXS = {
+    [key: number]: VPTSettingsDIX;
+};
+export type VPTCurrentADCPower = {
+    mainStatus: PropertyValue<ADCPowerEnum>;
+    mainVolt: PropertyValue<number>;
+    backupVolt: PropertyValue<number>;
+    backupStatus: PropertyValue<ADCPowerEnum>;
+    backupChargeLevel: PropertyValue<number>;
+};
+export type VPTCurrentModem = {
+    lastConnection: string;
+    lastEvent: string;
+    modemCsq: PropertyValue<number>;
+    callActive: PropertyValue<boolean>;
+};

package/components/DataGrid/assets/icons/datagrid.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 13H6C3.245 13 1 10.755 1 8C1 5.245 3.245 3 6 3H10C12.755 3 15 5.245 15 8C15 10.755 12.755 13 10 13ZM6 4C3.795 4 2 5.795 2 8C2 10.205 3.795 12 6 12H10C12.205 12 14 10.205 14 8C14 5.795 12.205 4 10 4H6Z" fill="#2F3737"/>
+<path d="M10 11C8.345 11 7 9.655 7 8C7 6.345 8.345 5 10 5C11.655 5 13 6.345 13 8C13 9.655 11.655 11 10 11ZM10 6C8.895 6 8 6.895 8 8C8 9.105 8.895 10 10 10C11.105 10 12 9.105 12 8C12 6.895 11.105 6 10 6Z" fill="#2F3737"/>
+</svg>

package/components/DeviceLabel/DeviceLabel.d.ts

@@ -0,0 +1,6 @@
+import { DeviceProps } from './types';
+/**
+ * Componente que muestra un dispositivo con su icono y descripción, basada en las propiedades del dispositivo que son
+ * reemplazadas de acuerdo a la etiqueta de visualización que normalmente viene de las preferencias del usuario autenticado.
+ */
+export declare const DeviceLabel: (props: DeviceProps) => import("react/jsx-runtime").JSX.Element;

package/components/DeviceLabel/DeviceLabel.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useEnvironment, getPropertyByString } from "@m4l/core";
+import { D as DeviceRootStyled, I as ImageStyled, L as LabelStyled } from "./slots/DeviceLabelSlots.js";
+import clsx from "clsx";
+import { getComponentSlotRoot } from "@m4l/components";
+import { C as COMPONET_KEY_COMPONENT } from "./constants.js";
+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}`;
+  let label = labelTemplate;
+  const matches = label.match(regex);
+  if (matches) {
+    for (const match of matches) {
+      const r = getPropertyByString(props.deviceData, match.slice(1, -1));
+      if (typeof r === "string" || typeof r === "number" || typeof r === "boolean") {
+        label = label.replaceAll(match, r + "");
+      } else {
+        label = label.replaceAll(match, `#${match.slice(1, -1)}#`);
+      }
+    }
+  }
+  const classRoot = getComponentSlotRoot(COMPONET_KEY_COMPONENT);
+  return /* @__PURE__ */ jsxs(DeviceRootStyled, { className: clsx(className, classRoot), children: [
+    withImage && /* @__PURE__ */ jsx(ImageStyled, { src, width: 24, height: 24 }),
+    /* @__PURE__ */ jsx(LabelStyled, { variant: "bodyDens", children: label })
+  ] });
+};
+export {
+  DeviceLabel as D
+};

package/components/DeviceLabel/DeviceLabel.styles.d.ts

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

package/components/DeviceLabel/DeviceLabel.styles.js

@@ -0,0 +1,33 @@
+const myDeviceStyles = {
+  /**
+   * TODO: Documentar
+   */
+  root: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp2,
+    overflow: "hidden"
+  }),
+  /**
+   * Slot image
+   */
+  image: () => ({
+    width: "32px",
+    height: "auto",
+    maxHeight: "20px",
+    objectFit: "cover"
+  }),
+  /**
+   * Slot label
+   */
+  label: () => ({
+    alignItems: "center",
+    display: "inline-block",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  })
+};
+export {
+  myDeviceStyles as m
+};

package/components/DeviceLabel/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const COMPONENT_TEST_ID = "M4LDevice";
+export declare const COMPONET_KEY_COMPONENT = "M4LDevice";

package/components/DeviceLabel/constants.js

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

package/components/DeviceLabel/index.d.ts

@@ -0,0 +1 @@
+export * from './DeviceLabel';

package/components/DeviceLabel/index.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,3 @@
+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>, {}, {}>;

package/components/DeviceLabel/slots/DeviceLabelSlots.js

@@ -0,0 +1,22 @@
+import { styled } from "@mui/material/styles";
+import { C as COMPONET_KEY_COMPONENT } from "../constants.js";
+import { m as myDeviceStyles } from "../DeviceLabel.styles.js";
+import { D as DeviceSlots } from "./slots.js";
+import { Image, Typography } from "@m4l/components";
+const DeviceRootStyled = styled("div", {
+  name: COMPONET_KEY_COMPONENT,
+  slot: DeviceSlots.root
+})(myDeviceStyles?.root);
+const ImageStyled = styled(Image, {
+  name: COMPONET_KEY_COMPONENT,
+  slot: DeviceSlots.image
+})(myDeviceStyles?.image);
+const LabelStyled = styled(Typography, {
+  name: COMPONET_KEY_COMPONENT,
+  slot: DeviceSlots.label
+})(myDeviceStyles?.label);
+export {
+  DeviceRootStyled as D,
+  ImageStyled as I,
+  LabelStyled as L
+};

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

@@ -0,0 +1,5 @@
+export declare enum DeviceSlots {
+    root = "root",
+    image = "image",
+    label = "label"
+}

package/components/DeviceLabel/slots/slots.js

@@ -0,0 +1,9 @@
+var DeviceSlots = /* @__PURE__ */ ((DeviceSlots2) => {
+  DeviceSlots2["root"] = "root";
+  DeviceSlots2["image"] = "image";
+  DeviceSlots2["label"] = "label";
+  return DeviceSlots2;
+})(DeviceSlots || {});
+export {
+  DeviceSlots as D
+};

package/components/DeviceLabel/types.d.ts

@@ -0,0 +1,26 @@
+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';
+export type DeviceProps = {
+    /**
+     * Plantilla de la etiqueta que se muestra en el componente.
+     */
+    labelTemplate?: string;
+    /**
+     * Información del dispositivo (lo mínimos)
+     */
+    deviceData: DeviceDataType;
+    /**
+     * Indica si se muestra la imagen del vehículo
+     */
+    withImage?: boolean;
+    /**
+     * Permite recibir las clases de algun slot
+     */
+    className?: string;
+};
+export type DeviceSlotsType = keyof typeof DeviceSlots;
+export type DeviceOwnerState = {};
+export type DeviceStyles = Partial<OverridesStyleRules<DeviceSlotsType, typeof COMPONET_KEY_COMPONENT, Theme> | undefined> | undefined;

package/components/DeviceStatus/DeviceStatus.d.ts

@@ -0,0 +1,6 @@
+import { DeviceStatusProps } from './types';
+/**
+ * Componente que muestra un dispositivo con su icono y descripción, basada en las propiedades del dispositivo que son
+ * reemplazadas de acuerdo a la etiqueta de visualización que normalmente viene de las preferencias del usuario autenticado.
+ */
+export declare const DeviceStatus: (props: DeviceStatusProps) => import("react/jsx-runtime").JSX.Element;

package/components/DeviceStatus/DeviceStatus.js

@@ -0,0 +1,15 @@
+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
+};

package/components/DeviceStatus/DeviceStatus.styles.d.ts

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

package/components/DeviceStatus/DeviceStatus.styles.js

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

package/components/DeviceStatus/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const COMPONENT_TEST_ID = "M4LDeviceStatus";
+export declare const COMPONET_KEY_COMPONENT = "M4LDeviceStatus";