@uxland/primary-shell 6.0.6 → 7.0.0

package/src/internal-plugins/activity-history/activity-history-item/filter/UI/active-filters-badges/styles.css

@@ -1,45 +0,0 @@
-:host{
-  display: flex;
-  justify-content: space-between;
-}
-
-.filters-container{
-  display: flex;
-  gap: var(--dss-spacing-md);
-}
-
-.filters-header{
-  font-weight: 700;
-}
-
-.filter-groups{
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--dss-spacing-xs);
-}
-
-.filter-group{
-  display: flex;
-  gap: var(--dss-spacing-xs);
-  color: var(--color-neutral-600);
-  font-weight: 600;
-}
-
-.clean-filters{
-  display: flex;
-
-  .separator{
-    padding: 0 8px;
-  }
-}
-
-.popover-content {
-  box-sizing: border-box;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--dss-spacing-xs);
-  padding: 10px;
-  max-width: 368px; 
-  max-height: 336px; 
-  overflow: auto;
-}

package/src/internal-plugins/activity-history/activity-history-item/filter/UI/active-filters-badges/template.ts

@@ -1,214 +0,0 @@
-import { html, nothing } from "lit";
-import { ActiveFiltersBadges } from "./active-filters-badges";
-import { translate } from "../../../../localization";
-import { formatShowFilterTitle, normalizeDeletedFilterBooleanValue, normalizeEmptyFilterValue } from "../../utils";
-
-const MAX_VISIBLE_CHIPS = 5;
-
-const renderChip = (id, filter, option, props) => html`
-  <dss-chip
-    label=${normalizeEmptyFilterValue(option.title, filter.title)}
-    size="sm"
-    hasdelete
-    selected
-    @click=${() => props._onDeleteFilterValue(id, filter.id, option.id, false)}
-    @onDelete=${() => props._onDeleteFilterValue(id, filter.id, option.id, false)}
-  ></dss-chip>
-`;
-
-const renderCommonChip = (filter, props) => html`
-  <dss-chip
-    label=${formatShowFilterTitle(filter.title)}
-    size="sm"
-    hasdelete
-    selected
-    @click=${() => props._onDeleteCommonFilterValue(filter.id)}
-    @onDelete=${() => props._onDeleteCommonFilterValue(filter.id)}
-  ></dss-chip>
-`;
-
-const renderDiagnosticChip = (id, value, props) => html`
-  <dss-chip
-    label=${value}
-    size="sm"
-    hasdelete
-    selected
-    @click=${() => props._onDeleteDiagnosticFilterValue(id)}
-    @onDelete=${() => props._onDeleteDiagnosticFilterValue(id)}
-  ></dss-chip>
-`;
-
-const renderUpChip = (id, value, props) => html`
-  <dss-chip
-    label=${value}
-    size="sm"
-    hasdelete
-    selected
-    @click=${() => props._onDeleteUpFilterValue(id)}
-    @onDelete=${() => props._onDeleteUpFilterValue(id)}
-  ></dss-chip>
-`;
-
-const renderFilterTitle = (title) => html`<div class="filter-title">${`${title}:`}</div>`;
-
-export const template = (props: ActiveFiltersBadges) => {
-  //TODO: refactor chips render
-  if (
-    props.enabledFilters.length === 0 &&
-    props.enabledCommonFilters.length === 0 &&
-    props.diagnosticFilterEnabled.enabledValues.length === 0 &&
-    props.upFilterEnabled.enabledValues.length === 0
-  )
-    return nothing;
-
-  let visibleCount = 0;
-  const visibleChips: any[] = [];
-  const hiddenElements: any[] = [];
-  const hiddenChips: any[] = [];
-
-  const diagnostic = props.diagnosticFilterEnabled;
-
-  if (diagnostic) {
-    const { title, values, enabledValues } = diagnostic;
-    const selectedOptions = values.filter((opt) => enabledValues.includes(opt.value));
-
-    if (selectedOptions.length > 0) {
-      let titleAddedToVisible = false;
-      let titleAddedToHidden = false;
-
-      for (const option of selectedOptions) {
-        const chip = renderDiagnosticChip(option.value, option.label, props);
-
-        if (visibleCount < MAX_VISIBLE_CHIPS) {
-          if (!titleAddedToVisible) {
-            visibleChips.push(renderFilterTitle(title));
-            titleAddedToVisible = true;
-          }
-          visibleChips.push(chip);
-          visibleCount++;
-        } else {
-          if (!titleAddedToHidden) {
-            hiddenElements.push(renderFilterTitle(title));
-            titleAddedToHidden = true;
-          }
-          hiddenElements.push(chip);
-          hiddenChips.push(chip);
-        }
-      }
-    }
-  }
-
-  const up = props.upFilterEnabled;
-
-  if (up) {
-    const { title, values, enabledValues } = up;
-    const selectedOptions = values.filter((opt) => enabledValues.includes(opt.value));
-
-    if (selectedOptions.length > 0) {
-      let titleAddedToVisible = false;
-      let titleAddedToHidden = false;
-
-      for (const option of selectedOptions) {
-        const chip = renderUpChip(option.value, option.label, props);
-
-        if (visibleCount < MAX_VISIBLE_CHIPS) {
-          if (!titleAddedToVisible) {
-            visibleChips.push(renderFilterTitle(title));
-            titleAddedToVisible = true;
-          }
-          visibleChips.push(chip);
-          visibleCount++;
-        } else {
-          if (!titleAddedToHidden) {
-            hiddenElements.push(renderFilterTitle(title));
-            titleAddedToHidden = true;
-          }
-          hiddenElements.push(chip);
-          hiddenChips.push(chip);
-        }
-      }
-    }
-  }
-
-  for (const filter of props.enabledCommonFilters) {
-    const chip = renderCommonChip(filter, props);
-
-    if (visibleCount < MAX_VISIBLE_CHIPS) {
-      visibleChips.push(chip);
-      visibleCount++;
-    } else {
-      hiddenElements.push(chip);
-      hiddenChips.push(chip);
-    }
-  }
-
-  for (const { title, id, filters } of props.enabledFilters) {
-    let titleAddedToVisible = false;
-    let titleAddedToHidden = false;
-
-    for (const filter of filters) {
-      for (const value of [...new Set(filter.enabledValues)]) {
-        let filterOption = filter?.options?.find((o) => o.id === value);
-
-        if (filterOption) {
-          //Fill when filter option doesnt have title (description)
-          filterOption.title = filterOption.title !== "" ? filterOption.title : value;
-        } else {
-          //Hi ha un filtre de curs clinic "veure eliminats" booleà que no serà un filterOption, per tant entra aquí
-          //Aqui es crea el objecte que es passa al chip
-          const deletedFiltersOption = normalizeDeletedFilterBooleanValue(value);
-          filterOption = { title: deletedFiltersOption, id: deletedFiltersOption };
-        }
-
-        //const chip2 = renderChip(id, filter, normalizeDeletedFilterBooleanValue(value), props);
-
-        const chip = renderChip(id, filter, filterOption, props);
-
-        if (visibleCount < MAX_VISIBLE_CHIPS) {
-          if (!titleAddedToVisible) {
-            visibleChips.push(renderFilterTitle(title));
-            titleAddedToVisible = true;
-          }
-          visibleChips.push(chip);
-          visibleCount++;
-        } else {
-          if (!titleAddedToHidden) {
-            hiddenElements.push(renderFilterTitle(title));
-            titleAddedToHidden = true;
-          }
-          hiddenElements.push(chip);
-          hiddenChips.push(chip);
-        }
-      }
-    }
-  }
-
-  return html`
-  <div class="filters-container">
-    <div class="filters-header">${translate("chipHeader.selection")}</div>
-    <div class="filter-groups">
-      ${visibleChips}
-      ${
-        hiddenChips.length > 0
-          ? html`
-            <div>
-              <dss-button label="+ ${hiddenChips.length}" size="sm" variant="primary"></dss-button>
-              <dss-popover title=${translate("chipHeader.selection")} position="bottom" popoverFixed>
-                <dss-popover-body slot="body">
-                  <div class="popover-content">
-                    ${hiddenElements}
-                  </div>
-                </dss-popover-body>
-              </dss-popover>
-            </div>
-          `
-          : nothing
-      }
-    </div>
-  </div>
-  <div class="clean-filters">
-    <div class="separator">|</div>
-    <dss-button variant="secondary" size="sm" label=${translate("chipHeader.cleanFilters")} icon="cleaning_services" @click=${props.resetFilters}></dss-button>
-  </div>
-  `;
-};

package/src/internal-plugins/activity-history/activity-history-item/filter/UI/active-filters-header/active-filters-header.ts

@@ -1,37 +0,0 @@
-import { LitElement, css, html, unsafeCSS } from "lit";
-import { template } from "./template";
-import styles from "./styles.css?inline";
-import { customElement } from "lit/decorators.js";
-import { connectedProperty } from "../../../../infrastructure/state/connected-property";
-import { activityHistorySearchStringSelector } from "../../../search/selectors";
-import { areCustomFiltersActive } from "../../custom-filters/selectors";
-import { areCommonFiltersActive } from "../../common-filters/selectors";
-import { areDiagnosticFiltersActive } from "../../diagnostic-filters/selectors";
-import { areUpFiltersActive } from "../../up-filters/selectors";
-
-//@ts-ignore
-@customElement("active-filters-header")
-export class ActiveFiltersHeader extends LitElement {
-  render() {
-    return html`${template(this)}`;
-  }
-
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
-
-  @connectedProperty(activityHistorySearchStringSelector)
-  searchString: string;
-
-  @connectedProperty(areCustomFiltersActive)
-  areCustomFiltersActive: boolean;
-
-  @connectedProperty(areCommonFiltersActive)
-  areCommonFiltersActive: boolean;
-
-  @connectedProperty(areDiagnosticFiltersActive)
-  areDiagnosticFiltersActive: boolean;
-
-  @connectedProperty(areUpFiltersActive)
-  areUpFiltersActive: boolean;
-}

package/src/internal-plugins/activity-history/activity-history-item/filter/UI/active-filters-header/styles.css

@@ -1,12 +0,0 @@
-.active-filters-header{
-  display: flex;
-  flex-direction: column;
-  border-width: 0px 0px 1px 0px;
-  border-style: solid;
-  border-color: #D8D8D8;
-  background-color: #FFFFFF;
-  padding: var(--dss-spacing-sm) var(--dss-spacing-md);
-  gap: var(--dss-spacing-xs);
-  font-size: 14px;
-  line-height: 24px;
-}

package/src/internal-plugins/activity-history/activity-history-item/filter/UI/active-filters-header/template.ts

@@ -1,17 +0,0 @@
-import { html, nothing } from "lit";
-import { ActiveFiltersHeader } from "./active-filters-header";
-import { when } from "lit/directives/when.js";
-
-export const template = (props: ActiveFiltersHeader) => {
-  const isAnyChipActive =
-    props.areCustomFiltersActive || props.areCommonFiltersActive || props.areDiagnosticFiltersActive || props.areUpFiltersActive;
-
-  if (!isAnyChipActive && props.searchString.length < 1) return nothing;
-
-  return html`
-    <div class="active-filters-header">
-      ${when(isAnyChipActive, () => html`<active-filters-badges></active-filters-badges>`)}
-      ${when(props.searchString.length > 1, () => html`<activity-history-search-results searchQuery=${props.searchString}></activity-history-search-results>`)}
-    </div>
-  `;
-};

package/src/internal-plugins/activity-history/activity-history-item/filter/UI/activity-history-filters/activity-history-filters.ts

@@ -1,112 +0,0 @@
-import { LitElement, css, html, unsafeCSS } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { PrimariaApi } from "../../../../../../api/api";
-import { lazyInject } from "../../../../infrastructure/ioc/container";
-import { TYPES } from "../../../../infrastructure/ioc/types";
-import { connectedProperty } from "../../../../infrastructure/state/connected-property";
-import {
-  IActivityHistoryCommonFilter,
-  IActivityHistoryCustomFilterGroup,
-  IActivityHistoryDiagnosticsFilter,
-  IActivityHistoryUpFilter,
-} from "../../model";
-import styles from "./styles.css?inline";
-import { template } from "./template";
-import { SetCustomFilterGroup } from "../../custom-filters/set-custom-filter-group/request";
-import { SetCommonFilter } from "../../common-filters/set-common-filter/request";
-import { activityHistoryCommonFiltersSelector } from "../../common-filters/selectors";
-import { SetCustomFilterValue } from "../../custom-filters/set-custom-filter-value/request";
-import { customFilterGroupsWithOptionsSelector } from "../../../selectors";
-import { diagnosticFilterEnabledValuesSelector, diagnosticFilterSelector } from "../../diagnostic-filters/selectors";
-import { SetDiagnosticFiltersCommand } from "../../diagnostic-filters/set/request";
-import { upFilterEnabledValuesSelector, upFilterSelector } from "../../up-filters/selectors";
-import { SetUpFiltersCommand } from "../../up-filters/set/request";
-import { SetCustomFilterAllValues } from "../../custom-filters/set-custom-filter-all-values/request";
-
-//@ts-ignore
-@customElement("activity-history-filters")
-export class ActivityHistoryFilters extends LitElement {
-  render() {
-    return html`${template(this)}`;
-  }
-
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
-
-  @connectedProperty(activityHistoryCommonFiltersSelector)
-  commonFilters: IActivityHistoryCommonFilter[];
-
-  @connectedProperty(customFilterGroupsWithOptionsSelector)
-  customFilterGroups: IActivityHistoryCustomFilterGroup[];
-
-  @connectedProperty(diagnosticFilterSelector)
-  diagnosticFilter: IActivityHistoryDiagnosticsFilter;
-
-  @connectedProperty(diagnosticFilterEnabledValuesSelector)
-  diagnosticFilterEnabledValues: string[];
-
-  @connectedProperty(upFilterSelector)
-  upFilter: IActivityHistoryUpFilter;
-
-  @connectedProperty(upFilterEnabledValuesSelector)
-  upFilterEnabledValues: string[];
-
-  @lazyInject(TYPES.primaryApi)
-  api: PrimariaApi;
-
-  @state()
-  filtersExpanded = false;
-
-  @property({ type: Boolean })
-  wrapperMaximized: boolean;
-
-  updated(changedProperties) {
-    if (changedProperties.has("wrapperMaximized")) {
-      this.filtersExpanded = this.wrapperMaximized;
-    }
-  }
-
-  _toggleFilters() {
-    this.filtersExpanded = !this.filtersExpanded;
-  }
-
-  _onChangeCommonFilterValue(filterId: string, value: boolean) {
-    this.api.broker.send(new SetCommonFilter({ id: filterId, enabled: value }));
-  }
-
-  _onChangeCustomFilterGroupValue(filterGroupId: string, value: boolean) {
-    this.api.broker.send(new SetCustomFilterGroup({ id: filterGroupId, enabled: value }));
-  }
-
-  _onChangeCustomFilterValue(filterGroupId: string, filterId: string, optionId: string, value: boolean) {
-    this.api.broker.send(
-      new SetCustomFilterValue({
-        filterGroupId,
-        filterId,
-        optionId,
-        enabled: value,
-      }),
-    );
-  }
-
-  _onChangeCustomFilterAllValues(filterGroupId: string, filterId: string, values: string[]) {
-    this.api.broker.send(
-      new SetCustomFilterAllValues({
-        filterGroupId,
-        filterId,
-        values: values,
-      }),
-    );
-  }
-
-  _handleDiagnosticFilterChange(e: CustomEvent) {
-    const selectedValues = e.detail.selectedValue;
-    this.api.broker.send(new SetDiagnosticFiltersCommand(selectedValues));
-  }
-
-  _handleUpFilterChange(e: CustomEvent) {
-    const selectedValues = e.detail.selectedValue;
-    this.api.broker.send(new SetUpFiltersCommand(selectedValues));
-  }
-}

package/src/internal-plugins/activity-history/activity-history-item/filter/UI/activity-history-filters/styles.css

@@ -1,57 +0,0 @@
-.filters-sidebar {
-      padding: 8px 4px;
-      border-right: 1px solid rgb(189, 189, 189);
-      width: 56px;
-    height: 100%;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    dss-icon-button{
-      align-self: center;
-    }
-      &[expanded] {
-        width: 296px;
-        .filters-sidebar-opened {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          padding-inline: 8px;
-          color: var(--color-neutral-900);
-          font-weight: 700;
-          font-size: 16px;
-          line-height: 24px;
-        }
-      }
-    }
-
-
-.filter-container{
-    display: flex;
-    flex-direction: column;
-    padding: 16px 8px 8px 8px;
-    overflow:auto;
-}
-
-.filter-container .filter{
-  padding: 8px 0;
-      border-bottom: 1px solid var(--color-neutral-200);
-}
-
-.filter-group{
-    display: flex;
-    flex-direction: column;
-    padding-top: 12px;
-    gap: var(--dss-spacing-xs);
-
-    .custom-filter{
-      display: flex;
-      flex-direction: column;
-      padding: 6px 8px 6px var(--dss-spacing-xl);
-
-      .custom-filter-content{
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-      }
-    }
-}

package/src/internal-plugins/activity-history/activity-history-item/filter/UI/activity-history-filters/template.ts

@@ -1,149 +0,0 @@
-import { html } from "lit";
-import { ActivityHistoryFilters } from "./activity-history-filters";
-import { repeat } from "lit/directives/repeat.js";
-import {
-  ActivityHistoryFilterType,
-  IActivityHistoryCommonFilter,
-  IActivityHistoryCustomFilter,
-  IActivityHistoryCustomFilterGroup,
-  IActivityHistoryFilter,
-} from "../../model";
-import { translate } from "../../../../localization";
-import { when } from "lit/directives/when.js";
-
-const filterTemplates = {
-  [ActivityHistoryFilterType.Switch]: (id, title, handleChange, isSelected, isEnabled) => html`
-    <dss-input-switch size="sm" @onChangeValue=${handleChange} .checked=${isSelected}>
-      <input slot="input" id="switch-${id}" aria-label=${title} type="checkbox"  ?disabled=${!isEnabled}>
-      <label slot="label" for="switch-${id}">${title || id}</label>
-    </dss-input-switch>`,
-
-  [ActivityHistoryFilterType.Checkbox]: (id, title, handleChange, isSelected, isEnabled) => html`
-    <dss-checkbox variant="default" @onChange=${(e) => handleChange(e)}> 
-      <input slot="input" id="checkboxStory-${id}" type="checkbox" .checked=${isSelected} ?disabled=${!isEnabled}>
-      <label slot="label" for="checkboxStory-${id}">${title || id}</label>
-    </dss-checkbox>`,
-
-  /* [ActivityHistoryFilterType.Dropdown]: (id, title, handleChange, isSelected, isEnabled) => html`
-    <dss-input-dropdown type="default" @onChange=${(e) => handleChange(e)}> 
-      <input slot="input" id="dropdownStory-${id}" type="text" .checked=${isSelected} ?disabled=${!isEnabled}>
-      <label slot="label" for="dropdownStory-${id}">${title || id}</label>
-    </dss-input-dropdown>`, */
-};
-
-const getFilterTemplate = (
-  filter: IActivityHistoryCommonFilter | IActivityHistoryCustomFilter,
-  onChangeValue: (...args: any[]) => void,
-  filterGroup?: IActivityHistoryFilter,
-  option?: { id: string; title: string },
-) => {
-  const isCustom = !!filterGroup?.id && !!option;
-  //const id = isCustom ? `${filterGroupId}-${filter.id}-${option.id}` : filter.id;
-  const id = crypto.randomUUID();
-  const title = isCustom ? option.title || option.id : filter.title;
-
-  const handleChange = (e) => {
-    if (filter.singleOption) onChangeValue(filterGroup?.id, filter.id, null, e.detail);
-    else if (isCustom && option) onChangeValue(filterGroup?.id, filter.id, option.id, e.detail);
-    else onChangeValue(filter.id, e.detail);
-  };
-
-  const isSelected =
-    isCustom && option ? (filter as IActivityHistoryCustomFilter).enabledValues?.includes(option.id) : filter.enabled;
-
-  const isEnabled =
-    (isCustom && option) || filter.singleOption ? (filterGroup as IActivityHistoryCustomFilterGroup).enabled : true;
-
-  return filterTemplates[filter.type]?.(id, title, handleChange, isSelected, isEnabled) || html``;
-};
-
-export const template = (props: ActivityHistoryFilters) =>
-  html`
-  <div class="filters-sidebar" ?expanded=${props.filtersExpanded} >
-      ${
-        props.filtersExpanded
-          ? html`<div class="filters-sidebar-opened">${translate("filters.filters")}<dss-icon-button ?hidden=${props.wrapperMaximized} @click=${() => props._toggleFilters()} size="md" variant="primary" icon="keyboard_double_arrow_left"></dss-icon-button></div>
-          <div class="filter-container">
-                  ${repeat(props.commonFilters, (filter: IActivityHistoryCommonFilter) => html`<div class="filter">${getFilterTemplate(filter, props._onChangeCommonFilterValue.bind(props))}</div> `)}
-                  ${
-                    props.diagnosticFilter &&
-                    html`<div class="filter">
-                          <dss-input-dropdown inputsize="md" icon="" multiple dropdownFixed type="default" .elements=${props.diagnosticFilter?.values} @onInputDropdownChange=${props._handleDiagnosticFilterChange} .selectedValue=${props.diagnosticFilterEnabledValues} selectorStyle=${"max-height: 450px"}>
-                            <label slot="label" for="diagnostic-filter">${props.diagnosticFilter.title}</label>
-                            <input id="diagnostic-filter" slot="input" type="text" class="dss-input" autocomplete="off"/>
-                          </dss-input-dropdown>
-                        </div>`
-                  }
-                  ${
-                    props.upFilter &&
-                    html`<div class="filter">
-                      <dss-input-dropdown inputsize="md" icon="" multiple dropdownFixed type="default" .elements=${props.upFilter?.values} @onInputDropdownChange=${props._handleUpFilterChange} .selectedValue=${props.upFilterEnabledValues} selectorStyle=${"max-height: 450px"}>
-                        <label slot="label" for="up-filter">${props.upFilter.title}</label>
-                        <input id="up-filter" slot="input" type="text" class="dss-input" autocomplete="off"/>
-                      </dss-input-dropdown>
-                    </div>`
-                  }
-                  ${repeat(
-                    props.customFilterGroups,
-                    (group: IActivityHistoryCustomFilterGroup) => html`
-                  <div class="filter-group">
-                    <dss-input-switch size="sm" .checked=${group.enabled} @onChangeValue=${(e) => props._onChangeCustomFilterGroupValue(group.id, e.detail)}>
-                      <input slot="input" id="switch-${group.id}" aria-label=${group.title} type="checkbox">
-                      <label slot="label" for="switch-${group.id}">${group.title}</label>
-                    </dss-input-switch>
-                    ${
-                      group?.filters &&
-                      repeat(group.filters, (filter: IActivityHistoryCustomFilter) => customFilterTemplate(filter, props, group))
-                    }
-                  </div> `,
-                  )}
-                </div> `
-          : html`<dss-icon-button @click=${() => props._toggleFilters()} size="md" variant="primary" icon="keyboard_double_arrow_right"></dss-icon-button>`
-      }
-  </div>
-  `;
-
-const customFilterTemplate = (
-  filter: IActivityHistoryCustomFilter,
-  props: ActivityHistoryFilters,
-  group: IActivityHistoryCustomFilterGroup,
-) => {
-  if (filter.type === ActivityHistoryFilterType.Dropdown) {
-    const elements = filter?.options.map((option) => ({ value: option.id, label: option.title || option.id }));
-    return when(
-      elements.length > 0,
-      () => html`
-      <dss-input-dropdown
-        inputsize="md"
-        icon=""
-        multiple
-        dropdownFixed
-        type="default"
-        .elements=${elements}
-        @onInputDropdownChange=${(e) => props._onChangeCustomFilterAllValues(group.id, filter.id, e.detail.selectedValue)}
-        .selectedValue=${filter.enabledValues}
-        selectorStyle="max-height: 450px"
-      >
-        <label slot="label">${filter.title}</label>
-        <input slot="input" type="text" class="dss-input" autocomplete="off" />
-      </dss-input-dropdown>
-    `,
-    );
-  }
-
-  return filter.singleOption
-    ? getFilterTemplate(filter, props._onChangeCustomFilterValue.bind(props), group)
-    : when(
-        !!filter.options?.length,
-        () => html`
-        <primaria-accordion isOpen>
-          <div class="custom-filter-title" slot="title">${filter.title}</div>
-          <div class="custom-filter-content" slot="content">
-            ${filter.options.map((option) =>
-              getFilterTemplate(filter, props._onChangeCustomFilterValue.bind(props), group, option),
-            )}
-          </div>
-        </primaria-accordion>
-      `,
-      );
-};