@pisell/private-materials 3.4.104 → 3.4.106

package/es/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/DeviceInfoPanel.less

@@ -0,0 +1,211 @@
+.device-detail-drawer {
+  &__card {
+    border-radius: 10px;
+
+    & + & {
+      margin-top: 12px;
+    }
+
+    .ant-card-head {
+      min-height: 42px;
+      padding: 0 16px;
+    }
+
+    .ant-card-head-title {
+      padding: 10px 0;
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    .ant-card-body {
+      padding: 16px;
+    }
+  }
+
+  &__info-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  &__info-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    font-size: 14px;
+
+    > span:first-child {
+      color: rgba(0, 0, 0, 0.55);
+    }
+
+    strong {
+      font-weight: 600;
+      color: rgba(0, 0, 0, 0.88);
+    }
+  }
+
+  &__info-two-row {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    font-size: 14px;
+
+    > span:first-child {
+      color: rgba(0, 0, 0, 0.55);
+    }
+
+    strong {
+      font-weight: 600;
+      color: rgba(0, 0, 0, 0.88);
+    }
+  }
+
+  &__profile-card {
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 180px;
+    padding: 8px 10px;
+    border-radius: 6px;
+    background: #f5f6f8;
+    color: rgba(0, 0, 0, 0.72);
+  }
+
+  &__report-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  &__last-seen {
+    font-size: 12px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.45);
+  }
+
+  &__report-card {
+    border-radius: 8px;
+    background: #fafafa;
+
+    .ant-card-head {
+      min-height: 38px;
+      padding: 0 12px;
+    }
+
+    .ant-card-head-title {
+      padding: 8px 0;
+      font-size: 13px;
+      font-weight: 600;
+    }
+
+    .ant-card-body {
+      padding: 12px;
+    }
+  }
+
+  &__report-rows {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  &__report-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    font-size: 14px;
+  }
+
+  &__report-label {
+    flex-shrink: 0;
+    color: rgba(0, 0, 0, 0.55);
+  }
+
+  &__report-value,
+  &__json-value {
+    min-width: 0;
+    color: rgba(0, 0, 0, 0.88);
+    text-align: right;
+    word-break: break-word;
+  }
+
+  &__battery-value {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+
+  &__battery-icon {
+    position: relative;
+    box-sizing: border-box;
+    width: 24px;
+    height: 12px;
+    border: 1.5px solid rgba(0, 0, 0, 0.65);
+    border-radius: 3px;
+
+    &::before {
+      position: absolute;
+      top: 2px;
+      right: -4px;
+      width: 2px;
+      height: 6px;
+      border-radius: 0 2px 2px 0;
+      background: rgba(0, 0, 0, 0.65);
+      content: '';
+    }
+
+    &.is-charging {
+      border-color: #16a34a;
+
+      &::before {
+        background: #16a34a;
+      }
+    }
+  }
+
+  &__battery-fill {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    max-width: 17px;
+    height: 5px;
+    border-radius: 1px;
+    background: #16a34a;
+  }
+
+  &__battery-bolt {
+    position: absolute;
+    top: -3px;
+    left: 8px;
+    width: 7px;
+    height: 14px;
+    background: #f59e0b;
+    clip-path: polygon(45% 0, 100% 0, 62% 42%, 100% 42%, 35% 100%, 48% 56%, 0 56%);
+  }
+
+  &__battery-status {
+    color: #16a34a;
+  }
+
+  &__online-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  &__status-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.25);
+
+    &.is-online {
+      background: #16a34a;
+    }
+  }
+}

package/es/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/DrawerSidebar.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { DeviceKind } from '../../../types';
+export declare type DrawerTabKey = 'info' | 'connections';
+interface DrawerSidebarProps {
+    activeKey: DrawerTabKey;
+    activeKind: DeviceKind;
+    getText: (key: string) => string;
+    onChange: (key: DrawerTabKey) => void;
+}
+declare const DrawerSidebar: React.FC<DrawerSidebarProps>;
+export default DrawerSidebar;

package/es/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/DrawerSidebar.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Button } from 'antd';
+import { Icon } from '@pisell/materials';
+import classNames from 'classnames';
+var DrawerSidebar = function DrawerSidebar(_ref) {
+  var activeKey = _ref.activeKey,
+    activeKind = _ref.activeKind,
+    getText = _ref.getText,
+    onChange = _ref.onChange;
+  var items = [{
+    key: 'info',
+    icon: 'InfoCircleOutlined',
+    label: getText('pisell2.saas.device-planning.drawer.info')
+  }];
+  if (activeKind !== 'integrated') {
+    items.push({
+      key: 'connections',
+      icon: 'ApiOutlined',
+      label: getText('pisell2.saas.device-planning.drawer.connections')
+    });
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "device-detail-drawer__sidebar"
+  }, items.map(function (item) {
+    return /*#__PURE__*/React.createElement(Button, {
+      key: item.key,
+      type: "text",
+      className: classNames('device-detail-drawer__sidebar-item', {
+        'is-active': activeKey === item.key
+      }),
+      onClick: function onClick() {
+        return onChange(item.key);
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: item.icon
+    }), /*#__PURE__*/React.createElement("span", null, item.label));
+  }));
+};
+export default DrawerSidebar;

package/es/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/connectDeviceModal/ConnectDeviceModalHeader.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { DeviceItem, I18nText } from '../../../../types';
+import type { ConnectMode, ConnectStep } from '../../hooks/useConnectDeviceModal';
+interface ConnectDeviceModalHeaderProps {
+    mode: ConnectMode;
+    step: ConnectStep;
+    currentDevice: DeviceItem;
+    currentIsSmart: boolean;
+    getText: (key: string) => string;
+    translation: (val?: I18nText) => string;
+    onBack: () => void;
+}
+declare const ConnectDeviceModalHeader: React.FC<ConnectDeviceModalHeaderProps>;
+export default ConnectDeviceModalHeader;

package/es/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/connectDeviceModal/ConnectDeviceModalHeader.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Button } from '@pisell/materials';
+import { ArrowLeftOutlined } from '@ant-design/icons';
+var ConnectDeviceModalHeader = function ConnectDeviceModalHeader(_ref) {
+  var mode = _ref.mode,
+    step = _ref.step,
+    currentDevice = _ref.currentDevice,
+    currentIsSmart = _ref.currentIsSmart,
+    getText = _ref.getText,
+    translation = _ref.translation,
+    onBack = _ref.onBack;
+  var deviceName = translation(currentDevice.name) || String(currentDevice.id);
+  var title = mode === 'edit' ? getText('pisell2.saas.device-planning.connect.edit-title').replace('{DeviceName}', deviceName) : mode === 'new' ? getText('pisell2.saas.device-planning.connect.add-new-title').replace('{DeviceName}', deviceName) : currentIsSmart ? getText('pisell2.saas.device-planning.connect.existing-peripheral-title').replace('{DeviceName}', deviceName) : getText('pisell2.saas.device-planning.connect.existing-smart-title').replace('{DeviceName}', deviceName);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "device-detail-drawer__connect-modal-title"
+  }, step === 'config' && mode !== 'edit' ? /*#__PURE__*/React.createElement(Button, {
+    type: "text",
+    icon: /*#__PURE__*/React.createElement(ArrowLeftOutlined, null),
+    onClick: onBack
+  }) : null, /*#__PURE__*/React.createElement("span", null, title));
+};
+export default ConnectDeviceModalHeader;

package/es/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/connectDeviceModal/ConnectionConfigFields.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { NetworkMethod } from '../../hooks/useConnectDeviceModal';
+interface ConnectionConfigFieldsProps {
+    connectionType?: string;
+    networkMethod: NetworkMethod;
+    profileRequired: boolean;
+    profileOptions: Array<{
+        label: string;
+        value: number;
+    }>;
+    getText: (key: string) => string;
+}
+declare const ConnectionConfigFields: React.FC<ConnectionConfigFieldsProps>;
+export default ConnectionConfigFields;

package/es/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/connectDeviceModal/ConnectionConfigFields.js

@@ -0,0 +1,122 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import { Form, Radio } from 'antd';
+import { Icon, Input, Select } from '@pisell/materials';
+import { SettingOutlined, UsbOutlined, WifiOutlined } from '@ant-design/icons';
+import { CONNECTION_TYPE_OPTIONS } from "../../../../utils";
+var BluetoothIcon = function BluetoothIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 1024 1024",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    focusable: "false"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M844.799642 674.803923 538.533306 521.15859l307.696917-177.029926c10.583033-5.006014 17.398252-15.59621 17.569144-27.302833s-6.332219-22.491247-16.764825-27.804253L475.584626 65.954131c-9.517771-4.846378-20.869307-4.39817-29.974685 1.181919-9.105379 5.581112-14.656815 15.493879-14.656815 26.174126l0 288.760636L210.662931 196.715267c-12.974499-10.915607-32.339546-9.248641-43.255153 3.724835-10.915607 12.973476-9.248641 32.339546 3.724835 43.255153L430.953126 462.312344l0 102.83511L171.558307 775.571954c-13.166881 10.68127-15.181771 30.013571-4.500501 43.180452 6.068206 7.480368 14.924921 11.360745 23.859407 11.360745 6.794753 0 13.634532-2.245134 19.322068-6.859221l220.714867-179.046862 0 283.065937c0 10.689457 5.561669 20.61041 14.680351 26.188452 4.903683 2.99931 10.455119 4.510734 16.019859 4.510734 4.78498 0 9.580193-1.118474 13.980409-3.368724l371.449917-224.085638c10.664897-5.456269 17.182334-16.618493 16.691147-28.589129C863.284645 689.959088 855.875908 679.368892 844.799642 674.803923zM763.458055 315.360458 492.351498 475.082182l0-21.60711c0.563842-3.368724 0.558725-6.801916 0-10.153244L492.351498 143.395898 763.458055 315.360458zM492.351498 877.084952 492.351498 584.489988c0.558725-3.347235 0.562818-6.777357 0-10.146081l0-5.809309 267.472797 137.65822L492.351498 877.084952z"
+  }));
+};
+var CONNECT_CONNECTION_TYPE_OPTIONS = CONNECTION_TYPE_OPTIONS.filter(function (option) {
+  return option.value !== 'serial';
+}).map(function (option) {
+  return _objectSpread(_objectSpread({}, option), {}, {
+    icon: option.value === 'usb' ? /*#__PURE__*/React.createElement(UsbOutlined, null) : option.value === 'ethernet' ? /*#__PURE__*/React.createElement(Icon, {
+      type: "ApiOutlined"
+    }) : option.value === 'wifi' ? /*#__PURE__*/React.createElement(WifiOutlined, null) : option.value === 'bluetooth' ? /*#__PURE__*/React.createElement(BluetoothIcon, null) : null
+  });
+});
+var IPV4_PATTERN = /^(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}$/;
+var needsNetworkConfig = function needsNetworkConfig(connectionType) {
+  return connectionType === 'ethernet' || connectionType === 'wifi';
+};
+var validateRequired = function validateRequired(message) {
+  return [{
+    required: true,
+    message: message
+  }];
+};
+var ConnectionConfigFields = function ConnectionConfigFields(_ref) {
+  var connectionType = _ref.connectionType,
+    networkMethod = _ref.networkMethod,
+    profileRequired = _ref.profileRequired,
+    profileOptions = _ref.profileOptions,
+    getText = _ref.getText;
+  var validateIpAddress = function validateIpAddress(_rule, value) {
+    var ipValue = String(value || '').trim();
+    if (!ipValue || IPV4_PATTERN.test(ipValue)) {
+      return Promise.resolve();
+    }
+    return Promise.reject(new Error(getText('pisell2.saas.device-planning.connect.ip-address')));
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "device-detail-drawer__connect-section-title"
+  }, /*#__PURE__*/React.createElement(SettingOutlined, null), getText('pisell2.saas.device-planning.connect.configuration')), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '8px'
+    }
+  }), /*#__PURE__*/React.createElement(Form.Item, {
+    name: "connection_type",
+    label: getText('pisell2.saas.device-planning.connect.connection-type'),
+    required: true,
+    rules: validateRequired(getText('pisell2.saas.device-planning.connect.connection-type'))
+  }, /*#__PURE__*/React.createElement(Radio.Group, {
+    className: "device-detail-drawer__connect-option-grid"
+  }, CONNECT_CONNECTION_TYPE_OPTIONS.map(function (option) {
+    return /*#__PURE__*/React.createElement(Radio, {
+      key: option.value,
+      value: option.value,
+      className: "device-detail-drawer__connect-option"
+    }, option.icon, option.label);
+  }))), needsNetworkConfig(connectionType) ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form.Item, {
+    name: "connection_method",
+    label: getText('pisell2.saas.device-planning.connect.network-config'),
+    required: true,
+    rules: validateRequired(getText('pisell2.saas.device-planning.connect.network-config'))
+  }, /*#__PURE__*/React.createElement(Radio.Group, {
+    className: "device-detail-drawer__connect-option-grid"
+  }, ['auto', 'manual'].map(function (method) {
+    return /*#__PURE__*/React.createElement(Radio, {
+      key: method,
+      value: method,
+      className: "device-detail-drawer__connect-option"
+    }, getText(method === 'auto' ? 'pisell2.saas.device-planning.connect.auto-discovery' : 'pisell2.saas.device-planning.connect.manual-ip'));
+  }))), networkMethod === 'manual' ? /*#__PURE__*/React.createElement(Form.Item, {
+    name: "connection_ip",
+    label: getText('pisell2.saas.device-planning.connect.ip-address'),
+    required: true,
+    rules: [].concat(_toConsumableArray(validateRequired(getText('pisell2.saas.device-planning.connect.ip-address'))), [{
+      validator: validateIpAddress
+    }])
+  }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: "192.168.1.100"
+  })) : null) : null, /*#__PURE__*/React.createElement(Form.Item, {
+    name: "profile_ids",
+    label: getText('pisell2.saas.device-planning.connect.peripheral-profiles'),
+    required: profileRequired,
+    rules: profileRequired ? [{
+      type: 'array',
+      required: true,
+      min: 1,
+      message: getText('pisell2.saas.device-planning.add.device-profile-required')
+    }] : [],
+    extra: /*#__PURE__*/React.createElement("div", {
+      className: "device-detail-drawer__connect-help"
+    }, getText('pisell2.saas.device-planning.connect.profiles-help'))
+  }, /*#__PURE__*/React.createElement(Select, {
+    mode: "multiple",
+    options: profileOptions,
+    placeholder: getText('pisell2.saas.device-planning.connect.select-profiles')
+  })));
+};
+export default ConnectionConfigFields;

package/es/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/connectDeviceModal/DeviceConnectionSummary.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { DeviceItem, DeviceModelItem, I18nText } from '../../../../types';
+import type { ConnectMode } from '../../hooks/useConnectDeviceModal';
+interface DeviceConnectionSummaryProps {
+    mode: ConnectMode;
+    smartDevice?: DeviceItem;
+    peripheral?: DeviceItem;
+    selectedModel?: DeviceModelItem;
+    translation: (val?: I18nText) => string;
+}
+declare const DeviceConnectionSummary: React.FC<DeviceConnectionSummaryProps>;
+export default DeviceConnectionSummary;

package/es/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/connectDeviceModal/DeviceConnectionSummary.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Icon } from '@pisell/materials';
+import { LinkOutlined } from '@ant-design/icons';
+import { DEVICE_ICON_COLOR } from "../../../../utils";
+var DeviceCard = function DeviceCard(_ref) {
+  var _device$type, _model$type, _device$type2, _model$type2;
+  var device = _ref.device,
+    model = _ref.model,
+    translation = _ref.translation;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "device-detail-drawer__connect-summary-card is-".concat((device === null || device === void 0 ? void 0 : device.type_kind) || 'dumb')
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "device-detail-drawer__connect-device-icon is-".concat((device === null || device === void 0 ? void 0 : device.type_kind) || 'dumb')
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: (device === null || device === void 0 || (_device$type = device.type) === null || _device$type === void 0 ? void 0 : _device$type.icon) || (model === null || model === void 0 || (_model$type = model.type) === null || _model$type === void 0 ? void 0 : _model$type.icon) || 'DesktopOutlined',
+    color: DEVICE_ICON_COLOR[(device === null || device === void 0 ? void 0 : device.type_kind) || 'dumb']
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, device ? translation(device.name) || device.id : translation(model === null || model === void 0 ? void 0 : model.name) || (model === null || model === void 0 ? void 0 : model.code)), /*#__PURE__*/React.createElement("span", null, device ? translation((_device$type2 = device.type) === null || _device$type2 === void 0 ? void 0 : _device$type2.name) || device.type_code : translation(model === null || model === void 0 || (_model$type2 = model.type) === null || _model$type2 === void 0 ? void 0 : _model$type2.name) || (model === null || model === void 0 ? void 0 : model.type_code))));
+};
+var DeviceConnectionSummary = function DeviceConnectionSummary(_ref2) {
+  var mode = _ref2.mode,
+    smartDevice = _ref2.smartDevice,
+    peripheral = _ref2.peripheral,
+    selectedModel = _ref2.selectedModel,
+    translation = _ref2.translation;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "device-detail-drawer__connect-summary",
+    style: {
+      marginBottom: '16px'
+    }
+  }, /*#__PURE__*/React.createElement(DeviceCard, {
+    device: smartDevice,
+    translation: translation
+  }), /*#__PURE__*/React.createElement(LinkOutlined, null), mode === 'new' ? /*#__PURE__*/React.createElement(DeviceCard, {
+    model: selectedModel,
+    translation: translation
+  }) : /*#__PURE__*/React.createElement(DeviceCard, {
+    device: peripheral,
+    translation: translation
+  }));
+};
+export default DeviceConnectionSummary;

package/es/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/connectDeviceModal/NewPeripheralInfoFields.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { I18nText, WorkAreaItem } from '../../../../types';
+interface NewPeripheralInfoFieldsProps {
+    workAreas: WorkAreaItem[];
+    workAreaId?: number;
+    currentWorkAreaId?: number;
+    getText: (key: string) => string;
+    translation: (val?: I18nText) => string;
+}
+declare const NewPeripheralInfoFields: React.FC<NewPeripheralInfoFieldsProps>;
+export default NewPeripheralInfoFields;

package/es/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/connectDeviceModal/NewPeripheralInfoFields.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Form } from 'antd';
+import { BaseTranslation, Icon, Select } from '@pisell/materials';
+import { validateI18nRequired } from "../../../../types";
+var validateRequired = function validateRequired(message) {
+  return [{
+    required: true,
+    message: message
+  }];
+};
+var NewPeripheralInfoFields = function NewPeripheralInfoFields(_ref) {
+  var workAreas = _ref.workAreas,
+    workAreaId = _ref.workAreaId,
+    currentWorkAreaId = _ref.currentWorkAreaId,
+    getText = _ref.getText,
+    translation = _ref.translation;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "device-detail-drawer__connect-new-info"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "device-detail-drawer__connect-section-title"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "InfoCircleOutlined"
+  }), getText('pisell2.saas.device-planning.connect.new-info')), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '8px'
+    }
+  }), /*#__PURE__*/React.createElement(Form.Item, {
+    name: "name",
+    label: getText('pisell2.saas.device-planning.add.device-name'),
+    required: true,
+    rules: [{
+      validator: validateI18nRequired(getText('pisell2.saas.device-planning.add.device-name-required'))
+    }]
+  }, /*#__PURE__*/React.createElement(BaseTranslation, {
+    renderMode: "edit"
+  })), /*#__PURE__*/React.createElement(Form.Item, {
+    name: "workarea_id",
+    label: getText('pisell2.saas.device-planning.edit.work-area'),
+    required: true,
+    rules: validateRequired(getText('pisell2.saas.device-planning.edit.work-area-required'))
+  }, /*#__PURE__*/React.createElement(Select, {
+    value: workAreaId,
+    options: workAreas.map(function (area) {
+      return {
+        label: "".concat(translation(area.name) || area.id).concat(area.id === currentWorkAreaId ? " (".concat(getText('pisell2.saas.device-planning.connect.current'), ")") : ''),
+        value: area.id
+      };
+    })
+  })));
+};
+export default NewPeripheralInfoFields;

package/es/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/connectDeviceModal/PickExistingDeviceStep.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { DeviceItem, DeviceKind, I18nText, WorkAreaItem } from '../../../../types';
+interface PickExistingDeviceStepProps {
+    workAreas: WorkAreaItem[];
+    selectedWorkAreaId?: number;
+    currentWorkAreaId?: number;
+    filteredDevices: DeviceItem[];
+    connectedDeviceIds: number[];
+    loading: boolean;
+    pickingDeviceId?: number;
+    keyword: string;
+    targetKind: DeviceKind;
+    getText: (key: string) => string;
+    translation: (val?: I18nText) => string;
+    getWorkAreaDeviceCount: (area: WorkAreaItem) => number;
+    getDeviceCountText: (count: number) => string;
+    onWorkAreaChange: (id: number) => void;
+    onKeywordChange: (value: string) => void;
+    onPickDevice: (device: DeviceItem) => void;
+}
+declare const PickExistingDeviceStep: React.FC<PickExistingDeviceStepProps>;
+export default PickExistingDeviceStep;