iss-ctrl 0.0.21 → 0.0.22

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

@@ -0,0 +1,226 @@
+import * as i0 from '@angular/core';
+import { input, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormGroup, FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatTimepickerModule } from '@angular/material/timepicker';
+import { format } from 'date-fns';
+import { ControlBase } from 'iss-ctrl/base';
+import { DatePickerControl } from 'iss-ctrl/date-picker';
+import { TimePickerControl } from 'iss-ctrl/time-picker';
+
+/**
+ * `<iss-ctrl-datetime-picker>` — a date and a time in a single field.
+ *
+ * Combines the calendar of the date picker with the time list of the time picker; both parts
+ * must be set before a value is emitted.
+ *
+ * @example
+ * ```html
+ * <iss-ctrl-datetime-picker formControlName="scheduledAt" [minDate]="today" minTime="08:00" maxTime="17:00">
+ *   <label>Scheduled at</label>
+ * </iss-ctrl-datetime-picker>
+ * ```
+ *
+ * ### Own inputs
+ * | Property | Type | Default | Description |
+ * | --- | --- | --- | --- |
+ * | `minDate` | `Date \| null` | `null` | Earliest selectable date. |
+ * | `maxDate` | `Date \| null` | `null` | Latest selectable date. |
+ * | `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)`
+ *
+ * Projects `<label>` into the floating label; omit it to render the control without one.
+ */
+class DatetimePickerControl extends ControlBase {
+    datetimeForm = new FormGroup({
+        date: new FormControl(null),
+        time: new FormControl(null),
+    });
+    /**
+     * 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 */ []));
+    /**
+     * Earliest selectable time of day, as `HH:mm`.
+     */
+    minTime = input(null, ...(ngDevMode ? [{ debugName: "minTime" }] : /* istanbul ignore next */ []));
+    /**
+     * 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
+        if (isDisabled) {
+            this.datetimeForm.disable({ emitEvent: false });
+        }
+        else {
+            this.datetimeForm.enable({ emitEvent: false });
+        }
+    }
+    emit() {
+        if (this.readonly()) {
+            return;
+        }
+        const datetimeStr = this.#stringifyDateTime(this.datetimeForm.getRawValue());
+        this.propagateValue(datetimeStr);
+        this.emitOnChangeEvent(datetimeStr);
+    }
+    writeValue(value) {
+        this.datetimeForm.patchValue({
+            date: this.#stringifyDate(value),
+            time: this.#stringifyTime(value),
+        });
+    }
+    #stringifyDateTime(datetime) {
+        if (!datetime) {
+            return undefined;
+        }
+        if (this.#stringifyDate(datetime) && this.#stringifyTime(datetime)) {
+            return `${this.#stringifyDate(datetime)}T${this.#stringifyTime(datetime)}`;
+        }
+        return undefined;
+    }
+    #stringifyDate(datetime) {
+        if (!datetime) {
+            return undefined;
+        }
+        if (datetime.date && typeof datetime.date === "string") {
+            return `${datetime.date.split("T")[0]}`;
+        }
+        const date = new Date(datetime);
+        if (!Number.isNaN(date.getTime())) {
+            return format(datetime, "yyyy-MM-dd");
+        }
+        return undefined;
+    }
+    #stringifyTime(datetime) {
+        if (!datetime) {
+            return undefined;
+        }
+        if (datetime.time && typeof datetime.time === "string") {
+            return `${datetime.time}`;
+        }
+        const date = new Date(datetime);
+        if (!Number.isNaN(date.getTime())) {
+            return format(datetime, "HH:mm:ss");
+        }
+        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 }, 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()"
+        [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 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
+        (focusout)="markAsTouched()"
+        [maxTime]="maxTime()"
+        [minTime]="minTime()"
+        [readonly]="readonly()"
+        formControlName="time"
+        (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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: 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,
+            args: [{
+                    selector: "iss-ctrl-datetime-picker",
+                    imports: [
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatTimepickerModule,
+                        MatDatepickerModule,
+                        ReactiveFormsModule,
+                        DatePickerControl,
+                        TimePickerControl,
+                    ],
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: DatetimePickerControl, multi: true },
+                        { provide: NG_VALIDATORS, useExisting: DatetimePickerControl, multi: true },
+                    ],
+                    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()"
+        [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 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
+        (focusout)="markAsTouched()"
+        [maxTime]="maxTime()"
+        [minTime]="minTime()"
+        [readonly]="readonly()"
+        formControlName="time"
+        (onChange)="emit()"
+      />
+    </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 }] }], hijriCalendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "hijriCalendar", required: false }] }], emitHijri: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitHijri", required: false }] }] } });
+
+// The datetime-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 { DatetimePickerControl };
+//# sourceMappingURL=iss-ctrl-datetime-picker.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"iss-ctrl-datetime-picker.mjs","sources":["../../../projects/iss/datetime-picker/src/datetime-picker.control.ts","../../../projects/iss/datetime-picker/src/public-api.ts","../../../projects/iss/datetime-picker/src/iss-ctrl-datetime-picker.ts"],"sourcesContent":["import { Component, input, InputSignal } from \"@angular/core\";\nimport { FormControl, FormGroup, NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule } from \"@angular/forms\";\nimport { MatDatepickerModule } from \"@angular/material/datepicker\";\nimport { MatFormFieldModule } from \"@angular/material/form-field\";\nimport { MatInputModule } from \"@angular/material/input\";\nimport { MatTimepickerModule } from \"@angular/material/timepicker\";\nimport { format } from \"date-fns\";\nimport { ControlBase } from \"iss-ctrl/base\";\nimport { DatePickerControl } from \"iss-ctrl/date-picker\";\nimport { TimePickerControl } from \"iss-ctrl/time-picker\";\n\n/**\n * `<iss-ctrl-datetime-picker>` — a date and a time in a single field.\n *\n * Combines the calendar of the date picker with the time list of the time picker; both parts\n * must be set before a value is emitted.\n *\n * @example\n * ```html\n * <iss-ctrl-datetime-picker formControlName=\"scheduledAt\" [minDate]=\"today\" minTime=\"08:00\" maxTime=\"17:00\">\n *   <label>Scheduled at</label>\n * </iss-ctrl-datetime-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 * | `minTime` | `string \\| null` | `null` | Earliest selectable time, `HH:mm`. |\n * | `maxTime` | `string \\| null` | `null` | Latest selectable time, `HH:mm`. |\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 date half as a Hijri date. Implies `hijriCalendar`. |\n *\n * ### Hijri dates\n * Both flags are handed straight to the inner date picker; the time half is untouched, so a\n * Hijri value reads `1447-03-15T09:30:00`.\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-datetime-picker\",\n  imports: [\n    MatFormFieldModule,\n    MatInputModule,\n    MatTimepickerModule,\n    MatDatepickerModule,\n    ReactiveFormsModule,\n    DatePickerControl,\n    TimePickerControl,\n  ],\n  providers: [\n    { provide: NG_VALUE_ACCESSOR, useExisting: DatetimePickerControl, multi: true },\n    { provide: NG_VALIDATORS, useExisting: DatetimePickerControl, multi: true },\n  ],\n  template: `\n    <form [formGroup]=\"datetimeForm\" class=\"d-flex flex-row gap-1\">\n      <iss-ctrl-date-picker\n        (focusout)=\"markAsTouched()\"\n        [disabledDays]=\"disabledDays()\"\n        [maxDate]=\"maxDate()\"\n        [minDate]=\"minDate()\"\n        [readonly]=\"readonly()\"\n        [hijriCalendar]=\"hijriCalendar()\"\n        [emitHijri]=\"emitHijri()\"\n        formControlName=\"date\"\n        (onChange)=\"emit()\"\n      >\n        <!-- Re-projected with ngProjectAs so it still matches the date picker's own select=\"label\";\n             wrapping it in a second <label> instead would nest one inside the other and defeat the label rule in upgrade.scss. -->\n        <ng-content select=\"label\" ngProjectAs=\"label\"></ng-content>\n      </iss-ctrl-date-picker>\n      <iss-ctrl-time-picker\n        (focusout)=\"markAsTouched()\"\n        [maxTime]=\"maxTime()\"\n        [minTime]=\"minTime()\"\n        [readonly]=\"readonly()\"\n        formControlName=\"time\"\n        (onChange)=\"emit()\"\n      />\n    </form>\n  `\n})\nexport class DatetimePickerControl extends ControlBase {\n  datetimeForm: FormGroup = new FormGroup({\n    date: new FormControl(null),\n    time: new FormControl(null),\n  });\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   * Earliest selectable time of day, as `HH:mm`.\n   */\n  minTime: InputSignal<string | null> = input<string | null>(null);\n  /**\n   * Latest selectable time of day, as `HH:mm`.\n   */\n  maxTime: InputSignal<string | null> = input<string | null>(null);\n  /**\n   * Renders the calendar as an Umm al-Qura Hijri calendar, leaving the emitted date Gregorian.\n   */\n  hijriCalendar: InputSignal<boolean> = input(false);\n  /**\n   * Emits the date half of the value as a Hijri date. Implies {@link hijriCalendar}.\n   */\n  emitHijri: InputSignal<boolean> = input(false);\n\n  override setDisabledState(isDisabled: boolean): void {\n    super.setDisabledState(isDisabled);\n    // the template binds `datetimeForm`, disabling ctrl alone leaves the pickers live\n    if (isDisabled) {\n      this.datetimeForm.disable({ emitEvent: false });\n    } else {\n      this.datetimeForm.enable({ emitEvent: false });\n    }\n  }\n\n  emit() {\n    if (this.readonly()) {\n      return;\n    }\n    const datetimeStr = this.#stringifyDateTime(this.datetimeForm.getRawValue());\n    this.propagateValue(datetimeStr);\n    this.emitOnChangeEvent(datetimeStr);\n  }\n\n  override writeValue(value: string | Date | null) {\n    this.datetimeForm.patchValue({\n      date: this.#stringifyDate(value),\n      time: this.#stringifyTime(value),\n    });\n  }\n\n  #stringifyDateTime(datetime: any): string | undefined {\n    if (!datetime) {\n      return undefined;\n    }\n    if (this.#stringifyDate(datetime) && this.#stringifyTime(datetime)) {\n      return `${this.#stringifyDate(datetime)}T${this.#stringifyTime(datetime)}`;\n    }\n    return undefined;\n  }\n\n  #stringifyDate(datetime: any) {\n    if (!datetime) {\n      return undefined;\n    }\n\n    if (datetime.date && typeof datetime.date === \"string\") {\n      return `${datetime.date.split(\"T\")[0]}`;\n    }\n\n    const date = new Date(datetime);\n    if (!Number.isNaN(date.getTime())) {\n      return format(datetime, \"yyyy-MM-dd\");\n    }\n    return undefined;\n  }\n\n  #stringifyTime(datetime: any) {\n    if (!datetime) {\n      return undefined;\n    }\n\n    if (datetime.time && typeof datetime.time === \"string\") {\n      return `${datetime.time}`;\n    }\n\n    const date = new Date(datetime);\n    if (!Number.isNaN(date.getTime())) {\n      return format(datetime, \"HH:mm:ss\");\n    }\n    return undefined;\n  }\n}\n","// The datetime-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 \"./datetime-picker.control\";\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;AAWA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCG;AA4CG,MAAO,qBAAsB,SAAQ,WAAW,CAAA;IACpD,YAAY,GAAc,IAAI,SAAS,CAAC;AACtC,QAAA,IAAI,EAAE,IAAI,WAAW,CAAC,IAAI,CAAC;AAC3B,QAAA,IAAI,EAAE,IAAI,WAAW,CAAC,IAAI,CAAC;AAC5B,KAAA,CAAC;AACF;;AAEG;AACH,IAAA,YAAY,GAA0B,KAAK,CAAW,EAAE,mFAAC;AACzD;;AAEG;AACH,IAAA,OAAO,GAA6B,KAAK,CAAc,IAAI,8EAAC;AAC5D;;AAEG;AACH,IAAA,OAAO,GAA6B,KAAK,CAAc,IAAI,8EAAC;AAC5D;;AAEG;AACH,IAAA,OAAO,GAA+B,KAAK,CAAgB,IAAI,8EAAC;AAChE;;AAEG;AACH,IAAA,OAAO,GAA+B,KAAK,CAAgB,IAAI,8EAAC;AAChE;;AAEG;AACH,IAAA,aAAa,GAAyB,KAAK,CAAC,KAAK,oFAAC;AAClD;;AAEG;AACH,IAAA,SAAS,GAAyB,KAAK,CAAC,KAAK,gFAAC;AAErC,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAC3C,QAAA,KAAK,CAAC,gBAAgB,CAAC,UAAU,CAAC;;QAElC,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;QACjD;aAAO;YACL,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;QAChD;IACF;IAEA,IAAI,GAAA;AACF,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACnB;QACF;AACA,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC;AAC5E,QAAA,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC;AAChC,QAAA,IAAI,CAAC,iBAAiB,CAAC,WAAW,CAAC;IACrC;AAES,IAAA,UAAU,CAAC,KAA2B,EAAA;AAC7C,QAAA,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC;AAC3B,YAAA,IAAI,EAAE,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;AAChC,YAAA,IAAI,EAAE,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;AACjC,SAAA,CAAC;IACJ;AAEA,IAAA,kBAAkB,CAAC,QAAa,EAAA;QAC9B,IAAI,CAAC,QAAQ,EAAE;AACb,YAAA,OAAO,SAAS;QAClB;AACA,QAAA,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;AAClE,YAAA,OAAO,CAAA,EAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;QAC5E;AACA,QAAA,OAAO,SAAS;IAClB;AAEA,IAAA,cAAc,CAAC,QAAa,EAAA;QAC1B,IAAI,CAAC,QAAQ,EAAE;AACb,YAAA,OAAO,SAAS;QAClB;QAEA,IAAI,QAAQ,CAAC,IAAI,IAAI,OAAO,QAAQ,CAAC,IAAI,KAAK,QAAQ,EAAE;AACtD,YAAA,OAAO,CAAA,EAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE;QACzC;AAEA,QAAA,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE;AACjC,YAAA,OAAO,MAAM,CAAC,QAAQ,EAAE,YAAY,CAAC;QACvC;AACA,QAAA,OAAO,SAAS;IAClB;AAEA,IAAA,cAAc,CAAC,QAAa,EAAA;QAC1B,IAAI,CAAC,QAAQ,EAAE;AACb,YAAA,OAAO,SAAS;QAClB;QAEA,IAAI,QAAQ,CAAC,IAAI,IAAI,OAAO,QAAQ,CAAC,IAAI,KAAK,QAAQ,EAAE;AACtD,YAAA,OAAO,CAAA,EAAG,QAAQ,CAAC,IAAI,EAAE;QAC3B;AAEA,QAAA,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE;AACjC,YAAA,OAAO,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC;QACrC;AACA,QAAA,OAAO,SAAS;IAClB;uGApGW,qBAAqB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,0BAAA,EAAA,MAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,SAAA,EAhCrB;YACT,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,qBAAqB,EAAE,KAAK,EAAE,IAAI,EAAE;YAC/E,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,qBAAqB,EAAE,KAAK,EAAE,IAAI,EAAE;SAC5E,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EACS;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAtCC,kBAAkB,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAClB,cAAc,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACd,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACnB,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACnB,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,8CAAA,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,oBAAA,EAAA,QAAA,EAAA,sGAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,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,sBAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,SAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAkCR,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBA3CjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,0BAA0B;AACpC,oBAAA,OAAO,EAAE;wBACP,kBAAkB;wBAClB,cAAc;wBACd,mBAAmB;wBACnB,mBAAmB;wBACnB,mBAAmB;wBACnB,iBAAiB;wBACjB,iBAAiB;AAClB,qBAAA;AACD,oBAAA,SAAS,EAAE;wBACT,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,uBAAuB,EAAE,KAAK,EAAE,IAAI,EAAE;wBAC/E,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,uBAAuB,EAAE,KAAK,EAAE,IAAI,EAAE;AAC5E,qBAAA;AACD,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BT,EAAA;AACF,iBAAA;;;ACtFD;AACA;;ACDA;;AAEG;;;;"}

package/fesm2022/iss-ctrl-datetime-picker.viewer-BeUyEBKo.mjs

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

package/fesm2022/iss-ctrl-datetime-picker.viewer-BeUyEBKo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"iss-ctrl-datetime-picker.viewer-BeUyEBKo.mjs","sources":["../../../projects/iss/src/components/controls/datetime-picker/datetime-picker.viewer.ts"],"sourcesContent":["import { DatePipe } from \"@angular/common\";\nimport { Component, computed, Signal } from \"@angular/core\";\nimport { DATETIME_FORMAT } from \"iss-ctrl/base\";\nimport { toHijriDisplay } from \"iss-ctrl/base\";\nimport { ViewerBase } from \"iss-ctrl/base\";\n\n@Component({\n  selector: \"iss-viewer-datetime-picker\",\n  imports: [\n    DatePipe\n  ],\n  template: `\n    @if (hijriDatetime(); as hijri) {\n      {{ hijri }}\n    } @else {\n      {{ field().ctrlValue() | date: DATETIME_FORMAT }}\n    }\n  `\n})\nexport class DatePickerTimeViewer extends ViewerBase {\n  protected readonly DATETIME_FORMAT = DATETIME_FORMAT;\n  // a field picked on the Hijri calendar reads back as a Hijri date, whichever calendar its\n  // stored value is in\n  protected hijriDatetime: Signal<string | null> = computed(() => toHijriDisplay(this.field().ctrlValue(), {\n    hijriCalendar: this.field().config?.hijriCalendar(),\n    emitHijri: this.field().config?.emitHijri(),\n    withTime: true,\n  }));\n}\n"],"names":[],"mappings":";;;;;AAmBM,MAAO,oBAAqB,SAAQ,UAAU,CAAA;IAC/B,eAAe,GAAG,eAAe;;;AAG1C,IAAA,aAAa,GAA0B,QAAQ,CAAC,MAAM,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,SAAS,EAAE,EAAE;QACvG,aAAa,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE;QACnD,SAAS,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE;AAC3C,QAAA,QAAQ,EAAE,IAAI;AACf,KAAA,CAAC,oFAAC;uGARQ,oBAAoB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,4BAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EARrB;;;;;;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,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAbhC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,4BAA4B;AACtC,oBAAA,OAAO,EAAE;wBACP;AACD,qBAAA;AACD,oBAAA,QAAQ,EAAE;;;;;;AAMT,EAAA;AACF,iBAAA;;;;;"}

package/fesm2022/iss-ctrl-file-picker.field-CbepZaX6.mjs

@@ -0,0 +1,210 @@
+import * as i0 from '@angular/core';
+import { inject, signal, computed, effect, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/forms';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MatLabel } from '@angular/material/input';
+import { catchError, EMPTY } from 'rxjs';
+import { F as FieldBase, c as FileHandler, V as VIEW_PROVIDER, a as ValidationMessage, b as FieldViewer } from './iss-ctrl-iss-ctrl-DvnkwSMG.mjs';
+import { AttachmentViewer } from './iss-ctrl-attachment.viewer-DVUL39xd.mjs';
+import { FilePickerControl } from 'iss-ctrl/file-picker';
+
+/**
+ * `<iss-field-file-picker>` — attachment upload.
+ *
+ * Rendered by the outlet for fields of type `attachment`. In `edit` mode it renders
+ * {@link FilePickerControl} plus the validation message; in `view` mode the matching viewer.
+ *
+ * ### Supported `config` keys
+ * | Key | Type | Description |
+ * | --- | --- | --- |
+ * | `multiple` | `boolean` | Allows attaching more than one file. |
+ * | `readonly` | `boolean` | Shows the value but blocks interaction. |
+ *
+ * ### Other field members used
+ * `label()` · `value` · `validation` · `ctrlJsonValue()`
+ *
+ * Every field also honours `visible`, `mode`, `validation`, `asyncValidation` and
+ * `events` — see {@link IssField} for the full model and {@link FieldConfig} for all keys.
+ *
+ * The field uploads the picked files itself, stores the returned ids as the control value
+ * and keeps the resolved attachments in `field.ctrlJsonValue`.
+ *
+ * Accepted extensions come from the `fileType` **validation** rule, not from `config`; the
+ * `allowedFileSize`, `allowedFileTypes`, `minFilesCount`, `maxFilesCount`, `templateId` and
+ * `templateUrl` config keys exist on {@link FieldConfig} but are not read here yet.
+ *
+ * @example
+ * ```json
+ * { "name": "attachments", "type": "attachment", "label": "Attachments", "config": { "multiple": true }, "validation": { "fileType": ["pdf", "png"] } }
+ * ```
+ */
+class FilePickerField extends FieldBase {
+    picker = new FormControl();
+    fileHandlerService = inject(FileHandler);
+    uploading = signal(false, ...(ngDevMode ? [{ debugName: "uploading" }] : /* istanbul ignore next */ []));
+    viewField = computed(() => this.#generateViewField(this.field.ctrlJsonValue()), ...(ngDevMode ? [{ debugName: "viewField" }] : /* istanbul ignore next */ []));
+    attachments = signal([], ...(ngDevMode ? [{ debugName: "attachments" }] : /* istanbul ignore next */ []));
+    uploadingError = signal(undefined, ...(ngDevMode ? [{ debugName: "uploadingError" }] : /* istanbul ignore next */ []));
+    accept = this.#acceptFactory();
+    // the ids the picker already holds files for; without it the effect would re-download
+    // the very files captureFile just uploaded, since it writes them back into ctrl
+    #hydratedValue = null;
+    #valueEffect = effect(() => {
+        const value = this.ctrlValueChange();
+        if (!value || !this.field.value || value === this.#hydratedValue) {
+            return;
+        }
+        this.#hydratedValue = value;
+        this.fileHandlerService.fetchFiles(value)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((res) => {
+            const filesOnly = res.map((attachment) => attachment.file);
+            const formDataValue = this.fileHandlerService.formDataFactory(filesOnly, !!this.field.config.multiple());
+            this.attachments.set(res);
+            this.picker.setValue(formDataValue);
+            this.field.ctrlJsonValue.set(res);
+        });
+    }, ...(ngDevMode ? [{ debugName: "#valueEffect" }] : /* istanbul ignore next */ []));
+    captureFile(formData) {
+        if (!formData) {
+            return;
+        }
+        this.uploading.set(true);
+        const notUploadedFiles = this.#getNotUploadedFiles(formData);
+        if (this.fileHandlerService.formDataHasValue(notUploadedFiles)) {
+            this.fileHandlerService.upload(notUploadedFiles).pipe(catchError((err) => {
+                this.uploading.set(false);
+                this.uploadingError.set(err?.message ?? "Uploading Failed!");
+                console.error(err);
+                return EMPTY;
+            })).subscribe((res) => {
+                this.attachments.update((attachments) => {
+                    if (!this.field.config.multiple()) {
+                        return res;
+                    }
+                    return [...attachments, ...res];
+                });
+                const stringifiedValue = this.stringifyIssAttachment(this.attachments());
+                this.#hydratedValue = stringifiedValue;
+                this.ctrl.setValue(stringifiedValue);
+                this.field.ctrlJsonValue.set(this.attachments());
+                this.uploading.set(false);
+            });
+        }
+        else {
+            this.uploading.set(false);
+        }
+    }
+    stringifyIssAttachment(attachments) {
+        return attachments.map((attachment) => attachment.id).join(",");
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.#valueEffect.destroy();
+    }
+    // The accepted extensions are the `fileType` rule's own value, the same one its validator is
+    // built from — a list, or the comma-separated string an older definition wrote it as.
+    #acceptFactory() {
+        const extensions = this.field.validation?.["fileType"];
+        if (!extensions) {
+            return "";
+        }
+        const list = Array.isArray(extensions) ? extensions : String(extensions).split(",");
+        return list
+            .map((extension) => extension.trim())
+            .filter((extension) => !!extension)
+            .map((extension) => extension.startsWith(".") ? extension : `.${extension}`)
+            .join(",");
+    }
+    #generateViewField(value) {
+        return {
+            config: {
+                showDownloadButton: true,
+                showDeleteButton: false
+            },
+            ctrlJsonValue: signal(value ?? [])
+        };
+    }
+    #getNotUploadedFiles(formData) {
+        const fd = new FormData();
+        if (formData) {
+            for (const pair of formData.entries()) {
+                const file = pair[1];
+                if (!file.id) {
+                    fd.append(pair[0], pair[1]);
+                }
+            }
+        }
+        return fd;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FilePickerField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FilePickerField, isStandalone: true, selector: "iss-field-file-picker", usesInheritance: true, ngImport: i0, template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
+        <mat-label>{{ field.label() }}</mat-label>
+        <input type="hidden" [formControlName]="field.name">
+        <!-- [showDeleteButton]="field.config.showDeleteButton" [showDownloadButton]="field.config.showDownloadButton"-->
+        <iss-ctrl-file-picker
+          [formControl]="picker"
+          [accept]="accept"
+          (onChange)="captureFile($event)"
+          [multiple]="field.config.multiple()"
+          [readonly]="field.config.readonly() ?? false"
+          [uploading]="uploading()"
+          [uploadedFiles]="attachments()"
+          [uploadingError]="uploadingError()"
+        />
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="ctrl.touched"/>
+      } @else {
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-attachment [uploading]="uploading()" [field]="viewField()"/>
+        </iss-field-viewer>
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FilePickerControl, selector: "iss-ctrl-file-picker", inputs: ["accept", "showDownloadButton", "showDeleteButton", "uploading", "uploadedFiles", "uploadingError"] }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: AttachmentViewer, selector: "iss-viewer-attachment", inputs: ["uploading", "uploadingError"], outputs: ["deleteOut"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FilePickerField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "iss-field-file-picker",
+                    viewProviders: [VIEW_PROVIDER],
+                    imports: [
+                        ReactiveFormsModule,
+                        FilePickerControl,
+                        ValidationMessage,
+                        AttachmentViewer,
+                        MatLabel,
+                        FieldViewer
+                    ],
+                    template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
+        <mat-label>{{ field.label() }}</mat-label>
+        <input type="hidden" [formControlName]="field.name">
+        <!-- [showDeleteButton]="field.config.showDeleteButton" [showDownloadButton]="field.config.showDownloadButton"-->
+        <iss-ctrl-file-picker
+          [formControl]="picker"
+          [accept]="accept"
+          (onChange)="captureFile($event)"
+          [multiple]="field.config.multiple()"
+          [readonly]="field.config.readonly() ?? false"
+          [uploading]="uploading()"
+          [uploadedFiles]="attachments()"
+          [uploadingError]="uploadingError()"
+        />
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="ctrl.touched"/>
+      } @else {
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-attachment [uploading]="uploading()" [field]="viewField()"/>
+        </iss-field-viewer>
+      }
+    }
+  `
+                }]
+        }] });
+
+export { FilePickerField };
+//# sourceMappingURL=iss-ctrl-file-picker.field-CbepZaX6.mjs.map

package/fesm2022/iss-ctrl-file-picker.field-CbepZaX6.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"iss-ctrl-file-picker.field-CbepZaX6.mjs","sources":["../../../projects/iss/src/components/controls/file-picker/file-picker.field.ts"],"sourcesContent":["import { Component, computed, effect, inject, OnDestroy, Signal, signal, WritableSignal, } from \"@angular/core\";\nimport { takeUntilDestroyed } from \"@angular/core/rxjs-interop\";\nimport { FormControl, ReactiveFormsModule } from \"@angular/forms\";\nimport { MatLabel } from \"@angular/material/input\";\nimport { catchError, EMPTY } from \"rxjs\";\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 { IssAttachment } from \"iss-ctrl/tokens\";\nimport { AttachmentViewer } from \"./attachment.viewer\";\nimport { IssFile } from \"iss-ctrl/file-picker\";\nimport { FileHandler } from \"./file-handler\";\nimport { FilePickerControl } from \"iss-ctrl/file-picker\";\n\n/**\n * `<iss-field-file-picker>` — attachment upload.\n *\n * Rendered by the outlet for fields of type `attachment`. In `edit` mode it renders\n * {@link FilePickerControl} plus the validation message; in `view` mode the matching viewer.\n *\n * ### Supported `config` keys\n * | Key | Type | Description |\n * | --- | --- | --- |\n * | `multiple` | `boolean` | Allows attaching more than one file. |\n * | `readonly` | `boolean` | Shows the value but blocks interaction. |\n *\n * ### Other field members used\n * `label()` · `value` · `validation` · `ctrlJsonValue()`\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 * The field uploads the picked files itself, stores the returned ids as the control value\n * and keeps the resolved attachments in `field.ctrlJsonValue`.\n *\n * Accepted extensions come from the `fileType` **validation** rule, not from `config`; the\n * `allowedFileSize`, `allowedFileTypes`, `minFilesCount`, `maxFilesCount`, `templateId` and\n * `templateUrl` config keys exist on {@link FieldConfig} but are not read here yet.\n *\n * @example\n * ```json\n * { \"name\": \"attachments\", \"type\": \"attachment\", \"label\": \"Attachments\", \"config\": { \"multiple\": true }, \"validation\": { \"fileType\": [\"pdf\", \"png\"] } }\n * ```\n */\n@Component({\n  selector: \"iss-field-file-picker\",\n  viewProviders: [VIEW_PROVIDER],\n  imports: [\n    ReactiveFormsModule,\n    FilePickerControl,\n    ValidationMessage,\n    AttachmentViewer,\n    MatLabel,\n    FieldViewer\n  ],\n  template: `\n    @if (field.visible()) {\n      @if (field.mode() === \"edit\") {\n        <mat-label>{{ field.label() }}</mat-label>\n        <input type=\"hidden\" [formControlName]=\"field.name\">\n        <!-- [showDeleteButton]=\"field.config.showDeleteButton\" [showDownloadButton]=\"field.config.showDownloadButton\"-->\n        <iss-ctrl-file-picker\n          [formControl]=\"picker\"\n          [accept]=\"accept\"\n          (onChange)=\"captureFile($event)\"\n          [multiple]=\"field.config.multiple()\"\n          [readonly]=\"field.config.readonly() ?? false\"\n          [uploading]=\"uploading()\"\n          [uploadedFiles]=\"attachments()\"\n          [uploadingError]=\"uploadingError()\"\n        />\n        <iss-validation-message-viewer [errors]=\"ctrl.errors\" [showMessage]=\"ctrl.touched\"/>\n      } @else {\n        <iss-field-viewer>\n          <label>{{ field.label() }}</label>\n          <iss-viewer-attachment [uploading]=\"uploading()\" [field]=\"viewField()\"/>\n        </iss-field-viewer>\n      }\n    }\n  `\n})\nexport class FilePickerField extends FieldBase implements OnDestroy {\n  picker = new FormControl();\n  fileHandlerService = inject(FileHandler);\n  uploading: WritableSignal<boolean> = signal(false);\n  viewField: Signal<any> = computed(() => this.#generateViewField(this.field.ctrlJsonValue()));\n  attachments: WritableSignal<IssAttachment[]> = signal([]);\n  uploadingError = signal<string | undefined>(undefined);\n  accept: string = this.#acceptFactory();\n  // the ids the picker already holds files for; without it the effect would re-download\n  // the very files captureFile just uploaded, since it writes them back into ctrl\n  #hydratedValue: string | null = null;\n  #valueEffect = effect(() => {\n    const value = this.ctrlValueChange();\n    if (!value || !this.field.value || value === this.#hydratedValue) {\n      return;\n    }\n\n    this.#hydratedValue = value;\n    this.fileHandlerService.fetchFiles(value)\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe((res: any) => {\n        const filesOnly = res.map((attachment: any) => attachment.file);\n        const formDataValue: FormData | null = this.fileHandlerService.formDataFactory(filesOnly, !!this.field.config.multiple());\n        this.attachments.set(res);\n        this.picker.setValue(formDataValue);\n        this.field.ctrlJsonValue.set(res);\n      });\n  });\n\n  captureFile(formData: FormData | null) {\n    if (!formData) {\n      return;\n    }\n\n    this.uploading.set(true);\n    const notUploadedFiles: FormData = this.#getNotUploadedFiles(formData);\n    if (this.fileHandlerService.formDataHasValue(notUploadedFiles)) {\n      this.fileHandlerService.upload(notUploadedFiles).pipe(\n        catchError((err) => {\n          this.uploading.set(false);\n          this.uploadingError.set(err?.message ?? \"Uploading Failed!\");\n          console.error(err);\n          return EMPTY;\n        }),\n      ).subscribe((res: any) => {\n        this.attachments.update((attachments: IssAttachment[]): IssAttachment[] => {\n          if (!this.field.config.multiple()) {\n            return res;\n          }\n          return [...attachments, ...res];\n        });\n        const stringifiedValue = this.stringifyIssAttachment(this.attachments());\n        this.#hydratedValue = stringifiedValue;\n        this.ctrl.setValue(stringifiedValue);\n        this.field.ctrlJsonValue.set(this.attachments());\n        this.uploading.set(false);\n      });\n    } else {\n      this.uploading.set(false);\n    }\n  }\n\n  stringifyIssAttachment(attachments: IssAttachment[]): string {\n    return attachments.map((attachment: IssAttachment) => attachment.id).join(\",\");\n  }\n\n  override ngOnDestroy() {\n    super.ngOnDestroy();\n    this.#valueEffect.destroy();\n  }\n\n  // The accepted extensions are the `fileType` rule's own value, the same one its validator is\n  // built from — a list, or the comma-separated string an older definition wrote it as.\n  #acceptFactory(): string {\n    const extensions: any = this.field.validation?.[\"fileType\"];\n    if (!extensions) {\n      return \"\";\n    }\n    const list: string[] = Array.isArray(extensions) ? extensions : String(extensions).split(\",\");\n    return list\n      .map((extension: string) => extension.trim())\n      .filter((extension: string) => !!extension)\n      .map((extension: string) => extension.startsWith(\".\") ? extension : `.${extension}`)\n      .join(\",\");\n  }\n\n  #generateViewField(value: IssFile[]) {\n    return {\n      config: {\n        showDownloadButton: true,\n        showDeleteButton: false\n      },\n      ctrlJsonValue: signal(value ?? [])\n    };\n  }\n\n  #getNotUploadedFiles(formData: FormData): FormData {\n    const fd: FormData = new FormData();\n    if (formData) {\n      for (const pair of formData.entries()) {\n        const file: IssFile = pair[1] as unknown as IssFile;\n        if (!file.id) {\n          fd.append(pair[0], pair[1]);\n        }\n      }\n    }\n    return fd;\n  }\n}\n"],"names":[],"mappings":"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"}