@fast-simon/dashboard-utilities 1.0.1

package/dist/components/BackOfficeFiltersMenu/styles.module.css

@@ -0,0 +1,10 @@
+.filtersContainer {
+        padding: 8px 16px;
+        font-size: 12px;
+}
+.clearAll {
+        color: var(--windows-blue);
+    text-decoration: none;
+    cursor: pointer;
+    font-size: 1.2rem;
+}

package/dist/components/CheckboxFilter/Checkbox/styles.module.css

@@ -0,0 +1,143 @@
+.fsCheckbox {
+    display: flex;
+    position: relative;
+    padding: 0 5px 0 0;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    font-family: Arial, serif;
+    animation: growDown 300ms ease forwards;
+    align-items: center;
+}
+
+.fsCheckbox input {
+    position: fixed;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+}
+
+.checkmark {
+    min-height: 16px;
+    min-width: 16px;
+    background-color: #eee;
+    margin-right: 10px;
+}
+
+.fsCheckbox:hover input ~ .checkmark {
+    background-color: #d00202cf;
+}
+
+.fsCheckbox input:checked ~ .checkmark {
+    background-color: white;
+}
+
+.fsCheckbox input:checked ~ .checkmark:after {
+    display: block;
+}
+
+.fsCheckboxx .checkmark:after {
+    left: 5px;
+    width: 4px;
+    height: 9px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+.fsSelectedCheckboxTrue{}
+.fsSelectedCheckboxFalse{}
+
+    @keyframes growDown {
+        0% {
+            transform: scaleY(0)
+        }
+        80% {
+            transform: scaleY(1.1)
+        }
+        100% {
+            transform: scaleY(1)
+        }
+    }
+
+    .checkbox {
+        display: flex;
+        position: relative;
+        padding: 0 5px 0 0;
+        margin-top: 5px;
+        margin-bottom: 5px;
+        cursor: pointer;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        font-family: Arial, serif;
+        animation: growDown 300ms ease forwards;
+        align-items: center;
+    }
+
+    .checkbox .checkboxLabel {
+        align-self: start;
+        text-transform: capitalize;
+        display: flex;
+        line-height: 20px;
+        align-items: center;
+        margin-top: 2px;
+        width: -webkit-fill-available;
+        justify-content: space-between;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    .checkbox input {
+        position: fixed;
+        opacity: 0;
+        cursor: pointer;
+        height: 0;
+        width: 0;
+    }
+
+    .checkmark {
+        min-height: 16px;
+        min-width: 16px;
+        background-color: #eee;
+        margin-right: 10px;
+    }
+
+    .checkbox:hover input ~ .checkmark {
+        background-color: #ccc;
+    }
+
+    .checkbox input:checked ~ .checkmark {
+        background-color: #000000;
+    }
+
+    .checkmark:after {
+        content: "";
+        position: absolute;
+        display: none;
+    }
+
+    .checkbox input:checked ~ .checkmark:after {
+        display: block;
+    }
+
+    .checkbox .checkmark:after {
+        left: 5px;
+        width: 4px;
+        height: 9px;
+        border: solid white;
+        border-width: 0 2px 2px 0;
+        -webkit-transform: rotate(45deg);
+        -ms-transform: rotate(45deg);
+        transform: rotate(45deg);
+    }
+:global(.modal-mobile-filters .fs-serp-filter-count, .modal-mobile-filters .fsSerpCheckmark) {
+        display: none;
+    }

package/dist/components/CheckboxFilter/styles.module.css

@@ -0,0 +1,5 @@
+.fs-switch-left-margin{
+    margin-left: 10px;
+}
+.fs-serp-filter-text {}
+.filters-option-text {}

package/dist/components/DragAndDrop/styles.module.css

@@ -0,0 +1,21 @@
+.over:after {
+    background-color: #4c9ffe;
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+}
+
+.after:after {
+    right: -12px;
+}
+
+.before:after {
+    left: -12px;
+}
+
+.disabledChildren {
+    pointer-events: none;
+    opacity: 1;
+}

package/dist/components/FacetItem/styles.module.css

@@ -0,0 +1,55 @@
+.fsFlexFacetTitle {
+    display: flex;
+}
+.fsFlexFacetSpan {
+    margin-left: 0.7rem;
+}
+.fsFacetTitle {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    letter-spacing: .2px;
+    background-color: #fff0;
+    border: none;
+    width: 100%;
+    text-align: left;
+    padding: 8px 0;
+    position: relative;
+    border-radius: 8px;
+    transition: background-color .2s ease-out;
+    cursor: pointer;
+    color: #000;
+    font-size: 14px;
+    font-weight: 600;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+.fsFacetContainer {
+    display: flex;
+    flex-direction: column;
+}
+.fsFacetOptions {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    max-height: 230px;
+    overflow: auto;
+}
+.fsFacetOptions::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+.fsFacetOptions::-webkit-scrollbar-track {
+    border-radius: 4px;
+    border: 1px solid #cacaca;
+    background-color: white;
+}
+
+.fsFacetOptions::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: #e1e1e1;
+    border: 1px solid #cacaca;
+    transition: background-color ease-in-out 100ms;
+}

package/dist/components/FromToFilter/From/styles.module.css

@@ -0,0 +1,9 @@
+.from {
+    float: left;
+    width: calc(50% - 20px);
+    padding: 0 10px;
+}
+
+.from > div > input {
+    max-width: 100%;
+}

package/dist/components/FromToFilter/To/styles.module.css

@@ -0,0 +1,9 @@
+.to {
+    float: left;
+    width: calc(50% - 20px);
+    padding: 0 10px;
+}
+
+.to >  div > input {
+    max-width: 100%;
+}

package/dist/components/FromToFilter/styles.module.css

@@ -0,0 +1,34 @@
+.fsFacetTitle {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    letter-spacing: .2px;
+    background-color: #fff0;
+    border: none;
+    width: 100%;
+    text-align: left;
+    padding: 8px 0;
+    position: relative;
+    border-radius: 8px;
+    transition: background-color .2s ease-out;
+    cursor: pointer;
+    color: #000;
+    font-size: 14px;
+    font-weight: 600;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+.fsFacetContainer {
+    display: flex;
+    flex-direction: column;
+}
+.fsFacetOptions {
+    width: 100%;
+    margin: 0 -5px;
+}
+.fsFacetOptions:after {
+  content: "";
+  display: table;
+  clear: both;
+}

package/dist/components/InStoreFiltersMenu/styles.module.css

@@ -0,0 +1,10 @@
+.filtersContainer {
+        padding: 8px 16px;
+        font-size: 12px;
+}
+.clearAll {
+        color: var(--windows-blue);
+    text-decoration: none;
+    cursor: pointer;
+    font-size: 1.2rem;
+}

package/dist/components/Input/styles.module.css

@@ -0,0 +1,3 @@
+.inputContainer {
+
+}

package/dist/components/LastReceivedDateFilter/styles.module.css

@@ -0,0 +1,41 @@
+.fsOptions {
+    padding: 0 0 8px 8px;
+}
+.showMore {
+    color: #737373;
+}
+
+.showMore:hover {
+    cursor: pointer;
+}
+
+.arrow {
+    border: solid #636363;
+    border-width: 0 1.5px 1.5px 0;
+    display: inline-block;
+    padding: 3px;
+}
+
+.down {
+    transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    margin-bottom: 2px;
+}
+.fsFacetContainer {
+    display: flex;
+    flex-direction: row;
+    padding: 0pc 2px;
+    width: calc(100% - 4px);
+}
+.fsFacetOptions {
+    width: calc(50% - 12px);
+    padding: 0px 6px;
+}
+.fsFacetOptions:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.fsFacetOptions>.react-datepicker-wrapper {
+    width: calc(100% - 6px)!important;
+}

package/dist/components/RadioFilter/Radio/styles.module.css

@@ -0,0 +1,145 @@
+.fsCheckbox {
+    display: flex;
+    position: relative;
+    padding: 0 5px 0 0;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    font-family: Arial, serif;
+    animation: growDown 300ms ease forwards;
+    align-items: center;
+}
+
+.fsCheckbox input {
+    position: fixed;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+}
+
+.checkmark {
+    min-height: 16px;
+    min-width: 16px;
+    background-color: #eee;
+    margin-right: 10px;
+}
+
+.fsCheckbox:hover input ~ .checkmark {
+    background-color: #d00202cf;
+}
+
+.fsCheckbox input:checked ~ .checkmark {
+    background-color: white;
+}
+
+.fsCheckbox input:checked ~ .checkmark:after {
+    display: block;
+}
+
+.fsCheckboxx .checkmark:after {
+    left: 5px;
+    width: 4px;
+    height: 9px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+.fsSelectedCheckboxTrue{}
+.fsSelectedCheckboxFalse{}
+
+    @keyframes growDown {
+        0% {
+            transform: scaleY(0)
+        }
+        80% {
+            transform: scaleY(1.1)
+        }
+        100% {
+            transform: scaleY(1)
+        }
+    }
+
+    .checkbox {
+        display: flex;
+        position: relative;
+        padding: 0 5px 0 0;
+        margin-top: 5px;
+        margin-bottom: 5px;
+        cursor: pointer;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        font-family: Arial, serif;
+        animation: growDown 300ms ease forwards;
+        align-items: center;
+    }
+
+    .checkbox .checkboxLabel {
+        align-self: start;
+        text-transform: capitalize;
+        display: flex;
+        line-height: 20px;
+        align-items: center;
+        margin-top: 2px;
+        width: -webkit-fill-available;
+        justify-content: space-between;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    .checkbox input {
+        position: fixed;
+        opacity: 0;
+        cursor: pointer;
+        height: 0;
+        width: 0;
+    }
+
+    .checkmark {
+        min-height: 16px;
+        min-width: 16px;
+        background-color: #eee;
+        margin-right: 10px;
+        border-radius: 18px;
+    }
+
+    .checkbox:hover input ~ .checkmark {
+        background-color: #ccc;
+    }
+
+    .checkbox input:checked ~ .checkmark {
+        background-color: #000000;
+    }
+
+    .checkmark:after {
+        content: "";
+        position: absolute;
+        display: none;
+    }
+
+    .checkbox input:checked ~ .checkmark:after {
+        display: block;
+    }
+
+    .checkbox .checkmark:after {
+        left: 5px;
+        width: 3px;
+        height: 8px;
+        top: 5px;
+        border: solid white;
+        border-width: 0 2px 2px 0;
+        -webkit-transform: rotate(45deg);
+        -ms-transform: rotate(45deg);
+        transform: rotate(45deg);
+    }
+:global(.modal-mobile-filters .fs-serp-filter-count, .modal-mobile-filters .fsSerpCheckmark) {
+        display: none;
+    }

package/dist/components/RadioFilter/styles.module.css

@@ -0,0 +1,23 @@
+.fsOptions {
+    padding: 0 0 8px 8px;
+}
+.showMore {
+    color: #737373;
+}
+
+.showMore:hover {
+    cursor: pointer;
+}
+
+.arrow {
+    border: solid #636363;
+    border-width: 0 1.5px 1.5px 0;
+    display: inline-block;
+    padding: 3px;
+}
+
+.down {
+    transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    margin-bottom: 2px;
+}

package/dist/components/ReactDatePicker/styles.module.css

@@ -0,0 +1,3 @@
+.fullWidthInput{
+    width: 100%;
+}

package/dist/components/SingleFilter/styles.module.css

@@ -0,0 +1,23 @@
+.fsOptions {
+    padding: 0 5px 8px 8px;
+}
+.showMore {
+    color: #737373;
+}
+
+.showMore:hover {
+    cursor: pointer;
+}
+
+.arrow {
+    border: solid #636363;
+    border-width: 0 1.5px 1.5px 0;
+    display: inline-block;
+    padding: 3px;
+}
+
+.down {
+    transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    margin-bottom: 2px;
+}

package/dist/components/SliderFilter/styles.module.css

@@ -0,0 +1,16 @@
+.select {
+    width: 250px !important;
+    font-size: 18px;
+    box-sizing: border-box !important;
+}
+.rcSlider{
+    width: calc(100% - 10px)!important;
+    min-height: 30px!important;
+    padding: 5px 4px !important;
+}
+.rcSlider>.rc-slider-track{
+    background-color: #282828;
+}
+.rcSlider>.rc-slider-handle{
+    border-color: #575757;
+}

package/dist/components/Tooltip/styles.module.css

@@ -0,0 +1,34 @@
+.miniTooltip {
+    opacity: 0;
+    transition: opacity ease-in-out 110ms;
+    padding: 4px 10px;
+    font-size: 12px;
+    font-weight: 400;
+    z-index: 10;
+    position: absolute;
+    text-align: center;
+    background-color: #545454;
+    color: white;
+    display: flex;
+    align-items: center;
+    height: fit-content;
+    border-radius: 8px;
+    width: max-content;
+    justify-content: center;
+    max-width: 86px;
+    pointer-events: none;
+    top: 100%;
+    left: 30%;
+}
+
+.tooltipIcon:hover ~ .miniTooltip {
+    opacity: 1;
+}
+
+.tooltipIcon {
+    font-size: 16px !important;
+}
+
+.tooltipIcon:hover {
+    fill: #909090;
+}

package/dist/components/productGrid/styles.module.css

@@ -0,0 +1,23 @@
+.grid {
+    grid-template-columns: repeat(var(--products-per-row), calc(100%/var(--products-per-row) - 80px));
+    display: grid;
+    container-type: inline-size;
+    grid-column-gap: 20px;
+    grid-row-gap: 20px;
+    justify-content: center;
+    padding: 10px 10px 12px 0;
+    grid-auto-rows: auto;
+    align-items: stretch;
+    overflow-anchor: none;
+    overflow: hidden;
+    width: 100%;
+    position: relative;
+    cursor: crosshair;
+    margin: auto;
+}
+
+@container (max-width: 870px) {
+    .grid {
+        grid-template-columns: repeat(var(--products-per-row), calc(100%/var(--products-per-row) - 20px));
+    }
+}

package/dist/dashboard/dashboard-client/src/pages/LandingPages/editor/components/ActionsBar/ActionItem.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ActionItem as ActionItemType } from "./utils";
+export interface Props {
+    item: ActionItemType;
+    onClick: (item: ActionItemType, position?: number) => void;
+    position?: number;
+    tooltipClassName?: string;
+}
+declare const ActionItem: React.FC<Props>;
+export default ActionItem;

package/dist/dashboard/dashboard-client/src/pages/LandingPages/editor/components/ActionsBar/ActionItem.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classes from "./styles.module.css";
+import clsx from "clsx";
+const ActionItem = ({ item, onClick, position, tooltipClassName }) => {
+    var _a, _b, _c;
+    const onActionClicked = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick(item);
+    };
+    const onInputCommitted = (newPosition) => {
+        onClick(item, newPosition);
+    };
+    return (_jsxs("div", Object.assign({ className: classes.actionItemContainer, onClick: onActionClicked }, { children: [_jsx("div", Object.assign({ className: clsx(classes.miniTooltip, tooltipClassName) }, { children: item.hooverTooltip })), (_b = (_a = item === null || item === void 0 ? void 0 : item.getComponent) === null || _a === void 0 ? void 0 : _a.call(item, onInputCommitted, position || 0)) !== null && _b !== void 0 ? _b : (_c = item === null || item === void 0 ? void 0 : item.getIcon) === null || _c === void 0 ? void 0 : _c.call(item)] })));
+};
+export default ActionItem;
+//# sourceMappingURL=ActionItem.js.map

package/dist/dashboard/dashboard-client/src/pages/LandingPages/editor/components/ActionsBar/ActionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionItem.js","sourceRoot":"","sources":["../../../../../../../../../../../dashboard/dashboard-client/src/pages/LandingPages/editor/components/ActionsBar/ActionItem.tsx"],"names":[],"mappings":";AACA,OAAO,OAAO,MAAM,qBAAqB,CAAC;AAE1C,OAAO,IAAI,MAAM,MAAM,CAAC;AASxB,MAAM,UAAU,GAAoB,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAC,EAAE,EAAE;;IAEhF,MAAM,eAAe,GAAG,CAAC,KAAU,EAAE,EAAE;QACnC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,OAAO,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,CAAA;IAED,MAAM,gBAAgB,GAAG,CAAC,WAAmB,EAAE,EAAE;QAC7C,OAAO,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IAC/B,CAAC,CAAA;IAED,OAAM,CACF,6BAAK,SAAS,EAAE,OAAO,CAAC,mBAAmB,EAAE,OAAO,EAAE,eAAe,iBACjE,4BAAK,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,gBAAgB,CAAC,gBAAG,IAAI,CAAC,aAAa,IAAO,EACtF,MAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,qDAAG,gBAAgB,EAAE,QAAQ,IAAI,CAAC,CAAC,mCAAI,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,oDAAI,KACzE,CACT,CAAA;AACL,CAAC,CAAA;AACD,eAAe,UAAU,CAAC","sourcesContent":["import React from 'react';\r\nimport classes from \"./styles.module.css\";\r\nimport {ActionItem as ActionItemType} from \"./utils\";\r\nimport clsx from \"clsx\";\r\n\r\nexport interface Props {\r\n    item: ActionItemType;\r\n    onClick: (item: ActionItemType, position?: number) => void;\r\n    position?: number;\r\n    tooltipClassName?: string;\r\n}\r\n\r\nconst ActionItem: React.FC<Props> = ({item, onClick, position, tooltipClassName}) => {\r\n\r\n    const onActionClicked = (event: any) => {\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n        onClick(item);\r\n    }\r\n\r\n    const onInputCommitted = (newPosition: number) => {\r\n        onClick(item, newPosition);\r\n    }\r\n\r\n    return(\r\n        <div className={classes.actionItemContainer} onClick={onActionClicked}>\r\n            <div className={clsx(classes.miniTooltip, tooltipClassName)}>{item.hooverTooltip}</div>\r\n            {item?.getComponent?.(onInputCommitted, position || 0) ?? item?.getIcon?.() }\r\n        </div>\r\n    )\r\n}\r\nexport default ActionItem;\r\n"]}

package/dist/dashboard/dashboard-client/src/pages/LandingPages/editor/components/ActionsBar/ActionsBar.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ActionItem as ActionItemType } from "./utils";
+import { EditorProduct } from "../../../../../../../../frontends/dashboard-utilities/src/@types/editorProduct";
+export interface Props {
+    onClick: (item: ActionItemType, newPosition?: number) => void;
+    className: string;
+    product?: EditorProduct;
+    actionBarItems?: ActionItemType[];
+    position?: number;
+    actionBarContentClassName?: string;
+    tooltipClassName?: string;
+}
+declare const ActionsBar: React.FC<Props>;
+export default ActionsBar;

package/dist/dashboard/dashboard-client/src/pages/LandingPages/editor/components/ActionsBar/ActionsBar.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classes from "./styles.module.css";
+import { ActionsBarItems } from "./utils";
+import ActionItem from "./ActionItem";
+import clsx from "clsx";
+import { useVisualEditorContext } from "../../context/visualEditorContext";
+const ActionsBar = ({ onClick, className, product, actionBarItems, position, actionBarContentClassName, tooltipClassName }) => {
+    const { state } = useVisualEditorContext();
+    return (_jsx("div", Object.assign({ className: clsx(classes.actionBarContainer, className, 'actions-bar-container'), style: state.loading.products ? { pointerEvents: 'none' } : {} }, { children: _jsx("div", Object.assign({ className: clsx(classes.actionBarContent, actionBarContentClassName) }, { children: (actionBarItems || ActionsBarItems)
+                .filter(item => { var _a; return item.isVisible && ((_a = item === null || item === void 0 ? void 0 : item.isVisible) === null || _a === void 0 ? void 0 : _a.call(item, product)); })
+                .map(item => _jsx(ActionItem, { item: item, onClick: onClick, position: position, tooltipClassName: tooltipClassName }, item.name)) })) }), `actionBar_${product === null || product === void 0 ? void 0 : product.id}_${position}`));
+};
+export default ActionsBar;
+//# sourceMappingURL=ActionsBar.js.map