npm - @memberjunction/ng-ui-components - Versions diffs - 6.1.0-edge.4 → 6.1.0-edge.6 - Mend

@memberjunction/ng-ui-components 6.1.0-edge.4 → 6.1.0-edge.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

package/dist/lib/dropdown/dropdown.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.component.js","sourceRoot":"","sources":["../../../src/lib/dropdown/dropdown.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Input,\n Output,\n EventEmitter,\n forwardRef,\n HostBinding,\n ElementRef,\n ViewChild,\n ContentChild,\n TemplateRef,\n OnDestroy,\n inject,\n ChangeDetectorRef\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';\nimport { OverlayModule, ConnectedPosition } from '@angular/cdk/overlay';\n\n/*\n mj-dropdown — Dropdown select component using CDK Overlay.\n \n Replaces `<kendo-dropdownlist>`.\n \n @example\n * ```html\n * <mj-dropdown\n * [Data]=\"items\"\n * TextField=\"name\"\n * ValueField=\"id\"\n * [(ngModel)]=\"selectedId\"\n * [ValuePrimitive]=\"true\"\n * [Filterable]=\"true\"\n * (FilterChange)=\"onFilter($event)\">\n * </mj-dropdown>\n * ```\n /\n@Component({\n selector: 'mj-dropdown',\n standalone: true,\n imports: [NgTemplateOutlet, OverlayModule],\n template: `\n <div\n class=\"mj-dropdown\"\n #trigger\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [class.mj-dropdown--open]=\"IsOpen\"\n [class.mj-dropdown--disabled]=\"IsDisabled\"\n role=\"combobox\"\n [attr.aria-expanded]=\"IsOpen\"\n aria-haspopup=\"listbox\"\n tabindex=\"0\"\n (click)=\"Toggle()\"\n (keydown)=\"OnKeyDown($event)\"\n (blur)=\"OnBlur()\">\n <span class=\"mj-dropdown-value\" [class.mj-dropdown-placeholder]=\"!HasValue\">\n {{ DisplayText }}\n </span>\n <i class=\"fa-solid fa-chevron-down mj-dropdown-arrow\"></i>\n </div>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"IsOpen\"\n [cdkConnectedOverlayPositions]=\"Positions\"\n [cdkConnectedOverlayWidth]=\"TriggerWidth\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"mj-dropdown-backdrop\"\n (backdropClick)=\"Close()\"\n (detach)=\"Close()\">\n <div class=\"mj-dropdown-panel\" role=\"listbox\">\n @if (Filterable) {\n <div class=\"mj-dropdown-filter-wrap\">\n <input\n #filterInput\n class=\"mj-input mj-dropdown-filter\"\n type=\"text\"\n placeholder=\"Search...\"\n [value]=\"filterText\"\n (input)=\"OnFilterInput($event)\"\n (keydown)=\"OnKeyDown($event)\" />\n </div>\n }\n @if (DefaultItem != null) {\n <div\n class=\"mj-dropdown-option mj-dropdown-option--default\"\n [class.mj-dropdown-option--selected]=\"SelectedValue == null\"\n [class.mj-dropdown-option--highlighted]=\"HighlightedIndex === -1\"\n role=\"option\"\n [attr.aria-selected]=\"SelectedValue == null\"\n (click)=\"SelectItem(null, $event)\">\n {{ GetItemText(DefaultItem) }}\n </div>\n }\n @for (item of FilteredItems; track TrackByIndex($index)) {\n <div\n class=\"mj-dropdown-option\"\n [class.mj-dropdown-option--selected]=\"IsItemSelected(item)\"\n [class.mj-dropdown-option--highlighted]=\"HighlightedIndex === $index\"\n role=\"option\"\n [attr.aria-selected]=\"IsItemSelected(item)\"\n (click)=\"SelectItem(item, $event)\">\n @if (itemTemplate) {\n <ng-container ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n } @else {\n {{ GetItemText(item) }}\n }\n </div>\n }\n @if (FilteredItems.length === 0) {\n <div class=\"mj-dropdown-no-data\">No data found</div>\n }\n </div>\n </ng-template>\n `,\n providers: [{\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => MJDropdownComponent),\n multi: true\n }]\n})\nexport class MJDropdownComponent implements ControlValueAccessor, OnDestroy {\n @Input() Data: Record<string, unknown>[] \| string[] \| readonly unknown[] \| null = [];\n @Input() TextField = '';\n @Input() ValueField = '';\n @Input() Filterable = false;\n @Input() ValuePrimitive = false;\n @Input() Disabled = false;\n @Input() Placeholder = 'Select...';\n @Input() DefaultItem: Record<string, unknown> \| string \| null = null;\n\n @Output() FilterChange = new EventEmitter<string>();\n @Output() ValueChange = new EventEmitter<unknown>();\n\n @ContentChild('mjDropdownItem') itemTemplate: TemplateRef<{ $implicit: unknown }> \| null = null;\n\n @ViewChild('trigger') private triggerEl!: ElementRef<HTMLElement>;\n @ViewChild('filterInput') private filterInputEl: ElementRef<HTMLInputElement> \| undefined;\n\n @HostBinding('class.mj-dropdown-host') readonly hostClass = true;\n\n private cdr = inject(ChangeDetectorRef);\n private static nextId = 0;\n\n DropdownId = MJDropdownComponent.nextId++;\n IsOpen = false;\n IsDisabled = false;\n HighlightedIndex = -1;\n SelectedValue: unknown = null;\n TriggerWidth = 0;\n\n filterText = '';\n\n Positions: ConnectedPosition[] = [\n { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n ];\n\n private onChange: (value: unknown) => void = () => {};\n private onTouched: () => void = () => {};\n\n get FilteredItems(): unknown[] {\n const data = (this.Data ?? []) as unknown[];\n if (!this.Filterable \|\| !this.filterText) return data;\n const search = this.filterText.toLowerCase();\n return data.filter(item => this.GetItemText(item).toLowerCase().includes(search));\n }\n\n get HasValue(): boolean { return this.SelectedValue != null; }\n\n get DisplayText(): string {\n if (this.SelectedValue == null) {\n if (this.DefaultItem != null) return this.GetItemText(this.DefaultItem);\n return this.Placeholder;\n }\n if (this.ValuePrimitive && this.ValueField) {\n const found = ((this.Data ?? []) as unknown[]).find(item => this.GetItemValue(item) === this.SelectedValue);\n return found ? this.GetItemText(found) : String(this.SelectedValue);\n }\n return this.GetItemText(this.SelectedValue as Record<string, unknown> \| string);\n }\n\n Toggle(): void {\n if (this.IsDisabled) return;\n this.IsOpen ? this.Close() : this.Open();\n }\n\n Open(): void {\n if (this.IsDisabled \|\| this.IsOpen) return;\n this.TriggerWidth = this.triggerEl?.nativeElement.offsetWidth ?? 200;\n this.IsOpen = true;\n this.HighlightedIndex = this.getSelectedIndex();\n this.cdr.detectChanges();\n if (this.Filterable) setTimeout(() => this.filterInputEl?.nativeElement.focus(), 0);\n }\n\n Close(): void {\n if (!this.IsOpen) return;\n this.IsOpen = false;\n this.filterText = '';\n this.HighlightedIndex = -1;\n this.cdr.detectChanges();\n }\n\n SelectItem(item: unknown \| null, event?: Event): void {\n event?.stopPropagation();\n if (item == null) {\n this.SelectedValue = null;\n this.onChange(null);\n this.ValueChange.emit(null);\n } else if (this.ValuePrimitive && this.ValueField) {\n const value = this.GetItemValue(item);\n this.SelectedValue = value;\n this.onChange(value);\n this.ValueChange.emit(value);\n } else {\n this.SelectedValue = item;\n this.onChange(item);\n this.ValueChange.emit(item);\n }\n this.Close();\n }\n\n IsItemSelected(item: unknown): boolean {\n if (this.SelectedValue == null) return false;\n if (this.ValuePrimitive && this.ValueField) return this.GetItemValue(item) === this.SelectedValue;\n if (this.ValueField && typeof item === 'object' && typeof this.SelectedValue === 'object')\n return this.GetItemValue(item) === this.GetItemValue(this.SelectedValue);\n return item === this.SelectedValue;\n }\n\n OnFilterInput(event: Event): void {\n this.filterText = (event.target as HTMLInputElement).value;\n this.HighlightedIndex = 0;\n this.FilterChange.emit(this.filterText);\n }\n\n OnKeyDown(event: KeyboardEvent): void {\n const items = this.FilteredItems;\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n if (!this.IsOpen) this.Open();\n else this.HighlightedIndex = Math.min(this.HighlightedIndex + 1, items.length - 1);\n break;\n case 'ArrowUp':\n event.preventDefault();\n if (this.IsOpen) this.HighlightedIndex = Math.max(this.HighlightedIndex - 1, 0);\n break;\n case 'Enter':\n event.preventDefault();\n if (this.IsOpen && this.HighlightedIndex >= 0 && this.HighlightedIndex < items.length)\n this.SelectItem(items[this.HighlightedIndex]);\n else if (!this.IsOpen) this.Open();\n break;\n case 'Escape': event.preventDefault(); this.Close(); break;\n case 'Home': if (this.IsOpen) { event.preventDefault(); this.HighlightedIndex = 0; } break;\n case 'End': if (this.IsOpen) { event.preventDefault(); this.HighlightedIndex = items.length - 1; } break;\n }\n }\n\n OnBlur(): void { this.onTouched(); }\n\n GetItemText(item: unknown): string {\n if (item == null) return '';\n if (typeof item === 'string') return item;\n if (this.TextField && typeof item === 'object') return String((item as Record<string, unknown>)[this.TextField] ?? '');\n return String(item);\n }\n\n GetItemValue(item: unknown): unknown {\n if (typeof item === 'string') return item;\n if (this.ValueField && typeof item === 'object' && item != null) return (item as Record<string, unknown>)[this.ValueField];\n return item;\n }\n\n TrackByIndex(index: number): number { return index; }\n\n writeValue(value: unknown): void { this.SelectedValue = value; }\n registerOnChange(fn: (value: unknown) => void): void { this.onChange = fn; }\n registerOnTouched(fn: () => void): void { this.onTouched = fn; }\n setDisabledState(isDisabled: boolean): void { this.IsDisabled = isDisabled \|\| this.Disabled; }\n ngOnDestroy(): void { this.Close(); }\n\n private getSelectedIndex(): number {\n if (this.SelectedValue == null) return -1;\n return this.FilteredItems.findIndex(item => this.IsItemSelected(item));\n }\n}\n"]}
1	+ {"version":3,"file":"dropdown.component.js","sourceRoot":"","sources":["../../../src/lib/dropdown/dropdown.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Input,\n Output,\n EventEmitter,\n forwardRef,\n HostBinding,\n ElementRef,\n ViewChild,\n ContentChild,\n TemplateRef,\n OnDestroy,\n inject,\n ChangeDetectorRef\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';\nimport { OverlayModule, ConnectedPosition } from '@angular/cdk/overlay';\n\n/*\n mj-dropdown — Dropdown select component using CDK Overlay.\n \n Replaces `<kendo-dropdownlist>`.\n \n Every dropdown needs an ACCESSIBLE NAME, or it announces as \"combobox, collapsed\" with no hint of\n * what it selects (WCAG 2.1 4.1.2). Use {@link AriaLabelledBy} when a visible label already exists —\n * `<label for>` cannot name a `div[role=combobox]` — and {@link AriaLabel} when none does.\n \n @example With a visible label (preferred)\n * ```html\n * <span id=\"persona-label\">Interview persona</span>\n * <mj-dropdown\n * AriaLabelledBy=\"persona-label\"\n * [Data]=\"items\"\n * TextField=\"name\"\n * ValueField=\"id\"\n * [(ngModel)]=\"selectedId\"\n * [ValuePrimitive]=\"true\">\n * </mj-dropdown>\n * ```\n \n @example With no visible label\n * ```html\n * <mj-dropdown\n * AriaLabel=\"Interview persona\"\n * [Data]=\"items\"\n * TextField=\"name\"\n * ValueField=\"id\"\n * [(ngModel)]=\"selectedId\"\n * [ValuePrimitive]=\"true\"\n * [Filterable]=\"true\"\n * (FilterChange)=\"onFilter($event)\">\n * </mj-dropdown>\n * ```\n /\n@Component({\n selector: 'mj-dropdown',\n standalone: true,\n imports: [NgTemplateOutlet, OverlayModule],\n template: `\n <div\n class=\"mj-dropdown\"\n #trigger\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [class.mj-dropdown--open]=\"IsOpen\"\n [class.mj-dropdown--disabled]=\"IsDisabled\"\n role=\"combobox\"\n [attr.id]=\"InputId \|\| null\"\n [attr.aria-label]=\"AriaLabel \|\| null\"\n [attr.aria-labelledby]=\"AriaLabelledBy \|\| null\"\n [attr.aria-describedby]=\"AriaDescribedBy \|\| null\"\n [attr.aria-expanded]=\"IsOpen\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"IsOpen ? ListboxId : null\"\n [attr.aria-disabled]=\"IsDisabled ? 'true' : null\"\n [attr.tabindex]=\"IsDisabled ? -1 : 0\"\n (click)=\"Toggle()\"\n (keydown)=\"OnKeyDown($event)\"\n (blur)=\"OnBlur()\">\n <span class=\"mj-dropdown-value\" [class.mj-dropdown-placeholder]=\"!HasValue\">\n {{ DisplayText }}\n </span>\n <i class=\"fa-solid fa-chevron-down mj-dropdown-arrow\"></i>\n </div>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"IsOpen\"\n [cdkConnectedOverlayPositions]=\"Positions\"\n [cdkConnectedOverlayWidth]=\"TriggerWidth\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"mj-dropdown-backdrop\"\n (backdropClick)=\"Close()\"\n (detach)=\"Close()\">\n <div class=\"mj-dropdown-panel\" role=\"listbox\"\n [attr.id]=\"ListboxId\"\n [attr.aria-label]=\"AriaLabel \|\| null\"\n [attr.aria-labelledby]=\"AriaLabelledBy \|\| null\">\n @if (Filterable) {\n <div class=\"mj-dropdown-filter-wrap\">\n <!--\n The word \"Filter\" lives in a hidden span rather than in a concatenated string so the\n AriaLabelledBy path can NAME this box from the same visible label that names the\n dropdown: aria-labelledby takes an ID LIST, so \"Filter\" plus the label's own text is\n composed by the accessibility tree without this component ever seeing that text.\n Without it, every filterable dropdown on a form named this way announces as an\n identical \"Filter options\".\n -->\n <span class=\"mj-dropdown-sr-only\" [attr.id]=\"FilterWordId\">Filter</span>\n <input\n #filterInput\n class=\"mj-input mj-dropdown-filter\"\n type=\"text\"\n placeholder=\"Filter...\"\n [attr.aria-labelledby]=\"FilterLabelledBy\"\n [attr.aria-label]=\"FilterLabelledBy ? null : FilterLabel\"\n [value]=\"filterText\"\n (input)=\"OnFilterInput($event)\"\n (keydown)=\"OnKeyDown($event)\" />\n </div>\n }\n @if (DefaultItem != null) {\n <div\n class=\"mj-dropdown-option mj-dropdown-option--default\"\n [class.mj-dropdown-option--selected]=\"SelectedValue == null\"\n [class.mj-dropdown-option--highlighted]=\"HighlightedIndex === -1\"\n role=\"option\"\n [attr.aria-selected]=\"SelectedValue == null\"\n (click)=\"SelectItem(null, $event)\">\n {{ GetItemText(DefaultItem) }}\n </div>\n }\n @for (item of FilteredItems; track TrackByIndex($index)) {\n <div\n class=\"mj-dropdown-option\"\n [class.mj-dropdown-option--selected]=\"IsItemSelected(item)\"\n [class.mj-dropdown-option--highlighted]=\"HighlightedIndex === $index\"\n role=\"option\"\n [attr.aria-selected]=\"IsItemSelected(item)\"\n (click)=\"SelectItem(item, $event)\">\n @if (itemTemplate) {\n <ng-container ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n } @else {\n {{ GetItemText(item) }}\n }\n </div>\n }\n @if (FilteredItems.length === 0) {\n <div class=\"mj-dropdown-no-data\">No data found</div>\n }\n </div>\n </ng-template>\n `,\n providers: [{\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => MJDropdownComponent),\n multi: true\n }]\n})\nexport class MJDropdownComponent implements ControlValueAccessor, OnDestroy {\n /*\n Accessible name for the combobox (#3860). Without one — and with no visible label wired via\n * {@link AriaLabelledBy} — the control announces as an UNNAMED combobox, which fails WCAG 2.1\n * 4.1.2 (Name, Role, Value): \"combobox, collapsed\" with no hint of what it selects. Applied as\n * `aria-label` on the trigger AND on the popup listbox, so both halves announce the same name.\n /\n @Input() AriaLabel = '';\n\n /\n The id of a VISIBLE label element that names this control — the preferred wiring when a label\n * already exists on screen (an `aria-label` would duplicate its text and drift on rename). This,\n * not `<label for>`, is the visible-label path: the trigger is a `div[role=combobox]`, and the\n * label-for association only names labelable form elements. `aria-labelledby` beats `AriaLabel`\n * in the accessible-name computation where both are present. Applied to trigger AND listbox.\n /\n @Input() AriaLabelledBy = '';\n\n /\n `id` for the combobox trigger, so other markup can REFERENCE it — `aria-controls`, hint text,\n * test hooks. It is deliberately not documented as a `<label for>` target: the trigger is a div,\n * which `label[for]` neither names nor focuses. To name the control from a visible label, put an\n * id on the LABEL and pass it as {@link AriaLabelledBy}.\n /\n @Input() InputId = '';\n\n /* `aria-describedby` passthrough for hint/error text — same shape of gap as the name. /\n @Input() AriaDescribedBy = '';\n\n @Input() Data: Record<string, unknown>[] \| string[] \| readonly unknown[] \| null = [];\n @Input() TextField = '';\n @Input() ValueField = '';\n @Input() Filterable = false;\n @Input() ValuePrimitive = false;\n /\n Host-driven disable. Composed with Angular Forms' `setDisabledState()` into `IsDisabled`\n * (the actual gate) — see `syncDisabled`. A setter, not a bare field, because this input is\n * routinely bound to an expression that changes over the control's lifetime\n * (`[Disabled]=\"!draft.CompanyID\"`), and the gate has to follow it every time.\n /\n @Input()\n set Disabled(value: boolean) {\n this.disabledInput = value;\n this.syncDisabled();\n }\n get Disabled(): boolean {\n return this.disabledInput;\n }\n @Input() Placeholder = 'Select...';\n @Input() DefaultItem: Record<string, unknown> \| string \| null = null;\n\n @Output() FilterChange = new EventEmitter<string>();\n @Output() ValueChange = new EventEmitter<unknown>();\n\n @ContentChild('mjDropdownItem') itemTemplate: TemplateRef<{ $implicit: unknown }> \| null = null;\n\n @ViewChild('trigger') private triggerEl!: ElementRef<HTMLElement>;\n @ViewChild('filterInput') private filterInputEl: ElementRef<HTMLInputElement> \| undefined;\n\n @HostBinding('class.mj-dropdown-host') readonly hostClass = true;\n\n private cdr = inject(ChangeDetectorRef);\n private static nextId = 0;\n\n DropdownId = MJDropdownComponent.nextId++;\n\n /\n Id of the popup listbox, so the trigger can point `aria-controls` at it while open — the half of\n * the combobox pattern that makes \"collapsed/expanded\" refer to something a screen reader can\n * find. Generated per instance from the same `static nextId` counter `dialog`, `window` and\n * `accordion` use in this package.\n /\n get ListboxId(): string { return `mj-dropdown-listbox-${this.DropdownId}`; }\n\n /* Id of the hidden \"Filter\" word, composed into the filter box's name via an id list. /\n get FilterWordId(): string { return `mj-dropdown-filter-word-${this.DropdownId}`; }\n\n /\n `aria-labelledby` for the filter box when the dropdown is named by a VISIBLE label: \"Filter\"\n * plus that label's own text, composed by the accessibility tree. Empty when there is no such\n * label, in which case {@link FilterLabel} supplies a string instead.\n /\n get FilterLabelledBy(): string { return this.AriaLabelledBy ? `${this.FilterWordId} ${this.AriaLabelledBy}` : ''; }\n\n /\n `aria-label` for the filter box in the no-visible-label case.\n \n The \"filter\" guard is not cosmetic: this repo's house habit is `AriaLabel=\"Filter roles\"`, and\n * an unconditional prefix announces that box as \"Filter Filter roles\". A name that already begins\n * with the word is used as-is.\n /\n get FilterLabel(): string {\n const name = this.AriaLabel.trim();\n if (!name) return 'Filter options';\n return /^filter\\b/i.test(name) ? name : `Filter ${name}`;\n }\n IsOpen = false;\n /\n The single gate on `Toggle()` / `Open()` — true when EITHER the `Disabled` input or Angular\n * Forms says so. Never assign it directly; go through `syncDisabled()` so both sources are\n * always composed and a lock closes an open panel.\n /\n IsDisabled = false;\n HighlightedIndex = -1;\n SelectedValue: unknown = null;\n TriggerWidth = 0;\n\n filterText = '';\n\n Positions: ConnectedPosition[] = [\n { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n ];\n\n private onChange: (value: unknown) => void = () => {};\n private onTouched: () => void = () => {};\n\n /* Backing field for the `Disabled` input. /\n private disabledInput = false;\n /* The forms-driven disabled state, kept SEPARATE so neither source can stomp the other. /\n private formDisabled = false;\n\n /\n Recompute the gate from both of its sources. Called whenever either changes.\n \n `IsDisabled` is derived state, and the only thing that assigned it was `setDisabledState()`.\n * The forms-driven half was in fact fine — `setUpControl` also wires `registerOnDisabledChange`,\n * so that hook fires on every `control.disable()`/`enable()`, not just at registration. What had\n * no recompute path at all was the `Disabled` @Input: a plain field, so the gate froze at\n * whatever the first compose produced and every later change to the input was dropped.\n \n That is how a `[Disabled]=\"!draft.CompanyID\"` picker stayed dead for the life of the\n * component after the company was finally chosen.\n /\n private syncDisabled(): void {\n const disabled = this.disabledInput \|\| this.formDisabled;\n if (disabled === this.IsDisabled) return;\n this.IsDisabled = disabled;\n // Becoming disabled while the panel is open would otherwise leave an interactive list\n // hanging off a control the user can no longer operate.\n if (disabled) this.resetPanelState();\n this.cdr.markForCheck();\n }\n\n get FilteredItems(): unknown[] {\n const data = (this.Data ?? []) as unknown[];\n if (!this.Filterable \|\| !this.filterText) return data;\n const search = this.filterText.toLowerCase();\n return data.filter(item => this.GetItemText(item).toLowerCase().includes(search));\n }\n\n get HasValue(): boolean { return this.SelectedValue != null; }\n\n get DisplayText(): string {\n if (this.SelectedValue == null) {\n if (this.DefaultItem != null) return this.GetItemText(this.DefaultItem);\n return this.Placeholder;\n }\n if (this.ValuePrimitive && this.ValueField) {\n const found = ((this.Data ?? []) as unknown[]).find(item => this.GetItemValue(item) === this.SelectedValue);\n return found ? this.GetItemText(found) : String(this.SelectedValue);\n }\n return this.GetItemText(this.SelectedValue as Record<string, unknown> \| string);\n }\n\n Toggle(): void {\n if (this.IsDisabled) return;\n this.IsOpen ? this.Close() : this.Open();\n }\n\n Open(): void {\n if (this.IsDisabled \|\| this.IsOpen) return;\n this.TriggerWidth = this.triggerEl?.nativeElement.offsetWidth ?? 200;\n this.IsOpen = true;\n this.HighlightedIndex = this.getSelectedIndex();\n this.cdr.detectChanges();\n if (this.Filterable) setTimeout(() => this.filterInputEl?.nativeElement.focus(), 0);\n }\n\n Close(): void {\n if (!this.IsOpen) return;\n this.resetPanelState();\n this.cdr.detectChanges();\n }\n\n /\n Panel state only — no change detection. Split out of `Close()` because `syncDisabled()` can\n * run from an @Input setter, i.e. DURING the parent's change-detection pass, where a nested\n * `detectChanges()` re-enters CD and trips NG0100 on the parent's own bindings.\n */\n private resetPanelState(): void {\n this.IsOpen = false;\n this.filterText = '';\n this.HighlightedIndex = -1;\n }\n\n SelectItem(item: unknown \| null, event?: Event): void {\n event?.stopPropagation();\n if (item == null) {\n this.SelectedValue = null;\n this.onChange(null);\n this.ValueChange.emit(null);\n } else if (this.ValuePrimitive && this.ValueField) {\n const value = this.GetItemValue(item);\n this.SelectedValue = value;\n this.onChange(value);\n this.ValueChange.emit(value);\n } else {\n this.SelectedValue = item;\n this.onChange(item);\n this.ValueChange.emit(item);\n }\n this.Close();\n }\n\n IsItemSelected(item: unknown): boolean {\n if (this.SelectedValue == null) return false;\n if (this.ValuePrimitive && this.ValueField) return this.GetItemValue(item) === this.SelectedValue;\n if (this.ValueField && typeof item === 'object' && typeof this.SelectedValue === 'object')\n return this.GetItemValue(item) === this.GetItemValue(this.SelectedValue);\n return item === this.SelectedValue;\n }\n\n OnFilterInput(event: Event): void {\n this.filterText = (event.target as HTMLInputElement).value;\n this.HighlightedIndex = 0;\n this.FilterChange.emit(this.filterText);\n }\n\n OnKeyDown(event: KeyboardEvent): void {\n const items = this.FilteredItems;\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n if (!this.IsOpen) this.Open();\n else this.HighlightedIndex = Math.min(this.HighlightedIndex + 1, items.length - 1);\n break;\n case 'ArrowUp':\n event.preventDefault();\n if (this.IsOpen) this.HighlightedIndex = Math.max(this.HighlightedIndex - 1, 0);\n break;\n case 'Enter':\n event.preventDefault();\n if (this.IsOpen && this.HighlightedIndex >= 0 && this.HighlightedIndex < items.length)\n this.SelectItem(items[this.HighlightedIndex]);\n else if (!this.IsOpen) this.Open();\n break;\n case 'Escape': event.preventDefault(); this.Close(); break;\n case 'Home': if (this.IsOpen) { event.preventDefault(); this.HighlightedIndex = 0; } break;\n case 'End': if (this.IsOpen) { event.preventDefault(); this.HighlightedIndex = items.length - 1; } break;\n }\n }\n\n OnBlur(): void { this.onTouched(); }\n\n GetItemText(item: unknown): string {\n if (item == null) return '';\n if (typeof item === 'string') return item;\n if (this.TextField && typeof item === 'object') return String((item as Record<string, unknown>)[this.TextField] ?? '');\n return String(item);\n }\n\n GetItemValue(item: unknown): unknown {\n if (typeof item === 'string') return item;\n if (this.ValueField && typeof item === 'object' && item != null) return (item as Record<string, unknown>)[this.ValueField];\n return item;\n }\n\n TrackByIndex(index: number): number { return index; }\n\n writeValue(value: unknown): void { this.SelectedValue = value; }\n registerOnChange(fn: (value: unknown) => void): void { this.onChange = fn; }\n registerOnTouched(fn: () => void): void { this.onTouched = fn; }\n setDisabledState(isDisabled: boolean): void { this.formDisabled = isDisabled; this.syncDisabled(); }\n ngOnDestroy(): void { this.Close(); }\n\n private getSelectedIndex(): number {\n if (this.SelectedValue == null) return -1;\n return this.FilteredItems.findIndex(item => this.IsItemSelected(item));\n }\n}\n"]}

package/dist/lib/dropdown/dropdown.scss CHANGED Viewed

@@ -66,3 +66,19 @@
 .mj-dropdown-no-data { padding: 16px 12px; color: var(--mj-text-muted); text-align: center; font-size: var(--mj-text-sm); }
 @media (max-width: 767px) { .mj-dropdown-panel { max-height: 50vh; } }
+/* Visually hidden, still in the accessibility tree — carries the word "Filter" that composes the
+   filter box's name with the dropdown's own visible label via an aria-labelledby id list (#3860).
+   Not `display:none` or `visibility:hidden`: both remove the element from the accessibility tree,
+   which is the one thing this element exists to be in. */
+.mj-dropdown-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/lib/empty-state/empty-state.component.js CHANGED Viewed

@@ -191,7 +191,7 @@ export class MJEmptyStateComponent {
             i0.ɵɵconditional(ctx.Message ? 2 : -1);
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.ActionText ? 5 : -1);
-        } }, dependencies: [MJButtonDirective], styles: ["[_nghost-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      text-align: center;\n      padding: var(--mj-space-12);\n      color: var(--mj-text-secondary);\n    }\n\n    .mj-empty-state__icon[_ngcontent-%COMP%] {\n      font-size: 3rem;\n      line-height: 1;\n      margin-bottom: var(--mj-space-4);\n      color: var(--mj-text-disabled);\n    }\n\n    .mj-empty-state__title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: var(--mj-text-lg);\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .mj-empty-state__message[_ngcontent-%COMP%] {\n      margin: var(--mj-space-2) 0 0;\n      font-size: var(--mj-text-sm);\n      color: var(--mj-text-muted);\n      max-width: 420px;\n    }\n\n    .mj-empty-state__actions[_ngcontent-%COMP%] {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      justify-content: center;\n      gap: var(--mj-space-2);\n      margin-top: var(--mj-space-6);\n    }\n    \n\n\n    .mj-empty-state__actions[_ngcontent-%COMP%]:empty {\n      display: none;\n    }\n\n    \n\n    .mj-empty-state--inline[_nghost-%COMP%] {\n      padding: 8px 12px;\n      justify-content: flex-start;\n    }\n    .mj-empty-state--inline[_nghost-%COMP%]   .mj-empty-state__icon[_ngcontent-%COMP%] {\n      font-size: 1.25rem;\n      margin-bottom: 4px;\n    }\n    .mj-empty-state--inline[_nghost-%COMP%]   .mj-empty-state__title[_ngcontent-%COMP%] {\n      font-size: var(--mj-text-sm);\n      font-weight: 500;\n    }\n\n    .mj-empty-state--compact[_nghost-%COMP%] {\n      padding: var(--mj-space-8);\n    }\n    .mj-empty-state--compact[_nghost-%COMP%]   .mj-empty-state__icon[_ngcontent-%COMP%] {\n      font-size: 2rem;\n      margin-bottom: var(--mj-space-3);\n    }\n\n    .mj-empty-state--large[_nghost-%COMP%] {\n      padding: var(--mj-space-16) var(--mj-space-10);\n    }\n    .mj-empty-state--large[_nghost-%COMP%]   .mj-empty-state__icon[_ngcontent-%COMP%] {\n      font-size: 4rem;\n    }\n\n    \n\n    .mj-empty-state--no-results[_nghost-%COMP%]   .mj-empty-state__icon[_ngcontent-%COMP%] {\n      color: var(--mj-text-muted);\n    }\n    .mj-empty-state--success[_nghost-%COMP%]   .mj-empty-state__icon[_ngcontent-%COMP%] {\n      color: var(--mj-status-success);\n    }\n    .mj-empty-state--warning[_nghost-%COMP%]   .mj-empty-state__icon[_ngcontent-%COMP%] {\n      color: var(--mj-status-warning);\n    }\n    .mj-empty-state--error[_nghost-%COMP%]   .mj-empty-state__icon[_ngcontent-%COMP%] {\n      color: var(--mj-status-error);\n    }"] });
+        } }, dependencies: [MJButtonDirective], styles: ["[_nghost-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      text-align: center;\n      padding: var(--mj-space-12);\n      color: var(--mj-text-secondary);\n    }\n\n    .mj-empty-state__icon[_ngcontent-%COMP%] {\n      font-size: 3rem;\n      line-height: 1;\n      margin-bottom: var(--mj-space-4);\n      color: var(--mj-text-disabled);\n    }\n\n    .mj-empty-state__title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: var(--mj-text-lg);\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .mj-empty-state__message[_ngcontent-%COMP%] {\n      margin: var(--mj-space-2) 0 0;\n      font-size: var(--mj-text-sm);\n      color: var(--mj-text-muted);\n      max-width: 420px;\n    }\n\n    .mj-empty-state__actions[_ngcontent-%COMP%] {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      justify-content: center;\n      gap: var(--mj-space-2);\n      margin-top: var(--mj-space-6);\n    }\n    \n\n    .mj-empty-state__actions[_ngcontent-%COMP%]:empty {\n      display: none;\n    }\n\n    \n    .mj-empty-state--inline[_nghost-%COMP%] {\n      padding: 8px 12px;\n      justify-content: flex-start;\n    }\n    .mj-empty-state--inline[_nghost-%COMP%]   .mj-empty-state__icon[_ngcontent-%COMP%] {\n      font-size: 1.25rem;\n      margin-bottom: 4px;\n    }\n    .mj-empty-state--inline[_nghost-%COMP%]   .mj-empty-state__title[_ngcontent-%COMP%] {\n      font-size: var(--mj-text-sm);\n      font-weight: 500;\n    }\n\n    .mj-empty-state--compact[_nghost-%COMP%] {\n      padding: var(--mj-space-8);\n    }\n    .mj-empty-state--compact[_nghost-%COMP%]   .mj-empty-state__icon[_ngcontent-%COMP%] {\n      font-size: 2rem;\n      margin-bottom: var(--mj-space-3);\n    }\n\n    .mj-empty-state--large[_nghost-%COMP%] {\n      padding: var(--mj-space-16) var(--mj-space-10);\n    }\n    .mj-empty-state--large[_nghost-%COMP%]   .mj-empty-state__icon[_ngcontent-%COMP%] {\n      font-size: 4rem;\n    }\n\n    \n    .mj-empty-state--no-results[_nghost-%COMP%]   .mj-empty-state__icon[_ngcontent-%COMP%] {\n      color: var(--mj-text-muted);\n    }\n    .mj-empty-state--success[_nghost-%COMP%]   .mj-empty-state__icon[_ngcontent-%COMP%] {\n      color: var(--mj-status-success);\n    }\n    .mj-empty-state--warning[_nghost-%COMP%]   .mj-empty-state__icon[_ngcontent-%COMP%] {\n      color: var(--mj-status-warning);\n    }\n    .mj-empty-state--error[_nghost-%COMP%]   .mj-empty-state__icon[_ngcontent-%COMP%] {\n      color: var(--mj-status-error);\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJEmptyStateComponent, [{
         type: Component,

package/dist/lib/filter-popover/filter-popover.component.js CHANGED Viewed

@@ -10,15 +10,15 @@ function MJFilterPopoverComponent_Conditional_5_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵattribute("aria-label", ctx_r1.ActiveCount + " active filters");
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("aria-label", ctx_r0.ActiveCount + " active filters");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.ActiveCount, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.ActiveCount, " ");
 } }
 function MJFilterPopoverComponent_ng_template_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
+    const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 11);
-    i0.ɵɵlistener("click", function MJFilterPopoverComponent_ng_template_7_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ClearAll()); });
+    i0.ɵɵlistener("click", function MJFilterPopoverComponent_ng_template_7_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.ClearAll()); });
     i0.ɵɵtext(1, " Clear all ");
     i0.ɵɵelementEnd();
 } }
@@ -32,37 +32,37 @@ function MJFilterPopoverComponent_ng_template_7_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵprojection(5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.Label);
+    i0.ɵɵtextInterpolate(ctx_r0.Label);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.ActiveCount > 0 && ctx_r1.ShowClearAll ? 3 : -1);
+    i0.ɵɵconditional(ctx_r0.ActiveCount > 0 && ctx_r0.ShowClearAll ? 3 : -1);
 } }
 function MJFilterPopoverComponent_Conditional_9_Conditional_0_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
 function MJFilterPopoverComponent_Conditional_9_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
+    const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 12);
-    i0.ɵɵlistener("click", function MJFilterPopoverComponent_Conditional_9_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.Close()); });
+    i0.ɵɵlistener("click", function MJFilterPopoverComponent_Conditional_9_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.Close()); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(1, "div", 13);
     i0.ɵɵelement(2, "div", 14);
     i0.ɵɵtemplate(3, MJFilterPopoverComponent_Conditional_9_Conditional_0_ng_container_3_Template, 1, 0, "ng-container", 15);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    const panelBody_r5 = i0.ɵɵreference(8);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    const panelBody_r4 = i0.ɵɵreference(8);
     i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", ctx_r1.Label);
+    i0.ɵɵattribute("aria-label", ctx_r0.Label);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngTemplateOutlet", panelBody_r5);
+    i0.ɵɵproperty("ngTemplateOutlet", panelBody_r4);
 } }
 function MJFilterPopoverComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, MJFilterPopoverComponent_Conditional_9_Conditional_0_Template, 4, 2);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵconditional(ctx_r1.IsOpen ? 0 : -1);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r0.IsOpen ? 0 : -1);
 } }
 function MJFilterPopoverComponent_Conditional_10_ng_template_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -72,20 +72,20 @@ function MJFilterPopoverComponent_Conditional_10_ng_template_0_Template(rf, ctx)
     i0.ɵɵtemplate(1, MJFilterPopoverComponent_Conditional_10_ng_template_0_ng_container_1_Template, 1, 0, "ng-container", 15);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    const panelBody_r5 = i0.ɵɵreference(8);
-    i0.ɵɵattribute("aria-label", ctx_r1.Label);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    const panelBody_r4 = i0.ɵɵreference(8);
+    i0.ɵɵattribute("aria-label", ctx_r0.Label);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", panelBody_r5);
+    i0.ɵɵproperty("ngTemplateOutlet", panelBody_r4);
 } }
 function MJFilterPopoverComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
+    const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵtemplate(0, MJFilterPopoverComponent_Conditional_10_ng_template_0_Template, 2, 2, "ng-template", 16);
-    i0.ɵɵlistener("backdropClick", function MJFilterPopoverComponent_Conditional_10_Template_ng_template_backdropClick_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Close()); })("detach", function MJFilterPopoverComponent_Conditional_10_Template_ng_template_detach_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Close()); });
+    i0.ɵɵlistener("backdropClick", function MJFilterPopoverComponent_Conditional_10_Template_ng_template_backdropClick_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.Close()); })("detach", function MJFilterPopoverComponent_Conditional_10_Template_ng_template_detach_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.Close()); });
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    const overlayOrigin_r7 = i0.ɵɵreference(1);
-    i0.ɵɵproperty("cdkConnectedOverlayOrigin", overlayOrigin_r7)("cdkConnectedOverlayOpen", ctx_r1.IsOpen)("cdkConnectedOverlayPositions", ctx_r1.Positions)("cdkConnectedOverlayHasBackdrop", true);
+    const ctx_r0 = i0.ɵɵnextContext();
+    const overlayOrigin_r6 = i0.ɵɵreference(1);
+    i0.ɵɵproperty("cdkConnectedOverlayOrigin", overlayOrigin_r6)("cdkConnectedOverlayOpen", ctx_r0.IsOpen)("cdkConnectedOverlayPositions", ctx_r0.Positions)("cdkConnectedOverlayHasBackdrop", true);
 } }
 /**
  * mj-filter-popover — Compact "Filters" trigger button that opens a popover
@@ -162,10 +162,9 @@ export class MJFilterPopoverComponent {
     }
     static ɵfac = function MJFilterPopoverComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJFilterPopoverComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJFilterPopoverComponent, selectors: [["mj-filter-popover"]], inputs: { Label: "Label", Icon: "Icon", ActiveCount: "ActiveCount", ShowClearAll: "ShowClearAll" }, outputs: { ClearAllRequested: "ClearAllRequested" }, ngContentSelectors: _c0, decls: 11, vars: 11, consts: [["overlayOrigin", "cdkOverlayOrigin"], ["panelBody", ""], ["type", "button", "cdkOverlayOrigin", "", 1, "mj-filter-popover-trigger", 3, "click"], [1, "mj-filter-popover-label"], [1, "mj-filter-popover-badge"], [1, "fa-solid", "fa-chevron-down", "mj-filter-popover-chevron"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "mj-filter-popover-backdrop", 3, "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], [1, "mj-filter-popover-header"], [1, "mj-filter-popover-title"], ["type", "button", 1, "mj-filter-popover-clear"], [1, "mj-filter-popover-content"], ["type", "button", 1, "mj-filter-popover-clear", 3, "click"], ["aria-hidden", "true", 1, "mj-filter-popover-scrim", 3, "click"], ["role", "dialog", 1, "mj-filter-popover-sheet"], ["aria-hidden", "true", 1, "mj-filter-popover-grab"], [4, "ngTemplateOutlet"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "mj-filter-popover-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["role", "dialog", 1, "mj-filter-popover-panel"]], template: function MJFilterPopoverComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "button", 2, 0);
-            i0.ɵɵlistener("click", function MJFilterPopoverComponent_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.Toggle()); });
+            i0.ɵɵlistener("click", function MJFilterPopoverComponent_Template_button_click_0_listener() { return ctx.Toggle(); });
             i0.ɵɵelement(2, "i");
             i0.ɵɵelementStart(3, "span", 3);
             i0.ɵɵtext(4);
@@ -188,7 +187,7 @@ export class MJFilterPopoverComponent {
             i0.ɵɵclassProp("mj-filter-popover-chevron--open", ctx.IsOpen);
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.IsMobile ? 9 : 10);
-        } }, dependencies: [CommonModule, i1.NgTemplateOutlet, OverlayModule, i2.CdkConnectedOverlay, i2.CdkOverlayOrigin], styles: ["[_nghost-%COMP%] {\n      display: inline-flex;\n    }\n\n    \n\n\n\n    .mj-filter-popover-trigger[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      min-height: 32px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-md);\n      color: var(--mj-text-primary);\n      font-family: inherit;\n      font-size: 0.8125rem;\n      font-weight: var(--mj-font-semibold);\n      line-height: 1.5;\n      cursor: pointer;\n      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;\n      white-space: nowrap;\n    }\n\n    .mj-filter-popover-trigger[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-active);\n      border-color: var(--mj-border-strong);\n    }\n\n    .mj-filter-popover-trigger--active[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-border-default));\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-filter-popover-trigger--active[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface));\n    }\n\n    .mj-filter-popover-trigger[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%]:first-child {\n      font-size: var(--mj-text-xs);\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-filter-popover-badge[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-width: 20px;\n      height: 20px;\n      padding: 0 var(--mj-space-1-5);\n      border-radius: 10px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      font-size: 11px;\n      font-weight: 700;\n      line-height: 1;\n    }\n\n    .mj-filter-popover-chevron[_ngcontent-%COMP%] {\n      font-size: 10px;\n      transition: transform 0.2s ease;\n      color: var(--mj-text-muted);\n    }\n\n    .mj-filter-popover-chevron--open[_ngcontent-%COMP%] {\n      transform: rotate(180deg);\n    }\n\n    .mj-filter-popover-panel[_ngcontent-%COMP%] {\n      min-width: 320px;\n      max-width: 480px;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-md);\n      box-shadow: var(--mj-shadow-md);\n      margin-top: var(--mj-space-1-5);\n      overflow: hidden;\n    }\n\n    .mj-filter-popover-header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: var(--mj-space-3) var(--mj-space-4) 0;\n    }\n\n    .mj-filter-popover-title[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .mj-filter-popover-clear[_ngcontent-%COMP%] {\n      background: transparent;\n      border: none;\n      color: var(--mj-brand-primary);\n      font-size: var(--mj-text-xs);\n      font-weight: 500;\n      cursor: pointer;\n      padding: var(--mj-space-1) var(--mj-space-2);\n      border-radius: var(--mj-radius-sm);\n    }\n\n    .mj-filter-popover-clear[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-hover);\n    }\n\n    .mj-filter-popover-content[_ngcontent-%COMP%] {\n      padding: var(--mj-space-3) var(--mj-space-4) var(--mj-space-4);\n      display: flex;\n      flex-direction: column;\n      gap: var(--mj-space-2-5);\n    }\n\n    \n\n\n\n\n    .mj-filter-popover-scrim[_ngcontent-%COMP%] {\n      position: fixed;\n      inset: 0;\n      background: var(--mj-bg-overlay);\n      z-index: 9998;\n      animation: _ngcontent-%COMP%_mj-fp-fade 0.2s ease;\n    }\n    .mj-filter-popover-sheet[_ngcontent-%COMP%] {\n      position: fixed;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 9999;\n      display: flex;\n      flex-direction: column;\n      max-height: 85vh;\n      background: var(--mj-bg-surface);\n      border-top-left-radius: 16px;\n      border-top-right-radius: 16px;\n      box-shadow: var(--mj-shadow-lg);\n      animation: _ngcontent-%COMP%_mj-fp-slide-up 0.24s ease;\n    }\n    .mj-filter-popover-grab[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      width: 36px;\n      height: 4px;\n      border-radius: 2px;\n      background: var(--mj-border-strong);\n      margin: 10px auto 2px;\n    }\n    .mj-filter-popover-sheet[_ngcontent-%COMP%]   .mj-filter-popover-header[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n    }\n    .mj-filter-popover-sheet[_ngcontent-%COMP%]   .mj-filter-popover-content[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 0;\n      overflow-y: auto;\n      -webkit-overflow-scrolling: touch;\n      padding-bottom: var(--mj-space-6);\n    }\n    @keyframes _ngcontent-%COMP%_mj-fp-fade {\n      from { opacity: 0; }\n      to { opacity: 1; }\n    }\n    @keyframes _ngcontent-%COMP%_mj-fp-slide-up {\n      from { transform: translateY(100%); }\n      to { transform: translateY(0); }\n    }\n    @media (prefers-reduced-motion: reduce) {\n      .mj-filter-popover-scrim[_ngcontent-%COMP%], \n   .mj-filter-popover-sheet[_ngcontent-%COMP%] {\n        animation: none;\n      }\n    }\n\n    \n\n\n\n    @media (max-width: 700px) {\n      .mj-filter-popover-label[_ngcontent-%COMP%], \n   .mj-filter-popover-chevron[_ngcontent-%COMP%] {\n        display: none;\n      }\n      .mj-filter-popover-trigger[_ngcontent-%COMP%] {\n        padding: 6px 10px;\n        gap: 4px;\n      }\n    }"] });
+        } }, dependencies: [CommonModule, i1.NgTemplateOutlet, OverlayModule, i2.CdkConnectedOverlay, i2.CdkOverlayOrigin], styles: ["[_nghost-%COMP%] {\n      display: inline-flex;\n    }\n\n    \n\n\n    .mj-filter-popover-trigger[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      min-height: 32px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-md);\n      color: var(--mj-text-primary);\n      font-family: inherit;\n      font-size: 0.8125rem;\n      font-weight: var(--mj-font-semibold);\n      line-height: 1.5;\n      cursor: pointer;\n      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;\n      white-space: nowrap;\n    }\n\n    .mj-filter-popover-trigger[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-active);\n      border-color: var(--mj-border-strong);\n    }\n\n    .mj-filter-popover-trigger--active[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-border-default));\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-filter-popover-trigger--active[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface));\n    }\n\n    .mj-filter-popover-trigger[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%]:first-child {\n      font-size: var(--mj-text-xs);\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-filter-popover-badge[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-width: 20px;\n      height: 20px;\n      padding: 0 var(--mj-space-1-5);\n      border-radius: 10px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      font-size: 11px;\n      font-weight: 700;\n      line-height: 1;\n    }\n\n    .mj-filter-popover-chevron[_ngcontent-%COMP%] {\n      font-size: 10px;\n      transition: transform 0.2s ease;\n      color: var(--mj-text-muted);\n    }\n\n    .mj-filter-popover-chevron--open[_ngcontent-%COMP%] {\n      transform: rotate(180deg);\n    }\n\n    .mj-filter-popover-panel[_ngcontent-%COMP%] {\n      min-width: 320px;\n      max-width: 480px;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-md);\n      box-shadow: var(--mj-shadow-md);\n      margin-top: var(--mj-space-1-5);\n      overflow: hidden;\n    }\n\n    .mj-filter-popover-header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: var(--mj-space-3) var(--mj-space-4) 0;\n    }\n\n    .mj-filter-popover-title[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .mj-filter-popover-clear[_ngcontent-%COMP%] {\n      background: transparent;\n      border: none;\n      color: var(--mj-brand-primary);\n      font-size: var(--mj-text-xs);\n      font-weight: 500;\n      cursor: pointer;\n      padding: var(--mj-space-1) var(--mj-space-2);\n      border-radius: var(--mj-radius-sm);\n    }\n\n    .mj-filter-popover-clear[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-hover);\n    }\n\n    .mj-filter-popover-content[_ngcontent-%COMP%] {\n      padding: var(--mj-space-3) var(--mj-space-4) var(--mj-space-4);\n      display: flex;\n      flex-direction: column;\n      gap: var(--mj-space-2-5);\n    }\n\n    \n\n\n\n    .mj-filter-popover-scrim[_ngcontent-%COMP%] {\n      position: fixed;\n      inset: 0;\n      background: var(--mj-bg-overlay);\n      z-index: 9998;\n      animation: _ngcontent-%COMP%_mj-fp-fade 0.2s ease;\n    }\n    .mj-filter-popover-sheet[_ngcontent-%COMP%] {\n      position: fixed;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 9999;\n      display: flex;\n      flex-direction: column;\n      max-height: 85vh;\n      background: var(--mj-bg-surface);\n      border-top-left-radius: 16px;\n      border-top-right-radius: 16px;\n      box-shadow: var(--mj-shadow-lg);\n      animation: _ngcontent-%COMP%_mj-fp-slide-up 0.24s ease;\n    }\n    .mj-filter-popover-grab[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      width: 36px;\n      height: 4px;\n      border-radius: 2px;\n      background: var(--mj-border-strong);\n      margin: 10px auto 2px;\n    }\n    .mj-filter-popover-sheet[_ngcontent-%COMP%]   .mj-filter-popover-header[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n    }\n    .mj-filter-popover-sheet[_ngcontent-%COMP%]   .mj-filter-popover-content[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 0;\n      overflow-y: auto;\n      -webkit-overflow-scrolling: touch;\n      padding-bottom: var(--mj-space-6);\n    }\n    @keyframes _ngcontent-%COMP%_mj-fp-fade {\n      from { opacity: 0; }\n      to { opacity: 1; }\n    }\n    @keyframes _ngcontent-%COMP%_mj-fp-slide-up {\n      from { transform: translateY(100%); }\n      to { transform: translateY(0); }\n    }\n    @media (prefers-reduced-motion: reduce) {\n      .mj-filter-popover-scrim[_ngcontent-%COMP%], \n   .mj-filter-popover-sheet[_ngcontent-%COMP%] {\n        animation: none;\n      }\n    }\n\n    \n\n\n    @media (max-width: 700px) {\n      .mj-filter-popover-label[_ngcontent-%COMP%], \n   .mj-filter-popover-chevron[_ngcontent-%COMP%] {\n        display: none;\n      }\n      .mj-filter-popover-trigger[_ngcontent-%COMP%] {\n        padding: 6px 10px;\n        gap: 4px;\n      }\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJFilterPopoverComponent, [{
         type: Component,

package/dist/lib/filter-popover/filter-popover.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"filter-popover.component.js","sourceRoot":"","sources":["../../../src/lib/filter-popover/filter-popover.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { ChangeDetectorRef, Component, EventEmitter, Input, NgZone, OnDestroy, Output, inject } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { OverlayModule, ConnectedPosition } from '@angular/cdk/overlay';\n\n/*\n mj-filter-popover — Compact \"Filters\" trigger button that opens a popover\n * containing arbitrary filter UI. Use this in a dashboard's page-header to\n * keep the header chrome consistent regardless of filter density.\n \n Pass the popover content via `<ng-content>`. Drive the active-count badge\n * via the `ActiveCount` input.\n \n Example:\n * ```html\n * <mj-filter-popover [ActiveCount]=\"activeFilters.length\">\n * <div class=\"my-filter-grid\">\n * <mj-dropdown ...></mj-dropdown>\n * <mj-dropdown ...></mj-dropdown>\n * </div>\n * </mj-filter-popover>\n * ```\n /\n@Component({\n selector: 'mj-filter-popover',\n standalone: true,\n imports: [CommonModule, OverlayModule],\n template: `\n <button\n type=\"button\"\n class=\"mj-filter-popover-trigger\"\n [class.mj-filter-popover-trigger--active]=\"IsOpen \|\| ActiveCount > 0\"\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [attr.aria-expanded]=\"IsOpen\"\n [attr.aria-haspopup]=\"true\"\n (click)=\"Toggle()\">\n <i [class]=\"Icon\"></i>\n <span class=\"mj-filter-popover-label\">{{ Label }}</span>\n @if (ActiveCount > 0) {\n <span class=\"mj-filter-popover-badge\" [attr.aria-label]=\"ActiveCount + ' active filters'\">\n {{ ActiveCount }}\n </span>\n }\n <i class=\"fa-solid fa-chevron-down mj-filter-popover-chevron\" [class.mj-filter-popover-chevron--open]=\"IsOpen\"></i>\n </button>\n\n <!-- The panel body (header + projected filter UI) is declared ONCE here and\n stamped into whichever wrapper is active (anchored overlay on desktop,\n docked sheet on mobile). A single <ng-content> avoids the duplicate-slot\n bug where projected content lands in only one of two branches. -->\n <ng-template #panelBody>\n <div class=\"mj-filter-popover-header\">\n <span class=\"mj-filter-popover-title\">{{ Label }}</span>\n @if (ActiveCount > 0 && ShowClearAll) {\n <button type=\"button\" class=\"mj-filter-popover-clear\" (click)=\"ClearAll()\">\n Clear all\n </button>\n }\n </div>\n <div class=\"mj-filter-popover-content\">\n <ng-content></ng-content>\n </div>\n </ng-template>\n\n @if (IsMobile) {\n <!-- Mobile: the popover docks as a bottom sheet — mirrors how mj-left-nav\n becomes a drawer at this width. -->\n @if (IsOpen) {\n <div class=\"mj-filter-popover-scrim\" (click)=\"Close()\" aria-hidden=\"true\"></div>\n <div class=\"mj-filter-popover-sheet\" role=\"dialog\" [attr.aria-label]=\"Label\">\n <div class=\"mj-filter-popover-grab\" aria-hidden=\"true\"></div>\n <ng-container ngTemplateOutlet=\"panelBody\"></ng-container>\n </div>\n }\n } @else {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"IsOpen\"\n [cdkConnectedOverlayPositions]=\"Positions\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"mj-filter-popover-backdrop\"\n (backdropClick)=\"Close()\"\n (detach)=\"Close()\">\n <div class=\"mj-filter-popover-panel\" role=\"dialog\" [attr.aria-label]=\"Label\">\n <ng-container ngTemplateOutlet=\"panelBody\"></ng-container>\n </div>\n </ng-template>\n }\n `,\n styles: [`\n :host {\n display: inline-flex;\n }\n\n / Trigger button — visually aligned with mjButton size=\"sm\" variant=\"secondary\"\n (same height, padding, font-size, font-weight, background) so it sits\n cleanly next to Refresh/Export/+Add in chrome and filter-card rows. /\n .mj-filter-popover-trigger {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n min-height: 32px;\n background: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n color: var(--mj-text-primary);\n font-family: inherit;\n font-size: 0.8125rem;\n font-weight: var(--mj-font-semibold);\n line-height: 1.5;\n cursor: pointer;\n transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;\n white-space: nowrap;\n }\n\n .mj-filter-popover-trigger:hover {\n background: var(--mj-bg-surface-active);\n border-color: var(--mj-border-strong);\n }\n\n .mj-filter-popover-trigger--active {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-border-default));\n color: var(--mj-brand-primary);\n }\n\n .mj-filter-popover-trigger--active:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface));\n }\n\n .mj-filter-popover-trigger > i:first-child {\n font-size: var(--mj-text-xs);\n color: var(--mj-brand-primary);\n }\n\n .mj-filter-popover-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 var(--mj-space-1-5);\n border-radius: 10px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n font-size: 11px;\n font-weight: 700;\n line-height: 1;\n }\n\n .mj-filter-popover-chevron {\n font-size: 10px;\n transition: transform 0.2s ease;\n color: var(--mj-text-muted);\n }\n\n .mj-filter-popover-chevron--open {\n transform: rotate(180deg);\n }\n\n .mj-filter-popover-panel {\n min-width: 320px;\n max-width: 480px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n box-shadow: var(--mj-shadow-md);\n margin-top: var(--mj-space-1-5);\n overflow: hidden;\n }\n\n .mj-filter-popover-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--mj-space-3) var(--mj-space-4) 0;\n }\n\n .mj-filter-popover-title {\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n }\n\n .mj-filter-popover-clear {\n background: transparent;\n border: none;\n color: var(--mj-brand-primary);\n font-size: var(--mj-text-xs);\n font-weight: 500;\n cursor: pointer;\n padding: var(--mj-space-1) var(--mj-space-2);\n border-radius: var(--mj-radius-sm);\n }\n\n .mj-filter-popover-clear:hover {\n background: var(--mj-bg-surface-hover);\n }\n\n .mj-filter-popover-content {\n padding: var(--mj-space-3) var(--mj-space-4) var(--mj-space-4);\n display: flex;\n flex-direction: column;\n gap: var(--mj-space-2-5);\n }\n\n / ── Mobile bottom sheet (≤700px) ─────────────────────────────────────\n The trigger button stays inline; tapping it docks the panel body as a\n sheet at the bottom of the viewport over a scrim — same body, different\n wrapper. Mirrors the mj-left-nav drawer treatment. /\n .mj-filter-popover-scrim {\n position: fixed;\n inset: 0;\n background: var(--mj-bg-overlay);\n z-index: 9998;\n animation: mj-fp-fade 0.2s ease;\n }\n .mj-filter-popover-sheet {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 9999;\n display: flex;\n flex-direction: column;\n max-height: 85vh;\n background: var(--mj-bg-surface);\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n box-shadow: var(--mj-shadow-lg);\n animation: mj-fp-slide-up 0.24s ease;\n }\n .mj-filter-popover-grab {\n flex-shrink: 0;\n width: 36px;\n height: 4px;\n border-radius: 2px;\n background: var(--mj-border-strong);\n margin: 10px auto 2px;\n }\n .mj-filter-popover-sheet .mj-filter-popover-header {\n flex-shrink: 0;\n }\n .mj-filter-popover-sheet .mj-filter-popover-content {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n padding-bottom: var(--mj-space-6);\n }\n @keyframes mj-fp-fade {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes mj-fp-slide-up {\n from { transform: translateY(100%); }\n to { transform: translateY(0); }\n }\n @media (prefers-reduced-motion: reduce) {\n .mj-filter-popover-scrim,\n .mj-filter-popover-sheet {\n animation: none;\n }\n }\n\n / On mobile the trigger collapses to icon-only (the count badge still\n conveys active state) so the control bar — search · Filter · view —\n stays on one line. /\n @media (max-width: 700px) {\n .mj-filter-popover-label,\n .mj-filter-popover-chevron {\n display: none;\n }\n .mj-filter-popover-trigger {\n padding: 6px 10px;\n gap: 4px;\n }\n }\n `]\n})\nexport class MJFilterPopoverComponent implements OnDestroy {\n @Input() Label: string = 'Filters';\n @Input() Icon: string = 'fa-solid fa-filter';\n @Input() ActiveCount: number = 0;\n @Input() ShowClearAll: boolean = false;\n\n public IsOpen: boolean = false;\n\n /\n True when the viewport is narrow enough that the popover should dock as a\n * bottom sheet instead of an anchored overlay. Driven by matchMedia so it\n * tracks live resize without Angular change-detection plumbing.\n /\n public IsMobile: boolean = false;\n\n private readonly zone = inject(NgZone);\n private readonly cdr = inject(ChangeDetectorRef);\n\n private readonly mediaQuery: MediaQueryList \| null =\n typeof window !== 'undefined' && typeof window.matchMedia === 'function'\n ? window.matchMedia('(max-width: 700px)')\n : null;\n\n // matchMedia 'change' fires OUTSIDE Angular's zone, so the flip must be\n // re-entered into the zone — otherwise the IsMobile change lands mid-CD and\n // the @if(IsMobile) branch swap throws ExpressionChangedAfterItHasBeenChecked\n // when crossing the breakpoint. Also close across the switch so a sheet/overlay\n // opened in one mode doesn't linger in the other.\n private readonly onMediaChange = (e: MediaQueryListEvent): void => {\n this.zone.run(() => {\n this.IsMobile = e.matches;\n this.IsOpen = false;\n this.cdr.markForCheck();\n });\n };\n\n constructor() {\n if (this.mediaQuery) {\n this.IsMobile = this.mediaQuery.matches;\n this.mediaQuery.addEventListener('change', this.onMediaChange);\n }\n }\n\n ngOnDestroy(): void {\n this.mediaQuery?.removeEventListener('change', this.onMediaChange);\n }\n\n // Note: NO offsetY here — CDK applies offsetY as `transform: translateY(...)` on the\n // overlay pane, which creates a containing block for `position: fixed` descendants.\n // Tree dropdowns (and any other component using position: fixed) would then mis-position.\n // The 6px spacing below the trigger is applied via margin-top on .mj-filter-popover-panel.\n public readonly Positions: ConnectedPosition[] = [\n { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n ];\n\n public Toggle(): void { this.IsOpen = !this.IsOpen; }\n public Open(): void { this.IsOpen = true; }\n public Close(): void { this.IsOpen = false; }\n\n /* Emitted when the user clicks the \"Clear all\" link inside the popover header. */\n @Output() public ClearAllRequested = new EventEmitter<void>();\n\n public ClearAll(): void {\n this.ClearAllRequested.emit();\n }\n}\n"]}
1	+ {"version":3,"file":"filter-popover.component.js","sourceRoot":"","sources":["../../../src/lib/filter-popover/filter-popover.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { ChangeDetectorRef, Component, EventEmitter, Input, NgZone, OnDestroy, Output, inject } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { OverlayModule, ConnectedPosition } from '@angular/cdk/overlay';\n\n/*\n mj-filter-popover — Compact \"Filters\" trigger button that opens a popover\n * containing arbitrary filter UI. Use this in a dashboard's page-header to\n * keep the header chrome consistent regardless of filter density.\n \n Pass the popover content via `<ng-content>`. Drive the active-count badge\n * via the `ActiveCount` input.\n \n Example:\n * ```html\n * <mj-filter-popover [ActiveCount]=\"activeFilters.length\">\n * <div class=\"my-filter-grid\">\n * <mj-dropdown ...></mj-dropdown>\n * <mj-dropdown ...></mj-dropdown>\n * </div>\n * </mj-filter-popover>\n * ```\n /\n@Component({\n selector: 'mj-filter-popover',\n standalone: true,\n imports: [CommonModule, OverlayModule],\n template: `\n <button\n type=\"button\"\n class=\"mj-filter-popover-trigger\"\n [class.mj-filter-popover-trigger--active]=\"IsOpen \|\| ActiveCount > 0\"\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [attr.aria-expanded]=\"IsOpen\"\n [attr.aria-haspopup]=\"true\"\n (click)=\"Toggle()\">\n <i [class]=\"Icon\"></i>\n <span class=\"mj-filter-popover-label\">{{ Label }}</span>\n @if (ActiveCount > 0) {\n <span class=\"mj-filter-popover-badge\" [attr.aria-label]=\"ActiveCount + ' active filters'\">\n {{ ActiveCount }}\n </span>\n }\n <i class=\"fa-solid fa-chevron-down mj-filter-popover-chevron\" [class.mj-filter-popover-chevron--open]=\"IsOpen\"></i>\n </button>\n\n <!-- The panel body (header + projected filter UI) is declared ONCE here and\n stamped into whichever wrapper is active (anchored overlay on desktop,\n docked sheet on mobile). A single <ng-content> avoids the duplicate-slot\n bug where projected content lands in only one of two branches. -->\n <ng-template #panelBody>\n <div class=\"mj-filter-popover-header\">\n <span class=\"mj-filter-popover-title\">{{ Label }}</span>\n @if (ActiveCount > 0 && ShowClearAll) {\n <button type=\"button\" class=\"mj-filter-popover-clear\" (click)=\"ClearAll()\">\n Clear all\n </button>\n }\n </div>\n <div class=\"mj-filter-popover-content\">\n <ng-content></ng-content>\n </div>\n </ng-template>\n\n @if (IsMobile) {\n <!-- Mobile: the popover docks as a bottom sheet — mirrors how mj-left-nav\n becomes a drawer at this width. -->\n @if (IsOpen) {\n <div class=\"mj-filter-popover-scrim\" (click)=\"Close()\" aria-hidden=\"true\"></div>\n <div class=\"mj-filter-popover-sheet\" role=\"dialog\" [attr.aria-label]=\"Label\">\n <div class=\"mj-filter-popover-grab\" aria-hidden=\"true\"></div>\n <ng-container ngTemplateOutlet=\"panelBody\"></ng-container>\n </div>\n }\n } @else {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"IsOpen\"\n [cdkConnectedOverlayPositions]=\"Positions\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"mj-filter-popover-backdrop\"\n (backdropClick)=\"Close()\"\n (detach)=\"Close()\">\n <div class=\"mj-filter-popover-panel\" role=\"dialog\" [attr.aria-label]=\"Label\">\n <ng-container ngTemplateOutlet=\"panelBody\"></ng-container>\n </div>\n </ng-template>\n }\n `,\n styles: [`\n :host {\n display: inline-flex;\n }\n\n / Trigger button — visually aligned with mjButton size=\"sm\" variant=\"secondary\"\n (same height, padding, font-size, font-weight, background) so it sits\n cleanly next to Refresh/Export/+Add in chrome and filter-card rows. /\n .mj-filter-popover-trigger {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n min-height: 32px;\n background: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n color: var(--mj-text-primary);\n font-family: inherit;\n font-size: 0.8125rem;\n font-weight: var(--mj-font-semibold);\n line-height: 1.5;\n cursor: pointer;\n transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;\n white-space: nowrap;\n }\n\n .mj-filter-popover-trigger:hover {\n background: var(--mj-bg-surface-active);\n border-color: var(--mj-border-strong);\n }\n\n .mj-filter-popover-trigger--active {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-border-default));\n color: var(--mj-brand-primary);\n }\n\n .mj-filter-popover-trigger--active:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface));\n }\n\n .mj-filter-popover-trigger > i:first-child {\n font-size: var(--mj-text-xs);\n color: var(--mj-brand-primary);\n }\n\n .mj-filter-popover-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 var(--mj-space-1-5);\n border-radius: 10px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n font-size: 11px;\n font-weight: 700;\n line-height: 1;\n }\n\n .mj-filter-popover-chevron {\n font-size: 10px;\n transition: transform 0.2s ease;\n color: var(--mj-text-muted);\n }\n\n .mj-filter-popover-chevron--open {\n transform: rotate(180deg);\n }\n\n .mj-filter-popover-panel {\n min-width: 320px;\n max-width: 480px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n box-shadow: var(--mj-shadow-md);\n margin-top: var(--mj-space-1-5);\n overflow: hidden;\n }\n\n .mj-filter-popover-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--mj-space-3) var(--mj-space-4) 0;\n }\n\n .mj-filter-popover-title {\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n }\n\n .mj-filter-popover-clear {\n background: transparent;\n border: none;\n color: var(--mj-brand-primary);\n font-size: var(--mj-text-xs);\n font-weight: 500;\n cursor: pointer;\n padding: var(--mj-space-1) var(--mj-space-2);\n border-radius: var(--mj-radius-sm);\n }\n\n .mj-filter-popover-clear:hover {\n background: var(--mj-bg-surface-hover);\n }\n\n .mj-filter-popover-content {\n padding: var(--mj-space-3) var(--mj-space-4) var(--mj-space-4);\n display: flex;\n flex-direction: column;\n gap: var(--mj-space-2-5);\n }\n\n / ── Mobile bottom sheet (≤700px) ─────────────────────────────────────\n The trigger button stays inline; tapping it docks the panel body as a\n sheet at the bottom of the viewport over a scrim — same body, different\n wrapper. Mirrors the mj-left-nav drawer treatment. /\n .mj-filter-popover-scrim {\n position: fixed;\n inset: 0;\n background: var(--mj-bg-overlay);\n z-index: 9998;\n animation: mj-fp-fade 0.2s ease;\n }\n .mj-filter-popover-sheet {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 9999;\n display: flex;\n flex-direction: column;\n max-height: 85vh;\n background: var(--mj-bg-surface);\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n box-shadow: var(--mj-shadow-lg);\n animation: mj-fp-slide-up 0.24s ease;\n }\n .mj-filter-popover-grab {\n flex-shrink: 0;\n width: 36px;\n height: 4px;\n border-radius: 2px;\n background: var(--mj-border-strong);\n margin: 10px auto 2px;\n }\n .mj-filter-popover-sheet .mj-filter-popover-header {\n flex-shrink: 0;\n }\n .mj-filter-popover-sheet .mj-filter-popover-content {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n padding-bottom: var(--mj-space-6);\n }\n @keyframes mj-fp-fade {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes mj-fp-slide-up {\n from { transform: translateY(100%); }\n to { transform: translateY(0); }\n }\n @media (prefers-reduced-motion: reduce) {\n .mj-filter-popover-scrim,\n .mj-filter-popover-sheet {\n animation: none;\n }\n }\n\n / On mobile the trigger collapses to icon-only (the count badge still\n conveys active state) so the control bar — search · Filter · view —\n stays on one line. /\n @media (max-width: 700px) {\n .mj-filter-popover-label,\n .mj-filter-popover-chevron {\n display: none;\n }\n .mj-filter-popover-trigger {\n padding: 6px 10px;\n gap: 4px;\n }\n }\n `]\n})\nexport class MJFilterPopoverComponent implements OnDestroy {\n @Input() Label: string = 'Filters';\n @Input() Icon: string = 'fa-solid fa-filter';\n @Input() ActiveCount: number = 0;\n @Input() ShowClearAll: boolean = false;\n\n public IsOpen: boolean = false;\n\n /\n True when the viewport is narrow enough that the popover should dock as a\n * bottom sheet instead of an anchored overlay. Driven by matchMedia so it\n * tracks live resize without Angular change-detection plumbing.\n /\n public IsMobile: boolean = false;\n\n private readonly zone = inject(NgZone);\n private readonly cdr = inject(ChangeDetectorRef);\n\n private readonly mediaQuery: MediaQueryList \| null =\n typeof window !== 'undefined' && typeof window.matchMedia === 'function'\n ? window.matchMedia('(max-width: 700px)')\n : null;\n\n // matchMedia 'change' fires OUTSIDE Angular's zone, so the flip must be\n // re-entered into the zone — otherwise the IsMobile change lands mid-CD and\n // the @if(IsMobile) branch swap throws ExpressionChangedAfterItHasBeenChecked\n // when crossing the breakpoint. Also close across the switch so a sheet/overlay\n // opened in one mode doesn't linger in the other.\n private readonly onMediaChange = (e: MediaQueryListEvent): void => {\n this.zone.run(() => {\n this.IsMobile = e.matches;\n this.IsOpen = false;\n this.cdr.markForCheck();\n });\n };\n\n constructor() {\n if (this.mediaQuery) {\n this.IsMobile = this.mediaQuery.matches;\n this.mediaQuery.addEventListener('change', this.onMediaChange);\n }\n }\n\n ngOnDestroy(): void {\n this.mediaQuery?.removeEventListener('change', this.onMediaChange);\n }\n\n // Note: NO offsetY here — CDK applies offsetY as `transform: translateY(...)` on the\n // overlay pane, which creates a containing block for `position: fixed` descendants.\n // Tree dropdowns (and any other component using position: fixed) would then mis-position.\n // The 6px spacing below the trigger is applied via margin-top on .mj-filter-popover-panel.\n public readonly Positions: ConnectedPosition[] = [\n { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n ];\n\n public Toggle(): void { this.IsOpen = !this.IsOpen; }\n public Open(): void { this.IsOpen = true; }\n public Close(): void { this.IsOpen = false; }\n\n /* Emitted when the user clicks the \"Clear all\" link inside the popover header. */\n @Output() public ClearAllRequested = new EventEmitter<void>();\n\n public ClearAll(): void {\n this.ClearAllRequested.emit();\n }\n}\n"]}

package/dist/lib/left-nav/left-nav-content.component.js CHANGED Viewed

@@ -86,7 +86,7 @@ export class MJLeftNavContentComponent {
             i0.ɵɵprojection(2);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.Error ? 0 : ctx.Loading ? 1 : -1);
-        } }, dependencies: [CommonModule], styles: ["[_nghost-%COMP%] {\n      flex: 1;\n      min-width: 0;\n      \n\n\n\n\n\n      min-height: 0;\n      display: flex;\n      flex-direction: column;\n      background: var(--mj-bg-page);\n      overflow: hidden;\n    }\n\n    \n\n\n\n\n\n\n\n\n\n\n\n    [_nghost-%COMP%]     > *:not(.mj-left-nav-content__error):not(.mj-left-nav-content__loading):not(mj-page-header-interior):not(mj-page-body-interior) {\n      flex: 1 1 auto;\n      min-height: 0;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    \n\n\n    .mj-left-nav-content--busy[_nghost-%COMP%]     > *:not(.mj-left-nav-content__error):not(.mj-left-nav-content__loading) {\n      display: none;\n    }\n\n    .mj-left-nav-content__error[_ngcontent-%COMP%], \n   .mj-left-nav-content__loading[_ngcontent-%COMP%] {\n      flex: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 10px;\n      color: var(--mj-text-muted);\n      font-size: 13px;\n      padding: 32px;\n      text-align: center;\n    }\n\n    .mj-left-nav-content__error[_ngcontent-%COMP%] {\n      color: var(--mj-status-error);\n    }\n\n    .mj-left-nav-content__error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 20px;\n    }\n\n    .mj-left-nav-content__loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 16px;\n      color: var(--mj-brand-primary);\n    }"] });
+        } }, dependencies: [CommonModule], styles: ["[_nghost-%COMP%] {\n      flex: 1;\n      min-width: 0;\n      \n\n\n\n\n      min-height: 0;\n      display: flex;\n      flex-direction: column;\n      background: var(--mj-bg-page);\n      overflow: hidden;\n    }\n\n    \n\n\n\n\n\n\n\n\n\n\n    [_nghost-%COMP%]     > *:not(.mj-left-nav-content__error):not(.mj-left-nav-content__loading):not(mj-page-header-interior):not(mj-page-body-interior) {\n      flex: 1 1 auto;\n      min-height: 0;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    \n\n    .mj-left-nav-content--busy[_nghost-%COMP%]     > *:not(.mj-left-nav-content__error):not(.mj-left-nav-content__loading) {\n      display: none;\n    }\n\n    .mj-left-nav-content__error[_ngcontent-%COMP%], \n   .mj-left-nav-content__loading[_ngcontent-%COMP%] {\n      flex: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 10px;\n      color: var(--mj-text-muted);\n      font-size: 13px;\n      padding: 32px;\n      text-align: center;\n    }\n\n    .mj-left-nav-content__error[_ngcontent-%COMP%] {\n      color: var(--mj-status-error);\n    }\n\n    .mj-left-nav-content__error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 20px;\n    }\n\n    .mj-left-nav-content__loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 16px;\n      color: var(--mj-brand-primary);\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJLeftNavContentComponent, [{
         type: Component,