@onemrvapublic/design-system-demos 22.7.0-develop.7 → 22.7.0-develop.9
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 <div class=\"utilities-stage\">\n <span class=\"utilities-box d-inline-block d-none-medium\"\n >Visible below 960px</span\n >\n <span class=\"utilities-box d-none d-inline-block-medium\"\n >Visible from 960px</span\n >\n </div>\n <code class=\"utilities-code\"\n ><span class=\"d-inline-block d-none-medium\"> … <span\n class=\"d-none d-inline-block-medium\"></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 <p class=\"font-body-medium\">\n <code>.flex-center</code> is a shorthand for\n <code>display: flex; align-items: center</code>: it centers children on\n the cross axis (vertically, in a row) instead of stretching them. It does\n not center horizontally.\n </p>\n <div class=\"flex-center-compare\">\n @for (variant of ['d-flex', 'flex-center']; track variant) {\n <div class=\"flex-center-column\">\n <code class=\"utilities-code\">.{{ 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 </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 <div class=\"overflow-box\" [class]=\"overflow()\">\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 .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 line on the vertical center, so the alignment is visible.\n &::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n border-top: 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 .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 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 { 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 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 size: '< 600px',\n device: 'mobile',\n applies: 'always',\n },\n {\n name: 'small',\n size: '600 – 959px',\n device: 'tablet',\n applies: '≥ 600px',\n },\n {\n name: 'medium',\n size: '960 – 1279px',\n device: 'desktop',\n applies: '≥ 960px',\n },\n {\n name: 'large',\n size: '1280 – 1535px',\n device: 'desktop',\n applies: '≥ 1280px',\n },\n {\n name: 'xlarge',\n size: '1536 – 1919px',\n device: 'desktop',\n applies: '≥ 1536px',\n },\n {\n name: 'xxlarge',\n size: '≥ 1920px',\n device: 'desktop',\n applies: '≥ 1920px',\n },\n ];\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"}
|