iss-ctrl 0.0.13 → 0.0.14

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.
Files changed (64) hide show
  1. package/fesm2022/{iss-ctrl-iss-ctrl-BN9rcLt2.mjs → iss-ctrl-iss-ctrl-CDk4_RVA.mjs} +707 -148
  2. package/fesm2022/iss-ctrl-iss-ctrl-CDk4_RVA.mjs.map +1 -0
  3. package/fesm2022/{iss-ctrl-load-event-AgBohfHa.mjs → iss-ctrl-load-event-5MIEPp-j.mjs} +3 -3
  4. package/fesm2022/{iss-ctrl-load-event-AgBohfHa.mjs.map → iss-ctrl-load-event-5MIEPp-j.mjs.map} +1 -1
  5. package/fesm2022/{iss-ctrl-load-options-event-ClQPHNBO.mjs → iss-ctrl-load-options-event-D4gOR-3h.mjs} +3 -3
  6. package/fesm2022/{iss-ctrl-load-options-event-CBejHpME.mjs.map → iss-ctrl-load-options-event-D4gOR-3h.mjs.map} +1 -1
  7. package/fesm2022/{iss-ctrl-load-value-event-CDAKsE_O.mjs → iss-ctrl-load-value-event-a_CrlH07.mjs} +3 -3
  8. package/fesm2022/{iss-ctrl-load-value-event-CDAKsE_O.mjs.map → iss-ctrl-load-value-event-a_CrlH07.mjs.map} +1 -1
  9. package/fesm2022/{iss-ctrl-note.field-C9cVaAz0.mjs → iss-ctrl-note.field-DIU49W4s.mjs} +2 -2
  10. package/fesm2022/{iss-ctrl-note.field-C9cVaAz0.mjs.map → iss-ctrl-note.field-DIU49W4s.mjs.map} +1 -1
  11. package/fesm2022/{iss-ctrl-replace-api-keys-Chwe42Nu.mjs → iss-ctrl-replace-api-keys-8o7-XCdX.mjs} +2 -2
  12. package/fesm2022/{iss-ctrl-replace-api-keys-CLP4wBYu.mjs.map → iss-ctrl-replace-api-keys-8o7-XCdX.mjs.map} +1 -1
  13. package/fesm2022/{iss-ctrl-set-value-event-CrpzRR6X.mjs → iss-ctrl-set-value-event-BJGXPwPV.mjs} +2 -2
  14. package/fesm2022/{iss-ctrl-set-value-event-C7YYwHZV.mjs.map → iss-ctrl-set-value-event-BJGXPwPV.mjs.map} +1 -1
  15. package/fesm2022/{iss-ctrl-table.field-BP-HMKO3.mjs → iss-ctrl-table.field-Ca6d7LvU.mjs} +2 -2
  16. package/fesm2022/{iss-ctrl-table.field-BP-HMKO3.mjs.map → iss-ctrl-table.field-Ca6d7LvU.mjs.map} +1 -1
  17. package/fesm2022/{iss-ctrl-trigger-based-on-json-value-DS4TR38v.mjs → iss-ctrl-trigger-based-on-json-value-Jp6lQkIa.mjs} +2 -2
  18. package/fesm2022/{iss-ctrl-trigger-based-on-json-value-CprcFCWi.mjs.map → iss-ctrl-trigger-based-on-json-value-Jp6lQkIa.mjs.map} +1 -1
  19. package/fesm2022/{iss-ctrl-user-picker.field-8Jb1325c.mjs → iss-ctrl-user-picker.field-CFK871y8.mjs} +2 -2
  20. package/fesm2022/{iss-ctrl-user-picker.field-8Jb1325c.mjs.map → iss-ctrl-user-picker.field-CFK871y8.mjs.map} +1 -1
  21. package/fesm2022/iss-ctrl.mjs +1 -1
  22. package/package.json +1 -1
  23. package/types/iss-ctrl.d.ts +210 -9
  24. package/fesm2022/iss-ctrl-iss-ctrl-BN9rcLt2.mjs.map +0 -1
  25. package/fesm2022/iss-ctrl-iss-ctrl-DOmgkxUv.mjs +0 -8924
  26. package/fesm2022/iss-ctrl-iss-ctrl-DOmgkxUv.mjs.map +0 -1
  27. package/fesm2022/iss-ctrl-iss-ctrl-WfIqBEcL.mjs +0 -8913
  28. package/fesm2022/iss-ctrl-iss-ctrl-WfIqBEcL.mjs.map +0 -1
  29. package/fesm2022/iss-ctrl-load-event-D70VZuyD.mjs +0 -60
  30. package/fesm2022/iss-ctrl-load-event-D70VZuyD.mjs.map +0 -1
  31. package/fesm2022/iss-ctrl-load-event-SlQmVmyf.mjs +0 -60
  32. package/fesm2022/iss-ctrl-load-event-SlQmVmyf.mjs.map +0 -1
  33. package/fesm2022/iss-ctrl-load-options-event-CBejHpME.mjs +0 -50
  34. package/fesm2022/iss-ctrl-load-options-event-ClQPHNBO.mjs.map +0 -1
  35. package/fesm2022/iss-ctrl-load-options-event-DHmaMAOb.mjs +0 -50
  36. package/fesm2022/iss-ctrl-load-options-event-DHmaMAOb.mjs.map +0 -1
  37. package/fesm2022/iss-ctrl-load-value-event-Bu9-rZ6T.mjs +0 -52
  38. package/fesm2022/iss-ctrl-load-value-event-Bu9-rZ6T.mjs.map +0 -1
  39. package/fesm2022/iss-ctrl-load-value-event-Cpuy1og1.mjs +0 -52
  40. package/fesm2022/iss-ctrl-load-value-event-Cpuy1og1.mjs.map +0 -1
  41. package/fesm2022/iss-ctrl-note.field-IM4x1O3b.mjs +0 -65
  42. package/fesm2022/iss-ctrl-note.field-IM4x1O3b.mjs.map +0 -1
  43. package/fesm2022/iss-ctrl-note.field-onDjqI_X.mjs +0 -65
  44. package/fesm2022/iss-ctrl-note.field-onDjqI_X.mjs.map +0 -1
  45. package/fesm2022/iss-ctrl-replace-api-keys-CLP4wBYu.mjs +0 -57
  46. package/fesm2022/iss-ctrl-replace-api-keys-Chwe42Nu.mjs.map +0 -1
  47. package/fesm2022/iss-ctrl-replace-api-keys-CvhCKvNB.mjs +0 -57
  48. package/fesm2022/iss-ctrl-replace-api-keys-CvhCKvNB.mjs.map +0 -1
  49. package/fesm2022/iss-ctrl-set-value-event-C7YYwHZV.mjs +0 -61
  50. package/fesm2022/iss-ctrl-set-value-event-CrpzRR6X.mjs.map +0 -1
  51. package/fesm2022/iss-ctrl-set-value-event-DiHESiPT.mjs +0 -61
  52. package/fesm2022/iss-ctrl-set-value-event-DiHESiPT.mjs.map +0 -1
  53. package/fesm2022/iss-ctrl-table.field-CDSVakji.mjs +0 -592
  54. package/fesm2022/iss-ctrl-table.field-CDSVakji.mjs.map +0 -1
  55. package/fesm2022/iss-ctrl-table.field-DxwfNXNc.mjs +0 -592
  56. package/fesm2022/iss-ctrl-table.field-DxwfNXNc.mjs.map +0 -1
  57. package/fesm2022/iss-ctrl-trigger-based-on-json-value-CprcFCWi.mjs +0 -24
  58. package/fesm2022/iss-ctrl-trigger-based-on-json-value-DS4TR38v.mjs.map +0 -1
  59. package/fesm2022/iss-ctrl-trigger-based-on-json-value-Dp0EhVLA.mjs +0 -24
  60. package/fesm2022/iss-ctrl-trigger-based-on-json-value-Dp0EhVLA.mjs.map +0 -1
  61. package/fesm2022/iss-ctrl-user-picker.field-Mqi37i7D.mjs +0 -225
  62. package/fesm2022/iss-ctrl-user-picker.field-Mqi37i7D.mjs.map +0 -1
  63. package/fesm2022/iss-ctrl-user-picker.field-PxT_dZ_O.mjs +0 -225
  64. package/fesm2022/iss-ctrl-user-picker.field-PxT_dZ_O.mjs.map +0 -1
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Pipe, input, signal, output, Component, CUSTOM_ELEMENTS_SCHEMA, HostListener, Directive, computed, effect, ChangeDetectionStrategy, Injectable, inject, ElementRef, contentChild, isSignal, Injector, InjectionToken, DestroyRef } from '@angular/core';
2
+ import { Pipe, input, signal, output, Component, CUSTOM_ELEMENTS_SCHEMA, InjectionToken, inject, Injectable, effect, HostListener, Directive, computed, ChangeDetectionStrategy, ElementRef, contentChild, isSignal, Injector, DestroyRef } from '@angular/core';
3
3
  import * as i1$2 from '@angular/forms';
4
4
  import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormGroup, FormsModule, Validators, ControlContainer } from '@angular/forms';
5
5
  import * as i1 from '@angular/material/checkbox';
@@ -10,14 +10,12 @@ import { MatFormField, MatFormFieldModule, MatHint, MatPrefix, MatError, MatLabe
10
10
  import * as i1$1 from '@angular/material/input';
11
11
  import { MatInput, MatInputModule, MatLabel as MatLabel$1 } from '@angular/material/input';
12
12
  import { DatePipe, NgOptimizedImage, NgClass, NgStyle, NgTemplateOutlet, NgComponentOutlet, AsyncPipe, KeyValuePipe } from '@angular/common';
13
- import { provideDateFnsAdapter } from '@angular/material-date-fns-adapter';
14
- import { MAT_DATE_LOCALE, provideNativeDateAdapter } from '@angular/material/core';
13
+ import { NativeDateAdapter, MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS, provideNativeDateAdapter } from '@angular/material/core';
15
14
  import * as i2 from '@angular/material/datepicker';
16
15
  import { MatDatepickerModule } from '@angular/material/datepicker';
17
16
  import * as i3 from '@angular/material/icon';
18
17
  import { MatIconModule, MatIcon } from '@angular/material/icon';
19
18
  import { format } from 'date-fns';
20
- import { enGB } from 'date-fns/locale';
21
19
  import { Subscription, BehaviorSubject, merge, of, map, from, tap, debounceTime, first, forkJoin, EMPTY, catchError } from 'rxjs';
22
20
  import * as i2$1 from '@angular/material/timepicker';
23
21
  import { MatTimepickerModule } from '@angular/material/timepicker';
@@ -404,7 +402,9 @@ class ChipsControl extends ControlBase {
404
402
  ], usesInheritance: true, ngImport: i0, template: `
405
403
  <mat-form-field floatLabel="auto" class="">
406
404
  <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
407
- <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
405
+ <mat-label class="fs-16 fc-black">
406
+ <ng-content select="label"></ng-content>
407
+ </mat-label>
408
408
  <input
409
409
  matInput
410
410
  [placeholder]="placeholder()"
@@ -447,7 +447,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
447
447
  template: `
448
448
  <mat-form-field floatLabel="auto" class="">
449
449
  <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
450
- <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
450
+ <mat-label class="fs-16 fc-black">
451
+ <ng-content select="label"></ng-content>
452
+ </mat-label>
451
453
  <input
452
454
  matInput
453
455
  [placeholder]="placeholder()"
@@ -479,7 +481,7 @@ const DATE_FORMAT_ADAPTER = {
479
481
  display: {
480
482
  dateInput: "dd/MM/yyyy",
481
483
  monthYearLabel: "MMMM yyyy",
482
- dateA11yLabel: "dd/MM/yyyyTHH:mm",
484
+ dateA11yLabel: "dd/MM/yyyy",
483
485
  monthYearA11yLabel: "MMMM yyyy",
484
486
  timeInput: "hh:mm aa",
485
487
  timeOptionLabel: "hh:mm aa",
@@ -487,6 +489,338 @@ const DATE_FORMAT_ADAPTER = {
487
489
  };
488
490
  const DATETIME_FORMAT = "dd/MM/yyyy hh:mm a";
489
491
 
492
+ const UI_LANGUAGE = new InjectionToken("UI SELECTED LANGUAGE");
493
+
494
+ /**
495
+ * Umm al-Qura Hijri calendar helpers.
496
+ *
497
+ * Every function here works on a plain `Date`: a `Date` is an instant, and the Hijri
498
+ * calendar is only another way of naming that instant. Nothing stores Hijri numbers on the
499
+ * date itself, so a value converted to Hijri for display or emission is still the same day.
500
+ *
501
+ * The conversion is done by `Intl` with the `islamic-umalqura` calendar, which is the
502
+ * calendar used officially in Saudi Arabia.
503
+ */
504
+ /** Locale used by the calendar UI when the Hijri calendar is on. */
505
+ const HIJRI_LOCALE = "ar-SA-u-ca-islamic-umalqura";
506
+ /** Latin-digit locale used internally to read the Hijri parts of a date. */
507
+ const HIJRI_PARTS_LOCALE = "en-US-u-ca-islamic-umalqura";
508
+ const MS_PER_DAY = 86_400_000;
509
+ /** 1 Muharram 1445 AH, the anchor the month estimate starts from. */
510
+ const ANCHOR_GREGORIAN = { year: 2023, month: 6, day: 19 };
511
+ const ANCHOR_HIJRI_YEAR = 1445;
512
+ /** Mean length of a Hijri month, used only to get close before the exact walk. */
513
+ const MEAN_HIJRI_MONTH = 29.530588;
514
+ const HIJRI_MONTH_NAMES = {
515
+ ar: ["محرم", "صفر", "ربيع الأول", "ربيع الآخر", "جمادى الأولى", "جمادى الآخرة", "رجب", "شعبان", "رمضان", "شوال", "ذو القعدة", "ذو الحجة"],
516
+ en: ["Muharram", "Safar", "Rabi' al-Awwal", "Rabi' al-Thani", "Jumada al-Ula", "Jumada al-Akhirah", "Rajab", "Sha'ban", "Ramadan", "Shawwal", "Dhu al-Qi'dah", "Dhu al-Hijjah"],
517
+ enShort: ["Muh", "Saf", "Rab I", "Rab II", "Jum I", "Jum II", "Raj", "Sha", "Ram", "Shaw", "Dhul-Q", "Dhul-H"],
518
+ };
519
+ const partsFormatter = new Intl.DateTimeFormat(HIJRI_PARTS_LOCALE, {
520
+ day: "numeric",
521
+ month: "numeric",
522
+ year: "numeric",
523
+ });
524
+ /**
525
+ * Reads the Hijri year, month and day a `Date` falls on.
526
+ */
527
+ function getHijriParts(date) {
528
+ const parts = partsFormatter.formatToParts(date);
529
+ const read = (type) => parseInt(parts.find((part) => part.type === type)?.value ?? "0", 10);
530
+ return { year: read("year"), month: read("month") - 1, day: read("day") };
531
+ }
532
+ /**
533
+ * The Gregorian `Date` of the first day of the Hijri month `date` falls in, at midday.
534
+ *
535
+ * Midday, not midnight, so a daylight-saving shift can never push the result into the
536
+ * previous day while the month is being walked.
537
+ */
538
+ function startOfHijriMonth(date) {
539
+ const start = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 12);
540
+ start.setDate(start.getDate() - (getHijriParts(start).day - 1));
541
+ return start;
542
+ }
543
+ /**
544
+ * Number of days in the Hijri month `date` falls in — 29 or 30, decided by Umm al-Qura.
545
+ */
546
+ function getHijriDaysInMonth(date) {
547
+ const start = startOfHijriMonth(date);
548
+ // +30 days from the first of a 29 or 30 day month always lands inside the next one
549
+ const insideNextMonth = new Date(start.getTime());
550
+ insideNextMonth.setDate(insideNextMonth.getDate() + 30);
551
+ return Math.round((startOfHijriMonth(insideNextMonth).getTime() - start.getTime()) / MS_PER_DAY);
552
+ }
553
+ /**
554
+ * Builds the `Date` for a Hijri year/month/day. The month is zero based, and a day past the
555
+ * end of the month is clamped to the last day of that month.
556
+ */
557
+ function createHijriDate(year, month, day) {
558
+ const targetYear = year + Math.floor(month / 12);
559
+ const targetMonth = ((month % 12) + 12) % 12;
560
+ const monthsFromAnchor = (targetYear - ANCHOR_HIJRI_YEAR) * 12 + targetMonth;
561
+ const cursor = new Date(ANCHOR_GREGORIAN.year, ANCHOR_GREGORIAN.month, ANCHOR_GREGORIAN.day, 12);
562
+ cursor.setDate(cursor.getDate() + Math.round(monthsFromAnchor * MEAN_HIJRI_MONTH));
563
+ let start = startOfHijriMonth(cursor);
564
+ // the mean-month estimate drifts by a month or so over long spans; step whole months until it matches
565
+ for (let attempt = 0; attempt < 8; attempt++) {
566
+ const parts = getHijriParts(start);
567
+ const monthsOff = (targetYear - parts.year) * 12 + (targetMonth - parts.month);
568
+ if (monthsOff === 0) {
569
+ break;
570
+ }
571
+ // 29 days plus a nudge in the direction of travel always lands inside the neighbouring month
572
+ start.setDate(start.getDate() + monthsOff * 29 + Math.sign(monthsOff));
573
+ start = startOfHijriMonth(start);
574
+ }
575
+ const clampedDay = Math.min(Math.max(day, 1), getHijriDaysInMonth(start));
576
+ start.setDate(start.getDate() + clampedDay - 1);
577
+ start.setHours(0, 0, 0, 0);
578
+ return start;
579
+ }
580
+ /**
581
+ * Formats a date as a Hijri `yyyy-MM-dd` string — the shape the form emits when
582
+ * `emitHijri` is on.
583
+ */
584
+ function formatHijriDate(date) {
585
+ const parts = getHijriParts(date);
586
+ return `${pad(parts.year, 4)}-${pad(parts.month + 1, 2)}-${pad(parts.day, 2)}`;
587
+ }
588
+ /**
589
+ * Reads a Hijri date back into a `Date`, accepting both the emitted `yyyy-MM-dd` shape and
590
+ * the `dd/MM/yyyy` shape shown in the input. Returns `null` for anything else.
591
+ */
592
+ function parseHijriDate(value) {
593
+ if (!value) {
594
+ return null;
595
+ }
596
+ // strip the bidi marks Intl adds around Arabic-locale dates
597
+ const clean = value.replace(/[‎‏]/g, "").trim();
598
+ const iso = clean.match(/^(\d{3,4})-(\d{1,2})-(\d{1,2})/);
599
+ if (iso) {
600
+ return createHijriDate(+iso[1], +iso[2] - 1, +iso[3]);
601
+ }
602
+ const slashed = clean.match(/^(\d{1,2})[/-](\d{1,2})[/-](\d{3,4})$/);
603
+ if (slashed) {
604
+ return createHijriDate(+slashed[3], +slashed[2] - 1, +slashed[1]);
605
+ }
606
+ return null;
607
+ }
608
+ function pad(value, length) {
609
+ return String(value).padStart(length, "0");
610
+ }
611
+ /**
612
+ * Renders a stored form value as a Hijri `dd/MM/yyyy` string for the read-only viewers, or
613
+ * returns `null` when the field is not on the Hijri calendar and the value should be shown
614
+ * as an ordinary Gregorian date.
615
+ *
616
+ * The two Hijri modes store different things, so they are read differently: with `emitHijri`
617
+ * the value already carries Hijri numbers and only its notation changes, while with
618
+ * `hijriCalendar` alone the value is Gregorian and has to be converted.
619
+ */
620
+ function toHijriDisplay(value, options) {
621
+ if (!value || (!options.hijriCalendar && !options.emitHijri)) {
622
+ return null;
623
+ }
624
+ let datePart;
625
+ let hours;
626
+ let minutes;
627
+ if (options.emitHijri) {
628
+ const matched = value.match(/^(\d{3,4})-(\d{1,2})-(\d{1,2})(?:[T ](\d{1,2}):(\d{2}))?/);
629
+ if (!matched) {
630
+ return null;
631
+ }
632
+ datePart = `${pad(+matched[3], 2)}/${pad(+matched[2], 2)}/${pad(+matched[1], 4)}`;
633
+ hours = +(matched[4] ?? 0);
634
+ minutes = +(matched[5] ?? 0);
635
+ }
636
+ else {
637
+ const date = new Date(value);
638
+ if (Number.isNaN(date.getTime())) {
639
+ return null;
640
+ }
641
+ const parts = getHijriParts(date);
642
+ datePart = `${pad(parts.day, 2)}/${pad(parts.month + 1, 2)}/${pad(parts.year, 4)}`;
643
+ hours = date.getHours();
644
+ minutes = date.getMinutes();
645
+ }
646
+ if (!options.withTime) {
647
+ return datePart;
648
+ }
649
+ return `${datePart} ${pad(hours % 12 || 12, 2)}:${pad(minutes, 2)} ${hours < 12 ? "AM" : "PM"}`;
650
+ }
651
+
652
+ /**
653
+ * The single date adapter behind every `iss-ctrl-*` picker.
654
+ *
655
+ * It behaves as a plain Gregorian adapter — `dd/MM/yyyy` in and out — until its locale is
656
+ * switched to {@link HIJRI_LOCALE}, at which point the whole calendar grid becomes Umm
657
+ * al-Qura Hijri: the month lengths, the year and month labels and the day numbers all come
658
+ * from the Hijri calendar.
659
+ *
660
+ * The value never changes shape. The adapter always works on a `Date`, so a Hijri calendar
661
+ * still hands the control an ordinary `Date`, and it stays the control's decision whether to
662
+ * emit that as a Gregorian or a Hijri string.
663
+ *
664
+ * Switch modes through {@link setHijri}, never by assigning `locale` — `setLocale` is what
665
+ * tells an open calendar to re-render.
666
+ */
667
+ class IssDateAdapter extends NativeDateAdapter {
668
+ /** The Gregorian locale to fall back to when the Hijri calendar is turned off. */
669
+ gregorianLocale = "en-GB";
670
+ #language = inject(UI_LANGUAGE, { optional: true });
671
+ /** Whether the adapter is currently presenting the Hijri calendar. */
672
+ get isHijri() {
673
+ return typeof this.locale === "string" && this.locale.includes("islamic");
674
+ }
675
+ /**
676
+ * Turns the Hijri calendar on or off. Goes through `setLocale` so that a calendar that is
677
+ * already open redraws itself.
678
+ */
679
+ setHijri(hijri) {
680
+ const locale = hijri ? HIJRI_LOCALE : this.gregorianLocale;
681
+ if (this.locale !== locale) {
682
+ this.setLocale(locale);
683
+ }
684
+ }
685
+ getYear(date) {
686
+ return this.isHijri ? getHijriParts(date).year : date.getFullYear();
687
+ }
688
+ getMonth(date) {
689
+ return this.isHijri ? getHijriParts(date).month : date.getMonth();
690
+ }
691
+ getDate(date) {
692
+ return this.isHijri ? getHijriParts(date).day : date.getDate();
693
+ }
694
+ getMonthNames(style) {
695
+ if (!this.isHijri) {
696
+ return super.getMonthNames(style);
697
+ }
698
+ if (this.#language === "en") {
699
+ return style === "long" ? HIJRI_MONTH_NAMES.en : HIJRI_MONTH_NAMES.enShort;
700
+ }
701
+ return HIJRI_MONTH_NAMES.ar;
702
+ }
703
+ getDateNames() {
704
+ // a Hijri month never runs past 30 days, but the calendar body indexes this array by
705
+ // day number, so it must stay as long as the Gregorian one
706
+ return this.isHijri ? Array.from({ length: 31 }, (_, index) => String(index + 1)) : super.getDateNames();
707
+ }
708
+ getDayOfWeekNames(style) {
709
+ if (!this.isHijri) {
710
+ return super.getDayOfWeekNames(style);
711
+ }
712
+ // the week is the same week in both calendars, so only the language of the names changes
713
+ const names = new Intl.DateTimeFormat(this.#language === "en" ? "en-GB" : "ar", { weekday: style, timeZone: "utc" });
714
+ return Array.from({ length: 7 }, (_, index) => names.format(new Date(Date.UTC(2017, 0, index + 1))));
715
+ }
716
+ getYearName(date) {
717
+ return this.isHijri ? String(getHijriParts(date).year) : String(date.getFullYear());
718
+ }
719
+ getFirstDayOfWeek() {
720
+ return this.isHijri ? 0 : super.getFirstDayOfWeek();
721
+ }
722
+ getNumDaysInMonth(date) {
723
+ return this.isHijri ? getHijriDaysInMonth(date) : super.getNumDaysInMonth(date);
724
+ }
725
+ createDate(year, month, date) {
726
+ return this.isHijri ? createHijriDate(year, month, date) : super.createDate(year, month, date);
727
+ }
728
+ addCalendarYears(date, years) {
729
+ return this.addCalendarMonths(date, years * 12);
730
+ }
731
+ addCalendarMonths(date, months) {
732
+ if (!this.isHijri) {
733
+ return super.addCalendarMonths(date, months);
734
+ }
735
+ const parts = getHijriParts(date);
736
+ return this.#withTimeOf(createHijriDate(parts.year, parts.month + months, parts.day), date);
737
+ }
738
+ addCalendarDays(date, days) {
739
+ if (!this.isHijri) {
740
+ return super.addCalendarDays(date, days);
741
+ }
742
+ // a Hijri day is the same day, so this is plain Gregorian day arithmetic
743
+ const shifted = new Date(date.getTime());
744
+ shifted.setDate(shifted.getDate() + days);
745
+ return shifted;
746
+ }
747
+ parse(value, parseFormat) {
748
+ if (typeof value !== "string") {
749
+ return super.parse(value, parseFormat);
750
+ }
751
+ const clean = value.replace(/[‎‏]/g, "").trim();
752
+ if (!clean) {
753
+ return null;
754
+ }
755
+ if (this.isHijri) {
756
+ return parseHijriDate(clean) ?? this.invalid();
757
+ }
758
+ const slashed = clean.match(/^(\d{1,2})[/-](\d{1,2})[/-](\d{4})$/);
759
+ if (slashed) {
760
+ return new Date(+slashed[3], +slashed[2] - 1, +slashed[1]);
761
+ }
762
+ return super.parse(clean, parseFormat);
763
+ }
764
+ format(date, displayFormat) {
765
+ if (!this.isValid(date)) {
766
+ throw Error("IssDateAdapter: Cannot format invalid date.");
767
+ }
768
+ const year = this.getYear(date);
769
+ const month = this.getMonth(date);
770
+ const day = this.getDate(date);
771
+ // NativeDateAdapter formats through Intl in UTC, which shifts the day for anyone west of
772
+ // Greenwich; formatting the parts we already read keeps the rendered day the picked one.
773
+ // One pass, so a substituted month name can never be re-read as a token.
774
+ return (displayFormat ?? "dd/MM/yyyy").replace(/yyyy|MMMM|MMM|MM|dd/g, (token) => {
775
+ switch (token) {
776
+ case "yyyy": return String(year).padStart(4, "0");
777
+ case "MMMM": return this.getMonthNames("long")[month];
778
+ case "MMM": return this.getMonthNames("short")[month];
779
+ case "MM": return String(month + 1).padStart(2, "0");
780
+ default: return String(day).padStart(2, "0");
781
+ }
782
+ });
783
+ }
784
+ deserialize(value) {
785
+ // `yyyy-MM-dd` is a calendar day, not an instant: NativeDateAdapter reads it as UTC
786
+ // midnight, which renders as the previous day in any negative-offset zone
787
+ if (typeof value === "string") {
788
+ const iso = value.match(/^(\d{4})-(\d{2})-(\d{2})$/);
789
+ if (iso) {
790
+ return new Date(+iso[1], +iso[2] - 1, +iso[3]);
791
+ }
792
+ }
793
+ return super.deserialize(value);
794
+ }
795
+ toIso8601(date) {
796
+ return [String(date.getFullYear()).padStart(4, "0"), String(date.getMonth() + 1).padStart(2, "0"), String(date.getDate()).padStart(2, "0")].join("-");
797
+ }
798
+ #withTimeOf(date, source) {
799
+ const result = new Date(date.getTime());
800
+ result.setHours(source.getHours(), source.getMinutes(), source.getSeconds(), source.getMilliseconds());
801
+ return result;
802
+ }
803
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IssDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
804
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IssDateAdapter });
805
+ }
806
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IssDateAdapter, decorators: [{
807
+ type: Injectable
808
+ }] });
809
+ /**
810
+ * Providers every date-based control needs: the {@link IssDateAdapter} itself, the Gregorian
811
+ * locale it falls back to, and the `dd/MM/yyyy` formats both of its calendars are rendered in.
812
+ *
813
+ * Declared per component, so each picker owns its adapter instance and one field switching to
814
+ * the Hijri calendar leaves every other field on the form alone.
815
+ */
816
+ function provideIssDateAdapter() {
817
+ return [
818
+ { provide: MAT_DATE_LOCALE, useValue: "en-GB" },
819
+ { provide: DateAdapter, useClass: IssDateAdapter },
820
+ { provide: MAT_DATE_FORMATS, useValue: DATE_FORMAT_ADAPTER },
821
+ ];
822
+ }
823
+
490
824
  /**
491
825
  * `<iss-ctrl-date-picker>` — single date selection through a Material calendar.
492
826
  *
@@ -506,6 +840,14 @@ const DATETIME_FORMAT = "dd/MM/yyyy hh:mm a";
506
840
  * | `minDate` | `Date \| null` | `null` | Earliest selectable date. |
507
841
  * | `maxDate` | `Date \| null` | `null` | Latest selectable date. |
508
842
  * | `disabledDays` | `number[]` | `[]` | Week days to block, `0` = Sunday … `6` = Saturday. |
843
+ * | `hijriCalendar` | `boolean` | `false` | Shows an Umm al-Qura Hijri calendar; the value stays Gregorian. |
844
+ * | `emitHijri` | `boolean` | `false` | Emits the Hijri date instead of the Gregorian one. Implies `hijriCalendar`. |
845
+ *
846
+ * ### Hijri dates
847
+ * `hijriCalendar` only changes what the user sees: the calendar is Hijri, the input reads
848
+ * `dd/MM/yyyy` in Hijri, and a day shown as `16/03/1447` is still emitted as `2025-09-08`.
849
+ * Turn on `emitHijri` as well when the form value itself has to be the Hijri date. `minDate` and
850
+ * `maxDate` stay Gregorian in both cases — they are bounds on a day, not on a notation.
509
851
  *
510
852
  * ### Inherited from {@link ControlBase}
511
853
  * `formControlName` · `readonly` · `className` · `(onChange)`
@@ -525,6 +867,33 @@ class DatePickerControl extends ControlBase {
525
867
  * Latest selectable date.
526
868
  */
527
869
  maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
870
+ /**
871
+ * Renders the calendar as an Umm al-Qura Hijri calendar, leaving the emitted value Gregorian.
872
+ */
873
+ hijriCalendar = input(false, ...(ngDevMode ? [{ debugName: "hijriCalendar" }] : /* istanbul ignore next */ []));
874
+ /**
875
+ * Emits the picked date as a Hijri `yyyy-MM-dd` string. Implies {@link hijriCalendar}.
876
+ */
877
+ emitHijri = input(false, ...(ngDevMode ? [{ debugName: "emitHijri" }] : /* istanbul ignore next */ []));
878
+ #dateAdapter = inject(DateAdapter);
879
+ // the adapter is provided by this component, so switching it here leaves every other
880
+ // picker on the form on its own calendar
881
+ #hijriEffectRef = effect(() => this.#dateAdapter.setHijri(this.isHijri()), ...(ngDevMode ? [{ debugName: "#hijriEffectRef" }] : /* istanbul ignore next */ []));
882
+ /**
883
+ * Whether this picker is currently showing the Hijri calendar.
884
+ */
885
+ isHijri() {
886
+ return this.hijriCalendar() || this.emitHijri();
887
+ }
888
+ writeValue(value) {
889
+ // a Hijri value read back from the form is `1447-03-15`, which is not the day
890
+ // `new Date("1447-03-15")` would give the calendar
891
+ if (this.emitHijri() && typeof value === "string") {
892
+ super.writeValue(parseHijriDate(value));
893
+ return;
894
+ }
895
+ super.writeValue(value);
896
+ }
528
897
  clear(event) {
529
898
  if (this.readonly()) {
530
899
  return;
@@ -543,7 +912,7 @@ class DatePickerControl extends ControlBase {
543
912
  return;
544
913
  }
545
914
  this.markAsTouched();
546
- const selectedDateString = format($event.value, "yyyy-MM-dd");
915
+ const selectedDateString = this.emitHijri() ? formatHijriDate($event.value) : format($event.value, "yyyy-MM-dd");
547
916
  this.propagateValue(selectedDateString);
548
917
  this.emitOnChangeEvent(selectedDateString);
549
918
  }
@@ -555,16 +924,17 @@ class DatePickerControl extends ControlBase {
555
924
  this.markAsTouched();
556
925
  }
557
926
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
558
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DatePickerControl, isStandalone: true, selector: "iss-ctrl-date-picker", inputs: { disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
927
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DatePickerControl, isStandalone: true, selector: "iss-ctrl-date-picker", inputs: { disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, hijriCalendar: { classPropertyName: "hijriCalendar", publicName: "hijriCalendar", isSignal: true, isRequired: false, transformFunction: null }, emitHijri: { classPropertyName: "emitHijri", publicName: "emitHijri", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
559
928
  DatePipe,
560
- provideDateFnsAdapter(DATE_FORMAT_ADAPTER),
561
- { provide: MAT_DATE_LOCALE, useValue: enGB },
929
+ provideIssDateAdapter(),
562
930
  { provide: NG_VALUE_ACCESSOR, useExisting: DatePickerControl, multi: true },
563
931
  { provide: NG_VALIDATORS, useExisting: DatePickerControl, multi: true },
564
932
  ], usesInheritance: true, ngImport: i0, template: `
565
933
  <mat-form-field floatLabel="auto" class="">
566
934
  <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
567
- <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
935
+ <mat-label class="fs-16 fc-black">
936
+ <ng-content select="label"></ng-content>
937
+ </mat-label>
568
938
  <input
569
939
  class="cursor-pointer"
570
940
  matInput
@@ -582,7 +952,7 @@ class DatePickerControl extends ControlBase {
582
952
  <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
583
953
  }
584
954
  <mat-datepicker-toggle matIconSuffix [for]="picker" [disabled]="readonly()"></mat-datepicker-toggle>
585
- <mat-datepicker #picker></mat-datepicker>
955
+ <mat-datepicker #picker [panelClass]="isHijri() ? 'iss-hijri-calendar' : ''"></mat-datepicker>
586
956
 
587
957
  </mat-form-field>
588
958
  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
@@ -591,14 +961,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
591
961
  type: Component,
592
962
  args: [{ selector: "iss-ctrl-date-picker", imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, MatIconModule, ReactiveFormsModule], providers: [
593
963
  DatePipe,
594
- provideDateFnsAdapter(DATE_FORMAT_ADAPTER),
595
- { provide: MAT_DATE_LOCALE, useValue: enGB },
964
+ provideIssDateAdapter(),
596
965
  { provide: NG_VALUE_ACCESSOR, useExisting: DatePickerControl, multi: true },
597
966
  { provide: NG_VALIDATORS, useExisting: DatePickerControl, multi: true },
598
967
  ], template: `
599
968
  <mat-form-field floatLabel="auto" class="">
600
969
  <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
601
- <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
970
+ <mat-label class="fs-16 fc-black">
971
+ <ng-content select="label"></ng-content>
972
+ </mat-label>
602
973
  <input
603
974
  class="cursor-pointer"
604
975
  matInput
@@ -616,11 +987,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
616
987
  <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
617
988
  }
618
989
  <mat-datepicker-toggle matIconSuffix [for]="picker" [disabled]="readonly()"></mat-datepicker-toggle>
619
- <mat-datepicker #picker></mat-datepicker>
990
+ <mat-datepicker #picker [panelClass]="isHijri() ? 'iss-hijri-calendar' : ''"></mat-datepicker>
620
991
 
621
992
  </mat-form-field>
622
993
  ` }]
623
- }], propDecorators: { disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }] } });
994
+ }], propDecorators: { disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], hijriCalendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "hijriCalendar", required: false }] }], emitHijri: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitHijri", required: false }] }] } });
624
995
 
625
996
  /**
626
997
  * `<iss-ctrl-date-range-picker>` — a start/end date range in one field.
@@ -642,6 +1013,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
642
1013
  * | `minDate` | `Date \| null` | `null` | Earliest selectable date. |
643
1014
  * | `maxDate` | `Date \| null` | `null` | Latest selectable date. |
644
1015
  * | `disabledDays` | `number[]` | `[]` | Week days to block, `0` = Sunday … `6` = Saturday. |
1016
+ * | `hijriCalendar` | `boolean` | `false` | Shows an Umm al-Qura Hijri calendar; the value stays Gregorian. |
1017
+ * | `emitHijri` | `boolean` | `false` | Emits both endpoints as Hijri dates. Implies `hijriCalendar`. |
1018
+ *
1019
+ * ### Hijri dates
1020
+ * `hijriCalendar` only changes what the user sees; the emitted range stays Gregorian until
1021
+ * `emitHijri` is on as well, at which point both endpoints carry Hijri dates. `duration` is
1022
+ * a count of days either way, and `minDate`/`maxDate` stay Gregorian.
645
1023
  *
646
1024
  * ### Inherited from {@link ControlBase}
647
1025
  * `formControlName` · `readonly` · `className` · `(onChange)`
@@ -664,6 +1042,14 @@ class DateRangePickerControl extends ControlBase {
664
1042
  * Latest selectable date.
665
1043
  */
666
1044
  maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
1045
+ /**
1046
+ * Renders the calendar as an Umm al-Qura Hijri calendar, leaving the emitted range Gregorian.
1047
+ */
1048
+ hijriCalendar = input(false, ...(ngDevMode ? [{ debugName: "hijriCalendar" }] : /* istanbul ignore next */ []));
1049
+ /**
1050
+ * Emits both endpoints as Hijri dates. Implies {@link hijriCalendar}.
1051
+ */
1052
+ emitHijri = input(false, ...(ngDevMode ? [{ debugName: "emitHijri" }] : /* istanbul ignore next */ []));
667
1053
  /**
668
1054
  * Emits the selected range as an object, or `null` while the range is incomplete.
669
1055
  */
@@ -676,6 +1062,16 @@ class DateRangePickerControl extends ControlBase {
676
1062
  end: new FormControl(null),
677
1063
  });
678
1064
  #sub = new Subscription();
1065
+ #dateAdapter = inject(DateAdapter);
1066
+ // the adapter is provided by this component, so switching it here leaves every other
1067
+ // picker on the form on its own calendar
1068
+ #hijriEffectRef = effect(() => this.#dateAdapter.setHijri(this.isHijri()), ...(ngDevMode ? [{ debugName: "#hijriEffectRef" }] : /* istanbul ignore next */ []));
1069
+ /**
1070
+ * Whether this picker is currently showing the Hijri calendar.
1071
+ */
1072
+ isHijri() {
1073
+ return this.hijriCalendar() || this.emitHijri();
1074
+ }
679
1075
  ngOnInit() {
680
1076
  this.#sub.add(this.range.valueChanges.subscribe((values) => {
681
1077
  if (this.readonly()) {
@@ -714,13 +1110,6 @@ class DateRangePickerControl extends ControlBase {
714
1110
  this.propagateValue(null);
715
1111
  this.emitOnChangeEvent(null);
716
1112
  }
717
- openPicker(picker) {
718
- if (this.readonly()) {
719
- return;
720
- }
721
- picker.open();
722
- this.markAsTouched();
723
- }
724
1113
  writeValue(value) {
725
1114
  if (typeof value !== "string" || !value) {
726
1115
  this.ctrl.setValue(null, { emitEvent: false });
@@ -729,14 +1118,23 @@ class DateRangePickerControl extends ControlBase {
729
1118
  }
730
1119
  const valArr = value.split(",");
731
1120
  const valObj = {
732
- start: valArr[0] ?? null,
733
- end: valArr[1] ?? null,
1121
+ // a Hijri endpoint read back from the form is `1447-03-15`, which is not the day
1122
+ // the adapter would deserialize it as
1123
+ start: this.#readEndpoint(valArr[0]),
1124
+ end: this.#readEndpoint(valArr[1]),
734
1125
  };
735
1126
  this.range.patchValue(valObj, { emitEvent: false });
736
1127
  }
737
1128
  ngOnDestroy() {
738
1129
  this.#sub.unsubscribe();
739
1130
  }
1131
+ openPicker(picker) {
1132
+ if (this.readonly()) {
1133
+ return;
1134
+ }
1135
+ picker.open();
1136
+ this.markAsTouched();
1137
+ }
740
1138
  calendarDaysFilter = (d) => {
741
1139
  const day = (d || new Date()).getDay();
742
1140
  return !(this.disabledDays().includes(day));
@@ -746,7 +1144,16 @@ class DateRangePickerControl extends ControlBase {
746
1144
  const end = new Date(endDate).getTime();
747
1145
  return Math.ceil((end - start) / (1000 * 60 * 60 * 24) + 1);
748
1146
  }
1147
+ #readEndpoint(value) {
1148
+ if (!value) {
1149
+ return null;
1150
+ }
1151
+ return this.emitHijri() ? parseHijriDate(value) : value;
1152
+ }
749
1153
  #getFormatedDate(date) {
1154
+ if (this.emitHijri()) {
1155
+ return `${formatHijriDate(date)}${format(date, "'T'HH:mm:ss")}`;
1156
+ }
750
1157
  return format(date, "yyyy-MM-dd'T'HH:mm:ss");
751
1158
  }
752
1159
  #getFormatedEndDate(endDate) {
@@ -766,15 +1173,16 @@ class DateRangePickerControl extends ControlBase {
766
1173
  };
767
1174
  }
768
1175
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DateRangePickerControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
769
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DateRangePickerControl, isStandalone: true, selector: "iss-ctrl-date-range-picker", inputs: { disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDateRangeObjectChange: "onDateRangeObjectChange" }, providers: [
770
- provideDateFnsAdapter(DATE_FORMAT_ADAPTER),
771
- { provide: MAT_DATE_LOCALE, useValue: enGB },
1176
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DateRangePickerControl, isStandalone: true, selector: "iss-ctrl-date-range-picker", inputs: { disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, hijriCalendar: { classPropertyName: "hijriCalendar", publicName: "hijriCalendar", isSignal: true, isRequired: false, transformFunction: null }, emitHijri: { classPropertyName: "emitHijri", publicName: "emitHijri", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDateRangeObjectChange: "onDateRangeObjectChange" }, providers: [
1177
+ provideIssDateAdapter(),
772
1178
  { provide: NG_VALUE_ACCESSOR, useExisting: DateRangePickerControl, multi: true },
773
1179
  ], usesInheritance: true, ngImport: i0, template: `
774
1180
  <mat-form-field floatLabel="auto" class="">
775
1181
 
776
1182
  <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
777
- <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
1183
+ <mat-label class="fs-16 fc-black">
1184
+ <ng-content select="label"></ng-content>
1185
+ </mat-label>
778
1186
  <mat-date-range-input
779
1187
  [formGroup]="range"
780
1188
  [rangePicker]="picker"
@@ -801,7 +1209,7 @@ class DateRangePickerControl extends ControlBase {
801
1209
  <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
802
1210
  }
803
1211
  <mat-datepicker-toggle matSuffix [for]="picker" [disabled]="readonly()"></mat-datepicker-toggle>
804
- <mat-date-range-picker #picker></mat-date-range-picker>
1212
+ <mat-date-range-picker #picker [panelClass]="isHijri() ? 'iss-hijri-calendar' : ''"></mat-date-range-picker>
805
1213
 
806
1214
  </mat-form-field>
807
1215
  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
@@ -817,15 +1225,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
817
1225
  MatIcon,
818
1226
  ],
819
1227
  providers: [
820
- provideDateFnsAdapter(DATE_FORMAT_ADAPTER),
821
- { provide: MAT_DATE_LOCALE, useValue: enGB },
1228
+ provideIssDateAdapter(),
822
1229
  { provide: NG_VALUE_ACCESSOR, useExisting: DateRangePickerControl, multi: true },
823
1230
  ],
824
1231
  template: `
825
1232
  <mat-form-field floatLabel="auto" class="">
826
1233
 
827
1234
  <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
828
- <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
1235
+ <mat-label class="fs-16 fc-black">
1236
+ <ng-content select="label"></ng-content>
1237
+ </mat-label>
829
1238
  <mat-date-range-input
830
1239
  [formGroup]="range"
831
1240
  [rangePicker]="picker"
@@ -852,12 +1261,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
852
1261
  <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
853
1262
  }
854
1263
  <mat-datepicker-toggle matSuffix [for]="picker" [disabled]="readonly()"></mat-datepicker-toggle>
855
- <mat-date-range-picker #picker></mat-date-range-picker>
1264
+ <mat-date-range-picker #picker [panelClass]="isHijri() ? 'iss-hijri-calendar' : ''"></mat-date-range-picker>
856
1265
 
857
1266
  </mat-form-field>
858
1267
  `
859
1268
  }]
860
- }], propDecorators: { disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], onDateRangeObjectChange: [{ type: i0.Output, args: ["onDateRangeObjectChange"] }] } });
1269
+ }], propDecorators: { disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], hijriCalendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "hijriCalendar", required: false }] }], emitHijri: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitHijri", required: false }] }], onDateRangeObjectChange: [{ type: i0.Output, args: ["onDateRangeObjectChange"] }] } });
861
1270
 
862
1271
  /**
863
1272
  * `<iss-ctrl-time-picker>` — time of day, picked from a list generated at a fixed interval.
@@ -943,7 +1352,9 @@ class TimePickerControl extends ControlBase {
943
1352
  ], usesInheritance: true, ngImport: i0, template: `
944
1353
  <mat-form-field floatLabel="auto" class="">
945
1354
  <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
946
- <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
1355
+ <mat-label class="fs-16 fc-black">
1356
+ <ng-content select="label"></ng-content>
1357
+ </mat-label>
947
1358
  <input
948
1359
  matInput
949
1360
  [formControl]="ctrl"
@@ -978,7 +1389,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
978
1389
  template: `
979
1390
  <mat-form-field floatLabel="auto" class="">
980
1391
  <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
981
- <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
1392
+ <mat-label class="fs-16 fc-black">
1393
+ <ng-content select="label"></ng-content>
1394
+ </mat-label>
982
1395
  <input
983
1396
  matInput
984
1397
  [formControl]="ctrl"
@@ -1020,6 +1433,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
1020
1433
  * | `minTime` | `string \| null` | `null` | Earliest selectable time, `HH:mm`. |
1021
1434
  * | `maxTime` | `string \| null` | `null` | Latest selectable time, `HH:mm`. |
1022
1435
  * | `disabledDays` | `number[]` | `[]` | Week days to block, `0` = Sunday … `6` = Saturday. |
1436
+ * | `hijriCalendar` | `boolean` | `false` | Shows an Umm al-Qura Hijri calendar; the value stays Gregorian. |
1437
+ * | `emitHijri` | `boolean` | `false` | Emits the date half as a Hijri date. Implies `hijriCalendar`. |
1438
+ *
1439
+ * ### Hijri dates
1440
+ * Both flags are handed straight to the inner date picker; the time half is untouched, so a
1441
+ * Hijri value reads `1447-03-15T09:30:00`.
1023
1442
  *
1024
1443
  * ### Inherited from {@link ControlBase}
1025
1444
  * `formControlName` · `readonly` · `className` · `(onChange)`
@@ -1051,6 +1470,14 @@ class DatetimePickerControl extends ControlBase {
1051
1470
  * Latest selectable time of day, as `HH:mm`.
1052
1471
  */
1053
1472
  maxTime = input(null, ...(ngDevMode ? [{ debugName: "maxTime" }] : /* istanbul ignore next */ []));
1473
+ /**
1474
+ * Renders the calendar as an Umm al-Qura Hijri calendar, leaving the emitted date Gregorian.
1475
+ */
1476
+ hijriCalendar = input(false, ...(ngDevMode ? [{ debugName: "hijriCalendar" }] : /* istanbul ignore next */ []));
1477
+ /**
1478
+ * Emits the date half of the value as a Hijri date. Implies {@link hijriCalendar}.
1479
+ */
1480
+ emitHijri = input(false, ...(ngDevMode ? [{ debugName: "emitHijri" }] : /* istanbul ignore next */ []));
1054
1481
  setDisabledState(isDisabled) {
1055
1482
  super.setDisabledState(isDisabled);
1056
1483
  // the template binds `datetimeForm`, disabling ctrl alone leaves the pickers live
@@ -1111,12 +1538,22 @@ class DatetimePickerControl extends ControlBase {
1111
1538
  return undefined;
1112
1539
  }
1113
1540
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatetimePickerControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
1114
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: DatetimePickerControl, isStandalone: true, selector: "iss-ctrl-datetime-picker", inputs: { disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
1541
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: DatetimePickerControl, isStandalone: true, selector: "iss-ctrl-datetime-picker", inputs: { disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, hijriCalendar: { classPropertyName: "hijriCalendar", publicName: "hijriCalendar", isSignal: true, isRequired: false, transformFunction: null }, emitHijri: { classPropertyName: "emitHijri", publicName: "emitHijri", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
1115
1542
  { provide: NG_VALUE_ACCESSOR, useExisting: DatetimePickerControl, multi: true },
1116
1543
  { provide: NG_VALIDATORS, useExisting: DatetimePickerControl, multi: true },
1117
1544
  ], usesInheritance: true, ngImport: i0, template: `
1118
1545
  <form [formGroup]="datetimeForm" class="d-flex flex-row gap-1">
1119
- <iss-ctrl-date-picker (focusout)="markAsTouched()" [disabledDays]="disabledDays()" [maxDate]="maxDate()" [minDate]="minDate()" [readonly]="readonly()" formControlName="date" (onChange)="emit()">
1546
+ <iss-ctrl-date-picker
1547
+ (focusout)="markAsTouched()"
1548
+ [disabledDays]="disabledDays()"
1549
+ [maxDate]="maxDate()"
1550
+ [minDate]="minDate()"
1551
+ [readonly]="readonly()"
1552
+ [hijriCalendar]="hijriCalendar()"
1553
+ [emitHijri]="emitHijri()"
1554
+ formControlName="date"
1555
+ (onChange)="emit()"
1556
+ >
1120
1557
  <!-- Re-projected with ngProjectAs so it still matches the date picker's own select="label";
1121
1558
  wrapping it in a second <label> instead would hide an empty label from the :empty rule in upgrade.scss. -->
1122
1559
  <ng-content select="label" ngProjectAs="label"></ng-content>
@@ -1130,7 +1567,7 @@ class DatetimePickerControl extends ControlBase {
1130
1567
  (onChange)="emit()"
1131
1568
  />
1132
1569
  </form>
1133
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DatePickerControl, selector: "iss-ctrl-date-picker", inputs: ["disabledDays", "minDate", "maxDate"] }, { kind: "component", type: TimePickerControl, selector: "iss-ctrl-time-picker", inputs: ["interval", "minTime", "maxTime"] }] });
1570
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DatePickerControl, selector: "iss-ctrl-date-picker", inputs: ["disabledDays", "minDate", "maxDate", "hijriCalendar", "emitHijri"] }, { kind: "component", type: TimePickerControl, selector: "iss-ctrl-time-picker", inputs: ["interval", "minTime", "maxTime"] }] });
1134
1571
  }
1135
1572
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatetimePickerControl, decorators: [{
1136
1573
  type: Component,
@@ -1151,7 +1588,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
1151
1588
  ],
1152
1589
  template: `
1153
1590
  <form [formGroup]="datetimeForm" class="d-flex flex-row gap-1">
1154
- <iss-ctrl-date-picker (focusout)="markAsTouched()" [disabledDays]="disabledDays()" [maxDate]="maxDate()" [minDate]="minDate()" [readonly]="readonly()" formControlName="date" (onChange)="emit()">
1591
+ <iss-ctrl-date-picker
1592
+ (focusout)="markAsTouched()"
1593
+ [disabledDays]="disabledDays()"
1594
+ [maxDate]="maxDate()"
1595
+ [minDate]="minDate()"
1596
+ [readonly]="readonly()"
1597
+ [hijriCalendar]="hijriCalendar()"
1598
+ [emitHijri]="emitHijri()"
1599
+ formControlName="date"
1600
+ (onChange)="emit()"
1601
+ >
1155
1602
  <!-- Re-projected with ngProjectAs so it still matches the date picker's own select="label";
1156
1603
  wrapping it in a second <label> instead would hide an empty label from the :empty rule in upgrade.scss. -->
1157
1604
  <ng-content select="label" ngProjectAs="label"></ng-content>
@@ -1167,7 +1614,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
1167
1614
  </form>
1168
1615
  `
1169
1616
  }]
1170
- }], propDecorators: { disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }] } });
1617
+ }], propDecorators: { disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }], hijriCalendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "hijriCalendar", required: false }] }], emitHijri: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitHijri", required: false }] }] } });
1171
1618
 
1172
1619
  class HintsComponent {
1173
1620
  hints = input([], ...(ngDevMode ? [{ debugName: "hints" }] : /* istanbul ignore next */ []));
@@ -1576,7 +2023,9 @@ class InputControl extends ControlBase {
1576
2023
  ], usesInheritance: true, ngImport: i0, template: `
1577
2024
  <mat-form-field floatLabel="auto" class="">
1578
2025
  <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
1579
- <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
2026
+ <mat-label class="fs-16 fc-black">
2027
+ <ng-content select="label"></ng-content>
2028
+ </mat-label>
1580
2029
  <ng-content select="[issPrefix]"></ng-content>
1581
2030
  <div (click)="emitPrefixClick()" class="cursor-pointer">
1582
2031
  @if (prefixText()) {
@@ -1632,7 +2081,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
1632
2081
  template: `
1633
2082
  <mat-form-field floatLabel="auto" class="">
1634
2083
  <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
1635
- <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
2084
+ <mat-label class="fs-16 fc-black">
2085
+ <ng-content select="label"></ng-content>
2086
+ </mat-label>
1636
2087
  <ng-content select="[issPrefix]"></ng-content>
1637
2088
  <div (click)="emitPrefixClick()" class="cursor-pointer">
1638
2089
  @if (prefixText()) {
@@ -3966,7 +4417,9 @@ class MobileControl extends ControlBase {
3966
4417
  ], usesInheritance: true, ngImport: i0, template: `
3967
4418
  <mat-form-field floatLabel="auto" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
3968
4419
  <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
3969
- <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
4420
+ <mat-label class="fs-16 fc-black">
4421
+ <ng-content select="label"></ng-content>
4422
+ </mat-label>
3970
4423
  <div class="d-inline-flex align-items-center gap-1 country-flag" matPrefix (click)="toggleCountryCodeMenu()">
3971
4424
  <img
3972
4425
  ngSrc="./flags/{{selectedCountry().code.toLowerCase()}}.svg"
@@ -4042,7 +4495,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
4042
4495
  ], template: `
4043
4496
  <mat-form-field floatLabel="auto" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
4044
4497
  <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
4045
- <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
4498
+ <mat-label class="fs-16 fc-black">
4499
+ <ng-content select="label"></ng-content>
4500
+ </mat-label>
4046
4501
  <div class="d-inline-flex align-items-center gap-1 country-flag" matPrefix (click)="toggleCountryCodeMenu()">
4047
4502
  <img
4048
4503
  ngSrc="./flags/{{selectedCountry().code.toLowerCase()}}.svg"
@@ -4860,7 +5315,9 @@ class SelectControl extends ControlBase {
4860
5315
  ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true, isSignal: true }, { propertyName: "cardViewerTemplate", first: true, predicate: ["cardViewerTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
4861
5316
  <mat-form-field floatLabel="auto" class="">
4862
5317
  <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
4863
- <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
5318
+ <mat-label class="fs-16 fc-black">
5319
+ <ng-content select="label"></ng-content>
5320
+ </mat-label>
4864
5321
  <input [formControl]="ctrl" [matAutocomplete]="auto" [matChipInputFor]="chipGrid" [placeholder]="placeholder()" [readonly]="readonly()" (blur)="markAsTouched()" class="m-0" matInput/>
4865
5322
  @if (!disabled()) {
4866
5323
  @if (selectedOptions().size) {
@@ -4938,7 +5395,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
4938
5395
  ], template: `
4939
5396
  <mat-form-field floatLabel="auto" class="">
4940
5397
  <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
4941
- <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
5398
+ <mat-label class="fs-16 fc-black">
5399
+ <ng-content select="label"></ng-content>
5400
+ </mat-label>
4942
5401
  <input [formControl]="ctrl" [matAutocomplete]="auto" [matChipInputFor]="chipGrid" [placeholder]="placeholder()" [readonly]="readonly()" (blur)="markAsTouched()" class="m-0" matInput/>
4943
5402
  @if (!disabled()) {
4944
5403
  @if (selectedOptions().size) {
@@ -5089,7 +5548,9 @@ class TextareaControl extends ControlBase {
5089
5548
  ], usesInheritance: true, ngImport: i0, template: `
5090
5549
  <mat-form-field floatLabel="auto" class="custom-textarea">
5091
5550
  <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
5092
- <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
5551
+ <mat-label class="fs-16 fc-black">
5552
+ <ng-content select="label"></ng-content>
5553
+ </mat-label>
5093
5554
  <textarea
5094
5555
  matInput
5095
5556
  [placeholder]="placeholder()"
@@ -5125,7 +5586,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
5125
5586
  template: `
5126
5587
  <mat-form-field floatLabel="auto" class="custom-textarea">
5127
5588
  <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
5128
- <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
5589
+ <mat-label class="fs-16 fc-black">
5590
+ <ng-content select="label"></ng-content>
5591
+ </mat-label>
5129
5592
  <textarea
5130
5593
  matInput
5131
5594
  [placeholder]="placeholder()"
@@ -5299,7 +5762,7 @@ class FieldAsyncValidation {
5299
5762
  * ### Keys by area
5300
5763
  * - **Common:** `type` · `disabled` · `readonly` · `placeholder` · `suffix` · `hideLabel` · `multiple`
5301
5764
  * - **Bounds:** `min` · `max` · `minLength` · `maxLength`
5302
- * - **Dates:** `minDate` · `maxDate` · `dateFilter`
5765
+ * - **Dates:** `minDate` · `maxDate` · `dateFilter` · `hijriCalendar` · `emitHijri`
5303
5766
  * - **Attachments:** `allowedFileSize` · `allowedFileTypes` · `minFilesCount` · `maxFilesCount` · `templateId` · `templateUrl`
5304
5767
  * - **Users:** `minUsersCount` · `maxUsersCount`
5305
5768
  * - **Table:** `showInTableColumns` · `tableWithFilter` · `tableWithSort` · `tableWithPagination`
@@ -5366,6 +5829,18 @@ class FieldConfig {
5366
5829
  * Restricts the calendar to working days. Source: `config.acceptWorkDaysOnly`.
5367
5830
  */
5368
5831
  dateFilter = signal(undefined, ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
5832
+ /**
5833
+ * Renders the calendar as an Umm al-Qura Hijri calendar. The emitted value stays Gregorian
5834
+ * unless {@link FieldConfig.emitHijri} is also on. Source: `config.hijriCalendar`, also
5835
+ * accepted as `config.HijriCalendar`.
5836
+ */
5837
+ hijriCalendar = signal(undefined, ...(ngDevMode ? [{ debugName: "hijriCalendar" }] : /* istanbul ignore next */ []));
5838
+ /**
5839
+ * Emits the picked date as a Hijri date instead of a Gregorian one — the same day emitted
5840
+ * as `1447-03-16` rather than `2025-09-08`. Implies {@link FieldConfig.hijriCalendar}: a
5841
+ * Hijri value is always picked from a Hijri calendar.
5842
+ */
5843
+ emitHijri = signal(undefined, ...(ngDevMode ? [{ debugName: "emitHijri" }] : /* istanbul ignore next */ []));
5369
5844
  /**
5370
5845
  * Id of a downloadable template offered next to an attachment field.
5371
5846
  */
@@ -5428,6 +5903,8 @@ class FieldConfig {
5428
5903
  this.minDate.set(config?.minDate);
5429
5904
  this.maxDate.set(config?.maxDate);
5430
5905
  this.dateFilter.set(config?.acceptWorkDaysOnly);
5906
+ this.hijriCalendar.set(config?.hijriCalendar ?? config?.HijriCalendar);
5907
+ this.emitHijri.set(config?.emitHijri);
5431
5908
  this.minLength.set(config?.minLength);
5432
5909
  this.maxLength.set(config?.maxLength);
5433
5910
  this.allowedFileSize.set(config?.allowedSize);
@@ -5874,22 +6351,22 @@ const COMPONENTS = {
5874
6351
  datetime: () => Promise.resolve().then(function () { return datetimePicker_field; }).then((c) => c.DatetimePickerField),
5875
6352
  date_range: () => Promise.resolve().then(function () { return dateRangePicker_field; }).then((c) => c.DateRangePickerField),
5876
6353
  attachment: () => Promise.resolve().then(function () { return filePicker_field; }).then((c) => c.FilePickerField),
5877
- userPicker: () => import('./iss-ctrl-user-picker.field-8Jb1325c.mjs').then((c) => c.UserPickerField),
6354
+ userPicker: () => import('./iss-ctrl-user-picker.field-CFK871y8.mjs').then((c) => c.UserPickerField),
5878
6355
  vehicle_plate: () => Promise.resolve().then(function () { return plate_field; }).then((c) => c.PlateField),
5879
- enrichment: () => import('./iss-ctrl-note.field-C9cVaAz0.mjs').then((c) => c.NoteField),
6356
+ enrichment: () => import('./iss-ctrl-note.field-DIU49W4s.mjs').then((c) => c.NoteField),
5880
6357
  mobile: () => Promise.resolve().then(function () { return mobile_field; }).then((c) => c.MobileField),
5881
- table: () => import('./iss-ctrl-table.field-BP-HMKO3.mjs').then((c) => c.TableField),
6358
+ table: () => import('./iss-ctrl-table.field-Ca6d7LvU.mjs').then((c) => c.TableField),
5882
6359
  chips: () => Promise.resolve().then(function () { return chips_field; }).then((c) => c.ChipsField),
5883
6360
  switch: () => Promise.resolve().then(function () { return slideToggle_field; }).then((c) => c.SlideToggleField),
5884
6361
  };
5885
6362
 
5886
6363
  const SERVICES = {
5887
- setValue: () => import('./iss-ctrl-set-value-event-CrpzRR6X.mjs').then((s) => s.SetValueEvent),
6364
+ setValue: () => import('./iss-ctrl-set-value-event-BJGXPwPV.mjs').then((s) => s.SetValueEvent),
5888
6365
  show: () => import('./iss-ctrl-show-event-BcRCwAfo.mjs').then((s) => s.ShowEvent),
5889
- load: () => import('./iss-ctrl-load-value-event-CDAKsE_O.mjs').then((s) => s.LoadValueEvent),
5890
- loadOptions: () => import('./iss-ctrl-load-options-event-ClQPHNBO.mjs').then((s) => s.LoadOptionsEvent),
5891
- triggerBasedOnJsonValue: () => import('./iss-ctrl-trigger-based-on-json-value-DS4TR38v.mjs').then((s) => s.TriggerBasedOnJsonValue),
5892
- replaceApiKeyDefaultImpl: () => import('./iss-ctrl-replace-api-keys-CvhCKvNB.mjs').then((s) => s.ReplaceApiKeys),
6366
+ load: () => import('./iss-ctrl-load-value-event-a_CrlH07.mjs').then((s) => s.LoadValueEvent),
6367
+ loadOptions: () => import('./iss-ctrl-load-options-event-D4gOR-3h.mjs').then((s) => s.LoadOptionsEvent),
6368
+ triggerBasedOnJsonValue: () => import('./iss-ctrl-trigger-based-on-json-value-Jp6lQkIa.mjs').then((s) => s.TriggerBasedOnJsonValue),
6369
+ replaceApiKeyDefaultImpl: () => import('./iss-ctrl-replace-api-keys-8o7-XCdX.mjs').then((s) => s.ReplaceApiKeys),
5893
6370
  };
5894
6371
 
5895
6372
  // Read-only counterpart of COMPONENTS: the component used to render a field's value
@@ -6256,8 +6733,6 @@ const VALIDATION_MESSAGES = {
6256
6733
  }
6257
6734
  };
6258
6735
 
6259
- const UI_LANGUAGE = new InjectionToken("UI SELECTED LANGUAGE");
6260
-
6261
6736
  class TranslatePipe {
6262
6737
  currentLanguage = inject(UI_LANGUAGE);
6263
6738
  transform(value, locale = "") {
@@ -8248,9 +8723,19 @@ var timePicker_field = /*#__PURE__*/Object.freeze({
8248
8723
  });
8249
8724
 
8250
8725
  class DatePickerViewer extends ViewerBase {
8726
+ // a field picked on the Hijri calendar reads back as a Hijri date, whichever calendar its
8727
+ // stored value is in
8728
+ hijriDate = computed(() => toHijriDisplay(this.field().ctrlValue(), {
8729
+ hijriCalendar: this.field().config?.hijriCalendar(),
8730
+ emitHijri: this.field().config?.emitHijri(),
8731
+ }), ...(ngDevMode ? [{ debugName: "hijriDate" }] : /* istanbul ignore next */ []));
8251
8732
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerViewer, deps: null, target: i0.ɵɵFactoryTarget.Component });
8252
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: DatePickerViewer, isStandalone: true, selector: "iss-viewer-date-picker", usesInheritance: true, ngImport: i0, template: `
8253
- {{ field().ctrlValue() | date: 'dd/MM/yyyy' }}
8733
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DatePickerViewer, isStandalone: true, selector: "iss-viewer-date-picker", usesInheritance: true, ngImport: i0, template: `
8734
+ @if (hijriDate(); as hijri) {
8735
+ {{ hijri }}
8736
+ } @else {
8737
+ {{ field().ctrlValue() | date: 'dd/MM/yyyy' }}
8738
+ }
8254
8739
  `, isInline: true, dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }] });
8255
8740
  }
8256
8741
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerViewer, decorators: [{
@@ -8260,8 +8745,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
8260
8745
  imports: [
8261
8746
  DatePipe
8262
8747
  ],
8263
- template: `
8264
- {{ field().ctrlValue() | date: 'dd/MM/yyyy' }}
8748
+ template: `
8749
+ @if (hijriDate(); as hijri) {
8750
+ {{ hijri }}
8751
+ } @else {
8752
+ {{ field().ctrlValue() | date: 'dd/MM/yyyy' }}
8753
+ }
8265
8754
  `
8266
8755
  }]
8267
8756
  }] });
@@ -8283,6 +8772,8 @@ var datePicker_viewer = /*#__PURE__*/Object.freeze({
8283
8772
  * | `minDate` | `Date` | Earliest selectable date. |
8284
8773
  * | `maxDate` | `Date` | Latest selectable date. |
8285
8774
  * | `readonly` | `boolean` | Shows the value but blocks interaction. |
8775
+ * | `hijriCalendar` | `boolean` | Renders an Umm al-Qura Hijri calendar while the emitted value stays Gregorian. |
8776
+ * | `emitHijri` | `boolean` | Emits the Hijri date instead of the Gregorian one. Implies `hijriCalendar`. |
8286
8777
  *
8287
8778
  * ### Other field members used
8288
8779
  * `label()`
@@ -8297,18 +8788,25 @@ var datePicker_viewer = /*#__PURE__*/Object.freeze({
8297
8788
  */
8298
8789
  class DatePickerField extends FieldBase {
8299
8790
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerField, deps: null, target: i0.ɵɵFactoryTarget.Component });
8300
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DatePickerField, isStandalone: true, selector: "iss-field-date-picker", usesInheritance: true, ngImport: i0, template: `
8301
- @if (field.visible()) {
8302
- @if (field.mode() === "edit") {
8303
- <iss-ctrl-date-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null" [readonly]="field.config.readonly() ?? false">
8304
- <label>{{ field.label() }}</label>
8305
- </iss-ctrl-date-picker>
8306
- <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
8307
- } @else {
8308
- <iss-viewer-date-picker [field]="field"/>
8309
- }
8310
- }
8311
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DatePickerControl, selector: "iss-ctrl-date-picker", inputs: ["disabledDays", "minDate", "maxDate"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: DatePickerViewer, selector: "iss-viewer-date-picker" }], viewProviders: [VIEW_PROVIDER] });
8791
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DatePickerField, isStandalone: true, selector: "iss-field-date-picker", usesInheritance: true, ngImport: i0, template: `
8792
+ @if (field.visible()) {
8793
+ @if (field.mode() === "edit") {
8794
+ <iss-ctrl-date-picker
8795
+ [formControlName]="field.name"
8796
+ [minDate]="field.config.minDate() ?? null"
8797
+ [maxDate]="field.config.maxDate() ?? null"
8798
+ [readonly]="field.config.readonly() ?? false"
8799
+ [hijriCalendar]="field.config.hijriCalendar() ?? false"
8800
+ [emitHijri]="field.config.emitHijri() ?? false"
8801
+ >
8802
+ <label>{{ field.label() }}</label>
8803
+ </iss-ctrl-date-picker>
8804
+ <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
8805
+ } @else {
8806
+ <iss-viewer-date-picker [field]="field"/>
8807
+ }
8808
+ }
8809
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DatePickerControl, selector: "iss-ctrl-date-picker", inputs: ["disabledDays", "minDate", "maxDate", "hijriCalendar", "emitHijri"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: DatePickerViewer, selector: "iss-viewer-date-picker" }], viewProviders: [VIEW_PROVIDER] });
8312
8810
  }
8313
8811
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerField, decorators: [{
8314
8812
  type: Component,
@@ -8321,17 +8819,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
8321
8819
  ValidationMessageComponent,
8322
8820
  DatePickerViewer
8323
8821
  ],
8324
- template: `
8325
- @if (field.visible()) {
8326
- @if (field.mode() === "edit") {
8327
- <iss-ctrl-date-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null" [readonly]="field.config.readonly() ?? false">
8328
- <label>{{ field.label() }}</label>
8329
- </iss-ctrl-date-picker>
8330
- <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
8331
- } @else {
8332
- <iss-viewer-date-picker [field]="field"/>
8333
- }
8334
- }
8822
+ template: `
8823
+ @if (field.visible()) {
8824
+ @if (field.mode() === "edit") {
8825
+ <iss-ctrl-date-picker
8826
+ [formControlName]="field.name"
8827
+ [minDate]="field.config.minDate() ?? null"
8828
+ [maxDate]="field.config.maxDate() ?? null"
8829
+ [readonly]="field.config.readonly() ?? false"
8830
+ [hijriCalendar]="field.config.hijriCalendar() ?? false"
8831
+ [emitHijri]="field.config.emitHijri() ?? false"
8832
+ >
8833
+ <label>{{ field.label() }}</label>
8834
+ </iss-ctrl-date-picker>
8835
+ <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
8836
+ } @else {
8837
+ <iss-viewer-date-picker [field]="field"/>
8838
+ }
8839
+ }
8335
8840
  `
8336
8841
  }]
8337
8842
  }] });
@@ -8343,9 +8848,20 @@ var datePicker_field = /*#__PURE__*/Object.freeze({
8343
8848
 
8344
8849
  class DatePickerTimeViewer extends ViewerBase {
8345
8850
  DATETIME_FORMAT = DATETIME_FORMAT;
8851
+ // a field picked on the Hijri calendar reads back as a Hijri date, whichever calendar its
8852
+ // stored value is in
8853
+ hijriDatetime = computed(() => toHijriDisplay(this.field().ctrlValue(), {
8854
+ hijriCalendar: this.field().config?.hijriCalendar(),
8855
+ emitHijri: this.field().config?.emitHijri(),
8856
+ withTime: true,
8857
+ }), ...(ngDevMode ? [{ debugName: "hijriDatetime" }] : /* istanbul ignore next */ []));
8346
8858
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerTimeViewer, deps: null, target: i0.ɵɵFactoryTarget.Component });
8347
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: DatePickerTimeViewer, isStandalone: true, selector: "iss-viewer-datetime-picker", usesInheritance: true, ngImport: i0, template: `
8348
- {{ field().ctrlValue() | date: DATETIME_FORMAT }}
8859
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DatePickerTimeViewer, isStandalone: true, selector: "iss-viewer-datetime-picker", usesInheritance: true, ngImport: i0, template: `
8860
+ @if (hijriDatetime(); as hijri) {
8861
+ {{ hijri }}
8862
+ } @else {
8863
+ {{ field().ctrlValue() | date: DATETIME_FORMAT }}
8864
+ }
8349
8865
  `, isInline: true, dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }] });
8350
8866
  }
8351
8867
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerTimeViewer, decorators: [{
@@ -8355,8 +8871,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
8355
8871
  imports: [
8356
8872
  DatePipe
8357
8873
  ],
8358
- template: `
8359
- {{ field().ctrlValue() | date: DATETIME_FORMAT }}
8874
+ template: `
8875
+ @if (hijriDatetime(); as hijri) {
8876
+ {{ hijri }}
8877
+ } @else {
8878
+ {{ field().ctrlValue() | date: DATETIME_FORMAT }}
8879
+ }
8360
8880
  `
8361
8881
  }]
8362
8882
  }] });
@@ -8378,6 +8898,8 @@ var datetimePicker_viewer = /*#__PURE__*/Object.freeze({
8378
8898
  * | `minDate` | `Date` | Earliest selectable date. |
8379
8899
  * | `maxDate` | `Date` | Latest selectable date. |
8380
8900
  * | `readonly` | `boolean` | Shows the value but blocks interaction. |
8901
+ * | `hijriCalendar` | `boolean` | Renders an Umm al-Qura Hijri calendar while the emitted value stays Gregorian. |
8902
+ * | `emitHijri` | `boolean` | Emits the Hijri date instead of the Gregorian one. Implies `hijriCalendar`. |
8381
8903
  *
8382
8904
  * ### Other field members used
8383
8905
  * `label()`
@@ -8392,18 +8914,25 @@ var datetimePicker_viewer = /*#__PURE__*/Object.freeze({
8392
8914
  */
8393
8915
  class DatetimePickerField extends FieldBase {
8394
8916
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatetimePickerField, deps: null, target: i0.ɵɵFactoryTarget.Component });
8395
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DatetimePickerField, isStandalone: true, selector: "iss-field-datetime-picker", usesInheritance: true, ngImport: i0, template: `
8396
- @if (field.visible()) {
8397
- @if (field.mode() === "edit") {
8398
- <iss-ctrl-datetime-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null" [readonly]="field.config.readonly() ?? false">
8399
- <label>{{ field.label() }}</label>
8400
- </iss-ctrl-datetime-picker>
8401
- <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
8402
- } @else {
8403
- <iss-viewer-datetime-picker [field]="field"/>
8404
- }
8405
- }
8406
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DatetimePickerControl, selector: "iss-ctrl-datetime-picker", inputs: ["disabledDays", "minDate", "maxDate", "minTime", "maxTime"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: DatePickerTimeViewer, selector: "iss-viewer-datetime-picker" }], viewProviders: [VIEW_PROVIDER] });
8917
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DatetimePickerField, isStandalone: true, selector: "iss-field-datetime-picker", usesInheritance: true, ngImport: i0, template: `
8918
+ @if (field.visible()) {
8919
+ @if (field.mode() === "edit") {
8920
+ <iss-ctrl-datetime-picker
8921
+ [formControlName]="field.name"
8922
+ [minDate]="field.config.minDate() ?? null"
8923
+ [maxDate]="field.config.maxDate() ?? null"
8924
+ [readonly]="field.config.readonly() ?? false"
8925
+ [hijriCalendar]="field.config.hijriCalendar() ?? false"
8926
+ [emitHijri]="field.config.emitHijri() ?? false"
8927
+ >
8928
+ <label>{{ field.label() }}</label>
8929
+ </iss-ctrl-datetime-picker>
8930
+ <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
8931
+ } @else {
8932
+ <iss-viewer-datetime-picker [field]="field"/>
8933
+ }
8934
+ }
8935
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DatetimePickerControl, selector: "iss-ctrl-datetime-picker", inputs: ["disabledDays", "minDate", "maxDate", "minTime", "maxTime", "hijriCalendar", "emitHijri"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: DatePickerTimeViewer, selector: "iss-viewer-datetime-picker" }], viewProviders: [VIEW_PROVIDER] });
8407
8936
  }
8408
8937
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatetimePickerField, decorators: [{
8409
8938
  type: Component,
@@ -8416,17 +8945,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
8416
8945
  ValidationMessageComponent,
8417
8946
  DatePickerTimeViewer,
8418
8947
  ],
8419
- template: `
8420
- @if (field.visible()) {
8421
- @if (field.mode() === "edit") {
8422
- <iss-ctrl-datetime-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null" [readonly]="field.config.readonly() ?? false">
8423
- <label>{{ field.label() }}</label>
8424
- </iss-ctrl-datetime-picker>
8425
- <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
8426
- } @else {
8427
- <iss-viewer-datetime-picker [field]="field"/>
8428
- }
8429
- }
8948
+ template: `
8949
+ @if (field.visible()) {
8950
+ @if (field.mode() === "edit") {
8951
+ <iss-ctrl-datetime-picker
8952
+ [formControlName]="field.name"
8953
+ [minDate]="field.config.minDate() ?? null"
8954
+ [maxDate]="field.config.maxDate() ?? null"
8955
+ [readonly]="field.config.readonly() ?? false"
8956
+ [hijriCalendar]="field.config.hijriCalendar() ?? false"
8957
+ [emitHijri]="field.config.emitHijri() ?? false"
8958
+ >
8959
+ <label>{{ field.label() }}</label>
8960
+ </iss-ctrl-datetime-picker>
8961
+ <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
8962
+ } @else {
8963
+ <iss-viewer-datetime-picker [field]="field"/>
8964
+ }
8965
+ }
8430
8966
  `
8431
8967
  }]
8432
8968
  }] });
@@ -8438,14 +8974,21 @@ var datetimePicker_field = /*#__PURE__*/Object.freeze({
8438
8974
 
8439
8975
  class DateRangePickerViewer extends ViewerBase {
8440
8976
  dateRange = [];
8977
+ // a range picked on the Hijri calendar reads back as Hijri dates, whichever calendar its
8978
+ // stored value is in
8979
+ hijriDates = [];
8441
8980
  ngOnInit() {
8442
8981
  this.dateRange = this.field().ctrlValue().split(",").map((val) => val.trim());
8982
+ this.hijriDates = this.dateRange.map((date) => toHijriDisplay(date, {
8983
+ hijriCalendar: this.field().config?.hijriCalendar(),
8984
+ emitHijri: this.field().config?.emitHijri(),
8985
+ }));
8443
8986
  }
8444
8987
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DateRangePickerViewer, deps: null, target: i0.ɵɵFactoryTarget.Component });
8445
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DateRangePickerViewer, isStandalone: true, selector: "iss-viewer-date-range-picker", usesInheritance: true, ngImport: i0, template: `
8446
- @for (date of dateRange; track date; let last = $last) {
8447
- <span> {{ date | date: 'dd/MM/yyyy' }} {{ last ? '' : '- ' }} </span>
8448
- }
8988
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DateRangePickerViewer, isStandalone: true, selector: "iss-viewer-date-range-picker", usesInheritance: true, ngImport: i0, template: `
8989
+ @for (date of dateRange; track date; let last = $last) {
8990
+ <span> {{ hijriDates[$index] ?? (date | date: 'dd/MM/yyyy') }} {{ last ? '' : '- ' }} </span>
8991
+ }
8449
8992
  `, isInline: true, dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }] });
8450
8993
  }
8451
8994
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DateRangePickerViewer, decorators: [{
@@ -8455,10 +8998,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
8455
8998
  imports: [
8456
8999
  DatePipe
8457
9000
  ],
8458
- template: `
8459
- @for (date of dateRange; track date; let last = $last) {
8460
- <span> {{ date | date: 'dd/MM/yyyy' }} {{ last ? '' : '- ' }} </span>
8461
- }
9001
+ template: `
9002
+ @for (date of dateRange; track date; let last = $last) {
9003
+ <span> {{ hijriDates[$index] ?? (date | date: 'dd/MM/yyyy') }} {{ last ? '' : '- ' }} </span>
9004
+ }
8462
9005
  `
8463
9006
  }]
8464
9007
  }] });
@@ -8480,6 +9023,8 @@ var dateRangePicker_viewer = /*#__PURE__*/Object.freeze({
8480
9023
  * | `minDate` | `Date` | Earliest selectable date. |
8481
9024
  * | `maxDate` | `Date` | Latest selectable date. |
8482
9025
  * | `readonly` | `boolean` | Shows the value but blocks interaction. |
9026
+ * | `hijriCalendar` | `boolean` | Renders an Umm al-Qura Hijri calendar while the emitted value stays Gregorian. |
9027
+ * | `emitHijri` | `boolean` | Emits the Hijri date instead of the Gregorian one. Implies `hijriCalendar`. |
8483
9028
  *
8484
9029
  * ### Other field members used
8485
9030
  * `label()`
@@ -8496,17 +9041,24 @@ var dateRangePicker_viewer = /*#__PURE__*/Object.freeze({
8496
9041
  */
8497
9042
  class DateRangePickerField extends FieldBase {
8498
9043
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DateRangePickerField, deps: null, target: i0.ɵɵFactoryTarget.Component });
8499
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DateRangePickerField, isStandalone: true, selector: "iss-field-date-range-picker", usesInheritance: true, ngImport: i0, template: `
8500
- @if (field.visible()) {
8501
- @if (field.mode() === "edit") {
8502
- <iss-ctrl-date-range-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null" [readonly]="field.config.readonly() ?? false">
8503
- <label>{{ field.label() }}</label>
8504
- </iss-ctrl-date-range-picker>
8505
- } @else {
8506
- <iss-viewer-date-range-picker [field]="field"/>
8507
- }
8508
- }
8509
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DateRangePickerControl, selector: "iss-ctrl-date-range-picker", inputs: ["disabledDays", "minDate", "maxDate"], outputs: ["onDateRangeObjectChange"] }, { kind: "component", type: DateRangePickerViewer, selector: "iss-viewer-date-range-picker" }], viewProviders: [VIEW_PROVIDER] });
9044
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DateRangePickerField, isStandalone: true, selector: "iss-field-date-range-picker", usesInheritance: true, ngImport: i0, template: `
9045
+ @if (field.visible()) {
9046
+ @if (field.mode() === "edit") {
9047
+ <iss-ctrl-date-range-picker
9048
+ [formControlName]="field.name"
9049
+ [minDate]="field.config.minDate() ?? null"
9050
+ [maxDate]="field.config.maxDate() ?? null"
9051
+ [readonly]="field.config.readonly() ?? false"
9052
+ [hijriCalendar]="field.config.hijriCalendar() ?? false"
9053
+ [emitHijri]="field.config.emitHijri() ?? false"
9054
+ >
9055
+ <label>{{ field.label() }}</label>
9056
+ </iss-ctrl-date-range-picker>
9057
+ } @else {
9058
+ <iss-viewer-date-range-picker [field]="field"/>
9059
+ }
9060
+ }
9061
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DateRangePickerControl, selector: "iss-ctrl-date-range-picker", inputs: ["disabledDays", "minDate", "maxDate", "hijriCalendar", "emitHijri"], outputs: ["onDateRangeObjectChange"] }, { kind: "component", type: DateRangePickerViewer, selector: "iss-viewer-date-range-picker" }], viewProviders: [VIEW_PROVIDER] });
8510
9062
  }
8511
9063
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DateRangePickerField, decorators: [{
8512
9064
  type: Component,
@@ -8518,16 +9070,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
8518
9070
  DateRangePickerControl,
8519
9071
  DateRangePickerViewer
8520
9072
  ],
8521
- template: `
8522
- @if (field.visible()) {
8523
- @if (field.mode() === "edit") {
8524
- <iss-ctrl-date-range-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null" [readonly]="field.config.readonly() ?? false">
8525
- <label>{{ field.label() }}</label>
8526
- </iss-ctrl-date-range-picker>
8527
- } @else {
8528
- <iss-viewer-date-range-picker [field]="field"/>
8529
- }
8530
- }
9073
+ template: `
9074
+ @if (field.visible()) {
9075
+ @if (field.mode() === "edit") {
9076
+ <iss-ctrl-date-range-picker
9077
+ [formControlName]="field.name"
9078
+ [minDate]="field.config.minDate() ?? null"
9079
+ [maxDate]="field.config.maxDate() ?? null"
9080
+ [readonly]="field.config.readonly() ?? false"
9081
+ [hijriCalendar]="field.config.hijriCalendar() ?? false"
9082
+ [emitHijri]="field.config.emitHijri() ?? false"
9083
+ >
9084
+ <label>{{ field.label() }}</label>
9085
+ </iss-ctrl-date-range-picker>
9086
+ } @else {
9087
+ <iss-viewer-date-range-picker [field]="field"/>
9088
+ }
9089
+ }
8531
9090
  `
8532
9091
  }]
8533
9092
  }] });
@@ -8851,5 +9410,5 @@ var time_validator = /*#__PURE__*/Object.freeze({
8851
9410
  * Generated bundle index. Do not edit.
8852
9411
  */
8853
9412
 
8854
- export { PlateViewer as $, TimePickerField as A, DatePickerField as B, ControlBase as C, DatePickerControl as D, Employee as E, FieldBase as F, DatetimePickerField as G, HOST as H, IssField as I, DateRangePickerField as J, InputViewer as K, Loader as L, MobileControl as M, TextareaViewer as N, Outlet as O, PLACEHOLDER_REGEX as P, ChipsViewer as Q, RadioControl as R, SelectControl as S, TextareaControl as T, RadioViewer as U, VIEW_PROVIDER as V, SelectViewer as W, MobileViewer as X, CheckboxViewer as Y, ToggleButtonViewer as Z, SlideToggleViewer as _, ValidationMessageComponent as a, AttachmentViewer as a0, TimePickerViewer as a1, DatePickerViewer as a2, DatePickerTimeViewer as a3, DateRangePickerViewer as a4, DEFAULT_COUNTRY as a5, COUNTRIES as a6, DATE_FORMAT_ADAPTER as a7, DATETIME_FORMAT as a8, PLATE_LETTERS as a9, VALIDATION_MESSAGES as aa, COMPONENTS as ab, SERVICES as ac, VALIDATORS as ad, FIELD_DATA as ae, UI_LANGUAGE as af, ATTACHMENT_UPLOAD_URL as ag, ATTACHMENT_UPLOAD_RESPONSE_MAPPER as ah, ATTACHMENT_DOWNLOAD_URL as ai, USER_SEARCH_API as aj, HintsComponent as ak, Droppable as al, ArabicNumberPipe as am, FieldDataInjector as an, PlateLetterPipe as ao, SelectStatusPipe as ap, TranslatePipe as aq, FileHandler as ar, Phone as as, arrayFrom as at, formatFileSize as au, IssValidators as av, FileValidators as aw, TimeValidator as ax, ViewerBase as b, FormEngine as c, CheckboxControl as d, ChipsControl as e, DateRangePickerControl as f, getPropertyByPath as g, DatetimePickerControl as h, FilePickerControl as i, InputControl as j, PlateControl as k, SlideToggleControl as l, TimePickerControl as m, ToggleButtonControl as n, InputField as o, TextareaField as p, ChipsField as q, replacePlaceholders as r, RadioField as s, SelectField as t, MobileField as u, CheckboxField as v, ToggleButtonField as w, SlideToggleField as x, PlateField as y, FilePickerField as z };
8855
- //# sourceMappingURL=iss-ctrl-iss-ctrl-BN9rcLt2.mjs.map
9413
+ export { PlateViewer as $, TimePickerField as A, DatePickerField as B, ControlBase as C, DatePickerControl as D, Employee as E, FieldBase as F, DatetimePickerField as G, HOST as H, IssField as I, DateRangePickerField as J, InputViewer as K, Loader as L, MobileControl as M, TextareaViewer as N, Outlet as O, PLACEHOLDER_REGEX as P, ChipsViewer as Q, RadioControl as R, SelectControl as S, TextareaControl as T, RadioViewer as U, VIEW_PROVIDER as V, SelectViewer as W, MobileViewer as X, CheckboxViewer as Y, ToggleButtonViewer as Z, SlideToggleViewer as _, ValidationMessageComponent as a, AttachmentViewer as a0, TimePickerViewer as a1, DatePickerViewer as a2, DatePickerTimeViewer as a3, DateRangePickerViewer as a4, DEFAULT_COUNTRY as a5, COUNTRIES as a6, DATE_FORMAT_ADAPTER as a7, DATETIME_FORMAT as a8, PLATE_LETTERS as a9, startOfHijriMonth as aA, getHijriDaysInMonth as aB, createHijriDate as aC, formatHijriDate as aD, parseHijriDate as aE, toHijriDisplay as aF, IssValidators as aG, FileValidators as aH, TimeValidator as aI, VALIDATION_MESSAGES as aa, COMPONENTS as ab, SERVICES as ac, VALIDATORS as ad, FIELD_DATA as ae, UI_LANGUAGE as af, ATTACHMENT_UPLOAD_URL as ag, ATTACHMENT_UPLOAD_RESPONSE_MAPPER as ah, ATTACHMENT_DOWNLOAD_URL as ai, USER_SEARCH_API as aj, HintsComponent as ak, Droppable as al, ArabicNumberPipe as am, FieldDataInjector as an, PlateLetterPipe as ao, SelectStatusPipe as ap, TranslatePipe as aq, FileHandler as ar, IssDateAdapter as as, provideIssDateAdapter as at, Phone as au, arrayFrom as av, formatFileSize as aw, HIJRI_LOCALE as ax, HIJRI_MONTH_NAMES as ay, getHijriParts as az, ViewerBase as b, FormEngine as c, CheckboxControl as d, ChipsControl as e, DateRangePickerControl as f, getPropertyByPath as g, DatetimePickerControl as h, FilePickerControl as i, InputControl as j, PlateControl as k, SlideToggleControl as l, TimePickerControl as m, ToggleButtonControl as n, InputField as o, TextareaField as p, ChipsField as q, replacePlaceholders as r, RadioField as s, SelectField as t, MobileField as u, CheckboxField as v, ToggleButtonField as w, SlideToggleField as x, PlateField as y, FilePickerField as z };
9414
+ //# sourceMappingURL=iss-ctrl-iss-ctrl-CDk4_RVA.mjs.map