iss-ctrl 0.0.20 → 0.0.22

package/fesm2022/iss-ctrl-chips.mjs

@@ -0,0 +1,168 @@
+import * as i0 from '@angular/core';
+import { signal, CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import { ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { MatChipGrid, MatChipRow, MatChipInput, MatChipRemove } from '@angular/material/chips';
+import { MatFormField } from '@angular/material/form-field';
+import * as i1 from '@angular/material/input';
+import { MatInput, MatInputModule } from '@angular/material/input';
+import { ControlBase } from 'iss-ctrl/base';
+
+/**
+ * `<iss-ctrl-chips>` — free text entered as removable chips.
+ *
+ * Each `Enter` turns the typed text into a chip. The form value is the comma separated list
+ * of chip labels.
+ *
+ * @example
+ * ```html
+ * <iss-ctrl-chips formControlName="tags" placeholder="Add a tag">
+ *   <label>Tags</label>
+ * </iss-ctrl-chips>
+ * ```
+ *
+ * ### Own inputs
+ * None — the control is configured entirely through the inherited properties.
+ *
+ * ### Inherited from {@link ControlBase}
+ * `formControlName` · `readonly` · `className` · `(onChange)` · `placeholder`
+ *
+ * Projects `<label>` into the floating label; omit it to render the control without one.
+ */
+class ChipsControl extends ControlBase {
+    /**
+     * The chips currently rendered. Internal state, not an input.
+     */
+    keywords = signal([], ...(ngDevMode ? [{ debugName: "keywords" }] : /* istanbul ignore next */ []));
+    writeValue(value) {
+        if (typeof value === "string") {
+            this.keywords.set(this.#parseValues(value));
+        }
+        if (value === undefined || value === null) {
+            this.keywords.set([]);
+        }
+    }
+    remove(keyword) {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        this.markAsTouched();
+        this.keywords.update((keywords) => {
+            const index = keywords.indexOf(keyword);
+            if (index < 0) {
+                return keywords;
+            }
+            keywords.splice(index, 1);
+            return [...keywords];
+        });
+        this.emitValue(this.#stringifyValues());
+    }
+    add(event) {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        this.markAsTouched();
+        const value = (event.value || "").trim();
+        if (value) {
+            this.keywords.update((keywords) => [...keywords, value]);
+        }
+        event.chipInput.clear();
+        this.emitValue(this.#stringifyValues());
+    }
+    // the chips are the value here; `ctrl` stays untouched
+    isEmpty() {
+        return this.keywords().length === 0;
+    }
+    #stringifyValues() {
+        return this.keywords().map((s) => s.trim()).join();
+    }
+    #parseValues(values) {
+        return values.split(",").map((c) => c.trim());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChipsControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ChipsControl, isStandalone: true, selector: "iss-ctrl-chips", providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: ChipsControl, multi: true }
+        ], usesInheritance: true, ngImport: i0, template: `
+    <mat-form-field floatLabel="auto" class="">
+      <!-- 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-dark-gray">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <input
+        matInput
+        [errorStateMatcher]="errorStateMatcher"
+        [placeholder]="placeholder()"
+        [matChipInputFor]="chipGrid"
+        [disabled]="disabled()"
+        [readonly]="readonly()"
+        (matChipInputTokenEnd)="add($event)"
+      />
+    </mat-form-field>
+    <mat-chip-grid #chipGrid>
+      @for (keyword of keywords(); track keyword) {
+        <mat-chip-row (removed)="remove(keyword)">
+          {{ keyword }}
+          <button matChipRemove [disabled]="disabled() || readonly()">
+            <ds-icon icon="trash" class="fc-red"></ds-icon>
+          </button>
+        </mat-chip-row>
+      }
+    </mat-chip-grid>
+  `, isInline: true, dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: 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: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChipsControl, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "iss-ctrl-chips",
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    imports: [
+                        MatFormField,
+                        MatChipGrid,
+                        MatChipRow,
+                        ReactiveFormsModule,
+                        MatChipInput,
+                        MatInput,
+                        MatChipRemove,
+                        MatInputModule,
+                    ],
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: ChipsControl, multi: true }
+                    ],
+                    template: `
+    <mat-form-field floatLabel="auto" class="">
+      <!-- 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-dark-gray">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <input
+        matInput
+        [errorStateMatcher]="errorStateMatcher"
+        [placeholder]="placeholder()"
+        [matChipInputFor]="chipGrid"
+        [disabled]="disabled()"
+        [readonly]="readonly()"
+        (matChipInputTokenEnd)="add($event)"
+      />
+    </mat-form-field>
+    <mat-chip-grid #chipGrid>
+      @for (keyword of keywords(); track keyword) {
+        <mat-chip-row (removed)="remove(keyword)">
+          {{ keyword }}
+          <button matChipRemove [disabled]="disabled() || readonly()">
+            <ds-icon icon="trash" class="fc-red"></ds-icon>
+          </button>
+        </mat-chip-row>
+      }
+    </mat-chip-grid>
+  `
+                }]
+        }] });
+
+// The chips control. Its field and viewer stay in the primary entry point and reach it
+// from there, so the control ships only to an app that renders it or imports it directly.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ChipsControl };
+//# sourceMappingURL=iss-ctrl-chips.mjs.map

package/fesm2022/iss-ctrl-chips.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"iss-ctrl-chips.mjs","sources":["../../../projects/iss/chips/src/chips.control.ts","../../../projects/iss/chips/src/public-api.ts","../../../projects/iss/chips/src/iss-ctrl-chips.ts"],"sourcesContent":["import { Component, CUSTOM_ELEMENTS_SCHEMA, signal, WritableSignal } from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ReactiveFormsModule } from \"@angular/forms\";\nimport { MatChipGrid, MatChipInput, MatChipInputEvent, MatChipRemove, MatChipRow } from \"@angular/material/chips\";\nimport { MatFormField } from \"@angular/material/form-field\";\nimport { MatInput, MatInputModule } from \"@angular/material/input\";\nimport { ControlBase } from \"iss-ctrl/base\";\n\n/**\n * `<iss-ctrl-chips>` — free text entered as removable chips.\n *\n * Each `Enter` turns the typed text into a chip. The form value is the comma separated list\n * of chip labels.\n *\n * @example\n * ```html\n * <iss-ctrl-chips formControlName=\"tags\" placeholder=\"Add a tag\">\n *   <label>Tags</label>\n * </iss-ctrl-chips>\n * ```\n *\n * ### Own inputs\n * None — the control is configured entirely through the inherited properties.\n *\n * ### Inherited from {@link ControlBase}\n * `formControlName` · `readonly` · `className` · `(onChange)` · `placeholder`\n *\n * Projects `<label>` into the floating label; omit it to render the control without one.\n */\n@Component({\n  selector: \"iss-ctrl-chips\",\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n  imports: [\n    MatFormField,\n    MatChipGrid,\n    MatChipRow,\n    ReactiveFormsModule,\n    MatChipInput,\n    MatInput,\n    MatChipRemove,\n    MatInputModule,\n  ],\n  providers: [\n    { provide: NG_VALUE_ACCESSOR, useExisting: ChipsControl, multi: true }\n  ],\n  template: `\n    <mat-form-field floatLabel=\"auto\" class=\"\">\n      <!-- 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. -->\n      <mat-label class=\"fs-16 fc-dark-gray\">\n        <ng-content select=\"label\"></ng-content>\n      </mat-label>\n      <input\n        matInput\n        [errorStateMatcher]=\"errorStateMatcher\"\n        [placeholder]=\"placeholder()\"\n        [matChipInputFor]=\"chipGrid\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        (matChipInputTokenEnd)=\"add($event)\"\n      />\n    </mat-form-field>\n    <mat-chip-grid #chipGrid>\n      @for (keyword of keywords(); track keyword) {\n        <mat-chip-row (removed)=\"remove(keyword)\">\n          {{ keyword }}\n          <button matChipRemove [disabled]=\"disabled() || readonly()\">\n            <ds-icon icon=\"trash\" class=\"fc-red\"></ds-icon>\n          </button>\n        </mat-chip-row>\n      }\n    </mat-chip-grid>\n  `\n})\nexport class ChipsControl extends ControlBase {\n  /**\n   * The chips currently rendered. Internal state, not an input.\n   */\n  readonly keywords: WritableSignal<string[]> = signal([]);\n\n  override writeValue(value: string | null) {\n    if (typeof value === \"string\") {\n      this.keywords.set(this.#parseValues(value));\n    }\n    if (value === undefined || value === null) {\n      this.keywords.set([]);\n    }\n  }\n\n  remove(keyword: string) {\n    if (this.disabled() || this.readonly()) {\n      return;\n    }\n    this.markAsTouched();\n    this.keywords.update((keywords: string[]): string[] => {\n      const index: number = keywords.indexOf(keyword);\n      if (index < 0) {\n        return keywords;\n      }\n      keywords.splice(index, 1);\n      return [...keywords];\n    });\n    this.emitValue(this.#stringifyValues());\n  }\n\n  add(event: MatChipInputEvent): void {\n    if (this.disabled() || this.readonly()) {\n      return;\n    }\n    this.markAsTouched();\n    const value: string = (event.value || \"\").trim();\n    if (value) {\n      this.keywords.update((keywords: string[]): string[] => [...keywords, value]);\n    }\n    event.chipInput!.clear();\n    this.emitValue(this.#stringifyValues());\n  }\n\n  // the chips are the value here; `ctrl` stays untouched\n  protected override isEmpty(): boolean {\n    return this.keywords().length === 0;\n  }\n\n  #stringifyValues() {\n    return this.keywords().map((s: string) => s.trim()).join();\n  }\n\n  #parseValues(values: string) {\n    return values.split(\",\").map((c: string) => c.trim());\n  }\n}\n","// The chips control. Its field and viewer stay in the primary entry point and reach it\n// from there, so the control ships only to an app that renders it or imports it directly.\n\nexport * from \"./chips.control\";\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/iss-ctrl-chips.viewer-BcKT2hcq.mjs

@@ -0,0 +1,38 @@
+import * as i0 from '@angular/core';
+import { computed, Component } from '@angular/core';
+import { MatChipSet, MatChip } from '@angular/material/chips';
+import { ViewerBase } from 'iss-ctrl/base';
+
+class ChipsViewer extends ViewerBase {
+    keywords = computed(() => {
+        return this.field().ctrlValue().split(",").map((c) => c.trim());
+    }, ...(ngDevMode ? [{ debugName: "keywords" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChipsViewer, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ChipsViewer, isStandalone: true, selector: "iss-viewer-chips", usesInheritance: true, ngImport: i0, template: `
+    <mat-chip-set>
+      @for (keyword of keywords(); track keyword) {
+        <mat-chip>{{ keyword }}</mat-chip>
+      }
+    </mat-chip-set>
+  `, isInline: true, dependencies: [{ kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChipsViewer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "iss-viewer-chips",
+                    imports: [
+                        MatChipSet,
+                        MatChip
+                    ],
+                    template: `
+    <mat-chip-set>
+      @for (keyword of keywords(); track keyword) {
+        <mat-chip>{{ keyword }}</mat-chip>
+      }
+    </mat-chip-set>
+  `
+                }]
+        }] });
+
+export { ChipsViewer };
+//# sourceMappingURL=iss-ctrl-chips.viewer-BcKT2hcq.mjs.map

package/fesm2022/iss-ctrl-chips.viewer-BcKT2hcq.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"iss-ctrl-chips.viewer-BcKT2hcq.mjs","sources":["../../../projects/iss/src/components/controls/chips/chips.viewer.ts"],"sourcesContent":["import { Component, computed } from \"@angular/core\";\nimport { MatChip, MatChipSet } from \"@angular/material/chips\";\nimport { ViewerBase } from \"iss-ctrl/base\";\n\n@Component({\n  selector: \"iss-viewer-chips\",\n  imports: [\n    MatChipSet,\n    MatChip\n  ],\n  template: `\n    <mat-chip-set>\n      @for (keyword of keywords(); track keyword) {\n        <mat-chip>{{ keyword }}</mat-chip>\n      }\n    </mat-chip-set>\n  `\n})\nexport class ChipsViewer extends ViewerBase {\n  keywords = computed(() => {\n    return this.field().ctrlValue().split(\",\").map((c: string) => c.trim());\n  });\n}\n"],"names":[],"mappings":";;;;;AAkBM,MAAO,WAAY,SAAQ,UAAU,CAAA;AACzC,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;QACvB,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAS,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC;AACzE,IAAA,CAAC,+EAAC;uGAHS,WAAW,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAX,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,WAAW,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EARZ;;;;;;GAMT,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EATC,UAAU,mGACV,OAAO,EAAA,QAAA,EAAA,wDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,OAAA,EAAA,OAAA,EAAA,WAAA,EAAA,aAAA,EAAA,eAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAUE,WAAW,EAAA,UAAA,EAAA,CAAA;kBAdvB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,kBAAkB;AAC5B,oBAAA,OAAO,EAAE;wBACP,UAAU;wBACV;AACD,qBAAA;AACD,oBAAA,QAAQ,EAAE;;;;;;AAMT,EAAA;AACF,iBAAA;;;;;"}

package/fesm2022/iss-ctrl-date-picker.field-BSpXukpO.mjs

@@ -0,0 +1,98 @@
+import * as i0 from '@angular/core';
+import { Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import { F as FieldBase, V as VIEW_PROVIDER, a as ValidationMessage, b as FieldViewer } from './iss-ctrl-iss-ctrl-DvnkwSMG.mjs';
+import { DatePickerControl } from 'iss-ctrl/date-picker';
+import { DatePickerViewer } from './iss-ctrl-date-picker.viewer-Dsmsf91t.mjs';
+
+/**
+ * `<iss-field-date-picker>` — a single date, picked from a calendar.
+ *
+ * Rendered by the outlet for fields of type `date`. In `edit` mode it renders
+ * {@link DatePickerControl} plus the validation message; in `view` mode the matching viewer.
+ *
+ * ### Supported `config` keys
+ * | Key | Type | Description |
+ * | --- | --- | --- |
+ * | `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()`
+ *
+ * Every field also honours `visible`, `mode`, `validation`, `asyncValidation` and
+ * `events` — see {@link IssField} for the full model and {@link FieldConfig} for all keys.
+ *
+ * @example
+ * ```json
+ * { "name": "startsOn", "type": "date", "label": "Start date", "config": { "minDate": "2026-01-01" } }
+ * ```
+ */
+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"
+          [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-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-date-picker [field]="field"/>
+        </iss-field-viewer>
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: DatePickerViewer, selector: "iss-viewer-date-picker" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "iss-field-date-picker",
+                    viewProviders: [VIEW_PROVIDER],
+                    imports: [
+                        ReactiveFormsModule,
+                        DatePickerControl,
+                        ValidationMessage,
+                        DatePickerViewer,
+                        FieldViewer
+                    ],
+                    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-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-date-picker [field]="field"/>
+        </iss-field-viewer>
+      }
+    }
+  `
+                }]
+        }] });
+
+export { DatePickerField };
+//# sourceMappingURL=iss-ctrl-date-picker.field-BSpXukpO.mjs.map

package/fesm2022/iss-ctrl-date-picker.field-BSpXukpO.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"iss-ctrl-date-picker.field-BSpXukpO.mjs","sources":["../../../projects/iss/src/components/controls/date-picker/date-picker.field.ts"],"sourcesContent":["import { Component } from \"@angular/core\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\nimport { VIEW_PROVIDER } from \"../../../shared/constants/view-provider.const\";\nimport { FieldViewer } from \"../../shared/field-viewer\";\nimport { ValidationMessage } from \"../../shared/validation-message\";\nimport { FieldBase } from \"../base/field-base\";\nimport { DatePickerControl } from \"iss-ctrl/date-picker\";\nimport { DatePickerViewer } from \"./date-picker.viewer\";\n\n/**\n * `<iss-field-date-picker>` — a single date, picked from a calendar.\n *\n * Rendered by the outlet for fields of type `date`. In `edit` mode it renders\n * {@link DatePickerControl} plus the validation message; in `view` mode the matching viewer.\n *\n * ### Supported `config` keys\n * | Key | Type | Description |\n * | --- | --- | --- |\n * | `minDate` | `Date` | Earliest selectable date. |\n * | `maxDate` | `Date` | Latest selectable date. |\n * | `readonly` | `boolean` | Shows the value but blocks interaction. |\n * | `hijriCalendar` | `boolean` | Renders an Umm al-Qura Hijri calendar while the emitted value stays Gregorian. |\n * | `emitHijri` | `boolean` | Emits the Hijri date instead of the Gregorian one. Implies `hijriCalendar`. |\n *\n * ### Other field members used\n * `label()`\n *\n * Every field also honours `visible`, `mode`, `validation`, `asyncValidation` and\n * `events` — see {@link IssField} for the full model and {@link FieldConfig} for all keys.\n *\n * @example\n * ```json\n * { \"name\": \"startsOn\", \"type\": \"date\", \"label\": \"Start date\", \"config\": { \"minDate\": \"2026-01-01\" } }\n * ```\n */\n@Component({\n  selector: \"iss-field-date-picker\",\n  viewProviders: [VIEW_PROVIDER],\n  imports: [\n    ReactiveFormsModule,\n    DatePickerControl,\n    ValidationMessage,\n    DatePickerViewer,\n    FieldViewer\n  ],\n  template: `\n    @if (field.visible()) {\n      @if (field.mode() === \"edit\") {\n        <iss-ctrl-date-picker\n          [formControlName]=\"field.name\"\n          [minDate]=\"field.config.minDate() ?? null\"\n          [maxDate]=\"field.config.maxDate() ?? null\"\n          [readonly]=\"field.config.readonly() ?? false\"\n          [hijriCalendar]=\"field.config.hijriCalendar() ?? false\"\n          [emitHijri]=\"field.config.emitHijri() ?? false\"\n        >\n          <label>{{ field.label() }}</label>\n        </iss-ctrl-date-picker>\n        <iss-validation-message-viewer [errors]=\"ctrl.errors\" [showMessage]=\"!ctrl.untouched\"/>\n      } @else {\n        <iss-field-viewer>\n          <label>{{ field.label() }}</label>\n          <iss-viewer-date-picker [field]=\"field\"/>\n        </iss-field-viewer>\n      }\n    }\n  `\n})\nexport class DatePickerField extends FieldBase {}\n"],"names":[],"mappings":";;;;;;;;AASA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;AAkCG,MAAO,eAAgB,SAAQ,SAAS,CAAA;uGAAjC,eAAe,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAvBhB;;;;;;;;;;;;;;;;;;;;;AAqBT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EA3BC,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACnB,iBAAiB,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,CAAA,cAAA,EAAA,SAAA,EAAA,SAAA,EAAA,eAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACjB,iBAAiB,EAAA,QAAA,EAAA,+BAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACjB,gBAAgB,EAAA,QAAA,EAAA,wBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,WAAW,EAAA,QAAA,EAAA,kBAAA,EAAA,CAAA,EAAA,aAAA,EANE,CAAC,aAAa,CAAC,EAAA,CAAA;;2FA+BnB,eAAe,EAAA,UAAA,EAAA,CAAA;kBAjC3B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,uBAAuB;oBACjC,aAAa,EAAE,CAAC,aAAa,CAAC;AAC9B,oBAAA,OAAO,EAAE;wBACP,mBAAmB;wBACnB,iBAAiB;wBACjB,iBAAiB;wBACjB,gBAAgB;wBAChB;AACD,qBAAA;AACD,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;AAqBT,EAAA;AACF,iBAAA;;;;;"}

package/fesm2022/iss-ctrl-date-picker.mjs

@@ -0,0 +1,200 @@
+import { DatePipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, inject, effect, Component } from '@angular/core';
+import * as i5 from '@angular/forms';
+import { ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { DateAdapter } from '@angular/material/core';
+import * as i3 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i4 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i2 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import { format } from 'date-fns';
+import { ControlBase, parseHijriDate, formatHijriDate, provideIssDateAdapter } from 'iss-ctrl/base';
+
+/**
+ * `<iss-ctrl-date-picker>` — single date selection through a Material calendar.
+ *
+ * The input itself is read-only; clicking it opens the calendar. The emitted value is a
+ * `yyyy-MM-dd` string, and a clear button appears once a date is picked.
+ *
+ * @example
+ * ```html
+ * <iss-ctrl-date-picker formControlName="startsOn" [minDate]="today" [disabledDays]="[5, 6]">
+ *   <label>Start date</label>
+ * </iss-ctrl-date-picker>
+ * ```
+ *
+ * ### Own inputs
+ * | Property | Type | Default | Description |
+ * | --- | --- | --- | --- |
+ * | `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)`
+ *
+ * Projects `<label>` into the floating label; omit it to render the control without one.
+ */
+class DatePickerControl extends ControlBase {
+    /**
+     * Week days that cannot be selected — `0` is Sunday through `6` for Saturday.
+     */
+    disabledDays = input([], ...(ngDevMode ? [{ debugName: "disabledDays" }] : /* istanbul ignore next */ []));
+    /**
+     * Earliest selectable date.
+     */
+    minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    /**
+     * 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;
+        }
+        event.stopImmediatePropagation();
+        this.ctrl.setValue(null);
+        this.propagateValue(null);
+        this.emitOnChangeEvent(null);
+    }
+    calendarDaysFilter = (d) => {
+        const day = (d || new Date()).getDay();
+        return !(this.disabledDays().includes(day));
+    };
+    emit($event) {
+        if (this.readonly()) {
+            return;
+        }
+        this.markAsTouched();
+        const selectedDateString = this.emitHijri() ? formatHijriDate($event.value) : format($event.value, "yyyy-MM-dd");
+        this.propagateValue(selectedDateString);
+        this.emitOnChangeEvent(selectedDateString);
+    }
+    openPicker(picker) {
+        if (this.readonly()) {
+            return;
+        }
+        picker.open();
+        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 }, hijriCalendar: { classPropertyName: "hijriCalendar", publicName: "hijriCalendar", isSignal: true, isRequired: false, transformFunction: null }, emitHijri: { classPropertyName: "emitHijri", publicName: "emitHijri", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            DatePipe,
+            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="">
+      <!-- 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-dark-gray">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <input
+        class="cursor-pointer"
+        matInput
+        [errorStateMatcher]="errorStateMatcher"
+        readonly
+        [matDatepicker]="picker"
+        (click)="openPicker(picker)"
+        [formControl]="ctrl"
+        [readonly]="readonly()"
+        [min]="minDate()"
+        [max]="maxDate()"
+        [matDatepickerFilter]="calendarDaysFilter"
+        (dateChange)="emit($event)"
+      />
+      @if (ctrl.getRawValue()) {
+        <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 [panelClass]="isHijri() ? 'iss-hijri-calendar' : ''"></mat-datepicker>
+
+    </mat-form-field>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerControl, decorators: [{
+            type: Component,
+            args: [{ selector: "iss-ctrl-date-picker", imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, MatIconModule, ReactiveFormsModule], providers: [
+                        DatePipe,
+                        provideIssDateAdapter(),
+                        { provide: NG_VALUE_ACCESSOR, useExisting: DatePickerControl, multi: true },
+                        { provide: NG_VALIDATORS, useExisting: DatePickerControl, multi: true },
+                    ], template: `
+    <mat-form-field floatLabel="auto" class="">
+      <!-- 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-dark-gray">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <input
+        class="cursor-pointer"
+        matInput
+        [errorStateMatcher]="errorStateMatcher"
+        readonly
+        [matDatepicker]="picker"
+        (click)="openPicker(picker)"
+        [formControl]="ctrl"
+        [readonly]="readonly()"
+        [min]="minDate()"
+        [max]="maxDate()"
+        [matDatepickerFilter]="calendarDaysFilter"
+        (dateChange)="emit($event)"
+      />
+      @if (ctrl.getRawValue()) {
+        <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 [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 }] }], hijriCalendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "hijriCalendar", required: false }] }], emitHijri: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitHijri", required: false }] }] } });
+
+// The date-picker control. Its field and viewer stay in the primary entry point and reach it
+// from there, so the control ships only to an app that renders it or imports it directly.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DatePickerControl };
+//# sourceMappingURL=iss-ctrl-date-picker.mjs.map

package/fesm2022/iss-ctrl-date-picker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"iss-ctrl-date-picker.mjs","sources":["../../../projects/iss/date-picker/src/date-picker.control.ts","../../../projects/iss/date-picker/src/public-api.ts","../../../projects/iss/date-picker/src/iss-ctrl-date-picker.ts"],"sourcesContent":["import { DatePipe } from \"@angular/common\";\nimport { Component, effect, inject, input, InputSignal } from \"@angular/core\";\nimport { NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule, Validator } from \"@angular/forms\";\nimport { DateAdapter } from \"@angular/material/core\";\nimport { MatDatepickerInputEvent, MatDatepickerModule } from \"@angular/material/datepicker\";\nimport { MatFormFieldModule } from \"@angular/material/form-field\";\nimport { MatIconModule } from \"@angular/material/icon\";\nimport { MatInputModule } from \"@angular/material/input\";\nimport { format } from \"date-fns\";\nimport { IssDateAdapter, provideIssDateAdapter } from \"iss-ctrl/base\";\nimport { formatHijriDate, parseHijriDate } from \"iss-ctrl/base\";\nimport { ControlBase } from \"iss-ctrl/base\";\n\n/**\n * `<iss-ctrl-date-picker>` — single date selection through a Material calendar.\n *\n * The input itself is read-only; clicking it opens the calendar. The emitted value is a\n * `yyyy-MM-dd` string, and a clear button appears once a date is picked.\n *\n * @example\n * ```html\n * <iss-ctrl-date-picker formControlName=\"startsOn\" [minDate]=\"today\" [disabledDays]=\"[5, 6]\">\n *   <label>Start date</label>\n * </iss-ctrl-date-picker>\n * ```\n *\n * ### Own inputs\n * | Property | Type | Default | Description |\n * | --- | --- | --- | --- |\n * | `minDate` | `Date \\| null` | `null` | Earliest selectable date. |\n * | `maxDate` | `Date \\| null` | `null` | Latest selectable date. |\n * | `disabledDays` | `number[]` | `[]` | Week days to block, `0` = Sunday … `6` = Saturday. |\n * | `hijriCalendar` | `boolean` | `false` | Shows an Umm al-Qura Hijri calendar; the value stays Gregorian. |\n * | `emitHijri` | `boolean` | `false` | Emits the Hijri date instead of the Gregorian one. Implies `hijriCalendar`. |\n *\n * ### Hijri dates\n * `hijriCalendar` only changes what the user sees: the calendar is Hijri, the input reads\n * `dd/MM/yyyy` in Hijri, and a day shown as `16/03/1447` is still emitted as `2025-09-08`.\n * Turn on `emitHijri` as well when the form value itself has to be the Hijri date. `minDate` and\n * `maxDate` stay Gregorian in both cases — they are bounds on a day, not on a notation.\n *\n * ### Inherited from {@link ControlBase}\n * `formControlName` · `readonly` · `className` · `(onChange)`\n *\n * Projects `<label>` into the floating label; omit it to render the control without one.\n */\n@Component({\n  selector: \"iss-ctrl-date-picker\",\n  imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, MatIconModule, ReactiveFormsModule],\n  providers: [\n    DatePipe,\n    provideIssDateAdapter(),\n    { provide: NG_VALUE_ACCESSOR, useExisting: DatePickerControl, multi: true },\n    { provide: NG_VALIDATORS, useExisting: DatePickerControl, multi: true },\n  ],\n  template: `\n    <mat-form-field floatLabel=\"auto\" class=\"\">\n      <!-- 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. -->\n      <mat-label class=\"fs-16 fc-dark-gray\">\n        <ng-content select=\"label\"></ng-content>\n      </mat-label>\n      <input\n        class=\"cursor-pointer\"\n        matInput\n        [errorStateMatcher]=\"errorStateMatcher\"\n        readonly\n        [matDatepicker]=\"picker\"\n        (click)=\"openPicker(picker)\"\n        [formControl]=\"ctrl\"\n        [readonly]=\"readonly()\"\n        [min]=\"minDate()\"\n        [max]=\"maxDate()\"\n        [matDatepickerFilter]=\"calendarDaysFilter\"\n        (dateChange)=\"emit($event)\"\n      />\n      @if (ctrl.getRawValue()) {\n        <mat-icon matSuffix style=\"cursor: pointer\" (click)=\"clear($event)\">close</mat-icon>\n      }\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\" [disabled]=\"readonly()\"></mat-datepicker-toggle>\n      <mat-datepicker #picker [panelClass]=\"isHijri() ? 'iss-hijri-calendar' : ''\"></mat-datepicker>\n\n    </mat-form-field>\n  `,\n  styles: `\n    ::ng-deep {\n      tr:has(> .mat-calendar-body-label[colspan=\"7\"]) {\n        opacity: 0 !important;\n        display: none;\n      }\n\n      .mat-datepicker-content .mat-calendar {\n        height: unset !important;\n      }\n    }\n  `\n})\nexport class DatePickerControl extends ControlBase implements Validator {\n  /**\n   * Week days that cannot be selected — `0` is Sunday through `6` for Saturday.\n   */\n  disabledDays: InputSignal<number[]> = input<number[]>([]);\n  /**\n   * Earliest selectable date.\n   */\n  minDate: InputSignal<Date | null> = input<Date | null>(null);\n  /**\n   * Latest selectable date.\n   */\n  maxDate: InputSignal<Date | null> = input<Date | null>(null);\n  /**\n   * Renders the calendar as an Umm al-Qura Hijri calendar, leaving the emitted value Gregorian.\n   */\n  hijriCalendar: InputSignal<boolean> = input(false);\n  /**\n   * Emits the picked date as a Hijri `yyyy-MM-dd` string. Implies {@link hijriCalendar}.\n   */\n  emitHijri: InputSignal<boolean> = input(false);\n  #dateAdapter: IssDateAdapter = inject(DateAdapter) as IssDateAdapter;\n  // the adapter is provided by this component, so switching it here leaves every other\n  // picker on the form on its own calendar\n  #hijriEffectRef = effect(() => this.#dateAdapter.setHijri(this.isHijri()));\n\n  /**\n   * Whether this picker is currently showing the Hijri calendar.\n   */\n  isHijri(): boolean {\n    return this.hijriCalendar() || this.emitHijri();\n  }\n\n  override writeValue(value: string | Date | null): void {\n    // a Hijri value read back from the form is `1447-03-15`, which is not the day\n    // `new Date(\"1447-03-15\")` would give the calendar\n    if (this.emitHijri() && typeof value === \"string\") {\n      super.writeValue(parseHijriDate(value));\n      return;\n    }\n    super.writeValue(value);\n  }\n\n  clear(event: MouseEvent) {\n    if (this.readonly()) {\n      return;\n    }\n    event.stopImmediatePropagation();\n    this.ctrl.setValue(null);\n\n    this.propagateValue(null);\n    this.emitOnChangeEvent(null);\n  }\n\n  protected calendarDaysFilter = (d: Date | null): boolean => {\n    const day: number = (d || new Date()).getDay();\n    return !(this.disabledDays().includes(day));\n  };\n\n  protected emit($event: MatDatepickerInputEvent<any>) {\n    if (this.readonly()) {\n      return;\n    }\n    this.markAsTouched();\n    const selectedDateString = this.emitHijri() ? formatHijriDate($event.value) : format($event.value, \"yyyy-MM-dd\");\n    this.propagateValue(selectedDateString);\n    this.emitOnChangeEvent(selectedDateString);\n  }\n\n  protected openPicker(picker: any): void {\n    if (this.readonly()) {\n      return;\n    }\n    picker.open();\n    this.markAsTouched();\n  }\n}\n","// The date-picker control. Its field and viewer stay in the primary entry point and reach it\n// from there, so the control ships only to an app that renders it or imports it directly.\n\nexport * from \"./date-picker.control\";\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/iss-ctrl-date-picker.viewer-Dsmsf91t.mjs

@@ -0,0 +1,40 @@
+import { DatePipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { computed, Component } from '@angular/core';
+import { ViewerBase, toHijriDisplay } from 'iss-ctrl/base';
+
+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: "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: [{
+            type: Component,
+            args: [{
+                    selector: "iss-viewer-date-picker",
+                    imports: [
+                        DatePipe
+                    ],
+                    template: `
+    @if (hijriDate(); as hijri) {
+      {{ hijri }}
+    } @else {
+      {{ field().ctrlValue() | date: 'dd/MM/yyyy' }}
+    }
+  `
+                }]
+        }] });
+
+export { DatePickerViewer };
+//# sourceMappingURL=iss-ctrl-date-picker.viewer-Dsmsf91t.mjs.map

package/fesm2022/iss-ctrl-date-picker.viewer-Dsmsf91t.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"iss-ctrl-date-picker.viewer-Dsmsf91t.mjs","sources":["../../../projects/iss/src/components/controls/date-picker/date-picker.viewer.ts"],"sourcesContent":["import { DatePipe } from \"@angular/common\";\nimport { Component, computed, Signal } from \"@angular/core\";\nimport { toHijriDisplay } from \"iss-ctrl/base\";\nimport { ViewerBase } from \"iss-ctrl/base\";\n\n@Component({\n  selector: \"iss-viewer-date-picker\",\n  imports: [\n    DatePipe\n  ],\n  template: `\n    @if (hijriDate(); as hijri) {\n      {{ hijri }}\n    } @else {\n      {{ field().ctrlValue() | date: 'dd/MM/yyyy' }}\n    }\n  `\n})\nexport class DatePickerViewer extends ViewerBase {\n  // a field picked on the Hijri calendar reads back as a Hijri date, whichever calendar its\n  // stored value is in\n  protected hijriDate: Signal<string | null> = computed(() => toHijriDisplay(this.field().ctrlValue(), {\n    hijriCalendar: this.field().config?.hijriCalendar(),\n    emitHijri: this.field().config?.emitHijri(),\n  }));\n}\n"],"names":[],"mappings":";;;;;AAkBM,MAAO,gBAAiB,SAAQ,UAAU,CAAA;;;AAGpC,IAAA,SAAS,GAA0B,QAAQ,CAAC,MAAM,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,SAAS,EAAE,EAAE;QACnG,aAAa,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE;QACnD,SAAS,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE;AAC5C,KAAA,CAAC,gFAAC;uGANQ,gBAAgB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EARjB;;;;;;AAMT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EARC,QAAQ,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA;;2FAUC,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAb5B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,wBAAwB;AAClC,oBAAA,OAAO,EAAE;wBACP;AACD,qBAAA;AACD,oBAAA,QAAQ,EAAE;;;;;;AAMT,EAAA;AACF,iBAAA;;;;;"}