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

package/styles/table-bro.material.scss

@@ -0,0 +1,80 @@
+// The Angular Material skin: @use prints its CSS. The variables and mixins of the skin without the CSS: table-bro.material.api
+@forward "./table-bro.material.api";
+@use "./skin/angular-material/variables" as *;
+@use "sass:meta";
+
+/* Mixins */
+@use "./skin/shared/mixins/custom-properties" as *;
+@use "./skin/shared/mixins/shared" as *;
+
+@use "./skin/shared/table-bro/details" as shared-details;
+@use "./skin/shared/table-bro/filter-drawer" as shared-filter-drawer;
+@use "./skin/shared/table-bro/shadows" as shared-shadows;
+@use "./skin/shared/table-bro/state" as shared-state;
+@use "./skin/shared/table-bro/table" as shared-table;
+@use "./skin/shared/table-bro/text-ellipsis" as shared-text-ellipsis;
+@use "./skin/angular-material/components/shadows" as mat-shadows;
+@use "./skin/angular-material/table-bro/filter-drawer" as mat-filter-drawer;
+@use "./skin/angular-material/table-bro/paginator" as mat-paginator;
+@use "./skin/angular-material/table-bro/progress-bar" as mat-progress-bar;
+@use "./skin/angular-material/table-bro/slide-toggle" as mat-slide-toggle;
+@use "./skin/angular-material/table-bro/sort-header" as mat-sort-header;
+@use "./skin/angular-material/table-bro/table" as mat-table;
+@use "./skin/angular-material/table-bro/text-ellipsis" as mat-text-ellipsis;
+@use "./skin/angular-material/table-bro/toolbar" as mat-toolbar;
+@use "./skin/angular-material/table-bro/toolbar-search" as mat-toolbar-search;
+
+
+/* Shared */
+#{$bro-skin} {
+  @include shared-details.styles;
+  @include shared-filter-drawer.styles;
+  @include shared-shadows.styles;
+  @include shared-state.styles;
+  @include shared-table.styles;
+  @include shared-text-ellipsis.styles;
+
+  // The tags of the skin in a cell
+  @include bro-cell-items('bro-mat-tags .mdc-evolution-chip-set__chips', 'mat-chip', '.mdc-evolution-chip__text-label');
+}
+
+
+/* Angular Material components */
+#{$bro-skin} {
+  @include mat-shadows.styles;
+}
+
+/* Angular Material extensions */
+// No Angular Material extensions yet
+
+
+/* Table-bro extensions */
+#{$bro-skin} {
+  @include mat-filter-drawer.styles;
+  @include mat-paginator.styles;
+  @include mat-progress-bar.styles;
+  @include mat-slide-toggle.styles;
+  @include mat-sort-header.styles;
+  @include mat-table.styles;
+  @include mat-text-ellipsis.styles;
+  @include mat-toolbar.styles;
+  @include mat-toolbar-search.styles;
+}
+@include meta.load-css("./skin/angular-material/themes");
+
+
+#{$bro-skin} {
+  @include bro-table-shadow-container();
+}
+
+
+/* The sizes and timings for the table script; :where() lets a plain table-bro selector override them */
+:where(#{$bro-skin}) {
+  @include bro-skin-custom-properties();
+}
+
+/* A prerendered table (data-bro-prerender of prerenderTableBro) takes them in the critical CSS of its page too, as
+   Beasties writes it: it drops a selector of :where() alone, which nothing is left of without the pseudo-class */
+table-bro:where([data-bro-prerender]#{$bro-skin}) {
+  @include bro-skin-custom-properties();
+}

package/types/table-bro-angular-material.d.ts

@@ -0,0 +1,523 @@
+import * as i0 from "@angular/core";
+import { EnvironmentProviders, Type } from "@angular/core";
+import { BroActionDetail, BroButton, BroCol, BroColDataType, BroColSort, BroConfig, BroDropdown, BroEmptyState, BroFilters, BroQuery, BroResolvedConfig, BroRow, BroUserTheme } from "@table-bro/core";
+import { Sort, SortDirection, SortHeaderArrowPosition } from "@angular/material/sort";
+import { MatDrawerMode } from "@angular/material/sidenav";
+import { BroServerFacade } from "@table-bro/angular";
+export declare const matSkinConfig: {
+  css: {
+    table: {
+      className: string;
+      thead: {
+        tr: {
+          className: string;
+          th: {
+            className: string;
+          };
+        };
+      };
+      tbody: {
+        tr: {
+          className: string;
+          td: {
+            className: string;
+          };
+        };
+      };
+    };
+    shadow: {
+      className: string;
+    };
+  };
+  components: {
+    button: {
+      selector: string;
+      iconSelector: string;
+      beforeRender: (element: Element, value: string) => void;
+    };
+    filterDrawer: {};
+    fontIcon: {
+      html: (materialIcon: string) => string;
+    };
+    paginator: {
+      selector: string;
+      inputsAsProperties: true;
+      recreateOnReplaceRows: true;
+    };
+    progressBar: {
+      selector: string;
+    };
+    sortHeader: {
+      selector: string;
+      titleAsContent: true;
+      contentSelector: string;
+    };
+    state: {
+      fontIcon: true;
+      states: {
+        loading: [string, string];
+        'no-data': [string, string];
+        'not-found': [string, string];
+        fail: [string, string];
+      };
+    };
+    switch: {
+      selector: string;
+    };
+    textEllipsis: {
+      selector: string;
+    };
+    toolbar: {
+      selector: string;
+    };
+    toolbarMain: {
+      selector: string;
+    };
+    toolbarSearch: {
+      beforeRender: (backButton: Element, clearButton: Element) => void;
+    };
+  };
+};
+/** The button of the skin, the element bro-mat-button with the properties of BroButton. */
+export declare class BroMaterialButtonComponent {
+  readonly buttonClassName: import("@angular/core").InputSignal<string | null | undefined>;
+  readonly buttonTitle: import("@angular/core").InputSignal<string>;
+  readonly eventType: import("@angular/core").InputSignal<string>;
+  readonly icon: import("@angular/core").InputSignal<string | undefined>;
+  /** The name of a button without a title: the table gives it as the attribute label, not aria-label on the element. */
+  readonly label: import("@angular/core").InputSignal<string | undefined>;
+  readonly action: import("@angular/core").OutputEmitterRef<string>;
+  onClickButton(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BroMaterialButtonComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BroMaterialButtonComponent, "ng-component", never, {
+    "buttonClassName": {
+      "alias": "button-class";
+      "required": false;
+      "isSignal": true;
+    };
+    "buttonTitle": {
+      "alias": "button-title";
+      "required": false;
+      "isSignal": true;
+    };
+    "eventType": {
+      "alias": "event-type";
+      "required": false;
+      "isSignal": true;
+    };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "action": "action";
+  }, never, never, true, never>;
+}
+/**
+ * A switch of a boolean of a cell. A change sends the action of the attribute name in the output action, which the
+ * table turns into bro-action with the column and the row (event: 'action' of the column); the title of the column
+ * names the switch for screen readers.
+ */
+export declare class BroMaterialSlideToggleComponent<T extends object = BroRow> {
+  readonly col: import("@angular/core").InputSignal<BroCol<T> | undefined>;
+  readonly row: import("@angular/core").InputSignal<T | undefined>;
+  /** The action of a change. */
+  readonly name: import("@angular/core").InputSignal<string | undefined>;
+  readonly action: import("@angular/core").OutputEmitterRef<string>;
+  /** The value of the field of the column in the row. */
+  readonly checked: import("@angular/core").Signal<boolean>;
+  onChange(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BroMaterialSlideToggleComponent<any>, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BroMaterialSlideToggleComponent<any>, "ng-component", never, {
+    "col": {
+      "alias": "col";
+      "required": false;
+      "isSignal": true;
+    };
+    "row": {
+      "alias": "row";
+      "required": false;
+      "isSignal": true;
+    };
+    "name": {
+      "alias": "name";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "action": "action";
+  }, never, never, true, never>;
+}
+/** The sort header of a column, the element bro-mat-sort-header with the properties of BroSortHeader. */
+export declare class BroMaterialSortHeaderComponent {
+  /** The active sort of the table: a sort of another column resets the arrow of this header. */
+  readonly activeSort: import("@angular/core").InputSignal<BroColSort<import("@table-bro/core").BroRow> | undefined>;
+  readonly arrowPosition: import("@angular/core").InputSignal<SortHeaderArrowPosition>;
+  readonly dataType: import("@angular/core").InputSignal<BroColDataType | undefined>;
+  readonly headerTitle: import("@angular/core").InputSignal<string>;
+  readonly sortId: import("@angular/core").InputSignal<string>;
+  readonly tooltip: import("@angular/core").InputSignal<string>;
+  /** The key of the column, or an own one of the header. */
+  readonly id: import("@angular/core").Signal<string>;
+  readonly matSortDirection: import("@angular/core").WritableSignal<SortDirection>;
+  private readonly elementRef;
+  private readonly sortHeader;
+  private sortedDirection;
+  constructor();
+  onSort(event: Sort): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BroMaterialSortHeaderComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BroMaterialSortHeaderComponent, "ng-component", never, {
+    "activeSort": {
+      "alias": "activeSort";
+      "required": false;
+      "isSignal": true;
+    };
+    "arrowPosition": {
+      "alias": "arrow-position";
+      "required": false;
+      "isSignal": true;
+    };
+    "dataType": {
+      "alias": "data-type";
+      "required": false;
+      "isSignal": true;
+    };
+    "headerTitle": {
+      "alias": "header-title";
+      "required": false;
+      "isSignal": true;
+    };
+    "sortId": {
+      "alias": "sort-id";
+      "required": false;
+      "isSignal": true;
+    };
+    "tooltip": {
+      "alias": "tooltip";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+/**
+ * The texts of the tags of the skin mat, which withTags({texts}) sets and the application changes at any time, as when
+ * the language of the page changes: the chips in the DOM take them at once.
+ */
+export declare class TableBroMatTagsTexts {
+  /** The text of a cell of tags without items; without it the tags take the deprecated texts.noItems of the table, or No data. */
+  readonly empty: import("@angular/core").WritableSignal<string | undefined>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<TableBroMatTagsTexts, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+/** The tags of a cell: the items of the field of the column, as the chips of Material. */
+export declare class BroMaterialTagsComponent {
+  readonly col: import("@angular/core").InputSignal<BroCol<BroRow> | undefined>;
+  readonly row: import("@angular/core").InputSignal<BroRow | undefined>;
+  /** The config of the table, which the table gives the elements of its cells: the text of a cell without items. */
+  readonly config: import("@angular/core").InputSignal<BroResolvedConfig | undefined>;
+  /** The items of the field of the column in the row. */
+  readonly chipList: import("@angular/core").Signal<string[]>;
+  private readonly elementRef;
+  private readonly texts;
+  /** Stops fitting the chips into the line when the component goes. */
+  private readonly fitting;
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<BroMaterialTagsComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BroMaterialTagsComponent, "ng-component", never, {
+    "col": {
+      "alias": "col";
+      "required": false;
+      "isSignal": true;
+    };
+    "row": {
+      "alias": "row";
+      "required": false;
+      "isSignal": true;
+    };
+    "config": {
+      "alias": "config";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/** A value wider than its column, with the whole value in a tooltip: the element bro-mat-text-ellipsis of BroTextEllipsis. */
+export declare class BroMaterialTextEllipsisComponent {
+  /** The column of the cell: with html: true the value is markup. */
+  readonly col: import("@angular/core").InputSignal<BroCol<import("@table-bro/core").BroRow> | undefined>;
+  readonly containerClassName: import("@angular/core").InputSignal<string | null>;
+  readonly value: import("@angular/core").InputSignal<string>;
+  /** The text of the value: the text of the markup of an HTML value. */
+  readonly tooltip: import("@angular/core").Signal<string>;
+  readonly tableCellTextEllipsisContainer: string;
+  readonly tableCellTextEllipsis: string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BroMaterialTextEllipsisComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BroMaterialTextEllipsisComponent, "ng-component", never, {
+    "col": {
+      "alias": "col";
+      "required": false;
+      "isSignal": true;
+    };
+    "containerClassName": {
+      "alias": "container-class";
+      "required": false;
+      "isSignal": true;
+    };
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/**
+ * The table with the filter drawer of the mat skin: mat-drawer-container with <table-bro-ng> in its content and the filters
+ * of the application, the content of this component, in mat-drawer. It takes the inputs and gives the outputs
+ * of <table-bro-ng>. The Filters button of the table toolbar opens the drawer, any other button of the page calls toggle().
+ * Material opens the drawer and narrows the table in the side mode; the card of the skin in the drawer grows
+ * from its right edge. A table that would get narrower than its minimum width next to the drawer keeps its width:
+ * the drawer lies over it in the mode over, with the scrim of Material, as the modal side sheet of Material 3.
+ */
+export declare class TableBroFilterDrawerContainerNg<MODEL extends object> implements BroServerFacade<MODEL> {
+  cols: import("@angular/core").InputSignal<BroCol<MODEL>[]>;
+  rows: import("@angular/core").InputSignal<MODEL[] | null | undefined>;
+  conf: import("@angular/core").InputSignal<BroConfig<MODEL>>;
+  total: import("@angular/core").InputSignal<number | undefined>;
+  rowsToAppend: import("@angular/core").InputSignal<MODEL[] | undefined>;
+  loading: import("@angular/core").InputSignal<boolean>;
+  failed: import("@angular/core").InputSignal<boolean>;
+  filter: import("@angular/core").InputSignal<BroFilters<MODEL> | undefined>;
+  emptyState: import("@angular/core").InputSignal<BroEmptyState | undefined>;
+  tableId: import("@angular/core").InputSignal<string | undefined>;
+  theme: import("@angular/core").InputSignal<BroUserTheme | null | undefined>;
+  action: import("@angular/core").OutputEmitterRef<BroActionDetail<MODEL>>;
+  query: import("@angular/core").OutputEmitterRef<BroQuery<MODEL, object>>;
+  /** Whether the drawer is opened; [(opened)] binds it both ways. */
+  opened: import("@angular/core").ModelSignal<boolean>;
+  /**
+   * The mode of mat-drawer: side, by default, narrows the content, and the drawer lies over a table that would get
+   * narrower than its minimum width; over lies over the table always, with the scrim of Material; push as in Material.
+   */
+  mode: import("@angular/core").InputSignal<MatDrawerMode>;
+  /** The drawer lies over a table that would not keep its minimum width next to it. */
+  protected over: import("@angular/core").WritableSignal<boolean>;
+  protected drawerMode: import("@angular/core").Signal<MatDrawerMode>;
+  /** With shadows the table lets them into its margins and takes the full width; the card has the shadow too. */
+  protected shadowsEnabled: import("@angular/core").Signal<boolean>;
+  /** The class of the shadow of the skin config, as the card of the drawer of the core takes it. */
+  protected shadowClassName: import("@angular/core").Signal<string>;
+  /** The texts of the config of the table: the title of the drawer and the name of its close button. */
+  protected texts: import("@angular/core").Signal<import("@table-bro/core").BroTexts>;
+  /** The host of the table has the class of the dark theme: the container takes it too, as the drawer of the core does. */
+  protected dark: import("@angular/core").WritableSignal<boolean>;
+  /** The host of the table has the class of its own light theme: the container stays light under a dark ancestor too. */
+  protected light: import("@angular/core").WritableSignal<boolean>;
+  private focusMonitor;
+  private host;
+  private inputModality;
+  private container;
+  private content;
+  private drawer;
+  private drawerElement;
+  /** The last click in the component: while the page dispatches it, the control that it reached sends its action. */
+  private lastClick;
+  /** The button that opened the drawer, as the Filters button of the table: the focus goes back to it. */
+  private opener;
+  constructor();
+  toggle(): void;
+  /** The Filters button of the table toolbar opens the drawer; every action goes on to the page. */
+  protected onTableAction(event: BroActionDetail<MODEL>): void;
+  /**
+   * Opens or closes the drawer and narrows the content in the same frame. Material narrows it on transitionrun
+   * of the drawer, a frame later, so the space between the table and the card would change while they move.
+   */
+  protected setOpened(opened: boolean): void;
+  /**
+   * A click on the scrim of the mode over: Material closes the drawer right after it tells it, and gives the focus to the
+   * element that had it before the drawer opened, in Safari the page; then the focus goes back to the button.
+   */
+  protected onBackdropClick(): void;
+  /**
+   * The focus in the closing drawer goes back to the button that opened it, as from the drawer of the core: Material keeps
+   * it in the drawer of the side mode. A click that closes the drawer gives back also the focus that Safari, which focuses
+   * no button by a click, lost to the page; a later start of the closing leaves it to the page, which may have moved it
+   * since. The Filters button that opens the drawer takes the focus from the page the same way. The focus comes by
+   * the last input, as Material restores it: the button shows no focus after the pointer.
+   * @param fromPage - the focus on the page, not in an element, goes back too
+   */
+  protected restoreFocus(fromPage: boolean): void;
+  /**
+   * Moves the opened drawer over the table when the table would get narrower than its minimum width next to it, and
+   * back next to it when it fits again: the table takes its new width at once, and the scrim of Material comes or goes
+   * by its transition; the drawer keeps its place at the right edge.
+   */
+  private fitMode;
+  /** The table keeps at least its minimum width next to the opened drawer: the width of the drawer holds its space. */
+  private fitsNextToDrawer;
+  /**
+   * Gives the table at once the width it has at the end of the transition: the drawer has a fixed width, so the columns
+   * take their new widths right at the click and come with the table. In the side mode Material narrows the content
+   * by the width of the drawer; during a transition the content counts from its margin at this moment.
+   */
+  private fitTableColumns;
+  static ɵfac: i0.ɵɵFactoryDeclaration<TableBroFilterDrawerContainerNg<any>, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<TableBroFilterDrawerContainerNg<any>, "table-bro-filter-drawer-container-ng", never, {
+    "cols": {
+      "alias": "cols";
+      "required": true;
+      "isSignal": true;
+    };
+    "rows": {
+      "alias": "rows";
+      "required": true;
+      "isSignal": true;
+    };
+    "conf": {
+      "alias": "conf";
+      "required": true;
+      "isSignal": true;
+    };
+    "total": {
+      "alias": "total";
+      "required": false;
+      "isSignal": true;
+    };
+    "rowsToAppend": {
+      "alias": "rowsToAppend";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
+    "failed": {
+      "alias": "failed";
+      "required": false;
+      "isSignal": true;
+    };
+    "filter": {
+      "alias": "filter";
+      "required": false;
+      "isSignal": true;
+    };
+    "emptyState": {
+      "alias": "emptyState";
+      "required": false;
+      "isSignal": true;
+    };
+    "tableId": {
+      "alias": "tableId";
+      "required": false;
+      "isSignal": true;
+    };
+    "theme": {
+      "alias": "theme";
+      "required": false;
+      "isSignal": true;
+    };
+    "opened": {
+      "alias": "opened";
+      "required": false;
+      "isSignal": true;
+    };
+    "mode": {
+      "alias": "mode";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "action": "action";
+    "query": "query";
+    "opened": "openedChange";
+  }, never, ["*"], true, never>;
+}
+/** The toolbar of a table: its title, its search and the buttons and the menu of the config. */
+export declare class BroMaterialToolbarMainComponent {
+  /** The config of the table: the name of the search button. */
+  readonly config: import("@angular/core").InputSignal<BroResolvedConfig | undefined>;
+  readonly buttons: import("@angular/core").InputSignal<string>;
+  readonly title: import("@angular/core").InputSignal<string>;
+  readonly action: import("@angular/core").OutputEmitterRef<string>;
+  /** The buttons and the one menu of the config. */
+  private readonly toolbarButtons;
+  readonly mainButtons: import("@angular/core").Signal<BroButton[]>;
+  readonly dropdown: import("@angular/core").Signal<BroDropdown | undefined>;
+  onClickSearch(): void;
+  onClickButton(action: string): void;
+  /** The element of the menu sends the value of its item as the detail of its event action. */
+  onMenuAction(event: Event): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BroMaterialToolbarMainComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BroMaterialToolbarMainComponent, "ng-component", never, {
+    "config": {
+      "alias": "config";
+      "required": false;
+      "isSignal": true;
+    };
+    "buttons": {
+      "alias": "buttons";
+      "required": false;
+      "isSignal": true;
+    };
+    "title": {
+      "alias": "title";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "action": "bro-toolbar";
+  }, never, never, true, never>;
+}
+/**
+ * The menu of the toolbar, the element bro-mat-toolbar-more of withToolbarMenu(): a button with the title of the menu as
+ * its name, and the items that send their values.
+ */
+export declare class BroMaterialToolbarMoreComponent {
+  readonly dropdown: import("@angular/core").InputSignal<BroDropdown | undefined>;
+  readonly action: import("@angular/core").OutputEmitterRef<string>;
+  onClickButton(action: string | undefined): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BroMaterialToolbarMoreComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BroMaterialToolbarMoreComponent, "ng-component", never, {
+    "dropdown": {
+      "alias": "dropdown";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "action": "action";
+  }, never, never, true, never>;
+}
+/** An optional element of the skin mat for provideTableBroMatSkin(): its tag and its component. */
+export interface TableBroMatSkinFeature {
+  /** The tag of the element and its component. */
+  readonly elements: Record<string, Type<unknown>>;
+  /** Sets up the element when the application starts, in the injection context of the application. */
+  readonly init?: () => void;
+}
+/**
+ * Connects the skin mat: registers its config and defines its elements when the application starts. A feature adds
+ * an optional element, which only a table with a certain config uses, so a table without it does not carry its code.
+ * @param features - the optional elements: withTags(), withSwitch(), withToolbarMenu()
+ */
+export declare function provideTableBroMatSkin(...features: TableBroMatSkinFeature[]): EnvironmentProviders;
+/**
+ * The element bro-mat-tags: the items of a column as the chips of Material.
+ * @param options - the texts of the tags, as {texts: {empty: 'No tags'}}; TableBroMatTagsTexts changes them later
+ * @param options.texts - the texts of the tags
+ */
+export declare function withTags(options?: {
+  texts?: {
+    empty?: string;
+  };
+}): TableBroMatSkinFeature;
+/** The element bro-mat-slide-toggle: a boolean of a column as a slide toggle. */
+export declare function withSwitch(): TableBroMatSkinFeature;
+/** The menu of the toolbar: a button of toolbarMain.buttons with the mode navbar-dropdown. */
+export declare function withToolbarMenu(): TableBroMatSkinFeature;