@hitachivantara/uikit-react-core 5.1.2 → 5.2.0

package/dist/esm/components/FilterGroup/FilterGroup.js

@@ -0,0 +1,116 @@
+import filterGroupClasses from "./filterGroupClasses.js";
+import { clsx } from "clsx";
+import { styles } from "./FilterGroup.styles.js";
+import { HvFilterGroupProvider } from "./FilterGroupContext.js";
+import { ClassNames } from "@emotion/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import useUniqueId from "../../hooks/useUniqueId.js";
+import { HvFilterGroupContent } from "./FilterContent/FilterContent.js";
+import { useControlled } from "../../hooks/useControlled.js";
+import { useLabels } from "../../hooks/useLabels.js";
+import { HvFormElement } from "../Forms/FormElement/FormElement.js";
+import { HvLabel } from "../Forms/Label/Label.js";
+import { setId } from "../../utils/setId.js";
+import { HvInfoMessage } from "../Forms/InfoMessage/InfoMessage.js";
+import { HvWarningText } from "../Forms/WarningText/WarningText.js";
+const DEFAULT_LABELS = {
+  applyLabel: "Apply",
+  cancelLabel: "Cancel",
+  clearLabel: "Clear Filters",
+  placeholder: "Filters",
+  searchBoxPlaceholder: "Search",
+  selectAll: "All",
+  multiSelectionConjunction: "/"
+};
+const HvFilterGroup = ({
+  className,
+  id,
+  name,
+  required = false,
+  disabled = false,
+  label,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  description,
+  "aria-describedby": ariaDescribedBy,
+  onChange,
+  onCancel,
+  onClear,
+  status,
+  statusMessage,
+  labels: labelsProp,
+  defaultValue,
+  value,
+  filters,
+  horizontalPlacement = "right",
+  disablePortal = true,
+  escapeWithReference = true,
+  height = 350,
+  filterContentProps,
+  classes,
+  ...others
+}) => {
+  const [validationMessage] = useControlled(statusMessage, "Required");
+  const elementId = useUniqueId(id, "hvfiltergroup");
+  const labels = useLabels(DEFAULT_LABELS, labelsProp);
+  const hasLabel = label != null;
+  const hasDescription = description != null;
+  const canShowError = status !== void 0 || required;
+  return /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css
+    }) => /* @__PURE__ */ jsxs(HvFormElement, {
+      id,
+      name,
+      value,
+      status,
+      disabled,
+      required,
+      className: clsx(className, classes == null ? void 0 : classes.root, filterGroupClasses.root),
+      ...others,
+      children: [(hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", {
+        className: clsx(classes == null ? void 0 : classes.labelContainer, filterGroupClasses.labelContainer, css(styles.labelContainer)),
+        children: [hasLabel && /* @__PURE__ */ jsx(HvLabel, {
+          id: setId(elementId, "label"),
+          htmlFor: setId(elementId, "input"),
+          label,
+          className: clsx(classes == null ? void 0 : classes.label, filterGroupClasses.label, css(styles.label))
+        }), hasDescription && /* @__PURE__ */ jsx(HvInfoMessage, {
+          id: setId(elementId, "description"),
+          className: clsx(classes == null ? void 0 : classes.description, filterGroupClasses.description),
+          children: description
+        })]
+      }), /* @__PURE__ */ jsxs(HvFilterGroupProvider, {
+        defaultValue,
+        value,
+        filters,
+        children: [/* @__PURE__ */ jsx(HvFilterGroupContent, {
+          id: elementId,
+          disabled,
+          disablePortal,
+          variableWidth: true,
+          placement: horizontalPlacement,
+          escapeWithReference,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          status,
+          onChange,
+          onCancel,
+          onClear,
+          labels,
+          height,
+          ...filterContentProps
+        }), canShowError && /* @__PURE__ */ jsx(HvWarningText, {
+          id: setId(elementId, "error"),
+          disableBorder: true,
+          className: clsx(classes == null ? void 0 : classes.error, filterGroupClasses.error),
+          children: validationMessage
+        })]
+      })]
+    })
+  });
+};
+export {
+  HvFilterGroup
+};
+//# sourceMappingURL=FilterGroup.js.map

package/dist/esm/components/FilterGroup/FilterGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterGroup.js","sources":["../../../../src/components/FilterGroup/FilterGroup.tsx"],"sourcesContent":["import {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"@core/components\";\nimport filterGroupClasses, { HvFilterGroupClasses } from \"./filterGroupClasses\";\nimport {\n  HvFilterGroupContent,\n  HvFilterGroupContentProps,\n} from \"./FilterContent\";\nimport { clsx } from \"clsx\";\nimport { useControlled, useLabels, useUniqueId } from \"@core/hooks\";\nimport { styles } from \"./FilterGroup.styles\";\nimport { setId } from \"@core/utils\";\nimport { HvFilterGroupProvider } from \"./FilterGroupContext\";\nimport { ClassNames } from \"@emotion/react\";\n\nexport type HvFilterGroupValue = (string | number)[][];\n\nexport interface HvFilterGroupLabels {\n  /** Apply button label. */\n  applyLabel?: string;\n  /** Cancel button label. */\n  cancelLabel?: string;\n  /** Cancel button label. */\n  clearLabel?: string;\n  /** Placeholder label. */\n  placeholder?: string;\n  /** SearchBox placeholder label. */\n  searchBoxPlaceholder?: string;\n  /** Select All placeholder label. */\n  selectAll?: string;\n  /** Multi selection conjunction placeholder label. */\n  multiSelectionConjunction?: string;\n}\n\nexport type HvFilterGroupFilters = {\n  id: string;\n  name: string;\n  data: {\n    id: string | number;\n    name: string;\n  }[];\n}[];\n\nexport type HvFilterGroupHorizontalPlacement = \"left\" | \"right\";\n\nexport interface HvFilterGroupProps\n  extends Omit<\n    HvFormElementProps,\n    \"onChange\" | \"defaultValue\" | \"statusMessage\"\n  > {\n  /** The initial value of the input when in single calendar mode. */\n  filters: HvFilterGroupFilters;\n  /** The form element name. */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**  Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**  The error message to show when `status` is \"invalid\". Defaults to \"Required\". */\n  statusMessage?: React.ReactNode;\n  /** The callback fired when the cancel button is clicked. */\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  /** The callback fired when the clear filters button is clicked. */\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** The callback fired when the value changes. */\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue\n  ) => void;\n  /** An Object containing the various text associated with the input. */\n  labels?: HvFilterGroupLabels;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** The default value of the filter group. If defined the clear action will reset to it. */\n  defaultValue?: HvFilterGroupValue;\n  /** The value of the filter group. */\n  value?: HvFilterGroupValue;\n  /** The placement where the filter group should be placed according to the input. Options are `left` or `right`. */\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the filter container should be out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** The height of the filter panel, between 295 and 425. Defaults to 350 */\n  height?: number | string;\n  /** The filter content props */\n  filterContentProps?: Partial<HvFilterGroupContentProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFilterGroupClasses;\n}\n\nconst DEFAULT_LABELS: HvFilterGroupLabels = {\n  applyLabel: \"Apply\",\n  cancelLabel: \"Cancel\",\n  clearLabel: \"Clear Filters\",\n  placeholder: \"Filters\",\n  searchBoxPlaceholder: \"Search\",\n  selectAll: \"All\",\n  multiSelectionConjunction: \"/\",\n};\n\n/**\n * This component implements one potential use-case of the Filter Group pattern Design System Specifies.\n * Due to the enormous variety of capabilities required for this, we strongly recommend checking the code of the component and extend it yourself,\n * while we do not provide a better approach for building this component with smaller and more composable parts.\n */\nexport const HvFilterGroup = ({\n  className,\n  id,\n  name,\n  required = false,\n  disabled = false,\n  label,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  description,\n  \"aria-describedby\": ariaDescribedBy,\n  onChange,\n  onCancel,\n  onClear,\n  status,\n  statusMessage,\n  labels: labelsProp,\n  defaultValue,\n  value,\n  filters,\n  horizontalPlacement = \"right\",\n  disablePortal = true,\n  escapeWithReference = true,\n  height = 350,\n  filterContentProps,\n  classes,\n  ...others\n}: HvFilterGroupProps) => {\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const elementId = useUniqueId(id, \"hvfiltergroup\");\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const hasLabel = label != null;\n\n  const hasDescription = description != null;\n\n  // Error message area will only be needed if the status is being controlled\n  // or if required is true\n  const canShowError = status !== undefined || required;\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <HvFormElement\n          id={id}\n          name={name}\n          value={value}\n          status={status}\n          disabled={disabled}\n          required={required}\n          className={clsx(className, classes?.root, filterGroupClasses.root)}\n          {...others}\n        >\n          {(hasLabel || hasDescription) && (\n            <div\n              className={clsx(\n                classes?.labelContainer,\n                filterGroupClasses.labelContainer,\n                css(styles.labelContainer)\n              )}\n            >\n              {hasLabel && (\n                <HvLabel\n                  id={setId(elementId, \"label\")}\n                  htmlFor={setId(elementId, \"input\")}\n                  label={label}\n                  className={clsx(\n                    classes?.label,\n                    filterGroupClasses.label,\n                    css(styles.label)\n                  )}\n                />\n              )}\n\n              {hasDescription && (\n                <HvInfoMessage\n                  id={setId(elementId, \"description\")}\n                  className={clsx(\n                    classes?.description,\n                    filterGroupClasses.description\n                  )}\n                >\n                  {description}\n                </HvInfoMessage>\n              )}\n            </div>\n          )}\n          <HvFilterGroupProvider\n            defaultValue={defaultValue}\n            value={value}\n            filters={filters}\n          >\n            <HvFilterGroupContent\n              id={elementId}\n              disabled={disabled}\n              disablePortal={disablePortal}\n              variableWidth\n              placement={horizontalPlacement}\n              escapeWithReference={escapeWithReference}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledBy}\n              status={status}\n              onChange={onChange}\n              onCancel={onCancel}\n              onClear={onClear}\n              labels={labels}\n              height={height}\n              {...filterContentProps}\n            />\n            {canShowError && (\n              <HvWarningText\n                id={setId(elementId, \"error\")}\n                disableBorder\n                className={clsx(classes?.error, filterGroupClasses.error)}\n              >\n                {validationMessage}\n              </HvWarningText>\n            )}\n          </HvFilterGroupProvider>\n        </HvFormElement>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["DEFAULT_LABELS","applyLabel","cancelLabel","clearLabel","placeholder","searchBoxPlaceholder","selectAll","multiSelectionConjunction","HvFilterGroup","className","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onCancel","onClear","status","statusMessage","labels","labelsProp","defaultValue","value","filters","horizontalPlacement","disablePortal","escapeWithReference","height","filterContentProps","classes","others","validationMessage","useControlled","elementId","useUniqueId","useLabels","hasLabel","hasDescription","canShowError","undefined","ClassNames","children","css","HvFormElement","clsx","root","filterGroupClasses","labelContainer","styles","_jsx","HvLabel","setId","htmlFor","HvInfoMessage","_jsxs","HvFilterGroupProvider","HvFilterGroupContent","variableWidth","placement","HvWarningText","disableBorder","error"],"mappings":"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"}

package/dist/esm/components/FilterGroup/FilterGroup.styles.js

@@ -0,0 +1,14 @@
+const styles = {
+  label: {
+    display: "flex",
+    alignItems: "flex-start"
+  },
+  labelContainer: {
+    display: "flex",
+    alignItems: "flex-start"
+  }
+};
+export {
+  styles
+};
+//# sourceMappingURL=FilterGroup.styles.js.map

package/dist/esm/components/FilterGroup/FilterGroup.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterGroup.styles.js","sources":["../../../../src/components/FilterGroup/FilterGroup.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\n\nexport const styles: {\n  label: CSSInterpolation;\n  labelContainer: CSSInterpolation;\n} = {\n  label: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n};\n"],"names":["styles","label","display","alignItems","labelContainer"],"mappings":"AAEO,MAAMA,SAGT;AAAA,EACFC,OAAO;AAAA,IACLC,SAAS;AAAA,IACTC,YAAY;AAAA,EACd;AAAA,EACAC,gBAAgB;AAAA,IAAEF,SAAS;AAAA,IAAQC,YAAY;AAAA,EAAa;AAC9D;"}

package/dist/esm/components/FilterGroup/FilterGroupContext.js

@@ -0,0 +1,67 @@
+import { createContext, useState, useEffect, useCallback, useMemo } from "react";
+import isEqual from "lodash/isEqual";
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useSavedState } from "../../utils/useSavedState.js";
+const HvFilterGroupContext = createContext({
+  activeGroup: 0,
+  setActiveGroup: () => {
+  },
+  filterOptions: [],
+  setFilterValues: () => {
+  },
+  rollbackFilters: () => {
+  },
+  clearFilters: () => {
+  },
+  applyFilters: () => {
+  },
+  applyDisabled: false,
+  filterValues: [],
+  appliedFilters: void 0,
+  defaultValue: void 0
+});
+const groups = (filters) => filters.map(() => []);
+const HvFilterGroupProvider = ({
+  defaultValue,
+  value,
+  filters,
+  children
+}) => {
+  const [group, setActiveGroup] = useState(0);
+  const [filterValues, setFilterValues, rollbackFilters, appliedFilters] = useSavedState(value || groups(filters));
+  const [applyDisabled, setApplyDisabled] = useState(false);
+  useEffect(() => {
+    setFilterValues(value, true);
+  }, [value, setFilterValues]);
+  useEffect(() => {
+    setApplyDisabled(isEqual(filterValues, appliedFilters));
+  }, [filterValues, appliedFilters]);
+  const clearFilters = useCallback(() => {
+    setFilterValues(defaultValue || groups(filters));
+  }, [filters, setFilterValues, defaultValue]);
+  const applyFilters = useCallback(() => {
+    setFilterValues(filterValues, true);
+  }, [filterValues, setFilterValues]);
+  const contextValue = useMemo(() => ({
+    activeGroup: group,
+    setActiveGroup,
+    filterOptions: filters,
+    filterValues,
+    setFilterValues,
+    appliedFilters,
+    rollbackFilters,
+    clearFilters,
+    applyFilters,
+    applyDisabled,
+    defaultValue
+  }), [appliedFilters, applyDisabled, applyFilters, clearFilters, filterValues, filters, group, rollbackFilters, setFilterValues, defaultValue]);
+  return /* @__PURE__ */ jsx(HvFilterGroupContext.Provider, {
+    value: contextValue,
+    children
+  });
+};
+export {
+  HvFilterGroupContext,
+  HvFilterGroupProvider
+};
+//# sourceMappingURL=FilterGroupContext.js.map

package/dist/esm/components/FilterGroup/FilterGroupContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterGroupContext.js","sources":["../../../../src/components/FilterGroup/FilterGroupContext.tsx"],"sourcesContent":["import {\n  Dispatch,\n  SetStateAction,\n  createContext,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport isEqual from \"lodash/isEqual\";\nimport { useSavedState } from \"@core/utils\";\nimport { HvFilterGroupFilters, HvFilterGroupValue } from \"./FilterGroup\";\n\ninterface HvFilterGroupContextValue {\n  activeGroup: number;\n  setActiveGroup: Dispatch<SetStateAction<number>>;\n  filterOptions: HvFilterGroupFilters;\n  setFilterValues: (value?: HvFilterGroupValue, save?: boolean) => void;\n  rollbackFilters: () => void;\n  clearFilters: () => void;\n  applyFilters: () => void;\n  applyDisabled: boolean;\n  appliedFilters?: HvFilterGroupValue;\n  defaultValue?: HvFilterGroupValue;\n  filterValues?: HvFilterGroupValue;\n}\n\nexport const HvFilterGroupContext = createContext<HvFilterGroupContextValue>({\n  activeGroup: 0,\n  setActiveGroup: () => {},\n  filterOptions: [],\n  setFilterValues: () => {},\n  rollbackFilters: () => {},\n  clearFilters: () => {},\n  applyFilters: () => {},\n  applyDisabled: false,\n  filterValues: [],\n  appliedFilters: undefined,\n  defaultValue: undefined,\n});\n\nconst groups = (filters: HvFilterGroupFilters) => filters.map(() => []);\n\ninterface HvFilterGroupProviderProps {\n  children: React.ReactNode;\n  filters: HvFilterGroupFilters;\n  defaultValue?: HvFilterGroupValue;\n  value?: HvFilterGroupValue;\n}\n\nexport const HvFilterGroupProvider = ({\n  defaultValue,\n  value,\n  filters,\n  children,\n}: HvFilterGroupProviderProps) => {\n  const [group, setActiveGroup] = useState<number>(0);\n  const [filterValues, setFilterValues, rollbackFilters, appliedFilters] =\n    useSavedState<HvFilterGroupValue>(value || groups(filters));\n  const [applyDisabled, setApplyDisabled] = useState<boolean>(false);\n\n  useEffect(() => {\n    setFilterValues(value, true);\n  }, [value, setFilterValues]);\n\n  useEffect(() => {\n    setApplyDisabled(isEqual(filterValues, appliedFilters));\n  }, [filterValues, appliedFilters]);\n\n  const clearFilters = useCallback(() => {\n    setFilterValues(defaultValue || groups(filters));\n  }, [filters, setFilterValues, defaultValue]);\n\n  const applyFilters = useCallback(() => {\n    setFilterValues(filterValues, true);\n  }, [filterValues, setFilterValues]);\n\n  const contextValue: HvFilterGroupContextValue = useMemo(\n    () => ({\n      activeGroup: group,\n      setActiveGroup,\n      filterOptions: filters,\n      filterValues,\n      setFilterValues,\n      appliedFilters,\n      rollbackFilters,\n      clearFilters,\n      applyFilters,\n      applyDisabled,\n      defaultValue,\n    }),\n    [\n      appliedFilters,\n      applyDisabled,\n      applyFilters,\n      clearFilters,\n      filterValues,\n      filters,\n      group,\n      rollbackFilters,\n      setFilterValues,\n      defaultValue,\n    ]\n  );\n\n  return (\n    <HvFilterGroupContext.Provider value={contextValue}>\n      {children}\n    </HvFilterGroupContext.Provider>\n  );\n};\n"],"names":["HvFilterGroupContext","createContext","activeGroup","setActiveGroup","filterOptions","setFilterValues","rollbackFilters","clearFilters","applyFilters","applyDisabled","filterValues","appliedFilters","undefined","defaultValue","groups","filters","map","HvFilterGroupProvider","value","children","group","useState","useSavedState","setApplyDisabled","useEffect","isEqual","useCallback","contextValue","useMemo","_jsx","Provider"],"mappings":";;;;AA2BO,MAAMA,uBAAuBC,cAAyC;AAAA,EAC3EC,aAAa;AAAA,EACbC,gBAAgBA,MAAM;AAAA,EAAC;AAAA,EACvBC,eAAe,CAAE;AAAA,EACjBC,iBAAiBA,MAAM;AAAA,EAAC;AAAA,EACxBC,iBAAiBA,MAAM;AAAA,EAAC;AAAA,EACxBC,cAAcA,MAAM;AAAA,EAAC;AAAA,EACrBC,cAAcA,MAAM;AAAA,EAAC;AAAA,EACrBC,eAAe;AAAA,EACfC,cAAc,CAAE;AAAA,EAChBC,gBAAgBC;AAAAA,EAChBC,cAAcD;AAChB,CAAC;AAED,MAAME,SAASA,CAACC,YAAkCA,QAAQC,IAAI,MAAM,CAAE,CAAA;AAS/D,MAAMC,wBAAwBA,CAAC;AAAA,EACpCJ;AAAAA,EACAK;AAAAA,EACAH;AAAAA,EACAI;AAC0B,MAAM;AAChC,QAAM,CAACC,OAAOjB,cAAc,IAAIkB,SAAiB,CAAC;AAC5C,QAAA,CAACX,cAAcL,iBAAiBC,iBAAiBK,cAAc,IACnEW,cAAkCJ,SAASJ,OAAOC,OAAO,CAAC;AAC5D,QAAM,CAACN,eAAec,gBAAgB,IAAIF,SAAkB,KAAK;AAEjEG,YAAU,MAAM;AACdnB,oBAAgBa,OAAO,IAAI;AAAA,EAAA,GAC1B,CAACA,OAAOb,eAAe,CAAC;AAE3BmB,YAAU,MAAM;AACGC,qBAAAA,QAAQf,cAAcC,cAAc,CAAC;AAAA,EAAA,GACrD,CAACD,cAAcC,cAAc,CAAC;AAE3BJ,QAAAA,eAAemB,YAAY,MAAM;AACrBb,oBAAAA,gBAAgBC,OAAOC,OAAO,CAAC;AAAA,EAC9C,GAAA,CAACA,SAASV,iBAAiBQ,YAAY,CAAC;AAErCL,QAAAA,eAAekB,YAAY,MAAM;AACrCrB,oBAAgBK,cAAc,IAAI;AAAA,EAAA,GACjC,CAACA,cAAcL,eAAe,CAAC;AAE5BsB,QAAAA,eAA0CC,QAC9C,OAAO;AAAA,IACL1B,aAAakB;AAAAA,IACbjB;AAAAA,IACAC,eAAeW;AAAAA,IACfL;AAAAA,IACAL;AAAAA,IACAM;AAAAA,IACAL;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAI;AAAAA,EAEF,IAAA,CACEF,gBACAF,eACAD,cACAD,cACAG,cACAK,SACAK,OACAd,iBACAD,iBACAQ,YAAY,CACb;AAIDgB,SAAAA,oBAAC7B,qBAAqB8B,UAAQ;AAAA,IAACZ,OAAOS;AAAAA,IAAaR;AAAAA,EAAAA,CAEnB;AAEpC;"}

package/dist/esm/components/FilterGroup/LeftPanel/LeftPanel.js

@@ -0,0 +1,52 @@
+import { useContext } from "react";
+import { HvFilterGroupContext } from "../FilterGroupContext.js";
+import { ClassNames } from "@emotion/react";
+import { styles } from "./LeftPanel.styles.js";
+import { jsx } from "@emotion/react/jsx-runtime";
+import { HvFilterGroupCounter } from "../Counter/Counter.js";
+import { HvPanel } from "../../Panel/Panel.js";
+import { setId } from "../../../utils/setId.js";
+import { HvListContainer } from "../../ListContainer/ListContainer.js";
+import { wrapperTooltip } from "../../../utils/wrapperTooltip.js";
+import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
+const HvFilterGroupLeftPanel = ({
+  id,
+  className,
+  emptyElement
+}) => {
+  const {
+    filterOptions,
+    activeGroup,
+    setActiveGroup
+  } = useContext(HvFilterGroupContext);
+  return /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css
+    }) => /* @__PURE__ */ jsx(HvPanel, {
+      id: setId(id, "leftPanel"),
+      className,
+      children: filterOptions.length > 0 ? /* @__PURE__ */ jsx(HvListContainer, {
+        id: setId(id, "leftPanel-list"),
+        condensed: true,
+        interactive: true,
+        children: filterOptions.map((group, index) => {
+          const ItemText = wrapperTooltip(true, group.name, group.name);
+          return /* @__PURE__ */ jsx(HvListItem, {
+            id: group.id,
+            className: css(styles.listItem),
+            onClick: () => setActiveGroup(index),
+            selected: filterOptions[activeGroup].id === group.id,
+            endAdornment: /* @__PURE__ */ jsx(HvFilterGroupCounter, {
+              id: group.id
+            }),
+            children: /* @__PURE__ */ jsx(ItemText, {})
+          }, group.name);
+        })
+      }) : emptyElement
+    })
+  });
+};
+export {
+  HvFilterGroupLeftPanel
+};
+//# sourceMappingURL=LeftPanel.js.map

package/dist/esm/components/FilterGroup/LeftPanel/LeftPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LeftPanel.js","sources":["../../../../../src/components/FilterGroup/LeftPanel/LeftPanel.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { HvListContainer, HvListItem, HvPanel } from \"@core/components\";\nimport { setId, wrapperTooltip } from \"@core/utils\";\nimport { HvFilterGroupCounter } from \"../Counter\";\nimport { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./LeftPanel.styles\";\n\nexport interface HvFilterGroupLeftPanelProps {\n  id?: string;\n  className?: string;\n  emptyElement?: React.ReactNode;\n}\n\nexport const HvFilterGroupLeftPanel = ({\n  id,\n  className,\n  emptyElement,\n}: HvFilterGroupLeftPanelProps) => {\n  const { filterOptions, activeGroup, setActiveGroup } =\n    useContext(HvFilterGroupContext);\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <HvPanel id={setId(id, \"leftPanel\")} className={className}>\n          {filterOptions.length > 0 ? (\n            <HvListContainer\n              id={setId(id, \"leftPanel-list\")}\n              condensed\n              interactive\n            >\n              {filterOptions.map((group, index) => {\n                const ItemText = wrapperTooltip(true, group.name, group.name);\n\n                return (\n                  <HvListItem\n                    id={group.id}\n                    key={group.name}\n                    className={css(styles.listItem)}\n                    onClick={() => setActiveGroup(index)}\n                    selected={filterOptions[activeGroup].id === group.id}\n                    endAdornment={<HvFilterGroupCounter id={group.id} />}\n                  >\n                    <ItemText />\n                  </HvListItem>\n                );\n              })}\n            </HvListContainer>\n          ) : (\n            emptyElement\n          )}\n        </HvPanel>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvFilterGroupLeftPanel","id","className","emptyElement","filterOptions","activeGroup","setActiveGroup","useContext","HvFilterGroupContext","ClassNames","children","css","HvPanel","setId","length","HvListContainer","condensed","interactive","map","group","index","ItemText","wrapperTooltip","name","HvListItem","styles","listItem","onClick","selected","endAdornment","HvFilterGroupCounter","_jsx"],"mappings":";;;;;;;;;;;AAcO,MAAMA,yBAAyBA,CAAC;AAAA,EACrCC;AAAAA,EACAC;AAAAA,EACAC;AAC2B,MAAM;AAC3B,QAAA;AAAA,IAAEC;AAAAA,IAAeC;AAAAA,IAAaC;AAAAA,EAAAA,IAClCC,WAAWC,oBAAoB;AAEjC,6BACGC,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,IAAAA,0BACDC,SAAO;AAAA,MAACX,IAAIY,MAAMZ,IAAI,WAAW;AAAA,MAAGC;AAAAA,MAAqBQ,UACvDN,cAAcU,SAAS,wBACrBC,iBAAe;AAAA,QACdd,IAAIY,MAAMZ,IAAI,gBAAgB;AAAA,QAC9Be,WAAS;AAAA,QACTC,aAAW;AAAA,QAAAP,UAEVN,cAAcc,IAAI,CAACC,OAAOC,UAAU;AACnC,gBAAMC,WAAWC,eAAe,MAAMH,MAAMI,MAAMJ,MAAMI,IAAI;AAE5D,qCACGC,YAAU;AAAA,YACTvB,IAAIkB,MAAMlB;AAAAA,YAEVC,WAAWS,IAAIc,OAAOC,QAAQ;AAAA,YAC9BC,SAASA,MAAMrB,eAAec,KAAK;AAAA,YACnCQ,UAAUxB,cAAcC,WAAW,EAAEJ,OAAOkB,MAAMlB;AAAAA,YAClD4B,kCAAeC,sBAAoB;AAAA,cAAC7B,IAAIkB,MAAMlB;AAAAA,YAAAA,CAAO;AAAA,YAAAS,UAErDqB,oBAACV,UAAQ,EAAA;AAAA,UAAA,GANJF,MAAMI,IAAI;AAAA,QAAA,CASpB;AAAA,MAAC,CAAA,IAGJpB;AAAAA,IAAAA,CACD;AAAA,EAAA,CAGM;AAEjB;"}

package/dist/esm/components/FilterGroup/LeftPanel/LeftPanel.styles.js

@@ -0,0 +1,10 @@
+const styles = {
+  listItem: {
+    display: "flex",
+    justifyContent: "space-between"
+  }
+};
+export {
+  styles
+};
+//# sourceMappingURL=LeftPanel.styles.js.map

package/dist/esm/components/FilterGroup/LeftPanel/LeftPanel.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LeftPanel.styles.js","sources":["../../../../../src/components/FilterGroup/LeftPanel/LeftPanel.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\n\nexport const styles: {\n  listItem: CSSInterpolation;\n} = {\n  listItem: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n  },\n};\n"],"names":["styles","listItem","display","justifyContent"],"mappings":"AAEO,MAAMA,SAET;AAAA,EACFC,UAAU;AAAA,IACRC,SAAS;AAAA,IACTC,gBAAgB;AAAA,EAClB;AACF;"}

package/dist/esm/components/FilterGroup/RightPanel/RightPanel.js

@@ -0,0 +1,133 @@
+import { useState, useContext, useMemo, useCallback, useEffect } from "react";
+import { HvFilterGroupContext } from "../FilterGroupContext.js";
+import cloneDeep from "lodash/cloneDeep";
+import { ClassNames } from "@emotion/react";
+import { styles } from "./RightPanel.styles.js";
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { HvTypography } from "../../Typography/Typography.js";
+import { HvCheckBox } from "../../CheckBox/CheckBox.js";
+import { setId } from "../../../utils/setId.js";
+import { HvPanel } from "../../Panel/Panel.js";
+import { HvInput } from "../../Input/Input.js";
+import { HvList } from "../../List/List.js";
+const HvFilterGroupRightPanel = ({
+  id,
+  className,
+  labels,
+  emptyElement
+}) => {
+  const [searchStr, setSearchStr] = useState("");
+  const [allSelected, setAllSelected] = useState(false);
+  const [anySelected, setAnySelected] = useState(false);
+  const {
+    filterOptions,
+    filterValues = [],
+    setFilterValues,
+    activeGroup
+  } = useContext(HvFilterGroupContext);
+  const activeGroupOptions = useMemo(() => {
+    var _a;
+    return ((_a = filterOptions[activeGroup]) == null ? void 0 : _a.data.map((option) => option.id)) || [];
+  }, [filterOptions, activeGroup]);
+  const activeFilterValues = useMemo(() => {
+    var _a;
+    return ((_a = filterValues[activeGroup]) == null ? void 0 : _a.filter((value) => activeGroupOptions.includes(value))) || [];
+  }, [filterValues, activeGroupOptions, activeGroup]);
+  const listValues = useMemo(() => {
+    var _a;
+    return ((_a = filterOptions[activeGroup]) == null ? void 0 : _a.data.map((option) => {
+      var _a2;
+      return {
+        ...option,
+        label: option.name,
+        selected: (_a2 = filterValues[activeGroup]) == null ? void 0 : _a2.includes(option.id),
+        isHidden: option.name.toLowerCase().indexOf(searchStr.toLowerCase()) < 0
+      };
+    })) || [];
+  }, [filterOptions, filterValues, activeGroup, searchStr]);
+  const updateSelectAll = useCallback(() => {
+    const nbrSelected = activeFilterValues == null ? void 0 : activeFilterValues.length;
+    const hasSelection = nbrSelected > 0;
+    const allSelect = nbrSelected === activeGroupOptions.length;
+    setAnySelected(hasSelection);
+    setAllSelected(hasSelection && allSelect);
+  }, [activeFilterValues, activeGroupOptions]);
+  useEffect(() => {
+    updateSelectAll();
+  }, [activeFilterValues, updateSelectAll]);
+  useEffect(() => setSearchStr(""), [activeGroup]);
+  const onChangeHandler = (values) => {
+    const newFilterValues = filterOptions.map((_, i) => activeGroup === i ? values.filter((v) => v.selected).map((v) => v.id) : [...filterValues[i] || []]);
+    setFilterValues(newFilterValues);
+  };
+  const handleSelectAll = useCallback(() => {
+    const newFilterValues = cloneDeep(filterValues);
+    newFilterValues[activeGroup] = anySelected ? [] : activeGroupOptions;
+    setFilterValues(newFilterValues);
+  }, [activeGroup, activeGroupOptions, anySelected, filterValues, setFilterValues]);
+  const SelectAll = useCallback(() => {
+    const nbrSelected = activeFilterValues == null ? void 0 : activeFilterValues.length;
+    const defaultLabel = /* @__PURE__ */ jsx(HvTypography, {
+      component: "span",
+      children: nbrSelected > 0 ? /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx("b", {
+          children: nbrSelected
+        }), ` ${labels == null ? void 0 : labels.multiSelectionConjunction} ${activeGroupOptions.length}`]
+      }) : /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx("b", {
+          children: labels == null ? void 0 : labels.selectAll
+        }), ` (${activeGroupOptions.length})`]
+      })
+    });
+    return /* @__PURE__ */ jsx(ClassNames, {
+      children: ({
+        css
+      }) => /* @__PURE__ */ jsx("div", {
+        className: css(styles.selectAllContainer),
+        children: /* @__PURE__ */ jsx(HvCheckBox, {
+          id: setId(id, "select-all"),
+          label: defaultLabel,
+          onChange: () => handleSelectAll(),
+          className: css(styles.selectAll),
+          indeterminate: anySelected && !allSelected,
+          checked: allSelected
+        })
+      })
+    });
+  }, [activeFilterValues == null ? void 0 : activeFilterValues.length, activeGroupOptions.length, allSelected, anySelected, handleSelectAll, id, labels]);
+  return /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css
+    }) => /* @__PURE__ */ jsx(HvPanel, {
+      id: setId(id, "rightPanel"),
+      className,
+      children: listValues.length > 0 ? /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(HvInput, {
+          id: setId(id, "search"),
+          classes: {
+            root: css(styles.search)
+          },
+          type: "search",
+          placeholder: labels == null ? void 0 : labels.searchBoxPlaceholder,
+          value: searchStr,
+          onChange: (_, str) => setSearchStr(str)
+        }), /* @__PURE__ */ jsx(SelectAll, {}), /* @__PURE__ */ jsx(HvList, {
+          id: setId(id, "list"),
+          values: listValues,
+          className: css(styles.list),
+          multiSelect: true,
+          useSelector: true,
+          showSelectAll: false,
+          onChange: onChangeHandler,
+          selectable: true,
+          condensed: true,
+          hasTooltips: true
+        }, activeGroup)]
+      }) : emptyElement
+    })
+  });
+};
+export {
+  HvFilterGroupRightPanel
+};
+//# sourceMappingURL=RightPanel.js.map

package/dist/esm/components/FilterGroup/RightPanel/RightPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightPanel.js","sources":["../../../../../src/components/FilterGroup/RightPanel/RightPanel.tsx"],"sourcesContent":["import {\n  HvCheckBox,\n  HvInput,\n  HvList,\n  HvPanel,\n  HvTypography,\n} from \"@core/components\";\nimport { setId } from \"@core/utils\";\nimport { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./RightPanel.styles\";\n\nexport interface HvFilterGroupRightPanelProps {\n  id?: string;\n  className?: string;\n  labels?: {\n    searchBoxPlaceholder?: string;\n    selectAll?: string;\n    multiSelectionConjunction?: string;\n  };\n  emptyElement?: React.ReactNode;\n}\n\nexport const HvFilterGroupRightPanel = ({\n  id,\n  className,\n  labels,\n  emptyElement,\n}: HvFilterGroupRightPanelProps) => {\n  const [searchStr, setSearchStr] = useState<string>(\"\");\n  const [allSelected, setAllSelected] = useState<boolean>(false);\n  const [anySelected, setAnySelected] = useState<boolean>(false);\n\n  const {\n    filterOptions,\n    filterValues = [],\n    setFilterValues,\n    activeGroup,\n  } = useContext(HvFilterGroupContext);\n\n  const activeGroupOptions = useMemo(\n    () => filterOptions[activeGroup]?.data.map((option) => option.id) || [],\n    [filterOptions, activeGroup]\n  );\n\n  const activeFilterValues = useMemo(\n    () =>\n      filterValues[activeGroup]?.filter((value) =>\n        activeGroupOptions.includes(value)\n      ) || [],\n    [filterValues, activeGroupOptions, activeGroup]\n  );\n\n  const listValues = useMemo(\n    () =>\n      filterOptions[activeGroup]?.data.map((option) => ({\n        ...option,\n        label: option.name,\n        selected: filterValues[activeGroup]?.includes(option.id),\n        isHidden:\n          option.name.toLowerCase().indexOf(searchStr.toLowerCase()) < 0,\n      })) || [],\n    [filterOptions, filterValues, activeGroup, searchStr]\n  );\n\n  const updateSelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n    const hasSelection = nbrSelected > 0;\n    const allSelect = nbrSelected === activeGroupOptions.length;\n\n    setAnySelected(hasSelection);\n    setAllSelected(hasSelection && allSelect);\n  }, [activeFilterValues, activeGroupOptions]);\n\n  useEffect(() => {\n    updateSelectAll();\n  }, [activeFilterValues, updateSelectAll]);\n\n  useEffect(() => setSearchStr(\"\"), [activeGroup]);\n\n  const onChangeHandler = (values) => {\n    const newFilterValues = filterOptions.map((_, i) =>\n      activeGroup === i\n        ? values.filter((v) => v.selected).map((v) => v.id)\n        : [...(filterValues[i] || [])]\n    );\n    setFilterValues(newFilterValues);\n  };\n\n  const handleSelectAll = useCallback(() => {\n    const newFilterValues = cloneDeep(filterValues);\n    newFilterValues[activeGroup] = anySelected ? [] : activeGroupOptions;\n\n    setFilterValues(newFilterValues);\n  }, [\n    activeGroup,\n    activeGroupOptions,\n    anySelected,\n    filterValues,\n    setFilterValues,\n  ]);\n\n  /**\n   * Create selectAll component.\n   *\n   * @returns {*}\n   */\n  const SelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n\n    const defaultLabel = (\n      <HvTypography component=\"span\">\n        {nbrSelected > 0 ? (\n          <>\n            <b>{nbrSelected}</b>\n            {` ${labels?.multiSelectionConjunction} ${activeGroupOptions.length}`}\n          </>\n        ) : (\n          <>\n            <b>{labels?.selectAll}</b>\n            {` (${activeGroupOptions.length})`}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <ClassNames>\n        {({ css }) => (\n          <div className={css(styles.selectAllContainer)}>\n            <HvCheckBox\n              id={setId(id, \"select-all\")}\n              label={defaultLabel}\n              onChange={() => handleSelectAll()}\n              className={css(styles.selectAll)}\n              indeterminate={anySelected && !allSelected}\n              checked={allSelected}\n            />\n          </div>\n        )}\n      </ClassNames>\n    );\n  }, [\n    activeFilterValues?.length,\n    activeGroupOptions.length,\n    allSelected,\n    anySelected,\n    handleSelectAll,\n    id,\n    labels,\n  ]);\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <HvPanel id={setId(id, \"rightPanel\")} className={className}>\n          {listValues.length > 0 ? (\n            <>\n              <HvInput\n                id={setId(id, \"search\")}\n                classes={{\n                  root: css(styles.search),\n                }}\n                type=\"search\"\n                placeholder={labels?.searchBoxPlaceholder}\n                value={searchStr}\n                onChange={(_, str) => setSearchStr(str)}\n              />\n              <SelectAll />\n              <HvList\n                key={activeGroup}\n                id={setId(id, \"list\")}\n                values={listValues}\n                className={css(styles.list)}\n                multiSelect\n                useSelector\n                showSelectAll={false}\n                onChange={onChangeHandler}\n                selectable\n                condensed\n                hasTooltips\n              />\n            </>\n          ) : (\n            emptyElement\n          )}\n        </HvPanel>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvFilterGroupRightPanel","id","className","labels","emptyElement","searchStr","setSearchStr","useState","allSelected","setAllSelected","anySelected","setAnySelected","filterOptions","filterValues","setFilterValues","activeGroup","useContext","HvFilterGroupContext","activeGroupOptions","useMemo","data","map","option","activeFilterValues","filter","value","includes","listValues","label","name","selected","isHidden","toLowerCase","indexOf","updateSelectAll","useCallback","nbrSelected","length","hasSelection","allSelect","useEffect","onChangeHandler","values","newFilterValues","_","i","v","handleSelectAll","cloneDeep","SelectAll","defaultLabel","HvTypography","component","children","_jsxs","_Fragment","_jsx","multiSelectionConjunction","selectAll","ClassNames","css","styles","selectAllContainer","HvCheckBox","setId","onChange","indeterminate","checked","HvPanel","HvInput","classes","root","search","type","placeholder","searchBoxPlaceholder","str","HvList","list","multiSelect","useSelector","showSelectAll","selectable","condensed","hasTooltips"],"mappings":"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"}

package/dist/esm/components/FilterGroup/RightPanel/RightPanel.styles.js

@@ -0,0 +1,34 @@
+import { theme } from "@hitachivantara/uikit-styles";
+const styles = {
+  search: {
+    marginBottom: theme.spacing("xs")
+  },
+  list: {
+    width: "calc(100% + 8px)",
+    height: "calc(100% - 70px)",
+    overflowY: "auto",
+    margin: -4,
+    padding: 4
+  },
+  selectAllContainer: {
+    // Prevent the focus ring to be hidden by sibling hover background
+    "&": {
+      position: "relative",
+      zIndex: 0
+    },
+    "&:focus-within": {
+      zIndex: 1
+    },
+    // IE fallback code (using focus-within-polyfill)
+    "&.focus-within": {
+      zIndex: 1
+    }
+  },
+  selectAll: {
+    width: "100%"
+  }
+};
+export {
+  styles
+};
+//# sourceMappingURL=RightPanel.styles.js.map

package/dist/esm/components/FilterGroup/RightPanel/RightPanel.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightPanel.styles.js","sources":["../../../../../src/components/FilterGroup/RightPanel/RightPanel.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const styles: {\n  search: CSSInterpolation;\n  selectAllContainer: CSSInterpolation;\n  selectAll: CSSInterpolation;\n  list: CSSInterpolation;\n} = {\n  search: {\n    marginBottom: theme.spacing(\"xs\"),\n  },\n  list: {\n    width: \"calc(100% + 8px)\",\n    height: \"calc(100% - 70px)\",\n    overflowY: \"auto\",\n    margin: -4,\n    padding: 4,\n  },\n  selectAllContainer: {\n    // Prevent the focus ring to be hidden by sibling hover background\n    \"&\": {\n      position: \"relative\",\n      zIndex: 0,\n    },\n    \"&:focus-within\": {\n      zIndex: 1,\n    },\n    // IE fallback code (using focus-within-polyfill)\n    \"&.focus-within\": {\n      zIndex: 1,\n    },\n  },\n  selectAll: {\n    width: \"100%\",\n  },\n};\n"],"names":["styles","search","marginBottom","theme","spacing","list","width","height","overflowY","margin","padding","selectAllContainer","position","zIndex","selectAll"],"mappings":";AAGO,MAAMA,SAKT;AAAA,EACFC,QAAQ;AAAA,IACNC,cAAcC,MAAMC,QAAQ,IAAI;AAAA,EAClC;AAAA,EACAC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRC,SAAS;AAAA,EACX;AAAA,EACAC,oBAAoB;AAAA;AAAA,IAElB,KAAK;AAAA,MACHC,UAAU;AAAA,MACVC,QAAQ;AAAA,IACV;AAAA,IACA,kBAAkB;AAAA,MAChBA,QAAQ;AAAA,IACV;AAAA;AAAA,IAEA,kBAAkB;AAAA,MAChBA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,WAAW;AAAA,IACTR,OAAO;AAAA,EACT;AACF;"}

package/dist/esm/components/FilterGroup/filterGroupClasses.js

@@ -0,0 +1,8 @@
+import { getClasses } from "../../utils/classes.js";
+const classKeys = ["root", "labelContainer", "label", "description", "error"];
+const filterGroupClasses = getClasses(classKeys, "HvFilterGroup");
+const filterGroupClasses$1 = filterGroupClasses;
+export {
+  filterGroupClasses$1 as default
+};
+//# sourceMappingURL=filterGroupClasses.js.map

package/dist/esm/components/FilterGroup/filterGroupClasses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterGroupClasses.js","sources":["../../../../src/components/FilterGroup/filterGroupClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvFilterGroupClasses {\n  root?: string;\n  labelContainer?: string;\n  label?: string;\n  description?: string;\n  error?: string;\n}\n\nconst classKeys: string[] = [\n  \"root\",\n  \"labelContainer\",\n  \"label\",\n  \"description\",\n  \"error\",\n];\n\nconst filterGroupClasses = getClasses<HvFilterGroupClasses>(\n  classKeys,\n  \"HvFilterGroup\"\n);\n\nexport default filterGroupClasses;\n"],"names":["classKeys","filterGroupClasses","getClasses"],"mappings":";AAUA,MAAMA,YAAsB,CAC1B,QACA,kBACA,SACA,eACA,OAAO;AAGT,MAAMC,qBAAqBC,WACzBF,WACA,eAAe;AAGjB,MAAA,uBAAeC;"}