@hug/ngx-layout 22.0.0-alpha.4 → 22.0.0-alpha.5

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 (6) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/fesm2022/hug-ngx-layout-m2.mjs +6 -6
  3. package/fesm2022/hug-ngx-layout.mjs +129 -103
  4. package/fesm2022/hug-ngx-layout.mjs.map +1 -1
  5. package/package.json +3 -3
  6. package/types/hug-ngx-layout.d.ts +20 -4
package/fesm2022/hug-ngx-layout.mjs CHANGED
@@ -1,12 +1,12 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Injectable, signal, effect, computed, inject, contentChildren, ElementRef, viewChild, Renderer2, ChangeDetectionStrategy, ViewEncapsulation, Component, input, output, InjectionToken, TemplateRef, forwardRef, Directive, model, contentChild, afterRenderEffect, untracked } from '@angular/core';
2
+ import { Injectable, signal, effect, computed, inject, contentChildren, ElementRef, viewChild, Renderer2, ViewEncapsulation, ChangeDetectionStrategy, Component, input, output, Directive, InjectionToken, TemplateRef, forwardRef, model, contentChild, afterRenderEffect, untracked } from '@angular/core';
3
3
  import { MatIconButton } from '@angular/material/button';
4
4
  import { MatIcon } from '@angular/material/icon';
5
5
  import { MatMenu, MatMenuTrigger } from '@angular/material/menu';
6
6
  import { MatTooltip } from '@angular/material/tooltip';
7
7
  import { NgxAbstractIntl, provideNgxIntl } from '@hug/ngx-core';
8
- import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
9
8
  import { NgTemplateOutlet, LowerCasePipe } from '@angular/common';
9
+ import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
10
10
  import * as i1 from '@angular/forms';
11
11
  import { FormsModule, NgControl } from '@angular/forms';
12
12
  import { MatBadge } from '@angular/material/badge';
@@ -28,10 +28,10 @@ class NgxLayoutIntl extends NgxAbstractIntl {
28
28
  actives = '';
29
29
  reset = '';
30
30
  close = '';
31
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxLayoutIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
32
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxLayoutIntl });
31
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxLayoutIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
32
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxLayoutIntl });
33
33
  }
34
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxLayoutIntl, decorators: [{
34
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxLayoutIntl, decorators: [{
35
35
  type: Injectable
36
36
  }] });
37
37
 
@@ -53,7 +53,7 @@ const buttonDimensions = 40;
53
53
  * @param defaultSize
54
54
  */
55
55
  const resizeSignal$1 = (element, box = 'border-box') => {
56
- const value = signal(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
56
+ const value = signal(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
57
57
  effect(onCleanup => {
58
58
  const el = element()?.nativeElement;
59
59
  if (!el) {
@@ -81,19 +81,19 @@ class NgxActionsGroupComponent {
81
81
  hiddenActions = computed(() => {
82
82
  const maxVisible = this.getMaxVisibleAction(this.hostWidth());
83
83
  return this.iconButtons().slice(maxVisible);
84
- }, ...(ngDevMode ? [{ debugName: "hiddenActions" }] : []));
84
+ }, ...(ngDevMode ? [{ debugName: "hiddenActions" }] : /* istanbul ignore next */ []));
85
85
  intl = inject(NgxLayoutIntl, { optional: true });
86
- iconButtons = contentChildren(MatIconButton, { ...(ngDevMode ? { debugName: "iconButtons" } : {}), read: ElementRef });
86
+ iconButtons = contentChildren(MatIconButton, { ...(ngDevMode ? { debugName: "iconButtons" } : /* istanbul ignore next */ {}), read: ElementRef });
87
87
  container = viewChild.required('container');
88
88
  hiddenContainer = viewChild.required('hiddenContainer');
89
89
  hostElement = inject(ElementRef);
90
90
  renderer = inject(Renderer2);
91
91
  hostSize = resizeSignal$1(() => this.hostElement);
92
- hostWidth = computed(() => Math.ceil(this.hostSize()?.contentRect.width || 0), ...(ngDevMode ? [{ debugName: "hostWidth" }] : []));
92
+ hostWidth = computed(() => Math.ceil(this.hostSize()?.contentRect.width || 0), ...(ngDevMode ? [{ debugName: "hostWidth" }] : /* istanbul ignore next */ []));
93
93
  visibleActions = computed(() => {
94
94
  const maxVisible = this.getMaxVisibleAction(this.hostWidth());
95
95
  return this.iconButtons().slice(0, maxVisible);
96
- }, ...(ngDevMode ? [{ debugName: "visibleActions" }] : []));
96
+ }, ...(ngDevMode ? [{ debugName: "visibleActions" }] : /* istanbul ignore next */ []));
97
97
  constructor() {
98
98
  effect(() => {
99
99
  const buttons = this.iconButtons();
@@ -132,12 +132,12 @@ class NgxActionsGroupComponent {
132
132
  // -1 => Allows for the more button to be displayed
133
133
  return maxVisibleActions - 1;
134
134
  }
135
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxActionsGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
136
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: NgxActionsGroupComponent, isStandalone: true, selector: "ngx-actions-group", queries: [{ propertyName: "iconButtons", predicate: MatIconButton, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "hiddenContainer", first: true, predicate: ["hiddenContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #container class=\"container\">\n <ng-content></ng-content>\n @if (hiddenActions().length > 0) {\n <button\n matIconButton\n class=\"more-actions-button\"\n [matMenuTriggerFor]=\"menuActionsGroup\"\n matTooltip=\"{{ intl?.moreActions ?? 'More actions' }}\">\n <mat-icon>more_horiz</mat-icon>\n </button>\n }\n <mat-menu #menuActionsGroup=\"matMenu\" class=\"actions-group-menu\">\n <div #hiddenContainer></div>\n </mat-menu>\n</div>\n", styles: ["ngx-actions-group{display:flex;inline-size:100%;max-width:364px}ngx-actions-group .container{display:flex;inline-size:fit-content;align-items:center;gap:var(--ngx-actions-group-gap, .75rem);border-radius:var(--ngx-actions-group-radius, 2rem);padding:var(--ngx-actions-group-padding, .25rem);background-color:var(--mat-sys-surface-container-low);max-width:100%;box-sizing:border-box}ngx-actions-group .container .more-actions-button{order:999}.actions-group-menu.mat-mdc-menu-panel{padding:var(--ngx-actions-group-menu-padding, 0 .75rem)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
135
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxActionsGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
136
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: NgxActionsGroupComponent, isStandalone: true, selector: "ngx-actions-group", queries: [{ propertyName: "iconButtons", predicate: MatIconButton, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "hiddenContainer", first: true, predicate: ["hiddenContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #container class=\"container\">\n <ng-content></ng-content>\n @if (hiddenActions().length > 0) {\n <button\n matIconButton\n class=\"more-actions-button\"\n [matMenuTriggerFor]=\"menuActionsGroup\"\n matTooltip=\"{{ intl?.moreActions ?? 'More actions' }}\">\n <mat-icon>more_horiz</mat-icon>\n </button>\n }\n <mat-menu #menuActionsGroup=\"matMenu\" class=\"actions-group-menu\">\n <div #hiddenContainer></div>\n </mat-menu>\n</div>\n", styles: ["ngx-actions-group{display:flex;inline-size:100%;max-width:364px}ngx-actions-group .container{display:flex;inline-size:fit-content;align-items:center;gap:var(--ngx-actions-group-gap, .75rem);border-radius:var(--ngx-actions-group-radius, 2rem);padding:var(--ngx-actions-group-padding, .25rem);background-color:var(--mat-sys-surface-container-low);max-width:100%;box-sizing:border-box}ngx-actions-group .container .more-actions-button{order:999}.actions-group-menu.mat-mdc-menu-panel{padding:var(--ngx-actions-group-menu-padding, 0 .75rem)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
137
137
  }
138
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxActionsGroupComponent, decorators: [{
138
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxActionsGroupComponent, decorators: [{
139
139
  type: Component,
140
- args: [{ selector: 'ngx-actions-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
140
+ args: [{ selector: 'ngx-actions-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
141
141
  MatIcon,
142
142
  MatIconButton,
143
143
  MatTooltip,
@@ -147,11 +147,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
147
147
  }], ctorParameters: () => [], propDecorators: { iconButtons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MatIconButton), { ...{ read: ElementRef }, isSignal: true }] }], container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], hiddenContainer: [{ type: i0.ViewChild, args: ['hiddenContainer', { isSignal: true }] }] } });
148
148
 
149
149
  class NgxAppBarComponent {
150
- mode = input('standard', ...(ngDevMode ? [{ debugName: "mode" }] : []));
151
- title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
152
- subtitle = input(...(ngDevMode ? [undefined, { debugName: "subtitle" }] : []));
153
- helpUrl = input(...(ngDevMode ? [undefined, { debugName: "helpUrl" }] : []));
154
- withBackButton = input(false, ...(ngDevMode ? [{ debugName: "withBackButton" }] : []));
150
+ mode = input('standard', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
151
+ title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
152
+ subtitle = input(...(ngDevMode ? [undefined, { debugName: "subtitle" }] : /* istanbul ignore next */ []));
153
+ helpUrl = input(...(ngDevMode ? [undefined, { debugName: "helpUrl" }] : /* istanbul ignore next */ []));
154
+ withBackButton = input(false, ...(ngDevMode ? [{ debugName: "withBackButton" }] : /* istanbul ignore next */ []));
155
155
  goBack = output();
156
156
  intl = inject(NgxLayoutIntl, { optional: true });
157
157
  helpPopup;
@@ -170,30 +170,52 @@ class NgxAppBarComponent {
170
170
  triggerGoBack() {
171
171
  this.goBack.emit();
172
172
  }
173
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxAppBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
174
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: NgxAppBarComponent, isStandalone: true, selector: "ngx-app-bar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, helpUrl: { classPropertyName: "helpUrl", publicName: "helpUrl", isSignal: true, isRequired: false, transformFunction: null }, withBackButton: { classPropertyName: "withBackButton", publicName: "withBackButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { goBack: "goBack" }, host: { properties: { "class.condensed": "mode()===\"condensed\"" } }, ngImport: i0, template: "@if (withBackButton()) {\n <button matIconButton matTooltip=\"{{ intl?.back ?? 'Back' }}\" (click)=\"triggerGoBack()\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n}\n\n<header class=\"{{ mode() }}\">\n <h1 class=\"title\">{{ title() }}</h1>\n @if (subtitle()) {\n @if (mode() === 'condensed') {\n <mat-icon>chevron_right</mat-icon>\n }\n <h2 class=\"subtitle\">{{ subtitle() }}</h2>\n }\n</header>\n\n<section class=\"actions\">\n <ng-content />\n @if (helpUrl()) {\n <button matIconButton matTooltip=\"{{ intl?.help ?? 'Help' }}\" (click)=\"openHelp()\">\n <mat-icon>help</mat-icon>\n </button>\n }\n</section>\n", styles: ["ngx-app-bar{display:flex;flex-direction:row;align-items:center;min-height:var(--ngx-app-bar-min-height, 3.5rem);box-sizing:border-box;gap:var(--ngx-app-bar-gap, .25rem)}ngx-app-bar:has(.subtitle):has(:not(.condensed)){padding-block:var(--ngx-app-bar-with-subtitle-padding-block, .25rem)}ngx-app-bar header{color:var(--mat-sys-on-surface-variant)}ngx-app-bar header.condensed{display:flex;flex-direction:row;align-items:center;gap:var(--ngx-app-bar-condensed-gap, .5rem)}ngx-app-bar header.condensed mat-icon{color:var(--mat-sys-outline)}ngx-app-bar header .title,ngx-app-bar header .subtitle{margin:0;white-space:nowrap}ngx-app-bar header .title{font:var(--ngx-app-bar-title-font, var(--mat-sys-headline-medium));letter-spacing:var(--ngx-app-bar-title-letter-spacing, var(--mat-sys-headline-medium-tracking))}ngx-app-bar header .subtitle{font:var(--ngx-app-bar-subtitle-font, var(--mat-sys-headline-small));letter-spacing:var(--ngx-app-bar-subtitle-letter-spacing, var(--mat-sys-headline-small-tracking))}ngx-app-bar .actions{display:flex;justify-content:flex-end;flex-grow:1;gap:var(--ngx-app-bar-actions-gap, .5rem)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
173
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxAppBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
174
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: NgxAppBarComponent, isStandalone: true, selector: "ngx-app-bar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, helpUrl: { classPropertyName: "helpUrl", publicName: "helpUrl", isSignal: true, isRequired: false, transformFunction: null }, withBackButton: { classPropertyName: "withBackButton", publicName: "withBackButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { goBack: "goBack" }, host: { properties: { "class.condensed": "mode()===\"condensed\"" } }, ngImport: i0, template: "@if (withBackButton()) {\n <button matIconButton matTooltip=\"{{ intl?.back ?? 'Back' }}\" (click)=\"triggerGoBack()\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n}\n\n<header class=\"{{ mode() }}\">\n <h1 class=\"title\">{{ title() }}</h1>\n @if (subtitle()) {\n @if (mode() === 'condensed') {\n <mat-icon>chevron_right</mat-icon>\n }\n <h2 class=\"subtitle\">{{ subtitle() }}</h2>\n }\n</header>\n\n<section class=\"actions\">\n <ng-content />\n @if (helpUrl()) {\n <button matIconButton matTooltip=\"{{ intl?.help ?? 'Help' }}\" (click)=\"openHelp()\">\n <mat-icon>help</mat-icon>\n </button>\n }\n</section>\n", styles: [":host{display:flex;flex-direction:row;align-items:center;min-height:var(--ngx-app-bar-min-height, 3.5rem);box-sizing:border-box;gap:var(--ngx-app-bar-gap, .25rem);padding:var(--ngx-app-bar-padding, .25rem 1rem)}:host header{color:var(--mat-sys-on-surface-variant)}:host header.condensed{display:flex;flex-direction:row;align-items:center;gap:var(--ngx-app-bar-condensed-gap, .5rem)}:host header.condensed mat-icon{color:var(--mat-sys-outline)}:host header .title,:host header .subtitle{margin:0;white-space:nowrap}:host header .title{font:var(--ngx-app-bar-title-font, var(--mat-sys-headline-medium));letter-spacing:var(--ngx-app-bar-title-letter-spacing, var(--mat-sys-headline-medium-tracking))}:host header .subtitle{font:var(--ngx-app-bar-subtitle-font, var(--mat-sys-headline-small));letter-spacing:var(--ngx-app-bar-subtitle-letter-spacing, var(--mat-sys-headline-small-tracking))}:host .actions{display:flex;justify-content:flex-end;flex-grow:1;gap:var(--ngx-app-bar-actions-gap, .5rem)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
175
175
  }
176
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxAppBarComponent, decorators: [{
176
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxAppBarComponent, decorators: [{
177
177
  type: Component,
178
- args: [{ selector: 'ngx-app-bar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, MatIconButton, MatTooltip], host: {
178
+ args: [{ selector: 'ngx-app-bar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, MatIconButton, MatTooltip], host: {
179
179
  // eslint-disable-next-line @typescript-eslint/naming-convention
180
180
  '[class.condensed]': 'mode()==="condensed"'
181
- }, template: "@if (withBackButton()) {\n <button matIconButton matTooltip=\"{{ intl?.back ?? 'Back' }}\" (click)=\"triggerGoBack()\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n}\n\n<header class=\"{{ mode() }}\">\n <h1 class=\"title\">{{ title() }}</h1>\n @if (subtitle()) {\n @if (mode() === 'condensed') {\n <mat-icon>chevron_right</mat-icon>\n }\n <h2 class=\"subtitle\">{{ subtitle() }}</h2>\n }\n</header>\n\n<section class=\"actions\">\n <ng-content />\n @if (helpUrl()) {\n <button matIconButton matTooltip=\"{{ intl?.help ?? 'Help' }}\" (click)=\"openHelp()\">\n <mat-icon>help</mat-icon>\n </button>\n }\n</section>\n", styles: ["ngx-app-bar{display:flex;flex-direction:row;align-items:center;min-height:var(--ngx-app-bar-min-height, 3.5rem);box-sizing:border-box;gap:var(--ngx-app-bar-gap, .25rem)}ngx-app-bar:has(.subtitle):has(:not(.condensed)){padding-block:var(--ngx-app-bar-with-subtitle-padding-block, .25rem)}ngx-app-bar header{color:var(--mat-sys-on-surface-variant)}ngx-app-bar header.condensed{display:flex;flex-direction:row;align-items:center;gap:var(--ngx-app-bar-condensed-gap, .5rem)}ngx-app-bar header.condensed mat-icon{color:var(--mat-sys-outline)}ngx-app-bar header .title,ngx-app-bar header .subtitle{margin:0;white-space:nowrap}ngx-app-bar header .title{font:var(--ngx-app-bar-title-font, var(--mat-sys-headline-medium));letter-spacing:var(--ngx-app-bar-title-letter-spacing, var(--mat-sys-headline-medium-tracking))}ngx-app-bar header .subtitle{font:var(--ngx-app-bar-subtitle-font, var(--mat-sys-headline-small));letter-spacing:var(--ngx-app-bar-subtitle-letter-spacing, var(--mat-sys-headline-small-tracking))}ngx-app-bar .actions{display:flex;justify-content:flex-end;flex-grow:1;gap:var(--ngx-app-bar-actions-gap, .5rem)}\n"] }]
181
+ }, template: "@if (withBackButton()) {\n <button matIconButton matTooltip=\"{{ intl?.back ?? 'Back' }}\" (click)=\"triggerGoBack()\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n}\n\n<header class=\"{{ mode() }}\">\n <h1 class=\"title\">{{ title() }}</h1>\n @if (subtitle()) {\n @if (mode() === 'condensed') {\n <mat-icon>chevron_right</mat-icon>\n }\n <h2 class=\"subtitle\">{{ subtitle() }}</h2>\n }\n</header>\n\n<section class=\"actions\">\n <ng-content />\n @if (helpUrl()) {\n <button matIconButton matTooltip=\"{{ intl?.help ?? 'Help' }}\" (click)=\"openHelp()\">\n <mat-icon>help</mat-icon>\n </button>\n }\n</section>\n", styles: [":host{display:flex;flex-direction:row;align-items:center;min-height:var(--ngx-app-bar-min-height, 3.5rem);box-sizing:border-box;gap:var(--ngx-app-bar-gap, .25rem);padding:var(--ngx-app-bar-padding, .25rem 1rem)}:host header{color:var(--mat-sys-on-surface-variant)}:host header.condensed{display:flex;flex-direction:row;align-items:center;gap:var(--ngx-app-bar-condensed-gap, .5rem)}:host header.condensed mat-icon{color:var(--mat-sys-outline)}:host header .title,:host header .subtitle{margin:0;white-space:nowrap}:host header .title{font:var(--ngx-app-bar-title-font, var(--mat-sys-headline-medium));letter-spacing:var(--ngx-app-bar-title-letter-spacing, var(--mat-sys-headline-medium-tracking))}:host header .subtitle{font:var(--ngx-app-bar-subtitle-font, var(--mat-sys-headline-small));letter-spacing:var(--ngx-app-bar-subtitle-letter-spacing, var(--mat-sys-headline-small-tracking))}:host .actions{display:flex;justify-content:flex-end;flex-grow:1;gap:var(--ngx-app-bar-actions-gap, .5rem)}\n"] }]
182
182
  }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], helpUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpUrl", required: false }] }], withBackButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "withBackButton", required: false }] }], goBack: [{ type: i0.Output, args: ["goBack"] }] } });
183
183
 
184
+ class NgxColumnComponent {
185
+ contentPadding = input(undefined, ...(ngDevMode ? [{ debugName: "contentPadding" }] : /* istanbul ignore next */ []));
186
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
187
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: NgxColumnComponent, isStandalone: true, selector: "ngx-column", inputs: { contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-content select=\"ngx-column-bar\"></ng-content>\n<section class=\"content\" [class.no-padding]=\"contentPadding() === 'none'\">\n <ng-content></ng-content>\n</section>\n", styles: [":host{flex:1;display:flex;flex-direction:column;box-sizing:border-box;block-size:100%;min-width:min-content;position:relative;overflow:visible}:host .content{overflow:auto;display:flex;flex-direction:column;gap:var(--ngx-column-content-gap, .5rem);padding:var(--ngx-column-content-padding, .25rem .5rem);flex:1}:host .content.no-padding{padding:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
188
+ }
189
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxColumnComponent, decorators: [{
190
+ type: Component,
191
+ args: [{ selector: 'ngx-column', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"ngx-column-bar\"></ng-content>\n<section class=\"content\" [class.no-padding]=\"contentPadding() === 'none'\">\n <ng-content></ng-content>\n</section>\n", styles: [":host{flex:1;display:flex;flex-direction:column;box-sizing:border-box;block-size:100%;min-width:min-content;position:relative;overflow:visible}:host .content{overflow:auto;display:flex;flex-direction:column;gap:var(--ngx-column-content-gap, .5rem);padding:var(--ngx-column-content-padding, .25rem .5rem);flex:1}:host .content.no-padding{padding:0}\n"] }]
192
+ }], propDecorators: { contentPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPadding", required: false }] }] } });
193
+
194
+ class NgxBarTitleDirective {
195
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxBarTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
196
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: NgxBarTitleDirective, isStandalone: true, selector: "h2[ngxBarTitle], h3[ngxBarTitle], h4[ngxBarTitle], h5[ngxBarTitle], h6[ngxBarTitle]", ngImport: i0 });
197
+ }
198
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxBarTitleDirective, decorators: [{
199
+ type: Directive,
200
+ args: [{
201
+ selector: 'h2[ngxBarTitle], h3[ngxBarTitle], h4[ngxBarTitle], h5[ngxBarTitle], h6[ngxBarTitle]',
202
+ standalone: true
203
+ }]
204
+ }] });
205
+
184
206
  // eslint-disable-next-line @typescript-eslint/naming-convention
185
207
  const FILTER_TOKEN = new InjectionToken('FILTER_TOKEN');
186
208
 
187
209
  class NgxFilterDirective {
188
210
  type = 'complex';
189
- label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
190
- active = input.required(...(ngDevMode ? [{ debugName: "active" }] : []));
191
- selectedFilterLabel = input('', ...(ngDevMode ? [{ debugName: "selectedFilterLabel" }] : []));
211
+ label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
212
+ active = input.required(...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
213
+ selectedFilterLabel = input('', ...(ngDevMode ? [{ debugName: "selectedFilterLabel" }] : /* istanbul ignore next */ []));
192
214
  templateRef = inject(TemplateRef);
193
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
194
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: NgxFilterDirective, isStandalone: true, selector: "ng-template[ngx-filter]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, selectedFilterLabel: { classPropertyName: "selectedFilterLabel", publicName: "selectedFilterLabel", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: FILTER_TOKEN, useExisting: forwardRef(() => NgxFilterDirective) }], ngImport: i0 });
215
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
216
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.6", type: NgxFilterDirective, isStandalone: true, selector: "ng-template[ngx-filter]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, selectedFilterLabel: { classPropertyName: "selectedFilterLabel", publicName: "selectedFilterLabel", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: FILTER_TOKEN, useExisting: forwardRef(() => NgxFilterDirective) }], ngImport: i0 });
195
217
  }
196
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxFilterDirective, decorators: [{
218
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxFilterDirective, decorators: [{
197
219
  type: Directive,
198
220
  args: [{
199
221
  selector: 'ng-template[ngx-filter]',
@@ -204,12 +226,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
204
226
 
205
227
  class NgxFilterToggleDirective {
206
228
  type = 'toggle';
207
- label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
208
- active = model.required(...(ngDevMode ? [{ debugName: "active" }] : []));
209
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxFilterToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
210
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: NgxFilterToggleDirective, isStandalone: true, selector: "ng-template[ngx-filter-toggle]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { active: "activeChange" }, providers: [{ provide: FILTER_TOKEN, useExisting: forwardRef(() => NgxFilterToggleDirective) }], ngImport: i0 });
229
+ label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
230
+ active = model.required(...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
231
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxFilterToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
232
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.6", type: NgxFilterToggleDirective, isStandalone: true, selector: "ng-template[ngx-filter-toggle]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { active: "activeChange" }, providers: [{ provide: FILTER_TOKEN, useExisting: forwardRef(() => NgxFilterToggleDirective) }], ngImport: i0 });
211
233
  }
212
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxFilterToggleDirective, decorators: [{
234
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxFilterToggleDirective, decorators: [{
213
235
  type: Directive,
214
236
  args: [{
215
237
  selector: 'ng-template[ngx-filter-toggle]',
@@ -219,7 +241,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
219
241
  }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }, { type: i0.Output, args: ["activeChange"] }] } });
220
242
 
221
243
  const resizeSignal = (element, box = 'border-box') => {
222
- const value = signal(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
244
+ const value = signal(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
223
245
  effect(onCleanup => {
224
246
  const el = element()?.nativeElement;
225
247
  if (!el) {
@@ -245,13 +267,13 @@ const resizeSignal = (element, box = 'border-box') => {
245
267
  };
246
268
  class NgxFiltersGroupComponent {
247
269
  resetFilters = output();
248
- folded = input(...(ngDevMode ? [undefined, { debugName: "folded" }] : []));
270
+ folded = input(...(ngDevMode ? [undefined, { debugName: "folded" }] : /* istanbul ignore next */ []));
249
271
  intl = inject(NgxLayoutIntl, { optional: true });
250
272
  // #region Overlay
251
- overlayOrigin = signal(undefined, ...(ngDevMode ? [{ debugName: "overlayOrigin" }] : []));
252
- overlayContent = signal(undefined, ...(ngDevMode ? [{ debugName: "overlayContent" }] : []));
253
- overlayOpen = signal(false, ...(ngDevMode ? [{ debugName: "overlayOpen" }] : []));
254
- moreFiltersOverlay = signal(false, ...(ngDevMode ? [{ debugName: "moreFiltersOverlay" }] : []));
273
+ overlayOrigin = signal(undefined, ...(ngDevMode ? [{ debugName: "overlayOrigin" }] : /* istanbul ignore next */ []));
274
+ overlayContent = signal(undefined, ...(ngDevMode ? [{ debugName: "overlayContent" }] : /* istanbul ignore next */ []));
275
+ overlayOpen = signal(false, ...(ngDevMode ? [{ debugName: "overlayOpen" }] : /* istanbul ignore next */ []));
276
+ moreFiltersOverlay = signal(false, ...(ngDevMode ? [{ debugName: "moreFiltersOverlay" }] : /* istanbul ignore next */ []));
255
277
  overlayPositions = [{
256
278
  originX: 'center',
257
279
  originY: 'bottom',
@@ -267,39 +289,39 @@ class NgxFiltersGroupComponent {
267
289
  }];
268
290
  // #endregion
269
291
  // #region Filters
270
- allFilters = contentChildren(FILTER_TOKEN, ...(ngDevMode ? [{ debugName: "allFilters" }] : []));
271
- activeFiltersAmount = computed(() => this.invisibleFilters().filter(filter => filter.active()).length, ...(ngDevMode ? [{ debugName: "activeFiltersAmount" }] : []));
292
+ allFilters = contentChildren(FILTER_TOKEN, ...(ngDevMode ? [{ debugName: "allFilters" }] : /* istanbul ignore next */ []));
293
+ activeFiltersAmount = computed(() => this.invisibleFilters().filter(filter => filter.active()).length, ...(ngDevMode ? [{ debugName: "activeFiltersAmount" }] : /* istanbul ignore next */ []));
272
294
  visibleFilters = computed(() => {
273
295
  const lastFittingIndex = this.lastFittingIndex();
274
296
  if (lastFittingIndex < 0) {
275
297
  return [];
276
298
  }
277
299
  return this.allFilters().slice(0, lastFittingIndex);
278
- }, ...(ngDevMode ? [{ debugName: "visibleFilters" }] : []));
300
+ }, ...(ngDevMode ? [{ debugName: "visibleFilters" }] : /* istanbul ignore next */ []));
279
301
  invisibleFilters = computed(() => {
280
302
  const lastFittingIndex = this.lastFittingIndex();
281
303
  if (lastFittingIndex < 0) {
282
304
  return this.allFilters();
283
305
  }
284
306
  return this.allFilters().slice(lastFittingIndex);
285
- }, ...(ngDevMode ? [{ debugName: "invisibleFilters" }] : []));
307
+ }, ...(ngDevMode ? [{ debugName: "invisibleFilters" }] : /* istanbul ignore next */ []));
286
308
  filterContainerRef = viewChild.required('container');
287
- filterContainerPadding = computed(() => Number.parseFloat(globalThis.getComputedStyle(this.filterContainerRef().nativeElement).paddingInline), ...(ngDevMode ? [{ debugName: "filterContainerPadding" }] : []));
309
+ filterContainerPadding = computed(() => Number.parseFloat(globalThis.getComputedStyle(this.filterContainerRef().nativeElement).paddingInline), ...(ngDevMode ? [{ debugName: "filterContainerPadding" }] : /* istanbul ignore next */ []));
288
310
  // #endregion
289
311
  // #region Host
290
312
  hostElement = inject(ElementRef);
291
313
  hostSize = resizeSignal(() => this.hostElement);
292
- hostWidth = computed(() => Math.ceil(this.hostSize()?.contentRect.width || 0), ...(ngDevMode ? [{ debugName: "hostWidth" }] : []));
314
+ hostWidth = computed(() => Math.ceil(this.hostSize()?.contentRect.width || 0), ...(ngDevMode ? [{ debugName: "hostWidth" }] : /* istanbul ignore next */ []));
293
315
  // #endregion
294
316
  // #region MeasureRow
295
- measureRowRef = viewChild('measureRow', ...(ngDevMode ? [{ debugName: "measureRowRef" }] : []));
317
+ measureRowRef = viewChild('measureRow', ...(ngDevMode ? [{ debugName: "measureRowRef" }] : /* istanbul ignore next */ []));
296
318
  measureRowSize = resizeSignal(() => this.measureRowRef());
297
- measureRowWidth = computed(() => Math.ceil(this.measureRowSize()?.contentRect.width || 0), ...(ngDevMode ? [{ debugName: "measureRowWidth" }] : []));
319
+ measureRowWidth = computed(() => Math.ceil(this.measureRowSize()?.contentRect.width || 0), ...(ngDevMode ? [{ debugName: "measureRowWidth" }] : /* istanbul ignore next */ []));
298
320
  // #endregion
299
321
  // #region StaticFields
300
- staticFieldsRef = viewChild('static', ...(ngDevMode ? [{ debugName: "staticFieldsRef" }] : []));
322
+ staticFieldsRef = viewChild('static', ...(ngDevMode ? [{ debugName: "staticFieldsRef" }] : /* istanbul ignore next */ []));
301
323
  staticFieldsSize = resizeSignal(() => this.staticFieldsRef());
302
- staticFieldsWidth = computed(() => Math.ceil(this.staticFieldsSize()?.contentRect.width || 0), ...(ngDevMode ? [{ debugName: "staticFieldsWidth" }] : []));
324
+ staticFieldsWidth = computed(() => Math.ceil(this.staticFieldsSize()?.contentRect.width || 0), ...(ngDevMode ? [{ debugName: "staticFieldsWidth" }] : /* istanbul ignore next */ []));
303
325
  // #endregion
304
326
  lastFittingIndex = computed(() => {
305
327
  const hostWidth = this.hostWidth();
@@ -312,7 +334,7 @@ class NgxFiltersGroupComponent {
312
334
  return filters.length;
313
335
  }
314
336
  return this.getLastFittingIndex(availableSpace, filters);
315
- }, ...(ngDevMode ? [{ debugName: "lastFittingIndex" }] : []));
337
+ }, ...(ngDevMode ? [{ debugName: "lastFittingIndex" }] : /* istanbul ignore next */ []));
316
338
  emitResetClicked() {
317
339
  this.resetFilters.emit();
318
340
  }
@@ -328,12 +350,12 @@ class NgxFiltersGroupComponent {
328
350
  });
329
351
  return lastFittingIndex >= 0 ? lastFittingIndex : elements.length - 1;
330
352
  }
331
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxFiltersGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
332
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: NgxFiltersGroupComponent, isStandalone: true, selector: "ngx-filters-group", inputs: { folded: { classPropertyName: "folded", publicName: "folded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resetFilters: "resetFilters" }, queries: [{ propertyName: "allFilters", predicate: FILTER_TOKEN, isSignal: true }], viewQueries: [{ propertyName: "filterContainerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "measureRowRef", first: true, predicate: ["measureRow"], descendants: true, isSignal: true }, { propertyName: "staticFieldsRef", first: true, predicate: ["static"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (folded()) {\n <section\n class=\"filter-container\"\n #container\n [matBadge]=\"activeFiltersAmount()\"\n [matBadgeHidden]=\"activeFiltersAmount() <= 0\">\n <button\n mat-icon-button\n aria-label=\"All filters\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n (click)=\"\n this.overlayOrigin.set(trigger);\n this.overlayContent.set(moreFilters);\n this.overlayOpen.set(true);\n this.moreFiltersOverlay.set(true)\n \"\n matTooltip=\"{{ intl?.allFilters ?? 'All filters' }}\">\n <mat-icon>filter_alt</mat-icon>\n </button>\n </section>\n} @else {\n @if (allFilters()) {\n <section #measureRow class=\"measure-row\">\n <mat-chip-set>\n @for (f of allFilters(); track $index) {\n <mat-chip-option [selectable]=\"false\" [selected]=\"f.active()\">\n {{ f.label() }}\n @if (f.type === 'complex' && f.selectedFilterLabel()) {\n <span class=\"selected-label\">: {{ f.selectedFilterLabel() }}</span>\n }\n @if (f.type === 'complex') {\n <mat-icon matChipTrailingIcon>arrow_drop_down</mat-icon>\n }\n </mat-chip-option>\n }\n <mat-chip #overflowMeasure>\n +00 {{ intl?.filters ?? 'Filters' | lowercase }} (00 {{ intl?.actives ?? 'Actives' | lowercase }})\n <mat-icon matChipTrailingIcon>arrow_drop_down</mat-icon>\n </mat-chip>\n </mat-chip-set>\n </section>\n }\n\n <section class=\"filter-container\" #container>\n <mat-chip-set>\n @if (this.visibleFilters().length) {\n @for (f of visibleFilters(); track $index) {\n @if (f.type === 'toggle') {\n <mat-chip-option\n selectable=\"true\"\n [selected]=\"f.active()\"\n (selectionChange)=\"f.active.set($event.selected)\">\n {{ f.label() }}\n </mat-chip-option>\n } @else {\n <mat-chip-option\n [selectable]=\"false\"\n [selected]=\"f.active()\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n (click)=\"\n this.overlayOrigin.set(trigger);\n this.overlayContent.set(f.templateRef);\n this.overlayOpen.set(true);\n this.moreFiltersOverlay.set(false)\n \">\n {{ f.label() }}\n @if (f.selectedFilterLabel()) {\n <span class=\"selected-label\">: {{ f.selectedFilterLabel() }}</span>\n }\n <mat-icon\n [class.is-overlay-open]=\"this.overlayOpen() && this.overlayContent() === f.templateRef\"\n matChipTrailingIcon>\n arrow_drop_down\n </mat-icon>\n </mat-chip-option>\n }\n }\n }\n </mat-chip-set>\n <section class=\"static\" #static>\n @if (invisibleFilters().length; as invisibleFiltersAmount) {\n <mat-chip-set>\n <mat-chip\n cdkOverlayOrigin\n [class.filter-active]=\"activeFiltersAmount()\"\n #trigger=\"cdkOverlayOrigin\"\n (click)=\"\n this.overlayOrigin.set(trigger);\n this.overlayContent.set(moreFilters);\n this.overlayOpen.set(true);\n this.moreFiltersOverlay.set(true)\n \">\n +{{ invisibleFiltersAmount }} {{ intl?.filters ?? 'Filters' | lowercase }} ({{\n activeFiltersAmount()\n }}\n {{ intl?.actives ?? 'Actives' | lowercase }})\n <mat-icon\n [class.is-overlay-open]=\"this.overlayOpen() && this.overlayContent() === moreFilters\"\n matChipTrailingIcon>\n arrow_drop_down\n </mat-icon>\n </mat-chip>\n </mat-chip-set>\n }\n <button\n mat-icon-button\n aria-label=\"Reset filters\"\n (click)=\"emitResetClicked()\"\n matTooltip=\"{{ intl?.reset ?? 'Reset' }}\">\n <mat-icon>settings_backup_restore</mat-icon>\n </button>\n </section>\n </section>\n}\n\n<ng-template #moreFilters>\n @if (allFilters()) {\n @for (f of allFilters(); track $index) {\n @if (f.type === 'toggle') {\n <section class=\"filter\">\n <mat-slide-toggle labelPosition=\"before\" [(ngModel)]=\"f.active\">\n {{ f.label() }}\n </mat-slide-toggle>\n </section>\n } @else {\n <section class=\"filter\">\n <div class=\"title\">\n <span class=\"label\">{{ f.label() }}</span>\n <span class=\"value\">{{ f.selectedFilterLabel() }}</span>\n </div>\n @if (f.templateRef) {\n <ng-container *ngTemplateOutlet=\"f.templateRef\"></ng-container>\n }\n </section>\n }\n }\n }\n</ng-template>\n\n@let overlayOrigin = this.overlayOrigin();\n@let overlayOpen = this.overlayOpen();\n@let overlayContent = this.overlayContent();\n@if (overlayOrigin && overlayOpen && overlayContent) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"overlayOpen\"\n (detach)=\"this.overlayOpen.set(false)\"\n cdkConnectedOverlayHasBackdrop=\"true\"\n backdrop\n (backdropClick)=\"this.overlayOpen.set(false)\"\n cdkConnectedOverlayPanelClass=\"filter-group--overlay\"\n cdkConnectedOverlayBackdropClass=\"filter-group--overlay--backdrop--transparent\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayViewportMargin]=\"32\">\n @if (moreFiltersOverlay()) {\n <div class=\"filters--title\">\n <span>{{ intl?.filters ?? 'Filters' }}</span>\n <button\n mat-icon-button\n aria-label=\"Reset filters\"\n (click)=\"emitResetClicked()\"\n matTooltip=\"{{ intl?.reset ?? 'Reset' }}\">\n <mat-icon>settings_backup_restore</mat-icon>\n </button>\n </div>\n }\n <div class=\"filters--content\">\n <ng-container *ngTemplateOutlet=\"overlayContent\"></ng-container>\n </div>\n </ng-template>\n}\n", styles: ["ngx-filters-group{flex:1;display:flex;flex-direction:row;justify-content:end}ngx-filters-group .selected-label{max-width:var(--ngx-filters-group-selected-label-max-width, 27ch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}ngx-filters-group .measure-row{display:flex;flex-direction:row;gap:var(--ngx-filters-group-gap, .5rem);position:absolute;visibility:hidden;pointer-events:none}ngx-filters-group .filter-container{display:flex;flex-direction:row;align-items:center;gap:var(--ngx-filters-group-gap, .5rem);block-size:var(--ngx-filters-group-block-size, 3rem);border-radius:var(--ngx-filters-group-border-radius, 2rem);padding-inline:var(--ngx-filters-group-padding-inline, .5rem);background-color:var(--mat-sys-surface-container-low)}ngx-filters-group .filter-container .static{display:flex;flex-direction:row;gap:var(--ngx-filters-group-static-gap, .5rem)}ngx-filters-group .filter-container .static mat-chip:first-child{--mat-chip-container-shape-radius: var(--ngx-filters-group-first-chip-shape-radius, .5rem)}ngx-filters-group .filter-container .static mat-chip.filter-active{--mat-chip-elevated-container-color: var(--mat-sys-secondary-container);--mat-chip-outline-color: transparent}ngx-filters-group .filter-container mat-chip-set>div{flex-wrap:nowrap}ngx-filters-group .filter-container mat-chip,ngx-filters-group .filter-container mat-chip-option{min-width:0}ngx-filters-group .filter-container mat-chip:first-child,ngx-filters-group .filter-container mat-chip-option:first-child{--mat-chip-container-shape-radius: var(--ngx-filters-group-first-chip-option-shape-radius, 1rem .5rem .5rem 1rem)}ngx-filters-group .filter-container mat-chip .mat-mdc-chip-action-label,ngx-filters-group .filter-container mat-chip-option .mat-mdc-chip-action-label{display:flex;align-items:center}ngx-filters-group .filter-container mat-chip .is-overlay-open,ngx-filters-group .filter-container mat-chip-option .is-overlay-open{transform:rotate(180deg)}ngx-filters-group .filter-container:has(>button:only-of-type){padding-inline:var(--ngx-filters-group-folded-padding-inline, .25rem)}.filter-group--overlay{display:flex;flex-direction:column;background-color:var(--mat-sys-surface-container-high);border-radius:var(--ngx-filters-group-overlay-border-radius, .5rem);overflow:hidden}.filter-group--overlay mat-slide-toggle>*{width:100%;justify-content:space-between}.filter-group--overlay mat-slide-toggle>* label{margin:0}.filter-group--overlay .filters--title{font:var(--mat-sys-title-medium);letter-spacing:var(--mat-sys-title-medium-tracking);color:var(--mat-sys-on-surface-variant);border-block-end:1px solid var(--mat-sys-outline-variant);display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding-inline:var(--ngx-filters-group-overlay-title-padding-inline, 1rem);padding-block:calc(var(--ngx-filters-group-overlay-title-padding-block, 1rem) / 4)}.filter-group--overlay .filters--content{min-width:18.75rem;overflow:auto;display:flex;flex-direction:column;justify-items:stretch;gap:var(--ngx-filters-group-overlay-content-gap, .5rem);padding:var(--ngx-filters-group-overlay-filter-padding, 1rem)}.filter-group--overlay .filters--content .filter{display:flex;flex-direction:column;gap:var(--ngx-filters-group-overlay-content-filter-gap, .5rem);padding-block:var(--ngx-filters-group-overlay-filter-padding, 1rem)}.filter-group--overlay .filters--content .filter:not(:last-child){border-bottom:1px dashed var(--mat-sys-outline-variant)}.filter-group--overlay .filters--content .filter:last-child{padding-block-end:unset}.filter-group--overlay .filters--content .filter:first-child{padding-block-start:unset}.filter-group--overlay .filters--content .filter .title{display:inline-flex;justify-content:space-between;align-items:baseline}.filter-group--overlay .filters--content .filter .title .label{font:var(--mat-sys-label-large)}.filter-group--overlay .filters--content .filter .title .value{font:var(--mat-sys-label-medium);max-width:var(--ngx-filters-group-title-overlay-max-width, 27ch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filter-group--overlay .filters--content .filter>[no-padding]{margin-inline:-1rem}.filter-group--overlay--backdrop--transparent{background-color:transparent}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: 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: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 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: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
353
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxFiltersGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
354
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: NgxFiltersGroupComponent, isStandalone: true, selector: "ngx-filters-group", inputs: { folded: { classPropertyName: "folded", publicName: "folded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resetFilters: "resetFilters" }, queries: [{ propertyName: "allFilters", predicate: FILTER_TOKEN, isSignal: true }], viewQueries: [{ propertyName: "filterContainerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "measureRowRef", first: true, predicate: ["measureRow"], descendants: true, isSignal: true }, { propertyName: "staticFieldsRef", first: true, predicate: ["static"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (folded()) {\n <section\n class=\"filter-container\"\n #container\n [matBadge]=\"activeFiltersAmount()\"\n [matBadgeHidden]=\"activeFiltersAmount() <= 0\">\n <button\n mat-icon-button\n aria-label=\"All filters\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n (click)=\"\n this.overlayOrigin.set(trigger);\n this.overlayContent.set(moreFilters);\n this.overlayOpen.set(true);\n this.moreFiltersOverlay.set(true)\n \"\n matTooltip=\"{{ intl?.allFilters ?? 'All filters' }}\">\n <mat-icon>filter_alt</mat-icon>\n </button>\n </section>\n} @else {\n @if (allFilters()) {\n <section #measureRow class=\"measure-row\">\n <mat-chip-set>\n @for (f of allFilters(); track $index) {\n <mat-chip-option [selectable]=\"false\" [selected]=\"f.active()\">\n {{ f.label() }}\n @if (f.type === 'complex' && f.selectedFilterLabel()) {\n <span class=\"selected-label\">: {{ f.selectedFilterLabel() }}</span>\n }\n @if (f.type === 'complex') {\n <mat-icon matChipTrailingIcon>arrow_drop_down</mat-icon>\n }\n </mat-chip-option>\n }\n <mat-chip #overflowMeasure>\n +00 {{ intl?.filters ?? 'Filters' | lowercase }} (00 {{ intl?.actives ?? 'Actives' | lowercase }})\n <mat-icon matChipTrailingIcon>arrow_drop_down</mat-icon>\n </mat-chip>\n </mat-chip-set>\n </section>\n }\n\n <section class=\"filter-container\" #container>\n @if (this.visibleFilters().length) {\n <mat-chip-set>\n @for (f of visibleFilters(); track $index) {\n @if (f.type === 'toggle') {\n <mat-chip-option\n selectable=\"true\"\n [selected]=\"f.active()\"\n (selectionChange)=\"f.active.set($event.selected)\">\n {{ f.label() }}\n </mat-chip-option>\n } @else {\n <mat-chip-option\n [selectable]=\"false\"\n [selected]=\"f.active()\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n (click)=\"\n this.overlayOrigin.set(trigger);\n this.overlayContent.set(f.templateRef);\n this.overlayOpen.set(true);\n this.moreFiltersOverlay.set(false)\n \">\n {{ f.label() }}\n @if (f.selectedFilterLabel()) {\n <span class=\"selected-label\">: {{ f.selectedFilterLabel() }}</span>\n }\n <mat-icon\n [class.is-overlay-open]=\"this.overlayOpen() && this.overlayContent() === f.templateRef\"\n matChipTrailingIcon>\n arrow_drop_down\n </mat-icon>\n </mat-chip-option>\n }\n }\n </mat-chip-set>\n }\n <section class=\"static\" #static>\n @if (invisibleFilters().length; as invisibleFiltersAmount) {\n <mat-chip-set>\n <mat-chip\n cdkOverlayOrigin\n [class.filter-active]=\"activeFiltersAmount()\"\n #trigger=\"cdkOverlayOrigin\"\n (click)=\"\n this.overlayOrigin.set(trigger);\n this.overlayContent.set(moreFilters);\n this.overlayOpen.set(true);\n this.moreFiltersOverlay.set(true)\n \">\n +{{ invisibleFiltersAmount }} {{ intl?.filters ?? 'Filters' | lowercase }} ({{\n activeFiltersAmount()\n }}\n {{ intl?.actives ?? 'Actives' | lowercase }})\n <mat-icon\n [class.is-overlay-open]=\"this.overlayOpen() && this.overlayContent() === moreFilters\"\n matChipTrailingIcon>\n arrow_drop_down\n </mat-icon>\n </mat-chip>\n </mat-chip-set>\n }\n <button\n mat-icon-button\n aria-label=\"Reset filters\"\n (click)=\"emitResetClicked()\"\n matTooltip=\"{{ intl?.reset ?? 'Reset' }}\">\n <mat-icon>settings_backup_restore</mat-icon>\n </button>\n </section>\n </section>\n}\n\n<ng-template #moreFilters>\n @if (allFilters()) {\n @for (f of allFilters(); track $index) {\n @if (f.type === 'toggle') {\n <section class=\"filter\">\n <mat-slide-toggle labelPosition=\"before\" [(ngModel)]=\"f.active\">\n {{ f.label() }}\n </mat-slide-toggle>\n </section>\n } @else {\n <section class=\"filter\">\n <div class=\"title\">\n <span class=\"label\">{{ f.label() }}</span>\n <span class=\"value\">{{ f.selectedFilterLabel() }}</span>\n </div>\n @if (f.templateRef) {\n <ng-container *ngTemplateOutlet=\"f.templateRef\"></ng-container>\n }\n </section>\n }\n }\n }\n</ng-template>\n\n@let overlayOrigin = this.overlayOrigin();\n@let overlayOpen = this.overlayOpen();\n@let overlayContent = this.overlayContent();\n@if (overlayOrigin && overlayOpen && overlayContent) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"overlayOpen\"\n (detach)=\"this.overlayOpen.set(false)\"\n cdkConnectedOverlayHasBackdrop=\"true\"\n backdrop\n (backdropClick)=\"this.overlayOpen.set(false)\"\n cdkConnectedOverlayPanelClass=\"filter-group--overlay\"\n cdkConnectedOverlayBackdropClass=\"filter-group--overlay--backdrop--transparent\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n [cdkConnectedOverlayViewportMargin]=\"32\">\n @if (moreFiltersOverlay()) {\n <div class=\"filters--title\">\n <span>{{ intl?.filters ?? 'Filters' }}</span>\n <button\n mat-icon-button\n aria-label=\"Reset filters\"\n (click)=\"emitResetClicked()\"\n matTooltip=\"{{ intl?.reset ?? 'Reset' }}\">\n <mat-icon>settings_backup_restore</mat-icon>\n </button>\n </div>\n }\n <div class=\"filters--content\">\n <ng-container *ngTemplateOutlet=\"overlayContent\"></ng-container>\n </div>\n </ng-template>\n}\n", styles: ["ngx-filters-group{flex:1;display:flex;flex-direction:row;justify-content:end}ngx-filters-group .selected-label{max-width:var(--ngx-filters-group-selected-label-max-width, 27ch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}ngx-filters-group .measure-row{display:flex;flex-direction:row;gap:var(--ngx-filters-group-gap, .5rem);position:absolute;visibility:hidden;pointer-events:none}ngx-filters-group .filter-container{display:flex;flex-direction:row;align-items:center;gap:var(--ngx-filters-group-gap, .5rem);block-size:var(--ngx-filters-group-block-size, 3rem);border-radius:var(--ngx-filters-group-radius, 2rem);padding-inline:var(--ngx-filters-group-padding-inline, .5rem);background-color:var(--mat-sys-surface-container-low)}ngx-filters-group .filter-container .static{display:flex;flex-direction:row;gap:var(--ngx-filters-group-gap, .5rem)}ngx-filters-group .filter-container .static:only-child mat-chip-set mat-chip{--mat-chip-container-shape-radius: var(--ngx-filters-group-first-chip-option-shape-radius, 1rem .5rem .5rem 1rem)}ngx-filters-group .filter-container .static mat-chip:first-child{--mat-chip-container-shape-radius: var(--ngx-filters-group-first-chip-shape-radius, .5rem)}ngx-filters-group .filter-container .static mat-chip.filter-active{--mat-chip-elevated-container-color: var(--mat-sys-secondary-container);--mat-chip-outline-color: transparent}ngx-filters-group .filter-container mat-chip-set>div{flex-wrap:nowrap}ngx-filters-group .filter-container mat-chip,ngx-filters-group .filter-container mat-chip-option{min-width:0}ngx-filters-group .filter-container mat-chip:first-child,ngx-filters-group .filter-container mat-chip-option:first-child{--mat-chip-container-shape-radius: var(--ngx-filters-group-first-chip-option-shape-radius, 1rem .5rem .5rem 1rem)}ngx-filters-group .filter-container mat-chip .mat-mdc-chip-action-label,ngx-filters-group .filter-container mat-chip-option .mat-mdc-chip-action-label{display:flex;align-items:center}ngx-filters-group .filter-container mat-chip .is-overlay-open,ngx-filters-group .filter-container mat-chip-option .is-overlay-open{transform:rotate(180deg)}ngx-filters-group .filter-container:has(>button:only-of-type){padding-inline:var(--ngx-filters-group-folded-padding-inline, .25rem)}.filter-group--overlay{display:flex;flex-direction:column;background-color:var(--mat-sys-surface-container-high);border-radius:var(--ngx-filters-group-overlay-radius, .5rem);overflow:hidden}.filter-group--overlay mat-slide-toggle>*{width:100%;justify-content:space-between}.filter-group--overlay mat-slide-toggle>* label{margin:0}.filter-group--overlay .filters--title{font:var(--mat-sys-title-medium);letter-spacing:var(--mat-sys-title-medium-tracking);color:var(--mat-sys-on-surface-variant);border-block-end:1px solid var(--mat-sys-outline-variant);display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding-inline:var(--ngx-filters-group-overlay-title-padding-inline, 1rem);padding-block:calc(var(--ngx-filters-group-overlay-title-padding-block, 1rem) / 4)}.filter-group--overlay .filters--content{min-width:18.75rem;overflow:auto;display:flex;flex-direction:column;justify-items:stretch;gap:var(--ngx-filters-group-overlay-content-gap, .5rem);padding:var(--ngx-filters-group-overlay-filter-padding, 1rem)}.filter-group--overlay .filters--content .filter{display:flex;flex-direction:column;gap:var(--ngx-filters-group-overlay-content-filter-gap, .5rem);padding-block:var(--ngx-filters-group-overlay-filter-padding, 1rem)}.filter-group--overlay .filters--content .filter:not(:last-child){border-bottom:1px dashed var(--mat-sys-outline-variant)}.filter-group--overlay .filters--content .filter:last-child{padding-block-end:unset}.filter-group--overlay .filters--content .filter:first-child{padding-block-start:unset}.filter-group--overlay .filters--content .filter .title{display:inline-flex;justify-content:space-between;align-items:baseline}.filter-group--overlay .filters--content .filter .title .label{font:var(--mat-sys-label-large)}.filter-group--overlay .filters--content .filter .title .value{font:var(--mat-sys-label-medium);max-width:var(--ngx-filters-group-overlay-title-max-width, 27ch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filter-group--overlay .filters--content .filter>[no-padding]{margin-inline:-1rem}.filter-group--overlay--backdrop--transparent{background-color:transparent}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: 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: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 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: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
333
355
  }
334
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxFiltersGroupComponent, decorators: [{
356
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxFiltersGroupComponent, decorators: [{
335
357
  type: Component,
336
- args: [{ selector: 'ngx-filters-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
358
+ args: [{ selector: 'ngx-filters-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
337
359
  MatIcon,
338
360
  MatIconButton,
339
361
  MatChip,
@@ -348,11 +370,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
348
370
  FormsModule,
349
371
  MatBadge,
350
372
  LowerCasePipe
351
- ], template: "@if (folded()) {\n <section\n class=\"filter-container\"\n #container\n [matBadge]=\"activeFiltersAmount()\"\n [matBadgeHidden]=\"activeFiltersAmount() <= 0\">\n <button\n mat-icon-button\n aria-label=\"All filters\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n (click)=\"\n this.overlayOrigin.set(trigger);\n this.overlayContent.set(moreFilters);\n this.overlayOpen.set(true);\n this.moreFiltersOverlay.set(true)\n \"\n matTooltip=\"{{ intl?.allFilters ?? 'All filters' }}\">\n <mat-icon>filter_alt</mat-icon>\n </button>\n </section>\n} @else {\n @if (allFilters()) {\n <section #measureRow class=\"measure-row\">\n <mat-chip-set>\n @for (f of allFilters(); track $index) {\n <mat-chip-option [selectable]=\"false\" [selected]=\"f.active()\">\n {{ f.label() }}\n @if (f.type === 'complex' && f.selectedFilterLabel()) {\n <span class=\"selected-label\">: {{ f.selectedFilterLabel() }}</span>\n }\n @if (f.type === 'complex') {\n <mat-icon matChipTrailingIcon>arrow_drop_down</mat-icon>\n }\n </mat-chip-option>\n }\n <mat-chip #overflowMeasure>\n +00 {{ intl?.filters ?? 'Filters' | lowercase }} (00 {{ intl?.actives ?? 'Actives' | lowercase }})\n <mat-icon matChipTrailingIcon>arrow_drop_down</mat-icon>\n </mat-chip>\n </mat-chip-set>\n </section>\n }\n\n <section class=\"filter-container\" #container>\n <mat-chip-set>\n @if (this.visibleFilters().length) {\n @for (f of visibleFilters(); track $index) {\n @if (f.type === 'toggle') {\n <mat-chip-option\n selectable=\"true\"\n [selected]=\"f.active()\"\n (selectionChange)=\"f.active.set($event.selected)\">\n {{ f.label() }}\n </mat-chip-option>\n } @else {\n <mat-chip-option\n [selectable]=\"false\"\n [selected]=\"f.active()\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n (click)=\"\n this.overlayOrigin.set(trigger);\n this.overlayContent.set(f.templateRef);\n this.overlayOpen.set(true);\n this.moreFiltersOverlay.set(false)\n \">\n {{ f.label() }}\n @if (f.selectedFilterLabel()) {\n <span class=\"selected-label\">: {{ f.selectedFilterLabel() }}</span>\n }\n <mat-icon\n [class.is-overlay-open]=\"this.overlayOpen() && this.overlayContent() === f.templateRef\"\n matChipTrailingIcon>\n arrow_drop_down\n </mat-icon>\n </mat-chip-option>\n }\n }\n }\n </mat-chip-set>\n <section class=\"static\" #static>\n @if (invisibleFilters().length; as invisibleFiltersAmount) {\n <mat-chip-set>\n <mat-chip\n cdkOverlayOrigin\n [class.filter-active]=\"activeFiltersAmount()\"\n #trigger=\"cdkOverlayOrigin\"\n (click)=\"\n this.overlayOrigin.set(trigger);\n this.overlayContent.set(moreFilters);\n this.overlayOpen.set(true);\n this.moreFiltersOverlay.set(true)\n \">\n +{{ invisibleFiltersAmount }} {{ intl?.filters ?? 'Filters' | lowercase }} ({{\n activeFiltersAmount()\n }}\n {{ intl?.actives ?? 'Actives' | lowercase }})\n <mat-icon\n [class.is-overlay-open]=\"this.overlayOpen() && this.overlayContent() === moreFilters\"\n matChipTrailingIcon>\n arrow_drop_down\n </mat-icon>\n </mat-chip>\n </mat-chip-set>\n }\n <button\n mat-icon-button\n aria-label=\"Reset filters\"\n (click)=\"emitResetClicked()\"\n matTooltip=\"{{ intl?.reset ?? 'Reset' }}\">\n <mat-icon>settings_backup_restore</mat-icon>\n </button>\n </section>\n </section>\n}\n\n<ng-template #moreFilters>\n @if (allFilters()) {\n @for (f of allFilters(); track $index) {\n @if (f.type === 'toggle') {\n <section class=\"filter\">\n <mat-slide-toggle labelPosition=\"before\" [(ngModel)]=\"f.active\">\n {{ f.label() }}\n </mat-slide-toggle>\n </section>\n } @else {\n <section class=\"filter\">\n <div class=\"title\">\n <span class=\"label\">{{ f.label() }}</span>\n <span class=\"value\">{{ f.selectedFilterLabel() }}</span>\n </div>\n @if (f.templateRef) {\n <ng-container *ngTemplateOutlet=\"f.templateRef\"></ng-container>\n }\n </section>\n }\n }\n }\n</ng-template>\n\n@let overlayOrigin = this.overlayOrigin();\n@let overlayOpen = this.overlayOpen();\n@let overlayContent = this.overlayContent();\n@if (overlayOrigin && overlayOpen && overlayContent) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"overlayOpen\"\n (detach)=\"this.overlayOpen.set(false)\"\n cdkConnectedOverlayHasBackdrop=\"true\"\n backdrop\n (backdropClick)=\"this.overlayOpen.set(false)\"\n cdkConnectedOverlayPanelClass=\"filter-group--overlay\"\n cdkConnectedOverlayBackdropClass=\"filter-group--overlay--backdrop--transparent\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayViewportMargin]=\"32\">\n @if (moreFiltersOverlay()) {\n <div class=\"filters--title\">\n <span>{{ intl?.filters ?? 'Filters' }}</span>\n <button\n mat-icon-button\n aria-label=\"Reset filters\"\n (click)=\"emitResetClicked()\"\n matTooltip=\"{{ intl?.reset ?? 'Reset' }}\">\n <mat-icon>settings_backup_restore</mat-icon>\n </button>\n </div>\n }\n <div class=\"filters--content\">\n <ng-container *ngTemplateOutlet=\"overlayContent\"></ng-container>\n </div>\n </ng-template>\n}\n", styles: ["ngx-filters-group{flex:1;display:flex;flex-direction:row;justify-content:end}ngx-filters-group .selected-label{max-width:var(--ngx-filters-group-selected-label-max-width, 27ch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}ngx-filters-group .measure-row{display:flex;flex-direction:row;gap:var(--ngx-filters-group-gap, .5rem);position:absolute;visibility:hidden;pointer-events:none}ngx-filters-group .filter-container{display:flex;flex-direction:row;align-items:center;gap:var(--ngx-filters-group-gap, .5rem);block-size:var(--ngx-filters-group-block-size, 3rem);border-radius:var(--ngx-filters-group-border-radius, 2rem);padding-inline:var(--ngx-filters-group-padding-inline, .5rem);background-color:var(--mat-sys-surface-container-low)}ngx-filters-group .filter-container .static{display:flex;flex-direction:row;gap:var(--ngx-filters-group-static-gap, .5rem)}ngx-filters-group .filter-container .static mat-chip:first-child{--mat-chip-container-shape-radius: var(--ngx-filters-group-first-chip-shape-radius, .5rem)}ngx-filters-group .filter-container .static mat-chip.filter-active{--mat-chip-elevated-container-color: var(--mat-sys-secondary-container);--mat-chip-outline-color: transparent}ngx-filters-group .filter-container mat-chip-set>div{flex-wrap:nowrap}ngx-filters-group .filter-container mat-chip,ngx-filters-group .filter-container mat-chip-option{min-width:0}ngx-filters-group .filter-container mat-chip:first-child,ngx-filters-group .filter-container mat-chip-option:first-child{--mat-chip-container-shape-radius: var(--ngx-filters-group-first-chip-option-shape-radius, 1rem .5rem .5rem 1rem)}ngx-filters-group .filter-container mat-chip .mat-mdc-chip-action-label,ngx-filters-group .filter-container mat-chip-option .mat-mdc-chip-action-label{display:flex;align-items:center}ngx-filters-group .filter-container mat-chip .is-overlay-open,ngx-filters-group .filter-container mat-chip-option .is-overlay-open{transform:rotate(180deg)}ngx-filters-group .filter-container:has(>button:only-of-type){padding-inline:var(--ngx-filters-group-folded-padding-inline, .25rem)}.filter-group--overlay{display:flex;flex-direction:column;background-color:var(--mat-sys-surface-container-high);border-radius:var(--ngx-filters-group-overlay-border-radius, .5rem);overflow:hidden}.filter-group--overlay mat-slide-toggle>*{width:100%;justify-content:space-between}.filter-group--overlay mat-slide-toggle>* label{margin:0}.filter-group--overlay .filters--title{font:var(--mat-sys-title-medium);letter-spacing:var(--mat-sys-title-medium-tracking);color:var(--mat-sys-on-surface-variant);border-block-end:1px solid var(--mat-sys-outline-variant);display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding-inline:var(--ngx-filters-group-overlay-title-padding-inline, 1rem);padding-block:calc(var(--ngx-filters-group-overlay-title-padding-block, 1rem) / 4)}.filter-group--overlay .filters--content{min-width:18.75rem;overflow:auto;display:flex;flex-direction:column;justify-items:stretch;gap:var(--ngx-filters-group-overlay-content-gap, .5rem);padding:var(--ngx-filters-group-overlay-filter-padding, 1rem)}.filter-group--overlay .filters--content .filter{display:flex;flex-direction:column;gap:var(--ngx-filters-group-overlay-content-filter-gap, .5rem);padding-block:var(--ngx-filters-group-overlay-filter-padding, 1rem)}.filter-group--overlay .filters--content .filter:not(:last-child){border-bottom:1px dashed var(--mat-sys-outline-variant)}.filter-group--overlay .filters--content .filter:last-child{padding-block-end:unset}.filter-group--overlay .filters--content .filter:first-child{padding-block-start:unset}.filter-group--overlay .filters--content .filter .title{display:inline-flex;justify-content:space-between;align-items:baseline}.filter-group--overlay .filters--content .filter .title .label{font:var(--mat-sys-label-large)}.filter-group--overlay .filters--content .filter .title .value{font:var(--mat-sys-label-medium);max-width:var(--ngx-filters-group-title-overlay-max-width, 27ch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filter-group--overlay .filters--content .filter>[no-padding]{margin-inline:-1rem}.filter-group--overlay--backdrop--transparent{background-color:transparent}\n"] }]
373
+ ], template: "@if (folded()) {\n <section\n class=\"filter-container\"\n #container\n [matBadge]=\"activeFiltersAmount()\"\n [matBadgeHidden]=\"activeFiltersAmount() <= 0\">\n <button\n mat-icon-button\n aria-label=\"All filters\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n (click)=\"\n this.overlayOrigin.set(trigger);\n this.overlayContent.set(moreFilters);\n this.overlayOpen.set(true);\n this.moreFiltersOverlay.set(true)\n \"\n matTooltip=\"{{ intl?.allFilters ?? 'All filters' }}\">\n <mat-icon>filter_alt</mat-icon>\n </button>\n </section>\n} @else {\n @if (allFilters()) {\n <section #measureRow class=\"measure-row\">\n <mat-chip-set>\n @for (f of allFilters(); track $index) {\n <mat-chip-option [selectable]=\"false\" [selected]=\"f.active()\">\n {{ f.label() }}\n @if (f.type === 'complex' && f.selectedFilterLabel()) {\n <span class=\"selected-label\">: {{ f.selectedFilterLabel() }}</span>\n }\n @if (f.type === 'complex') {\n <mat-icon matChipTrailingIcon>arrow_drop_down</mat-icon>\n }\n </mat-chip-option>\n }\n <mat-chip #overflowMeasure>\n +00 {{ intl?.filters ?? 'Filters' | lowercase }} (00 {{ intl?.actives ?? 'Actives' | lowercase }})\n <mat-icon matChipTrailingIcon>arrow_drop_down</mat-icon>\n </mat-chip>\n </mat-chip-set>\n </section>\n }\n\n <section class=\"filter-container\" #container>\n @if (this.visibleFilters().length) {\n <mat-chip-set>\n @for (f of visibleFilters(); track $index) {\n @if (f.type === 'toggle') {\n <mat-chip-option\n selectable=\"true\"\n [selected]=\"f.active()\"\n (selectionChange)=\"f.active.set($event.selected)\">\n {{ f.label() }}\n </mat-chip-option>\n } @else {\n <mat-chip-option\n [selectable]=\"false\"\n [selected]=\"f.active()\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n (click)=\"\n this.overlayOrigin.set(trigger);\n this.overlayContent.set(f.templateRef);\n this.overlayOpen.set(true);\n this.moreFiltersOverlay.set(false)\n \">\n {{ f.label() }}\n @if (f.selectedFilterLabel()) {\n <span class=\"selected-label\">: {{ f.selectedFilterLabel() }}</span>\n }\n <mat-icon\n [class.is-overlay-open]=\"this.overlayOpen() && this.overlayContent() === f.templateRef\"\n matChipTrailingIcon>\n arrow_drop_down\n </mat-icon>\n </mat-chip-option>\n }\n }\n </mat-chip-set>\n }\n <section class=\"static\" #static>\n @if (invisibleFilters().length; as invisibleFiltersAmount) {\n <mat-chip-set>\n <mat-chip\n cdkOverlayOrigin\n [class.filter-active]=\"activeFiltersAmount()\"\n #trigger=\"cdkOverlayOrigin\"\n (click)=\"\n this.overlayOrigin.set(trigger);\n this.overlayContent.set(moreFilters);\n this.overlayOpen.set(true);\n this.moreFiltersOverlay.set(true)\n \">\n +{{ invisibleFiltersAmount }} {{ intl?.filters ?? 'Filters' | lowercase }} ({{\n activeFiltersAmount()\n }}\n {{ intl?.actives ?? 'Actives' | lowercase }})\n <mat-icon\n [class.is-overlay-open]=\"this.overlayOpen() && this.overlayContent() === moreFilters\"\n matChipTrailingIcon>\n arrow_drop_down\n </mat-icon>\n </mat-chip>\n </mat-chip-set>\n }\n <button\n mat-icon-button\n aria-label=\"Reset filters\"\n (click)=\"emitResetClicked()\"\n matTooltip=\"{{ intl?.reset ?? 'Reset' }}\">\n <mat-icon>settings_backup_restore</mat-icon>\n </button>\n </section>\n </section>\n}\n\n<ng-template #moreFilters>\n @if (allFilters()) {\n @for (f of allFilters(); track $index) {\n @if (f.type === 'toggle') {\n <section class=\"filter\">\n <mat-slide-toggle labelPosition=\"before\" [(ngModel)]=\"f.active\">\n {{ f.label() }}\n </mat-slide-toggle>\n </section>\n } @else {\n <section class=\"filter\">\n <div class=\"title\">\n <span class=\"label\">{{ f.label() }}</span>\n <span class=\"value\">{{ f.selectedFilterLabel() }}</span>\n </div>\n @if (f.templateRef) {\n <ng-container *ngTemplateOutlet=\"f.templateRef\"></ng-container>\n }\n </section>\n }\n }\n }\n</ng-template>\n\n@let overlayOrigin = this.overlayOrigin();\n@let overlayOpen = this.overlayOpen();\n@let overlayContent = this.overlayContent();\n@if (overlayOrigin && overlayOpen && overlayContent) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"overlayOpen\"\n (detach)=\"this.overlayOpen.set(false)\"\n cdkConnectedOverlayHasBackdrop=\"true\"\n backdrop\n (backdropClick)=\"this.overlayOpen.set(false)\"\n cdkConnectedOverlayPanelClass=\"filter-group--overlay\"\n cdkConnectedOverlayBackdropClass=\"filter-group--overlay--backdrop--transparent\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n [cdkConnectedOverlayViewportMargin]=\"32\">\n @if (moreFiltersOverlay()) {\n <div class=\"filters--title\">\n <span>{{ intl?.filters ?? 'Filters' }}</span>\n <button\n mat-icon-button\n aria-label=\"Reset filters\"\n (click)=\"emitResetClicked()\"\n matTooltip=\"{{ intl?.reset ?? 'Reset' }}\">\n <mat-icon>settings_backup_restore</mat-icon>\n </button>\n </div>\n }\n <div class=\"filters--content\">\n <ng-container *ngTemplateOutlet=\"overlayContent\"></ng-container>\n </div>\n </ng-template>\n}\n", styles: ["ngx-filters-group{flex:1;display:flex;flex-direction:row;justify-content:end}ngx-filters-group .selected-label{max-width:var(--ngx-filters-group-selected-label-max-width, 27ch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}ngx-filters-group .measure-row{display:flex;flex-direction:row;gap:var(--ngx-filters-group-gap, .5rem);position:absolute;visibility:hidden;pointer-events:none}ngx-filters-group .filter-container{display:flex;flex-direction:row;align-items:center;gap:var(--ngx-filters-group-gap, .5rem);block-size:var(--ngx-filters-group-block-size, 3rem);border-radius:var(--ngx-filters-group-radius, 2rem);padding-inline:var(--ngx-filters-group-padding-inline, .5rem);background-color:var(--mat-sys-surface-container-low)}ngx-filters-group .filter-container .static{display:flex;flex-direction:row;gap:var(--ngx-filters-group-gap, .5rem)}ngx-filters-group .filter-container .static:only-child mat-chip-set mat-chip{--mat-chip-container-shape-radius: var(--ngx-filters-group-first-chip-option-shape-radius, 1rem .5rem .5rem 1rem)}ngx-filters-group .filter-container .static mat-chip:first-child{--mat-chip-container-shape-radius: var(--ngx-filters-group-first-chip-shape-radius, .5rem)}ngx-filters-group .filter-container .static mat-chip.filter-active{--mat-chip-elevated-container-color: var(--mat-sys-secondary-container);--mat-chip-outline-color: transparent}ngx-filters-group .filter-container mat-chip-set>div{flex-wrap:nowrap}ngx-filters-group .filter-container mat-chip,ngx-filters-group .filter-container mat-chip-option{min-width:0}ngx-filters-group .filter-container mat-chip:first-child,ngx-filters-group .filter-container mat-chip-option:first-child{--mat-chip-container-shape-radius: var(--ngx-filters-group-first-chip-option-shape-radius, 1rem .5rem .5rem 1rem)}ngx-filters-group .filter-container mat-chip .mat-mdc-chip-action-label,ngx-filters-group .filter-container mat-chip-option .mat-mdc-chip-action-label{display:flex;align-items:center}ngx-filters-group .filter-container mat-chip .is-overlay-open,ngx-filters-group .filter-container mat-chip-option .is-overlay-open{transform:rotate(180deg)}ngx-filters-group .filter-container:has(>button:only-of-type){padding-inline:var(--ngx-filters-group-folded-padding-inline, .25rem)}.filter-group--overlay{display:flex;flex-direction:column;background-color:var(--mat-sys-surface-container-high);border-radius:var(--ngx-filters-group-overlay-radius, .5rem);overflow:hidden}.filter-group--overlay mat-slide-toggle>*{width:100%;justify-content:space-between}.filter-group--overlay mat-slide-toggle>* label{margin:0}.filter-group--overlay .filters--title{font:var(--mat-sys-title-medium);letter-spacing:var(--mat-sys-title-medium-tracking);color:var(--mat-sys-on-surface-variant);border-block-end:1px solid var(--mat-sys-outline-variant);display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding-inline:var(--ngx-filters-group-overlay-title-padding-inline, 1rem);padding-block:calc(var(--ngx-filters-group-overlay-title-padding-block, 1rem) / 4)}.filter-group--overlay .filters--content{min-width:18.75rem;overflow:auto;display:flex;flex-direction:column;justify-items:stretch;gap:var(--ngx-filters-group-overlay-content-gap, .5rem);padding:var(--ngx-filters-group-overlay-filter-padding, 1rem)}.filter-group--overlay .filters--content .filter{display:flex;flex-direction:column;gap:var(--ngx-filters-group-overlay-content-filter-gap, .5rem);padding-block:var(--ngx-filters-group-overlay-filter-padding, 1rem)}.filter-group--overlay .filters--content .filter:not(:last-child){border-bottom:1px dashed var(--mat-sys-outline-variant)}.filter-group--overlay .filters--content .filter:last-child{padding-block-end:unset}.filter-group--overlay .filters--content .filter:first-child{padding-block-start:unset}.filter-group--overlay .filters--content .filter .title{display:inline-flex;justify-content:space-between;align-items:baseline}.filter-group--overlay .filters--content .filter .title .label{font:var(--mat-sys-label-large)}.filter-group--overlay .filters--content .filter .title .value{font:var(--mat-sys-label-medium);max-width:var(--ngx-filters-group-overlay-title-max-width, 27ch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filter-group--overlay .filters--content .filter>[no-padding]{margin-inline:-1rem}.filter-group--overlay--backdrop--transparent{background-color:transparent}\n"] }]
352
374
  }], propDecorators: { resetFilters: [{ type: i0.Output, args: ["resetFilters"] }], folded: [{ type: i0.Input, args: [{ isSignal: true, alias: "folded", required: false }] }], allFilters: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FILTER_TOKEN), { isSignal: true }] }], filterContainerRef: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], measureRowRef: [{ type: i0.ViewChild, args: ['measureRow', { isSignal: true }] }], staticFieldsRef: [{ type: i0.ViewChild, args: ['static', { isSignal: true }] }] } });
353
375
 
354
376
  class NgxSearchInputDirective {
355
- blurred = signal(false, ...(ngDevMode ? [{ debugName: "blurred" }] : []));
377
+ blurred = signal(false, ...(ngDevMode ? [{ debugName: "blurred" }] : /* istanbul ignore next */ []));
356
378
  value;
357
379
  ngControl = inject(NgControl);
358
380
  input = inject(ElementRef);
@@ -366,10 +388,10 @@ class NgxSearchInputDirective {
366
388
  reset() {
367
389
  this.control.reset();
368
390
  }
369
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxSearchInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
370
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: NgxSearchInputDirective, isStandalone: true, selector: "input[ngx-search-input]", host: { listeners: { "blur": "blurred.set(true);", "focus": "blurred.set(false);" } }, ngImport: i0 });
391
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxSearchInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
392
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: NgxSearchInputDirective, isStandalone: true, selector: "input[ngx-search-input]", host: { listeners: { "blur": "blurred.set(true);", "focus": "blurred.set(false);" } }, ngImport: i0 });
371
393
  }
372
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxSearchInputDirective, decorators: [{
394
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxSearchInputDirective, decorators: [{
373
395
  type: Directive,
374
396
  args: [{
375
397
  selector: 'input[ngx-search-input]',
@@ -384,17 +406,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
384
406
  // type SearchBarContainerSize = 'medium' | 'small';
385
407
  class NgxSearchBarContainerComponent {
386
408
  // inputs
387
- folded = input(false, ...(ngDevMode ? [{ debugName: "folded" }] : []));
409
+ folded = input(false, ...(ngDevMode ? [{ debugName: "folded" }] : /* istanbul ignore next */ []));
388
410
  /*
389
411
  protected size = input<SearchBarContainerSize>('medium');
390
412
  protected sizeButtonAttributeName = input<string>();
391
413
  protected sizeButtonAttributeValue = input<string>();
392
414
  */
393
415
  intl = inject(NgxLayoutIntl, { optional: true });
394
- manualFoldingState = signal(true, ...(ngDevMode ? [{ debugName: "manualFoldingState" }] : []));
395
- isFolded = computed(() => this.folded() && this.manualFoldingState() && !this.searchText(), ...(ngDevMode ? [{ debugName: "isFolded" }] : []));
396
- searchInput = contentChild(NgxSearchInputDirective, ...(ngDevMode ? [{ debugName: "searchInput" }] : []));
397
- searchText = computed(() => this.searchInput()?.value(), ...(ngDevMode ? [{ debugName: "searchText" }] : []));
416
+ manualFoldingState = signal(true, ...(ngDevMode ? [{ debugName: "manualFoldingState" }] : /* istanbul ignore next */ []));
417
+ isFolded = computed(() => this.folded() && this.manualFoldingState() && !this.searchText(), ...(ngDevMode ? [{ debugName: "isFolded" }] : /* istanbul ignore next */ []));
418
+ searchInput = contentChild(NgxSearchInputDirective, ...(ngDevMode ? [{ debugName: "searchInput" }] : /* istanbul ignore next */ []));
419
+ searchText = computed(() => this.searchInput()?.value(), ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
398
420
  /*
399
421
  private hostElement = inject(ElementRef);
400
422
  private renderer = inject(Renderer2);
@@ -444,86 +466,90 @@ class NgxSearchBarContainerComponent {
444
466
  searchInput.reset();
445
467
  searchInput.focus();
446
468
  }
447
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxSearchBarContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
448
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: NgxSearchBarContainerComponent, isStandalone: true, selector: "ngx-search-bar-container", inputs: { folded: { classPropertyName: "folded", publicName: "folded", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "searchInput", first: true, predicate: NgxSearchInputDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (isFolded()) {\n <button\n matIconButton\n aria-label=\"Open search bar\"\n (click)=\"toggleFolded()\"\n matTooltip=\"{{ intl?.openSearchBar ?? 'Open search bar' }}\">\n <mat-icon>search</mat-icon>\n </button>\n} @else {\n <ng-content select=\"[ngx-search-input]\"></ng-content>\n\n @if (searchText()) {\n <button\n matIconButton\n aria-label=\"Clear button\"\n (click)=\"resetInput()\"\n matTooltip=\"{{ intl?.deleteSearch ?? 'Clear search' }}\">\n <mat-icon>close</mat-icon>\n </button>\n } @else {\n <mat-icon class=\"icon-search-bar\" aria-hidden=\"false\" aria-label=\"Search icon\" fontIcon=\"search\" />\n }\n}\n", styles: ["ngx-search-bar-container{display:flex;flex:1 1 auto;max-width:400px;align-items:center;block-size:var(--ngx-search-bar-container-block-size, 3rem);border-radius:var(--ngx-search-bar-container-radius, 2rem);padding-inline-start:var(--ngx-search-bar-container-padding-inline-start, 1.125rem);padding-inline-end:var(--ngx-search-bar-container-padding-inline-end, .25rem);background-color:var(--mat-sys-surface-container-high);gap:var(--ngx-search-bar-container-gap, .125rem)}ngx-search-bar-container:has(button:only-child){width:fit-content;padding:var(--ngx-search-bar-folded-container-padding, 0 .25rem);flex:0}ngx-search-bar-container>input[ngx-search-input]{font:var(--mat-sys-body-large);letter-spacing:var(--mat-sys-body-large-tracking);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:10px}ngx-search-bar-container>input[ngx-search-input]::placeholder{color:var(--mat-sys-on-surface-variant)}ngx-search-bar-container mat-icon.icon-search-bar{padding:var(--ngx-search-bar-icon-padding, .5rem);color:var(--mat-sys-on-surface-variant)}ngx-search-bar-container [ngx-search-input]{flex:1;background:none;border:none}ngx-search-bar-container [ngx-search-input]:focus{outline:none}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
469
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxSearchBarContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
470
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: NgxSearchBarContainerComponent, isStandalone: true, selector: "ngx-search-bar-container", inputs: { folded: { classPropertyName: "folded", publicName: "folded", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "searchInput", first: true, predicate: NgxSearchInputDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (isFolded()) {\n <button\n matIconButton\n aria-label=\"Open search bar\"\n (click)=\"toggleFolded()\"\n matTooltip=\"{{ intl?.openSearchBar ?? 'Open search bar' }}\">\n <mat-icon>search</mat-icon>\n </button>\n} @else {\n <ng-content select=\"[ngx-search-input]\"></ng-content>\n\n @if (searchText()) {\n <button\n matIconButton\n aria-label=\"Clear button\"\n (click)=\"resetInput()\"\n matTooltip=\"{{ intl?.deleteSearch ?? 'Clear search' }}\">\n <mat-icon>close</mat-icon>\n </button>\n } @else {\n <mat-icon class=\"icon-search-bar\" aria-hidden=\"false\" aria-label=\"Search icon\" fontIcon=\"search\" />\n }\n}\n", styles: ["ngx-search-bar-container{display:flex;flex:1 1 auto;max-width:var(--ngx-search-bar-container-max-width, 400px);align-items:center;block-size:var(--ngx-search-bar-container-block-size, 3rem);border-radius:var(--ngx-search-bar-container-radius, 2rem);padding-inline-start:var(--ngx-search-bar-container-padding-inline-start, 1.125rem);padding-inline-end:var(--ngx-search-bar-container-padding-inline-end, .25rem);background-color:var(--mat-sys-surface-container-high);gap:var(--ngx-search-bar-container-gap, .125rem)}ngx-search-bar-container:has(button:only-child){width:fit-content;padding:var(--ngx-search-bar-container-folded-padding, 0 .25rem);flex:0}ngx-search-bar-container>input[ngx-search-input]{font:var(--mat-sys-body-large);letter-spacing:var(--mat-sys-body-large-tracking);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:10px}ngx-search-bar-container>input[ngx-search-input]::placeholder{color:var(--mat-sys-on-surface-variant)}ngx-search-bar-container mat-icon.icon-search-bar{padding:var(--ngx-search-bar-container-icon-padding, .5rem);color:var(--mat-sys-on-surface-variant)}ngx-search-bar-container [ngx-search-input]{flex:1;background:none;border:none}ngx-search-bar-container [ngx-search-input]:focus{outline:none}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
449
471
  }
450
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxSearchBarContainerComponent, decorators: [{
472
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxSearchBarContainerComponent, decorators: [{
451
473
  type: Component,
452
- args: [{ selector: 'ngx-search-bar-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, MatIconButton, MatTooltip], template: "@if (isFolded()) {\n <button\n matIconButton\n aria-label=\"Open search bar\"\n (click)=\"toggleFolded()\"\n matTooltip=\"{{ intl?.openSearchBar ?? 'Open search bar' }}\">\n <mat-icon>search</mat-icon>\n </button>\n} @else {\n <ng-content select=\"[ngx-search-input]\"></ng-content>\n\n @if (searchText()) {\n <button\n matIconButton\n aria-label=\"Clear button\"\n (click)=\"resetInput()\"\n matTooltip=\"{{ intl?.deleteSearch ?? 'Clear search' }}\">\n <mat-icon>close</mat-icon>\n </button>\n } @else {\n <mat-icon class=\"icon-search-bar\" aria-hidden=\"false\" aria-label=\"Search icon\" fontIcon=\"search\" />\n }\n}\n", styles: ["ngx-search-bar-container{display:flex;flex:1 1 auto;max-width:400px;align-items:center;block-size:var(--ngx-search-bar-container-block-size, 3rem);border-radius:var(--ngx-search-bar-container-radius, 2rem);padding-inline-start:var(--ngx-search-bar-container-padding-inline-start, 1.125rem);padding-inline-end:var(--ngx-search-bar-container-padding-inline-end, .25rem);background-color:var(--mat-sys-surface-container-high);gap:var(--ngx-search-bar-container-gap, .125rem)}ngx-search-bar-container:has(button:only-child){width:fit-content;padding:var(--ngx-search-bar-folded-container-padding, 0 .25rem);flex:0}ngx-search-bar-container>input[ngx-search-input]{font:var(--mat-sys-body-large);letter-spacing:var(--mat-sys-body-large-tracking);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:10px}ngx-search-bar-container>input[ngx-search-input]::placeholder{color:var(--mat-sys-on-surface-variant)}ngx-search-bar-container mat-icon.icon-search-bar{padding:var(--ngx-search-bar-icon-padding, .5rem);color:var(--mat-sys-on-surface-variant)}ngx-search-bar-container [ngx-search-input]{flex:1;background:none;border:none}ngx-search-bar-container [ngx-search-input]:focus{outline:none}\n"] }]
474
+ args: [{ selector: 'ngx-search-bar-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, MatIconButton, MatTooltip], template: "@if (isFolded()) {\n <button\n matIconButton\n aria-label=\"Open search bar\"\n (click)=\"toggleFolded()\"\n matTooltip=\"{{ intl?.openSearchBar ?? 'Open search bar' }}\">\n <mat-icon>search</mat-icon>\n </button>\n} @else {\n <ng-content select=\"[ngx-search-input]\"></ng-content>\n\n @if (searchText()) {\n <button\n matIconButton\n aria-label=\"Clear button\"\n (click)=\"resetInput()\"\n matTooltip=\"{{ intl?.deleteSearch ?? 'Clear search' }}\">\n <mat-icon>close</mat-icon>\n </button>\n } @else {\n <mat-icon class=\"icon-search-bar\" aria-hidden=\"false\" aria-label=\"Search icon\" fontIcon=\"search\" />\n }\n}\n", styles: ["ngx-search-bar-container{display:flex;flex:1 1 auto;max-width:var(--ngx-search-bar-container-max-width, 400px);align-items:center;block-size:var(--ngx-search-bar-container-block-size, 3rem);border-radius:var(--ngx-search-bar-container-radius, 2rem);padding-inline-start:var(--ngx-search-bar-container-padding-inline-start, 1.125rem);padding-inline-end:var(--ngx-search-bar-container-padding-inline-end, .25rem);background-color:var(--mat-sys-surface-container-high);gap:var(--ngx-search-bar-container-gap, .125rem)}ngx-search-bar-container:has(button:only-child){width:fit-content;padding:var(--ngx-search-bar-container-folded-padding, 0 .25rem);flex:0}ngx-search-bar-container>input[ngx-search-input]{font:var(--mat-sys-body-large);letter-spacing:var(--mat-sys-body-large-tracking);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:10px}ngx-search-bar-container>input[ngx-search-input]::placeholder{color:var(--mat-sys-on-surface-variant)}ngx-search-bar-container mat-icon.icon-search-bar{padding:var(--ngx-search-bar-container-icon-padding, .5rem);color:var(--mat-sys-on-surface-variant)}ngx-search-bar-container [ngx-search-input]{flex:1;background:none;border:none}ngx-search-bar-container [ngx-search-input]:focus{outline:none}\n"] }]
453
475
  }], ctorParameters: () => [], propDecorators: { folded: [{ type: i0.Input, args: [{ isSignal: true, alias: "folded", required: false }] }], searchInput: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgxSearchInputDirective), { isSignal: true }] }] } });
454
476
 
455
477
  class NgxColumnBarComponent {
456
- hasRightContent = computed(() => this.filtersGroup() ?? this.searchBarContainer(), ...(ngDevMode ? [{ debugName: "hasRightContent" }] : []));
457
- filtersGroup = contentChild(NgxFiltersGroupComponent, ...(ngDevMode ? [{ debugName: "filtersGroup" }] : []));
458
- searchBarContainer = contentChild(NgxSearchBarContainerComponent, ...(ngDevMode ? [{ debugName: "searchBarContainer" }] : []));
459
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxColumnBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
460
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: NgxColumnBarComponent, isStandalone: true, selector: "ngx-column-bar", queries: [{ propertyName: "filtersGroup", first: true, predicate: NgxFiltersGroupComponent, descendants: true, isSignal: true }, { propertyName: "searchBarContainer", first: true, predicate: NgxSearchBarContainerComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"h1,h2,h3,h4,h5,h6\"></ng-content>\n<ng-content select=\"ngx-actions-group\"></ng-content>\n\n@if (hasRightContent()) {\n <div class=\"right\">\n <ng-content select=\"ngx-filters-group\"></ng-content>\n <ng-content select=\"ngx-search-bar-container\"></ng-content>\n </div>\n}\n", styles: ["ngx-column-bar{display:flex;align-items:center;padding:var(--ngx-column-bar-padding, .25rem .5rem);gap:var(--ngx-column-bar-gap, .75rem)}ngx-column-bar h1,ngx-column-bar h2,ngx-column-bar h3,ngx-column-bar h4,ngx-column-bar h5,ngx-column-bar h6{white-space:nowrap;margin:0;font:var(--mat-sys-title-large);letter-spacing:var(--mat-sys-title-large-tracking);color:var(--mat-sys-on-surface-variant);overflow:hidden;min-width:var(--ngx-column-bar-title-min-width, 6ch);text-overflow:ellipsis}ngx-column-bar h1:first-child,ngx-column-bar h2:first-child,ngx-column-bar h3:first-child,ngx-column-bar h4:first-child,ngx-column-bar h5:first-child,ngx-column-bar h6:first-child{padding-inline-start:var(--ngx-column-bar-title-first-child-padding-inline-start, .25rem)}ngx-column-bar:has(h1,h2,h3,h4,h5,h6) ngx-actions-group{justify-content:flex-end}ngx-column-bar:not(:has(ngx-actions-group)) .right{flex:1}ngx-column-bar .right,ngx-column-bar ngx-actions-group{display:flex;align-items:center;gap:var(--ngx-column-bar-elements-gap, .75rem)}ngx-column-bar .right{justify-content:flex-end}ngx-column-bar ngx-actions-group{flex:1;min-inline-size:var(--ngx-column-bar-actions-group-min-inline-size, 3rem)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
478
+ hasRightContent = computed(() => this.filtersGroup() ?? this.searchBarContainer(), ...(ngDevMode ? [{ debugName: "hasRightContent" }] : /* istanbul ignore next */ []));
479
+ hasTitle = computed(() => !!this.barTitle(), ...(ngDevMode ? [{ debugName: "hasTitle" }] : /* istanbul ignore next */ []));
480
+ filtersGroup = contentChild(NgxFiltersGroupComponent, ...(ngDevMode ? [{ debugName: "filtersGroup" }] : /* istanbul ignore next */ []));
481
+ searchBarContainer = contentChild(NgxSearchBarContainerComponent, ...(ngDevMode ? [{ debugName: "searchBarContainer" }] : /* istanbul ignore next */ []));
482
+ barTitle = contentChild(NgxBarTitleDirective, ...(ngDevMode ? [{ debugName: "barTitle" }] : /* istanbul ignore next */ []));
483
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxColumnBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
484
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: NgxColumnBarComponent, isStandalone: true, selector: "ngx-column-bar", queries: [{ propertyName: "filtersGroup", first: true, predicate: NgxFiltersGroupComponent, descendants: true, isSignal: true }, { propertyName: "searchBarContainer", first: true, predicate: NgxSearchBarContainerComponent, descendants: true, isSignal: true }, { propertyName: "barTitle", first: true, predicate: NgxBarTitleDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasTitle()) {\n <ng-content select=\"[ngxBarTitle]\"></ng-content>\n <ng-container [ngTemplateOutlet]=\"ngContentLeft\"></ng-container>\n} @else {\n <ng-container [ngTemplateOutlet]=\"actionsGroup\"></ng-container>\n}\n\n@if (hasRightContent()) {\n <div class=\"right\">\n @if(hasTitle()) {\n <ng-container [ngTemplateOutlet]=\"actionsGroup\"></ng-container>\n } @else {\n <ng-container [ngTemplateOutlet]=\"ngContentLeft\"></ng-container>\n }\n <ng-content select=\"ngx-filters-group\"></ng-content>\n <ng-content select=\"ngx-search-bar-container\"></ng-content>\n <ng-content select=\"[ngxContentRight]\"></ng-content>\n </div>\n}\n\n<ng-template #actionsGroup>\n <ng-content select=\"ngx-actions-group\"></ng-content>\n</ng-template>\n\n<ng-template #ngContentLeft>\n <ng-content select=\"[ngxContentLeft]\"></ng-content>\n</ng-template>", styles: ["ngx-column-bar{display:flex;align-items:center;min-height:var(--ngx-column-bar-min-height, 3rem);padding:var(--ngx-column-bar-padding, .25rem);gap:var(--ngx-column-bar-gap, .75rem)}ngx-column-bar h1,ngx-column-bar h2,ngx-column-bar h3,ngx-column-bar h4,ngx-column-bar h5,ngx-column-bar h6{white-space:nowrap;margin:0;font:var(--mat-sys-title-medium);letter-spacing:var(--mat-sys-title-medium-tracking);color:var(--mat-sys-on-surface-variant);overflow:hidden;min-width:var(--ngx-column-bar-title-min-width, 6ch);text-overflow:ellipsis}ngx-column-bar h1:first-child,ngx-column-bar h2:first-child,ngx-column-bar h3:first-child,ngx-column-bar h4:first-child,ngx-column-bar h5:first-child,ngx-column-bar h6:first-child{padding-inline-start:var(--ngx-column-bar-title-first-child-padding-inline-start, .25rem)}ngx-column-bar:has(h1,h2,h3,h4,h5,h6) .right:has(ngx-actions-group) ngx-filters-group{flex:none}ngx-column-bar:has(h1,h2,h3,h4,h5,h6) ngx-actions-group{justify-content:flex-end}ngx-column-bar .right,ngx-column-bar ngx-actions-group{display:flex;align-items:center;gap:var(--ngx-column-bar-elements-gap, .75rem)}ngx-column-bar .right{flex:1;justify-content:flex-end}ngx-column-bar ngx-actions-group{flex:1;min-inline-size:var(--ngx-column-bar-actions-group-min-inline-size, 3rem)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
461
485
  }
462
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxColumnBarComponent, decorators: [{
486
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxColumnBarComponent, decorators: [{
463
487
  type: Component,
464
- args: [{ selector: 'ngx-column-bar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"h1,h2,h3,h4,h5,h6\"></ng-content>\n<ng-content select=\"ngx-actions-group\"></ng-content>\n\n@if (hasRightContent()) {\n <div class=\"right\">\n <ng-content select=\"ngx-filters-group\"></ng-content>\n <ng-content select=\"ngx-search-bar-container\"></ng-content>\n </div>\n}\n", styles: ["ngx-column-bar{display:flex;align-items:center;padding:var(--ngx-column-bar-padding, .25rem .5rem);gap:var(--ngx-column-bar-gap, .75rem)}ngx-column-bar h1,ngx-column-bar h2,ngx-column-bar h3,ngx-column-bar h4,ngx-column-bar h5,ngx-column-bar h6{white-space:nowrap;margin:0;font:var(--mat-sys-title-large);letter-spacing:var(--mat-sys-title-large-tracking);color:var(--mat-sys-on-surface-variant);overflow:hidden;min-width:var(--ngx-column-bar-title-min-width, 6ch);text-overflow:ellipsis}ngx-column-bar h1:first-child,ngx-column-bar h2:first-child,ngx-column-bar h3:first-child,ngx-column-bar h4:first-child,ngx-column-bar h5:first-child,ngx-column-bar h6:first-child{padding-inline-start:var(--ngx-column-bar-title-first-child-padding-inline-start, .25rem)}ngx-column-bar:has(h1,h2,h3,h4,h5,h6) ngx-actions-group{justify-content:flex-end}ngx-column-bar:not(:has(ngx-actions-group)) .right{flex:1}ngx-column-bar .right,ngx-column-bar ngx-actions-group{display:flex;align-items:center;gap:var(--ngx-column-bar-elements-gap, .75rem)}ngx-column-bar .right{justify-content:flex-end}ngx-column-bar ngx-actions-group{flex:1;min-inline-size:var(--ngx-column-bar-actions-group-min-inline-size, 3rem)}\n"] }]
465
- }], propDecorators: { filtersGroup: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgxFiltersGroupComponent), { isSignal: true }] }], searchBarContainer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgxSearchBarContainerComponent), { isSignal: true }] }] } });
488
+ args: [{ selector: 'ngx-column-bar', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (hasTitle()) {\n <ng-content select=\"[ngxBarTitle]\"></ng-content>\n <ng-container [ngTemplateOutlet]=\"ngContentLeft\"></ng-container>\n} @else {\n <ng-container [ngTemplateOutlet]=\"actionsGroup\"></ng-container>\n}\n\n@if (hasRightContent()) {\n <div class=\"right\">\n @if(hasTitle()) {\n <ng-container [ngTemplateOutlet]=\"actionsGroup\"></ng-container>\n } @else {\n <ng-container [ngTemplateOutlet]=\"ngContentLeft\"></ng-container>\n }\n <ng-content select=\"ngx-filters-group\"></ng-content>\n <ng-content select=\"ngx-search-bar-container\"></ng-content>\n <ng-content select=\"[ngxContentRight]\"></ng-content>\n </div>\n}\n\n<ng-template #actionsGroup>\n <ng-content select=\"ngx-actions-group\"></ng-content>\n</ng-template>\n\n<ng-template #ngContentLeft>\n <ng-content select=\"[ngxContentLeft]\"></ng-content>\n</ng-template>", styles: ["ngx-column-bar{display:flex;align-items:center;min-height:var(--ngx-column-bar-min-height, 3rem);padding:var(--ngx-column-bar-padding, .25rem);gap:var(--ngx-column-bar-gap, .75rem)}ngx-column-bar h1,ngx-column-bar h2,ngx-column-bar h3,ngx-column-bar h4,ngx-column-bar h5,ngx-column-bar h6{white-space:nowrap;margin:0;font:var(--mat-sys-title-medium);letter-spacing:var(--mat-sys-title-medium-tracking);color:var(--mat-sys-on-surface-variant);overflow:hidden;min-width:var(--ngx-column-bar-title-min-width, 6ch);text-overflow:ellipsis}ngx-column-bar h1:first-child,ngx-column-bar h2:first-child,ngx-column-bar h3:first-child,ngx-column-bar h4:first-child,ngx-column-bar h5:first-child,ngx-column-bar h6:first-child{padding-inline-start:var(--ngx-column-bar-title-first-child-padding-inline-start, .25rem)}ngx-column-bar:has(h1,h2,h3,h4,h5,h6) .right:has(ngx-actions-group) ngx-filters-group{flex:none}ngx-column-bar:has(h1,h2,h3,h4,h5,h6) ngx-actions-group{justify-content:flex-end}ngx-column-bar .right,ngx-column-bar ngx-actions-group{display:flex;align-items:center;gap:var(--ngx-column-bar-elements-gap, .75rem)}ngx-column-bar .right{flex:1;justify-content:flex-end}ngx-column-bar ngx-actions-group{flex:1;min-inline-size:var(--ngx-column-bar-actions-group-min-inline-size, 3rem)}\n"] }]
489
+ }], propDecorators: { filtersGroup: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgxFiltersGroupComponent), { isSignal: true }] }], searchBarContainer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgxSearchBarContainerComponent), { isSignal: true }] }], barTitle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgxBarTitleDirective), { isSignal: true }] }] } });
466
490
 
467
491
  class NgxLayoutComponent {
468
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
469
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: NgxLayoutComponent, isStandalone: true, selector: "ngx-layout", ngImport: i0, template: "<ng-content select=\"ngx-app-bar\"></ng-content>\n<ng-content select=\"ngx-main-bar\"></ng-content>\n<!--\n The ng-content's is not clearly defined yet. The potential use-cases are:\n - Display GPD bars\n - Display warnings\n -->\n<ng-content></ng-content>\n<section class=\"content\">\n <ng-content select=\"ngx-panel\"></ng-content>\n</section>\n", styles: [":host{display:flex;flex-direction:column;flex:1 1 0;background-color:var(--mat-sys-surface-container);padding-block-end:var(--ngx-layout-padding-block-end, .75rem);padding-inline:var(--ngx-layout-padding-inline, 1rem);box-sizing:border-box}:host .content{display:flex;flex:1 1 0;overflow:hidden;gap:var(--ngx-layout-content-gap, .5rem);padding-block:var(--ngx-layout-content-padding-block, .25rem)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
492
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
493
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: NgxLayoutComponent, isStandalone: true, selector: "ngx-layout", ngImport: i0, template: "<ng-content select=\"ngx-app-bar\"></ng-content>\n<ng-content select=\"ngx-main-bar\"></ng-content>\n<!--\n The ng-content's is not clearly defined yet. The potential use-cases are:\n - Display GPD bars\n - Display warnings\n -->\n<div class=\"extra-content\">\n <ng-content></ng-content>\n</div>\n<section class=\"content\">\n <ng-content select=\"ngx-panel\"></ng-content>\n</section>\n", styles: [":host{display:flex;flex-direction:column;flex:1 1 0;font:var(--mat-sys-body-medium);letter-spacing:var(--mat-sys-body-medium-tracking);background-color:var(--mat-sys-surface-container);box-sizing:border-box}:host .extra-content{padding:var(--ngx-layout-extra-content-padding, .25rem 1rem)}:host .extra-content:empty{display:none}:host .content{display:flex;flex:1 1 0;overflow:hidden;gap:var(--ngx-layout-content-gap, .5rem);padding:var(--ngx-layout-content-padding, .25rem 1rem 1rem)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
470
494
  }
471
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxLayoutComponent, decorators: [{
495
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxLayoutComponent, decorators: [{
472
496
  type: Component,
473
- args: [{ selector: 'ngx-layout', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"ngx-app-bar\"></ng-content>\n<ng-content select=\"ngx-main-bar\"></ng-content>\n<!--\n The ng-content's is not clearly defined yet. The potential use-cases are:\n - Display GPD bars\n - Display warnings\n -->\n<ng-content></ng-content>\n<section class=\"content\">\n <ng-content select=\"ngx-panel\"></ng-content>\n</section>\n", styles: [":host{display:flex;flex-direction:column;flex:1 1 0;background-color:var(--mat-sys-surface-container);padding-block-end:var(--ngx-layout-padding-block-end, .75rem);padding-inline:var(--ngx-layout-padding-inline, 1rem);box-sizing:border-box}:host .content{display:flex;flex:1 1 0;overflow:hidden;gap:var(--ngx-layout-content-gap, .5rem);padding-block:var(--ngx-layout-content-padding-block, .25rem)}\n"] }]
497
+ args: [{ selector: 'ngx-layout', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"ngx-app-bar\"></ng-content>\n<ng-content select=\"ngx-main-bar\"></ng-content>\n<!--\n The ng-content's is not clearly defined yet. The potential use-cases are:\n - Display GPD bars\n - Display warnings\n -->\n<div class=\"extra-content\">\n <ng-content></ng-content>\n</div>\n<section class=\"content\">\n <ng-content select=\"ngx-panel\"></ng-content>\n</section>\n", styles: [":host{display:flex;flex-direction:column;flex:1 1 0;font:var(--mat-sys-body-medium);letter-spacing:var(--mat-sys-body-medium-tracking);background-color:var(--mat-sys-surface-container);box-sizing:border-box}:host .extra-content{padding:var(--ngx-layout-extra-content-padding, .25rem 1rem)}:host .extra-content:empty{display:none}:host .content{display:flex;flex:1 1 0;overflow:hidden;gap:var(--ngx-layout-content-gap, .5rem);padding:var(--ngx-layout-content-padding, .25rem 1rem 1rem)}\n"] }]
474
498
  }] });
475
499
 
476
500
  class NgxMainBarComponent {
477
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxMainBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
478
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: NgxMainBarComponent, isStandalone: true, selector: "ngx-main-bar", ngImport: i0, template: "<ng-content select=\"ngx-actions-group\"></ng-content>\n\n<div class=\"right\">\n <ng-content select=\"ngx-filters-group\"></ng-content>\n <ng-content select=\"ngx-search-bar-container\"></ng-content>\n</div>\n", styles: ["ngx-main-bar{display:flex;align-items:center;padding-block:var(--ngx-main-bar-padding-block, .25rem);gap:var(--ngx-main-bar-gap, .75rem)}ngx-main-bar .right{flex:1;display:flex;justify-content:flex-end;gap:var(--ngx-main-bar-right-gap, .75rem)}ngx-main-bar ngx-actions-group{flex:1;min-inline-size:var(--ngx-main-bar-action-min-inline-size, 3rem)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
501
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMainBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
502
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: NgxMainBarComponent, isStandalone: true, selector: "ngx-main-bar", ngImport: i0, template: "<ng-content select=\"ngx-actions-group\"></ng-content>\n<ng-content select=\"[ngxContentLeft]\"></ng-content>\n<div class=\"right\">\n <ng-content select=\"ngx-filters-group\"></ng-content>\n <ng-content select=\"ngx-search-bar-container\"></ng-content>\n <ng-content select=\"[ngxContentRight]\"></ng-content>\n</div>\n", styles: [":host{display:flex;align-items:center;padding:var(--ngx-main-bar-padding, .25rem 1rem);gap:var(--ngx-main-bar-gap, .75rem)}:host .right{flex:1;display:flex;justify-content:flex-end;gap:var(--ngx-main-bar-right-gap, .75rem)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
479
503
  }
480
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxMainBarComponent, decorators: [{
504
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMainBarComponent, decorators: [{
481
505
  type: Component,
482
- args: [{ selector: 'ngx-main-bar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"ngx-actions-group\"></ng-content>\n\n<div class=\"right\">\n <ng-content select=\"ngx-filters-group\"></ng-content>\n <ng-content select=\"ngx-search-bar-container\"></ng-content>\n</div>\n", styles: ["ngx-main-bar{display:flex;align-items:center;padding-block:var(--ngx-main-bar-padding-block, .25rem);gap:var(--ngx-main-bar-gap, .75rem)}ngx-main-bar .right{flex:1;display:flex;justify-content:flex-end;gap:var(--ngx-main-bar-right-gap, .75rem)}ngx-main-bar ngx-actions-group{flex:1;min-inline-size:var(--ngx-main-bar-action-min-inline-size, 3rem)}\n"] }]
506
+ args: [{ selector: 'ngx-main-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"ngx-actions-group\"></ng-content>\n<ng-content select=\"[ngxContentLeft]\"></ng-content>\n<div class=\"right\">\n <ng-content select=\"ngx-filters-group\"></ng-content>\n <ng-content select=\"ngx-search-bar-container\"></ng-content>\n <ng-content select=\"[ngxContentRight]\"></ng-content>\n</div>\n", styles: [":host{display:flex;align-items:center;padding:var(--ngx-main-bar-padding, .25rem 1rem);gap:var(--ngx-main-bar-gap, .75rem)}:host .right{flex:1;display:flex;justify-content:flex-end;gap:var(--ngx-main-bar-right-gap, .75rem)}\n"] }]
483
507
  }] });
484
508
 
485
509
  class NgxPanelComponent {
486
- appearance = input(undefined, ...(ngDevMode ? [{ debugName: "appearance" }] : []));
487
- contentPadding = input(undefined, ...(ngDevMode ? [{ debugName: "contentPadding" }] : []));
488
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
489
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: NgxPanelComponent, isStandalone: true, selector: "ngx-panel", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.appearance": "this.appearance()" } }, ngImport: i0, template: "<ng-content select=\"ngx-panel-bar\"></ng-content>\n<section class=\"content\" [class.no-padding]=\"contentPadding() === 'none'\">\n <ng-content></ng-content>\n</section>\n", styles: ["ngx-panel{display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;block-size:100%;border-radius:var(--ngx-panel-radius, 2rem);padding-block:var(--ngx-panel-padding-block, .25rem);background-color:var(--mat-sys-surface-container-lowest);min-width:min-content}ngx-panel[appearance=transparent]{background-color:transparent}ngx-panel .content{overflow:auto;display:flex;flex-direction:column;gap:var(--ngx-panel-content-gap, .5rem);padding-inline:var(--ngx-panel-content-padding-inline, .5rem);padding-block-end:var(--ngx-panel-content-padding-block-end, .75rem);flex:1}ngx-panel .content.no-padding{padding:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
510
+ appearance = input(undefined, ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
511
+ contentPadding = input(undefined, ...(ngDevMode ? [{ debugName: "contentPadding" }] : /* istanbul ignore next */ []));
512
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
513
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: NgxPanelComponent, isStandalone: true, selector: "ngx-panel", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.appearance": "this.appearance()" } }, ngImport: i0, template: "<ng-content select=\"ngx-panel-bar\"></ng-content>\n<section class=\"content\" [class.no-padding]=\"contentPadding() === 'none'\">\n <ng-content></ng-content>\n</section>\n", styles: ["ngx-panel{display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;block-size:100%;border-radius:var(--ngx-panel-radius, 2rem);padding:var(--ngx-panel-padding, .25rem);background-color:var(--mat-sys-surface-container-lowest);min-width:min-content}ngx-panel[appearance=transparent]{background-color:transparent}ngx-panel .content{overflow:auto;display:flex;flex-direction:column;gap:var(--ngx-panel-content-gap, .5rem);padding:var(--ngx-panel-content-padding, .25rem .75rem);flex:1}ngx-panel .content:has(>ngx-column){padding:0;flex-direction:row;gap:var(--ngx-panel-content-column-gap, .5rem)}ngx-panel .content:has(>ngx-column) ngx-column+ngx-column:before{position:absolute;content:\"\";display:block;width:var(--ngx-panel-content-column-divider-width, 1px);background-color:var(--mat-sys-outline-variant);inset-block:0;inset-inline-start:var(--ngx-panel-content-divider-inset-inline-start, -4px)}ngx-panel .content:has(>ngx-column) ngx-column:first-child{--ngx-column-bar-title-first-child-padding-inline-start: .5rem}ngx-panel .content:has(>ngx-column) ngx-column:first-child>section.content{margin-inline-start:var(--ngx-panel-content-first-column-margin-inline-start, .25rem)}ngx-panel .content:has(>ngx-column) ngx-column:last-child section.content{margin-inline-end:var(--ngx-panel-content-last-column-margin-inline-end, .25rem)}ngx-panel .content.no-padding{padding:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
490
514
  }
491
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxPanelComponent, decorators: [{
515
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxPanelComponent, decorators: [{
492
516
  type: Component,
493
517
  args: [{ selector: 'ngx-panel', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
494
518
  // eslint-disable-next-line @typescript-eslint/naming-convention
495
519
  '[attr.appearance]': 'this.appearance()'
496
- }, template: "<ng-content select=\"ngx-panel-bar\"></ng-content>\n<section class=\"content\" [class.no-padding]=\"contentPadding() === 'none'\">\n <ng-content></ng-content>\n</section>\n", styles: ["ngx-panel{display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;block-size:100%;border-radius:var(--ngx-panel-radius, 2rem);padding-block:var(--ngx-panel-padding-block, .25rem);background-color:var(--mat-sys-surface-container-lowest);min-width:min-content}ngx-panel[appearance=transparent]{background-color:transparent}ngx-panel .content{overflow:auto;display:flex;flex-direction:column;gap:var(--ngx-panel-content-gap, .5rem);padding-inline:var(--ngx-panel-content-padding-inline, .5rem);padding-block-end:var(--ngx-panel-content-padding-block-end, .75rem);flex:1}ngx-panel .content.no-padding{padding:0}\n"] }]
520
+ }, template: "<ng-content select=\"ngx-panel-bar\"></ng-content>\n<section class=\"content\" [class.no-padding]=\"contentPadding() === 'none'\">\n <ng-content></ng-content>\n</section>\n", styles: ["ngx-panel{display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;block-size:100%;border-radius:var(--ngx-panel-radius, 2rem);padding:var(--ngx-panel-padding, .25rem);background-color:var(--mat-sys-surface-container-lowest);min-width:min-content}ngx-panel[appearance=transparent]{background-color:transparent}ngx-panel .content{overflow:auto;display:flex;flex-direction:column;gap:var(--ngx-panel-content-gap, .5rem);padding:var(--ngx-panel-content-padding, .25rem .75rem);flex:1}ngx-panel .content:has(>ngx-column){padding:0;flex-direction:row;gap:var(--ngx-panel-content-column-gap, .5rem)}ngx-panel .content:has(>ngx-column) ngx-column+ngx-column:before{position:absolute;content:\"\";display:block;width:var(--ngx-panel-content-column-divider-width, 1px);background-color:var(--mat-sys-outline-variant);inset-block:0;inset-inline-start:var(--ngx-panel-content-divider-inset-inline-start, -4px)}ngx-panel .content:has(>ngx-column) ngx-column:first-child{--ngx-column-bar-title-first-child-padding-inline-start: .5rem}ngx-panel .content:has(>ngx-column) ngx-column:first-child>section.content{margin-inline-start:var(--ngx-panel-content-first-column-margin-inline-start, .25rem)}ngx-panel .content:has(>ngx-column) ngx-column:last-child section.content{margin-inline-end:var(--ngx-panel-content-last-column-margin-inline-end, .25rem)}ngx-panel .content.no-padding{padding:0}\n"] }]
497
521
  }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], contentPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPadding", required: false }] }] } });
498
522
 
499
523
  class NgxPanelBarComponent {
500
524
  // inputs
501
- hasBackButton = input(...(ngDevMode ? [undefined, { debugName: "hasBackButton" }] : []));
502
- closable = input(...(ngDevMode ? [undefined, { debugName: "closable" }] : []));
525
+ hasBackButton = input(...(ngDevMode ? [undefined, { debugName: "hasBackButton" }] : /* istanbul ignore next */ []));
526
+ closable = input(...(ngDevMode ? [undefined, { debugName: "closable" }] : /* istanbul ignore next */ []));
503
527
  // output
504
528
  backClicked = output();
505
529
  closeClicked = output();
506
530
  intl = inject(NgxLayoutIntl, { optional: true });
507
- hasRightContent = computed(() => !!((this.searchBarContainer() ?? this.filtersGroup()) ?? this.closable()), ...(ngDevMode ? [{ debugName: "hasRightContent" }] : []));
508
- filtersGroup = contentChild(NgxFiltersGroupComponent, ...(ngDevMode ? [{ debugName: "filtersGroup" }] : []));
509
- searchBarContainer = contentChild(NgxSearchBarContainerComponent, ...(ngDevMode ? [{ debugName: "searchBarContainer" }] : []));
531
+ hasRightContent = computed(() => !!((this.searchBarContainer() ?? this.filtersGroup()) ?? this.closable()), ...(ngDevMode ? [{ debugName: "hasRightContent" }] : /* istanbul ignore next */ []));
532
+ hasTitle = computed(() => !!this.barTitle(), ...(ngDevMode ? [{ debugName: "hasTitle" }] : /* istanbul ignore next */ []));
533
+ filtersGroup = contentChild(NgxFiltersGroupComponent, ...(ngDevMode ? [{ debugName: "filtersGroup" }] : /* istanbul ignore next */ []));
534
+ searchBarContainer = contentChild(NgxSearchBarContainerComponent, ...(ngDevMode ? [{ debugName: "searchBarContainer" }] : /* istanbul ignore next */ []));
535
+ barTitle = contentChild(NgxBarTitleDirective, ...(ngDevMode ? [{ debugName: "barTitle" }] : /* istanbul ignore next */ []));
510
536
  emitBackClicked() {
511
537
  this.backClicked.emit();
512
538
  }
513
539
  emitCloseClicked() {
514
540
  this.closeClicked.emit();
515
541
  }
516
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxPanelBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
517
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: NgxPanelBarComponent, isStandalone: true, selector: "ngx-panel-bar", inputs: { hasBackButton: { classPropertyName: "hasBackButton", publicName: "hasBackButton", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backClicked: "backClicked", closeClicked: "closeClicked" }, queries: [{ propertyName: "filtersGroup", first: true, predicate: NgxFiltersGroupComponent, descendants: true, isSignal: true }, { propertyName: "searchBarContainer", first: true, predicate: NgxSearchBarContainerComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasBackButton()) {\n <button\n mat-icon-button\n aria-label=\"Back button\"\n matTooltip=\"{{ intl?.back ?? 'Back' }}\"\n (click)=\"emitBackClicked()\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n}\n\n<ng-content select=\"h1,h2,h3,h4,h5,h6\"></ng-content>\n<ng-content select=\"ngx-actions-group\"></ng-content>\n\n@if (hasRightContent()) {\n <div class=\"right\">\n <ng-content select=\"ngx-filters-group\"></ng-content>\n <ng-content select=\"ngx-search-bar-container\"></ng-content>\n @if (closable()) {\n <button\n mat-icon-button\n class=\"close-button\"\n aria-label=\"Close button\"\n matTooltip=\"{{ intl?.close ?? 'Close' }}\"\n (click)=\"emitCloseClicked()\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </div>\n}\n", styles: ["ngx-panel-bar{display:flex;align-items:center;padding:var(--ngx-panel-bar-padding, .25rem .5rem);gap:var(--ngx-panel-bar-gap, .75rem);min-height:var(--ngx-panel-bar-min-height, 3rem);flex-wrap:nowrap}ngx-panel-bar h1,ngx-panel-bar h2,ngx-panel-bar h3,ngx-panel-bar h4,ngx-panel-bar h5,ngx-panel-bar h6{flex:1;white-space:nowrap;margin:0;font:var(--mat-sys-title-large);letter-spacing:var(--mat-sys-title-large-tracking);color:var(--mat-sys-on-surface-variant);overflow:hidden;min-width:var(--ngx-panel-bar-title-min-width, 6ch);text-overflow:ellipsis}ngx-panel-bar h1:first-child,ngx-panel-bar h2:first-child,ngx-panel-bar h3:first-child,ngx-panel-bar h4:first-child,ngx-panel-bar h5:first-child,ngx-panel-bar h6:first-child{padding-inline-start:var(--ngx-panel-bar-title-first-child-padding-start, .25rem)}ngx-panel-bar:has(h1,h2,h3,h4,h5,h6) ngx-actions-group{justify-content:flex-end}ngx-panel-bar .right,ngx-panel-bar ngx-actions-group{display:flex;align-items:center;gap:var(--ngx-panel-bar-elements-gap, .75rem)}ngx-panel-bar .right{flex:1;justify-content:flex-end}ngx-panel-bar ngx-actions-group{flex:1;min-inline-size:var(--ngx-panel-bar-actions-group-min-inline-size, 3rem)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
542
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxPanelBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
543
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: NgxPanelBarComponent, isStandalone: true, selector: "ngx-panel-bar", inputs: { hasBackButton: { classPropertyName: "hasBackButton", publicName: "hasBackButton", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backClicked: "backClicked", closeClicked: "closeClicked" }, queries: [{ propertyName: "filtersGroup", first: true, predicate: NgxFiltersGroupComponent, descendants: true, isSignal: true }, { propertyName: "searchBarContainer", first: true, predicate: NgxSearchBarContainerComponent, descendants: true, isSignal: true }, { propertyName: "barTitle", first: true, predicate: NgxBarTitleDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasBackButton()) {\n <button\n mat-icon-button\n aria-label=\"Back button\"\n matTooltip=\"{{ intl?.back ?? 'Back' }}\"\n (click)=\"emitBackClicked()\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n}\n\n@if (hasTitle()) {\n <ng-content select=\"[ngxBarTitle]\"></ng-content>\n <ng-container [ngTemplateOutlet]=\"ngContentLeft\"></ng-container>\n} @else {\n <ng-container [ngTemplateOutlet]=\"actionsGroup\"></ng-container>\n}\n\n\n@if (hasRightContent()) {\n <div class=\"right\">\n @if(hasTitle()) {\n <ng-container [ngTemplateOutlet]=\"actionsGroup\"></ng-container>\n } @else {\n <ng-container [ngTemplateOutlet]=\"ngContentLeft\"></ng-container>\n }\n <ng-content select=\"ngx-filters-group\"></ng-content>\n <ng-content select=\"ngx-search-bar-container\"></ng-content>\n <ng-content select=\"[ngxContentRight]\"></ng-content>\n @if (closable()) {\n <button\n mat-icon-button\n class=\"close-button\"\n aria-label=\"Close button\"\n matTooltip=\"{{ intl?.close ?? 'Close' }}\"\n (click)=\"emitCloseClicked()\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </div>\n}\n\n<ng-template #actionsGroup>\n <ng-content select=\"ngx-actions-group\"></ng-content>\n</ng-template>\n\n<ng-template #ngContentLeft>\n <ng-content select=\"[ngxContentLeft]\"></ng-content>\n</ng-template>\n", styles: ["ngx-panel-bar{display:flex;align-items:center;padding:var(--ngx-panel-bar-padding, .25rem);gap:var(--ngx-panel-bar-gap, .75rem);min-height:var(--ngx-panel-bar-min-height, 3rem);flex-wrap:nowrap}ngx-panel-bar h1,ngx-panel-bar h2,ngx-panel-bar h3,ngx-panel-bar h4,ngx-panel-bar h5,ngx-panel-bar h6{white-space:nowrap;margin:0;font:var(--mat-sys-title-large);letter-spacing:var(--mat-sys-title-large-tracking);color:var(--mat-sys-on-surface-variant);overflow:hidden;min-width:var(--ngx-panel-bar-title-min-width, 6ch);text-overflow:ellipsis}ngx-panel-bar h1:first-child,ngx-panel-bar h2:first-child,ngx-panel-bar h3:first-child,ngx-panel-bar h4:first-child,ngx-panel-bar h5:first-child,ngx-panel-bar h6:first-child{padding-inline-start:var(--ngx-panel-bar-title-first-child-padding-start, .5rem)}ngx-panel-bar:has(h1,h2,h3,h4,h5,h6) .right:has(ngx-actions-group) ngx-filters-group{flex:none}ngx-panel-bar:has(h1,h2,h3,h4,h5,h6) ngx-actions-group{justify-content:flex-end}ngx-panel-bar .right,ngx-panel-bar ngx-actions-group{display:flex;align-items:center;gap:var(--ngx-panel-bar-elements-gap, .75rem)}ngx-panel-bar .right{flex:1;justify-content:flex-end}ngx-panel-bar ngx-actions-group{flex:1;min-inline-size:var(--ngx-panel-bar-actions-group-min-inline-size, 3rem)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
518
544
  }
519
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxPanelBarComponent, decorators: [{
545
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxPanelBarComponent, decorators: [{
520
546
  type: Component,
521
- args: [{ selector: 'ngx-panel-bar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, MatIconButton, MatTooltip], template: "@if (hasBackButton()) {\n <button\n mat-icon-button\n aria-label=\"Back button\"\n matTooltip=\"{{ intl?.back ?? 'Back' }}\"\n (click)=\"emitBackClicked()\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n}\n\n<ng-content select=\"h1,h2,h3,h4,h5,h6\"></ng-content>\n<ng-content select=\"ngx-actions-group\"></ng-content>\n\n@if (hasRightContent()) {\n <div class=\"right\">\n <ng-content select=\"ngx-filters-group\"></ng-content>\n <ng-content select=\"ngx-search-bar-container\"></ng-content>\n @if (closable()) {\n <button\n mat-icon-button\n class=\"close-button\"\n aria-label=\"Close button\"\n matTooltip=\"{{ intl?.close ?? 'Close' }}\"\n (click)=\"emitCloseClicked()\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </div>\n}\n", styles: ["ngx-panel-bar{display:flex;align-items:center;padding:var(--ngx-panel-bar-padding, .25rem .5rem);gap:var(--ngx-panel-bar-gap, .75rem);min-height:var(--ngx-panel-bar-min-height, 3rem);flex-wrap:nowrap}ngx-panel-bar h1,ngx-panel-bar h2,ngx-panel-bar h3,ngx-panel-bar h4,ngx-panel-bar h5,ngx-panel-bar h6{flex:1;white-space:nowrap;margin:0;font:var(--mat-sys-title-large);letter-spacing:var(--mat-sys-title-large-tracking);color:var(--mat-sys-on-surface-variant);overflow:hidden;min-width:var(--ngx-panel-bar-title-min-width, 6ch);text-overflow:ellipsis}ngx-panel-bar h1:first-child,ngx-panel-bar h2:first-child,ngx-panel-bar h3:first-child,ngx-panel-bar h4:first-child,ngx-panel-bar h5:first-child,ngx-panel-bar h6:first-child{padding-inline-start:var(--ngx-panel-bar-title-first-child-padding-start, .25rem)}ngx-panel-bar:has(h1,h2,h3,h4,h5,h6) ngx-actions-group{justify-content:flex-end}ngx-panel-bar .right,ngx-panel-bar ngx-actions-group{display:flex;align-items:center;gap:var(--ngx-panel-bar-elements-gap, .75rem)}ngx-panel-bar .right{flex:1;justify-content:flex-end}ngx-panel-bar ngx-actions-group{flex:1;min-inline-size:var(--ngx-panel-bar-actions-group-min-inline-size, 3rem)}\n"] }]
522
- }], propDecorators: { hasBackButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackButton", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], backClicked: [{ type: i0.Output, args: ["backClicked"] }], closeClicked: [{ type: i0.Output, args: ["closeClicked"] }], filtersGroup: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgxFiltersGroupComponent), { isSignal: true }] }], searchBarContainer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgxSearchBarContainerComponent), { isSignal: true }] }] } });
547
+ args: [{ selector: 'ngx-panel-bar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, MatIconButton, MatTooltip, NgTemplateOutlet], template: "@if (hasBackButton()) {\n <button\n mat-icon-button\n aria-label=\"Back button\"\n matTooltip=\"{{ intl?.back ?? 'Back' }}\"\n (click)=\"emitBackClicked()\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n}\n\n@if (hasTitle()) {\n <ng-content select=\"[ngxBarTitle]\"></ng-content>\n <ng-container [ngTemplateOutlet]=\"ngContentLeft\"></ng-container>\n} @else {\n <ng-container [ngTemplateOutlet]=\"actionsGroup\"></ng-container>\n}\n\n\n@if (hasRightContent()) {\n <div class=\"right\">\n @if(hasTitle()) {\n <ng-container [ngTemplateOutlet]=\"actionsGroup\"></ng-container>\n } @else {\n <ng-container [ngTemplateOutlet]=\"ngContentLeft\"></ng-container>\n }\n <ng-content select=\"ngx-filters-group\"></ng-content>\n <ng-content select=\"ngx-search-bar-container\"></ng-content>\n <ng-content select=\"[ngxContentRight]\"></ng-content>\n @if (closable()) {\n <button\n mat-icon-button\n class=\"close-button\"\n aria-label=\"Close button\"\n matTooltip=\"{{ intl?.close ?? 'Close' }}\"\n (click)=\"emitCloseClicked()\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </div>\n}\n\n<ng-template #actionsGroup>\n <ng-content select=\"ngx-actions-group\"></ng-content>\n</ng-template>\n\n<ng-template #ngContentLeft>\n <ng-content select=\"[ngxContentLeft]\"></ng-content>\n</ng-template>\n", styles: ["ngx-panel-bar{display:flex;align-items:center;padding:var(--ngx-panel-bar-padding, .25rem);gap:var(--ngx-panel-bar-gap, .75rem);min-height:var(--ngx-panel-bar-min-height, 3rem);flex-wrap:nowrap}ngx-panel-bar h1,ngx-panel-bar h2,ngx-panel-bar h3,ngx-panel-bar h4,ngx-panel-bar h5,ngx-panel-bar h6{white-space:nowrap;margin:0;font:var(--mat-sys-title-large);letter-spacing:var(--mat-sys-title-large-tracking);color:var(--mat-sys-on-surface-variant);overflow:hidden;min-width:var(--ngx-panel-bar-title-min-width, 6ch);text-overflow:ellipsis}ngx-panel-bar h1:first-child,ngx-panel-bar h2:first-child,ngx-panel-bar h3:first-child,ngx-panel-bar h4:first-child,ngx-panel-bar h5:first-child,ngx-panel-bar h6:first-child{padding-inline-start:var(--ngx-panel-bar-title-first-child-padding-start, .5rem)}ngx-panel-bar:has(h1,h2,h3,h4,h5,h6) .right:has(ngx-actions-group) ngx-filters-group{flex:none}ngx-panel-bar:has(h1,h2,h3,h4,h5,h6) ngx-actions-group{justify-content:flex-end}ngx-panel-bar .right,ngx-panel-bar ngx-actions-group{display:flex;align-items:center;gap:var(--ngx-panel-bar-elements-gap, .75rem)}ngx-panel-bar .right{flex:1;justify-content:flex-end}ngx-panel-bar ngx-actions-group{flex:1;min-inline-size:var(--ngx-panel-bar-actions-group-min-inline-size, 3rem)}\n"] }]
548
+ }], propDecorators: { hasBackButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackButton", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], backClicked: [{ type: i0.Output, args: ["backClicked"] }], closeClicked: [{ type: i0.Output, args: ["closeClicked"] }], filtersGroup: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgxFiltersGroupComponent), { isSignal: true }] }], searchBarContainer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgxSearchBarContainerComponent), { isSignal: true }] }], barTitle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgxBarTitleDirective), { isSignal: true }] }] } });
523
549
 
524
550
  /**
525
551
  * Generated bundle index. Do not edit.
526
552
  */
527
553
 
528
- export { NgxActionsGroupComponent, NgxAppBarComponent, NgxColumnBarComponent, NgxFilterDirective, NgxFilterToggleDirective, NgxFiltersGroupComponent, NgxLayoutComponent, NgxLayoutIntl, NgxMainBarComponent, NgxPanelBarComponent, NgxPanelComponent, NgxSearchBarContainerComponent, NgxSearchInputDirective, provideNgxLayout };
554
+ export { NgxActionsGroupComponent, NgxAppBarComponent, NgxBarTitleDirective, NgxColumnBarComponent, NgxColumnComponent, NgxFilterDirective, NgxFilterToggleDirective, NgxFiltersGroupComponent, NgxLayoutComponent, NgxLayoutIntl, NgxMainBarComponent, NgxPanelBarComponent, NgxPanelComponent, NgxSearchBarContainerComponent, NgxSearchInputDirective, provideNgxLayout };
529
555
  //# sourceMappingURL=hug-ngx-layout.mjs.map