iss-ctrl 0.0.21 → 0.0.23

package/fesm2022/iss-ctrl-file-picker.field-BMZaJxvj.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-BG-QWWdq.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-BMZaJxvj.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"iss-ctrl-file-picker.field-BMZaJxvj.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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"}

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

@@ -0,0 +1,274 @@
+import * as i0 from '@angular/core';
+import { output, HostListener, Directive, input, computed, signal, effect, CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlBase, Hints } from 'iss-ctrl/base';
+
+class Droppable {
+    onDrop = output();
+    onDragOver(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+    }
+    onDragLeave(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+    }
+    onDropped(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.onDrop.emit(evt.dataTransfer.files);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Droppable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: Droppable, isStandalone: true, selector: "[droppable]", outputs: { onDrop: "onDrop" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDropped($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Droppable, decorators: [{
+            type: Directive,
+            args: [{ selector: "[droppable]" }]
+        }], propDecorators: { onDrop: [{ type: i0.Output, args: ["onDrop"] }], onDragOver: [{
+                type: HostListener,
+                args: ["dragover", ["$event"]]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ["dragleave", ["$event"]]
+            }], onDropped: [{
+                type: HostListener,
+                args: ["drop", ["$event"]]
+            }] } });
+
+/**
+ * `<iss-ctrl-file-picker>` — attachment upload with a per-file progress and error state.
+ *
+ * Uploading is done by the host: the control emits the picked files and renders whatever is
+ * fed back through `uploadedFiles`, `uploading` and `uploadingError`.
+ *
+ * @example
+ * ```html
+ * <iss-ctrl-file-picker
+ *   formControlName="attachments"
+ *   [multiple]="true"
+ *   accept=".pdf,.png"
+ *   [uploading]="uploading()"
+ *   [uploadedFiles]="uploaded()"
+ * />
+ * ```
+ *
+ * ### Own inputs
+ * | Property | Type | Default | Description |
+ * | --- | --- | --- | --- |
+ * | `accept` | `string \| undefined` | `undefined` | Accepted extensions or MIME types for the native picker. |
+ * | `showDownloadButton` | `boolean` | `true` | Shows the download action on each attachment. |
+ * | `showDeleteButton` | `boolean` | `true` | Shows the remove action on each attachment. |
+ * | `uploading` | `boolean` | `false` | Renders the in-progress state. |
+ * | `uploadedFiles` | `IssAttachment[]` | `[]` | Files already stored on the server. |
+ * | `uploadingError` | `string \| undefined` | `undefined` | Error message attached to the failed upload. |
+ *
+ * ### Inherited from {@link ControlBase}
+ * `formControlName` · `readonly` · `className` · `(onChange)` · `multiple` · `hints`
+ *
+ * Projects a `<label>` above the control — the wrapping `iss-field-*` passes the field label in that way.
+ */
+class FilePickerControl extends ControlBase {
+    /**
+     * Accepted extensions or MIME types, passed straight to the native file input.
+     */
+    accept = input(...(ngDevMode ? [undefined, { debugName: "accept" }] : /* istanbul ignore next */ []));
+    /**
+     * Shows the download action on each listed attachment.
+     */
+    showDownloadButton = input(true, ...(ngDevMode ? [{ debugName: "showDownloadButton" }] : /* istanbul ignore next */ []));
+    /**
+     * Shows the remove action on each listed attachment.
+     */
+    showDeleteButton = input(true, ...(ngDevMode ? [{ debugName: "showDeleteButton" }] : /* istanbul ignore next */ []));
+    /**
+     * Renders the upload-in-progress state; set by the host that performs the upload.
+     */
+    uploading = input(false, ...(ngDevMode ? [{ debugName: "uploading" }] : /* istanbul ignore next */ []));
+    /**
+     * Attachments already stored on the server, merged into the rendered list.
+     */
+    uploadedFiles = input([], ...(ngDevMode ? [{ debugName: "uploadedFiles" }] : /* istanbul ignore next */ []));
+    /**
+     * Error message shown on the attachment whose upload failed.
+     */
+    uploadingError = input(undefined, ...(ngDevMode ? [{ debugName: "uploadingError" }] : /* istanbul ignore next */ []));
+    filesValue = computed(() => this.#returnAttachmentViewObject(), ...(ngDevMode ? [{ debugName: "filesValue" }] : /* istanbul ignore next */ []));
+    attachments = signal([], ...(ngDevMode ? [{ debugName: "attachments" }] : /* istanbul ignore next */ []));
+    #uploadedFilesEffectRef = effect(() => {
+        this.#markUploadedFiles();
+    }, ...(ngDevMode ? [{ debugName: "#uploadedFilesEffectRef" }] : /* istanbul ignore next */ []));
+    /*todo needs review and refactor*/
+    ngOnDestroy() {
+        this.#uploadedFilesEffectRef.destroy();
+    }
+    writeValue(val) {
+        if (typeof val === "string") {
+            return;
+        }
+        this.#reset();
+        if (val) {
+            this.attachments.set([...this.attachments(), ...this.#convertFormDataToFiles(val)]);
+        }
+    }
+    onDelete(files) {
+        this.attachments.set(files);
+        this.emitValue(this.#formDataFactory(this.attachments()));
+    }
+    captureFile($event) {
+        if (this.readonly() || this.disabled()) {
+            return;
+        }
+        if (!$event) {
+            return;
+        }
+        if (!$event.length) {
+            return;
+        }
+        this.markAsTouched();
+        const files = Array.from($event);
+        const issFiles = files.map((file) => {
+            return {
+                name: file.name,
+                size: file.size,
+                type: file.type,
+                selected: Date.now(),
+                file: file,
+            };
+        });
+        this.#updateAttachments(issFiles);
+        // The field component uploads this output.  Emit only the files selected in
+        // this interaction: `attachments` also contains files selected earlier, so
+        // serialising it would upload those files again whenever more are added.
+        this.emitValue(this.#formDataFactory(issFiles));
+    }
+    openFilePicker(input) {
+        if (this.readonly() || this.disabled()) {
+            return;
+        }
+        input.click();
+        this.markAsTouched();
+    }
+    #updateAttachments(selectedFiles) {
+        if (!this.multiple()) {
+            this.attachments.set([selectedFiles[0]]);
+            return;
+        }
+        this.attachments.update((files) => {
+            files = [...files, ...selectedFiles];
+            return files;
+        });
+    }
+    #formDataFactory(files) {
+        if (files.length === 0) {
+            return null;
+        }
+        const fd = new FormData();
+        let formDataKey = "file";
+        if (this.multiple()) {
+            formDataKey = "files";
+        }
+        for (let i = 0; i < files.length; i++) {
+            fd.append(formDataKey, files[i].file);
+        }
+        return fd;
+    }
+    #reset() {
+        this.attachments.set([]);
+    }
+    #convertFormDataToFiles(val) {
+        if (!val || !(val instanceof FormData)) {
+            return [];
+        }
+        const files = [];
+        for (const pair of val.entries()) {
+            if (pair[1] instanceof File) {
+                files.push(pair[1]);
+            }
+        }
+        return files;
+    }
+    #markUploadedFiles() {
+        this.attachments.update((attachments) => {
+            return attachments.map((attachment) => {
+                // const uploadedFile = this.uploadedFiles().find((f) => f.selected === attachment.selected && f.name === attachment.name);
+                if (this.uploadingError()) {
+                    attachment.errorMsg = this.uploadingError();
+                }
+                // if (uploadedFile) {
+                //   attachment.id = uploadedFile.id;
+                // }
+                return attachment;
+            });
+        });
+    }
+    #returnAttachmentViewObject() {
+        return {
+            config: {
+                showDownloadButton: this.showDownloadButton(),
+                showDeleteButton: this.showDeleteButton()
+            },
+            ctrlJsonValue: signal(this.attachments())
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FilePickerControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: FilePickerControl, isStandalone: true, selector: "iss-ctrl-file-picker", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, showDownloadButton: { classPropertyName: "showDownloadButton", publicName: "showDownloadButton", isSignal: true, isRequired: false, transformFunction: null }, showDeleteButton: { classPropertyName: "showDeleteButton", publicName: "showDeleteButton", isSignal: true, isRequired: false, transformFunction: null }, uploading: { classPropertyName: "uploading", publicName: "uploading", isSignal: true, isRequired: false, transformFunction: null }, uploadedFiles: { classPropertyName: "uploadedFiles", publicName: "uploadedFiles", isSignal: true, isRequired: false, transformFunction: null }, uploadingError: { classPropertyName: "uploadingError", publicName: "uploadingError", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: FilePickerControl, multi: true }
+        ], usesInheritance: true, ngImport: i0, template: `
+    <ng-content select="label"></ng-content>
+    <ds-file-picker (click)="openFilePicker(inputFile)" (onDrop)="captureFile($event)" droppable>
+      <input
+        #inputFile
+        (change)="captureFile($any($event.target).files)"
+        (click)="$event.stopPropagation()"
+        [accept]="accept()"
+        [formControl]="ctrl"
+        [multiple]="multiple()"
+        [disabled]="readonly()"
+        [style.display]="'none'"
+        type="file"
+      />
+    </ds-file-picker>
+
+    <iss-ctrl-hints [hints]="hints()" [touched]="touched()"/>
+    <!--<iss-viewer-attachment (deleteOut)="onDelete($event)" [field]="filesValue()" [uploading]="uploading()"/>-->
+  `, isInline: true, styles: [".file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.file-uploader --input{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:.75rem}\n"], 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: Droppable, selector: "[droppable]", outputs: ["onDrop"] }, { kind: "component", type: Hints, selector: "iss-ctrl-hints", inputs: ["hints", "touched"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FilePickerControl, decorators: [{
+            type: Component,
+            args: [{ selector: "iss-ctrl-file-picker", schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [
+                        ReactiveFormsModule,
+                        Droppable,
+                        Hints,
+                    ], providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: FilePickerControl, multi: true }
+                    ], template: `
+    <ng-content select="label"></ng-content>
+    <ds-file-picker (click)="openFilePicker(inputFile)" (onDrop)="captureFile($event)" droppable>
+      <input
+        #inputFile
+        (change)="captureFile($any($event.target).files)"
+        (click)="$event.stopPropagation()"
+        [accept]="accept()"
+        [formControl]="ctrl"
+        [multiple]="multiple()"
+        [disabled]="readonly()"
+        [style.display]="'none'"
+        type="file"
+      />
+    </ds-file-picker>
+
+    <iss-ctrl-hints [hints]="hints()" [touched]="touched()"/>
+    <!--<iss-viewer-attachment (deleteOut)="onDelete($event)" [field]="filesValue()" [uploading]="uploading()"/>-->
+  `, styles: [".file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.file-uploader --input{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:.75rem}\n"] }]
+        }], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], showDownloadButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDownloadButton", required: false }] }], showDeleteButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDeleteButton", required: false }] }], uploading: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploading", required: false }] }], uploadedFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadedFiles", required: false }] }], uploadingError: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadingError", required: false }] }] } });
+
+// The file-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 { Droppable, FilePickerControl };
+//# sourceMappingURL=iss-ctrl-file-picker.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"iss-ctrl-file-picker.mjs","sources":["../../../projects/iss/file-picker/src/droppable.ts","../../../projects/iss/file-picker/src/file-picker.control.ts","../../../projects/iss/file-picker/src/public-api.ts","../../../projects/iss/file-picker/src/iss-ctrl-file-picker.ts"],"sourcesContent":["import { Directive, HostListener, output, OutputEmitterRef } from \"@angular/core\";\r\n\r\n@Directive({selector: \"[droppable]\"})\r\nexport class Droppable {\r\n  onDrop: OutputEmitterRef<FileList> = output();\r\n\r\n  @HostListener(\"dragover\", [\"$event\"])\r\n  onDragOver(evt: any) {\r\n    evt.preventDefault();\r\n    evt.stopPropagation();\r\n  }\r\n\r\n  @HostListener(\"dragleave\", [\"$event\"])\r\n  onDragLeave(evt: any) {\r\n    evt.preventDefault();\r\n    evt.stopPropagation();\r\n  }\r\n\r\n  @HostListener(\"drop\", [\"$event\"])\r\n  onDropped(evt: any) {\r\n    evt.preventDefault();\r\n    evt.stopPropagation();\r\n    this.onDrop.emit(evt.dataTransfer.files);\r\n  }\r\n}\r\n","import { Component, computed, CUSTOM_ELEMENTS_SCHEMA, effect, input, InputSignal, OnDestroy, Signal, signal, WritableSignal } from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ReactiveFormsModule } from \"@angular/forms\";\nimport { Hints } from \"iss-ctrl/base\";\nimport { ControlBase } from \"iss-ctrl/base\";\nimport { IssAttachment } from \"iss-ctrl/tokens\";\nimport { Droppable } from \"./droppable\";\nimport { IssFile } from \"./file\";\n\n/**\n * `<iss-ctrl-file-picker>` — attachment upload with a per-file progress and error state.\n *\n * Uploading is done by the host: the control emits the picked files and renders whatever is\n * fed back through `uploadedFiles`, `uploading` and `uploadingError`.\n *\n * @example\n * ```html\n * <iss-ctrl-file-picker\n *   formControlName=\"attachments\"\n *   [multiple]=\"true\"\n *   accept=\".pdf,.png\"\n *   [uploading]=\"uploading()\"\n *   [uploadedFiles]=\"uploaded()\"\n * />\n * ```\n *\n * ### Own inputs\n * | Property | Type | Default | Description |\n * | --- | --- | --- | --- |\n * | `accept` | `string \\| undefined` | `undefined` | Accepted extensions or MIME types for the native picker. |\n * | `showDownloadButton` | `boolean` | `true` | Shows the download action on each attachment. |\n * | `showDeleteButton` | `boolean` | `true` | Shows the remove action on each attachment. |\n * | `uploading` | `boolean` | `false` | Renders the in-progress state. |\n * | `uploadedFiles` | `IssAttachment[]` | `[]` | Files already stored on the server. |\n * | `uploadingError` | `string \\| undefined` | `undefined` | Error message attached to the failed upload. |\n *\n * ### Inherited from {@link ControlBase}\n * `formControlName` · `readonly` · `className` · `(onChange)` · `multiple` · `hints`\n *\n * Projects a `<label>` above the control — the wrapping `iss-field-*` passes the field label in that way.\n */\n@Component({\n  selector: \"iss-ctrl-file-picker\",\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n  imports: [\n    ReactiveFormsModule,\n    Droppable,\n    Hints,\n  ],\n  providers: [\n    { provide: NG_VALUE_ACCESSOR, useExisting: FilePickerControl, multi: true }\n  ],\n  template: `\n    <ng-content select=\"label\"></ng-content>\n    <ds-file-picker (click)=\"openFilePicker(inputFile)\" (onDrop)=\"captureFile($event)\" droppable>\n      <input\n        #inputFile\n        (change)=\"captureFile($any($event.target).files)\"\n        (click)=\"$event.stopPropagation()\"\n        [accept]=\"accept()\"\n        [formControl]=\"ctrl\"\n        [multiple]=\"multiple()\"\n        [disabled]=\"readonly()\"\n        [style.display]=\"'none'\"\n        type=\"file\"\n      />\n    </ds-file-picker>\n\n    <iss-ctrl-hints [hints]=\"hints()\" [touched]=\"touched()\"/>\n    <!--<iss-viewer-attachment (deleteOut)=\"onDelete($event)\" [field]=\"filesValue()\" [uploading]=\"uploading()\"/>-->\n  `,\n  styles: `\n    .file-uploader {\n      --uploader-height: 150px;\n      --uploader-width: 100%;\n      --uploader-bg: var(--off-white);\n      --uploader-border: 1px dashed var(--dark-gray);\n      --uploader-radius: var(--box-radius);\n      --uploader-padding: 1rem;\n\n      height: var(--uploader-height);\n      background-color: var(--uploader-bg);\n      border: var(--uploader-border);\n      border-radius: var(--uploader-radius);\n      padding: var(--uploader-padding);\n      text-align: center;\n      cursor: pointer;\n\n      & --input {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        height: 100%;\n        gap: 0.75rem;\n      }\n    }`\n})\nexport class FilePickerControl extends ControlBase implements OnDestroy {\n  /**\n   * Accepted extensions or MIME types, passed straight to the native file input.\n   */\n  accept: InputSignal<string | undefined> = input();\n  /**\n   * Shows the download action on each listed attachment.\n   */\n  showDownloadButton: InputSignal<boolean> = input(true);\n  /**\n   * Shows the remove action on each listed attachment.\n   */\n  showDeleteButton: InputSignal<boolean> = input(true);\n  /**\n   * Renders the upload-in-progress state; set by the host that performs the upload.\n   */\n  uploading: InputSignal<boolean> = input(false);\n  /**\n   * Attachments already stored on the server, merged into the rendered list.\n   */\n  uploadedFiles: InputSignal<IssAttachment[]> = input<IssAttachment[]>([]);\n  /**\n   * Error message shown on the attachment whose upload failed.\n   */\n  uploadingError: InputSignal<string | undefined> = input<string | undefined>(undefined);\n  readonly filesValue: Signal<any> = computed(() => this.#returnAttachmentViewObject());\n  protected attachments: WritableSignal<IssFile[]> = signal([]);\n  #uploadedFilesEffectRef = effect(() => {\n    this.#markUploadedFiles();\n  });\n\n  /*todo needs review and refactor*/\n\n  ngOnDestroy(): void {\n    this.#uploadedFilesEffectRef.destroy();\n  }\n\n  override writeValue(val: FormData | string | null): void {\n    if (typeof val === \"string\") {\n      return;\n    }\n    this.#reset();\n    if (val) {\n      this.attachments.set([...this.attachments(), ...this.#convertFormDataToFiles(val)]);\n    }\n  }\n\n  protected onDelete(files: IssFile[]): void {\n    this.attachments.set(files);\n    this.emitValue(this.#formDataFactory(this.attachments()));\n  }\n\n  protected captureFile($event: FileList) {\n    if (this.readonly() || this.disabled()) {\n      return;\n    }\n    if (!$event) {\n      return;\n    }\n    if (!$event.length) {\n      return;\n    }\n    this.markAsTouched();\n    const files: File[] = Array.from($event);\n    const issFiles: IssFile[] = files.map((file: File): IssFile => {\n      return {\n        name: file.name,\n        size: file.size,\n        type: file.type,\n        selected: Date.now(),\n        file: file,\n      };\n    });\n    this.#updateAttachments(issFiles);\n    // The field component uploads this output.  Emit only the files selected in\n    // this interaction: `attachments` also contains files selected earlier, so\n    // serialising it would upload those files again whenever more are added.\n    this.emitValue(this.#formDataFactory(issFiles));\n  }\n\n  protected openFilePicker(input: HTMLInputElement): void {\n    if (this.readonly() || this.disabled()) {\n      return;\n    }\n    input.click();\n    this.markAsTouched();\n  }\n\n  #updateAttachments(selectedFiles: IssFile[]) {\n    if (!this.multiple()) {\n      this.attachments.set([selectedFiles[0]]);\n      return;\n    }\n    this.attachments.update((files: IssFile[]) => {\n      files = [...files, ...selectedFiles];\n      return files;\n    });\n  }\n\n  #formDataFactory(files: IssFile[]): FormData | null {\n    if (files.length === 0) {\n      return null;\n    }\n    const fd: FormData = new FormData();\n    let formDataKey = \"file\";\n    if (this.multiple()) {\n      formDataKey = \"files\";\n    }\n    for (let i = 0; i < files.length; i++) {\n      fd.append(formDataKey, (files[i].file as File));\n    }\n    return fd;\n  }\n\n  #reset() {\n    this.attachments.set([]);\n  }\n\n  #convertFormDataToFiles(val: FormData): IssFile[] {\n    if (!val || !(val instanceof FormData)) {\n      return [];\n    }\n    const files: File[] = [];\n    for (const pair of val.entries()) {\n      if (pair[1] instanceof File) {\n        files.push(pair[1]);\n      }\n    }\n    return files;\n  }\n\n  #markUploadedFiles() {\n    this.attachments.update((attachments: IssFile[]) => {\n      return attachments.map((attachment: IssFile) => {\n        // const uploadedFile = this.uploadedFiles().find((f) => f.selected === attachment.selected && f.name === attachment.name);\n        if (this.uploadingError()) {\n          attachment.errorMsg = this.uploadingError();\n        }\n        // if (uploadedFile) {\n        //   attachment.id = uploadedFile.id;\n        // }\n        return attachment;\n      });\n    });\n  }\n\n  #returnAttachmentViewObject() {\n    return {\n      config: {\n        showDownloadButton: this.showDownloadButton(),\n        showDeleteButton: this.showDeleteButton()\n      },\n      ctrlJsonValue: signal(this.attachments())\n    };\n  }\n}\n","// The file-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 \"./droppable\";\nexport * from \"./file-picker.control\";\nexport * from \"./file\";\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MAGa,SAAS,CAAA;IACpB,MAAM,GAA+B,MAAM,EAAE;AAG7C,IAAA,UAAU,CAAC,GAAQ,EAAA;QACjB,GAAG,CAAC,cAAc,EAAE;QACpB,GAAG,CAAC,eAAe,EAAE;IACvB;AAGA,IAAA,WAAW,CAAC,GAAQ,EAAA;QAClB,GAAG,CAAC,cAAc,EAAE;QACpB,GAAG,CAAC,eAAe,EAAE;IACvB;AAGA,IAAA,SAAS,CAAC,GAAQ,EAAA;QAChB,GAAG,CAAC,cAAc,EAAE;QACpB,GAAG,CAAC,eAAe,EAAE;QACrB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,KAAK,CAAC;IAC1C;uGApBW,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,UAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAT,SAAS,EAAA,UAAA,EAAA,CAAA;kBADrB,SAAS;mBAAC,EAAC,QAAQ,EAAE,aAAa,EAAC;;sBAIjC,YAAY;uBAAC,UAAU,EAAE,CAAC,QAAQ,CAAC;;sBAMnC,YAAY;uBAAC,WAAW,EAAE,CAAC,QAAQ,CAAC;;sBAMpC,YAAY;uBAAC,MAAM,EAAE,CAAC,QAAQ,CAAC;;;ACVlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BG;AA0DG,MAAO,iBAAkB,SAAQ,WAAW,CAAA;AAChD;;AAEG;IACH,MAAM,GAAoC,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,QAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAE;AACjD;;AAEG;AACH,IAAA,kBAAkB,GAAyB,KAAK,CAAC,IAAI,yFAAC;AACtD;;AAEG;AACH,IAAA,gBAAgB,GAAyB,KAAK,CAAC,IAAI,uFAAC;AACpD;;AAEG;AACH,IAAA,SAAS,GAAyB,KAAK,CAAC,KAAK,gFAAC;AAC9C;;AAEG;AACH,IAAA,aAAa,GAAiC,KAAK,CAAkB,EAAE,oFAAC;AACxE;;AAEG;AACH,IAAA,cAAc,GAAoC,KAAK,CAAqB,SAAS,qFAAC;IAC7E,UAAU,GAAgB,QAAQ,CAAC,MAAM,IAAI,CAAC,2BAA2B,EAAE,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,YAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;AAC3E,IAAA,WAAW,GAA8B,MAAM,CAAC,EAAE,kFAAC;AAC7D,IAAA,uBAAuB,GAAG,MAAM,CAAC,MAAK;QACpC,IAAI,CAAC,kBAAkB,EAAE;AAC3B,IAAA,CAAC,8FAAC;;IAIF,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,uBAAuB,CAAC,OAAO,EAAE;IACxC;AAES,IAAA,UAAU,CAAC,GAA6B,EAAA;AAC/C,QAAA,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;YAC3B;QACF;QACA,IAAI,CAAC,MAAM,EAAE;QACb,IAAI,GAAG,EAAE;YACP,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,EAAE,GAAG,IAAI,CAAC,uBAAuB,CAAC,GAAG,CAAC,CAAC,CAAC;QACrF;IACF;AAEU,IAAA,QAAQ,CAAC,KAAgB,EAAA;AACjC,QAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC;AAC3B,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;IAC3D;AAEU,IAAA,WAAW,CAAC,MAAgB,EAAA;QACpC,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACtC;QACF;QACA,IAAI,CAAC,MAAM,EAAE;YACX;QACF;AACA,QAAA,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;YAClB;QACF;QACA,IAAI,CAAC,aAAa,EAAE;QACpB,MAAM,KAAK,GAAW,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC;QACxC,MAAM,QAAQ,GAAc,KAAK,CAAC,GAAG,CAAC,CAAC,IAAU,KAAa;YAC5D,OAAO;gBACL,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,IAAI,EAAE,IAAI,CAAC,IAAI;AACf,gBAAA,QAAQ,EAAE,IAAI,CAAC,GAAG,EAAE;AACpB,gBAAA,IAAI,EAAE,IAAI;aACX;AACH,QAAA,CAAC,CAAC;AACF,QAAA,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC;;;;QAIjC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACjD;AAEU,IAAA,cAAc,CAAC,KAAuB,EAAA;QAC9C,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACtC;QACF;QACA,KAAK,CAAC,KAAK,EAAE;QACb,IAAI,CAAC,aAAa,EAAE;IACtB;AAEA,IAAA,kBAAkB,CAAC,aAAwB,EAAA;AACzC,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE;AACpB,YAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;YACxC;QACF;QACA,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,KAAgB,KAAI;YAC3C,KAAK,GAAG,CAAC,GAAG,KAAK,EAAE,GAAG,aAAa,CAAC;AACpC,YAAA,OAAO,KAAK;AACd,QAAA,CAAC,CAAC;IACJ;AAEA,IAAA,gBAAgB,CAAC,KAAgB,EAAA;AAC/B,QAAA,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;AACtB,YAAA,OAAO,IAAI;QACb;AACA,QAAA,MAAM,EAAE,GAAa,IAAI,QAAQ,EAAE;QACnC,IAAI,WAAW,GAAG,MAAM;AACxB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACnB,WAAW,GAAG,OAAO;QACvB;AACA,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACrC,YAAA,EAAE,CAAC,MAAM,CAAC,WAAW,EAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAa,CAAC;QACjD;AACA,QAAA,OAAO,EAAE;IACX;IAEA,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC;IAC1B;AAEA,IAAA,uBAAuB,CAAC,GAAa,EAAA;QACnC,IAAI,CAAC,GAAG,IAAI,EAAE,GAAG,YAAY,QAAQ,CAAC,EAAE;AACtC,YAAA,OAAO,EAAE;QACX;QACA,MAAM,KAAK,GAAW,EAAE;QACxB,KAAK,MAAM,IAAI,IAAI,GAAG,CAAC,OAAO,EAAE,EAAE;AAChC,YAAA,IAAI,IAAI,CAAC,CAAC,CAAC,YAAY,IAAI,EAAE;gBAC3B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YACrB;QACF;AACA,QAAA,OAAO,KAAK;IACd;IAEA,kBAAkB,GAAA;QAChB,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,WAAsB,KAAI;AACjD,YAAA,OAAO,WAAW,CAAC,GAAG,CAAC,CAAC,UAAmB,KAAI;;AAE7C,gBAAA,IAAI,IAAI,CAAC,cAAc,EAAE,EAAE;AACzB,oBAAA,UAAU,CAAC,QAAQ,GAAG,IAAI,CAAC,cAAc,EAAE;gBAC7C;;;;AAIA,gBAAA,OAAO,UAAU;AACnB,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC,CAAC;IACJ;IAEA,2BAA2B,GAAA;QACzB,OAAO;AACL,YAAA,MAAM,EAAE;AACN,gBAAA,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAAE;AAC7C,gBAAA,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;AACxC,aAAA;AACD,YAAA,aAAa,EAAE,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE;SACzC;IACH;uGA1JW,iBAAiB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,kBAAA,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,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,SAAA,EAjDjB;YACT,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,iBAAiB,EAAE,KAAK,EAAE,IAAI;SAC1E,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EACS;;;;;;;;;;;;;;;;;;AAkBT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,ihBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAzBC,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,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,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACnB,SAAS,EAAA,QAAA,EAAA,aAAA,EAAA,OAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACT,KAAK,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAmDI,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAzD7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,sBAAsB,EAAA,OAAA,EACvB,CAAC,sBAAsB,CAAC,EAAA,OAAA,EACxB;wBACP,mBAAmB;wBACnB,SAAS;wBACT,KAAK;qBACN,EAAA,SAAA,EACU;wBACT,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,mBAAmB,EAAE,KAAK,EAAE,IAAI;qBAC1E,EAAA,QAAA,EACS;;;;;;;;;;;;;;;;;;AAkBT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,ihBAAA,CAAA,EAAA;;;ACrEH;AACA;;ACDA;;AAEG;;;;"}