@onemrvapublic/design-system-demos 22.5.0-develop.4 → 22.5.0-develop.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
["address","address-input","autocomplete","avatar","badge","bank-input","bce-pipe","birthplace-input","breadcrumb","button","button-loading","button-toggle","card","checkbox","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","
|
|
1
|
+
["address","address-input","autocomplete","avatar","badge","bank-input","bce-pipe","birthplace-input","breadcrumb","button","button-loading","button-toggle","card","checkbox","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","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","week-navigator"]
|
|
@@ -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":"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"},{"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":"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 +1 @@
|
|
|
1
|
-
{"demo-selectable-box.component.html":"<mat-radio-group\n name=\"unemploymentType\"\n required\n [formControl]=\"formControl\"\n class=\"
|
|
1
|
+
{"demo-selectable-box.component.html":"<mat-radio-group\n name=\"unemploymentType\"\n required\n [formControl]=\"formControl\"\n class=\"selectable-box-demo g-m\"\n>\n @for (option of options; track option.label) {\n <onemrva-mat-selectable-box\n [value]=\"option.label\"\n [disabled]=\"disabled()\"\n [tooltip]=\"option.tooltip ? 'More information about ' + option.label : ''\"\n >\n <!-- The title attribute puts it in the header, next to the radio -->\n <ng-container title>{{ option.label }}</ng-container>\n <!-- The icon attribute puts a mat-icon after the title -->\n @if (option.icon) {\n <ng-container icon>{{ option.icon }}</ng-container>\n }\n <!-- The sticker attribute puts it at the end of the header -->\n @if (option.sticker) {\n <onemrva-mat-sticker sticker color=\"primary\"\n >312 days left</onemrva-mat-sticker\n >\n }\n\n <!-- No attribute puts it in the body. Don't put inputs (text fields, ...) in the body -->\n @if (body() !== 'none') {\n <div class=\"selectable-box-content\">\n @switch (body()) {\n @case ('text') {\n <span>Période à prester au CPAS</span>\n }\n @case ('list') {\n <ul class=\"selectable-box-list\">\n @for (item of weather; track item) {\n <li>{{ item }}</li>\n }\n </ul>\n }\n @case ('address') {\n <address class=\"selectable-box-address\">\n Rue du Bois, 75<br />\n 6180 Charleroi\n </address>\n }\n @case ('data') {\n <dl class=\"selectable-box-data\">\n @for (row of data; track row.label) {\n <dt>{{ row.label }}</dt>\n <dd>{{ row.value }}</dd>\n }\n </dl>\n }\n }\n\n @if (button()) {\n <div>\n <!-- Stop the click so editing doesn't also select the box -->\n <button\n mat-stroked-button\n color=\"primary\"\n class=\"small\"\n [disabled]=\"disabled()\"\n (click)=\"$event.stopPropagation()\"\n >\n Edit<mat-icon iconPositionEnd>edit</mat-icon>\n </button>\n </div>\n }\n </div>\n }\n </onemrva-mat-selectable-box>\n }\n</mat-radio-group>\n","demo-selectable-box.component.scss":"app-demo-selectable-box {\n // Boxes hug their content and sit top-aligned, as in the Figma examples.\n .selectable-box-demo {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n }\n\n // Content and Edit button are 16px apart, as in the Figma \"Button = True\" bodies.\n .selectable-box-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--double-spacer);\n }\n\n .selectable-box-list {\n display: flex;\n flex-direction: column;\n gap: var(--spacer);\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n .selectable-box-address {\n margin: 0;\n font-style: normal;\n }\n\n // Labels right-aligned, values left-aligned, as in the Figma \"Data\" body.\n .selectable-box-data {\n display: grid;\n grid-template-columns: auto auto;\n justify-content: start;\n gap: var(--spacer);\n margin: 0;\n\n dt {\n text-align: right;\n color: var(--mat-sys-on-surface-variant);\n }\n\n dd {\n margin: 0;\n font-weight: 600;\n }\n }\n}\n","demo-selectable-box.component.ts":"import { Component, input, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { MatRadioModule } from '@angular/material/radio';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { OnemrvaMatStickerModule } from '@onemrvapublic/design-system/mat-sticker';\nimport { OnemrvaMatSelectableBoxModule } from '@onemrvapublic/design-system/mat-selectable-box';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\ntype SelectableBoxBody = 'none' | 'text' | 'list' | 'address' | 'data';\n\n@Component({\n selector: 'app-demo-selectable-box',\n templateUrl: './demo-selectable-box.component.html',\n styleUrls: ['./demo-selectable-box.component.scss'],\n\n standalone: true,\n imports: [\n ReactiveFormsModule,\n MatButtonModule,\n MatIconModule,\n MatRadioModule,\n OnemrvaMatSelectableBoxModule,\n OnemrvaMatStickerModule,\n OnemRvaColorDirective,\n ],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSelectableBoxComponent extends DemoComponentBase {\n formControl = new FormControl<string>('');\n\n /** Body variant from Figma \"Selectable box body\". `none` renders the box without body. */\n body = input<SelectableBoxBody>('list');\n /** Adds an Edit button under the body content. */\n button = input<boolean>(false);\n disabled = input<boolean>(false);\n\n // Each option shows a different header combination, as in the Figma examples.\n options = [\n { label: 'Economical', icon: '', sticker: false, tooltip: true },\n { label: 'Bad weather', icon: 'ac_unit', sticker: false, tooltip: false },\n { label: 'Other', icon: 'more_horiz', sticker: true, tooltip: true },\n ];\n\n weather = ['Gel', 'Verglas', 'Neige', 'Grêle'];\n\n data = [\n { label: 'Période à prester au CPAS', value: '16/08/2022 - 14/08/2023' },\n { label: 'Date de demande des allocations', value: '16/08/2023' },\n { label: 'Réglementation', value: 'Article 30 : Nouveau dossier' },\n { label: 'Q/S à prester au CPAS', value: '38 / 38' },\n { label: 'Période de référence', value: '16/11/2021 - 15/08/2023' },\n { label: 'Prestations passées prises en compte', value: '0 jour' },\n ];\n}\n"}
|