@onemrvapublic/design-system-demos 22.7.0-develop.8 → 22.7.0
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","cookie-consent","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
|
+
["address","address-input","autocomplete","avatar","badge","bank-input","bce-pipe","birthplace-input","breadcrumb","button","button-loading","button-toggle","card","checkbox","chips","collapsible-page-divider","cookie-consent","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","utilities","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":"cookie-consent","name":"Cookie consent","description":"","thumbnail":"","permalink":"/demos/cookie-consent"},{"slug":"copy-to-clipboard","name":"Copy to clipboard","description":"","thumbnail":"","permalink":"/demos/copy-to-clipboard"},{"slug":"country-input","name":"Country Input","description":"","thumbnail":"","permalink":"/demos/country-input"},{"slug":"datepicker","name":"Date Picker","description":"","thumbnail":"","permalink":"/demos/datepicker"},{"slug":"datepicker-luxon","name":"Date Picker Luxon","description":"","thumbnail":"","permalink":"/demos/datepicker-luxon"},{"slug":"datepicker-month-year","name":"Date Picker Month Year ","description":"","thumbnail":"","permalink":"/demos/datepicker-month-year"},{"slug":"daterangepicker","name":"Date Range Picker","description":"","thumbnail":"","permalink":"/demos/daterangepicker"},{"slug":"dialog","name":"Dialog","description":"","thumbnail":"","permalink":"/demos/dialog"},{"slug":"dialog-content","name":"Dialog Content","description":"","thumbnail":"","permalink":"/demos/dialog-content"},{"slug":"digit-only","name":"Digit Only directive","description":"","thumbnail":"","permalink":"/demos/digit-only"},{"slug":"drag-and-drop","name":"Drag and drop","description":"","thumbnail":"","permalink":"/demos/drag-and-drop"},{"slug":"drawer","name":"Drawer","description":"","thumbnail":"","permalink":"/demos/drawer"},{"slug":"empty","name":"Empty","description":"","thumbnail":"","permalink":"/demos/empty"},{"slug":"enterprise-number-input","name":"Enterprise number (VIES)","description":"","thumbnail":"","permalink":"/demos/enterprise-number-input"},{"slug":"error","name":"Page Error","description":"","thumbnail":"","permalink":"/demos/error"},{"slug":"error-handler","name":"Error Handler","description":"","thumbnail":"","permalink":"/demos/error-handler"},{"slug":"fab","name":"FAB","description":"","thumbnail":"","permalink":"/demos/fab"},{"slug":"file-panel","name":"File Panel","description":"","thumbnail":"","permalink":"/demos/file-panel"},{"slug":"file-upload","name":"File Upload","description":"","thumbnail":"","permalink":"/demos/file-upload"},{"slug":"file-upload-manual","name":"File Upload Manual","description":"","thumbnail":"","permalink":"/demos/file-upload-manual"},{"slug":"form","name":"Form","description":"","thumbnail":"","permalink":"/demos/form"},{"slug":"grid","name":"Grid","description":"","thumbnail":"","permalink":"/demos/grid"},{"slug":"horizontal-stepper","name":"Stepper (horizontal)","description":"","thumbnail":"","permalink":"/demos/horizontal-stepper"},{"slug":"icon","name":"Icon","description":"","thumbnail":"","permalink":"/demos/icon"},{"slug":"icon-button","name":"Icon Button","description":"","thumbnail":"","permalink":"/demos/icon-button"},{"slug":"if-width-is","name":"If width is","description":"","thumbnail":"","permalink":"/demos/if-width-is"},{"slug":"jsonform","name":"JSON Forms","description":"","thumbnail":"","permalink":"/demos/jsonform"},{"slug":"language-switcher","name":"Language switcher","description":"","thumbnail":"","permalink":"/demos/language-switcher"},{"slug":"layout","name":"Layout and drawer","description":"","thumbnail":"","permalink":"/demos/layout"},{"slug":"link","name":"Link","description":"","thumbnail":"","permalink":"/demos/link"},{"slug":"mask","name":"Mask","description":"","thumbnail":"","permalink":"/demos/mask"},{"slug":"menu","name":"Menu","description":"","thumbnail":"","permalink":"/demos/menu"},{"slug":"message-box","name":"Message box","description":"","thumbnail":"","permalink":"/demos/message-box"},{"slug":"multiselect","name":"Multi Select","description":"","thumbnail":"","permalink":"/demos/multiselect"},{"slug":"niss-pipe","name":"NISS pipe","description":"","thumbnail":"","permalink":"/demos/niss-pipe"},{"slug":"not-found","name":"Page not found","description":"","thumbnail":"","permalink":"/demos/not-found"},{"slug":"notification","name":"Notification","description":"","thumbnail":"","permalink":"/demos/notification"},{"slug":"overlay","name":"Overlay","description":"","thumbnail":"","permalink":"/demos/overlay"},{"slug":"paginator","name":"Paginator","description":"","thumbnail":"","permalink":"/demos/paginator"},{"slug":"palette","name":"Palette","description":"","thumbnail":"","permalink":"/demos/palette"},{"slug":"panel","name":"Panel","description":"","thumbnail":"","permalink":"/demos/panel"},{"slug":"phone-input","name":"Phone Input","description":"","thumbnail":"","permalink":"/demos/phone-input"},{"slug":"pop-over","name":"PopOver","description":"","thumbnail":"","permalink":"/demos/pop-over"},{"slug":"progress-bar","name":"ProgressBar","description":"","thumbnail":"","permalink":"/demos/progress-bar"},{"slug":"radio","name":"Radio","description":"","thumbnail":"","permalink":"/demos/radio"},{"slug":"rxjs-combine-operators","name":"Rxjs Combine Operators","description":"","thumbnail":"","permalink":"/demos/rxjs-combine-operators"},{"slug":"rxjs-complex-case","name":"Rxjs Complex case","description":"","thumbnail":"","permalink":"/demos/rxjs-complex-case"},{"slug":"rxjs-flattening-operators","name":"Rxjs Flattening Operators","description":"","thumbnail":"","permalink":"/demos/rxjs-flattening-operators"},{"slug":"rxjs-observable","name":"Rxjs Observable","description":"","thumbnail":"","permalink":"/demos/rxjs-observable"},{"slug":"rxjs-subject","name":"Rxjs Subject","description":"","thumbnail":"","permalink":"/demos/rxjs-subject"},{"slug":"select","name":"Select","description":"","thumbnail":"","permalink":"/demos/select"},{"slug":"selectable-box","name":"Selectable box","description":"","thumbnail":"","permalink":"/demos/selectable-box"},{"slug":"side-menu","name":"Side menu","description":"","thumbnail":"","permalink":"/demos/side-menu"},{"slug":"skeleton","name":"Skeleton","description":"","thumbnail":"","permalink":"/demos/skeleton"},{"slug":"slide-toggle","name":"Slide toggle","description":"","thumbnail":"","permalink":"/demos/slide-toggle"},{"slug":"spacing","name":"Spacing","description":"","thumbnail":"","permalink":"/demos/spacing"},{"slug":"spinner","name":"Spinner","description":"","thumbnail":"","permalink":"/demos/spinner"},{"slug":"sticker","name":"Sticker","description":"","thumbnail":"","permalink":"/demos/sticker"},{"slug":"summary-stepper","name":"Stepper (with Summary)","description":"","thumbnail":"","permalink":"/demos/summary-stepper"},{"slug":"tab","name":"Tab","description":"","thumbnail":"","permalink":"/demos/tab"},{"slug":"table","name":"Table","description":"","thumbnail":"","permalink":"/demos/table"},{"slug":"table-dialog-content","name":"Table Dialog Content","description":"","thumbnail":"","permalink":"/demos/table-dialog-content"},{"slug":"table-entrypoint","name":"Entrypoint Table","description":"","thumbnail":"","permalink":"/demos/table-entrypoint"},{"slug":"task-list","name":"Task list","description":"","thumbnail":"","permalink":"/demos/task-list"},{"slug":"text-input","name":"Text Input","description":"","thumbnail":"","permalink":"/demos/text-input"},{"slug":"textarea","name":"Textarea","description":"","thumbnail":"","permalink":"/demos/textarea"},{"slug":"timeline","name":"Timeline","description":"Plot dated periods on a horizontal, year-based timeline. Overlapping periods stack into rows and take their color from the legend, with month/day zoom, selection, tooltips, filters, and an optional full-size mode.","thumbnail":"assets/thumbnails/timeline-thumbnail.png","permalink":"/demos/timeline"},{"slug":"timepicker","name":"Timepicker","description":"","thumbnail":"","permalink":"/demos/timepicker"},{"slug":"toast","name":"Toast","description":"","thumbnail":"","permalink":"/demos/toast"},{"slug":"toc","name":"Table of content","description":"","thumbnail":"","permalink":"/demos/toc"},{"slug":"toolbar","name":"Toolbar","description":"","thumbnail":"","permalink":"/demos/toolbar"},{"slug":"tooltip","name":"Tooltip","description":"","thumbnail":"","permalink":"/demos/tooltip"},{"slug":"typography","name":"Typography","description":"","thumbnail":"","permalink":"/demos/typography"},{"slug":"validators","name":"Validators","description":"","thumbnail":"","permalink":"/demos/validators"},{"slug":"week-navigator","name":"Week navigator","description":"Step through ISO weeks with a back and forward arrow. Shows the week number and its Monday to Friday range, computed with Luxon and formatted in the active locale.","thumbnail":"","permalink":"/demos/week-navigator"}]
|
|
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":"cookie-consent","name":"Cookie consent","description":"","thumbnail":"","permalink":"/demos/cookie-consent"},{"slug":"copy-to-clipboard","name":"Copy to clipboard","description":"","thumbnail":"","permalink":"/demos/copy-to-clipboard"},{"slug":"country-input","name":"Country Input","description":"","thumbnail":"","permalink":"/demos/country-input"},{"slug":"datepicker","name":"Date Picker","description":"","thumbnail":"","permalink":"/demos/datepicker"},{"slug":"datepicker-luxon","name":"Date Picker Luxon","description":"","thumbnail":"","permalink":"/demos/datepicker-luxon"},{"slug":"datepicker-month-year","name":"Date Picker Month Year ","description":"","thumbnail":"","permalink":"/demos/datepicker-month-year"},{"slug":"daterangepicker","name":"Date Range Picker","description":"","thumbnail":"","permalink":"/demos/daterangepicker"},{"slug":"dialog","name":"Dialog","description":"","thumbnail":"","permalink":"/demos/dialog"},{"slug":"dialog-content","name":"Dialog Content","description":"","thumbnail":"","permalink":"/demos/dialog-content"},{"slug":"digit-only","name":"Digit Only directive","description":"","thumbnail":"","permalink":"/demos/digit-only"},{"slug":"drag-and-drop","name":"Drag and drop","description":"","thumbnail":"","permalink":"/demos/drag-and-drop"},{"slug":"drawer","name":"Drawer","description":"","thumbnail":"","permalink":"/demos/drawer"},{"slug":"empty","name":"Empty","description":"","thumbnail":"","permalink":"/demos/empty"},{"slug":"enterprise-number-input","name":"Enterprise number (VIES)","description":"","thumbnail":"","permalink":"/demos/enterprise-number-input"},{"slug":"error","name":"Page Error","description":"","thumbnail":"","permalink":"/demos/error"},{"slug":"error-handler","name":"Error Handler","description":"","thumbnail":"","permalink":"/demos/error-handler"},{"slug":"fab","name":"FAB","description":"","thumbnail":"","permalink":"/demos/fab"},{"slug":"file-panel","name":"File Panel","description":"","thumbnail":"","permalink":"/demos/file-panel"},{"slug":"file-upload","name":"File Upload","description":"","thumbnail":"","permalink":"/demos/file-upload"},{"slug":"file-upload-manual","name":"File Upload Manual","description":"","thumbnail":"","permalink":"/demos/file-upload-manual"},{"slug":"form","name":"Form","description":"","thumbnail":"","permalink":"/demos/form"},{"slug":"grid","name":"Grid","description":"","thumbnail":"","permalink":"/demos/grid"},{"slug":"horizontal-stepper","name":"Stepper (horizontal)","description":"","thumbnail":"","permalink":"/demos/horizontal-stepper"},{"slug":"icon","name":"Icon","description":"","thumbnail":"","permalink":"/demos/icon"},{"slug":"icon-button","name":"Icon Button","description":"","thumbnail":"","permalink":"/demos/icon-button"},{"slug":"if-width-is","name":"If width is","description":"","thumbnail":"","permalink":"/demos/if-width-is"},{"slug":"jsonform","name":"JSON Forms","description":"","thumbnail":"","permalink":"/demos/jsonform"},{"slug":"language-switcher","name":"Language switcher","description":"","thumbnail":"","permalink":"/demos/language-switcher"},{"slug":"layout","name":"Layout and drawer","description":"","thumbnail":"","permalink":"/demos/layout"},{"slug":"link","name":"Link","description":"","thumbnail":"","permalink":"/demos/link"},{"slug":"mask","name":"Mask","description":"","thumbnail":"","permalink":"/demos/mask"},{"slug":"menu","name":"Menu","description":"","thumbnail":"","permalink":"/demos/menu"},{"slug":"message-box","name":"Message box","description":"","thumbnail":"","permalink":"/demos/message-box"},{"slug":"multiselect","name":"Multi Select","description":"","thumbnail":"","permalink":"/demos/multiselect"},{"slug":"niss-pipe","name":"NISS pipe","description":"","thumbnail":"","permalink":"/demos/niss-pipe"},{"slug":"not-found","name":"Page not found","description":"","thumbnail":"","permalink":"/demos/not-found"},{"slug":"notification","name":"Notification","description":"","thumbnail":"","permalink":"/demos/notification"},{"slug":"overlay","name":"Overlay","description":"","thumbnail":"","permalink":"/demos/overlay"},{"slug":"paginator","name":"Paginator","description":"","thumbnail":"","permalink":"/demos/paginator"},{"slug":"palette","name":"Palette","description":"","thumbnail":"","permalink":"/demos/palette"},{"slug":"panel","name":"Panel","description":"","thumbnail":"","permalink":"/demos/panel"},{"slug":"phone-input","name":"Phone Input","description":"","thumbnail":"","permalink":"/demos/phone-input"},{"slug":"pop-over","name":"PopOver","description":"","thumbnail":"","permalink":"/demos/pop-over"},{"slug":"progress-bar","name":"ProgressBar","description":"","thumbnail":"","permalink":"/demos/progress-bar"},{"slug":"radio","name":"Radio","description":"","thumbnail":"","permalink":"/demos/radio"},{"slug":"rxjs-combine-operators","name":"Rxjs Combine Operators","description":"","thumbnail":"","permalink":"/demos/rxjs-combine-operators"},{"slug":"rxjs-complex-case","name":"Rxjs Complex case","description":"","thumbnail":"","permalink":"/demos/rxjs-complex-case"},{"slug":"rxjs-flattening-operators","name":"Rxjs Flattening Operators","description":"","thumbnail":"","permalink":"/demos/rxjs-flattening-operators"},{"slug":"rxjs-observable","name":"Rxjs Observable","description":"","thumbnail":"","permalink":"/demos/rxjs-observable"},{"slug":"rxjs-subject","name":"Rxjs Subject","description":"","thumbnail":"","permalink":"/demos/rxjs-subject"},{"slug":"select","name":"Select","description":"","thumbnail":"","permalink":"/demos/select"},{"slug":"selectable-box","name":"Selectable box","description":"","thumbnail":"","permalink":"/demos/selectable-box"},{"slug":"side-menu","name":"Side menu","description":"","thumbnail":"","permalink":"/demos/side-menu"},{"slug":"skeleton","name":"Skeleton","description":"","thumbnail":"","permalink":"/demos/skeleton"},{"slug":"slide-toggle","name":"Slide toggle","description":"","thumbnail":"","permalink":"/demos/slide-toggle"},{"slug":"spacing","name":"Spacing","description":"","thumbnail":"","permalink":"/demos/spacing"},{"slug":"spinner","name":"Spinner","description":"","thumbnail":"","permalink":"/demos/spinner"},{"slug":"sticker","name":"Sticker","description":"","thumbnail":"","permalink":"/demos/sticker"},{"slug":"summary-stepper","name":"Stepper (with Summary)","description":"","thumbnail":"","permalink":"/demos/summary-stepper"},{"slug":"tab","name":"Tab","description":"","thumbnail":"","permalink":"/demos/tab"},{"slug":"table","name":"Table","description":"","thumbnail":"","permalink":"/demos/table"},{"slug":"table-dialog-content","name":"Table Dialog Content","description":"","thumbnail":"","permalink":"/demos/table-dialog-content"},{"slug":"table-entrypoint","name":"Entrypoint Table","description":"","thumbnail":"","permalink":"/demos/table-entrypoint"},{"slug":"task-list","name":"Task list","description":"","thumbnail":"","permalink":"/demos/task-list"},{"slug":"text-input","name":"Text Input","description":"","thumbnail":"","permalink":"/demos/text-input"},{"slug":"textarea","name":"Textarea","description":"","thumbnail":"","permalink":"/demos/textarea"},{"slug":"timeline","name":"Timeline","description":"Plot dated periods on a horizontal, year-based timeline. Overlapping periods stack into rows and take their color from the legend, with month/day zoom, selection, tooltips, filters, and an optional full-size mode.","thumbnail":"assets/thumbnails/timeline-thumbnail.png","permalink":"/demos/timeline"},{"slug":"timepicker","name":"Timepicker","description":"","thumbnail":"","permalink":"/demos/timepicker"},{"slug":"toast","name":"Toast","description":"","thumbnail":"","permalink":"/demos/toast"},{"slug":"toc","name":"Table of content","description":"","thumbnail":"","permalink":"/demos/toc"},{"slug":"toolbar","name":"Toolbar","description":"","thumbnail":"","permalink":"/demos/toolbar"},{"slug":"tooltip","name":"Tooltip","description":"","thumbnail":"","permalink":"/demos/tooltip"},{"slug":"typography","name":"Typography","description":"","thumbnail":"","permalink":"/demos/typography"},{"slug":"utilities","name":"Utilities","description":"Global utility classes shipped with the theme: sizing (w-, h-, mw-, mh-, vw-, vh-), display and responsive display, flex, text alignment and transform, vertical align, rotate, overflow, visibility, position and elevation.","thumbnail":"","permalink":"/demos/utilities"},{"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"}]
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"demo-utilities.component.html":"<!-- Utility classes are global: they come with the theme, no import needed. -->\n\n<div class=\"utilities-container\">\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Setup</h3>\n <p class=\"font-body-medium\">\n The utility classes are emitted by the theme mixin, so any element inside\n <code>.onemrva-theme</code> can use them. In your global\n <code>styles.scss</code>:\n </p>\n <pre class=\"utilities-stage utilities-code\">{{ setupSnippet }}</pre>\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Sizing</h3>\n <p class=\"font-body-medium\">\n <code>w-</code>, <code>h-</code>, <code>mw-</code> and\n <code>mh-</code> set width, height, max-width and max-height as a\n percentage of the parent. <code>vw-</code> and <code>vh-</code> use the\n viewport instead. Every value from 0 to 100 exists, plus\n <code>w-auto</code> and <code>h-auto</code>.\n </p>\n\n <div class=\"utilities-controls\">\n <mat-button-toggle-group\n [value]=\"sizingPrefix()\"\n (change)=\"sizingPrefix.set($event.value)\"\n aria-label=\"Sizing utility\"\n >\n @for (utility of sizingUtilities; track utility.prefix) {\n <mat-button-toggle [value]=\"utility.prefix\">\n {{ utility.prefix }}-\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n\n <mat-slider min=\"0\" max=\"100\" step=\"5\" discrete>\n <input\n matSliderThumb\n [ngModel]=\"sizingValue()\"\n (ngModelChange)=\"sizingValue.set($event)\"\n aria-label=\"Sizing value\"\n />\n </mat-slider>\n </div>\n\n <div class=\"utilities-stage sizing-stage\">\n <div class=\"utilities-box sizing-box\" [class]=\"sizingClass()\">\n .{{ sizingClass() }}\n </div>\n </div>\n <code class=\"utilities-code\"\n >.{{ sizingClass() }} {{ '{' }} {{ sizingCss() }} {{ '}' }}</code\n >\n\n <div class=\"utilities-stage\">\n @for (value of [25, 50, 75, 100]; track value) {\n <div class=\"utilities-box mb-xs\" [class]=\"'w-' + value\">\n .w-{{ value }}\n </div>\n }\n </div>\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Display</h3>\n <mat-button-toggle-group\n [value]=\"display()\"\n (change)=\"display.set($event.value)\"\n aria-label=\"Display utility\"\n >\n @for (d of displays; track d) {\n <mat-button-toggle [value]=\"d\">{{ d }}</mat-button-toggle>\n }\n </mat-button-toggle-group>\n\n <div class=\"utilities-stage\">\n @for (n of [1, 2, 3]; track n) {\n <span class=\"utilities-box display-box\" [class]=\"display()\"\n >.{{ display() }}</span\n >\n }\n </div>\n\n <h4 class=\"font-title-small\">Responsive display</h4>\n <p class=\"font-body-medium\">\n Every display class also has a breakpoint variant,\n <code>.d-<value>-<breakpoint></code>, which applies from that\n breakpoint up (mobile-first). <code>xsmall</code> starts at 0px, so\n <code>.d-none-xsmall</code> behaves like <code>.d-none</code>: use it as\n the base and override it with a larger breakpoint.\n </p>\n <table class=\"utilities-table font-body-small\">\n <thead>\n <tr>\n <th>Breakpoint</th>\n <th>Screen size</th>\n <th>Device</th>\n <th>Class applies</th>\n <th>Example</th>\n </tr>\n </thead>\n <tbody>\n @for (bp of breakpoints; track bp.name) {\n <tr>\n <td>{{ bp.name }}</td>\n <td>{{ bp.size }}</td>\n <td>{{ bp.device }}</td>\n <td>{{ bp.applies }}</td>\n <td>\n <code>.d-none-{{ bp.name }}</code>\n </td>\n </tr>\n }\n </tbody>\n </table>\n <p class=\"font-body-medium\">\n Breakpoints follow the browser window, not the size of the element. The\n preview below is an iframe, so the classes inside it react to the preview\n width: pick a width to see which elements show.\n </p>\n <mat-button-toggle-group\n [value]=\"previewWidth()\"\n (change)=\"previewWidth.set($event.value)\"\n aria-label=\"Preview width\"\n >\n @for (bp of breakpoints; track bp.name) {\n <mat-button-toggle [value]=\"bp.previewWidth\">\n {{ bp.name }} · {{ bp.previewWidth }}px\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n <div class=\"utilities-stage responsive-stage\">\n <iframe\n class=\"responsive-preview\"\n title=\"Responsive display preview\"\n [style.width.px]=\"previewWidth()\"\n [srcdoc]=\"responsivePreview\"\n ></iframe>\n </div>\n <code class=\"utilities-code\"\n ><span class=\"d-inline-block d-none-medium\">Visible below\n 960px</span><br /><span class=\"d-none\n d-inline-block-medium\">Visible from 960px</span></code\n >\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Flex</h3>\n <mat-button-toggle-group\n [value]=\"flexDirection()\"\n (change)=\"flexDirection.set($event.value)\"\n aria-label=\"Flex direction utility\"\n >\n @for (direction of flexDirections; track direction) {\n <mat-button-toggle [value]=\"direction\">{{\n direction\n }}</mat-button-toggle>\n }\n </mat-button-toggle-group>\n\n <div class=\"utilities-stage d-flex\" [class]=\"flexDirection()\">\n @for (n of [1, 2, 3]; track n) {\n <div class=\"utilities-box flex-box\">{{ n }}</div>\n }\n </div>\n <code class=\"utilities-code\"\n ><div class=\"d-flex {{ flexDirection() }}\"></code\n >\n\n <h4 class=\"font-title-small\">Centering: align-items vs justify-content</h4>\n <p class=\"font-body-medium\">\n A flex container has two axes. <code>justify-content</code> places the\n children along the <strong>main axis</strong>, which is the flex direction\n (horizontal in a row). <code>align-items</code> places them on the\n <strong>cross axis</strong> (vertical in a row). In a column the axes\n swap, so <code>justify-content</code> becomes vertical.\n </p>\n <table class=\"utilities-table font-body-small\">\n <thead>\n <tr>\n <th>Class</th>\n <th>CSS</th>\n <th>In a row</th>\n <th>In a column</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>.justify-content-center</code></td>\n <td><code>justify-content: center</code></td>\n <td>horizontal</td>\n <td>vertical</td>\n </tr>\n <tr>\n <td><code>.align-items-center</code></td>\n <td><code>align-items: center</code></td>\n <td>vertical</td>\n <td>horizontal</td>\n </tr>\n <tr>\n <td><code>.flex-center</code></td>\n <td><code>display: flex; align-items: center</code></td>\n <td>vertical only</td>\n <td>horizontal only</td>\n </tr>\n </tbody>\n </table>\n <p class=\"font-body-medium\">\n <code>.flex-center</code> only centers on the cross axis. To center on\n both axes, add <code>.justify-content-center</code>. The dashed lines\n below mark the center of each stage.\n </p>\n <div class=\"flex-center-compare\">\n @for (variant of flexCenterVariants; track variant) {\n <div class=\"flex-center-column\">\n <code class=\"utilities-code\">class=\"{{ variant }}\"</code>\n <div class=\"utilities-stage flex-center-stage\" [class]=\"variant\">\n <div class=\"utilities-box\">auto</div>\n <div class=\"utilities-box flex-center-medium\">48px</div>\n <div class=\"utilities-box flex-center-tall\">80px</div>\n </div>\n </div>\n }\n </div>\n\n <h4 class=\"font-title-small\">Try it</h4>\n <div class=\"utilities-controls\">\n @for (control of flexAlignControls; track control.label) {\n <div class=\"flex-align-control\">\n <span class=\"font-label-medium\">{{ control.label }}</span>\n <mat-button-toggle-group\n [value]=\"control.value()\"\n (change)=\"control.value.set($event.value)\"\n [attr.aria-label]=\"control.label\"\n >\n @for (option of control.options; track option) {\n <mat-button-toggle [value]=\"option\">{{\n option\n }}</mat-button-toggle>\n }\n </mat-button-toggle-group>\n </div>\n }\n </div>\n <div\n class=\"utilities-stage flex-center-stage flex-align-stage\"\n [class]=\"flexAlignClass()\"\n >\n <div class=\"utilities-box\">auto</div>\n <div class=\"utilities-box flex-center-medium\">48px</div>\n <div class=\"utilities-box flex-center-tall\">80px</div>\n </div>\n <code class=\"utilities-code\"\n ><div class=\"{{ flexAlignClass() }}\"></code\n >\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Text</h3>\n <mat-button-toggle-group\n [value]=\"textAlign()\"\n (change)=\"textAlign.set($event.value)\"\n aria-label=\"Text alignment utility\"\n >\n @for (align of textAligns; track align) {\n <mat-button-toggle [value]=\"align\">{{ align }}</mat-button-toggle>\n }\n </mat-button-toggle-group>\n <p class=\"utilities-stage font-body-medium\" [class]=\"textAlign()\">\n .{{ textAlign() }} — <code>text-start</code> and <code>text-end</code>\n are aliases of left and right.\n </p>\n\n <div class=\"utilities-stage\">\n @for (transform of textTransforms; track transform) {\n <p class=\"font-body-medium\">\n <code>.{{ transform }}</code> →\n <span [class]=\"transform\">the quick brown fox</span>\n </p>\n }\n </div>\n <p class=\"font-body-medium\">\n Font utilities (<code>.font-display-large</code> …\n <code>.font-label-small</code>) are documented on the Typography page.\n </p>\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Vertical align</h3>\n <div class=\"utilities-stage valign-stage font-headline-large\">\n @for (align of verticalAligns; track align) {\n <span class=\"valign-sample font-body-small\" [class]=\"align\">{{\n align\n }}</span>\n }\n </div>\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Rotate</h3>\n <p class=\"font-body-medium\">\n <code>.rotate-<deg></code> rotates an element and animates the\n change, which makes it handy for chevrons and expand icons.\n </p>\n <mat-button-toggle-group\n [value]=\"rotation()\"\n (change)=\"rotation.set($event.value)\"\n aria-label=\"Rotation utility\"\n >\n @for (deg of rotations; track deg) {\n <mat-button-toggle [value]=\"deg\">{{ deg }}°</mat-button-toggle>\n }\n </mat-button-toggle-group>\n <div class=\"utilities-stage flex-center\">\n <div class=\"utilities-box rotate-box\" [class]=\"'rotate-' + rotation()\">\n ➜\n </div>\n <code class=\"utilities-code ml\">.rotate-{{ rotation() }}</code>\n </div>\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Overflow</h3>\n <mat-button-toggle-group\n [value]=\"overflow()\"\n (change)=\"overflow.set($event.value)\"\n aria-label=\"Overflow utility\"\n >\n @for (o of overflows; track o) {\n <mat-button-toggle [value]=\"o\">{{ o }}</mat-button-toggle>\n }\n </mat-button-toggle-group>\n <div class=\"utilities-stage\">\n <!-- Focusable so keyboard users can scroll it (axe scrollable-region-focusable). -->\n <div\n class=\"overflow-box\"\n [class]=\"overflow()\"\n tabindex=\"0\"\n role=\"region\"\n aria-label=\"Overflow example\"\n >\n <div class=\"overflow-content font-body-small\">\n This content is wider and taller than its 240×80 container, so the\n overflow utility decides whether it spills out, gets clipped or\n scrolls.\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Visibility & position</h3>\n <div class=\"utilities-stage\">\n <span class=\"utilities-box d-inline-block\">before</span>\n <span class=\"utilities-box d-inline-block invisible\">.invisible</span>\n <span class=\"utilities-box d-inline-block\">after</span>\n </div>\n <p class=\"font-body-medium\">\n <code>.invisible</code> hides an element but keeps its space;\n <code>.d-none</code> and <code>.hidden</code> remove it from the layout.\n <code>.visible</code> restores it. <code>.clickable</code> sets a pointer\n cursor.\n </p>\n <p class=\"font-body-medium\">\n Position:\n @for (p of positions; track p) {\n <code>.{{ p }}</code\n >{{ $last ? '' : ', ' }}\n }\n — and <code>.float-left</code> / <code>.float-right</code> (aliases\n <code>-start</code> / <code>-end</code>).\n </p>\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Elevation</h3>\n <div class=\"utilities-stage d-flex elevation-stage\">\n @for (level of elevations; track level) {\n <div class=\"elevation-box\" [class]=\"'onemrva-elevation-z' + level\">\n .onemrva-elevation-z{{ level }}\n </div>\n }\n </div>\n </section>\n</div>\n","demo-utilities.component.scss":"app-demo-utilities {\n .utilities-container {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n padding: 1rem;\n }\n\n .utilities-section {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 1rem;\n\n h3,\n h4,\n p {\n margin: 0;\n }\n }\n\n .utilities-controls {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 1rem;\n\n mat-slider {\n width: 240px;\n }\n }\n\n .utilities-stage {\n box-sizing: border-box;\n width: 100%;\n padding: 1rem;\n border: 1px dashed var(--mat-sys-outline);\n border-radius: 4px;\n background-color: var(--mat-sys-surface-container-high);\n }\n\n .utilities-box {\n box-sizing: border-box;\n padding: 0.5rem 0.75rem;\n border-radius: 4px;\n background-color: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n font-family: monospace;\n white-space: nowrap;\n }\n\n .utilities-code {\n display: block;\n margin: 0;\n font-family: monospace;\n color: var(--mat-sys-on-surface-variant);\n }\n\n .utilities-table {\n border-collapse: collapse;\n\n th,\n td {\n padding: 0.25rem 1rem 0.25rem 0;\n text-align: left;\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n }\n }\n\n .responsive-stage {\n overflow-x: auto;\n }\n\n .responsive-preview {\n display: block;\n max-width: none;\n height: 120px;\n border: 1px solid var(--mat-sys-outline);\n background-color: var(--mat-sys-surface);\n transition: width 0.3s ease;\n }\n\n .sizing-stage {\n height: 200px;\n overflow: hidden;\n }\n\n .sizing-box {\n overflow: hidden;\n }\n\n .display-box {\n margin: 0.25rem;\n }\n\n .flex-box {\n margin: 0.25rem;\n text-align: center;\n min-width: 3rem;\n }\n\n .flex-center-compare {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n gap: 1rem;\n width: 100%;\n }\n\n .flex-center-column {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n }\n\n .flex-center-stage {\n position: relative;\n height: 140px;\n gap: 0.5rem;\n\n // Guide lines on both centers, so the alignment on each axis is visible.\n &::before,\n &::after {\n content: '';\n position: absolute;\n }\n\n &::before {\n top: 50%;\n left: 0;\n right: 0;\n border-top: 1px dashed var(--mat-sys-tertiary);\n }\n\n &::after {\n left: 50%;\n top: 0;\n bottom: 0;\n border-left: 1px dashed var(--mat-sys-tertiary);\n }\n\n .utilities-box {\n position: relative;\n min-height: 24px;\n padding-top: 0;\n padding-bottom: 0;\n line-height: 24px;\n }\n }\n\n // Tall enough for the three boxes stacked in a column.\n .flex-center-stage.flex-align-stage {\n height: 260px;\n }\n\n .flex-align-control {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n }\n\n .flex-center-medium {\n height: 48px;\n }\n\n .flex-center-tall {\n height: 80px;\n }\n\n .valign-stage {\n white-space: nowrap;\n overflow-x: auto;\n\n .valign-sample {\n display: inline-block;\n margin-right: 0.5rem;\n padding: 0 0.25rem;\n border: 1px solid var(--mat-sys-outline);\n font-family: monospace;\n }\n }\n\n .rotate-box {\n display: inline-block;\n font-size: 1.5rem;\n }\n\n .overflow-box {\n width: 240px;\n height: 80px;\n border: 1px solid var(--mat-sys-outline);\n background-color: var(--mat-sys-surface);\n }\n\n .overflow-content {\n width: 360px;\n padding: 0.5rem;\n background-color: var(--mat-sys-secondary);\n color: var(--mat-sys-on-secondary);\n }\n\n .elevation-stage {\n flex-wrap: wrap;\n gap: 1.5rem;\n }\n\n .elevation-box {\n padding: 1.5rem 1rem;\n border-radius: 8px;\n background-color: var(--mat-sys-surface);\n font-family: monospace;\n }\n}\n","demo-utilities.component.ts":"import {\n ChangeDetectionStrategy,\n Component,\n computed,\n DOCUMENT,\n inject,\n signal,\n ViewEncapsulation,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatButtonToggleModule } from '@angular/material/button-toggle';\nimport { MatSliderModule } from '@angular/material/slider';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\ntype SizingPrefix = 'w' | 'h' | 'vw' | 'vh' | 'mw' | 'mh';\n\ninterface SizingUtility {\n prefix: SizingPrefix;\n property: string;\n unit: string;\n}\n\n@Component({\n selector: 'app-demo-utilities',\n templateUrl: 'demo-utilities.component.html',\n styleUrl: 'demo-utilities.component.scss',\n standalone: true,\n imports: [\n FormsModule,\n MatButtonModule,\n MatButtonToggleModule,\n MatSliderModule,\n ],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DemoUtilitiesComponent extends DemoComponentBase {\n readonly sizingUtilities: SizingUtility[] = [\n { prefix: 'w', property: 'width', unit: '%' },\n { prefix: 'h', property: 'height', unit: '%' },\n { prefix: 'mw', property: 'max-width', unit: '%' },\n { prefix: 'mh', property: 'max-height', unit: '%' },\n { prefix: 'vw', property: 'width', unit: 'vw' },\n { prefix: 'vh', property: 'height', unit: 'vh' },\n ];\n\n readonly sizingPrefix = signal<SizingPrefix>('w');\n readonly sizingValue = signal(50);\n\n readonly sizingUtility = computed(() =>\n this.sizingUtilities.find(u => u.prefix === this.sizingPrefix())!,\n );\n readonly sizingClass = computed(\n () => `${this.sizingPrefix()}-${this.sizingValue()}`,\n );\n readonly sizingCss = computed(() => {\n const { property, unit } = this.sizingUtility();\n return `${property}: ${this.sizingValue()}${unit} !important;`;\n });\n\n readonly displays = [\n 'd-block',\n 'd-inline',\n 'd-inline-block',\n 'd-flex',\n 'd-inline-flex',\n 'd-grid',\n 'd-none',\n ];\n readonly display = signal('d-block');\n\n readonly flexDirections = [\n 'flex-row',\n 'flex-row-reverse',\n 'flex-column',\n 'flex-column-reverse',\n ];\n readonly flexDirection = signal('flex-row');\n\n readonly flexCenterVariants = [\n 'd-flex',\n 'flex-center',\n 'd-flex justify-content-center',\n 'flex-center justify-content-center',\n ];\n\n readonly flexAlignDirection = signal('flex-row');\n readonly justifyContent = signal('justify-content-center');\n readonly alignItems = signal('align-items-center');\n\n readonly flexAlignControls = [\n {\n label: 'Direction',\n value: this.flexAlignDirection,\n options: ['flex-row', 'flex-column'],\n },\n {\n label: 'justify-content (main axis)',\n value: this.justifyContent,\n options: [\n 'justify-content-start',\n 'justify-content-center',\n 'justify-content-end',\n 'justify-content-between',\n 'justify-content-around',\n 'justify-content-evenly',\n ],\n },\n {\n label: 'align-items (cross axis)',\n value: this.alignItems,\n options: [\n 'align-items-stretch',\n 'align-items-start',\n 'align-items-center',\n 'align-items-end',\n 'align-items-baseline',\n ],\n },\n ];\n\n readonly flexAlignClass = computed(\n () =>\n `d-flex ${this.flexAlignDirection()} ${this.justifyContent()} ${this.alignItems()}`,\n );\n\n readonly setupSnippet = `@use '@onemrvapublic/design-system' as theme;\n\n.onemrva-theme {\n @include theme.onemrva();\n}`;\n\n // Mirrors $breakpoints in theme/utilities/_variables.scss.\n readonly breakpoints = [\n {\n name: 'xsmall',\n previewWidth: 360,\n size: '< 600px',\n device: 'mobile',\n applies: 'always',\n },\n {\n name: 'small',\n previewWidth: 768,\n size: '600 – 959px',\n device: 'tablet',\n applies: '≥ 600px',\n },\n {\n name: 'medium',\n previewWidth: 1024,\n size: '960 – 1279px',\n device: 'desktop',\n applies: '≥ 960px',\n },\n {\n name: 'large',\n previewWidth: 1366,\n size: '1280 – 1535px',\n device: 'desktop',\n applies: '≥ 1280px',\n },\n {\n name: 'xlarge',\n previewWidth: 1600,\n size: '1536 – 1919px',\n device: 'desktop',\n applies: '≥ 1536px',\n },\n {\n name: 'xxlarge',\n previewWidth: 1920,\n size: '≥ 1920px',\n device: 'desktop',\n applies: '≥ 1920px',\n },\n ];\n\n readonly previewWidth = signal(360);\n\n // Breakpoints are media queries, so they only react to a real viewport. The\n // preview iframe gets the page's own stylesheets and its width is the\n // viewport the classes see.\n readonly responsivePreview: SafeHtml = inject(\n DomSanitizer,\n ).bypassSecurityTrustHtml(this.buildResponsivePreview());\n\n readonly textAligns = ['text-left', 'text-center', 'text-right'];\n readonly textAlign = signal('text-left');\n\n readonly textTransforms = [\n 'text-lowercase',\n 'text-uppercase',\n 'text-capitalize',\n ];\n\n readonly rotations = [0, 45, 90, 135, 180, 225, 270];\n readonly rotation = signal(0);\n\n readonly overflows = [\n 'overflow-visible',\n 'overflow-hidden',\n 'overflow-auto',\n 'overflow-scroll',\n ];\n readonly overflow = signal('overflow-auto');\n\n readonly positions = [\n 'position-static',\n 'position-relative',\n 'position-absolute',\n 'position-fixed',\n 'position-sticky',\n ];\n\n readonly verticalAligns = [\n 'align-baseline',\n 'align-top',\n 'align-middle',\n 'align-bottom',\n 'align-text-top',\n 'align-text-bottom',\n ];\n\n readonly elevations = [0, 1, 2, 3, 4, 5];\n\n private buildResponsivePreview(): string {\n const document = inject(DOCUMENT);\n const styles = Array.from(\n document.querySelectorAll<HTMLLinkElement | HTMLStyleElement>(\n 'link[rel=\"stylesheet\"], style',\n ),\n )\n .map(el =>\n el instanceof HTMLLinkElement\n ? `<link rel=\"stylesheet\" href=\"${el.href}\">`\n : `<style>${el.textContent}</style>`,\n )\n .join('');\n const badges = this.breakpoints\n .map(\n bp =>\n `<span class=\"box d-none d-inline-block-${bp.name}\">${bp.name} ${bp.applies}</span>`,\n )\n .join('');\n return `<!doctype html><html><head>${styles}<style>\n body { margin: 0; padding: 8px; background: var(--mat-sys-surface-container-high); }\n .box { margin: 4px; padding: 4px 8px; border-radius: 4px; font-family: monospace;\n background: var(--mat-sys-primary); color: var(--mat-sys-on-primary); }\n .box.alt { background: var(--mat-sys-tertiary); color: var(--mat-sys-on-tertiary); }\n </style></head><body class=\"onemrva-theme\">\n <div>\n <span class=\"box alt d-inline-block d-none-medium\">Visible below 960px</span>\n <span class=\"box alt d-none d-inline-block-medium\">Visible from 960px</span>\n </div>\n <div>${badges}</div>\n </body></html>`;\n }\n}\n"}
|