@onemrvapublic/design-system-demos 22.3.0 → 22.4.0-develop.2
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/panel.json +1 -1
- package/browser/assets/json/sticker.json +1 -1
- package/browser/main.js +159 -157
- package/browser/styles.css +1 -1
- package/package.json +1 -1
- package/browser/assets/json/carousel.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","card-table","
|
|
1
|
+
["address","address-input","autocomplete","avatar","badge","bank-input","bce-pipe","birthplace-input","breadcrumb","button","button-loading","button-toggle","card","card-table","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","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":"carousel","name":"Carousel","description":"","thumbnail":"","permalink":"/demos/carousel"},{"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":"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 +1 @@
|
|
|
1
|
-
{"demo-panel.component.html":"<onemrva-mat-panel\n [color]=\"color()\"\n [expandable]=\"expandable()\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpandedChange($event)\"\n>\n <onemrva-mat-panel-title>\n Employee\n <onemrva-mat-sticker [color]=\"'warn'\">
|
|
1
|
+
{"demo-panel.component.html":"@if (color() === 'primary') {\n <onemrva-mat-panel [color]=\"color()\" [expandable]=\"false\" class=\"mb-m\">\n <onemrva-mat-panel-title>\n <onemrva-mat-panel-block [isTitle]=\"true\" class=\"mr-3xl\">\n 840126/999-89 First name Last name\n </onemrva-mat-panel-block>\n </onemrva-mat-panel-title>\n </onemrva-mat-panel>\n}\n\n<onemrva-mat-panel\n [color]=\"color()\"\n [expandable]=\"expandable()\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpandedChange($event)\"\n>\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\" class=\"mr-3xl\">\n Employee\n </onemrva-mat-panel-block>\n @if (color() === 'primary') {\n <onemrva-mat-panel-block class=\"mr-3xl\">\n 0400.254.860\n </onemrva-mat-panel-block>\n\n <onemrva-mat-panel-block class=\"mr-3xl\">\n 0400.254.860\n </onemrva-mat-panel-block>\n }\n\n <!-- <onemrva-mat-panel-block class=\"mr-3xl\">-->\n <!-- <span blockKey>N° d’entreprise</span>-->\n <!-- <span blockValue>2.005.268.154</span>-->\n <!-- </onemrva-mat-panel-block>-->\n\n <!-- <onemrva-mat-panel-block class=\"mr-3xl\">-->\n <!-- <span blockKey>N° d’entreprise</span>-->\n <!-- <span blockValue>2.005.268.154</span>-->\n <!-- </onemrva-mat-panel-block>-->\n </div>\n\n <onemrva-mat-sticker [color]=\"'warn'\"\n >En cours de traitement</onemrva-mat-sticker\n >\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content customNgClass=\"is-expandable\">\n <p>\n Kamino neimoidia calrissian quarren darth raymus. Unduli mon luuke\n sal-solo tierce. Quelli desann dash veila galen kushiban sesswenna\n thistleborn. Kota terrik vuffi nadon kwi bibble anomid max moore. Ansion\n trandoshan bib pa'lowick thennqora gilad zhell. Tenel anzati secura rom\n isolder. Haruun karrde lahara frozarns wroonian bimm skakoan gallia\n zuckuss. Nien wicket balosar bardan gen'dai kor-uj aka mod. B'omarr hssis\n priapulin ogemite. Zuggs drovian h'nemthean keyan shmi vulptereen amanin\n cal. Thistleborn gilad airen wookiee.\n </p>\n <button mat-stroked-button color=\"primary\" class=\"small\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel\n [color]=\"color()\"\n [expandable]=\"expandable()\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpandedChange($event)\"\n class=\"mt-m\"\n>\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\" class=\"mr-3xl\">\n Employee\n </onemrva-mat-panel-block>\n\n @if (color() === 'primary') {\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n }\n </div>\n\n <onemrva-mat-sticker [color]=\"'warn'\"\n >En cours de traitement</onemrva-mat-sticker\n >\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content customNgClass=\"is-expandable\">\n <p>\n Kamino neimoidia calrissian quarren darth raymus. Unduli mon luuke\n sal-solo tierce. Quelli desann dash veila galen kushiban sesswenna\n thistleborn. Kota terrik vuffi nadon kwi bibble anomid max moore. Ansion\n trandoshan bib pa'lowick thennqora gilad zhell. Tenel anzati secura rom\n isolder. Haruun karrde lahara frozarns wroonian bimm skakoan gallia\n zuckuss. Nien wicket balosar bardan gen'dai kor-uj aka mod. B'omarr hssis\n priapulin ogemite. Zuggs drovian h'nemthean keyan shmi vulptereen amanin\n cal. Thistleborn gilad airen wookiee.\n </p>\n <button mat-stroked-button color=\"primary\" class=\"small\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel [color]=\"color()\" [expandable]=\"false\" class=\"mt-m\">\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\">\n 840126/999-89 Mandelovics Maika\n </onemrva-mat-panel-block>\n </div>\n\n <onemrva-mat-sticker [color]=\"'success'\">Traité</onemrva-mat-sticker>\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content>\n <div class=\"grid\">\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span> </onemrva-mat-panel-block\n ><onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n </div>\n\n <button mat-stroked-button color=\"primary\" class=\"small mt-m\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel [color]=\"color()\" [expandable]=\"false\" class=\"mt-m\">\n <onemrva-mat-panel-content\n [hasBlocks]=\"true\"\n customNgClass=\"remove-margin-empty\"\n >\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>Here is the key</span>\n <span blockValue>Here is the value</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>Here is the key</span>\n <span blockValue>Here is the value</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <onemrva-mat-sticker class=\"mat-info\">\n Wordt geïmporteerd\n </onemrva-mat-sticker>\n </onemrva-mat-panel-block>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n","demo-panel.component.scss":"onemrva-mat-panel {\n .first-part {\n display: flex;\n }\n\n .remove-margin-empty {\n margin-top: 0 !important;\n }\n\n .grid {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n gap: var(--spacer) var(--quad-spacer);\n }\n\n p {\n margin-top: 0;\n }\n}\n","demo-panel.component.ts":"import { Component, input, ViewEncapsulation } from '@angular/core';\n\nimport { OnemrvaMatStickerComponent } from '@onemrvapublic/design-system/mat-sticker';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system/mat-panel';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n/*\n TODO: Check with designers the following items\n - responsiveness (awareness)\n - Colors or not\n - New block component\n - Show difference between expandable and not\n */\n\n@Component({\n selector: 'app-demo-panel',\n\n standalone: true,\n imports: [\n OnemrvaMatPanelModule,\n MatButtonModule,\n MatIconModule,\n OnemRvaColorDirective,\n OnemrvaMatStickerComponent,\n ],\n styleUrls: ['./demo-panel.component.scss'],\n styles: [],\n templateUrl: 'demo-panel.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoPanelComponent extends DemoComponentBase {\n color = input<OnemrvaMatColor>(OnemrvaMatColor.NONE);\n expandable = input(true);\n\n expanded = false;\n\n onExpandedChange(expanded: boolean) {\n console.log('expanded logged:', expanded);\n }\n}\n"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-sticker.component.html":"@if (htmlTooltip()) {\n <onemrva-mat-sticker [color]=\"color()\" [htmlTooltip]=\"tooltipContent\">\n Default\n </onemrva-mat-sticker>\n} @else {\n <onemrva-mat-sticker [color]=\"color()\" [tooltip]=\"tooltip()\">\n Default\n </onemrva-mat-sticker>\n}\n\n<ng-template #tooltipContent>\n I am a custom content with html (position: <b>right</b>) but there are 3\n
|
|
1
|
+
{"demo-sticker.component.html":"@if (htmlTooltip()) {\n <onemrva-mat-sticker [color]=\"color()\" [htmlTooltip]=\"tooltipContent\">\n Default\n </onemrva-mat-sticker>\n} @else {\n <onemrva-mat-sticker [color]=\"color()\" [tooltip]=\"tooltip()\">\n Default\n </onemrva-mat-sticker>\n}\n\n<ng-template #tooltipContent>\n I am a custom content with html (position: <b>right</b>) but there are 3 other\n positions\n <ul>\n <li>left</li>\n <li>top</li>\n <li>bottom</li>\n </ul>\n</ng-template>\n","demo-sticker.component.ts":"import { Component, ViewEncapsulation, input } from '@angular/core';\n\nimport { OnemrvaMatStickerModule } from '@onemrvapublic/design-system/mat-sticker';\nimport { FormsModule } from '@angular/forms';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-sticker',\n templateUrl: './demo-sticker.component.html',\n\n standalone: true,\n imports: [OnemrvaMatStickerModule, FormsModule, OnemRvaColorDirective],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoStickerComponent extends DemoComponentBase {\n readonly color = input<OnemrvaMatColor>(OnemrvaMatColor.ACCENT);\n readonly tooltip = input('');\n readonly htmlTooltip = input(false);\n}\n"}
|