@open-tender/store 1.1.0 → 1.1.2

package/dist/esm/config/item.js

@@ -0,0 +1,385 @@
+import { __assign } from "tslib";
+import styles from '../styles';
+import { theme } from '../utils';
+var item = {
+    item: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            backgroundColor: theme.colors.background.tertiary,
+            flexGrow: 1,
+            overflow: 'hidden',
+            padding: 30
+        }
+    },
+    item__container: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            backgroundColor: theme.colors.background.primary,
+            borderRadius: theme.spacing.borderRadius.medium,
+            flexGrow: 1,
+            overflow: 'hidden'
+        }
+    },
+    item__header: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            flexGrow: 0,
+            flexShrink: 0
+        }
+    },
+    item__image: {
+        classes: '',
+        props: {},
+        style: {
+            aspectRatio: 1.6,
+            backgroundPosition: 'center',
+            backgroundSize: 'cover'
+        }
+    },
+    item__info: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            flexGrow: 0,
+            flexShrink: 0,
+            padding: theme.spacing.padding.medium
+        }
+    },
+    item__customizeHeader: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            flexGrow: 0,
+            flexShrink: 0,
+            // paddingBottom: theme.spacing.padding.medium,
+            paddingTop: theme.spacing.padding.medium
+        }
+    },
+    item__customizeTitle: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            paddingLeft: theme.spacing.padding.medium,
+            paddingRight: theme.spacing.padding.medium
+        }
+    },
+    item__selected: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            borderStyle: 'solid',
+            borderBottomColor: theme.colors.border.primary,
+            borderBottomWidth: 1,
+            borderLeftWidth: 0,
+            borderRightWidth: 0,
+            borderTopWidth: 0
+        }
+    },
+    item__selectedHeader: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            minHeight: 40,
+            paddingLeft: theme.spacing.padding.medium,
+            paddingRight: theme.spacing.padding.medium,
+            marginTop: theme.spacing.padding.medium,
+            marginBottom: -10
+        }
+    },
+    item__selectedTitle: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.textHeading), { fontSize: theme.fontSizes.medium })
+    },
+    item__selectedOptions: {
+        classes: 'hide-scrollbar',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            flexDirection: 'row',
+            paddingBottom: theme.spacing.padding.medium,
+            paddingLeft: 10,
+            paddingRight: 10,
+            paddingTop: theme.spacing.padding.medium,
+            overflow: 'scroll'
+        }
+    },
+    item__selectedOption: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            flexBasis: '23%',
+            flexShrink: 0
+        }
+    },
+    item__selectedPlaceholder: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            height: 260,
+            padding: theme.spacing.padding.small
+        }
+    },
+    item__selectedPlaceholderContainer: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            backgroundColor: theme.colors.card.primary,
+            borderRadius: theme.spacing.borderRadius.small,
+            boxShadow: theme.colors.boxShadow.primary,
+            flexGrow: 1,
+            justifyContent: 'center',
+            padding: theme.spacing.padding.small,
+            textAlign: 'center'
+        }
+    },
+    item__selectedPlaceholderTitle: {
+        classes: '',
+        props: {
+            text: 'Nothing selected'
+        },
+        style: __assign(__assign({}, styles.textHeading), { fontSize: theme.fontSizes.small })
+    },
+    item__title: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            flexDirection: 'row',
+            flexGrow: 0,
+            flexShrink: 0,
+            justifyContent: 'space-between'
+        }
+    },
+    item__name: {
+        classes: '',
+        props: {
+            as: 'h2'
+        },
+        style: __assign(__assign({}, styles.textHeading), { fontSize: theme.fontSizes.xxlarge })
+    },
+    item__priceCals: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            flexDirection: 'row',
+            gap: 15
+        }
+    },
+    item__price: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.textHeading), { flexGrow: 0, flexShrink: 0, fontSize: 28, lineHeight: 1 })
+    },
+    item__calories: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.textBody), { flexGrow: 0, flexShrink: 0, fontSize: 28, lineHeight: 1 })
+    },
+    item__description: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.textBody), { fontSize: 20, lineHeight: 1.3, maxWidth: 640, marginTop: theme.spacing.padding.medium })
+    },
+    item__extras: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            gap: 10,
+            justifyContent: 'space-between',
+            marginTop: theme.spacing.padding.medium
+        }
+    },
+    item__tagsAllergens: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            flexDirection: 'row',
+            gap: 10
+        }
+    },
+    item__tags: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            flexDirection: 'row',
+            gap: 10
+        }
+    },
+    item__allergens: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            flexDirection: 'row',
+            gap: 10
+        }
+    },
+    item__links: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            flexDirection: 'row',
+            gap: 15
+        }
+    },
+    item__toggles: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            flexDirection: 'row',
+            padding: theme.spacing.padding.medium,
+            paddingBottom: 0,
+            gap: 50
+        }
+    },
+    item__toggle: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            borderStyle: 'solid',
+            borderBottomWidth: 1,
+            borderBottomColor: theme.colors.border.primary,
+            borderLeftWidth: 0,
+            borderRightWidth: 0,
+            borderTopWidth: 1,
+            borderTopColor: theme.colors.border.primary,
+            flexDirection: 'row',
+            flexGrow: 1,
+            flexBasis: 1,
+            justifyContent: 'space-between',
+            paddingBottom: 12,
+            paddingTop: 12
+        }
+    },
+    item__toggleLabel: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.textHeading), { fontSize: theme.fontSizes.large })
+    },
+    item__quantity: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            flexDirection: 'row'
+        }
+    },
+    item__decrease: {
+        classes: 'buttonPrimary',
+        props: { text: 'Decrease Quantity' },
+        style: __assign(__assign({}, styles.buttonPrimary), { height: 44, lineHeight: 0, padding: 0, width: 44 })
+    },
+    item__increase: {
+        classes: 'buttonPrimary',
+        props: { text: 'Increase Quantity' },
+        style: __assign(__assign({}, styles.buttonPrimary), { height: 44, lineHeight: 0, padding: 0, width: 44 })
+    },
+    item__countContainer: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            minWidth: 52,
+            paddingLeft: 4,
+            paddingRight: 4
+        }
+    },
+    item__count: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.textHeading), { fontSize: theme.fontSizes.large })
+    },
+    item__content: {
+        classes: 'hide-scrollbar',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            flexGrow: 1,
+            flexShrink: 1,
+            overflow: 'scroll'
+        }
+    },
+    item__groups: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch'
+        }
+    },
+    item__groupsOption: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            flexBasis: '25%',
+            flexShrink: 0
+        }
+    },
+    item__footer: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            flexGrow: 0,
+            flexShrink: 0,
+            padding: theme.spacing.padding.medium
+        }
+    },
+    item__footerContainer: {
+        classes: '',
+        props: {},
+        style: {
+            flexDirection: 'row',
+            gap: theme.spacing.padding.medium,
+            justifyContent: 'space-between'
+        }
+    },
+    item__add: {
+        classes: 'buttonPrimary',
+        props: { text: 'Add To Order' },
+        style: __assign(__assign({}, styles.buttonPrimary), { flexBasis: 1, flexGrow: 1, borderRadius: 64, fontSize: theme.fontSizes.xlarge, paddingBottom: 20, paddingLeft: 48, paddingRight: 48, paddingTop: 20 })
+    },
+    item__addDisabled: {
+        classes: 'buttonPrimary',
+        props: { text: 'Add To Order' },
+        style: __assign(__assign({}, styles.buttonPrimary), { flexBasis: 1, flexGrow: 1, borderRadius: 64, fontSize: theme.fontSizes.xlarge, opacity: 0.5, paddingBottom: 20, paddingLeft: 48, paddingRight: 48, paddingTop: 20 })
+    },
+    item__customize: {
+        classes: 'buttonPrimary',
+        props: { text: 'Customize' },
+        style: __assign(__assign({}, styles.buttonSecondary), { flexBasis: 1, flexGrow: 1, borderRadius: 64, fontSize: theme.fontSizes.xlarge, paddingBottom: 20, paddingLeft: 48, paddingRight: 48, paddingTop: 20 })
+    },
+    item__customizeRequired: {
+        classes: 'buttonPrimary',
+        props: { text: 'Customize' },
+        style: __assign(__assign({}, styles.buttonDelete), { borderColor: theme.colors.error.primary, flexBasis: 1, flexGrow: 1, borderRadius: 64, fontSize: theme.fontSizes.xlarge, paddingBottom: 20, paddingLeft: 48, paddingRight: 48, paddingTop: 20 })
+    }
+};
+export default item;

package/dist/esm/config/itemGroup.d.ts

@@ -0,0 +1,3 @@
+import { ScreenConfig } from '@open-tender/ui';
+declare const itemGroup: ScreenConfig;
+export default itemGroup;

package/dist/esm/config/itemGroup.js

@@ -0,0 +1,69 @@
+import { __assign } from "tslib";
+import styles from '../styles';
+import { theme } from '../utils';
+var itemGroup = {
+    itemGroup: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            paddingBottom: theme.spacing.padding.medium,
+            paddingTop: theme.spacing.padding.medium
+        }
+    },
+    itemGroup__header: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            padding: theme.spacing.padding.medium
+        }
+    },
+    itemGroup__nameCount: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            flexDirection: 'row',
+            gap: 20
+        }
+    },
+    itemGroup__name: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.textHeading), { fontSize: theme.fontSizes.large })
+    },
+    itemGroup__count: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.textHeading), { fontSize: theme.fontSizes.large })
+    },
+    itemGroup__countRequired: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.textHeading), { fontSize: theme.fontSizes.large, color: theme.colors.error.primary })
+    },
+    itemGroup__description: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.textBody), { fontSize: theme.fontSizes.xsmall, marginTop: 5, maxWidth: 640 })
+    },
+    itemGroup__content: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            flexBasis: 'auto',
+            flexDirection: 'row',
+            flexGrow: 1,
+            flexShrink: 1,
+            flexWrap: 'wrap',
+            justifyContent: 'flex-start',
+            paddingLeft: theme.spacing.padding.small,
+            paddingRight: theme.spacing.padding.small
+        }
+    }
+};
+export default itemGroup;

package/dist/esm/config/itemGroups.d.ts

@@ -0,0 +1,3 @@
+import { ScreenConfig } from '@open-tender/ui';
+declare const itemGroups: ScreenConfig;
+export default itemGroups;

package/dist/esm/config/itemGroups.js

@@ -0,0 +1,19 @@
+var itemGroups = {
+    itemGroups: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch'
+        }
+    },
+    itemGroups__option: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            flexBasis: '25%',
+            flexShrink: 0
+        }
+    }
+};
+export default itemGroups;

package/dist/esm/config/itemOption.d.ts

@@ -0,0 +1,3 @@
+import { ScreenConfig } from '@open-tender/ui';
+declare const itemOption: ScreenConfig;
+export default itemOption;

package/dist/esm/config/itemOption.js

@@ -0,0 +1,225 @@
+import { __assign } from "tslib";
+import styles from '../styles';
+import { theme } from '../utils';
+var itemOption = {
+    itemOption: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            flexGrow: 1,
+            padding: theme.spacing.padding.small
+        }
+    },
+    itemOption__container: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            flexGrow: 1,
+            padding: theme.spacing.padding.small,
+            position: 'relative'
+        }
+    },
+    itemOption__containerRequired: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            backgroundColor: theme.colors.error.secondary,
+            borderColor: theme.colors.error.primary,
+            borderRadius: theme.spacing.borderRadius.medium,
+            borderStyle: 'solid',
+            borderWidth: theme.spacing.borderWidth.medium,
+            flexGrow: 1,
+            padding: theme.spacing.padding.small,
+            position: 'relative'
+        }
+    },
+    itemOption__decrease: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            display: 'flex',
+            height: 48,
+            justifyContent: 'center',
+            position: 'absolute',
+            left: theme.spacing.padding.small,
+            marginLeft: 2,
+            top: theme.spacing.padding.small,
+            width: 48,
+            zIndex: 1
+        }
+    },
+    itemOption__decreaseIcon: {
+        classes: 'buttonPrimary',
+        props: { text: 'Decrease Quantity' },
+        style: __assign(__assign({}, styles.buttonPrimary), { height: 30, lineHeight: 0, padding: 0, width: 30 })
+    },
+    itemOption__increase: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            display: 'flex',
+            height: 48,
+            justifyContent: 'center',
+            position: 'absolute',
+            right: theme.spacing.padding.small,
+            marginRight: 2,
+            top: theme.spacing.padding.small,
+            width: 48,
+            zIndex: 1
+        }
+    },
+    itemOption__increaseIcon: {
+        classes: 'buttonPrimary',
+        props: { text: 'Decrease Quantity' },
+        style: __assign(__assign({}, styles.buttonPrimary), { height: 30, lineHeight: 0, padding: 0, width: 30 })
+    },
+    itemOption__button: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            // backgroundColor: theme.colors.card.primary,
+            // borderRadius: theme.spacing.borderRadius.small,
+            // boxShadow: theme.colors.boxShadow.primary,
+            display: 'flex',
+            flexDirection: 'column',
+            flexGrow: 1,
+            height: 260,
+            overflow: 'hidden'
+            // padding: theme.spacing.padding.small,
+        }
+    },
+    itemOption__quantityContainer: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            flexDirection: 'row',
+            flexGrow: 0,
+            flexShrink: 0,
+            height: 48,
+            justifyContent: 'center'
+        }
+    },
+    itemOption__quantity: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.textHeading), { fontSize: theme.fontSizes.medium, lineHeight: 1 })
+    },
+    itemOption__imageContainer: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            flexGrow: 1,
+            flexShrink: 1,
+            justifyContent: 'center'
+        }
+    },
+    itemOption__imageWrapper: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch',
+            borderRadius: 60,
+            height: 120,
+            justifyContent: 'center',
+            overflow: 'hidden',
+            width: 120
+        }
+    },
+    itemOption__image: {
+        classes: '',
+        props: {},
+        style: {
+            backgroundColor: theme.colors.background.tertiary,
+            backgroundPosition: 'center',
+            backgroundSize: 'cover',
+            flexGrow: 1
+        }
+    },
+    itemOption__priceContainer: {
+        classes: '',
+        props: {},
+        style: {
+            // backgroundColor: 'palegreen',
+            alignItems: 'flex-end',
+            flexDirection: 'row',
+            flexGrow: 0,
+            flexShrink: 0,
+            gap: 15,
+            justifyContent: 'center',
+            paddingBottom: 3
+        }
+    },
+    itemOption__price: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.textHeading), { fontSize: theme.fontSizes.xxsmall, lineHeight: 1 })
+    },
+    itemOption__cals: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.textBody), { fontSize: theme.fontSizes.xxsmall, lineHeight: 1 })
+    },
+    itemOption__nameContainer: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            flexGrow: 0,
+            flexShrink: 0,
+            // height: 48,
+            justifyContent: 'flex-end',
+            paddingBottom: 10,
+            paddingLeft: 5,
+            paddingRight: 5
+        }
+    },
+    itemOption__name: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.textHeading), { fontSize: theme.fontSizes.medium, height: theme.fontSizes.medium, lineHeight: 1, overflow: 'hidden' })
+    },
+    itemOption__groups: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'stretch'
+            // backgroundColor: theme.colors.background.tertiary,
+            // borderRadius: theme.spacing.borderRadius.xsmall,
+            // padding: theme.spacing.padding.small
+        }
+    },
+    itemOption__groupsOptions: {
+        classes: '',
+        props: {},
+        style: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginBottom: theme.spacing.padding.small,
+            textAlign: 'center'
+        }
+    },
+    itemOption__groupsOptionNames: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.textBody), { fontSize: theme.fontSizes.small })
+    },
+    itemOption__groupsButton: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.buttonPrimary), { borderRadius: theme.spacing.borderRadius.xsmall, paddingBottom: 10, paddingLeft: 5, paddingRight: 5, paddingTop: 10 })
+    },
+    itemOption__groupsButtonRequired: {
+        classes: '',
+        props: {},
+        style: __assign(__assign({}, styles.buttonDelete), { borderColor: theme.colors.error.primary, borderRadius: theme.spacing.borderRadius.xsmall, paddingBottom: 10, paddingLeft: 5, paddingRight: 5, paddingTop: 10 })
+    }
+};
+export default itemOption;