@onemrvapublic/design-system-demos 22.4.0-develop.9 → 22.4.1-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.
- package/browser/assets/codes.json +1 -1
- package/browser/assets/demos-manifest.json +1 -1
- package/browser/assets/json/chips-input.json +1 -1
- package/browser/assets/json/table-entrypoint.json +1 -0
- package/browser/main.js +3 -3
- package/browser/styles.css +1 -1
- package/package.json +1 -1
- package/browser/assets/json/card-table.json +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
["address","address-input","autocomplete","avatar","badge","bank-input","bce-pipe","birthplace-input","breadcrumb","button","button-loading","button-toggle","card","
|
|
1
|
+
["address","address-input","autocomplete","avatar","badge","bank-input","bce-pipe","birthplace-input","breadcrumb","button","button-loading","button-toggle","card","checkbox","chips","chips-input","choice-chips","collapsible-page-divider","copy-to-clipboard","country-input","datepicker","datepicker-luxon","datepicker-month-year","daterangepicker","dialog","dialog-content","digit-only","drag-and-drop","drawer","empty","enterprise-number-input","error","error-handler","fab","file-panel","file-upload","file-upload-manual","form","grid","horizontal-stepper","icon","icon-button","if-width-is","jsonform","language-switcher","layout","link","mask","menu","message-box","multiselect","niss-pipe","not-found","notification","overlay","paginator","palette","panel","phone-input","pop-over","progress-bar","radio","rxjs-combine-operators","rxjs-complex-case","rxjs-flattening-operators","rxjs-observable","rxjs-subject","select","selectable-box","selectable-box-large","side-menu","skeleton","slide-toggle","spacing","spinner","sticker","summary-stepper","tab","table","table-dialog-content","table-entrypoint","task-list","text-input","textarea","timeline","timepicker","toast","toc","toolbar","tooltip","typography","validators"]
|
|
@@ -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":"card-table","name":"Card Table","description":"","thumbnail":"","permalink":"/demos/card-table"},{"slug":"checkbox","name":"Checkbox","description":"","thumbnail":"","permalink":"/demos/checkbox"},{"slug":"chips","name":"Chips","description":"","thumbnail":"","permalink":"/demos/chips"},{"slug":"chips-input","name":"Chips Input","description":"","thumbnail":"","permalink":"/demos/chips-input"},{"slug":"choice-chips","name":"Choice chips","description":"","thumbnail":"","permalink":"/demos/choice-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":"selectable-box-large","name":"Selectable box Large","description":"","thumbnail":"","permalink":"/demos/selectable-box-large"},{"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":"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"}]
|
|
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":"chips-input","name":"Chips Input","description":"","thumbnail":"","permalink":"/demos/chips-input"},{"slug":"choice-chips","name":"Choice chips","description":"","thumbnail":"","permalink":"/demos/choice-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":"selectable-box-large","name":"Selectable box Large","description":"","thumbnail":"","permalink":"/demos/selectable-box-large"},{"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"}]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-chips-input.component.html":"<mat-form-field class=\"chips-input-field\" [readonly]=\"readonly()\">\n <mat-label>Favorite Fruits</mat-label>\n <mat-chip-grid #chipGrid aria-label=\"Fruit selection\">\n @for (fruit of fruits(); track fruit) {\n <mat-chip-row\n [color]=\"color()\"\n [disabled]=\"disabled()\"\n [removable]=\"!disabled()\"\n (removed)=\"remove(fruit)\"\n aria-label=\"Fruit: {{ fruit }}\"\n >\n {{ fruit }}\n @if (!disabled() && !readonly()) {\n <button matChipRemove [attr.aria-label]=\"'remove ' + fruit\">\n <mat-icon>
|
|
1
|
+
{"demo-chips-input.component.html":"<mat-form-field class=\"chips-input-field\" [readonly]=\"readonly()\">\n <mat-label>Favorite Fruits</mat-label>\n <mat-chip-grid #chipGrid aria-label=\"Fruit selection\">\n @for (fruit of fruits(); track fruit) {\n <mat-chip-row\n [color]=\"color()\"\n [disabled]=\"disabled()\"\n [removable]=\"!disabled()\"\n (removed)=\"remove(fruit)\"\n aria-label=\"Fruit: {{ fruit }}\"\n >\n {{ fruit }}\n @if (!disabled() && !readonly()) {\n <button matChipRemove [attr.aria-label]=\"'remove ' + fruit\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </mat-chip-row>\n }\n </mat-chip-grid>\n\n <input\n #fruitInput\n placeholder=\"Add fruit...\"\n [(ngModel)]=\"currentFruit\"\n [matChipInputFor]=\"chipGrid\"\n [matAutocomplete]=\"auto\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n (matChipInputTokenEnd)=\"add($event)\"\n [disabled]=\"disabled()\"\n />\n\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n @for (fruit of filteredFruits(); track fruit) {\n <mat-option [value]=\"fruit\">{{ fruit }}</mat-option>\n }\n </mat-autocomplete>\n</mat-form-field>\n","demo-chips-input.component.ts":"import {\n Component,\n computed,\n inject,\n input,\n model,\n signal,\n ViewEncapsulation,\n} from '@angular/core';\nimport { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { FormsModule } from '@angular/forms';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport {\n MatAutocomplete,\n MatAutocompleteSelectedEvent,\n MatAutocompleteTrigger,\n MatOption,\n} from '@angular/material/autocomplete';\nimport { LiveAnnouncer } from '@angular/cdk/a11y';\nimport { COMMA, ENTER } from '@angular/cdk/keycodes';\n\nexport interface Fruit {\n name: string;\n}\n@Component({\n selector: 'app-demo-chips-input',\n standalone: true,\n imports: [\n FormsModule,\n MatChipsModule,\n DragDropModule,\n MatIconModule,\n MatFormFieldModule,\n OnemRvaReadonlyDirective,\n MatAutocomplete,\n MatOption,\n MatAutocompleteTrigger,\n ],\n templateUrl: './demo-chips-input.component.html',\n\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoChipsInputComponent extends DemoComponentBase {\n color = input<OnemrvaMatColor>('');\n disabled = input(false);\n readonly = input(false);\n\n readonly separatorKeysCodes: number[] = [ENTER, COMMA];\n readonly filteredFruits = computed(() => {\n const currentFruit = this.currentFruit().toLowerCase();\n return currentFruit\n ? this.allFruits.filter(fruit =>\n fruit.toLowerCase().includes(currentFruit),\n )\n : this.allFruits.slice();\n });\n readonly currentFruit = model('');\n readonly announcer = inject(LiveAnnouncer);\n readonly fruits = signal(['Lemon']);\n readonly allFruits: string[] = [\n 'Apple',\n 'Lemon',\n 'Lime',\n 'Orange',\n 'Strawberry',\n ];\n\n add(event: MatChipInputEvent): void {\n const value = (event.value || '').trim();\n\n // Add our fruit\n if (value) {\n this.fruits.update(fruits => [...fruits, value]);\n }\n\n // Clear the input value\n this.currentFruit.set('');\n }\n\n remove(fruit: string): void {\n this.fruits.update(fruits => {\n const index = fruits.indexOf(fruit);\n if (index < 0) {\n return fruits;\n }\n\n fruits.splice(index, 1);\n this.announcer.announce(`Removed ${fruit}`);\n return [...fruits];\n });\n }\n\n selected(event: MatAutocompleteSelectedEvent): void {\n this.fruits.update(fruits => [...fruits, event.option.viewValue]);\n this.currentFruit.set('');\n event.option.deselect();\n }\n}\n"}
|
|
@@ -0,0 +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"}
|