@onemrvapublic/design-system-demos 21.8.1-develop.3 → 22.0.0-develop.10

package/browser/assets/json/paginator.json

@@ -1 +1 @@
-{"demo-paginator.component.html":"<h3>type = 'default'</h3>\n\n<p>\n  The default paginator shows pages 5 by 5 except if there are only 6 remaining\n  pages. Buttons '...' are fast back/forward.\n</p>\n\n<onemrva-mat-paginator\n  [pageIndex]=\"pageIndex\"\n  [pageSize]=\"10\"\n  [length]=\"69\"\n  (onRequestPage)=\"changePage($event)\"\n  recordKey=\"records.per.page\"\n  #paginator\n/>\n\n<br />\n\n<h3>type = 'complex'</h3>\n\n<p>\n  To get the complex paginator, you need to set the type to 'complex'. It shows\n  pages 5 by 5 except if there are max 7 remaining pages. Buttons '...' are fast\n  back/forward. First and last pages are always reachable.\n</p>\n\n<onemrva-mat-paginator\n  [pageIndex]=\"pageIndex2\"\n  [pageSize]=\"20\"\n  [length]=\"339\"\n  type=\"complex\"\n  recordKey=\"records.per.page\"\n  (onRequestPage)=\"changePage($event, 'complex')\"\n  #paginator\n/>\n","demo-paginator.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\n\nimport { TranslateModule } from '@ngx-translate/core';\nimport {\n  OnemrvaMatPaginatorComponent,\n  OnemrvaMatPaginatorModule,\n} from '@onemrvapublic/design-system/mat-paginator';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-paginator',\n  templateUrl: 'demo-paginator.component.html',\n\n  standalone: true,\n  imports: [\n    TranslateModule,\n    OnemrvaMatPaginatorModule,\n    OnemrvaMatPaginatorComponent,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoPaginatorComponent extends DemoComponentBase {\n  pageIndex = 0;\n  pageIndex2 = 0;\n\n  changePage(pageIndex: number, type: 'default' | 'complex' = 'default') {\n    if (type === 'complex') this.pageIndex2 = pageIndex;\n    else this.pageIndex = pageIndex;\n  }\n}\n"}
+{"demo-paginator.component.html":"<h3>type = 'default'</h3>\n\n<p>\n  The default paginator shows pages 5 by 5 except if there are only 6 remaining\n  pages. Buttons '...' are fast back/forward.\n</p>\n\n<onemrva-mat-paginator\n  [pageIndex]=\"pageIndex\"\n  [pageSize]=\"10\"\n  [length]=\"69\"\n  (onRequestPage)=\"changePage($event)\"\n  recordKey=\"records.per.page\"\n  #paginator\n/>\n\n<br />\n\n<h3>type = 'complex'</h3>\n\n<p>\n  To get the complex paginator, you need to set the type to 'complex'. It shows\n  pages 5 by 5 except if there are max 7 remaining pages. Buttons '...' are fast\n  back/forward. First and last pages are always reachable.\n</p>\n\n<onemrva-mat-paginator\n  [pageIndex]=\"pageIndex2\"\n  [pageSize]=\"20\"\n  [length]=\"339\"\n  type=\"complex\"\n  recordKey=\"records.per.page\"\n  (onRequestPage)=\"changePage($event, 'complex')\"\n  #paginator\n/>\n","demo-paginator.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\n\nimport {\n  OnemrvaMatPaginatorComponent,\n  OnemrvaMatPaginatorModule,\n} from '@onemrvapublic/design-system/mat-paginator';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-paginator',\n  templateUrl: 'demo-paginator.component.html',\n\n  standalone: true,\n  imports: [\n    OnemrvaMatPaginatorModule,\n    OnemrvaMatPaginatorComponent,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoPaginatorComponent extends DemoComponentBase {\n  pageIndex = 0;\n  pageIndex2 = 0;\n\n  changePage(pageIndex: number, type: 'default' | 'complex' = 'default') {\n    if (type === 'complex') this.pageIndex2 = pageIndex;\n    else this.pageIndex = pageIndex;\n  }\n}\n"}

package/browser/assets/json/phone-input.json

@@ -1 +1 @@
-{"demo-phone-input.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Phone number</mat-label>\n\n  <onemrva-mat-input-phone\n    [formControl]=\"form\"\n    (getCountry)=\"getCountry($event)\"\n    placeholder=\"+32 475 12 23 34\"\n  />\n\n  <mat-hint>hint</mat-hint>\n  @if (form.hasError('required')) {\n    <mat-error>\n      {{ 'input.phone.required' | translate }}\n    </mat-error>\n  } @else if (form.hasError('phoneNumber')) {\n    <mat-error>\n      {{ 'input.phone.invalid' | translate }}\n    </mat-error>\n  }\n</mat-form-field>\n","demo-phone-input.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport {\n  FormControl,\n  FormsModule,\n  ReactiveFormsModule,\n  Validators,\n} from '@angular/forms';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { OnemrvaMatInputPhoneComponent } from '@onemrvapublic/design-system/mat-input-phone';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport {\n  phoneNumberValidator,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system/shared';\n\n@Component({\n  selector: 'app-demo-phone-input',\n  templateUrl: './demo-phone-input.component.html',\n  standalone: true,\n  imports: [\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    OnemrvaMatInputPhoneComponent,\n    FormsModule,\n    MatInputModule,\n    TranslateModule,\n    OnemRvaReadonlyDirective,\n  ],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoPhoneInputComponent extends DemoComponentBase {\n  readonly = input(false);\n\n  disabled = input(false);\n\n  form = new FormControl('', [Validators.required, phoneNumberValidator()]);\n\n  getCountry($event: any) {\n    this.output.set($event);\n  }\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n\n      // we set a value for readonly demo\n      if (this.readonly()) {\n        this.form.setValue('+32412345678');\n      }\n    });\n  }\n}\n"}
+{"demo-phone-input.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Phone number</mat-label>\n\n  <onemrva-mat-input-phone\n    [formControl]=\"form\"\n    (getCountry)=\"getCountry($event)\"\n    placeholder=\"+32 475 12 23 34\"\n  />\n\n  <mat-hint>hint</mat-hint>\n  @if (form.hasError('required')) {\n    <mat-error>\n      {{ 'input.phone.required' | translate }}\n    </mat-error>\n  } @else if (form.hasError('phoneNumber')) {\n    <mat-error>\n      {{ 'input.phone.invalid' | translate }}\n    </mat-error>\n  }\n</mat-form-field>\n","demo-phone-input.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport {\n  FormControl,\n  FormsModule,\n  ReactiveFormsModule,\n  Validators,\n} from '@angular/forms';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { OnemrvaMatInputPhoneComponent } from '@onemrvapublic/design-system/mat-input-phone';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport {\n  phoneNumberValidator,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system/shared';\n\n@Component({\n  selector: 'app-demo-phone-input',\n  templateUrl: './demo-phone-input.component.html',\n  standalone: true,\n  imports: [\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    OnemrvaMatInputPhoneComponent,\n    FormsModule,\n    MatInputModule,\n    TranslatePipe,\n    OnemRvaReadonlyDirective,\n  ],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoPhoneInputComponent extends DemoComponentBase {\n  readonly = input(false);\n\n  disabled = input(false);\n\n  form = new FormControl('', [Validators.required, phoneNumberValidator()]);\n\n  getCountry($event: any) {\n    this.output.set($event);\n  }\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n\n      // we set a value for readonly demo\n      if (this.readonly()) {\n        this.form.setValue('+32412345678');\n      }\n    });\n  }\n}\n"}

package/browser/assets/json/select.json

@@ -1 +1 @@
-{"demo-select.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Select (single with filter)</mat-label>\n  <mat-select [placeholder]=\"'Search here' | translate\" [formControl]=\"form\">\n    <mat-option>\n      <mat-select-search\n        [formControl]=\"filterCtrl\"\n        ariaLabel=\"{{ 'filter select' | translate }}\"\n        noEntriesFoundLabel=\"{{ 'Not found' | translate }}\"\n        placeholderLabel=\"{{ 'Search' | translate }}\"\n      />\n    </mat-option>\n    @for (value of toppingList$ | async; track value) {\n      <mat-option [value]=\"value\">{{ value }}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n","demo-select.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport { MatSelectModule } from '@angular/material/select';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { debounceTime, Observable, startWith } from 'rxjs';\nimport { map } from 'rxjs/operators';\nimport { AsyncPipe } from '@angular/common';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSelectSearchModule } from '@onemrvapublic/design-system/mat-select-search';\nimport { OnemrvaMatMultiSelectModule } from '@onemrvapublic/design-system/mat-multi-select';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { toppingList } from '../../models/toppings';\n\n@Component({\n  selector: 'app-demo-select',\n  templateUrl: './demo-select.component.html',\n\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    TranslateModule,\n    MatInputModule,\n    MatSelectModule,\n    MatSelectSearchModule,\n    MatFormFieldModule,\n    OnemrvaMatMultiSelectModule,\n    OnemRvaReadonlyDirective,\n    AsyncPipe,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSelectComponent extends DemoComponentBase {\n  disabled = input<boolean>(false);\n  readonly = input<boolean>(false);\n\n  form: FormControl = new FormControl('', Validators.required);\n\n  toppingList$: Observable<string[]>;\n\n  public filterCtrl: FormControl<string | null> = new FormControl<string>('');\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n\n    this.toppingList$ = this.filterCtrl.valueChanges.pipe(\n      debounceTime(400),\n      startWith(''),\n      map(search => {\n        return toppingList.filter((value: string) => {\n          if (!search || search === '') return true;\n          return value.toLowerCase().indexOf(search.toLowerCase()) > -1;\n        });\n      }),\n    );\n  }\n}\n"}
+{"demo-select.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Select (single with filter)</mat-label>\n  <mat-select [placeholder]=\"'Search here' | translate\" [formControl]=\"form\">\n    <mat-option>\n      <mat-select-search\n        [formControl]=\"filterCtrl\"\n        ariaLabel=\"{{ 'filter select' | translate }}\"\n        noEntriesFoundLabel=\"{{ 'Not found' | translate }}\"\n        placeholderLabel=\"{{ 'Search' | translate }}\"\n      />\n    </mat-option>\n    @for (value of toppingList$ | async; track value) {\n      <mat-option [value]=\"value\">{{ value }}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n","demo-select.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport { MatSelectModule } from '@angular/material/select';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { debounceTime, Observable, startWith } from 'rxjs';\nimport { map } from 'rxjs/operators';\nimport { AsyncPipe } from '@angular/common';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSelectSearchModule } from '@onemrvapublic/design-system/mat-select-search';\nimport { OnemrvaMatMultiSelectModule } from '@onemrvapublic/design-system/mat-multi-select';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { toppingList } from '../../models/toppings';\n\n@Component({\n  selector: 'app-demo-select',\n  templateUrl: './demo-select.component.html',\n\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    TranslatePipe,\n    MatInputModule,\n    MatSelectModule,\n    MatSelectSearchModule,\n    MatFormFieldModule,\n    OnemrvaMatMultiSelectModule,\n    OnemRvaReadonlyDirective,\n    AsyncPipe,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSelectComponent extends DemoComponentBase {\n  disabled = input<boolean>(false);\n  readonly = input<boolean>(false);\n\n  form: FormControl = new FormControl('', Validators.required);\n\n  toppingList$: Observable<string[]>;\n\n  public filterCtrl: FormControl<string | null> = new FormControl<string>('');\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n\n    this.toppingList$ = this.filterCtrl.valueChanges.pipe(\n      debounceTime(400),\n      startWith(''),\n      map(search => {\n        return toppingList.filter((value: string) => {\n          if (!search || search === '') return true;\n          return value.toLowerCase().indexOf(search.toLowerCase()) > -1;\n        });\n      }),\n    );\n  }\n}\n"}

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"}