iss-ctrl 0.0.21 → 0.0.22

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

@@ -0,0 +1,272 @@
+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`
+ *
+ * Does not project a label — the field label is rendered by the wrapping `iss-field-*`.
+ */
+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: `
+    <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: `
+    <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 * Does not project a label — the field label is rendered by the wrapping `iss-field-*`.\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    <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":"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"}

package/fesm2022/iss-ctrl-input.field-Ctlf3OCN.mjs

@@ -0,0 +1,104 @@
+import * as i0 from '@angular/core';
+import { Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import { F as FieldBase, V as VIEW_PROVIDER, a as ValidationMessage, b as FieldViewer } from './iss-ctrl-iss-ctrl-DvnkwSMG.mjs';
+import { InputControl } from 'iss-ctrl/input';
+import { InputViewer } from './iss-ctrl-input.viewer-BOZnW0_e.mjs';
+
+/**
+ * `<iss-field-input>` — single line text, number, email or password entry.
+ *
+ * Rendered by the outlet for fields of type `text_input`. In `edit` mode it renders
+ * {@link InputControl} plus the validation message; in `view` mode the matching viewer.
+ *
+ * ### Supported `config` keys
+ * | Key | Type | Description |
+ * | --- | --- | --- |
+ * | `type` | `string` | Native input type — `text`, `number`, `email`, `password`, … |
+ * | `placeholder` | `string` | Placeholder shown while empty. |
+ * | `min` | `number` | Minimum numeric value. |
+ * | `max` | `number` | Maximum numeric value. |
+ * | `minLength` | `number` | Minimum number of characters. |
+ * | `maxLength` | `number` | Maximum number of characters. |
+ * | `readonly` | `boolean` | Shows the value but blocks interaction. |
+ *
+ * ### Other field members used
+ * `label()`
+ *
+ * Every field also honours `visible`, `mode`, `validation`, `asyncValidation` and
+ * `events` — see {@link IssField} for the full model and {@link FieldConfig} for all keys.
+ *
+ * @example
+ * ```json
+ * { "name": "email", "type": "text_input", "label": "Email", "config": { "type": "email", "maxLength": 120 } }
+ * ```
+ */
+class InputField extends FieldBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: InputField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: InputField, isStandalone: true, selector: "iss-field-input", usesInheritance: true, ngImport: i0, template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
+        <iss-ctrl-input
+          [formControlName]="field.name"
+          [type]="field.config.type() ?? ''"
+          [placeholder]="field.config.placeholder() ?? ''"
+          [min]="field.config.min() ?? null"
+          [max]="field.config.max() ?? null"
+          [readonly]="field.config.readonly() ?? false"
+          [minLength]="field.config.minLength() ?? null"
+          [maxLength]="field.config.maxLength() ?? null"
+        >
+          <label>{{ field.label() }}</label>
+        </iss-ctrl-input>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
+      } @else {
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-input [field]="field"/>
+        </iss-field-viewer>
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: InputControl, selector: "iss-ctrl-input", inputs: ["type", "prefixIcon", "prefixText", "suffixIcon", "suffixText"], outputs: ["onPrefixClick", "onSuffixClick"] }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: InputViewer, selector: "iss-viewer-input" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: InputField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "iss-field-input",
+                    viewProviders: [VIEW_PROVIDER],
+                    imports: [
+                        ReactiveFormsModule,
+                        InputControl,
+                        ValidationMessage,
+                        InputViewer,
+                        FieldViewer
+                    ],
+                    template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
+        <iss-ctrl-input
+          [formControlName]="field.name"
+          [type]="field.config.type() ?? ''"
+          [placeholder]="field.config.placeholder() ?? ''"
+          [min]="field.config.min() ?? null"
+          [max]="field.config.max() ?? null"
+          [readonly]="field.config.readonly() ?? false"
+          [minLength]="field.config.minLength() ?? null"
+          [maxLength]="field.config.maxLength() ?? null"
+        >
+          <label>{{ field.label() }}</label>
+        </iss-ctrl-input>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
+      } @else {
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-input [field]="field"/>
+        </iss-field-viewer>
+      }
+    }
+  `
+                }]
+        }] });
+
+export { InputField };
+//# sourceMappingURL=iss-ctrl-input.field-Ctlf3OCN.mjs.map

package/fesm2022/iss-ctrl-input.field-Ctlf3OCN.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"iss-ctrl-input.field-Ctlf3OCN.mjs","sources":["../../../projects/iss/src/components/controls/input/input.field.ts"],"sourcesContent":["import { Component } from \"@angular/core\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\nimport { VIEW_PROVIDER } from \"../../../shared/constants/view-provider.const\";\nimport { ValidationMessage } from \"../../shared/validation-message\";\nimport { FieldBase } from \"../base/field-base\";\nimport { InputControl } from \"iss-ctrl/input\";\nimport { InputViewer } from \"./input.viewer\";\nimport { FieldViewer } from \"../../shared/field-viewer\";\n\n/**\n * `<iss-field-input>` — single line text, number, email or password entry.\n *\n * Rendered by the outlet for fields of type `text_input`. In `edit` mode it renders\n * {@link InputControl} plus the validation message; in `view` mode the matching viewer.\n *\n * ### Supported `config` keys\n * | Key | Type | Description |\n * | --- | --- | --- |\n * | `type` | `string` | Native input type — `text`, `number`, `email`, `password`, … |\n * | `placeholder` | `string` | Placeholder shown while empty. |\n * | `min` | `number` | Minimum numeric value. |\n * | `max` | `number` | Maximum numeric value. |\n * | `minLength` | `number` | Minimum number of characters. |\n * | `maxLength` | `number` | Maximum number of characters. |\n * | `readonly` | `boolean` | Shows the value but blocks interaction. |\n *\n * ### Other field members used\n * `label()`\n *\n * Every field also honours `visible`, `mode`, `validation`, `asyncValidation` and\n * `events` — see {@link IssField} for the full model and {@link FieldConfig} for all keys.\n *\n * @example\n * ```json\n * { \"name\": \"email\", \"type\": \"text_input\", \"label\": \"Email\", \"config\": { \"type\": \"email\", \"maxLength\": 120 } }\n * ```\n */\n@Component({\n  selector: \"iss-field-input\",\n  viewProviders: [VIEW_PROVIDER],\n  imports: [\n    ReactiveFormsModule,\n    InputControl,\n    ValidationMessage,\n    InputViewer,\n    FieldViewer\n  ],\n  template: `\n    @if (field.visible()) {\n      @if (field.mode() === \"edit\") {\n        <iss-ctrl-input\n          [formControlName]=\"field.name\"\n          [type]=\"field.config.type() ?? ''\"\n          [placeholder]=\"field.config.placeholder() ?? ''\"\n          [min]=\"field.config.min() ?? null\"\n          [max]=\"field.config.max() ?? null\"\n          [readonly]=\"field.config.readonly() ?? false\"\n          [minLength]=\"field.config.minLength() ?? null\"\n          [maxLength]=\"field.config.maxLength() ?? null\"\n        >\n          <label>{{ field.label() }}</label>\n        </iss-ctrl-input>\n        <iss-validation-message-viewer [errors]=\"ctrl.errors\" [showMessage]=\"!ctrl.untouched\"/>\n      } @else {\n        <iss-field-viewer>\n          <label>{{ field.label() }}</label>\n          <iss-viewer-input [field]=\"field\"/>\n        </iss-field-viewer>\n      }\n    }\n  `\n})\nexport class InputField extends FieldBase {}\n"],"names":[],"mappings":";;;;;;;;AASA;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BG;AAoCG,MAAO,UAAW,SAAQ,SAAS,CAAA;uGAA5B,UAAU,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAzBX;;;;;;;;;;;;;;;;;;;;;;;AAuBT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EA7BC,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACnB,YAAY,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACZ,iBAAiB,EAAA,QAAA,EAAA,+BAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACjB,WAAW,EAAA,QAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACX,WAAW,EAAA,QAAA,EAAA,kBAAA,EAAA,CAAA,EAAA,aAAA,EANE,CAAC,aAAa,CAAC,EAAA,CAAA;;2FAiCnB,UAAU,EAAA,UAAA,EAAA,CAAA;kBAnCtB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;oBAC3B,aAAa,EAAE,CAAC,aAAa,CAAC;AAC9B,oBAAA,OAAO,EAAE;wBACP,mBAAmB;wBACnB,YAAY;wBACZ,iBAAiB;wBACjB,WAAW;wBACX;AACD,qBAAA;AACD,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;AAuBT,EAAA;AACF,iBAAA;;;;;"}

package/fesm2022/iss-ctrl-input.mjs

@@ -0,0 +1,204 @@
+import * as i0 from '@angular/core';
+import { input, output, effect, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import * as i2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInput, MatInputModule } from '@angular/material/input';
+import { ControlBase, Hints } from 'iss-ctrl/base';
+
+/**
+ * `<iss-ctrl-input>` — single line text input, the base for every scalar text field.
+ *
+ * `type` is forwarded to the native input, so `number`, `email` and `password` variants all
+ * come from this one control.
+ *
+ * @example
+ * ```html
+ * <iss-ctrl-input formControlName="amount" type="number" [min]="0" suffixText="SAR">
+ *   <label>Amount</label>
+ * </iss-ctrl-input>
+ * ```
+ *
+ * ### Own inputs
+ * | Property | Type | Default | Description |
+ * | --- | --- | --- | --- |
+ * | `type` | `string` | `"text"` | Native input type: `text`, `number`, `email`, `password`, … |
+ * | `prefixIcon` | `string` | `""` | Icon rendered before the value. |
+ * | `prefixText` | `string` | `""` | Text rendered before the value. |
+ * | `suffixIcon` | `string` | `""` | Icon rendered after the value. |
+ * | `suffixText` | `string` | `""` | Text rendered after the value. |
+ *
+ * ### Inherited from {@link ControlBase}
+ * `formControlName` · `readonly` · `className` · `(onChange)` · `placeholder` · `min` · `max` · `minLength` · `maxLength` · `hints`
+ *
+ * ### Outputs
+ * - `(onPrefixClick)` — `string`, the prefix affix was clicked.
+ * - `(onSuffixClick)` — `string`, the suffix affix was clicked.
+ *
+ * Projects `<label>` into the floating label; omit it to render the control without one.
+ *
+ * Also projects `[issPrefix]` and `[issSuffix]` for fully custom affixes.
+ */
+class InputControl extends ControlBase {
+    /**
+     * Native input type — `text`, `number`, `email`, `password`, and so on.
+     */
+    type = input("text", ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /**
+     * Icon name rendered before the value.
+     */
+    prefixIcon = input("", ...(ngDevMode ? [{ debugName: "prefixIcon" }] : /* istanbul ignore next */ []));
+    /**
+     * Static text rendered before the value.
+     */
+    prefixText = input("", ...(ngDevMode ? [{ debugName: "prefixText" }] : /* istanbul ignore next */ []));
+    /**
+     * Icon name rendered after the value.
+     */
+    suffixIcon = input("", ...(ngDevMode ? [{ debugName: "suffixIcon" }] : /* istanbul ignore next */ []));
+    /**
+     * Static text rendered after the value, a unit or currency for example.
+     */
+    suffixText = input("", ...(ngDevMode ? [{ debugName: "suffixText" }] : /* istanbul ignore next */ []));
+    /**
+     * Emits when the prefix affix is clicked.
+     */
+    onPrefixClick = output();
+    /**
+     * Emits when the suffix affix is clicked.
+     */
+    onSuffixClick = output();
+    #disabledEffect = effect(() => {
+        if (this.disabled()) {
+            this.ctrl.disable();
+        }
+        else {
+            this.ctrl.enable();
+        }
+    }, ...(ngDevMode ? [{ debugName: "#disabledEffect" }] : /* istanbul ignore next */ []));
+    emitSuffixClick() {
+        this.onSuffixClick.emit(this.ctrl.getRawValue());
+    }
+    emitPrefixClick() {
+        this.onPrefixClick.emit(this.ctrl.getRawValue());
+    }
+    ngOnDestroy() {
+        this.#disabledEffect.destroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: InputControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: InputControl, isStandalone: true, selector: "iss-ctrl-input", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, suffixText: { classPropertyName: "suffixText", publicName: "suffixText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onPrefixClick: "onPrefixClick", onSuffixClick: "onSuffixClick" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: InputControl, multi: true },
+            { provide: NG_VALIDATORS, useExisting: InputControl, multi: true }
+        ], usesInheritance: true, ngImport: i0, template: `
+    <mat-form-field floatLabel="auto" class="">
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-dark-gray">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <ng-content select="[issPrefix]"></ng-content>
+      <div (click)="emitPrefixClick()" class="cursor-pointer">
+        @if (prefixText()) {
+          <span matTextPrefix>{{ prefixText() }}</span>
+        }
+        @if (prefixIcon()) {
+          <ds-icon matPrefix icon="{{prefixIcon()}}"></ds-icon>
+        }
+      </div>
+      <input
+        matInput
+        [errorStateMatcher]="errorStateMatcher"
+        (blur)="markAsTouched()"
+        (input)="emitValue()"
+        [formControl]="ctrl"
+        [attr.maxlength]="maxLength()"
+        [attr.minlength]="minLength()"
+        [attr.max]="max()"
+        [attr.min]="min()"
+        [placeholder]="placeholder()"
+        [readonly]="readonly()"
+        [type]="type()"
+      />
+      <ng-content select="[issSuffix]"></ng-content>
+      <div (click)="emitSuffixClick()" class="cursor-pointer">
+        @if (suffixText()) {
+          <span matTextSuffix>{{ suffixText() }}</span>
+        }
+        @if (suffixIcon()) {
+          <ds-icon matSuffix icon="{{suffixIcon()}}"></ds-icon>
+        }
+      </div>
+      <iss-ctrl-hints [hints]="hints()" [touched]="touched()"/>
+    </mat-form-field>
+  `, 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: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: Hints, selector: "iss-ctrl-hints", inputs: ["hints", "touched"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatInputModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: InputControl, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "iss-ctrl-input",
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        Hints,
+                        MatInput,
+                        MatInputModule,
+                    ],
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: InputControl, multi: true },
+                        { provide: NG_VALIDATORS, useExisting: InputControl, multi: true }
+                    ],
+                    template: `
+    <mat-form-field floatLabel="auto" class="">
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-dark-gray">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <ng-content select="[issPrefix]"></ng-content>
+      <div (click)="emitPrefixClick()" class="cursor-pointer">
+        @if (prefixText()) {
+          <span matTextPrefix>{{ prefixText() }}</span>
+        }
+        @if (prefixIcon()) {
+          <ds-icon matPrefix icon="{{prefixIcon()}}"></ds-icon>
+        }
+      </div>
+      <input
+        matInput
+        [errorStateMatcher]="errorStateMatcher"
+        (blur)="markAsTouched()"
+        (input)="emitValue()"
+        [formControl]="ctrl"
+        [attr.maxlength]="maxLength()"
+        [attr.minlength]="minLength()"
+        [attr.max]="max()"
+        [attr.min]="min()"
+        [placeholder]="placeholder()"
+        [readonly]="readonly()"
+        [type]="type()"
+      />
+      <ng-content select="[issSuffix]"></ng-content>
+      <div (click)="emitSuffixClick()" class="cursor-pointer">
+        @if (suffixText()) {
+          <span matTextSuffix>{{ suffixText() }}</span>
+        }
+        @if (suffixIcon()) {
+          <ds-icon matSuffix icon="{{suffixIcon()}}"></ds-icon>
+        }
+      </div>
+      <iss-ctrl-hints [hints]="hints()" [touched]="touched()"/>
+    </mat-form-field>
+  `
+                }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }], suffixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixText", required: false }] }], onPrefixClick: [{ type: i0.Output, args: ["onPrefixClick"] }], onSuffixClick: [{ type: i0.Output, args: ["onSuffixClick"] }] } });
+
+// The input 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 { InputControl };
+//# sourceMappingURL=iss-ctrl-input.mjs.map