@praxisui/table 9.0.5-rc.13 → 9.0.5-rc.14

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 (11) hide show
  1. package/README.md +12 -7
  2. package/ai/component-registry.json +5 -4
  3. package/docs/dynamic-filter-architecture-overview.md +22 -1
  4. package/docs/dynamic-filter-host-integration-guide.md +39 -1
  5. package/fesm2022/{praxisui-table-praxisui-table-ROTRfaef.mjs → praxisui-table-praxisui-table-BEA_490t.mjs} +1920 -1309
  6. package/fesm2022/{praxisui-table-table-agentic-authoring-turn-flow-CtqlPxzU.mjs → praxisui-table-table-agentic-authoring-turn-flow-Ktzr79Tw.mjs} +1 -1
  7. package/fesm2022/{praxisui-table-table-ai.adapter-BS7NAJiY.mjs → praxisui-table-table-ai.adapter-CdBHVHMa.mjs} +1 -1
  8. package/fesm2022/praxisui-table.mjs +1 -1
  9. package/package.json +10 -10
  10. package/src/lib/praxis-table.json-api.md +5 -2
  11. package/types/praxisui-table.d.ts +1 -0
package/fesm2022/{praxisui-table-praxisui-table-ROTRfaef.mjs → praxisui-table-praxisui-table-BEA_490t.mjs} RENAMED
@@ -1,7 +1,7 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { InjectionToken, EventEmitter, Output, Input, Optional, Inject, Component, ChangeDetectionStrategy, Injectable, LOCALE_ID, inject, DestroyRef, Directive, ElementRef, ChangeDetectorRef, ViewChild, HostListener, ENVIRONMENT_INITIALIZER, effect, booleanAttribute, HostBinding, ContentChild } from '@angular/core';
3
3
  import * as i10$1 from '@angular/common';
4
- import { UpperCasePipe, LowerCasePipe, TitleCasePipe, PercentPipe, CurrencyPipe, DecimalPipe, DatePipe, CommonModule } from '@angular/common';
4
+ import { NgTemplateOutlet, UpperCasePipe, LowerCasePipe, TitleCasePipe, PercentPipe, CurrencyPipe, DecimalPipe, DatePipe, CommonModule } from '@angular/common';
5
5
  import { DomSanitizer } from '@angular/platform-browser';
6
6
  import * as i8$2 from '@angular/material/table';
7
7
  import { MatTableDataSource, MatTableModule, MatTable } from '@angular/material/table';
@@ -543,7 +543,11 @@ function getActionId(action) {
543
543
  }
544
544
 
545
545
  const TOOLBAR_SHORTCUT_HANDLED_FLAG = '__praxisTableToolbarShortcutHandled__';
546
- const BLOCKED_PATH_SEGMENTS$1 = new Set(['__proto__', 'prototype', 'constructor']);
546
+ const BLOCKED_PATH_SEGMENTS$1 = new Set([
547
+ '__proto__',
548
+ 'prototype',
549
+ 'constructor',
550
+ ]);
547
551
  const PRAXIS_TABLE_TOOLBAR_APPEARANCE_PRESETS = {
548
552
  'table-integrated': {
549
553
  variant: 'integrated',
@@ -583,9 +587,9 @@ function providePraxisTableToolbarAppearance(appearance, presets = {}) {
583
587
  ];
584
588
  }
585
589
  function isRuntimeFocusOrigin$1(value) {
586
- return typeof HTMLElement !== 'undefined'
587
- && value instanceof HTMLElement
588
- && typeof value.focus === 'function';
590
+ return (typeof HTMLElement !== 'undefined' &&
591
+ value instanceof HTMLElement &&
592
+ typeof value.focus === 'function');
589
593
  }
590
594
  function normalizeCorporateLoggerEnvironment$2(candidate) {
591
595
  const value = String(candidate || '')
@@ -599,11 +603,11 @@ function normalizeCorporateLoggerEnvironment$2(candidate) {
599
603
  if (value === 'qa' || value === 'test' || value === 'testing') {
600
604
  return 'qa';
601
605
  }
602
- if (value === 'hml'
603
- || value === 'homolog'
604
- || value === 'homologacao'
605
- || value === 'stage'
606
- || value === 'staging') {
606
+ if (value === 'hml' ||
607
+ value === 'homolog' ||
608
+ value === 'homologacao' ||
609
+ value === 'stage' ||
610
+ value === 'staging') {
607
611
  return 'hml';
608
612
  }
609
613
  return 'prod';
@@ -682,13 +686,17 @@ class PraxisTableToolbar {
682
686
  const subtitle = this.getToolbarSubtitle();
683
687
  if (title && subtitle)
684
688
  return `${title}. ${subtitle}`;
685
- return title || subtitle || this.tx('table.chrome.toolbarIdentity', 'Identidade da tabela');
689
+ return (title ||
690
+ subtitle ||
691
+ this.tx('table.chrome.toolbarIdentity', 'Identidade da tabela'));
686
692
  }
687
693
  getToolbarIdentityTooltip() {
688
694
  return this.hasToolbarIdentity() ? this.getToolbarIdentityLabel() : null;
689
695
  }
690
696
  hasToolbarIdentity() {
691
- return !!(this.getToolbarIcon() || this.getToolbarTitle() || this.getToolbarSubtitle());
697
+ return !!(this.getToolbarIcon() ||
698
+ this.getToolbarTitle() ||
699
+ this.getToolbarSubtitle());
692
700
  }
693
701
  getToolbarTitle() {
694
702
  return String(this.config?.toolbar?.title || '').trim();
@@ -730,7 +738,9 @@ class PraxisTableToolbar {
730
738
  case 'print':
731
739
  return this.tx('table.chrome.exportFormat.print.provider', 'Impressão via provider');
732
740
  default:
733
- return String(format || '').trim().toUpperCase();
741
+ return String(format || '')
742
+ .trim()
743
+ .toUpperCase();
734
744
  }
735
745
  }
736
746
  getExportFormatTooltip(format) {
@@ -760,18 +770,24 @@ class PraxisTableToolbar {
760
770
  if (this.exportBusy)
761
771
  return;
762
772
  event.target?.blur?.();
763
- this.exportAction.emit({ format: 'excel', scope: 'currentPage', localOnly: true });
773
+ this.exportAction.emit({
774
+ format: 'excel',
775
+ scope: 'currentPage',
776
+ localOnly: true,
777
+ });
764
778
  }
765
779
  isExcelExportFormat(format) {
766
780
  const normalized = this.normalizeExportFormat(format);
767
781
  return normalized === 'excel' || normalized === 'xlsx';
768
782
  }
769
783
  isVisibleExcelExportEnabled(format) {
770
- return this.isExcelExportFormat(format)
771
- && this.config?.export?.excel?.visibleCurrentPage !== false;
784
+ return (this.isExcelExportFormat(format) &&
785
+ this.config?.export?.excel?.visibleCurrentPage !== false);
772
786
  }
773
787
  normalizeExportFormat(format) {
774
- return String(format || '').trim().toLowerCase();
788
+ return String(format || '')
789
+ .trim()
790
+ .toLowerCase();
775
791
  }
776
792
  getColumnsVisibilityLabel() {
777
793
  return this.tx('table.chrome.columnsVisibility', 'Colunas');
@@ -780,12 +796,12 @@ class PraxisTableToolbar {
780
796
  const filters = this.config?.toolbar?.filters;
781
797
  if (filters?.enabled !== true || !Array.isArray(filters.quickFilters))
782
798
  return [];
783
- return filters.quickFilters.filter((item) => !!item
784
- && typeof item.id === 'string'
785
- && item.id.trim().length > 0
786
- && !!item.filter
787
- && typeof item.filter === 'object'
788
- && !Array.isArray(item.filter));
799
+ return filters.quickFilters.filter((item) => !!item &&
800
+ typeof item.id === 'string' &&
801
+ item.id.trim().length > 0 &&
802
+ !!item.filter &&
803
+ typeof item.filter === 'object' &&
804
+ !Array.isArray(item.filter));
789
805
  }
790
806
  shouldShowQuickFilters() {
791
807
  return this.getQuickFilters().length > 0;
@@ -821,12 +837,18 @@ class PraxisTableToolbar {
821
837
  getDensityOptions() {
822
838
  const configured = this.config?.toolbar?.densityToggle?.values;
823
839
  const valid = Array.isArray(configured)
824
- ? configured.filter((value) => value === 'compact' || value === 'comfortable' || value === 'spacious')
840
+ ? configured.filter((value) => value === 'compact' ||
841
+ value === 'comfortable' ||
842
+ value === 'spacious')
825
843
  : [];
826
- return valid.length ? [...new Set(valid)] : ['compact', 'comfortable', 'spacious'];
844
+ return valid.length
845
+ ? [...new Set(valid)]
846
+ : ['compact', 'comfortable', 'spacious'];
827
847
  }
828
848
  isDensityActive(density) {
829
- return (this.activeDensity || this.config?.appearance?.density || 'comfortable') === density;
849
+ return ((this.activeDensity ||
850
+ this.config?.appearance?.density ||
851
+ 'comfortable') === density);
830
852
  }
831
853
  getDensityLabel(density) {
832
854
  switch (density) {
@@ -903,21 +925,22 @@ class PraxisTableToolbar {
903
925
  return template;
904
926
  return Object.entries(params).reduce((current, [key, value]) => current.replace(new RegExp(`\\{${key}\\}`, 'g'), String(value ?? '')), template);
905
927
  }
906
- ngOnDestroy() {
907
- }
928
+ ngOnDestroy() { }
908
929
  getToolbarVariant() {
909
930
  const value = this.resolveToolbarAppearance().variant;
910
- return value === 'flat'
911
- || value === 'elevated'
912
- || value === 'integrated'
913
- || value === 'outlined'
931
+ return value === 'flat' ||
932
+ value === 'elevated' ||
933
+ value === 'integrated' ||
934
+ value === 'outlined'
914
935
  ? value
915
936
  : 'outlined';
916
937
  }
917
938
  getToolbarDensity() {
918
- const value = this.resolveToolbarAppearance().density
919
- || this.config?.appearance?.density;
920
- return value === 'compact' || value === 'spacious' || value === 'comfortable'
939
+ const value = this.resolveToolbarAppearance().density ||
940
+ this.config?.appearance?.density;
941
+ return value === 'compact' ||
942
+ value === 'spacious' ||
943
+ value === 'comfortable'
921
944
  ? value
922
945
  : 'comfortable';
923
946
  }
@@ -951,8 +974,7 @@ class PraxisTableToolbar {
951
974
  if (tokenValue)
952
975
  return tokenValue;
953
976
  if (name === 'bg') {
954
- return (this.normalizeTokenValue(this.config?.toolbar?.layout?.backgroundColor)
955
- || this.normalizeTokenValue(this.backgroundColor));
977
+ return (this.normalizeTokenValue(this.config?.toolbar?.layout?.backgroundColor) || this.normalizeTokenValue(this.backgroundColor));
956
978
  }
957
979
  return null;
958
980
  }
@@ -1005,10 +1027,10 @@ class PraxisTableToolbar {
1005
1027
  return null;
1006
1028
  let current = obj;
1007
1029
  for (const key of parts) {
1008
- if (BLOCKED_PATH_SEGMENTS$1.has(key)
1009
- || current == null
1010
- || (typeof current !== 'object' && typeof current !== 'function')
1011
- || !Object.prototype.hasOwnProperty.call(current, key)) {
1030
+ if (BLOCKED_PATH_SEGMENTS$1.has(key) ||
1031
+ current == null ||
1032
+ (typeof current !== 'object' && typeof current !== 'function') ||
1033
+ !Object.prototype.hasOwnProperty.call(current, key)) {
1012
1034
  return null;
1013
1035
  }
1014
1036
  current = current[key];
@@ -1046,9 +1068,10 @@ class PraxisTableToolbar {
1046
1068
  if (this.logger)
1047
1069
  return this.logger;
1048
1070
  const runtimeEnvironment = normalizeCorporateLoggerEnvironment$2(this.resolveRuntimeEnvironment());
1049
- if (!this.fallbackLogger
1050
- || this.fallbackLoggerEnvironment !== runtimeEnvironment) {
1051
- this.fallbackLogger = createPraxisTableToolbarFallbackLogger(runtimeEnvironment);
1071
+ if (!this.fallbackLogger ||
1072
+ this.fallbackLoggerEnvironment !== runtimeEnvironment) {
1073
+ this.fallbackLogger =
1074
+ createPraxisTableToolbarFallbackLogger(runtimeEnvironment);
1052
1075
  this.fallbackLoggerEnvironment = runtimeEnvironment;
1053
1076
  }
1054
1077
  return this.fallbackLogger;
@@ -1111,15 +1134,15 @@ class PraxisTableToolbar {
1111
1134
  return this.sortActions(items);
1112
1135
  }
1113
1136
  hasBusinessActions() {
1114
- return (this.getStartActions().length > 0
1115
- || this.getNonStartActions().length > 0
1116
- || this.shouldRenderToolbarBulkActions());
1137
+ return (this.getStartActions().length > 0 ||
1138
+ this.getNonStartActions().length > 0 ||
1139
+ this.shouldRenderToolbarBulkActions());
1117
1140
  }
1118
1141
  hasCompactCommands() {
1119
- return (this.getOverflowActions().length > 0
1120
- || this.config?.export?.enabled === true
1121
- || this.isColumnsVisibilityEnabled()
1122
- || this.isDensityToggleEnabled());
1142
+ return (this.getOverflowActions().length > 0 ||
1143
+ this.config?.export?.enabled === true ||
1144
+ this.isColumnsVisibilityEnabled() ||
1145
+ this.isDensityToggleEnabled());
1123
1146
  }
1124
1147
  getOverflowActions() {
1125
1148
  const start = this.getStartActions();
@@ -1297,9 +1320,9 @@ class PraxisTableToolbar {
1297
1320
  if (typeof action.visible === 'boolean')
1298
1321
  return action.visible;
1299
1322
  const visibleWhen = action.visibleWhen;
1300
- if (visibleWhen === null
1301
- || visibleWhen === undefined
1302
- || (typeof visibleWhen === 'string' && !visibleWhen.trim())) {
1323
+ if (visibleWhen === null ||
1324
+ visibleWhen === undefined ||
1325
+ (typeof visibleWhen === 'string' && !visibleWhen.trim())) {
1303
1326
  return true;
1304
1327
  }
1305
1328
  return this.evaluateVisibleWhen(visibleWhen, action);
@@ -1320,9 +1343,9 @@ class PraxisTableToolbar {
1320
1343
  }
1321
1344
  evaluateDisabledWhen(action) {
1322
1345
  const disabledWhen = action?.disabledWhen;
1323
- if (disabledWhen === null
1324
- || disabledWhen === undefined
1325
- || (typeof disabledWhen === 'string' && !disabledWhen.trim())) {
1346
+ if (disabledWhen === null ||
1347
+ disabledWhen === undefined ||
1348
+ (typeof disabledWhen === 'string' && !disabledWhen.trim())) {
1326
1349
  return false;
1327
1350
  }
1328
1351
  if (this.isJsonLogicExpression(disabledWhen)) {
@@ -1683,7 +1706,10 @@ class PraxisTableToolbar {
1683
1706
  if (this.warnedInvalidShortcuts.has(key))
1684
1707
  return;
1685
1708
  this.warnedInvalidShortcuts.add(key);
1686
- this.warnLog('[PraxisTableToolbar] invalid toolbar shortcut ignored.', { actionId, shortcut });
1709
+ this.warnLog('[PraxisTableToolbar] invalid toolbar shortcut ignored.', {
1710
+ actionId,
1711
+ shortcut,
1712
+ });
1687
1713
  }
1688
1714
  warnInvalidShortcutScope(action, shortcutScope) {
1689
1715
  const actionId = getActionId(action) || action?.label || 'unknown';
@@ -1697,9 +1723,7 @@ class PraxisTableToolbar {
1697
1723
  });
1698
1724
  }
1699
1725
  warnShortcutConflict(combo, bindings) {
1700
- const ids = bindings
1701
- .map((binding) => binding.actionId || 'unknown')
1702
- .sort();
1726
+ const ids = bindings.map((binding) => binding.actionId || 'unknown').sort();
1703
1727
  const key = `${combo}:${ids.join('|')}`;
1704
1728
  if (this.warnedShortcutConflicts.has(key))
1705
1729
  return;
@@ -1737,20 +1761,29 @@ class PraxisTableToolbar {
1737
1761
  [attr.aria-label]="getToolbarAriaLabel()"
1738
1762
  [class.praxis-toolbar--has-identity]="showMain && hasToolbarIdentity()"
1739
1763
  [class.praxis-toolbar--has-query]="showMain"
1764
+ [class.praxis-toolbar--has-scope]="showMain && shouldShowQuickFilters()"
1740
1765
  [class.p-table-toolbar--flat]="getToolbarVariant() === 'flat'"
1741
1766
  [class.p-table-toolbar--outlined]="getToolbarVariant() === 'outlined'"
1742
1767
  [class.p-table-toolbar--elevated]="getToolbarVariant() === 'elevated'"
1743
1768
  [class.p-table-toolbar--integrated]="getToolbarVariant() === 'integrated'"
1744
1769
  [class.p-table-toolbar--compact]="getToolbarDensity() === 'compact'"
1745
- [class.p-table-toolbar--comfortable]="getToolbarDensity() === 'comfortable'"
1770
+ [class.p-table-toolbar--comfortable]="
1771
+ getToolbarDensity() === 'comfortable'
1772
+ "
1746
1773
  [class.p-table-toolbar--spacious]="getToolbarDensity() === 'spacious'"
1747
1774
  [class.p-table-toolbar--square]="getToolbarShape() === 'square'"
1748
1775
  [class.p-table-toolbar--rounded]="getToolbarShape() === 'rounded'"
1749
1776
  [class.p-table-toolbar--pill]="getToolbarShape() === 'pill'"
1750
1777
  [class.p-table-toolbar--divider-start]="getToolbarDivider() === 'start'"
1751
- [class.p-table-toolbar--divider-between-groups]="getToolbarDivider() === 'between-groups'"
1752
- [class.p-table-toolbar--align-start]="getToolbarLayoutAlignment() === 'start'"
1753
- [class.p-table-toolbar--align-center]="getToolbarLayoutAlignment() === 'center'"
1778
+ [class.p-table-toolbar--divider-between-groups]="
1779
+ getToolbarDivider() === 'between-groups'
1780
+ "
1781
+ [class.p-table-toolbar--align-start]="
1782
+ getToolbarLayoutAlignment() === 'start'
1783
+ "
1784
+ [class.p-table-toolbar--align-center]="
1785
+ getToolbarLayoutAlignment() === 'center'
1786
+ "
1754
1787
  [class.p-table-toolbar--align-end]="getToolbarLayoutAlignment() === 'end'"
1755
1788
  [class.p-table-toolbar--layout-separator]="shouldShowLayoutSeparator()"
1756
1789
  [style.--p-table-toolbar-bg]="getToolbarToken('bg')"
@@ -1760,7 +1793,9 @@ class PraxisTableToolbar {
1760
1793
  [style.--p-table-toolbar-radius]="getToolbarToken('radius')"
1761
1794
  [style.--p-table-toolbar-shadow]="getToolbarToken('shadow')"
1762
1795
  [style.--p-table-toolbar-padding-block]="getToolbarToken('paddingBlock')"
1763
- [style.--p-table-toolbar-padding-inline]="getToolbarToken('paddingInline')"
1796
+ [style.--p-table-toolbar-padding-inline]="
1797
+ getToolbarToken('paddingInline')
1798
+ "
1764
1799
  [style.--p-table-toolbar-min-height]="getToolbarToken('minHeight')"
1765
1800
  [style.--p-table-toolbar-gap]="getToolbarToken('gap')"
1766
1801
  [style.--p-table-toolbar-actions-gap]="getToolbarToken('actionsGap')"
@@ -1769,23 +1804,47 @@ class PraxisTableToolbar {
1769
1804
  [style.--p-table-toolbar-action-radius]="getToolbarToken('actionRadius')"
1770
1805
  [style.--p-table-toolbar-action-bg]="getToolbarToken('actionBg')"
1771
1806
  [style.--p-table-toolbar-action-fg]="getToolbarToken('actionFg')"
1772
- [style.--p-table-toolbar-action-hover-bg]="getToolbarToken('actionHoverBg')"
1773
- [style.--p-table-toolbar-action-active-bg]="getToolbarToken('actionActiveBg')"
1774
- [style.--p-table-toolbar-action-focus-ring]="getToolbarToken('actionFocusRing')"
1775
- [style.--p-table-toolbar-ai-accent-color]="getToolbarToken('aiAccentColor')"
1807
+ [style.--p-table-toolbar-action-hover-bg]="
1808
+ getToolbarToken('actionHoverBg')
1809
+ "
1810
+ [style.--p-table-toolbar-action-active-bg]="
1811
+ getToolbarToken('actionActiveBg')
1812
+ "
1813
+ [style.--p-table-toolbar-action-focus-ring]="
1814
+ getToolbarToken('actionFocusRing')
1815
+ "
1816
+ [style.--p-table-toolbar-ai-accent-color]="
1817
+ getToolbarToken('aiAccentColor')
1818
+ "
1776
1819
  [style.--p-table-toolbar-status-fg]="getToolbarToken('statusFg')"
1777
1820
  [style.--p-table-toolbar-title-fg]="getToolbarToken('titleFg')"
1778
1821
  [style.--p-table-toolbar-subtitle-fg]="getToolbarToken('subtitleFg')"
1779
1822
  [style.--p-table-toolbar-icon-fg]="getToolbarToken('iconFg')"
1780
- [style.--p-table-toolbar-title-font-size]="getToolbarToken('titleFontSize')"
1781
- [style.--p-table-toolbar-subtitle-font-size]="getToolbarToken('subtitleFontSize')"
1782
- [style.--p-table-toolbar-title-font-weight]="getToolbarToken('titleFontWeight')"
1823
+ [style.--p-table-toolbar-title-font-size]="
1824
+ getToolbarToken('titleFontSize')
1825
+ "
1826
+ [style.--p-table-toolbar-subtitle-font-size]="
1827
+ getToolbarToken('subtitleFontSize')
1828
+ "
1829
+ [style.--p-table-toolbar-title-font-weight]="
1830
+ getToolbarToken('titleFontWeight')
1831
+ "
1783
1832
  [style.--p-table-toolbar-identity-gap]="getToolbarToken('identityGap')"
1784
- [style.--p-table-toolbar-identity-filter-gap]="getToolbarToken('identityFilterGap')"
1785
- [style.--p-table-toolbar-identity-min-height]="getToolbarToken('identityMinHeight')"
1786
- [style.--p-table-toolbar-identity-margin-bottom]="getToolbarToken('identityMarginBottom')"
1787
- [style.--p-table-toolbar-identity-icon-size]="getToolbarToken('identityIconSize')"
1788
- [style.--p-table-toolbar-identity-icon-radius]="getToolbarToken('identityIconRadius')"
1833
+ [style.--p-table-toolbar-identity-filter-gap]="
1834
+ getToolbarToken('identityFilterGap')
1835
+ "
1836
+ [style.--p-table-toolbar-identity-min-height]="
1837
+ getToolbarToken('identityMinHeight')
1838
+ "
1839
+ [style.--p-table-toolbar-identity-margin-bottom]="
1840
+ getToolbarToken('identityMarginBottom')
1841
+ "
1842
+ [style.--p-table-toolbar-identity-icon-size]="
1843
+ getToolbarToken('identityIconSize')
1844
+ "
1845
+ [style.--p-table-toolbar-identity-icon-radius]="
1846
+ getToolbarToken('identityIconRadius')
1847
+ "
1789
1848
  [style.--p-table-toolbar-layout-padding]="getToolbarLayoutPadding()"
1790
1849
  >
1791
1850
  @if (showMain && hasToolbarIdentity()) {
@@ -1807,714 +1866,21 @@ class PraxisTableToolbar {
1807
1866
  }
1808
1867
  <span class="toolbar-identity__copy">
1809
1868
  @if (getToolbarTitle()) {
1810
- <span class="toolbar-identity__title">{{ getToolbarTitle() }}</span>
1869
+ <span class="toolbar-identity__title">{{
1870
+ getToolbarTitle()
1871
+ }}</span>
1811
1872
  }
1812
1873
  @if (getToolbarSubtitle()) {
1813
- <span class="toolbar-identity__subtitle">{{ getToolbarSubtitle() }}</span>
1874
+ <span class="toolbar-identity__subtitle">{{
1875
+ getToolbarSubtitle()
1876
+ }}</span>
1814
1877
  }
1815
1878
  </span>
1816
1879
  </div>
1817
1880
  }
1818
1881
 
1819
- @if (showMain) {
1820
- @if (shouldShowQuickFilters()) {
1821
- <div
1822
- class="praxis-table-quick-filters"
1823
- role="group"
1824
- data-toolbar-region="scope"
1825
- [attr.aria-label]="getQuickFiltersLabel()"
1826
- >
1827
- @for (quickFilter of getQuickFilters(); track quickFilter.id) {
1828
- <button
1829
- type="button"
1830
- mat-stroked-button
1831
- class="praxis-table-quick-filter"
1832
- [class.praxis-table-quick-filter--active]="isQuickFilterActive(quickFilter.id)"
1833
- [attr.aria-pressed]="isQuickFilterActive(quickFilter.id)"
1834
- (click)="emitQuickFilterChange($event, quickFilter)"
1835
- >
1836
- @if (quickFilter.icon) {
1837
- <mat-icon [praxisIcon]="quickFilter.icon"></mat-icon>
1838
- }
1839
- {{ getQuickFilterLabel(quickFilter) }}
1840
- </button>
1841
- }
1842
- </div>
1843
- }
1844
- <div
1845
- class="toolbar-query"
1846
- role="group"
1847
- data-toolbar-region="query"
1848
- [attr.aria-label]="getToolbarLeadingLabel()"
1849
- >
1850
- <ng-content select="[advancedFilter]"></ng-content>
1851
- <ng-content select="[toolbar]"></ng-content>
1852
- </div>
1853
- }
1854
-
1855
- <div class="toolbar-actions" data-toolbar-region="commands">
1856
- @if (showActionsGroup) {
1857
- <div
1858
- class="actions-group"
1859
- role="group"
1860
- [class.actions-group--has-business]="hasBusinessActions()"
1861
- [attr.aria-label]="getToolbarActionsLabel()"
1862
- >
1863
- <div class="business-actions">
1864
- @for (action of getStartActions(); track getActionId(action)) {
1865
- @if (getActionType(action) === 'icon') {
1866
- <button
1867
- class="action-btn"
1868
- [praxisIconButton]="action.icon || 'bolt'"
1869
- size="compact"
1870
- [class.praxis-toolbar-icon-action--primary]="getActionColor(action) === 'primary'"
1871
- [class.praxis-toolbar-icon-action--accent]="getActionColor(action) === 'accent'"
1872
- [class.praxis-toolbar-icon-action--warn]="getActionColor(action) === 'warn'"
1873
- [disabled]="isActionDisabled(action)"
1874
- (click)="emitToolbarAction($event, getActionId(action), action)"
1875
- [attr.aria-label]="getActionAriaLabel(action)"
1876
- [matTooltip]="getActionTooltip(action) || action.label || getActionId(action)"
1877
- matTooltipPosition="below"
1878
- ></button>
1879
- } @else if (getActionType(action) === 'fab') {
1880
- <button
1881
- class="action-btn--fab"
1882
- mat-fab
1883
- [color]="getActionColor(action)"
1884
- [disabled]="isActionDisabled(action)"
1885
- (click)="emitToolbarAction($event, getActionId(action), action)"
1886
- [attr.aria-label]="getActionAriaLabel(action)"
1887
- [matTooltip]="getActionTooltip(action) || action.label || getActionId(action)"
1888
- matTooltipPosition="below"
1889
- >
1890
- <mat-icon [praxisIcon]="action.icon || 'bolt'"></mat-icon>
1891
- </button>
1892
- } @else if (getActionType(action) === 'menu' && getVisibleActionChildren(action).length) {
1893
- <button
1894
- class="action-btn"
1895
- mat-button
1896
- [color]="getActionColor(action)"
1897
- [disabled]="isActionDisabled(action)"
1898
- [matTooltip]="getActionTooltip(action)"
1899
- [matMenuTriggerFor]="startActionMenu"
1900
- [attr.aria-label]="getActionAriaLabel(action)"
1901
- >
1902
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
1903
- {{ action.label }}
1904
- </button>
1905
- <mat-menu #startActionMenu="matMenu">
1906
- @for (child of getVisibleActionChildren(action); track getActionId(child)) {
1907
- <button
1908
- mat-menu-item
1909
- [disabled]="isActionDisabled(child)"
1910
- [matTooltip]="getActionTooltip(child)"
1911
- (click)="emitToolbarAction($event, getActionId(child), child)"
1912
- >
1913
- @if (child.icon) { <mat-icon [praxisIcon]="child.icon"></mat-icon> }
1914
- {{ child.label || getActionId(child) }}
1915
- </button>
1916
- }
1917
- </mat-menu>
1918
- } @else if (isMenuWithoutChildren(action)) {
1919
- <button
1920
- class="action-btn"
1921
- mat-button
1922
- [color]="getActionColor(action)"
1923
- [disabled]="isActionDisabled(action)"
1924
- [matTooltip]="getActionTooltip(action)"
1925
- (click)="emitToolbarAction($event, getActionId(action), action)"
1926
- [attr.aria-label]="getActionAriaLabel(action)"
1927
- >
1928
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
1929
- {{ action.label }}
1930
- </button>
1931
- } @else if (action.appearance === 'outlined') {
1932
- <button
1933
- class="action-btn"
1934
- mat-stroked-button
1935
- [color]="getActionColor(action)"
1936
- [disabled]="isActionDisabled(action)"
1937
- [matTooltip]="getActionTooltip(action)"
1938
- (click)="emitToolbarAction($event, getActionId(action), action)"
1939
- [attr.aria-label]="getActionAriaLabel(action)"
1940
- >
1941
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
1942
- {{ action.label }}
1943
- </button>
1944
- } @else if (action.appearance === 'elevated') {
1945
- <button
1946
- class="action-btn"
1947
- mat-raised-button
1948
- [color]="getActionColor(action)"
1949
- [disabled]="isActionDisabled(action)"
1950
- [matTooltip]="getActionTooltip(action)"
1951
- (click)="emitToolbarAction($event, getActionId(action), action)"
1952
- [attr.aria-label]="getActionAriaLabel(action)"
1953
- >
1954
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
1955
- {{ action.label }}
1956
- </button>
1957
- } @else if (action.appearance === 'text') {
1958
- <button
1959
- class="action-btn"
1960
- mat-button
1961
- [color]="getActionColor(action)"
1962
- [disabled]="isActionDisabled(action)"
1963
- [matTooltip]="getActionTooltip(action)"
1964
- (click)="emitToolbarAction($event, getActionId(action), action)"
1965
- [attr.aria-label]="getActionAriaLabel(action)"
1966
- >
1967
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
1968
- {{ action.label }}
1969
- </button>
1970
- } @else if (action.appearance === 'tonal') {
1971
- <button
1972
- class="action-btn pfx-tonal"
1973
- mat-button
1974
- [color]="getActionColor(action)"
1975
- [disabled]="isActionDisabled(action)"
1976
- [matTooltip]="getActionTooltip(action)"
1977
- (click)="emitToolbarAction($event, getActionId(action), action)"
1978
- [attr.aria-label]="getActionAriaLabel(action)"
1979
- >
1980
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
1981
- {{ action.label }}
1982
- </button>
1983
- } @else {
1984
- <button
1985
- class="action-btn"
1986
- mat-flat-button
1987
- [color]="getActionColor(action)"
1988
- [disabled]="isActionDisabled(action)"
1989
- [matTooltip]="getActionTooltip(action)"
1990
- (click)="emitToolbarAction($event, getActionId(action), action)"
1991
- [attr.aria-label]="getActionAriaLabel(action)"
1992
- >
1993
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
1994
- {{ action.label }}
1995
- </button>
1996
- }
1997
- }
1998
-
1999
- @for (action of getNonStartActions(); track getActionId(action)) {
2000
- @if (getActionType(action) === 'icon') {
2001
- <button
2002
- class="action-btn"
2003
- [praxisIconButton]="action.icon || 'bolt'"
2004
- size="compact"
2005
- [class.praxis-toolbar-icon-action--primary]="getActionColor(action) === 'primary'"
2006
- [class.praxis-toolbar-icon-action--accent]="getActionColor(action) === 'accent'"
2007
- [class.praxis-toolbar-icon-action--warn]="getActionColor(action) === 'warn'"
2008
- [disabled]="isActionDisabled(action)"
2009
- (click)="emitToolbarAction($event, getActionId(action), action)"
2010
- [attr.aria-label]="getActionAriaLabel(action)"
2011
- [matTooltip]="getActionTooltip(action) || action.label || getActionId(action)"
2012
- matTooltipPosition="below"
2013
- ></button>
2014
- } @else if (getActionType(action) === 'fab') {
2015
- <button
2016
- class="action-btn--fab"
2017
- mat-fab
2018
- [color]="getActionColor(action)"
2019
- [disabled]="isActionDisabled(action)"
2020
- (click)="emitToolbarAction($event, getActionId(action), action)"
2021
- [attr.aria-label]="getActionAriaLabel(action)"
2022
- [matTooltip]="getActionTooltip(action) || action.label || getActionId(action)"
2023
- matTooltipPosition="below"
2024
- >
2025
- <mat-icon [praxisIcon]="action.icon || 'bolt'"></mat-icon>
2026
- </button>
2027
- } @else if (getActionType(action) === 'menu' && getVisibleActionChildren(action).length) {
2028
- <button
2029
- class="action-btn"
2030
- mat-button
2031
- [color]="getActionColor(action)"
2032
- [disabled]="isActionDisabled(action)"
2033
- [matTooltip]="getActionTooltip(action)"
2034
- [matMenuTriggerFor]="endActionMenu"
2035
- [attr.aria-label]="getActionAriaLabel(action)"
2036
- >
2037
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
2038
- {{ action.label }}
2039
- </button>
2040
- <mat-menu #endActionMenu="matMenu">
2041
- @for (child of getVisibleActionChildren(action); track getActionId(child)) {
2042
- <button
2043
- mat-menu-item
2044
- [disabled]="isActionDisabled(child)"
2045
- [matTooltip]="getActionTooltip(child)"
2046
- (click)="emitToolbarAction($event, getActionId(child), child)"
2047
- >
2048
- @if (child.icon) { <mat-icon [praxisIcon]="child.icon"></mat-icon> }
2049
- {{ child.label || getActionId(child) }}
2050
- </button>
2051
- }
2052
- </mat-menu>
2053
- } @else if (isMenuWithoutChildren(action)) {
2054
- <button
2055
- class="action-btn"
2056
- mat-button
2057
- [color]="getActionColor(action)"
2058
- [disabled]="isActionDisabled(action)"
2059
- [matTooltip]="getActionTooltip(action)"
2060
- (click)="emitToolbarAction($event, getActionId(action), action)"
2061
- [attr.aria-label]="getActionAriaLabel(action)"
2062
- >
2063
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
2064
- {{ action.label }}
2065
- </button>
2066
- } @else if (action.appearance === 'outlined') {
2067
- <button
2068
- class="action-btn"
2069
- mat-stroked-button
2070
- [color]="getActionColor(action)"
2071
- [disabled]="isActionDisabled(action)"
2072
- [matTooltip]="getActionTooltip(action)"
2073
- (click)="emitToolbarAction($event, getActionId(action), action)"
2074
- [attr.aria-label]="getActionAriaLabel(action)"
2075
- >
2076
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
2077
- {{ action.label }}
2078
- </button>
2079
- } @else if (action.appearance === 'elevated') {
2080
- <button
2081
- class="action-btn"
2082
- mat-raised-button
2083
- [color]="getActionColor(action)"
2084
- [disabled]="isActionDisabled(action)"
2085
- [matTooltip]="getActionTooltip(action)"
2086
- (click)="emitToolbarAction($event, getActionId(action), action)"
2087
- [attr.aria-label]="getActionAriaLabel(action)"
2088
- >
2089
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
2090
- {{ action.label }}
2091
- </button>
2092
- } @else if (action.appearance === 'text') {
2093
- <button
2094
- class="action-btn"
2095
- mat-button
2096
- [color]="getActionColor(action)"
2097
- [disabled]="isActionDisabled(action)"
2098
- [matTooltip]="getActionTooltip(action)"
2099
- (click)="emitToolbarAction($event, getActionId(action), action)"
2100
- [attr.aria-label]="getActionAriaLabel(action)"
2101
- >
2102
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
2103
- {{ action.label }}
2104
- </button>
2105
- } @else if (action.appearance === 'tonal') {
2106
- <button
2107
- class="action-btn pfx-tonal"
2108
- mat-button
2109
- [color]="getActionColor(action)"
2110
- [disabled]="isActionDisabled(action)"
2111
- [matTooltip]="getActionTooltip(action)"
2112
- (click)="emitToolbarAction($event, getActionId(action), action)"
2113
- [attr.aria-label]="getActionAriaLabel(action)"
2114
- >
2115
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
2116
- {{ action.label }}
2117
- </button>
2118
- } @else {
2119
- <button
2120
- class="action-btn"
2121
- mat-flat-button
2122
- [color]="getActionColor(action)"
2123
- [disabled]="isActionDisabled(action)"
2124
- [matTooltip]="getActionTooltip(action)"
2125
- (click)="emitToolbarAction($event, getActionId(action), action)"
2126
- [attr.aria-label]="getActionAriaLabel(action)"
2127
- >
2128
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
2129
- {{ action.label }}
2130
- </button>
2131
- }
2132
- }
2133
-
2134
- @if (shouldRenderToolbarBulkActions()) {
2135
- @for (action of getBulkToolbarActions(); track getActionId(action)) {
2136
- <button
2137
- class="action-btn"
2138
- mat-button
2139
- [color]="getActionColor(action)"
2140
- [disabled]="isActionDisabled(action)"
2141
- [matTooltip]="getActionTooltip(action)"
2142
- (click)="emitToolbarAction($event, getActionId(action), action)"
2143
- [attr.aria-label]="getActionAriaLabel(action)"
2144
- >
2145
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
2146
- {{ action.label }}
2147
- </button>
2148
- }
2149
- }
2150
- </div>
2151
-
2152
- <div class="utility-actions">
2153
- @if (config?.export?.enabled) {
2154
- <button
2155
- class="action-btn action-btn--utility"
2156
- mat-button
2157
- [matMenuTriggerFor]="exportMenu"
2158
- [attr.aria-label]="getExportDataLabel()"
2159
- [attr.aria-busy]="exportBusy"
2160
- [disabled]="exportBusy"
2161
- [matTooltip]="getExportDataLabel()"
2162
- matTooltipPosition="below"
2163
- >
2164
- <mat-icon
2165
- [class.praxis-table-export-progress-icon]="exportBusy"
2166
- [praxisIcon]="exportBusy ? 'progress_activity' : 'download'"
2167
- ></mat-icon>
2168
- </button>
2169
- @if (exportBusy && exportStatusMessage) {
2170
- <span class="praxis-table-export-status" role="status" aria-live="polite">
2171
- {{ exportStatusMessage }}
2172
- </span>
2173
- }
2174
- <mat-menu #exportMenu="matMenu">
2175
- @for (format of config?.export?.formats; track format) {
2176
- <button
2177
- mat-menu-item
2178
- class="praxis-table-export-menu-item"
2179
- [disabled]="exportBusy"
2180
- [matTooltip]="getExportFormatTooltip(format)"
2181
- [attr.aria-label]="getExportFormatAriaLabel(format)"
2182
- (click)="emitExportAction($event, format)"
2183
- >
2184
- <mat-icon [praxisIcon]="getExportIcon(format)"></mat-icon>
2185
- {{ getExportFormatLabel(format) }}
2186
- </button>
2187
- @if (isVisibleExcelExportEnabled(format)) {
2188
- <button
2189
- mat-menu-item
2190
- class="praxis-table-export-menu-item"
2191
- [disabled]="exportBusy"
2192
- [matTooltip]="getVisibleExcelExportDescription()"
2193
- [attr.aria-label]="getVisibleExcelExportAriaLabel()"
2194
- (click)="emitVisibleExcelExportAction($event)"
2195
- >
2196
- <mat-icon [praxisIcon]="'table_view'"></mat-icon>
2197
- {{ getVisibleExcelExportLabel() }}
2198
- </button>
2199
- }
2200
- }
2201
- </mat-menu>
2202
- }
2203
-
2204
- @if (isColumnsVisibilityEnabled()) {
2205
- <button
2206
- class="action-btn action-btn--utility praxis-table-toolbar-action--columns"
2207
- mat-button
2208
- [matMenuTriggerFor]="columnsMenu"
2209
- [attr.aria-label]="getColumnsVisibilityLabel()"
2210
- [matTooltip]="getColumnsVisibilityLabel()"
2211
- matTooltipPosition="below"
2212
- >
2213
- <mat-icon [praxisIcon]="getColumnsVisibilityIcon()"></mat-icon>
2214
- </button>
2215
- <mat-menu #columnsMenu="matMenu" class="praxis-table-columns-menu">
2216
- @for (column of config?.columns; track column.field) {
2217
- <button
2218
- mat-menu-item
2219
- type="button"
2220
- class="praxis-table-column-menu-item"
2221
- role="menuitemcheckbox"
2222
- [attr.aria-checked]="column.visible !== false"
2223
- [disabled]="isColumnVisibilityToggleDisabled(column)"
2224
- (keydown.enter)="onColumnVisibilityMenuToggle($event, column.field, column.visible !== false)"
2225
- (keydown.space)="onColumnVisibilityMenuToggle($event, column.field, column.visible !== false)"
2226
- >
2227
- <span
2228
- class="praxis-table-column-menu-content"
2229
- (mousedown)="onColumnVisibilityMenuToggle($event, column.field, column.visible !== false)"
2230
- (click)="$event.preventDefault(); $event.stopPropagation()"
2231
- >
2232
- <mat-icon
2233
- class="praxis-table-column-menu-check"
2234
- [praxisIcon]="column.visible !== false ? 'check_box' : 'check_box_outline_blank'"
2235
- aria-hidden="true"
2236
- ></mat-icon>
2237
- <span>{{ column.header || column.field }}</span>
2238
- </span>
2239
- </button>
2240
- }
2241
- </mat-menu>
2242
- }
2243
- @if (isDensityToggleEnabled()) {
2244
- <button
2245
- class="action-btn action-btn--utility praxis-table-toolbar-action--density"
2246
- mat-button
2247
- [matMenuTriggerFor]="densityMenu"
2248
- [attr.aria-label]="getDensityToggleLabel()"
2249
- [matTooltip]="getDensityToggleLabel()"
2250
- matTooltipPosition="below"
2251
- >
2252
- <mat-icon [praxisIcon]="'density_medium'"></mat-icon>
2253
- </button>
2254
- <mat-menu #densityMenu="matMenu" class="praxis-table-density-menu">
2255
- @for (density of getDensityOptions(); track density) {
2256
- <button
2257
- mat-menu-item
2258
- type="button"
2259
- [attr.aria-current]="isDensityActive(density) ? 'true' : null"
2260
- (click)="emitDensityChange($event, density)"
2261
- >
2262
- <mat-icon [praxisIcon]="isDensityActive(density) ? 'check' : getDensityIcon(density)"></mat-icon>
2263
- {{ getDensityLabel(density) }}
2264
- </button>
2265
- }
2266
- </mat-menu>
2267
- }
2268
- </div>
2269
- </div>
2270
- }
2271
- @if (showEndActions) {
2272
- <div class="end-actions" role="group" [attr.aria-label]="getToolbarConfigurationLabel()">
2273
- <ng-content select="[end-actions]"></ng-content>
2274
- </div>
2275
- }
2276
-
2277
- @if (showMobileActions) {
2278
- <div class="mobile-actions" role="group" [attr.aria-label]="getToolbarActionsLabel()">
2279
- @if (hasCompactCommands()) {
2280
- <button
2281
- #overflowMenuTrigger="matMenuTrigger"
2282
- praxisIconButton="more_vert"
2283
- size="compact"
2284
- class="overflow-trigger"
2285
- [matMenuTriggerFor]="compactCommandsMenu"
2286
- (click)="setActiveOverflowMenuTrigger(overflowMenuTrigger, $event.currentTarget)"
2287
- (menuOpened)="setActiveOverflowMenuTrigger(overflowMenuTrigger)"
2288
- [attr.data-praxis-focus-key]="getFocusOriginKey('overflow')"
2289
- [attr.aria-label]="getMoreActionsLabel()"
2290
- [matTooltip]="getMoreActionsLabel()"
2291
- matTooltipPosition="below"
2292
- ></button>
2293
- <mat-menu #compactCommandsMenu="matMenu">
2294
- @for (action of getOverflowActions(); track getActionId(action)) {
2295
- <button
2296
- mat-menu-item
2297
- [disabled]="isActionDisabled(action)"
2298
- [matTooltip]="getActionTooltip(action)"
2299
- (click)="emitOverflowToolbarAction($event, getActionId(action), action)"
2300
- >
2301
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
2302
- {{ action.label }}
2303
- </button>
2304
- }
2305
- @if (config?.export?.enabled) {
2306
- <button
2307
- mat-menu-item
2308
- [matMenuTriggerFor]="mobileExportMenu"
2309
- [disabled]="exportBusy"
2310
- class="praxis-table-compact-command--export"
2311
- >
2312
- <mat-icon
2313
- [class.praxis-table-export-progress-icon]="exportBusy"
2314
- [praxisIcon]="exportBusy ? 'progress_activity' : 'download'"
2315
- ></mat-icon>
2316
- {{ getExportDataLabel() }}
2317
- </button>
2318
- }
2319
- @if (isColumnsVisibilityEnabled()) {
2320
- <button
2321
- mat-menu-item
2322
- [matMenuTriggerFor]="mobileColumnsMenu"
2323
- class="praxis-table-compact-command--columns"
2324
- >
2325
- <mat-icon [praxisIcon]="getColumnsVisibilityIcon()"></mat-icon>
2326
- {{ getColumnsVisibilityLabel() }}
2327
- </button>
2328
- }
2329
- @if (isDensityToggleEnabled()) {
2330
- <button
2331
- mat-menu-item
2332
- [matMenuTriggerFor]="mobileDensityMenu"
2333
- class="praxis-table-toolbar-action--density"
2334
- >
2335
- <mat-icon [praxisIcon]="'density_medium'"></mat-icon>
2336
- {{ getDensityToggleLabel() }}
2337
- </button>
2338
- }
2339
- </mat-menu>
2340
-
2341
- <mat-menu #mobileExportMenu="matMenu">
2342
- @if (config?.export?.enabled) {
2343
- @for (format of config?.export?.formats; track format) {
2344
- <button
2345
- mat-menu-item
2346
- class="praxis-table-export-menu-item"
2347
- [disabled]="exportBusy"
2348
- [matTooltip]="getExportFormatTooltip(format)"
2349
- [attr.aria-label]="getExportFormatAriaLabel(format)"
2350
- (click)="emitExportAction($event, format)"
2351
- >
2352
- <mat-icon [praxisIcon]="getExportIcon(format)"></mat-icon>
2353
- {{ getExportFormatLabel(format) }}
2354
- </button>
2355
- @if (isVisibleExcelExportEnabled(format)) {
2356
- <button
2357
- mat-menu-item
2358
- class="praxis-table-export-menu-item"
2359
- [disabled]="exportBusy"
2360
- [matTooltip]="getVisibleExcelExportDescription()"
2361
- [attr.aria-label]="getVisibleExcelExportAriaLabel()"
2362
- (click)="emitVisibleExcelExportAction($event)"
2363
- >
2364
- <mat-icon [praxisIcon]="'table_view'"></mat-icon>
2365
- {{ getVisibleExcelExportLabel() }}
2366
- </button>
2367
- }
2368
- }
2369
- }
2370
- </mat-menu>
2371
-
2372
- <mat-menu #mobileColumnsMenu="matMenu" class="praxis-table-columns-menu">
2373
- @if (isColumnsVisibilityEnabled()) {
2374
- @for (column of config?.columns; track column.field) {
2375
- <button
2376
- mat-menu-item
2377
- type="button"
2378
- class="praxis-table-column-menu-item"
2379
- role="menuitemcheckbox"
2380
- [attr.aria-checked]="column.visible !== false"
2381
- [disabled]="isColumnVisibilityToggleDisabled(column)"
2382
- (keydown.enter)="onColumnVisibilityMenuToggle($event, column.field, column.visible !== false)"
2383
- (keydown.space)="onColumnVisibilityMenuToggle($event, column.field, column.visible !== false)"
2384
- >
2385
- <span
2386
- class="praxis-table-column-menu-content"
2387
- (mousedown)="onColumnVisibilityMenuToggle($event, column.field, column.visible !== false)"
2388
- (click)="$event.preventDefault(); $event.stopPropagation()"
2389
- >
2390
- <mat-icon
2391
- class="praxis-table-column-menu-check"
2392
- [praxisIcon]="column.visible !== false ? 'check_box' : 'check_box_outline_blank'"
2393
- aria-hidden="true"
2394
- ></mat-icon>
2395
- <span>{{ column.header || column.field }}</span>
2396
- </span>
2397
- </button>
2398
- }
2399
- }
2400
- </mat-menu>
2401
-
2402
- <mat-menu #mobileDensityMenu="matMenu" class="praxis-table-density-menu">
2403
- @if (isDensityToggleEnabled()) {
2404
- @for (density of getDensityOptions(); track density) {
2405
- <button
2406
- mat-menu-item
2407
- type="button"
2408
- [attr.aria-current]="isDensityActive(density) ? 'true' : null"
2409
- (click)="emitDensityChange($event, density)"
2410
- >
2411
- <mat-icon [praxisIcon]="isDensityActive(density) ? 'check' : getDensityIcon(density)"></mat-icon>
2412
- {{ getDensityLabel(density) }}
2413
- </button>
2414
- }
2415
- }
2416
- </mat-menu>
2417
- }
2418
- </div>
2419
- }
2420
- </div>
2421
- </mat-toolbar>
2422
- `, isInline: true, styles: [":host{display:block;container-name:praxis-table-toolbar;container-type:inline-size}.praxis-toolbar{--p-table-toolbar-bg-default: linear-gradient( 180deg, color-mix(in srgb, var(--md-sys-color-surface, #fff) 96%, transparent), color-mix(in srgb, var(--md-sys-color-surface-container-low, #f6f8fc) 100%, transparent) );--p-table-toolbar-fg-default: var(--md-sys-color-on-surface, currentColor);--p-table-toolbar-border-color-default: color-mix(in srgb, var(--md-sys-color-outline-variant, #d7dbe5) 78%, transparent);--p-table-toolbar-divider-color-default: color-mix(in srgb, var(--md-sys-color-outline) 42%, transparent);--p-table-toolbar-action-hover-bg-default: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent);--p-table-toolbar-action-active-bg-default: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);--p-table-toolbar-action-focus-ring-default: color-mix(in srgb, var(--md-sys-color-primary) 52%, transparent);--p-table-toolbar-ai-accent-color-default: var(--md-sys-color-primary, #0b72d9);--p-table-toolbar-status-fg-default: var(--md-sys-color-on-surface-variant, currentColor);background:var(--p-table-toolbar-bg, var(--p-table-toolbar-bg-default));color:var(--p-table-toolbar-fg, var(--p-table-toolbar-fg-default));box-shadow:var(--p-table-toolbar-shadow, none);padding:var( --p-table-toolbar-layout-padding, var(--p-table-toolbar-padding-block, var(--pfx-toolbar-pad-y, 6px)) var(--p-table-toolbar-padding-inline, var(--pfx-toolbar-pad-x, 12px)) );min-height:var(--p-table-toolbar-min-height, var(--pfx-filter-h, 44px));display:grid;grid-template-areas:\"actions actions actions\";grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:max(var(--p-table-toolbar-gap, 8px),12px);row-gap:var(--p-table-toolbar-identity-filter-gap, 8px);border:var(--p-table-toolbar-border-width, 1px) solid var(--p-table-toolbar-border-color, var(--p-table-toolbar-border-color-default));border-radius:var(--p-table-toolbar-radius, 10px)}.praxis-toolbar.p-table-toolbar--flat{--p-table-toolbar-border-width: 0;--p-table-toolbar-shadow: none}.praxis-toolbar.p-table-toolbar--elevated{--p-table-toolbar-shadow: 0 12px 28px color-mix(in srgb, var(--md-sys-color-shadow, #000) 12%, transparent)}.praxis-toolbar.p-table-toolbar--integrated{--p-table-toolbar-bg: transparent;--p-table-toolbar-border-width: 0;--p-table-toolbar-radius: 0}.praxis-toolbar.p-table-toolbar--layout-separator{border-block-end-width:1px;border-block-end-style:solid;border-block-end-color:var( --p-table-toolbar-divider-color, var(--p-table-toolbar-divider-color-default) )}.praxis-toolbar.p-table-toolbar--compact{--p-table-toolbar-min-height: 36px;--p-table-toolbar-padding-block: 4px;--p-table-toolbar-padding-inline: 10px;--p-table-toolbar-gap: 4px;--p-table-toolbar-actions-gap: 4px;--p-table-toolbar-action-size: 36px;--p-table-toolbar-action-radius: 7px}.praxis-toolbar.p-table-toolbar--comfortable{--p-table-toolbar-min-height: 44px;--p-table-toolbar-action-size: 40px}.praxis-toolbar.p-table-toolbar--spacious{--p-table-toolbar-min-height: 52px;--p-table-toolbar-padding-block: 8px;--p-table-toolbar-padding-inline: 16px;--p-table-toolbar-gap: 8px;--p-table-toolbar-actions-gap: 8px;--p-table-toolbar-action-size: 44px}.praxis-toolbar.p-table-toolbar--square{--p-table-toolbar-radius: 0;--p-table-toolbar-action-radius: 4px}.praxis-toolbar.p-table-toolbar--pill{--p-table-toolbar-radius: 999px;--p-table-toolbar-action-radius: 999px}:host(.praxis-toolbar-stack-top) .praxis-toolbar{border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.praxis-toolbar-footer) .praxis-toolbar{border-top-left-radius:0;border-top-right-radius:0}:host(.praxis-toolbar-footer.footer-flat) .praxis-toolbar{border-bottom-left-radius:0;border-bottom-right-radius:0}.praxis-toolbar.mat-toolbar-single-row,.praxis-toolbar .mat-toolbar-row{height:auto}.praxis-toolbar.mat-toolbar-multiple-rows{min-height:var(--p-table-toolbar-min-height, var(--pfx-filter-h, 44px))}.praxis-toolbar.praxis-toolbar--has-query{grid-template-areas:\"scope scope scope\" \"query query actions\"}.praxis-toolbar.praxis-toolbar--has-identity{grid-template-areas:\"identity scope scope\" \"query query actions\"}.toolbar-query{grid-area:query;display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:start;min-width:0;column-gap:var(--p-table-toolbar-gap, 8px);row-gap:var(--p-table-toolbar-identity-filter-gap, 8px)}.toolbar-query>*{min-width:0}.toolbar-query>:is(praxis-filter,[advancedFilter]){grid-column:1}.toolbar-query>[toolbar]{grid-column:2}.toolbar-identity{grid-area:identity;display:flex;align-items:center;gap:var(--p-table-toolbar-identity-gap, 8px);min-width:0;max-width:100%;min-height:var(--p-table-toolbar-identity-min-height, 30px);margin-block-end:var(--p-table-toolbar-identity-margin-bottom, 0);padding-inline:2px;color:var(--p-table-toolbar-title-fg, var(--p-table-toolbar-fg, var(--p-table-toolbar-fg-default)))}.toolbar-identity--center{text-align:center;justify-content:center}.toolbar-identity--end{text-align:end;justify-content:flex-end}.toolbar-identity--center .toolbar-identity__copy{align-items:center}.toolbar-identity--end .toolbar-identity__copy{align-items:flex-end}.toolbar-identity__icon{width:var(--p-table-toolbar-identity-icon-size, 28px);height:var(--p-table-toolbar-identity-icon-size, 28px);border-radius:var(--p-table-toolbar-identity-icon-radius, 8px);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--p-table-toolbar-icon-fg, var(--md-sys-color-primary, currentColor));background:color-mix(in srgb,var(--p-table-toolbar-icon-fg, var(--md-sys-color-primary, currentColor)) 8%,transparent);border:1px solid color-mix(in srgb,var(--p-table-toolbar-icon-fg, var(--md-sys-color-primary, currentColor)) 18%,transparent)}.toolbar-identity__icon .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.toolbar-identity__copy{display:flex;flex-direction:column;min-width:0;max-width:100%;gap:1px}.toolbar-identity__title,.toolbar-identity__subtitle{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toolbar-identity__title{font-size:var(--p-table-toolbar-title-font-size, 14px);font-weight:var(--p-table-toolbar-title-font-weight, 700);line-height:1.2;letter-spacing:0;color:var(--p-table-toolbar-title-fg, currentColor)}.toolbar-identity__subtitle{font-size:var(--p-table-toolbar-subtitle-font-size, 11.5px);line-height:1.25;color:var(--p-table-toolbar-subtitle-fg, var(--p-table-toolbar-status-fg, var(--p-table-toolbar-status-fg-default)))}.toolbar-actions{grid-area:actions;display:flex;align-items:center;align-self:start;justify-self:end;justify-content:flex-end;gap:var(--p-table-toolbar-gap, 6px);min-height:var(--p-table-toolbar-min-height, var(--pfx-filter-h, 44px));min-width:0}.praxis-toolbar.p-table-toolbar--align-start .toolbar-identity,.praxis-toolbar.p-table-toolbar--align-start .toolbar-actions{justify-self:start}.praxis-toolbar.p-table-toolbar--align-center .toolbar-identity,.praxis-toolbar.p-table-toolbar--align-center .toolbar-actions{justify-self:center}.praxis-toolbar.p-table-toolbar--align-end .toolbar-identity,.praxis-toolbar.p-table-toolbar--align-end .toolbar-actions{justify-self:end}.actions-group{display:flex;align-items:center;gap:var(--p-table-toolbar-actions-gap, 8px)}.business-actions,.utility-actions{display:flex;align-items:center;gap:var(--p-table-toolbar-actions-gap, 8px);min-width:0}.business-actions:empty,.utility-actions:empty{display:none}.action-btn:not(.praxis-icon-button){height:var(--p-table-toolbar-action-size, 40px);min-width:var(--p-table-toolbar-action-size, 40px);border-radius:var(--p-table-toolbar-action-radius, 8px);font-size:.875rem;font-weight:500;line-height:1.2;color:var(--p-table-toolbar-action-fg, inherit);background:var(--p-table-toolbar-action-bg, transparent)}.action-btn:not(.praxis-icon-button):hover:not(:disabled){background:var(--p-table-toolbar-action-hover-bg, var(--p-table-toolbar-action-hover-bg-default))}.action-btn:not(.praxis-icon-button):focus-visible{outline:2px solid var(--p-table-toolbar-action-focus-ring, var(--p-table-toolbar-action-focus-ring-default));outline-offset:2px}.action-btn--utility{color:var(--p-table-toolbar-status-fg, var(--p-table-toolbar-status-fg-default))}.praxis-table-toolbar-action--columns.action-btn:not(.praxis-icon-button){width:var(--p-table-toolbar-action-size, 40px);padding:0}.praxis-table-toolbar-action--columns mat-icon{margin:0}.toolbar-icon-btn{width:var(--p-table-toolbar-action-size, 40px);height:var(--p-table-toolbar-action-size, 40px);border-radius:var(--p-table-toolbar-action-radius, 8px);color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary) 9%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 22%,transparent)}.toolbar-icon-btn:hover:not(:disabled){color:var(--md-sys-color-on-primary-container);background:color-mix(in srgb,var(--md-sys-color-primary) 16%,transparent);border-color:color-mix(in srgb,var(--md-sys-color-primary) 36%,transparent)}.action-btn--fab{width:42px;height:42px;box-shadow:none}.pfx-tonal{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.pfx-tonal:hover{background:var(--md-sys-color-secondary-container)}.mobile-actions{display:none;align-items:center;gap:var(--p-table-toolbar-actions-gap, 8px)}.overflow-trigger{height:var(--p-table-toolbar-action-size, 40px)}.action-btn .mat-icon,.action-btn--fab .mat-icon,.overflow-trigger .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.praxis-table-export-status{max-width:13rem;overflow:hidden;color:var(--p-table-toolbar-status-fg, currentColor);font-size:.75rem;font-weight:600;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.praxis-table-export-progress-icon{animation:praxis-table-export-spin .9s linear infinite}@keyframes praxis-table-export-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.praxis-table-export-progress-icon{animation:none}}.praxis-table-toolbar-action--columns .mat-icon{font-size:24px;width:24px;height:24px;line-height:24px}.praxis-table-column-menu-item.mat-mdc-menu-item{min-height:40px}.praxis-table-export-menu-item.mat-mdc-menu-item{min-width:280px;white-space:nowrap}.praxis-table-column-menu-content{align-items:center;display:flex;gap:10px;min-height:40px;width:100%}.praxis-table-column-menu-check.mat-icon{color:var(--md-sys-color-primary, currentColor);flex:0 0 20px;font-size:20px;height:20px;line-height:20px;margin-inline-end:0;width:20px}.praxis-table-quick-filters{grid-area:scope;align-items:center;display:flex;flex-wrap:nowrap;gap:6px;min-height:var(--p-table-toolbar-min-height, 44px)}.praxis-table-quick-filter.mat-mdc-outlined-button{min-height:40px;padding-inline:14px;white-space:nowrap}.praxis-table-quick-filter--active.mat-mdc-outlined-button{background:color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent);border-color:var(--md-sys-color-primary);color:var(--md-sys-color-primary)}.action-btn.mat-mdc-button-base,.action-btn--fab.mat-mdc-button-base,.overflow-trigger.mat-mdc-button-base,.toolbar-icon-btn.mat-mdc-button-base{--mdc-text-button-container-height: var(--p-table-toolbar-action-size, 36px);--mdc-filled-button-container-height: var(--p-table-toolbar-action-size, 36px);--mdc-protected-button-container-height: var(--p-table-toolbar-action-size, 36px);--mdc-outlined-button-container-height: var(--p-table-toolbar-action-size, 36px)}.action-btn.mat-mdc-unelevated-button:not(:disabled),.action-btn.mat-mdc-outlined-button:not(:disabled),.action-btn.pfx-tonal:not(:disabled){border-color:color-mix(in srgb,var(--md-sys-color-outline-variant, #d7dbe5) 82%,transparent)}.action-btn.mat-mdc-unelevated-button:not(:disabled){box-shadow:none}.action-btn.mat-mdc-unelevated-button.mat-primary:not(:disabled){--mdc-filled-button-container-color: var(--md-sys-color-primary);--mdc-filled-button-label-text-color: var(--md-sys-color-on-primary);--mat-filled-button-state-layer-color: var(--md-sys-color-on-primary);background:var(--md-sys-color-primary)!important;border-color:transparent;color:var(--md-sys-color-on-primary)!important;box-shadow:0 8px 18px color-mix(in srgb,var(--md-sys-color-primary) 22%,transparent)}.action-btn.mat-mdc-unelevated-button.mat-primary:not(:disabled):hover{background:color-mix(in srgb,var(--md-sys-color-primary) 88%,var(--md-sys-color-on-primary) 12%)!important}.action-btn.mat-mdc-unelevated-button.mat-primary:not(:disabled) .mat-icon{color:var(--md-sys-color-on-primary)!important}.action-btn.mat-mdc-button-base{padding-inline:12px}.end-actions{display:flex;align-items:center;gap:var(--p-table-toolbar-actions-gap, 8px);margin-inline-start:4px;padding-inline-start:12px;border-inline-start:1px solid var(--p-table-toolbar-divider-color, var(--p-table-toolbar-divider-color-default))}.end-actions:empty{display:none;gap:0;margin-inline-start:0;padding-inline-start:0;border-inline-start:0}.praxis-toolbar-icon-action--primary{color:var(--md-sys-color-primary)}.praxis-toolbar-icon-action--accent{color:var(--md-sys-color-tertiary)}.praxis-toolbar-icon-action--warn{color:var(--md-sys-color-error)}.praxis-toolbar.p-table-toolbar--divider-between-groups .actions-group--has-business .utility-actions:not(:empty){margin-inline-start:4px;padding-inline-start:12px;border-inline-start:1px solid var(--p-table-toolbar-divider-color, var(--p-table-toolbar-divider-color-default))}.praxis-toolbar.p-table-toolbar--divider-start:not(.praxis-toolbar--has-identity) .toolbar-query{padding-inline-end:12px;border-inline-end:1px solid var(--p-table-toolbar-divider-color, var(--p-table-toolbar-divider-color-default))}.end-actions ::ng-deep .praxis-table-toolbar-action--ai,.end-actions ::ng-deep .praxis-table-ai-trigger{color:var(--p-table-toolbar-ai-accent-color, var(--p-table-toolbar-ai-accent-color-default));background:color-mix(in srgb,var(--p-table-toolbar-ai-accent-color, var(--p-table-toolbar-ai-accent-color-default)) 10%,transparent);border:1px solid color-mix(in srgb,var(--p-table-toolbar-ai-accent-color, var(--p-table-toolbar-ai-accent-color-default)) 24%,transparent)}.end-actions ::ng-deep [data-role=table-settings]{color:var(--p-table-toolbar-status-fg, var(--p-table-toolbar-status-fg-default))}@container praxis-table-toolbar (max-width: 960px){.actions-group{display:none}.mobile-actions{display:flex}.toolbar-actions{justify-content:flex-end}}@container praxis-table-toolbar (max-width: 720px){.praxis-toolbar.praxis-toolbar--has-query{grid-template-areas:\"scope scope scope\" \"query query query\" \"actions actions actions\"}.praxis-toolbar.praxis-toolbar--has-identity{grid-template-areas:\"identity identity identity\" \"scope scope scope\" \"query query query\" \"actions actions actions\"}.toolbar-query{grid-template-columns:minmax(0,1fr)}.toolbar-query>:is(praxis-filter,[advancedFilter]),.toolbar-query>[toolbar]{grid-column:1}.praxis-table-quick-filters{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}}@container praxis-table-toolbar (max-width: 540px){.praxis-toolbar.praxis-toolbar--has-identity{grid-template-areas:\"identity identity identity\" \"scope scope scope\" \"query query query\" \"actions actions actions\"}.toolbar-actions{justify-self:stretch;justify-content:flex-end}.toolbar-actions,.toolbar-query{--p-table-toolbar-action-size: 44px}.toolbar-identity__subtitle{display:none}.praxis-table-quick-filter.mat-mdc-outlined-button{min-height:44px}}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
2423
- }
2424
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisTableToolbar, decorators: [{
2425
- type: Component,
2426
- args: [{ selector: 'praxis-table-toolbar', standalone: true, imports: [
2427
- MatToolbarModule,
2428
- MatButtonModule,
2429
- MatIconModule,
2430
- PraxisIconDirective,
2431
- PraxisIconButtonComponent,
2432
- MatMenuModule,
2433
- MatTooltipModule
2434
- ], template: `
2435
- <mat-toolbar
2436
- class="praxis-toolbar"
2437
- role="group"
2438
- [attr.aria-label]="getToolbarAriaLabel()"
2439
- [class.praxis-toolbar--has-identity]="showMain && hasToolbarIdentity()"
2440
- [class.praxis-toolbar--has-query]="showMain"
2441
- [class.p-table-toolbar--flat]="getToolbarVariant() === 'flat'"
2442
- [class.p-table-toolbar--outlined]="getToolbarVariant() === 'outlined'"
2443
- [class.p-table-toolbar--elevated]="getToolbarVariant() === 'elevated'"
2444
- [class.p-table-toolbar--integrated]="getToolbarVariant() === 'integrated'"
2445
- [class.p-table-toolbar--compact]="getToolbarDensity() === 'compact'"
2446
- [class.p-table-toolbar--comfortable]="getToolbarDensity() === 'comfortable'"
2447
- [class.p-table-toolbar--spacious]="getToolbarDensity() === 'spacious'"
2448
- [class.p-table-toolbar--square]="getToolbarShape() === 'square'"
2449
- [class.p-table-toolbar--rounded]="getToolbarShape() === 'rounded'"
2450
- [class.p-table-toolbar--pill]="getToolbarShape() === 'pill'"
2451
- [class.p-table-toolbar--divider-start]="getToolbarDivider() === 'start'"
2452
- [class.p-table-toolbar--divider-between-groups]="getToolbarDivider() === 'between-groups'"
2453
- [class.p-table-toolbar--align-start]="getToolbarLayoutAlignment() === 'start'"
2454
- [class.p-table-toolbar--align-center]="getToolbarLayoutAlignment() === 'center'"
2455
- [class.p-table-toolbar--align-end]="getToolbarLayoutAlignment() === 'end'"
2456
- [class.p-table-toolbar--layout-separator]="shouldShowLayoutSeparator()"
2457
- [style.--p-table-toolbar-bg]="getToolbarToken('bg')"
2458
- [style.--p-table-toolbar-fg]="getToolbarToken('fg')"
2459
- [style.--p-table-toolbar-border-color]="getToolbarToken('borderColor')"
2460
- [style.--p-table-toolbar-border-width]="getToolbarToken('borderWidth')"
2461
- [style.--p-table-toolbar-radius]="getToolbarToken('radius')"
2462
- [style.--p-table-toolbar-shadow]="getToolbarToken('shadow')"
2463
- [style.--p-table-toolbar-padding-block]="getToolbarToken('paddingBlock')"
2464
- [style.--p-table-toolbar-padding-inline]="getToolbarToken('paddingInline')"
2465
- [style.--p-table-toolbar-min-height]="getToolbarToken('minHeight')"
2466
- [style.--p-table-toolbar-gap]="getToolbarToken('gap')"
2467
- [style.--p-table-toolbar-actions-gap]="getToolbarToken('actionsGap')"
2468
- [style.--p-table-toolbar-divider-color]="getToolbarToken('dividerColor')"
2469
- [style.--p-table-toolbar-action-size]="getToolbarToken('actionSize')"
2470
- [style.--p-table-toolbar-action-radius]="getToolbarToken('actionRadius')"
2471
- [style.--p-table-toolbar-action-bg]="getToolbarToken('actionBg')"
2472
- [style.--p-table-toolbar-action-fg]="getToolbarToken('actionFg')"
2473
- [style.--p-table-toolbar-action-hover-bg]="getToolbarToken('actionHoverBg')"
2474
- [style.--p-table-toolbar-action-active-bg]="getToolbarToken('actionActiveBg')"
2475
- [style.--p-table-toolbar-action-focus-ring]="getToolbarToken('actionFocusRing')"
2476
- [style.--p-table-toolbar-ai-accent-color]="getToolbarToken('aiAccentColor')"
2477
- [style.--p-table-toolbar-status-fg]="getToolbarToken('statusFg')"
2478
- [style.--p-table-toolbar-title-fg]="getToolbarToken('titleFg')"
2479
- [style.--p-table-toolbar-subtitle-fg]="getToolbarToken('subtitleFg')"
2480
- [style.--p-table-toolbar-icon-fg]="getToolbarToken('iconFg')"
2481
- [style.--p-table-toolbar-title-font-size]="getToolbarToken('titleFontSize')"
2482
- [style.--p-table-toolbar-subtitle-font-size]="getToolbarToken('subtitleFontSize')"
2483
- [style.--p-table-toolbar-title-font-weight]="getToolbarToken('titleFontWeight')"
2484
- [style.--p-table-toolbar-identity-gap]="getToolbarToken('identityGap')"
2485
- [style.--p-table-toolbar-identity-filter-gap]="getToolbarToken('identityFilterGap')"
2486
- [style.--p-table-toolbar-identity-min-height]="getToolbarToken('identityMinHeight')"
2487
- [style.--p-table-toolbar-identity-margin-bottom]="getToolbarToken('identityMarginBottom')"
2488
- [style.--p-table-toolbar-identity-icon-size]="getToolbarToken('identityIconSize')"
2489
- [style.--p-table-toolbar-identity-icon-radius]="getToolbarToken('identityIconRadius')"
2490
- [style.--p-table-toolbar-layout-padding]="getToolbarLayoutPadding()"
2491
- >
2492
- @if (showMain && hasToolbarIdentity()) {
2493
- <div
2494
- class="toolbar-identity"
2495
- role="group"
2496
- data-toolbar-region="identity"
2497
- [attr.aria-label]="getToolbarIdentityLabel()"
2498
- [matTooltip]="getToolbarIdentityTooltip()"
2499
- matTooltipPosition="below"
2500
- [matTooltipShowDelay]="450"
2501
- [class.toolbar-identity--center]="getToolbarTextAlign() === 'center'"
2502
- [class.toolbar-identity--end]="getToolbarTextAlign() === 'end'"
2503
- >
2504
- @if (getToolbarIcon()) {
2505
- <span class="toolbar-identity__icon" aria-hidden="true">
2506
- <mat-icon [praxisIcon]="getToolbarIcon()!"></mat-icon>
2507
- </span>
2508
- }
2509
- <span class="toolbar-identity__copy">
2510
- @if (getToolbarTitle()) {
2511
- <span class="toolbar-identity__title">{{ getToolbarTitle() }}</span>
2512
- }
2513
- @if (getToolbarSubtitle()) {
2514
- <span class="toolbar-identity__subtitle">{{ getToolbarSubtitle() }}</span>
2515
- }
2516
- </span>
2517
- </div>
1882
+ @if (!showMain || hasToolbarIdentity()) {
1883
+ <ng-container [ngTemplateOutlet]="toolbarCommands"></ng-container>
2518
1884
  }
2519
1885
 
2520
1886
  @if (showMain) {
@@ -2530,7 +1896,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
2530
1896
  type="button"
2531
1897
  mat-stroked-button
2532
1898
  class="praxis-table-quick-filter"
2533
- [class.praxis-table-quick-filter--active]="isQuickFilterActive(quickFilter.id)"
1899
+ [class.praxis-table-quick-filter--active]="
1900
+ isQuickFilterActive(quickFilter.id)
1901
+ "
2534
1902
  [attr.aria-pressed]="isQuickFilterActive(quickFilter.id)"
2535
1903
  (click)="emitQuickFilterChange($event, quickFilter)"
2536
1904
  >
@@ -2549,581 +1917,1816 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
2549
1917
  [attr.aria-label]="getToolbarLeadingLabel()"
2550
1918
  >
2551
1919
  <ng-content select="[advancedFilter]"></ng-content>
2552
- <ng-content select="[toolbar]"></ng-content>
1920
+ <div class="toolbar-shortcuts" data-toolbar-region="query-shortcuts">
1921
+ <ng-content select="[toolbar]"></ng-content>
1922
+ </div>
2553
1923
  </div>
2554
1924
  }
2555
1925
 
2556
- <div class="toolbar-actions" data-toolbar-region="commands">
2557
- @if (showActionsGroup) {
2558
- <div
2559
- class="actions-group"
2560
- role="group"
2561
- [class.actions-group--has-business]="hasBusinessActions()"
2562
- [attr.aria-label]="getToolbarActionsLabel()"
2563
- >
2564
- <div class="business-actions">
2565
- @for (action of getStartActions(); track getActionId(action)) {
2566
- @if (getActionType(action) === 'icon') {
2567
- <button
2568
- class="action-btn"
2569
- [praxisIconButton]="action.icon || 'bolt'"
2570
- size="compact"
2571
- [class.praxis-toolbar-icon-action--primary]="getActionColor(action) === 'primary'"
2572
- [class.praxis-toolbar-icon-action--accent]="getActionColor(action) === 'accent'"
2573
- [class.praxis-toolbar-icon-action--warn]="getActionColor(action) === 'warn'"
2574
- [disabled]="isActionDisabled(action)"
2575
- (click)="emitToolbarAction($event, getActionId(action), action)"
2576
- [attr.aria-label]="getActionAriaLabel(action)"
2577
- [matTooltip]="getActionTooltip(action) || action.label || getActionId(action)"
2578
- matTooltipPosition="below"
2579
- ></button>
2580
- } @else if (getActionType(action) === 'fab') {
2581
- <button
2582
- class="action-btn--fab"
2583
- mat-fab
2584
- [color]="getActionColor(action)"
2585
- [disabled]="isActionDisabled(action)"
2586
- (click)="emitToolbarAction($event, getActionId(action), action)"
2587
- [attr.aria-label]="getActionAriaLabel(action)"
2588
- [matTooltip]="getActionTooltip(action) || action.label || getActionId(action)"
2589
- matTooltipPosition="below"
2590
- >
2591
- <mat-icon [praxisIcon]="action.icon || 'bolt'"></mat-icon>
2592
- </button>
2593
- } @else if (getActionType(action) === 'menu' && getVisibleActionChildren(action).length) {
2594
- <button
2595
- class="action-btn"
2596
- mat-button
2597
- [color]="getActionColor(action)"
2598
- [disabled]="isActionDisabled(action)"
2599
- [matTooltip]="getActionTooltip(action)"
2600
- [matMenuTriggerFor]="startActionMenu"
2601
- [attr.aria-label]="getActionAriaLabel(action)"
2602
- >
2603
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
2604
- {{ action.label }}
2605
- </button>
2606
- <mat-menu #startActionMenu="matMenu">
2607
- @for (child of getVisibleActionChildren(action); track getActionId(child)) {
1926
+ @if (showMain && !hasToolbarIdentity()) {
1927
+ <ng-container [ngTemplateOutlet]="toolbarCommands"></ng-container>
1928
+ }
1929
+
1930
+ <ng-template #toolbarCommands>
1931
+ <div class="toolbar-actions" data-toolbar-region="commands">
1932
+ @if (showActionsGroup) {
1933
+ <div
1934
+ class="actions-group"
1935
+ role="group"
1936
+ [class.actions-group--has-business]="hasBusinessActions()"
1937
+ [attr.aria-label]="getToolbarActionsLabel()"
1938
+ >
1939
+ <div class="business-actions">
1940
+ @for (action of getStartActions(); track getActionId(action)) {
1941
+ @if (getActionType(action) === 'icon') {
1942
+ <button
1943
+ class="action-btn"
1944
+ [praxisIconButton]="action.icon || 'bolt'"
1945
+ size="compact"
1946
+ [class.praxis-toolbar-icon-action--primary]="
1947
+ getActionColor(action) === 'primary'
1948
+ "
1949
+ [class.praxis-toolbar-icon-action--accent]="
1950
+ getActionColor(action) === 'accent'
1951
+ "
1952
+ [class.praxis-toolbar-icon-action--warn]="
1953
+ getActionColor(action) === 'warn'
1954
+ "
1955
+ [disabled]="isActionDisabled(action)"
1956
+ (click)="
1957
+ emitToolbarAction($event, getActionId(action), action)
1958
+ "
1959
+ [attr.aria-label]="getActionAriaLabel(action)"
1960
+ [matTooltip]="
1961
+ getActionTooltip(action) ||
1962
+ action.label ||
1963
+ getActionId(action)
1964
+ "
1965
+ matTooltipPosition="below"
1966
+ ></button>
1967
+ } @else if (getActionType(action) === 'fab') {
1968
+ <button
1969
+ class="action-btn--fab"
1970
+ mat-fab
1971
+ [color]="getActionColor(action)"
1972
+ [disabled]="isActionDisabled(action)"
1973
+ (click)="
1974
+ emitToolbarAction($event, getActionId(action), action)
1975
+ "
1976
+ [attr.aria-label]="getActionAriaLabel(action)"
1977
+ [matTooltip]="
1978
+ getActionTooltip(action) ||
1979
+ action.label ||
1980
+ getActionId(action)
1981
+ "
1982
+ matTooltipPosition="below"
1983
+ >
1984
+ <mat-icon [praxisIcon]="action.icon || 'bolt'"></mat-icon>
1985
+ </button>
1986
+ } @else if (
1987
+ getActionType(action) === 'menu' &&
1988
+ getVisibleActionChildren(action).length
1989
+ ) {
1990
+ <button
1991
+ class="action-btn"
1992
+ mat-button
1993
+ [color]="getActionColor(action)"
1994
+ [disabled]="isActionDisabled(action)"
1995
+ [matTooltip]="getActionTooltip(action)"
1996
+ [matMenuTriggerFor]="startActionMenu"
1997
+ [attr.aria-label]="getActionAriaLabel(action)"
1998
+ >
1999
+ @if (action.icon) {
2000
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
2001
+ }
2002
+ {{ action.label }}
2003
+ </button>
2004
+ <mat-menu #startActionMenu="matMenu">
2005
+ @for (
2006
+ child of getVisibleActionChildren(action);
2007
+ track getActionId(child)
2008
+ ) {
2009
+ <button
2010
+ mat-menu-item
2011
+ [disabled]="isActionDisabled(child)"
2012
+ [matTooltip]="getActionTooltip(child)"
2013
+ (click)="
2014
+ emitToolbarAction($event, getActionId(child), child)
2015
+ "
2016
+ >
2017
+ @if (child.icon) {
2018
+ <mat-icon [praxisIcon]="child.icon"></mat-icon>
2019
+ }
2020
+ {{ child.label || getActionId(child) }}
2021
+ </button>
2022
+ }
2023
+ </mat-menu>
2024
+ } @else if (isMenuWithoutChildren(action)) {
2025
+ <button
2026
+ class="action-btn"
2027
+ mat-button
2028
+ [color]="getActionColor(action)"
2029
+ [disabled]="isActionDisabled(action)"
2030
+ [matTooltip]="getActionTooltip(action)"
2031
+ (click)="
2032
+ emitToolbarAction($event, getActionId(action), action)
2033
+ "
2034
+ [attr.aria-label]="getActionAriaLabel(action)"
2035
+ >
2036
+ @if (action.icon) {
2037
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
2038
+ }
2039
+ {{ action.label }}
2040
+ </button>
2041
+ } @else if (action.appearance === 'outlined') {
2042
+ <button
2043
+ class="action-btn"
2044
+ mat-stroked-button
2045
+ [color]="getActionColor(action)"
2046
+ [disabled]="isActionDisabled(action)"
2047
+ [matTooltip]="getActionTooltip(action)"
2048
+ (click)="
2049
+ emitToolbarAction($event, getActionId(action), action)
2050
+ "
2051
+ [attr.aria-label]="getActionAriaLabel(action)"
2052
+ >
2053
+ @if (action.icon) {
2054
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
2055
+ }
2056
+ {{ action.label }}
2057
+ </button>
2058
+ } @else if (action.appearance === 'elevated') {
2059
+ <button
2060
+ class="action-btn"
2061
+ mat-raised-button
2062
+ [color]="getActionColor(action)"
2063
+ [disabled]="isActionDisabled(action)"
2064
+ [matTooltip]="getActionTooltip(action)"
2065
+ (click)="
2066
+ emitToolbarAction($event, getActionId(action), action)
2067
+ "
2068
+ [attr.aria-label]="getActionAriaLabel(action)"
2069
+ >
2070
+ @if (action.icon) {
2071
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
2072
+ }
2073
+ {{ action.label }}
2074
+ </button>
2075
+ } @else if (action.appearance === 'text') {
2076
+ <button
2077
+ class="action-btn"
2078
+ mat-button
2079
+ [color]="getActionColor(action)"
2080
+ [disabled]="isActionDisabled(action)"
2081
+ [matTooltip]="getActionTooltip(action)"
2082
+ (click)="
2083
+ emitToolbarAction($event, getActionId(action), action)
2084
+ "
2085
+ [attr.aria-label]="getActionAriaLabel(action)"
2086
+ >
2087
+ @if (action.icon) {
2088
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
2089
+ }
2090
+ {{ action.label }}
2091
+ </button>
2092
+ } @else if (action.appearance === 'tonal') {
2093
+ <button
2094
+ class="action-btn pfx-tonal"
2095
+ mat-button
2096
+ [color]="getActionColor(action)"
2097
+ [disabled]="isActionDisabled(action)"
2098
+ [matTooltip]="getActionTooltip(action)"
2099
+ (click)="
2100
+ emitToolbarAction($event, getActionId(action), action)
2101
+ "
2102
+ [attr.aria-label]="getActionAriaLabel(action)"
2103
+ >
2104
+ @if (action.icon) {
2105
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
2106
+ }
2107
+ {{ action.label }}
2108
+ </button>
2109
+ } @else {
2110
+ <button
2111
+ class="action-btn"
2112
+ mat-flat-button
2113
+ [color]="getActionColor(action)"
2114
+ [disabled]="isActionDisabled(action)"
2115
+ [matTooltip]="getActionTooltip(action)"
2116
+ (click)="
2117
+ emitToolbarAction($event, getActionId(action), action)
2118
+ "
2119
+ [attr.aria-label]="getActionAriaLabel(action)"
2120
+ >
2121
+ @if (action.icon) {
2122
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
2123
+ }
2124
+ {{ action.label }}
2125
+ </button>
2126
+ }
2127
+ }
2128
+
2129
+ @for (
2130
+ action of getNonStartActions();
2131
+ track getActionId(action)
2132
+ ) {
2133
+ @if (getActionType(action) === 'icon') {
2134
+ <button
2135
+ class="action-btn"
2136
+ [praxisIconButton]="action.icon || 'bolt'"
2137
+ size="compact"
2138
+ [class.praxis-toolbar-icon-action--primary]="
2139
+ getActionColor(action) === 'primary'
2140
+ "
2141
+ [class.praxis-toolbar-icon-action--accent]="
2142
+ getActionColor(action) === 'accent'
2143
+ "
2144
+ [class.praxis-toolbar-icon-action--warn]="
2145
+ getActionColor(action) === 'warn'
2146
+ "
2147
+ [disabled]="isActionDisabled(action)"
2148
+ (click)="
2149
+ emitToolbarAction($event, getActionId(action), action)
2150
+ "
2151
+ [attr.aria-label]="getActionAriaLabel(action)"
2152
+ [matTooltip]="
2153
+ getActionTooltip(action) ||
2154
+ action.label ||
2155
+ getActionId(action)
2156
+ "
2157
+ matTooltipPosition="below"
2158
+ ></button>
2159
+ } @else if (getActionType(action) === 'fab') {
2160
+ <button
2161
+ class="action-btn--fab"
2162
+ mat-fab
2163
+ [color]="getActionColor(action)"
2164
+ [disabled]="isActionDisabled(action)"
2165
+ (click)="
2166
+ emitToolbarAction($event, getActionId(action), action)
2167
+ "
2168
+ [attr.aria-label]="getActionAriaLabel(action)"
2169
+ [matTooltip]="
2170
+ getActionTooltip(action) ||
2171
+ action.label ||
2172
+ getActionId(action)
2173
+ "
2174
+ matTooltipPosition="below"
2175
+ >
2176
+ <mat-icon [praxisIcon]="action.icon || 'bolt'"></mat-icon>
2177
+ </button>
2178
+ } @else if (
2179
+ getActionType(action) === 'menu' &&
2180
+ getVisibleActionChildren(action).length
2181
+ ) {
2182
+ <button
2183
+ class="action-btn"
2184
+ mat-button
2185
+ [color]="getActionColor(action)"
2186
+ [disabled]="isActionDisabled(action)"
2187
+ [matTooltip]="getActionTooltip(action)"
2188
+ [matMenuTriggerFor]="endActionMenu"
2189
+ [attr.aria-label]="getActionAriaLabel(action)"
2190
+ >
2191
+ @if (action.icon) {
2192
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
2193
+ }
2194
+ {{ action.label }}
2195
+ </button>
2196
+ <mat-menu #endActionMenu="matMenu">
2197
+ @for (
2198
+ child of getVisibleActionChildren(action);
2199
+ track getActionId(child)
2200
+ ) {
2201
+ <button
2202
+ mat-menu-item
2203
+ [disabled]="isActionDisabled(child)"
2204
+ [matTooltip]="getActionTooltip(child)"
2205
+ (click)="
2206
+ emitToolbarAction($event, getActionId(child), child)
2207
+ "
2208
+ >
2209
+ @if (child.icon) {
2210
+ <mat-icon [praxisIcon]="child.icon"></mat-icon>
2211
+ }
2212
+ {{ child.label || getActionId(child) }}
2213
+ </button>
2214
+ }
2215
+ </mat-menu>
2216
+ } @else if (isMenuWithoutChildren(action)) {
2217
+ <button
2218
+ class="action-btn"
2219
+ mat-button
2220
+ [color]="getActionColor(action)"
2221
+ [disabled]="isActionDisabled(action)"
2222
+ [matTooltip]="getActionTooltip(action)"
2223
+ (click)="
2224
+ emitToolbarAction($event, getActionId(action), action)
2225
+ "
2226
+ [attr.aria-label]="getActionAriaLabel(action)"
2227
+ >
2228
+ @if (action.icon) {
2229
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
2230
+ }
2231
+ {{ action.label }}
2232
+ </button>
2233
+ } @else if (action.appearance === 'outlined') {
2234
+ <button
2235
+ class="action-btn"
2236
+ mat-stroked-button
2237
+ [color]="getActionColor(action)"
2238
+ [disabled]="isActionDisabled(action)"
2239
+ [matTooltip]="getActionTooltip(action)"
2240
+ (click)="
2241
+ emitToolbarAction($event, getActionId(action), action)
2242
+ "
2243
+ [attr.aria-label]="getActionAriaLabel(action)"
2244
+ >
2245
+ @if (action.icon) {
2246
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
2247
+ }
2248
+ {{ action.label }}
2249
+ </button>
2250
+ } @else if (action.appearance === 'elevated') {
2251
+ <button
2252
+ class="action-btn"
2253
+ mat-raised-button
2254
+ [color]="getActionColor(action)"
2255
+ [disabled]="isActionDisabled(action)"
2256
+ [matTooltip]="getActionTooltip(action)"
2257
+ (click)="
2258
+ emitToolbarAction($event, getActionId(action), action)
2259
+ "
2260
+ [attr.aria-label]="getActionAriaLabel(action)"
2261
+ >
2262
+ @if (action.icon) {
2263
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
2264
+ }
2265
+ {{ action.label }}
2266
+ </button>
2267
+ } @else if (action.appearance === 'text') {
2268
+ <button
2269
+ class="action-btn"
2270
+ mat-button
2271
+ [color]="getActionColor(action)"
2272
+ [disabled]="isActionDisabled(action)"
2273
+ [matTooltip]="getActionTooltip(action)"
2274
+ (click)="
2275
+ emitToolbarAction($event, getActionId(action), action)
2276
+ "
2277
+ [attr.aria-label]="getActionAriaLabel(action)"
2278
+ >
2279
+ @if (action.icon) {
2280
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
2281
+ }
2282
+ {{ action.label }}
2283
+ </button>
2284
+ } @else if (action.appearance === 'tonal') {
2285
+ <button
2286
+ class="action-btn pfx-tonal"
2287
+ mat-button
2288
+ [color]="getActionColor(action)"
2289
+ [disabled]="isActionDisabled(action)"
2290
+ [matTooltip]="getActionTooltip(action)"
2291
+ (click)="
2292
+ emitToolbarAction($event, getActionId(action), action)
2293
+ "
2294
+ [attr.aria-label]="getActionAriaLabel(action)"
2295
+ >
2296
+ @if (action.icon) {
2297
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
2298
+ }
2299
+ {{ action.label }}
2300
+ </button>
2301
+ } @else {
2302
+ <button
2303
+ class="action-btn"
2304
+ mat-flat-button
2305
+ [color]="getActionColor(action)"
2306
+ [disabled]="isActionDisabled(action)"
2307
+ [matTooltip]="getActionTooltip(action)"
2308
+ (click)="
2309
+ emitToolbarAction($event, getActionId(action), action)
2310
+ "
2311
+ [attr.aria-label]="getActionAriaLabel(action)"
2312
+ >
2313
+ @if (action.icon) {
2314
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
2315
+ }
2316
+ {{ action.label }}
2317
+ </button>
2318
+ }
2319
+ }
2320
+
2321
+ @if (shouldRenderToolbarBulkActions()) {
2322
+ @for (
2323
+ action of getBulkToolbarActions();
2324
+ track getActionId(action)
2325
+ ) {
2326
+ <button
2327
+ class="action-btn"
2328
+ mat-button
2329
+ [color]="getActionColor(action)"
2330
+ [disabled]="isActionDisabled(action)"
2331
+ [matTooltip]="getActionTooltip(action)"
2332
+ (click)="
2333
+ emitToolbarAction($event, getActionId(action), action)
2334
+ "
2335
+ [attr.aria-label]="getActionAriaLabel(action)"
2336
+ >
2337
+ @if (action.icon) {
2338
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
2339
+ }
2340
+ {{ action.label }}
2341
+ </button>
2342
+ }
2343
+ }
2344
+ </div>
2345
+
2346
+ <div class="utility-actions">
2347
+ @if (config?.export?.enabled) {
2608
2348
  <button
2609
- mat-menu-item
2610
- [disabled]="isActionDisabled(child)"
2611
- [matTooltip]="getActionTooltip(child)"
2612
- (click)="emitToolbarAction($event, getActionId(child), child)"
2349
+ class="action-btn action-btn--utility"
2350
+ mat-button
2351
+ [matMenuTriggerFor]="exportMenu"
2352
+ [attr.aria-label]="getExportDataLabel()"
2353
+ [attr.aria-busy]="exportBusy"
2354
+ [disabled]="exportBusy"
2355
+ [matTooltip]="getExportDataLabel()"
2356
+ matTooltipPosition="below"
2613
2357
  >
2614
- @if (child.icon) { <mat-icon [praxisIcon]="child.icon"></mat-icon> }
2615
- {{ child.label || getActionId(child) }}
2358
+ <mat-icon
2359
+ [class.praxis-table-export-progress-icon]="exportBusy"
2360
+ [praxisIcon]="
2361
+ exportBusy ? 'progress_activity' : 'download'
2362
+ "
2363
+ ></mat-icon>
2616
2364
  </button>
2365
+ @if (exportBusy && exportStatusMessage) {
2366
+ <span
2367
+ class="praxis-table-export-status"
2368
+ role="status"
2369
+ aria-live="polite"
2370
+ >
2371
+ {{ exportStatusMessage }}
2372
+ </span>
2373
+ }
2374
+ <mat-menu #exportMenu="matMenu">
2375
+ @for (format of config?.export?.formats; track format) {
2376
+ <button
2377
+ mat-menu-item
2378
+ class="praxis-table-export-menu-item"
2379
+ [disabled]="exportBusy"
2380
+ [matTooltip]="getExportFormatTooltip(format)"
2381
+ [attr.aria-label]="getExportFormatAriaLabel(format)"
2382
+ (click)="emitExportAction($event, format)"
2383
+ >
2384
+ <mat-icon
2385
+ [praxisIcon]="getExportIcon(format)"
2386
+ ></mat-icon>
2387
+ {{ getExportFormatLabel(format) }}
2388
+ </button>
2389
+ @if (isVisibleExcelExportEnabled(format)) {
2390
+ <button
2391
+ mat-menu-item
2392
+ class="praxis-table-export-menu-item"
2393
+ [disabled]="exportBusy"
2394
+ [matTooltip]="getVisibleExcelExportDescription()"
2395
+ [attr.aria-label]="getVisibleExcelExportAriaLabel()"
2396
+ (click)="emitVisibleExcelExportAction($event)"
2397
+ >
2398
+ <mat-icon [praxisIcon]="'table_view'"></mat-icon>
2399
+ {{ getVisibleExcelExportLabel() }}
2400
+ </button>
2401
+ }
2402
+ }
2403
+ </mat-menu>
2617
2404
  }
2618
- </mat-menu>
2619
- } @else if (isMenuWithoutChildren(action)) {
2620
- <button
2621
- class="action-btn"
2622
- mat-button
2623
- [color]="getActionColor(action)"
2624
- [disabled]="isActionDisabled(action)"
2625
- [matTooltip]="getActionTooltip(action)"
2626
- (click)="emitToolbarAction($event, getActionId(action), action)"
2627
- [attr.aria-label]="getActionAriaLabel(action)"
2628
- >
2629
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
2630
- {{ action.label }}
2631
- </button>
2632
- } @else if (action.appearance === 'outlined') {
2633
- <button
2634
- class="action-btn"
2635
- mat-stroked-button
2636
- [color]="getActionColor(action)"
2637
- [disabled]="isActionDisabled(action)"
2638
- [matTooltip]="getActionTooltip(action)"
2639
- (click)="emitToolbarAction($event, getActionId(action), action)"
2640
- [attr.aria-label]="getActionAriaLabel(action)"
2641
- >
2642
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
2643
- {{ action.label }}
2644
- </button>
2645
- } @else if (action.appearance === 'elevated') {
2646
- <button
2647
- class="action-btn"
2648
- mat-raised-button
2649
- [color]="getActionColor(action)"
2650
- [disabled]="isActionDisabled(action)"
2651
- [matTooltip]="getActionTooltip(action)"
2652
- (click)="emitToolbarAction($event, getActionId(action), action)"
2653
- [attr.aria-label]="getActionAriaLabel(action)"
2654
- >
2655
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
2656
- {{ action.label }}
2657
- </button>
2658
- } @else if (action.appearance === 'text') {
2659
- <button
2660
- class="action-btn"
2661
- mat-button
2662
- [color]="getActionColor(action)"
2663
- [disabled]="isActionDisabled(action)"
2664
- [matTooltip]="getActionTooltip(action)"
2665
- (click)="emitToolbarAction($event, getActionId(action), action)"
2666
- [attr.aria-label]="getActionAriaLabel(action)"
2667
- >
2668
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
2669
- {{ action.label }}
2670
- </button>
2671
- } @else if (action.appearance === 'tonal') {
2672
- <button
2673
- class="action-btn pfx-tonal"
2674
- mat-button
2675
- [color]="getActionColor(action)"
2676
- [disabled]="isActionDisabled(action)"
2677
- [matTooltip]="getActionTooltip(action)"
2678
- (click)="emitToolbarAction($event, getActionId(action), action)"
2679
- [attr.aria-label]="getActionAriaLabel(action)"
2680
- >
2681
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
2682
- {{ action.label }}
2683
- </button>
2684
- } @else {
2685
- <button
2686
- class="action-btn"
2687
- mat-flat-button
2688
- [color]="getActionColor(action)"
2689
- [disabled]="isActionDisabled(action)"
2690
- [matTooltip]="getActionTooltip(action)"
2691
- (click)="emitToolbarAction($event, getActionId(action), action)"
2692
- [attr.aria-label]="getActionAriaLabel(action)"
2693
- >
2694
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
2695
- {{ action.label }}
2696
- </button>
2697
- }
2698
- }
2699
2405
 
2700
- @for (action of getNonStartActions(); track getActionId(action)) {
2701
- @if (getActionType(action) === 'icon') {
2702
- <button
2703
- class="action-btn"
2704
- [praxisIconButton]="action.icon || 'bolt'"
2705
- size="compact"
2706
- [class.praxis-toolbar-icon-action--primary]="getActionColor(action) === 'primary'"
2707
- [class.praxis-toolbar-icon-action--accent]="getActionColor(action) === 'accent'"
2708
- [class.praxis-toolbar-icon-action--warn]="getActionColor(action) === 'warn'"
2709
- [disabled]="isActionDisabled(action)"
2710
- (click)="emitToolbarAction($event, getActionId(action), action)"
2711
- [attr.aria-label]="getActionAriaLabel(action)"
2712
- [matTooltip]="getActionTooltip(action) || action.label || getActionId(action)"
2713
- matTooltipPosition="below"
2714
- ></button>
2715
- } @else if (getActionType(action) === 'fab') {
2716
- <button
2717
- class="action-btn--fab"
2718
- mat-fab
2719
- [color]="getActionColor(action)"
2720
- [disabled]="isActionDisabled(action)"
2721
- (click)="emitToolbarAction($event, getActionId(action), action)"
2722
- [attr.aria-label]="getActionAriaLabel(action)"
2723
- [matTooltip]="getActionTooltip(action) || action.label || getActionId(action)"
2724
- matTooltipPosition="below"
2725
- >
2726
- <mat-icon [praxisIcon]="action.icon || 'bolt'"></mat-icon>
2727
- </button>
2728
- } @else if (getActionType(action) === 'menu' && getVisibleActionChildren(action).length) {
2729
- <button
2730
- class="action-btn"
2731
- mat-button
2732
- [color]="getActionColor(action)"
2733
- [disabled]="isActionDisabled(action)"
2734
- [matTooltip]="getActionTooltip(action)"
2735
- [matMenuTriggerFor]="endActionMenu"
2736
- [attr.aria-label]="getActionAriaLabel(action)"
2737
- >
2738
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
2739
- {{ action.label }}
2740
- </button>
2741
- <mat-menu #endActionMenu="matMenu">
2742
- @for (child of getVisibleActionChildren(action); track getActionId(child)) {
2406
+ @if (isColumnsVisibilityEnabled()) {
2743
2407
  <button
2744
- mat-menu-item
2745
- [disabled]="isActionDisabled(child)"
2746
- [matTooltip]="getActionTooltip(child)"
2747
- (click)="emitToolbarAction($event, getActionId(child), child)"
2408
+ class="action-btn action-btn--utility praxis-table-toolbar-action--columns"
2409
+ mat-button
2410
+ [matMenuTriggerFor]="columnsMenu"
2411
+ [attr.aria-label]="getColumnsVisibilityLabel()"
2412
+ [matTooltip]="getColumnsVisibilityLabel()"
2413
+ matTooltipPosition="below"
2748
2414
  >
2749
- @if (child.icon) { <mat-icon [praxisIcon]="child.icon"></mat-icon> }
2750
- {{ child.label || getActionId(child) }}
2415
+ <mat-icon
2416
+ [praxisIcon]="getColumnsVisibilityIcon()"
2417
+ ></mat-icon>
2751
2418
  </button>
2419
+ <mat-menu
2420
+ #columnsMenu="matMenu"
2421
+ class="praxis-table-columns-menu"
2422
+ >
2423
+ @for (column of config?.columns; track column.field) {
2424
+ <button
2425
+ mat-menu-item
2426
+ type="button"
2427
+ class="praxis-table-column-menu-item"
2428
+ role="menuitemcheckbox"
2429
+ [attr.aria-checked]="column.visible !== false"
2430
+ [disabled]="isColumnVisibilityToggleDisabled(column)"
2431
+ (keydown.enter)="
2432
+ onColumnVisibilityMenuToggle(
2433
+ $event,
2434
+ column.field,
2435
+ column.visible !== false
2436
+ )
2437
+ "
2438
+ (keydown.space)="
2439
+ onColumnVisibilityMenuToggle(
2440
+ $event,
2441
+ column.field,
2442
+ column.visible !== false
2443
+ )
2444
+ "
2445
+ >
2446
+ <span
2447
+ class="praxis-table-column-menu-content"
2448
+ (mousedown)="
2449
+ onColumnVisibilityMenuToggle(
2450
+ $event,
2451
+ column.field,
2452
+ column.visible !== false
2453
+ )
2454
+ "
2455
+ (click)="
2456
+ $event.preventDefault(); $event.stopPropagation()
2457
+ "
2458
+ >
2459
+ <mat-icon
2460
+ class="praxis-table-column-menu-check"
2461
+ [praxisIcon]="
2462
+ column.visible !== false
2463
+ ? 'check_box'
2464
+ : 'check_box_outline_blank'
2465
+ "
2466
+ aria-hidden="true"
2467
+ ></mat-icon>
2468
+ <span>{{ column.header || column.field }}</span>
2469
+ </span>
2470
+ </button>
2471
+ }
2472
+ </mat-menu>
2752
2473
  }
2753
- </mat-menu>
2754
- } @else if (isMenuWithoutChildren(action)) {
2755
- <button
2756
- class="action-btn"
2757
- mat-button
2758
- [color]="getActionColor(action)"
2759
- [disabled]="isActionDisabled(action)"
2760
- [matTooltip]="getActionTooltip(action)"
2761
- (click)="emitToolbarAction($event, getActionId(action), action)"
2762
- [attr.aria-label]="getActionAriaLabel(action)"
2763
- >
2764
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
2765
- {{ action.label }}
2766
- </button>
2767
- } @else if (action.appearance === 'outlined') {
2768
- <button
2769
- class="action-btn"
2770
- mat-stroked-button
2771
- [color]="getActionColor(action)"
2772
- [disabled]="isActionDisabled(action)"
2773
- [matTooltip]="getActionTooltip(action)"
2774
- (click)="emitToolbarAction($event, getActionId(action), action)"
2775
- [attr.aria-label]="getActionAriaLabel(action)"
2776
- >
2777
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
2778
- {{ action.label }}
2779
- </button>
2780
- } @else if (action.appearance === 'elevated') {
2781
- <button
2782
- class="action-btn"
2783
- mat-raised-button
2784
- [color]="getActionColor(action)"
2785
- [disabled]="isActionDisabled(action)"
2786
- [matTooltip]="getActionTooltip(action)"
2787
- (click)="emitToolbarAction($event, getActionId(action), action)"
2788
- [attr.aria-label]="getActionAriaLabel(action)"
2789
- >
2790
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
2791
- {{ action.label }}
2792
- </button>
2793
- } @else if (action.appearance === 'text') {
2794
- <button
2795
- class="action-btn"
2796
- mat-button
2797
- [color]="getActionColor(action)"
2798
- [disabled]="isActionDisabled(action)"
2799
- [matTooltip]="getActionTooltip(action)"
2800
- (click)="emitToolbarAction($event, getActionId(action), action)"
2801
- [attr.aria-label]="getActionAriaLabel(action)"
2802
- >
2803
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
2804
- {{ action.label }}
2805
- </button>
2806
- } @else if (action.appearance === 'tonal') {
2807
- <button
2808
- class="action-btn pfx-tonal"
2809
- mat-button
2810
- [color]="getActionColor(action)"
2811
- [disabled]="isActionDisabled(action)"
2812
- [matTooltip]="getActionTooltip(action)"
2813
- (click)="emitToolbarAction($event, getActionId(action), action)"
2814
- [attr.aria-label]="getActionAriaLabel(action)"
2815
- >
2816
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
2817
- {{ action.label }}
2818
- </button>
2819
- } @else {
2820
- <button
2821
- class="action-btn"
2822
- mat-flat-button
2823
- [color]="getActionColor(action)"
2824
- [disabled]="isActionDisabled(action)"
2825
- [matTooltip]="getActionTooltip(action)"
2826
- (click)="emitToolbarAction($event, getActionId(action), action)"
2827
- [attr.aria-label]="getActionAriaLabel(action)"
2828
- >
2829
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
2830
- {{ action.label }}
2831
- </button>
2832
- }
2833
- }
2834
-
2835
- @if (shouldRenderToolbarBulkActions()) {
2836
- @for (action of getBulkToolbarActions(); track getActionId(action)) {
2837
- <button
2838
- class="action-btn"
2839
- mat-button
2840
- [color]="getActionColor(action)"
2841
- [disabled]="isActionDisabled(action)"
2842
- [matTooltip]="getActionTooltip(action)"
2843
- (click)="emitToolbarAction($event, getActionId(action), action)"
2844
- [attr.aria-label]="getActionAriaLabel(action)"
2845
- >
2846
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
2847
- {{ action.label }}
2848
- </button>
2849
- }
2850
- }
2851
- </div>
2852
-
2853
- <div class="utility-actions">
2854
- @if (config?.export?.enabled) {
2855
- <button
2856
- class="action-btn action-btn--utility"
2857
- mat-button
2858
- [matMenuTriggerFor]="exportMenu"
2859
- [attr.aria-label]="getExportDataLabel()"
2860
- [attr.aria-busy]="exportBusy"
2861
- [disabled]="exportBusy"
2862
- [matTooltip]="getExportDataLabel()"
2863
- matTooltipPosition="below"
2864
- >
2865
- <mat-icon
2866
- [class.praxis-table-export-progress-icon]="exportBusy"
2867
- [praxisIcon]="exportBusy ? 'progress_activity' : 'download'"
2868
- ></mat-icon>
2869
- </button>
2870
- @if (exportBusy && exportStatusMessage) {
2871
- <span class="praxis-table-export-status" role="status" aria-live="polite">
2872
- {{ exportStatusMessage }}
2873
- </span>
2874
- }
2875
- <mat-menu #exportMenu="matMenu">
2876
- @for (format of config?.export?.formats; track format) {
2877
- <button
2878
- mat-menu-item
2879
- class="praxis-table-export-menu-item"
2880
- [disabled]="exportBusy"
2881
- [matTooltip]="getExportFormatTooltip(format)"
2882
- [attr.aria-label]="getExportFormatAriaLabel(format)"
2883
- (click)="emitExportAction($event, format)"
2884
- >
2885
- <mat-icon [praxisIcon]="getExportIcon(format)"></mat-icon>
2886
- {{ getExportFormatLabel(format) }}
2887
- </button>
2888
- @if (isVisibleExcelExportEnabled(format)) {
2474
+ @if (isDensityToggleEnabled()) {
2889
2475
  <button
2890
- mat-menu-item
2891
- class="praxis-table-export-menu-item"
2892
- [disabled]="exportBusy"
2893
- [matTooltip]="getVisibleExcelExportDescription()"
2894
- [attr.aria-label]="getVisibleExcelExportAriaLabel()"
2895
- (click)="emitVisibleExcelExportAction($event)"
2476
+ class="action-btn action-btn--utility praxis-table-toolbar-action--density"
2477
+ mat-button
2478
+ [matMenuTriggerFor]="densityMenu"
2479
+ [attr.aria-label]="getDensityToggleLabel()"
2480
+ [matTooltip]="getDensityToggleLabel()"
2481
+ matTooltipPosition="below"
2896
2482
  >
2897
- <mat-icon [praxisIcon]="'table_view'"></mat-icon>
2898
- {{ getVisibleExcelExportLabel() }}
2483
+ <mat-icon [praxisIcon]="'density_medium'"></mat-icon>
2899
2484
  </button>
2485
+ <mat-menu
2486
+ #densityMenu="matMenu"
2487
+ class="praxis-table-density-menu"
2488
+ >
2489
+ @for (density of getDensityOptions(); track density) {
2490
+ <button
2491
+ mat-menu-item
2492
+ type="button"
2493
+ [attr.aria-current]="
2494
+ isDensityActive(density) ? 'true' : null
2495
+ "
2496
+ (click)="emitDensityChange($event, density)"
2497
+ >
2498
+ <mat-icon
2499
+ [praxisIcon]="
2500
+ isDensityActive(density)
2501
+ ? 'check'
2502
+ : getDensityIcon(density)
2503
+ "
2504
+ ></mat-icon>
2505
+ {{ getDensityLabel(density) }}
2506
+ </button>
2507
+ }
2508
+ </mat-menu>
2900
2509
  }
2901
- }
2902
- </mat-menu>
2510
+ </div>
2511
+ </div>
2903
2512
  }
2904
-
2905
- @if (isColumnsVisibilityEnabled()) {
2906
- <button
2907
- class="action-btn action-btn--utility praxis-table-toolbar-action--columns"
2908
- mat-button
2909
- [matMenuTriggerFor]="columnsMenu"
2910
- [attr.aria-label]="getColumnsVisibilityLabel()"
2911
- [matTooltip]="getColumnsVisibilityLabel()"
2912
- matTooltipPosition="below"
2513
+ @if (showEndActions) {
2514
+ <div
2515
+ class="end-actions"
2516
+ role="group"
2517
+ [attr.aria-label]="getToolbarConfigurationLabel()"
2913
2518
  >
2914
- <mat-icon [praxisIcon]="getColumnsVisibilityIcon()"></mat-icon>
2915
- </button>
2916
- <mat-menu #columnsMenu="matMenu" class="praxis-table-columns-menu">
2917
- @for (column of config?.columns; track column.field) {
2918
- <button
2919
- mat-menu-item
2920
- type="button"
2921
- class="praxis-table-column-menu-item"
2922
- role="menuitemcheckbox"
2923
- [attr.aria-checked]="column.visible !== false"
2924
- [disabled]="isColumnVisibilityToggleDisabled(column)"
2925
- (keydown.enter)="onColumnVisibilityMenuToggle($event, column.field, column.visible !== false)"
2926
- (keydown.space)="onColumnVisibilityMenuToggle($event, column.field, column.visible !== false)"
2927
- >
2928
- <span
2929
- class="praxis-table-column-menu-content"
2930
- (mousedown)="onColumnVisibilityMenuToggle($event, column.field, column.visible !== false)"
2931
- (click)="$event.preventDefault(); $event.stopPropagation()"
2932
- >
2933
- <mat-icon
2934
- class="praxis-table-column-menu-check"
2935
- [praxisIcon]="column.visible !== false ? 'check_box' : 'check_box_outline_blank'"
2936
- aria-hidden="true"
2937
- ></mat-icon>
2938
- <span>{{ column.header || column.field }}</span>
2939
- </span>
2940
- </button>
2941
- }
2942
- </mat-menu>
2519
+ <ng-content select="[end-actions]"></ng-content>
2520
+ </div>
2943
2521
  }
2944
- @if (isDensityToggleEnabled()) {
2945
- <button
2946
- class="action-btn action-btn--utility praxis-table-toolbar-action--density"
2947
- mat-button
2948
- [matMenuTriggerFor]="densityMenu"
2949
- [attr.aria-label]="getDensityToggleLabel()"
2950
- [matTooltip]="getDensityToggleLabel()"
2951
- matTooltipPosition="below"
2522
+
2523
+ @if (showMobileActions) {
2524
+ <div
2525
+ class="mobile-actions"
2526
+ role="group"
2527
+ [attr.aria-label]="getToolbarActionsLabel()"
2952
2528
  >
2953
- <mat-icon [praxisIcon]="'density_medium'"></mat-icon>
2954
- </button>
2955
- <mat-menu #densityMenu="matMenu" class="praxis-table-density-menu">
2956
- @for (density of getDensityOptions(); track density) {
2529
+ @if (hasCompactCommands()) {
2957
2530
  <button
2958
- mat-menu-item
2959
- type="button"
2960
- [attr.aria-current]="isDensityActive(density) ? 'true' : null"
2961
- (click)="emitDensityChange($event, density)"
2531
+ #overflowMenuTrigger="matMenuTrigger"
2532
+ praxisIconButton="more_vert"
2533
+ size="compact"
2534
+ class="overflow-trigger"
2535
+ [matMenuTriggerFor]="compactCommandsMenu"
2536
+ (click)="
2537
+ setActiveOverflowMenuTrigger(
2538
+ overflowMenuTrigger,
2539
+ $event.currentTarget
2540
+ )
2541
+ "
2542
+ (menuOpened)="
2543
+ setActiveOverflowMenuTrigger(overflowMenuTrigger)
2544
+ "
2545
+ [attr.data-praxis-focus-key]="getFocusOriginKey('overflow')"
2546
+ [attr.aria-label]="getMoreActionsLabel()"
2547
+ [matTooltip]="getMoreActionsLabel()"
2548
+ matTooltipPosition="below"
2549
+ ></button>
2550
+ <mat-menu #compactCommandsMenu="matMenu">
2551
+ @for (
2552
+ action of getOverflowActions();
2553
+ track getActionId(action)
2554
+ ) {
2555
+ <button
2556
+ mat-menu-item
2557
+ [disabled]="isActionDisabled(action)"
2558
+ [matTooltip]="getActionTooltip(action)"
2559
+ (click)="
2560
+ emitOverflowToolbarAction(
2561
+ $event,
2562
+ getActionId(action),
2563
+ action
2564
+ )
2565
+ "
2566
+ >
2567
+ @if (action.icon) {
2568
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
2569
+ }
2570
+ {{ action.label }}
2571
+ </button>
2572
+ }
2573
+ @if (config?.export?.enabled) {
2574
+ <button
2575
+ mat-menu-item
2576
+ [matMenuTriggerFor]="mobileExportMenu"
2577
+ [disabled]="exportBusy"
2578
+ class="praxis-table-compact-command--export"
2579
+ >
2580
+ <mat-icon
2581
+ [class.praxis-table-export-progress-icon]="exportBusy"
2582
+ [praxisIcon]="
2583
+ exportBusy ? 'progress_activity' : 'download'
2584
+ "
2585
+ ></mat-icon>
2586
+ {{ getExportDataLabel() }}
2587
+ </button>
2588
+ }
2589
+ @if (isColumnsVisibilityEnabled()) {
2590
+ <button
2591
+ mat-menu-item
2592
+ [matMenuTriggerFor]="mobileColumnsMenu"
2593
+ class="praxis-table-compact-command--columns"
2594
+ >
2595
+ <mat-icon
2596
+ [praxisIcon]="getColumnsVisibilityIcon()"
2597
+ ></mat-icon>
2598
+ {{ getColumnsVisibilityLabel() }}
2599
+ </button>
2600
+ }
2601
+ @if (isDensityToggleEnabled()) {
2602
+ <button
2603
+ mat-menu-item
2604
+ [matMenuTriggerFor]="mobileDensityMenu"
2605
+ class="praxis-table-toolbar-action--density"
2606
+ >
2607
+ <mat-icon [praxisIcon]="'density_medium'"></mat-icon>
2608
+ {{ getDensityToggleLabel() }}
2609
+ </button>
2610
+ }
2611
+ </mat-menu>
2612
+
2613
+ <mat-menu #mobileExportMenu="matMenu">
2614
+ @if (config?.export?.enabled) {
2615
+ @for (format of config?.export?.formats; track format) {
2616
+ <button
2617
+ mat-menu-item
2618
+ class="praxis-table-export-menu-item"
2619
+ [disabled]="exportBusy"
2620
+ [matTooltip]="getExportFormatTooltip(format)"
2621
+ [attr.aria-label]="getExportFormatAriaLabel(format)"
2622
+ (click)="emitExportAction($event, format)"
2623
+ >
2624
+ <mat-icon
2625
+ [praxisIcon]="getExportIcon(format)"
2626
+ ></mat-icon>
2627
+ {{ getExportFormatLabel(format) }}
2628
+ </button>
2629
+ @if (isVisibleExcelExportEnabled(format)) {
2630
+ <button
2631
+ mat-menu-item
2632
+ class="praxis-table-export-menu-item"
2633
+ [disabled]="exportBusy"
2634
+ [matTooltip]="getVisibleExcelExportDescription()"
2635
+ [attr.aria-label]="getVisibleExcelExportAriaLabel()"
2636
+ (click)="emitVisibleExcelExportAction($event)"
2637
+ >
2638
+ <mat-icon [praxisIcon]="'table_view'"></mat-icon>
2639
+ {{ getVisibleExcelExportLabel() }}
2640
+ </button>
2641
+ }
2642
+ }
2643
+ }
2644
+ </mat-menu>
2645
+
2646
+ <mat-menu
2647
+ #mobileColumnsMenu="matMenu"
2648
+ class="praxis-table-columns-menu"
2962
2649
  >
2963
- <mat-icon [praxisIcon]="isDensityActive(density) ? 'check' : getDensityIcon(density)"></mat-icon>
2964
- {{ getDensityLabel(density) }}
2965
- </button>
2650
+ @if (isColumnsVisibilityEnabled()) {
2651
+ @for (column of config?.columns; track column.field) {
2652
+ <button
2653
+ mat-menu-item
2654
+ type="button"
2655
+ class="praxis-table-column-menu-item"
2656
+ role="menuitemcheckbox"
2657
+ [attr.aria-checked]="column.visible !== false"
2658
+ [disabled]="isColumnVisibilityToggleDisabled(column)"
2659
+ (keydown.enter)="
2660
+ onColumnVisibilityMenuToggle(
2661
+ $event,
2662
+ column.field,
2663
+ column.visible !== false
2664
+ )
2665
+ "
2666
+ (keydown.space)="
2667
+ onColumnVisibilityMenuToggle(
2668
+ $event,
2669
+ column.field,
2670
+ column.visible !== false
2671
+ )
2672
+ "
2673
+ >
2674
+ <span
2675
+ class="praxis-table-column-menu-content"
2676
+ (mousedown)="
2677
+ onColumnVisibilityMenuToggle(
2678
+ $event,
2679
+ column.field,
2680
+ column.visible !== false
2681
+ )
2682
+ "
2683
+ (click)="
2684
+ $event.preventDefault(); $event.stopPropagation()
2685
+ "
2686
+ >
2687
+ <mat-icon
2688
+ class="praxis-table-column-menu-check"
2689
+ [praxisIcon]="
2690
+ column.visible !== false
2691
+ ? 'check_box'
2692
+ : 'check_box_outline_blank'
2693
+ "
2694
+ aria-hidden="true"
2695
+ ></mat-icon>
2696
+ <span>{{ column.header || column.field }}</span>
2697
+ </span>
2698
+ </button>
2699
+ }
2700
+ }
2701
+ </mat-menu>
2702
+
2703
+ <mat-menu
2704
+ #mobileDensityMenu="matMenu"
2705
+ class="praxis-table-density-menu"
2706
+ >
2707
+ @if (isDensityToggleEnabled()) {
2708
+ @for (density of getDensityOptions(); track density) {
2709
+ <button
2710
+ mat-menu-item
2711
+ type="button"
2712
+ [attr.aria-current]="
2713
+ isDensityActive(density) ? 'true' : null
2714
+ "
2715
+ (click)="emitDensityChange($event, density)"
2716
+ >
2717
+ <mat-icon
2718
+ [praxisIcon]="
2719
+ isDensityActive(density)
2720
+ ? 'check'
2721
+ : getDensityIcon(density)
2722
+ "
2723
+ ></mat-icon>
2724
+ {{ getDensityLabel(density) }}
2725
+ </button>
2726
+ }
2727
+ }
2728
+ </mat-menu>
2966
2729
  }
2967
- </mat-menu>
2730
+ </div>
2968
2731
  }
2969
- </div>
2970
- </div>
2971
- }
2972
- @if (showEndActions) {
2973
- <div class="end-actions" role="group" [attr.aria-label]="getToolbarConfigurationLabel()">
2974
- <ng-content select="[end-actions]"></ng-content>
2975
2732
  </div>
2976
- }
2977
-
2978
- @if (showMobileActions) {
2979
- <div class="mobile-actions" role="group" [attr.aria-label]="getToolbarActionsLabel()">
2980
- @if (hasCompactCommands()) {
2981
- <button
2982
- #overflowMenuTrigger="matMenuTrigger"
2983
- praxisIconButton="more_vert"
2984
- size="compact"
2985
- class="overflow-trigger"
2986
- [matMenuTriggerFor]="compactCommandsMenu"
2987
- (click)="setActiveOverflowMenuTrigger(overflowMenuTrigger, $event.currentTarget)"
2988
- (menuOpened)="setActiveOverflowMenuTrigger(overflowMenuTrigger)"
2989
- [attr.data-praxis-focus-key]="getFocusOriginKey('overflow')"
2990
- [attr.aria-label]="getMoreActionsLabel()"
2991
- [matTooltip]="getMoreActionsLabel()"
2992
- matTooltipPosition="below"
2993
- ></button>
2994
- <mat-menu #compactCommandsMenu="matMenu">
2995
- @for (action of getOverflowActions(); track getActionId(action)) {
2996
- <button
2997
- mat-menu-item
2998
- [disabled]="isActionDisabled(action)"
2999
- [matTooltip]="getActionTooltip(action)"
3000
- (click)="emitOverflowToolbarAction($event, getActionId(action), action)"
3001
- >
3002
- @if (action.icon) { <mat-icon [praxisIcon]="action.icon"></mat-icon> }
3003
- {{ action.label }}
3004
- </button>
3005
- }
3006
- @if (config?.export?.enabled) {
3007
- <button
3008
- mat-menu-item
3009
- [matMenuTriggerFor]="mobileExportMenu"
3010
- [disabled]="exportBusy"
3011
- class="praxis-table-compact-command--export"
3012
- >
3013
- <mat-icon
3014
- [class.praxis-table-export-progress-icon]="exportBusy"
3015
- [praxisIcon]="exportBusy ? 'progress_activity' : 'download'"
3016
- ></mat-icon>
3017
- {{ getExportDataLabel() }}
3018
- </button>
2733
+ </ng-template>
2734
+ </mat-toolbar>
2735
+ `, isInline: true, styles: [":host{display:block;container-name:praxis-table-toolbar;container-type:inline-size}.praxis-toolbar{--p-table-toolbar-bg-default: linear-gradient( 180deg, color-mix( in srgb, var(--md-sys-color-surface, #fff) 96%, transparent ), color-mix( in srgb, var(--md-sys-color-surface-container-low, #f6f8fc) 100%, transparent ) );--p-table-toolbar-fg-default: var( --md-sys-color-on-surface, currentColor );--p-table-toolbar-border-color-default: color-mix( in srgb, var(--md-sys-color-outline-variant, #d7dbe5) 78%, transparent );--p-table-toolbar-divider-color-default: color-mix( in srgb, var(--md-sys-color-outline) 42%, transparent );--p-table-toolbar-action-hover-bg-default: color-mix( in srgb, var(--md-sys-color-primary) 10%, transparent );--p-table-toolbar-action-active-bg-default: color-mix( in srgb, var(--md-sys-color-primary) 16%, transparent );--p-table-toolbar-action-focus-ring-default: color-mix( in srgb, var(--md-sys-color-primary) 52%, transparent );--p-table-toolbar-ai-accent-color-default: var( --md-sys-color-primary, #0b72d9 );--p-table-toolbar-status-fg-default: var( --md-sys-color-on-surface-variant, currentColor );background:var( --p-table-toolbar-bg, var(--p-table-toolbar-bg-default) );color:var(--p-table-toolbar-fg, var(--p-table-toolbar-fg-default));box-shadow:var(--p-table-toolbar-shadow, none);padding:var( --p-table-toolbar-layout-padding, var(--p-table-toolbar-padding-block, var(--pfx-toolbar-pad-y, 6px)) var( --p-table-toolbar-padding-inline, var(--pfx-toolbar-pad-x, 12px) ) );min-height:var( --p-table-toolbar-min-height, var(--pfx-filter-h, 44px) );display:grid;grid-template-areas:\"actions actions actions\";grid-template-columns:max-content minmax(0,1fr) auto;align-items:center;column-gap:max(var(--p-table-toolbar-gap, 8px),12px);row-gap:var(--p-table-toolbar-identity-filter-gap, 8px);border:var(--p-table-toolbar-border-width, 1px) solid var( --p-table-toolbar-border-color, var(--p-table-toolbar-border-color-default) );border-radius:var(--p-table-toolbar-radius, 10px)}.praxis-toolbar.p-table-toolbar--flat{--p-table-toolbar-border-width: 0;--p-table-toolbar-shadow: none}.praxis-toolbar.p-table-toolbar--elevated{--p-table-toolbar-shadow: 0 12px 28px color-mix(in srgb, var(--md-sys-color-shadow, #000) 12%, transparent)}.praxis-toolbar.p-table-toolbar--integrated{--p-table-toolbar-bg: transparent;--p-table-toolbar-border-width: 0;--p-table-toolbar-radius: 0}.praxis-toolbar.p-table-toolbar--layout-separator{border-block-end-width:1px;border-block-end-style:solid;border-block-end-color:var( --p-table-toolbar-divider-color, var(--p-table-toolbar-divider-color-default) )}.praxis-toolbar.p-table-toolbar--compact{--p-table-toolbar-min-height: 36px;--p-table-toolbar-padding-block: 4px;--p-table-toolbar-padding-inline: 10px;--p-table-toolbar-gap: 4px;--p-table-toolbar-actions-gap: 4px;--p-table-toolbar-action-size: 36px;--p-table-toolbar-action-radius: 7px}.praxis-toolbar.p-table-toolbar--comfortable{--p-table-toolbar-min-height: 44px;--p-table-toolbar-action-size: 40px}.praxis-toolbar.p-table-toolbar--spacious{--p-table-toolbar-min-height: 52px;--p-table-toolbar-padding-block: 8px;--p-table-toolbar-padding-inline: 16px;--p-table-toolbar-gap: 8px;--p-table-toolbar-actions-gap: 8px;--p-table-toolbar-action-size: 44px}.praxis-toolbar.p-table-toolbar--square{--p-table-toolbar-radius: 0;--p-table-toolbar-action-radius: 4px}.praxis-toolbar.p-table-toolbar--pill{--p-table-toolbar-radius: 999px;--p-table-toolbar-action-radius: 999px}:host(.praxis-toolbar-stack-top) .praxis-toolbar{border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.praxis-toolbar-footer) .praxis-toolbar{border-top-left-radius:0;border-top-right-radius:0}:host(.praxis-toolbar-footer.footer-flat) .praxis-toolbar{border-bottom-left-radius:0;border-bottom-right-radius:0}.praxis-toolbar.mat-toolbar-single-row,.praxis-toolbar .mat-toolbar-row{height:auto}.praxis-toolbar.mat-toolbar-multiple-rows{min-height:var( --p-table-toolbar-min-height, var(--pfx-filter-h, 44px) )}.praxis-toolbar.praxis-toolbar--has-query{grid-template-areas:\"query query actions\"}.praxis-toolbar.praxis-toolbar--has-query.praxis-toolbar--has-scope{grid-template-areas:\"scope query actions\"}.praxis-toolbar.praxis-toolbar--has-identity{grid-template-areas:\"identity identity actions\" \"query query query\"}.praxis-toolbar.praxis-toolbar--has-identity.praxis-toolbar--has-scope{grid-template-areas:\"identity identity actions\" \"scope query query\"}.toolbar-query{grid-area:query;display:grid;grid-template-columns:minmax(0,1fr) fit-content(40%);align-items:start;min-width:0;column-gap:var(--p-table-toolbar-gap, 8px);row-gap:var(--p-table-toolbar-identity-filter-gap, 8px)}.toolbar-query>*{min-width:0}.toolbar-query>:is(praxis-filter,[advancedFilter]){grid-column:1}.toolbar-shortcuts{grid-column:2;display:inline-flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--p-table-toolbar-gap, 8px);min-width:0;max-width:100%}.toolbar-shortcuts ::ng-deep>[toolbar]{min-width:0;max-width:100%}.toolbar-shortcuts:not(:has(*)){display:none}.toolbar-identity{grid-area:identity;display:flex;align-items:center;gap:var(--p-table-toolbar-identity-gap, 8px);min-width:0;max-width:100%;min-height:var(--p-table-toolbar-identity-min-height, 30px);margin-block-end:var(--p-table-toolbar-identity-margin-bottom, 0);padding-inline:2px;color:var( --p-table-toolbar-title-fg, var(--p-table-toolbar-fg, var(--p-table-toolbar-fg-default)) )}.toolbar-identity--center{text-align:center;justify-content:center}.toolbar-identity--end{text-align:end;justify-content:flex-end}.toolbar-identity--center .toolbar-identity__copy{align-items:center}.toolbar-identity--end .toolbar-identity__copy{align-items:flex-end}.toolbar-identity__icon{width:var(--p-table-toolbar-identity-icon-size, 28px);height:var(--p-table-toolbar-identity-icon-size, 28px);border-radius:var(--p-table-toolbar-identity-icon-radius, 8px);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:var( --p-table-toolbar-icon-fg, var(--md-sys-color-primary, currentColor) );background:color-mix(in srgb,var( --p-table-toolbar-icon-fg, var(--md-sys-color-primary, currentColor) ) 8%,transparent);border:1px solid color-mix(in srgb,var( --p-table-toolbar-icon-fg, var(--md-sys-color-primary, currentColor) ) 18%,transparent)}.toolbar-identity__icon .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.toolbar-identity__copy{display:flex;flex-direction:column;min-width:0;max-width:100%;gap:1px}.toolbar-identity__title,.toolbar-identity__subtitle{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toolbar-identity__title{font-size:var(--p-table-toolbar-title-font-size, 14px);font-weight:var(--p-table-toolbar-title-font-weight, 700);line-height:1.2;letter-spacing:0;color:var(--p-table-toolbar-title-fg, currentColor)}.toolbar-identity__subtitle{font-size:var(--p-table-toolbar-subtitle-font-size, 11.5px);line-height:1.25;color:var( --p-table-toolbar-subtitle-fg, var( --p-table-toolbar-status-fg, var(--p-table-toolbar-status-fg-default) ) )}.toolbar-actions{grid-area:actions;display:flex;align-items:center;align-self:start;justify-self:end;justify-content:flex-end;gap:var(--p-table-toolbar-gap, 6px);min-height:var( --p-table-toolbar-min-height, var(--pfx-filter-h, 44px) );min-width:0}.praxis-toolbar.p-table-toolbar--align-start .toolbar-identity,.praxis-toolbar.p-table-toolbar--align-start .toolbar-actions{justify-self:start}.praxis-toolbar.p-table-toolbar--align-center .toolbar-identity,.praxis-toolbar.p-table-toolbar--align-center .toolbar-actions{justify-self:center}.praxis-toolbar.p-table-toolbar--align-end .toolbar-identity,.praxis-toolbar.p-table-toolbar--align-end .toolbar-actions{justify-self:end}.actions-group{display:flex;align-items:center;gap:var(--p-table-toolbar-actions-gap, 8px)}.business-actions,.utility-actions{display:flex;align-items:center;gap:var(--p-table-toolbar-actions-gap, 8px);min-width:0}.business-actions:empty,.utility-actions:empty{display:none}.action-btn:not(.praxis-icon-button){height:var(--p-table-toolbar-action-size, 40px);min-width:var(--p-table-toolbar-action-size, 40px);border-radius:var(--p-table-toolbar-action-radius, 8px);font-size:.875rem;font-weight:500;line-height:1.2;color:var(--p-table-toolbar-action-fg, inherit);background:var(--p-table-toolbar-action-bg, transparent)}.action-btn:not(.praxis-icon-button):hover:not(:disabled){background:var( --p-table-toolbar-action-hover-bg, var(--p-table-toolbar-action-hover-bg-default) )}.action-btn:not(.praxis-icon-button):focus-visible{outline:2px solid var( --p-table-toolbar-action-focus-ring, var(--p-table-toolbar-action-focus-ring-default) );outline-offset:2px}.action-btn--utility{color:var( --p-table-toolbar-status-fg, var(--p-table-toolbar-status-fg-default) )}.praxis-table-toolbar-action--columns.action-btn:not(.praxis-icon-button){width:var(--p-table-toolbar-action-size, 40px);padding:0}.praxis-table-toolbar-action--columns mat-icon{margin:0}.toolbar-icon-btn{width:var(--p-table-toolbar-action-size, 40px);height:var(--p-table-toolbar-action-size, 40px);border-radius:var(--p-table-toolbar-action-radius, 8px);color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary) 9%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 22%,transparent)}.toolbar-icon-btn:hover:not(:disabled){color:var(--md-sys-color-on-primary-container);background:color-mix(in srgb,var(--md-sys-color-primary) 16%,transparent);border-color:color-mix(in srgb,var(--md-sys-color-primary) 36%,transparent)}.action-btn--fab{width:42px;height:42px;box-shadow:none}.pfx-tonal{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.pfx-tonal:hover{background:var(--md-sys-color-secondary-container)}.mobile-actions{display:none;align-items:center;gap:var(--p-table-toolbar-actions-gap, 8px)}.overflow-trigger{height:var(--p-table-toolbar-action-size, 40px)}.action-btn .mat-icon,.action-btn--fab .mat-icon,.overflow-trigger .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.praxis-table-export-status{max-width:13rem;overflow:hidden;color:var(--p-table-toolbar-status-fg, currentColor);font-size:.75rem;font-weight:600;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.praxis-table-export-progress-icon{animation:praxis-table-export-spin .9s linear infinite}@keyframes praxis-table-export-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.praxis-table-export-progress-icon{animation:none}}.praxis-table-toolbar-action--columns .mat-icon{font-size:24px;width:24px;height:24px;line-height:24px}.praxis-table-column-menu-item.mat-mdc-menu-item{min-height:40px}.praxis-table-export-menu-item.mat-mdc-menu-item{min-width:280px;white-space:nowrap}.praxis-table-column-menu-content{align-items:center;display:flex;gap:10px;min-height:40px;width:100%}.praxis-table-column-menu-check.mat-icon{color:var(--md-sys-color-primary, currentColor);flex:0 0 20px;font-size:20px;height:20px;line-height:20px;margin-inline-end:0;width:20px}.praxis-table-quick-filters{grid-area:scope;align-self:start;align-items:center;display:flex;flex-wrap:nowrap;gap:6px;min-height:var(--p-table-toolbar-min-height, 44px)}.praxis-table-quick-filter.mat-mdc-outlined-button{min-height:40px;padding-inline:14px;white-space:nowrap}.praxis-table-quick-filter--active.mat-mdc-outlined-button{background:color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent);border-color:var(--md-sys-color-primary);color:var(--md-sys-color-primary)}.action-btn.mat-mdc-button-base,.action-btn--fab.mat-mdc-button-base,.overflow-trigger.mat-mdc-button-base,.toolbar-icon-btn.mat-mdc-button-base{--mdc-text-button-container-height: var( --p-table-toolbar-action-size, 36px );--mdc-filled-button-container-height: var( --p-table-toolbar-action-size, 36px );--mdc-protected-button-container-height: var( --p-table-toolbar-action-size, 36px );--mdc-outlined-button-container-height: var( --p-table-toolbar-action-size, 36px )}.action-btn.mat-mdc-unelevated-button:not(:disabled),.action-btn.mat-mdc-outlined-button:not(:disabled),.action-btn.pfx-tonal:not(:disabled){border-color:color-mix(in srgb,var(--md-sys-color-outline-variant, #d7dbe5) 82%,transparent)}.action-btn.mat-mdc-unelevated-button:not(:disabled){box-shadow:none}.action-btn.mat-mdc-unelevated-button.mat-primary:not(:disabled){--mdc-filled-button-container-color: var(--md-sys-color-primary);--mdc-filled-button-label-text-color: var(--md-sys-color-on-primary);--mat-filled-button-state-layer-color: var(--md-sys-color-on-primary);background:var(--md-sys-color-primary)!important;border-color:transparent;color:var(--md-sys-color-on-primary)!important;box-shadow:0 8px 18px color-mix(in srgb,var(--md-sys-color-primary) 22%,transparent)}.action-btn.mat-mdc-unelevated-button.mat-primary:not(:disabled):hover{background:color-mix(in srgb,var(--md-sys-color-primary) 88%,var(--md-sys-color-on-primary) 12%)!important}.action-btn.mat-mdc-unelevated-button.mat-primary:not(:disabled) .mat-icon{color:var(--md-sys-color-on-primary)!important}.action-btn.mat-mdc-button-base{padding-inline:12px}.end-actions{display:flex;align-items:center;gap:var(--p-table-toolbar-actions-gap, 8px);margin-inline-start:4px;padding-inline-start:12px;border-inline-start:1px solid var( --p-table-toolbar-divider-color, var(--p-table-toolbar-divider-color-default) )}.end-actions:empty{display:none;gap:0;margin-inline-start:0;padding-inline-start:0;border-inline-start:0}.praxis-toolbar-icon-action--primary{color:var(--md-sys-color-primary)}.praxis-toolbar-icon-action--accent{color:var(--md-sys-color-tertiary)}.praxis-toolbar-icon-action--warn{color:var(--md-sys-color-error)}.praxis-toolbar.p-table-toolbar--divider-between-groups .actions-group--has-business .utility-actions:not(:empty){margin-inline-start:4px;padding-inline-start:12px;border-inline-start:1px solid var( --p-table-toolbar-divider-color, var(--p-table-toolbar-divider-color-default) )}.praxis-toolbar.p-table-toolbar--divider-start:not(.praxis-toolbar--has-identity) .toolbar-query{padding-inline-end:12px;border-inline-end:1px solid var( --p-table-toolbar-divider-color, var(--p-table-toolbar-divider-color-default) )}.end-actions ::ng-deep .praxis-table-toolbar-action--ai,.end-actions ::ng-deep .praxis-table-ai-trigger{color:var( --p-table-toolbar-ai-accent-color, var(--p-table-toolbar-ai-accent-color-default) );background:color-mix(in srgb,var( --p-table-toolbar-ai-accent-color, var(--p-table-toolbar-ai-accent-color-default) ) 10%,transparent);border:1px solid color-mix(in srgb,var( --p-table-toolbar-ai-accent-color, var(--p-table-toolbar-ai-accent-color-default) ) 24%,transparent)}.end-actions ::ng-deep [data-role=table-settings]{color:var( --p-table-toolbar-status-fg, var(--p-table-toolbar-status-fg-default) )}@container praxis-table-toolbar (max-width: 960px){.actions-group{display:none}.mobile-actions{display:flex}.toolbar-actions{justify-content:flex-end}}@container praxis-table-toolbar (max-width: 720px){.praxis-toolbar.praxis-toolbar--has-query{grid-template-areas:\"query query query\" \"actions actions actions\"}.praxis-toolbar.praxis-toolbar--has-query.praxis-toolbar--has-scope{grid-template-areas:\"scope scope scope\" \"query query query\" \"actions actions actions\"}.praxis-toolbar.praxis-toolbar--has-identity{grid-template-areas:\"identity identity actions\" \"query query query\"}.praxis-toolbar.praxis-toolbar--has-identity.praxis-toolbar--has-scope{grid-template-areas:\"identity identity actions\" \"scope scope scope\" \"query query query\"}.toolbar-query{grid-template-columns:minmax(0,1fr)}.toolbar-query>:is(praxis-filter,[advancedFilter]),.toolbar-shortcuts{grid-column:1}.toolbar-shortcuts{justify-content:flex-start}.praxis-table-quick-filters{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}}@container praxis-table-toolbar (max-width: 540px){.praxis-toolbar.praxis-toolbar--has-identity{grid-template-areas:\"identity identity identity\" \"actions actions actions\" \"query query query\"}.praxis-toolbar.praxis-toolbar--has-identity.praxis-toolbar--has-scope{grid-template-areas:\"identity identity identity\" \"actions actions actions\" \"scope scope scope\" \"query query query\"}.toolbar-actions{justify-self:stretch;justify-content:flex-end}.toolbar-actions,.toolbar-query{--p-table-toolbar-action-size: 44px}.toolbar-identity__subtitle{display:none}.praxis-table-quick-filter.mat-mdc-outlined-button{min-height:44px}}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
2736
+ }
2737
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisTableToolbar, decorators: [{
2738
+ type: Component,
2739
+ args: [{ selector: 'praxis-table-toolbar', standalone: true, imports: [
2740
+ MatToolbarModule,
2741
+ MatButtonModule,
2742
+ MatIconModule,
2743
+ PraxisIconDirective,
2744
+ PraxisIconButtonComponent,
2745
+ MatMenuModule,
2746
+ MatTooltipModule,
2747
+ NgTemplateOutlet,
2748
+ ], template: `
2749
+ <mat-toolbar
2750
+ class="praxis-toolbar"
2751
+ role="group"
2752
+ [attr.aria-label]="getToolbarAriaLabel()"
2753
+ [class.praxis-toolbar--has-identity]="showMain && hasToolbarIdentity()"
2754
+ [class.praxis-toolbar--has-query]="showMain"
2755
+ [class.praxis-toolbar--has-scope]="showMain && shouldShowQuickFilters()"
2756
+ [class.p-table-toolbar--flat]="getToolbarVariant() === 'flat'"
2757
+ [class.p-table-toolbar--outlined]="getToolbarVariant() === 'outlined'"
2758
+ [class.p-table-toolbar--elevated]="getToolbarVariant() === 'elevated'"
2759
+ [class.p-table-toolbar--integrated]="getToolbarVariant() === 'integrated'"
2760
+ [class.p-table-toolbar--compact]="getToolbarDensity() === 'compact'"
2761
+ [class.p-table-toolbar--comfortable]="
2762
+ getToolbarDensity() === 'comfortable'
2763
+ "
2764
+ [class.p-table-toolbar--spacious]="getToolbarDensity() === 'spacious'"
2765
+ [class.p-table-toolbar--square]="getToolbarShape() === 'square'"
2766
+ [class.p-table-toolbar--rounded]="getToolbarShape() === 'rounded'"
2767
+ [class.p-table-toolbar--pill]="getToolbarShape() === 'pill'"
2768
+ [class.p-table-toolbar--divider-start]="getToolbarDivider() === 'start'"
2769
+ [class.p-table-toolbar--divider-between-groups]="
2770
+ getToolbarDivider() === 'between-groups'
2771
+ "
2772
+ [class.p-table-toolbar--align-start]="
2773
+ getToolbarLayoutAlignment() === 'start'
2774
+ "
2775
+ [class.p-table-toolbar--align-center]="
2776
+ getToolbarLayoutAlignment() === 'center'
2777
+ "
2778
+ [class.p-table-toolbar--align-end]="getToolbarLayoutAlignment() === 'end'"
2779
+ [class.p-table-toolbar--layout-separator]="shouldShowLayoutSeparator()"
2780
+ [style.--p-table-toolbar-bg]="getToolbarToken('bg')"
2781
+ [style.--p-table-toolbar-fg]="getToolbarToken('fg')"
2782
+ [style.--p-table-toolbar-border-color]="getToolbarToken('borderColor')"
2783
+ [style.--p-table-toolbar-border-width]="getToolbarToken('borderWidth')"
2784
+ [style.--p-table-toolbar-radius]="getToolbarToken('radius')"
2785
+ [style.--p-table-toolbar-shadow]="getToolbarToken('shadow')"
2786
+ [style.--p-table-toolbar-padding-block]="getToolbarToken('paddingBlock')"
2787
+ [style.--p-table-toolbar-padding-inline]="
2788
+ getToolbarToken('paddingInline')
2789
+ "
2790
+ [style.--p-table-toolbar-min-height]="getToolbarToken('minHeight')"
2791
+ [style.--p-table-toolbar-gap]="getToolbarToken('gap')"
2792
+ [style.--p-table-toolbar-actions-gap]="getToolbarToken('actionsGap')"
2793
+ [style.--p-table-toolbar-divider-color]="getToolbarToken('dividerColor')"
2794
+ [style.--p-table-toolbar-action-size]="getToolbarToken('actionSize')"
2795
+ [style.--p-table-toolbar-action-radius]="getToolbarToken('actionRadius')"
2796
+ [style.--p-table-toolbar-action-bg]="getToolbarToken('actionBg')"
2797
+ [style.--p-table-toolbar-action-fg]="getToolbarToken('actionFg')"
2798
+ [style.--p-table-toolbar-action-hover-bg]="
2799
+ getToolbarToken('actionHoverBg')
2800
+ "
2801
+ [style.--p-table-toolbar-action-active-bg]="
2802
+ getToolbarToken('actionActiveBg')
2803
+ "
2804
+ [style.--p-table-toolbar-action-focus-ring]="
2805
+ getToolbarToken('actionFocusRing')
2806
+ "
2807
+ [style.--p-table-toolbar-ai-accent-color]="
2808
+ getToolbarToken('aiAccentColor')
2809
+ "
2810
+ [style.--p-table-toolbar-status-fg]="getToolbarToken('statusFg')"
2811
+ [style.--p-table-toolbar-title-fg]="getToolbarToken('titleFg')"
2812
+ [style.--p-table-toolbar-subtitle-fg]="getToolbarToken('subtitleFg')"
2813
+ [style.--p-table-toolbar-icon-fg]="getToolbarToken('iconFg')"
2814
+ [style.--p-table-toolbar-title-font-size]="
2815
+ getToolbarToken('titleFontSize')
2816
+ "
2817
+ [style.--p-table-toolbar-subtitle-font-size]="
2818
+ getToolbarToken('subtitleFontSize')
2819
+ "
2820
+ [style.--p-table-toolbar-title-font-weight]="
2821
+ getToolbarToken('titleFontWeight')
2822
+ "
2823
+ [style.--p-table-toolbar-identity-gap]="getToolbarToken('identityGap')"
2824
+ [style.--p-table-toolbar-identity-filter-gap]="
2825
+ getToolbarToken('identityFilterGap')
2826
+ "
2827
+ [style.--p-table-toolbar-identity-min-height]="
2828
+ getToolbarToken('identityMinHeight')
2829
+ "
2830
+ [style.--p-table-toolbar-identity-margin-bottom]="
2831
+ getToolbarToken('identityMarginBottom')
2832
+ "
2833
+ [style.--p-table-toolbar-identity-icon-size]="
2834
+ getToolbarToken('identityIconSize')
2835
+ "
2836
+ [style.--p-table-toolbar-identity-icon-radius]="
2837
+ getToolbarToken('identityIconRadius')
2838
+ "
2839
+ [style.--p-table-toolbar-layout-padding]="getToolbarLayoutPadding()"
2840
+ >
2841
+ @if (showMain && hasToolbarIdentity()) {
2842
+ <div
2843
+ class="toolbar-identity"
2844
+ role="group"
2845
+ data-toolbar-region="identity"
2846
+ [attr.aria-label]="getToolbarIdentityLabel()"
2847
+ [matTooltip]="getToolbarIdentityTooltip()"
2848
+ matTooltipPosition="below"
2849
+ [matTooltipShowDelay]="450"
2850
+ [class.toolbar-identity--center]="getToolbarTextAlign() === 'center'"
2851
+ [class.toolbar-identity--end]="getToolbarTextAlign() === 'end'"
2852
+ >
2853
+ @if (getToolbarIcon()) {
2854
+ <span class="toolbar-identity__icon" aria-hidden="true">
2855
+ <mat-icon [praxisIcon]="getToolbarIcon()!"></mat-icon>
2856
+ </span>
2857
+ }
2858
+ <span class="toolbar-identity__copy">
2859
+ @if (getToolbarTitle()) {
2860
+ <span class="toolbar-identity__title">{{
2861
+ getToolbarTitle()
2862
+ }}</span>
3019
2863
  }
3020
- @if (isColumnsVisibilityEnabled()) {
3021
- <button
3022
- mat-menu-item
3023
- [matMenuTriggerFor]="mobileColumnsMenu"
3024
- class="praxis-table-compact-command--columns"
3025
- >
3026
- <mat-icon [praxisIcon]="getColumnsVisibilityIcon()"></mat-icon>
3027
- {{ getColumnsVisibilityLabel() }}
3028
- </button>
2864
+ @if (getToolbarSubtitle()) {
2865
+ <span class="toolbar-identity__subtitle">{{
2866
+ getToolbarSubtitle()
2867
+ }}</span>
3029
2868
  }
3030
- @if (isDensityToggleEnabled()) {
2869
+ </span>
2870
+ </div>
2871
+ }
2872
+
2873
+ @if (!showMain || hasToolbarIdentity()) {
2874
+ <ng-container [ngTemplateOutlet]="toolbarCommands"></ng-container>
2875
+ }
2876
+
2877
+ @if (showMain) {
2878
+ @if (shouldShowQuickFilters()) {
2879
+ <div
2880
+ class="praxis-table-quick-filters"
2881
+ role="group"
2882
+ data-toolbar-region="scope"
2883
+ [attr.aria-label]="getQuickFiltersLabel()"
2884
+ >
2885
+ @for (quickFilter of getQuickFilters(); track quickFilter.id) {
3031
2886
  <button
3032
- mat-menu-item
3033
- [matMenuTriggerFor]="mobileDensityMenu"
3034
- class="praxis-table-toolbar-action--density"
2887
+ type="button"
2888
+ mat-stroked-button
2889
+ class="praxis-table-quick-filter"
2890
+ [class.praxis-table-quick-filter--active]="
2891
+ isQuickFilterActive(quickFilter.id)
2892
+ "
2893
+ [attr.aria-pressed]="isQuickFilterActive(quickFilter.id)"
2894
+ (click)="emitQuickFilterChange($event, quickFilter)"
3035
2895
  >
3036
- <mat-icon [praxisIcon]="'density_medium'"></mat-icon>
3037
- {{ getDensityToggleLabel() }}
2896
+ @if (quickFilter.icon) {
2897
+ <mat-icon [praxisIcon]="quickFilter.icon"></mat-icon>
2898
+ }
2899
+ {{ getQuickFilterLabel(quickFilter) }}
3038
2900
  </button>
3039
2901
  }
3040
- </mat-menu>
2902
+ </div>
2903
+ }
2904
+ <div
2905
+ class="toolbar-query"
2906
+ role="group"
2907
+ data-toolbar-region="query"
2908
+ [attr.aria-label]="getToolbarLeadingLabel()"
2909
+ >
2910
+ <ng-content select="[advancedFilter]"></ng-content>
2911
+ <div class="toolbar-shortcuts" data-toolbar-region="query-shortcuts">
2912
+ <ng-content select="[toolbar]"></ng-content>
2913
+ </div>
2914
+ </div>
2915
+ }
3041
2916
 
3042
- <mat-menu #mobileExportMenu="matMenu">
3043
- @if (config?.export?.enabled) {
3044
- @for (format of config?.export?.formats; track format) {
3045
- <button
3046
- mat-menu-item
3047
- class="praxis-table-export-menu-item"
3048
- [disabled]="exportBusy"
3049
- [matTooltip]="getExportFormatTooltip(format)"
3050
- [attr.aria-label]="getExportFormatAriaLabel(format)"
3051
- (click)="emitExportAction($event, format)"
3052
- >
3053
- <mat-icon [praxisIcon]="getExportIcon(format)"></mat-icon>
3054
- {{ getExportFormatLabel(format) }}
3055
- </button>
3056
- @if (isVisibleExcelExportEnabled(format)) {
2917
+ @if (showMain && !hasToolbarIdentity()) {
2918
+ <ng-container [ngTemplateOutlet]="toolbarCommands"></ng-container>
2919
+ }
2920
+
2921
+ <ng-template #toolbarCommands>
2922
+ <div class="toolbar-actions" data-toolbar-region="commands">
2923
+ @if (showActionsGroup) {
2924
+ <div
2925
+ class="actions-group"
2926
+ role="group"
2927
+ [class.actions-group--has-business]="hasBusinessActions()"
2928
+ [attr.aria-label]="getToolbarActionsLabel()"
2929
+ >
2930
+ <div class="business-actions">
2931
+ @for (action of getStartActions(); track getActionId(action)) {
2932
+ @if (getActionType(action) === 'icon') {
2933
+ <button
2934
+ class="action-btn"
2935
+ [praxisIconButton]="action.icon || 'bolt'"
2936
+ size="compact"
2937
+ [class.praxis-toolbar-icon-action--primary]="
2938
+ getActionColor(action) === 'primary'
2939
+ "
2940
+ [class.praxis-toolbar-icon-action--accent]="
2941
+ getActionColor(action) === 'accent'
2942
+ "
2943
+ [class.praxis-toolbar-icon-action--warn]="
2944
+ getActionColor(action) === 'warn'
2945
+ "
2946
+ [disabled]="isActionDisabled(action)"
2947
+ (click)="
2948
+ emitToolbarAction($event, getActionId(action), action)
2949
+ "
2950
+ [attr.aria-label]="getActionAriaLabel(action)"
2951
+ [matTooltip]="
2952
+ getActionTooltip(action) ||
2953
+ action.label ||
2954
+ getActionId(action)
2955
+ "
2956
+ matTooltipPosition="below"
2957
+ ></button>
2958
+ } @else if (getActionType(action) === 'fab') {
2959
+ <button
2960
+ class="action-btn--fab"
2961
+ mat-fab
2962
+ [color]="getActionColor(action)"
2963
+ [disabled]="isActionDisabled(action)"
2964
+ (click)="
2965
+ emitToolbarAction($event, getActionId(action), action)
2966
+ "
2967
+ [attr.aria-label]="getActionAriaLabel(action)"
2968
+ [matTooltip]="
2969
+ getActionTooltip(action) ||
2970
+ action.label ||
2971
+ getActionId(action)
2972
+ "
2973
+ matTooltipPosition="below"
2974
+ >
2975
+ <mat-icon [praxisIcon]="action.icon || 'bolt'"></mat-icon>
2976
+ </button>
2977
+ } @else if (
2978
+ getActionType(action) === 'menu' &&
2979
+ getVisibleActionChildren(action).length
2980
+ ) {
2981
+ <button
2982
+ class="action-btn"
2983
+ mat-button
2984
+ [color]="getActionColor(action)"
2985
+ [disabled]="isActionDisabled(action)"
2986
+ [matTooltip]="getActionTooltip(action)"
2987
+ [matMenuTriggerFor]="startActionMenu"
2988
+ [attr.aria-label]="getActionAriaLabel(action)"
2989
+ >
2990
+ @if (action.icon) {
2991
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
2992
+ }
2993
+ {{ action.label }}
2994
+ </button>
2995
+ <mat-menu #startActionMenu="matMenu">
2996
+ @for (
2997
+ child of getVisibleActionChildren(action);
2998
+ track getActionId(child)
2999
+ ) {
3000
+ <button
3001
+ mat-menu-item
3002
+ [disabled]="isActionDisabled(child)"
3003
+ [matTooltip]="getActionTooltip(child)"
3004
+ (click)="
3005
+ emitToolbarAction($event, getActionId(child), child)
3006
+ "
3007
+ >
3008
+ @if (child.icon) {
3009
+ <mat-icon [praxisIcon]="child.icon"></mat-icon>
3010
+ }
3011
+ {{ child.label || getActionId(child) }}
3012
+ </button>
3013
+ }
3014
+ </mat-menu>
3015
+ } @else if (isMenuWithoutChildren(action)) {
3016
+ <button
3017
+ class="action-btn"
3018
+ mat-button
3019
+ [color]="getActionColor(action)"
3020
+ [disabled]="isActionDisabled(action)"
3021
+ [matTooltip]="getActionTooltip(action)"
3022
+ (click)="
3023
+ emitToolbarAction($event, getActionId(action), action)
3024
+ "
3025
+ [attr.aria-label]="getActionAriaLabel(action)"
3026
+ >
3027
+ @if (action.icon) {
3028
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
3029
+ }
3030
+ {{ action.label }}
3031
+ </button>
3032
+ } @else if (action.appearance === 'outlined') {
3033
+ <button
3034
+ class="action-btn"
3035
+ mat-stroked-button
3036
+ [color]="getActionColor(action)"
3037
+ [disabled]="isActionDisabled(action)"
3038
+ [matTooltip]="getActionTooltip(action)"
3039
+ (click)="
3040
+ emitToolbarAction($event, getActionId(action), action)
3041
+ "
3042
+ [attr.aria-label]="getActionAriaLabel(action)"
3043
+ >
3044
+ @if (action.icon) {
3045
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
3046
+ }
3047
+ {{ action.label }}
3048
+ </button>
3049
+ } @else if (action.appearance === 'elevated') {
3050
+ <button
3051
+ class="action-btn"
3052
+ mat-raised-button
3053
+ [color]="getActionColor(action)"
3054
+ [disabled]="isActionDisabled(action)"
3055
+ [matTooltip]="getActionTooltip(action)"
3056
+ (click)="
3057
+ emitToolbarAction($event, getActionId(action), action)
3058
+ "
3059
+ [attr.aria-label]="getActionAriaLabel(action)"
3060
+ >
3061
+ @if (action.icon) {
3062
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
3063
+ }
3064
+ {{ action.label }}
3065
+ </button>
3066
+ } @else if (action.appearance === 'text') {
3067
+ <button
3068
+ class="action-btn"
3069
+ mat-button
3070
+ [color]="getActionColor(action)"
3071
+ [disabled]="isActionDisabled(action)"
3072
+ [matTooltip]="getActionTooltip(action)"
3073
+ (click)="
3074
+ emitToolbarAction($event, getActionId(action), action)
3075
+ "
3076
+ [attr.aria-label]="getActionAriaLabel(action)"
3077
+ >
3078
+ @if (action.icon) {
3079
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
3080
+ }
3081
+ {{ action.label }}
3082
+ </button>
3083
+ } @else if (action.appearance === 'tonal') {
3084
+ <button
3085
+ class="action-btn pfx-tonal"
3086
+ mat-button
3087
+ [color]="getActionColor(action)"
3088
+ [disabled]="isActionDisabled(action)"
3089
+ [matTooltip]="getActionTooltip(action)"
3090
+ (click)="
3091
+ emitToolbarAction($event, getActionId(action), action)
3092
+ "
3093
+ [attr.aria-label]="getActionAriaLabel(action)"
3094
+ >
3095
+ @if (action.icon) {
3096
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
3097
+ }
3098
+ {{ action.label }}
3099
+ </button>
3100
+ } @else {
3101
+ <button
3102
+ class="action-btn"
3103
+ mat-flat-button
3104
+ [color]="getActionColor(action)"
3105
+ [disabled]="isActionDisabled(action)"
3106
+ [matTooltip]="getActionTooltip(action)"
3107
+ (click)="
3108
+ emitToolbarAction($event, getActionId(action), action)
3109
+ "
3110
+ [attr.aria-label]="getActionAriaLabel(action)"
3111
+ >
3112
+ @if (action.icon) {
3113
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
3114
+ }
3115
+ {{ action.label }}
3116
+ </button>
3117
+ }
3118
+ }
3119
+
3120
+ @for (
3121
+ action of getNonStartActions();
3122
+ track getActionId(action)
3123
+ ) {
3124
+ @if (getActionType(action) === 'icon') {
3125
+ <button
3126
+ class="action-btn"
3127
+ [praxisIconButton]="action.icon || 'bolt'"
3128
+ size="compact"
3129
+ [class.praxis-toolbar-icon-action--primary]="
3130
+ getActionColor(action) === 'primary'
3131
+ "
3132
+ [class.praxis-toolbar-icon-action--accent]="
3133
+ getActionColor(action) === 'accent'
3134
+ "
3135
+ [class.praxis-toolbar-icon-action--warn]="
3136
+ getActionColor(action) === 'warn'
3137
+ "
3138
+ [disabled]="isActionDisabled(action)"
3139
+ (click)="
3140
+ emitToolbarAction($event, getActionId(action), action)
3141
+ "
3142
+ [attr.aria-label]="getActionAriaLabel(action)"
3143
+ [matTooltip]="
3144
+ getActionTooltip(action) ||
3145
+ action.label ||
3146
+ getActionId(action)
3147
+ "
3148
+ matTooltipPosition="below"
3149
+ ></button>
3150
+ } @else if (getActionType(action) === 'fab') {
3151
+ <button
3152
+ class="action-btn--fab"
3153
+ mat-fab
3154
+ [color]="getActionColor(action)"
3155
+ [disabled]="isActionDisabled(action)"
3156
+ (click)="
3157
+ emitToolbarAction($event, getActionId(action), action)
3158
+ "
3159
+ [attr.aria-label]="getActionAriaLabel(action)"
3160
+ [matTooltip]="
3161
+ getActionTooltip(action) ||
3162
+ action.label ||
3163
+ getActionId(action)
3164
+ "
3165
+ matTooltipPosition="below"
3166
+ >
3167
+ <mat-icon [praxisIcon]="action.icon || 'bolt'"></mat-icon>
3168
+ </button>
3169
+ } @else if (
3170
+ getActionType(action) === 'menu' &&
3171
+ getVisibleActionChildren(action).length
3172
+ ) {
3173
+ <button
3174
+ class="action-btn"
3175
+ mat-button
3176
+ [color]="getActionColor(action)"
3177
+ [disabled]="isActionDisabled(action)"
3178
+ [matTooltip]="getActionTooltip(action)"
3179
+ [matMenuTriggerFor]="endActionMenu"
3180
+ [attr.aria-label]="getActionAriaLabel(action)"
3181
+ >
3182
+ @if (action.icon) {
3183
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
3184
+ }
3185
+ {{ action.label }}
3186
+ </button>
3187
+ <mat-menu #endActionMenu="matMenu">
3188
+ @for (
3189
+ child of getVisibleActionChildren(action);
3190
+ track getActionId(child)
3191
+ ) {
3192
+ <button
3193
+ mat-menu-item
3194
+ [disabled]="isActionDisabled(child)"
3195
+ [matTooltip]="getActionTooltip(child)"
3196
+ (click)="
3197
+ emitToolbarAction($event, getActionId(child), child)
3198
+ "
3199
+ >
3200
+ @if (child.icon) {
3201
+ <mat-icon [praxisIcon]="child.icon"></mat-icon>
3202
+ }
3203
+ {{ child.label || getActionId(child) }}
3204
+ </button>
3205
+ }
3206
+ </mat-menu>
3207
+ } @else if (isMenuWithoutChildren(action)) {
3208
+ <button
3209
+ class="action-btn"
3210
+ mat-button
3211
+ [color]="getActionColor(action)"
3212
+ [disabled]="isActionDisabled(action)"
3213
+ [matTooltip]="getActionTooltip(action)"
3214
+ (click)="
3215
+ emitToolbarAction($event, getActionId(action), action)
3216
+ "
3217
+ [attr.aria-label]="getActionAriaLabel(action)"
3218
+ >
3219
+ @if (action.icon) {
3220
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
3221
+ }
3222
+ {{ action.label }}
3223
+ </button>
3224
+ } @else if (action.appearance === 'outlined') {
3225
+ <button
3226
+ class="action-btn"
3227
+ mat-stroked-button
3228
+ [color]="getActionColor(action)"
3229
+ [disabled]="isActionDisabled(action)"
3230
+ [matTooltip]="getActionTooltip(action)"
3231
+ (click)="
3232
+ emitToolbarAction($event, getActionId(action), action)
3233
+ "
3234
+ [attr.aria-label]="getActionAriaLabel(action)"
3235
+ >
3236
+ @if (action.icon) {
3237
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
3238
+ }
3239
+ {{ action.label }}
3240
+ </button>
3241
+ } @else if (action.appearance === 'elevated') {
3242
+ <button
3243
+ class="action-btn"
3244
+ mat-raised-button
3245
+ [color]="getActionColor(action)"
3246
+ [disabled]="isActionDisabled(action)"
3247
+ [matTooltip]="getActionTooltip(action)"
3248
+ (click)="
3249
+ emitToolbarAction($event, getActionId(action), action)
3250
+ "
3251
+ [attr.aria-label]="getActionAriaLabel(action)"
3252
+ >
3253
+ @if (action.icon) {
3254
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
3255
+ }
3256
+ {{ action.label }}
3257
+ </button>
3258
+ } @else if (action.appearance === 'text') {
3259
+ <button
3260
+ class="action-btn"
3261
+ mat-button
3262
+ [color]="getActionColor(action)"
3263
+ [disabled]="isActionDisabled(action)"
3264
+ [matTooltip]="getActionTooltip(action)"
3265
+ (click)="
3266
+ emitToolbarAction($event, getActionId(action), action)
3267
+ "
3268
+ [attr.aria-label]="getActionAriaLabel(action)"
3269
+ >
3270
+ @if (action.icon) {
3271
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
3272
+ }
3273
+ {{ action.label }}
3274
+ </button>
3275
+ } @else if (action.appearance === 'tonal') {
3276
+ <button
3277
+ class="action-btn pfx-tonal"
3278
+ mat-button
3279
+ [color]="getActionColor(action)"
3280
+ [disabled]="isActionDisabled(action)"
3281
+ [matTooltip]="getActionTooltip(action)"
3282
+ (click)="
3283
+ emitToolbarAction($event, getActionId(action), action)
3284
+ "
3285
+ [attr.aria-label]="getActionAriaLabel(action)"
3286
+ >
3287
+ @if (action.icon) {
3288
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
3289
+ }
3290
+ {{ action.label }}
3291
+ </button>
3292
+ } @else {
3293
+ <button
3294
+ class="action-btn"
3295
+ mat-flat-button
3296
+ [color]="getActionColor(action)"
3297
+ [disabled]="isActionDisabled(action)"
3298
+ [matTooltip]="getActionTooltip(action)"
3299
+ (click)="
3300
+ emitToolbarAction($event, getActionId(action), action)
3301
+ "
3302
+ [attr.aria-label]="getActionAriaLabel(action)"
3303
+ >
3304
+ @if (action.icon) {
3305
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
3306
+ }
3307
+ {{ action.label }}
3308
+ </button>
3309
+ }
3310
+ }
3311
+
3312
+ @if (shouldRenderToolbarBulkActions()) {
3313
+ @for (
3314
+ action of getBulkToolbarActions();
3315
+ track getActionId(action)
3316
+ ) {
3317
+ <button
3318
+ class="action-btn"
3319
+ mat-button
3320
+ [color]="getActionColor(action)"
3321
+ [disabled]="isActionDisabled(action)"
3322
+ [matTooltip]="getActionTooltip(action)"
3323
+ (click)="
3324
+ emitToolbarAction($event, getActionId(action), action)
3325
+ "
3326
+ [attr.aria-label]="getActionAriaLabel(action)"
3327
+ >
3328
+ @if (action.icon) {
3329
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
3330
+ }
3331
+ {{ action.label }}
3332
+ </button>
3333
+ }
3334
+ }
3335
+ </div>
3336
+
3337
+ <div class="utility-actions">
3338
+ @if (config?.export?.enabled) {
3057
3339
  <button
3058
- mat-menu-item
3059
- class="praxis-table-export-menu-item"
3340
+ class="action-btn action-btn--utility"
3341
+ mat-button
3342
+ [matMenuTriggerFor]="exportMenu"
3343
+ [attr.aria-label]="getExportDataLabel()"
3344
+ [attr.aria-busy]="exportBusy"
3060
3345
  [disabled]="exportBusy"
3061
- [matTooltip]="getVisibleExcelExportDescription()"
3062
- [attr.aria-label]="getVisibleExcelExportAriaLabel()"
3063
- (click)="emitVisibleExcelExportAction($event)"
3346
+ [matTooltip]="getExportDataLabel()"
3347
+ matTooltipPosition="below"
3064
3348
  >
3065
- <mat-icon [praxisIcon]="'table_view'"></mat-icon>
3066
- {{ getVisibleExcelExportLabel() }}
3349
+ <mat-icon
3350
+ [class.praxis-table-export-progress-icon]="exportBusy"
3351
+ [praxisIcon]="
3352
+ exportBusy ? 'progress_activity' : 'download'
3353
+ "
3354
+ ></mat-icon>
3067
3355
  </button>
3356
+ @if (exportBusy && exportStatusMessage) {
3357
+ <span
3358
+ class="praxis-table-export-status"
3359
+ role="status"
3360
+ aria-live="polite"
3361
+ >
3362
+ {{ exportStatusMessage }}
3363
+ </span>
3364
+ }
3365
+ <mat-menu #exportMenu="matMenu">
3366
+ @for (format of config?.export?.formats; track format) {
3367
+ <button
3368
+ mat-menu-item
3369
+ class="praxis-table-export-menu-item"
3370
+ [disabled]="exportBusy"
3371
+ [matTooltip]="getExportFormatTooltip(format)"
3372
+ [attr.aria-label]="getExportFormatAriaLabel(format)"
3373
+ (click)="emitExportAction($event, format)"
3374
+ >
3375
+ <mat-icon
3376
+ [praxisIcon]="getExportIcon(format)"
3377
+ ></mat-icon>
3378
+ {{ getExportFormatLabel(format) }}
3379
+ </button>
3380
+ @if (isVisibleExcelExportEnabled(format)) {
3381
+ <button
3382
+ mat-menu-item
3383
+ class="praxis-table-export-menu-item"
3384
+ [disabled]="exportBusy"
3385
+ [matTooltip]="getVisibleExcelExportDescription()"
3386
+ [attr.aria-label]="getVisibleExcelExportAriaLabel()"
3387
+ (click)="emitVisibleExcelExportAction($event)"
3388
+ >
3389
+ <mat-icon [praxisIcon]="'table_view'"></mat-icon>
3390
+ {{ getVisibleExcelExportLabel() }}
3391
+ </button>
3392
+ }
3393
+ }
3394
+ </mat-menu>
3068
3395
  }
3069
- }
3070
- }
3071
- </mat-menu>
3072
3396
 
3073
- <mat-menu #mobileColumnsMenu="matMenu" class="praxis-table-columns-menu">
3074
- @if (isColumnsVisibilityEnabled()) {
3075
- @for (column of config?.columns; track column.field) {
3076
- <button
3077
- mat-menu-item
3078
- type="button"
3079
- class="praxis-table-column-menu-item"
3080
- role="menuitemcheckbox"
3081
- [attr.aria-checked]="column.visible !== false"
3082
- [disabled]="isColumnVisibilityToggleDisabled(column)"
3083
- (keydown.enter)="onColumnVisibilityMenuToggle($event, column.field, column.visible !== false)"
3084
- (keydown.space)="onColumnVisibilityMenuToggle($event, column.field, column.visible !== false)"
3085
- >
3086
- <span
3087
- class="praxis-table-column-menu-content"
3088
- (mousedown)="onColumnVisibilityMenuToggle($event, column.field, column.visible !== false)"
3089
- (click)="$event.preventDefault(); $event.stopPropagation()"
3397
+ @if (isColumnsVisibilityEnabled()) {
3398
+ <button
3399
+ class="action-btn action-btn--utility praxis-table-toolbar-action--columns"
3400
+ mat-button
3401
+ [matMenuTriggerFor]="columnsMenu"
3402
+ [attr.aria-label]="getColumnsVisibilityLabel()"
3403
+ [matTooltip]="getColumnsVisibilityLabel()"
3404
+ matTooltipPosition="below"
3090
3405
  >
3091
3406
  <mat-icon
3092
- class="praxis-table-column-menu-check"
3093
- [praxisIcon]="column.visible !== false ? 'check_box' : 'check_box_outline_blank'"
3094
- aria-hidden="true"
3407
+ [praxisIcon]="getColumnsVisibilityIcon()"
3095
3408
  ></mat-icon>
3096
- <span>{{ column.header || column.field }}</span>
3097
- </span>
3098
- </button>
3099
- }
3100
- }
3101
- </mat-menu>
3409
+ </button>
3410
+ <mat-menu
3411
+ #columnsMenu="matMenu"
3412
+ class="praxis-table-columns-menu"
3413
+ >
3414
+ @for (column of config?.columns; track column.field) {
3415
+ <button
3416
+ mat-menu-item
3417
+ type="button"
3418
+ class="praxis-table-column-menu-item"
3419
+ role="menuitemcheckbox"
3420
+ [attr.aria-checked]="column.visible !== false"
3421
+ [disabled]="isColumnVisibilityToggleDisabled(column)"
3422
+ (keydown.enter)="
3423
+ onColumnVisibilityMenuToggle(
3424
+ $event,
3425
+ column.field,
3426
+ column.visible !== false
3427
+ )
3428
+ "
3429
+ (keydown.space)="
3430
+ onColumnVisibilityMenuToggle(
3431
+ $event,
3432
+ column.field,
3433
+ column.visible !== false
3434
+ )
3435
+ "
3436
+ >
3437
+ <span
3438
+ class="praxis-table-column-menu-content"
3439
+ (mousedown)="
3440
+ onColumnVisibilityMenuToggle(
3441
+ $event,
3442
+ column.field,
3443
+ column.visible !== false
3444
+ )
3445
+ "
3446
+ (click)="
3447
+ $event.preventDefault(); $event.stopPropagation()
3448
+ "
3449
+ >
3450
+ <mat-icon
3451
+ class="praxis-table-column-menu-check"
3452
+ [praxisIcon]="
3453
+ column.visible !== false
3454
+ ? 'check_box'
3455
+ : 'check_box_outline_blank'
3456
+ "
3457
+ aria-hidden="true"
3458
+ ></mat-icon>
3459
+ <span>{{ column.header || column.field }}</span>
3460
+ </span>
3461
+ </button>
3462
+ }
3463
+ </mat-menu>
3464
+ }
3465
+ @if (isDensityToggleEnabled()) {
3466
+ <button
3467
+ class="action-btn action-btn--utility praxis-table-toolbar-action--density"
3468
+ mat-button
3469
+ [matMenuTriggerFor]="densityMenu"
3470
+ [attr.aria-label]="getDensityToggleLabel()"
3471
+ [matTooltip]="getDensityToggleLabel()"
3472
+ matTooltipPosition="below"
3473
+ >
3474
+ <mat-icon [praxisIcon]="'density_medium'"></mat-icon>
3475
+ </button>
3476
+ <mat-menu
3477
+ #densityMenu="matMenu"
3478
+ class="praxis-table-density-menu"
3479
+ >
3480
+ @for (density of getDensityOptions(); track density) {
3481
+ <button
3482
+ mat-menu-item
3483
+ type="button"
3484
+ [attr.aria-current]="
3485
+ isDensityActive(density) ? 'true' : null
3486
+ "
3487
+ (click)="emitDensityChange($event, density)"
3488
+ >
3489
+ <mat-icon
3490
+ [praxisIcon]="
3491
+ isDensityActive(density)
3492
+ ? 'check'
3493
+ : getDensityIcon(density)
3494
+ "
3495
+ ></mat-icon>
3496
+ {{ getDensityLabel(density) }}
3497
+ </button>
3498
+ }
3499
+ </mat-menu>
3500
+ }
3501
+ </div>
3502
+ </div>
3503
+ }
3504
+ @if (showEndActions) {
3505
+ <div
3506
+ class="end-actions"
3507
+ role="group"
3508
+ [attr.aria-label]="getToolbarConfigurationLabel()"
3509
+ >
3510
+ <ng-content select="[end-actions]"></ng-content>
3511
+ </div>
3512
+ }
3102
3513
 
3103
- <mat-menu #mobileDensityMenu="matMenu" class="praxis-table-density-menu">
3104
- @if (isDensityToggleEnabled()) {
3105
- @for (density of getDensityOptions(); track density) {
3514
+ @if (showMobileActions) {
3515
+ <div
3516
+ class="mobile-actions"
3517
+ role="group"
3518
+ [attr.aria-label]="getToolbarActionsLabel()"
3519
+ >
3520
+ @if (hasCompactCommands()) {
3106
3521
  <button
3107
- mat-menu-item
3108
- type="button"
3109
- [attr.aria-current]="isDensityActive(density) ? 'true' : null"
3110
- (click)="emitDensityChange($event, density)"
3522
+ #overflowMenuTrigger="matMenuTrigger"
3523
+ praxisIconButton="more_vert"
3524
+ size="compact"
3525
+ class="overflow-trigger"
3526
+ [matMenuTriggerFor]="compactCommandsMenu"
3527
+ (click)="
3528
+ setActiveOverflowMenuTrigger(
3529
+ overflowMenuTrigger,
3530
+ $event.currentTarget
3531
+ )
3532
+ "
3533
+ (menuOpened)="
3534
+ setActiveOverflowMenuTrigger(overflowMenuTrigger)
3535
+ "
3536
+ [attr.data-praxis-focus-key]="getFocusOriginKey('overflow')"
3537
+ [attr.aria-label]="getMoreActionsLabel()"
3538
+ [matTooltip]="getMoreActionsLabel()"
3539
+ matTooltipPosition="below"
3540
+ ></button>
3541
+ <mat-menu #compactCommandsMenu="matMenu">
3542
+ @for (
3543
+ action of getOverflowActions();
3544
+ track getActionId(action)
3545
+ ) {
3546
+ <button
3547
+ mat-menu-item
3548
+ [disabled]="isActionDisabled(action)"
3549
+ [matTooltip]="getActionTooltip(action)"
3550
+ (click)="
3551
+ emitOverflowToolbarAction(
3552
+ $event,
3553
+ getActionId(action),
3554
+ action
3555
+ )
3556
+ "
3557
+ >
3558
+ @if (action.icon) {
3559
+ <mat-icon [praxisIcon]="action.icon"></mat-icon>
3560
+ }
3561
+ {{ action.label }}
3562
+ </button>
3563
+ }
3564
+ @if (config?.export?.enabled) {
3565
+ <button
3566
+ mat-menu-item
3567
+ [matMenuTriggerFor]="mobileExportMenu"
3568
+ [disabled]="exportBusy"
3569
+ class="praxis-table-compact-command--export"
3570
+ >
3571
+ <mat-icon
3572
+ [class.praxis-table-export-progress-icon]="exportBusy"
3573
+ [praxisIcon]="
3574
+ exportBusy ? 'progress_activity' : 'download'
3575
+ "
3576
+ ></mat-icon>
3577
+ {{ getExportDataLabel() }}
3578
+ </button>
3579
+ }
3580
+ @if (isColumnsVisibilityEnabled()) {
3581
+ <button
3582
+ mat-menu-item
3583
+ [matMenuTriggerFor]="mobileColumnsMenu"
3584
+ class="praxis-table-compact-command--columns"
3585
+ >
3586
+ <mat-icon
3587
+ [praxisIcon]="getColumnsVisibilityIcon()"
3588
+ ></mat-icon>
3589
+ {{ getColumnsVisibilityLabel() }}
3590
+ </button>
3591
+ }
3592
+ @if (isDensityToggleEnabled()) {
3593
+ <button
3594
+ mat-menu-item
3595
+ [matMenuTriggerFor]="mobileDensityMenu"
3596
+ class="praxis-table-toolbar-action--density"
3597
+ >
3598
+ <mat-icon [praxisIcon]="'density_medium'"></mat-icon>
3599
+ {{ getDensityToggleLabel() }}
3600
+ </button>
3601
+ }
3602
+ </mat-menu>
3603
+
3604
+ <mat-menu #mobileExportMenu="matMenu">
3605
+ @if (config?.export?.enabled) {
3606
+ @for (format of config?.export?.formats; track format) {
3607
+ <button
3608
+ mat-menu-item
3609
+ class="praxis-table-export-menu-item"
3610
+ [disabled]="exportBusy"
3611
+ [matTooltip]="getExportFormatTooltip(format)"
3612
+ [attr.aria-label]="getExportFormatAriaLabel(format)"
3613
+ (click)="emitExportAction($event, format)"
3614
+ >
3615
+ <mat-icon
3616
+ [praxisIcon]="getExportIcon(format)"
3617
+ ></mat-icon>
3618
+ {{ getExportFormatLabel(format) }}
3619
+ </button>
3620
+ @if (isVisibleExcelExportEnabled(format)) {
3621
+ <button
3622
+ mat-menu-item
3623
+ class="praxis-table-export-menu-item"
3624
+ [disabled]="exportBusy"
3625
+ [matTooltip]="getVisibleExcelExportDescription()"
3626
+ [attr.aria-label]="getVisibleExcelExportAriaLabel()"
3627
+ (click)="emitVisibleExcelExportAction($event)"
3628
+ >
3629
+ <mat-icon [praxisIcon]="'table_view'"></mat-icon>
3630
+ {{ getVisibleExcelExportLabel() }}
3631
+ </button>
3632
+ }
3633
+ }
3634
+ }
3635
+ </mat-menu>
3636
+
3637
+ <mat-menu
3638
+ #mobileColumnsMenu="matMenu"
3639
+ class="praxis-table-columns-menu"
3111
3640
  >
3112
- <mat-icon [praxisIcon]="isDensityActive(density) ? 'check' : getDensityIcon(density)"></mat-icon>
3113
- {{ getDensityLabel(density) }}
3114
- </button>
3641
+ @if (isColumnsVisibilityEnabled()) {
3642
+ @for (column of config?.columns; track column.field) {
3643
+ <button
3644
+ mat-menu-item
3645
+ type="button"
3646
+ class="praxis-table-column-menu-item"
3647
+ role="menuitemcheckbox"
3648
+ [attr.aria-checked]="column.visible !== false"
3649
+ [disabled]="isColumnVisibilityToggleDisabled(column)"
3650
+ (keydown.enter)="
3651
+ onColumnVisibilityMenuToggle(
3652
+ $event,
3653
+ column.field,
3654
+ column.visible !== false
3655
+ )
3656
+ "
3657
+ (keydown.space)="
3658
+ onColumnVisibilityMenuToggle(
3659
+ $event,
3660
+ column.field,
3661
+ column.visible !== false
3662
+ )
3663
+ "
3664
+ >
3665
+ <span
3666
+ class="praxis-table-column-menu-content"
3667
+ (mousedown)="
3668
+ onColumnVisibilityMenuToggle(
3669
+ $event,
3670
+ column.field,
3671
+ column.visible !== false
3672
+ )
3673
+ "
3674
+ (click)="
3675
+ $event.preventDefault(); $event.stopPropagation()
3676
+ "
3677
+ >
3678
+ <mat-icon
3679
+ class="praxis-table-column-menu-check"
3680
+ [praxisIcon]="
3681
+ column.visible !== false
3682
+ ? 'check_box'
3683
+ : 'check_box_outline_blank'
3684
+ "
3685
+ aria-hidden="true"
3686
+ ></mat-icon>
3687
+ <span>{{ column.header || column.field }}</span>
3688
+ </span>
3689
+ </button>
3690
+ }
3691
+ }
3692
+ </mat-menu>
3693
+
3694
+ <mat-menu
3695
+ #mobileDensityMenu="matMenu"
3696
+ class="praxis-table-density-menu"
3697
+ >
3698
+ @if (isDensityToggleEnabled()) {
3699
+ @for (density of getDensityOptions(); track density) {
3700
+ <button
3701
+ mat-menu-item
3702
+ type="button"
3703
+ [attr.aria-current]="
3704
+ isDensityActive(density) ? 'true' : null
3705
+ "
3706
+ (click)="emitDensityChange($event, density)"
3707
+ >
3708
+ <mat-icon
3709
+ [praxisIcon]="
3710
+ isDensityActive(density)
3711
+ ? 'check'
3712
+ : getDensityIcon(density)
3713
+ "
3714
+ ></mat-icon>
3715
+ {{ getDensityLabel(density) }}
3716
+ </button>
3717
+ }
3718
+ }
3719
+ </mat-menu>
3115
3720
  }
3116
- }
3117
- </mat-menu>
3721
+ </div>
3118
3722
  }
3119
3723
  </div>
3120
- }
3121
- </div>
3724
+ </ng-template>
3122
3725
  </mat-toolbar>
3123
3726
  `, host: {
3124
3727
  '[class.praxis-toolbar-footer]': "placement === 'footer'",
3125
3728
  '(document:keydown)': 'onDocumentKeydown($event)',
3126
- }, styles: [":host{display:block;container-name:praxis-table-toolbar;container-type:inline-size}.praxis-toolbar{--p-table-toolbar-bg-default: linear-gradient( 180deg, color-mix(in srgb, var(--md-sys-color-surface, #fff) 96%, transparent), color-mix(in srgb, var(--md-sys-color-surface-container-low, #f6f8fc) 100%, transparent) );--p-table-toolbar-fg-default: var(--md-sys-color-on-surface, currentColor);--p-table-toolbar-border-color-default: color-mix(in srgb, var(--md-sys-color-outline-variant, #d7dbe5) 78%, transparent);--p-table-toolbar-divider-color-default: color-mix(in srgb, var(--md-sys-color-outline) 42%, transparent);--p-table-toolbar-action-hover-bg-default: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent);--p-table-toolbar-action-active-bg-default: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);--p-table-toolbar-action-focus-ring-default: color-mix(in srgb, var(--md-sys-color-primary) 52%, transparent);--p-table-toolbar-ai-accent-color-default: var(--md-sys-color-primary, #0b72d9);--p-table-toolbar-status-fg-default: var(--md-sys-color-on-surface-variant, currentColor);background:var(--p-table-toolbar-bg, var(--p-table-toolbar-bg-default));color:var(--p-table-toolbar-fg, var(--p-table-toolbar-fg-default));box-shadow:var(--p-table-toolbar-shadow, none);padding:var( --p-table-toolbar-layout-padding, var(--p-table-toolbar-padding-block, var(--pfx-toolbar-pad-y, 6px)) var(--p-table-toolbar-padding-inline, var(--pfx-toolbar-pad-x, 12px)) );min-height:var(--p-table-toolbar-min-height, var(--pfx-filter-h, 44px));display:grid;grid-template-areas:\"actions actions actions\";grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:max(var(--p-table-toolbar-gap, 8px),12px);row-gap:var(--p-table-toolbar-identity-filter-gap, 8px);border:var(--p-table-toolbar-border-width, 1px) solid var(--p-table-toolbar-border-color, var(--p-table-toolbar-border-color-default));border-radius:var(--p-table-toolbar-radius, 10px)}.praxis-toolbar.p-table-toolbar--flat{--p-table-toolbar-border-width: 0;--p-table-toolbar-shadow: none}.praxis-toolbar.p-table-toolbar--elevated{--p-table-toolbar-shadow: 0 12px 28px color-mix(in srgb, var(--md-sys-color-shadow, #000) 12%, transparent)}.praxis-toolbar.p-table-toolbar--integrated{--p-table-toolbar-bg: transparent;--p-table-toolbar-border-width: 0;--p-table-toolbar-radius: 0}.praxis-toolbar.p-table-toolbar--layout-separator{border-block-end-width:1px;border-block-end-style:solid;border-block-end-color:var( --p-table-toolbar-divider-color, var(--p-table-toolbar-divider-color-default) )}.praxis-toolbar.p-table-toolbar--compact{--p-table-toolbar-min-height: 36px;--p-table-toolbar-padding-block: 4px;--p-table-toolbar-padding-inline: 10px;--p-table-toolbar-gap: 4px;--p-table-toolbar-actions-gap: 4px;--p-table-toolbar-action-size: 36px;--p-table-toolbar-action-radius: 7px}.praxis-toolbar.p-table-toolbar--comfortable{--p-table-toolbar-min-height: 44px;--p-table-toolbar-action-size: 40px}.praxis-toolbar.p-table-toolbar--spacious{--p-table-toolbar-min-height: 52px;--p-table-toolbar-padding-block: 8px;--p-table-toolbar-padding-inline: 16px;--p-table-toolbar-gap: 8px;--p-table-toolbar-actions-gap: 8px;--p-table-toolbar-action-size: 44px}.praxis-toolbar.p-table-toolbar--square{--p-table-toolbar-radius: 0;--p-table-toolbar-action-radius: 4px}.praxis-toolbar.p-table-toolbar--pill{--p-table-toolbar-radius: 999px;--p-table-toolbar-action-radius: 999px}:host(.praxis-toolbar-stack-top) .praxis-toolbar{border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.praxis-toolbar-footer) .praxis-toolbar{border-top-left-radius:0;border-top-right-radius:0}:host(.praxis-toolbar-footer.footer-flat) .praxis-toolbar{border-bottom-left-radius:0;border-bottom-right-radius:0}.praxis-toolbar.mat-toolbar-single-row,.praxis-toolbar .mat-toolbar-row{height:auto}.praxis-toolbar.mat-toolbar-multiple-rows{min-height:var(--p-table-toolbar-min-height, var(--pfx-filter-h, 44px))}.praxis-toolbar.praxis-toolbar--has-query{grid-template-areas:\"scope scope scope\" \"query query actions\"}.praxis-toolbar.praxis-toolbar--has-identity{grid-template-areas:\"identity scope scope\" \"query query actions\"}.toolbar-query{grid-area:query;display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:start;min-width:0;column-gap:var(--p-table-toolbar-gap, 8px);row-gap:var(--p-table-toolbar-identity-filter-gap, 8px)}.toolbar-query>*{min-width:0}.toolbar-query>:is(praxis-filter,[advancedFilter]){grid-column:1}.toolbar-query>[toolbar]{grid-column:2}.toolbar-identity{grid-area:identity;display:flex;align-items:center;gap:var(--p-table-toolbar-identity-gap, 8px);min-width:0;max-width:100%;min-height:var(--p-table-toolbar-identity-min-height, 30px);margin-block-end:var(--p-table-toolbar-identity-margin-bottom, 0);padding-inline:2px;color:var(--p-table-toolbar-title-fg, var(--p-table-toolbar-fg, var(--p-table-toolbar-fg-default)))}.toolbar-identity--center{text-align:center;justify-content:center}.toolbar-identity--end{text-align:end;justify-content:flex-end}.toolbar-identity--center .toolbar-identity__copy{align-items:center}.toolbar-identity--end .toolbar-identity__copy{align-items:flex-end}.toolbar-identity__icon{width:var(--p-table-toolbar-identity-icon-size, 28px);height:var(--p-table-toolbar-identity-icon-size, 28px);border-radius:var(--p-table-toolbar-identity-icon-radius, 8px);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--p-table-toolbar-icon-fg, var(--md-sys-color-primary, currentColor));background:color-mix(in srgb,var(--p-table-toolbar-icon-fg, var(--md-sys-color-primary, currentColor)) 8%,transparent);border:1px solid color-mix(in srgb,var(--p-table-toolbar-icon-fg, var(--md-sys-color-primary, currentColor)) 18%,transparent)}.toolbar-identity__icon .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.toolbar-identity__copy{display:flex;flex-direction:column;min-width:0;max-width:100%;gap:1px}.toolbar-identity__title,.toolbar-identity__subtitle{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toolbar-identity__title{font-size:var(--p-table-toolbar-title-font-size, 14px);font-weight:var(--p-table-toolbar-title-font-weight, 700);line-height:1.2;letter-spacing:0;color:var(--p-table-toolbar-title-fg, currentColor)}.toolbar-identity__subtitle{font-size:var(--p-table-toolbar-subtitle-font-size, 11.5px);line-height:1.25;color:var(--p-table-toolbar-subtitle-fg, var(--p-table-toolbar-status-fg, var(--p-table-toolbar-status-fg-default)))}.toolbar-actions{grid-area:actions;display:flex;align-items:center;align-self:start;justify-self:end;justify-content:flex-end;gap:var(--p-table-toolbar-gap, 6px);min-height:var(--p-table-toolbar-min-height, var(--pfx-filter-h, 44px));min-width:0}.praxis-toolbar.p-table-toolbar--align-start .toolbar-identity,.praxis-toolbar.p-table-toolbar--align-start .toolbar-actions{justify-self:start}.praxis-toolbar.p-table-toolbar--align-center .toolbar-identity,.praxis-toolbar.p-table-toolbar--align-center .toolbar-actions{justify-self:center}.praxis-toolbar.p-table-toolbar--align-end .toolbar-identity,.praxis-toolbar.p-table-toolbar--align-end .toolbar-actions{justify-self:end}.actions-group{display:flex;align-items:center;gap:var(--p-table-toolbar-actions-gap, 8px)}.business-actions,.utility-actions{display:flex;align-items:center;gap:var(--p-table-toolbar-actions-gap, 8px);min-width:0}.business-actions:empty,.utility-actions:empty{display:none}.action-btn:not(.praxis-icon-button){height:var(--p-table-toolbar-action-size, 40px);min-width:var(--p-table-toolbar-action-size, 40px);border-radius:var(--p-table-toolbar-action-radius, 8px);font-size:.875rem;font-weight:500;line-height:1.2;color:var(--p-table-toolbar-action-fg, inherit);background:var(--p-table-toolbar-action-bg, transparent)}.action-btn:not(.praxis-icon-button):hover:not(:disabled){background:var(--p-table-toolbar-action-hover-bg, var(--p-table-toolbar-action-hover-bg-default))}.action-btn:not(.praxis-icon-button):focus-visible{outline:2px solid var(--p-table-toolbar-action-focus-ring, var(--p-table-toolbar-action-focus-ring-default));outline-offset:2px}.action-btn--utility{color:var(--p-table-toolbar-status-fg, var(--p-table-toolbar-status-fg-default))}.praxis-table-toolbar-action--columns.action-btn:not(.praxis-icon-button){width:var(--p-table-toolbar-action-size, 40px);padding:0}.praxis-table-toolbar-action--columns mat-icon{margin:0}.toolbar-icon-btn{width:var(--p-table-toolbar-action-size, 40px);height:var(--p-table-toolbar-action-size, 40px);border-radius:var(--p-table-toolbar-action-radius, 8px);color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary) 9%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 22%,transparent)}.toolbar-icon-btn:hover:not(:disabled){color:var(--md-sys-color-on-primary-container);background:color-mix(in srgb,var(--md-sys-color-primary) 16%,transparent);border-color:color-mix(in srgb,var(--md-sys-color-primary) 36%,transparent)}.action-btn--fab{width:42px;height:42px;box-shadow:none}.pfx-tonal{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.pfx-tonal:hover{background:var(--md-sys-color-secondary-container)}.mobile-actions{display:none;align-items:center;gap:var(--p-table-toolbar-actions-gap, 8px)}.overflow-trigger{height:var(--p-table-toolbar-action-size, 40px)}.action-btn .mat-icon,.action-btn--fab .mat-icon,.overflow-trigger .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.praxis-table-export-status{max-width:13rem;overflow:hidden;color:var(--p-table-toolbar-status-fg, currentColor);font-size:.75rem;font-weight:600;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.praxis-table-export-progress-icon{animation:praxis-table-export-spin .9s linear infinite}@keyframes praxis-table-export-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.praxis-table-export-progress-icon{animation:none}}.praxis-table-toolbar-action--columns .mat-icon{font-size:24px;width:24px;height:24px;line-height:24px}.praxis-table-column-menu-item.mat-mdc-menu-item{min-height:40px}.praxis-table-export-menu-item.mat-mdc-menu-item{min-width:280px;white-space:nowrap}.praxis-table-column-menu-content{align-items:center;display:flex;gap:10px;min-height:40px;width:100%}.praxis-table-column-menu-check.mat-icon{color:var(--md-sys-color-primary, currentColor);flex:0 0 20px;font-size:20px;height:20px;line-height:20px;margin-inline-end:0;width:20px}.praxis-table-quick-filters{grid-area:scope;align-items:center;display:flex;flex-wrap:nowrap;gap:6px;min-height:var(--p-table-toolbar-min-height, 44px)}.praxis-table-quick-filter.mat-mdc-outlined-button{min-height:40px;padding-inline:14px;white-space:nowrap}.praxis-table-quick-filter--active.mat-mdc-outlined-button{background:color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent);border-color:var(--md-sys-color-primary);color:var(--md-sys-color-primary)}.action-btn.mat-mdc-button-base,.action-btn--fab.mat-mdc-button-base,.overflow-trigger.mat-mdc-button-base,.toolbar-icon-btn.mat-mdc-button-base{--mdc-text-button-container-height: var(--p-table-toolbar-action-size, 36px);--mdc-filled-button-container-height: var(--p-table-toolbar-action-size, 36px);--mdc-protected-button-container-height: var(--p-table-toolbar-action-size, 36px);--mdc-outlined-button-container-height: var(--p-table-toolbar-action-size, 36px)}.action-btn.mat-mdc-unelevated-button:not(:disabled),.action-btn.mat-mdc-outlined-button:not(:disabled),.action-btn.pfx-tonal:not(:disabled){border-color:color-mix(in srgb,var(--md-sys-color-outline-variant, #d7dbe5) 82%,transparent)}.action-btn.mat-mdc-unelevated-button:not(:disabled){box-shadow:none}.action-btn.mat-mdc-unelevated-button.mat-primary:not(:disabled){--mdc-filled-button-container-color: var(--md-sys-color-primary);--mdc-filled-button-label-text-color: var(--md-sys-color-on-primary);--mat-filled-button-state-layer-color: var(--md-sys-color-on-primary);background:var(--md-sys-color-primary)!important;border-color:transparent;color:var(--md-sys-color-on-primary)!important;box-shadow:0 8px 18px color-mix(in srgb,var(--md-sys-color-primary) 22%,transparent)}.action-btn.mat-mdc-unelevated-button.mat-primary:not(:disabled):hover{background:color-mix(in srgb,var(--md-sys-color-primary) 88%,var(--md-sys-color-on-primary) 12%)!important}.action-btn.mat-mdc-unelevated-button.mat-primary:not(:disabled) .mat-icon{color:var(--md-sys-color-on-primary)!important}.action-btn.mat-mdc-button-base{padding-inline:12px}.end-actions{display:flex;align-items:center;gap:var(--p-table-toolbar-actions-gap, 8px);margin-inline-start:4px;padding-inline-start:12px;border-inline-start:1px solid var(--p-table-toolbar-divider-color, var(--p-table-toolbar-divider-color-default))}.end-actions:empty{display:none;gap:0;margin-inline-start:0;padding-inline-start:0;border-inline-start:0}.praxis-toolbar-icon-action--primary{color:var(--md-sys-color-primary)}.praxis-toolbar-icon-action--accent{color:var(--md-sys-color-tertiary)}.praxis-toolbar-icon-action--warn{color:var(--md-sys-color-error)}.praxis-toolbar.p-table-toolbar--divider-between-groups .actions-group--has-business .utility-actions:not(:empty){margin-inline-start:4px;padding-inline-start:12px;border-inline-start:1px solid var(--p-table-toolbar-divider-color, var(--p-table-toolbar-divider-color-default))}.praxis-toolbar.p-table-toolbar--divider-start:not(.praxis-toolbar--has-identity) .toolbar-query{padding-inline-end:12px;border-inline-end:1px solid var(--p-table-toolbar-divider-color, var(--p-table-toolbar-divider-color-default))}.end-actions ::ng-deep .praxis-table-toolbar-action--ai,.end-actions ::ng-deep .praxis-table-ai-trigger{color:var(--p-table-toolbar-ai-accent-color, var(--p-table-toolbar-ai-accent-color-default));background:color-mix(in srgb,var(--p-table-toolbar-ai-accent-color, var(--p-table-toolbar-ai-accent-color-default)) 10%,transparent);border:1px solid color-mix(in srgb,var(--p-table-toolbar-ai-accent-color, var(--p-table-toolbar-ai-accent-color-default)) 24%,transparent)}.end-actions ::ng-deep [data-role=table-settings]{color:var(--p-table-toolbar-status-fg, var(--p-table-toolbar-status-fg-default))}@container praxis-table-toolbar (max-width: 960px){.actions-group{display:none}.mobile-actions{display:flex}.toolbar-actions{justify-content:flex-end}}@container praxis-table-toolbar (max-width: 720px){.praxis-toolbar.praxis-toolbar--has-query{grid-template-areas:\"scope scope scope\" \"query query query\" \"actions actions actions\"}.praxis-toolbar.praxis-toolbar--has-identity{grid-template-areas:\"identity identity identity\" \"scope scope scope\" \"query query query\" \"actions actions actions\"}.toolbar-query{grid-template-columns:minmax(0,1fr)}.toolbar-query>:is(praxis-filter,[advancedFilter]),.toolbar-query>[toolbar]{grid-column:1}.praxis-table-quick-filters{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}}@container praxis-table-toolbar (max-width: 540px){.praxis-toolbar.praxis-toolbar--has-identity{grid-template-areas:\"identity identity identity\" \"scope scope scope\" \"query query query\" \"actions actions actions\"}.toolbar-actions{justify-self:stretch;justify-content:flex-end}.toolbar-actions,.toolbar-query{--p-table-toolbar-action-size: 44px}.toolbar-identity__subtitle{display:none}.praxis-table-quick-filter.mat-mdc-outlined-button{min-height:44px}}\n"] }]
3729
+ }, styles: [":host{display:block;container-name:praxis-table-toolbar;container-type:inline-size}.praxis-toolbar{--p-table-toolbar-bg-default: linear-gradient( 180deg, color-mix( in srgb, var(--md-sys-color-surface, #fff) 96%, transparent ), color-mix( in srgb, var(--md-sys-color-surface-container-low, #f6f8fc) 100%, transparent ) );--p-table-toolbar-fg-default: var( --md-sys-color-on-surface, currentColor );--p-table-toolbar-border-color-default: color-mix( in srgb, var(--md-sys-color-outline-variant, #d7dbe5) 78%, transparent );--p-table-toolbar-divider-color-default: color-mix( in srgb, var(--md-sys-color-outline) 42%, transparent );--p-table-toolbar-action-hover-bg-default: color-mix( in srgb, var(--md-sys-color-primary) 10%, transparent );--p-table-toolbar-action-active-bg-default: color-mix( in srgb, var(--md-sys-color-primary) 16%, transparent );--p-table-toolbar-action-focus-ring-default: color-mix( in srgb, var(--md-sys-color-primary) 52%, transparent );--p-table-toolbar-ai-accent-color-default: var( --md-sys-color-primary, #0b72d9 );--p-table-toolbar-status-fg-default: var( --md-sys-color-on-surface-variant, currentColor );background:var( --p-table-toolbar-bg, var(--p-table-toolbar-bg-default) );color:var(--p-table-toolbar-fg, var(--p-table-toolbar-fg-default));box-shadow:var(--p-table-toolbar-shadow, none);padding:var( --p-table-toolbar-layout-padding, var(--p-table-toolbar-padding-block, var(--pfx-toolbar-pad-y, 6px)) var( --p-table-toolbar-padding-inline, var(--pfx-toolbar-pad-x, 12px) ) );min-height:var( --p-table-toolbar-min-height, var(--pfx-filter-h, 44px) );display:grid;grid-template-areas:\"actions actions actions\";grid-template-columns:max-content minmax(0,1fr) auto;align-items:center;column-gap:max(var(--p-table-toolbar-gap, 8px),12px);row-gap:var(--p-table-toolbar-identity-filter-gap, 8px);border:var(--p-table-toolbar-border-width, 1px) solid var( --p-table-toolbar-border-color, var(--p-table-toolbar-border-color-default) );border-radius:var(--p-table-toolbar-radius, 10px)}.praxis-toolbar.p-table-toolbar--flat{--p-table-toolbar-border-width: 0;--p-table-toolbar-shadow: none}.praxis-toolbar.p-table-toolbar--elevated{--p-table-toolbar-shadow: 0 12px 28px color-mix(in srgb, var(--md-sys-color-shadow, #000) 12%, transparent)}.praxis-toolbar.p-table-toolbar--integrated{--p-table-toolbar-bg: transparent;--p-table-toolbar-border-width: 0;--p-table-toolbar-radius: 0}.praxis-toolbar.p-table-toolbar--layout-separator{border-block-end-width:1px;border-block-end-style:solid;border-block-end-color:var( --p-table-toolbar-divider-color, var(--p-table-toolbar-divider-color-default) )}.praxis-toolbar.p-table-toolbar--compact{--p-table-toolbar-min-height: 36px;--p-table-toolbar-padding-block: 4px;--p-table-toolbar-padding-inline: 10px;--p-table-toolbar-gap: 4px;--p-table-toolbar-actions-gap: 4px;--p-table-toolbar-action-size: 36px;--p-table-toolbar-action-radius: 7px}.praxis-toolbar.p-table-toolbar--comfortable{--p-table-toolbar-min-height: 44px;--p-table-toolbar-action-size: 40px}.praxis-toolbar.p-table-toolbar--spacious{--p-table-toolbar-min-height: 52px;--p-table-toolbar-padding-block: 8px;--p-table-toolbar-padding-inline: 16px;--p-table-toolbar-gap: 8px;--p-table-toolbar-actions-gap: 8px;--p-table-toolbar-action-size: 44px}.praxis-toolbar.p-table-toolbar--square{--p-table-toolbar-radius: 0;--p-table-toolbar-action-radius: 4px}.praxis-toolbar.p-table-toolbar--pill{--p-table-toolbar-radius: 999px;--p-table-toolbar-action-radius: 999px}:host(.praxis-toolbar-stack-top) .praxis-toolbar{border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.praxis-toolbar-footer) .praxis-toolbar{border-top-left-radius:0;border-top-right-radius:0}:host(.praxis-toolbar-footer.footer-flat) .praxis-toolbar{border-bottom-left-radius:0;border-bottom-right-radius:0}.praxis-toolbar.mat-toolbar-single-row,.praxis-toolbar .mat-toolbar-row{height:auto}.praxis-toolbar.mat-toolbar-multiple-rows{min-height:var( --p-table-toolbar-min-height, var(--pfx-filter-h, 44px) )}.praxis-toolbar.praxis-toolbar--has-query{grid-template-areas:\"query query actions\"}.praxis-toolbar.praxis-toolbar--has-query.praxis-toolbar--has-scope{grid-template-areas:\"scope query actions\"}.praxis-toolbar.praxis-toolbar--has-identity{grid-template-areas:\"identity identity actions\" \"query query query\"}.praxis-toolbar.praxis-toolbar--has-identity.praxis-toolbar--has-scope{grid-template-areas:\"identity identity actions\" \"scope query query\"}.toolbar-query{grid-area:query;display:grid;grid-template-columns:minmax(0,1fr) fit-content(40%);align-items:start;min-width:0;column-gap:var(--p-table-toolbar-gap, 8px);row-gap:var(--p-table-toolbar-identity-filter-gap, 8px)}.toolbar-query>*{min-width:0}.toolbar-query>:is(praxis-filter,[advancedFilter]){grid-column:1}.toolbar-shortcuts{grid-column:2;display:inline-flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--p-table-toolbar-gap, 8px);min-width:0;max-width:100%}.toolbar-shortcuts ::ng-deep>[toolbar]{min-width:0;max-width:100%}.toolbar-shortcuts:not(:has(*)){display:none}.toolbar-identity{grid-area:identity;display:flex;align-items:center;gap:var(--p-table-toolbar-identity-gap, 8px);min-width:0;max-width:100%;min-height:var(--p-table-toolbar-identity-min-height, 30px);margin-block-end:var(--p-table-toolbar-identity-margin-bottom, 0);padding-inline:2px;color:var( --p-table-toolbar-title-fg, var(--p-table-toolbar-fg, var(--p-table-toolbar-fg-default)) )}.toolbar-identity--center{text-align:center;justify-content:center}.toolbar-identity--end{text-align:end;justify-content:flex-end}.toolbar-identity--center .toolbar-identity__copy{align-items:center}.toolbar-identity--end .toolbar-identity__copy{align-items:flex-end}.toolbar-identity__icon{width:var(--p-table-toolbar-identity-icon-size, 28px);height:var(--p-table-toolbar-identity-icon-size, 28px);border-radius:var(--p-table-toolbar-identity-icon-radius, 8px);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:var( --p-table-toolbar-icon-fg, var(--md-sys-color-primary, currentColor) );background:color-mix(in srgb,var( --p-table-toolbar-icon-fg, var(--md-sys-color-primary, currentColor) ) 8%,transparent);border:1px solid color-mix(in srgb,var( --p-table-toolbar-icon-fg, var(--md-sys-color-primary, currentColor) ) 18%,transparent)}.toolbar-identity__icon .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.toolbar-identity__copy{display:flex;flex-direction:column;min-width:0;max-width:100%;gap:1px}.toolbar-identity__title,.toolbar-identity__subtitle{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toolbar-identity__title{font-size:var(--p-table-toolbar-title-font-size, 14px);font-weight:var(--p-table-toolbar-title-font-weight, 700);line-height:1.2;letter-spacing:0;color:var(--p-table-toolbar-title-fg, currentColor)}.toolbar-identity__subtitle{font-size:var(--p-table-toolbar-subtitle-font-size, 11.5px);line-height:1.25;color:var( --p-table-toolbar-subtitle-fg, var( --p-table-toolbar-status-fg, var(--p-table-toolbar-status-fg-default) ) )}.toolbar-actions{grid-area:actions;display:flex;align-items:center;align-self:start;justify-self:end;justify-content:flex-end;gap:var(--p-table-toolbar-gap, 6px);min-height:var( --p-table-toolbar-min-height, var(--pfx-filter-h, 44px) );min-width:0}.praxis-toolbar.p-table-toolbar--align-start .toolbar-identity,.praxis-toolbar.p-table-toolbar--align-start .toolbar-actions{justify-self:start}.praxis-toolbar.p-table-toolbar--align-center .toolbar-identity,.praxis-toolbar.p-table-toolbar--align-center .toolbar-actions{justify-self:center}.praxis-toolbar.p-table-toolbar--align-end .toolbar-identity,.praxis-toolbar.p-table-toolbar--align-end .toolbar-actions{justify-self:end}.actions-group{display:flex;align-items:center;gap:var(--p-table-toolbar-actions-gap, 8px)}.business-actions,.utility-actions{display:flex;align-items:center;gap:var(--p-table-toolbar-actions-gap, 8px);min-width:0}.business-actions:empty,.utility-actions:empty{display:none}.action-btn:not(.praxis-icon-button){height:var(--p-table-toolbar-action-size, 40px);min-width:var(--p-table-toolbar-action-size, 40px);border-radius:var(--p-table-toolbar-action-radius, 8px);font-size:.875rem;font-weight:500;line-height:1.2;color:var(--p-table-toolbar-action-fg, inherit);background:var(--p-table-toolbar-action-bg, transparent)}.action-btn:not(.praxis-icon-button):hover:not(:disabled){background:var( --p-table-toolbar-action-hover-bg, var(--p-table-toolbar-action-hover-bg-default) )}.action-btn:not(.praxis-icon-button):focus-visible{outline:2px solid var( --p-table-toolbar-action-focus-ring, var(--p-table-toolbar-action-focus-ring-default) );outline-offset:2px}.action-btn--utility{color:var( --p-table-toolbar-status-fg, var(--p-table-toolbar-status-fg-default) )}.praxis-table-toolbar-action--columns.action-btn:not(.praxis-icon-button){width:var(--p-table-toolbar-action-size, 40px);padding:0}.praxis-table-toolbar-action--columns mat-icon{margin:0}.toolbar-icon-btn{width:var(--p-table-toolbar-action-size, 40px);height:var(--p-table-toolbar-action-size, 40px);border-radius:var(--p-table-toolbar-action-radius, 8px);color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary) 9%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 22%,transparent)}.toolbar-icon-btn:hover:not(:disabled){color:var(--md-sys-color-on-primary-container);background:color-mix(in srgb,var(--md-sys-color-primary) 16%,transparent);border-color:color-mix(in srgb,var(--md-sys-color-primary) 36%,transparent)}.action-btn--fab{width:42px;height:42px;box-shadow:none}.pfx-tonal{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.pfx-tonal:hover{background:var(--md-sys-color-secondary-container)}.mobile-actions{display:none;align-items:center;gap:var(--p-table-toolbar-actions-gap, 8px)}.overflow-trigger{height:var(--p-table-toolbar-action-size, 40px)}.action-btn .mat-icon,.action-btn--fab .mat-icon,.overflow-trigger .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.praxis-table-export-status{max-width:13rem;overflow:hidden;color:var(--p-table-toolbar-status-fg, currentColor);font-size:.75rem;font-weight:600;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.praxis-table-export-progress-icon{animation:praxis-table-export-spin .9s linear infinite}@keyframes praxis-table-export-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.praxis-table-export-progress-icon{animation:none}}.praxis-table-toolbar-action--columns .mat-icon{font-size:24px;width:24px;height:24px;line-height:24px}.praxis-table-column-menu-item.mat-mdc-menu-item{min-height:40px}.praxis-table-export-menu-item.mat-mdc-menu-item{min-width:280px;white-space:nowrap}.praxis-table-column-menu-content{align-items:center;display:flex;gap:10px;min-height:40px;width:100%}.praxis-table-column-menu-check.mat-icon{color:var(--md-sys-color-primary, currentColor);flex:0 0 20px;font-size:20px;height:20px;line-height:20px;margin-inline-end:0;width:20px}.praxis-table-quick-filters{grid-area:scope;align-self:start;align-items:center;display:flex;flex-wrap:nowrap;gap:6px;min-height:var(--p-table-toolbar-min-height, 44px)}.praxis-table-quick-filter.mat-mdc-outlined-button{min-height:40px;padding-inline:14px;white-space:nowrap}.praxis-table-quick-filter--active.mat-mdc-outlined-button{background:color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent);border-color:var(--md-sys-color-primary);color:var(--md-sys-color-primary)}.action-btn.mat-mdc-button-base,.action-btn--fab.mat-mdc-button-base,.overflow-trigger.mat-mdc-button-base,.toolbar-icon-btn.mat-mdc-button-base{--mdc-text-button-container-height: var( --p-table-toolbar-action-size, 36px );--mdc-filled-button-container-height: var( --p-table-toolbar-action-size, 36px );--mdc-protected-button-container-height: var( --p-table-toolbar-action-size, 36px );--mdc-outlined-button-container-height: var( --p-table-toolbar-action-size, 36px )}.action-btn.mat-mdc-unelevated-button:not(:disabled),.action-btn.mat-mdc-outlined-button:not(:disabled),.action-btn.pfx-tonal:not(:disabled){border-color:color-mix(in srgb,var(--md-sys-color-outline-variant, #d7dbe5) 82%,transparent)}.action-btn.mat-mdc-unelevated-button:not(:disabled){box-shadow:none}.action-btn.mat-mdc-unelevated-button.mat-primary:not(:disabled){--mdc-filled-button-container-color: var(--md-sys-color-primary);--mdc-filled-button-label-text-color: var(--md-sys-color-on-primary);--mat-filled-button-state-layer-color: var(--md-sys-color-on-primary);background:var(--md-sys-color-primary)!important;border-color:transparent;color:var(--md-sys-color-on-primary)!important;box-shadow:0 8px 18px color-mix(in srgb,var(--md-sys-color-primary) 22%,transparent)}.action-btn.mat-mdc-unelevated-button.mat-primary:not(:disabled):hover{background:color-mix(in srgb,var(--md-sys-color-primary) 88%,var(--md-sys-color-on-primary) 12%)!important}.action-btn.mat-mdc-unelevated-button.mat-primary:not(:disabled) .mat-icon{color:var(--md-sys-color-on-primary)!important}.action-btn.mat-mdc-button-base{padding-inline:12px}.end-actions{display:flex;align-items:center;gap:var(--p-table-toolbar-actions-gap, 8px);margin-inline-start:4px;padding-inline-start:12px;border-inline-start:1px solid var( --p-table-toolbar-divider-color, var(--p-table-toolbar-divider-color-default) )}.end-actions:empty{display:none;gap:0;margin-inline-start:0;padding-inline-start:0;border-inline-start:0}.praxis-toolbar-icon-action--primary{color:var(--md-sys-color-primary)}.praxis-toolbar-icon-action--accent{color:var(--md-sys-color-tertiary)}.praxis-toolbar-icon-action--warn{color:var(--md-sys-color-error)}.praxis-toolbar.p-table-toolbar--divider-between-groups .actions-group--has-business .utility-actions:not(:empty){margin-inline-start:4px;padding-inline-start:12px;border-inline-start:1px solid var( --p-table-toolbar-divider-color, var(--p-table-toolbar-divider-color-default) )}.praxis-toolbar.p-table-toolbar--divider-start:not(.praxis-toolbar--has-identity) .toolbar-query{padding-inline-end:12px;border-inline-end:1px solid var( --p-table-toolbar-divider-color, var(--p-table-toolbar-divider-color-default) )}.end-actions ::ng-deep .praxis-table-toolbar-action--ai,.end-actions ::ng-deep .praxis-table-ai-trigger{color:var( --p-table-toolbar-ai-accent-color, var(--p-table-toolbar-ai-accent-color-default) );background:color-mix(in srgb,var( --p-table-toolbar-ai-accent-color, var(--p-table-toolbar-ai-accent-color-default) ) 10%,transparent);border:1px solid color-mix(in srgb,var( --p-table-toolbar-ai-accent-color, var(--p-table-toolbar-ai-accent-color-default) ) 24%,transparent)}.end-actions ::ng-deep [data-role=table-settings]{color:var( --p-table-toolbar-status-fg, var(--p-table-toolbar-status-fg-default) )}@container praxis-table-toolbar (max-width: 960px){.actions-group{display:none}.mobile-actions{display:flex}.toolbar-actions{justify-content:flex-end}}@container praxis-table-toolbar (max-width: 720px){.praxis-toolbar.praxis-toolbar--has-query{grid-template-areas:\"query query query\" \"actions actions actions\"}.praxis-toolbar.praxis-toolbar--has-query.praxis-toolbar--has-scope{grid-template-areas:\"scope scope scope\" \"query query query\" \"actions actions actions\"}.praxis-toolbar.praxis-toolbar--has-identity{grid-template-areas:\"identity identity actions\" \"query query query\"}.praxis-toolbar.praxis-toolbar--has-identity.praxis-toolbar--has-scope{grid-template-areas:\"identity identity actions\" \"scope scope scope\" \"query query query\"}.toolbar-query{grid-template-columns:minmax(0,1fr)}.toolbar-query>:is(praxis-filter,[advancedFilter]),.toolbar-shortcuts{grid-column:1}.toolbar-shortcuts{justify-content:flex-start}.praxis-table-quick-filters{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}}@container praxis-table-toolbar (max-width: 540px){.praxis-toolbar.praxis-toolbar--has-identity{grid-template-areas:\"identity identity identity\" \"actions actions actions\" \"query query query\"}.praxis-toolbar.praxis-toolbar--has-identity.praxis-toolbar--has-scope{grid-template-areas:\"identity identity identity\" \"actions actions actions\" \"scope scope scope\" \"query query query\"}.toolbar-actions{justify-self:stretch;justify-content:flex-end}.toolbar-actions,.toolbar-query{--p-table-toolbar-action-size: 44px}.toolbar-identity__subtitle{display:none}.praxis-table-quick-filter.mat-mdc-outlined-button{min-height:44px}}\n"] }]
3127
3730
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.LoggerService, decorators: [{
3128
3731
  type: Optional
3129
3732
  }] }, { type: i1.PraxisI18nService, decorators: [{
@@ -39909,6 +40512,13 @@ class PraxisFilter {
39909
40512
  isUserTag(tag) {
39910
40513
  return this.savedTags?.some((t) => t.id === tag.id) ?? false;
39911
40514
  }
40515
+ toggleTag(tag) {
40516
+ if (this.isActiveTag(tag)) {
40517
+ this.removeFilter(tag);
40518
+ return;
40519
+ }
40520
+ this.applyTag(tag);
40521
+ }
39912
40522
  applyTag(tag) {
39913
40523
  if (!tag)
39914
40524
  return;
@@ -40437,7 +41047,7 @@ class PraxisFilter {
40437
41047
  }
40438
41048
  }
40439
41049
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisFilter, deps: [{ token: i1.GenericCrudService }, { token: ASYNC_CONFIG_STORAGE }, { token: i0.DestroyRef }, { token: FilterConfigService }, { token: i3$3.SettingsPanelService }, { token: i2$2.MatSnackBar }, { token: i1$2.MatDialog }, { token: i6$1.PraxisDialog }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.DynamicFormService }, { token: i1.SchemaNormalizerService }, { token: i1.ComponentKeyService }, { token: i7$1.ActivatedRoute, optional: true }, { token: i1.LoggerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
40440
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisFilter, isStandalone: true, selector: "praxis-filter", inputs: { resourcePath: "resourcePath", apiUrlEntry: "apiUrlEntry", fieldMetadata: "fieldMetadata", filterId: "filterId", formId: "formId", componentInstanceId: "componentInstanceId", mode: "mode", notifyIfOutdated: "notifyIfOutdated", snoozeMs: "snoozeMs", autoOpenSettingsOnOutdated: "autoOpenSettingsOnOutdated", enableCustomization: "enableCustomization", value: "value", alwaysVisibleFields: "alwaysVisibleFields", alwaysVisibleFieldMetadataOverrides: "alwaysVisibleFieldMetadataOverrides", selectedFieldIds: "selectedFieldIds", tags: "tags", allowSaveTags: "allowSaveTags", persistenceKey: "persistenceKey", disablePersistence: "disablePersistence", i18n: "i18n", changeDebounceMs: "changeDebounceMs", showFilterSettings: "showFilterSettings", showAdvancedButton: "showAdvancedButton", showAddButton: "showAddButton", showClearButton: "showClearButton", showSearchButton: "showSearchButton", confirmTagDelete: "confirmTagDelete", placeBooleansInActions: "placeBooleansInActions", showToggleLabels: "showToggleLabels", useInlineSelectVariant: "useInlineSelectVariant", useInlineSearchableSelectVariant: "useInlineSearchableSelectVariant", useInlineMultiSelectVariant: "useInlineMultiSelectVariant", useInlineInputVariant: "useInlineInputVariant", useInlineToggleVariant: "useInlineToggleVariant", useInlineRangeVariant: "useInlineRangeVariant", useInlineDateVariant: "useInlineDateVariant", useInlineDateRangeVariant: "useInlineDateRangeVariant", useInlineTimeVariant: "useInlineTimeVariant", useInlineTimeRangeVariant: "useInlineTimeRangeVariant", useInlineTreeSelectVariant: "useInlineTreeSelectVariant", alwaysMinWidth: "alwaysMinWidth", alwaysColsMd: "alwaysColsMd", alwaysColsLg: "alwaysColsLg", tagColor: "tagColor", tagVariant: "tagVariant", tagButtonColor: "tagButtonColor", actionsButtonColor: "actionsButtonColor", actionsVariant: "actionsVariant", overlayVariant: "overlayVariant", overlayBackdrop: "overlayBackdrop", advancedOpenMode: "advancedOpenMode", advancedClearButtonsEnabled: "advancedClearButtonsEnabled" }, outputs: { submit: "submit", change: "change", clear: "clear", modeChange: "modeChange", requestSearch: "requestSearch", tagsChange: "tagsChange", selectedFieldIdsChange: "selectedFieldIdsChange", metaChanged: "metaChanged", schemaStatusChange: "schemaStatusChange" }, host: { listeners: { "window:resize": "onWindowResize()", "document:keydown": "onGlobalKeydown($event)" }, properties: { "style.--pfx-always-min": "alwaysMinWidth + \"px\"", "style.--pfx-always-cols-md": "alwaysColsMd", "style.--pfx-always-cols-lg": "alwaysColsLg" } }, viewQueries: [{ propertyName: "addManagerOrigin", first: true, predicate: ["addManagerOrigin"], descendants: true, read: ElementRef }, { propertyName: "addManagerSearch", first: true, predicate: PdxCollectionSearchComponent, descendants: true }, { propertyName: "anchorRef", first: true, predicate: ["anchorRef"], descendants: true, read: CdkOverlayOrigin }, { propertyName: "addAnchor", first: true, predicate: ["addAnchor"], descendants: true, read: CdkOverlayOrigin }, { propertyName: "advancedButton", first: true, predicate: ["advancedButton"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "@if (saving) {\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n}\n@if (schemaError) {\n <div class=\"schema-error-banner\" role=\"alert\" aria-live=\"polite\">\n <mat-icon [praxisIcon]=\"'error_outline'\" aria-hidden=\"true\"></mat-icon>\n <span class=\"schema-error-message\">{{ i18nLabels.errorLoadingFilters || 'Erro ao carregar filtros.' }}</span>\n <button\n mat-stroked-button\n class=\"schema-error-retry\"\n type=\"button\"\n (click)=\"retrySchemaLoad()\"\n [attr.aria-label]=\"i18nLabels.retry || 'Tentar novamente'\"\n >\n {{ i18nLabels.retry || 'Tentar novamente' }}\n </button>\n </div>\n}\n\n<form class=\"praxis-filter-bar\" [class.is-open]=\"advancedOpen\"\n [class.has-compact]=\"compactSelectedMetas.length || compactAlwaysVisibleMetas.length\"\n [class.tag-variant-filled]=\"tagVariant === 'filled'\"\n [class.tag-variant-outlined]=\"tagVariant === 'outlined'\"\n [class.tag-color-basic]=\"tagColor === 'basic'\"\n [class.tag-color-primary]=\"tagColor === 'primary'\"\n [class.tag-color-accent]=\"tagColor === 'accent'\"\n [class.tag-color-warn]=\"tagColor === 'warn'\"\n (click)=\"onFieldInteraction($event)\"\n (focusin)=\"onFieldInteraction($event)\"\n (change)=\"$event.stopPropagation()\"\n (submit)=\"onSubmit(); $event.preventDefault(); $event.stopPropagation()\">\n <div class=\"inline-actions\" [class.actions-outlined]=\"actionsVariant==='outlined'\">\n <div class=\"actions-anchor\" #anchorRef=\"cdkOverlayOrigin\" cdkOverlayOrigin></div>\n @if (toggleMetas.length) {\n <div class=\"inline-toggles\">\n <ng-container dynamicFieldLoader [fields]=\"toggleMetas\" [formGroup]=\"alwaysForm\"\n (componentsCreated)=\"onToggleComponents($event)\"></ng-container>\n </div>\n }\n\n @if (showAdvancedButton || showAddButton || showFilterSettings || isFieldAuthoringEnabled()) {\n <div class=\"action-cluster action-cluster--manage\">\n @if (showAdvancedButton) {\n <button #advancedButton praxisIconButton=\"filter_list\" size=\"dense\" class=\"cluster-btn\"\n [busy]=\"advancedOpening\"\n [class.is-opening]=\"advancedOpening\" [class.is-disabled]=\"!hasAdvancedFields()\"\n type=\"button\"\n [matBadge]=\"activeFiltersCount\" [matBadgeHidden]=\"!activeFiltersCount || !hasAdvancedFields()\" matBadgeSize=\"small\"\n matBadgeColor=\"primary\" [matBadgeOverlap]=\"false\" (click)=\"toggleAdvanced()\"\n [attr.aria-label]=\"getAdvancedAriaLabel()\" [attr.aria-expanded]=\"advancedOpen\"\n [attr.aria-disabled]=\"!hasAdvancedFields()\"\n [attr.aria-busy]=\"advancedOpening ? 'true' : null\"\n [matTooltip]=\"getAdvancedTooltip()\"\n matTooltipPosition=\"below\"\n [attr.aria-controls]=\"advancedPanelId\"></button>\n }\n @if (showAddButton) {\n <button #addManagerOrigin=\"cdkOverlayOrigin\" cdkOverlayOrigin praxisIconButton=\"add\" size=\"dense\" class=\"cluster-btn\"\n type=\"button\" [attr.aria-label]=\"getAddAriaLabel()\" [matTooltip]=\"getAddTooltip()\"\n matTooltipPosition=\"below\" [class.is-disabled]=\"!hasAddableFields()\"\n [attr.aria-disabled]=\"!hasAddableFields()\" [attr.aria-expanded]=\"addManagerOpen\"\n aria-haspopup=\"dialog\" [attr.aria-controls]=\"addManagerOpen ? addManagerTitleId : null\"\n (click)=\"toggleAddManager()\"></button>\n <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"addManagerOrigin\"\n [cdkConnectedOverlayOpen]=\"addManagerOpen\" [cdkConnectedOverlayPositions]=\"addOverlayPositions\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayHasBackdrop]=\"true\" cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"closeAddManager()\" (detach)=\"closeAddManager()\"\n (overlayKeydown)=\"$event.key === 'Escape' && closeAddManager()\">\n <section class=\"add-manager\" role=\"dialog\" [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"addManagerTitleId\" [attr.aria-describedby]=\"addManagerDescriptionId\"\n cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n <header class=\"add-manager__header\">\n <div>\n <h2 [id]=\"addManagerTitleId\">{{ i18nLabels.manageFieldsTitle || 'Gerenciar campos de filtro' }}</h2>\n <p [id]=\"addManagerDescriptionId\">{{ i18nLabels.manageFieldsDescription || 'Escolha os campos exibidos na barra de filtros.' }}</p>\n </div>\n <button praxisIconButton=\"close\" size=\"compact\" type=\"button\" (click)=\"closeAddManager()\"\n [attr.aria-label]=\"i18nLabels.close || 'Fechar'\"></button>\n </header>\n <div class=\"add-manager__search\">\n <pdx-collection-search\n [value]=\"addQuery\"\n [placeholder]=\"i18nLabels.filtersSearch || i18nLabels.searchPlaceholder\"\n [ariaLabel]=\"i18nLabels.filtersSearch || i18nLabels.searchPlaceholder\"\n [clearAriaLabel]=\"i18nLabels.clearSearch || 'Limpar busca'\"\n (valueChange)=\"onAddQuery($event)\"\n />\n </div>\n <div class=\"add-manager__bulk\">\n <mat-checkbox [checked]=\"isAllSelected()\" [indeterminate]=\"isSomeSelected() && !isAllSelected()\"\n [disabled]=\"!addItems.length || addManagerConflict\"\n (change)=\"toggleSelectAll()\">\n {{ i18nLabels.selectAllResults || i18nLabels.selectAll || 'Selecionar todos os resultados' }}\n </mat-checkbox>\n </div>\n <div class=\"add-manager__list\" role=\"group\" [attr.aria-label]=\"i18nLabels.manageFieldsTitle || 'Gerenciar campos de filtro'\">\n @if (getAddManagerSelectedItems().length) {\n <section class=\"add-manager__section add-manager__section--selected\"\n [attr.aria-label]=\"i18nLabels.selectedFieldsSectionTitle || 'Campos exibidos'\">\n <h3 class=\"add-manager__section-title\">\n {{ i18nLabels.selectedFieldsSectionTitle || 'Campos exibidos' }}\n <span>{{ getAddManagerSelectedFieldsSummary() }}</span>\n </h3>\n @for (it of getAddManagerSelectedItems(); track trackById($index, it)) {\n <mat-checkbox class=\"add-manager__item\" [attr.data-field-id]=\"it.id\"\n [checked]=\"isAddManagerFieldSelected(it.id)\"\n [matTooltip]=\"it.description || ''\" [matTooltipDisabled]=\"!it.description\"\n matTooltipPosition=\"above\" [attr.aria-description]=\"getAddManagerFieldAriaDescription(it)\"\n [class.add-manager__item--added]=\"isAddManagerItemInMotion(it.id, 'added')\"\n [class.add-manager__item--removed]=\"isAddManagerItemInMotion(it.id, 'removed')\"\n [class.add-manager__item--pending]=\"isAddManagerFieldPendingRemoval(it.id)\"\n [disabled]=\"addManagerConflict\"\n (change)=\"toggleManagedField(it.id, $event.checked)\">\n {{ it.label }}\n @if (it.description) {\n <mat-icon class=\"add-manager__item-info\" [praxisIcon]=\"'info_outline'\" aria-hidden=\"true\"></mat-icon>\n }\n @if (getAddManagerFieldPendingLabel(it.id); as pendingLabel) {\n <span class=\"add-manager__item-pending\">{{ pendingLabel }}</span>\n }\n </mat-checkbox>\n }\n </section>\n }\n @if (getAddManagerAvailableItems().length) {\n <section class=\"add-manager__section\"\n [attr.aria-label]=\"i18nLabels.availableFieldsSectionTitle || 'Campos dispon\u00EDveis'\">\n <h3 class=\"add-manager__section-title\">\n {{ i18nLabels.availableFieldsSectionTitle || 'Campos dispon\u00EDveis' }}\n </h3>\n @for (it of getAddManagerAvailableItems(); track trackById($index, it)) {\n <mat-checkbox class=\"add-manager__item\" [attr.data-field-id]=\"it.id\"\n [checked]=\"isAddManagerFieldSelected(it.id)\"\n [matTooltip]=\"it.description || ''\" [matTooltipDisabled]=\"!it.description\"\n matTooltipPosition=\"above\" [attr.aria-description]=\"getAddManagerFieldAriaDescription(it)\"\n [class.add-manager__item--added]=\"isAddManagerItemInMotion(it.id, 'added')\"\n [class.add-manager__item--removed]=\"isAddManagerItemInMotion(it.id, 'removed')\"\n [class.add-manager__item--pending]=\"isAddManagerFieldPendingAddition(it.id)\"\n [disabled]=\"addManagerConflict\"\n (change)=\"toggleManagedField(it.id, $event.checked)\">\n {{ it.label }}\n @if (it.description) {\n <mat-icon class=\"add-manager__item-info\" [praxisIcon]=\"'info_outline'\" aria-hidden=\"true\"></mat-icon>\n }\n @if (getAddManagerFieldPendingLabel(it.id); as pendingLabel) {\n <span class=\"add-manager__item-pending\">{{ pendingLabel }}</span>\n }\n </mat-checkbox>\n }\n </section>\n }\n @if (!addItems.length) {\n <div class=\"add-manager__empty\" role=\"status\">\n <mat-icon [praxisIcon]=\"'search_off'\" aria-hidden=\"true\"></mat-icon>\n <span>{{ addQuery ? (i18nLabels.noFilterFieldsFound || 'Nenhum campo encontrado.') : (i18nLabels.addUnavailable || 'Todos os campos j\u00E1 est\u00E3o vis\u00EDveis') }}</span>\n </div>\n }\n </div>\n <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ addManagerAnnouncement }}</div>\n @if (addManagerConflict) {\n <div class=\"add-manager__notice add-manager__notice--conflict\" role=\"alert\">\n <mat-icon [praxisIcon]=\"'sync_problem'\" aria-hidden=\"true\"></mat-icon>\n <span>{{ i18nLabels.fieldSelectionConflict }}</span>\n </div>\n } @else if (getRemovedActiveFieldLabels().length) {\n <div class=\"add-manager__notice add-manager__notice--warning\" role=\"status\">\n <mat-icon [praxisIcon]=\"'warning_amber'\" aria-hidden=\"true\"></mat-icon>\n <span>{{ i18nLabels.removingActiveFields }} {{ getRemovedActiveFieldLabels().join(', ') }}</span>\n </div>\n }\n <footer class=\"add-manager__footer\">\n <button mat-button type=\"button\" (click)=\"closeAddManager()\">{{ i18nLabels.cancel }}</button>\n <button mat-flat-button color=\"primary\" type=\"button\"\n [disabled]=\"!isAddManagerDirty() || addManagerConflict\"\n (click)=\"applyAddManager()\">\n {{ i18nLabels.manageFieldsApply || 'Aplicar' }}\n @if (isAddManagerDirty()) { ({{ getAddManagerChangeCount() }}) }\n </button>\n </footer>\n </section>\n </ng-template>\n }\n @if (showFilterSettings) {\n <button praxisIconButton=\"settings\" size=\"dense\" class=\"cluster-btn separator-before\"\n type=\"button\" (click)=\"openSettings()\" [matBadge]=\"schemaOutdated ? '!' : ''\"\n [matBadgeHidden]=\"!schemaOutdated\" matBadgeColor=\"warn\" matBadgeSize=\"small\" matBadgePosition=\"above after\"\n [matTooltip]=\"getSettingsTooltip()\"\n matTooltipPosition=\"below\" [attr.aria-label]=\"getSettingsAriaLabel()\"></button>\n }\n @if (isFieldAuthoringEnabled() && activeEditableFieldMeta) {\n <button\n praxisIconButton=\"tune\"\n size=\"dense\"\n class=\"cluster-btn\"\n type=\"button\"\n data-testid=\"filter-field-settings-trigger\"\n [attr.aria-label]=\"activeEditableFieldLabel\"\n (click)=\"openSelectedFieldEditor()\"\n ></button>\n }\n </div>\n }\n\n @if ((showClearButton && activeFiltersCount > 0) || showSearchButton) {\n <div class=\"action-cluster action-cluster--query\">\n @if (showClearButton && activeFiltersCount > 0) {\n <button\n praxisIconButton=\"filter_alt_off\"\n size=\"dense\"\n class=\"cluster-btn\"\n type=\"button\"\n data-testid=\"filter-clear-trigger\"\n (click)=\"onClear()\"\n [attr.aria-label]=\"i18nLabels.clear\"\n [matTooltip]=\"i18nLabels.clear\"\n matTooltipPosition=\"below\"\n ></button>\n }\n @if (showSearchButton) {\n <button\n praxisIconButton=\"search\"\n size=\"dense\"\n class=\"cluster-btn\"\n type=\"submit\"\n [attr.aria-label]=\"i18nLabels.apply\"\n [matTooltip]=\"i18nLabels.apply\"\n matTooltipPosition=\"below\"\n ></button>\n }\n </div>\n }\n\n <span class=\"sr-only\" aria-live=\"polite\">{{ advancedOpening ? (i18nLabels.advancedOpening || 'Abrindo filtro avan\u00E7ado...') : getAddAriaLabel() }}</span>\n</div>\n\n@if (compactSelectedMetas.length || compactAlwaysVisibleMetas.length) {\n <div class=\"compact-fields\">\n @if (compactSelectedMetas.length) {\n <ng-container dynamicFieldLoader [fields]=\"compactSelectedMetas\"\n [formGroup]=\"alwaysForm\" (componentsCreated)=\"onSelectedComponents($event)\"></ng-container>\n }\n @if (compactAlwaysVisibleMetas.length) {\n <ng-container dynamicFieldLoader [fields]=\"compactAlwaysVisibleMetas\"\n [formGroup]=\"alwaysForm\" (componentsCreated)=\"onAlwaysComponents($event)\"></ng-container>\n }\n </div>\n}\n\n@if (gridSelectedMetas.length || gridAlwaysVisibleMetas.length) {\n <div class=\"fields-grid\">\n @if (gridSelectedMetas.length) {\n <ng-container dynamicFieldLoader [fields]=\"gridSelectedMetas\" [formGroup]=\"alwaysForm\"\n (componentsCreated)=\"onSelectedComponents($event)\"></ng-container>\n }\n @if (gridAlwaysVisibleMetas.length) {\n <ng-container dynamicFieldLoader [fields]=\"gridAlwaysVisibleMetas\"\n [formGroup]=\"alwaysForm\" (componentsCreated)=\"onAlwaysComponents($event)\"></ng-container>\n }\n </div>\n}\n\n<span class=\"sr-only\" aria-live=\"polite\">\n {{ activeFiltersCount ? (activeFiltersCount + ' filtros ativos') : '' }}\n</span>\n<button type=\"submit\" class=\"hidden-submit\" aria-hidden=\"true\" tabindex=\"-1\"></button>\n</form>\n\n@if (displayedTags.length) {\n <div\n class=\"praxis-filter-tags\"\n [class.outlined]=\"tagVariant==='outlined'\"\n [class.tag-color-basic]=\"tagColor === 'basic'\"\n [class.tag-color-primary]=\"tagColor === 'primary'\"\n [class.tag-color-accent]=\"tagColor === 'accent'\"\n [class.tag-color-warn]=\"tagColor === 'warn'\"\n >\n <mat-chip-set [attr.aria-label]=\"i18nLabels.shortcutsLabel || 'Atalhos'\">\n @for (tag of displayedTags; track trackById($index, tag)) {\n <mat-chip [class.active]=\"isActiveTag(tag)\"\n [color]=\"tagVariant === 'outlined' || tagColor === 'basic' ? null : tagColor\"\n [highlighted]=\"tagVariant === 'filled' && tagColor !== 'basic'\" (click)=\"applyTag(tag)\"\n (keydown.enter)=\"applyTag(tag)\" (keydown.space)=\"applyTag(tag)\" tabindex=\"0\" role=\"button\"\n [attr.aria-pressed]=\"isActiveTag(tag)\">\n @if (editingTagId !== tag.id) {\n @if (isActiveTag(tag)) {\n <span class=\"chip-leading\">\n <mat-icon class=\"leading-check\">check</mat-icon>\n </span>\n }\n <span class=\"chip-label\">{{ tag.label }}</span>\n @if (isUserTag(tag)) {\n <span class=\"chip-trailing\">\n <button praxisIconButton=\"more_vert\" size=\"dense\"\n [matMenuTriggerFor]=\"tagMenu\" (click)=\"$event.stopPropagation()\" [attr.aria-label]=\"getTagActionsAriaLabel(tag)\"></button>\n <mat-menu #tagMenu=\"matMenu\" xPosition=\"before\">\n <button mat-menu-item (click)=\"startEditTag(tag, $event)\">\n <mat-icon>edit</mat-icon>\n <span>{{ i18nLabels.renameShortcut }}</span>\n </button>\n <button mat-menu-item (click)=\"deleteTag(tag)\">\n <mat-icon>delete</mat-icon>\n <span>{{ i18nLabels.removeShortcut }}</span>\n </button>\n </mat-menu>\n </span>\n } @else {\n <span class=\"chip-readonly\" [matTooltip]=\"i18nLabels.readonlyShortcut\">\n <mat-icon>lock</mat-icon>\n </span>\n }\n } @else {\n <input matInput class=\"chip-editor\" [formControl]=\"editingTagLabel\" autofocus\n [matTooltip]=\"'Enter para salvar, Esc para cancelar'\" matTooltipPosition=\"below\"\n (keydown.enter)=\"commitEditTag(tag, $event)\" (keydown.escape)=\"cancelEditTag($event)\"\n (blur)=\"commitEditTag(tag, $event)\" (click)=\"$event.stopPropagation()\" />\n }\n </mat-chip>\n }\n </mat-chip-set>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:root{--pfx-filter-h: 42px;--pfx-filter-align-offset: 2px;--pfx-gap-x: 12px;--pfx-gap-y: 8px;--pfx-always-max-desktop: 380px;--pfx-slider-span-desktop: 2;--pfx-advanced-pad-x: 24px;--pfx-field-min: 280px;--pfx-overlay-margin-y: 16px;--pfx-overlay-margin-x: 16px}:host-context(.theme-light){--pfx-surface-border: var(--praxis-theme-outline-strong, var(--md-sys-color-outline))}:host{--border-color: var(--praxis-theme-outline, var(--md-sys-color-outline-variant));--border-color-hover: var(--praxis-theme-outline-strong, var(--md-sys-color-outline));--pfx-overlay-surface: var(--praxis-theme-surface-raised, var(--md-sys-color-surface-container));--pfx-overlay-surface-elev: var(--praxis-theme-surface-overlay, var(--md-sys-color-surface-container-high));--pfx-overlay-surface-variant: var(--praxis-theme-surface-raised, var(--md-sys-color-surface-variant));--pfx-overlay-on-surface: var(--praxis-theme-on-surface, var(--md-sys-color-on-surface));--pfx-overlay-on-surface-variant: var(--praxis-theme-on-surface-muted, var(--md-sys-color-on-surface-variant));display:block;width:100%;min-width:0;flex:1 1 auto;container-name:praxis-filter;container-type:inline-size}.schema-error-banner{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:8px 10px;border-radius:10px;border:1px solid color-mix(in srgb,var(--md-sys-color-error) 50%,transparent);background:color-mix(in srgb,var(--md-sys-color-error-container) 85%,transparent);color:var(--md-sys-color-on-error-container)}.schema-error-message{min-width:0;flex:1 1 auto;font-size:.8125rem}:host ::ng-deep .schema-error-retry.mat-mdc-outlined-button{--mdc-outlined-button-outline-color: color-mix( in srgb, var(--md-sys-color-error) 55%, var(--md-sys-color-outline) )}.praxis-filter-bar{display:grid;width:100%;grid-template-columns:minmax(0,1fr) auto;column-gap:6px;row-gap:6px;align-items:center}.inline-actions .actions-anchor{width:0;height:0;overflow:hidden}.inline-actions{grid-column:2;grid-row:1;flex:0 0 auto;display:flex;gap:6px;justify-self:end;align-self:center;width:fit-content;white-space:nowrap;height:var(--pfx-filter-h);align-items:center;padding:0 2px}.action-cluster{flex:0 0 auto;display:inline-flex;align-items:center;gap:2px;min-height:36px;padding:2px;border-radius:999px;border:1px solid var(--pfx-surface-border, var(--md-sys-color-outline-variant));background:var(--md-sys-color-surface-container-highest)}.action-cluster--manage{position:relative;border-color:color-mix(in srgb,var(--md-sys-color-primary) 35%,var(--md-sys-color-outline-variant));background:var(--md-sys-color-surface-container-high)}.action-cluster .cluster-btn.is-opening{pointer-events:none}.action-cluster .cluster-btn.is-disabled{color:color-mix(in srgb,var(--md-sys-color-on-surface) 38%,transparent);cursor:default;opacity:.56}.inline-actions.actions-outlined button[praxisIconButton]{border:1px solid var(--pfx-surface-border, var(--md-sys-color-outline-variant));border-radius:50%}.inline-actions.actions-outlined .action-cluster button[praxisIconButton]{border-color:transparent}.separator-before{position:relative;margin-left:10px}.separator-before:before{content:\"\";position:absolute;left:-7px;top:50%;width:1px;height:18px;transform:translateY(-50%);background:color-mix(in srgb,var(--md-sys-color-outline) 72%,transparent)}.inline-actions mat-icon{width:20px;height:20px;font-size:20px}.fields-grid{grid-column:1;grid-row:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--pfx-always-min, 220px),1fr));grid-auto-flow:row dense;gap:6px}.compact-fields{grid-column:1;grid-row:1;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:center;align-items:center;gap:6px;min-width:0;min-height:var(--pfx-filter-h)}:host ::ng-deep .compact-fields .pfx-field-shell,:host ::ng-deep .compact-fields .pfx-field-shell-wrapper,:host ::ng-deep .compact-fields .pfx-field-shell-host{--pfx-field-shell-width: fit-content;--pfx-field-shell-field-width: auto;width:fit-content!important;max-width:100%;min-width:0;flex:0 1 auto!important}:host ::ng-deep .compact-fields>.pfx-field-shell,:host ::ng-deep .compact-fields>praxis-field-shell{flex:0 1 auto!important;width:fit-content!important;max-width:100%;min-width:0}:host ::ng-deep .compact-fields .pfx-field-shell .mat-mdc-form-field{width:auto!important;max-width:100%;margin-bottom:0}:host ::ng-deep .compact-fields .pfx-field-shell[data-control-type=inlineTime] .mat-mdc-form-field.pdx-inline-time{width:var(--pdx-inline-time-field-w, auto)!important;inline-size:var(--pdx-inline-time-field-w, auto)!important;max-width:min(var(--pdx-inline-time-max-w, 280px),100cqw - 24px)!important}:host ::ng-deep .compact-fields .pfx-field-shell[data-control-type=inlineDateRange] .mat-mdc-form-field{width:var(--pdx-inline-date-range-shell-width, auto)!important;max-width:100%!important}.praxis-filter-bar.has-compact .compact-fields{grid-column:1;grid-row:1}.praxis-filter-bar.has-compact .fields-grid{grid-column:1/-1;grid-row:2}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=slider] mat-slider,:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=range-slider] mat-slider,:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=rangeSlider] mat-slider{width:100%;display:block}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=slider] .pdx-slider-wrapper,:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=range-slider] .pdx-slider-wrapper,:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=rangeSlider] .pdx-slider-wrapper{padding-top:2px}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=range-slider] .pdx-range-slider-container,:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=rangeSlider] .pdx-range-slider-container{padding:2px 0 0}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=range-slider] .pdx-slider-label,:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=rangeSlider] .pdx-slider-label{margin-bottom:4px;line-height:1.15}:host ::ng-deep .fields-grid .mat-mdc-text-field-wrapper.mdc-text-field--outlined{min-height:var(--pfx-filter-h);align-items:center}:host ::ng-deep .fields-grid .mat-mdc-form-field-infix{min-height:var(--pfx-filter-h)}:host ::ng-deep .fields-grid .mat-mdc-select-trigger{height:var(--pfx-filter-h);align-items:center}:host ::ng-deep .fields-grid .mat-mdc-form-field{width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineSelect]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineSelect] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineSearchableSelect]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineSearchableSelect] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineMultiSelect]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineMultiSelect] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineInput]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineInput] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlinePhone]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlinePhone] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineToggle]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineToggle] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineRange]{justify-self:start}:host ::ng-deep .compact-fields .pfx-field-shell[data-control-type=inlineRange]{max-width:min(340px,100%)}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineDate]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineDate] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineDateRange]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineDateRange] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .mat-mdc-form-field-subscript-wrapper{min-height:0;margin-top:0}:host ::ng-deep .fields-grid .mat-mdc-form-field{margin-bottom:0}.praxis-filter-bar.has-compact{--pfx-filter-tag-color: var(--md-sys-color-primary-container);--pfx-filter-tag-on-color: var(--md-sys-color-on-primary-container);--pfx-filter-tag-outline-color: var(--md-sys-color-primary);--pdx-inline-control-height: var(--pfx-filter-inline-control-height, 42px);--pdx-inline-control-height-mobile: var(--pfx-filter-inline-control-height-mobile, 40px);--pdx-inline-control-padding-x: var(--pfx-filter-inline-control-padding-x, 12px);--pdx-inline-control-padding-x-mobile: var(--pfx-filter-inline-control-padding-x-mobile, 12px);--pdx-inline-clear-size: var(--pfx-filter-inline-clear-size, 22px);--pdx-inline-chip-radius: var(--pfx-filter-inline-chip-radius, var(--md-sys-shape-corner-full, 999px));--pdx-inline-chip-active-bg: var(--pfx-filter-tag-color);--pdx-inline-chip-active-fg: var(--pfx-filter-tag-on-color);--pdx-inline-chip-active-clear-color: var(--pfx-filter-tag-on-color);--pdx-inline-field-focus-outline: var(--pfx-filter-tag-outline-color)}.praxis-filter-bar.has-compact.tag-color-accent{--pfx-filter-tag-color: var(--md-sys-color-tertiary-container, var(--md-sys-color-secondary-container));--pfx-filter-tag-on-color: var(--md-sys-color-on-tertiary-container, var(--md-sys-color-on-secondary-container));--pfx-filter-tag-outline-color: var(--md-sys-color-tertiary, var(--md-sys-color-secondary))}.praxis-filter-bar.has-compact.tag-color-warn{--pfx-filter-tag-color: var(--md-sys-color-error-container);--pfx-filter-tag-on-color: var(--md-sys-color-on-error-container);--pfx-filter-tag-outline-color: var(--md-sys-color-error)}.praxis-filter-bar.has-compact.tag-color-basic{--pfx-filter-tag-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);--pfx-filter-tag-on-color: var(--md-sys-color-on-surface);--pfx-filter-tag-outline-color: var(--md-sys-color-outline-variant)}:host ::ng-deep .praxis-filter-bar.has-compact{--pfx-filter-inline-chip-padding-x: var(--pdx-inline-control-padding-x);--pfx-filter-inline-icon-gap: 4px}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select,.pdx-inline-date,.pdx-inline-date-range,.pdx-inline-autocomplete,.pdx-inline-currency,.pdx-inline-time) .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-inline:var(--pfx-filter-inline-chip-padding-x)!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select,.pdx-inline-date,.pdx-inline-date-range,.pdx-inline-autocomplete,.pdx-inline-currency,.pdx-inline-time) .mat-mdc-form-field-icon-prefix{align-items:center;display:inline-flex;flex:0 0 auto;margin-right:var(--pfx-filter-inline-icon-gap)!important;padding:0!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select,.pdx-inline-date,.pdx-inline-date-range,.pdx-inline-autocomplete,.pdx-inline-currency,.pdx-inline-time) .mat-mdc-form-field-icon-suffix{align-items:center;display:inline-flex;flex:0 0 auto;gap:var(--pfx-filter-inline-icon-gap)!important;margin-left:var(--pfx-filter-inline-icon-gap)!important;padding:0!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select,.pdx-inline-date,.pdx-inline-date-range,.pdx-inline-autocomplete,.pdx-inline-currency,.pdx-inline-time) .mat-mdc-form-field-icon-prefix>.mat-icon,:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select,.pdx-inline-date,.pdx-inline-date-range,.pdx-inline-autocomplete,.pdx-inline-currency,.pdx-inline-time) .mat-mdc-form-field-icon-suffix>.mat-icon{flex:0 0 16px!important;font-size:16px!important;height:16px!important;line-height:16px!important;margin:0!important;padding:0!important;width:16px!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select,.pdx-inline-date,.pdx-inline-date-range,.pdx-inline-autocomplete,.pdx-inline-currency,.pdx-inline-time) .mat-mdc-form-field-infix{padding-inline:0!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select) .pdx-chip-trigger{gap:var(--pfx-filter-inline-icon-gap)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-chip-trigger.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-currency-range-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .mat-mdc-form-field.pdx-has-value .mat-mdc-text-field-wrapper,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-select .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-chip-trigger.is-active),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-searchable-select .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-chip-trigger.is-active),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-async-select.pdx-has-selection .mat-mdc-text-field-wrapper.mdc-text-field--outlined,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-date-range.pdx-inline-date-range-has-value .mat-mdc-text-field-wrapper.mdc-text-field--outlined,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-date-range.pdx-inline-date-range-has-both .mat-mdc-text-field-wrapper.mdc-text-field--outlined,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-entity-lookup.pdx-has-selection .pdx-chip-trigger,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-multi-select.pdx-has-selection .pdx-chip-trigger,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-range-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-distance-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-score-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-relative-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-relative-period-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-rating-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-pipeline-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-sentiment-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-color-label-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-time-range-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-toggle-pill.is-active{--pdx-inline-currency-symbol-color: var(--pfx-filter-tag-on-color);background:var(--pfx-filter-tag-color)!important;border-color:transparent!important;color:var(--pfx-filter-tag-on-color)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-chip-trigger.is-active :where(.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-currency-range-chip.is-active :where(.mat-icon,.pdx-inline-currency-range-value,.pdx-inline-currency-range-text,.pdx-inline-currency-range-clear),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .mat-mdc-form-field.pdx-has-value :where(input,.mat-mdc-input-element,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,.pdx-inline-clear),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear) :where(input,.mat-mdc-input-element,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,.pdx-inline-clear,.pdx-inline-number-suffix),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled :where(.pdx-inline-select,.pdx-inline-searchable-select) .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-chip-trigger.is-active) :where(.mat-mdc-select-value,.mat-mdc-select-min-line,.mat-mdc-select-placeholder,.pdx-chip-trigger,.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-async-select.pdx-has-selection :where(.mat-mdc-select-value,.mat-mdc-select-min-line,.mat-mdc-select-placeholder,.pdx-chip-trigger,.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-date-range.pdx-inline-date-range-has-value :where(.mat-date-range-input-inner,.mat-date-range-input-separator,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,input),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-date-range.pdx-inline-date-range-has-both :where(.mat-date-range-input-inner,.mat-date-range-input-separator,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,input),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled :where(.pdx-inline-entity-lookup.pdx-has-selection,.pdx-inline-multi-select.pdx-has-selection) .pdx-chip-trigger :where(.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled :where(.pdx-inline-range-chip.is-active,.pdx-inline-distance-chip.is-active,.pdx-inline-score-chip.is-active,.pdx-inline-relative-chip.is-active,.pdx-inline-relative-period-chip.is-active,.pdx-inline-rating-chip.is-active,.pdx-inline-pipeline-chip.is-active,.pdx-inline-sentiment-chip.is-active,.pdx-inline-color-label-chip.is-active) :where(.mat-icon,button,span),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-time-range-chip.is-active :where(.pdx-inline-time-range-icon,.pdx-inline-time-range-text,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-toggle-pill.is-active :where(.pdx-inline-toggle-label,.mat-icon){color:var(--pfx-filter-tag-on-color)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-chip-trigger.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-currency-range-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .mat-mdc-form-field.pdx-has-value .mat-mdc-text-field-wrapper,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-select .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-chip-trigger.is-active),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-searchable-select .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-chip-trigger.is-active),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-async-select.pdx-has-selection .mat-mdc-text-field-wrapper.mdc-text-field--outlined,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-date-range.pdx-inline-date-range-has-value .mat-mdc-text-field-wrapper.mdc-text-field--outlined,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-date-range.pdx-inline-date-range-has-both .mat-mdc-text-field-wrapper.mdc-text-field--outlined,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-entity-lookup.pdx-has-selection .pdx-chip-trigger,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-multi-select.pdx-has-selection .pdx-chip-trigger,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-range-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-distance-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-score-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-relative-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-relative-period-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-rating-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-pipeline-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-sentiment-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-color-label-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-time-range-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-toggle-pill.is-active{--pdx-inline-currency-symbol-color: var(--pfx-filter-tag-outline-color);background:transparent!important;border-color:var(--pfx-filter-tag-outline-color)!important;box-shadow:inset 0 0 0 1px var(--pfx-filter-tag-outline-color);color:var(--pfx-filter-tag-outline-color)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-chip-trigger.is-active :where(.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-currency-range-chip.is-active :where(.mat-icon,.pdx-inline-currency-range-value,.pdx-inline-currency-range-text,.pdx-inline-currency-range-clear),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .mat-mdc-form-field.pdx-has-value :where(input,.mat-mdc-input-element,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,.pdx-inline-clear),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear) :where(input,.mat-mdc-input-element,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,.pdx-inline-clear,.pdx-inline-number-suffix),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined :where(.pdx-inline-select,.pdx-inline-searchable-select) .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-chip-trigger.is-active) :where(.mat-mdc-select-value,.mat-mdc-select-min-line,.mat-mdc-select-placeholder,.pdx-chip-trigger,.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-async-select.pdx-has-selection :where(.mat-mdc-select-value,.mat-mdc-select-min-line,.mat-mdc-select-placeholder,.pdx-chip-trigger,.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-date-range.pdx-inline-date-range-has-value :where(.mat-date-range-input-inner,.mat-date-range-input-separator,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,input),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-date-range.pdx-inline-date-range-has-both :where(.mat-date-range-input-inner,.mat-date-range-input-separator,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,input),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined :where(.pdx-inline-entity-lookup.pdx-has-selection,.pdx-inline-multi-select.pdx-has-selection) .pdx-chip-trigger :where(.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined :where(.pdx-inline-range-chip.is-active,.pdx-inline-distance-chip.is-active,.pdx-inline-score-chip.is-active,.pdx-inline-relative-chip.is-active,.pdx-inline-relative-period-chip.is-active,.pdx-inline-rating-chip.is-active,.pdx-inline-pipeline-chip.is-active,.pdx-inline-sentiment-chip.is-active,.pdx-inline-color-label-chip.is-active) :where(.mat-icon,button,span),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-time-range-chip.is-active :where(.pdx-inline-time-range-icon,.pdx-inline-time-range-text,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-toggle-pill.is-active :where(.pdx-inline-toggle-label,.mat-icon){color:var(--pfx-filter-tag-outline-color)!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-chip-trigger.is-active,.mat-mdc-form-field.pdx-has-value,.pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear),.pdx-inline-currency-range-chip.is-active,.pdx-inline-range-chip.is-active,.pdx-inline-distance-chip.is-active,.pdx-inline-score-chip.is-active,.pdx-inline-relative-chip.is-active,.pdx-inline-relative-period-chip.is-active,.pdx-inline-rating-chip.is-active,.pdx-inline-pipeline-chip.is-active,.pdx-inline-sentiment-chip.is-active,.pdx-inline-color-label-chip.is-active,.pdx-inline-time-range-chip.is-active,.pdx-inline-toggle-pill.is-active) :where(.pdx-chip-clear,.pdx-inline-clear,.pdx-inline-currency-range-clear,.pdx-inline-range-clear,.pdx-inline-distance-clear,.pdx-inline-score-clear,.pdx-inline-relative-clear,.pdx-inline-rating-clear,.pdx-inline-pipeline-clear,.pdx-inline-sentiment-clear,.pdx-inline-color-label-clear,.pdx-inline-time-range-clear,.pdx-inline-toggle-clear){background:color-mix(in srgb,currentColor 16%,transparent)!important;border-radius:50%!important;color:inherit!important;display:inline-grid!important;flex:0 0 var(--pdx-inline-clear-size, 22px)!important;height:var(--pdx-inline-clear-size, 22px)!important;min-width:var(--pdx-inline-clear-size, 22px)!important;place-items:center!important;width:var(--pdx-inline-clear-size, 22px)!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-chip-trigger.is-active,.mat-mdc-form-field.pdx-has-value,.pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear),.pdx-inline-currency-range-chip.is-active,.pdx-inline-range-chip.is-active,.pdx-inline-distance-chip.is-active,.pdx-inline-score-chip.is-active,.pdx-inline-relative-chip.is-active,.pdx-inline-relative-period-chip.is-active,.pdx-inline-rating-chip.is-active,.pdx-inline-pipeline-chip.is-active,.pdx-inline-sentiment-chip.is-active,.pdx-inline-color-label-chip.is-active,.pdx-inline-time-range-chip.is-active,.pdx-inline-toggle-pill.is-active) :where(.pdx-chip-clear,.pdx-inline-clear,.pdx-inline-currency-range-clear,.pdx-inline-range-clear,.pdx-inline-distance-clear,.pdx-inline-score-clear,.pdx-inline-relative-clear,.pdx-inline-rating-clear,.pdx-inline-pipeline-clear,.pdx-inline-sentiment-clear,.pdx-inline-color-label-clear,.pdx-inline-time-range-clear,.pdx-inline-toggle-clear):hover{background:color-mix(in srgb,currentColor 24%,transparent)!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-chip-trigger.is-active,.mat-mdc-form-field.pdx-has-value,.pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear),.pdx-inline-currency-range-chip.is-active,.pdx-inline-range-chip.is-active,.pdx-inline-distance-chip.is-active,.pdx-inline-score-chip.is-active,.pdx-inline-relative-chip.is-active,.pdx-inline-relative-period-chip.is-active,.pdx-inline-rating-chip.is-active,.pdx-inline-pipeline-chip.is-active,.pdx-inline-sentiment-chip.is-active,.pdx-inline-color-label-chip.is-active,.pdx-inline-time-range-chip.is-active,.pdx-inline-toggle-pill.is-active) :where(.pdx-chip-clear,.pdx-inline-clear,.pdx-inline-currency-range-clear,.pdx-inline-range-clear,.pdx-inline-distance-clear,.pdx-inline-score-clear,.pdx-inline-relative-clear,.pdx-inline-rating-clear,.pdx-inline-pipeline-clear,.pdx-inline-sentiment-clear,.pdx-inline-color-label-clear,.pdx-inline-time-range-clear,.pdx-inline-toggle-clear) .mat-icon{color:var(--pdx-inline-clear-icon-color, currentColor)!important}:host ::ng-deep .praxis-filter-bar.has-compact .mat-mdc-form-field.pdx-has-value .pdx-inline-clear .mat-icon{color:var(--pdx-inline-clear-icon-color, currentColor)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .mat-mdc-form-field.pdx-has-value .pdx-inline-clear .mat-icon,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .mat-mdc-form-field.pdx-has-value .pdx-inline-clear .mat-icon{color:var(--pdx-inline-clear-icon-color, currentColor)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-number .mat-mdc-text-field-wrapper:has(.pdx-inline-clear) .pdx-inline-clear .mat-icon,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-number .mat-mdc-text-field-wrapper:has(.pdx-inline-clear) .pdx-inline-clear .mat-icon{color:var(--pdx-inline-clear-icon-color, currentColor)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-toggle-pill.is-active .pdx-inline-toggle-clear .mat-icon,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-toggle-pill.is-active .pdx-inline-toggle-clear .mat-icon{color:var(--pdx-inline-clear-icon-color, currentColor)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-chip-trigger.is-active .pdx-chip-clear .mat-icon,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-chip-trigger.is-active .pdx-chip-clear .mat-icon{color:var(--pdx-inline-clear-icon-color, currentColor)!important}.praxis-filter-tags.outlined .mat-mdc-chip{background:transparent!important;--mat-chip-outline-width: 1px;--mat-chip-outline-color: var(--md-sys-color-outline-variant);box-shadow:inset 0 0 0 var(--mat-chip-outline-width) var(--mat-chip-outline-color)}.praxis-filter-tags.outlined.tag-color-primary .mat-mdc-chip{--mat-chip-outline-color: var(--md-sys-color-primary)}.praxis-filter-tags.outlined.tag-color-accent .mat-mdc-chip{--mat-chip-outline-color: var(--md-sys-color-tertiary)}.praxis-filter-tags.outlined.tag-color-warn .mat-mdc-chip{--mat-chip-outline-color: var(--md-sys-color-error)}.praxis-filter-tags.outlined mat-chip.active .mat-mdc-chip,.praxis-filter-tags.outlined .mat-mdc-chip.mat-mdc-chip-highlighted{--mat-chip-outline-width: 2px;box-shadow:inset 0 0 0 var(--mat-chip-outline-width) var(--mat-chip-outline-color)!important}.praxis-filter-tags.outlined.tag-color-basic mat-chip.active .mat-mdc-chip{--mat-chip-outline-color: var(--md-sys-color-primary)}.praxis-filter-tags .mat-mdc-standard-chip .mdc-evolution-chip__text-label{display:flex;align-items:center;justify-content:center;gap:4px;line-height:1.2;font-size:.875rem}.praxis-filter-tags .chip-leading,.praxis-filter-tags .chip-trailing{display:inline-flex;align-items:center}.praxis-filter-tags .leading-check{width:18px;height:18px;font-size:18px;line-height:1}.praxis-filter-tags .chip-label{position:relative;top:-6px}.praxis-filter-tags .mat-mdc-standard-chip{--mat-chip-container-height: 36px}.praxis-filter-advanced{display:flex;flex-direction:column;min-width:400px;max-width:90vw;min-height:260px;max-height:min(80vh,720px);margin:var(--pfx-overlay-margin-y) var(--pfx-overlay-margin-x);background-color:var(--pfx-overlay-surface)!important;background:var(--pfx-overlay-surface)!important;color:var(--pfx-overlay-on-surface);border:1px solid var(--border-color);border-radius:12px;box-shadow:var(--md-sys-elevation-level3)}.advanced-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px var(--pfx-advanced-pad-x) 10px;border-bottom:1px solid var(--border-color);background:var(--pfx-overlay-surface)}.advanced-title-block{display:flex;flex-direction:column;gap:2px}.advanced-title{font-size:1rem;font-weight:600;color:var(--pfx-overlay-on-surface)}.advanced-subtitle{font-size:.85rem;color:var(--pfx-overlay-on-surface-variant)}.advanced-close{align-self:flex-start}.praxis-filter-overlay.mobile .praxis-filter-advanced{height:100vh;max-height:100vh;margin:0;border-radius:0}:host ::ng-deep .praxis-overlay-backdrop{background:var(--md-sys-color-scrim);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}:host ::ng-deep .praxis-filter-overlay.frosted .praxis-filter-advanced{background:var(--pfx-overlay-surface-variant)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-color:var(--border-color)}:host ::ng-deep .praxis-filter-overlay.frosted .advanced-header,:host ::ng-deep .praxis-filter-overlay.frosted .advanced-actions{background:var(--pfx-overlay-surface-variant)!important}.advanced-body{padding:12px var(--pfx-advanced-pad-x) 72px;overflow:auto;flex:1 1 auto;overscroll-behavior:contain}:host ::ng-deep .praxis-filter-advanced .praxis-filter-form .filter-row{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(var(--pfx-field-min),1fr));gap:var(--pfx-gap-y) var(--pfx-gap-x)}:host ::ng-deep .praxis-filter-advanced .praxis-filter-form .filter-column{min-width:0}:host ::ng-deep .praxis-filter-advanced .praxis-filter-form .filter-column .mat-mdc-form-field{width:100%}.advanced-actions{position:sticky;bottom:0;z-index:2;display:flex;justify-content:flex-end;gap:8px;padding:var(--pfx-gap-y) var(--pfx-advanced-pad-x);background-color:var(--pfx-overlay-surface)!important;background:var(--pfx-overlay-surface)!important;border-top:1px solid var(--border-color);box-shadow:0 -1px 0 var(--md-sys-color-outline-variant)}.advanced-actions .mat-mdc-button-base{height:40px}.advanced-actions .mat-mdc-raised-button.mat-primary{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}:host ::ng-deep .praxis-filter-advanced .mat-mdc-text-field-wrapper.mdc-text-field--outlined{--mdc-outlined-text-field-outline-color: var(--border-color);--mdc-outlined-text-field-hover-outline-color: var(--border-color-hover);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-label-text-color: var(--pfx-overlay-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--pfx-overlay-on-surface);--mdc-outlined-text-field-container-color: var(--pfx-overlay-surface)}:host ::ng-deep .praxis-filter-advanced .mat-mdc-select-trigger,:host ::ng-deep .praxis-filter-advanced .mat-mdc-form-field-subscript-wrapper,:host ::ng-deep .praxis-filter-advanced .mat-mdc-form-field-infix{color:var(--pfx-overlay-on-surface)}@container praxis-filter (min-width: 600px){.fields-grid{gap:6px 8px}:host ::ng-deep .praxis-filter-advanced .praxis-filter-form .filter-row{grid-template-columns:repeat(2,minmax(0,1fr))}}@container praxis-filter (max-width: 640px){.praxis-filter-bar.has-compact{grid-template-columns:minmax(0,1fr);align-items:start}.praxis-filter-bar.has-compact .compact-fields{grid-column:1;grid-row:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:start;justify-items:stretch;width:100%}.praxis-filter-bar.has-compact .inline-actions{grid-column:1;grid-row:2;justify-self:start;width:100%;height:auto}.praxis-filter-bar.has-compact .inline-actions .action-cluster{max-width:100%}:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields>.pfx-field-shell,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields>praxis-field-shell,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell-wrapper,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell-host{--pfx-field-shell-width: auto;--pfx-field-shell-field-width: auto;width:100%!important;max-width:100%!important}:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .mat-mdc-form-field,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .mat-mdc-text-field-wrapper,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-chip-trigger,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-range-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-currency-range-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-distance-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-score-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-relative-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-relative-period-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-rating-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-pipeline-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-sentiment-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-color-label-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-time-range-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-toggle-pill{width:100%!important;max-width:100%!important}:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields :where(.pdx-chip-label,.pdx-chip-trigger,.pdx-inline-range-text,.pdx-inline-currency-range-text,.pdx-inline-distance-text,.pdx-inline-score-text,.pdx-inline-relative-text,.pdx-inline-relative-period-text,.pdx-inline-rating-text,.pdx-inline-pipeline-text,.pdx-inline-sentiment-text,.pdx-inline-color-label-text,.pdx-inline-time-range-text,.pdx-inline-toggle-label){min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell[data-control-type=inlineTime],:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell[data-control-type=inlineTime] .pfx-field-shell-wrapper,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell[data-control-type=inlineTime] .pfx-field-shell-host{--pfx-field-shell-width: fit-content;--pfx-field-shell-field-width: var(--pdx-inline-time-field-w, auto);justify-self:start;width:fit-content!important;max-width:100%!important}:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell[data-control-type=inlineTime] .mat-mdc-form-field.pdx-inline-time{width:var(--pdx-inline-time-field-w, auto)!important;inline-size:var(--pdx-inline-time-field-w, auto)!important;max-width:min(var(--pdx-inline-time-max-w, 280px),100cqw - 24px)!important}}@container praxis-filter (min-width: 960px){.fields-grid{gap:6px 10px}}@container praxis-filter (min-width: 1200px){.fields-grid{grid-template-columns:repeat(auto-fit,minmax(var(--pfx-always-min, 220px),var(--pfx-always-max-desktop, 380px)));justify-content:start;align-content:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=slider],:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=range-slider],:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=rangeSlider],:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=rangeslider]{grid-column:span var(--pfx-slider-span-desktop, 2)}}.inline-toggles{display:flex;align-items:center;gap:8px;margin:0 4px 0 6px}:host ::ng-deep .inline-actions .mat-mdc-slide-toggle{height:var(--pfx-filter-h);display:flex;align-items:center}:host ::ng-deep .inline-actions .mat-mdc-slide-toggle .mdc-form-field{align-items:center}::ng-deep .praxis-filter-overlay .praxis-filter-advanced .praxis-filter-form .filter-row{display:grid!important;gap:var(--pfx-gap-y, 1px) var(--pfx-gap-x, 6px)}@media(min-width:600px){::ng-deep .praxis-filter-overlay .praxis-filter-advanced .praxis-filter-form .filter-row{grid-template-columns:repeat(2,minmax(0,1fr))}}.sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}.hidden-submit{position:absolute!important;width:0!important;height:0!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;pointer-events:none!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;overflow:hidden!important}:host ::ng-deep .inline-actions [matBadge] .mat-badge-content{top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;font-size:10px;font-weight:700;line-height:16px;letter-spacing:0;text-indent:0;color:var(--md-sys-color-on-primary, #fff)}:host ::ng-deep .inline-actions [matBadge][matbadgecolor=warn] .mat-badge-content,:host ::ng-deep .inline-actions [matBadge].mat-badge-warn .mat-badge-content{color:var(--md-sys-color-on-error, #fff)}.praxis-filter-bar :where(.mat-mdc-slide-toggle .mdc-switch__icons){display:none!important}.praxis-filter-bar{--mdc-switch-unselected-icon-size: 0px;--mdc-switch-selected-icon-size: 0px;--pfx-always-min: 220px}.praxis-filter-card{display:flex;flex-direction:column;gap:6px;padding:8px 12px;border-radius:12px;border:1px solid var(--pfx-surface-border, var(--praxis-theme-outline, var(--md-sys-color-outline-variant)));background:var(--praxis-theme-surface-raised, var(--md-sys-color-surface-container));color:var(--praxis-theme-on-surface, var(--md-sys-color-on-surface))}.add-manager{--_pfx-field-manager-surface: var(--pfx-field-manager-surface, var(--praxis-theme-surface-overlay, var(--md-sys-color-surface-container-highest)));--_pfx-field-manager-on-surface: var(--pfx-field-manager-on-surface, var(--praxis-theme-on-surface, var(--md-sys-color-on-surface)));--_pfx-field-manager-on-surface-muted: var(--pfx-field-manager-on-surface-muted, var(--praxis-theme-on-surface-muted, var(--md-sys-color-on-surface-variant)));--_pfx-field-manager-outline: var(--pfx-field-manager-outline, var(--pdx-inline-field-outline, var(--praxis-theme-outline, var(--md-sys-color-outline-variant))));--_pfx-field-manager-focus-outline: var(--pfx-field-manager-focus-outline, var(--pdx-inline-field-focus-outline, var(--praxis-theme-focus-outline, var(--md-sys-color-primary))));--_pfx-field-manager-scrollbar-thumb: var(--pfx-field-manager-scrollbar-thumb, color-mix(in srgb, var(--_pfx-field-manager-on-surface) 42%, var(--_pfx-field-manager-surface)));--_pfx-field-manager-scrollbar-thumb-hover: var(--pfx-field-manager-scrollbar-thumb-hover, color-mix(in srgb, var(--_pfx-field-manager-on-surface) 64%, var(--_pfx-field-manager-surface)));--_pfx-field-manager-scrollbar-track: var(--pfx-field-manager-scrollbar-track, transparent);--_pfx-field-manager-scrollbar-size: var(--pfx-field-manager-scrollbar-size, 10px);display:flex;flex-direction:column;width:min(400px,100vw - 24px);max-height:min(70vh,560px);overflow:hidden;border:1px solid var(--_pfx-field-manager-outline);border-radius:var(--pfx-overlay-radius, 16px);background:var(--_pfx-field-manager-surface);color:var(--_pfx-field-manager-on-surface);box-shadow:var(--praxis-theme-elevation, var(--md-sys-elevation-level3))}.add-manager__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 16px 8px 20px}.add-manager__header h2{margin:0;font:var(--md-sys-typescale-title-medium)}.add-manager__header p{margin:4px 0 0;color:var(--_pfx-field-manager-on-surface-muted);font:var(--md-sys-typescale-body-small)}.add-manager__search{padding:8px 20px}.add-manager__bulk{padding:8px 20px;border-block:1px solid var(--_pfx-field-manager-outline)}.add-manager__list{display:flex;flex-direction:column;min-height:80px;overflow:auto;overscroll-behavior:contain;scrollbar-color:var(--_pfx-field-manager-scrollbar-thumb) var(--_pfx-field-manager-scrollbar-track);scrollbar-gutter:stable;scrollbar-width:auto;padding:4px 12px 12px}.add-manager__list::-webkit-scrollbar{width:var(--_pfx-field-manager-scrollbar-size);height:var(--_pfx-field-manager-scrollbar-size)}.add-manager__list::-webkit-scrollbar-track{background:var(--_pfx-field-manager-scrollbar-track)}.add-manager__list::-webkit-scrollbar-thumb{min-height:32px;border:2px solid transparent;border-radius:999px;background:var(--_pfx-field-manager-scrollbar-thumb);background-clip:padding-box}.add-manager__list::-webkit-scrollbar-thumb:hover{background:var(--_pfx-field-manager-scrollbar-thumb-hover);background-clip:padding-box}.add-manager__section+.add-manager__section{margin-top:8px;padding-top:8px;border-top:1px solid var(--_pfx-field-manager-outline)}.add-manager__section-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;padding:8px 8px 4px;color:var(--_pfx-field-manager-on-surface-muted);font:var(--md-sys-typescale-label-medium)}.add-manager__section-title span{color:var(--_pfx-field-manager-on-surface-muted);font:var(--md-sys-typescale-label-small);white-space:nowrap}.add-manager__item{display:flex;align-items:center;min-height:48px;padding-inline:8px;border-radius:var(--pfx-control-radius, 8px)}::ng-deep .add-manager__item .mdc-form-field{align-items:center}::ng-deep .add-manager__item .mdc-label{display:inline-flex;align-items:center;min-height:20px}.add-manager__item:hover{background:color-mix(in srgb,var(--_pfx-field-manager-on-surface) 6%,var(--_pfx-field-manager-surface))}.add-manager__item-info{width:16px;height:16px;margin-left:4px;vertical-align:text-bottom;color:var(--_pfx-field-manager-on-surface-muted);font-size:16px}.add-manager__item-pending{display:inline-flex;align-items:center;margin-left:8px;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--_pfx-field-manager-focus-outline) 14%,transparent);color:var(--_pfx-field-manager-on-surface-muted);font:var(--md-sys-typescale-label-small);white-space:nowrap}.add-manager__item--pending{background:color-mix(in srgb,var(--_pfx-field-manager-focus-outline) 8%,var(--_pfx-field-manager-surface))}.add-manager__section--selected .add-manager__item{box-shadow:inset 2px 0 color-mix(in srgb,var(--_pfx-field-manager-focus-outline) 56%,transparent)}.add-manager__item--added{animation:add-manager-item-added var(--md-sys-motion-duration-short4, .2s) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(.05, .7, .1, 1)) both}.add-manager__item--removed{animation:add-manager-item-removed var(--md-sys-motion-duration-short4, .2s) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(.05, .7, .1, 1)) both}@keyframes add-manager-item-added{0%{opacity:.72;background:color-mix(in srgb,var(--_pfx-field-manager-focus-outline) 24%,var(--_pfx-field-manager-surface))}to{opacity:1;background:color-mix(in srgb,var(--_pfx-field-manager-focus-outline) 8%,var(--_pfx-field-manager-surface))}}@keyframes add-manager-item-removed{0%{opacity:.72;background:color-mix(in srgb,var(--md-sys-color-surface-container-high) 72%,transparent)}to{opacity:1;background:color-mix(in srgb,var(--_pfx-field-manager-focus-outline) 8%,var(--_pfx-field-manager-surface))}}@media(prefers-reduced-motion:reduce){.add-manager__item--added,.add-manager__item--removed{animation:none}}.add-manager__empty{display:flex;align-items:center;justify-content:center;gap:8px;min-height:96px;padding:16px;color:var(--_pfx-field-manager-on-surface-muted);text-align:center}.add-manager__footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--_pfx-field-manager-outline);background:var(--_pfx-field-manager-surface)}.add-manager__notice{display:flex;align-items:flex-start;gap:8px;padding:10px 16px;font:var(--md-sys-typescale-body-small)}.add-manager__notice mat-icon{flex:0 0 auto}.add-manager__notice--warning{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.add-manager__notice--conflict{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}@media(max-width:600px){.add-manager{width:calc(100vw - 16px);max-height:min(78dvh,640px);border-radius:var(--pfx-overlay-radius, 16px)}.add-manager__header,.add-manager__search{padding-inline:16px}}.inline-actions .add-trigger{display:inline-flex;align-items:center;gap:6px;height:32px;width:100%;max-width:100%;min-width:0;padding:0 10px;border-radius:0;border:0;background:transparent;overflow:visible}.inline-actions .add-trigger--icon{justify-content:center;width:32px;min-width:32px;padding:0}:host ::ng-deep .inline-actions .add-trigger mat-icon{width:18px;height:18px;font-size:18px;flex:0 0 auto}.inline-actions .add-trigger-label{display:inline-block;flex:1 1 auto;min-width:0;max-width:100%;text-align:left;direction:ltr;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem;line-height:1}:host ::ng-deep .action-cluster--manage .mat-mdc-select{flex:0 0 auto;width:180px;min-width:0;max-width:180px}:host ::ng-deep .action-cluster--manage .cluster-select--hidden.mat-mdc-select{position:absolute;width:1px;min-width:1px;max-width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}:host ::ng-deep .action-cluster--manage .mat-mdc-select-trigger{min-height:32px;padding:0}:host ::ng-deep .action-cluster--manage .mat-mdc-select-value,:host ::ng-deep .action-cluster--manage .mat-mdc-select-value-text,:host ::ng-deep .action-cluster--manage .mat-mdc-select-min-line{width:auto;min-width:0;max-width:100%;display:inline-flex;align-items:center;justify-content:flex-start;overflow:visible}.praxis-filter-card .summary-header{display:flex;align-items:center;gap:10px}.praxis-filter-card .summary-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}.praxis-filter-card .summary-title{font-weight:600}.praxis-filter-card .summary-subtitle{opacity:.8;font-size:.875rem}.praxis-filter-card .summary-badges{display:flex;flex-wrap:wrap;gap:6px}.praxis-filter-card .summary-badges span{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;background:var(--md-sys-color-primary-container);border:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-primary-container);font-size:12px}.praxis-filter-card .card-actions{display:flex;gap:8px}:host ::ng-deep .inline-actions .mat-mdc-select-arrow-wrapper{display:none}.inline-actions .add-filter-btn{height:36px;border-radius:18px;padding:0 16px 0 12px}.inline-actions .add-filter-btn mat-icon{margin-right:8px;margin-left:-4px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i15.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i15.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i15$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i14$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: DynamicFieldLoaderDirective, selector: "[dynamicFieldLoader]", inputs: ["fields", "formGroup", "enableExternalControlBinding", "itemTemplate", "debugTrace", "debugTraceLabel", "readonlyMode", "disabledMode", "presentationMode", "visible", "canvasMode"], outputs: ["componentsCreated", "fieldCreated", "fieldDestroyed", "renderError", "canvasMouseEnter", "canvasMouseLeave", "canvasClick", "canvasFocus"] }, { kind: "component", type: PdxCollectionSearchComponent, selector: "pdx-collection-search", inputs: ["value", "placeholder", "ariaLabel", "clearAriaLabel", "disabled", "density", "icon", "clearIcon"], outputs: ["valueChange", "cleared"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i12.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i12.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i18.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] });
41050
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisFilter, isStandalone: true, selector: "praxis-filter", inputs: { resourcePath: "resourcePath", apiUrlEntry: "apiUrlEntry", fieldMetadata: "fieldMetadata", filterId: "filterId", formId: "formId", componentInstanceId: "componentInstanceId", mode: "mode", notifyIfOutdated: "notifyIfOutdated", snoozeMs: "snoozeMs", autoOpenSettingsOnOutdated: "autoOpenSettingsOnOutdated", enableCustomization: "enableCustomization", value: "value", alwaysVisibleFields: "alwaysVisibleFields", alwaysVisibleFieldMetadataOverrides: "alwaysVisibleFieldMetadataOverrides", selectedFieldIds: "selectedFieldIds", tags: "tags", allowSaveTags: "allowSaveTags", persistenceKey: "persistenceKey", disablePersistence: "disablePersistence", i18n: "i18n", changeDebounceMs: "changeDebounceMs", showFilterSettings: "showFilterSettings", showAdvancedButton: "showAdvancedButton", showAddButton: "showAddButton", showClearButton: "showClearButton", showSearchButton: "showSearchButton", confirmTagDelete: "confirmTagDelete", placeBooleansInActions: "placeBooleansInActions", showToggleLabels: "showToggleLabels", useInlineSelectVariant: "useInlineSelectVariant", useInlineSearchableSelectVariant: "useInlineSearchableSelectVariant", useInlineMultiSelectVariant: "useInlineMultiSelectVariant", useInlineInputVariant: "useInlineInputVariant", useInlineToggleVariant: "useInlineToggleVariant", useInlineRangeVariant: "useInlineRangeVariant", useInlineDateVariant: "useInlineDateVariant", useInlineDateRangeVariant: "useInlineDateRangeVariant", useInlineTimeVariant: "useInlineTimeVariant", useInlineTimeRangeVariant: "useInlineTimeRangeVariant", useInlineTreeSelectVariant: "useInlineTreeSelectVariant", alwaysMinWidth: "alwaysMinWidth", alwaysColsMd: "alwaysColsMd", alwaysColsLg: "alwaysColsLg", tagColor: "tagColor", tagVariant: "tagVariant", tagButtonColor: "tagButtonColor", actionsButtonColor: "actionsButtonColor", actionsVariant: "actionsVariant", overlayVariant: "overlayVariant", overlayBackdrop: "overlayBackdrop", advancedOpenMode: "advancedOpenMode", advancedClearButtonsEnabled: "advancedClearButtonsEnabled" }, outputs: { submit: "submit", change: "change", clear: "clear", modeChange: "modeChange", requestSearch: "requestSearch", tagsChange: "tagsChange", selectedFieldIdsChange: "selectedFieldIdsChange", metaChanged: "metaChanged", schemaStatusChange: "schemaStatusChange" }, host: { listeners: { "window:resize": "onWindowResize()", "document:keydown": "onGlobalKeydown($event)" }, properties: { "style.--pfx-always-min": "alwaysMinWidth + \"px\"", "style.--pfx-always-cols-md": "alwaysColsMd", "style.--pfx-always-cols-lg": "alwaysColsLg" } }, viewQueries: [{ propertyName: "addManagerOrigin", first: true, predicate: ["addManagerOrigin"], descendants: true, read: ElementRef }, { propertyName: "addManagerSearch", first: true, predicate: PdxCollectionSearchComponent, descendants: true }, { propertyName: "anchorRef", first: true, predicate: ["anchorRef"], descendants: true, read: CdkOverlayOrigin }, { propertyName: "addAnchor", first: true, predicate: ["addAnchor"], descendants: true, read: CdkOverlayOrigin }, { propertyName: "advancedButton", first: true, predicate: ["advancedButton"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "@if (saving) {\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n}\n@if (schemaError) {\n <div class=\"schema-error-banner\" role=\"alert\" aria-live=\"polite\">\n <mat-icon [praxisIcon]=\"'error_outline'\" aria-hidden=\"true\"></mat-icon>\n <span class=\"schema-error-message\">{{\n i18nLabels.errorLoadingFilters || \"Erro ao carregar filtros.\"\n }}</span>\n <button\n mat-stroked-button\n class=\"schema-error-retry\"\n type=\"button\"\n (click)=\"retrySchemaLoad()\"\n [attr.aria-label]=\"i18nLabels.retry || 'Tentar novamente'\"\n >\n {{ i18nLabels.retry || \"Tentar novamente\" }}\n </button>\n </div>\n}\n\n<ng-template #filterTagsTemplate>\n @if (displayedTags.length) {\n <div\n class=\"praxis-filter-tags\"\n [class.outlined]=\"tagVariant === 'outlined'\"\n [class.tag-color-basic]=\"tagColor === 'basic'\"\n [class.tag-color-primary]=\"tagColor === 'primary'\"\n [class.tag-color-accent]=\"tagColor === 'accent'\"\n [class.tag-color-warn]=\"tagColor === 'warn'\"\n >\n <mat-chip-set [attr.aria-label]=\"i18nLabels.shortcutsLabel || 'Atalhos'\">\n @for (tag of displayedTags; track trackById($index, tag)) {\n <mat-chip\n [class.active]=\"isActiveTag(tag)\"\n [color]=\"\n tagVariant === 'outlined' || tagColor === 'basic'\n ? null\n : tagColor\n \"\n [highlighted]=\"tagVariant === 'filled' && tagColor !== 'basic'\"\n (click)=\"toggleTag(tag)\"\n (keydown.enter)=\"toggleTag(tag)\"\n (keydown.space)=\"toggleTag(tag)\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-pressed]=\"isActiveTag(tag)\"\n >\n @if (editingTagId !== tag.id) {\n @if (isActiveTag(tag)) {\n <span class=\"chip-leading\">\n <mat-icon class=\"leading-check\">check</mat-icon>\n </span>\n }\n <span class=\"chip-label\">{{ tag.label }}</span>\n @if (isUserTag(tag)) {\n <span class=\"chip-trailing\">\n <button\n praxisIconButton=\"more_vert\"\n size=\"compact\"\n [matMenuTriggerFor]=\"tagMenu\"\n (click)=\"$event.stopPropagation()\"\n [attr.aria-label]=\"getTagActionsAriaLabel(tag)\"\n ></button>\n <mat-menu #tagMenu=\"matMenu\" xPosition=\"before\">\n <button mat-menu-item (click)=\"startEditTag(tag, $event)\">\n <mat-icon>edit</mat-icon>\n <span>{{ i18nLabels.renameShortcut }}</span>\n </button>\n <button mat-menu-item (click)=\"deleteTag(tag)\">\n <mat-icon>delete</mat-icon>\n <span>{{ i18nLabels.removeShortcut }}</span>\n </button>\n </mat-menu>\n </span>\n } @else {\n <span\n class=\"chip-readonly\"\n [matTooltip]=\"i18nLabels.readonlyShortcut\"\n >\n <mat-icon>lock</mat-icon>\n </span>\n }\n } @else {\n <input\n matInput\n class=\"chip-editor\"\n [formControl]=\"editingTagLabel\"\n autofocus\n [matTooltip]=\"'Enter para salvar, Esc para cancelar'\"\n matTooltipPosition=\"below\"\n (keydown.enter)=\"commitEditTag(tag, $event)\"\n (keydown.escape)=\"cancelEditTag($event)\"\n (blur)=\"commitEditTag(tag, $event)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n </mat-chip>\n }\n </mat-chip-set>\n </div>\n }\n</ng-template>\n\n<form\n class=\"praxis-filter-bar\"\n [class.is-open]=\"advancedOpen\"\n [class.has-compact]=\"\n compactSelectedMetas.length || compactAlwaysVisibleMetas.length\n \"\n [class.tag-variant-filled]=\"tagVariant === 'filled'\"\n [class.tag-variant-outlined]=\"tagVariant === 'outlined'\"\n [class.tag-color-basic]=\"tagColor === 'basic'\"\n [class.tag-color-primary]=\"tagColor === 'primary'\"\n [class.tag-color-accent]=\"tagColor === 'accent'\"\n [class.tag-color-warn]=\"tagColor === 'warn'\"\n (click)=\"onFieldInteraction($event)\"\n (focusin)=\"onFieldInteraction($event)\"\n (change)=\"$event.stopPropagation()\"\n (submit)=\"onSubmit(); $event.preventDefault(); $event.stopPropagation()\"\n>\n @if (compactSelectedMetas.length || compactAlwaysVisibleMetas.length) {\n <div class=\"compact-fields\">\n @if (compactSelectedMetas.length) {\n <ng-container\n dynamicFieldLoader\n [fields]=\"compactSelectedMetas\"\n [formGroup]=\"alwaysForm\"\n (componentsCreated)=\"onSelectedComponents($event)\"\n ></ng-container>\n }\n @if (compactAlwaysVisibleMetas.length) {\n <ng-container\n dynamicFieldLoader\n [fields]=\"compactAlwaysVisibleMetas\"\n [formGroup]=\"alwaysForm\"\n (componentsCreated)=\"onAlwaysComponents($event)\"\n ></ng-container>\n }\n </div>\n }\n\n @if (gridSelectedMetas.length || gridAlwaysVisibleMetas.length) {\n <div class=\"fields-grid\">\n @if (gridSelectedMetas.length) {\n <ng-container\n dynamicFieldLoader\n [fields]=\"gridSelectedMetas\"\n [formGroup]=\"alwaysForm\"\n (componentsCreated)=\"onSelectedComponents($event)\"\n ></ng-container>\n }\n @if (gridAlwaysVisibleMetas.length) {\n <ng-container\n dynamicFieldLoader\n [fields]=\"gridAlwaysVisibleMetas\"\n [formGroup]=\"alwaysForm\"\n (componentsCreated)=\"onAlwaysComponents($event)\"\n ></ng-container>\n }\n </div>\n }\n\n <div class=\"query-auxiliary\" data-filter-region=\"query-auxiliary\">\n @if (compactSelectedMetas.length || compactAlwaysVisibleMetas.length) {\n <ng-container [ngTemplateOutlet]=\"filterTagsTemplate\"></ng-container>\n }\n\n <div\n class=\"inline-actions\"\n [class.actions-outlined]=\"actionsVariant === 'outlined'\"\n >\n <div\n class=\"actions-anchor\"\n #anchorRef=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n ></div>\n @if (toggleMetas.length) {\n <div class=\"inline-toggles\">\n <ng-container\n dynamicFieldLoader\n [fields]=\"toggleMetas\"\n [formGroup]=\"alwaysForm\"\n (componentsCreated)=\"onToggleComponents($event)\"\n ></ng-container>\n </div>\n }\n\n @if (\n showAdvancedButton ||\n showAddButton ||\n showFilterSettings ||\n isFieldAuthoringEnabled()\n ) {\n <div class=\"action-cluster action-cluster--manage\">\n @if (showAdvancedButton) {\n <button\n #advancedButton\n praxisIconButton=\"filter_list\"\n size=\"compact\"\n class=\"cluster-btn\"\n [busy]=\"advancedOpening\"\n [class.is-opening]=\"advancedOpening\"\n [class.is-disabled]=\"!hasAdvancedFields()\"\n type=\"button\"\n [matBadge]=\"activeFiltersCount\"\n [matBadgeHidden]=\"!activeFiltersCount || !hasAdvancedFields()\"\n matBadgeSize=\"small\"\n matBadgeColor=\"primary\"\n [matBadgeOverlap]=\"false\"\n (click)=\"toggleAdvanced()\"\n [attr.aria-label]=\"getAdvancedAriaLabel()\"\n [attr.aria-expanded]=\"advancedOpen\"\n [attr.aria-disabled]=\"!hasAdvancedFields()\"\n [attr.aria-busy]=\"advancedOpening ? 'true' : null\"\n [matTooltip]=\"getAdvancedTooltip()\"\n matTooltipPosition=\"below\"\n [attr.aria-controls]=\"advancedPanelId\"\n ></button>\n }\n @if (showAddButton) {\n <button\n #addManagerOrigin=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n praxisIconButton=\"add\"\n size=\"compact\"\n class=\"cluster-btn\"\n type=\"button\"\n [attr.aria-label]=\"getAddAriaLabel()\"\n [matTooltip]=\"getAddTooltip()\"\n matTooltipPosition=\"below\"\n [class.is-disabled]=\"!hasAddableFields()\"\n [attr.aria-disabled]=\"!hasAddableFields()\"\n [attr.aria-expanded]=\"addManagerOpen\"\n aria-haspopup=\"dialog\"\n [attr.aria-controls]=\"addManagerOpen ? addManagerTitleId : null\"\n (click)=\"toggleAddManager()\"\n ></button>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"addManagerOrigin\"\n [cdkConnectedOverlayOpen]=\"addManagerOpen\"\n [cdkConnectedOverlayPositions]=\"addOverlayPositions\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"closeAddManager()\"\n (detach)=\"closeAddManager()\"\n (overlayKeydown)=\"$event.key === 'Escape' && closeAddManager()\"\n >\n <section\n class=\"add-manager\"\n role=\"dialog\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"addManagerTitleId\"\n [attr.aria-describedby]=\"addManagerDescriptionId\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n >\n <header class=\"add-manager__header\">\n <div>\n <h2 [id]=\"addManagerTitleId\">\n {{\n i18nLabels.manageFieldsTitle ||\n \"Gerenciar campos de filtro\"\n }}\n </h2>\n <p [id]=\"addManagerDescriptionId\">\n {{\n i18nLabels.manageFieldsDescription ||\n \"Escolha os campos exibidos na barra de filtros.\"\n }}\n </p>\n </div>\n <button\n praxisIconButton=\"close\"\n size=\"compact\"\n type=\"button\"\n (click)=\"closeAddManager()\"\n [attr.aria-label]=\"i18nLabels.close || 'Fechar'\"\n ></button>\n </header>\n <div class=\"add-manager__search\">\n <pdx-collection-search\n [value]=\"addQuery\"\n [placeholder]=\"\n i18nLabels.filtersSearch || i18nLabels.searchPlaceholder\n \"\n [ariaLabel]=\"\n i18nLabels.filtersSearch || i18nLabels.searchPlaceholder\n \"\n [clearAriaLabel]=\"i18nLabels.clearSearch || 'Limpar busca'\"\n (valueChange)=\"onAddQuery($event)\"\n />\n </div>\n <div class=\"add-manager__bulk\">\n <mat-checkbox\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isSomeSelected() && !isAllSelected()\"\n [disabled]=\"!addItems.length || addManagerConflict\"\n (change)=\"toggleSelectAll()\"\n >\n {{\n i18nLabels.selectAllResults ||\n i18nLabels.selectAll ||\n \"Selecionar todos os resultados\"\n }}\n </mat-checkbox>\n </div>\n <div\n class=\"add-manager__list\"\n role=\"group\"\n [attr.aria-label]=\"\n i18nLabels.manageFieldsTitle || 'Gerenciar campos de filtro'\n \"\n >\n @if (getAddManagerSelectedItems().length) {\n <section\n class=\"add-manager__section add-manager__section--selected\"\n [attr.aria-label]=\"\n i18nLabels.selectedFieldsSectionTitle ||\n 'Campos exibidos'\n \"\n >\n <h3 class=\"add-manager__section-title\">\n {{\n i18nLabels.selectedFieldsSectionTitle ||\n \"Campos exibidos\"\n }}\n <span>{{ getAddManagerSelectedFieldsSummary() }}</span>\n </h3>\n @for (\n it of getAddManagerSelectedItems();\n track trackById($index, it)\n ) {\n <mat-checkbox\n class=\"add-manager__item\"\n [attr.data-field-id]=\"it.id\"\n [checked]=\"isAddManagerFieldSelected(it.id)\"\n [matTooltip]=\"it.description || ''\"\n [matTooltipDisabled]=\"!it.description\"\n matTooltipPosition=\"above\"\n [attr.aria-description]=\"\n getAddManagerFieldAriaDescription(it)\n \"\n [class.add-manager__item--added]=\"\n isAddManagerItemInMotion(it.id, 'added')\n \"\n [class.add-manager__item--removed]=\"\n isAddManagerItemInMotion(it.id, 'removed')\n \"\n [class.add-manager__item--pending]=\"\n isAddManagerFieldPendingRemoval(it.id)\n \"\n [disabled]=\"addManagerConflict\"\n (change)=\"toggleManagedField(it.id, $event.checked)\"\n >\n {{ it.label }}\n @if (it.description) {\n <mat-icon\n class=\"add-manager__item-info\"\n [praxisIcon]=\"'info_outline'\"\n aria-hidden=\"true\"\n ></mat-icon>\n }\n @if (\n getAddManagerFieldPendingLabel(it.id);\n as pendingLabel\n ) {\n <span class=\"add-manager__item-pending\">{{\n pendingLabel\n }}</span>\n }\n </mat-checkbox>\n }\n </section>\n }\n @if (getAddManagerAvailableItems().length) {\n <section\n class=\"add-manager__section\"\n [attr.aria-label]=\"\n i18nLabels.availableFieldsSectionTitle ||\n 'Campos dispon\u00EDveis'\n \"\n >\n <h3 class=\"add-manager__section-title\">\n {{\n i18nLabels.availableFieldsSectionTitle ||\n \"Campos dispon\u00EDveis\"\n }}\n </h3>\n @for (\n it of getAddManagerAvailableItems();\n track trackById($index, it)\n ) {\n <mat-checkbox\n class=\"add-manager__item\"\n [attr.data-field-id]=\"it.id\"\n [checked]=\"isAddManagerFieldSelected(it.id)\"\n [matTooltip]=\"it.description || ''\"\n [matTooltipDisabled]=\"!it.description\"\n matTooltipPosition=\"above\"\n [attr.aria-description]=\"\n getAddManagerFieldAriaDescription(it)\n \"\n [class.add-manager__item--added]=\"\n isAddManagerItemInMotion(it.id, 'added')\n \"\n [class.add-manager__item--removed]=\"\n isAddManagerItemInMotion(it.id, 'removed')\n \"\n [class.add-manager__item--pending]=\"\n isAddManagerFieldPendingAddition(it.id)\n \"\n [disabled]=\"addManagerConflict\"\n (change)=\"toggleManagedField(it.id, $event.checked)\"\n >\n {{ it.label }}\n @if (it.description) {\n <mat-icon\n class=\"add-manager__item-info\"\n [praxisIcon]=\"'info_outline'\"\n aria-hidden=\"true\"\n ></mat-icon>\n }\n @if (\n getAddManagerFieldPendingLabel(it.id);\n as pendingLabel\n ) {\n <span class=\"add-manager__item-pending\">{{\n pendingLabel\n }}</span>\n }\n </mat-checkbox>\n }\n </section>\n }\n @if (!addItems.length) {\n <div class=\"add-manager__empty\" role=\"status\">\n <mat-icon\n [praxisIcon]=\"'search_off'\"\n aria-hidden=\"true\"\n ></mat-icon>\n <span>{{\n addQuery\n ? i18nLabels.noFilterFieldsFound ||\n \"Nenhum campo encontrado.\"\n : i18nLabels.addUnavailable ||\n \"Todos os campos j\u00E1 est\u00E3o vis\u00EDveis\"\n }}</span>\n </div>\n }\n </div>\n <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ addManagerAnnouncement }}\n </div>\n @if (addManagerConflict) {\n <div\n class=\"add-manager__notice add-manager__notice--conflict\"\n role=\"alert\"\n >\n <mat-icon\n [praxisIcon]=\"'sync_problem'\"\n aria-hidden=\"true\"\n ></mat-icon>\n <span>{{ i18nLabels.fieldSelectionConflict }}</span>\n </div>\n } @else if (getRemovedActiveFieldLabels().length) {\n <div\n class=\"add-manager__notice add-manager__notice--warning\"\n role=\"status\"\n >\n <mat-icon\n [praxisIcon]=\"'warning_amber'\"\n aria-hidden=\"true\"\n ></mat-icon>\n <span\n >{{ i18nLabels.removingActiveFields }}\n {{ getRemovedActiveFieldLabels().join(\", \") }}</span\n >\n </div>\n }\n <footer class=\"add-manager__footer\">\n <button mat-button type=\"button\" (click)=\"closeAddManager()\">\n {{ i18nLabels.cancel }}\n </button>\n <button\n mat-flat-button\n color=\"primary\"\n type=\"button\"\n [disabled]=\"!isAddManagerDirty() || addManagerConflict\"\n (click)=\"applyAddManager()\"\n >\n {{ i18nLabels.manageFieldsApply || \"Aplicar\" }}\n @if (isAddManagerDirty()) {\n ({{ getAddManagerChangeCount() }})\n }\n </button>\n </footer>\n </section>\n </ng-template>\n }\n @if (showFilterSettings) {\n <button\n praxisIconButton=\"settings\"\n size=\"compact\"\n class=\"cluster-btn separator-before\"\n type=\"button\"\n (click)=\"openSettings()\"\n [matBadge]=\"schemaOutdated ? '!' : ''\"\n [matBadgeHidden]=\"!schemaOutdated\"\n matBadgeColor=\"warn\"\n matBadgeSize=\"small\"\n matBadgePosition=\"above after\"\n [matTooltip]=\"getSettingsTooltip()\"\n matTooltipPosition=\"below\"\n [attr.aria-label]=\"getSettingsAriaLabel()\"\n ></button>\n }\n @if (isFieldAuthoringEnabled() && activeEditableFieldMeta) {\n <button\n praxisIconButton=\"tune\"\n size=\"compact\"\n class=\"cluster-btn\"\n type=\"button\"\n data-testid=\"filter-field-settings-trigger\"\n [attr.aria-label]=\"activeEditableFieldLabel\"\n (click)=\"openSelectedFieldEditor()\"\n ></button>\n }\n </div>\n }\n\n @if ((showClearButton && activeFiltersCount > 0) || showSearchButton) {\n <div class=\"action-cluster action-cluster--query\">\n @if (showClearButton && activeFiltersCount > 0) {\n <button\n praxisIconButton=\"filter_alt_off\"\n size=\"compact\"\n class=\"cluster-btn\"\n type=\"button\"\n data-testid=\"filter-clear-trigger\"\n (click)=\"onClear()\"\n [attr.aria-label]=\"i18nLabels.clear\"\n [matTooltip]=\"i18nLabels.clear\"\n matTooltipPosition=\"below\"\n ></button>\n }\n @if (showSearchButton) {\n <button\n praxisIconButton=\"search\"\n size=\"compact\"\n class=\"cluster-btn\"\n type=\"submit\"\n [attr.aria-label]=\"i18nLabels.apply\"\n [matTooltip]=\"i18nLabels.apply\"\n matTooltipPosition=\"below\"\n ></button>\n }\n </div>\n }\n\n <span class=\"sr-only\" aria-live=\"polite\">{{\n advancedOpening\n ? i18nLabels.advancedOpening || \"Abrindo filtro avan\u00E7ado...\"\n : getAddAriaLabel()\n }}</span>\n </div>\n </div>\n\n <span class=\"sr-only\" aria-live=\"polite\">\n {{ activeFiltersCount ? activeFiltersCount + \" filtros ativos\" : \"\" }}\n </span>\n <button\n type=\"submit\"\n class=\"hidden-submit\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n ></button>\n</form>\n\n@if (!(compactSelectedMetas.length || compactAlwaysVisibleMetas.length)) {\n <ng-container [ngTemplateOutlet]=\"filterTagsTemplate\"></ng-container>\n}\n", styles: ["@charset \"UTF-8\";:root{--pfx-filter-h: 42px;--pfx-filter-align-offset: 2px;--pfx-gap-x: 12px;--pfx-gap-y: 8px;--pfx-always-max-desktop: 380px;--pfx-slider-span-desktop: 2;--pfx-advanced-pad-x: 24px;--pfx-field-min: 280px;--pfx-overlay-margin-y: 16px;--pfx-overlay-margin-x: 16px}:host-context(.theme-light){--pfx-surface-border: var( --praxis-theme-outline-strong, var(--md-sys-color-outline) )}:host{--border-color: var( --praxis-theme-outline, var(--md-sys-color-outline-variant) );--border-color-hover: var( --praxis-theme-outline-strong, var(--md-sys-color-outline) );--pfx-overlay-surface: var( --praxis-theme-surface-raised, var(--md-sys-color-surface-container) );--pfx-overlay-surface-elev: var( --praxis-theme-surface-overlay, var(--md-sys-color-surface-container-high) );--pfx-overlay-surface-variant: var( --praxis-theme-surface-raised, var(--md-sys-color-surface-variant) );--pfx-overlay-on-surface: var( --praxis-theme-on-surface, var(--md-sys-color-on-surface) );--pfx-overlay-on-surface-variant: var( --praxis-theme-on-surface-muted, var(--md-sys-color-on-surface-variant) );display:block;width:100%;min-width:0;flex:1 1 auto;container-name:praxis-filter;container-type:inline-size}.schema-error-banner{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:8px 10px;border-radius:10px;border:1px solid color-mix(in srgb,var(--md-sys-color-error) 50%,transparent);background:color-mix(in srgb,var(--md-sys-color-error-container) 85%,transparent);color:var(--md-sys-color-on-error-container)}.schema-error-message{min-width:0;flex:1 1 auto;font-size:.8125rem}:host ::ng-deep .schema-error-retry.mat-mdc-outlined-button{--mdc-outlined-button-outline-color: color-mix( in srgb, var(--md-sys-color-error) 55%, var(--md-sys-color-outline) )}.praxis-filter-bar{display:grid;width:100%;grid-template-columns:minmax(0,1fr) auto;column-gap:6px;row-gap:6px;align-items:center}.inline-actions .actions-anchor{width:0;height:0;overflow:hidden}.query-auxiliary{grid-column:2;grid-row:1;display:flex;align-items:center;flex-wrap:nowrap;gap:6px;justify-self:end;align-self:center;width:fit-content;max-width:100%;min-width:0}.inline-actions{flex:0 0 auto;display:flex;gap:6px;white-space:nowrap;height:var(--pfx-filter-h);align-items:center;padding:0 2px}.action-cluster{flex:0 0 auto;display:inline-flex;align-items:center;gap:2px;min-height:36px;padding:2px;border-radius:999px;border:1px solid var(--pfx-surface-border, var(--md-sys-color-outline-variant));background:var(--md-sys-color-surface-container-highest)}.action-cluster--manage{position:relative;border-color:color-mix(in srgb,var(--md-sys-color-primary) 35%,var(--md-sys-color-outline-variant));background:var(--md-sys-color-surface-container-high)}.action-cluster .cluster-btn.is-opening{pointer-events:none}.action-cluster .cluster-btn.is-disabled{color:color-mix(in srgb,var(--md-sys-color-on-surface) 38%,transparent);cursor:default;opacity:.56}.inline-actions.actions-outlined button[praxisIconButton]{border:1px solid var(--pfx-surface-border, var(--md-sys-color-outline-variant));border-radius:50%}.inline-actions.actions-outlined .action-cluster button[praxisIconButton]{border-color:transparent}.separator-before{position:relative;margin-left:10px}.separator-before:before{content:\"\";position:absolute;left:-7px;top:50%;width:1px;height:18px;transform:translateY(-50%);background:color-mix(in srgb,var(--md-sys-color-outline) 72%,transparent)}.inline-actions mat-icon{width:20px;height:20px;font-size:20px}.fields-grid{grid-column:1;grid-row:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--pfx-always-min, 220px),1fr));grid-auto-flow:row dense;gap:6px}.compact-fields{grid-column:1;grid-row:1;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:center;align-items:center;gap:6px;min-width:0;min-height:var(--pfx-filter-h)}.query-auxiliary .praxis-filter-tags{flex:0 1 auto;min-width:0;min-height:var(--pfx-filter-h);display:inline-flex;align-items:center}.query-auxiliary .praxis-filter-tags mat-chip-set{min-width:0}:host ::ng-deep .compact-fields .pfx-field-shell,:host ::ng-deep .compact-fields .pfx-field-shell-wrapper,:host ::ng-deep .compact-fields .pfx-field-shell-host{--pfx-field-shell-width: fit-content;--pfx-field-shell-field-width: auto;width:fit-content!important;max-width:100%;min-width:0;flex:0 1 auto!important}:host ::ng-deep .compact-fields>.pfx-field-shell,:host ::ng-deep .compact-fields>praxis-field-shell{flex:0 1 auto!important;width:fit-content!important;max-width:100%;min-width:0}:host ::ng-deep .compact-fields .pfx-field-shell .mat-mdc-form-field{width:auto!important;max-width:100%;margin-bottom:0}:host ::ng-deep .compact-fields .pfx-field-shell[data-control-type=inlineTime] .mat-mdc-form-field.pdx-inline-time{width:var(--pdx-inline-time-field-w, auto)!important;inline-size:var(--pdx-inline-time-field-w, auto)!important;max-width:min(var(--pdx-inline-time-max-w, 280px),100cqw - 24px)!important}:host ::ng-deep .compact-fields .pfx-field-shell[data-control-type=inlineDateRange] .mat-mdc-form-field{width:var(--pdx-inline-date-range-shell-width, auto)!important;max-width:100%!important}.praxis-filter-bar.has-compact .compact-fields{grid-column:1;grid-row:1}.praxis-filter-bar.has-compact .fields-grid{grid-column:1/-1;grid-row:2}@container praxis-filter (max-width: 900px){.praxis-filter-bar.has-compact{grid-template-columns:minmax(0,1fr);align-items:start}.praxis-filter-bar.has-compact .query-auxiliary{grid-column:1;grid-row:2;justify-self:start;justify-content:flex-start;flex-wrap:wrap;width:100%}}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=slider] mat-slider,:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=range-slider] mat-slider,:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=rangeSlider] mat-slider{width:100%;display:block}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=slider] .pdx-slider-wrapper,:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=range-slider] .pdx-slider-wrapper,:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=rangeSlider] .pdx-slider-wrapper{padding-top:2px}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=range-slider] .pdx-range-slider-container,:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=rangeSlider] .pdx-range-slider-container{padding:2px 0 0}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=range-slider] .pdx-slider-label,:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=rangeSlider] .pdx-slider-label{margin-bottom:4px;line-height:1.15}:host ::ng-deep .fields-grid .mat-mdc-text-field-wrapper.mdc-text-field--outlined{min-height:var(--pfx-filter-h);align-items:center}:host ::ng-deep .fields-grid .mat-mdc-form-field-infix{min-height:var(--pfx-filter-h)}:host ::ng-deep .fields-grid .mat-mdc-select-trigger{height:var(--pfx-filter-h);align-items:center}:host ::ng-deep .fields-grid .mat-mdc-form-field{width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineSelect]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineSelect] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineSearchableSelect]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineSearchableSelect] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineMultiSelect]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineMultiSelect] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineInput]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineInput] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlinePhone]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlinePhone] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineToggle]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineToggle] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineRange]{justify-self:start}:host ::ng-deep .compact-fields .pfx-field-shell[data-control-type=inlineRange]{max-width:min(340px,100%)}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineDate]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineDate] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineDateRange]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineDateRange] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .mat-mdc-form-field-subscript-wrapper{min-height:0;margin-top:0}:host ::ng-deep .fields-grid .mat-mdc-form-field{margin-bottom:0}.praxis-filter-bar.has-compact{--pfx-filter-tag-color: var(--md-sys-color-primary-container);--pfx-filter-tag-on-color: var(--md-sys-color-on-primary-container);--pfx-filter-tag-outline-color: var(--md-sys-color-primary);--pdx-inline-control-height: var(--pfx-filter-inline-control-height, 42px);--pdx-inline-control-height-mobile: var( --pfx-filter-inline-control-height-mobile, 40px );--pdx-inline-control-padding-x: var( --pfx-filter-inline-control-padding-x, 12px );--pdx-inline-control-padding-x-mobile: var( --pfx-filter-inline-control-padding-x-mobile, 12px );--pdx-inline-clear-size: var(--pfx-filter-inline-clear-size, 22px);--pdx-inline-chip-radius: var( --pfx-filter-inline-chip-radius, var(--md-sys-shape-corner-full, 999px) );--pdx-inline-chip-active-bg: var(--pfx-filter-tag-color);--pdx-inline-chip-active-fg: var(--pfx-filter-tag-on-color);--pdx-inline-chip-active-clear-color: var(--pfx-filter-tag-on-color);--pdx-inline-field-focus-outline: var(--pfx-filter-tag-outline-color)}.praxis-filter-bar.has-compact.tag-color-accent{--pfx-filter-tag-color: var( --md-sys-color-tertiary-container, var(--md-sys-color-secondary-container) );--pfx-filter-tag-on-color: var( --md-sys-color-on-tertiary-container, var(--md-sys-color-on-secondary-container) );--pfx-filter-tag-outline-color: var( --md-sys-color-tertiary, var(--md-sys-color-secondary) )}.praxis-filter-bar.has-compact.tag-color-warn{--pfx-filter-tag-color: var(--md-sys-color-error-container);--pfx-filter-tag-on-color: var(--md-sys-color-on-error-container);--pfx-filter-tag-outline-color: var(--md-sys-color-error)}.praxis-filter-bar.has-compact.tag-color-basic{--pfx-filter-tag-color: color-mix( in srgb, var(--md-sys-color-on-surface) 10%, transparent );--pfx-filter-tag-on-color: var(--md-sys-color-on-surface);--pfx-filter-tag-outline-color: var(--md-sys-color-outline-variant)}:host ::ng-deep .praxis-filter-bar.has-compact{--pfx-filter-inline-chip-padding-x: var(--pdx-inline-control-padding-x);--pfx-filter-inline-icon-gap: 4px}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select,.pdx-inline-date,.pdx-inline-date-range,.pdx-inline-autocomplete,.pdx-inline-currency,.pdx-inline-time) .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-inline:var(--pfx-filter-inline-chip-padding-x)!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select,.pdx-inline-date,.pdx-inline-date-range,.pdx-inline-autocomplete,.pdx-inline-currency,.pdx-inline-time) .mat-mdc-form-field-icon-prefix{align-items:center;display:inline-flex;flex:0 0 auto;margin-right:var(--pfx-filter-inline-icon-gap)!important;padding:0!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select,.pdx-inline-date,.pdx-inline-date-range,.pdx-inline-autocomplete,.pdx-inline-currency,.pdx-inline-time) .mat-mdc-form-field-icon-suffix{align-items:center;display:inline-flex;flex:0 0 auto;gap:var(--pfx-filter-inline-icon-gap)!important;margin-left:var(--pfx-filter-inline-icon-gap)!important;padding:0!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select,.pdx-inline-date,.pdx-inline-date-range,.pdx-inline-autocomplete,.pdx-inline-currency,.pdx-inline-time) .mat-mdc-form-field-icon-prefix>.mat-icon,:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select,.pdx-inline-date,.pdx-inline-date-range,.pdx-inline-autocomplete,.pdx-inline-currency,.pdx-inline-time) .mat-mdc-form-field-icon-suffix>.mat-icon{flex:0 0 16px!important;font-size:16px!important;height:16px!important;line-height:16px!important;margin:0!important;padding:0!important;width:16px!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select,.pdx-inline-date,.pdx-inline-date-range,.pdx-inline-autocomplete,.pdx-inline-currency,.pdx-inline-time) .mat-mdc-form-field-infix{padding-inline:0!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select) .pdx-chip-trigger{gap:var(--pfx-filter-inline-icon-gap)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-chip-trigger.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-currency-range-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .mat-mdc-form-field.pdx-has-value .mat-mdc-text-field-wrapper,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-select .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-chip-trigger.is-active),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-searchable-select .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-chip-trigger.is-active),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-async-select.pdx-has-selection .mat-mdc-text-field-wrapper.mdc-text-field--outlined,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-date-range.pdx-inline-date-range-has-value .mat-mdc-text-field-wrapper.mdc-text-field--outlined,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-date-range.pdx-inline-date-range-has-both .mat-mdc-text-field-wrapper.mdc-text-field--outlined,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-entity-lookup.pdx-has-selection .pdx-chip-trigger,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-multi-select.pdx-has-selection .pdx-chip-trigger,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-range-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-distance-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-score-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-relative-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-relative-period-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-rating-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-pipeline-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-sentiment-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-color-label-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-time-range-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-toggle-pill.is-active{--pdx-inline-currency-symbol-color: var(--pfx-filter-tag-on-color);background:var(--pfx-filter-tag-color)!important;border-color:transparent!important;color:var(--pfx-filter-tag-on-color)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-chip-trigger.is-active :where(.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-currency-range-chip.is-active :where(.mat-icon,.pdx-inline-currency-range-value,.pdx-inline-currency-range-text,.pdx-inline-currency-range-clear),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .mat-mdc-form-field.pdx-has-value :where(input,.mat-mdc-input-element,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,.pdx-inline-clear),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear) :where(input,.mat-mdc-input-element,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,.pdx-inline-clear,.pdx-inline-number-suffix),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled :where(.pdx-inline-select,.pdx-inline-searchable-select) .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-chip-trigger.is-active) :where(.mat-mdc-select-value,.mat-mdc-select-min-line,.mat-mdc-select-placeholder,.pdx-chip-trigger,.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-async-select.pdx-has-selection :where(.mat-mdc-select-value,.mat-mdc-select-min-line,.mat-mdc-select-placeholder,.pdx-chip-trigger,.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-date-range.pdx-inline-date-range-has-value :where(.mat-date-range-input-inner,.mat-date-range-input-separator,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,input),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-date-range.pdx-inline-date-range-has-both :where(.mat-date-range-input-inner,.mat-date-range-input-separator,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,input),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled :where(.pdx-inline-entity-lookup.pdx-has-selection,.pdx-inline-multi-select.pdx-has-selection) .pdx-chip-trigger :where(.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled :where(.pdx-inline-range-chip.is-active,.pdx-inline-distance-chip.is-active,.pdx-inline-score-chip.is-active,.pdx-inline-relative-chip.is-active,.pdx-inline-relative-period-chip.is-active,.pdx-inline-rating-chip.is-active,.pdx-inline-pipeline-chip.is-active,.pdx-inline-sentiment-chip.is-active,.pdx-inline-color-label-chip.is-active) :where(.mat-icon,button,span),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-time-range-chip.is-active :where(.pdx-inline-time-range-icon,.pdx-inline-time-range-text,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-toggle-pill.is-active :where(.pdx-inline-toggle-label,.mat-icon){color:var(--pfx-filter-tag-on-color)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-chip-trigger.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-currency-range-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .mat-mdc-form-field.pdx-has-value .mat-mdc-text-field-wrapper,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-select .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-chip-trigger.is-active),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-searchable-select .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-chip-trigger.is-active),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-async-select.pdx-has-selection .mat-mdc-text-field-wrapper.mdc-text-field--outlined,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-date-range.pdx-inline-date-range-has-value .mat-mdc-text-field-wrapper.mdc-text-field--outlined,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-date-range.pdx-inline-date-range-has-both .mat-mdc-text-field-wrapper.mdc-text-field--outlined,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-entity-lookup.pdx-has-selection .pdx-chip-trigger,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-multi-select.pdx-has-selection .pdx-chip-trigger,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-range-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-distance-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-score-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-relative-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-relative-period-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-rating-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-pipeline-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-sentiment-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-color-label-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-time-range-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-toggle-pill.is-active{--pdx-inline-currency-symbol-color: var(--pfx-filter-tag-outline-color);background:transparent!important;border-color:var(--pfx-filter-tag-outline-color)!important;box-shadow:inset 0 0 0 1px var(--pfx-filter-tag-outline-color);color:var(--pfx-filter-tag-outline-color)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-chip-trigger.is-active :where(.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-currency-range-chip.is-active :where(.mat-icon,.pdx-inline-currency-range-value,.pdx-inline-currency-range-text,.pdx-inline-currency-range-clear),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .mat-mdc-form-field.pdx-has-value :where(input,.mat-mdc-input-element,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,.pdx-inline-clear),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear) :where(input,.mat-mdc-input-element,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,.pdx-inline-clear,.pdx-inline-number-suffix),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined :where(.pdx-inline-select,.pdx-inline-searchable-select) .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-chip-trigger.is-active) :where(.mat-mdc-select-value,.mat-mdc-select-min-line,.mat-mdc-select-placeholder,.pdx-chip-trigger,.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-async-select.pdx-has-selection :where(.mat-mdc-select-value,.mat-mdc-select-min-line,.mat-mdc-select-placeholder,.pdx-chip-trigger,.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-date-range.pdx-inline-date-range-has-value :where(.mat-date-range-input-inner,.mat-date-range-input-separator,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,input),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-date-range.pdx-inline-date-range-has-both :where(.mat-date-range-input-inner,.mat-date-range-input-separator,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,input),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined :where(.pdx-inline-entity-lookup.pdx-has-selection,.pdx-inline-multi-select.pdx-has-selection) .pdx-chip-trigger :where(.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined :where(.pdx-inline-range-chip.is-active,.pdx-inline-distance-chip.is-active,.pdx-inline-score-chip.is-active,.pdx-inline-relative-chip.is-active,.pdx-inline-relative-period-chip.is-active,.pdx-inline-rating-chip.is-active,.pdx-inline-pipeline-chip.is-active,.pdx-inline-sentiment-chip.is-active,.pdx-inline-color-label-chip.is-active) :where(.mat-icon,button,span),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-time-range-chip.is-active :where(.pdx-inline-time-range-icon,.pdx-inline-time-range-text,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-toggle-pill.is-active :where(.pdx-inline-toggle-label,.mat-icon){color:var(--pfx-filter-tag-outline-color)!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-chip-trigger.is-active,.mat-mdc-form-field.pdx-has-value,.pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear),.pdx-inline-currency-range-chip.is-active,.pdx-inline-range-chip.is-active,.pdx-inline-distance-chip.is-active,.pdx-inline-score-chip.is-active,.pdx-inline-relative-chip.is-active,.pdx-inline-relative-period-chip.is-active,.pdx-inline-rating-chip.is-active,.pdx-inline-pipeline-chip.is-active,.pdx-inline-sentiment-chip.is-active,.pdx-inline-color-label-chip.is-active,.pdx-inline-time-range-chip.is-active,.pdx-inline-toggle-pill.is-active) :where(.pdx-chip-clear,.pdx-inline-clear,.pdx-inline-currency-range-clear,.pdx-inline-range-clear,.pdx-inline-distance-clear,.pdx-inline-score-clear,.pdx-inline-relative-clear,.pdx-inline-rating-clear,.pdx-inline-pipeline-clear,.pdx-inline-sentiment-clear,.pdx-inline-color-label-clear,.pdx-inline-time-range-clear,.pdx-inline-toggle-clear){background:color-mix(in srgb,currentColor 16%,transparent)!important;border-radius:50%!important;color:inherit!important;display:inline-grid!important;flex:0 0 var(--pdx-inline-clear-size, 22px)!important;height:var(--pdx-inline-clear-size, 22px)!important;min-width:var(--pdx-inline-clear-size, 22px)!important;place-items:center!important;width:var(--pdx-inline-clear-size, 22px)!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-chip-trigger.is-active,.mat-mdc-form-field.pdx-has-value,.pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear),.pdx-inline-currency-range-chip.is-active,.pdx-inline-range-chip.is-active,.pdx-inline-distance-chip.is-active,.pdx-inline-score-chip.is-active,.pdx-inline-relative-chip.is-active,.pdx-inline-relative-period-chip.is-active,.pdx-inline-rating-chip.is-active,.pdx-inline-pipeline-chip.is-active,.pdx-inline-sentiment-chip.is-active,.pdx-inline-color-label-chip.is-active,.pdx-inline-time-range-chip.is-active,.pdx-inline-toggle-pill.is-active) :where(.pdx-chip-clear,.pdx-inline-clear,.pdx-inline-currency-range-clear,.pdx-inline-range-clear,.pdx-inline-distance-clear,.pdx-inline-score-clear,.pdx-inline-relative-clear,.pdx-inline-rating-clear,.pdx-inline-pipeline-clear,.pdx-inline-sentiment-clear,.pdx-inline-color-label-clear,.pdx-inline-time-range-clear,.pdx-inline-toggle-clear):hover{background:color-mix(in srgb,currentColor 24%,transparent)!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-chip-trigger.is-active,.mat-mdc-form-field.pdx-has-value,.pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear),.pdx-inline-currency-range-chip.is-active,.pdx-inline-range-chip.is-active,.pdx-inline-distance-chip.is-active,.pdx-inline-score-chip.is-active,.pdx-inline-relative-chip.is-active,.pdx-inline-relative-period-chip.is-active,.pdx-inline-rating-chip.is-active,.pdx-inline-pipeline-chip.is-active,.pdx-inline-sentiment-chip.is-active,.pdx-inline-color-label-chip.is-active,.pdx-inline-time-range-chip.is-active,.pdx-inline-toggle-pill.is-active) :where(.pdx-chip-clear,.pdx-inline-clear,.pdx-inline-currency-range-clear,.pdx-inline-range-clear,.pdx-inline-distance-clear,.pdx-inline-score-clear,.pdx-inline-relative-clear,.pdx-inline-rating-clear,.pdx-inline-pipeline-clear,.pdx-inline-sentiment-clear,.pdx-inline-color-label-clear,.pdx-inline-time-range-clear,.pdx-inline-toggle-clear) .mat-icon{color:var(--pdx-inline-clear-icon-color, currentColor)!important}:host ::ng-deep .praxis-filter-bar.has-compact .mat-mdc-form-field.pdx-has-value .pdx-inline-clear .mat-icon{color:var(--pdx-inline-clear-icon-color, currentColor)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .mat-mdc-form-field.pdx-has-value .pdx-inline-clear .mat-icon,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .mat-mdc-form-field.pdx-has-value .pdx-inline-clear .mat-icon{color:var(--pdx-inline-clear-icon-color, currentColor)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-number .mat-mdc-text-field-wrapper:has(.pdx-inline-clear) .pdx-inline-clear .mat-icon,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-number .mat-mdc-text-field-wrapper:has(.pdx-inline-clear) .pdx-inline-clear .mat-icon{color:var(--pdx-inline-clear-icon-color, currentColor)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-toggle-pill.is-active .pdx-inline-toggle-clear .mat-icon,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-toggle-pill.is-active .pdx-inline-toggle-clear .mat-icon{color:var(--pdx-inline-clear-icon-color, currentColor)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-chip-trigger.is-active .pdx-chip-clear .mat-icon,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-chip-trigger.is-active .pdx-chip-clear .mat-icon{color:var(--pdx-inline-clear-icon-color, currentColor)!important}.praxis-filter-tags.outlined .mat-mdc-chip{background:transparent!important;--mat-chip-outline-width: 1px;--mat-chip-outline-color: var(--md-sys-color-outline-variant);box-shadow:inset 0 0 0 var(--mat-chip-outline-width) var(--mat-chip-outline-color)}.praxis-filter-tags.outlined.tag-color-primary .mat-mdc-chip{--mat-chip-outline-color: var(--md-sys-color-primary)}.praxis-filter-tags.outlined.tag-color-accent .mat-mdc-chip{--mat-chip-outline-color: var(--md-sys-color-tertiary)}.praxis-filter-tags.outlined.tag-color-warn .mat-mdc-chip{--mat-chip-outline-color: var(--md-sys-color-error)}.praxis-filter-tags.outlined mat-chip.active .mat-mdc-chip,.praxis-filter-tags.outlined .mat-mdc-chip.mat-mdc-chip-highlighted{--mat-chip-outline-width: 2px;box-shadow:inset 0 0 0 var(--mat-chip-outline-width) var(--mat-chip-outline-color)!important}.praxis-filter-tags.outlined.tag-color-basic mat-chip.active .mat-mdc-chip{--mat-chip-outline-color: var(--md-sys-color-primary)}.praxis-filter-tags .mat-mdc-standard-chip .mdc-evolution-chip__text-label{display:flex;align-items:center;justify-content:center;gap:4px;line-height:1.2;font-size:.875rem}.praxis-filter-tags .chip-leading,.praxis-filter-tags .chip-trailing{display:inline-flex;align-items:center}.praxis-filter-tags .leading-check{width:18px;height:18px;font-size:18px;line-height:1}.praxis-filter-tags .chip-label{position:relative;top:-6px}.praxis-filter-tags .mat-mdc-standard-chip{--mat-chip-container-height: 36px}.praxis-filter-advanced{display:flex;flex-direction:column;min-width:400px;max-width:90vw;min-height:260px;max-height:min(80vh,720px);margin:var(--pfx-overlay-margin-y) var(--pfx-overlay-margin-x);background-color:var(--pfx-overlay-surface)!important;background:var(--pfx-overlay-surface)!important;color:var(--pfx-overlay-on-surface);border:1px solid var(--border-color);border-radius:12px;box-shadow:var(--md-sys-elevation-level3)}.advanced-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px var(--pfx-advanced-pad-x) 10px;border-bottom:1px solid var(--border-color);background:var(--pfx-overlay-surface)}.advanced-title-block{display:flex;flex-direction:column;gap:2px}.advanced-title{font-size:1rem;font-weight:600;color:var(--pfx-overlay-on-surface)}.advanced-subtitle{font-size:.85rem;color:var(--pfx-overlay-on-surface-variant)}.advanced-close{align-self:flex-start}.praxis-filter-overlay.mobile .praxis-filter-advanced{height:100vh;max-height:100vh;margin:0;border-radius:0}:host ::ng-deep .praxis-overlay-backdrop{background:var(--md-sys-color-scrim);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}:host ::ng-deep .praxis-filter-overlay.frosted .praxis-filter-advanced{background:var(--pfx-overlay-surface-variant)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-color:var(--border-color)}:host ::ng-deep .praxis-filter-overlay.frosted .advanced-header,:host ::ng-deep .praxis-filter-overlay.frosted .advanced-actions{background:var(--pfx-overlay-surface-variant)!important}.advanced-body{padding:12px var(--pfx-advanced-pad-x) 72px;overflow:auto;flex:1 1 auto;overscroll-behavior:contain}:host ::ng-deep .praxis-filter-advanced .praxis-filter-form .filter-row{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(var(--pfx-field-min),1fr));gap:var(--pfx-gap-y) var(--pfx-gap-x)}:host ::ng-deep .praxis-filter-advanced .praxis-filter-form .filter-column{min-width:0}:host ::ng-deep .praxis-filter-advanced .praxis-filter-form .filter-column .mat-mdc-form-field{width:100%}.advanced-actions{position:sticky;bottom:0;z-index:2;display:flex;justify-content:flex-end;gap:8px;padding:var(--pfx-gap-y) var(--pfx-advanced-pad-x);background-color:var(--pfx-overlay-surface)!important;background:var(--pfx-overlay-surface)!important;border-top:1px solid var(--border-color);box-shadow:0 -1px 0 var(--md-sys-color-outline-variant)}.advanced-actions .mat-mdc-button-base{height:40px}.advanced-actions .mat-mdc-raised-button.mat-primary{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}:host ::ng-deep .praxis-filter-advanced .mat-mdc-text-field-wrapper.mdc-text-field--outlined{--mdc-outlined-text-field-outline-color: var(--border-color);--mdc-outlined-text-field-hover-outline-color: var(--border-color-hover);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-label-text-color: var( --pfx-overlay-on-surface-variant );--mdc-outlined-text-field-input-text-color: var(--pfx-overlay-on-surface);--mdc-outlined-text-field-container-color: var(--pfx-overlay-surface)}:host ::ng-deep .praxis-filter-advanced .mat-mdc-select-trigger,:host ::ng-deep .praxis-filter-advanced .mat-mdc-form-field-subscript-wrapper,:host ::ng-deep .praxis-filter-advanced .mat-mdc-form-field-infix{color:var(--pfx-overlay-on-surface)}@container praxis-filter (min-width: 600px){.fields-grid{gap:6px 8px}:host ::ng-deep .praxis-filter-advanced .praxis-filter-form .filter-row{grid-template-columns:repeat(2,minmax(0,1fr))}}@container praxis-filter (max-width: 640px){.praxis-filter-bar.has-compact{grid-template-columns:minmax(0,1fr);align-items:start}.praxis-filter-bar.has-compact .compact-fields{grid-column:1;grid-row:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(132px,100%),1fr));align-items:start;justify-items:stretch;width:100%}.praxis-filter-bar.has-compact .query-auxiliary{grid-column:1;grid-row:2;justify-self:start;width:100%;height:auto;align-self:start}.praxis-filter-bar.has-compact .query-auxiliary .praxis-filter-tags{flex:0 1 auto;min-width:0;min-height:40px}.praxis-filter-bar.has-compact .query-auxiliary .praxis-filter-tags mat-chip-set,.praxis-filter-bar.has-compact .query-auxiliary .praxis-filter-tags mat-chip{max-width:100%}.praxis-filter-bar.has-compact .query-auxiliary .praxis-filter-tags mat-chip{min-height:44px}.praxis-filter-bar.has-compact .inline-actions .action-cluster{max-width:100%;min-height:44px;padding-block:0}:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields>.pfx-field-shell,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields>praxis-field-shell,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell-wrapper,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell-host{--pfx-field-shell-width: auto;--pfx-field-shell-field-width: auto;width:100%!important;max-width:100%!important}:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .mat-mdc-form-field,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .mat-mdc-text-field-wrapper,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-chip-trigger,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-range-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-currency-range-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-distance-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-score-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-relative-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-relative-period-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-rating-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-pipeline-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-sentiment-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-color-label-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-time-range-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-toggle-pill{width:100%!important;max-width:100%!important;min-width:0!important}:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields pdx-inline-date-range{width:100%!important;max-width:100%!important;min-width:0!important}:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields pdx-inline-date-range .pdx-inline-date-range-root,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields pdx-inline-date-range .mat-mdc-form-field.pdx-inline-date-range{width:100%!important;max-width:100%!important;min-width:0!important}:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields :where(.pdx-chip-label,.pdx-chip-trigger,.pdx-inline-range-text,.pdx-inline-currency-range-text,.pdx-inline-distance-text,.pdx-inline-score-text,.pdx-inline-relative-text,.pdx-inline-relative-period-text,.pdx-inline-rating-text,.pdx-inline-pipeline-text,.pdx-inline-sentiment-text,.pdx-inline-color-label-text,.pdx-inline-time-range-text,.pdx-inline-toggle-label){min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell[data-control-type=inlineTime],:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell[data-control-type=inlineTime] .pfx-field-shell-wrapper,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell[data-control-type=inlineTime] .pfx-field-shell-host{--pfx-field-shell-width: fit-content;--pfx-field-shell-field-width: var(--pdx-inline-time-field-w, auto);justify-self:start;width:fit-content!important;max-width:100%!important}:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell[data-control-type=inlineTime] .mat-mdc-form-field.pdx-inline-time{width:var(--pdx-inline-time-field-w, auto)!important;inline-size:var(--pdx-inline-time-field-w, auto)!important;max-width:min(var(--pdx-inline-time-max-w, 280px),100cqw - 24px)!important}}@container praxis-filter (min-width: 960px){.fields-grid{gap:6px 10px}}@container praxis-filter (min-width: 1200px){.fields-grid{grid-template-columns:repeat(auto-fit,minmax(var(--pfx-always-min, 220px),var(--pfx-always-max-desktop, 380px)));justify-content:start;align-content:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=slider],:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=range-slider],:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=rangeSlider],:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=rangeslider]{grid-column:span var(--pfx-slider-span-desktop, 2)}}.inline-toggles{display:flex;align-items:center;gap:8px;margin:0 4px 0 6px}:host ::ng-deep .inline-actions .mat-mdc-slide-toggle{height:var(--pfx-filter-h);display:flex;align-items:center}:host ::ng-deep .inline-actions .mat-mdc-slide-toggle .mdc-form-field{align-items:center}::ng-deep .praxis-filter-overlay .praxis-filter-advanced .praxis-filter-form .filter-row{display:grid!important;gap:var(--pfx-gap-y, 1px) var(--pfx-gap-x, 6px)}@media(min-width:600px){::ng-deep .praxis-filter-overlay .praxis-filter-advanced .praxis-filter-form .filter-row{grid-template-columns:repeat(2,minmax(0,1fr))}}.sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}.hidden-submit{position:absolute!important;width:0!important;height:0!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;pointer-events:none!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;overflow:hidden!important}:host ::ng-deep .inline-actions [matBadge] .mat-badge-content{top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;font-size:10px;font-weight:700;line-height:16px;letter-spacing:0;text-indent:0;color:var(--md-sys-color-on-primary, #fff)}:host ::ng-deep .inline-actions [matBadge][matbadgecolor=warn] .mat-badge-content,:host ::ng-deep .inline-actions [matBadge].mat-badge-warn .mat-badge-content{color:var(--md-sys-color-on-error, #fff)}.praxis-filter-bar :where(.mat-mdc-slide-toggle .mdc-switch__icons){display:none!important}.praxis-filter-bar{--mdc-switch-unselected-icon-size: 0px;--mdc-switch-selected-icon-size: 0px;--pfx-always-min: 220px}.praxis-filter-card{display:flex;flex-direction:column;gap:6px;padding:8px 12px;border-radius:12px;border:1px solid var(--pfx-surface-border, var(--praxis-theme-outline, var(--md-sys-color-outline-variant)));background:var(--praxis-theme-surface-raised, var(--md-sys-color-surface-container));color:var(--praxis-theme-on-surface, var(--md-sys-color-on-surface))}.add-manager{--_pfx-field-manager-surface: var( --pfx-field-manager-surface, var( --praxis-theme-surface-overlay, var(--md-sys-color-surface-container-highest) ) );--_pfx-field-manager-on-surface: var( --pfx-field-manager-on-surface, var(--praxis-theme-on-surface, var(--md-sys-color-on-surface)) );--_pfx-field-manager-on-surface-muted: var( --pfx-field-manager-on-surface-muted, var(--praxis-theme-on-surface-muted, var(--md-sys-color-on-surface-variant)) );--_pfx-field-manager-outline: var( --pfx-field-manager-outline, var( --pdx-inline-field-outline, var(--praxis-theme-outline, var(--md-sys-color-outline-variant)) ) );--_pfx-field-manager-focus-outline: var( --pfx-field-manager-focus-outline, var( --pdx-inline-field-focus-outline, var(--praxis-theme-focus-outline, var(--md-sys-color-primary)) ) );--_pfx-field-manager-scrollbar-thumb: var( --pfx-field-manager-scrollbar-thumb, color-mix( in srgb, var(--_pfx-field-manager-on-surface) 42%, var(--_pfx-field-manager-surface) ) );--_pfx-field-manager-scrollbar-thumb-hover: var( --pfx-field-manager-scrollbar-thumb-hover, color-mix( in srgb, var(--_pfx-field-manager-on-surface) 64%, var(--_pfx-field-manager-surface) ) );--_pfx-field-manager-scrollbar-track: var( --pfx-field-manager-scrollbar-track, transparent );--_pfx-field-manager-scrollbar-size: var( --pfx-field-manager-scrollbar-size, 10px );display:flex;flex-direction:column;width:min(400px,100vw - 24px);max-height:min(70vh,560px);overflow:hidden;border:1px solid var(--_pfx-field-manager-outline);border-radius:var(--pfx-overlay-radius, 16px);background:var(--_pfx-field-manager-surface);color:var(--_pfx-field-manager-on-surface);box-shadow:var(--praxis-theme-elevation, var(--md-sys-elevation-level3))}.add-manager__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 16px 8px 20px}.add-manager__header h2{margin:0;font:var(--md-sys-typescale-title-medium)}.add-manager__header p{margin:4px 0 0;color:var(--_pfx-field-manager-on-surface-muted);font:var(--md-sys-typescale-body-small)}.add-manager__search{padding:8px 20px}.add-manager__bulk{padding:8px 20px;border-block:1px solid var(--_pfx-field-manager-outline)}.add-manager__list{display:flex;flex-direction:column;min-height:80px;overflow:auto;overscroll-behavior:contain;scrollbar-color:var(--_pfx-field-manager-scrollbar-thumb) var(--_pfx-field-manager-scrollbar-track);scrollbar-gutter:stable;scrollbar-width:auto;padding:4px 12px 12px}.add-manager__list::-webkit-scrollbar{width:var(--_pfx-field-manager-scrollbar-size);height:var(--_pfx-field-manager-scrollbar-size)}.add-manager__list::-webkit-scrollbar-track{background:var(--_pfx-field-manager-scrollbar-track)}.add-manager__list::-webkit-scrollbar-thumb{min-height:32px;border:2px solid transparent;border-radius:999px;background:var(--_pfx-field-manager-scrollbar-thumb);background-clip:padding-box}.add-manager__list::-webkit-scrollbar-thumb:hover{background:var(--_pfx-field-manager-scrollbar-thumb-hover);background-clip:padding-box}.add-manager__section+.add-manager__section{margin-top:8px;padding-top:8px;border-top:1px solid var(--_pfx-field-manager-outline)}.add-manager__section-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;padding:8px 8px 4px;color:var(--_pfx-field-manager-on-surface-muted);font:var(--md-sys-typescale-label-medium)}.add-manager__section-title span{color:var(--_pfx-field-manager-on-surface-muted);font:var(--md-sys-typescale-label-small);white-space:nowrap}.add-manager__item{display:flex;align-items:center;min-height:48px;padding-inline:8px;border-radius:var(--pfx-control-radius, 8px)}::ng-deep .add-manager__item .mdc-form-field{align-items:center}::ng-deep .add-manager__item .mdc-label{display:inline-flex;align-items:center;min-height:20px}.add-manager__item:hover{background:color-mix(in srgb,var(--_pfx-field-manager-on-surface) 6%,var(--_pfx-field-manager-surface))}.add-manager__item-info{width:16px;height:16px;margin-left:4px;vertical-align:text-bottom;color:var(--_pfx-field-manager-on-surface-muted);font-size:16px}.add-manager__item-pending{display:inline-flex;align-items:center;margin-left:8px;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--_pfx-field-manager-focus-outline) 14%,transparent);color:var(--_pfx-field-manager-on-surface-muted);font:var(--md-sys-typescale-label-small);white-space:nowrap}.add-manager__item--pending{background:color-mix(in srgb,var(--_pfx-field-manager-focus-outline) 8%,var(--_pfx-field-manager-surface))}.add-manager__section--selected .add-manager__item{box-shadow:inset 2px 0 color-mix(in srgb,var(--_pfx-field-manager-focus-outline) 56%,transparent)}.add-manager__item--added{animation:add-manager-item-added var(--md-sys-motion-duration-short4, .2s) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(.05, .7, .1, 1)) both}.add-manager__item--removed{animation:add-manager-item-removed var(--md-sys-motion-duration-short4, .2s) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(.05, .7, .1, 1)) both}@keyframes add-manager-item-added{0%{opacity:.72;background:color-mix(in srgb,var(--_pfx-field-manager-focus-outline) 24%,var(--_pfx-field-manager-surface))}to{opacity:1;background:color-mix(in srgb,var(--_pfx-field-manager-focus-outline) 8%,var(--_pfx-field-manager-surface))}}@keyframes add-manager-item-removed{0%{opacity:.72;background:color-mix(in srgb,var(--md-sys-color-surface-container-high) 72%,transparent)}to{opacity:1;background:color-mix(in srgb,var(--_pfx-field-manager-focus-outline) 8%,var(--_pfx-field-manager-surface))}}@media(prefers-reduced-motion:reduce){.add-manager__item--added,.add-manager__item--removed{animation:none}}.add-manager__empty{display:flex;align-items:center;justify-content:center;gap:8px;min-height:96px;padding:16px;color:var(--_pfx-field-manager-on-surface-muted);text-align:center}.add-manager__footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--_pfx-field-manager-outline);background:var(--_pfx-field-manager-surface)}.add-manager__notice{display:flex;align-items:flex-start;gap:8px;padding:10px 16px;font:var(--md-sys-typescale-body-small)}.add-manager__notice mat-icon{flex:0 0 auto}.add-manager__notice--warning{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.add-manager__notice--conflict{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}@media(max-width:600px){.add-manager{width:calc(100vw - 16px);max-height:min(78dvh,640px);border-radius:var(--pfx-overlay-radius, 16px)}.add-manager__header,.add-manager__search{padding-inline:16px}}.inline-actions .add-trigger{display:inline-flex;align-items:center;gap:6px;height:32px;width:100%;max-width:100%;min-width:0;padding:0 10px;border-radius:0;border:0;background:transparent;overflow:visible}.inline-actions .add-trigger--icon{justify-content:center;width:32px;min-width:32px;padding:0}:host ::ng-deep .inline-actions .add-trigger mat-icon{width:18px;height:18px;font-size:18px;flex:0 0 auto}.inline-actions .add-trigger-label{display:inline-block;flex:1 1 auto;min-width:0;max-width:100%;text-align:left;direction:ltr;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem;line-height:1}:host ::ng-deep .action-cluster--manage .mat-mdc-select{flex:0 0 auto;width:180px;min-width:0;max-width:180px}:host ::ng-deep .action-cluster--manage .cluster-select--hidden.mat-mdc-select{position:absolute;width:1px;min-width:1px;max-width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}:host ::ng-deep .action-cluster--manage .mat-mdc-select-trigger{min-height:32px;padding:0}:host ::ng-deep .action-cluster--manage .mat-mdc-select-value,:host ::ng-deep .action-cluster--manage .mat-mdc-select-value-text,:host ::ng-deep .action-cluster--manage .mat-mdc-select-min-line{width:auto;min-width:0;max-width:100%;display:inline-flex;align-items:center;justify-content:flex-start;overflow:visible}.praxis-filter-card .summary-header{display:flex;align-items:center;gap:10px}.praxis-filter-card .summary-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}.praxis-filter-card .summary-title{font-weight:600}.praxis-filter-card .summary-subtitle{opacity:.8;font-size:.875rem}.praxis-filter-card .summary-badges{display:flex;flex-wrap:wrap;gap:6px}.praxis-filter-card .summary-badges span{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;background:var(--md-sys-color-primary-container);border:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-primary-container);font-size:12px}.praxis-filter-card .card-actions{display:flex;gap:8px}:host ::ng-deep .inline-actions .mat-mdc-select-arrow-wrapper{display:none}.inline-actions .add-filter-btn{height:36px;border-radius:18px;padding:0 16px 0 12px}.inline-actions .add-filter-btn mat-icon{margin-right:8px;margin-left:-4px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i15.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i15.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i15$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i14$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: DynamicFieldLoaderDirective, selector: "[dynamicFieldLoader]", inputs: ["fields", "formGroup", "enableExternalControlBinding", "itemTemplate", "debugTrace", "debugTraceLabel", "readonlyMode", "disabledMode", "presentationMode", "visible", "canvasMode"], outputs: ["componentsCreated", "fieldCreated", "fieldDestroyed", "renderError", "canvasMouseEnter", "canvasMouseLeave", "canvasClick", "canvasFocus"] }, { kind: "component", type: PdxCollectionSearchComponent, selector: "pdx-collection-search", inputs: ["value", "placeholder", "ariaLabel", "clearAriaLabel", "disabled", "density", "icon", "clearIcon"], outputs: ["valueChange", "cleared"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i12.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i12.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i18.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
40441
41051
  }
40442
41052
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisFilter, decorators: [{
40443
41053
  type: Component,
@@ -40459,12 +41069,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
40459
41069
  OverlayModule,
40460
41070
  MatDialogModule,
40461
41071
  A11yModule,
40462
- MatCheckboxModule
41072
+ MatCheckboxModule,
41073
+ NgTemplateOutlet,
40463
41074
  ], host: {
40464
41075
  '[style.--pfx-always-min]': 'alwaysMinWidth + "px"',
40465
41076
  '[style.--pfx-always-cols-md]': 'alwaysColsMd',
40466
41077
  '[style.--pfx-always-cols-lg]': 'alwaysColsLg',
40467
- }, template: "@if (saving) {\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n}\n@if (schemaError) {\n <div class=\"schema-error-banner\" role=\"alert\" aria-live=\"polite\">\n <mat-icon [praxisIcon]=\"'error_outline'\" aria-hidden=\"true\"></mat-icon>\n <span class=\"schema-error-message\">{{ i18nLabels.errorLoadingFilters || 'Erro ao carregar filtros.' }}</span>\n <button\n mat-stroked-button\n class=\"schema-error-retry\"\n type=\"button\"\n (click)=\"retrySchemaLoad()\"\n [attr.aria-label]=\"i18nLabels.retry || 'Tentar novamente'\"\n >\n {{ i18nLabels.retry || 'Tentar novamente' }}\n </button>\n </div>\n}\n\n<form class=\"praxis-filter-bar\" [class.is-open]=\"advancedOpen\"\n [class.has-compact]=\"compactSelectedMetas.length || compactAlwaysVisibleMetas.length\"\n [class.tag-variant-filled]=\"tagVariant === 'filled'\"\n [class.tag-variant-outlined]=\"tagVariant === 'outlined'\"\n [class.tag-color-basic]=\"tagColor === 'basic'\"\n [class.tag-color-primary]=\"tagColor === 'primary'\"\n [class.tag-color-accent]=\"tagColor === 'accent'\"\n [class.tag-color-warn]=\"tagColor === 'warn'\"\n (click)=\"onFieldInteraction($event)\"\n (focusin)=\"onFieldInteraction($event)\"\n (change)=\"$event.stopPropagation()\"\n (submit)=\"onSubmit(); $event.preventDefault(); $event.stopPropagation()\">\n <div class=\"inline-actions\" [class.actions-outlined]=\"actionsVariant==='outlined'\">\n <div class=\"actions-anchor\" #anchorRef=\"cdkOverlayOrigin\" cdkOverlayOrigin></div>\n @if (toggleMetas.length) {\n <div class=\"inline-toggles\">\n <ng-container dynamicFieldLoader [fields]=\"toggleMetas\" [formGroup]=\"alwaysForm\"\n (componentsCreated)=\"onToggleComponents($event)\"></ng-container>\n </div>\n }\n\n @if (showAdvancedButton || showAddButton || showFilterSettings || isFieldAuthoringEnabled()) {\n <div class=\"action-cluster action-cluster--manage\">\n @if (showAdvancedButton) {\n <button #advancedButton praxisIconButton=\"filter_list\" size=\"dense\" class=\"cluster-btn\"\n [busy]=\"advancedOpening\"\n [class.is-opening]=\"advancedOpening\" [class.is-disabled]=\"!hasAdvancedFields()\"\n type=\"button\"\n [matBadge]=\"activeFiltersCount\" [matBadgeHidden]=\"!activeFiltersCount || !hasAdvancedFields()\" matBadgeSize=\"small\"\n matBadgeColor=\"primary\" [matBadgeOverlap]=\"false\" (click)=\"toggleAdvanced()\"\n [attr.aria-label]=\"getAdvancedAriaLabel()\" [attr.aria-expanded]=\"advancedOpen\"\n [attr.aria-disabled]=\"!hasAdvancedFields()\"\n [attr.aria-busy]=\"advancedOpening ? 'true' : null\"\n [matTooltip]=\"getAdvancedTooltip()\"\n matTooltipPosition=\"below\"\n [attr.aria-controls]=\"advancedPanelId\"></button>\n }\n @if (showAddButton) {\n <button #addManagerOrigin=\"cdkOverlayOrigin\" cdkOverlayOrigin praxisIconButton=\"add\" size=\"dense\" class=\"cluster-btn\"\n type=\"button\" [attr.aria-label]=\"getAddAriaLabel()\" [matTooltip]=\"getAddTooltip()\"\n matTooltipPosition=\"below\" [class.is-disabled]=\"!hasAddableFields()\"\n [attr.aria-disabled]=\"!hasAddableFields()\" [attr.aria-expanded]=\"addManagerOpen\"\n aria-haspopup=\"dialog\" [attr.aria-controls]=\"addManagerOpen ? addManagerTitleId : null\"\n (click)=\"toggleAddManager()\"></button>\n <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"addManagerOrigin\"\n [cdkConnectedOverlayOpen]=\"addManagerOpen\" [cdkConnectedOverlayPositions]=\"addOverlayPositions\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayHasBackdrop]=\"true\" cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"closeAddManager()\" (detach)=\"closeAddManager()\"\n (overlayKeydown)=\"$event.key === 'Escape' && closeAddManager()\">\n <section class=\"add-manager\" role=\"dialog\" [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"addManagerTitleId\" [attr.aria-describedby]=\"addManagerDescriptionId\"\n cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n <header class=\"add-manager__header\">\n <div>\n <h2 [id]=\"addManagerTitleId\">{{ i18nLabels.manageFieldsTitle || 'Gerenciar campos de filtro' }}</h2>\n <p [id]=\"addManagerDescriptionId\">{{ i18nLabels.manageFieldsDescription || 'Escolha os campos exibidos na barra de filtros.' }}</p>\n </div>\n <button praxisIconButton=\"close\" size=\"compact\" type=\"button\" (click)=\"closeAddManager()\"\n [attr.aria-label]=\"i18nLabels.close || 'Fechar'\"></button>\n </header>\n <div class=\"add-manager__search\">\n <pdx-collection-search\n [value]=\"addQuery\"\n [placeholder]=\"i18nLabels.filtersSearch || i18nLabels.searchPlaceholder\"\n [ariaLabel]=\"i18nLabels.filtersSearch || i18nLabels.searchPlaceholder\"\n [clearAriaLabel]=\"i18nLabels.clearSearch || 'Limpar busca'\"\n (valueChange)=\"onAddQuery($event)\"\n />\n </div>\n <div class=\"add-manager__bulk\">\n <mat-checkbox [checked]=\"isAllSelected()\" [indeterminate]=\"isSomeSelected() && !isAllSelected()\"\n [disabled]=\"!addItems.length || addManagerConflict\"\n (change)=\"toggleSelectAll()\">\n {{ i18nLabels.selectAllResults || i18nLabels.selectAll || 'Selecionar todos os resultados' }}\n </mat-checkbox>\n </div>\n <div class=\"add-manager__list\" role=\"group\" [attr.aria-label]=\"i18nLabels.manageFieldsTitle || 'Gerenciar campos de filtro'\">\n @if (getAddManagerSelectedItems().length) {\n <section class=\"add-manager__section add-manager__section--selected\"\n [attr.aria-label]=\"i18nLabels.selectedFieldsSectionTitle || 'Campos exibidos'\">\n <h3 class=\"add-manager__section-title\">\n {{ i18nLabels.selectedFieldsSectionTitle || 'Campos exibidos' }}\n <span>{{ getAddManagerSelectedFieldsSummary() }}</span>\n </h3>\n @for (it of getAddManagerSelectedItems(); track trackById($index, it)) {\n <mat-checkbox class=\"add-manager__item\" [attr.data-field-id]=\"it.id\"\n [checked]=\"isAddManagerFieldSelected(it.id)\"\n [matTooltip]=\"it.description || ''\" [matTooltipDisabled]=\"!it.description\"\n matTooltipPosition=\"above\" [attr.aria-description]=\"getAddManagerFieldAriaDescription(it)\"\n [class.add-manager__item--added]=\"isAddManagerItemInMotion(it.id, 'added')\"\n [class.add-manager__item--removed]=\"isAddManagerItemInMotion(it.id, 'removed')\"\n [class.add-manager__item--pending]=\"isAddManagerFieldPendingRemoval(it.id)\"\n [disabled]=\"addManagerConflict\"\n (change)=\"toggleManagedField(it.id, $event.checked)\">\n {{ it.label }}\n @if (it.description) {\n <mat-icon class=\"add-manager__item-info\" [praxisIcon]=\"'info_outline'\" aria-hidden=\"true\"></mat-icon>\n }\n @if (getAddManagerFieldPendingLabel(it.id); as pendingLabel) {\n <span class=\"add-manager__item-pending\">{{ pendingLabel }}</span>\n }\n </mat-checkbox>\n }\n </section>\n }\n @if (getAddManagerAvailableItems().length) {\n <section class=\"add-manager__section\"\n [attr.aria-label]=\"i18nLabels.availableFieldsSectionTitle || 'Campos dispon\u00EDveis'\">\n <h3 class=\"add-manager__section-title\">\n {{ i18nLabels.availableFieldsSectionTitle || 'Campos dispon\u00EDveis' }}\n </h3>\n @for (it of getAddManagerAvailableItems(); track trackById($index, it)) {\n <mat-checkbox class=\"add-manager__item\" [attr.data-field-id]=\"it.id\"\n [checked]=\"isAddManagerFieldSelected(it.id)\"\n [matTooltip]=\"it.description || ''\" [matTooltipDisabled]=\"!it.description\"\n matTooltipPosition=\"above\" [attr.aria-description]=\"getAddManagerFieldAriaDescription(it)\"\n [class.add-manager__item--added]=\"isAddManagerItemInMotion(it.id, 'added')\"\n [class.add-manager__item--removed]=\"isAddManagerItemInMotion(it.id, 'removed')\"\n [class.add-manager__item--pending]=\"isAddManagerFieldPendingAddition(it.id)\"\n [disabled]=\"addManagerConflict\"\n (change)=\"toggleManagedField(it.id, $event.checked)\">\n {{ it.label }}\n @if (it.description) {\n <mat-icon class=\"add-manager__item-info\" [praxisIcon]=\"'info_outline'\" aria-hidden=\"true\"></mat-icon>\n }\n @if (getAddManagerFieldPendingLabel(it.id); as pendingLabel) {\n <span class=\"add-manager__item-pending\">{{ pendingLabel }}</span>\n }\n </mat-checkbox>\n }\n </section>\n }\n @if (!addItems.length) {\n <div class=\"add-manager__empty\" role=\"status\">\n <mat-icon [praxisIcon]=\"'search_off'\" aria-hidden=\"true\"></mat-icon>\n <span>{{ addQuery ? (i18nLabels.noFilterFieldsFound || 'Nenhum campo encontrado.') : (i18nLabels.addUnavailable || 'Todos os campos j\u00E1 est\u00E3o vis\u00EDveis') }}</span>\n </div>\n }\n </div>\n <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ addManagerAnnouncement }}</div>\n @if (addManagerConflict) {\n <div class=\"add-manager__notice add-manager__notice--conflict\" role=\"alert\">\n <mat-icon [praxisIcon]=\"'sync_problem'\" aria-hidden=\"true\"></mat-icon>\n <span>{{ i18nLabels.fieldSelectionConflict }}</span>\n </div>\n } @else if (getRemovedActiveFieldLabels().length) {\n <div class=\"add-manager__notice add-manager__notice--warning\" role=\"status\">\n <mat-icon [praxisIcon]=\"'warning_amber'\" aria-hidden=\"true\"></mat-icon>\n <span>{{ i18nLabels.removingActiveFields }} {{ getRemovedActiveFieldLabels().join(', ') }}</span>\n </div>\n }\n <footer class=\"add-manager__footer\">\n <button mat-button type=\"button\" (click)=\"closeAddManager()\">{{ i18nLabels.cancel }}</button>\n <button mat-flat-button color=\"primary\" type=\"button\"\n [disabled]=\"!isAddManagerDirty() || addManagerConflict\"\n (click)=\"applyAddManager()\">\n {{ i18nLabels.manageFieldsApply || 'Aplicar' }}\n @if (isAddManagerDirty()) { ({{ getAddManagerChangeCount() }}) }\n </button>\n </footer>\n </section>\n </ng-template>\n }\n @if (showFilterSettings) {\n <button praxisIconButton=\"settings\" size=\"dense\" class=\"cluster-btn separator-before\"\n type=\"button\" (click)=\"openSettings()\" [matBadge]=\"schemaOutdated ? '!' : ''\"\n [matBadgeHidden]=\"!schemaOutdated\" matBadgeColor=\"warn\" matBadgeSize=\"small\" matBadgePosition=\"above after\"\n [matTooltip]=\"getSettingsTooltip()\"\n matTooltipPosition=\"below\" [attr.aria-label]=\"getSettingsAriaLabel()\"></button>\n }\n @if (isFieldAuthoringEnabled() && activeEditableFieldMeta) {\n <button\n praxisIconButton=\"tune\"\n size=\"dense\"\n class=\"cluster-btn\"\n type=\"button\"\n data-testid=\"filter-field-settings-trigger\"\n [attr.aria-label]=\"activeEditableFieldLabel\"\n (click)=\"openSelectedFieldEditor()\"\n ></button>\n }\n </div>\n }\n\n @if ((showClearButton && activeFiltersCount > 0) || showSearchButton) {\n <div class=\"action-cluster action-cluster--query\">\n @if (showClearButton && activeFiltersCount > 0) {\n <button\n praxisIconButton=\"filter_alt_off\"\n size=\"dense\"\n class=\"cluster-btn\"\n type=\"button\"\n data-testid=\"filter-clear-trigger\"\n (click)=\"onClear()\"\n [attr.aria-label]=\"i18nLabels.clear\"\n [matTooltip]=\"i18nLabels.clear\"\n matTooltipPosition=\"below\"\n ></button>\n }\n @if (showSearchButton) {\n <button\n praxisIconButton=\"search\"\n size=\"dense\"\n class=\"cluster-btn\"\n type=\"submit\"\n [attr.aria-label]=\"i18nLabels.apply\"\n [matTooltip]=\"i18nLabels.apply\"\n matTooltipPosition=\"below\"\n ></button>\n }\n </div>\n }\n\n <span class=\"sr-only\" aria-live=\"polite\">{{ advancedOpening ? (i18nLabels.advancedOpening || 'Abrindo filtro avan\u00E7ado...') : getAddAriaLabel() }}</span>\n</div>\n\n@if (compactSelectedMetas.length || compactAlwaysVisibleMetas.length) {\n <div class=\"compact-fields\">\n @if (compactSelectedMetas.length) {\n <ng-container dynamicFieldLoader [fields]=\"compactSelectedMetas\"\n [formGroup]=\"alwaysForm\" (componentsCreated)=\"onSelectedComponents($event)\"></ng-container>\n }\n @if (compactAlwaysVisibleMetas.length) {\n <ng-container dynamicFieldLoader [fields]=\"compactAlwaysVisibleMetas\"\n [formGroup]=\"alwaysForm\" (componentsCreated)=\"onAlwaysComponents($event)\"></ng-container>\n }\n </div>\n}\n\n@if (gridSelectedMetas.length || gridAlwaysVisibleMetas.length) {\n <div class=\"fields-grid\">\n @if (gridSelectedMetas.length) {\n <ng-container dynamicFieldLoader [fields]=\"gridSelectedMetas\" [formGroup]=\"alwaysForm\"\n (componentsCreated)=\"onSelectedComponents($event)\"></ng-container>\n }\n @if (gridAlwaysVisibleMetas.length) {\n <ng-container dynamicFieldLoader [fields]=\"gridAlwaysVisibleMetas\"\n [formGroup]=\"alwaysForm\" (componentsCreated)=\"onAlwaysComponents($event)\"></ng-container>\n }\n </div>\n}\n\n<span class=\"sr-only\" aria-live=\"polite\">\n {{ activeFiltersCount ? (activeFiltersCount + ' filtros ativos') : '' }}\n</span>\n<button type=\"submit\" class=\"hidden-submit\" aria-hidden=\"true\" tabindex=\"-1\"></button>\n</form>\n\n@if (displayedTags.length) {\n <div\n class=\"praxis-filter-tags\"\n [class.outlined]=\"tagVariant==='outlined'\"\n [class.tag-color-basic]=\"tagColor === 'basic'\"\n [class.tag-color-primary]=\"tagColor === 'primary'\"\n [class.tag-color-accent]=\"tagColor === 'accent'\"\n [class.tag-color-warn]=\"tagColor === 'warn'\"\n >\n <mat-chip-set [attr.aria-label]=\"i18nLabels.shortcutsLabel || 'Atalhos'\">\n @for (tag of displayedTags; track trackById($index, tag)) {\n <mat-chip [class.active]=\"isActiveTag(tag)\"\n [color]=\"tagVariant === 'outlined' || tagColor === 'basic' ? null : tagColor\"\n [highlighted]=\"tagVariant === 'filled' && tagColor !== 'basic'\" (click)=\"applyTag(tag)\"\n (keydown.enter)=\"applyTag(tag)\" (keydown.space)=\"applyTag(tag)\" tabindex=\"0\" role=\"button\"\n [attr.aria-pressed]=\"isActiveTag(tag)\">\n @if (editingTagId !== tag.id) {\n @if (isActiveTag(tag)) {\n <span class=\"chip-leading\">\n <mat-icon class=\"leading-check\">check</mat-icon>\n </span>\n }\n <span class=\"chip-label\">{{ tag.label }}</span>\n @if (isUserTag(tag)) {\n <span class=\"chip-trailing\">\n <button praxisIconButton=\"more_vert\" size=\"dense\"\n [matMenuTriggerFor]=\"tagMenu\" (click)=\"$event.stopPropagation()\" [attr.aria-label]=\"getTagActionsAriaLabel(tag)\"></button>\n <mat-menu #tagMenu=\"matMenu\" xPosition=\"before\">\n <button mat-menu-item (click)=\"startEditTag(tag, $event)\">\n <mat-icon>edit</mat-icon>\n <span>{{ i18nLabels.renameShortcut }}</span>\n </button>\n <button mat-menu-item (click)=\"deleteTag(tag)\">\n <mat-icon>delete</mat-icon>\n <span>{{ i18nLabels.removeShortcut }}</span>\n </button>\n </mat-menu>\n </span>\n } @else {\n <span class=\"chip-readonly\" [matTooltip]=\"i18nLabels.readonlyShortcut\">\n <mat-icon>lock</mat-icon>\n </span>\n }\n } @else {\n <input matInput class=\"chip-editor\" [formControl]=\"editingTagLabel\" autofocus\n [matTooltip]=\"'Enter para salvar, Esc para cancelar'\" matTooltipPosition=\"below\"\n (keydown.enter)=\"commitEditTag(tag, $event)\" (keydown.escape)=\"cancelEditTag($event)\"\n (blur)=\"commitEditTag(tag, $event)\" (click)=\"$event.stopPropagation()\" />\n }\n </mat-chip>\n }\n </mat-chip-set>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:root{--pfx-filter-h: 42px;--pfx-filter-align-offset: 2px;--pfx-gap-x: 12px;--pfx-gap-y: 8px;--pfx-always-max-desktop: 380px;--pfx-slider-span-desktop: 2;--pfx-advanced-pad-x: 24px;--pfx-field-min: 280px;--pfx-overlay-margin-y: 16px;--pfx-overlay-margin-x: 16px}:host-context(.theme-light){--pfx-surface-border: var(--praxis-theme-outline-strong, var(--md-sys-color-outline))}:host{--border-color: var(--praxis-theme-outline, var(--md-sys-color-outline-variant));--border-color-hover: var(--praxis-theme-outline-strong, var(--md-sys-color-outline));--pfx-overlay-surface: var(--praxis-theme-surface-raised, var(--md-sys-color-surface-container));--pfx-overlay-surface-elev: var(--praxis-theme-surface-overlay, var(--md-sys-color-surface-container-high));--pfx-overlay-surface-variant: var(--praxis-theme-surface-raised, var(--md-sys-color-surface-variant));--pfx-overlay-on-surface: var(--praxis-theme-on-surface, var(--md-sys-color-on-surface));--pfx-overlay-on-surface-variant: var(--praxis-theme-on-surface-muted, var(--md-sys-color-on-surface-variant));display:block;width:100%;min-width:0;flex:1 1 auto;container-name:praxis-filter;container-type:inline-size}.schema-error-banner{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:8px 10px;border-radius:10px;border:1px solid color-mix(in srgb,var(--md-sys-color-error) 50%,transparent);background:color-mix(in srgb,var(--md-sys-color-error-container) 85%,transparent);color:var(--md-sys-color-on-error-container)}.schema-error-message{min-width:0;flex:1 1 auto;font-size:.8125rem}:host ::ng-deep .schema-error-retry.mat-mdc-outlined-button{--mdc-outlined-button-outline-color: color-mix( in srgb, var(--md-sys-color-error) 55%, var(--md-sys-color-outline) )}.praxis-filter-bar{display:grid;width:100%;grid-template-columns:minmax(0,1fr) auto;column-gap:6px;row-gap:6px;align-items:center}.inline-actions .actions-anchor{width:0;height:0;overflow:hidden}.inline-actions{grid-column:2;grid-row:1;flex:0 0 auto;display:flex;gap:6px;justify-self:end;align-self:center;width:fit-content;white-space:nowrap;height:var(--pfx-filter-h);align-items:center;padding:0 2px}.action-cluster{flex:0 0 auto;display:inline-flex;align-items:center;gap:2px;min-height:36px;padding:2px;border-radius:999px;border:1px solid var(--pfx-surface-border, var(--md-sys-color-outline-variant));background:var(--md-sys-color-surface-container-highest)}.action-cluster--manage{position:relative;border-color:color-mix(in srgb,var(--md-sys-color-primary) 35%,var(--md-sys-color-outline-variant));background:var(--md-sys-color-surface-container-high)}.action-cluster .cluster-btn.is-opening{pointer-events:none}.action-cluster .cluster-btn.is-disabled{color:color-mix(in srgb,var(--md-sys-color-on-surface) 38%,transparent);cursor:default;opacity:.56}.inline-actions.actions-outlined button[praxisIconButton]{border:1px solid var(--pfx-surface-border, var(--md-sys-color-outline-variant));border-radius:50%}.inline-actions.actions-outlined .action-cluster button[praxisIconButton]{border-color:transparent}.separator-before{position:relative;margin-left:10px}.separator-before:before{content:\"\";position:absolute;left:-7px;top:50%;width:1px;height:18px;transform:translateY(-50%);background:color-mix(in srgb,var(--md-sys-color-outline) 72%,transparent)}.inline-actions mat-icon{width:20px;height:20px;font-size:20px}.fields-grid{grid-column:1;grid-row:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--pfx-always-min, 220px),1fr));grid-auto-flow:row dense;gap:6px}.compact-fields{grid-column:1;grid-row:1;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:center;align-items:center;gap:6px;min-width:0;min-height:var(--pfx-filter-h)}:host ::ng-deep .compact-fields .pfx-field-shell,:host ::ng-deep .compact-fields .pfx-field-shell-wrapper,:host ::ng-deep .compact-fields .pfx-field-shell-host{--pfx-field-shell-width: fit-content;--pfx-field-shell-field-width: auto;width:fit-content!important;max-width:100%;min-width:0;flex:0 1 auto!important}:host ::ng-deep .compact-fields>.pfx-field-shell,:host ::ng-deep .compact-fields>praxis-field-shell{flex:0 1 auto!important;width:fit-content!important;max-width:100%;min-width:0}:host ::ng-deep .compact-fields .pfx-field-shell .mat-mdc-form-field{width:auto!important;max-width:100%;margin-bottom:0}:host ::ng-deep .compact-fields .pfx-field-shell[data-control-type=inlineTime] .mat-mdc-form-field.pdx-inline-time{width:var(--pdx-inline-time-field-w, auto)!important;inline-size:var(--pdx-inline-time-field-w, auto)!important;max-width:min(var(--pdx-inline-time-max-w, 280px),100cqw - 24px)!important}:host ::ng-deep .compact-fields .pfx-field-shell[data-control-type=inlineDateRange] .mat-mdc-form-field{width:var(--pdx-inline-date-range-shell-width, auto)!important;max-width:100%!important}.praxis-filter-bar.has-compact .compact-fields{grid-column:1;grid-row:1}.praxis-filter-bar.has-compact .fields-grid{grid-column:1/-1;grid-row:2}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=slider] mat-slider,:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=range-slider] mat-slider,:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=rangeSlider] mat-slider{width:100%;display:block}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=slider] .pdx-slider-wrapper,:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=range-slider] .pdx-slider-wrapper,:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=rangeSlider] .pdx-slider-wrapper{padding-top:2px}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=range-slider] .pdx-range-slider-container,:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=rangeSlider] .pdx-range-slider-container{padding:2px 0 0}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=range-slider] .pdx-slider-label,:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=rangeSlider] .pdx-slider-label{margin-bottom:4px;line-height:1.15}:host ::ng-deep .fields-grid .mat-mdc-text-field-wrapper.mdc-text-field--outlined{min-height:var(--pfx-filter-h);align-items:center}:host ::ng-deep .fields-grid .mat-mdc-form-field-infix{min-height:var(--pfx-filter-h)}:host ::ng-deep .fields-grid .mat-mdc-select-trigger{height:var(--pfx-filter-h);align-items:center}:host ::ng-deep .fields-grid .mat-mdc-form-field{width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineSelect]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineSelect] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineSearchableSelect]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineSearchableSelect] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineMultiSelect]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineMultiSelect] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineInput]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineInput] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlinePhone]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlinePhone] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineToggle]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineToggle] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineRange]{justify-self:start}:host ::ng-deep .compact-fields .pfx-field-shell[data-control-type=inlineRange]{max-width:min(340px,100%)}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineDate]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineDate] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineDateRange]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineDateRange] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .mat-mdc-form-field-subscript-wrapper{min-height:0;margin-top:0}:host ::ng-deep .fields-grid .mat-mdc-form-field{margin-bottom:0}.praxis-filter-bar.has-compact{--pfx-filter-tag-color: var(--md-sys-color-primary-container);--pfx-filter-tag-on-color: var(--md-sys-color-on-primary-container);--pfx-filter-tag-outline-color: var(--md-sys-color-primary);--pdx-inline-control-height: var(--pfx-filter-inline-control-height, 42px);--pdx-inline-control-height-mobile: var(--pfx-filter-inline-control-height-mobile, 40px);--pdx-inline-control-padding-x: var(--pfx-filter-inline-control-padding-x, 12px);--pdx-inline-control-padding-x-mobile: var(--pfx-filter-inline-control-padding-x-mobile, 12px);--pdx-inline-clear-size: var(--pfx-filter-inline-clear-size, 22px);--pdx-inline-chip-radius: var(--pfx-filter-inline-chip-radius, var(--md-sys-shape-corner-full, 999px));--pdx-inline-chip-active-bg: var(--pfx-filter-tag-color);--pdx-inline-chip-active-fg: var(--pfx-filter-tag-on-color);--pdx-inline-chip-active-clear-color: var(--pfx-filter-tag-on-color);--pdx-inline-field-focus-outline: var(--pfx-filter-tag-outline-color)}.praxis-filter-bar.has-compact.tag-color-accent{--pfx-filter-tag-color: var(--md-sys-color-tertiary-container, var(--md-sys-color-secondary-container));--pfx-filter-tag-on-color: var(--md-sys-color-on-tertiary-container, var(--md-sys-color-on-secondary-container));--pfx-filter-tag-outline-color: var(--md-sys-color-tertiary, var(--md-sys-color-secondary))}.praxis-filter-bar.has-compact.tag-color-warn{--pfx-filter-tag-color: var(--md-sys-color-error-container);--pfx-filter-tag-on-color: var(--md-sys-color-on-error-container);--pfx-filter-tag-outline-color: var(--md-sys-color-error)}.praxis-filter-bar.has-compact.tag-color-basic{--pfx-filter-tag-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);--pfx-filter-tag-on-color: var(--md-sys-color-on-surface);--pfx-filter-tag-outline-color: var(--md-sys-color-outline-variant)}:host ::ng-deep .praxis-filter-bar.has-compact{--pfx-filter-inline-chip-padding-x: var(--pdx-inline-control-padding-x);--pfx-filter-inline-icon-gap: 4px}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select,.pdx-inline-date,.pdx-inline-date-range,.pdx-inline-autocomplete,.pdx-inline-currency,.pdx-inline-time) .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-inline:var(--pfx-filter-inline-chip-padding-x)!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select,.pdx-inline-date,.pdx-inline-date-range,.pdx-inline-autocomplete,.pdx-inline-currency,.pdx-inline-time) .mat-mdc-form-field-icon-prefix{align-items:center;display:inline-flex;flex:0 0 auto;margin-right:var(--pfx-filter-inline-icon-gap)!important;padding:0!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select,.pdx-inline-date,.pdx-inline-date-range,.pdx-inline-autocomplete,.pdx-inline-currency,.pdx-inline-time) .mat-mdc-form-field-icon-suffix{align-items:center;display:inline-flex;flex:0 0 auto;gap:var(--pfx-filter-inline-icon-gap)!important;margin-left:var(--pfx-filter-inline-icon-gap)!important;padding:0!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select,.pdx-inline-date,.pdx-inline-date-range,.pdx-inline-autocomplete,.pdx-inline-currency,.pdx-inline-time) .mat-mdc-form-field-icon-prefix>.mat-icon,:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select,.pdx-inline-date,.pdx-inline-date-range,.pdx-inline-autocomplete,.pdx-inline-currency,.pdx-inline-time) .mat-mdc-form-field-icon-suffix>.mat-icon{flex:0 0 16px!important;font-size:16px!important;height:16px!important;line-height:16px!important;margin:0!important;padding:0!important;width:16px!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select,.pdx-inline-date,.pdx-inline-date-range,.pdx-inline-autocomplete,.pdx-inline-currency,.pdx-inline-time) .mat-mdc-form-field-infix{padding-inline:0!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select) .pdx-chip-trigger{gap:var(--pfx-filter-inline-icon-gap)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-chip-trigger.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-currency-range-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .mat-mdc-form-field.pdx-has-value .mat-mdc-text-field-wrapper,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-select .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-chip-trigger.is-active),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-searchable-select .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-chip-trigger.is-active),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-async-select.pdx-has-selection .mat-mdc-text-field-wrapper.mdc-text-field--outlined,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-date-range.pdx-inline-date-range-has-value .mat-mdc-text-field-wrapper.mdc-text-field--outlined,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-date-range.pdx-inline-date-range-has-both .mat-mdc-text-field-wrapper.mdc-text-field--outlined,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-entity-lookup.pdx-has-selection .pdx-chip-trigger,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-multi-select.pdx-has-selection .pdx-chip-trigger,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-range-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-distance-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-score-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-relative-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-relative-period-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-rating-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-pipeline-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-sentiment-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-color-label-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-time-range-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-toggle-pill.is-active{--pdx-inline-currency-symbol-color: var(--pfx-filter-tag-on-color);background:var(--pfx-filter-tag-color)!important;border-color:transparent!important;color:var(--pfx-filter-tag-on-color)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-chip-trigger.is-active :where(.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-currency-range-chip.is-active :where(.mat-icon,.pdx-inline-currency-range-value,.pdx-inline-currency-range-text,.pdx-inline-currency-range-clear),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .mat-mdc-form-field.pdx-has-value :where(input,.mat-mdc-input-element,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,.pdx-inline-clear),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear) :where(input,.mat-mdc-input-element,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,.pdx-inline-clear,.pdx-inline-number-suffix),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled :where(.pdx-inline-select,.pdx-inline-searchable-select) .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-chip-trigger.is-active) :where(.mat-mdc-select-value,.mat-mdc-select-min-line,.mat-mdc-select-placeholder,.pdx-chip-trigger,.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-async-select.pdx-has-selection :where(.mat-mdc-select-value,.mat-mdc-select-min-line,.mat-mdc-select-placeholder,.pdx-chip-trigger,.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-date-range.pdx-inline-date-range-has-value :where(.mat-date-range-input-inner,.mat-date-range-input-separator,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,input),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-date-range.pdx-inline-date-range-has-both :where(.mat-date-range-input-inner,.mat-date-range-input-separator,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,input),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled :where(.pdx-inline-entity-lookup.pdx-has-selection,.pdx-inline-multi-select.pdx-has-selection) .pdx-chip-trigger :where(.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled :where(.pdx-inline-range-chip.is-active,.pdx-inline-distance-chip.is-active,.pdx-inline-score-chip.is-active,.pdx-inline-relative-chip.is-active,.pdx-inline-relative-period-chip.is-active,.pdx-inline-rating-chip.is-active,.pdx-inline-pipeline-chip.is-active,.pdx-inline-sentiment-chip.is-active,.pdx-inline-color-label-chip.is-active) :where(.mat-icon,button,span),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-time-range-chip.is-active :where(.pdx-inline-time-range-icon,.pdx-inline-time-range-text,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-toggle-pill.is-active :where(.pdx-inline-toggle-label,.mat-icon){color:var(--pfx-filter-tag-on-color)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-chip-trigger.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-currency-range-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .mat-mdc-form-field.pdx-has-value .mat-mdc-text-field-wrapper,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-select .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-chip-trigger.is-active),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-searchable-select .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-chip-trigger.is-active),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-async-select.pdx-has-selection .mat-mdc-text-field-wrapper.mdc-text-field--outlined,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-date-range.pdx-inline-date-range-has-value .mat-mdc-text-field-wrapper.mdc-text-field--outlined,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-date-range.pdx-inline-date-range-has-both .mat-mdc-text-field-wrapper.mdc-text-field--outlined,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-entity-lookup.pdx-has-selection .pdx-chip-trigger,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-multi-select.pdx-has-selection .pdx-chip-trigger,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-range-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-distance-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-score-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-relative-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-relative-period-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-rating-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-pipeline-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-sentiment-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-color-label-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-time-range-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-toggle-pill.is-active{--pdx-inline-currency-symbol-color: var(--pfx-filter-tag-outline-color);background:transparent!important;border-color:var(--pfx-filter-tag-outline-color)!important;box-shadow:inset 0 0 0 1px var(--pfx-filter-tag-outline-color);color:var(--pfx-filter-tag-outline-color)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-chip-trigger.is-active :where(.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-currency-range-chip.is-active :where(.mat-icon,.pdx-inline-currency-range-value,.pdx-inline-currency-range-text,.pdx-inline-currency-range-clear),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .mat-mdc-form-field.pdx-has-value :where(input,.mat-mdc-input-element,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,.pdx-inline-clear),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear) :where(input,.mat-mdc-input-element,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,.pdx-inline-clear,.pdx-inline-number-suffix),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined :where(.pdx-inline-select,.pdx-inline-searchable-select) .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-chip-trigger.is-active) :where(.mat-mdc-select-value,.mat-mdc-select-min-line,.mat-mdc-select-placeholder,.pdx-chip-trigger,.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-async-select.pdx-has-selection :where(.mat-mdc-select-value,.mat-mdc-select-min-line,.mat-mdc-select-placeholder,.pdx-chip-trigger,.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-date-range.pdx-inline-date-range-has-value :where(.mat-date-range-input-inner,.mat-date-range-input-separator,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,input),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-date-range.pdx-inline-date-range-has-both :where(.mat-date-range-input-inner,.mat-date-range-input-separator,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,input),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined :where(.pdx-inline-entity-lookup.pdx-has-selection,.pdx-inline-multi-select.pdx-has-selection) .pdx-chip-trigger :where(.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined :where(.pdx-inline-range-chip.is-active,.pdx-inline-distance-chip.is-active,.pdx-inline-score-chip.is-active,.pdx-inline-relative-chip.is-active,.pdx-inline-relative-period-chip.is-active,.pdx-inline-rating-chip.is-active,.pdx-inline-pipeline-chip.is-active,.pdx-inline-sentiment-chip.is-active,.pdx-inline-color-label-chip.is-active) :where(.mat-icon,button,span),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-time-range-chip.is-active :where(.pdx-inline-time-range-icon,.pdx-inline-time-range-text,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-toggle-pill.is-active :where(.pdx-inline-toggle-label,.mat-icon){color:var(--pfx-filter-tag-outline-color)!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-chip-trigger.is-active,.mat-mdc-form-field.pdx-has-value,.pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear),.pdx-inline-currency-range-chip.is-active,.pdx-inline-range-chip.is-active,.pdx-inline-distance-chip.is-active,.pdx-inline-score-chip.is-active,.pdx-inline-relative-chip.is-active,.pdx-inline-relative-period-chip.is-active,.pdx-inline-rating-chip.is-active,.pdx-inline-pipeline-chip.is-active,.pdx-inline-sentiment-chip.is-active,.pdx-inline-color-label-chip.is-active,.pdx-inline-time-range-chip.is-active,.pdx-inline-toggle-pill.is-active) :where(.pdx-chip-clear,.pdx-inline-clear,.pdx-inline-currency-range-clear,.pdx-inline-range-clear,.pdx-inline-distance-clear,.pdx-inline-score-clear,.pdx-inline-relative-clear,.pdx-inline-rating-clear,.pdx-inline-pipeline-clear,.pdx-inline-sentiment-clear,.pdx-inline-color-label-clear,.pdx-inline-time-range-clear,.pdx-inline-toggle-clear){background:color-mix(in srgb,currentColor 16%,transparent)!important;border-radius:50%!important;color:inherit!important;display:inline-grid!important;flex:0 0 var(--pdx-inline-clear-size, 22px)!important;height:var(--pdx-inline-clear-size, 22px)!important;min-width:var(--pdx-inline-clear-size, 22px)!important;place-items:center!important;width:var(--pdx-inline-clear-size, 22px)!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-chip-trigger.is-active,.mat-mdc-form-field.pdx-has-value,.pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear),.pdx-inline-currency-range-chip.is-active,.pdx-inline-range-chip.is-active,.pdx-inline-distance-chip.is-active,.pdx-inline-score-chip.is-active,.pdx-inline-relative-chip.is-active,.pdx-inline-relative-period-chip.is-active,.pdx-inline-rating-chip.is-active,.pdx-inline-pipeline-chip.is-active,.pdx-inline-sentiment-chip.is-active,.pdx-inline-color-label-chip.is-active,.pdx-inline-time-range-chip.is-active,.pdx-inline-toggle-pill.is-active) :where(.pdx-chip-clear,.pdx-inline-clear,.pdx-inline-currency-range-clear,.pdx-inline-range-clear,.pdx-inline-distance-clear,.pdx-inline-score-clear,.pdx-inline-relative-clear,.pdx-inline-rating-clear,.pdx-inline-pipeline-clear,.pdx-inline-sentiment-clear,.pdx-inline-color-label-clear,.pdx-inline-time-range-clear,.pdx-inline-toggle-clear):hover{background:color-mix(in srgb,currentColor 24%,transparent)!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-chip-trigger.is-active,.mat-mdc-form-field.pdx-has-value,.pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear),.pdx-inline-currency-range-chip.is-active,.pdx-inline-range-chip.is-active,.pdx-inline-distance-chip.is-active,.pdx-inline-score-chip.is-active,.pdx-inline-relative-chip.is-active,.pdx-inline-relative-period-chip.is-active,.pdx-inline-rating-chip.is-active,.pdx-inline-pipeline-chip.is-active,.pdx-inline-sentiment-chip.is-active,.pdx-inline-color-label-chip.is-active,.pdx-inline-time-range-chip.is-active,.pdx-inline-toggle-pill.is-active) :where(.pdx-chip-clear,.pdx-inline-clear,.pdx-inline-currency-range-clear,.pdx-inline-range-clear,.pdx-inline-distance-clear,.pdx-inline-score-clear,.pdx-inline-relative-clear,.pdx-inline-rating-clear,.pdx-inline-pipeline-clear,.pdx-inline-sentiment-clear,.pdx-inline-color-label-clear,.pdx-inline-time-range-clear,.pdx-inline-toggle-clear) .mat-icon{color:var(--pdx-inline-clear-icon-color, currentColor)!important}:host ::ng-deep .praxis-filter-bar.has-compact .mat-mdc-form-field.pdx-has-value .pdx-inline-clear .mat-icon{color:var(--pdx-inline-clear-icon-color, currentColor)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .mat-mdc-form-field.pdx-has-value .pdx-inline-clear .mat-icon,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .mat-mdc-form-field.pdx-has-value .pdx-inline-clear .mat-icon{color:var(--pdx-inline-clear-icon-color, currentColor)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-number .mat-mdc-text-field-wrapper:has(.pdx-inline-clear) .pdx-inline-clear .mat-icon,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-number .mat-mdc-text-field-wrapper:has(.pdx-inline-clear) .pdx-inline-clear .mat-icon{color:var(--pdx-inline-clear-icon-color, currentColor)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-toggle-pill.is-active .pdx-inline-toggle-clear .mat-icon,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-toggle-pill.is-active .pdx-inline-toggle-clear .mat-icon{color:var(--pdx-inline-clear-icon-color, currentColor)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-chip-trigger.is-active .pdx-chip-clear .mat-icon,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-chip-trigger.is-active .pdx-chip-clear .mat-icon{color:var(--pdx-inline-clear-icon-color, currentColor)!important}.praxis-filter-tags.outlined .mat-mdc-chip{background:transparent!important;--mat-chip-outline-width: 1px;--mat-chip-outline-color: var(--md-sys-color-outline-variant);box-shadow:inset 0 0 0 var(--mat-chip-outline-width) var(--mat-chip-outline-color)}.praxis-filter-tags.outlined.tag-color-primary .mat-mdc-chip{--mat-chip-outline-color: var(--md-sys-color-primary)}.praxis-filter-tags.outlined.tag-color-accent .mat-mdc-chip{--mat-chip-outline-color: var(--md-sys-color-tertiary)}.praxis-filter-tags.outlined.tag-color-warn .mat-mdc-chip{--mat-chip-outline-color: var(--md-sys-color-error)}.praxis-filter-tags.outlined mat-chip.active .mat-mdc-chip,.praxis-filter-tags.outlined .mat-mdc-chip.mat-mdc-chip-highlighted{--mat-chip-outline-width: 2px;box-shadow:inset 0 0 0 var(--mat-chip-outline-width) var(--mat-chip-outline-color)!important}.praxis-filter-tags.outlined.tag-color-basic mat-chip.active .mat-mdc-chip{--mat-chip-outline-color: var(--md-sys-color-primary)}.praxis-filter-tags .mat-mdc-standard-chip .mdc-evolution-chip__text-label{display:flex;align-items:center;justify-content:center;gap:4px;line-height:1.2;font-size:.875rem}.praxis-filter-tags .chip-leading,.praxis-filter-tags .chip-trailing{display:inline-flex;align-items:center}.praxis-filter-tags .leading-check{width:18px;height:18px;font-size:18px;line-height:1}.praxis-filter-tags .chip-label{position:relative;top:-6px}.praxis-filter-tags .mat-mdc-standard-chip{--mat-chip-container-height: 36px}.praxis-filter-advanced{display:flex;flex-direction:column;min-width:400px;max-width:90vw;min-height:260px;max-height:min(80vh,720px);margin:var(--pfx-overlay-margin-y) var(--pfx-overlay-margin-x);background-color:var(--pfx-overlay-surface)!important;background:var(--pfx-overlay-surface)!important;color:var(--pfx-overlay-on-surface);border:1px solid var(--border-color);border-radius:12px;box-shadow:var(--md-sys-elevation-level3)}.advanced-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px var(--pfx-advanced-pad-x) 10px;border-bottom:1px solid var(--border-color);background:var(--pfx-overlay-surface)}.advanced-title-block{display:flex;flex-direction:column;gap:2px}.advanced-title{font-size:1rem;font-weight:600;color:var(--pfx-overlay-on-surface)}.advanced-subtitle{font-size:.85rem;color:var(--pfx-overlay-on-surface-variant)}.advanced-close{align-self:flex-start}.praxis-filter-overlay.mobile .praxis-filter-advanced{height:100vh;max-height:100vh;margin:0;border-radius:0}:host ::ng-deep .praxis-overlay-backdrop{background:var(--md-sys-color-scrim);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}:host ::ng-deep .praxis-filter-overlay.frosted .praxis-filter-advanced{background:var(--pfx-overlay-surface-variant)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-color:var(--border-color)}:host ::ng-deep .praxis-filter-overlay.frosted .advanced-header,:host ::ng-deep .praxis-filter-overlay.frosted .advanced-actions{background:var(--pfx-overlay-surface-variant)!important}.advanced-body{padding:12px var(--pfx-advanced-pad-x) 72px;overflow:auto;flex:1 1 auto;overscroll-behavior:contain}:host ::ng-deep .praxis-filter-advanced .praxis-filter-form .filter-row{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(var(--pfx-field-min),1fr));gap:var(--pfx-gap-y) var(--pfx-gap-x)}:host ::ng-deep .praxis-filter-advanced .praxis-filter-form .filter-column{min-width:0}:host ::ng-deep .praxis-filter-advanced .praxis-filter-form .filter-column .mat-mdc-form-field{width:100%}.advanced-actions{position:sticky;bottom:0;z-index:2;display:flex;justify-content:flex-end;gap:8px;padding:var(--pfx-gap-y) var(--pfx-advanced-pad-x);background-color:var(--pfx-overlay-surface)!important;background:var(--pfx-overlay-surface)!important;border-top:1px solid var(--border-color);box-shadow:0 -1px 0 var(--md-sys-color-outline-variant)}.advanced-actions .mat-mdc-button-base{height:40px}.advanced-actions .mat-mdc-raised-button.mat-primary{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}:host ::ng-deep .praxis-filter-advanced .mat-mdc-text-field-wrapper.mdc-text-field--outlined{--mdc-outlined-text-field-outline-color: var(--border-color);--mdc-outlined-text-field-hover-outline-color: var(--border-color-hover);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-label-text-color: var(--pfx-overlay-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--pfx-overlay-on-surface);--mdc-outlined-text-field-container-color: var(--pfx-overlay-surface)}:host ::ng-deep .praxis-filter-advanced .mat-mdc-select-trigger,:host ::ng-deep .praxis-filter-advanced .mat-mdc-form-field-subscript-wrapper,:host ::ng-deep .praxis-filter-advanced .mat-mdc-form-field-infix{color:var(--pfx-overlay-on-surface)}@container praxis-filter (min-width: 600px){.fields-grid{gap:6px 8px}:host ::ng-deep .praxis-filter-advanced .praxis-filter-form .filter-row{grid-template-columns:repeat(2,minmax(0,1fr))}}@container praxis-filter (max-width: 640px){.praxis-filter-bar.has-compact{grid-template-columns:minmax(0,1fr);align-items:start}.praxis-filter-bar.has-compact .compact-fields{grid-column:1;grid-row:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:start;justify-items:stretch;width:100%}.praxis-filter-bar.has-compact .inline-actions{grid-column:1;grid-row:2;justify-self:start;width:100%;height:auto}.praxis-filter-bar.has-compact .inline-actions .action-cluster{max-width:100%}:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields>.pfx-field-shell,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields>praxis-field-shell,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell-wrapper,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell-host{--pfx-field-shell-width: auto;--pfx-field-shell-field-width: auto;width:100%!important;max-width:100%!important}:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .mat-mdc-form-field,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .mat-mdc-text-field-wrapper,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-chip-trigger,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-range-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-currency-range-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-distance-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-score-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-relative-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-relative-period-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-rating-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-pipeline-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-sentiment-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-color-label-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-time-range-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-toggle-pill{width:100%!important;max-width:100%!important}:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields :where(.pdx-chip-label,.pdx-chip-trigger,.pdx-inline-range-text,.pdx-inline-currency-range-text,.pdx-inline-distance-text,.pdx-inline-score-text,.pdx-inline-relative-text,.pdx-inline-relative-period-text,.pdx-inline-rating-text,.pdx-inline-pipeline-text,.pdx-inline-sentiment-text,.pdx-inline-color-label-text,.pdx-inline-time-range-text,.pdx-inline-toggle-label){min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell[data-control-type=inlineTime],:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell[data-control-type=inlineTime] .pfx-field-shell-wrapper,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell[data-control-type=inlineTime] .pfx-field-shell-host{--pfx-field-shell-width: fit-content;--pfx-field-shell-field-width: var(--pdx-inline-time-field-w, auto);justify-self:start;width:fit-content!important;max-width:100%!important}:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell[data-control-type=inlineTime] .mat-mdc-form-field.pdx-inline-time{width:var(--pdx-inline-time-field-w, auto)!important;inline-size:var(--pdx-inline-time-field-w, auto)!important;max-width:min(var(--pdx-inline-time-max-w, 280px),100cqw - 24px)!important}}@container praxis-filter (min-width: 960px){.fields-grid{gap:6px 10px}}@container praxis-filter (min-width: 1200px){.fields-grid{grid-template-columns:repeat(auto-fit,minmax(var(--pfx-always-min, 220px),var(--pfx-always-max-desktop, 380px)));justify-content:start;align-content:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=slider],:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=range-slider],:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=rangeSlider],:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=rangeslider]{grid-column:span var(--pfx-slider-span-desktop, 2)}}.inline-toggles{display:flex;align-items:center;gap:8px;margin:0 4px 0 6px}:host ::ng-deep .inline-actions .mat-mdc-slide-toggle{height:var(--pfx-filter-h);display:flex;align-items:center}:host ::ng-deep .inline-actions .mat-mdc-slide-toggle .mdc-form-field{align-items:center}::ng-deep .praxis-filter-overlay .praxis-filter-advanced .praxis-filter-form .filter-row{display:grid!important;gap:var(--pfx-gap-y, 1px) var(--pfx-gap-x, 6px)}@media(min-width:600px){::ng-deep .praxis-filter-overlay .praxis-filter-advanced .praxis-filter-form .filter-row{grid-template-columns:repeat(2,minmax(0,1fr))}}.sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}.hidden-submit{position:absolute!important;width:0!important;height:0!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;pointer-events:none!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;overflow:hidden!important}:host ::ng-deep .inline-actions [matBadge] .mat-badge-content{top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;font-size:10px;font-weight:700;line-height:16px;letter-spacing:0;text-indent:0;color:var(--md-sys-color-on-primary, #fff)}:host ::ng-deep .inline-actions [matBadge][matbadgecolor=warn] .mat-badge-content,:host ::ng-deep .inline-actions [matBadge].mat-badge-warn .mat-badge-content{color:var(--md-sys-color-on-error, #fff)}.praxis-filter-bar :where(.mat-mdc-slide-toggle .mdc-switch__icons){display:none!important}.praxis-filter-bar{--mdc-switch-unselected-icon-size: 0px;--mdc-switch-selected-icon-size: 0px;--pfx-always-min: 220px}.praxis-filter-card{display:flex;flex-direction:column;gap:6px;padding:8px 12px;border-radius:12px;border:1px solid var(--pfx-surface-border, var(--praxis-theme-outline, var(--md-sys-color-outline-variant)));background:var(--praxis-theme-surface-raised, var(--md-sys-color-surface-container));color:var(--praxis-theme-on-surface, var(--md-sys-color-on-surface))}.add-manager{--_pfx-field-manager-surface: var(--pfx-field-manager-surface, var(--praxis-theme-surface-overlay, var(--md-sys-color-surface-container-highest)));--_pfx-field-manager-on-surface: var(--pfx-field-manager-on-surface, var(--praxis-theme-on-surface, var(--md-sys-color-on-surface)));--_pfx-field-manager-on-surface-muted: var(--pfx-field-manager-on-surface-muted, var(--praxis-theme-on-surface-muted, var(--md-sys-color-on-surface-variant)));--_pfx-field-manager-outline: var(--pfx-field-manager-outline, var(--pdx-inline-field-outline, var(--praxis-theme-outline, var(--md-sys-color-outline-variant))));--_pfx-field-manager-focus-outline: var(--pfx-field-manager-focus-outline, var(--pdx-inline-field-focus-outline, var(--praxis-theme-focus-outline, var(--md-sys-color-primary))));--_pfx-field-manager-scrollbar-thumb: var(--pfx-field-manager-scrollbar-thumb, color-mix(in srgb, var(--_pfx-field-manager-on-surface) 42%, var(--_pfx-field-manager-surface)));--_pfx-field-manager-scrollbar-thumb-hover: var(--pfx-field-manager-scrollbar-thumb-hover, color-mix(in srgb, var(--_pfx-field-manager-on-surface) 64%, var(--_pfx-field-manager-surface)));--_pfx-field-manager-scrollbar-track: var(--pfx-field-manager-scrollbar-track, transparent);--_pfx-field-manager-scrollbar-size: var(--pfx-field-manager-scrollbar-size, 10px);display:flex;flex-direction:column;width:min(400px,100vw - 24px);max-height:min(70vh,560px);overflow:hidden;border:1px solid var(--_pfx-field-manager-outline);border-radius:var(--pfx-overlay-radius, 16px);background:var(--_pfx-field-manager-surface);color:var(--_pfx-field-manager-on-surface);box-shadow:var(--praxis-theme-elevation, var(--md-sys-elevation-level3))}.add-manager__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 16px 8px 20px}.add-manager__header h2{margin:0;font:var(--md-sys-typescale-title-medium)}.add-manager__header p{margin:4px 0 0;color:var(--_pfx-field-manager-on-surface-muted);font:var(--md-sys-typescale-body-small)}.add-manager__search{padding:8px 20px}.add-manager__bulk{padding:8px 20px;border-block:1px solid var(--_pfx-field-manager-outline)}.add-manager__list{display:flex;flex-direction:column;min-height:80px;overflow:auto;overscroll-behavior:contain;scrollbar-color:var(--_pfx-field-manager-scrollbar-thumb) var(--_pfx-field-manager-scrollbar-track);scrollbar-gutter:stable;scrollbar-width:auto;padding:4px 12px 12px}.add-manager__list::-webkit-scrollbar{width:var(--_pfx-field-manager-scrollbar-size);height:var(--_pfx-field-manager-scrollbar-size)}.add-manager__list::-webkit-scrollbar-track{background:var(--_pfx-field-manager-scrollbar-track)}.add-manager__list::-webkit-scrollbar-thumb{min-height:32px;border:2px solid transparent;border-radius:999px;background:var(--_pfx-field-manager-scrollbar-thumb);background-clip:padding-box}.add-manager__list::-webkit-scrollbar-thumb:hover{background:var(--_pfx-field-manager-scrollbar-thumb-hover);background-clip:padding-box}.add-manager__section+.add-manager__section{margin-top:8px;padding-top:8px;border-top:1px solid var(--_pfx-field-manager-outline)}.add-manager__section-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;padding:8px 8px 4px;color:var(--_pfx-field-manager-on-surface-muted);font:var(--md-sys-typescale-label-medium)}.add-manager__section-title span{color:var(--_pfx-field-manager-on-surface-muted);font:var(--md-sys-typescale-label-small);white-space:nowrap}.add-manager__item{display:flex;align-items:center;min-height:48px;padding-inline:8px;border-radius:var(--pfx-control-radius, 8px)}::ng-deep .add-manager__item .mdc-form-field{align-items:center}::ng-deep .add-manager__item .mdc-label{display:inline-flex;align-items:center;min-height:20px}.add-manager__item:hover{background:color-mix(in srgb,var(--_pfx-field-manager-on-surface) 6%,var(--_pfx-field-manager-surface))}.add-manager__item-info{width:16px;height:16px;margin-left:4px;vertical-align:text-bottom;color:var(--_pfx-field-manager-on-surface-muted);font-size:16px}.add-manager__item-pending{display:inline-flex;align-items:center;margin-left:8px;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--_pfx-field-manager-focus-outline) 14%,transparent);color:var(--_pfx-field-manager-on-surface-muted);font:var(--md-sys-typescale-label-small);white-space:nowrap}.add-manager__item--pending{background:color-mix(in srgb,var(--_pfx-field-manager-focus-outline) 8%,var(--_pfx-field-manager-surface))}.add-manager__section--selected .add-manager__item{box-shadow:inset 2px 0 color-mix(in srgb,var(--_pfx-field-manager-focus-outline) 56%,transparent)}.add-manager__item--added{animation:add-manager-item-added var(--md-sys-motion-duration-short4, .2s) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(.05, .7, .1, 1)) both}.add-manager__item--removed{animation:add-manager-item-removed var(--md-sys-motion-duration-short4, .2s) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(.05, .7, .1, 1)) both}@keyframes add-manager-item-added{0%{opacity:.72;background:color-mix(in srgb,var(--_pfx-field-manager-focus-outline) 24%,var(--_pfx-field-manager-surface))}to{opacity:1;background:color-mix(in srgb,var(--_pfx-field-manager-focus-outline) 8%,var(--_pfx-field-manager-surface))}}@keyframes add-manager-item-removed{0%{opacity:.72;background:color-mix(in srgb,var(--md-sys-color-surface-container-high) 72%,transparent)}to{opacity:1;background:color-mix(in srgb,var(--_pfx-field-manager-focus-outline) 8%,var(--_pfx-field-manager-surface))}}@media(prefers-reduced-motion:reduce){.add-manager__item--added,.add-manager__item--removed{animation:none}}.add-manager__empty{display:flex;align-items:center;justify-content:center;gap:8px;min-height:96px;padding:16px;color:var(--_pfx-field-manager-on-surface-muted);text-align:center}.add-manager__footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--_pfx-field-manager-outline);background:var(--_pfx-field-manager-surface)}.add-manager__notice{display:flex;align-items:flex-start;gap:8px;padding:10px 16px;font:var(--md-sys-typescale-body-small)}.add-manager__notice mat-icon{flex:0 0 auto}.add-manager__notice--warning{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.add-manager__notice--conflict{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}@media(max-width:600px){.add-manager{width:calc(100vw - 16px);max-height:min(78dvh,640px);border-radius:var(--pfx-overlay-radius, 16px)}.add-manager__header,.add-manager__search{padding-inline:16px}}.inline-actions .add-trigger{display:inline-flex;align-items:center;gap:6px;height:32px;width:100%;max-width:100%;min-width:0;padding:0 10px;border-radius:0;border:0;background:transparent;overflow:visible}.inline-actions .add-trigger--icon{justify-content:center;width:32px;min-width:32px;padding:0}:host ::ng-deep .inline-actions .add-trigger mat-icon{width:18px;height:18px;font-size:18px;flex:0 0 auto}.inline-actions .add-trigger-label{display:inline-block;flex:1 1 auto;min-width:0;max-width:100%;text-align:left;direction:ltr;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem;line-height:1}:host ::ng-deep .action-cluster--manage .mat-mdc-select{flex:0 0 auto;width:180px;min-width:0;max-width:180px}:host ::ng-deep .action-cluster--manage .cluster-select--hidden.mat-mdc-select{position:absolute;width:1px;min-width:1px;max-width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}:host ::ng-deep .action-cluster--manage .mat-mdc-select-trigger{min-height:32px;padding:0}:host ::ng-deep .action-cluster--manage .mat-mdc-select-value,:host ::ng-deep .action-cluster--manage .mat-mdc-select-value-text,:host ::ng-deep .action-cluster--manage .mat-mdc-select-min-line{width:auto;min-width:0;max-width:100%;display:inline-flex;align-items:center;justify-content:flex-start;overflow:visible}.praxis-filter-card .summary-header{display:flex;align-items:center;gap:10px}.praxis-filter-card .summary-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}.praxis-filter-card .summary-title{font-weight:600}.praxis-filter-card .summary-subtitle{opacity:.8;font-size:.875rem}.praxis-filter-card .summary-badges{display:flex;flex-wrap:wrap;gap:6px}.praxis-filter-card .summary-badges span{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;background:var(--md-sys-color-primary-container);border:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-primary-container);font-size:12px}.praxis-filter-card .card-actions{display:flex;gap:8px}:host ::ng-deep .inline-actions .mat-mdc-select-arrow-wrapper{display:none}.inline-actions .add-filter-btn{height:36px;border-radius:18px;padding:0 16px 0 12px}.inline-actions .add-filter-btn mat-icon{margin-right:8px;margin-left:-4px}\n"] }]
41078
+ }, template: "@if (saving) {\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n}\n@if (schemaError) {\n <div class=\"schema-error-banner\" role=\"alert\" aria-live=\"polite\">\n <mat-icon [praxisIcon]=\"'error_outline'\" aria-hidden=\"true\"></mat-icon>\n <span class=\"schema-error-message\">{{\n i18nLabels.errorLoadingFilters || \"Erro ao carregar filtros.\"\n }}</span>\n <button\n mat-stroked-button\n class=\"schema-error-retry\"\n type=\"button\"\n (click)=\"retrySchemaLoad()\"\n [attr.aria-label]=\"i18nLabels.retry || 'Tentar novamente'\"\n >\n {{ i18nLabels.retry || \"Tentar novamente\" }}\n </button>\n </div>\n}\n\n<ng-template #filterTagsTemplate>\n @if (displayedTags.length) {\n <div\n class=\"praxis-filter-tags\"\n [class.outlined]=\"tagVariant === 'outlined'\"\n [class.tag-color-basic]=\"tagColor === 'basic'\"\n [class.tag-color-primary]=\"tagColor === 'primary'\"\n [class.tag-color-accent]=\"tagColor === 'accent'\"\n [class.tag-color-warn]=\"tagColor === 'warn'\"\n >\n <mat-chip-set [attr.aria-label]=\"i18nLabels.shortcutsLabel || 'Atalhos'\">\n @for (tag of displayedTags; track trackById($index, tag)) {\n <mat-chip\n [class.active]=\"isActiveTag(tag)\"\n [color]=\"\n tagVariant === 'outlined' || tagColor === 'basic'\n ? null\n : tagColor\n \"\n [highlighted]=\"tagVariant === 'filled' && tagColor !== 'basic'\"\n (click)=\"toggleTag(tag)\"\n (keydown.enter)=\"toggleTag(tag)\"\n (keydown.space)=\"toggleTag(tag)\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-pressed]=\"isActiveTag(tag)\"\n >\n @if (editingTagId !== tag.id) {\n @if (isActiveTag(tag)) {\n <span class=\"chip-leading\">\n <mat-icon class=\"leading-check\">check</mat-icon>\n </span>\n }\n <span class=\"chip-label\">{{ tag.label }}</span>\n @if (isUserTag(tag)) {\n <span class=\"chip-trailing\">\n <button\n praxisIconButton=\"more_vert\"\n size=\"compact\"\n [matMenuTriggerFor]=\"tagMenu\"\n (click)=\"$event.stopPropagation()\"\n [attr.aria-label]=\"getTagActionsAriaLabel(tag)\"\n ></button>\n <mat-menu #tagMenu=\"matMenu\" xPosition=\"before\">\n <button mat-menu-item (click)=\"startEditTag(tag, $event)\">\n <mat-icon>edit</mat-icon>\n <span>{{ i18nLabels.renameShortcut }}</span>\n </button>\n <button mat-menu-item (click)=\"deleteTag(tag)\">\n <mat-icon>delete</mat-icon>\n <span>{{ i18nLabels.removeShortcut }}</span>\n </button>\n </mat-menu>\n </span>\n } @else {\n <span\n class=\"chip-readonly\"\n [matTooltip]=\"i18nLabels.readonlyShortcut\"\n >\n <mat-icon>lock</mat-icon>\n </span>\n }\n } @else {\n <input\n matInput\n class=\"chip-editor\"\n [formControl]=\"editingTagLabel\"\n autofocus\n [matTooltip]=\"'Enter para salvar, Esc para cancelar'\"\n matTooltipPosition=\"below\"\n (keydown.enter)=\"commitEditTag(tag, $event)\"\n (keydown.escape)=\"cancelEditTag($event)\"\n (blur)=\"commitEditTag(tag, $event)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n </mat-chip>\n }\n </mat-chip-set>\n </div>\n }\n</ng-template>\n\n<form\n class=\"praxis-filter-bar\"\n [class.is-open]=\"advancedOpen\"\n [class.has-compact]=\"\n compactSelectedMetas.length || compactAlwaysVisibleMetas.length\n \"\n [class.tag-variant-filled]=\"tagVariant === 'filled'\"\n [class.tag-variant-outlined]=\"tagVariant === 'outlined'\"\n [class.tag-color-basic]=\"tagColor === 'basic'\"\n [class.tag-color-primary]=\"tagColor === 'primary'\"\n [class.tag-color-accent]=\"tagColor === 'accent'\"\n [class.tag-color-warn]=\"tagColor === 'warn'\"\n (click)=\"onFieldInteraction($event)\"\n (focusin)=\"onFieldInteraction($event)\"\n (change)=\"$event.stopPropagation()\"\n (submit)=\"onSubmit(); $event.preventDefault(); $event.stopPropagation()\"\n>\n @if (compactSelectedMetas.length || compactAlwaysVisibleMetas.length) {\n <div class=\"compact-fields\">\n @if (compactSelectedMetas.length) {\n <ng-container\n dynamicFieldLoader\n [fields]=\"compactSelectedMetas\"\n [formGroup]=\"alwaysForm\"\n (componentsCreated)=\"onSelectedComponents($event)\"\n ></ng-container>\n }\n @if (compactAlwaysVisibleMetas.length) {\n <ng-container\n dynamicFieldLoader\n [fields]=\"compactAlwaysVisibleMetas\"\n [formGroup]=\"alwaysForm\"\n (componentsCreated)=\"onAlwaysComponents($event)\"\n ></ng-container>\n }\n </div>\n }\n\n @if (gridSelectedMetas.length || gridAlwaysVisibleMetas.length) {\n <div class=\"fields-grid\">\n @if (gridSelectedMetas.length) {\n <ng-container\n dynamicFieldLoader\n [fields]=\"gridSelectedMetas\"\n [formGroup]=\"alwaysForm\"\n (componentsCreated)=\"onSelectedComponents($event)\"\n ></ng-container>\n }\n @if (gridAlwaysVisibleMetas.length) {\n <ng-container\n dynamicFieldLoader\n [fields]=\"gridAlwaysVisibleMetas\"\n [formGroup]=\"alwaysForm\"\n (componentsCreated)=\"onAlwaysComponents($event)\"\n ></ng-container>\n }\n </div>\n }\n\n <div class=\"query-auxiliary\" data-filter-region=\"query-auxiliary\">\n @if (compactSelectedMetas.length || compactAlwaysVisibleMetas.length) {\n <ng-container [ngTemplateOutlet]=\"filterTagsTemplate\"></ng-container>\n }\n\n <div\n class=\"inline-actions\"\n [class.actions-outlined]=\"actionsVariant === 'outlined'\"\n >\n <div\n class=\"actions-anchor\"\n #anchorRef=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n ></div>\n @if (toggleMetas.length) {\n <div class=\"inline-toggles\">\n <ng-container\n dynamicFieldLoader\n [fields]=\"toggleMetas\"\n [formGroup]=\"alwaysForm\"\n (componentsCreated)=\"onToggleComponents($event)\"\n ></ng-container>\n </div>\n }\n\n @if (\n showAdvancedButton ||\n showAddButton ||\n showFilterSettings ||\n isFieldAuthoringEnabled()\n ) {\n <div class=\"action-cluster action-cluster--manage\">\n @if (showAdvancedButton) {\n <button\n #advancedButton\n praxisIconButton=\"filter_list\"\n size=\"compact\"\n class=\"cluster-btn\"\n [busy]=\"advancedOpening\"\n [class.is-opening]=\"advancedOpening\"\n [class.is-disabled]=\"!hasAdvancedFields()\"\n type=\"button\"\n [matBadge]=\"activeFiltersCount\"\n [matBadgeHidden]=\"!activeFiltersCount || !hasAdvancedFields()\"\n matBadgeSize=\"small\"\n matBadgeColor=\"primary\"\n [matBadgeOverlap]=\"false\"\n (click)=\"toggleAdvanced()\"\n [attr.aria-label]=\"getAdvancedAriaLabel()\"\n [attr.aria-expanded]=\"advancedOpen\"\n [attr.aria-disabled]=\"!hasAdvancedFields()\"\n [attr.aria-busy]=\"advancedOpening ? 'true' : null\"\n [matTooltip]=\"getAdvancedTooltip()\"\n matTooltipPosition=\"below\"\n [attr.aria-controls]=\"advancedPanelId\"\n ></button>\n }\n @if (showAddButton) {\n <button\n #addManagerOrigin=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n praxisIconButton=\"add\"\n size=\"compact\"\n class=\"cluster-btn\"\n type=\"button\"\n [attr.aria-label]=\"getAddAriaLabel()\"\n [matTooltip]=\"getAddTooltip()\"\n matTooltipPosition=\"below\"\n [class.is-disabled]=\"!hasAddableFields()\"\n [attr.aria-disabled]=\"!hasAddableFields()\"\n [attr.aria-expanded]=\"addManagerOpen\"\n aria-haspopup=\"dialog\"\n [attr.aria-controls]=\"addManagerOpen ? addManagerTitleId : null\"\n (click)=\"toggleAddManager()\"\n ></button>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"addManagerOrigin\"\n [cdkConnectedOverlayOpen]=\"addManagerOpen\"\n [cdkConnectedOverlayPositions]=\"addOverlayPositions\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"closeAddManager()\"\n (detach)=\"closeAddManager()\"\n (overlayKeydown)=\"$event.key === 'Escape' && closeAddManager()\"\n >\n <section\n class=\"add-manager\"\n role=\"dialog\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"addManagerTitleId\"\n [attr.aria-describedby]=\"addManagerDescriptionId\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n >\n <header class=\"add-manager__header\">\n <div>\n <h2 [id]=\"addManagerTitleId\">\n {{\n i18nLabels.manageFieldsTitle ||\n \"Gerenciar campos de filtro\"\n }}\n </h2>\n <p [id]=\"addManagerDescriptionId\">\n {{\n i18nLabels.manageFieldsDescription ||\n \"Escolha os campos exibidos na barra de filtros.\"\n }}\n </p>\n </div>\n <button\n praxisIconButton=\"close\"\n size=\"compact\"\n type=\"button\"\n (click)=\"closeAddManager()\"\n [attr.aria-label]=\"i18nLabels.close || 'Fechar'\"\n ></button>\n </header>\n <div class=\"add-manager__search\">\n <pdx-collection-search\n [value]=\"addQuery\"\n [placeholder]=\"\n i18nLabels.filtersSearch || i18nLabels.searchPlaceholder\n \"\n [ariaLabel]=\"\n i18nLabels.filtersSearch || i18nLabels.searchPlaceholder\n \"\n [clearAriaLabel]=\"i18nLabels.clearSearch || 'Limpar busca'\"\n (valueChange)=\"onAddQuery($event)\"\n />\n </div>\n <div class=\"add-manager__bulk\">\n <mat-checkbox\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isSomeSelected() && !isAllSelected()\"\n [disabled]=\"!addItems.length || addManagerConflict\"\n (change)=\"toggleSelectAll()\"\n >\n {{\n i18nLabels.selectAllResults ||\n i18nLabels.selectAll ||\n \"Selecionar todos os resultados\"\n }}\n </mat-checkbox>\n </div>\n <div\n class=\"add-manager__list\"\n role=\"group\"\n [attr.aria-label]=\"\n i18nLabels.manageFieldsTitle || 'Gerenciar campos de filtro'\n \"\n >\n @if (getAddManagerSelectedItems().length) {\n <section\n class=\"add-manager__section add-manager__section--selected\"\n [attr.aria-label]=\"\n i18nLabels.selectedFieldsSectionTitle ||\n 'Campos exibidos'\n \"\n >\n <h3 class=\"add-manager__section-title\">\n {{\n i18nLabels.selectedFieldsSectionTitle ||\n \"Campos exibidos\"\n }}\n <span>{{ getAddManagerSelectedFieldsSummary() }}</span>\n </h3>\n @for (\n it of getAddManagerSelectedItems();\n track trackById($index, it)\n ) {\n <mat-checkbox\n class=\"add-manager__item\"\n [attr.data-field-id]=\"it.id\"\n [checked]=\"isAddManagerFieldSelected(it.id)\"\n [matTooltip]=\"it.description || ''\"\n [matTooltipDisabled]=\"!it.description\"\n matTooltipPosition=\"above\"\n [attr.aria-description]=\"\n getAddManagerFieldAriaDescription(it)\n \"\n [class.add-manager__item--added]=\"\n isAddManagerItemInMotion(it.id, 'added')\n \"\n [class.add-manager__item--removed]=\"\n isAddManagerItemInMotion(it.id, 'removed')\n \"\n [class.add-manager__item--pending]=\"\n isAddManagerFieldPendingRemoval(it.id)\n \"\n [disabled]=\"addManagerConflict\"\n (change)=\"toggleManagedField(it.id, $event.checked)\"\n >\n {{ it.label }}\n @if (it.description) {\n <mat-icon\n class=\"add-manager__item-info\"\n [praxisIcon]=\"'info_outline'\"\n aria-hidden=\"true\"\n ></mat-icon>\n }\n @if (\n getAddManagerFieldPendingLabel(it.id);\n as pendingLabel\n ) {\n <span class=\"add-manager__item-pending\">{{\n pendingLabel\n }}</span>\n }\n </mat-checkbox>\n }\n </section>\n }\n @if (getAddManagerAvailableItems().length) {\n <section\n class=\"add-manager__section\"\n [attr.aria-label]=\"\n i18nLabels.availableFieldsSectionTitle ||\n 'Campos dispon\u00EDveis'\n \"\n >\n <h3 class=\"add-manager__section-title\">\n {{\n i18nLabels.availableFieldsSectionTitle ||\n \"Campos dispon\u00EDveis\"\n }}\n </h3>\n @for (\n it of getAddManagerAvailableItems();\n track trackById($index, it)\n ) {\n <mat-checkbox\n class=\"add-manager__item\"\n [attr.data-field-id]=\"it.id\"\n [checked]=\"isAddManagerFieldSelected(it.id)\"\n [matTooltip]=\"it.description || ''\"\n [matTooltipDisabled]=\"!it.description\"\n matTooltipPosition=\"above\"\n [attr.aria-description]=\"\n getAddManagerFieldAriaDescription(it)\n \"\n [class.add-manager__item--added]=\"\n isAddManagerItemInMotion(it.id, 'added')\n \"\n [class.add-manager__item--removed]=\"\n isAddManagerItemInMotion(it.id, 'removed')\n \"\n [class.add-manager__item--pending]=\"\n isAddManagerFieldPendingAddition(it.id)\n \"\n [disabled]=\"addManagerConflict\"\n (change)=\"toggleManagedField(it.id, $event.checked)\"\n >\n {{ it.label }}\n @if (it.description) {\n <mat-icon\n class=\"add-manager__item-info\"\n [praxisIcon]=\"'info_outline'\"\n aria-hidden=\"true\"\n ></mat-icon>\n }\n @if (\n getAddManagerFieldPendingLabel(it.id);\n as pendingLabel\n ) {\n <span class=\"add-manager__item-pending\">{{\n pendingLabel\n }}</span>\n }\n </mat-checkbox>\n }\n </section>\n }\n @if (!addItems.length) {\n <div class=\"add-manager__empty\" role=\"status\">\n <mat-icon\n [praxisIcon]=\"'search_off'\"\n aria-hidden=\"true\"\n ></mat-icon>\n <span>{{\n addQuery\n ? i18nLabels.noFilterFieldsFound ||\n \"Nenhum campo encontrado.\"\n : i18nLabels.addUnavailable ||\n \"Todos os campos j\u00E1 est\u00E3o vis\u00EDveis\"\n }}</span>\n </div>\n }\n </div>\n <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ addManagerAnnouncement }}\n </div>\n @if (addManagerConflict) {\n <div\n class=\"add-manager__notice add-manager__notice--conflict\"\n role=\"alert\"\n >\n <mat-icon\n [praxisIcon]=\"'sync_problem'\"\n aria-hidden=\"true\"\n ></mat-icon>\n <span>{{ i18nLabels.fieldSelectionConflict }}</span>\n </div>\n } @else if (getRemovedActiveFieldLabels().length) {\n <div\n class=\"add-manager__notice add-manager__notice--warning\"\n role=\"status\"\n >\n <mat-icon\n [praxisIcon]=\"'warning_amber'\"\n aria-hidden=\"true\"\n ></mat-icon>\n <span\n >{{ i18nLabels.removingActiveFields }}\n {{ getRemovedActiveFieldLabels().join(\", \") }}</span\n >\n </div>\n }\n <footer class=\"add-manager__footer\">\n <button mat-button type=\"button\" (click)=\"closeAddManager()\">\n {{ i18nLabels.cancel }}\n </button>\n <button\n mat-flat-button\n color=\"primary\"\n type=\"button\"\n [disabled]=\"!isAddManagerDirty() || addManagerConflict\"\n (click)=\"applyAddManager()\"\n >\n {{ i18nLabels.manageFieldsApply || \"Aplicar\" }}\n @if (isAddManagerDirty()) {\n ({{ getAddManagerChangeCount() }})\n }\n </button>\n </footer>\n </section>\n </ng-template>\n }\n @if (showFilterSettings) {\n <button\n praxisIconButton=\"settings\"\n size=\"compact\"\n class=\"cluster-btn separator-before\"\n type=\"button\"\n (click)=\"openSettings()\"\n [matBadge]=\"schemaOutdated ? '!' : ''\"\n [matBadgeHidden]=\"!schemaOutdated\"\n matBadgeColor=\"warn\"\n matBadgeSize=\"small\"\n matBadgePosition=\"above after\"\n [matTooltip]=\"getSettingsTooltip()\"\n matTooltipPosition=\"below\"\n [attr.aria-label]=\"getSettingsAriaLabel()\"\n ></button>\n }\n @if (isFieldAuthoringEnabled() && activeEditableFieldMeta) {\n <button\n praxisIconButton=\"tune\"\n size=\"compact\"\n class=\"cluster-btn\"\n type=\"button\"\n data-testid=\"filter-field-settings-trigger\"\n [attr.aria-label]=\"activeEditableFieldLabel\"\n (click)=\"openSelectedFieldEditor()\"\n ></button>\n }\n </div>\n }\n\n @if ((showClearButton && activeFiltersCount > 0) || showSearchButton) {\n <div class=\"action-cluster action-cluster--query\">\n @if (showClearButton && activeFiltersCount > 0) {\n <button\n praxisIconButton=\"filter_alt_off\"\n size=\"compact\"\n class=\"cluster-btn\"\n type=\"button\"\n data-testid=\"filter-clear-trigger\"\n (click)=\"onClear()\"\n [attr.aria-label]=\"i18nLabels.clear\"\n [matTooltip]=\"i18nLabels.clear\"\n matTooltipPosition=\"below\"\n ></button>\n }\n @if (showSearchButton) {\n <button\n praxisIconButton=\"search\"\n size=\"compact\"\n class=\"cluster-btn\"\n type=\"submit\"\n [attr.aria-label]=\"i18nLabels.apply\"\n [matTooltip]=\"i18nLabels.apply\"\n matTooltipPosition=\"below\"\n ></button>\n }\n </div>\n }\n\n <span class=\"sr-only\" aria-live=\"polite\">{{\n advancedOpening\n ? i18nLabels.advancedOpening || \"Abrindo filtro avan\u00E7ado...\"\n : getAddAriaLabel()\n }}</span>\n </div>\n </div>\n\n <span class=\"sr-only\" aria-live=\"polite\">\n {{ activeFiltersCount ? activeFiltersCount + \" filtros ativos\" : \"\" }}\n </span>\n <button\n type=\"submit\"\n class=\"hidden-submit\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n ></button>\n</form>\n\n@if (!(compactSelectedMetas.length || compactAlwaysVisibleMetas.length)) {\n <ng-container [ngTemplateOutlet]=\"filterTagsTemplate\"></ng-container>\n}\n", styles: ["@charset \"UTF-8\";:root{--pfx-filter-h: 42px;--pfx-filter-align-offset: 2px;--pfx-gap-x: 12px;--pfx-gap-y: 8px;--pfx-always-max-desktop: 380px;--pfx-slider-span-desktop: 2;--pfx-advanced-pad-x: 24px;--pfx-field-min: 280px;--pfx-overlay-margin-y: 16px;--pfx-overlay-margin-x: 16px}:host-context(.theme-light){--pfx-surface-border: var( --praxis-theme-outline-strong, var(--md-sys-color-outline) )}:host{--border-color: var( --praxis-theme-outline, var(--md-sys-color-outline-variant) );--border-color-hover: var( --praxis-theme-outline-strong, var(--md-sys-color-outline) );--pfx-overlay-surface: var( --praxis-theme-surface-raised, var(--md-sys-color-surface-container) );--pfx-overlay-surface-elev: var( --praxis-theme-surface-overlay, var(--md-sys-color-surface-container-high) );--pfx-overlay-surface-variant: var( --praxis-theme-surface-raised, var(--md-sys-color-surface-variant) );--pfx-overlay-on-surface: var( --praxis-theme-on-surface, var(--md-sys-color-on-surface) );--pfx-overlay-on-surface-variant: var( --praxis-theme-on-surface-muted, var(--md-sys-color-on-surface-variant) );display:block;width:100%;min-width:0;flex:1 1 auto;container-name:praxis-filter;container-type:inline-size}.schema-error-banner{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:8px 10px;border-radius:10px;border:1px solid color-mix(in srgb,var(--md-sys-color-error) 50%,transparent);background:color-mix(in srgb,var(--md-sys-color-error-container) 85%,transparent);color:var(--md-sys-color-on-error-container)}.schema-error-message{min-width:0;flex:1 1 auto;font-size:.8125rem}:host ::ng-deep .schema-error-retry.mat-mdc-outlined-button{--mdc-outlined-button-outline-color: color-mix( in srgb, var(--md-sys-color-error) 55%, var(--md-sys-color-outline) )}.praxis-filter-bar{display:grid;width:100%;grid-template-columns:minmax(0,1fr) auto;column-gap:6px;row-gap:6px;align-items:center}.inline-actions .actions-anchor{width:0;height:0;overflow:hidden}.query-auxiliary{grid-column:2;grid-row:1;display:flex;align-items:center;flex-wrap:nowrap;gap:6px;justify-self:end;align-self:center;width:fit-content;max-width:100%;min-width:0}.inline-actions{flex:0 0 auto;display:flex;gap:6px;white-space:nowrap;height:var(--pfx-filter-h);align-items:center;padding:0 2px}.action-cluster{flex:0 0 auto;display:inline-flex;align-items:center;gap:2px;min-height:36px;padding:2px;border-radius:999px;border:1px solid var(--pfx-surface-border, var(--md-sys-color-outline-variant));background:var(--md-sys-color-surface-container-highest)}.action-cluster--manage{position:relative;border-color:color-mix(in srgb,var(--md-sys-color-primary) 35%,var(--md-sys-color-outline-variant));background:var(--md-sys-color-surface-container-high)}.action-cluster .cluster-btn.is-opening{pointer-events:none}.action-cluster .cluster-btn.is-disabled{color:color-mix(in srgb,var(--md-sys-color-on-surface) 38%,transparent);cursor:default;opacity:.56}.inline-actions.actions-outlined button[praxisIconButton]{border:1px solid var(--pfx-surface-border, var(--md-sys-color-outline-variant));border-radius:50%}.inline-actions.actions-outlined .action-cluster button[praxisIconButton]{border-color:transparent}.separator-before{position:relative;margin-left:10px}.separator-before:before{content:\"\";position:absolute;left:-7px;top:50%;width:1px;height:18px;transform:translateY(-50%);background:color-mix(in srgb,var(--md-sys-color-outline) 72%,transparent)}.inline-actions mat-icon{width:20px;height:20px;font-size:20px}.fields-grid{grid-column:1;grid-row:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--pfx-always-min, 220px),1fr));grid-auto-flow:row dense;gap:6px}.compact-fields{grid-column:1;grid-row:1;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:center;align-items:center;gap:6px;min-width:0;min-height:var(--pfx-filter-h)}.query-auxiliary .praxis-filter-tags{flex:0 1 auto;min-width:0;min-height:var(--pfx-filter-h);display:inline-flex;align-items:center}.query-auxiliary .praxis-filter-tags mat-chip-set{min-width:0}:host ::ng-deep .compact-fields .pfx-field-shell,:host ::ng-deep .compact-fields .pfx-field-shell-wrapper,:host ::ng-deep .compact-fields .pfx-field-shell-host{--pfx-field-shell-width: fit-content;--pfx-field-shell-field-width: auto;width:fit-content!important;max-width:100%;min-width:0;flex:0 1 auto!important}:host ::ng-deep .compact-fields>.pfx-field-shell,:host ::ng-deep .compact-fields>praxis-field-shell{flex:0 1 auto!important;width:fit-content!important;max-width:100%;min-width:0}:host ::ng-deep .compact-fields .pfx-field-shell .mat-mdc-form-field{width:auto!important;max-width:100%;margin-bottom:0}:host ::ng-deep .compact-fields .pfx-field-shell[data-control-type=inlineTime] .mat-mdc-form-field.pdx-inline-time{width:var(--pdx-inline-time-field-w, auto)!important;inline-size:var(--pdx-inline-time-field-w, auto)!important;max-width:min(var(--pdx-inline-time-max-w, 280px),100cqw - 24px)!important}:host ::ng-deep .compact-fields .pfx-field-shell[data-control-type=inlineDateRange] .mat-mdc-form-field{width:var(--pdx-inline-date-range-shell-width, auto)!important;max-width:100%!important}.praxis-filter-bar.has-compact .compact-fields{grid-column:1;grid-row:1}.praxis-filter-bar.has-compact .fields-grid{grid-column:1/-1;grid-row:2}@container praxis-filter (max-width: 900px){.praxis-filter-bar.has-compact{grid-template-columns:minmax(0,1fr);align-items:start}.praxis-filter-bar.has-compact .query-auxiliary{grid-column:1;grid-row:2;justify-self:start;justify-content:flex-start;flex-wrap:wrap;width:100%}}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=slider] mat-slider,:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=range-slider] mat-slider,:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=rangeSlider] mat-slider{width:100%;display:block}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=slider] .pdx-slider-wrapper,:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=range-slider] .pdx-slider-wrapper,:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=rangeSlider] .pdx-slider-wrapper{padding-top:2px}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=range-slider] .pdx-range-slider-container,:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=rangeSlider] .pdx-range-slider-container{padding:2px 0 0}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=range-slider] .pdx-slider-label,:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=rangeSlider] .pdx-slider-label{margin-bottom:4px;line-height:1.15}:host ::ng-deep .fields-grid .mat-mdc-text-field-wrapper.mdc-text-field--outlined{min-height:var(--pfx-filter-h);align-items:center}:host ::ng-deep .fields-grid .mat-mdc-form-field-infix{min-height:var(--pfx-filter-h)}:host ::ng-deep .fields-grid .mat-mdc-select-trigger{height:var(--pfx-filter-h);align-items:center}:host ::ng-deep .fields-grid .mat-mdc-form-field{width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineSelect]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineSelect] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineSearchableSelect]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineSearchableSelect] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineMultiSelect]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineMultiSelect] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineInput]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineInput] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlinePhone]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlinePhone] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineToggle]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineToggle] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineRange]{justify-self:start}:host ::ng-deep .compact-fields .pfx-field-shell[data-control-type=inlineRange]{max-width:min(340px,100%)}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineDate]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineDate] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineDateRange]{justify-self:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=inlineDateRange] .mat-mdc-form-field{width:auto;min-width:0;max-width:100%}:host ::ng-deep .fields-grid .mat-mdc-form-field-subscript-wrapper{min-height:0;margin-top:0}:host ::ng-deep .fields-grid .mat-mdc-form-field{margin-bottom:0}.praxis-filter-bar.has-compact{--pfx-filter-tag-color: var(--md-sys-color-primary-container);--pfx-filter-tag-on-color: var(--md-sys-color-on-primary-container);--pfx-filter-tag-outline-color: var(--md-sys-color-primary);--pdx-inline-control-height: var(--pfx-filter-inline-control-height, 42px);--pdx-inline-control-height-mobile: var( --pfx-filter-inline-control-height-mobile, 40px );--pdx-inline-control-padding-x: var( --pfx-filter-inline-control-padding-x, 12px );--pdx-inline-control-padding-x-mobile: var( --pfx-filter-inline-control-padding-x-mobile, 12px );--pdx-inline-clear-size: var(--pfx-filter-inline-clear-size, 22px);--pdx-inline-chip-radius: var( --pfx-filter-inline-chip-radius, var(--md-sys-shape-corner-full, 999px) );--pdx-inline-chip-active-bg: var(--pfx-filter-tag-color);--pdx-inline-chip-active-fg: var(--pfx-filter-tag-on-color);--pdx-inline-chip-active-clear-color: var(--pfx-filter-tag-on-color);--pdx-inline-field-focus-outline: var(--pfx-filter-tag-outline-color)}.praxis-filter-bar.has-compact.tag-color-accent{--pfx-filter-tag-color: var( --md-sys-color-tertiary-container, var(--md-sys-color-secondary-container) );--pfx-filter-tag-on-color: var( --md-sys-color-on-tertiary-container, var(--md-sys-color-on-secondary-container) );--pfx-filter-tag-outline-color: var( --md-sys-color-tertiary, var(--md-sys-color-secondary) )}.praxis-filter-bar.has-compact.tag-color-warn{--pfx-filter-tag-color: var(--md-sys-color-error-container);--pfx-filter-tag-on-color: var(--md-sys-color-on-error-container);--pfx-filter-tag-outline-color: var(--md-sys-color-error)}.praxis-filter-bar.has-compact.tag-color-basic{--pfx-filter-tag-color: color-mix( in srgb, var(--md-sys-color-on-surface) 10%, transparent );--pfx-filter-tag-on-color: var(--md-sys-color-on-surface);--pfx-filter-tag-outline-color: var(--md-sys-color-outline-variant)}:host ::ng-deep .praxis-filter-bar.has-compact{--pfx-filter-inline-chip-padding-x: var(--pdx-inline-control-padding-x);--pfx-filter-inline-icon-gap: 4px}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select,.pdx-inline-date,.pdx-inline-date-range,.pdx-inline-autocomplete,.pdx-inline-currency,.pdx-inline-time) .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-inline:var(--pfx-filter-inline-chip-padding-x)!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select,.pdx-inline-date,.pdx-inline-date-range,.pdx-inline-autocomplete,.pdx-inline-currency,.pdx-inline-time) .mat-mdc-form-field-icon-prefix{align-items:center;display:inline-flex;flex:0 0 auto;margin-right:var(--pfx-filter-inline-icon-gap)!important;padding:0!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select,.pdx-inline-date,.pdx-inline-date-range,.pdx-inline-autocomplete,.pdx-inline-currency,.pdx-inline-time) .mat-mdc-form-field-icon-suffix{align-items:center;display:inline-flex;flex:0 0 auto;gap:var(--pfx-filter-inline-icon-gap)!important;margin-left:var(--pfx-filter-inline-icon-gap)!important;padding:0!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select,.pdx-inline-date,.pdx-inline-date-range,.pdx-inline-autocomplete,.pdx-inline-currency,.pdx-inline-time) .mat-mdc-form-field-icon-prefix>.mat-icon,:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select,.pdx-inline-date,.pdx-inline-date-range,.pdx-inline-autocomplete,.pdx-inline-currency,.pdx-inline-time) .mat-mdc-form-field-icon-suffix>.mat-icon{flex:0 0 16px!important;font-size:16px!important;height:16px!important;line-height:16px!important;margin:0!important;padding:0!important;width:16px!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select,.pdx-inline-date,.pdx-inline-date-range,.pdx-inline-autocomplete,.pdx-inline-currency,.pdx-inline-time) .mat-mdc-form-field-infix{padding-inline:0!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-inline-select,.pdx-inline-searchable-select,.pdx-inline-async-select) .pdx-chip-trigger{gap:var(--pfx-filter-inline-icon-gap)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-chip-trigger.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-currency-range-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .mat-mdc-form-field.pdx-has-value .mat-mdc-text-field-wrapper,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-select .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-chip-trigger.is-active),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-searchable-select .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-chip-trigger.is-active),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-async-select.pdx-has-selection .mat-mdc-text-field-wrapper.mdc-text-field--outlined,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-date-range.pdx-inline-date-range-has-value .mat-mdc-text-field-wrapper.mdc-text-field--outlined,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-date-range.pdx-inline-date-range-has-both .mat-mdc-text-field-wrapper.mdc-text-field--outlined,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-entity-lookup.pdx-has-selection .pdx-chip-trigger,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-multi-select.pdx-has-selection .pdx-chip-trigger,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-range-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-distance-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-score-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-relative-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-relative-period-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-rating-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-pipeline-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-sentiment-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-color-label-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-time-range-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-toggle-pill.is-active{--pdx-inline-currency-symbol-color: var(--pfx-filter-tag-on-color);background:var(--pfx-filter-tag-color)!important;border-color:transparent!important;color:var(--pfx-filter-tag-on-color)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-chip-trigger.is-active :where(.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-currency-range-chip.is-active :where(.mat-icon,.pdx-inline-currency-range-value,.pdx-inline-currency-range-text,.pdx-inline-currency-range-clear),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .mat-mdc-form-field.pdx-has-value :where(input,.mat-mdc-input-element,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,.pdx-inline-clear),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear) :where(input,.mat-mdc-input-element,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,.pdx-inline-clear,.pdx-inline-number-suffix),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled :where(.pdx-inline-select,.pdx-inline-searchable-select) .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-chip-trigger.is-active) :where(.mat-mdc-select-value,.mat-mdc-select-min-line,.mat-mdc-select-placeholder,.pdx-chip-trigger,.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-async-select.pdx-has-selection :where(.mat-mdc-select-value,.mat-mdc-select-min-line,.mat-mdc-select-placeholder,.pdx-chip-trigger,.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-date-range.pdx-inline-date-range-has-value :where(.mat-date-range-input-inner,.mat-date-range-input-separator,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,input),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-date-range.pdx-inline-date-range-has-both :where(.mat-date-range-input-inner,.mat-date-range-input-separator,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,input),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled :where(.pdx-inline-entity-lookup.pdx-has-selection,.pdx-inline-multi-select.pdx-has-selection) .pdx-chip-trigger :where(.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled :where(.pdx-inline-range-chip.is-active,.pdx-inline-distance-chip.is-active,.pdx-inline-score-chip.is-active,.pdx-inline-relative-chip.is-active,.pdx-inline-relative-period-chip.is-active,.pdx-inline-rating-chip.is-active,.pdx-inline-pipeline-chip.is-active,.pdx-inline-sentiment-chip.is-active,.pdx-inline-color-label-chip.is-active) :where(.mat-icon,button,span),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-time-range-chip.is-active :where(.pdx-inline-time-range-icon,.pdx-inline-time-range-text,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-toggle-pill.is-active :where(.pdx-inline-toggle-label,.mat-icon){color:var(--pfx-filter-tag-on-color)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-chip-trigger.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-currency-range-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .mat-mdc-form-field.pdx-has-value .mat-mdc-text-field-wrapper,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-select .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-chip-trigger.is-active),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-searchable-select .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-chip-trigger.is-active),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-async-select.pdx-has-selection .mat-mdc-text-field-wrapper.mdc-text-field--outlined,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-date-range.pdx-inline-date-range-has-value .mat-mdc-text-field-wrapper.mdc-text-field--outlined,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-date-range.pdx-inline-date-range-has-both .mat-mdc-text-field-wrapper.mdc-text-field--outlined,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-entity-lookup.pdx-has-selection .pdx-chip-trigger,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-multi-select.pdx-has-selection .pdx-chip-trigger,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-range-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-distance-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-score-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-relative-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-relative-period-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-rating-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-pipeline-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-sentiment-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-color-label-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-time-range-chip.is-active,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-toggle-pill.is-active{--pdx-inline-currency-symbol-color: var(--pfx-filter-tag-outline-color);background:transparent!important;border-color:var(--pfx-filter-tag-outline-color)!important;box-shadow:inset 0 0 0 1px var(--pfx-filter-tag-outline-color);color:var(--pfx-filter-tag-outline-color)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-chip-trigger.is-active :where(.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-currency-range-chip.is-active :where(.mat-icon,.pdx-inline-currency-range-value,.pdx-inline-currency-range-text,.pdx-inline-currency-range-clear),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .mat-mdc-form-field.pdx-has-value :where(input,.mat-mdc-input-element,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,.pdx-inline-clear),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear) :where(input,.mat-mdc-input-element,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,.pdx-inline-clear,.pdx-inline-number-suffix),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined :where(.pdx-inline-select,.pdx-inline-searchable-select) .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-chip-trigger.is-active) :where(.mat-mdc-select-value,.mat-mdc-select-min-line,.mat-mdc-select-placeholder,.pdx-chip-trigger,.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-async-select.pdx-has-selection :where(.mat-mdc-select-value,.mat-mdc-select-min-line,.mat-mdc-select-placeholder,.pdx-chip-trigger,.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-date-range.pdx-inline-date-range-has-value :where(.mat-date-range-input-inner,.mat-date-range-input-separator,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,input),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-date-range.pdx-inline-date-range-has-both :where(.mat-date-range-input-inner,.mat-date-range-input-separator,.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix,.mat-icon,input),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined :where(.pdx-inline-entity-lookup.pdx-has-selection,.pdx-inline-multi-select.pdx-has-selection) .pdx-chip-trigger :where(.pdx-chip-field-icon,.pdx-chip-leading-icon,.pdx-chip-trailing-icon,.pdx-chip-label,.pdx-chip-count,.pdx-chip-clear,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined :where(.pdx-inline-range-chip.is-active,.pdx-inline-distance-chip.is-active,.pdx-inline-score-chip.is-active,.pdx-inline-relative-chip.is-active,.pdx-inline-relative-period-chip.is-active,.pdx-inline-rating-chip.is-active,.pdx-inline-pipeline-chip.is-active,.pdx-inline-sentiment-chip.is-active,.pdx-inline-color-label-chip.is-active) :where(.mat-icon,button,span),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-time-range-chip.is-active :where(.pdx-inline-time-range-icon,.pdx-inline-time-range-text,.mat-icon),:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-toggle-pill.is-active :where(.pdx-inline-toggle-label,.mat-icon){color:var(--pfx-filter-tag-outline-color)!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-chip-trigger.is-active,.mat-mdc-form-field.pdx-has-value,.pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear),.pdx-inline-currency-range-chip.is-active,.pdx-inline-range-chip.is-active,.pdx-inline-distance-chip.is-active,.pdx-inline-score-chip.is-active,.pdx-inline-relative-chip.is-active,.pdx-inline-relative-period-chip.is-active,.pdx-inline-rating-chip.is-active,.pdx-inline-pipeline-chip.is-active,.pdx-inline-sentiment-chip.is-active,.pdx-inline-color-label-chip.is-active,.pdx-inline-time-range-chip.is-active,.pdx-inline-toggle-pill.is-active) :where(.pdx-chip-clear,.pdx-inline-clear,.pdx-inline-currency-range-clear,.pdx-inline-range-clear,.pdx-inline-distance-clear,.pdx-inline-score-clear,.pdx-inline-relative-clear,.pdx-inline-rating-clear,.pdx-inline-pipeline-clear,.pdx-inline-sentiment-clear,.pdx-inline-color-label-clear,.pdx-inline-time-range-clear,.pdx-inline-toggle-clear){background:color-mix(in srgb,currentColor 16%,transparent)!important;border-radius:50%!important;color:inherit!important;display:inline-grid!important;flex:0 0 var(--pdx-inline-clear-size, 22px)!important;height:var(--pdx-inline-clear-size, 22px)!important;min-width:var(--pdx-inline-clear-size, 22px)!important;place-items:center!important;width:var(--pdx-inline-clear-size, 22px)!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-chip-trigger.is-active,.mat-mdc-form-field.pdx-has-value,.pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear),.pdx-inline-currency-range-chip.is-active,.pdx-inline-range-chip.is-active,.pdx-inline-distance-chip.is-active,.pdx-inline-score-chip.is-active,.pdx-inline-relative-chip.is-active,.pdx-inline-relative-period-chip.is-active,.pdx-inline-rating-chip.is-active,.pdx-inline-pipeline-chip.is-active,.pdx-inline-sentiment-chip.is-active,.pdx-inline-color-label-chip.is-active,.pdx-inline-time-range-chip.is-active,.pdx-inline-toggle-pill.is-active) :where(.pdx-chip-clear,.pdx-inline-clear,.pdx-inline-currency-range-clear,.pdx-inline-range-clear,.pdx-inline-distance-clear,.pdx-inline-score-clear,.pdx-inline-relative-clear,.pdx-inline-rating-clear,.pdx-inline-pipeline-clear,.pdx-inline-sentiment-clear,.pdx-inline-color-label-clear,.pdx-inline-time-range-clear,.pdx-inline-toggle-clear):hover{background:color-mix(in srgb,currentColor 24%,transparent)!important}:host ::ng-deep .praxis-filter-bar.has-compact :where(.pdx-chip-trigger.is-active,.mat-mdc-form-field.pdx-has-value,.pdx-inline-number .mat-mdc-text-field-wrapper.mdc-text-field--outlined:has(.pdx-inline-clear),.pdx-inline-currency-range-chip.is-active,.pdx-inline-range-chip.is-active,.pdx-inline-distance-chip.is-active,.pdx-inline-score-chip.is-active,.pdx-inline-relative-chip.is-active,.pdx-inline-relative-period-chip.is-active,.pdx-inline-rating-chip.is-active,.pdx-inline-pipeline-chip.is-active,.pdx-inline-sentiment-chip.is-active,.pdx-inline-color-label-chip.is-active,.pdx-inline-time-range-chip.is-active,.pdx-inline-toggle-pill.is-active) :where(.pdx-chip-clear,.pdx-inline-clear,.pdx-inline-currency-range-clear,.pdx-inline-range-clear,.pdx-inline-distance-clear,.pdx-inline-score-clear,.pdx-inline-relative-clear,.pdx-inline-rating-clear,.pdx-inline-pipeline-clear,.pdx-inline-sentiment-clear,.pdx-inline-color-label-clear,.pdx-inline-time-range-clear,.pdx-inline-toggle-clear) .mat-icon{color:var(--pdx-inline-clear-icon-color, currentColor)!important}:host ::ng-deep .praxis-filter-bar.has-compact .mat-mdc-form-field.pdx-has-value .pdx-inline-clear .mat-icon{color:var(--pdx-inline-clear-icon-color, currentColor)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .mat-mdc-form-field.pdx-has-value .pdx-inline-clear .mat-icon,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .mat-mdc-form-field.pdx-has-value .pdx-inline-clear .mat-icon{color:var(--pdx-inline-clear-icon-color, currentColor)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-number .mat-mdc-text-field-wrapper:has(.pdx-inline-clear) .pdx-inline-clear .mat-icon,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-number .mat-mdc-text-field-wrapper:has(.pdx-inline-clear) .pdx-inline-clear .mat-icon{color:var(--pdx-inline-clear-icon-color, currentColor)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-inline-toggle-pill.is-active .pdx-inline-toggle-clear .mat-icon,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-inline-toggle-pill.is-active .pdx-inline-toggle-clear .mat-icon{color:var(--pdx-inline-clear-icon-color, currentColor)!important}:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-filled .pdx-chip-trigger.is-active .pdx-chip-clear .mat-icon,:host ::ng-deep .praxis-filter-bar.has-compact.tag-variant-outlined .pdx-chip-trigger.is-active .pdx-chip-clear .mat-icon{color:var(--pdx-inline-clear-icon-color, currentColor)!important}.praxis-filter-tags.outlined .mat-mdc-chip{background:transparent!important;--mat-chip-outline-width: 1px;--mat-chip-outline-color: var(--md-sys-color-outline-variant);box-shadow:inset 0 0 0 var(--mat-chip-outline-width) var(--mat-chip-outline-color)}.praxis-filter-tags.outlined.tag-color-primary .mat-mdc-chip{--mat-chip-outline-color: var(--md-sys-color-primary)}.praxis-filter-tags.outlined.tag-color-accent .mat-mdc-chip{--mat-chip-outline-color: var(--md-sys-color-tertiary)}.praxis-filter-tags.outlined.tag-color-warn .mat-mdc-chip{--mat-chip-outline-color: var(--md-sys-color-error)}.praxis-filter-tags.outlined mat-chip.active .mat-mdc-chip,.praxis-filter-tags.outlined .mat-mdc-chip.mat-mdc-chip-highlighted{--mat-chip-outline-width: 2px;box-shadow:inset 0 0 0 var(--mat-chip-outline-width) var(--mat-chip-outline-color)!important}.praxis-filter-tags.outlined.tag-color-basic mat-chip.active .mat-mdc-chip{--mat-chip-outline-color: var(--md-sys-color-primary)}.praxis-filter-tags .mat-mdc-standard-chip .mdc-evolution-chip__text-label{display:flex;align-items:center;justify-content:center;gap:4px;line-height:1.2;font-size:.875rem}.praxis-filter-tags .chip-leading,.praxis-filter-tags .chip-trailing{display:inline-flex;align-items:center}.praxis-filter-tags .leading-check{width:18px;height:18px;font-size:18px;line-height:1}.praxis-filter-tags .chip-label{position:relative;top:-6px}.praxis-filter-tags .mat-mdc-standard-chip{--mat-chip-container-height: 36px}.praxis-filter-advanced{display:flex;flex-direction:column;min-width:400px;max-width:90vw;min-height:260px;max-height:min(80vh,720px);margin:var(--pfx-overlay-margin-y) var(--pfx-overlay-margin-x);background-color:var(--pfx-overlay-surface)!important;background:var(--pfx-overlay-surface)!important;color:var(--pfx-overlay-on-surface);border:1px solid var(--border-color);border-radius:12px;box-shadow:var(--md-sys-elevation-level3)}.advanced-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px var(--pfx-advanced-pad-x) 10px;border-bottom:1px solid var(--border-color);background:var(--pfx-overlay-surface)}.advanced-title-block{display:flex;flex-direction:column;gap:2px}.advanced-title{font-size:1rem;font-weight:600;color:var(--pfx-overlay-on-surface)}.advanced-subtitle{font-size:.85rem;color:var(--pfx-overlay-on-surface-variant)}.advanced-close{align-self:flex-start}.praxis-filter-overlay.mobile .praxis-filter-advanced{height:100vh;max-height:100vh;margin:0;border-radius:0}:host ::ng-deep .praxis-overlay-backdrop{background:var(--md-sys-color-scrim);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}:host ::ng-deep .praxis-filter-overlay.frosted .praxis-filter-advanced{background:var(--pfx-overlay-surface-variant)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-color:var(--border-color)}:host ::ng-deep .praxis-filter-overlay.frosted .advanced-header,:host ::ng-deep .praxis-filter-overlay.frosted .advanced-actions{background:var(--pfx-overlay-surface-variant)!important}.advanced-body{padding:12px var(--pfx-advanced-pad-x) 72px;overflow:auto;flex:1 1 auto;overscroll-behavior:contain}:host ::ng-deep .praxis-filter-advanced .praxis-filter-form .filter-row{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(var(--pfx-field-min),1fr));gap:var(--pfx-gap-y) var(--pfx-gap-x)}:host ::ng-deep .praxis-filter-advanced .praxis-filter-form .filter-column{min-width:0}:host ::ng-deep .praxis-filter-advanced .praxis-filter-form .filter-column .mat-mdc-form-field{width:100%}.advanced-actions{position:sticky;bottom:0;z-index:2;display:flex;justify-content:flex-end;gap:8px;padding:var(--pfx-gap-y) var(--pfx-advanced-pad-x);background-color:var(--pfx-overlay-surface)!important;background:var(--pfx-overlay-surface)!important;border-top:1px solid var(--border-color);box-shadow:0 -1px 0 var(--md-sys-color-outline-variant)}.advanced-actions .mat-mdc-button-base{height:40px}.advanced-actions .mat-mdc-raised-button.mat-primary{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}:host ::ng-deep .praxis-filter-advanced .mat-mdc-text-field-wrapper.mdc-text-field--outlined{--mdc-outlined-text-field-outline-color: var(--border-color);--mdc-outlined-text-field-hover-outline-color: var(--border-color-hover);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-label-text-color: var( --pfx-overlay-on-surface-variant );--mdc-outlined-text-field-input-text-color: var(--pfx-overlay-on-surface);--mdc-outlined-text-field-container-color: var(--pfx-overlay-surface)}:host ::ng-deep .praxis-filter-advanced .mat-mdc-select-trigger,:host ::ng-deep .praxis-filter-advanced .mat-mdc-form-field-subscript-wrapper,:host ::ng-deep .praxis-filter-advanced .mat-mdc-form-field-infix{color:var(--pfx-overlay-on-surface)}@container praxis-filter (min-width: 600px){.fields-grid{gap:6px 8px}:host ::ng-deep .praxis-filter-advanced .praxis-filter-form .filter-row{grid-template-columns:repeat(2,minmax(0,1fr))}}@container praxis-filter (max-width: 640px){.praxis-filter-bar.has-compact{grid-template-columns:minmax(0,1fr);align-items:start}.praxis-filter-bar.has-compact .compact-fields{grid-column:1;grid-row:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(132px,100%),1fr));align-items:start;justify-items:stretch;width:100%}.praxis-filter-bar.has-compact .query-auxiliary{grid-column:1;grid-row:2;justify-self:start;width:100%;height:auto;align-self:start}.praxis-filter-bar.has-compact .query-auxiliary .praxis-filter-tags{flex:0 1 auto;min-width:0;min-height:40px}.praxis-filter-bar.has-compact .query-auxiliary .praxis-filter-tags mat-chip-set,.praxis-filter-bar.has-compact .query-auxiliary .praxis-filter-tags mat-chip{max-width:100%}.praxis-filter-bar.has-compact .query-auxiliary .praxis-filter-tags mat-chip{min-height:44px}.praxis-filter-bar.has-compact .inline-actions .action-cluster{max-width:100%;min-height:44px;padding-block:0}:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields>.pfx-field-shell,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields>praxis-field-shell,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell-wrapper,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell-host{--pfx-field-shell-width: auto;--pfx-field-shell-field-width: auto;width:100%!important;max-width:100%!important}:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .mat-mdc-form-field,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .mat-mdc-text-field-wrapper,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-chip-trigger,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-range-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-currency-range-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-distance-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-score-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-relative-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-relative-period-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-rating-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-pipeline-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-sentiment-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-color-label-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-time-range-chip,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pdx-inline-toggle-pill{width:100%!important;max-width:100%!important;min-width:0!important}:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields pdx-inline-date-range{width:100%!important;max-width:100%!important;min-width:0!important}:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields pdx-inline-date-range .pdx-inline-date-range-root,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields pdx-inline-date-range .mat-mdc-form-field.pdx-inline-date-range{width:100%!important;max-width:100%!important;min-width:0!important}:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields :where(.pdx-chip-label,.pdx-chip-trigger,.pdx-inline-range-text,.pdx-inline-currency-range-text,.pdx-inline-distance-text,.pdx-inline-score-text,.pdx-inline-relative-text,.pdx-inline-relative-period-text,.pdx-inline-rating-text,.pdx-inline-pipeline-text,.pdx-inline-sentiment-text,.pdx-inline-color-label-text,.pdx-inline-time-range-text,.pdx-inline-toggle-label){min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell[data-control-type=inlineTime],:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell[data-control-type=inlineTime] .pfx-field-shell-wrapper,:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell[data-control-type=inlineTime] .pfx-field-shell-host{--pfx-field-shell-width: fit-content;--pfx-field-shell-field-width: var(--pdx-inline-time-field-w, auto);justify-self:start;width:fit-content!important;max-width:100%!important}:host ::ng-deep .praxis-filter-bar.has-compact .compact-fields .pfx-field-shell[data-control-type=inlineTime] .mat-mdc-form-field.pdx-inline-time{width:var(--pdx-inline-time-field-w, auto)!important;inline-size:var(--pdx-inline-time-field-w, auto)!important;max-width:min(var(--pdx-inline-time-max-w, 280px),100cqw - 24px)!important}}@container praxis-filter (min-width: 960px){.fields-grid{gap:6px 10px}}@container praxis-filter (min-width: 1200px){.fields-grid{grid-template-columns:repeat(auto-fit,minmax(var(--pfx-always-min, 220px),var(--pfx-always-max-desktop, 380px)));justify-content:start;align-content:start}:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=slider],:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=range-slider],:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=rangeSlider],:host ::ng-deep .fields-grid .pfx-field-shell[data-control-type=rangeslider]{grid-column:span var(--pfx-slider-span-desktop, 2)}}.inline-toggles{display:flex;align-items:center;gap:8px;margin:0 4px 0 6px}:host ::ng-deep .inline-actions .mat-mdc-slide-toggle{height:var(--pfx-filter-h);display:flex;align-items:center}:host ::ng-deep .inline-actions .mat-mdc-slide-toggle .mdc-form-field{align-items:center}::ng-deep .praxis-filter-overlay .praxis-filter-advanced .praxis-filter-form .filter-row{display:grid!important;gap:var(--pfx-gap-y, 1px) var(--pfx-gap-x, 6px)}@media(min-width:600px){::ng-deep .praxis-filter-overlay .praxis-filter-advanced .praxis-filter-form .filter-row{grid-template-columns:repeat(2,minmax(0,1fr))}}.sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}.hidden-submit{position:absolute!important;width:0!important;height:0!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;pointer-events:none!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;overflow:hidden!important}:host ::ng-deep .inline-actions [matBadge] .mat-badge-content{top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;font-size:10px;font-weight:700;line-height:16px;letter-spacing:0;text-indent:0;color:var(--md-sys-color-on-primary, #fff)}:host ::ng-deep .inline-actions [matBadge][matbadgecolor=warn] .mat-badge-content,:host ::ng-deep .inline-actions [matBadge].mat-badge-warn .mat-badge-content{color:var(--md-sys-color-on-error, #fff)}.praxis-filter-bar :where(.mat-mdc-slide-toggle .mdc-switch__icons){display:none!important}.praxis-filter-bar{--mdc-switch-unselected-icon-size: 0px;--mdc-switch-selected-icon-size: 0px;--pfx-always-min: 220px}.praxis-filter-card{display:flex;flex-direction:column;gap:6px;padding:8px 12px;border-radius:12px;border:1px solid var(--pfx-surface-border, var(--praxis-theme-outline, var(--md-sys-color-outline-variant)));background:var(--praxis-theme-surface-raised, var(--md-sys-color-surface-container));color:var(--praxis-theme-on-surface, var(--md-sys-color-on-surface))}.add-manager{--_pfx-field-manager-surface: var( --pfx-field-manager-surface, var( --praxis-theme-surface-overlay, var(--md-sys-color-surface-container-highest) ) );--_pfx-field-manager-on-surface: var( --pfx-field-manager-on-surface, var(--praxis-theme-on-surface, var(--md-sys-color-on-surface)) );--_pfx-field-manager-on-surface-muted: var( --pfx-field-manager-on-surface-muted, var(--praxis-theme-on-surface-muted, var(--md-sys-color-on-surface-variant)) );--_pfx-field-manager-outline: var( --pfx-field-manager-outline, var( --pdx-inline-field-outline, var(--praxis-theme-outline, var(--md-sys-color-outline-variant)) ) );--_pfx-field-manager-focus-outline: var( --pfx-field-manager-focus-outline, var( --pdx-inline-field-focus-outline, var(--praxis-theme-focus-outline, var(--md-sys-color-primary)) ) );--_pfx-field-manager-scrollbar-thumb: var( --pfx-field-manager-scrollbar-thumb, color-mix( in srgb, var(--_pfx-field-manager-on-surface) 42%, var(--_pfx-field-manager-surface) ) );--_pfx-field-manager-scrollbar-thumb-hover: var( --pfx-field-manager-scrollbar-thumb-hover, color-mix( in srgb, var(--_pfx-field-manager-on-surface) 64%, var(--_pfx-field-manager-surface) ) );--_pfx-field-manager-scrollbar-track: var( --pfx-field-manager-scrollbar-track, transparent );--_pfx-field-manager-scrollbar-size: var( --pfx-field-manager-scrollbar-size, 10px );display:flex;flex-direction:column;width:min(400px,100vw - 24px);max-height:min(70vh,560px);overflow:hidden;border:1px solid var(--_pfx-field-manager-outline);border-radius:var(--pfx-overlay-radius, 16px);background:var(--_pfx-field-manager-surface);color:var(--_pfx-field-manager-on-surface);box-shadow:var(--praxis-theme-elevation, var(--md-sys-elevation-level3))}.add-manager__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 16px 8px 20px}.add-manager__header h2{margin:0;font:var(--md-sys-typescale-title-medium)}.add-manager__header p{margin:4px 0 0;color:var(--_pfx-field-manager-on-surface-muted);font:var(--md-sys-typescale-body-small)}.add-manager__search{padding:8px 20px}.add-manager__bulk{padding:8px 20px;border-block:1px solid var(--_pfx-field-manager-outline)}.add-manager__list{display:flex;flex-direction:column;min-height:80px;overflow:auto;overscroll-behavior:contain;scrollbar-color:var(--_pfx-field-manager-scrollbar-thumb) var(--_pfx-field-manager-scrollbar-track);scrollbar-gutter:stable;scrollbar-width:auto;padding:4px 12px 12px}.add-manager__list::-webkit-scrollbar{width:var(--_pfx-field-manager-scrollbar-size);height:var(--_pfx-field-manager-scrollbar-size)}.add-manager__list::-webkit-scrollbar-track{background:var(--_pfx-field-manager-scrollbar-track)}.add-manager__list::-webkit-scrollbar-thumb{min-height:32px;border:2px solid transparent;border-radius:999px;background:var(--_pfx-field-manager-scrollbar-thumb);background-clip:padding-box}.add-manager__list::-webkit-scrollbar-thumb:hover{background:var(--_pfx-field-manager-scrollbar-thumb-hover);background-clip:padding-box}.add-manager__section+.add-manager__section{margin-top:8px;padding-top:8px;border-top:1px solid var(--_pfx-field-manager-outline)}.add-manager__section-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;padding:8px 8px 4px;color:var(--_pfx-field-manager-on-surface-muted);font:var(--md-sys-typescale-label-medium)}.add-manager__section-title span{color:var(--_pfx-field-manager-on-surface-muted);font:var(--md-sys-typescale-label-small);white-space:nowrap}.add-manager__item{display:flex;align-items:center;min-height:48px;padding-inline:8px;border-radius:var(--pfx-control-radius, 8px)}::ng-deep .add-manager__item .mdc-form-field{align-items:center}::ng-deep .add-manager__item .mdc-label{display:inline-flex;align-items:center;min-height:20px}.add-manager__item:hover{background:color-mix(in srgb,var(--_pfx-field-manager-on-surface) 6%,var(--_pfx-field-manager-surface))}.add-manager__item-info{width:16px;height:16px;margin-left:4px;vertical-align:text-bottom;color:var(--_pfx-field-manager-on-surface-muted);font-size:16px}.add-manager__item-pending{display:inline-flex;align-items:center;margin-left:8px;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--_pfx-field-manager-focus-outline) 14%,transparent);color:var(--_pfx-field-manager-on-surface-muted);font:var(--md-sys-typescale-label-small);white-space:nowrap}.add-manager__item--pending{background:color-mix(in srgb,var(--_pfx-field-manager-focus-outline) 8%,var(--_pfx-field-manager-surface))}.add-manager__section--selected .add-manager__item{box-shadow:inset 2px 0 color-mix(in srgb,var(--_pfx-field-manager-focus-outline) 56%,transparent)}.add-manager__item--added{animation:add-manager-item-added var(--md-sys-motion-duration-short4, .2s) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(.05, .7, .1, 1)) both}.add-manager__item--removed{animation:add-manager-item-removed var(--md-sys-motion-duration-short4, .2s) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(.05, .7, .1, 1)) both}@keyframes add-manager-item-added{0%{opacity:.72;background:color-mix(in srgb,var(--_pfx-field-manager-focus-outline) 24%,var(--_pfx-field-manager-surface))}to{opacity:1;background:color-mix(in srgb,var(--_pfx-field-manager-focus-outline) 8%,var(--_pfx-field-manager-surface))}}@keyframes add-manager-item-removed{0%{opacity:.72;background:color-mix(in srgb,var(--md-sys-color-surface-container-high) 72%,transparent)}to{opacity:1;background:color-mix(in srgb,var(--_pfx-field-manager-focus-outline) 8%,var(--_pfx-field-manager-surface))}}@media(prefers-reduced-motion:reduce){.add-manager__item--added,.add-manager__item--removed{animation:none}}.add-manager__empty{display:flex;align-items:center;justify-content:center;gap:8px;min-height:96px;padding:16px;color:var(--_pfx-field-manager-on-surface-muted);text-align:center}.add-manager__footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--_pfx-field-manager-outline);background:var(--_pfx-field-manager-surface)}.add-manager__notice{display:flex;align-items:flex-start;gap:8px;padding:10px 16px;font:var(--md-sys-typescale-body-small)}.add-manager__notice mat-icon{flex:0 0 auto}.add-manager__notice--warning{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.add-manager__notice--conflict{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}@media(max-width:600px){.add-manager{width:calc(100vw - 16px);max-height:min(78dvh,640px);border-radius:var(--pfx-overlay-radius, 16px)}.add-manager__header,.add-manager__search{padding-inline:16px}}.inline-actions .add-trigger{display:inline-flex;align-items:center;gap:6px;height:32px;width:100%;max-width:100%;min-width:0;padding:0 10px;border-radius:0;border:0;background:transparent;overflow:visible}.inline-actions .add-trigger--icon{justify-content:center;width:32px;min-width:32px;padding:0}:host ::ng-deep .inline-actions .add-trigger mat-icon{width:18px;height:18px;font-size:18px;flex:0 0 auto}.inline-actions .add-trigger-label{display:inline-block;flex:1 1 auto;min-width:0;max-width:100%;text-align:left;direction:ltr;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem;line-height:1}:host ::ng-deep .action-cluster--manage .mat-mdc-select{flex:0 0 auto;width:180px;min-width:0;max-width:180px}:host ::ng-deep .action-cluster--manage .cluster-select--hidden.mat-mdc-select{position:absolute;width:1px;min-width:1px;max-width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}:host ::ng-deep .action-cluster--manage .mat-mdc-select-trigger{min-height:32px;padding:0}:host ::ng-deep .action-cluster--manage .mat-mdc-select-value,:host ::ng-deep .action-cluster--manage .mat-mdc-select-value-text,:host ::ng-deep .action-cluster--manage .mat-mdc-select-min-line{width:auto;min-width:0;max-width:100%;display:inline-flex;align-items:center;justify-content:flex-start;overflow:visible}.praxis-filter-card .summary-header{display:flex;align-items:center;gap:10px}.praxis-filter-card .summary-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}.praxis-filter-card .summary-title{font-weight:600}.praxis-filter-card .summary-subtitle{opacity:.8;font-size:.875rem}.praxis-filter-card .summary-badges{display:flex;flex-wrap:wrap;gap:6px}.praxis-filter-card .summary-badges span{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;background:var(--md-sys-color-primary-container);border:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-primary-container);font-size:12px}.praxis-filter-card .card-actions{display:flex;gap:8px}:host ::ng-deep .inline-actions .mat-mdc-select-arrow-wrapper{display:none}.inline-actions .add-filter-btn{height:36px;border-radius:18px;padding:0 16px 0 12px}.inline-actions .add-filter-btn mat-icon{margin-right:8px;margin-left:-4px}\n"] }]
40468
41079
  }], ctorParameters: () => [{ type: i1.GenericCrudService }, { type: undefined, decorators: [{
40469
41080
  type: Inject,
40470
41081
  args: [ASYNC_CONFIG_STORAGE]
@@ -44321,7 +44932,7 @@ class PraxisTable {
44321
44932
  if (this.aiAdapter || this.aiAdapterLoadStarted)
44322
44933
  return;
44323
44934
  this.aiAdapterLoadStarted = true;
44324
- import('./praxisui-table-table-ai.adapter-BS7NAJiY.mjs')
44935
+ import('./praxisui-table-table-ai.adapter-CdBHVHMa.mjs')
44325
44936
  .then(({ TableAiAdapter }) => {
44326
44937
  if (!this.isAiAssistantEnabled()) {
44327
44938
  this.aiAssistantOpenAfterAdapterLoad = false;
@@ -45067,7 +45678,7 @@ class PraxisTable {
45067
45678
  initializeAiAssistantController() {
45068
45679
  if (!this.aiAdapter || this.aiAssistantController)
45069
45680
  return;
45070
- import('./praxisui-table-table-agentic-authoring-turn-flow-CtqlPxzU.mjs')
45681
+ import('./praxisui-table-table-agentic-authoring-turn-flow-Ktzr79Tw.mjs')
45071
45682
  .then(({ TableAgenticAuthoringTurnFlow }) => {
45072
45683
  if (this.aiAssistantController || !this.aiAdapter)
45073
45684
  return;