@ovotech/element-native 5.5.0 → 5.6.0

package/dist/components/ActionList/ActionListItems/styles.js

@@ -0,0 +1,171 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GraphicContainer = exports.PROGESS_RING_INNER = exports.DirectionAndValueTextContainer = exports.OnSurfaceP = exports.DirectionLabelContainer = exports.DataValueText = exports.ValueTextContainer = exports.StatusText = exports.StyledImage = exports.RightTextContainer = exports.LeftTextContainer = exports.SubHeading = exports.TextContainer = exports.NavigationListContainer = exports.EditButtonsContainer = exports.ValueText = exports.InitialStateContainer = exports.EditableListContainer = exports.ActionListItemWrapper = void 0;
+const element_core_1 = require("@ovotech/element-core");
+const react_native_1 = require("react-native");
+const styled_native_1 = __importStar(require("../../../styled.native"));
+const P_1 = require("../../P");
+exports.ActionListItemWrapper = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => {
+    return (0, styled_native_1.css) `
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: ${(0, element_core_1.numToPx)(theme.space[300])};
+    padding: ${(0, element_core_1.numToPx)(theme.space[400])} 0;
+  `;
+});
+// Editable List Item
+exports.EditableListContainer = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => {
+    return (0, styled_native_1.css) `
+    flex: 1;
+    gap: ${(0, element_core_1.numToPx)(theme.space[100])};
+  `;
+});
+exports.InitialStateContainer = (0, styled_native_1.default)(react_native_1.View)(() => {
+    return (0, styled_native_1.css) `
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  `;
+});
+exports.ValueText = (0, styled_native_1.default)(P_1.P)(({ theme }) => {
+    return (0, styled_native_1.css) `
+    color: ${theme.color.surface.onSurfaceVariant};
+  `;
+});
+exports.EditButtonsContainer = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => {
+    return (0, styled_native_1.css) `
+    gap: ${(0, element_core_1.numToPx)(theme.space[300])};
+    flex-direction: row;
+    justify-content: flex-end;
+  `;
+});
+// Navigation List Item
+exports.NavigationListContainer = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => {
+    return (0, styled_native_1.css) `
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: ${(0, element_core_1.numToPx)(theme.space[100])};
+  `;
+});
+exports.TextContainer = (0, styled_native_1.default)(react_native_1.View)(() => {
+    return (0, styled_native_1.css) `
+    flex: 1;
+  `;
+});
+exports.SubHeading = (0, styled_native_1.default)(P_1.P)(({ theme }) => {
+    return (0, styled_native_1.css) `
+    color: ${theme.color.alert.info};
+  `;
+});
+// Data List Item
+exports.LeftTextContainer = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => {
+    return (0, styled_native_1.css) `
+    flex: 1;
+    gap: ${(0, element_core_1.numToPx)(theme.space[100])};
+  `;
+});
+exports.RightTextContainer = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => {
+    return (0, styled_native_1.css) `
+    flex: 1;
+    gap: ${(0, element_core_1.numToPx)(theme.space[100])};
+    align-items: flex-end;
+  `;
+});
+exports.StyledImage = (0, styled_native_1.default)(react_native_1.Image)(() => {
+    return (0, styled_native_1.css) `
+    width: 100%;
+    height: 100%;
+  `;
+});
+exports.StatusText = (0, styled_native_1.default)(P_1.P)(({ theme, isError, }) => {
+    return (0, styled_native_1.css) `
+    color: ${isError ? theme.color.alert.error : theme.color.alert.info};
+  `;
+});
+exports.ValueTextContainer = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => {
+    return (0, styled_native_1.css) `
+    min-width: ${(0, element_core_1.numToPx)(theme.space[2400])};
+    align-items: flex-end;
+  `;
+});
+exports.DataValueText = (0, styled_native_1.default)(P_1.P)(({ theme, isError, }) => {
+    return (0, styled_native_1.css) `
+    color: ${isError ? theme.color.alert.error : theme.color.surface.onSurface};
+  `;
+});
+exports.DirectionLabelContainer = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => {
+    return (0, styled_native_1.css) `
+    min-width: ${(0, element_core_1.numToPx)(theme.space[600])};
+    align-items: flex-end;
+  `;
+});
+exports.OnSurfaceP = (0, styled_native_1.default)(P_1.P)(({ theme }) => {
+    return (0, styled_native_1.css) `
+    color: ${theme.color.surface.onSurfaceVariant};
+  `;
+});
+exports.DirectionAndValueTextContainer = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => {
+    return (0, styled_native_1.css) `
+    align-items: flex-end;
+    justify-content: space-between;
+    width: 100%;
+    flex-direction: row;
+    margin-left: ${(0, element_core_1.numToPx)(theme.space[300])};
+  `;
+});
+exports.PROGESS_RING_INNER = 42;
+exports.GraphicContainer = (0, styled_native_1.default)(react_native_1.ImageBackground)(({ theme, isIcon, hasProgress }) => {
+    return (0, styled_native_1.css) `
+    border-radius: ${(0, element_core_1.numToPx)(theme.border.radius['2xl'])};
+    background-color: ${hasProgress
+        ? theme.color.surface.bright
+        : theme.color.surface.surface};
+    border-width: 0;
+    padding: ${isIcon ? (0, element_core_1.numToPx)(theme.space[200]) : 0};
+    width: ${hasProgress
+        ? `${exports.PROGESS_RING_INNER}px`
+        : (0, element_core_1.numToPx)(theme.space[1100])};
+    height: ${hasProgress
+        ? `${exports.PROGESS_RING_INNER}px`
+        : (0, element_core_1.numToPx)(theme.space[1100])};
+    flex-shrink: 0;
+    overflow: hidden;
+    align-items: center;
+    justify-content: center;
+  `;
+});

package/dist/components/ActionList/components/ActionListHeading.d.ts

@@ -0,0 +1,9 @@
+import { IconNameExtended } from '../../../providers';
+type ActionListHeadingProps = {
+    iconName?: IconNameExtended;
+    iconColor?: string;
+    heading?: string;
+    subheading?: string;
+};
+export declare const ActionListHeading: React.FC<ActionListHeadingProps>;
+export {};

package/dist/components/ActionList/components/ActionListHeading.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionListHeading = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const Icon_1 = require("../../Icon");
+const P_1 = require("../../P");
+const Strong_1 = require("../../Strong");
+const styled_1 = require("../styled");
+const ActionListHeading = ({ iconName, iconColor = 'surface.surface', heading, subheading, }) => ((0, jsx_runtime_1.jsxs)(styled_1.InfoRowWrapper, { children: [iconName && ((0, jsx_runtime_1.jsx)(styled_1.GraphicContainer, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: iconName, size: 24, color: iconColor }) })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [heading && ((0, jsx_runtime_1.jsx)(P_1.P, { size: "xl", children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: heading }) })), subheading && (0, jsx_runtime_1.jsx)(P_1.P, { children: subheading })] })] }));
+exports.ActionListHeading = ActionListHeading;

package/dist/components/ActionList/index.d.ts

@@ -1 +1,6 @@
-export { Action, ActionList } from './ActionList';
+export { Action } from './Action';
+export { ActionList } from './ActionList';
+export { DataListItem } from './ActionListItems/DataListItem';
+export { EditableListItem } from './ActionListItems/EditableListItem';
+export { NavigationListItem } from './ActionListItems/NavigationListItem';
+export { ToggleListItem } from './ActionListItems/ToggleListItem';

package/dist/components/ActionList/index.js

@@ -1,6 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionList = exports.Action = void 0;
+exports.ToggleListItem = exports.NavigationListItem = exports.EditableListItem = exports.DataListItem = exports.ActionList = exports.Action = void 0;
+var Action_1 = require("./Action");
+Object.defineProperty(exports, "Action", { enumerable: true, get: function () { return Action_1.Action; } });
 var ActionList_1 = require("./ActionList");
-Object.defineProperty(exports, "Action", { enumerable: true, get: function () { return ActionList_1.Action; } });
 Object.defineProperty(exports, "ActionList", { enumerable: true, get: function () { return ActionList_1.ActionList; } });
+var DataListItem_1 = require("./ActionListItems/DataListItem");
+Object.defineProperty(exports, "DataListItem", { enumerable: true, get: function () { return DataListItem_1.DataListItem; } });
+var EditableListItem_1 = require("./ActionListItems/EditableListItem");
+Object.defineProperty(exports, "EditableListItem", { enumerable: true, get: function () { return EditableListItem_1.EditableListItem; } });
+var NavigationListItem_1 = require("./ActionListItems/NavigationListItem");
+Object.defineProperty(exports, "NavigationListItem", { enumerable: true, get: function () { return NavigationListItem_1.NavigationListItem; } });
+var ToggleListItem_1 = require("./ActionListItems/ToggleListItem");
+Object.defineProperty(exports, "ToggleListItem", { enumerable: true, get: function () { return ToggleListItem_1.ToggleListItem; } });