import { type Filter, type Filters } from './filters.types.js'; import { nothing } from 'lit'; import LibraryBaseElement from '../../internal/library-base-element.js'; import OButton from '../button/button.component.js'; import ODivider from '../divider/divider.component.js'; import OIcon from '../icon/icon.component.js'; import OInput from '../input/input.component.js'; import OSelect from '../select/select.component.js'; import OSwitch from '../switch/switch.component.js'; import type { AbstractTypePlugin } from './types-plugins/abstract.type.plugin.js'; import type { CSSResultGroup, TemplateResult } from 'lit'; /** * @summary A component that renders a list of filters based on a JSON configuration. * @documentation /components/filters * @status beta * @since 1.6 * * @dependency o-input * @dependency o-select * @dependency o-switch * @dependency o-divider * @dependency o-button * @dependency o-icon * * @event {{ filter: Filter; value: any; filtersData: { [filterName: string]: any } }} o-filter-change - Emitted when an alteration to a filter's value is committed by the user. * * @slot clear-all - Clear all button's slot. * @slot clear-all-label - Clear all button label's slot. * * @csspart base - The component's base wrapper. * @csspart row - Each row filter's container. * * @cssproperty [--base-padding=var(--o-spacing-small, 0.75rem)] - CSS custom property to change the filters component container's padding. * @cssproperty [--base-min-width=fit-content] - CSS custom property to set the filters component container's (base row) minimum width. * @cssproperty [--base-border-width=1px] - CSS custom property to set the filters component container's border width. * @cssproperty [--base-background-color=var(--o-panel-background-color)] - CSS custom property to set the filters component container's background color. * @cssproperty [--base-border-color=var(--o-color-neutral-200)] - CSS custom property to set the filters component container's border color. * @cssproperty [--base-border-radius=var(--o-border-radius-medium)] - CSS custom property to set the filters component container's border radius. * @cssproperty [--filter-default-width=240px] - Sets the default width of each filter (except row, divider and input date). * @cssproperty [--filter-row-width=100%] - CSS custom property to set the filters row component's width. * @cssproperty [--filter-input-date-width=190px] - Sets the width of filter input type date. * @cssproperty [--filter-divider-width=100%] - Sets the width of each horizontal divider filter. * @cssproperty [--filter-divider-height=var(--o-input-height-medium, 2.5rem)] - Sets the height of each vertical divider filter. * @cssproperty [--filter-row-padding=0] - Sets the padding of each row filter. * @cssproperty [--filter-row-border=0] - CSS custom property to set the border of each row filter. * @cssproperty [--clear-all-label-padding=0 0.1rem] - CSS custom property to set the padding of the clear all label. */ export default class OFilters extends LibraryBaseElement { static styles: CSSResultGroup; static dependencies: { 'o-input': typeof OInput; 'o-select': typeof OSelect; 'o-switch': typeof OSwitch; 'o-divider': typeof ODivider; 'o-button': typeof OButton; 'o-icon': typeof OIcon; }; /** Filters configuration in JSON format. */ filters: Filters | undefined; /** Sets whetter the clear all button has to be shown or not */ hideClearAll: boolean; private filtersConfigs; private typesPluginsMap; private filtersData; private filtersMasterMap; private lastFocusedFilterName; private clearAllContainer; constructor(); filtersConfigUpdated(): void; private isFiltersConfigValid; private initConfig; private getTypePluginMap; private getTypePluginInstance; private getTypePluginFunction; private getValidPropsFromFilterConfig; private isPropMandatory; private checkFilterConfigValidity; private checkCustomElementDefinition; private setPropsToElement; /** Loop over all the filters and internal items (RowFilter) and return an object with the filter name as a key and the filter config as the value */ private getFiltersConfigGroupByName; private setDefaultFilterEvents; private setFiltersMasterMap; private getFilterMasterMap; private updateFilterMasterMap; /** Focus a filter control, it is useful when the filters config is updated and a filter control was already focused, so, it keeps the focus */ private focusFilterControlAfterConnectedEvent; private renderClearAllButton; private shouldRenderClearAllButton; private showClearAllButtonIfNecessary; private setFilterDataByFilterConfig; private getLastFocusedFilterName; private setLastFocusedFilterName; /** Adds a new type instance which can be used to extend the filters types support */ private registerTypePlugin; private registerTypePluginRequestUpdateTimerId; /** * Register a new type plugin * @param typePluginCtor type plugin constructor */ registerType(typePluginCtor: new (filtersComponent: OFilters) => AbstractTypePlugin): void; /** Sets a filter value by name */ setFilterValue(name: string, value: any, { emitEvent }?: { emitEvent: boolean; }): void; /** Sets a filter value by filter config */ setFilterValueByFilterConfig(filter: Filter, value: any, { emitEvent }?: { emitEvent: boolean; }): void; /** Gets a filter value by name */ getFilterValue(name: string): any; /** Gets all filters data */ getFiltersData(): { [key: string]: any; }; /** Shows a filter by name, if the `show` param is `false`, the filter will be `hidden` */ showFilter(name: string, show?: boolean): void; /** Hides a filter by name, the of the filter value is set to `undefined` */ hideFilter(name: string): void; /** Gets a filter config by name */ getFilterConfigByName(name: string): Filter | undefined; /** Gets a filter control (Circular element reference) by name */ getFilterControlByName(name: string): LibraryBaseElement | undefined; /** Clear all the filters, sets every value to `undefined` */ clearAll(): void; createFilterElement(tag: string, filter: Filter): LibraryBaseElement; renderFilters(filters: Filter[]): (HTMLElement | TemplateResult | typeof nothing)[]; render(): TemplateResult<1> | typeof nothing; } declare global { interface HTMLElementTagNameMap { 'o-filters': OFilters; } }