@area8975/ui 0.2.2-dev.48 → 0.2.2-dev.50

package/fesm2022/area8975-ui-table-filters.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-table-filters.mjs","names":[],"sources":["../../../projects/ui/table-filters/table-filters.types.ts","../../../projects/ui/table-filters/table-filters.component.ts","../../../projects/ui/table-filters/table-filters.component.html"],"sourcesContent":["import type { DateRange, IsoDate } from '@area8975/ui/calendar';\nimport type { DateRangePreset } from '@area8975/ui/date-range-picker';\n\n\nexport const TableFiltersBreakpoints = {\n    sm: '40rem',\n    md: '48rem',\n    lg: '64rem',\n    xl: '80rem',\n    '2xl': '96rem'\n} as const;\n\n/** @see {@link TableFiltersBreakpoints} */\nexport type TableFiltersBreakpoint = keyof typeof TableFiltersBreakpoints;\n\nexport interface TableFacetOption {\n    value: unknown;\n    label: string;\n}\n\n/** Writes the picked value, or an array when `multiple`, under `id`. */\nexport interface TableOptionsFacet {\n    id: string;\n    label: string;\n    kind: 'options';\n    options: TableFacetOption[];\n\n    multiple?: boolean;\n\n    /** Shows this many options, plus any picked, then a \"Show N more\" toggle. Leave out to show them all. */\n    visibleOptions?: number;\n}\n\n/** Writes `{ start, end }` ISO dates under `id`. */\nexport interface TableDateRangeFacet {\n    id: string;\n    label: string;\n    kind: 'dateRange';\n\n    /** Quick picks, see date-range-presets.ts for ready made ones. */\n    presets?: DateRangePreset[];\n    placeholder?: string;\n    min?: IsoDate | null;\n    max?: IsoDate | null;\n}\n\n/** Either end is null when it's open. */\nexport interface TableAmountRange {\n    min: number | null;\n    max: number | null;\n}\n\nexport interface TableAmountRangePreset {\n    label: string;\n    range: TableAmountRange;\n}\n\n/** Writes `{ min, max }` under `id`, both ends included, with at least one of them set. */\nexport interface TableAmountRangeFacet {\n    id: string;\n    label: string;\n    kind: 'amountRange';\n\n    presets?: TableAmountRangePreset[];\n\n    /** Shown before each amount, such as a currency symbol. */\n    prefix?: string;\n}\n\nexport type TableFacet =\n    | TableOptionsFacet\n    | TableDateRangeFacet\n    | TableAmountRangeFacet;\n\nexport type TableFacetDateRange = DateRange;\n","import { DOCUMENT, NgTemplateOutlet } from '@angular/common';\nimport {\n    Component,\n    computed,\n    effect,\n    inject,\n    input,\n    model,\n    signal,\n    untracked\n} from '@angular/core';\n\nimport { UiBadgeComponent } from '@area8975/ui/badge';\nimport { UiButtonComponent } from '@area8975/ui/button';\nimport type { DateRange } from '@area8975/ui/calendar';\nimport { UiCheckboxComponent } from '@area8975/ui/checkbox';\nimport { UiDateRangePickerComponent } from '@area8975/ui/date-range-picker';\nimport { UiDrawerComponent } from '@area8975/ui/drawer';\nimport { UiInputComponent } from '@area8975/ui/input';\nimport { UiRadioComponent } from '@area8975/ui/radio';\nimport {\n    type UiLinkedTable,\n    UiTableRegistry\n} from '@area8975/ui/table';\n\nimport {\n    type TableAmountRange,\n    type TableAmountRangeFacet,\n    type TableDateRangeFacet,\n    type TableFacet,\n    type TableFacetOption,\n    type TableFiltersBreakpoint,\n    TableFiltersBreakpoints,\n    type TableOptionsFacet\n} from './table-filters.types';\n\n\nlet nextId = 0;\n\ntype Filters = Record<string, unknown>;\n\ntype RangeMode = 'any' | 'custom' | number;\n\ntype AmountEnd = keyof TableAmountRange;\n\n// kept as typed, so a half written amount like \"12.\" isn't tidied away\ntype AmountDraft = Record<AmountEnd, string>;\n\n@Component({\n    selector: 'ui-table-filters',\n    templateUrl: './table-filters.component.html',\n    styleUrl: './table-filters.component.css',\n    imports: [\n        NgTemplateOutlet,\n        UiButtonComponent,\n        UiBadgeComponent,\n        UiDrawerComponent,\n        UiCheckboxComponent,\n        UiRadioComponent,\n        UiInputComponent,\n        UiDateRangePickerComponent\n    ],\n    host: { class: 'block' }\n})\nexport class UiTableFiltersComponent {\n    private readonly registry = inject(UiTableRegistry);\n\n    readonly facets = input.required<TableFacet[]>();\n\n    /** The `tableId` of a ui-table to filter, it can render before or after this. */\n    readonly table = input<string | null>(null);\n\n    readonly value = model<Filters>({});\n\n    /** Below this breakpoint the panel becomes a Filters button and a drawer. */\n    readonly collapseBelow = input<TableFiltersBreakpoint>('lg');\n\n    protected readonly idPrefix = `ui-table-filters-${nextId++}`;\n\n    protected readonly anyRange: RangeMode = 'any';\n    protected readonly customRange: RangeMode = 'custom';\n\n    private readonly customRanges = signal<ReadonlySet<string>>(new Set());\n\n    private readonly amountDrafts = signal<Record<string, AmountDraft>>({});\n\n    private readonly expanded = signal<ReadonlySet<string>>(new Set());\n\n    private readonly linked = computed(() => {\n        const id = this.table();\n\n        return id ? this.registry.get(id) : null;\n    });\n\n    protected readonly appliedCount = computed(() =>\n        this.facets().filter(facet => facet.id in this.value()).length\n    );\n\n    protected readonly anyApplied = computed(() => this.appliedCount() > 0);\n\n    private readonly window = inject(DOCUMENT).defaultView;\n\n    // two copies of the filters would share radio names\n    protected readonly wide = signal(true);\n\n    constructor() {\n        effect(onCleanup => {\n            const media = this.window?.matchMedia?.(\n                `(min-width: ${TableFiltersBreakpoints[this.collapseBelow()]})`\n            );\n\n            if (!media) {\n                return;\n            }\n\n            const onChange = (event: MediaQueryListEvent) =>\n                this.wide.set(event.matches);\n\n            this.wide.set(media.matches);\n            media.addEventListener('change', onChange);\n            onCleanup(() => media.removeEventListener('change', onChange));\n        });\n\n        let previous: UiLinkedTable | null = null;\n\n        effect(() => {\n            const table = this.linked();\n            const filters = table?.filters() ?? {};\n\n            untracked(() => {\n                const justLinked = table !== previous;\n\n                previous = table;\n\n                if (!table) {\n                    return;\n                }\n\n                if (justLinked && this.anyApplied() && !this.hasAny(filters)) {\n                    table.filters.set({\n                        ...filters,\n                        ...this.ownFilters(this.value())\n                    });\n\n                    return;\n                }\n\n                this.value.set(filters);\n            });\n        });\n    }\n\n    protected groupName(facet: TableFacet): string {\n        return `${this.idPrefix}-${facet.id}`;\n    }\n\n    protected choiceId(facet: TableFacet, choice: number | string): string {\n        return `${this.groupName(facet)}-${choice}`;\n    }\n\n    protected picked(facet: TableOptionsFacet): unknown {\n        return this.value()[facet.id] ?? null;\n    }\n\n    protected pick(facet: TableOptionsFacet, value: unknown): void {\n        this.apply(facet.id, value ?? undefined);\n    }\n\n    protected isChecked(\n        facet: TableOptionsFacet,\n        option: TableFacetOption\n    ): boolean {\n        const applied = this.value()[facet.id];\n\n        return Array.isArray(applied) && applied.includes(option.value);\n    }\n\n    protected check(\n        facet: TableOptionsFacet,\n        option: TableFacetOption,\n        checked: boolean\n    ): void {\n        const applied = this.value()[facet.id];\n        const picked = (Array.isArray(applied) ? applied : []).filter(value =>\n            value !== option.value\n        );\n        const next = checked ? [...picked, option.value] : picked;\n\n        this.apply(facet.id, next.length ? next : undefined);\n    }\n\n    protected isExpanded(facet: TableOptionsFacet): boolean {\n        return this.expanded().has(facet.id);\n    }\n\n    // a picked option past the cut-off stays shown in its place\n    protected isShown(\n        facet: TableOptionsFacet,\n        option: TableFacetOption,\n        index: number\n    ): boolean {\n        return this.isExpanded(facet) ||\n            !this.isPastCutoff(facet, index) ||\n            this.isSelected(facet, option);\n    }\n\n    /** How many options collapsing hides, 0 when there's nothing to toggle. */\n    protected hiddenCount(facet: TableOptionsFacet): number {\n        return facet.options.filter((option, index) =>\n            this.isPastCutoff(facet, index) && !this.isSelected(facet, option)\n        ).length;\n    }\n\n    protected toggleExpanded(facet: TableOptionsFacet): void {\n        this.expanded.update(ids => {\n            const next = new Set(ids);\n\n            if (!next.delete(facet.id)) {\n                next.add(facet.id);\n            }\n\n            return next;\n        });\n    }\n\n    protected range(facet: TableDateRangeFacet): DateRange {\n        return (this.value()[facet.id] as DateRange | undefined) ??\n            { start: null, end: null };\n    }\n\n    protected dateMode(facet: TableDateRangeFacet): RangeMode {\n        if (this.customRanges().has(facet.id)) {\n            return 'custom';\n        }\n\n        const applied = this.range(facet);\n\n        if (!applied.start) {\n            return 'any';\n        }\n\n        const index = (facet.presets ?? []).findIndex(preset => {\n            const range = preset.range();\n\n            return range.start === applied.start && range.end === applied.end;\n        });\n\n        return index === -1 ? 'custom' : index;\n    }\n\n    protected pickDate(facet: TableDateRangeFacet, mode: RangeMode): void {\n        this.setCustom(facet.id, mode === 'custom');\n\n        if (mode === 'any') {\n            this.apply(facet.id, undefined);\n        } else if (mode !== 'custom') {\n            this.apply(facet.id, facet.presets?.[mode]?.range());\n        }\n    }\n\n    protected setRange(facet: TableDateRangeFacet, range: DateRange): void {\n        this.apply(facet.id, range.start ? range : undefined);\n    }\n\n    protected amountRange(\n        facet: TableAmountRangeFacet\n    ): TableAmountRange | undefined {\n        return this.value()[facet.id] as TableAmountRange | undefined;\n    }\n\n    protected amountMode(facet: TableAmountRangeFacet): RangeMode {\n        if (this.customRanges().has(facet.id)) {\n            return 'custom';\n        }\n\n        const applied = this.amountRange(facet);\n\n        if (!applied) {\n            return 'any';\n        }\n\n        const index = (facet.presets ?? []).findIndex(preset =>\n            isSameAmountRange(preset.range, applied)\n        );\n\n        return index === -1 ? 'custom' : index;\n    }\n\n    protected pickAmount(facet: TableAmountRangeFacet, mode: RangeMode): void {\n        this.setCustom(facet.id, mode === 'custom');\n        this.forgetAmountDraft(facet.id);\n\n        if (mode === 'any') {\n            this.apply(facet.id, undefined);\n        } else if (mode !== 'custom') {\n            this.apply(facet.id, facet.presets?.[mode]?.range);\n        }\n    }\n\n    protected amountText(facet: TableAmountRangeFacet, end: AmountEnd): string {\n        const draft = this.amountDrafts()[facet.id];\n        const applied = this.amountRange(facet);\n\n        // a draft that no longer matches was replaced from outside\n        if (draft && isSameAmountRange(amountRangeFrom(draft), applied)) {\n            return draft[end];\n        }\n\n        return applied?.[end]?.toString() ?? '';\n    }\n\n    protected typeAmount(\n        facet: TableAmountRangeFacet,\n        end: AmountEnd,\n        text: string\n    ): void {\n        const draft: AmountDraft = {\n            min: this.amountText(facet, 'min'),\n            max: this.amountText(facet, 'max'),\n            [end]: text\n        };\n\n        this.amountDrafts.update(drafts => ({ ...drafts, [facet.id]: draft }));\n        this.apply(facet.id, amountRangeFrom(draft));\n    }\n\n    protected isAmountValid(\n        facet: TableAmountRangeFacet,\n        end: AmountEnd\n    ): boolean {\n        const draft = this.amountDrafts()[facet.id];\n\n        if (!draft) {\n            return true;\n        }\n\n        return isReadableAmount(draft[end]) && !isBackwards(draft);\n    }\n\n    protected clearAll(): void {\n        this.customRanges.set(new Set());\n        this.amountDrafts.set({});\n        this.write(this.withoutOwn(this.currentFilters()));\n    }\n\n    private setCustom(id: string, custom: boolean): void {\n        this.customRanges.update(ids => {\n            const next = new Set(ids);\n\n            if (custom) {\n                next.add(id);\n            } else {\n                next.delete(id);\n            }\n\n            return next;\n        });\n    }\n\n    private forgetAmountDraft(id: string): void {\n        this.amountDrafts.update(drafts =>\n            Object.fromEntries(\n                Object.entries(drafts).filter(([draftId]) => draftId !== id)\n            )\n        );\n    }\n\n    private isPastCutoff(facet: TableOptionsFacet, index: number): boolean {\n        return facet.visibleOptions !== undefined &&\n            index >= facet.visibleOptions;\n    }\n\n    private isSelected(\n        facet: TableOptionsFacet,\n        option: TableFacetOption\n    ): boolean {\n        return facet.multiple ?\n            this.isChecked(facet, option) :\n            this.picked(facet) === option.value;\n    }\n\n    private apply(id: string, applied: unknown): void {\n        const next = { ...this.currentFilters() };\n\n        if (applied === undefined) {\n            delete next[id];\n        } else {\n            next[id] = applied;\n        }\n\n        this.write(next);\n    }\n\n    private write(filters: Filters): void {\n        this.value.set(filters);\n        this.linked()?.filters.set(filters);\n    }\n\n    private currentFilters(): Filters {\n        return this.linked()?.filters() ?? this.value();\n    }\n\n    private ownFilters(filters: Filters): Filters {\n        const ids = new Set(this.facets().map(facet => facet.id));\n\n        return Object.fromEntries(\n            Object.entries(filters).filter(([id]) => ids.has(id))\n        );\n    }\n\n    private withoutOwn(filters: Filters): Filters {\n        const ids = new Set(this.facets().map(facet => facet.id));\n\n        return Object.fromEntries(\n            Object.entries(filters).filter(([id]) => !ids.has(id))\n        );\n    }\n\n    private hasAny(filters: Filters): boolean {\n        return Object.keys(this.ownFilters(filters)).length > 0;\n    }\n}\n\nfunction amountFrom(text: string): number | null {\n    const digits = text.trim().replaceAll(',', '');\n\n    if (!digits) {\n        return null;\n    }\n\n    const amount = Number(digits);\n\n    return Number.isFinite(amount) ? amount : null;\n}\n\nfunction isReadableAmount(text: string): boolean {\n    return !text.trim() || amountFrom(text) !== null;\n}\n\nfunction isBackwards(draft: AmountDraft): boolean {\n    const min = amountFrom(draft.min);\n    const max = amountFrom(draft.max);\n\n    return min !== null && max !== null && min > max;\n}\n\n// undefined while there's nothing to filter by, or the ends are the wrong way round\nfunction amountRangeFrom(draft: AmountDraft): TableAmountRange | undefined {\n    const range = { min: amountFrom(draft.min), max: amountFrom(draft.max) };\n    const isOpen = range.min === null && range.max === null;\n\n    return isOpen || isBackwards(draft) ? undefined : range;\n}\n\nfunction isSameAmountRange(\n    first: TableAmountRange | undefined,\n    second: TableAmountRange | undefined\n): boolean {\n    return (first?.min ?? null) === (second?.min ?? null) &&\n        (first?.max ?? null) === (second?.max ?? null);\n}\n","@if (wide()) {\n    <div class=\"ui-table-filters-panel ui-table-filters-panel--card\">\n        <ng-container *ngTemplateOutlet=\"body; context: { $implicit: true }\" />\n    </div>\n} @else {\n    <ui-button\n        appearance=\"white\"\n        intent=\"secondary\"\n        size=\"sm\"\n        classes=\"gap-x-2 h-9.5 py-0!\"\n        (click)=\"drawer.isOpen.set(true)\"\n    >\n        Filters\n        @if (appliedCount()) {\n            <ui-badge appearance=\"soft\" size=\"xs\" class=\"ui-text-caption\">{{\n                    appliedCount()\n                }}</ui-badge>\n        }\n    </ui-button>\n\n    <ui-drawer #drawer label=\"Filters\">\n        <button\n            drawer-actions\n            type=\"button\"\n            class=\"ui-table-filters-clear ui-text-body-alt\"\n            [class.invisible]=\"!anyApplied()\"\n            (click)=\"clearAll()\"\n        >\n            Clear all\n        </button>\n\n        <div class=\"ui-table-filters-panel\">\n            <ng-container\n                *ngTemplateOutlet=\"body; context: { $implicit: false }\"\n            />\n        </div>\n    </ui-drawer>\n}\n\n<ng-template #body let-showHeader>\n    @if (showHeader) {\n        <div class=\"ui-table-filters-header\">\n            <span class=\"ui-table-filters-title ui-text-body\">\n                Filters\n            </span>\n\n            <button\n                type=\"button\"\n                class=\"ui-table-filters-clear ui-text-body-alt\"\n                [class.invisible]=\"!anyApplied()\"\n                (click)=\"clearAll()\"\n            >\n                Clear all\n            </button>\n        </div>\n    }\n\n    @for (facet of facets(); track facet.id) {\n        <fieldset class=\"ui-table-filters-facet\">\n            <legend class=\"ui-table-filters-legend ui-text-body-alt\">\n                {{ facet.label }}\n            </legend>\n\n            <div\n                class=\"ui-table-filters-choices\"\n                [id]=\"groupName(facet) + '-options'\"\n            >\n                @switch (facet.kind) {\n                    @case ('options') {\n                        @if (facet.multiple) {\n                            @for (option of facet.options; track option.value; let index = $index) {\n                                @if (isShown(facet, option, index)) {\n                                    <label\n                                        class=\"ui-table-filters-choice ui-text-body-alt\"\n                                        [for]=\"choiceId(facet, index)\"\n                                    >\n                                        <ui-checkbox\n                                            [id]=\"choiceId(facet, index)\"\n                                            [value]=\"isChecked(facet, option)\"\n                                            (valueChange)=\"check(facet, option, $event)\"\n                                        />\n                                        <span class=\"truncate\">{{\n                                                option.label\n                                            }}</span>\n                                    </label>\n                                }\n                            }\n                        } @else {\n                            <label\n                                class=\"ui-table-filters-choice ui-text-body-alt\"\n                                [for]=\"choiceId(facet, 'any')\"\n                            >\n                                <ui-radio\n                                    [id]=\"choiceId(facet, 'any')\"\n                                    [value]=\"picked(facet)\"\n                                    (valueChange)=\"pick(facet, $event)\"\n                                    [option]=\"null\"\n                                    [name]=\"groupName(facet)\"\n                                />\n                                <span class=\"truncate\">Any</span>\n                            </label>\n\n                            @for (option of facet.options; track option.value; let index = $index) {\n                                @if (isShown(facet, option, index)) {\n                                    <label\n                                        class=\"ui-table-filters-choice ui-text-body-alt\"\n                                        [for]=\"choiceId(facet, index)\"\n                                    >\n                                        <ui-radio\n                                            [id]=\"choiceId(facet, index)\"\n                                            [value]=\"picked(facet)\"\n                                            (valueChange)=\"pick(facet, $event)\"\n                                            [option]=\"option.value\"\n                                            [name]=\"groupName(facet)\"\n                                        />\n                                        <span class=\"truncate\">{{\n                                                option.label\n                                            }}</span>\n                                    </label>\n                                }\n                            }\n                        }\n                    }\n                    @case ('dateRange') {\n                        <label\n                            class=\"ui-table-filters-choice ui-text-body-alt\"\n                            [for]=\"choiceId(facet, 'any')\"\n                        >\n                            <ui-radio\n                                [id]=\"choiceId(facet, 'any')\"\n                                [value]=\"dateMode(facet)\"\n                                (valueChange)=\"pickDate(facet, $event)\"\n                                [option]=\"anyRange\"\n                                [name]=\"groupName(facet)\"\n                            />\n                            <span class=\"truncate\">Any time</span>\n                        </label>\n\n                        @for (preset of facet.presets ?? []; track preset.label; let index = $index) {\n                            <label\n                                class=\"ui-table-filters-choice ui-text-body-alt\"\n                                [for]=\"choiceId(facet, index)\"\n                            >\n                                <ui-radio\n                                    [id]=\"choiceId(facet, index)\"\n                                    [value]=\"dateMode(facet)\"\n                                    (valueChange)=\"pickDate(facet, $event)\"\n                                    [option]=\"index\"\n                                    [name]=\"groupName(facet)\"\n                                />\n                                <span class=\"truncate\">{{ preset.label }}</span>\n                            </label>\n                        }\n\n                        <label\n                            class=\"ui-table-filters-choice ui-text-body-alt\"\n                            [for]=\"choiceId(facet, 'custom')\"\n                        >\n                            <ui-radio\n                                [id]=\"choiceId(facet, 'custom')\"\n                                [value]=\"dateMode(facet)\"\n                                (valueChange)=\"pickDate(facet, $event)\"\n                                [option]=\"customRange\"\n                                [name]=\"groupName(facet)\"\n                            />\n                            <span class=\"truncate\">Custom range</span>\n                        </label>\n\n                        @if (dateMode(facet) === 'custom') {\n                            <label\n                                class=\"sr-only\"\n                                [for]=\"groupName(facet) + '-range'\"\n                            >{{ facet.label }} range</label>\n                            <ui-date-range-picker\n                                class=\"ui-table-filters-range\"\n                                [id]=\"groupName(facet) + '-range'\"\n                                [value]=\"range(facet)\"\n                                (valueChange)=\"setRange(facet, $event)\"\n                                [placeholder]=\"facet.placeholder ?? 'Select dates'\"\n                                [min]=\"facet.min ?? null\"\n                                [max]=\"facet.max ?? null\"\n                            />\n                        }\n                    }\n                    @case ('amountRange') {\n                        <label\n                            class=\"ui-table-filters-choice ui-text-body-alt\"\n                            [for]=\"choiceId(facet, 'any')\"\n                        >\n                            <ui-radio\n                                [id]=\"choiceId(facet, 'any')\"\n                                [value]=\"amountMode(facet)\"\n                                (valueChange)=\"pickAmount(facet, $event)\"\n                                [option]=\"anyRange\"\n                                [name]=\"groupName(facet)\"\n                            />\n                            <span class=\"truncate\">Any amount</span>\n                        </label>\n\n                        @for (preset of facet.presets ?? []; track preset.label; let index = $index) {\n                            <label\n                                class=\"ui-table-filters-choice ui-text-body-alt\"\n                                [for]=\"choiceId(facet, index)\"\n                            >\n                                <ui-radio\n                                    [id]=\"choiceId(facet, index)\"\n                                    [value]=\"amountMode(facet)\"\n                                    (valueChange)=\"pickAmount(facet, $event)\"\n                                    [option]=\"index\"\n                                    [name]=\"groupName(facet)\"\n                                />\n                                <span class=\"truncate\">{{ preset.label }}</span>\n                            </label>\n                        }\n\n                        <label\n                            class=\"ui-table-filters-choice ui-text-body-alt\"\n                            [for]=\"choiceId(facet, 'custom')\"\n                        >\n                            <ui-radio\n                                [id]=\"choiceId(facet, 'custom')\"\n                                [value]=\"amountMode(facet)\"\n                                (valueChange)=\"pickAmount(facet, $event)\"\n                                [option]=\"customRange\"\n                                [name]=\"groupName(facet)\"\n                            />\n                            <span class=\"truncate\">Custom range</span>\n                        </label>\n\n                        @if (amountMode(facet) === 'custom') {\n                            <div class=\"ui-table-filters-amounts\">\n                                <ui-input\n                                    class=\"ui-table-filters-amount ui-text-body-alt\"\n                                    [id]=\"groupName(facet) + '-min'\"\n                                    inputmode=\"decimal\"\n                                    placeholder=\"Min\"\n                                    [ariaLabel]=\"facet.label + ' from'\"\n                                    [value]=\"amountText(facet, 'min')\"\n                                    (valueChange)=\"typeAmount(facet, 'min', $event)\"\n                                    [validationState]=\"isAmountValid(facet, 'min') ? null : false\"\n                                >\n                                    @if (facet.prefix) {\n                                        <ng-template #leading>\n                                            <span class=\"ui-table-filters-prefix\">{{\n                                                    facet.prefix\n                                                }}</span>\n                                        </ng-template>\n                                    }\n                                </ui-input>\n\n                                <span class=\"ui-table-filters-to ui-text-body-alt\">to</span>\n\n                                <ui-input\n                                    class=\"ui-table-filters-amount ui-text-body-alt\"\n                                    [id]=\"groupName(facet) + '-max'\"\n                                    inputmode=\"decimal\"\n                                    placeholder=\"Max\"\n                                    [ariaLabel]=\"facet.label + ' up to'\"\n                                    [value]=\"amountText(facet, 'max')\"\n                                    (valueChange)=\"typeAmount(facet, 'max', $event)\"\n                                    [validationState]=\"isAmountValid(facet, 'max') ? null : false\"\n                                >\n                                    @if (facet.prefix) {\n                                        <ng-template #leading>\n                                            <span class=\"ui-table-filters-prefix\">{{\n                                                    facet.prefix\n                                                }}</span>\n                                        </ng-template>\n                                    }\n                                </ui-input>\n                            </div>\n                        }\n                    }\n                }\n            </div>\n\n            @if (facet.kind === 'options' && hiddenCount(facet)) {\n                <button\n                    type=\"button\"\n                    class=\"ui-table-filters-more ui-text-body-alt\"\n                    [attr.aria-expanded]=\"isExpanded(facet)\"\n                    [attr.aria-controls]=\"groupName(facet) + '-options'\"\n                    (click)=\"toggleExpanded(facet)\"\n                >\n                    @if (isExpanded(facet)) {\n                        Show fewer\n                    } @else {\n                        Show {{ hiddenCount(facet) }} more\n                    }\n                </button>\n            }\n        </fieldset>\n    }\n</ng-template>\n"],"mappings":";;;;;;;;;;;AAIA,MAAa,0BAA0B;CACnC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACD;AC2BV,IAAI,SAAS;AA2Bb,IAAa,0BAAb,MAAa,wBAAuB;CACf,WAAW,OAAO,eAAe;CAEzC,SAAS,MAAM,SAAwB,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAGvC,QAAQ,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAElC,QAAQ,MAAe,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAG1B,gBAAgB,MAA8B,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAEzC,WAAW,oBAAoB;CAE/B,WAAsB;CACtB,cAAyB;CAE3B,eAAe,uBAA4B,IAAI,IAAG,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAErD,eAAe,OAAoC,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEtD,WAAW,uBAA4B,IAAI,IAAG,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAEjD,SAAS,eAAc;EACpC,MAAM,KAAK,KAAK,MAAK;EAErB,OAAO,KAAK,KAAK,SAAS,IAAI,EAAE,IAAI;CACxC,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAEiB,eAAe,eAC9B,KAAK,OAAM,CAAE,CAAC,QAAO,UAAS,MAAM,MAAM,KAAK,MAAK,CAAE,CAAC,CAAC,QAC3D,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEkB,aAAa,eAAe,KAAK,aAAY,IAAK,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAEtD,SAAS,OAAO,QAAQ,CAAC,CAAC;CAGxB,OAAO,OAAO,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAEtC,cAAA;EACI,QAAO,cAAY;GACf,MAAM,QAAQ,KAAK,QAAQ,aACvB,eAAe,wBAAwB,KAAK,cAAa,GAAG,EAAG;GAGnE,IAAI,CAAC,OACD;GAGJ,MAAM,YAAY,UACd,KAAK,KAAK,IAAI,MAAM,OAAO;GAE/B,KAAK,KAAK,IAAI,MAAM,OAAO;GAC3B,MAAM,iBAAiB,UAAU,QAAQ;GACzC,gBAAgB,MAAM,oBAAoB,UAAU,QAAQ,CAAC;EACjE,CAAC;EAED,IAAI,WAAiC;EAErC,aAAY;GACR,MAAM,QAAQ,KAAK,OAAM;GACzB,MAAM,UAAU,OAAO,QAAO,KAAM,CAAA;GAEpC,gBAAe;IACX,MAAM,aAAa,UAAU;IAE7B,WAAW;IAEX,IAAI,CAAC,OACD;IAGJ,IAAI,cAAc,KAAK,WAAU,KAAM,CAAC,KAAK,OAAO,OAAO,GAAG;KAC1D,MAAM,QAAQ,IAAI;MACd,GAAG;MACH,GAAG,KAAK,WAAW,KAAK,MAAK,CAAE;KAClC,CAAA;KAED;IACJ;IAEA,KAAK,MAAM,IAAI,OAAO;GAC1B,CAAC;EACL,CAAC;CACL;CAEU,UAAU,OAAiB;EACjC,OAAO,GAAG,KAAK,SAAQ,GAAI,MAAM;CACrC;CAEU,SAAS,OAAmB,QAAuB;EACzD,OAAO,GAAG,KAAK,UAAU,KAAK,EAAC,GAAI;CACvC;CAEU,OAAO,OAAwB;EACrC,OAAO,KAAK,MAAK,CAAE,CAAC,MAAM,OAAO;CACrC;CAEU,KAAK,OAA0B,OAAc;EACnD,KAAK,MAAM,MAAM,IAAI,SAAS,MAAS;CAC3C;CAEU,UACN,OACA,QAAwB;EAExB,MAAM,UAAU,KAAK,MAAK,CAAE,CAAC,MAAM;EAEnC,OAAO,MAAM,QAAQ,OAAO,KAAK,QAAQ,SAAS,OAAO,KAAK;CAClE;CAEU,MACN,OACA,QACA,SAAgB;EAEhB,MAAM,UAAU,KAAK,MAAK,CAAE,CAAC,MAAM;EACnC,MAAM,UAAU,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAA,EAAA,CAAI,QAAO,UAC1D,UAAU,OAAO,KAAK;EAE1B,MAAM,OAAO,UAAU,CAAC,GAAG,QAAQ,OAAO,KAAK,IAAI;EAEnD,KAAK,MAAM,MAAM,IAAI,KAAK,SAAS,OAAO,MAAS;CACvD;CAEU,WAAW,OAAwB;EACzC,OAAO,KAAK,SAAQ,CAAE,CAAC,IAAI,MAAM,EAAE;CACvC;CAGU,QACN,OACA,QACA,OAAa;EAEb,OAAO,KAAK,WAAW,KAAK,KACxB,CAAC,KAAK,aAAa,OAAO,KAAK,KAC/B,KAAK,WAAW,OAAO,MAAM;CACrC;CAGU,YAAY,OAAwB;EAC1C,OAAO,MAAM,QAAQ,QAAQ,QAAQ,UACjC,KAAK,aAAa,OAAO,KAAK,KAAK,CAAC,KAAK,WAAW,OAAO,MAAM,CAAC,CACrE,CAAC;CACN;CAEU,eAAe,OAAwB;EAC7C,KAAK,SAAS,QAAO,QAAM;GACvB,MAAM,OAAO,IAAI,IAAI,GAAG;GAExB,IAAI,CAAC,KAAK,OAAO,MAAM,EAAE,GACrB,KAAK,IAAI,MAAM,EAAE;GAGrB,OAAO;EACX,CAAC;CACL;CAEU,MAAM,OAA0B;EACtC,OAAQ,KAAK,MAAK,CAAE,CAAC,MAAM,OACvB;GAAE,OAAO;GAAM,KAAK;EAAI;CAChC;CAEU,SAAS,OAA0B;EACzC,IAAI,KAAK,aAAY,CAAE,CAAC,IAAI,MAAM,EAAE,GAChC,OAAO;EAGX,MAAM,UAAU,KAAK,MAAM,KAAK;EAEhC,IAAI,CAAC,QAAQ,OACT,OAAO;EAGX,MAAM,SAAS,MAAM,WAAW,CAAA,EAAA,CAAI,WAAU,WAAS;GACnD,MAAM,QAAQ,OAAO,MAAK;GAE1B,OAAO,MAAM,UAAU,QAAQ,SAAS,MAAM,QAAQ,QAAQ;EAClE,CAAC;EAED,OAAO,UAAU,KAAK,WAAW;CACrC;CAEU,SAAS,OAA4B,MAAe;EAC1D,KAAK,UAAU,MAAM,IAAI,SAAS,QAAQ;EAE1C,IAAI,SAAS,OACT,KAAK,MAAM,MAAM,IAAI,MAAS;OAC3B,IAAI,SAAS,UAChB,KAAK,MAAM,MAAM,IAAI,MAAM,UAAU,KAAK,EAAE,MAAK,CAAE;CAE3D;CAEU,SAAS,OAA4B,OAAgB;EAC3D,KAAK,MAAM,MAAM,IAAI,MAAM,QAAQ,QAAQ,MAAS;CACxD;CAEU,YACN,OAA4B;EAE5B,OAAO,KAAK,MAAK,CAAE,CAAC,MAAM;CAC9B;CAEU,WAAW,OAA4B;EAC7C,IAAI,KAAK,aAAY,CAAE,CAAC,IAAI,MAAM,EAAE,GAChC,OAAO;EAGX,MAAM,UAAU,KAAK,YAAY,KAAK;EAEtC,IAAI,CAAC,SACD,OAAO;EAGX,MAAM,SAAS,MAAM,WAAW,CAAA,EAAA,CAAI,WAAU,WAC1C,kBAAkB,OAAO,OAAO,OAAO,CAAC;EAG5C,OAAO,UAAU,KAAK,WAAW;CACrC;CAEU,WAAW,OAA8B,MAAe;EAC9D,KAAK,UAAU,MAAM,IAAI,SAAS,QAAQ;EAC1C,KAAK,kBAAkB,MAAM,EAAE;EAE/B,IAAI,SAAS,OACT,KAAK,MAAM,MAAM,IAAI,MAAS;OAC3B,IAAI,SAAS,UAChB,KAAK,MAAM,MAAM,IAAI,MAAM,UAAU,KAAK,EAAE,KAAK;CAEzD;CAEU,WAAW,OAA8B,KAAc;EAC7D,MAAM,QAAQ,KAAK,aAAY,CAAE,CAAC,MAAM;EACxC,MAAM,UAAU,KAAK,YAAY,KAAK;EAGtC,IAAI,SAAS,kBAAkB,gBAAgB,KAAK,GAAG,OAAO,GAC1D,OAAO,MAAM;EAGjB,OAAO,UAAU,IAAI,EAAE,SAAQ,KAAM;CACzC;CAEU,WACN,OACA,KACA,MAAY;EAEZ,MAAM,QAAqB;GACvB,KAAK,KAAK,WAAW,OAAO,KAAK;GACjC,KAAK,KAAK,WAAW,OAAO,KAAK;IAChC,MAAM;EACV;EAED,KAAK,aAAa,QAAO,YAAW;GAAE,GAAG;IAAS,MAAM,KAAK;EAAK,EAAG;EACrE,KAAK,MAAM,MAAM,IAAI,gBAAgB,KAAK,CAAC;CAC/C;CAEU,cACN,OACA,KAAc;EAEd,MAAM,QAAQ,KAAK,aAAY,CAAE,CAAC,MAAM;EAExC,IAAI,CAAC,OACD,OAAO;EAGX,OAAO,iBAAiB,MAAM,IAAI,KAAK,CAAC,YAAY,KAAK;CAC7D;CAEU,WAAQ;EACd,KAAK,aAAa,oBAAI,IAAI,IAAG,CAAE;EAC/B,KAAK,aAAa,IAAI,CAAA,CAAE;EACxB,KAAK,MAAM,KAAK,WAAW,KAAK,eAAc,CAAE,CAAC;CACrD;CAEQ,UAAU,IAAY,QAAe;EACzC,KAAK,aAAa,QAAO,QAAM;GAC3B,MAAM,OAAO,IAAI,IAAI,GAAG;GAExB,IAAI,QACA,KAAK,IAAI,EAAE;QAEX,KAAK,OAAO,EAAE;GAGlB,OAAO;EACX,CAAC;CACL;CAEQ,kBAAkB,IAAU;EAChC,KAAK,aAAa,QAAO,WACrB,OAAO,YACH,OAAO,QAAQ,MAAM,CAAC,CAAC,QAAQ,CAAC,aAAa,YAAY,EAAE,CAAC,CAC/D;CAET;CAEQ,aAAa,OAA0B,OAAa;EACxD,OAAO,MAAM,mBAAmB,UAC5B,SAAS,MAAM;CACvB;CAEQ,WACJ,OACA,QAAwB;EAExB,OAAO,MAAM,WACT,KAAK,UAAU,OAAO,MAAM,IAC5B,KAAK,OAAO,KAAK,MAAM,OAAO;CACtC;CAEQ,MAAM,IAAY,SAAgB;EACtC,MAAM,OAAO,EAAE,GAAG,KAAK,eAAc,EAAE;EAEvC,IAAI,YAAY,QACZ,OAAO,KAAK;OAEZ,KAAK,MAAM;EAGf,KAAK,MAAM,IAAI;CACnB;CAEQ,MAAM,SAAgB;EAC1B,KAAK,MAAM,IAAI,OAAO;EACtB,KAAK,OAAM,CAAE,EAAE,QAAQ,IAAI,OAAO;CACtC;CAEQ,iBAAc;EAClB,OAAO,KAAK,OAAM,CAAE,EAAE,QAAO,KAAM,KAAK,MAAK;CACjD;CAEQ,WAAW,SAAgB;EAC/B,MAAM,MAAM,IAAI,IAAI,KAAK,OAAM,CAAE,CAAC,KAAI,UAAS,MAAM,EAAE,CAAC;EAExD,OAAO,OAAO,YACV,OAAO,QAAQ,OAAO,CAAC,CAAC,QAAQ,CAAC,QAAQ,IAAI,IAAI,EAAE,CAAC,CAAC;CAE7D;CAEQ,WAAW,SAAgB;EAC/B,MAAM,MAAM,IAAI,IAAI,KAAK,OAAM,CAAE,CAAC,KAAI,UAAS,MAAM,EAAE,CAAC;EAExD,OAAO,OAAO,YACV,OAAO,QAAQ,OAAO,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;CAE9D;CAEQ,OAAO,SAAgB;EAC3B,OAAO,OAAO,KAAK,KAAK,WAAW,OAAO,CAAC,CAAC,CAAC,SAAS;CAC1D;CApWS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAuB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAvB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAuB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,eAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,OAAA,cAAA;EAAA,MAAA,EAAA,gBAAA,QAAA;EAAA,UAAA;EAAA,UChEpC;EAsSA,QAAA,CAAA,s7FAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDjPQ;IAAgB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAChB;IAAiB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MACjB;IAAgB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAChB;IAAiB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MACjB;IAAmB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA,CAAA,eAAA,uBAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MACnB;IAAgB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA,CAAA,eAAA,uBAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAChB;IAAgB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAChB;IAA0B,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA,CAAA,aAAA;GAAA;EAAA;CAAA,CAAA;;AAIrB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAuB,YAAA,CAAA;EAhBnC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAkB,SAGnB;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACH;GAAA,MACK,EAAE,OAAO,QAAO;GAAE,UAAA;GAAA,QAAA,CAAA,s7FAAA;EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyW5B,SAAS,WAAW,MAAY;CAC5B,MAAM,SAAS,KAAK,KAAI,CAAE,CAAC,WAAW,KAAK,EAAE;CAE7C,IAAI,CAAC,QACD,OAAO;CAGX,MAAM,SAAS,OAAO,MAAM;CAE5B,OAAO,OAAO,SAAS,MAAM,IAAI,SAAS;AAC9C;AAEA,SAAS,iBAAiB,MAAY;CAClC,OAAO,CAAC,KAAK,KAAI,KAAM,WAAW,IAAI,MAAM;AAChD;AAEA,SAAS,YAAY,OAAkB;CACnC,MAAM,MAAM,WAAW,MAAM,GAAG;CAChC,MAAM,MAAM,WAAW,MAAM,GAAG;CAEhC,OAAO,QAAQ,QAAQ,QAAQ,QAAQ,MAAM;AACjD;AAGA,SAAS,gBAAgB,OAAkB;CACvC,MAAM,QAAQ;EAAE,KAAK,WAAW,MAAM,GAAG;EAAG,KAAK,WAAW,MAAM,GAAG;CAAC;CAGtE,OAFe,MAAM,QAAQ,QAAQ,MAAM,QAAQ,QAElC,YAAY,KAAK,IAAI,SAAY;AACtD;AAEA,SAAS,kBACL,OACA,QAAoC;CAEpC,QAAQ,OAAO,OAAO,WAAW,QAAQ,OAAO,UAC3C,OAAO,OAAO,WAAW,QAAQ,OAAO;AACjD"}