@table-bro/angular-material 0.0.0-stage → 1.2.0

package/fesm2022/table-bro-angular-material.mjs

@@ -0,0 +1,2142 @@
+import * as i0 from "@angular/core";
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, EnvironmentInjector, Injectable, PLATFORM_ID, afterNextRender, computed, effect, inject, input, makeEnvironmentProviders, model, output, provideAppInitializer, signal, viewChild } from "@angular/core";
+import { MatButton, MatIconButton } from "@angular/material/button";
+import { MatIcon } from "@angular/material/icon";
+import { MatSlideToggle } from "@angular/material/slide-toggle";
+import { isPlatformBrowser } from "@angular/common";
+import { MatSort, MatSortHeader } from "@angular/material/sort";
+import { MatTooltip } from "@angular/material/tooltip";
+import { BroHTML, broCellSelectors, dispatchAction, events, fitCellItems, isPrerendered, registerFilterDrawerProperties, registerSkin, resolveTexts } from "@table-bro/core";
+import { MatChip, MatChipSet } from "@angular/material/chips";
+import { FocusMonitor, InputModalityDetector } from "@angular/cdk/a11y";
+import { MatDrawer, MatDrawerContainer, MatDrawerContent } from "@angular/material/sidenav";
+import { MatToolbar } from "@angular/material/toolbar";
+import { TABLE_BRO_ELEMENTS, TableBroNg } from "@table-bro/angular";
+import { MatDivider } from "@angular/material/divider";
+import { MatMenu, MatMenuItem, MatMenuTrigger } from "@angular/material/menu";
+import { createCustomElement } from "@angular/elements";
+import { MatPaginator } from "@angular/material/paginator";
+import { MatProgressBar } from "@angular/material/progress-bar";
+const matSkinConfig = {
+	css: {
+		table: {
+			className: "mat-table",
+			thead: { tr: {
+				className: "mat-header-row bro-header-row",
+				th: { className: "mat-header-cell bro-header-cell" }
+			} },
+			tbody: { tr: {
+				className: "mat-row bro-row",
+				td: { className: "mat-cell bro-cell" }
+			} }
+		},
+		shadow: { className: "mat-elevation-z16" }
+	},
+	components: {
+		button: {
+			selector: "bro-mat-button",
+			iconSelector: ".mat-icon",
+			beforeRender: (element, value) => {
+				element.setAttribute("button-title", value);
+				element.setAttribute("icon", "expand_more");
+			}
+		},
+		filterDrawer: {},
+		fontIcon: { html: (materialIcon) => `<span class="material-icons bro-state-icon" aria-hidden="true">${materialIcon}</span>` },
+		paginator: {
+			selector: "ng-mat-paginator",
+			inputsAsProperties: true,
+			recreateOnReplaceRows: true
+		},
+		progressBar: { selector: "ng-mat-progress-bar" },
+		sortHeader: {
+			selector: "bro-mat-sort-header",
+			titleAsContent: true,
+			contentSelector: ".mat-sort-header-content"
+		},
+		state: {
+			fontIcon: true,
+			states: {
+				loading: ["front_loader", "Loading"],
+				"no-data": ["heart_broken", "No data"],
+				"not-found": ["heart_broken", "No records found"],
+				fail: ["smart_toy", "Failed"]
+			}
+		},
+		switch: { selector: "bro-mat-slide-toggle" },
+		textEllipsis: { selector: "bro-mat-text-ellipsis" },
+		toolbar: { selector: "ng-mat-toolbar" },
+		toolbarMain: { selector: "bro-mat-toolbar-main" },
+		toolbarSearch: { beforeRender: (backButton, clearButton) => {
+			backButton.setAttribute("icon", "arrow_back");
+			clearButton.setAttribute("icon", "close");
+		} }
+	}
+};
+var BroMaterialButtonComponent = class BroMaterialButtonComponent {
+	constructor() {
+		this.buttonClassName = input(void 0, {
+			...ngDevMode ? { debugName: "buttonClassName" } : /* istanbul ignore next */ {},
+			alias: "button-class"
+		});
+		this.buttonTitle = input("", {
+			...ngDevMode ? { debugName: "buttonTitle" } : /* istanbul ignore next */ {},
+			alias: "button-title"
+		});
+		this.eventType = input("", {
+			...ngDevMode ? { debugName: "eventType" } : /* istanbul ignore next */ {},
+			alias: "event-type"
+		});
+		this.icon = input(...ngDevMode ? [void 0, { debugName: "icon" }] : /* istanbul ignore next */ []);
+		this.label = input(...ngDevMode ? [void 0, { debugName: "label" }] : /* istanbul ignore next */ []);
+		this.action = output();
+	}
+	onClickButton() {
+		this.action.emit(this.eventType());
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: BroMaterialButtonComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: BroMaterialButtonComponent,
+			isStandalone: true,
+			selector: "ng-component",
+			inputs: {
+				buttonClassName: {
+					classPropertyName: "buttonClassName",
+					publicName: "button-class",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				buttonTitle: {
+					classPropertyName: "buttonTitle",
+					publicName: "button-title",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				eventType: {
+					classPropertyName: "eventType",
+					publicName: "event-type",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				icon: {
+					classPropertyName: "icon",
+					publicName: "icon",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: { action: "action" },
+			ngImport: i0,
+			template: `
+    @if (buttonTitle()) {
+      <button matButton
+              type="button" [class]="buttonClassName()"
+              [attr.aria-label]="label()"
+              (click)="onClickButton()">
+        @if (icon()) {
+          <mat-icon>{{ icon() }}</mat-icon>
+        }
+        {{ buttonTitle() }}
+      </button>
+    } @else if (icon()) {
+      <button matIconButton
+              type="button"
+              [class]="buttonClassName()"
+              [attr.aria-label]="label()"
+              (click)="onClickButton()">
+        <mat-icon>{{ icon() }}</mat-icon>
+      </button>
+    }`,
+			isInline: true,
+			dependencies: [
+				{
+					kind: "component",
+					type: MatButton,
+					selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ",
+					inputs: ["matButton"],
+					exportAs: ["matButton", "matAnchor"]
+				},
+				{
+					kind: "component",
+					type: 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"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: BroMaterialButtonComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			template: `
+    @if (buttonTitle()) {
+      <button matButton
+              type="button" [class]="buttonClassName()"
+              [attr.aria-label]="label()"
+              (click)="onClickButton()">
+        @if (icon()) {
+          <mat-icon>{{ icon() }}</mat-icon>
+        }
+        {{ buttonTitle() }}
+      </button>
+    } @else if (icon()) {
+      <button matIconButton
+              type="button"
+              [class]="buttonClassName()"
+              [attr.aria-label]="label()"
+              (click)="onClickButton()">
+        <mat-icon>{{ icon() }}</mat-icon>
+      </button>
+    }`,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				MatButton,
+				MatIcon,
+				MatIconButton
+			]
+		}]
+	}],
+	propDecorators: {
+		buttonClassName: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "button-class",
+				required: false
+			}]
+		}],
+		buttonTitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "button-title",
+				required: false
+			}]
+		}],
+		eventType: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "event-type",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		action: [{
+			type: i0.Output,
+			args: ["action"]
+		}]
+	}
+});
+var BroMaterialSlideToggleComponent = class BroMaterialSlideToggleComponent {
+	constructor() {
+		this.col = input(...ngDevMode ? [void 0, { debugName: "col" }] : /* istanbul ignore next */ []);
+		this.row = input(...ngDevMode ? [void 0, { debugName: "row" }] : /* istanbul ignore next */ []);
+		this.name = input(...ngDevMode ? [void 0, { debugName: "name" }] : /* istanbul ignore next */ []);
+		this.action = output();
+		this.checked = computed(() => {
+			const name = this.col()?.name;
+			return !!(name && this.row()?.[name]);
+		}, ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
+	}
+	onChange() {
+		const name = this.name();
+		if (name) this.action.emit(name);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: BroMaterialSlideToggleComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: BroMaterialSlideToggleComponent,
+			isStandalone: true,
+			selector: "ng-component",
+			inputs: {
+				col: {
+					classPropertyName: "col",
+					publicName: "col",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				row: {
+					classPropertyName: "row",
+					publicName: "row",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				name: {
+					classPropertyName: "name",
+					publicName: "name",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: { action: "action" },
+			ngImport: i0,
+			template: `
+    <mat-slide-toggle [hideIcon]="true" [checked]="checked()" [aria-label]="col()?.title ?? null" (change)="onChange()"></mat-slide-toggle>`,
+			isInline: true,
+			dependencies: [{
+				kind: "component",
+				type: MatSlideToggle,
+				selector: "mat-slide-toggle",
+				inputs: [
+					"name",
+					"id",
+					"labelPosition",
+					"aria-label",
+					"aria-labelledby",
+					"aria-describedby",
+					"required",
+					"color",
+					"disabled",
+					"fullWidth",
+					"disableRipple",
+					"tabIndex",
+					"checked",
+					"hideIcon",
+					"disabledInteractive"
+				],
+				outputs: ["change", "toggleChange"],
+				exportAs: ["matSlideToggle"]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: BroMaterialSlideToggleComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			template: `
+    <mat-slide-toggle [hideIcon]="true" [checked]="checked()" [aria-label]="col()?.title ?? null" (change)="onChange()"></mat-slide-toggle>`,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [MatSlideToggle]
+		}]
+	}],
+	propDecorators: {
+		col: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "col",
+				required: false
+			}]
+		}],
+		row: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "row",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		action: [{
+			type: i0.Output,
+			args: ["action"]
+		}]
+	}
+});
+var BroMaterialSortHeaderComponent = class BroMaterialSortHeaderComponent {
+	constructor() {
+		this.activeSort = input(...ngDevMode ? [void 0, { debugName: "activeSort" }] : /* istanbul ignore next */ []);
+		this.arrowPosition = input("after", {
+			...ngDevMode ? { debugName: "arrowPosition" } : /* istanbul ignore next */ {},
+			alias: "arrow-position"
+		});
+		this.dataType = input(void 0, {
+			...ngDevMode ? { debugName: "dataType" } : /* istanbul ignore next */ {},
+			alias: "data-type"
+		});
+		this.headerTitle = input("", {
+			...ngDevMode ? { debugName: "headerTitle" } : /* istanbul ignore next */ {},
+			alias: "header-title"
+		});
+		this.sortId = input("", {
+			...ngDevMode ? { debugName: "sortId" } : /* istanbul ignore next */ {},
+			alias: "sort-id"
+		});
+		this.tooltip = input("", ...ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []);
+		this.id = computed(() => this.sortId() || `bro-${Math.random().toString(36).slice(2)}`, ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+		this.matSortDirection = signal("", ...ngDevMode ? [{ debugName: "matSortDirection" }] : /* istanbul ignore next */ []);
+		this.elementRef = inject(ElementRef);
+		this.sortHeader = viewChild(MatSortHeader, {
+			...ngDevMode ? { debugName: "sortHeader" } : /* istanbul ignore next */ {},
+			read: ElementRef
+		});
+		this.sortedDirection = "";
+		effect(() => {
+			const sort = this.activeSort();
+			if (this.sortedDirection !== "" && sort?.sortKey !== this.id()) {
+				this.sortedDirection = "";
+				this.matSortDirection.set("");
+			}
+		});
+		const browser = isPlatformBrowser(inject(PLATFORM_ID));
+		effect((onCleanup) => {
+			const header = this.sortHeader()?.nativeElement;
+			if (!header) return;
+			if (!browser) {
+				header.removeAttribute("aria-sort");
+				return;
+			}
+			const observer = new MutationObserver(() => header.removeAttribute("aria-sort"));
+			header.removeAttribute("aria-sort");
+			observer.observe(header, {
+				attributes: true,
+				attributeFilter: ["aria-sort"]
+			});
+			onCleanup(() => observer.disconnect());
+		});
+	}
+	onSort(event) {
+		dispatchAction(this.elementRef.nativeElement, events.filtersSortEvent, {
+			sortKey: event.active,
+			sortDirection: event.direction || void 0
+		});
+		this.sortedDirection = event.direction;
+		this.matSortDirection.set(event.direction);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: BroMaterialSortHeaderComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: BroMaterialSortHeaderComponent,
+			isStandalone: true,
+			selector: "ng-component",
+			inputs: {
+				activeSort: {
+					classPropertyName: "activeSort",
+					publicName: "activeSort",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				arrowPosition: {
+					classPropertyName: "arrowPosition",
+					publicName: "arrow-position",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				dataType: {
+					classPropertyName: "dataType",
+					publicName: "data-type",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				headerTitle: {
+					classPropertyName: "headerTitle",
+					publicName: "header-title",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				sortId: {
+					classPropertyName: "sortId",
+					publicName: "sort-id",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				tooltip: {
+					classPropertyName: "tooltip",
+					publicName: "tooltip",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			viewQueries: [{
+				propertyName: "sortHeader",
+				first: true,
+				predicate: MatSortHeader,
+				descendants: true,
+				read: ElementRef,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: `
+    @if (headerTitle()) {
+      <div matSort matSortStart="desc"
+           [matSortDirection]="matSortDirection()"
+           (matSortChange)="onSort($event)">
+        <div [mat-sort-header]="id()" matTooltipPosition="right"
+             [arrowPosition]="arrowPosition()" [matTooltip]="tooltip()">
+          <ng-content></ng-content>
+        </div>
+      </div>
+    }`,
+			isInline: true,
+			dependencies: [
+				{
+					kind: "directive",
+					type: MatSort,
+					selector: "[matSort]",
+					inputs: [
+						"matSortActive",
+						"matSortStart",
+						"matSortDirection",
+						"matSortDisableClear",
+						"matSortDisabled"
+					],
+					outputs: ["matSortChange"],
+					exportAs: ["matSort"]
+				},
+				{
+					kind: "component",
+					type: MatSortHeader,
+					selector: "[mat-sort-header]",
+					inputs: [
+						"mat-sort-header",
+						"arrowPosition",
+						"start",
+						"disabled",
+						"sortActionDescription",
+						"disableClear"
+					],
+					exportAs: ["matSortHeader"]
+				},
+				{
+					kind: "directive",
+					type: MatTooltip,
+					selector: "[matTooltip]",
+					inputs: [
+						"matTooltipPosition",
+						"matTooltipPositionAtOrigin",
+						"matTooltipDisabled",
+						"matTooltipShowDelay",
+						"matTooltipHideDelay",
+						"matTooltipTouchGestures",
+						"matTooltip",
+						"matTooltipClass"
+					],
+					exportAs: ["matTooltip"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: BroMaterialSortHeaderComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			template: `
+    @if (headerTitle()) {
+      <div matSort matSortStart="desc"
+           [matSortDirection]="matSortDirection()"
+           (matSortChange)="onSort($event)">
+        <div [mat-sort-header]="id()" matTooltipPosition="right"
+             [arrowPosition]="arrowPosition()" [matTooltip]="tooltip()">
+          <ng-content></ng-content>
+        </div>
+      </div>
+    }`,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				MatSort,
+				MatSortHeader,
+				MatTooltip
+			]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		activeSort: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeSort",
+				required: false
+			}]
+		}],
+		arrowPosition: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "arrow-position",
+				required: false
+			}]
+		}],
+		dataType: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data-type",
+				required: false
+			}]
+		}],
+		headerTitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "header-title",
+				required: false
+			}]
+		}],
+		sortId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sort-id",
+				required: false
+			}]
+		}],
+		tooltip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tooltip",
+				required: false
+			}]
+		}],
+		sortHeader: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => MatSortHeader), {
+				read: ElementRef,
+				isSignal: true
+			}]
+		}]
+	}
+});
+var TableBroMatTagsTexts = class TableBroMatTagsTexts {
+	constructor() {
+		this.empty = signal(void 0, ...ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: TableBroMatTagsTexts,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: TableBroMatTagsTexts,
+			providedIn: "root"
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: TableBroMatTagsTexts,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+var BroMaterialTagsComponent = class BroMaterialTagsComponent {
+	constructor() {
+		this.col = input(...ngDevMode ? [void 0, { debugName: "col" }] : /* istanbul ignore next */ []);
+		this.row = input(...ngDevMode ? [void 0, { debugName: "row" }] : /* istanbul ignore next */ []);
+		this.config = input(...ngDevMode ? [void 0, { debugName: "config" }] : /* istanbul ignore next */ []);
+		this.chipList = computed(() => {
+			const name = this.col()?.name;
+			const items = name && this.row()?.[name];
+			return Array.isArray(items) && items.length ? items : [this.texts.empty() ?? this.config()?.texts.noItems ?? "No data"];
+		}, ...ngDevMode ? [{ debugName: "chipList" }] : /* istanbul ignore next */ []);
+		this.elementRef = inject(ElementRef);
+		this.texts = inject(TableBroMatTagsTexts);
+		this.fitting = new AbortController();
+		afterNextRender(() => {
+			const chips = this.elementRef.nativeElement.querySelector(".mdc-evolution-chip-set__chips");
+			if (chips) fitCellItems(chips, this.fitting.signal);
+		});
+		inject(DestroyRef).onDestroy(() => this.fitting.abort());
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: BroMaterialTagsComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: BroMaterialTagsComponent,
+			isStandalone: true,
+			selector: "ng-component",
+			inputs: {
+				col: {
+					classPropertyName: "col",
+					publicName: "col",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				row: {
+					classPropertyName: "row",
+					publicName: "row",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				config: {
+					classPropertyName: "config",
+					publicName: "config",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			ngImport: i0,
+			template: `
+    <mat-chip-set>
+      @for (chip of chipList(); track $index) {
+        <mat-chip>{{ chip }}</mat-chip>
+      }
+    </mat-chip-set>`,
+			isInline: true,
+			dependencies: [{
+				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: MatChipSet,
+				selector: "mat-chip-set",
+				inputs: [
+					"disabled",
+					"role",
+					"tabIndex"
+				]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: BroMaterialTagsComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			template: `
+    <mat-chip-set>
+      @for (chip of chipList(); track $index) {
+        <mat-chip>{{ chip }}</mat-chip>
+      }
+    </mat-chip-set>`,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [MatChip, MatChipSet]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		col: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "col",
+				required: false
+			}]
+		}],
+		row: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "row",
+				required: false
+			}]
+		}],
+		config: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "config",
+				required: false
+			}]
+		}]
+	}
+});
+var BroMaterialTextEllipsisComponent = class BroMaterialTextEllipsisComponent {
+	constructor() {
+		this.col = input(...ngDevMode ? [void 0, { debugName: "col" }] : /* istanbul ignore next */ []);
+		this.containerClassName = input(null, {
+			...ngDevMode ? { debugName: "containerClassName" } : /* istanbul ignore next */ {},
+			alias: "container-class"
+		});
+		this.value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+		this.tooltip = computed(() => this.col()?.html ? BroHTML.text(this.value()) : this.value(), ...ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []);
+		this.tableCellTextEllipsisContainer = broCellSelectors.ellipsisContainer;
+		this.tableCellTextEllipsis = broCellSelectors.ellipsis;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: BroMaterialTextEllipsisComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: BroMaterialTextEllipsisComponent,
+			isStandalone: true,
+			selector: "ng-component",
+			inputs: {
+				col: {
+					classPropertyName: "col",
+					publicName: "col",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				containerClassName: {
+					classPropertyName: "containerClassName",
+					publicName: "container-class",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				value: {
+					classPropertyName: "value",
+					publicName: "value",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			ngImport: i0,
+			template: `
+    <span matTooltipPosition="above"
+          class="{{ tableCellTextEllipsisContainer }}{{ containerClassName() ? ' ' + containerClassName() : '' }}"
+          [matTooltip]="tooltip()">
+      @if (col()?.html) {
+        <span class="{{ tableCellTextEllipsis }}" [innerHTML]="value()"></span>
+      } @else {
+        <span class="{{ tableCellTextEllipsis }}">{{ value() }}</span>
+      }
+    </span>`,
+			isInline: true,
+			dependencies: [{
+				kind: "directive",
+				type: MatTooltip,
+				selector: "[matTooltip]",
+				inputs: [
+					"matTooltipPosition",
+					"matTooltipPositionAtOrigin",
+					"matTooltipDisabled",
+					"matTooltipShowDelay",
+					"matTooltipHideDelay",
+					"matTooltipTouchGestures",
+					"matTooltip",
+					"matTooltipClass"
+				],
+				exportAs: ["matTooltip"]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: BroMaterialTextEllipsisComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			template: `
+    <span matTooltipPosition="above"
+          class="{{ tableCellTextEllipsisContainer }}{{ containerClassName() ? ' ' + containerClassName() : '' }}"
+          [matTooltip]="tooltip()">
+      @if (col()?.html) {
+        <span class="{{ tableCellTextEllipsis }}" [innerHTML]="value()"></span>
+      } @else {
+        <span class="{{ tableCellTextEllipsis }}">{{ value() }}</span>
+      }
+    </span>`,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [MatTooltip]
+		}]
+	}],
+	propDecorators: {
+		col: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "col",
+				required: false
+			}]
+		}],
+		containerClassName: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "container-class",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}]
+	}
+});
+var TableBroFilterDrawerContainerNg = class TableBroFilterDrawerContainerNg {
+	constructor() {
+		this.cols = input.required(...ngDevMode ? [{ debugName: "cols" }] : /* istanbul ignore next */ []);
+		this.rows = input.required(...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+		this.conf = input.required(...ngDevMode ? [{ debugName: "conf" }] : /* istanbul ignore next */ []);
+		this.total = input(...ngDevMode ? [void 0, { debugName: "total" }] : /* istanbul ignore next */ []);
+		this.rowsToAppend = input(...ngDevMode ? [void 0, { debugName: "rowsToAppend" }] : /* istanbul ignore next */ []);
+		this.loading = input(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+		this.failed = input(false, ...ngDevMode ? [{ debugName: "failed" }] : /* istanbul ignore next */ []);
+		this.filter = input(...ngDevMode ? [void 0, { debugName: "filter" }] : /* istanbul ignore next */ []);
+		this.emptyState = input(...ngDevMode ? [void 0, { debugName: "emptyState" }] : /* istanbul ignore next */ []);
+		this.tableId = input(...ngDevMode ? [void 0, { debugName: "tableId" }] : /* istanbul ignore next */ []);
+		this.theme = input(...ngDevMode ? [void 0, { debugName: "theme" }] : /* istanbul ignore next */ []);
+		this.action = output();
+		this.query = output();
+		this.opened = model(false, ...ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []);
+		this.mode = input("side", ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+		this.over = signal(false, ...ngDevMode ? [{ debugName: "over" }] : /* istanbul ignore next */ []);
+		this.drawerMode = computed(() => this.over() ? "over" : this.mode(), ...ngDevMode ? [{ debugName: "drawerMode" }] : /* istanbul ignore next */ []);
+		this.shadowsEnabled = computed(() => this.conf().shadowsEnabled !== false, ...ngDevMode ? [{ debugName: "shadowsEnabled" }] : /* istanbul ignore next */ []);
+		this.shadowClassName = computed(() => this.shadowsEnabled() ? matSkinConfig.css.shadow.className : "", ...ngDevMode ? [{ debugName: "shadowClassName" }] : /* istanbul ignore next */ []);
+		this.texts = computed(() => resolveTexts(this.conf().texts), ...ngDevMode ? [{ debugName: "texts" }] : /* istanbul ignore next */ []);
+		this.dark = signal(false, ...ngDevMode ? [{ debugName: "dark" }] : /* istanbul ignore next */ []);
+		this.light = signal(false, ...ngDevMode ? [{ debugName: "light" }] : /* istanbul ignore next */ []);
+		this.focusMonitor = inject(FocusMonitor);
+		this.host = inject(ElementRef);
+		this.inputModality = inject(InputModalityDetector);
+		this.container = viewChild.required(MatDrawerContainer, ...ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []);
+		this.content = viewChild.required(MatDrawerContent, {
+			...ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {},
+			read: ElementRef
+		});
+		this.drawer = viewChild.required(MatDrawer, ...ngDevMode ? [{ debugName: "drawer" }] : /* istanbul ignore next */ []);
+		this.drawerElement = viewChild.required(MatDrawer, {
+			...ngDevMode ? { debugName: "drawerElement" } : /* istanbul ignore next */ {},
+			read: ElementRef
+		});
+		this.lastClick = null;
+		this.opener = null;
+		const destroyRef = inject(DestroyRef);
+		registerFilterDrawerProperties();
+		afterNextRender(() => {
+			const resizeObserver = new ResizeObserver(() => this.fitMode());
+			resizeObserver.observe(this.host.nativeElement);
+			destroyRef.onDestroy(() => resizeObserver.disconnect());
+		});
+		afterNextRender(() => {
+			this.host.nativeElement.addEventListener("click", (event) => {
+				this.lastClick = event;
+			}, true);
+		});
+		afterNextRender(() => {
+			const table = this.content().nativeElement.querySelector("table-bro");
+			if (!table) return;
+			const readTheme = () => {
+				this.dark.set(table.classList.contains("bro-dark-theme"));
+				this.light.set(table.classList.contains("bro-light-theme"));
+			};
+			const themeObserver = new MutationObserver(readTheme);
+			themeObserver.observe(table, {
+				attributes: true,
+				attributeFilter: ["class"]
+			});
+			destroyRef.onDestroy(() => themeObserver.disconnect());
+			readTheme();
+		});
+	}
+	toggle() {
+		this.setOpened(!this.opened());
+	}
+	onTableAction(event) {
+		if (event.action === events.filtersToggleEvent) {
+			const opener = (this.lastClick && this.lastClick.eventPhase !== Event.NONE ? this.lastClick.target.closest("a[href], button") : null) ?? this.host.nativeElement.ownerDocument.activeElement;
+			this.opener = opener && this.content().nativeElement.contains(opener) ? opener : this.opener;
+			this.toggle();
+			if (this.opened()) this.restoreFocus(true);
+		}
+		this.action.emit(event);
+	}
+	setOpened(opened) {
+		if (opened && this.mode() === "side") {
+			this.over.set(!this.fitsNextToDrawer());
+			this.drawer().mode = this.drawerMode();
+		}
+		this.fitTableColumns(opened);
+		this.opened.set(opened);
+		this.drawer().toggle(opened);
+		this.container().updateContentMargins();
+		if (!opened) this.restoreFocus(true);
+	}
+	onBackdropClick() {
+		queueMicrotask(() => this.restoreFocus(true));
+	}
+	restoreFocus(fromPage) {
+		const focused = this.host.nativeElement.ownerDocument.activeElement;
+		if (this.opener && (this.drawerElement().nativeElement.contains(focused) || fromPage && focused === this.host.nativeElement.ownerDocument.body)) {
+			const origin = this.inputModality.mostRecentModality ?? "program";
+			const options = origin === "mouse" || origin === "touch" ? {
+				preventScroll: true,
+				focusVisible: false
+			} : { preventScroll: true };
+			this.focusMonitor.focusVia(this.opener, origin, options);
+		}
+	}
+	fitMode() {
+		if (!this.opened() || this.mode() !== "side") return;
+		const over = !this.fitsNextToDrawer();
+		if (over === this.over()) return;
+		this.over.set(over);
+		this.drawer().mode = this.drawerMode();
+		this.fitTableColumns(true);
+		this.container().updateContentMargins();
+	}
+	fitsNextToDrawer() {
+		const content = this.content().nativeElement;
+		const table = content.querySelector("table-bro");
+		if (!table) return true;
+		const shadowRoom = this.shadowsEnabled() ? 0 : 2 * parseFloat(getComputedStyle(table).getPropertyValue("--bro-shadow-size"));
+		return content.getBoundingClientRect().width + parseFloat(getComputedStyle(content).marginRight) - shadowRoom - this.drawerElement().nativeElement.offsetWidth >= parseFloat(getComputedStyle(table).getPropertyValue("--bro-table-min-width"));
+	}
+	fitTableColumns(opened) {
+		const content = this.content().nativeElement;
+		const table = content.querySelector("table-bro");
+		if (!table) return;
+		const margin = parseFloat(getComputedStyle(content).marginRight);
+		const targetMargin = opened && this.drawerMode() === "side" ? this.drawerElement().nativeElement.offsetWidth : 0;
+		const shadowRoom = this.shadowsEnabled() ? 0 : 2 * parseFloat(getComputedStyle(table).getPropertyValue("--bro-shadow-size"));
+		dispatchAction(table, events.columnsWidthEvent, content.getBoundingClientRect().width + margin - targetMargin - shadowRoom);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: TableBroFilterDrawerContainerNg,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.2.0",
+			version: "22.2.2",
+			type: TableBroFilterDrawerContainerNg,
+			isStandalone: true,
+			selector: "table-bro-filter-drawer-container-ng",
+			inputs: {
+				cols: {
+					classPropertyName: "cols",
+					publicName: "cols",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				rows: {
+					classPropertyName: "rows",
+					publicName: "rows",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				conf: {
+					classPropertyName: "conf",
+					publicName: "conf",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				total: {
+					classPropertyName: "total",
+					publicName: "total",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				rowsToAppend: {
+					classPropertyName: "rowsToAppend",
+					publicName: "rowsToAppend",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				loading: {
+					classPropertyName: "loading",
+					publicName: "loading",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				failed: {
+					classPropertyName: "failed",
+					publicName: "failed",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				filter: {
+					classPropertyName: "filter",
+					publicName: "filter",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				emptyState: {
+					classPropertyName: "emptyState",
+					publicName: "emptyState",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				tableId: {
+					classPropertyName: "tableId",
+					publicName: "tableId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				theme: {
+					classPropertyName: "theme",
+					publicName: "theme",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				opened: {
+					classPropertyName: "opened",
+					publicName: "opened",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				mode: {
+					classPropertyName: "mode",
+					publicName: "mode",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				action: "action",
+				query: "query",
+				opened: "openedChange"
+			},
+			host: {
+				properties: {
+					"class.bro-dark-theme": "dark()",
+					"class.bro-light-theme": "light()"
+				},
+				classAttribute: "mat"
+			},
+			viewQueries: [
+				{
+					propertyName: "container",
+					first: true,
+					predicate: MatDrawerContainer,
+					descendants: true,
+					isSignal: true
+				},
+				{
+					propertyName: "content",
+					first: true,
+					predicate: MatDrawerContent,
+					descendants: true,
+					read: ElementRef,
+					isSignal: true
+				},
+				{
+					propertyName: "drawer",
+					first: true,
+					predicate: MatDrawer,
+					descendants: true,
+					isSignal: true
+				},
+				{
+					propertyName: "drawerElement",
+					first: true,
+					predicate: MatDrawer,
+					descendants: true,
+					read: ElementRef,
+					isSignal: true
+				}
+			],
+			ngImport: i0,
+			template: `
+    <mat-drawer-container [class.bro-filter-drawer_no-shadow]="!shadowsEnabled()" (backdropClick)="onBackdropClick()">
+      <mat-drawer-content>
+        <table-bro-ng [class.bro-table-shadow-container]="shadowsEnabled()"
+                      [tableId]="tableId()" [cols]="cols()" [rows]="rows()" [conf]="conf()"
+                      [total]="total()" [rowsToAppend]="rowsToAppend()" [emptyState]="emptyState()"
+                      [loading]="loading()" [failed]="failed()"
+                      [filter]="filter()" [theme]="theme()"
+                      (action)="onTableAction($event)"
+                      (query)="query.emit($event)"></table-bro-ng>
+      </mat-drawer-content>
+
+      <mat-drawer position="end"
+                  [class.bro-filter-drawer_no-shadow]="!shadowsEnabled()" [mode]="drawerMode()"
+                  [opened]="opened()" (openedChange)="opened.set($event)" (closedStart)="restoreFocus(false)">
+        <div class="bro-filter-drawer-card" [class]="shadowClassName()">
+          <div class="bro-filter-drawer-header">
+            <mat-toolbar>
+              <span class="bro-filter-drawer-title">{{ texts().filters }}</span>
+
+              <button matIconButton class="bro-filter-drawer-close" type="button"
+                      [attr.aria-label]="texts().close"
+                      (click)="setOpened(false)">
+                <mat-icon>close</mat-icon>
+              </button>
+            </mat-toolbar>
+          </div>
+
+          <div>
+            <ng-content></ng-content>
+          </div>
+        </div>
+      </mat-drawer>
+    </mat-drawer-container>`,
+			isInline: true,
+			styles: [":host{display:block}mat-drawer-container,mat-drawer-content{overflow:visible}.mat-drawer-transition mat-drawer,.mat-drawer-transition mat-drawer-content,.mat-drawer-transition .bro-filter-drawer-card{transition-duration:calc(var(--bro-filter-drawer-duration) * var(--bro-duration-scale));transition-timing-function:cubic-bezier(.4,0,.2,1)}.mat-drawer-transition .bro-filter-drawer-card{transition-property:--bro-filter-drawer-opened}.bro-filter-drawer-header{position:sticky;top:0;z-index:1}\n"],
+			dependencies: [
+				{
+					kind: "component",
+					type: MatDrawer,
+					selector: "mat-drawer",
+					inputs: [
+						"position",
+						"mode",
+						"disableClose",
+						"autoFocus",
+						"opened"
+					],
+					outputs: [
+						"openedChange",
+						"opened",
+						"openedStart",
+						"closed",
+						"closedStart",
+						"positionChanged"
+					],
+					exportAs: ["matDrawer"]
+				},
+				{
+					kind: "component",
+					type: MatDrawerContainer,
+					selector: "mat-drawer-container",
+					inputs: ["autosize", "hasBackdrop"],
+					outputs: ["backdropClick"],
+					exportAs: ["matDrawerContainer"]
+				},
+				{
+					kind: "component",
+					type: MatDrawerContent,
+					selector: "mat-drawer-content"
+				},
+				{
+					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: MatToolbar,
+					selector: "mat-toolbar",
+					inputs: ["color"],
+					exportAs: ["matToolbar"]
+				},
+				{
+					kind: "component",
+					type: TableBroNg,
+					selector: "table-bro-ng",
+					inputs: [
+						"cols",
+						"rows",
+						"conf",
+						"total",
+						"rowsToAppend",
+						"loading",
+						"failed",
+						"filter",
+						"emptyState",
+						"tableId",
+						"theme"
+					],
+					outputs: ["action", "query"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: TableBroFilterDrawerContainerNg,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "table-bro-filter-drawer-container-ng",
+			template: `
+    <mat-drawer-container [class.bro-filter-drawer_no-shadow]="!shadowsEnabled()" (backdropClick)="onBackdropClick()">
+      <mat-drawer-content>
+        <table-bro-ng [class.bro-table-shadow-container]="shadowsEnabled()"
+                      [tableId]="tableId()" [cols]="cols()" [rows]="rows()" [conf]="conf()"
+                      [total]="total()" [rowsToAppend]="rowsToAppend()" [emptyState]="emptyState()"
+                      [loading]="loading()" [failed]="failed()"
+                      [filter]="filter()" [theme]="theme()"
+                      (action)="onTableAction($event)"
+                      (query)="query.emit($event)"></table-bro-ng>
+      </mat-drawer-content>
+
+      <mat-drawer position="end"
+                  [class.bro-filter-drawer_no-shadow]="!shadowsEnabled()" [mode]="drawerMode()"
+                  [opened]="opened()" (openedChange)="opened.set($event)" (closedStart)="restoreFocus(false)">
+        <div class="bro-filter-drawer-card" [class]="shadowClassName()">
+          <div class="bro-filter-drawer-header">
+            <mat-toolbar>
+              <span class="bro-filter-drawer-title">{{ texts().filters }}</span>
+
+              <button matIconButton class="bro-filter-drawer-close" type="button"
+                      [attr.aria-label]="texts().close"
+                      (click)="setOpened(false)">
+                <mat-icon>close</mat-icon>
+              </button>
+            </mat-toolbar>
+          </div>
+
+          <div>
+            <ng-content></ng-content>
+          </div>
+        </div>
+      </mat-drawer>
+    </mat-drawer-container>`,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "mat",
+				"[class.bro-dark-theme]": "dark()",
+				"[class.bro-light-theme]": "light()"
+			},
+			imports: [
+				MatDrawer,
+				MatDrawerContainer,
+				MatDrawerContent,
+				MatIcon,
+				MatIconButton,
+				MatToolbar,
+				TableBroNg
+			],
+			styles: [":host{display:block}mat-drawer-container,mat-drawer-content{overflow:visible}.mat-drawer-transition mat-drawer,.mat-drawer-transition mat-drawer-content,.mat-drawer-transition .bro-filter-drawer-card{transition-duration:calc(var(--bro-filter-drawer-duration) * var(--bro-duration-scale));transition-timing-function:cubic-bezier(.4,0,.2,1)}.mat-drawer-transition .bro-filter-drawer-card{transition-property:--bro-filter-drawer-opened}.bro-filter-drawer-header{position:sticky;top:0;z-index:1}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		cols: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cols",
+				required: true
+			}]
+		}],
+		rows: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rows",
+				required: true
+			}]
+		}],
+		conf: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "conf",
+				required: true
+			}]
+		}],
+		total: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "total",
+				required: false
+			}]
+		}],
+		rowsToAppend: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rowsToAppend",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		failed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "failed",
+				required: false
+			}]
+		}],
+		filter: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filter",
+				required: false
+			}]
+		}],
+		emptyState: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyState",
+				required: false
+			}]
+		}],
+		tableId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tableId",
+				required: false
+			}]
+		}],
+		theme: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "theme",
+				required: false
+			}]
+		}],
+		action: [{
+			type: i0.Output,
+			args: ["action"]
+		}],
+		query: [{
+			type: i0.Output,
+			args: ["query"]
+		}],
+		opened: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "opened",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["openedChange"]
+		}],
+		mode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mode",
+				required: false
+			}]
+		}],
+		container: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => MatDrawerContainer), { isSignal: true }]
+		}],
+		content: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => MatDrawerContent), {
+				read: ElementRef,
+				isSignal: true
+			}]
+		}],
+		drawer: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => MatDrawer), { isSignal: true }]
+		}],
+		drawerElement: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => MatDrawer), {
+				read: ElementRef,
+				isSignal: true
+			}]
+		}]
+	}
+});
+var BroMaterialToolbarMainComponent = class BroMaterialToolbarMainComponent {
+	constructor() {
+		this.config = input(...ngDevMode ? [void 0, { debugName: "config" }] : /* istanbul ignore next */ []);
+		this.buttons = input("[]", ...ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []);
+		this.title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+		this.action = output({ alias: "bro-toolbar" });
+		this.toolbarButtons = computed(() => JSON.parse(this.buttons()), ...ngDevMode ? [{ debugName: "toolbarButtons" }] : /* istanbul ignore next */ []);
+		this.mainButtons = computed(() => this.toolbarButtons().filter((button) => button.mode !== "navbar-dropdown"), ...ngDevMode ? [{ debugName: "mainButtons" }] : /* istanbul ignore next */ []);
+		this.dropdown = computed(() => this.toolbarButtons().find((button) => button.mode === "navbar-dropdown"), ...ngDevMode ? [{ debugName: "dropdown" }] : /* istanbul ignore next */ []);
+	}
+	onClickSearch() {
+		this.action.emit(events.toolbarSearchOpenEvent);
+	}
+	onClickButton(action) {
+		this.action.emit(action);
+	}
+	onMenuAction(event) {
+		this.action.emit(event.detail);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: BroMaterialToolbarMainComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: BroMaterialToolbarMainComponent,
+			isStandalone: true,
+			selector: "ng-component",
+			inputs: {
+				config: {
+					classPropertyName: "config",
+					publicName: "config",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				buttons: {
+					classPropertyName: "buttons",
+					publicName: "buttons",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				title: {
+					classPropertyName: "title",
+					publicName: "title",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: { action: "bro-toolbar" },
+			ngImport: i0,
+			template: `
+    <mat-toolbar>
+      <button matIconButton class="bro-toolbar-placeholder"
+              type="button" aria-label="">
+        <mat-icon>menu</mat-icon>
+      </button>
+
+      <span>{{ title() }}</span>
+
+      <span class="bro-toolbar-space"></span>
+
+      <button matIconButton
+              class="bro-toolbar-button-search"
+              type="button" [attr.aria-label]="config()?.texts?.search"
+              (click)="onClickSearch()">
+        <mat-icon>search</mat-icon>
+      </button>
+
+      @for (button of mainButtons(); track $index) {
+        <button matIconButton type="button" matTooltipPosition="above"
+                [matTooltip]="button.buttonTooltip ?? ''"
+                [attr.aria-label]="button.buttonTitle"
+                (click)="onClickButton(button.eventType)">
+          <mat-icon>{{ button.iconHTML }}</mat-icon>
+        </button>
+      }
+
+      <!-- The menu is the element of withToolbarMenu(): a toolbar without a menu does not carry the menu of Material -->
+      @if (dropdown(); as dropdown) {
+        <bro-mat-toolbar-more matTooltipPosition="above"
+                              [dropdown]="dropdown" [matTooltip]="dropdown.buttonTooltip ?? ''"
+                              (action)="onMenuAction($event)"></bro-mat-toolbar-more>
+      }
+    </mat-toolbar>`,
+			isInline: true,
+			styles: [".bro-toolbar-placeholder{visibility:hidden}.bro-toolbar-space{flex:1 1 auto}\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: MatToolbar,
+					selector: "mat-toolbar",
+					inputs: ["color"],
+					exportAs: ["matToolbar"]
+				},
+				{
+					kind: "directive",
+					type: MatTooltip,
+					selector: "[matTooltip]",
+					inputs: [
+						"matTooltipPosition",
+						"matTooltipPositionAtOrigin",
+						"matTooltipDisabled",
+						"matTooltipShowDelay",
+						"matTooltipHideDelay",
+						"matTooltipTouchGestures",
+						"matTooltip",
+						"matTooltipClass"
+					],
+					exportAs: ["matTooltip"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: BroMaterialToolbarMainComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			template: `
+    <mat-toolbar>
+      <button matIconButton class="bro-toolbar-placeholder"
+              type="button" aria-label="">
+        <mat-icon>menu</mat-icon>
+      </button>
+
+      <span>{{ title() }}</span>
+
+      <span class="bro-toolbar-space"></span>
+
+      <button matIconButton
+              class="bro-toolbar-button-search"
+              type="button" [attr.aria-label]="config()?.texts?.search"
+              (click)="onClickSearch()">
+        <mat-icon>search</mat-icon>
+      </button>
+
+      @for (button of mainButtons(); track $index) {
+        <button matIconButton type="button" matTooltipPosition="above"
+                [matTooltip]="button.buttonTooltip ?? ''"
+                [attr.aria-label]="button.buttonTitle"
+                (click)="onClickButton(button.eventType)">
+          <mat-icon>{{ button.iconHTML }}</mat-icon>
+        </button>
+      }
+
+      <!-- The menu is the element of withToolbarMenu(): a toolbar without a menu does not carry the menu of Material -->
+      @if (dropdown(); as dropdown) {
+        <bro-mat-toolbar-more matTooltipPosition="above"
+                              [dropdown]="dropdown" [matTooltip]="dropdown.buttonTooltip ?? ''"
+                              (action)="onMenuAction($event)"></bro-mat-toolbar-more>
+      }
+    </mat-toolbar>`,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			schemas: [CUSTOM_ELEMENTS_SCHEMA],
+			imports: [
+				MatIcon,
+				MatIconButton,
+				MatToolbar,
+				MatTooltip
+			],
+			styles: [".bro-toolbar-placeholder{visibility:hidden}.bro-toolbar-space{flex:1 1 auto}\n"]
+		}]
+	}],
+	propDecorators: {
+		config: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "config",
+				required: false
+			}]
+		}],
+		buttons: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "buttons",
+				required: false
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		action: [{
+			type: i0.Output,
+			args: ["bro-toolbar"]
+		}]
+	}
+});
+var BroMaterialToolbarMoreComponent = class BroMaterialToolbarMoreComponent {
+	constructor() {
+		this.dropdown = input(...ngDevMode ? [void 0, { debugName: "dropdown" }] : /* istanbul ignore next */ []);
+		this.action = output();
+	}
+	onClickButton(action) {
+		this.action.emit(action);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: BroMaterialToolbarMoreComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: BroMaterialToolbarMoreComponent,
+			isStandalone: true,
+			selector: "ng-component",
+			inputs: { dropdown: {
+				classPropertyName: "dropdown",
+				publicName: "dropdown",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			} },
+			outputs: { action: "action" },
+			ngImport: i0,
+			template: `
+    @if (dropdown(); as dropdown) {
+      <button matIconButton
+              [attr.aria-label]="dropdown.buttonTitle"
+              [matMenuTriggerFor]="menu">
+        <mat-icon>more_vert</mat-icon>
+      </button>
+
+      <mat-menu #menu="matMenu">
+        @for (option of dropdown.options; track $index) {
+          @if (option.divider) {
+            <mat-divider></mat-divider>
+          } @else {
+            <button mat-menu-item (click)="onClickButton(option.value)">
+              @if (option.iconHTML) {
+                <mat-icon>{{ option.iconHTML }}</mat-icon>
+              }
+              <span>{{ option.title }}</span>
+            </button>
+          }
+        }
+      </mat-menu>
+    }`,
+			isInline: true,
+			dependencies: [
+				{
+					kind: "component",
+					type: MatDivider,
+					selector: "mat-divider",
+					inputs: ["vertical", "inset"]
+				},
+				{
+					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: MatMenu,
+					selector: "mat-menu",
+					inputs: [
+						"backdropClass",
+						"aria-label",
+						"aria-labelledby",
+						"aria-describedby",
+						"xPosition",
+						"yPosition",
+						"overlapTrigger",
+						"hasBackdrop",
+						"class",
+						"classList"
+					],
+					outputs: ["closed", "close"],
+					exportAs: ["matMenu"]
+				},
+				{
+					kind: "component",
+					type: MatMenuItem,
+					selector: "[mat-menu-item]",
+					inputs: [
+						"role",
+						"disabled",
+						"disabledInteractive",
+						"disableRipple"
+					],
+					exportAs: ["matMenuItem"]
+				},
+				{
+					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
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: BroMaterialToolbarMoreComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			template: `
+    @if (dropdown(); as dropdown) {
+      <button matIconButton
+              [attr.aria-label]="dropdown.buttonTitle"
+              [matMenuTriggerFor]="menu">
+        <mat-icon>more_vert</mat-icon>
+      </button>
+
+      <mat-menu #menu="matMenu">
+        @for (option of dropdown.options; track $index) {
+          @if (option.divider) {
+            <mat-divider></mat-divider>
+          } @else {
+            <button mat-menu-item (click)="onClickButton(option.value)">
+              @if (option.iconHTML) {
+                <mat-icon>{{ option.iconHTML }}</mat-icon>
+              }
+              <span>{{ option.title }}</span>
+            </button>
+          }
+        }
+      </mat-menu>
+    }`,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				MatDivider,
+				MatIcon,
+				MatIconButton,
+				MatMenu,
+				MatMenuItem,
+				MatMenuTrigger
+			]
+		}]
+	}],
+	propDecorators: {
+		dropdown: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dropdown",
+				required: false
+			}]
+		}],
+		action: [{
+			type: i0.Output,
+			args: ["action"]
+		}]
+	}
+});
+const tableBroMatElements = {
+	"ng-mat-paginator": MatPaginator,
+	"ng-mat-progress-bar": MatProgressBar,
+	"ng-mat-toolbar": MatToolbar,
+	"bro-mat-button": BroMaterialButtonComponent,
+	"bro-mat-sort-header": BroMaterialSortHeaderComponent,
+	"bro-mat-toolbar-main": BroMaterialToolbarMainComponent,
+	"bro-mat-text-ellipsis": BroMaterialTextEllipsisComponent
+};
+function defineTableBroMatElements(injector, features = {}) {
+	if (!isPlatformBrowser(injector.get(PLATFORM_ID))) return;
+	Object.entries({
+		...tableBroMatElements,
+		...features
+	}).forEach(([name, component]) => {
+		if (!customElements.get(name)) customElements.define(name, keepThroughMoves(createCustomElement(component, { injector })));
+	});
+	if (typeof ngDevMode === "undefined" || ngDevMode) Object.entries({
+		"bro-mat-tags": "Tags",
+		"bro-mat-slide-toggle": "Switch",
+		"bro-mat-toolbar-more": "ToolbarMenu"
+	}).forEach(([name, feature]) => {
+		if (!customElements.get(name)) customElements.define(name, missingFeature(feature));
+	});
+}
+function missingFeature(feature) {
+	const reported = /* @__PURE__ */ new Set();
+	return class extends HTMLElement {
+		connectedCallback() {
+			const user = this.col ? `the column "${this.col.name}"` : "the toolbar";
+			const element = feature.replace(/\B[A-Z]/g, " $&").toLowerCase();
+			if (!reported.has(user)) {
+				reported.add(user);
+				console.error(`Table, Bro: ${user} uses the element ${element}: add with${feature}() to provideTableBroMatSkin()`);
+			}
+		}
+	};
+}
+function keepThroughMoves(element) {
+	const base = element;
+	return class extends base {
+		constructor() {
+			super(...arguments);
+			this.moving = false;
+		}
+		connectedCallback() {
+			if (this.moving) {
+				this.moving = false;
+				return;
+			}
+			if (isPrerendered(this)) return;
+			super.connectedCallback();
+		}
+		disconnectedCallback() {
+			this.moving = true;
+			queueMicrotask(() => {
+				if (this.moving) {
+					this.moving = false;
+					super.disconnectedCallback();
+				}
+			});
+		}
+	};
+}
+function provideTableBroMatSkin(...features) {
+	const elements = Object.assign({}, ...features.map((feature) => feature.elements));
+	return makeEnvironmentProviders([provideAppInitializer(() => {
+		registerSkin("mat", matSkinConfig);
+		features.forEach((feature) => feature.init?.());
+		defineTableBroMatElements(inject(EnvironmentInjector), elements);
+	}), {
+		provide: TABLE_BRO_ELEMENTS,
+		useValue: {
+			skin: "mat",
+			elements: {
+				...tableBroMatElements,
+				...elements
+			}
+		},
+		multi: true
+	}]);
+}
+function withTags(options = {}) {
+	const empty = options.texts?.empty;
+	return {
+		elements: { "bro-mat-tags": BroMaterialTagsComponent },
+		init: () => {
+			if (empty !== void 0) inject(TableBroMatTagsTexts).empty.set(empty);
+		}
+	};
+}
+function withSwitch() {
+	return { elements: { "bro-mat-slide-toggle": BroMaterialSlideToggleComponent } };
+}
+function withToolbarMenu() {
+	return { elements: { "bro-mat-toolbar-more": BroMaterialToolbarMoreComponent } };
+}
+export { BroMaterialButtonComponent, BroMaterialSlideToggleComponent, BroMaterialSortHeaderComponent, BroMaterialTagsComponent, BroMaterialTextEllipsisComponent, BroMaterialToolbarMainComponent, BroMaterialToolbarMoreComponent, TableBroFilterDrawerContainerNg, TableBroMatTagsTexts, matSkinConfig, provideTableBroMatSkin, withSwitch, withTags, withToolbarMenu };
+
+//# sourceMappingURL=table-bro-angular-material.mjs.map