@onemrvapublic/design-system-demos 22.5.1-develop.2 → 22.6.0-develop.1

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 (5) hide show
  1. package/browser/assets/demos-manifest.json +1 -1
  2. package/browser/assets/json/table-entrypoint.json +1 -1
  3. package/browser/main.js +2 -2
  4. package/browser/styles.css +1 -1
  5. package/package.json +1 -1
package/browser/assets/demos-manifest.json CHANGED
@@ -1 +1 @@
1
- [{"slug":"address","name":"Address","description":"","thumbnail":"","permalink":"/demos/address"},{"slug":"address-input","name":"Address Input","description":"","thumbnail":"","permalink":"/demos/address-input"},{"slug":"autocomplete","name":"Autocomplete","description":"","thumbnail":"","permalink":"/demos/autocomplete"},{"slug":"avatar","name":"Avatar","description":"","thumbnail":"","permalink":"/demos/avatar"},{"slug":"badge","name":"Badge","description":"","thumbnail":"","permalink":"/demos/badge"},{"slug":"bank-input","name":"Bank Input","description":"","thumbnail":"","permalink":"/demos/bank-input"},{"slug":"bce-pipe","name":"BCE pipe","description":"","thumbnail":"","permalink":"/demos/bce-pipe"},{"slug":"birthplace-input","name":"Birthplace input","description":"","thumbnail":"","permalink":"/demos/birthplace-input"},{"slug":"breadcrumb","name":"Breadcrumb","description":"","thumbnail":"","permalink":"/demos/breadcrumb"},{"slug":"button","name":"Button","description":"","thumbnail":"","permalink":"/demos/button"},{"slug":"button-loading","name":"Button Loading","description":"","thumbnail":"","permalink":"/demos/button-loading"},{"slug":"button-toggle","name":"Button Toggle","description":"","thumbnail":"","permalink":"/demos/button-toggle"},{"slug":"card","name":"Card","description":"Content card with an optional image, label, title, subtitle, description and help tooltip. The card is not clickable as a whole: it can hold buttons, so a card-wide click target would nest interactive elements. Put the action in the cardActions slot instead.","thumbnail":"","permalink":"/demos/card"},{"slug":"checkbox","name":"Checkbox","description":"","thumbnail":"","permalink":"/demos/checkbox"},{"slug":"chips","name":"Chips","description":"","thumbnail":"","permalink":"/demos/chips"},{"slug":"collapsible-page-divider","name":"Collapsible Page Divider","description":"","thumbnail":"","permalink":"/demos/collapsible-page-divider"},{"slug":"copy-to-clipboard","name":"Copy to clipboard","description":"","thumbnail":"","permalink":"/demos/copy-to-clipboard"},{"slug":"country-input","name":"Country Input","description":"","thumbnail":"","permalink":"/demos/country-input"},{"slug":"datepicker","name":"Date Picker","description":"","thumbnail":"","permalink":"/demos/datepicker"},{"slug":"datepicker-luxon","name":"Date Picker Luxon","description":"","thumbnail":"","permalink":"/demos/datepicker-luxon"},{"slug":"datepicker-month-year","name":"Date Picker Month Year ","description":"","thumbnail":"","permalink":"/demos/datepicker-month-year"},{"slug":"daterangepicker","name":"Date Range Picker","description":"","thumbnail":"","permalink":"/demos/daterangepicker"},{"slug":"dialog","name":"Dialog","description":"","thumbnail":"","permalink":"/demos/dialog"},{"slug":"dialog-content","name":"Dialog Content","description":"","thumbnail":"","permalink":"/demos/dialog-content"},{"slug":"digit-only","name":"Digit Only directive","description":"","thumbnail":"","permalink":"/demos/digit-only"},{"slug":"drag-and-drop","name":"Drag and drop","description":"","thumbnail":"","permalink":"/demos/drag-and-drop"},{"slug":"drawer","name":"Drawer","description":"","thumbnail":"","permalink":"/demos/drawer"},{"slug":"empty","name":"Empty","description":"","thumbnail":"","permalink":"/demos/empty"},{"slug":"enterprise-number-input","name":"Enterprise number (VIES)","description":"","thumbnail":"","permalink":"/demos/enterprise-number-input"},{"slug":"error","name":"Page Error","description":"","thumbnail":"","permalink":"/demos/error"},{"slug":"error-handler","name":"Error Handler","description":"","thumbnail":"","permalink":"/demos/error-handler"},{"slug":"fab","name":"FAB","description":"","thumbnail":"","permalink":"/demos/fab"},{"slug":"file-panel","name":"File Panel","description":"","thumbnail":"","permalink":"/demos/file-panel"},{"slug":"file-upload","name":"File Upload","description":"","thumbnail":"","permalink":"/demos/file-upload"},{"slug":"file-upload-manual","name":"File Upload Manual","description":"","thumbnail":"","permalink":"/demos/file-upload-manual"},{"slug":"form","name":"Form","description":"","thumbnail":"","permalink":"/demos/form"},{"slug":"grid","name":"Grid","description":"","thumbnail":"","permalink":"/demos/grid"},{"slug":"horizontal-stepper","name":"Stepper (horizontal)","description":"","thumbnail":"","permalink":"/demos/horizontal-stepper"},{"slug":"icon","name":"Icon","description":"","thumbnail":"","permalink":"/demos/icon"},{"slug":"icon-button","name":"Icon Button","description":"","thumbnail":"","permalink":"/demos/icon-button"},{"slug":"if-width-is","name":"If width is","description":"","thumbnail":"","permalink":"/demos/if-width-is"},{"slug":"jsonform","name":"JSON Forms","description":"","thumbnail":"","permalink":"/demos/jsonform"},{"slug":"language-switcher","name":"Language switcher","description":"","thumbnail":"","permalink":"/demos/language-switcher"},{"slug":"layout","name":"Layout and drawer","description":"","thumbnail":"","permalink":"/demos/layout"},{"slug":"link","name":"Link","description":"","thumbnail":"","permalink":"/demos/link"},{"slug":"mask","name":"Mask","description":"","thumbnail":"","permalink":"/demos/mask"},{"slug":"menu","name":"Menu","description":"","thumbnail":"","permalink":"/demos/menu"},{"slug":"message-box","name":"Message box","description":"","thumbnail":"","permalink":"/demos/message-box"},{"slug":"multiselect","name":"Multi Select","description":"","thumbnail":"","permalink":"/demos/multiselect"},{"slug":"niss-pipe","name":"NISS pipe","description":"","thumbnail":"","permalink":"/demos/niss-pipe"},{"slug":"not-found","name":"Page not found","description":"","thumbnail":"","permalink":"/demos/not-found"},{"slug":"notification","name":"Notification","description":"","thumbnail":"","permalink":"/demos/notification"},{"slug":"overlay","name":"Overlay","description":"","thumbnail":"","permalink":"/demos/overlay"},{"slug":"paginator","name":"Paginator","description":"","thumbnail":"","permalink":"/demos/paginator"},{"slug":"palette","name":"Palette","description":"","thumbnail":"","permalink":"/demos/palette"},{"slug":"panel","name":"Panel","description":"","thumbnail":"","permalink":"/demos/panel"},{"slug":"phone-input","name":"Phone Input","description":"","thumbnail":"","permalink":"/demos/phone-input"},{"slug":"pop-over","name":"PopOver","description":"","thumbnail":"","permalink":"/demos/pop-over"},{"slug":"progress-bar","name":"ProgressBar","description":"","thumbnail":"","permalink":"/demos/progress-bar"},{"slug":"radio","name":"Radio","description":"","thumbnail":"","permalink":"/demos/radio"},{"slug":"rxjs-combine-operators","name":"Rxjs Combine Operators","description":"","thumbnail":"","permalink":"/demos/rxjs-combine-operators"},{"slug":"rxjs-complex-case","name":"Rxjs Complex case","description":"","thumbnail":"","permalink":"/demos/rxjs-complex-case"},{"slug":"rxjs-flattening-operators","name":"Rxjs Flattening Operators","description":"","thumbnail":"","permalink":"/demos/rxjs-flattening-operators"},{"slug":"rxjs-observable","name":"Rxjs Observable","description":"","thumbnail":"","permalink":"/demos/rxjs-observable"},{"slug":"rxjs-subject","name":"Rxjs Subject","description":"","thumbnail":"","permalink":"/demos/rxjs-subject"},{"slug":"select","name":"Select","description":"","thumbnail":"","permalink":"/demos/select"},{"slug":"selectable-box","name":"Selectable box","description":"","thumbnail":"","permalink":"/demos/selectable-box"},{"slug":"side-menu","name":"Side menu","description":"","thumbnail":"","permalink":"/demos/side-menu"},{"slug":"skeleton","name":"Skeleton","description":"","thumbnail":"","permalink":"/demos/skeleton"},{"slug":"slide-toggle","name":"Slide toggle","description":"","thumbnail":"","permalink":"/demos/slide-toggle"},{"slug":"spacing","name":"Spacing","description":"","thumbnail":"","permalink":"/demos/spacing"},{"slug":"spinner","name":"Spinner","description":"","thumbnail":"","permalink":"/demos/spinner"},{"slug":"sticker","name":"Sticker","description":"","thumbnail":"","permalink":"/demos/sticker"},{"slug":"summary-stepper","name":"Stepper (with Summary)","description":"","thumbnail":"","permalink":"/demos/summary-stepper"},{"slug":"tab","name":"Tab","description":"","thumbnail":"","permalink":"/demos/tab"},{"slug":"table","name":"Table","description":"","thumbnail":"","permalink":"/demos/table"},{"slug":"table-dialog-content","name":"Table Dialog Content","description":"","thumbnail":"","permalink":"/demos/table-dialog-content"},{"slug":"table-entrypoint","name":"Table Entrypoint","description":"","thumbnail":"","permalink":"/demos/table-entrypoint"},{"slug":"task-list","name":"Task list","description":"","thumbnail":"","permalink":"/demos/task-list"},{"slug":"text-input","name":"Text Input","description":"","thumbnail":"","permalink":"/demos/text-input"},{"slug":"textarea","name":"Textarea","description":"","thumbnail":"","permalink":"/demos/textarea"},{"slug":"timeline","name":"Timeline","description":"Plot dated periods on a horizontal, year-based timeline. Overlapping periods stack into rows and take their color from the legend, with month/day zoom, selection, tooltips, filters, and an optional full-size mode.","thumbnail":"assets/thumbnails/timeline-thumbnail.png","permalink":"/demos/timeline"},{"slug":"timepicker","name":"Timepicker","description":"","thumbnail":"","permalink":"/demos/timepicker"},{"slug":"toast","name":"Toast","description":"","thumbnail":"","permalink":"/demos/toast"},{"slug":"toc","name":"Table of content","description":"","thumbnail":"","permalink":"/demos/toc"},{"slug":"toolbar","name":"Toolbar","description":"","thumbnail":"","permalink":"/demos/toolbar"},{"slug":"tooltip","name":"Tooltip","description":"","thumbnail":"","permalink":"/demos/tooltip"},{"slug":"typography","name":"Typography","description":"","thumbnail":"","permalink":"/demos/typography"},{"slug":"validators","name":"Validators","description":"","thumbnail":"","permalink":"/demos/validators"},{"slug":"week-navigator","name":"Week navigator","description":"Step through ISO weeks with a back and forward arrow. Shows the week number and its Monday to Friday range, computed with Luxon and formatted in the active locale.","thumbnail":"","permalink":"/demos/week-navigator"}]
1
+ [{"slug":"address","name":"Address","description":"","thumbnail":"","permalink":"/demos/address"},{"slug":"address-input","name":"Address Input","description":"","thumbnail":"","permalink":"/demos/address-input"},{"slug":"autocomplete","name":"Autocomplete","description":"","thumbnail":"","permalink":"/demos/autocomplete"},{"slug":"avatar","name":"Avatar","description":"","thumbnail":"","permalink":"/demos/avatar"},{"slug":"badge","name":"Badge","description":"","thumbnail":"","permalink":"/demos/badge"},{"slug":"bank-input","name":"Bank Input","description":"","thumbnail":"","permalink":"/demos/bank-input"},{"slug":"bce-pipe","name":"BCE pipe","description":"","thumbnail":"","permalink":"/demos/bce-pipe"},{"slug":"birthplace-input","name":"Birthplace input","description":"","thumbnail":"","permalink":"/demos/birthplace-input"},{"slug":"breadcrumb","name":"Breadcrumb","description":"","thumbnail":"","permalink":"/demos/breadcrumb"},{"slug":"button","name":"Button","description":"","thumbnail":"","permalink":"/demos/button"},{"slug":"button-loading","name":"Button Loading","description":"","thumbnail":"","permalink":"/demos/button-loading"},{"slug":"button-toggle","name":"Button Toggle","description":"","thumbnail":"","permalink":"/demos/button-toggle"},{"slug":"card","name":"Card","description":"Content card with an optional image, label, title, subtitle, description and help tooltip. The card is not clickable as a whole: it can hold buttons, so a card-wide click target would nest interactive elements. Put the action in the cardActions slot instead.","thumbnail":"","permalink":"/demos/card"},{"slug":"checkbox","name":"Checkbox","description":"","thumbnail":"","permalink":"/demos/checkbox"},{"slug":"chips","name":"Chips","description":"","thumbnail":"","permalink":"/demos/chips"},{"slug":"collapsible-page-divider","name":"Collapsible Page Divider","description":"","thumbnail":"","permalink":"/demos/collapsible-page-divider"},{"slug":"copy-to-clipboard","name":"Copy to clipboard","description":"","thumbnail":"","permalink":"/demos/copy-to-clipboard"},{"slug":"country-input","name":"Country Input","description":"","thumbnail":"","permalink":"/demos/country-input"},{"slug":"datepicker","name":"Date Picker","description":"","thumbnail":"","permalink":"/demos/datepicker"},{"slug":"datepicker-luxon","name":"Date Picker Luxon","description":"","thumbnail":"","permalink":"/demos/datepicker-luxon"},{"slug":"datepicker-month-year","name":"Date Picker Month Year ","description":"","thumbnail":"","permalink":"/demos/datepicker-month-year"},{"slug":"daterangepicker","name":"Date Range Picker","description":"","thumbnail":"","permalink":"/demos/daterangepicker"},{"slug":"dialog","name":"Dialog","description":"","thumbnail":"","permalink":"/demos/dialog"},{"slug":"dialog-content","name":"Dialog Content","description":"","thumbnail":"","permalink":"/demos/dialog-content"},{"slug":"digit-only","name":"Digit Only directive","description":"","thumbnail":"","permalink":"/demos/digit-only"},{"slug":"drag-and-drop","name":"Drag and drop","description":"","thumbnail":"","permalink":"/demos/drag-and-drop"},{"slug":"drawer","name":"Drawer","description":"","thumbnail":"","permalink":"/demos/drawer"},{"slug":"empty","name":"Empty","description":"","thumbnail":"","permalink":"/demos/empty"},{"slug":"enterprise-number-input","name":"Enterprise number (VIES)","description":"","thumbnail":"","permalink":"/demos/enterprise-number-input"},{"slug":"error","name":"Page Error","description":"","thumbnail":"","permalink":"/demos/error"},{"slug":"error-handler","name":"Error Handler","description":"","thumbnail":"","permalink":"/demos/error-handler"},{"slug":"fab","name":"FAB","description":"","thumbnail":"","permalink":"/demos/fab"},{"slug":"file-panel","name":"File Panel","description":"","thumbnail":"","permalink":"/demos/file-panel"},{"slug":"file-upload","name":"File Upload","description":"","thumbnail":"","permalink":"/demos/file-upload"},{"slug":"file-upload-manual","name":"File Upload Manual","description":"","thumbnail":"","permalink":"/demos/file-upload-manual"},{"slug":"form","name":"Form","description":"","thumbnail":"","permalink":"/demos/form"},{"slug":"grid","name":"Grid","description":"","thumbnail":"","permalink":"/demos/grid"},{"slug":"horizontal-stepper","name":"Stepper (horizontal)","description":"","thumbnail":"","permalink":"/demos/horizontal-stepper"},{"slug":"icon","name":"Icon","description":"","thumbnail":"","permalink":"/demos/icon"},{"slug":"icon-button","name":"Icon Button","description":"","thumbnail":"","permalink":"/demos/icon-button"},{"slug":"if-width-is","name":"If width is","description":"","thumbnail":"","permalink":"/demos/if-width-is"},{"slug":"jsonform","name":"JSON Forms","description":"","thumbnail":"","permalink":"/demos/jsonform"},{"slug":"language-switcher","name":"Language switcher","description":"","thumbnail":"","permalink":"/demos/language-switcher"},{"slug":"layout","name":"Layout and drawer","description":"","thumbnail":"","permalink":"/demos/layout"},{"slug":"link","name":"Link","description":"","thumbnail":"","permalink":"/demos/link"},{"slug":"mask","name":"Mask","description":"","thumbnail":"","permalink":"/demos/mask"},{"slug":"menu","name":"Menu","description":"","thumbnail":"","permalink":"/demos/menu"},{"slug":"message-box","name":"Message box","description":"","thumbnail":"","permalink":"/demos/message-box"},{"slug":"multiselect","name":"Multi Select","description":"","thumbnail":"","permalink":"/demos/multiselect"},{"slug":"niss-pipe","name":"NISS pipe","description":"","thumbnail":"","permalink":"/demos/niss-pipe"},{"slug":"not-found","name":"Page not found","description":"","thumbnail":"","permalink":"/demos/not-found"},{"slug":"notification","name":"Notification","description":"","thumbnail":"","permalink":"/demos/notification"},{"slug":"overlay","name":"Overlay","description":"","thumbnail":"","permalink":"/demos/overlay"},{"slug":"paginator","name":"Paginator","description":"","thumbnail":"","permalink":"/demos/paginator"},{"slug":"palette","name":"Palette","description":"","thumbnail":"","permalink":"/demos/palette"},{"slug":"panel","name":"Panel","description":"","thumbnail":"","permalink":"/demos/panel"},{"slug":"phone-input","name":"Phone Input","description":"","thumbnail":"","permalink":"/demos/phone-input"},{"slug":"pop-over","name":"PopOver","description":"","thumbnail":"","permalink":"/demos/pop-over"},{"slug":"progress-bar","name":"ProgressBar","description":"","thumbnail":"","permalink":"/demos/progress-bar"},{"slug":"radio","name":"Radio","description":"","thumbnail":"","permalink":"/demos/radio"},{"slug":"rxjs-combine-operators","name":"Rxjs Combine Operators","description":"","thumbnail":"","permalink":"/demos/rxjs-combine-operators"},{"slug":"rxjs-complex-case","name":"Rxjs Complex case","description":"","thumbnail":"","permalink":"/demos/rxjs-complex-case"},{"slug":"rxjs-flattening-operators","name":"Rxjs Flattening Operators","description":"","thumbnail":"","permalink":"/demos/rxjs-flattening-operators"},{"slug":"rxjs-observable","name":"Rxjs Observable","description":"","thumbnail":"","permalink":"/demos/rxjs-observable"},{"slug":"rxjs-subject","name":"Rxjs Subject","description":"","thumbnail":"","permalink":"/demos/rxjs-subject"},{"slug":"select","name":"Select","description":"","thumbnail":"","permalink":"/demos/select"},{"slug":"selectable-box","name":"Selectable box","description":"","thumbnail":"","permalink":"/demos/selectable-box"},{"slug":"side-menu","name":"Side menu","description":"","thumbnail":"","permalink":"/demos/side-menu"},{"slug":"skeleton","name":"Skeleton","description":"","thumbnail":"","permalink":"/demos/skeleton"},{"slug":"slide-toggle","name":"Slide toggle","description":"","thumbnail":"","permalink":"/demos/slide-toggle"},{"slug":"spacing","name":"Spacing","description":"","thumbnail":"","permalink":"/demos/spacing"},{"slug":"spinner","name":"Spinner","description":"","thumbnail":"","permalink":"/demos/spinner"},{"slug":"sticker","name":"Sticker","description":"","thumbnail":"","permalink":"/demos/sticker"},{"slug":"summary-stepper","name":"Stepper (with Summary)","description":"","thumbnail":"","permalink":"/demos/summary-stepper"},{"slug":"tab","name":"Tab","description":"","thumbnail":"","permalink":"/demos/tab"},{"slug":"table","name":"Table","description":"","thumbnail":"","permalink":"/demos/table"},{"slug":"table-dialog-content","name":"Table Dialog Content","description":"","thumbnail":"","permalink":"/demos/table-dialog-content"},{"slug":"table-entrypoint","name":"Entrypoint Table","description":"","thumbnail":"","permalink":"/demos/table-entrypoint"},{"slug":"task-list","name":"Task list","description":"","thumbnail":"","permalink":"/demos/task-list"},{"slug":"text-input","name":"Text Input","description":"","thumbnail":"","permalink":"/demos/text-input"},{"slug":"textarea","name":"Textarea","description":"","thumbnail":"","permalink":"/demos/textarea"},{"slug":"timeline","name":"Timeline","description":"Plot dated periods on a horizontal, year-based timeline. Overlapping periods stack into rows and take their color from the legend, with month/day zoom, selection, tooltips, filters, and an optional full-size mode.","thumbnail":"assets/thumbnails/timeline-thumbnail.png","permalink":"/demos/timeline"},{"slug":"timepicker","name":"Timepicker","description":"","thumbnail":"","permalink":"/demos/timepicker"},{"slug":"toast","name":"Toast","description":"","thumbnail":"","permalink":"/demos/toast"},{"slug":"toc","name":"Table of content","description":"","thumbnail":"","permalink":"/demos/toc"},{"slug":"toolbar","name":"Toolbar","description":"","thumbnail":"","permalink":"/demos/toolbar"},{"slug":"tooltip","name":"Tooltip","description":"","thumbnail":"","permalink":"/demos/tooltip"},{"slug":"typography","name":"Typography","description":"","thumbnail":"","permalink":"/demos/typography"},{"slug":"validators","name":"Validators","description":"","thumbnail":"","permalink":"/demos/validators"},{"slug":"week-navigator","name":"Week navigator","description":"Step through ISO weeks with a back and forward arrow. Shows the week number and its Monday to Friday range, computed with Luxon and formatted in the active locale.","thumbnail":"","permalink":"/demos/week-navigator"}]
package/browser/assets/json/table-entrypoint.json CHANGED
@@ -1 +1 @@
1
- {"demo-table-entrypoint-datasource.ts":"import { DataSource } from '@angular/cdk/collections';\nimport { MatSort } from '@angular/material/sort';\nimport { map } from 'rxjs/operators';\nimport { BehaviorSubject, merge, Observable } from 'rxjs';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemrvaMatPaginatorComponent } from '@onemrvapublic/design-system/mat-paginator';\n\n// TODO: Replace this with your own data model type\nexport interface ListItem {\n id: number;\n name: string;\n description: string;\n status: 'success' | 'error' | 'warn';\n color: OnemrvaMatColor;\n}\n\n// TODO: replace this with real data from your application\nconst EXAMPLE_DATA: ListItem[] = [\n {\n id: 1,\n name: 'Hydrogen',\n description:\n 'Hydrogen is the chemical element with the symbol H and atomic number 1',\n status: 'success',\n color: 'primary',\n },\n {\n id: 2,\n name: 'Helium',\n description:\n \"Helium (from Greek: ἥλιος, romanized: helios, lit. 'sun') is a chemical element with the symbol He and atomic number 2\",\n status: 'success',\n color: '',\n },\n {\n id: 3,\n name: 'Lithium',\n description:\n \"Lithium (from Greek: λίθος, romanized: lithos, lit. 'stone') is a chemical element with the symbol Li and atomic number 3\",\n status: 'error',\n color: 'error',\n },\n {\n id: 4,\n name: 'Beryllium',\n description:\n 'Beryllium is a chemical element with the symbol Be and atomic number 4',\n status: 'success',\n color: 'success',\n },\n {\n id: 5,\n name: 'Boron',\n description:\n 'Boron is a chemical element with the symbol B and atomic number 5',\n status: 'success',\n color: '',\n },\n {\n id: 6,\n name: 'Carbon',\n description:\n 'Carbon (from Latin: carbo \"coal\") is a chemical element with the symbol C and atomic number 6',\n status: 'warn',\n color: 'warn',\n },\n {\n id: 7,\n name: 'Nitrogen',\n description:\n 'Nitrogen is the chemical element with the symbol N and atomic number 7',\n status: 'success',\n color: '',\n },\n {\n id: 8,\n name: 'Oxygen',\n description:\n 'Oxygen is the chemical element with the symbol O and atomic number 8',\n status: 'success',\n color: '',\n },\n {\n id: 9,\n name: 'Fluorine',\n description:\n 'Fluorine is a chemical element with the symbol F and atomic number 9',\n status: 'success',\n color: '',\n },\n {\n id: 10,\n name: 'Neon',\n description:\n 'Neon is a chemical element with the symbol Ne and atomic number 10',\n status: 'success',\n color: '',\n },\n {\n id: 11,\n name: 'Sodium',\n description:\n 'Sodium is a chemical element with the symbol Na (from Latin natrium) and atomic number 11',\n status: 'success',\n color: '',\n },\n { id: 12, name: 'Magnesium', description: '', status: 'success', color: '' },\n { id: 13, name: 'Aluminum', description: '', status: 'success', color: '' },\n { id: 14, name: 'Silicon', description: '', status: 'error', color: '' },\n { id: 15, name: 'Phosphorus', description: '', status: 'success', color: '' },\n { id: 16, name: 'Sulfur', description: '', status: 'success', color: '' },\n { id: 17, name: 'Chlorine', description: '', status: 'warn', color: '' },\n { id: 18, name: 'Argon', description: '', status: 'success', color: '' },\n { id: 19, name: 'Potassium', description: '', status: 'success', color: '' },\n { id: 20, name: 'Calcium', description: '', status: 'success', color: '' },\n { id: 21, name: 'Scandium', description: '', status: 'success', color: '' },\n { id: 22, name: 'Titanium', description: '', status: 'success', color: '' },\n { id: 23, name: 'Vanadium', description: '', status: 'success', color: '' },\n { id: 24, name: 'Chromium', description: '', status: 'success', color: '' },\n];\n\n/**\n * Data source for the List view. This class should\n * encapsulate all logic for fetching and manipulating the displayed data\n * (including sorting, pagination, and filtering).\n */\nexport class ListDataSource extends DataSource<ListItem> {\n data: ListItem[] = EXAMPLE_DATA;\n paginator!: OnemrvaMatPaginatorComponent;\n sort: MatSort | undefined;\n data$: BehaviorSubject<ListItem[]> = new BehaviorSubject<ListItem[]>([]);\n\n constructor() {\n super();\n this.data$.next(this.data);\n }\n\n /**\n * Connect this data source to the table. The table will only update when\n * the returned stream emits new items.\n * @returns A stream of the items to be rendered.\n */\n connect(): Observable<ListItem[]> {\n if (this.sort) {\n // Combine everything that affects the rendered data into one update\n // stream for the data-table to consume.\n return merge(this.data$, this.sort.sortChange).pipe(\n map(() => {\n return this.getPagedData(this.getSortedData([...this.data]));\n }),\n );\n } else {\n throw Error('Please set the sort on the data source before connecting.');\n }\n }\n\n /**\n * Called when the table is being destroyed. Use this function, to clean up\n * any open connections or free any held resources that were set up during connect.\n */\n disconnect(): void {\n console.log('disconnect');\n }\n\n /**\n * Paginate the data (client-side). If you're using server-side pagination,\n * this would be replaced by requesting the appropriate data from the server.\n */\n private getPagedData(data: ListItem[]): ListItem[] {\n if (this.paginator) {\n const startIndex = this.paginator.pageIndex * this.paginator.pageSize;\n return data.splice(startIndex, this.paginator.pageSize);\n } else {\n return data;\n }\n }\n\n /**\n * Sort the data (client-side). If you're using server-side sorting,\n * this would be replaced by requesting the appropriate data from the server.\n */\n private getSortedData(data: ListItem[]): ListItem[] {\n if (!this.sort || !this.sort.active || this.sort.direction === '') {\n return data;\n }\n\n return data.sort((a, b) => {\n const isAsc = this.sort?.direction === 'asc';\n switch (this.sort?.active) {\n case 'status':\n return compare(a.status, b.status, isAsc);\n case 'description':\n return compare(a.description, b.description, isAsc);\n case 'name':\n return compare(a.name, b.name, isAsc);\n case 'id':\n return compare(+a.id, +b.id, isAsc);\n default:\n return 0;\n }\n });\n }\n\n /**\n * @param row\n */\n public remove(row: ListItem) {\n const idx = this.data.indexOf(row);\n if (idx >= 0) {\n this.data.splice(idx, 1);\n this.paginator.length = this.data.length;\n }\n this.data$.next(this.data);\n }\n\n /**\n *\n */\n public touch() {\n this.data$.next(this.data);\n }\n}\n\n/** Simple sort comparator for example ID/Name columns (for client-side sorting). */\nfunction compare(\n a: string | number,\n b: string | number,\n isAsc: boolean,\n): number {\n return (a < b ? -1 : 1) * (isAsc ? 1 : -1);\n}\n","demo-table-entrypoint.component.html":"<table\n mat-table\n class=\"full-width-table mat-card-table\"\n matSort\n aria-label=\"Elements\"\n>\n <!-- Id Column -->\n <ng-container matColumnDef=\"id\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header=\"id\">Id</th>\n <td mat-cell *matCellDef=\"let row\">{{ row.id }}</td>\n </ng-container>\n\n <!-- Name Column -->\n <ng-container matColumnDef=\"name\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header=\"name\">Name</th>\n <td mat-cell *matCellDef=\"let row\">\n <strong\n ><copy-to-clipboard [tooltip]=\"'copied.to.clipboard' | translate\">{{\n row.name\n }}</copy-to-clipboard></strong\n >\n </td>\n </ng-container>\n\n <!-- Description Column -->\n <ng-container matColumnDef=\"description\">\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header=\"description\"\n class=\"d-none-xsmall d-table-cell-medium\"\n >\n Description\n </th>\n <td\n mat-cell\n *matCellDef=\"let row\"\n class=\"d-none-xsmall d-table-cell-medium\"\n >\n <span></span>\n {{ row.description }}\n </td></ng-container\n >\n\n <!-- Status Column -->\n <ng-container matColumnDef=\"status\">\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header=\"status\"\n class=\"d-none-xsmall d-table-cell-medium\"\n >\n Status\n </th>\n <td\n mat-cell\n *matCellDef=\"let row\"\n class=\"d-none-xsmall d-table-cell-medium\"\n >\n @if (row.status === 'success') {\n <onemrva-mat-sticker\n aria-label=\"Success\"\n class=\"sticker\"\n color=\"success\"\n >\n <mat-icon class=\"mr-s\">thumb_up</mat-icon>Success\n </onemrva-mat-sticker>\n }\n @if (row.status === 'error') {\n <onemrva-mat-sticker aria-label=\"Error\" class=\"sticker\" color=\"error\">\n <mat-icon class=\"mr-s\">error</mat-icon>Error\n </onemrva-mat-sticker>\n }\n @if (row.status === 'warn') {\n <onemrva-mat-sticker aria-label=\"Warning\" class=\"sticker\" color=\"warn\">\n <mat-icon class=\"mr-s\">warning</mat-icon>Warning\n </onemrva-mat-sticker>\n }\n </td>\n </ng-container>\n\n <!-- More Column -->\n <ng-container matColumnDef=\"more\">\n <th mat-header-cell *matHeaderCellDef>More</th>\n <td mat-cell *matCellDef=\"let row\" class=\"text-right\">\n <button\n mat-icon-button\n [matMenuTriggerFor]=\"menu\"\n (click)=\"$event.stopPropagation()\"\n aria-label=\"More\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"edit(row)\" aria-label=\"Edit\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n <button mat-menu-item (click)=\"delete(row)\" aria-label=\"Delete\">\n <mat-icon>delete</mat-icon>Delete\n </button>\n <button mat-menu-item (click)=\"share(row)\" aria-label=\"Share\">\n <mat-icon>share</mat-icon>Share\n </button>\n </mat-menu>\n <mat-divider [vertical]=\"true\" />\n <button mat-icon-button aria-label=\"Continue\">\n <mat-icon>chevron_right</mat-icon>\n </button>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr\n mat-row\n (matRowClickable)=\"open(row)\"\n *matRowDef=\"let row; columns: displayedColumns\"\n ></tr>\n</table>\n<onemrva-mat-paginator\n [pageSizeDefaultOption]=\"10\"\n [pageIndex]=\"0\"\n [length]=\"dataSource.data.length\"\n (onRequestPage)=\"changePage($event)\"\n previousKey=\"Previous\"\n nextKey=\"Next\"\n #paginator\n/>\n","demo-table-entrypoint.component.ts":"import {\n AfterViewInit,\n Component,\n inject,\n ViewEncapsulation,\n viewChild,\n} from '@angular/core';\nimport { MatSort, MatSortModule } from '@angular/material/sort';\nimport { MatTable, MatTableModule } from '@angular/material/table';\nimport { ListDataSource, ListItem } from './demo-table-entrypoint-datasource';\nimport { Clipboard, ClipboardModule } from '@angular/cdk/clipboard';\n\nimport { MatCardModule } from '@angular/material/card';\nimport { MatChipsModule } from '@angular/material/chips';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatDividerModule } from '@angular/material/divider';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { OnemrvaMatPaginatorComponent } from '@onemrvapublic/design-system/mat-paginator';\nimport { OnemrvaSharedModule } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaCopyToClipboardComponent } from '@onemrvapublic/design-system/mat-copy-to-clipboard';\nimport { OnemrvaMatStickerModule } from '@onemrvapublic/design-system/mat-sticker';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { TranslatePipe } from '@ngx-translate/core';\n\n@Component({\n selector: 'app-demo-card-table',\n templateUrl: './demo-table-entrypoint.component.html',\n\n standalone: true,\n imports: [\n MatCardModule,\n MatChipsModule,\n MatTableModule,\n MatSortModule,\n MatIconModule,\n MatMenuModule,\n MatButtonModule,\n OnemrvaSharedModule,\n MatDividerModule,\n MatTooltipModule,\n ClipboardModule,\n OnemrvaCopyToClipboardComponent,\n OnemrvaMatStickerModule,\n OnemrvaMatPaginatorComponent,\n TranslatePipe,\n ],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTableEntrypointComponent\n extends DemoComponentBase\n implements AfterViewInit\n{\n readonly paginator = viewChild.required(OnemrvaMatPaginatorComponent);\n readonly sort = viewChild.required(MatSort);\n readonly table = viewChild.required(MatTable);\n dataSource: ListDataSource;\n\n /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */\n displayedColumns = ['id', 'name', 'description', 'status', 'more'];\n bgcolor = '#123456';\n\n clipboardService = inject(Clipboard);\n constructor() {\n super();\n this.dataSource = new ListDataSource();\n }\n\n ngAfterViewInit(): void {\n this.dataSource.sort = this.sort();\n this.dataSource.paginator = this.paginator();\n this.table().dataSource = this.dataSource;\n }\n\n edit(row: ListItem) {\n alert(`Edit row n°${row.id}: ${row.name}`);\n }\n\n delete(row: ListItem) {\n this.dataSource.remove(row);\n }\n\n share(row: ListItem) {\n alert(`Share row n°${row.id}: ${row.name}`);\n }\n\n changePage(event: any) {\n this.dataSource.paginator.pageIndex = event;\n this.dataSource.touch();\n }\n\n open(row: any) {\n alert(`Clicked : ${row.id}`);\n }\n}\n"}
1
+ {"demo-table-entrypoint-datasource.ts":"import { DataSource } from '@angular/cdk/collections';\nimport { MatSort } from '@angular/material/sort';\nimport { map } from 'rxjs/operators';\nimport { BehaviorSubject, merge, Observable } from 'rxjs';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemrvaMatPaginatorComponent } from '@onemrvapublic/design-system/mat-paginator';\n\n// TODO: Replace this with your own data model type\nexport interface ListItem {\n id: number;\n name: string;\n description: string;\n status: 'success' | 'error' | 'warn';\n color: OnemrvaMatColor;\n}\n\n// TODO: replace this with real data from your application\nconst EXAMPLE_DATA: ListItem[] = [\n {\n id: 1,\n name: 'Hydrogen',\n description:\n 'Hydrogen is the chemical element with the symbol H and atomic number 1',\n status: 'success',\n color: 'primary',\n },\n {\n id: 2,\n name: 'Helium',\n description:\n \"Helium (from Greek: ἥλιος, romanized: helios, lit. 'sun') is a chemical element with the symbol He and atomic number 2\",\n status: 'success',\n color: '',\n },\n {\n id: 3,\n name: 'Lithium',\n description:\n \"Lithium (from Greek: λίθος, romanized: lithos, lit. 'stone') is a chemical element with the symbol Li and atomic number 3\",\n status: 'error',\n color: 'error',\n },\n {\n id: 4,\n name: 'Beryllium',\n description:\n 'Beryllium is a chemical element with the symbol Be and atomic number 4',\n status: 'success',\n color: 'success',\n },\n {\n id: 5,\n name: 'Boron',\n description:\n 'Boron is a chemical element with the symbol B and atomic number 5',\n status: 'success',\n color: '',\n },\n {\n id: 6,\n name: 'Carbon',\n description:\n 'Carbon (from Latin: carbo \"coal\") is a chemical element with the symbol C and atomic number 6',\n status: 'warn',\n color: 'warn',\n },\n {\n id: 7,\n name: 'Nitrogen',\n description:\n 'Nitrogen is the chemical element with the symbol N and atomic number 7',\n status: 'success',\n color: '',\n },\n {\n id: 8,\n name: 'Oxygen',\n description:\n 'Oxygen is the chemical element with the symbol O and atomic number 8',\n status: 'success',\n color: '',\n },\n {\n id: 9,\n name: 'Fluorine',\n description:\n 'Fluorine is a chemical element with the symbol F and atomic number 9',\n status: 'success',\n color: '',\n },\n {\n id: 10,\n name: 'Neon',\n description:\n 'Neon is a chemical element with the symbol Ne and atomic number 10',\n status: 'success',\n color: '',\n },\n {\n id: 11,\n name: 'Sodium',\n description:\n 'Sodium is a chemical element with the symbol Na (from Latin natrium) and atomic number 11',\n status: 'success',\n color: '',\n },\n { id: 12, name: 'Magnesium', description: '', status: 'success', color: '' },\n { id: 13, name: 'Aluminum', description: '', status: 'success', color: '' },\n { id: 14, name: 'Silicon', description: '', status: 'error', color: '' },\n { id: 15, name: 'Phosphorus', description: '', status: 'success', color: '' },\n { id: 16, name: 'Sulfur', description: '', status: 'success', color: '' },\n { id: 17, name: 'Chlorine', description: '', status: 'warn', color: '' },\n { id: 18, name: 'Argon', description: '', status: 'success', color: '' },\n { id: 19, name: 'Potassium', description: '', status: 'success', color: '' },\n { id: 20, name: 'Calcium', description: '', status: 'success', color: '' },\n { id: 21, name: 'Scandium', description: '', status: 'success', color: '' },\n { id: 22, name: 'Titanium', description: '', status: 'success', color: '' },\n { id: 23, name: 'Vanadium', description: '', status: 'success', color: '' },\n { id: 24, name: 'Chromium', description: '', status: 'success', color: '' },\n];\n\n/**\n * Data source for the List view. This class should\n * encapsulate all logic for fetching and manipulating the displayed data\n * (including sorting, pagination, and filtering).\n */\nexport class ListDataSource extends DataSource<ListItem> {\n data: ListItem[] = EXAMPLE_DATA;\n paginator!: OnemrvaMatPaginatorComponent;\n sort: MatSort | undefined;\n data$: BehaviorSubject<ListItem[]> = new BehaviorSubject<ListItem[]>([]);\n\n constructor() {\n super();\n this.data$.next(this.data);\n }\n\n /**\n * Connect this data source to the table. The table will only update when\n * the returned stream emits new items.\n * @returns A stream of the items to be rendered.\n */\n connect(): Observable<ListItem[]> {\n if (this.sort) {\n // Combine everything that affects the rendered data into one update\n // stream for the data-table to consume.\n return merge(this.data$, this.sort.sortChange).pipe(\n map(() => {\n return this.getPagedData(this.getSortedData([...this.data]));\n }),\n );\n } else {\n throw Error('Please set the sort on the data source before connecting.');\n }\n }\n\n /**\n * Called when the table is being destroyed. Use this function, to clean up\n * any open connections or free any held resources that were set up during connect.\n */\n disconnect(): void {\n console.log('disconnect');\n }\n\n /**\n * Paginate the data (client-side). If you're using server-side pagination,\n * this would be replaced by requesting the appropriate data from the server.\n */\n private getPagedData(data: ListItem[]): ListItem[] {\n if (this.paginator) {\n const startIndex = this.paginator.pageIndex * this.paginator.pageSize;\n return data.splice(startIndex, this.paginator.pageSize);\n } else {\n return data;\n }\n }\n\n /**\n * Sort the data (client-side). If you're using server-side sorting,\n * this would be replaced by requesting the appropriate data from the server.\n */\n private getSortedData(data: ListItem[]): ListItem[] {\n if (!this.sort || !this.sort.active || this.sort.direction === '') {\n return data;\n }\n\n return data.sort((a, b) => {\n const isAsc = this.sort?.direction === 'asc';\n switch (this.sort?.active) {\n case 'status':\n return compare(a.status, b.status, isAsc);\n case 'description':\n return compare(a.description, b.description, isAsc);\n case 'name':\n return compare(a.name, b.name, isAsc);\n case 'id':\n return compare(+a.id, +b.id, isAsc);\n default:\n return 0;\n }\n });\n }\n\n /**\n * @param row\n */\n public remove(row: ListItem) {\n const idx = this.data.indexOf(row);\n if (idx >= 0) {\n this.data.splice(idx, 1);\n this.paginator.length = this.data.length;\n }\n this.data$.next(this.data);\n }\n\n /**\n *\n */\n public touch() {\n this.data$.next(this.data);\n }\n}\n\n/** Simple sort comparator for example ID/Name columns (for client-side sorting). */\nfunction compare(\n a: string | number,\n b: string | number,\n isAsc: boolean,\n): number {\n return (a < b ? -1 : 1) * (isAsc ? 1 : -1);\n}\n","demo-table-entrypoint.component.html":"<table\n mat-table\n class=\"full-width-table mat-card-table\"\n matSort\n aria-label=\"Elements\"\n>\n <!-- Id Column -->\n <ng-container matColumnDef=\"id\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header=\"id\">Id</th>\n <td mat-cell *matCellDef=\"let row\">{{ row.id }}</td>\n </ng-container>\n\n <!-- Name Column -->\n <ng-container matColumnDef=\"name\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header=\"name\">Name</th>\n <td mat-cell *matCellDef=\"let row\">\n <strong\n ><copy-to-clipboard [tooltip]=\"'copied.to.clipboard' | translate\">{{\n row.name\n }}</copy-to-clipboard></strong\n >\n </td>\n </ng-container>\n\n <!-- Description Column -->\n <ng-container matColumnDef=\"description\">\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header=\"description\"\n class=\"d-none-xsmall d-table-cell-medium\"\n >\n Description\n </th>\n <td\n mat-cell\n *matCellDef=\"let row\"\n class=\"d-none-xsmall d-table-cell-medium\"\n >\n <span></span>\n {{ row.description }}\n </td></ng-container\n >\n\n <!-- Status Column -->\n <ng-container matColumnDef=\"status\">\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header=\"status\"\n class=\"d-none-xsmall d-table-cell-medium\"\n >\n Status\n </th>\n <td\n mat-cell\n *matCellDef=\"let row\"\n class=\"d-none-xsmall d-table-cell-medium\"\n >\n @if (row.status === 'success') {\n <onemrva-mat-sticker\n aria-label=\"Success\"\n class=\"sticker\"\n color=\"success\"\n >\n <mat-icon class=\"mr-s\">thumb_up</mat-icon>Success\n </onemrva-mat-sticker>\n }\n @if (row.status === 'error') {\n <onemrva-mat-sticker aria-label=\"Error\" class=\"sticker\" color=\"error\">\n <mat-icon class=\"mr-s\">error</mat-icon>Error\n </onemrva-mat-sticker>\n }\n @if (row.status === 'warn') {\n <onemrva-mat-sticker aria-label=\"Warning\" class=\"sticker\" color=\"warn\">\n <mat-icon class=\"mr-s\">warning</mat-icon>Warning\n </onemrva-mat-sticker>\n }\n </td>\n </ng-container>\n\n <!-- More Column -->\n <ng-container matColumnDef=\"more\">\n <th mat-header-cell *matHeaderCellDef>More</th>\n <td mat-cell *matCellDef=\"let row\" class=\"text-right\">\n <button\n mat-icon-button\n [matMenuTriggerFor]=\"menu\"\n (click)=\"$event.stopPropagation()\"\n aria-label=\"More\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"edit(row)\" aria-label=\"Edit\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n <button mat-menu-item (click)=\"delete(row)\" aria-label=\"Delete\">\n <mat-icon>delete</mat-icon>Delete\n </button>\n <button mat-menu-item (click)=\"share(row)\" aria-label=\"Share\">\n <mat-icon>share</mat-icon>Share\n </button>\n </mat-menu>\n <mat-divider [vertical]=\"true\" />\n <button mat-icon-button aria-label=\"Continue\">\n <mat-icon>chevron_right</mat-icon>\n </button>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr\n mat-row\n (matRowClickable)=\"open(row)\"\n *matRowDef=\"let row; columns: displayedColumns\"\n ></tr>\n</table>\n<onemrva-mat-paginator\n [pageSizeDefaultOption]=\"10\"\n [pageIndex]=\"0\"\n [length]=\"dataSource.data.length\"\n (onRequestPage)=\"changePage($event)\"\n previousKey=\"Previous\"\n nextKey=\"Next\"\n #paginator\n/>\n","demo-table-entrypoint.component.ts":"import {\n AfterViewInit,\n Component,\n inject,\n ViewEncapsulation,\n viewChild,\n} from '@angular/core';\nimport { MatSort, MatSortModule } from '@angular/material/sort';\nimport { MatTable, MatTableModule } from '@angular/material/table';\nimport { ListDataSource, ListItem } from './demo-table-entrypoint-datasource';\nimport { Clipboard, ClipboardModule } from '@angular/cdk/clipboard';\n\nimport { MatCardModule } from '@angular/material/card';\nimport { MatChipsModule } from '@angular/material/chips';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatDividerModule } from '@angular/material/divider';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { OnemrvaMatPaginatorComponent } from '@onemrvapublic/design-system/mat-paginator';\nimport { OnemrvaSharedModule } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaCopyToClipboardComponent } from '@onemrvapublic/design-system/mat-copy-to-clipboard';\nimport { OnemrvaMatStickerModule } from '@onemrvapublic/design-system/mat-sticker';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { TranslatePipe } from '@ngx-translate/core';\n\n@Component({\n selector: 'app-demo-table-entrypoint',\n templateUrl: './demo-table-entrypoint.component.html',\n\n standalone: true,\n imports: [\n MatCardModule,\n MatChipsModule,\n MatTableModule,\n MatSortModule,\n MatIconModule,\n MatMenuModule,\n MatButtonModule,\n OnemrvaSharedModule,\n MatDividerModule,\n MatTooltipModule,\n ClipboardModule,\n OnemrvaCopyToClipboardComponent,\n OnemrvaMatStickerModule,\n OnemrvaMatPaginatorComponent,\n TranslatePipe,\n ],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTableEntrypointComponent\n extends DemoComponentBase\n implements AfterViewInit\n{\n readonly paginator = viewChild.required(OnemrvaMatPaginatorComponent);\n readonly sort = viewChild.required(MatSort);\n readonly table = viewChild.required(MatTable);\n dataSource: ListDataSource;\n\n /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */\n displayedColumns = ['id', 'name', 'description', 'status', 'more'];\n bgcolor = '#123456';\n\n clipboardService = inject(Clipboard);\n constructor() {\n super();\n this.dataSource = new ListDataSource();\n }\n\n ngAfterViewInit(): void {\n this.dataSource.sort = this.sort();\n this.dataSource.paginator = this.paginator();\n this.table().dataSource = this.dataSource;\n }\n\n edit(row: ListItem) {\n alert(`Edit row n°${row.id}: ${row.name}`);\n }\n\n delete(row: ListItem) {\n this.dataSource.remove(row);\n }\n\n share(row: ListItem) {\n alert(`Share row n°${row.id}: ${row.name}`);\n }\n\n changePage(event: any) {\n this.dataSource.paginator.pageIndex = event;\n this.dataSource.touch();\n }\n\n open(row: any) {\n alert(`Clicked : ${row.id}`);\n }\n}\n"}