@shopgate/engage 7.32.0-beta.2 → 7.32.0-beta.20

package/filter/components/PriceSlider/components/Label/index.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.string.replace.js";
-import React, { memo, useState, useEffect, useRef } from 'react';
+import React, { memo, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import appConfig from '@shopgate/pwa-common/helpers/config';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
@@ -10,39 +10,40 @@ const {
   currency
 } = appConfig;
 const useStyles = makeStyles()(theme => ({
-  price: {
-    color: theme.palette.secondary.main,
-    display: 'inline-block',
-    fontWeight: theme.typography.fontWeightMedium,
-    textAlign: 'center'
-  },
-  editableContainer: {
-    position: 'relative'
+  priceRange: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    columnGap: theme.spacing(0.5),
+    rowGap: theme.spacing(1)
   },
   editableField: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
+    color: theme.palette.text.primary,
+    fontWeight: theme.typography.fontWeightMedium,
     textAlign: 'center',
-    background: 'transparent',
-    zIndex: 2,
-    textIndent: -800,
+    background: theme.palette.background.surface,
     outline: 'none',
-    padding: 0,
-    margin: 0,
-    border: '1px solid transparent',
+    padding: theme.spacing(0.5, 0),
+    margin: theme.spacing(0, 0.5),
+    border: `1px solid ${theme.components.input.border}`,
     borderRadius: 3,
+    appearance: 'textfield',
+    WebkitAppearance: 'textfield',
+    '&::-webkit-outer-spin-button': {
+      WebkitAppearance: 'none',
+      margin: 0
+    },
+    '&::-webkit-inner-spin-button': {
+      WebkitAppearance: 'none',
+      margin: 0
+    },
     ':focus': {
-      background: theme.components.input.background,
-      textIndent: 0,
       borderColor: theme.components.border.medium
     },
     [responsiveMediaQuery('>=xs', {
       webOnly: true
     })]: {
       borderColor: theme.palette.primary.main,
-      padding: '4px 0',
-      top: -4,
       ':focus': {
         borderColor: theme.palette.primary.main
       }
@@ -58,9 +59,24 @@ const useStyles = makeStyles()(theme => ({
     clip: 'rect(0, 0, 0, 0)',
     whiteSpace: 'nowrap',
     border: 0
+  },
+  priceField: {
+    display: 'inline-flex',
+    alignItems: 'center'
+  },
+  currencySymbol: {
+    color: theme.palette.text.secondary,
+    marginRight: theme.spacing(0.25)
   }
 }));
 
+/**
+ * Builds the width a price field needs to fit its current value.
+ * @param {number|string} value The value the field has to fit.
+ * @returns {string}
+ */
+const fieldWidth = value => `${Math.max(String(value).length, 2) + 1}ch`;
+
 /**
  * The filter price range slider label component.
  * @param {Object} props The component props.
@@ -71,17 +87,12 @@ function Label(props) {
     classes
   } = useStyles();
   const {
-    priceLength,
     priceMax,
     priceMin,
     onChange
   } = props;
   const [minValue, setMinValue] = useState(priceMin);
   const [maxValue, setMaxValue] = useState(priceMax);
-  const [minOffset, setMinOffset] = useState(0);
-  const [maxOffset, setMMaxOffset] = useState(0);
-  const minRef = useRef(null);
-  const maxRef = useRef(null);
 
   // Set new values, when prices change from outside.
   useEffect(() => {
@@ -89,12 +100,6 @@ function Label(props) {
     setMaxValue(priceMax);
   }, [priceMin, priceMax]);
 
-  // Store the leftOffset when the reference changes.
-  useEffect(() => {
-    setMinOffset(minRef.current.offsetLeft);
-    setMMaxOffset(maxRef.current.offsetLeft);
-  }, [minRef, maxRef]);
-
   /**
    * Selects the field content on click.
    * @param {SyntheticEvent} event The click event object.
@@ -102,7 +107,7 @@ function Label(props) {
   function handleFieldClick({
     target
   }) {
-    target.setSelectionRange(0, target.value.length);
+    target.select();
   }
 
   /**
@@ -135,7 +140,6 @@ function Label(props) {
     currency
   }).format('0').replace('0.00', '');
   return /*#__PURE__*/_jsxs("div", {
-    className: classes.editableContainer,
     children: [/*#__PURE__*/_jsx("span", {
       className: classes.srOnly,
       children: i18n.text('price.range', {
@@ -145,72 +149,60 @@ function Label(props) {
     }), /*#__PURE__*/_jsxs(I18n.Text, {
       string: "price.range",
       "aria-hidden": true,
+      className: classes.priceRange,
       children: [/*#__PURE__*/_jsx(I18n.Placeholder, {
         forKey: "fromPrice",
-        children: /*#__PURE__*/_jsx("span", {
-          className: classes.price,
-          style: {
-            minWidth: priceLength
-          },
-          ref: minRef,
-          children: /*#__PURE__*/_jsx(I18n.Price, {
-            price: priceMin,
-            currency: currency,
-            fractions: false
-          })
+        children: /*#__PURE__*/_jsxs("span", {
+          className: classes.priceField,
+          children: [/*#__PURE__*/_jsx("span", {
+            "aria-hidden": true,
+            className: classes.currencySymbol,
+            id: "price-slider-currency-label-min",
+            children: currencySymbol
+          }), /*#__PURE__*/_jsx("input", {
+            type: "number",
+            inputMode: "numeric",
+            pattern: "[0-9]*",
+            id: "priceMin",
+            name: "priceMin",
+            value: minValue,
+            onChange: handleChangeMin,
+            onClick: handleFieldClick,
+            style: {
+              width: fieldWidth(minValue)
+            },
+            className: classes.editableField,
+            "aria-label": i18n.text('price.range_from'),
+            "aria-describedby": "price-slider-currency-label-min"
+          })]
         })
       }), /*#__PURE__*/_jsx(I18n.Placeholder, {
         forKey: "toPrice",
-        children: /*#__PURE__*/_jsx("span", {
-          className: classes.price,
-          style: {
-            minWidth: priceLength
-          },
-          ref: maxRef,
-          children: /*#__PURE__*/_jsx(I18n.Price, {
-            price: priceMax,
-            currency: currency,
-            fractions: false
-          })
+        children: /*#__PURE__*/_jsxs("span", {
+          className: classes.priceField,
+          children: [/*#__PURE__*/_jsx("span", {
+            "aria-hidden": true,
+            className: classes.currencySymbol,
+            id: "price-slider-currency-label-max",
+            children: currencySymbol
+          }), /*#__PURE__*/_jsx("input", {
+            type: "number",
+            inputMode: "numeric",
+            pattern: "[0-9]*",
+            id: "priceMax",
+            name: "priceMax",
+            value: maxValue,
+            onChange: handleChangeMax,
+            onClick: handleFieldClick,
+            style: {
+              width: fieldWidth(maxValue)
+            },
+            className: classes.editableField,
+            "aria-label": i18n.text('price.range_to'),
+            "aria-describedby": "price-slider-currency-label-max"
+          })]
         })
       })]
-    }), /*#__PURE__*/_jsx("span", {
-      "aria-hidden": true,
-      hidden: true,
-      id: "price-slider-currency-label",
-      children: currencySymbol
-    }), /*#__PURE__*/_jsx("input", {
-      type: "number",
-      inputMode: "numeric",
-      pattern: "[0-9]*",
-      id: "priceMin",
-      name: "priceMin",
-      value: minValue,
-      onChange: handleChangeMin,
-      onClick: handleFieldClick,
-      style: {
-        width: priceLength,
-        left: minOffset
-      },
-      className: classes.editableField,
-      "aria-label": i18n.text('price.range_from'),
-      "aria-describedby": "price-slider-currency-label"
-    }), /*#__PURE__*/_jsx("input", {
-      type: "number",
-      inputMode: "numeric",
-      pattern: "[0-9]*",
-      id: "priceMax",
-      name: "priceMax",
-      value: maxValue,
-      onChange: handleChangeMax,
-      onClick: handleFieldClick,
-      style: {
-        width: priceLength,
-        left: maxOffset
-      },
-      className: classes.editableField,
-      "aria-label": i18n.text('price.range_to'),
-      "aria-describedby": "price-slider-currency-label"
     })]
   });
 }

package/filter/components/PriceSlider/index.js

@@ -2,13 +2,14 @@ import React, { useState, useEffect, useCallback, useRef, memo } from 'react';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
 import { makeStyles } from '@shopgate/engage/styles';
-import { RangeSlider } from '@shopgate/engage/components';
+import { Accordion, RangeSlider } from '@shopgate/engage/components';
+import { i18n } from '@shopgate/engage/core/helpers';
 import { FilterItem } from '@shopgate/engage/filter';
 import Label from "./components/Label";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
-  wrapper: {
-    padding: theme.spacing(1.5, 2)
+  accordionContent: {
+    padding: theme.spacing(0, 2, 1)
   },
   rangeSliderContainer: {
     paddingTop: theme.spacing(2),
@@ -27,13 +28,18 @@ const useStyles = makeStyles()(theme => ({
     marginRight: theme.spacing(1)
   },
   rangeSliderHandleInner: {
-    background: theme.palette.common.white,
-    boxShadow: '0 0 8px rgba(0, 0, 0, .16)',
+    background: theme.palette.grey.light,
+    boxShadow: '0 0 8px rgba(0, 0, 0, .32)',
+    ...theme.applyStyles('dark', {
+      background: '#F2F2F2'
+    }),
     borderRadius: '50%',
     width: theme.spacing(3),
     height: theme.spacing(3)
   },
-  rangeSliderHandleOuter: {}
+  rangeSliderHandleOuter: {
+    padding: theme.spacing(1)
+  }
 }));
 
 /**
@@ -74,31 +80,38 @@ const PriceSlider = ({
   }, [id, onChange]);
   const priceMin = Math.floor(value[0] / 100);
   const priceMax = Math.ceil(value[1] / 100);
-  const priceLength = `${(max / 100).toString().length + 2}ch`;
+  const renderLabel = useCallback(() => /*#__PURE__*/_jsx(Label, {
+    priceMax: priceMax,
+    priceMin: priceMin,
+    onChange: handleChange
+  }), [handleChange, priceMax, priceMin]);
   return /*#__PURE__*/_jsx(FilterItem, {
-    children: /*#__PURE__*/_jsxs("div", {
-      className: classes.wrapper,
+    children: /*#__PURE__*/_jsx("div", {
       "data-test-id": "priceRangeSlider",
-      children: [/*#__PURE__*/_jsx(Label, {
-        priceLength: priceLength,
-        priceMax: priceMax,
-        priceMin: priceMin,
-        onChange: handleChange
-      }), /*#__PURE__*/_jsx(RangeSlider, {
-        classNames: {
-          container: classes.rangeSliderContainer,
-          outerRange: classes.rangeSliderOuterRange,
-          range: classes.rangeSliderRange,
-          handleInner: classes.rangeSliderHandleInner,
-          handleOuter: classes.rangeSliderHandleOuter
-        },
-        easing: useLinearEasing ? 'linear' : 'exponential',
-        factor: 3,
-        max: max,
-        min: min,
-        onChange: handleChange,
-        value: value
-      })]
+      children: /*#__PURE__*/_jsx(Accordion, {
+        openWithChevron: true,
+        startOpened: true,
+        renderLabel: renderLabel,
+        contentClassName: classes.accordionContent,
+        handleLabel: i18n.text('filter.filter_by', {
+          label: i18n.text('filter.label.price')
+        }),
+        children: /*#__PURE__*/_jsx(RangeSlider, {
+          classNames: {
+            container: classes.rangeSliderContainer,
+            outerRange: classes.rangeSliderOuterRange,
+            range: classes.rangeSliderRange,
+            handleInner: classes.rangeSliderHandleInner,
+            handleOuter: classes.rangeSliderHandleOuter
+          },
+          easing: useLinearEasing ? 'linear' : 'exponential',
+          factor: 3,
+          max: max,
+          min: min,
+          onChange: handleChange,
+          value: value
+        })
+      })
     })
   });
 };

package/filter/helpers/buildFilterParamsForFetchFiltersRequest.d.ts

@@ -0,0 +1,8 @@
+export default buildFilterParamsForFetchFiltersRequest;
+/**
+ * Creates the filter params to be used with a fetchFilters request.
+ * @param {Object} filters All configured filters
+ * @return {Object}
+ */
+declare function buildFilterParamsForFetchFiltersRequest(filters?: Object): Object;
+//# sourceMappingURL=buildFilterParamsForFetchFiltersRequest.d.ts.map

package/filter/helpers/buildFilterParamsForFetchFiltersRequest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildFilterParamsForFetchFiltersRequest.d.ts","sourceRoot":"","sources":["../../../filter/helpers/buildFilterParamsForFetchFiltersRequest.js"],"names":[],"mappings":";AAEA;;;;GAIG;AACH,mEAHW,MAAM,GACL,MAAM,CAuCjB"}

package/filter/helpers/buildInitialFilters.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @param {Object} filters The available filters.
+ * @param {Object} activeFilters The selected filters.
+ * @returns {Object}
+ */
+export default function buildInitialFilters(filters: Object, activeFilters: Object): Object;
+//# sourceMappingURL=buildInitialFilters.d.ts.map

package/filter/helpers/buildInitialFilters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildInitialFilters.d.ts","sourceRoot":"","sources":["../../../filter/helpers/buildInitialFilters.js"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,qDAJW,MAAM,iBACN,MAAM,GACJ,MAAM,CAwBlB"}

package/filter/helpers/buildUpdatedFilters.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @param {Object} initialFilters The filters before they where modified.
+ * @param {Object} updatedFilters The filters after they where modified.
+ * @return {Object}
+ */
+export default function buildUpdatedFilters(initialFilters: Object, updatedFilters: Object): Object;
+//# sourceMappingURL=buildUpdatedFilters.d.ts.map

package/filter/helpers/buildUpdatedFilters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildUpdatedFilters.d.ts","sourceRoot":"","sources":["../../../filter/helpers/buildUpdatedFilters.js"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,4DAJW,MAAM,kBACN,MAAM,GACL,MAAM,CAgCjB"}

package/filter/helpers/index.d.ts

@@ -0,0 +1,5 @@
+export { default as buildInitialFilters } from "./buildInitialFilters";
+export { default as buildUpdatedFilters } from "./buildUpdatedFilters";
+export { default as buildFilterParamsForFetchFiltersRequest } from "./buildFilterParamsForFetchFiltersRequest";
+export { translateFilterLabel } from "./translateFilterLabel";
+//# sourceMappingURL=index.d.ts.map

package/filter/helpers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../filter/helpers/index.js"],"names":[],"mappings":""}

package/filter/helpers/translateFilterLabel.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Translate filter label
+ * @param {string} id filter id.
+ * @param {string} label filter label.
+ * @returns {string}
+ */
+export function translateFilterLabel(id: string, label: string): string;
+//# sourceMappingURL=translateFilterLabel.d.ts.map

package/filter/helpers/translateFilterLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"translateFilterLabel.d.ts","sourceRoot":"","sources":["../../../filter/helpers/translateFilterLabel.js"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,yCAJW,MAAM,SACN,MAAM,GACJ,MAAM,CAIlB"}

package/filter/providers/FilterPageProvider.context.d.ts

@@ -0,0 +1,157 @@
+export default context;
+export type APIFilterValue = {
+    /**
+     * Filter value id
+     */
+    id: string;
+    /**
+     * Filter value label
+     */
+    label: string;
+    /**
+     * Number of hits for the filter value
+     */
+    hits: number;
+};
+export type APIFilter = {
+    /**
+     * Filter id
+     */
+    id: string;
+    /**
+     * Filter label
+     */
+    label: string;
+    /**
+     * Filter type
+     */
+    type: "range" | "multiselect" | "single_select";
+    /**
+     * Filter source
+     */
+    source?: string | undefined;
+    /**
+     * Minimum value for a range filter
+     */
+    minimum?: number | undefined;
+    /**
+     * Maximum value for a range filter
+     */
+    maximum?: number | undefined;
+    values: APIFilterValue[];
+};
+export type RouteFilterValue = {
+    /**
+     * Filter value id
+     */
+    id: string;
+    /**
+     * Filter value label
+     */
+    label: string;
+};
+export type RouteFilter = {
+    /**
+     * Filter id
+     */
+    id: string;
+    /**
+     * Filter label
+     */
+    label: string;
+    /**
+     * Filter source
+     */
+    source: string;
+    /**
+     * Filter type
+     */
+    type: "range" | "multiselect" | "single_select";
+    /**
+     * Selected values for the filter
+     */
+    values: RouteFilterValue[];
+};
+/**
+ * Object with the active filters for a route with filtered product list
+ */
+export type RouteFilters = {
+    [x: string]: RouteFilter;
+};
+export type GetSelectedFilterValuesFn = (filterId: string) => any;
+export type UpdateSelectedFilterValuesFn = (filterId: string, selectedValues: string[]) => void;
+export type FilterPageContext = {
+    /**
+     * Whether the filter selection has changed since the filters page
+     * was opened
+     */
+    hasChanged: boolean;
+    /**
+     * Whether a reset of the active filters is possible
+     */
+    resetPossible: boolean;
+    /**
+     * List of available filters from the API
+     */
+    apiFilters: APIFilter[];
+    /**
+     * Object that represents the current state of all filters
+     */
+    filters: RouteFilters;
+    /**
+     * Resets all filters which have been changed by the
+     * user
+     */
+    resetAllFilters: () => void;
+    /**
+     * Resets all filters which have been changed by the
+     * user since the filters page was opened
+     */
+    resetChangedFilters: () => void;
+    /**
+     * Applies the current filter selection to the parent route
+     * with a product list to be filtered
+     */
+    applyFilters: () => void;
+    /**
+     * Retrieves a list of currently
+     * selected values for a filter
+     */
+    getSelectedFilterValues: GetSelectedFilterValuesFn;
+    /**
+     * Updates the selection for a
+     * filter
+     */
+    updateSelectedFilterValues: UpdateSelectedFilterValuesFn;
+};
+/**
+ * @callback GetSelectedFilterValuesFn
+ * @param {string} filterId The id of the filter
+ */
+/**
+ * @callback UpdateSelectedFilterValuesFn
+ * @param {string} filterId The id of the filter to be updated
+ * @param {string[]} selectedValues The updated selected values
+ * @returns {void}
+ */
+/**
+ * @typedef {Object} FilterPageContext
+ * @property {boolean} hasChanged Whether the filter selection has changed since the filters page
+ * was opened
+ * @property {boolean} resetPossible Whether a reset of the active filters is possible
+ * @property {APIFilter[]} apiFilters List of available filters from the API
+ * @property {RouteFilters} filters Object that represents the current state of all filters
+ * @property {function():void} resetAllFilters Resets all filters which have been changed by the
+ * user
+ * @property {function():void} resetChangedFilters Resets all filters which have been changed by the
+ * user since the filters page was opened
+ * @property {function():void} applyFilters Applies the current filter selection to the parent route
+ * with a product list to be filtered
+ * @property {GetSelectedFilterValuesFn} getSelectedFilterValues Retrieves a list of currently
+ * selected values for a filter
+ * @property {UpdateSelectedFilterValuesFn} updateSelectedFilterValues Updates the selection for a
+ * filter
+ */
+/** @type {import('react').Context<FilterPageContext>} */
+declare const context: import("react").Context<FilterPageContext>;
+//# sourceMappingURL=FilterPageProvider.context.d.ts.map

package/filter/providers/FilterPageProvider.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPageProvider.context.d.ts","sourceRoot":"","sources":["../../../filter/providers/FilterPageProvider.context.js"],"names":[],"mappings":";;;;;QAKc,MAAM;;;;WACN,MAAM;;;;UACN,MAAM;;;;;;QAMN,MAAM;;;;WACN,MAAM;;;;UACN,OAAO,GAAC,aAAa,GAAC,eAAe;;;;;;;;;;;;;YAIrC,cAAc,EAAE;;;;;;QAMhB,MAAM;;;;WACN,MAAM;;;;;;QAKN,MAAM;;;;WACN,MAAM;;;;YACN,MAAM;;;;UACN,OAAO,GAAC,aAAa,GAAC,eAAe;;;;YACrC,gBAAgB,EAAE;;;;;;;;mDAWrB,MAAM;sDAKN,MAAM,kBACN,MAAM,EAAE,KACN,IAAI;;;;;;gBAIH,OAAO;;;;mBAEP,OAAO;;;;gBACP,SAAS,EAAE;;;;aACX,YAAY;;;;;qBACZ,MAAW,IAAI;;;;;yBAEf,MAAW,IAAI;;;;;kBAEf,MAAW,IAAI;;;;;6BAEf,yBAAyB;;;;;gCAEzB,4BAA4B;;AA1B1C;;;GAGG;AAEH;;;;;GAKG;AACH;;;;;;;;;;;;;;;;;GAiBG;AAEH,yDAAyD;AACzD,uBADW,OAAO,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAWlD"}

package/filter/providers/FilterPageProvider.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import type { APIFilter, RouteFilters } from './FilterPageProvider.context';
+interface FilterPageProviderProps {
+    /** Array of available filters, injected from Redux. */
+    filters?: APIFilter[] | null;
+    /** Object with the active filters for a filtered product list. */
+    activeFilters?: RouteFilters | null;
+    /** Id of the route with the product list that's supposed to be filtered. */
+    parentRouteId?: string | null;
+    /** Callback invoked when users pressed the apply button. */
+    onApply?: (filters: RouteFilters | null) => void;
+    /** Provider children. */
+    children?: ReactNode;
+}
+declare const _default: import("react-redux").ConnectedComponent<({ filters: filtersProp, activeFilters: activeFiltersProp, parentRouteId, onApply, children, }: FilterPageProviderProps) => import("react").JSX.Element, {
+    children?: ReactNode;
+    activeFilters?: (RouteFilters | null) | undefined;
+    parentRouteId?: string | null | undefined;
+    onApply?: ((filters: RouteFilters | null) => void) | undefined;
+    context?: import("react-redux/es/components/Context").ReactReduxContextInstance | undefined;
+    store?: import("redux").Store | undefined;
+}>;
+export default _default;
+//# sourceMappingURL=FilterPageProvider.d.ts.map

package/filter/providers/FilterPageProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPageProvider.d.ts","sourceRoot":"","sources":["../../../filter/providers/FilterPageProvider.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAkB,SAAS,EAAE,MAAM,OAAO,CAAC;AASvD,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAyC5E,UAAU,uBAAuB;IAC/B,uDAAuD;IACvD,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC7B,kEAAkE;IAClE,aAAa,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC,4EAA4E;IAC5E,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,4DAA4D;IAC5D,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;IACjD,yBAAyB;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;iKAoCE,uBAAuB;;qBA3CR,YAAY,GAAG,IAAI;oBAEnB,MAAM,GAAG,IAAI;eAEnB,CAAC,OAAO,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI;;;;AAiQlD,wBAKsB"}