iss-ctrl 0.0.13 → 0.0.15

package/fesm2022/{iss-ctrl-iss-ctrl-BN9rcLt2.mjs → iss-ctrl-iss-ctrl-BpcynMId.mjs}

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-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';
+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';
 import * as i1$2 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormGroup, FormsModule, Validators, ControlContainer } from '@angular/forms';
 import * as i1 from '@angular/material/checkbox';
@@ -10,14 +10,12 @@ import { MatFormField, MatFormFieldModule, MatHint, MatPrefix, MatError, MatLabe
 import * as i1$1 from '@angular/material/input';
 import { MatInput, MatInputModule, MatLabel as MatLabel$1 } from '@angular/material/input';
 import { DatePipe, NgOptimizedImage, NgClass, NgStyle, NgTemplateOutlet, NgComponentOutlet, AsyncPipe, KeyValuePipe } from '@angular/common';
-import { provideDateFnsAdapter } from '@angular/material-date-fns-adapter';
-import { MAT_DATE_LOCALE, provideNativeDateAdapter } from '@angular/material/core';
+import { NativeDateAdapter, MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS, provideNativeDateAdapter } from '@angular/material/core';
 import * as i2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i3 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
 import { format } from 'date-fns';
-import { enGB } from 'date-fns/locale';
 import { Subscription, BehaviorSubject, merge, of, map, from, tap, debounceTime, first, forkJoin, EMPTY, catchError } from 'rxjs';
 import * as i2$1 from '@angular/material/timepicker';
 import { MatTimepickerModule } from '@angular/material/timepicker';
@@ -81,9 +79,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  *
  * ### Content projection
  * Controls that render a `mat-form-field` project `<label>` into the floating label.
- * An omitted label — or one that interpolates to an empty string — leaves `<mat-label>`
- * empty, and `upgrade.scss` collapses the floating-label space for it. No label markup is
- * removed at runtime, so a label that arrives later simply shows up.
+ * `upgrade.scss` reveals that space only while the projected `<label>` carries text, so an
+ * omitted label — or one that interpolates to an empty string — collapses it. No label markup
+ * is removed at runtime, so a label that arrives later simply shows up.
  *
  * @example
  * ```html
@@ -403,8 +401,10 @@ class ChipsControl extends ControlBase {
             { provide: NG_VALUE_ACCESSOR, useExisting: ChipsControl, multi: true }
         ], usesInheritance: true, ngImport: i0, template: `
     <mat-form-field floatLabel="auto" class="">
-      <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
-      <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-black">
+        <ng-content select="label"></ng-content>
+      </mat-label>
       <input
         matInput
         [placeholder]="placeholder()"
@@ -446,8 +446,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     ],
                     template: `
     <mat-form-field floatLabel="auto" class="">
-      <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
-      <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-black">
+        <ng-content select="label"></ng-content>
+      </mat-label>
       <input
         matInput
         [placeholder]="placeholder()"
@@ -479,7 +481,7 @@ const DATE_FORMAT_ADAPTER = {
     display: {
         dateInput: "dd/MM/yyyy",
         monthYearLabel: "MMMM yyyy",
-        dateA11yLabel: "dd/MM/yyyyTHH:mm",
+        dateA11yLabel: "dd/MM/yyyy",
         monthYearA11yLabel: "MMMM yyyy",
         timeInput: "hh:mm aa",
         timeOptionLabel: "hh:mm aa",
@@ -487,6 +489,343 @@ const DATE_FORMAT_ADAPTER = {
 };
 const DATETIME_FORMAT = "dd/MM/yyyy hh:mm a";
 
+const UI_LANGUAGE = new InjectionToken("UI SELECTED LANGUAGE");
+
+/**
+ * Umm al-Qura Hijri calendar helpers.
+ *
+ * Every function here works on a plain `Date`: a `Date` is an instant, and the Hijri
+ * calendar is only another way of naming that instant. Nothing stores Hijri numbers on the
+ * date itself, so a value converted to Hijri for display or emission is still the same day.
+ *
+ * The conversion is done by `Intl` with the `islamic-umalqura` calendar, which is the
+ * calendar used officially in Saudi Arabia.
+ */
+/** Locale used by the calendar UI when the Hijri calendar is on. */
+const HIJRI_LOCALE = "ar-SA-u-ca-islamic-umalqura";
+/** Latin-digit locale used internally to read the Hijri parts of a date. */
+const HIJRI_PARTS_LOCALE = "en-US-u-ca-islamic-umalqura";
+const MS_PER_DAY = 86_400_000;
+/** 1 Muharram 1445 AH, the anchor the month estimate starts from. */
+const ANCHOR_GREGORIAN = { year: 2023, month: 6, day: 19 };
+const ANCHOR_HIJRI_YEAR = 1445;
+/** Mean length of a Hijri month, used only to get close before the exact walk. */
+const MEAN_HIJRI_MONTH = 29.530588;
+const HIJRI_MONTH_NAMES = {
+    ar: ["محرم", "صفر", "ربيع الأول", "ربيع الآخر", "جمادى الأولى", "جمادى الآخرة", "رجب", "شعبان", "رمضان", "شوال", "ذو القعدة", "ذو الحجة"],
+    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"],
+    enShort: ["Muh", "Saf", "Rab I", "Rab II", "Jum I", "Jum II", "Raj", "Sha", "Ram", "Shaw", "Dhul-Q", "Dhul-H"],
+};
+const partsFormatter = new Intl.DateTimeFormat(HIJRI_PARTS_LOCALE, {
+    day: "numeric",
+    month: "numeric",
+    year: "numeric",
+});
+/**
+ * Reads the Hijri year, month and day a `Date` falls on.
+ */
+function getHijriParts(date) {
+    const parts = partsFormatter.formatToParts(date);
+    const read = (type) => parseInt(parts.find((part) => part.type === type)?.value ?? "0", 10);
+    return { year: read("year"), month: read("month") - 1, day: read("day") };
+}
+/**
+ * The Gregorian `Date` of the first day of the Hijri month `date` falls in, at midday.
+ *
+ * Midday, not midnight, so a daylight-saving shift can never push the result into the
+ * previous day while the month is being walked.
+ */
+function startOfHijriMonth(date) {
+    const start = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 12);
+    start.setDate(start.getDate() - (getHijriParts(start).day - 1));
+    return start;
+}
+/**
+ * Number of days in the Hijri month `date` falls in — 29 or 30, decided by Umm al-Qura.
+ */
+function getHijriDaysInMonth(date) {
+    const start = startOfHijriMonth(date);
+    // +30 days from the first of a 29 or 30 day month always lands inside the next one
+    const insideNextMonth = new Date(start.getTime());
+    insideNextMonth.setDate(insideNextMonth.getDate() + 30);
+    return Math.round((startOfHijriMonth(insideNextMonth).getTime() - start.getTime()) / MS_PER_DAY);
+}
+/**
+ * Builds the `Date` for a Hijri year/month/day. The month is zero based, and a day past the
+ * end of the month is clamped to the last day of that month.
+ */
+function createHijriDate(year, month, day) {
+    const targetYear = year + Math.floor(month / 12);
+    const targetMonth = ((month % 12) + 12) % 12;
+    const monthsFromAnchor = (targetYear - ANCHOR_HIJRI_YEAR) * 12 + targetMonth;
+    const cursor = new Date(ANCHOR_GREGORIAN.year, ANCHOR_GREGORIAN.month, ANCHOR_GREGORIAN.day, 12);
+    cursor.setDate(cursor.getDate() + Math.round(monthsFromAnchor * MEAN_HIJRI_MONTH));
+    let start = startOfHijriMonth(cursor);
+    // the mean-month estimate drifts by a month or so over long spans; step whole months until it matches
+    for (let attempt = 0; attempt < 8; attempt++) {
+        const parts = getHijriParts(start);
+        const monthsOff = (targetYear - parts.year) * 12 + (targetMonth - parts.month);
+        if (monthsOff === 0) {
+            break;
+        }
+        // 29 days plus a nudge in the direction of travel always lands inside the neighbouring month
+        start.setDate(start.getDate() + monthsOff * 29 + Math.sign(monthsOff));
+        start = startOfHijriMonth(start);
+    }
+    const clampedDay = Math.min(Math.max(day, 1), getHijriDaysInMonth(start));
+    start.setDate(start.getDate() + clampedDay - 1);
+    start.setHours(0, 0, 0, 0);
+    return start;
+}
+/**
+ * Formats a date as a Hijri `yyyy-MM-dd` string — the shape the form emits when
+ * `emitHijri` is on.
+ */
+function formatHijriDate(date) {
+    const parts = getHijriParts(date);
+    return `${pad(parts.year, 4)}-${pad(parts.month + 1, 2)}-${pad(parts.day, 2)}`;
+}
+/**
+ * Reads a Hijri date back into a `Date`, accepting both the emitted `yyyy-MM-dd` shape and
+ * the `dd/MM/yyyy` shape shown in the input. Returns `null` for anything else.
+ */
+function parseHijriDate(value) {
+    if (!value) {
+        return null;
+    }
+    // strip the bidi marks Intl adds around Arabic-locale dates
+    const clean = value.replace(/[‎‏]/g, "").trim();
+    const iso = clean.match(/^(\d{3,4})-(\d{1,2})-(\d{1,2})/);
+    if (iso) {
+        return createHijriDate(+iso[1], +iso[2] - 1, +iso[3]);
+    }
+    const slashed = clean.match(/^(\d{1,2})[/-](\d{1,2})[/-](\d{3,4})$/);
+    if (slashed) {
+        return createHijriDate(+slashed[3], +slashed[2] - 1, +slashed[1]);
+    }
+    return null;
+}
+function pad(value, length) {
+    return String(value).padStart(length, "0");
+}
+/**
+ * Renders a stored form value as a Hijri `dd/MM/yyyy` string for the read-only viewers, or
+ * returns `null` when the field is not on the Hijri calendar and the value should be shown
+ * as an ordinary Gregorian date.
+ *
+ * The two Hijri modes store different things, so they are read differently: with `emitHijri`
+ * the value already carries Hijri numbers and only its notation changes, while with
+ * `hijriCalendar` alone the value is Gregorian and has to be converted.
+ */
+function toHijriDisplay(value, options) {
+    if (!value || (!options.hijriCalendar && !options.emitHijri)) {
+        return null;
+    }
+    let datePart;
+    let hours;
+    let minutes;
+    if (options.emitHijri) {
+        const matched = value.match(/^(\d{3,4})-(\d{1,2})-(\d{1,2})(?:[T ](\d{1,2}):(\d{2}))?/);
+        if (!matched) {
+            return null;
+        }
+        datePart = `${pad(+matched[3], 2)}/${pad(+matched[2], 2)}/${pad(+matched[1], 4)}`;
+        hours = +(matched[4] ?? 0);
+        minutes = +(matched[5] ?? 0);
+    }
+    else {
+        const date = new Date(value);
+        if (Number.isNaN(date.getTime())) {
+            return null;
+        }
+        const parts = getHijriParts(date);
+        datePart = `${pad(parts.day, 2)}/${pad(parts.month + 1, 2)}/${pad(parts.year, 4)}`;
+        hours = date.getHours();
+        minutes = date.getMinutes();
+    }
+    if (!options.withTime) {
+        return datePart;
+    }
+    return `${datePart} ${pad(hours % 12 || 12, 2)}:${pad(minutes, 2)} ${hours < 12 ? "AM" : "PM"}`;
+}
+
+/**
+ * The single date adapter behind every `iss-ctrl-*` picker.
+ *
+ * It behaves as a plain Gregorian adapter — `dd/MM/yyyy` in and out — until its locale is
+ * switched to {@link HIJRI_LOCALE}, at which point the whole calendar grid becomes Umm
+ * al-Qura Hijri: the month lengths, the year and month labels and the day numbers all come
+ * from the Hijri calendar.
+ *
+ * The value never changes shape. The adapter always works on a `Date`, so a Hijri calendar
+ * still hands the control an ordinary `Date`, and it stays the control's decision whether to
+ * emit that as a Gregorian or a Hijri string.
+ *
+ * Switch modes through {@link setHijri}, never by assigning `locale` — `setLocale` is what
+ * tells an open calendar to re-render.
+ */
+class IssDateAdapter extends NativeDateAdapter {
+    /** The Gregorian locale to fall back to when the Hijri calendar is turned off. */
+    gregorianLocale = "en-GB";
+    #language = inject(UI_LANGUAGE, { optional: true });
+    /** Whether the adapter is currently presenting the Hijri calendar. */
+    get isHijri() {
+        return typeof this.locale === "string" && this.locale.includes("islamic");
+    }
+    /**
+     * Turns the Hijri calendar on or off. Goes through `setLocale` so that a calendar that is
+     * already open redraws itself.
+     */
+    setHijri(hijri) {
+        const locale = hijri ? HIJRI_LOCALE : this.gregorianLocale;
+        if (this.locale !== locale) {
+            this.setLocale(locale);
+        }
+    }
+    getYear(date) {
+        return this.isHijri ? getHijriParts(date).year : date.getFullYear();
+    }
+    getMonth(date) {
+        return this.isHijri ? getHijriParts(date).month : date.getMonth();
+    }
+    getDate(date) {
+        return this.isHijri ? getHijriParts(date).day : date.getDate();
+    }
+    getMonthNames(style) {
+        if (!this.isHijri) {
+            return super.getMonthNames(style);
+        }
+        if (this.#language === "en") {
+            return style === "long" ? HIJRI_MONTH_NAMES.en : HIJRI_MONTH_NAMES.enShort;
+        }
+        return HIJRI_MONTH_NAMES.ar;
+    }
+    getDateNames() {
+        // a Hijri month never runs past 30 days, but the calendar body indexes this array by
+        // day number, so it must stay as long as the Gregorian one
+        return this.isHijri ? Array.from({ length: 31 }, (_, index) => String(index + 1)) : super.getDateNames();
+    }
+    getDayOfWeekNames(style) {
+        if (!this.isHijri) {
+            return super.getDayOfWeekNames(style);
+        }
+        // the week is the same week in both calendars, so only the language of the names changes
+        const names = new Intl.DateTimeFormat(this.#language === "en" ? "en-GB" : "ar", { weekday: style, timeZone: "utc" });
+        return Array.from({ length: 7 }, (_, index) => names.format(new Date(Date.UTC(2017, 0, index + 1))));
+    }
+    getYearName(date) {
+        return this.isHijri ? String(getHijriParts(date).year) : String(date.getFullYear());
+    }
+    getFirstDayOfWeek() {
+        return this.isHijri ? 0 : super.getFirstDayOfWeek();
+    }
+    getNumDaysInMonth(date) {
+        return this.isHijri ? getHijriDaysInMonth(date) : super.getNumDaysInMonth(date);
+    }
+    createDate(year, month, date) {
+        return this.isHijri ? createHijriDate(year, month, date) : super.createDate(year, month, date);
+    }
+    addCalendarYears(date, years) {
+        return this.addCalendarMonths(date, years * 12);
+    }
+    addCalendarMonths(date, months) {
+        if (!this.isHijri) {
+            return super.addCalendarMonths(date, months);
+        }
+        const parts = getHijriParts(date);
+        return this.#withTimeOf(createHijriDate(parts.year, parts.month + months, parts.day), date);
+    }
+    addCalendarDays(date, days) {
+        if (!this.isHijri) {
+            return super.addCalendarDays(date, days);
+        }
+        // a Hijri day is the same day, so this is plain Gregorian day arithmetic
+        const shifted = new Date(date.getTime());
+        shifted.setDate(shifted.getDate() + days);
+        return shifted;
+    }
+    parse(value, parseFormat) {
+        if (typeof value !== "string") {
+            return super.parse(value, parseFormat);
+        }
+        const clean = value.replace(/[‎‏]/g, "").trim();
+        if (!clean) {
+            return null;
+        }
+        if (this.isHijri) {
+            return parseHijriDate(clean) ?? this.invalid();
+        }
+        const slashed = clean.match(/^(\d{1,2})[/-](\d{1,2})[/-](\d{4})$/);
+        if (slashed) {
+            return new Date(+slashed[3], +slashed[2] - 1, +slashed[1]);
+        }
+        return super.parse(clean, parseFormat);
+    }
+    format(date, displayFormat) {
+        if (!this.isValid(date)) {
+            throw Error("IssDateAdapter: Cannot format invalid date.");
+        }
+        const year = this.getYear(date);
+        const month = this.getMonth(date);
+        const day = this.getDate(date);
+        // NativeDateAdapter formats through Intl in UTC, which shifts the day for anyone west of
+        // Greenwich; formatting the parts we already read keeps the rendered day the picked one.
+        // One pass, so a substituted month name can never be re-read as a token.
+        return (displayFormat ?? "dd/MM/yyyy").replace(/yyyy|MMMM|MMM|MM|dd/g, (token) => {
+            switch (token) {
+                case "yyyy":
+                    return String(year).padStart(4, "0");
+                case "MMMM":
+                    return this.getMonthNames("long")[month];
+                case "MMM":
+                    return this.getMonthNames("short")[month];
+                case "MM":
+                    return String(month + 1).padStart(2, "0");
+                default:
+                    return String(day).padStart(2, "0");
+            }
+        });
+    }
+    deserialize(value) {
+        // `yyyy-MM-dd` is a calendar day, not an instant: NativeDateAdapter reads it as UTC
+        // midnight, which renders as the previous day in any negative-offset zone
+        if (typeof value === "string") {
+            const iso = value.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+            if (iso) {
+                return new Date(+iso[1], +iso[2] - 1, +iso[3]);
+            }
+        }
+        return super.deserialize(value);
+    }
+    toIso8601(date) {
+        return [String(date.getFullYear()).padStart(4, "0"), String(date.getMonth() + 1).padStart(2, "0"), String(date.getDate()).padStart(2, "0")].join("-");
+    }
+    #withTimeOf(date, source) {
+        const result = new Date(date.getTime());
+        result.setHours(source.getHours(), source.getMinutes(), source.getSeconds(), source.getMilliseconds());
+        return result;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IssDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IssDateAdapter });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IssDateAdapter, decorators: [{
+            type: Injectable
+        }] });
+/**
+ * Providers every date-based control needs: the {@link IssDateAdapter} itself, the Gregorian
+ * locale it falls back to, and the `dd/MM/yyyy` formats both of its calendars are rendered in.
+ *
+ * Declared per component, so each picker owns its adapter instance and one field switching to
+ * the Hijri calendar leaves every other field on the form alone.
+ */
+function provideIssDateAdapter() {
+    return [
+        { provide: MAT_DATE_LOCALE, useValue: "en-GB" },
+        { provide: DateAdapter, useClass: IssDateAdapter },
+        { provide: MAT_DATE_FORMATS, useValue: DATE_FORMAT_ADAPTER },
+    ];
+}
+
 /**
  * `<iss-ctrl-date-picker>` — single date selection through a Material calendar.
  *
@@ -506,6 +845,14 @@ const DATETIME_FORMAT = "dd/MM/yyyy hh:mm a";
  * | `minDate` | `Date \| null` | `null` | Earliest selectable date. |
  * | `maxDate` | `Date \| null` | `null` | Latest selectable date. |
  * | `disabledDays` | `number[]` | `[]` | Week days to block, `0` = Sunday … `6` = Saturday. |
+ * | `hijriCalendar` | `boolean` | `false` | Shows an Umm al-Qura Hijri calendar; the value stays Gregorian. |
+ * | `emitHijri` | `boolean` | `false` | Emits the Hijri date instead of the Gregorian one. Implies `hijriCalendar`. |
+ *
+ * ### Hijri dates
+ * `hijriCalendar` only changes what the user sees: the calendar is Hijri, the input reads
+ * `dd/MM/yyyy` in Hijri, and a day shown as `16/03/1447` is still emitted as `2025-09-08`.
+ * Turn on `emitHijri` as well when the form value itself has to be the Hijri date. `minDate` and
+ * `maxDate` stay Gregorian in both cases — they are bounds on a day, not on a notation.
  *
  * ### Inherited from {@link ControlBase}
  * `formControlName` · `readonly` · `className` · `(onChange)`
@@ -525,6 +872,33 @@ class DatePickerControl extends ControlBase {
      * Latest selectable date.
      */
     maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    /**
+     * Renders the calendar as an Umm al-Qura Hijri calendar, leaving the emitted value Gregorian.
+     */
+    hijriCalendar = input(false, ...(ngDevMode ? [{ debugName: "hijriCalendar" }] : /* istanbul ignore next */ []));
+    /**
+     * Emits the picked date as a Hijri `yyyy-MM-dd` string. Implies {@link hijriCalendar}.
+     */
+    emitHijri = input(false, ...(ngDevMode ? [{ debugName: "emitHijri" }] : /* istanbul ignore next */ []));
+    #dateAdapter = inject(DateAdapter);
+    // the adapter is provided by this component, so switching it here leaves every other
+    // picker on the form on its own calendar
+    #hijriEffectRef = effect(() => this.#dateAdapter.setHijri(this.isHijri()), ...(ngDevMode ? [{ debugName: "#hijriEffectRef" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether this picker is currently showing the Hijri calendar.
+     */
+    isHijri() {
+        return this.hijriCalendar() || this.emitHijri();
+    }
+    writeValue(value) {
+        // a Hijri value read back from the form is `1447-03-15`, which is not the day
+        // `new Date("1447-03-15")` would give the calendar
+        if (this.emitHijri() && typeof value === "string") {
+            super.writeValue(parseHijriDate(value));
+            return;
+        }
+        super.writeValue(value);
+    }
     clear(event) {
         if (this.readonly()) {
             return;
@@ -543,7 +917,7 @@ class DatePickerControl extends ControlBase {
             return;
         }
         this.markAsTouched();
-        const selectedDateString = format($event.value, "yyyy-MM-dd");
+        const selectedDateString = this.emitHijri() ? formatHijriDate($event.value) : format($event.value, "yyyy-MM-dd");
         this.propagateValue(selectedDateString);
         this.emitOnChangeEvent(selectedDateString);
     }
@@ -555,16 +929,17 @@ class DatePickerControl extends ControlBase {
         this.markAsTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    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: [
+    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: [
             DatePipe,
-            provideDateFnsAdapter(DATE_FORMAT_ADAPTER),
-            { provide: MAT_DATE_LOCALE, useValue: enGB },
+            provideIssDateAdapter(),
             { provide: NG_VALUE_ACCESSOR, useExisting: DatePickerControl, multi: true },
             { provide: NG_VALIDATORS, useExisting: DatePickerControl, multi: true },
         ], usesInheritance: true, ngImport: i0, template: `
     <mat-form-field floatLabel="auto" class="">
-      <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
-      <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-black">
+        <ng-content select="label"></ng-content>
+      </mat-label>
       <input
         class="cursor-pointer"
         matInput
@@ -582,7 +957,7 @@ class DatePickerControl extends ControlBase {
         <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
       }
       <mat-datepicker-toggle matIconSuffix [for]="picker" [disabled]="readonly()"></mat-datepicker-toggle>
-      <mat-datepicker #picker></mat-datepicker>
+      <mat-datepicker #picker [panelClass]="isHijri() ? 'iss-hijri-calendar' : ''"></mat-datepicker>
 
     </mat-form-field>
   `, 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 +966,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             type: Component,
             args: [{ selector: "iss-ctrl-date-picker", imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, MatIconModule, ReactiveFormsModule], providers: [
                         DatePipe,
-                        provideDateFnsAdapter(DATE_FORMAT_ADAPTER),
-                        { provide: MAT_DATE_LOCALE, useValue: enGB },
+                        provideIssDateAdapter(),
                         { provide: NG_VALUE_ACCESSOR, useExisting: DatePickerControl, multi: true },
                         { provide: NG_VALIDATORS, useExisting: DatePickerControl, multi: true },
                     ], template: `
     <mat-form-field floatLabel="auto" class="">
-      <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
-      <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-black">
+        <ng-content select="label"></ng-content>
+      </mat-label>
       <input
         class="cursor-pointer"
         matInput
@@ -616,11 +992,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
       }
       <mat-datepicker-toggle matIconSuffix [for]="picker" [disabled]="readonly()"></mat-datepicker-toggle>
-      <mat-datepicker #picker></mat-datepicker>
+      <mat-datepicker #picker [panelClass]="isHijri() ? 'iss-hijri-calendar' : ''"></mat-datepicker>
 
     </mat-form-field>
   ` }]
-        }], 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 }] }] } });
+        }], 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 }] }] } });
 
 /**
  * `<iss-ctrl-date-range-picker>` — a start/end date range in one field.
@@ -642,6 +1018,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * | `minDate` | `Date \| null` | `null` | Earliest selectable date. |
  * | `maxDate` | `Date \| null` | `null` | Latest selectable date. |
  * | `disabledDays` | `number[]` | `[]` | Week days to block, `0` = Sunday … `6` = Saturday. |
+ * | `hijriCalendar` | `boolean` | `false` | Shows an Umm al-Qura Hijri calendar; the value stays Gregorian. |
+ * | `emitHijri` | `boolean` | `false` | Emits both endpoints as Hijri dates. Implies `hijriCalendar`. |
+ *
+ * ### Hijri dates
+ * `hijriCalendar` only changes what the user sees; the emitted range stays Gregorian until
+ * `emitHijri` is on as well, at which point both endpoints carry Hijri dates. `duration` is
+ * a count of days either way, and `minDate`/`maxDate` stay Gregorian.
  *
  * ### Inherited from {@link ControlBase}
  * `formControlName` · `readonly` · `className` · `(onChange)`
@@ -664,6 +1047,14 @@ class DateRangePickerControl extends ControlBase {
      * Latest selectable date.
      */
     maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    /**
+     * Renders the calendar as an Umm al-Qura Hijri calendar, leaving the emitted range Gregorian.
+     */
+    hijriCalendar = input(false, ...(ngDevMode ? [{ debugName: "hijriCalendar" }] : /* istanbul ignore next */ []));
+    /**
+     * Emits both endpoints as Hijri dates. Implies {@link hijriCalendar}.
+     */
+    emitHijri = input(false, ...(ngDevMode ? [{ debugName: "emitHijri" }] : /* istanbul ignore next */ []));
     /**
      * Emits the selected range as an object, or `null` while the range is incomplete.
      */
@@ -676,6 +1067,16 @@ class DateRangePickerControl extends ControlBase {
         end: new FormControl(null),
     });
     #sub = new Subscription();
+    #dateAdapter = inject(DateAdapter);
+    // the adapter is provided by this component, so switching it here leaves every other
+    // picker on the form on its own calendar
+    #hijriEffectRef = effect(() => this.#dateAdapter.setHijri(this.isHijri()), ...(ngDevMode ? [{ debugName: "#hijriEffectRef" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether this picker is currently showing the Hijri calendar.
+     */
+    isHijri() {
+        return this.hijriCalendar() || this.emitHijri();
+    }
     ngOnInit() {
         this.#sub.add(this.range.valueChanges.subscribe((values) => {
             if (this.readonly()) {
@@ -714,13 +1115,6 @@ class DateRangePickerControl extends ControlBase {
         this.propagateValue(null);
         this.emitOnChangeEvent(null);
     }
-    openPicker(picker) {
-        if (this.readonly()) {
-            return;
-        }
-        picker.open();
-        this.markAsTouched();
-    }
     writeValue(value) {
         if (typeof value !== "string" || !value) {
             this.ctrl.setValue(null, { emitEvent: false });
@@ -729,14 +1123,23 @@ class DateRangePickerControl extends ControlBase {
         }
         const valArr = value.split(",");
         const valObj = {
-            start: valArr[0] ?? null,
-            end: valArr[1] ?? null,
+            // a Hijri endpoint read back from the form is `1447-03-15`, which is not the day
+            // the adapter would deserialize it as
+            start: this.#readEndpoint(valArr[0]),
+            end: this.#readEndpoint(valArr[1]),
         };
         this.range.patchValue(valObj, { emitEvent: false });
     }
     ngOnDestroy() {
         this.#sub.unsubscribe();
     }
+    openPicker(picker) {
+        if (this.readonly()) {
+            return;
+        }
+        picker.open();
+        this.markAsTouched();
+    }
     calendarDaysFilter = (d) => {
         const day = (d || new Date()).getDay();
         return !(this.disabledDays().includes(day));
@@ -746,7 +1149,16 @@ class DateRangePickerControl extends ControlBase {
         const end = new Date(endDate).getTime();
         return Math.ceil((end - start) / (1000 * 60 * 60 * 24) + 1);
     }
+    #readEndpoint(value) {
+        if (!value) {
+            return null;
+        }
+        return this.emitHijri() ? parseHijriDate(value) : value;
+    }
     #getFormatedDate(date) {
+        if (this.emitHijri()) {
+            return `${formatHijriDate(date)}${format(date, "'T'HH:mm:ss")}`;
+        }
         return format(date, "yyyy-MM-dd'T'HH:mm:ss");
     }
     #getFormatedEndDate(endDate) {
@@ -766,15 +1178,16 @@ class DateRangePickerControl extends ControlBase {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DateRangePickerControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    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: [
-            provideDateFnsAdapter(DATE_FORMAT_ADAPTER),
-            { provide: MAT_DATE_LOCALE, useValue: enGB },
+    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: [
+            provideIssDateAdapter(),
             { provide: NG_VALUE_ACCESSOR, useExisting: DateRangePickerControl, multi: true },
         ], usesInheritance: true, ngImport: i0, template: `
     <mat-form-field floatLabel="auto" class="">
 
-      <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
-      <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-black">
+        <ng-content select="label"></ng-content>
+      </mat-label>
       <mat-date-range-input
         [formGroup]="range"
         [rangePicker]="picker"
@@ -801,7 +1214,7 @@ class DateRangePickerControl extends ControlBase {
         <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
       }
       <mat-datepicker-toggle matSuffix [for]="picker" [disabled]="readonly()"></mat-datepicker-toggle>
-      <mat-date-range-picker #picker></mat-date-range-picker>
+      <mat-date-range-picker #picker [panelClass]="isHijri() ? 'iss-hijri-calendar' : ''"></mat-date-range-picker>
 
     </mat-form-field>
   `, 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 +1230,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         MatIcon,
                     ],
                     providers: [
-                        provideDateFnsAdapter(DATE_FORMAT_ADAPTER),
-                        { provide: MAT_DATE_LOCALE, useValue: enGB },
+                        provideIssDateAdapter(),
                         { provide: NG_VALUE_ACCESSOR, useExisting: DateRangePickerControl, multi: true },
                     ],
                     template: `
     <mat-form-field floatLabel="auto" class="">
 
-      <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
-      <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-black">
+        <ng-content select="label"></ng-content>
+      </mat-label>
       <mat-date-range-input
         [formGroup]="range"
         [rangePicker]="picker"
@@ -852,12 +1266,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
       }
       <mat-datepicker-toggle matSuffix [for]="picker" [disabled]="readonly()"></mat-datepicker-toggle>
-      <mat-date-range-picker #picker></mat-date-range-picker>
+      <mat-date-range-picker #picker [panelClass]="isHijri() ? 'iss-hijri-calendar' : ''"></mat-date-range-picker>
 
     </mat-form-field>
   `
                 }]
-        }], 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"] }] } });
+        }], 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"] }] } });
 
 /**
  * `<iss-ctrl-time-picker>` — time of day, picked from a list generated at a fixed interval.
@@ -942,8 +1356,10 @@ class TimePickerControl extends ControlBase {
             { provide: NG_VALIDATORS, useExisting: TimePickerControl, multi: true },
         ], usesInheritance: true, ngImport: i0, template: `
     <mat-form-field floatLabel="auto" class="">
-      <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
-      <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-black">
+        <ng-content select="label"></ng-content>
+      </mat-label>
       <input
         matInput
         [formControl]="ctrl"
@@ -977,8 +1393,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     ],
                     template: `
     <mat-form-field floatLabel="auto" class="">
-      <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
-      <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-black">
+        <ng-content select="label"></ng-content>
+      </mat-label>
       <input
         matInput
         [formControl]="ctrl"
@@ -1020,6 +1438,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * | `minTime` | `string \| null` | `null` | Earliest selectable time, `HH:mm`. |
  * | `maxTime` | `string \| null` | `null` | Latest selectable time, `HH:mm`. |
  * | `disabledDays` | `number[]` | `[]` | Week days to block, `0` = Sunday … `6` = Saturday. |
+ * | `hijriCalendar` | `boolean` | `false` | Shows an Umm al-Qura Hijri calendar; the value stays Gregorian. |
+ * | `emitHijri` | `boolean` | `false` | Emits the date half as a Hijri date. Implies `hijriCalendar`. |
+ *
+ * ### Hijri dates
+ * Both flags are handed straight to the inner date picker; the time half is untouched, so a
+ * Hijri value reads `1447-03-15T09:30:00`.
  *
  * ### Inherited from {@link ControlBase}
  * `formControlName` · `readonly` · `className` · `(onChange)`
@@ -1051,6 +1475,14 @@ class DatetimePickerControl extends ControlBase {
      * Latest selectable time of day, as `HH:mm`.
      */
     maxTime = input(null, ...(ngDevMode ? [{ debugName: "maxTime" }] : /* istanbul ignore next */ []));
+    /**
+     * Renders the calendar as an Umm al-Qura Hijri calendar, leaving the emitted date Gregorian.
+     */
+    hijriCalendar = input(false, ...(ngDevMode ? [{ debugName: "hijriCalendar" }] : /* istanbul ignore next */ []));
+    /**
+     * Emits the date half of the value as a Hijri date. Implies {@link hijriCalendar}.
+     */
+    emitHijri = input(false, ...(ngDevMode ? [{ debugName: "emitHijri" }] : /* istanbul ignore next */ []));
     setDisabledState(isDisabled) {
         super.setDisabledState(isDisabled);
         // the template binds `datetimeForm`, disabling ctrl alone leaves the pickers live
@@ -1111,14 +1543,24 @@ class DatetimePickerControl extends ControlBase {
         return undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatetimePickerControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    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: [
+    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: [
             { provide: NG_VALUE_ACCESSOR, useExisting: DatetimePickerControl, multi: true },
             { provide: NG_VALIDATORS, useExisting: DatetimePickerControl, multi: true },
         ], usesInheritance: true, ngImport: i0, template: `
     <form [formGroup]="datetimeForm" class="d-flex flex-row gap-1">
-      <iss-ctrl-date-picker (focusout)="markAsTouched()" [disabledDays]="disabledDays()" [maxDate]="maxDate()" [minDate]="minDate()" [readonly]="readonly()" formControlName="date" (onChange)="emit()">
+      <iss-ctrl-date-picker
+        (focusout)="markAsTouched()"
+        [disabledDays]="disabledDays()"
+        [maxDate]="maxDate()"
+        [minDate]="minDate()"
+        [readonly]="readonly()"
+        [hijriCalendar]="hijriCalendar()"
+        [emitHijri]="emitHijri()"
+        formControlName="date"
+        (onChange)="emit()"
+      >
         <!-- Re-projected with ngProjectAs so it still matches the date picker's own select="label";
-             wrapping it in a second <label> instead would hide an empty label from the :empty rule in upgrade.scss. -->
+             wrapping it in a second <label> instead would nest one inside the other and defeat the label rule in upgrade.scss. -->
         <ng-content select="label" ngProjectAs="label"></ng-content>
       </iss-ctrl-date-picker>
       <iss-ctrl-time-picker
@@ -1130,7 +1572,7 @@ class DatetimePickerControl extends ControlBase {
         (onChange)="emit()"
       />
     </form>
-  `, 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"] }] });
+  `, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatetimePickerControl, decorators: [{
             type: Component,
@@ -1151,9 +1593,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     ],
                     template: `
     <form [formGroup]="datetimeForm" class="d-flex flex-row gap-1">
-      <iss-ctrl-date-picker (focusout)="markAsTouched()" [disabledDays]="disabledDays()" [maxDate]="maxDate()" [minDate]="minDate()" [readonly]="readonly()" formControlName="date" (onChange)="emit()">
+      <iss-ctrl-date-picker
+        (focusout)="markAsTouched()"
+        [disabledDays]="disabledDays()"
+        [maxDate]="maxDate()"
+        [minDate]="minDate()"
+        [readonly]="readonly()"
+        [hijriCalendar]="hijriCalendar()"
+        [emitHijri]="emitHijri()"
+        formControlName="date"
+        (onChange)="emit()"
+      >
         <!-- Re-projected with ngProjectAs so it still matches the date picker's own select="label";
-             wrapping it in a second <label> instead would hide an empty label from the :empty rule in upgrade.scss. -->
+             wrapping it in a second <label> instead would nest one inside the other and defeat the label rule in upgrade.scss. -->
         <ng-content select="label" ngProjectAs="label"></ng-content>
       </iss-ctrl-date-picker>
       <iss-ctrl-time-picker
@@ -1167,7 +1619,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
     </form>
   `
                 }]
-        }], 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 }] }] } });
+        }], 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 }] }] } });
 
 class HintsComponent {
     hints = input([], ...(ngDevMode ? [{ debugName: "hints" }] : /* istanbul ignore next */ []));
@@ -1575,8 +2027,10 @@ class InputControl extends ControlBase {
             { provide: NG_VALIDATORS, useExisting: InputControl, multi: true }
         ], usesInheritance: true, ngImport: i0, template: `
     <mat-form-field floatLabel="auto" class="">
-      <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
-      <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-black">
+        <ng-content select="label"></ng-content>
+      </mat-label>
       <ng-content select="[issPrefix]"></ng-content>
       <div (click)="emitPrefixClick()" class="cursor-pointer">
         @if (prefixText()) {
@@ -1631,8 +2085,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     ],
                     template: `
     <mat-form-field floatLabel="auto" class="">
-      <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
-      <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-black">
+        <ng-content select="label"></ng-content>
+      </mat-label>
       <ng-content select="[issPrefix]"></ng-content>
       <div (click)="emitPrefixClick()" class="cursor-pointer">
         @if (prefixText()) {
@@ -3965,8 +4421,10 @@ class MobileControl extends ControlBase {
             { provide: NG_VALIDATORS, useExisting: MobileControl, multi: true }
         ], usesInheritance: true, ngImport: i0, template: `
     <mat-form-field floatLabel="auto" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
-      <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
-      <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-black">
+        <ng-content select="label"></ng-content>
+      </mat-label>
       <div class="d-inline-flex align-items-center gap-1 country-flag" matPrefix (click)="toggleCountryCodeMenu()">
         <img
           ngSrc="./flags/{{selectedCountry().code.toLowerCase()}}.svg"
@@ -4041,8 +4499,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         { provide: NG_VALIDATORS, useExisting: MobileControl, multi: true }
                     ], template: `
     <mat-form-field floatLabel="auto" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
-      <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
-      <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-black">
+        <ng-content select="label"></ng-content>
+      </mat-label>
       <div class="d-inline-flex align-items-center gap-1 country-flag" matPrefix (click)="toggleCountryCodeMenu()">
         <img
           ngSrc="./flags/{{selectedCountry().code.toLowerCase()}}.svg"
@@ -4859,8 +5319,10 @@ class SelectControl extends ControlBase {
             { provide: NG_VALUE_ACCESSOR, useExisting: SelectControl, multi: true },
         ], 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: `
     <mat-form-field floatLabel="auto" class="">
-      <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
-      <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-black">
+        <ng-content select="label"></ng-content>
+      </mat-label>
       <input [formControl]="ctrl" [matAutocomplete]="auto" [matChipInputFor]="chipGrid" [placeholder]="placeholder()" [readonly]="readonly()" (blur)="markAsTouched()" class="m-0" matInput/>
       @if (!disabled()) {
         @if (selectedOptions().size) {
@@ -4937,8 +5399,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         { provide: NG_VALUE_ACCESSOR, useExisting: SelectControl, multi: true },
                     ], template: `
     <mat-form-field floatLabel="auto" class="">
-      <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
-      <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-black">
+        <ng-content select="label"></ng-content>
+      </mat-label>
       <input [formControl]="ctrl" [matAutocomplete]="auto" [matChipInputFor]="chipGrid" [placeholder]="placeholder()" [readonly]="readonly()" (blur)="markAsTouched()" class="m-0" matInput/>
       @if (!disabled()) {
         @if (selectedOptions().size) {
@@ -5088,8 +5552,10 @@ class TextareaControl extends ControlBase {
             { provide: NG_VALIDATORS, useExisting: TextareaControl, multi: true }
         ], usesInheritance: true, ngImport: i0, template: `
     <mat-form-field floatLabel="auto" class="custom-textarea">
-      <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
-      <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-black">
+        <ng-content select="label"></ng-content>
+      </mat-label>
       <textarea
         matInput
         [placeholder]="placeholder()"
@@ -5124,8 +5590,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     template: `
     <mat-form-field floatLabel="auto" class="custom-textarea">
-      <!-- Kept on one line: an omitted or empty label must leave <mat-label> :empty so upgrade.scss can collapse the floating-label space. -->
-      <mat-label class="fs-16 fc-black"><ng-content select="label"></ng-content></mat-label>
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-black">
+        <ng-content select="label"></ng-content>
+      </mat-label>
       <textarea
         matInput
         [placeholder]="placeholder()"
@@ -5299,7 +5767,7 @@ class FieldAsyncValidation {
  * ### Keys by area
  * - **Common:** `type` · `disabled` · `readonly` · `placeholder` · `suffix` · `hideLabel` · `multiple`
  * - **Bounds:** `min` · `max` · `minLength` · `maxLength`
- * - **Dates:** `minDate` · `maxDate` · `dateFilter`
+ * - **Dates:** `minDate` · `maxDate` · `dateFilter` · `hijriCalendar` · `emitHijri`
  * - **Attachments:** `allowedFileSize` · `allowedFileTypes` · `minFilesCount` · `maxFilesCount` · `templateId` · `templateUrl`
  * - **Users:** `minUsersCount` · `maxUsersCount`
  * - **Table:** `showInTableColumns` · `tableWithFilter` · `tableWithSort` · `tableWithPagination`
@@ -5366,6 +5834,18 @@ class FieldConfig {
      * Restricts the calendar to working days. Source: `config.acceptWorkDaysOnly`.
      */
     dateFilter = signal(undefined, ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+    /**
+     * Renders the calendar as an Umm al-Qura Hijri calendar. The emitted value stays Gregorian
+     * unless {@link FieldConfig.emitHijri} is also on. Source: `config.hijriCalendar`, also
+     * accepted as `config.HijriCalendar`.
+     */
+    hijriCalendar = signal(undefined, ...(ngDevMode ? [{ debugName: "hijriCalendar" }] : /* istanbul ignore next */ []));
+    /**
+     * Emits the picked date as a Hijri date instead of a Gregorian one — the same day emitted
+     * as `1447-03-16` rather than `2025-09-08`. Implies {@link FieldConfig.hijriCalendar}: a
+     * Hijri value is always picked from a Hijri calendar.
+     */
+    emitHijri = signal(undefined, ...(ngDevMode ? [{ debugName: "emitHijri" }] : /* istanbul ignore next */ []));
     /**
      * Id of a downloadable template offered next to an attachment field.
      */
@@ -5428,6 +5908,8 @@ class FieldConfig {
         this.minDate.set(config?.minDate);
         this.maxDate.set(config?.maxDate);
         this.dateFilter.set(config?.acceptWorkDaysOnly);
+        this.hijriCalendar.set(config?.hijriCalendar ?? config?.HijriCalendar);
+        this.emitHijri.set(config?.emitHijri);
         this.minLength.set(config?.minLength);
         this.maxLength.set(config?.maxLength);
         this.allowedFileSize.set(config?.allowedSize);
@@ -5874,22 +6356,22 @@ const COMPONENTS = {
     datetime: () => Promise.resolve().then(function () { return datetimePicker_field; }).then((c) => c.DatetimePickerField),
     date_range: () => Promise.resolve().then(function () { return dateRangePicker_field; }).then((c) => c.DateRangePickerField),
     attachment: () => Promise.resolve().then(function () { return filePicker_field; }).then((c) => c.FilePickerField),
-    userPicker: () => import('./iss-ctrl-user-picker.field-8Jb1325c.mjs').then((c) => c.UserPickerField),
+    userPicker: () => import('./iss-ctrl-user-picker.field-Bc_yX1v9.mjs').then((c) => c.UserPickerField),
     vehicle_plate: () => Promise.resolve().then(function () { return plate_field; }).then((c) => c.PlateField),
-    enrichment: () => import('./iss-ctrl-note.field-C9cVaAz0.mjs').then((c) => c.NoteField),
+    enrichment: () => import('./iss-ctrl-note.field-C5zBFWV-.mjs').then((c) => c.NoteField),
     mobile: () => Promise.resolve().then(function () { return mobile_field; }).then((c) => c.MobileField),
-    table: () => import('./iss-ctrl-table.field-BP-HMKO3.mjs').then((c) => c.TableField),
+    table: () => import('./iss-ctrl-table.field-CjCWmdqf.mjs').then((c) => c.TableField),
     chips: () => Promise.resolve().then(function () { return chips_field; }).then((c) => c.ChipsField),
     switch: () => Promise.resolve().then(function () { return slideToggle_field; }).then((c) => c.SlideToggleField),
 };
 
 const SERVICES = {
-    setValue: () => import('./iss-ctrl-set-value-event-CrpzRR6X.mjs').then((s) => s.SetValueEvent),
+    setValue: () => import('./iss-ctrl-set-value-event-DHF2LsSf.mjs').then((s) => s.SetValueEvent),
     show: () => import('./iss-ctrl-show-event-BcRCwAfo.mjs').then((s) => s.ShowEvent),
-    load: () => import('./iss-ctrl-load-value-event-CDAKsE_O.mjs').then((s) => s.LoadValueEvent),
-    loadOptions: () => import('./iss-ctrl-load-options-event-ClQPHNBO.mjs').then((s) => s.LoadOptionsEvent),
-    triggerBasedOnJsonValue: () => import('./iss-ctrl-trigger-based-on-json-value-DS4TR38v.mjs').then((s) => s.TriggerBasedOnJsonValue),
-    replaceApiKeyDefaultImpl: () => import('./iss-ctrl-replace-api-keys-CvhCKvNB.mjs').then((s) => s.ReplaceApiKeys),
+    load: () => import('./iss-ctrl-load-value-event-CilsqNpU.mjs').then((s) => s.LoadValueEvent),
+    loadOptions: () => import('./iss-ctrl-load-options-event-BCHN0tAM.mjs').then((s) => s.LoadOptionsEvent),
+    triggerBasedOnJsonValue: () => import('./iss-ctrl-trigger-based-on-json-value-BwxH6MLn.mjs').then((s) => s.TriggerBasedOnJsonValue),
+    replaceApiKeyDefaultImpl: () => import('./iss-ctrl-replace-api-keys-uUZLoWuP.mjs').then((s) => s.ReplaceApiKeys),
 };
 
 // Read-only counterpart of COMPONENTS: the component used to render a field's value
@@ -6256,8 +6738,6 @@ const VALIDATION_MESSAGES = {
     }
 };
 
-const UI_LANGUAGE = new InjectionToken("UI SELECTED LANGUAGE");
-
 class TranslatePipe {
     currentLanguage = inject(UI_LANGUAGE);
     transform(value, locale = "") {
@@ -8248,9 +8728,19 @@ var timePicker_field = /*#__PURE__*/Object.freeze({
 });
 
 class DatePickerViewer extends ViewerBase {
+    // a field picked on the Hijri calendar reads back as a Hijri date, whichever calendar its
+    // stored value is in
+    hijriDate = computed(() => toHijriDisplay(this.field().ctrlValue(), {
+        hijriCalendar: this.field().config?.hijriCalendar(),
+        emitHijri: this.field().config?.emitHijri(),
+    }), ...(ngDevMode ? [{ debugName: "hijriDate" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerViewer, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    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: `
-    {{ field().ctrlValue() | date: 'dd/MM/yyyy' }}
+    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: `
+    @if (hijriDate(); as hijri) {
+      {{ hijri }}
+    } @else {
+      {{ field().ctrlValue() | date: 'dd/MM/yyyy' }}
+    }
   `, isInline: true, dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerViewer, decorators: [{
@@ -8260,8 +8750,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         DatePipe
                     ],
-                    template: `
-    {{ field().ctrlValue() | date: 'dd/MM/yyyy' }}
+                    template: `
+    @if (hijriDate(); as hijri) {
+      {{ hijri }}
+    } @else {
+      {{ field().ctrlValue() | date: 'dd/MM/yyyy' }}
+    }
   `
                 }]
         }] });
@@ -8283,6 +8777,8 @@ var datePicker_viewer = /*#__PURE__*/Object.freeze({
  * | `minDate` | `Date` | Earliest selectable date. |
  * | `maxDate` | `Date` | Latest selectable date. |
  * | `readonly` | `boolean` | Shows the value but blocks interaction. |
+ * | `hijriCalendar` | `boolean` | Renders an Umm al-Qura Hijri calendar while the emitted value stays Gregorian. |
+ * | `emitHijri` | `boolean` | Emits the Hijri date instead of the Gregorian one. Implies `hijriCalendar`. |
  *
  * ### Other field members used
  * `label()`
@@ -8297,18 +8793,25 @@ var datePicker_viewer = /*#__PURE__*/Object.freeze({
  */
 class DatePickerField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerField, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    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: `
-    @if (field.visible()) {
-      @if (field.mode() === "edit") {
-        <iss-ctrl-date-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null" [readonly]="field.config.readonly() ?? false">
-          <label>{{ field.label() }}</label>
-        </iss-ctrl-date-picker>
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
-      } @else {
-        <iss-viewer-date-picker [field]="field"/>
-      }
-    }
-  `, 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] });
+    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: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
+        <iss-ctrl-date-picker
+          [formControlName]="field.name"
+          [minDate]="field.config.minDate() ?? null"
+          [maxDate]="field.config.maxDate() ?? null"
+          [readonly]="field.config.readonly() ?? false"
+          [hijriCalendar]="field.config.hijriCalendar() ?? false"
+          [emitHijri]="field.config.emitHijri() ?? false"
+        >
+          <label>{{ field.label() }}</label>
+        </iss-ctrl-date-picker>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
+      } @else {
+        <iss-viewer-date-picker [field]="field"/>
+      }
+    }
+  `, 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] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerField, decorators: [{
             type: Component,
@@ -8321,17 +8824,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         ValidationMessageComponent,
                         DatePickerViewer
                     ],
-                    template: `
-    @if (field.visible()) {
-      @if (field.mode() === "edit") {
-        <iss-ctrl-date-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null" [readonly]="field.config.readonly() ?? false">
-          <label>{{ field.label() }}</label>
-        </iss-ctrl-date-picker>
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
-      } @else {
-        <iss-viewer-date-picker [field]="field"/>
-      }
-    }
+                    template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
+        <iss-ctrl-date-picker
+          [formControlName]="field.name"
+          [minDate]="field.config.minDate() ?? null"
+          [maxDate]="field.config.maxDate() ?? null"
+          [readonly]="field.config.readonly() ?? false"
+          [hijriCalendar]="field.config.hijriCalendar() ?? false"
+          [emitHijri]="field.config.emitHijri() ?? false"
+        >
+          <label>{{ field.label() }}</label>
+        </iss-ctrl-date-picker>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
+      } @else {
+        <iss-viewer-date-picker [field]="field"/>
+      }
+    }
   `
                 }]
         }] });
@@ -8343,9 +8853,20 @@ var datePicker_field = /*#__PURE__*/Object.freeze({
 
 class DatePickerTimeViewer extends ViewerBase {
     DATETIME_FORMAT = DATETIME_FORMAT;
+    // a field picked on the Hijri calendar reads back as a Hijri date, whichever calendar its
+    // stored value is in
+    hijriDatetime = computed(() => toHijriDisplay(this.field().ctrlValue(), {
+        hijriCalendar: this.field().config?.hijriCalendar(),
+        emitHijri: this.field().config?.emitHijri(),
+        withTime: true,
+    }), ...(ngDevMode ? [{ debugName: "hijriDatetime" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerTimeViewer, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    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: `
-    {{ field().ctrlValue() | date: DATETIME_FORMAT }}
+    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: `
+    @if (hijriDatetime(); as hijri) {
+      {{ hijri }}
+    } @else {
+      {{ field().ctrlValue() | date: DATETIME_FORMAT }}
+    }
   `, isInline: true, dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerTimeViewer, decorators: [{
@@ -8355,8 +8876,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         DatePipe
                     ],
-                    template: `
-    {{ field().ctrlValue() | date: DATETIME_FORMAT }}
+                    template: `
+    @if (hijriDatetime(); as hijri) {
+      {{ hijri }}
+    } @else {
+      {{ field().ctrlValue() | date: DATETIME_FORMAT }}
+    }
   `
                 }]
         }] });
@@ -8378,6 +8903,8 @@ var datetimePicker_viewer = /*#__PURE__*/Object.freeze({
  * | `minDate` | `Date` | Earliest selectable date. |
  * | `maxDate` | `Date` | Latest selectable date. |
  * | `readonly` | `boolean` | Shows the value but blocks interaction. |
+ * | `hijriCalendar` | `boolean` | Renders an Umm al-Qura Hijri calendar while the emitted value stays Gregorian. |
+ * | `emitHijri` | `boolean` | Emits the Hijri date instead of the Gregorian one. Implies `hijriCalendar`. |
  *
  * ### Other field members used
  * `label()`
@@ -8392,18 +8919,25 @@ var datetimePicker_viewer = /*#__PURE__*/Object.freeze({
  */
 class DatetimePickerField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatetimePickerField, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    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: `
-    @if (field.visible()) {
-      @if (field.mode() === "edit") {
-        <iss-ctrl-datetime-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null" [readonly]="field.config.readonly() ?? false">
-          <label>{{ field.label() }}</label>
-        </iss-ctrl-datetime-picker>
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
-      } @else {
-        <iss-viewer-datetime-picker [field]="field"/>
-      }
-    }
-  `, 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] });
+    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: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
+        <iss-ctrl-datetime-picker
+          [formControlName]="field.name"
+          [minDate]="field.config.minDate() ?? null"
+          [maxDate]="field.config.maxDate() ?? null"
+          [readonly]="field.config.readonly() ?? false"
+          [hijriCalendar]="field.config.hijriCalendar() ?? false"
+          [emitHijri]="field.config.emitHijri() ?? false"
+        >
+          <label>{{ field.label() }}</label>
+        </iss-ctrl-datetime-picker>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
+      } @else {
+        <iss-viewer-datetime-picker [field]="field"/>
+      }
+    }
+  `, 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] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatetimePickerField, decorators: [{
             type: Component,
@@ -8416,17 +8950,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         ValidationMessageComponent,
                         DatePickerTimeViewer,
                     ],
-                    template: `
-    @if (field.visible()) {
-      @if (field.mode() === "edit") {
-        <iss-ctrl-datetime-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null" [readonly]="field.config.readonly() ?? false">
-          <label>{{ field.label() }}</label>
-        </iss-ctrl-datetime-picker>
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
-      } @else {
-        <iss-viewer-datetime-picker [field]="field"/>
-      }
-    }
+                    template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
+        <iss-ctrl-datetime-picker
+          [formControlName]="field.name"
+          [minDate]="field.config.minDate() ?? null"
+          [maxDate]="field.config.maxDate() ?? null"
+          [readonly]="field.config.readonly() ?? false"
+          [hijriCalendar]="field.config.hijriCalendar() ?? false"
+          [emitHijri]="field.config.emitHijri() ?? false"
+        >
+          <label>{{ field.label() }}</label>
+        </iss-ctrl-datetime-picker>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
+      } @else {
+        <iss-viewer-datetime-picker [field]="field"/>
+      }
+    }
   `
                 }]
         }] });
@@ -8438,14 +8979,21 @@ var datetimePicker_field = /*#__PURE__*/Object.freeze({
 
 class DateRangePickerViewer extends ViewerBase {
     dateRange = [];
+    // a range picked on the Hijri calendar reads back as Hijri dates, whichever calendar its
+    // stored value is in
+    hijriDates = [];
     ngOnInit() {
         this.dateRange = this.field().ctrlValue().split(",").map((val) => val.trim());
+        this.hijriDates = this.dateRange.map((date) => toHijriDisplay(date, {
+            hijriCalendar: this.field().config?.hijriCalendar(),
+            emitHijri: this.field().config?.emitHijri(),
+        }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DateRangePickerViewer, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    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: `
-    @for (date of dateRange; track date; let last = $last) {
-      <span> {{ date | date: 'dd/MM/yyyy' }} {{ last ? '' : '- ' }} </span>
-    }
+    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: `
+    @for (date of dateRange; track date; let last = $last) {
+      <span> {{ hijriDates[$index] ?? (date | date: 'dd/MM/yyyy') }} {{ last ? '' : '- ' }} </span>
+    }
   `, isInline: true, dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DateRangePickerViewer, decorators: [{
@@ -8455,10 +9003,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         DatePipe
                     ],
-                    template: `
-    @for (date of dateRange; track date; let last = $last) {
-      <span> {{ date | date: 'dd/MM/yyyy' }} {{ last ? '' : '- ' }} </span>
-    }
+                    template: `
+    @for (date of dateRange; track date; let last = $last) {
+      <span> {{ hijriDates[$index] ?? (date | date: 'dd/MM/yyyy') }} {{ last ? '' : '- ' }} </span>
+    }
   `
                 }]
         }] });
@@ -8480,6 +9028,8 @@ var dateRangePicker_viewer = /*#__PURE__*/Object.freeze({
  * | `minDate` | `Date` | Earliest selectable date. |
  * | `maxDate` | `Date` | Latest selectable date. |
  * | `readonly` | `boolean` | Shows the value but blocks interaction. |
+ * | `hijriCalendar` | `boolean` | Renders an Umm al-Qura Hijri calendar while the emitted value stays Gregorian. |
+ * | `emitHijri` | `boolean` | Emits the Hijri date instead of the Gregorian one. Implies `hijriCalendar`. |
  *
  * ### Other field members used
  * `label()`
@@ -8496,17 +9046,24 @@ var dateRangePicker_viewer = /*#__PURE__*/Object.freeze({
  */
 class DateRangePickerField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DateRangePickerField, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    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: `
-    @if (field.visible()) {
-      @if (field.mode() === "edit") {
-        <iss-ctrl-date-range-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null" [readonly]="field.config.readonly() ?? false">
-          <label>{{ field.label() }}</label>
-        </iss-ctrl-date-range-picker>
-      } @else {
-        <iss-viewer-date-range-picker [field]="field"/>
-      }
-    }
-  `, 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] });
+    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: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
+        <iss-ctrl-date-range-picker
+          [formControlName]="field.name"
+          [minDate]="field.config.minDate() ?? null"
+          [maxDate]="field.config.maxDate() ?? null"
+          [readonly]="field.config.readonly() ?? false"
+          [hijriCalendar]="field.config.hijriCalendar() ?? false"
+          [emitHijri]="field.config.emitHijri() ?? false"
+        >
+          <label>{{ field.label() }}</label>
+        </iss-ctrl-date-range-picker>
+      } @else {
+        <iss-viewer-date-range-picker [field]="field"/>
+      }
+    }
+  `, 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] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DateRangePickerField, decorators: [{
             type: Component,
@@ -8518,16 +9075,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         DateRangePickerControl,
                         DateRangePickerViewer
                     ],
-                    template: `
-    @if (field.visible()) {
-      @if (field.mode() === "edit") {
-        <iss-ctrl-date-range-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null" [readonly]="field.config.readonly() ?? false">
-          <label>{{ field.label() }}</label>
-        </iss-ctrl-date-range-picker>
-      } @else {
-        <iss-viewer-date-range-picker [field]="field"/>
-      }
-    }
+                    template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
+        <iss-ctrl-date-range-picker
+          [formControlName]="field.name"
+          [minDate]="field.config.minDate() ?? null"
+          [maxDate]="field.config.maxDate() ?? null"
+          [readonly]="field.config.readonly() ?? false"
+          [hijriCalendar]="field.config.hijriCalendar() ?? false"
+          [emitHijri]="field.config.emitHijri() ?? false"
+        >
+          <label>{{ field.label() }}</label>
+        </iss-ctrl-date-range-picker>
+      } @else {
+        <iss-viewer-date-range-picker [field]="field"/>
+      }
+    }
   `
                 }]
         }] });
@@ -8851,5 +9415,5 @@ var time_validator = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-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 };
-//# sourceMappingURL=iss-ctrl-iss-ctrl-BN9rcLt2.mjs.map
+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 };
+//# sourceMappingURL=iss-ctrl-iss-ctrl-BpcynMId.mjs.map