iss-ctrl 0.0.21 → 0.0.23

package/fesm2022/iss-ctrl-base.mjs

@@ -0,0 +1,682 @@
+import * as i0 from '@angular/core';
+import { input, signal, output, inject, Injector, Component, CUSTOM_ELEMENTS_SCHEMA, Injectable, Pipe } from '@angular/core';
+import { FormControl, NgControl } from '@angular/forms';
+import { MatHint } from '@angular/material/form-field';
+import { NativeDateAdapter, MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
+import { UI_LANGUAGE } from 'iss-ctrl/tokens';
+
+/**
+ * Base class for every `iss-ctrl-*` control.
+ *
+ * Controls are the presentational layer: they know nothing about {@link IssField} and are
+ * driven purely by bindings, so they can be used standalone inside any reactive form.
+ * Every control below inherits the properties declared here and adds its own on top.
+ *
+ * ### Inherited inputs
+ * | Property | Type | Default | Description |
+ * | --- | --- | --- | --- |
+ * | `formControlName` | `string` | `""` | Name of the control in the surrounding `FormGroup`. |
+ * | `placeholder` | `string` | `""` | Placeholder text shown while the field is empty. |
+ * | `readonly` | `boolean` | `false` | Renders the value but blocks every interaction. |
+ * | `multiple` | `boolean \| undefined` | `false` | Allows more than one value, where the control supports it. |
+ * | `min` | `number \| string \| null` | `null` | Lower bound (number or date/time string). |
+ * | `max` | `number \| string \| null` | `null` | Upper bound (number or date/time string). |
+ * | `minLength` | `number \| null` | `null` | Minimum number of characters. |
+ * | `maxLength` | `number \| null` | `null` | Maximum number of characters. |
+ * | `hints` | `Hint[]` | `[]` | Helper messages rendered under the field. |
+ * | `className` | `string \| null` | `null` | Extra CSS classes for the host. |
+ *
+ * ### Inherited outputs
+ * | Event | Payload | Description |
+ * | --- | --- | --- |
+ * | `(onChange)` | `any` | Fires after every committed value change. |
+ *
+ * ### Not inputs
+ * `disabled` and `touched` are signals owned by the control. Disable a control through the
+ * forms API (`ctrl.disable()` or a `disabled` field config), never with a template binding.
+ *
+ * ### Content projection
+ * Controls that render a `mat-form-field` project `<label>` into the floating label.
+ * `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
+ * <iss-ctrl-input formControlName="email" [readonly]="false" (onChange)="save($event)">
+ *   <label>Email</label>
+ * </iss-ctrl-input>
+ * ```
+ */
+class ControlBase {
+    /**
+     * Name of this control inside the surrounding `FormGroup`.
+     */
+    formControlName = input("", ...(ngDevMode ? [{ debugName: "formControlName" }] : /* istanbul ignore next */ []));
+    /**
+     * Lower bound forwarded to the underlying input — a number, or a date/time string.
+     */
+    min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /**
+     * Upper bound forwarded to the underlying input — a number, or a date/time string.
+     */
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /**
+     * Minimum number of characters accepted by the underlying input.
+     */
+    minLength = input(null, ...(ngDevMode ? [{ debugName: "minLength" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum number of characters accepted by the underlying input.
+     */
+    maxLength = input(null, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
+    /**
+     * Disabled state. **Not an input** — it is set by the forms API through
+     * {@link ControlBase.setDisabledState}. Disable via `ctrl.disable()` or the field config.
+     */
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Renders the current value but blocks every user interaction.
+     */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    /**
+     * Allows selecting/entering more than one value, on controls that support it.
+     */
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    /**
+     * Placeholder text shown while the control has no value.
+     */
+    placeholder = input("", ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Helper messages rendered beneath the field. See {@link Hint}.
+     */
+    hints = input([], ...(ngDevMode ? [{ debugName: "hints" }] : /* istanbul ignore next */ []));
+    /**
+     * Extra CSS class names applied to the control host.
+     */
+    className = input(null, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the user has interacted with the control. Owned by the control, not an input.
+     */
+    touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    /**
+     * Emits the committed value after every change.
+     */
+    onChange = output();
+    ctrl = new FormControl(null);
+    /**
+     * Error state for the inner `mat-form-field`, derived from the **host** control.
+     *
+     * Material reads `errorState` off the `NgControl` bound to its own `matInput` — here that is
+     * {@link ControlBase.ctrl}, which carries no validators and is therefore always valid. Every
+     * error a consumer cares about (the field config's validators plus the control's own
+     * {@link ControlBase.validate}) lives on the host control instead, so without this matcher an
+     * invalid `iss-ctrl-*` would keep rendering the valid outline. Bind it on the `matInput` as
+     * `[errorStateMatcher]="errorStateMatcher"`.
+     */
+    errorStateMatcher = {
+        isErrorState: (_control, form) => {
+            const host = this.hostControl();
+            if (!host) {
+                return false;
+            }
+            return !!host.invalid && (!!host.touched || this.touched() || !!form?.submitted);
+        }
+    };
+    #injector = inject(Injector);
+    // Resolved lazily: injecting NgControl in the constructor would close the DI cycle through
+    // NG_VALUE_ACCESSOR, which every control provides with `useExisting`.
+    #hostControl = undefined;
+    registerOnChange(fn) {
+        this.onPropagateValue = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+        if (isDisabled) {
+            this.ctrl.disable();
+        }
+        else {
+            this.ctrl.enable();
+        }
+    }
+    writeValue(value) {
+        this.ctrl.setValue(value, { emitEvent: false });
+    }
+    markAsTouched() {
+        this.touched.set(true);
+        this.onTouch();
+    }
+    validate(control) {
+        return this.ctrl.errors;
+    }
+    /**
+     * The `NgControl` this component is bound to from the outside (`formControlName`,
+     * `[formControl]` or `[ngModel]`), or `null` when it is used without one.
+     */
+    hostControl() {
+        if (this.#hostControl === undefined) {
+            this.#hostControl = this.#injector.get(NgControl, null, { self: true });
+        }
+        return this.#hostControl;
+    }
+    /**
+     * Whether the control currently holds no value.
+     *
+     * Reflected on the host as `iss-ctrl-empty`, which is what `upgrade.scss` uses to keep the
+     * resting outline of an empty field: Material's own `mat-form-field-hide-placeholder` drops
+     * off the moment the field is focused, so the border would change colour on focus alone.
+     * Override it in a control whose value does not live on {@link ControlBase.ctrl}.
+     */
+    isEmpty() {
+        const value = this.ctrl.getRawValue();
+        if (Array.isArray(value)) {
+            return value.length === 0;
+        }
+        return value === null || value === undefined || value === "";
+    }
+    onTouch = () => { };
+    onPropagateValue = (_) => { };
+    emitValue(value) {
+        let emissionValue = this.ctrl.getRawValue();
+        if (value !== undefined) {
+            emissionValue = value;
+        }
+        this.onPropagateValue(emissionValue);
+        this.emitOnChangeEvent(emissionValue);
+    }
+    propagateValue(value) {
+        let emissionValue = this.ctrl.getRawValue();
+        if (value !== undefined) {
+            emissionValue = value;
+        }
+        this.onPropagateValue(emissionValue);
+    }
+    emitOnChangeEvent($event) {
+        let emissionValue = this.ctrl.getRawValue();
+        if ($event !== undefined) {
+            emissionValue = $event;
+        }
+        this.onChange.emit(emissionValue);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ControlBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ControlBase, isStandalone: true, selector: "ng-component", inputs: { formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hints: { classPropertyName: "hints", publicName: "hints", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, host: { properties: { "class.iss-ctrl-empty": "isEmpty()" }, classAttribute: "iss-ctrl" }, ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ControlBase, decorators: [{
+            type: Component,
+            args: [{
+                    template: ``,
+                    host: { "class": "iss-ctrl", "[class.iss-ctrl-empty]": "isEmpty()" }
+                }]
+        }], propDecorators: { formControlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControlName", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hints: [{ type: i0.Input, args: [{ isSignal: true, alias: "hints", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], onChange: [{ type: i0.Output, args: ["onChange"] }] } });
+
+const DATE_FORMAT_ADAPTER = {
+    parse: {
+        dateInput: "dd/MM/yyyy",
+        timeInput: "hh:mm:ss aa",
+    },
+    display: {
+        dateInput: "dd/MM/yyyy",
+        monthYearLabel: "MMMM yyyy",
+        dateA11yLabel: "dd/MM/yyyy",
+        monthYearA11yLabel: "MMMM yyyy",
+        timeInput: "hh:mm aa",
+        timeOptionLabel: "hh:mm aa",
+    },
+};
+const DATETIME_FORMAT = "dd/MM/yyyy hh:mm a";
+
+/**
+ * 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"}`;
+}
+
+class Hints {
+    hints = input([], ...(ngDevMode ? [{ debugName: "hints" }] : /* istanbul ignore next */ []));
+    touched = input(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Hints, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: Hints, isStandalone: true, selector: "iss-ctrl-hints", inputs: { hints: { classPropertyName: "hints", publicName: "hints", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (hints().length) {
+      <div class="d-flex align-items-center flex-wrap gap-2 mb-3">
+        @for (hint of hints(); track $index) {
+          @if (hint) {
+            <mat-hint [align]="hint.align" class="d-flex align-items-center gap-1 fs-12">
+              @if (hint.valid === undefined) {
+                <ds-icon icon="info" class="fs-24 fc-dark-gray"></ds-icon>
+                <span class="fc-dark-gray text-break">{{ hint.label }}</span>
+              } @else {
+                <ds-icon
+                  icon="{{ touched() ? (hint.valid ? 'check-circle-f' : 'close-circle') : 'check-circle-o' }}"
+                  class="fs-24 {{ touched() ? (hint.valid ? 'fc-green' : 'fc-red') : 'fc-dark-gray' }}"
+                >
+                </ds-icon>
+                <span
+                  class="{{ touched() ? (hint.valid ? 'fc-green' : 'fc-red') : 'fc-dark-gray' }} text-break"
+                >{{ hint.label }}</span>
+              }
+            </mat-hint>
+          }
+        }
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Hints, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "iss-ctrl-hints",
+                    imports: [MatHint,],
+                    template: `
+    @if (hints().length) {
+      <div class="d-flex align-items-center flex-wrap gap-2 mb-3">
+        @for (hint of hints(); track $index) {
+          @if (hint) {
+            <mat-hint [align]="hint.align" class="d-flex align-items-center gap-1 fs-12">
+              @if (hint.valid === undefined) {
+                <ds-icon icon="info" class="fs-24 fc-dark-gray"></ds-icon>
+                <span class="fc-dark-gray text-break">{{ hint.label }}</span>
+              } @else {
+                <ds-icon
+                  icon="{{ touched() ? (hint.valid ? 'check-circle-f' : 'close-circle') : 'check-circle-o' }}"
+                  class="fs-24 {{ touched() ? (hint.valid ? 'fc-green' : 'fc-red') : 'fc-dark-gray' }}"
+                >
+                </ds-icon>
+                <span
+                  class="{{ touched() ? (hint.valid ? 'fc-green' : 'fc-red') : 'fc-dark-gray' }} text-break"
+                >{{ hint.label }}</span>
+              }
+            </mat-hint>
+          }
+        }
+      </div>
+    }
+  `,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                }]
+        }], propDecorators: { hints: [{ type: i0.Input, args: [{ isSignal: true, alias: "hints", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }] } });
+
+/**
+ * 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 },
+    ];
+}
+
+class SelectStatusPipe {
+    transform(option, ...args) {
+        const selectedOptions = args[0];
+        return selectedOptions.has(option.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SelectStatusPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: SelectStatusPipe, isStandalone: true, name: "selectStatus" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SelectStatusPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: "selectStatus" }]
+        }] });
+
+class TranslatePipe {
+    currentLanguage = inject(UI_LANGUAGE);
+    transform(value, locale = "") {
+        if (typeof value === "string") {
+            return value; // Return the string as is, if it's a string
+        }
+        if (value && locale) {
+            return value[locale] ?? "";
+        }
+        return value?.[this.currentLanguage] ?? "";
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TranslatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: TranslatePipe, isStandalone: true, name: "translate" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TranslatePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: "translate" }]
+        }] });
+
+class ViewerBase {
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ViewerBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ViewerBase, isStandalone: true, selector: "ng-component", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ViewerBase, decorators: [{
+            type: Component,
+            args: [{ template: `` }]
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }] } });
+
+// The pieces every control is built from.
+//
+// These live in their own entry point so each control can be published as one too without
+// depending on the primary entry point — which owns the COMPONENTS/VIEWERS indexes and
+// would therefore close a dependency cycle. Nothing here may import from `iss-ctrl`.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ControlBase, DATETIME_FORMAT, DATE_FORMAT_ADAPTER, HIJRI_LOCALE, HIJRI_MONTH_NAMES, Hints, IssDateAdapter, SelectStatusPipe, TranslatePipe, ViewerBase, createHijriDate, formatHijriDate, getHijriDaysInMonth, getHijriParts, parseHijriDate, provideIssDateAdapter, startOfHijriMonth, toHijriDisplay };
+//# sourceMappingURL=iss-ctrl-base.mjs.map