@onemrvapublic/design-system-demos 22.0.0-develop.6 → 22.0.0-develop.8

package/browser/assets/codes.json

@@ -1 +1 @@
-["address","address-input","autocomplete","avatar","badge","bank-input","bce-pipe","birthplace-input","breadcrumb","button","button-loading","button-toggle","card","card-new","card-table","carousel","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","timepicker","toast","toc","toolbar","tooltip","typography","validators"]
+["address","address-input","autocomplete","avatar","badge","bank-input","bce-pipe","birthplace-input","breadcrumb","button","button-loading","button-toggle","card","card-new","card-table","carousel","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"]

package/browser/assets/demos-manifest.json

@@ -0,0 +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":"","thumbnail":"","permalink":"/demos/card"},{"slug":"card-new","name":"Card New","description":"","thumbnail":"","permalink":"/demos/card-new"},{"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"}]

package/browser/assets/i18n/de.json

@@ -1,4 +1,16 @@
 {
+  "timeline": {
+    "period": "Zeitraum",
+    "month": "Monat",
+    "year": "Jahr",
+    "years": "Jahre",
+    "goToMonth": "Zum Monat",
+    "previousYear": "Zum vorherigen Jahr",
+    "nextYear": "Zum nächsten Jahr",
+    "previousMonth": "Zum vorherigen Monat",
+    "nextMonth": "Zum nächsten Monat",
+    "goTo": "Gehe zu {{label}}"
+  },
   "demo.title": "Design System",
   "error": {
     "500": {

package/browser/assets/i18n/en.json

@@ -1,4 +1,16 @@
 {
+  "timeline": {
+    "period": "Period",
+    "month": "Month",
+    "year": "Year",
+    "years": "Years",
+    "goToMonth": "Go to month",
+    "previousYear": "Go to previous year",
+    "nextYear": "Go to next year",
+    "previousMonth": "Go to previous month",
+    "nextMonth": "Go to next month",
+    "goTo": "Go to {{label}}"
+  },
   "demo.title": "Design System",
   "error": {
     "500": {

package/browser/assets/i18n/fr.json

@@ -1,4 +1,16 @@
 {
+  "timeline": {
+    "period": "Période",
+    "month": "Mois",
+    "year": "An",
+    "years": "Ans",
+    "goToMonth": "Aller au mois",
+    "previousYear": "Aller à l'année précédente",
+    "nextYear": "Aller à l'année suivante",
+    "previousMonth": "Aller au mois précédent",
+    "nextMonth": "Aller au mois suivant",
+    "goTo": "Aller à {{label}}"
+  },
   "demo.title": "Design System",
   "error": {
     "500": {

package/browser/assets/i18n/nl.json

@@ -1,4 +1,16 @@
 {
+  "timeline": {
+    "period": "Periode",
+    "month": "Maand",
+    "year": "Jaar",
+    "years": "Jaar",
+    "goToMonth": "Ga naar maand",
+    "previousYear": "Ga naar vorig jaar",
+    "nextYear": "Ga naar volgend jaar",
+    "previousMonth": "Ga naar vorige maand",
+    "nextMonth": "Ga naar volgende maand",
+    "goTo": "Ga naar {{label}}"
+  },
   "demo.title": "Ontwerpsysteem",
   "error": {
     "500": {

package/browser/assets/json/timeline.json

@@ -0,0 +1 @@
+{"demo-timeline.component.html":"<onemrva-timeline\n  title=\"Career timeline\"\n  [periods]=\"displayedPeriods()\"\n  [legend]=\"legend\"\n  [filters]=\"filters\"\n  [showMonths]=\"showMonths()\"\n  [showLabels]=\"showLabels()\"\n  [showMonthPicker]=\"true\"\n  [fullSize]=\"fullSize()\"\n  maxHeight=\"280px\"\n  [(fixedYearCount)]=\"yearCount\"\n  [(activeFilter)]=\"activeFilter\"\n  [(selectedPeriod)]=\"selectedPeriod\"\n  (axisUnitChange)=\"axisUnit.set($event)\"\n  emptyMessage=\"No periods to display\"\n/>\n\n<div class=\"demo-timeline__controls\">\n  <mat-checkbox\n    class=\"demo-timeline__months-toggle\"\n    [checked]=\"showMonths()\"\n    [disabled]=\"axisUnit() === 'months' && yearCount() > 5\"\n    (change)=\"showMonths.set($event.checked)\"\n  >\n    {{ axisUnit() === 'days' ? 'Show days' : 'Show months' }}\n  </mat-checkbox>\n  @if (axisUnit() === 'months') {\n    <span class=\"demo-timeline__hint\"\n      >Available for a window of 5 years or less</span\n    >\n  }\n\n  <mat-checkbox\n    class=\"demo-timeline__labels-toggle\"\n    [checked]=\"showLabels()\"\n    (change)=\"showLabels.set($event.checked)\"\n  >\n    Show labels\n  </mat-checkbox>\n\n  <mat-checkbox\n    class=\"demo-timeline__fullsize-toggle\"\n    [checked]=\"fullSize()\"\n    (change)=\"fullSize.set($event.checked)\"\n  >\n    Full size\n  </mat-checkbox>\n\n  @if (selectedPeriod(); as selected) {\n    <span class=\"demo-timeline__selection\">\n      Selected period: <strong>{{ selected.label ?? selected.type }}</strong>\n    </span>\n  }\n</div>\n","demo-timeline.component.scss":".demo-timeline__controls {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 12px 16px;\n  margin-top: 24px;\n  padding-top: 16px;\n  border-top: 1px solid #d7d5ed;\n}\n\n.demo-timeline__hint {\n  font-size: 12px;\n  color: #78767d;\n}\n\n.demo-timeline__selection {\n  margin-left: auto;\n  font-size: 14px;\n}\n\n@media (max-width: 600px) {\n  .demo-timeline__selection {\n    margin-left: 0;\n    flex-basis: 100%;\n  }\n}\n","demo-timeline.component.ts":"import { Component, ViewEncapsulation, computed, signal } from '@angular/core';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport {\n  OnemrvaTimelineComponent,\n  TimelineFilterOption,\n  TimelineLegend,\n  TimelinePeriod,\n} from '@onemrvapublic/design-system/timeline';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-timeline',\n  standalone: true,\n  imports: [OnemrvaTimelineComponent, MatCheckboxModule],\n  templateUrl: 'demo-timeline.component.html',\n  styleUrl: 'demo-timeline.component.scss',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTimelineComponent extends DemoComponentBase {\n  readonly legend: TimelineLegend = [\n    { type: 'parentalleave', label: 'Parental leave', color: 'data-1' },\n    { type: 'careerbreak', label: 'Career break', color: 'data-2' },\n    { type: 'medicalcare', label: 'Medical care', color: 'data-3' },\n    { type: 'modification', label: 'Modification', color: 'data-4' },\n    { type: 'paliativecare', label: 'Palliative care', color: 'data-5' },\n    { type: 'thematic', label: 'Thematic', color: 'data-6' },\n    { type: 'timecredit', label: 'Time credit', color: 'data-7' },\n  ];\n\n  readonly periods = signal<TimelinePeriod[]>([\n    {\n      id: '1',\n      beginDate: new Date(2016, 0, 1),\n      endDate: new Date(2017, 5, 30),\n      type: 'parentalleave',\n      label: 'Parental leave',\n      description: 'Full-time parental leave after the birth of a child.',\n    },\n    {\n      id: '2',\n      beginDate: new Date(2017, 6, 1),\n      endDate: new Date(2018, 5, 30),\n      type: 'careerbreak',\n      label: 'Career break',\n      description: 'Voluntary full-time career break.',\n    },\n    {\n      id: '3',\n      beginDate: new Date(2018, 6, 1),\n      endDate: new Date(2019, 5, 30),\n      type: 'medicalcare',\n      label: 'Medical care',\n      description: 'Leave to provide medical care to a relative.',\n    },\n    {\n      id: '4',\n      beginDate: new Date(2019, 6, 1),\n      endDate: new Date(2020, 5, 30),\n      type: 'modification',\n      label: 'Modification',\n      description: 'Reduced working time (4/5th).',\n    },\n    {\n      id: '5',\n      beginDate: new Date(2020, 6, 1),\n      endDate: new Date(2021, 5, 30),\n      type: 'paliativecare',\n      label: 'Palliative care',\n      description: 'Palliative care leave.',\n    },\n    {\n      id: '6',\n      beginDate: new Date(2021, 6, 1),\n      endDate: new Date(2022, 5, 30),\n      type: 'thematic',\n      label: 'Thematic',\n      description: 'Thematic leave for training.',\n    },\n    {\n      id: '7',\n      beginDate: new Date(2022, 6, 1),\n      endDate: new Date(2023, 2, 31),\n      type: 'careerbreak',\n      label: 'Career break',\n      description: 'Second career break, half-time.',\n    },\n    {\n      id: '8',\n      beginDate: new Date(2023, 3, 1),\n      endDate: new Date(2023, 11, 31),\n      type: 'timecredit',\n      label: 'Time credit',\n      description: 'End-of-career time credit (pending approval).',\n      disabled: true,\n    },\n    {\n      id: '9',\n      beginDate: new Date(2016, 3, 10),\n      endDate: new Date(2016, 10, 20),\n      type: 'thematic',\n      label: 'Thematic',\n      description: 'Partial thematic leave.',\n    },\n    {\n      id: '10',\n      beginDate: new Date(2018, 8, 5),\n      endDate: new Date(2019, 3, 15),\n      type: 'careerbreak',\n      label: 'Career break',\n      description: 'Partial career break (1/5th).',\n    },\n    {\n      id: '11',\n      beginDate: new Date(2021, 8, 1),\n      endDate: new Date(2022, 1, 28),\n      type: 'timecredit',\n      label: 'Time credit',\n      description: 'Mid-career time credit.',\n    },\n    {\n      id: '12',\n      beginDate: new Date(2016, 4, 1),\n      endDate: new Date(2016, 7, 31),\n      type: 'modification',\n      label: 'Modification',\n      description: 'Temporary schedule modification.',\n    },\n    {\n      id: '13',\n      beginDate: new Date(2018, 9, 1),\n      endDate: new Date(2019, 1, 28),\n      type: 'paliativecare',\n      label: 'Palliative care',\n      description: 'Short palliative care leave.',\n    },\n    {\n      id: '14',\n      beginDate: new Date(2016, 1, 1),\n      endDate: new Date(2019, 11, 31),\n      type: 'timecredit',\n      label: 'Time credit',\n      description: 'Long-running mid-career time credit.',\n    },\n    {\n      id: '15',\n      beginDate: new Date(2017, 0, 1),\n      endDate: new Date(2021, 5, 30),\n      type: 'thematic',\n      label: 'Thematic',\n      description: 'Recurring thematic leave.',\n    },\n  ]);\n\n  readonly requestPeriods: TimelinePeriod[] = [\n    {\n      id: 'r1',\n      beginDate: new Date(2021, 2, 1),\n      endDate: new Date(2021, 8, 30),\n      type: 'parentalleave',\n      label: 'Parental leave',\n      description: 'Requested parental leave (pending approval).',\n    },\n    {\n      id: 'r2',\n      beginDate: new Date(2022, 0, 1),\n      endDate: new Date(2022, 7, 31),\n      type: 'careerbreak',\n      label: 'Career break',\n      description: 'Requested career break (pending approval).',\n    },\n    {\n      id: 'r3',\n      beginDate: new Date(2023, 1, 1),\n      endDate: new Date(2023, 6, 31),\n      type: 'medicalcare',\n      label: 'Medical care',\n      description: 'Requested medical care (pending approval).',\n    },\n  ];\n\n  readonly filters: TimelineFilterOption[] = [\n    { label: 'Toegewezen periodes', value: 'assigned' },\n    { label: 'Aanvragen', value: 'requests' },\n    { label: 'Alles', value: 'all' },\n  ];\n\n  readonly activeFilter = signal<string | undefined>('assigned');\n\n  readonly displayedPeriods = computed<TimelinePeriod[]>(() => {\n    switch (this.activeFilter()) {\n      case 'requests':\n        return this.requestPeriods;\n      case 'all':\n        return [...this.periods(), ...this.requestPeriods];\n      default:\n        return this.periods();\n    }\n  });\n\n  readonly yearCount = signal(5);\n\n  readonly showMonths = signal(true);\n\n  readonly axisUnit = signal<'months' | 'days'>('months');\n\n  readonly showLabels = signal(true);\n\n  readonly fullSize = signal(false);\n\n  readonly selectedPeriod = signal<TimelinePeriod | undefined>(undefined);\n}\n"}