@coorpacademy/components 11.40.14 → 11.40.16

package/es/molecule/multi-filter-panel/index.d.ts

@@ -37,6 +37,7 @@ declare const MultiFilterPanel: {
                     count: import("prop-types").Requireable<number>;
                     onClick: import("prop-types").Requireable<(...args: any[]) => any>;
                 }> | null | undefined)[]>;
+                emptySearchResult: import("prop-types").Requireable<string>;
                 searchOptions: import("prop-types").Requireable<import("prop-types").InferProps<{
                     value: import("prop-types").Requireable<string>;
                     placeholder: import("prop-types").Validator<string>;
@@ -63,12 +64,53 @@ declare const MultiFilterPanel: {
                     onChange: import("prop-types").Validator<(...args: any[]) => any>;
                     theme: import("prop-types").Validator<string>;
                     ariaLabel: import("prop-types").Validator<string>;
+                    id: import("prop-types").Requireable<string>;
                 }> | null | undefined)[]>;
             }>>;
+        }> | import("prop-types").InferProps<{
+            type: import("prop-types").Requireable<string>;
+            options: import("prop-types").Requireable<import("prop-types").InferProps<{
+                title: import("prop-types").Validator<string>;
+                titleAriaLabel: import("prop-types").Requireable<string>;
+                onClear: import("prop-types").Validator<(...args: any[]) => any>;
+                options: import("prop-types").Requireable<import("prop-types").InferProps<{
+                    label: import("prop-types").Validator<string>;
+                    min: import("prop-types").Validator<number>;
+                    max: import("prop-types").Validator<number>;
+                    step: import("prop-types").Requireable<number>;
+                    value: import("prop-types").Requireable<(number | null | undefined)[]>;
+                    minLabel: import("prop-types").Requireable<string>;
+                    maxLabel: import("prop-types").Requireable<string>;
+                    onChange: import("prop-types").Validator<(...args: any[]) => any>;
+                    theme: import("prop-types").Requireable<string>;
+                    selected: import("prop-types").Requireable<boolean>;
+                }>>;
+            }>>;
         }> | null | undefined> | null | undefined)[]>;
     };
     contextTypes: {
         translate: import("prop-types").Requireable<(...args: any[]) => any>;
+        skin: import("prop-types").Requireable<import("prop-types").InferProps<{
+            common: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+            images: import("prop-types").Requireable<import("prop-types").InferProps<{
+                'logo-mobile': import("prop-types").Requireable<any>;
+                logo: import("prop-types").Requireable<any>;
+                'logo-email': import("prop-types").Requireable<any>;
+                login: import("prop-types").Requireable<any>;
+            }>>;
+            icons: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+            mod: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+            courses: import("prop-types").Requireable<any[]>;
+            texts: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
     };
 };
 export default MultiFilterPanel;

package/es/molecule/multi-filter-panel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/multi-filter-panel/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AASjE,OAAkB,EAAC,qBAAqB,EAAqB,MAAM,cAAc,CAAC;AAwDlF,QAAA,MAAM,gBAAgB;YAAW,qBAAqB,WAAW,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDhF,CAAC;AAQF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/multi-filter-panel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAWjE,OAAkB,EAAC,qBAAqB,EAAqB,MAAM,cAAc,CAAC;AAuDlF,QAAA,MAAM,gBAAgB;YAAW,qBAAqB,WAAW,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DhF,CAAC;AASF,eAAe,gBAAgB,CAAC"}

package/es/molecule/multi-filter-panel/index.js

@@ -1,3 +1,5 @@
+import _noop from "lodash/fp/noop";
+import _getOr from "lodash/fp/getOr";
 import _toString from "lodash/fp/toString";
 import _flatMap from "lodash/fp/flatMap";
 import _filter from "lodash/fp/filter";
@@ -5,6 +7,7 @@ import _pipe from "lodash/fp/pipe";
 import _size from "lodash/fp/size";
 import _map from "lodash/fp/map";
 import React from 'react';
+import { convert } from 'css-color-function';
 import FilterChip from '../../organism/filter-chip';
 import FilterCheckboxAndSearch from '../../organism/filter-checkbox-and-search';
 import Title from '../../atom/title';
@@ -14,16 +17,13 @@ import Provider, { GetTranslateFromContext } from '../../atom/provider';
 import Chip from '../../atom/chip';
 import { COLORS } from '../../variables/colors';
 import FilterSwitch from '../../organism/filter-switch';
+import FilterRange from '../../organism/filter-range';
 import style from './style.css';
 import propTypes from './prop-types';
 // @ts-expect-error convert is not recognized by the types
 const uncappedMap = _map.convert({
   cap: false
 });
-const CLEAR_ALL_BUTTON_STYLE = {
-  fontWeight: 'normal',
-  padding: 0
-};
 const FilterSeparator = /*#__PURE__*/React.createElement("div", {
   className: style.filterSeparator
 });
@@ -39,8 +39,8 @@ const buildFilters = filterOptions => {
       return /*#__PURE__*/React.createElement(FilterCheckboxAndSearch, options);
     case 'switch':
       return /*#__PURE__*/React.createElement(FilterSwitch, options);
-    default:
-      return null;
+    case 'range':
+      return /*#__PURE__*/React.createElement(FilterRange, options);
   }
 };
 const buildAllSelectedFilterChips = (selectedFilters, onRemoveSelectedFilter) => {
@@ -52,7 +52,7 @@ const buildAllSelectedFilterChips = (selectedFilters, onRemoveSelectedFilter) =>
       label
     } = filterItem;
     function handleClick() {
-      return onRemoveSelectedFilter(label);
+      return onRemoveSelectedFilter(filterItem);
     }
     return /*#__PURE__*/React.createElement(Chip, {
       key: label,
@@ -69,11 +69,15 @@ const buildAllSelectedFilterChips = (selectedFilters, onRemoveSelectedFilter) =>
   }));
 };
 const MultiFilterPanel = (props, context) => {
+  const {
+    skin
+  } = context;
+  const primaryColor = _getOr(COLORS.cm_primary_blue, 'common.primary', skin);
   const {
     title,
     onClearAll,
     options,
-    onRemoveSelectedFilter = false
+    onRemoveSelectedFilter = _noop
   } = props;
   const translate = GetTranslateFromContext(context);
   const allSelectedFilters = _pipe(_map('options'), _flatMap('options'), _filter(filterOptions => filterOptions.selected || filterOptions.value === true))(options);
@@ -86,31 +90,40 @@ const MultiFilterPanel = (props, context) => {
   }, options);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: style.header
-  }, /*#__PURE__*/React.createElement("div", {
+  }, hasSelectedFilters ? /*#__PURE__*/React.createElement("div", {
     className: style.titleContainer
   }, /*#__PURE__*/React.createElement(Title, {
     title: title,
     type: "form-group",
     titleSize: "standard-light-weight"
-  }), hasSelectedFilters ? /*#__PURE__*/React.createElement(Tag, {
+  }), /*#__PURE__*/React.createElement(Tag, {
     label: _toString(_size(allSelectedFilters)),
     type: "info",
-    size: "S"
-  }) : null), hasSelectedFilters ? /*#__PURE__*/React.createElement("div", {
+    size: "S",
+    customStyle: {
+      color: primaryColor,
+      backgroundColor: convert(`color(${primaryColor} lightness(92%))`)
+    }
+  })) : null, hasSelectedFilters ? /*#__PURE__*/React.createElement("div", {
     className: style.buttonContainer
   }, /*#__PURE__*/React.createElement(ButtonLink, {
-    customStyle: CLEAR_ALL_BUTTON_STYLE,
+    customStyle: {
+      fontWeight: 'normal',
+      padding: 0,
+      color: primaryColor
+    },
     label: translate('clear_all'),
     type: "text",
     "data-name": "filters-all-clear-button",
     "aria-label": "filters all clear button",
     onClick: onClearAll,
     hoverColor: COLORS.primary_600
-  })) : null), onRemoveSelectedFilter && hasSelectedFilters ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, buildAllSelectedFilterChips(allSelectedFilters, onRemoveSelectedFilter)), FilterSeparator) : null, filters);
+  })) : null), hasSelectedFilters ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, buildAllSelectedFilterChips(allSelectedFilters, onRemoveSelectedFilter)), FilterSeparator) : null, filters);
 };
 MultiFilterPanel.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
 MultiFilterPanel.contextTypes = {
-  translate: Provider.childContextTypes.translate
+  translate: Provider.childContextTypes.translate,
+  skin: Provider.childContextTypes.skin
 };
 export default MultiFilterPanel;
 //# sourceMappingURL=index.js.map

package/es/molecule/multi-filter-panel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","FilterChip","FilterCheckboxAndSearch","Title","Tag","ButtonLink","Provider","GetTranslateFromContext","Chip","COLORS","FilterSwitch","style","propTypes","uncappedMap","_map","convert","cap","CLEAR_ALL_BUTTON_STYLE","fontWeight","padding","FilterSeparator","createElement","className","filterSeparator","buildFilters","filterOptions","type","options","buildAllSelectedFilterChips","selectedFilters","onRemoveSelectedFilter","selectedFiltersContainer","map","filterItem","label","handleClick","key","onClick","text","textColor","neutral_500","backgroundColor","cm_grey_150","customIcon","customStyle","height","MultiFilterPanel","props","context","title","onClearAll","translate","allSelectedFilters","_pipe","_flatMap","_filter","selected","value","hasSelectedFilters","_size","filters","i","isLastItem","Fragment","header","titleContainer","titleSize","_toString","size","buttonContainer","hoverColor","primary_600","process","env","NODE_ENV","contextTypes","childContextTypes"],"sources":["../../../src/molecule/multi-filter-panel/index.tsx"],"sourcesContent":["import React from 'react';\nimport {map, size, pipe, filter, flatMap, toString} from 'lodash/fp';\nimport FilterChip from '../../organism/filter-chip';\nimport FilterCheckboxAndSearch from '../../organism/filter-checkbox-and-search';\nimport Title from '../../atom/title';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport Chip from '../../atom/chip';\nimport {COLORS} from '../../variables/colors';\nimport FilterSwitch from '../../organism/filter-switch';\nimport {FilterCheckboxAndSearchOptions} from '../../organism/filter-checkbox-and-search/props-types';\nimport {FilterChipOptionsProps} from '../../organism/filter-chip/prop-types';\nimport {FilterSwitchOptionsProps} from '../../organism/filter-switch/prop-types';\nimport style from './style.css';\nimport propTypes, {MultiFilterPanelProps, FilterOptionsProps} from './prop-types';\n\ntype SelectedFilter =\n  | FilterChipOptionsProps\n  | FilterSwitchOptionsProps\n  | FilterCheckboxAndSearchOptions;\n\n// @ts-expect-error convert is not recognized by the types\nconst uncappedMap = map.convert({cap: false});\n\nconst CLEAR_ALL_BUTTON_STYLE = {fontWeight: 'normal', padding: 0};\nconst FilterSeparator = <div className={style.filterSeparator} />;\n\nconst buildFilters = (filterOptions: FilterOptionsProps) => {\n  const {type, options} = filterOptions;\n  switch (type) {\n    case 'chip':\n      return <FilterChip {...options} />;\n    case 'checkbox':\n      return <FilterCheckboxAndSearch {...options} />;\n    case 'switch':\n      return <FilterSwitch {...options} />;\n    default:\n      return null;\n  }\n};\n\nconst buildAllSelectedFilterChips = (\n  selectedFilters: SelectedFilter[],\n  onRemoveSelectedFilter: (label: string) => void\n) => {\n  return (\n    <div className={style.selectedFiltersContainer} data-testid=\"selected-filters-container\">\n      {selectedFilters.map((filterItem: SelectedFilter) => {\n        const {label} = filterItem;\n\n        function handleClick() {\n          return onRemoveSelectedFilter(label);\n        }\n\n        return (\n          <Chip\n            key={label}\n            onClick={handleClick}\n            text={label}\n            textColor={COLORS.neutral_500}\n            backgroundColor={COLORS.cm_grey_150}\n            customIcon={'xmark'}\n            customStyle={{height: '28px', padding: '4px 8px'}}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nconst MultiFilterPanel = (props: MultiFilterPanelProps, context: WebContextValues) => {\n  const {title, onClearAll, options, onRemoveSelectedFilter = false} = props;\n  const translate = GetTranslateFromContext(context);\n  const allSelectedFilters: SelectedFilter[] = pipe(\n    map('options'),\n    flatMap('options'),\n    filter(filterOptions => filterOptions.selected || filterOptions.value === true)\n  )(options);\n  const hasSelectedFilters = size(allSelectedFilters) > 0;\n  const filters = uncappedMap((filterOptions: FilterOptionsProps, i: number) => {\n    const isLastItem = i + 1 === size(options);\n\n    return (\n      <div key={i}>\n        {buildFilters(filterOptions)}\n        {isLastItem ? null : FilterSeparator}\n      </div>\n    );\n  }, options);\n  return (\n    <>\n      <div className={style.header}>\n        <div className={style.titleContainer}>\n          <Title title={title} type=\"form-group\" titleSize=\"standard-light-weight\" />\n          {hasSelectedFilters ? (\n            <Tag label={toString(size(allSelectedFilters))} type=\"info\" size=\"S\" />\n          ) : null}\n        </div>\n        {hasSelectedFilters ? (\n          <div className={style.buttonContainer}>\n            <ButtonLink\n              customStyle={CLEAR_ALL_BUTTON_STYLE}\n              label={translate('clear_all')}\n              type=\"text\"\n              data-name=\"filters-all-clear-button\"\n              aria-label=\"filters all clear button\"\n              onClick={onClearAll}\n              hoverColor={COLORS.primary_600}\n            />\n          </div>\n        ) : null}\n      </div>\n      {onRemoveSelectedFilter && hasSelectedFilters ? (\n        <>\n          <div>{buildAllSelectedFilterChips(allSelectedFilters, onRemoveSelectedFilter)}</div>\n          {FilterSeparator}\n        </>\n      ) : null}\n      {filters}\n    </>\n  );\n};\n\nMultiFilterPanel.propTypes = propTypes;\n\nMultiFilterPanel.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nexport default MultiFilterPanel;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","convert","FilterChip","FilterCheckboxAndSearch","Title","Tag","ButtonLink","Provider","GetTranslateFromContext","Chip","COLORS","FilterSwitch","FilterRange","style","propTypes","uncappedMap","_map","cap","FilterSeparator","createElement","className","filterSeparator","buildFilters","filterOptions","type","options","buildAllSelectedFilterChips","selectedFilters","onRemoveSelectedFilter","selectedFiltersContainer","map","filterItem","label","handleClick","key","onClick","text","textColor","neutral_500","backgroundColor","cm_grey_150","customIcon","customStyle","height","padding","MultiFilterPanel","props","context","skin","primaryColor","_getOr","cm_primary_blue","title","onClearAll","_noop","translate","allSelectedFilters","_pipe","_flatMap","_filter","selected","value","hasSelectedFilters","_size","filters","i","isLastItem","Fragment","header","titleContainer","titleSize","_toString","size","color","buttonContainer","fontWeight","hoverColor","primary_600","process","env","NODE_ENV","contextTypes","childContextTypes"],"sources":["../../../src/molecule/multi-filter-panel/index.tsx"],"sourcesContent":["import React from 'react';\nimport {map, size, pipe, filter, flatMap, toString, getOr, noop} from 'lodash/fp';\nimport {convert} from 'css-color-function';\nimport FilterChip from '../../organism/filter-chip';\nimport FilterCheckboxAndSearch from '../../organism/filter-checkbox-and-search';\nimport Title from '../../atom/title';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport Chip from '../../atom/chip';\nimport {COLORS} from '../../variables/colors';\nimport FilterSwitch from '../../organism/filter-switch';\nimport FilterRange from '../../organism/filter-range';\nimport {FilterCheckboxAndSearchOptions} from '../../organism/filter-checkbox-and-search/props-types';\nimport {FilterChipOptionsProps} from '../../organism/filter-chip/prop-types';\nimport {FilterSwitchOptionsProps} from '../../organism/filter-switch/prop-types';\nimport {FilterRangeOptionsProps} from '../../organism/filter-range/prop-types';\nimport style from './style.css';\nimport propTypes, {MultiFilterPanelProps, FilterOptionsProps} from './prop-types';\n\ntype SelectedFilter =\n  | FilterChipOptionsProps\n  | FilterSwitchOptionsProps\n  | FilterCheckboxAndSearchOptions\n  | FilterRangeOptionsProps;\n\n// @ts-expect-error convert is not recognized by the types\nconst uncappedMap = map.convert({cap: false});\n\nconst FilterSeparator = <div className={style.filterSeparator} />;\n\nconst buildFilters = (filterOptions: FilterOptionsProps) => {\n  const {type, options} = filterOptions;\n  switch (type) {\n    case 'chip':\n      return <FilterChip {...options} />;\n    case 'checkbox':\n      return <FilterCheckboxAndSearch {...options} />;\n    case 'switch':\n      return <FilterSwitch {...options} />;\n    case 'range':\n      return <FilterRange {...options} />;\n  }\n};\n\nconst buildAllSelectedFilterChips = (\n  selectedFilters: SelectedFilter[],\n  onRemoveSelectedFilter: (filterItem: SelectedFilter) => void\n) => {\n  return (\n    <div className={style.selectedFiltersContainer} data-testid=\"selected-filters-container\">\n      {selectedFilters.map((filterItem: SelectedFilter) => {\n        const {label} = filterItem;\n        function handleClick() {\n          return onRemoveSelectedFilter(filterItem);\n        }\n\n        return (\n          <Chip\n            key={label}\n            onClick={handleClick}\n            text={label}\n            textColor={COLORS.neutral_500}\n            backgroundColor={COLORS.cm_grey_150}\n            customIcon={'xmark'}\n            customStyle={{height: '28px', padding: '4px 8px'}}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nconst MultiFilterPanel = (props: MultiFilterPanelProps, context: WebContextValues) => {\n  const {skin} = context;\n  const primaryColor = getOr(COLORS.cm_primary_blue, 'common.primary', skin);\n  const {title, onClearAll, options, onRemoveSelectedFilter = noop} = props;\n  const translate = GetTranslateFromContext(context);\n  const allSelectedFilters: SelectedFilter[] = pipe(\n    map('options'),\n    flatMap('options'),\n    filter(filterOptions => filterOptions.selected || filterOptions.value === true)\n  )(options);\n  const hasSelectedFilters = size(allSelectedFilters) > 0;\n  const filters = uncappedMap((filterOptions: FilterOptionsProps, i: number) => {\n    const isLastItem = i + 1 === size(options);\n\n    return (\n      <div key={i}>\n        {buildFilters(filterOptions)}\n        {isLastItem ? null : FilterSeparator}\n      </div>\n    );\n  }, options);\n  return (\n    <>\n      <div className={style.header}>\n        {hasSelectedFilters ? (\n          <div className={style.titleContainer}>\n            <Title title={title} type=\"form-group\" titleSize=\"standard-light-weight\" />\n            <Tag\n              label={toString(size(allSelectedFilters))}\n              type=\"info\"\n              size=\"S\"\n              customStyle={{\n                color: primaryColor,\n                backgroundColor: convert(`color(${primaryColor} lightness(92%))`)\n              }}\n            />\n          </div>\n        ) : null}\n        {hasSelectedFilters ? (\n          <div className={style.buttonContainer}>\n            <ButtonLink\n              customStyle={{fontWeight: 'normal', padding: 0, color: primaryColor}}\n              label={translate('clear_all')}\n              type=\"text\"\n              data-name=\"filters-all-clear-button\"\n              aria-label=\"filters all clear button\"\n              onClick={onClearAll}\n              hoverColor={COLORS.primary_600}\n            />\n          </div>\n        ) : null}\n      </div>\n      {hasSelectedFilters ? (\n        <>\n          <div>{buildAllSelectedFilterChips(allSelectedFilters, onRemoveSelectedFilter)}</div>\n          {FilterSeparator}\n        </>\n      ) : null}\n      {filters}\n    </>\n  );\n};\n\nMultiFilterPanel.propTypes = propTypes;\n\nMultiFilterPanel.contextTypes = {\n  translate: Provider.childContextTypes.translate,\n  skin: Provider.childContextTypes.skin\n};\n\nexport default MultiFilterPanel;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/multi-filter-panel/prop-types.d.ts

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
-import { FilterChipProps } from '../../organism/filter-chip/prop-types';
-import { FilterCheckboxAndSearchProps } from '../../organism/filter-checkbox-and-search/props-types';
-import { FilterSwitchProps } from '../../organism/filter-switch/prop-types';
+import { FilterChipOptionsProps, FilterChipProps } from '../../organism/filter-chip/prop-types';
+import { FilterCheckboxAndSearchOptions, FilterCheckboxAndSearchProps } from '../../organism/filter-checkbox-and-search/props-types';
+import { FilterSwitchOptionsProps, FilterSwitchProps } from '../../organism/filter-switch/prop-types';
+import { FilterRangeProps, FilterRangeOptionsProps } from '../../organism/filter-range/prop-types';
 declare const propTypes: {
     title: PropTypes.Requireable<string>;
     onClearAll: PropTypes.Requireable<(...args: any[]) => any>;
@@ -36,6 +37,7 @@ declare const propTypes: {
                 count: PropTypes.Requireable<number>;
                 onClick: PropTypes.Requireable<(...args: any[]) => any>;
             }> | null | undefined)[]>;
+            emptySearchResult: PropTypes.Requireable<string>;
             searchOptions: PropTypes.Requireable<PropTypes.InferProps<{
                 value: PropTypes.Requireable<string>;
                 placeholder: PropTypes.Validator<string>;
@@ -62,8 +64,28 @@ declare const propTypes: {
                 onChange: PropTypes.Validator<(...args: any[]) => any>;
                 theme: PropTypes.Validator<string>;
                 ariaLabel: PropTypes.Validator<string>;
+                id: PropTypes.Requireable<string>;
             }> | null | undefined)[]>;
         }>>;
+    }> | PropTypes.InferProps<{
+        type: PropTypes.Requireable<string>;
+        options: PropTypes.Requireable<PropTypes.InferProps<{
+            title: PropTypes.Validator<string>;
+            titleAriaLabel: PropTypes.Requireable<string>;
+            onClear: PropTypes.Validator<(...args: any[]) => any>;
+            options: PropTypes.Requireable<PropTypes.InferProps<{
+                label: PropTypes.Validator<string>;
+                min: PropTypes.Validator<number>;
+                max: PropTypes.Validator<number>;
+                step: PropTypes.Requireable<number>;
+                value: PropTypes.Requireable<(number | null | undefined)[]>;
+                minLabel: PropTypes.Requireable<string>;
+                maxLabel: PropTypes.Requireable<string>;
+                onChange: PropTypes.Validator<(...args: any[]) => any>;
+                theme: PropTypes.Requireable<string>;
+                selected: PropTypes.Requireable<boolean>;
+            }>>;
+        }>>;
     }> | null | undefined> | null | undefined)[]>;
 };
 export declare type OptionsChipProps = {
@@ -78,10 +100,15 @@ export declare type OptionsSwitchProps = {
     type: 'switch';
     options: FilterSwitchProps;
 };
-export declare type FilterOptionsProps = OptionsChipProps | OptionsCheckboxProps | OptionsSwitchProps;
+export declare type OptionsRangeProps = {
+    type: 'range';
+    options: FilterRangeProps;
+};
+export declare type FilterOptionsProps = OptionsChipProps | OptionsCheckboxProps | OptionsSwitchProps | OptionsRangeProps;
+export declare type SelectedFilter = FilterChipOptionsProps | FilterSwitchOptionsProps | FilterCheckboxAndSearchOptions | FilterRangeOptionsProps;
 export declare type MultiFilterPanelProps = {
     title: string;
-    onRemoveSelectedFilter?: (label: string) => void;
+    onRemoveSelectedFilter?: (filterItem: SelectedFilter) => void;
     onClearAll: () => void;
     options: FilterOptionsProps[];
 };

package/es/molecule/multi-filter-panel/prop-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/molecule/multi-filter-panel/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAA4B,EAAC,eAAe,EAAC,MAAM,uCAAuC,CAAC;AAC3F,OAAyC,EACvC,4BAA4B,EAC7B,MAAM,uDAAuD,CAAC;AAC/D,OAA8B,EAAC,iBAAiB,EAAC,MAAM,yCAAyC,CAAC;AAEjG,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoBd,CAAC;AAEF,oBAAY,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,eAAe,CAAC;CAC1B,CAAC;AAEF,oBAAY,oBAAoB,GAAG;IACjC,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,4BAA4B,CAAC;CACvC,CAAC;AAEF,oBAAY,kBAAkB,GAAG;IAC/B,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,iBAAiB,CAAC;CAC5B,CAAC;AAEF,oBAAY,kBAAkB,GAAG,gBAAgB,GAAG,oBAAoB,GAAG,kBAAkB,CAAC;AAE9F,oBAAY,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE,kBAAkB,EAAE,CAAC;CAC/B,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/molecule/multi-filter-panel/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAA4B,EAC1B,sBAAsB,EACtB,eAAe,EAChB,MAAM,uCAAuC,CAAC;AAC/C,OAAyC,EACvC,8BAA8B,EAC9B,4BAA4B,EAC7B,MAAM,uDAAuD,CAAC;AAC/D,OAA8B,EAC5B,wBAAwB,EACxB,iBAAiB,EAClB,MAAM,yCAAyC,CAAC;AACjD,OAA6B,EAC3B,gBAAgB,EAChB,uBAAuB,EACxB,MAAM,wCAAwC,CAAC;AAEhD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwBd,CAAC;AAEF,oBAAY,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,eAAe,CAAC;CAC1B,CAAC;AAEF,oBAAY,oBAAoB,GAAG;IACjC,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,4BAA4B,CAAC;CACvC,CAAC;AAEF,oBAAY,kBAAkB,GAAG;IAC/B,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,iBAAiB,CAAC;CAC5B,CAAC;AAEF,oBAAY,iBAAiB,GAAG;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,gBAAgB,CAAC;CAC3B,CAAC;AAEF,oBAAY,kBAAkB,GAC1B,gBAAgB,GAChB,oBAAoB,GACpB,kBAAkB,GAClB,iBAAiB,CAAC;AAEtB,oBAAY,cAAc,GACtB,sBAAsB,GACtB,wBAAwB,GACxB,8BAA8B,GAC9B,uBAAuB,CAAC;AAE5B,oBAAY,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,sBAAsB,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9D,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE,kBAAkB,EAAE,CAAC;CAC/B,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/es/molecule/multi-filter-panel/prop-types.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import filterChipProptypes from '../../organism/filter-chip/prop-types';
 import filterCheckboxAndSearchProptypes from '../../organism/filter-checkbox-and-search/props-types';
 import filterSwitchProptypes from '../../organism/filter-switch/prop-types';
+import filterRangeProptypes from '../../organism/filter-range/prop-types';
 const propTypes = {
   title: PropTypes.string,
   onClearAll: PropTypes.func,
@@ -15,6 +16,9 @@ const propTypes = {
   }), PropTypes.shape({
     type: PropTypes.oneOf(['switch']),
     options: PropTypes.shape(filterSwitchProptypes)
+  }), PropTypes.shape({
+    type: PropTypes.oneOf(['range']),
+    options: PropTypes.shape(filterRangeProptypes)
   })]))
 };
 export default propTypes;

package/es/molecule/multi-filter-panel/prop-types.js.map

@@ -1 +1 @@
-{"version":3,"file":"prop-types.js","names":["PropTypes","filterChipProptypes","filterCheckboxAndSearchProptypes","filterSwitchProptypes","propTypes","title","string","onClearAll","func","onRemoveSelectedFilter","options","arrayOf","oneOfType","shape","type","oneOf"],"sources":["../../../src/molecule/multi-filter-panel/prop-types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport filterChipProptypes, {FilterChipProps} from '../../organism/filter-chip/prop-types';\nimport filterCheckboxAndSearchProptypes, {\n  FilterCheckboxAndSearchProps\n} from '../../organism/filter-checkbox-and-search/props-types';\nimport filterSwitchProptypes, {FilterSwitchProps} from '../../organism/filter-switch/prop-types';\n\nconst propTypes = {\n  title: PropTypes.string,\n  onClearAll: PropTypes.func,\n  onRemoveSelectedFilter: PropTypes.func,\n  options: PropTypes.arrayOf(\n    PropTypes.oneOfType([\n      PropTypes.shape({\n        type: PropTypes.oneOf(['chip']),\n        options: PropTypes.shape(filterChipProptypes)\n      }),\n      PropTypes.shape({\n        type: PropTypes.oneOf(['checkbox']),\n        options: PropTypes.shape(filterCheckboxAndSearchProptypes)\n      }),\n      PropTypes.shape({\n        type: PropTypes.oneOf(['switch']),\n        options: PropTypes.shape(filterSwitchProptypes)\n      })\n    ])\n  )\n};\n\nexport type OptionsChipProps = {\n  type: 'chip';\n  options: FilterChipProps;\n};\n\nexport type OptionsCheckboxProps = {\n  type: 'checkbox';\n  options: FilterCheckboxAndSearchProps;\n};\n\nexport type OptionsSwitchProps = {\n  type: 'switch';\n  options: FilterSwitchProps;\n};\n\nexport type FilterOptionsProps = OptionsChipProps | OptionsCheckboxProps | OptionsSwitchProps;\n\nexport type MultiFilterPanelProps = {\n  title: string;\n  onRemoveSelectedFilter?: (label: string) => void;\n  onClearAll: () => void;\n  options: FilterOptionsProps[];\n};\n\nexport default propTypes;\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,YAAY;AAClC,OAAOC,mBAAmB,MAAyB,uCAAuC;AAC1F,OAAOC,gCAAgC,MAEhC,uDAAuD;AAC9D,OAAOC,qBAAqB,MAA2B,yCAAyC;AAEhG,MAAMC,SAAS,GAAG;EAChBC,KAAK,EAAEL,SAAS,CAACM,MAAM;EACvBC,UAAU,EAAEP,SAAS,CAACQ,IAAI;EAC1BC,sBAAsB,EAAET,SAAS,CAACQ,IAAI;EACtCE,OAAO,EAAEV,SAAS,CAACW,OAAO,CACxBX,SAAS,CAACY,SAAS,CAAC,CAClBZ,SAAS,CAACa,KAAK,CAAC;IACdC,IAAI,EAAEd,SAAS,CAACe,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;IAC/BL,OAAO,EAAEV,SAAS,CAACa,KAAK,CAACZ,mBAAmB;EAC9C,CAAC,CAAC,EACFD,SAAS,CAACa,KAAK,CAAC;IACdC,IAAI,EAAEd,SAAS,CAACe,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC;IACnCL,OAAO,EAAEV,SAAS,CAACa,KAAK,CAACX,gCAAgC;EAC3D,CAAC,CAAC,EACFF,SAAS,CAACa,KAAK,CAAC;IACdC,IAAI,EAAEd,SAAS,CAACe,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjCL,OAAO,EAAEV,SAAS,CAACa,KAAK,CAACV,qBAAqB;EAChD,CAAC,CAAC,CACH,CACH;AACF,CAAC;AA0BD,eAAeC,SAAS","ignoreList":[]}
+{"version":3,"file":"prop-types.js","names":["PropTypes","filterChipProptypes","filterCheckboxAndSearchProptypes","filterSwitchProptypes","filterRangeProptypes","propTypes","title","string","onClearAll","func","onRemoveSelectedFilter","options","arrayOf","oneOfType","shape","type","oneOf"],"sources":["../../../src/molecule/multi-filter-panel/prop-types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport filterChipProptypes, {\n  FilterChipOptionsProps,\n  FilterChipProps\n} from '../../organism/filter-chip/prop-types';\nimport filterCheckboxAndSearchProptypes, {\n  FilterCheckboxAndSearchOptions,\n  FilterCheckboxAndSearchProps\n} from '../../organism/filter-checkbox-and-search/props-types';\nimport filterSwitchProptypes, {\n  FilterSwitchOptionsProps,\n  FilterSwitchProps\n} from '../../organism/filter-switch/prop-types';\nimport filterRangeProptypes, {\n  FilterRangeProps,\n  FilterRangeOptionsProps\n} from '../../organism/filter-range/prop-types';\n\nconst propTypes = {\n  title: PropTypes.string,\n  onClearAll: PropTypes.func,\n  onRemoveSelectedFilter: PropTypes.func,\n  options: PropTypes.arrayOf(\n    PropTypes.oneOfType([\n      PropTypes.shape({\n        type: PropTypes.oneOf(['chip']),\n        options: PropTypes.shape(filterChipProptypes)\n      }),\n      PropTypes.shape({\n        type: PropTypes.oneOf(['checkbox']),\n        options: PropTypes.shape(filterCheckboxAndSearchProptypes)\n      }),\n      PropTypes.shape({\n        type: PropTypes.oneOf(['switch']),\n        options: PropTypes.shape(filterSwitchProptypes)\n      }),\n      PropTypes.shape({\n        type: PropTypes.oneOf(['range']),\n        options: PropTypes.shape(filterRangeProptypes)\n      })\n    ])\n  )\n};\n\nexport type OptionsChipProps = {\n  type: 'chip';\n  options: FilterChipProps;\n};\n\nexport type OptionsCheckboxProps = {\n  type: 'checkbox';\n  options: FilterCheckboxAndSearchProps;\n};\n\nexport type OptionsSwitchProps = {\n  type: 'switch';\n  options: FilterSwitchProps;\n};\n\nexport type OptionsRangeProps = {\n  type: 'range';\n  options: FilterRangeProps;\n};\n\nexport type FilterOptionsProps =\n  | OptionsChipProps\n  | OptionsCheckboxProps\n  | OptionsSwitchProps\n  | OptionsRangeProps;\n\nexport type SelectedFilter =\n  | FilterChipOptionsProps\n  | FilterSwitchOptionsProps\n  | FilterCheckboxAndSearchOptions\n  | FilterRangeOptionsProps;\n\nexport type MultiFilterPanelProps = {\n  title: string;\n  onRemoveSelectedFilter?: (filterItem: SelectedFilter) => void;\n  onClearAll: () => void;\n  options: FilterOptionsProps[];\n};\n\nexport default propTypes;\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,YAAY;AAClC,OAAOC,mBAAmB,MAGnB,uCAAuC;AAC9C,OAAOC,gCAAgC,MAGhC,uDAAuD;AAC9D,OAAOC,qBAAqB,MAGrB,yCAAyC;AAChD,OAAOC,oBAAoB,MAGpB,wCAAwC;AAE/C,MAAMC,SAAS,GAAG;EAChBC,KAAK,EAAEN,SAAS,CAACO,MAAM;EACvBC,UAAU,EAAER,SAAS,CAACS,IAAI;EAC1BC,sBAAsB,EAAEV,SAAS,CAACS,IAAI;EACtCE,OAAO,EAAEX,SAAS,CAACY,OAAO,CACxBZ,SAAS,CAACa,SAAS,CAAC,CAClBb,SAAS,CAACc,KAAK,CAAC;IACdC,IAAI,EAAEf,SAAS,CAACgB,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;IAC/BL,OAAO,EAAEX,SAAS,CAACc,KAAK,CAACb,mBAAmB;EAC9C,CAAC,CAAC,EACFD,SAAS,CAACc,KAAK,CAAC;IACdC,IAAI,EAAEf,SAAS,CAACgB,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC;IACnCL,OAAO,EAAEX,SAAS,CAACc,KAAK,CAACZ,gCAAgC;EAC3D,CAAC,CAAC,EACFF,SAAS,CAACc,KAAK,CAAC;IACdC,IAAI,EAAEf,SAAS,CAACgB,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjCL,OAAO,EAAEX,SAAS,CAACc,KAAK,CAACX,qBAAqB;EAChD,CAAC,CAAC,EACFH,SAAS,CAACc,KAAK,CAAC;IACdC,IAAI,EAAEf,SAAS,CAACgB,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC;IAChCL,OAAO,EAAEX,SAAS,CAACc,KAAK,CAACV,oBAAoB;EAC/C,CAAC,CAAC,CACH,CACH;AACF,CAAC;AAyCD,eAAeC,SAAS","ignoreList":[]}

package/es/molecule/questions/question-range/index.d.ts

@@ -32,6 +32,12 @@ declare namespace QuestionRange {
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         onChangeEnd: PropTypes.Requireable<(...args: any[]) => any>;
         multi: PropTypes.Requireable<boolean>;
+        theme: PropTypes.Requireable<string>;
+        min: PropTypes.Requireable<number>;
+        max: PropTypes.Requireable<number>;
+        step: PropTypes.Requireable<number>;
+        minValueLabel: PropTypes.Requireable<string>;
+        maxValueLabel: PropTypes.Requireable<string>;
         HammerForTestingMin: PropTypes.Requireable<PropTypes.InferProps<{
             on: PropTypes.Requireable<(...args: any[]) => any>;
             destroy: PropTypes.Requireable<(...args: any[]) => any>;
@@ -42,7 +48,6 @@ declare namespace QuestionRange {
             destroy: PropTypes.Requireable<(...args: any[]) => any>;
             stop: PropTypes.Requireable<(...args: any[]) => any>;
         }>>;
-        value: PropTypes.Requireable<NonNullable<number | (number | null | undefined)[] | null | undefined>>;
     };
 }
 import PropTypes from "prop-types";

package/es/molecule/quick-filters/index.js

@@ -175,7 +175,9 @@ const QuickFilters = ({
         wrapperSize: 20
       },
       "aria-label": ariaLabel
-    }), /*#__PURE__*/React.createElement("span", null, label), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement("span", {
+      className: style.filterLabel
+    }, label), /*#__PURE__*/React.createElement("div", {
       className: style.bar,
       style: {
         background: primarySkinColor

package/es/molecule/quick-filters/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useRef","useEffect","classNames","FaIcon","COLORS","ButtonLink","Provider","GetSkinFromContext","style","propTypes","SCROLL_RIGHT_SIZE","SCROLL_LEFT_SIZE","handleScroll","direction","listRef","current","scrollBy","left","behavior","getFilterButton","filterButtonProps","primarySkinColor","tag","rest","createElement","className","filterButtonWrapper","borderColor","label","filterButton","_extends","icon","position","faIcon","name","size","color","cm_grey_700","neutral_500","customStyle","backgroundColor","undefined","borderRadius","QuickFilters","primaryOption","filterOptions","filterOptionsAriaLabel","context","skin","_get","defaultLabel","defaultIconName","defaultSelected","defaultAriaLabel","onDefaultClick","filtersListRef","rightBtnRef","leftBtnRef","handleScrollRight","handleScrollLeft","list","rightButton","leftButton","update","rightArrowWidth","offsetWidth","showingRightButton","scrollLeft","clientWidth","scrollWidth","showingLeftButton","visibility","opacity","addEventListener","window","removeEventListener","filtersMainContainer","leftArrowButton","ref","onClick","height","filtersList","defaultOption","filterSelected","iconName","faSize","wrapperSize","filterLabel","bar","background","filterSeparator","filtersContainer","map","filterOption","idx","selected","value","ariaLabel","key","borderBottomColor","rightArrowButton","process","env","NODE_ENV","contextTypes","childContextTypes"],"sources":["../../../src/molecule/quick-filters/index.tsx"],"sourcesContent":["import React, {useCallback, useRef, useEffect} from 'react';\nimport classNames from 'classnames';\nimport {get} from 'lodash/fp';\nimport FaIcon from '../../atom/icon';\nimport {COLORS} from '../../variables/colors';\nimport ButtonLink from '../../atom/button-link';\nimport {ButtonLinkProps} from '../../atom/button-link/types';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\nimport style from './style.css';\nimport {QuickFiltersProps, propTypes} from './types';\n\nconst SCROLL_RIGHT_SIZE = 400;\nconst SCROLL_LEFT_SIZE = -400;\nexport const handleScroll = (direction: number, listRef: React.RefObject<HTMLDivElement>) => {\n  if (listRef.current) {\n    listRef.current.scrollBy({\n      left: direction,\n      behavior: 'smooth'\n    });\n  }\n};\n\nconst getFilterButton = (\n  filterButtonProps: ButtonLinkProps | undefined,\n  primarySkinColor: string\n) => {\n  if (!filterButtonProps) return null;\n  const {tag, ...rest} = filterButtonProps;\n  return (\n    <div\n      className={style.filterButtonWrapper}\n      style={{borderColor: tag?.label ? primarySkinColor : 'transparent'}}\n    >\n      <div className={style.filterButton}>\n        <ButtonLink\n          {...rest}\n          icon={{\n            position: 'left',\n            faIcon: {\n              name: 'sliders',\n              size: 14,\n              color: tag ? COLORS.cm_grey_700 : COLORS.neutral_500\n            }\n          }}\n          tag={\n            tag\n              ? {\n                  label: tag.label,\n                  customStyle: {backgroundColor: primarySkinColor, color: '#FFFFFF'}\n                }\n              : undefined\n          }\n          className={style.filterButton}\n          data-testid=\"open-filters-modal-button\"\n          customStyle={{borderRadius: '12px'}}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst QuickFilters = (\n  {primaryOption, filterOptions, filterButton, filterOptionsAriaLabel}: QuickFiltersProps,\n  context: WebContextValues\n) => {\n  const skin = GetSkinFromContext(context);\n  const primarySkinColor = get('common.primary', skin);\n  const {defaultLabel, defaultIconName, defaultSelected, defaultAriaLabel, onDefaultClick} =\n    primaryOption;\n  const filtersListRef = React.useRef<HTMLDivElement>(null);\n  const rightBtnRef = useRef<HTMLDivElement>(null);\n  const leftBtnRef = useRef<HTMLDivElement>(null);\n\n  const handleScrollRight = useCallback(() => {\n    handleScroll(SCROLL_RIGHT_SIZE, filtersListRef);\n  }, [filtersListRef]);\n  const handleScrollLeft = useCallback(() => {\n    handleScroll(SCROLL_LEFT_SIZE, filtersListRef);\n  }, [filtersListRef]);\n  useEffect(() => {\n    const list = filtersListRef.current;\n    const rightButton = rightBtnRef.current;\n    const leftButton = leftBtnRef.current;\n    /* istanbul ignore next */ // not testable without complex mocking useRef\n    if (!list || !leftButton || !rightButton) return;\n\n    const update = () => {\n      const rightArrowWidth = rightButton.offsetWidth;\n      const showingRightButton =\n        list.scrollLeft + list.clientWidth < list.scrollWidth - rightArrowWidth;\n      const showingLeftButton = list.scrollLeft > 0;\n      rightButton.style.visibility = showingRightButton ? 'visible' : 'hidden';\n      rightButton.style.opacity = showingRightButton ? '1' : '0';\n      leftButton.style.visibility = showingLeftButton ? 'visible' : 'hidden';\n      leftButton.style.opacity = showingLeftButton ? '1' : '0';\n    };\n\n    list.addEventListener('scroll', update);\n    window.addEventListener('resize', update);\n    update();\n    return () => {\n      list.removeEventListener('scroll', update);\n      window.removeEventListener('resize', update);\n    };\n  }, [filterOptions]);\n\n  return (\n    <div className={style.filtersMainContainer} data-name=\"search\">\n      <div className={style.leftArrowButton} ref={leftBtnRef} style={{visibility: 'hidden'}}>\n        <ButtonLink\n          icon={{position: 'left', faIcon: {name: 'arrow-left', size: 15}}}\n          onClick={handleScrollLeft}\n          className={style.leftArrowButton}\n          customStyle={{height: '36px'}}\n          data-testid=\"scroll-left-button\"\n        />\n      </div>\n      <div\n        className={style.filtersList}\n        ref={filtersListRef}\n        data-testid=\"filters-options-list\"\n        aria-label={filterOptionsAriaLabel}\n      >\n        <div\n          data-testid=\"all-option\"\n          className={classNames(style.defaultOption, defaultSelected && style.filterSelected)}\n          onClick={onDefaultClick}\n        >\n          <FaIcon\n            iconName={defaultIconName}\n            size={{faSize: 20, wrapperSize: 20}}\n            aria-label={defaultAriaLabel}\n          />\n          <span className={style.filterLabel}>{defaultLabel}</span>\n          <div className={style.bar} style={{background: primarySkinColor}} />\n        </div>\n        <div className={style.filterSeparator} />\n        <div className={style.filtersContainer}>\n          {filterOptions.map((filterOption, idx) => {\n            const {iconName, label, selected, value, onClick, ariaLabel} = filterOption;\n            return (\n              <div\n                key={idx}\n                className={classNames(style.filterOption, selected && style.filterSelected)}\n                data-testid={`filter-${value}-${idx}`}\n                style={{borderBottomColor: primarySkinColor}}\n                onClick={onClick}\n              >\n                <FaIcon\n                  iconName={iconName}\n                  size={{faSize: 20, wrapperSize: 20}}\n                  aria-label={ariaLabel}\n                />\n                <span>{label}</span>\n                <div className={style.bar} style={{background: primarySkinColor}} />\n              </div>\n            );\n          })}\n          <div className={style.rightArrowButton} ref={rightBtnRef} style={{visibility: 'hidden'}}>\n            <ButtonLink\n              icon={{\n                position: 'left',\n                faIcon: {\n                  name: 'arrow-right',\n                  size: 15\n                }\n              }}\n              className={style.rightArrowButton}\n              onClick={handleScrollRight}\n              customStyle={{height: '36px'}}\n              data-testid=\"scroll-right-button\"\n            />\n          </div>\n        </div>\n      </div>\n      {getFilterButton(filterButton, primarySkinColor)}\n    </div>\n  );\n};\n\nQuickFilters.propTypes = propTypes;\nQuickFilters.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\nexport default QuickFilters;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useRef","useEffect","classNames","FaIcon","COLORS","ButtonLink","Provider","GetSkinFromContext","style","propTypes","SCROLL_RIGHT_SIZE","SCROLL_LEFT_SIZE","handleScroll","direction","listRef","current","scrollBy","left","behavior","getFilterButton","filterButtonProps","primarySkinColor","tag","rest","createElement","className","filterButtonWrapper","borderColor","label","filterButton","_extends","icon","position","faIcon","name","size","color","cm_grey_700","neutral_500","customStyle","backgroundColor","undefined","borderRadius","QuickFilters","primaryOption","filterOptions","filterOptionsAriaLabel","context","skin","_get","defaultLabel","defaultIconName","defaultSelected","defaultAriaLabel","onDefaultClick","filtersListRef","rightBtnRef","leftBtnRef","handleScrollRight","handleScrollLeft","list","rightButton","leftButton","update","rightArrowWidth","offsetWidth","showingRightButton","scrollLeft","clientWidth","scrollWidth","showingLeftButton","visibility","opacity","addEventListener","window","removeEventListener","filtersMainContainer","leftArrowButton","ref","onClick","height","filtersList","defaultOption","filterSelected","iconName","faSize","wrapperSize","filterLabel","bar","background","filterSeparator","filtersContainer","map","filterOption","idx","selected","value","ariaLabel","key","borderBottomColor","rightArrowButton","process","env","NODE_ENV","contextTypes","childContextTypes"],"sources":["../../../src/molecule/quick-filters/index.tsx"],"sourcesContent":["import React, {useCallback, useRef, useEffect} from 'react';\nimport classNames from 'classnames';\nimport {get} from 'lodash/fp';\nimport FaIcon from '../../atom/icon';\nimport {COLORS} from '../../variables/colors';\nimport ButtonLink from '../../atom/button-link';\nimport {ButtonLinkProps} from '../../atom/button-link/types';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\nimport style from './style.css';\nimport {QuickFiltersProps, propTypes} from './types';\n\nconst SCROLL_RIGHT_SIZE = 400;\nconst SCROLL_LEFT_SIZE = -400;\nexport const handleScroll = (direction: number, listRef: React.RefObject<HTMLDivElement>) => {\n  if (listRef.current) {\n    listRef.current.scrollBy({\n      left: direction,\n      behavior: 'smooth'\n    });\n  }\n};\n\nconst getFilterButton = (\n  filterButtonProps: ButtonLinkProps | undefined,\n  primarySkinColor: string\n) => {\n  if (!filterButtonProps) return null;\n  const {tag, ...rest} = filterButtonProps;\n  return (\n    <div\n      className={style.filterButtonWrapper}\n      style={{borderColor: tag?.label ? primarySkinColor : 'transparent'}}\n    >\n      <div className={style.filterButton}>\n        <ButtonLink\n          {...rest}\n          icon={{\n            position: 'left',\n            faIcon: {\n              name: 'sliders',\n              size: 14,\n              color: tag ? COLORS.cm_grey_700 : COLORS.neutral_500\n            }\n          }}\n          tag={\n            tag\n              ? {\n                  label: tag.label,\n                  customStyle: {backgroundColor: primarySkinColor, color: '#FFFFFF'}\n                }\n              : undefined\n          }\n          className={style.filterButton}\n          data-testid=\"open-filters-modal-button\"\n          customStyle={{borderRadius: '12px'}}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst QuickFilters = (\n  {primaryOption, filterOptions, filterButton, filterOptionsAriaLabel}: QuickFiltersProps,\n  context: WebContextValues\n) => {\n  const skin = GetSkinFromContext(context);\n  const primarySkinColor = get('common.primary', skin);\n  const {defaultLabel, defaultIconName, defaultSelected, defaultAriaLabel, onDefaultClick} =\n    primaryOption;\n  const filtersListRef = React.useRef<HTMLDivElement>(null);\n  const rightBtnRef = useRef<HTMLDivElement>(null);\n  const leftBtnRef = useRef<HTMLDivElement>(null);\n\n  const handleScrollRight = useCallback(() => {\n    handleScroll(SCROLL_RIGHT_SIZE, filtersListRef);\n  }, [filtersListRef]);\n  const handleScrollLeft = useCallback(() => {\n    handleScroll(SCROLL_LEFT_SIZE, filtersListRef);\n  }, [filtersListRef]);\n  useEffect(() => {\n    const list = filtersListRef.current;\n    const rightButton = rightBtnRef.current;\n    const leftButton = leftBtnRef.current;\n    /* istanbul ignore next */ // not testable without complex mocking useRef\n    if (!list || !leftButton || !rightButton) return;\n\n    const update = () => {\n      const rightArrowWidth = rightButton.offsetWidth;\n      const showingRightButton =\n        list.scrollLeft + list.clientWidth < list.scrollWidth - rightArrowWidth;\n      const showingLeftButton = list.scrollLeft > 0;\n      rightButton.style.visibility = showingRightButton ? 'visible' : 'hidden';\n      rightButton.style.opacity = showingRightButton ? '1' : '0';\n      leftButton.style.visibility = showingLeftButton ? 'visible' : 'hidden';\n      leftButton.style.opacity = showingLeftButton ? '1' : '0';\n    };\n\n    list.addEventListener('scroll', update);\n    window.addEventListener('resize', update);\n    update();\n    return () => {\n      list.removeEventListener('scroll', update);\n      window.removeEventListener('resize', update);\n    };\n  }, [filterOptions]);\n\n  return (\n    <div className={style.filtersMainContainer} data-name=\"search\">\n      <div className={style.leftArrowButton} ref={leftBtnRef} style={{visibility: 'hidden'}}>\n        <ButtonLink\n          icon={{position: 'left', faIcon: {name: 'arrow-left', size: 15}}}\n          onClick={handleScrollLeft}\n          className={style.leftArrowButton}\n          customStyle={{height: '36px'}}\n          data-testid=\"scroll-left-button\"\n        />\n      </div>\n      <div\n        className={style.filtersList}\n        ref={filtersListRef}\n        data-testid=\"filters-options-list\"\n        aria-label={filterOptionsAriaLabel}\n      >\n        <div\n          data-testid=\"all-option\"\n          className={classNames(style.defaultOption, defaultSelected && style.filterSelected)}\n          onClick={onDefaultClick}\n        >\n          <FaIcon\n            iconName={defaultIconName}\n            size={{faSize: 20, wrapperSize: 20}}\n            aria-label={defaultAriaLabel}\n          />\n          <span className={style.filterLabel}>{defaultLabel}</span>\n          <div className={style.bar} style={{background: primarySkinColor}} />\n        </div>\n        <div className={style.filterSeparator} />\n        <div className={style.filtersContainer}>\n          {filterOptions.map((filterOption, idx) => {\n            const {iconName, label, selected, value, onClick, ariaLabel} = filterOption;\n            return (\n              <div\n                key={idx}\n                className={classNames(style.filterOption, selected && style.filterSelected)}\n                data-testid={`filter-${value}-${idx}`}\n                style={{borderBottomColor: primarySkinColor}}\n                onClick={onClick}\n              >\n                <FaIcon\n                  iconName={iconName}\n                  size={{faSize: 20, wrapperSize: 20}}\n                  aria-label={ariaLabel}\n                />\n                <span className={style.filterLabel}>{label}</span>\n                <div className={style.bar} style={{background: primarySkinColor}} />\n              </div>\n            );\n          })}\n          <div className={style.rightArrowButton} ref={rightBtnRef} style={{visibility: 'hidden'}}>\n            <ButtonLink\n              icon={{\n                position: 'left',\n                faIcon: {\n                  name: 'arrow-right',\n                  size: 15\n                }\n              }}\n              className={style.rightArrowButton}\n              onClick={handleScrollRight}\n              customStyle={{height: '36px'}}\n              data-testid=\"scroll-right-button\"\n            />\n          </div>\n        </div>\n      </div>\n      {getFilterButton(filterButton, primarySkinColor)}\n    </div>\n  );\n};\n\nQuickFilters.propTypes = propTypes;\nQuickFilters.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\nexport default QuickFilters;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/quick-filters/style.css

@@ -113,6 +113,8 @@
 
 .filterLabel {
     min-width: 70px;
+    user-select: none;
+    text-align: center;
 }
 
 .filterSeparator {
@@ -190,10 +192,13 @@
 }
 
 @media mobile {
-    .leftArrowButton, .rightArrowButton, .filterButton, .filterButtonWrapper {
+    .leftArrowButton, .rightArrowButton {
         display: none!important;
     }
-
+    .filtersMainContainer {
+        margin: 0px;
+        padding: 20px 0px 0px 0px;
+    }
     .filtersList{
         margin-right: 0;
     }

package/es/molecule/tabs/index.d.ts

@@ -0,0 +1,39 @@
+export default Tabs;
+declare function Tabs(props: any, context: any): JSX.Element;
+declare namespace Tabs {
+    namespace contextTypes {
+        const skin: PropTypes.Requireable<PropTypes.InferProps<{
+            common: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            images: PropTypes.Requireable<PropTypes.InferProps<{
+                'logo-mobile': PropTypes.Requireable<any>;
+                logo: PropTypes.Requireable<any>;
+                'logo-email': PropTypes.Requireable<any>;
+                login: PropTypes.Requireable<any>;
+            }>>;
+            icons: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            mod: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            courses: PropTypes.Requireable<any[]>;
+            texts: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
+        const translate: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    namespace propTypes {
+        const items: PropTypes.Requireable<(PropTypes.InferProps<{
+            title: PropTypes.Requireable<string>;
+            count: PropTypes.Requireable<number>;
+            'aria-label': PropTypes.Requireable<string>;
+            onClick: PropTypes.Requireable<(...args: any[]) => any>;
+            isActive: PropTypes.Requireable<boolean>;
+        }> | null | undefined)[]>;
+    }
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

package/es/molecule/tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/tabs/index.js"],"names":[],"mappings":";AAeA,6DAkDC"}

package/es/molecule/tabs/index.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { convert } from 'css-color-function';
+import PropTypes from 'prop-types';
+import getOr from 'lodash/fp/getOr';
+import Provider from '../../atom/provider';
+import { COLORS } from '../../variables/colors';
+import Tag from '../../atom/tag';
+import style from './style.css';
+const handleTabClick = tab => e => {
+  if (tab && typeof tab.onClick === 'function') tab.onClick(e);
+};
+const handleTabKeyDown = tab => e => {
+  if (e.key === 'Enter') handleTabClick(tab)(e);
+};
+const Tabs = (props, context) => {
+  const {
+    items = []
+  } = props;
+  const {
+    skin
+  } = context;
+  const primaryColor = getOr('#00B0FF', 'common.primary', skin);
+  const createTab = (index, tab) => {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: style.tab,
+      role: "tab",
+      tabIndex: 0,
+      "aria-selected": tab.isActive,
+      "aria-label": tab['aria-label'] || tab.title,
+      onClick: handleTabClick(tab),
+      onKeyDown: handleTabKeyDown(tab),
+      style: {
+        '--hover-bg': convert(`color(${tab.isActive ? primaryColor : COLORS.cm_grey_500} a(0.15))`),
+        '--bg': tab.isActive ? convert(`color(${primaryColor} a(0.07))`) : 'transparent',
+        color: tab.isActive ? primaryColor : COLORS.cm_grey_500
+      }
+    }, /*#__PURE__*/React.createElement("span", null, tab.title), typeof tab.count === 'number' ? /*#__PURE__*/React.createElement(Tag, {
+      label: tab.count.toString(),
+      type: "default",
+      size: "S",
+      customStyle: {
+        backgroundColor: tab.isActive ? convert(`color(${primaryColor} a(0.25))`) : COLORS.cm_grey_200,
+        color: tab.isActive ? primaryColor : COLORS.cm_grey_500
+      }
+    }) : null);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.tabs,
+    role: "tablist"
+  }, items && items.map((tab, index) => {
+    return createTab(index, tab);
+  }));
+};
+Tabs.contextTypes = {
+  skin: Provider.childContextTypes.skin,
+  translate: Provider.childContextTypes.translate
+};
+Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
+  items: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    count: PropTypes.number,
+    'aria-label': PropTypes.string,
+    onClick: PropTypes.func,
+    isActive: PropTypes.bool
+  }))
+} : {};
+export default Tabs;
+//# sourceMappingURL=index.js.map

package/es/molecule/tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","convert","PropTypes","getOr","Provider","COLORS","Tag","style","handleTabClick","tab","e","onClick","handleTabKeyDown","key","Tabs","props","context","items","skin","primaryColor","createTab","index","createElement","className","role","tabIndex","isActive","title","onKeyDown","cm_grey_500","color","count","label","toString","type","size","customStyle","backgroundColor","cm_grey_200","tabs","map","contextTypes","childContextTypes","translate","propTypes","process","env","NODE_ENV","arrayOf","shape","string","number","func","bool"],"sources":["../../../src/molecule/tabs/index.js"],"sourcesContent":["import React from 'react';\nimport {convert} from 'css-color-function';\nimport PropTypes from 'prop-types';\nimport getOr from 'lodash/fp/getOr';\nimport Provider from '../../atom/provider';\nimport {COLORS} from '../../variables/colors';\nimport Tag from '../../atom/tag';\nimport style from './style.css';\n\nconst handleTabClick = tab => e => {\n  if (tab && typeof tab.onClick === 'function') tab.onClick(e);\n};\nconst handleTabKeyDown = tab => e => {\n  if (e.key === 'Enter') handleTabClick(tab)(e);\n};\nconst Tabs = (props, context) => {\n  const {items = []} = props;\n  const {skin} = context;\n  const primaryColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const createTab = (index, tab) => {\n    return (\n      <div\n        key={index}\n        className={style.tab}\n        role=\"tab\"\n        tabIndex={0}\n        aria-selected={tab.isActive}\n        aria-label={tab['aria-label'] || tab.title}\n        onClick={handleTabClick(tab)}\n        onKeyDown={handleTabKeyDown(tab)}\n        style={{\n          '--hover-bg': convert(\n            `color(${tab.isActive ? primaryColor : COLORS.cm_grey_500} a(0.15))`\n          ),\n          '--bg': tab.isActive ? convert(`color(${primaryColor} a(0.07))`) : 'transparent',\n          color: tab.isActive ? primaryColor : COLORS.cm_grey_500\n        }}\n      >\n        <span>{tab.title}</span>\n        {typeof tab.count === 'number' ? (\n          <Tag\n            label={tab.count.toString()}\n            type=\"default\"\n            size=\"S\"\n            customStyle={{\n              backgroundColor: tab.isActive\n                ? convert(`color(${primaryColor} a(0.25))`)\n                : COLORS.cm_grey_200,\n              color: tab.isActive ? primaryColor : COLORS.cm_grey_500\n            }}\n          />\n        ) : null}\n      </div>\n    );\n  };\n\n  return (\n    <div className={style.tabs} role=\"tablist\">\n      {items &&\n        items.map((tab, index) => {\n          return createTab(index, tab);\n        })}\n    </div>\n  );\n};\n\nTabs.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nTabs.propTypes = {\n  items: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      count: PropTypes.number,\n      'aria-label': PropTypes.string,\n      onClick: PropTypes.func,\n      isActive: PropTypes.bool\n    })\n  )\n};\n\nexport default Tabs;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAQC,OAAO,QAAO,oBAAoB;AAC1C,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,KAAK,MAAM,iBAAiB;AACnC,OAAOC,QAAQ,MAAM,qBAAqB;AAC1C,SAAQC,MAAM,QAAO,wBAAwB;AAC7C,OAAOC,GAAG,MAAM,gBAAgB;AAChC,OAAOC,KAAK,MAAM,aAAa;AAE/B,MAAMC,cAAc,GAAGC,GAAG,IAAIC,CAAC,IAAI;EACjC,IAAID,GAAG,IAAI,OAAOA,GAAG,CAACE,OAAO,KAAK,UAAU,EAAEF,GAAG,CAACE,OAAO,CAACD,CAAC,CAAC;AAC9D,CAAC;AACD,MAAME,gBAAgB,GAAGH,GAAG,IAAIC,CAAC,IAAI;EACnC,IAAIA,CAAC,CAACG,GAAG,KAAK,OAAO,EAAEL,cAAc,CAACC,GAAG,CAAC,CAACC,CAAC,CAAC;AAC/C,CAAC;AACD,MAAMI,IAAI,GAAGA,CAACC,KAAK,EAAEC,OAAO,KAAK;EAC/B,MAAM;IAACC,KAAK,GAAG;EAAE,CAAC,GAAGF,KAAK;EAC1B,MAAM;IAACG;EAAI,CAAC,GAAGF,OAAO;EACtB,MAAMG,YAAY,GAAGhB,KAAK,CAAC,SAAS,EAAE,gBAAgB,EAAEe,IAAI,CAAC;EAE7D,MAAME,SAAS,GAAGA,CAACC,KAAK,EAAEZ,GAAG,KAAK;IAChC,oBACET,KAAA,CAAAsB,aAAA;MACET,GAAG,EAAEQ,KAAM;MACXE,SAAS,EAAEhB,KAAK,CAACE,GAAI;MACrBe,IAAI,EAAC,KAAK;MACVC,QAAQ,EAAE,CAAE;MACZ,iBAAehB,GAAG,CAACiB,QAAS;MAC5B,cAAYjB,GAAG,CAAC,YAAY,CAAC,IAAIA,GAAG,CAACkB,KAAM;MAC3ChB,OAAO,EAAEH,cAAc,CAACC,GAAG,CAAE;MAC7BmB,SAAS,EAAEhB,gBAAgB,CAACH,GAAG,CAAE;MACjCF,KAAK,EAAE;QACL,YAAY,EAAEN,OAAO,CACnB,SAASQ,GAAG,CAACiB,QAAQ,GAAGP,YAAY,GAAGd,MAAM,CAACwB,WAAW,WAC3D,CAAC;QACD,MAAM,EAAEpB,GAAG,CAACiB,QAAQ,GAAGzB,OAAO,CAAC,SAASkB,YAAY,WAAW,CAAC,GAAG,aAAa;QAChFW,KAAK,EAAErB,GAAG,CAACiB,QAAQ,GAAGP,YAAY,GAAGd,MAAM,CAACwB;MAC9C;IAAE,gBAEF7B,KAAA,CAAAsB,aAAA,eAAOb,GAAG,CAACkB,KAAY,CAAC,EACvB,OAAOlB,GAAG,CAACsB,KAAK,KAAK,QAAQ,gBAC5B/B,KAAA,CAAAsB,aAAA,CAAChB,GAAG;MACF0B,KAAK,EAAEvB,GAAG,CAACsB,KAAK,CAACE,QAAQ,CAAC,CAAE;MAC5BC,IAAI,EAAC,SAAS;MACdC,IAAI,EAAC,GAAG;MACRC,WAAW,EAAE;QACXC,eAAe,EAAE5B,GAAG,CAACiB,QAAQ,GACzBzB,OAAO,CAAC,SAASkB,YAAY,WAAW,CAAC,GACzCd,MAAM,CAACiC,WAAW;QACtBR,KAAK,EAAErB,GAAG,CAACiB,QAAQ,GAAGP,YAAY,GAAGd,MAAM,CAACwB;MAC9C;IAAE,CACH,CAAC,GACA,IACD,CAAC;EAEV,CAAC;EAED,oBACE7B,KAAA,CAAAsB,aAAA;IAAKC,SAAS,EAAEhB,KAAK,CAACgC,IAAK;IAACf,IAAI,EAAC;EAAS,GACvCP,KAAK,IACJA,KAAK,CAACuB,GAAG,CAAC,CAAC/B,GAAG,EAAEY,KAAK,KAAK;IACxB,OAAOD,SAAS,CAACC,KAAK,EAAEZ,GAAG,CAAC;EAC9B,CAAC,CACA,CAAC;AAEV,CAAC;AAEDK,IAAI,CAAC2B,YAAY,GAAG;EAClBvB,IAAI,EAAEd,QAAQ,CAACsC,iBAAiB,CAACxB,IAAI;EACrCyB,SAAS,EAAEvC,QAAQ,CAACsC,iBAAiB,CAACC;AACxC,CAAC;AAED7B,IAAI,CAAC8B,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EACf9B,KAAK,EAAEf,SAAS,CAAC8C,OAAO,CACtB9C,SAAS,CAAC+C,KAAK,CAAC;IACdtB,KAAK,EAAEzB,SAAS,CAACgD,MAAM;IACvBnB,KAAK,EAAE7B,SAAS,CAACiD,MAAM;IACvB,YAAY,EAAEjD,SAAS,CAACgD,MAAM;IAC9BvC,OAAO,EAAET,SAAS,CAACkD,IAAI;IACvB1B,QAAQ,EAAExB,SAAS,CAACmD;EACtB,CAAC,CACH;AACF,CAAC;AAED,eAAevC,IAAI","ignoreList":[]}