@m4l/components 9.50.0 → 9.51.0-beta-m4lcom-764-device-picker.0

package/components/DevicesPicker/helpers/resolveDeviceGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveDeviceGroup.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/DevicesPicker/helpers/resolveDeviceGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAW5F;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,kBAAkB,GACzB,oBAAoB,GAAG,IAAI,CAkB7B"}

package/components/DevicesPicker/helpers/resolveDeviceGroup.js

@@ -0,0 +1,14 @@
+function n(r) {
+  return typeof r == "object" && r !== null;
+}
+function t(r) {
+  const { department: e } = r;
+  return e ? n(e) ? {
+    id: e.id,
+    label: e.name,
+    color: e.color
+  } : { id: e, label: e } : null;
+}
+export {
+  t as resolveDeviceGroup
+};

package/components/DevicesPicker/helpers/resolveDeviceImageSrc.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Builds the url of the device image matching its vehicle type, following the
+ * same host/environment convention as the rest of the package.
+ */
+export declare function resolveDeviceImageSrc(hostStaticAssets: string | undefined, environmentAssets: string | undefined, iconId?: string): string;
+//# sourceMappingURL=resolveDeviceImageSrc.d.ts.map

package/components/DevicesPicker/helpers/resolveDeviceImageSrc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveDeviceImageSrc.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/DevicesPicker/helpers/resolveDeviceImageSrc.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,gBAAgB,EAAE,MAAM,GAAG,SAAS,EACpC,iBAAiB,EAAE,MAAM,GAAG,SAAS,EACrC,MAAM,CAAC,EAAE,MAAM,GACd,MAAM,CAQR"}

package/components/DevicesPicker/helpers/resolveDeviceImageSrc.js

@@ -0,0 +1,8 @@
+import { DEVICES_PICKER_IMAGE_BY_ICON_ID as o, DEVICES_PICKER_IMAGE_FALLBACK as C, DEVICES_PICKER_IMAGES_PATH as t } from "../constants.js";
+function n(E, I, e) {
+  const _ = e && o[e] || C;
+  return [E, I, t, _].filter(Boolean).map((r) => String(r).replace(/^\/+|\/+$/gu, "")).join("/");
+}
+export {
+  n as resolveDeviceImageSrc
+};

package/components/DevicesPicker/helpers/toDeviceArray.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Normalizes the picker value into an array.
+ * The value mirrors the AutocompleteAsync contract, so it can arrive as an
+ * array (multiple), as a single option (single) or as null/undefined.
+ */
+export declare function toDeviceArray<T>(value: T | T[] | null | undefined): T[];
+//# sourceMappingURL=toDeviceArray.d.ts.map

package/components/DevicesPicker/helpers/toDeviceArray.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toDeviceArray.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/DevicesPicker/helpers/toDeviceArray.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC,EAAE,CAMvE"}

package/components/DevicesPicker/helpers/toDeviceArray.js

@@ -0,0 +1,6 @@
+function t(r) {
+  return Array.isArray(r) ? r : r ? [r] : [];
+}
+export {
+  t as toDeviceArray
+};

package/components/DevicesPicker/hooks/types.d.ts

@@ -0,0 +1,176 @@
+import { ReactNode } from 'react';
+import { CheckableListGroup, CheckableListItem } from '../../CheckableList/types';
+import { DevicePickerGroupRef, DevicePickerOption, DevicesPickerProps } from '../types';
+/**
+ * Subset of the picker props that configures the async source.
+ */
+export type UseDevicesAsyncOptionsProps<T> = Pick<DevicesPickerProps<T>, 'endPoint' | 'timeout' | 'parms' | 'resultField' | 'isRemote' | 'isExternalUrl' | 'responseToCamelCase' | 'shouldFetch' | 'onChangeFilterParms'>;
+/**
+ * Value returned by the async options hook.
+ */
+export interface UseDevicesAsyncOptionsReturn<T> {
+    /**
+     * Options loaded from the endpoint.
+     */
+    options: T[];
+    /**
+     * A request is in flight.
+     */
+    loading: boolean;
+    /**
+     * Notifies the engine that the panel opened, triggering the first fetch.
+     */
+    onOpen: () => void;
+    /**
+     * Notifies the engine that the panel closed.
+     */
+    onClose: () => void;
+    /**
+     * Forces a refetch with the current params.
+     */
+    refresh: () => void;
+    /**
+     * Feeds the panel search box into the remote query when the consumer
+     * provided `onChangeFilterParms`.
+     */
+    onSearchChange: (query: string) => void;
+}
+/**
+ * Options accepted by the device grouping hook.
+ */
+export interface UseDeviceGroupsProps<T = DevicePickerOption> {
+    /**
+     * Devices to organize.
+     */
+    options: T[];
+    /**
+     * Groups the devices by department when enabled.
+     */
+    grouped: boolean;
+    /**
+     * Resolves the group of a device; null falls into the default group.
+     */
+    getDeviceGroup: (option: T) => DevicePickerGroupRef | null;
+    /**
+     * Label used for devices with no department.
+     */
+    defaultGroupLabel: string;
+    /**
+     * Resolves the first line of a row.
+     */
+    getOptionLabel: (option: T) => string;
+    /**
+     * Resolves the second line of a row.
+     */
+    getDeviceSubtitle: (option: T) => string | undefined;
+    /**
+     * Resolves the icon of a row.
+     */
+    getDeviceIcon?: (option: T) => ReactNode;
+}
+/**
+ * Value returned by the device grouping hook.
+ */
+export interface UseDeviceGroupsReturn {
+    /**
+     * Collapsible groups fed to the CheckableList; undefined when flat.
+     */
+    groups?: CheckableListGroup[];
+    /**
+     * Flat items fed to the CheckableList; undefined when grouped.
+     */
+    items?: CheckableListItem[];
+}
+/**
+ * Options accepted by the panel columns hook.
+ */
+export interface UsePanelColumnsProps<T = DevicePickerOption> {
+    /**
+     * Devices used to detect whether each column has data at all.
+     */
+    options: T[];
+    /**
+     * Forces the "Ver departamentos" switch instead of deriving it.
+     */
+    showDepartments?: boolean;
+    /**
+     * Forces the "Ver ID" switch instead of deriving it.
+     */
+    showIds?: boolean;
+    /**
+     * Resolves the group of a device, used for the department detection.
+     */
+    getDeviceGroup: (option: T) => DevicePickerGroupRef | null;
+}
+/**
+ * Value returned by the panel columns hook.
+ */
+export interface UsePanelColumnsReturn {
+    /**
+     * The list is grouped by department.
+     */
+    showDepartments: boolean;
+    /**
+     * Rows render the id line.
+     */
+    showIds: boolean;
+    /**
+     * At least one device has a department, so the switch is offered.
+     */
+    canShowDepartments: boolean;
+    /**
+     * At least one device has an id, so the switch is offered.
+     */
+    canShowIds: boolean;
+    /**
+     * Toggles the "Ver departamentos" switch.
+     */
+    toggleDepartments: () => void;
+    /**
+     * Toggles the "Ver ID" switch.
+     */
+    toggleIds: () => void;
+}
+/**
+ * Options accepted by the selection hook.
+ */
+export interface UseDevicesSelectionProps<T = DevicePickerOption> {
+    /**
+     * Current picker value, as objects.
+     */
+    value: T | T[] | null | undefined;
+    /**
+     * Options currently loaded from the endpoint.
+     */
+    options: T[];
+    /**
+     * Multiple selection.
+     */
+    multiple: boolean;
+    /**
+     * Reports the new value to the consumer.
+     */
+    onChange: DevicesPickerProps<T>['onChange'];
+}
+/**
+ * Value returned by the selection hook.
+ */
+export interface UseDevicesSelectionReturn<T = DevicePickerOption> {
+    /**
+     * Selected ids, the shape the CheckableList works with.
+     */
+    selectedIds: (string | number)[];
+    /**
+     * Currently selected devices, as objects.
+     */
+    selectedDevices: T[];
+    /**
+     * Translates a CheckableList id selection back into device objects.
+     */
+    handleSelectionChange: (selectedIds: (string | number)[]) => void;
+    /**
+     * Removes one device from the selection.
+     */
+    handleRemove: (device: T) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/components/DevicesPicker/hooks/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/DevicesPicker/hooks/types.ts"],"names":[],"mappings":"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"}

package/components/DevicesPicker/hooks/useDeviceGroups.d.ts

@@ -0,0 +1,13 @@
+import { DevicePickerOption } from '../types';
+import { UseDeviceGroupsProps, UseDeviceGroupsReturn } from './types';
+/**
+ * Builds the CheckableList payload for the panel.
+ *
+ * The CheckableList consumes groups already built (it only flattens them to
+ * filter and virtualize), so the grouping lives here, mirroring what the
+ * geofences assignment does: one group per department carrying its color, so
+ * the count badge can be tinted with it. Devices with no department fall into a
+ * default group rendered last, so a selection is never hidden by the grouping.
+ */
+export declare function useDeviceGroups<T extends DevicePickerOption = DevicePickerOption>(props: UseDeviceGroupsProps<T>): UseDeviceGroupsReturn;
+//# sourceMappingURL=useDeviceGroups.d.ts.map

package/components/DevicesPicker/hooks/useDeviceGroups.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDeviceGroups.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/DevicesPicker/hooks/useDeviceGroups.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEtE;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,EAC/E,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,GAC7B,qBAAqB,CA0EvB"}

package/components/DevicesPicker/hooks/useDeviceGroups.js

@@ -0,0 +1,48 @@
+import { useCallback as v, useMemo as p } from "react";
+import { DEVICES_PICKER_DEFAULT_GROUP_ID as a } from "../constants.js";
+function G(f) {
+  const {
+    options: o,
+    grouped: u,
+    getDeviceGroup: n,
+    defaultGroupLabel: c,
+    getOptionLabel: d,
+    getDeviceSubtitle: m,
+    getDeviceIcon: b
+  } = f, i = v(
+    (r) => ({
+      id: r.id,
+      label: d(r),
+      value: r,
+      icon: b?.(r),
+      metadata: {
+        subtitle: m(r),
+        deviceId: r.id
+      }
+    }),
+    [d, m, b]
+  ), g = p(() => {
+    if (!u)
+      return o.map(i);
+  }, [u, o, i]);
+  return { groups: p(() => {
+    if (!u)
+      return;
+    const r = o.reduce((e, t) => {
+      const l = n(t), s = String(l?.id ?? a);
+      return e[s] || (e[s] = {
+        id: s,
+        label: l?.label ?? c,
+        color: l?.color,
+        items: []
+      }), e[s].items.push(i(t)), e;
+    }, {});
+    return Object.values(r).map((e) => ({
+      ...e,
+      items: [...e.items].sort((t, l) => t.label.localeCompare(l.label))
+    })).sort((e, t) => e.id === a ? 1 : t.id === a ? -1 : e.label.localeCompare(t.label));
+  }, [u, o, n, c, i]), items: g };
+}
+export {
+  G as useDeviceGroups
+};

package/components/DevicesPicker/hooks/useDevicesAsyncOptions.d.ts

@@ -0,0 +1,13 @@
+import { UseDevicesAsyncOptionsProps, UseDevicesAsyncOptionsReturn } from './types';
+/**
+ * Drives the device options using the very same async engine as
+ * AutocompleteAsync: the shared reducer decides when to fetch and
+ * `useFetchOptions` performs the request with its abort handling.
+ * Options are fetched lazily, the first time the panel is opened.
+ *
+ * `onChangeFilterParms` behaves exactly like in AutocompleteAsync: the panel
+ * search box builds the query params, debounced by 300ms, and the request is
+ * re-issued so the backend returns the filtered list.
+ */
+export declare function useDevicesAsyncOptions<T>(props: UseDevicesAsyncOptionsProps<T>): UseDevicesAsyncOptionsReturn<T>;
+//# sourceMappingURL=useDevicesAsyncOptions.d.ts.map

package/components/DevicesPicker/hooks/useDevicesAsyncOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDevicesAsyncOptions.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/DevicesPicker/hooks/useDevicesAsyncOptions.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,2BAA2B,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAEpF;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,EACtC,KAAK,EAAE,2BAA2B,CAAC,CAAC,CAAC,GACpC,4BAA4B,CAAC,CAAC,CAAC,CAoFjC"}

package/components/DevicesPicker/hooks/useDevicesAsyncOptions.js

@@ -0,0 +1,71 @@
+import S from "lodash-es/debounce";
+import { useRef as g, useReducer as A, useCallback as c, useMemo as O, useEffect as P } from "react";
+import { useFetchOptions as b } from "../../extended/mui/AutocompleteAsync/hooks/useFetchOptions.js";
+import { autocompleteAsyncReducer as T, getInitialStateAutocompleteAsync as x } from "../../extended/mui/AutocompleteAsync/reducer/AutocompleteAsyncReducer.js";
+import { actionsType as r } from "../../extended/mui/AutocompleteAsync/types.js";
+function D(u) {
+  const {
+    endPoint: l,
+    timeout: m = 5e3,
+    parms: i,
+    resultField: d = "data",
+    isRemote: f = !0,
+    isExternalUrl: h = !1,
+    responseToCamelCase: R,
+    shouldFetch: t,
+    onChangeFilterParms: n
+  } = u, p = g(""), [a, o] = A(
+    T(n),
+    x({ parms: i, onChangeFilterParms: n })
+  );
+  b({
+    state: a,
+    dispatch: o,
+    endPoint: l,
+    timeout: m,
+    isExternalUrl: h,
+    parms: i,
+    responseToCamelCase: R,
+    isRemote: f,
+    resultField: d
+  });
+  const E = c(() => {
+    const e = !t || t(p.current);
+    o({ type: r.OPEN, noFetch: !e });
+  }, [t]), F = c(() => o({ type: r.CLOSE }), []), y = c(() => o({ type: r.REFRESH }), []), s = O(
+    () => S(
+      (e) => {
+        o({
+          type: r.SET_QUERY_PARAMS,
+          payload: e
+        });
+      },
+      300,
+      { trailing: !0 }
+    ),
+    [o]
+  );
+  P(
+    () => () => {
+      s.cancel();
+    },
+    [s]
+  );
+  const C = c(
+    (e) => {
+      p.current = e, n && (!t || t(e)) && s(n(e));
+    },
+    [n, s, t]
+  );
+  return {
+    options: a.options,
+    loading: a.loading,
+    onOpen: E,
+    onClose: F,
+    refresh: y,
+    onSearchChange: C
+  };
+}
+export {
+  D as useDevicesAsyncOptions
+};

package/components/DevicesPicker/hooks/useDevicesSelection.d.ts

@@ -0,0 +1,12 @@
+import { DevicePickerOption } from '../types';
+import { UseDevicesSelectionProps, UseDevicesSelectionReturn } from './types';
+/**
+ * Bridges the picker value with the CheckableList selection.
+ *
+ * The picker reports device objects, mirroring the AutocompleteAsync contract
+ * and what the DynamicFilter stores, while the CheckableList works with ids.
+ * Already-selected devices are kept even when they are not in the latest
+ * options, so a selection made before a param change never disappears.
+ */
+export declare function useDevicesSelection<T extends DevicePickerOption = DevicePickerOption>(props: UseDevicesSelectionProps<T>): UseDevicesSelectionReturn<T>;
+//# sourceMappingURL=useDevicesSelection.d.ts.map

package/components/DevicesPicker/hooks/useDevicesSelection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDevicesSelection.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/DevicesPicker/hooks/useDevicesSelection.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAE9E;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,EACnF,KAAK,EAAE,wBAAwB,CAAC,CAAC,CAAC,GACjC,yBAAyB,CAAC,CAAC,CAAC,CAwC9B"}

package/components/DevicesPicker/hooks/useDevicesSelection.js

@@ -0,0 +1,26 @@
+import { useMemo as u, useCallback as d } from "react";
+import { toDeviceArray as h } from "../helpers/toDeviceArray.js";
+function D(m) {
+  const { value: i, options: r, multiple: c, onChange: l } = m, t = u(() => h(i), [i]), p = u(
+    () => t.map((n) => n.id),
+    [t]
+  ), v = d(
+    (n) => {
+      const o = /* @__PURE__ */ new Map();
+      t.forEach((e) => o.set(e.id, e)), r.forEach((e) => o.set(e.id, e));
+      const s = n.map((e) => o.get(e)).filter((e) => !!e), a = c ? s : s[0] ?? null;
+      l({ target: { value: a } }, a, "selectOption");
+    },
+    [t, r, c, l]
+  ), f = d(
+    (n) => {
+      const o = t.filter((a) => a.id !== n.id), s = c ? o : null;
+      l({ target: { value: s } }, s, "removeOption");
+    },
+    [t, c, l]
+  );
+  return { selectedIds: p, selectedDevices: t, handleSelectionChange: v, handleRemove: f };
+}
+export {
+  D as useDevicesSelection
+};

package/components/DevicesPicker/hooks/usePanelColumns.d.ts

@@ -0,0 +1,12 @@
+import { DevicePickerOption } from '../types';
+import { UsePanelColumnsProps, UsePanelColumnsReturn } from './types';
+/**
+ * Drives the two column switches of the panel.
+ *
+ * A switch is only offered when the data behind it exists: grouping by
+ * department is pointless if no device has one, and the id line would render an
+ * empty column. When the consumer passes the prop explicitly it wins over the
+ * detection.
+ */
+export declare function usePanelColumns<T extends DevicePickerOption = DevicePickerOption>(props: UsePanelColumnsProps<T>): UsePanelColumnsReturn;
+//# sourceMappingURL=usePanelColumns.d.ts.map

package/components/DevicesPicker/hooks/usePanelColumns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePanelColumns.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/DevicesPicker/hooks/usePanelColumns.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEtE;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,EAC/E,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,GAC7B,qBAAqB,CA8CvB"}

package/components/DevicesPicker/hooks/usePanelColumns.js

@@ -0,0 +1,30 @@
+import { useMemo as m, useState as r, useEffect as i, useCallback as u } from "react";
+function g(p) {
+  const { options: s, showDepartments: t, showIds: o, getDeviceGroup: d } = p, n = m(
+    () => s.some((e) => d(e) !== null),
+    [s, d]
+  ), a = m(
+    () => s.some((e) => e.id !== void 0 && e.id !== null),
+    [s]
+  ), [f, l] = r(t ?? !1), [h, c] = r(o ?? !1);
+  i(() => {
+    t === void 0 && l(n);
+  }, [n, t]), i(() => {
+    o === void 0 && c(a);
+  }, [a, o]);
+  const w = u(
+    () => l((e) => !e),
+    []
+  ), D = u(() => c((e) => !e), []);
+  return {
+    showDepartments: (t ?? f) && n,
+    showIds: (o ?? h) && a,
+    canShowDepartments: n,
+    canShowIds: a,
+    toggleDepartments: w,
+    toggleIds: D
+  };
+}
+export {
+  g as usePanelColumns
+};

package/components/DevicesPicker/index.d.ts

@@ -0,0 +1,11 @@
+export * from './DevicesPicker';
+export * from './types';
+export * from './constants';
+export * from './dictionary';
+export * from './helpers/resolveDeviceGroup';
+export * from './helpers/toDeviceArray';
+export * from './subcomponents/DeviceCard';
+export * from './subcomponents/DevicesPanel';
+export * from './subcomponents/DevicesPickerSkeleton';
+export * from './subcomponents/SelectedDevicesList';
+//# sourceMappingURL=index.d.ts.map

package/components/DevicesPicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/DevicesPicker/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uCAAuC,CAAC;AACtD,cAAc,qCAAqC,CAAC"}

package/components/DevicesPicker/slots/DevicesPickerEnum.d.ts

@@ -0,0 +1,77 @@
+export declare enum DevicesPickerSlots {
+    /** Full-width wrapper: its size is the space the trigger can grow into. */
+    root = "root",
+    /** Trigger row: hugs its content (cards + overflow toggle + chevron). */
+    trigger = "trigger",
+    /** Horizontal container that holds the visible device cards. */
+    cardsContainer = "cardsContainer",
+    /** Row holding the leading icon and the placeholder text. */
+    placeholderContainer = "placeholderContainer",
+    /** Leading icon shown next to the placeholder. */
+    placeholderIcon = "placeholderIcon",
+    /** Placeholder text shown when there is no selection. */
+    placeholder = "placeholder",
+    /** ToggleButton showing the number of hidden cards (+N). */
+    overflowToggle = "overflowToggle",
+    /** IconButton that opens/closes the selection panel. */
+    chevronButton = "chevronButton",
+    /** Element that carries the measuring ref of each card. */
+    deviceCardWrapper = "deviceCardWrapper",
+    /** Off-layout container where pending cards are measured. */
+    measuringLayer = "measuringLayer",
+    /** Wrapper of the truncated card that fills the leftover space. */
+    partialCardWrapper = "partialCardWrapper",
+    /** Device card built on top of the system Card. */
+    deviceCard = "deviceCard",
+    /** Device icon wrapper inside the card. */
+    deviceCardIcon = "deviceCardIcon",
+    /** Column holding name, subtitle and id inside the card. */
+    deviceCardContent = "deviceCardContent",
+    /** Device name (first line of the card). */
+    deviceCardName = "deviceCardName",
+    /** Device plate/alias (second line of the card). */
+    deviceCardSubtitle = "deviceCardSubtitle",
+    /** Device id (third line of the card). */
+    deviceCardId = "deviceCardId",
+    /** Remove action of the card. */
+    deviceCardRemove = "deviceCardRemove",
+    /** Selection panel surface (Popover paper). */
+    panel = "panel",
+    /** Row holding the "Ver departamentos" and "Ver ID" switches. */
+    panelHeader = "panelHeader",
+    /** Each column switch inside the panel header. */
+    panelSwitch = "panelSwitch",
+    /** Wrapper of the CheckableList inside the panel. */
+    panelList = "panelList",
+    /** Device name inside a panel row. */
+    rowName = "rowName",
+    /** Device plate/alias inside a panel row. */
+    rowSubtitle = "rowSubtitle",
+    /** Device id inside a panel row, toggled by the "Ver ID" switch. */
+    rowId = "rowId",
+    /** Row that lays out the group header label and its count badge. */
+    groupRow = "groupRow",
+    /** Group header label inside the panel. */
+    groupLabel = "groupLabel",
+    /** Group count badge, tinted with the department color. */
+    groupBadge = "groupBadge",
+    /** Selected-devices list surface, opened from the +N toggle. */
+    selectedList = "selectedList",
+    /** Header of the selected-devices list. */
+    selectedListHeader = "selectedListHeader",
+    /** Icon and label group at the start of the selected-devices header. */
+    selectedListTitle = "selectedListTitle",
+    /** Count chip at the end of the selected-devices header. */
+    selectedListCount = "selectedListCount",
+    /** Scrollable body of the selected-devices list. */
+    selectedListItems = "selectedListItems",
+    /** Ghost card rendered while the devices are loading. */
+    skeletonCard = "skeletonCard",
+    /** Ghost icon inside the loading card. */
+    skeletonIcon = "skeletonIcon",
+    /** Ghost text bar inside the loading card. */
+    skeletonLine = "skeletonLine",
+    /** Ghost chevron of the loading trigger. */
+    skeletonChevron = "skeletonChevron"
+}
+//# sourceMappingURL=DevicesPickerEnum.d.ts.map

package/components/DevicesPicker/slots/DevicesPickerEnum.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevicesPickerEnum.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/DevicesPicker/slots/DevicesPickerEnum.ts"],"names":[],"mappings":"AAAA,oBAAY,kBAAkB;IAC5B,2EAA2E;IAC3E,IAAI,SAAS;IACb,yEAAyE;IACzE,OAAO,YAAY;IACnB,gEAAgE;IAChE,cAAc,mBAAmB;IACjC,6DAA6D;IAC7D,oBAAoB,yBAAyB;IAC7C,kDAAkD;IAClD,eAAe,oBAAoB;IACnC,yDAAyD;IACzD,WAAW,gBAAgB;IAC3B,4DAA4D;IAC5D,cAAc,mBAAmB;IACjC,wDAAwD;IACxD,aAAa,kBAAkB;IAC/B,2DAA2D;IAC3D,iBAAiB,sBAAsB;IACvC,6DAA6D;IAC7D,cAAc,mBAAmB;IACjC,mEAAmE;IACnE,kBAAkB,uBAAuB;IACzC,mDAAmD;IACnD,UAAU,eAAe;IACzB,2CAA2C;IAC3C,cAAc,mBAAmB;IACjC,4DAA4D;IAC5D,iBAAiB,sBAAsB;IACvC,4CAA4C;IAC5C,cAAc,mBAAmB;IACjC,oDAAoD;IACpD,kBAAkB,uBAAuB;IACzC,0CAA0C;IAC1C,YAAY,iBAAiB;IAC7B,iCAAiC;IACjC,gBAAgB,qBAAqB;IACrC,+CAA+C;IAC/C,KAAK,UAAU;IACf,iEAAiE;IACjE,WAAW,gBAAgB;IAC3B,kDAAkD;IAClD,WAAW,gBAAgB;IAC3B,qDAAqD;IACrD,SAAS,cAAc;IACvB,sCAAsC;IACtC,OAAO,YAAY;IACnB,6CAA6C;IAC7C,WAAW,gBAAgB;IAC3B,oEAAoE;IACpE,KAAK,UAAU;IACf,oEAAoE;IACpE,QAAQ,aAAa;IACrB,2CAA2C;IAC3C,UAAU,eAAe;IACzB,2DAA2D;IAC3D,UAAU,eAAe;IACzB,gEAAgE;IAChE,YAAY,iBAAiB;IAC7B,2CAA2C;IAC3C,kBAAkB,uBAAuB;IACzC,wEAAwE;IACxE,iBAAiB,sBAAsB;IACvC,4DAA4D;IAC5D,iBAAiB,sBAAsB;IACvC,oDAAoD;IACpD,iBAAiB,sBAAsB;IACvC,yDAAyD;IACzD,YAAY,iBAAiB;IAC7B,0CAA0C;IAC1C,YAAY,iBAAiB;IAC7B,8CAA8C;IAC9C,YAAY,iBAAiB;IAC7B,4CAA4C;IAC5C,eAAe,oBAAoB;CACpC"}

package/components/DevicesPicker/slots/DevicesPickerEnum.js

@@ -0,0 +1,4 @@
+var d = /* @__PURE__ */ ((a) => (a.root = "root", a.trigger = "trigger", a.cardsContainer = "cardsContainer", a.placeholderContainer = "placeholderContainer", a.placeholderIcon = "placeholderIcon", a.placeholder = "placeholder", a.overflowToggle = "overflowToggle", a.chevronButton = "chevronButton", a.deviceCardWrapper = "deviceCardWrapper", a.measuringLayer = "measuringLayer", a.partialCardWrapper = "partialCardWrapper", a.deviceCard = "deviceCard", a.deviceCardIcon = "deviceCardIcon", a.deviceCardContent = "deviceCardContent", a.deviceCardName = "deviceCardName", a.deviceCardSubtitle = "deviceCardSubtitle", a.deviceCardId = "deviceCardId", a.deviceCardRemove = "deviceCardRemove", a.panel = "panel", a.panelHeader = "panelHeader", a.panelSwitch = "panelSwitch", a.panelList = "panelList", a.rowName = "rowName", a.rowSubtitle = "rowSubtitle", a.rowId = "rowId", a.groupRow = "groupRow", a.groupLabel = "groupLabel", a.groupBadge = "groupBadge", a.selectedList = "selectedList", a.selectedListHeader = "selectedListHeader", a.selectedListTitle = "selectedListTitle", a.selectedListCount = "selectedListCount", a.selectedListItems = "selectedListItems", a.skeletonCard = "skeletonCard", a.skeletonIcon = "skeletonIcon", a.skeletonLine = "skeletonLine", a.skeletonChevron = "skeletonChevron", a))(d || {});
+export {
+  d as DevicesPickerSlots
+};