ngwr 6.1.1 → 7.0.0

package/fesm2022/ngwr-file-upload.mjs

@@ -0,0 +1,260 @@
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
+import * as i0 from '@angular/core';
+import { input, output, viewChild, signal, computed, forwardRef, ViewEncapsulation, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { useI18nText } from 'ngwr/i18n';
+import { noop } from 'ngwr/utils';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/** Human-readable byte size (e.g. `1.2 MB`). */
+function formatBytes(bytes) {
+    if (!Number.isFinite(bytes) || bytes <= 0)
+        return '0 B';
+    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+    const v = bytes / 1024 ** i;
+    return `${v.toFixed(v >= 100 || i === 0 ? 0 : 1)} ${units[i]}`;
+}
+/** Does `file` match the `accept` attribute (extensions or MIME globs)? */
+function matchesAccept(file, accept) {
+    if (!accept)
+        return true;
+    const tokens = accept
+        .split(',')
+        .map(t => t.trim().toLowerCase())
+        .filter(Boolean);
+    if (tokens.length === 0)
+        return true;
+    const name = file.name.toLowerCase();
+    const mime = file.type.toLowerCase();
+    return tokens.some(token => {
+        if (token.startsWith('.'))
+            return name.endsWith(token);
+        if (token.endsWith('/*'))
+            return mime.startsWith(token.slice(0, -1));
+        return mime === token;
+    });
+}
+/**
+ * Drag-and-drop file upload zone. Click to browse, drag-and-drop to add,
+ * with an optional file list + remove buttons.
+ *
+ * Implements `ControlValueAccessor` — value is `File | File[] | null`
+ * (single or array, governed by `multiple`).
+ *
+ * @example
+ * ```html
+ * <wr-file-upload [(ngModel)]="files" [multiple]="true" accept="image/*" />
+ * <wr-file-upload [(ngModel)]="avatar" accept=".png,.jpg" [maxSize]="2 * 1024 * 1024" />
+ * ```
+ *
+ * @see https://ngwr.dev/components/file-upload
+ */
+class WrFileUpload {
+    /** Allow multiple files. Single mode replaces on each add. @default false */
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** `accept` attribute — comma-separated MIME types or extensions. @default '' */
+    accept = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    /** Max bytes per file. `0` disables the check. @default 0 */
+    maxSize = input(0, { ...(ngDevMode ? { debugName: "maxSize" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0, coerceNumberProperty(v, 0)) });
+    /** Max files (multi mode only). `0` disables the check. @default 0 */
+    maxFiles = input(0, { ...(ngDevMode ? { debugName: "maxFiles" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0, coerceNumberProperty(v, 0)) });
+    /** Render the picked-files list below the zone. @default true */
+    showList = input(true, { ...(ngDevMode ? { debugName: "showList" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Disable interaction. @default false */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Primary call-to-action label. Falls back to `fileUpload.browse`. */
+    pickLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pickLabel" }] : /* istanbul ignore next */ []));
+    /** Secondary instruction below the CTA. Falls back to `fileUpload.dropZone`. */
+    dropLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropLabel" }] : /* istanbul ignore next */ []));
+    /** Drop-zone host aria-label. Falls back to `fileUpload.dropZoneLabel`. */
+    dropZoneLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropZoneLabel" }] : /* istanbul ignore next */ []));
+    /** Remove-file button aria-label. Falls back to `fileUpload.removeFile`. */
+    removeFileLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "removeFileLabel" }] : /* istanbul ignore next */ []));
+    resolvedPick = useI18nText(this.pickLabel, 'fileUpload.browse', 'Click to browse');
+    resolvedDrop = useI18nText(this.dropLabel, 'fileUpload.dropZone', 'or drop files here');
+    resolvedDropZone = useI18nText(this.dropZoneLabel, 'fileUpload.dropZoneLabel', 'File upload drop zone — click or drop files');
+    resolvedRemove = useI18nText(this.removeFileLabel, 'fileUpload.removeFile', 'Remove file');
+    /** Optional helper text shown below the labels (e.g. accepted formats). */
+    helperText = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
+    /** Emitted when files are rejected for type / size / count reasons. */
+    rejected = output();
+    picker = viewChild.required('picker');
+    files = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+    dragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    disabledFromCva = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledFromCva" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => this.disabled() || this.disabledFromCva(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const parts = ['wr-file-upload'];
+        if (this.dragging())
+            parts.push('wr-file-upload--dragging');
+        if (this.effectiveDisabled())
+            parts.push('wr-file-upload--disabled');
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    formatBytes = formatBytes;
+    // ControlValueAccessor
+    onChange = noop;
+    onTouched = noop;
+    writeValue(value) {
+        if (value === null || value === undefined) {
+            this.files.set([]);
+            return;
+        }
+        this.files.set(Array.isArray(value) ? value : [value]);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledFromCva.set(coerceBooleanProperty(isDisabled));
+    }
+    // Template handlers
+    openPicker() {
+        if (this.effectiveDisabled())
+            return;
+        this.picker().nativeElement.click();
+    }
+    onZoneKey(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.openPicker();
+        }
+    }
+    onPickerChange(event) {
+        const target = event.target;
+        if (target.files)
+            this.acceptFiles(Array.from(target.files));
+        // Reset so picking the same file twice re-fires `change`.
+        target.value = '';
+    }
+    onDragEnter(event) {
+        if (this.effectiveDisabled())
+            return;
+        event.preventDefault();
+        this.dragging.set(true);
+    }
+    onDragOver(event) {
+        if (this.effectiveDisabled())
+            return;
+        event.preventDefault();
+        if (event.dataTransfer)
+            event.dataTransfer.dropEffect = 'copy';
+    }
+    onDragLeave(event) {
+        // Only clear when leaving the zone itself, not internal children.
+        if (event.currentTarget === event.target)
+            this.dragging.set(false);
+    }
+    onDrop(event) {
+        event.preventDefault();
+        this.dragging.set(false);
+        if (this.effectiveDisabled())
+            return;
+        const dropped = event.dataTransfer?.files ? Array.from(event.dataTransfer.files) : [];
+        if (dropped.length > 0)
+            this.acceptFiles(dropped);
+    }
+    removeAt(index) {
+        if (this.effectiveDisabled())
+            return;
+        const next = this.files().filter((_, i) => i !== index);
+        this.files.set(next);
+        this.emit();
+    }
+    // Internals
+    acceptFiles(incoming) {
+        const accept = this.accept();
+        const maxSize = this.maxSize();
+        const rejections = [];
+        const accepted = [];
+        for (const file of incoming) {
+            const reason = this.reject(file, accept, maxSize);
+            if (reason)
+                rejections.push({ file, reason });
+            else
+                accepted.push(file);
+        }
+        let next;
+        if (this.multiple()) {
+            next = [...this.files(), ...accepted];
+            const maxFiles = this.maxFiles();
+            if (maxFiles > 0 && next.length > maxFiles) {
+                const overflow = next.splice(maxFiles);
+                for (const file of overflow)
+                    rejections.push({ file, reason: 'count' });
+            }
+        }
+        else {
+            // Single mode — last accepted wins, prior selection cleared.
+            next = accepted.length > 0 ? [accepted[accepted.length - 1]] : [...this.files()];
+        }
+        this.files.set(next);
+        this.onTouched();
+        this.emit();
+        if (rejections.length > 0)
+            this.rejected.emit(rejections);
+    }
+    reject(file, accept, maxSize) {
+        if (accept && !matchesAccept(file, accept))
+            return 'type';
+        if (maxSize > 0 && file.size > maxSize)
+            return 'size';
+        return null;
+    }
+    emit() {
+        const list = this.files();
+        if (this.multiple()) {
+            this.onChange(list);
+        }
+        else {
+            this.onChange(list.length > 0 ? list[0] : null);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrFileUpload, isStandalone: true, selector: "wr-file-upload", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, showList: { classPropertyName: "showList", publicName: "showList", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, pickLabel: { classPropertyName: "pickLabel", publicName: "pickLabel", isSignal: true, isRequired: false, transformFunction: null }, dropLabel: { classPropertyName: "dropLabel", publicName: "dropLabel", isSignal: true, isRequired: false, transformFunction: null }, dropZoneLabel: { classPropertyName: "dropZoneLabel", publicName: "dropZoneLabel", isSignal: true, isRequired: false, transformFunction: null }, removeFileLabel: { classPropertyName: "removeFileLabel", publicName: "removeFileLabel", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rejected: "rejected" }, host: { properties: { "class": "classes()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                // eslint-disable-next-line @angular-eslint/no-forward-ref
+                useExisting: forwardRef(() => WrFileUpload),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"wr-file-upload__zone\"\n  role=\"button\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"resolvedDropZone()\"\n  [attr.aria-disabled]=\"effectiveDisabled() || null\"\n  (click)=\"openPicker()\"\n  (keydown)=\"onZoneKey($event)\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <svg class=\"wr-file-upload__icon\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <path\n      d=\"M12 16V4M12 4l-4 4M12 4l4 4M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n  <div class=\"wr-file-upload__hint\">\n    <strong>{{ resolvedPick() }}</strong>\n    <span>{{ resolvedDrop() }}</span>\n    @if (helperText()) {\n      <small>{{ helperText() }}</small>\n    }\n  </div>\n  <input\n    #picker\n    class=\"wr-file-upload__picker\"\n    type=\"file\"\n    [attr.accept]=\"accept() || null\"\n    [attr.multiple]=\"multiple() ? '' : null\"\n    [disabled]=\"effectiveDisabled()\"\n    (change)=\"onPickerChange($event)\"\n  />\n</div>\n\n@if (showList() && files().length > 0) {\n  <ul class=\"wr-file-upload__list\">\n    @for (file of files(); track $index) {\n      <li class=\"wr-file-upload__item\">\n        <span class=\"wr-file-upload__name\" [title]=\"file.name\">{{ file.name }}</span>\n        <span class=\"wr-file-upload__size\">{{ formatBytes(file.size) }}</span>\n        <button\n          type=\"button\"\n          class=\"wr-file-upload__remove\"\n          [attr.aria-label]=\"resolvedRemove()\"\n          [disabled]=\"effectiveDisabled()\"\n          (click)=\"removeAt($index)\"\n        >\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n            <path\n              d=\"M2 2 L10 10 M10 2 L2 10\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </button>\n      </li>\n    }\n  </ul>\n}\n", encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrFileUpload, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-file-upload', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            // eslint-disable-next-line @angular-eslint/no-forward-ref
+                            useExisting: forwardRef(() => WrFileUpload),
+                            multi: true,
+                        },
+                    ], template: "<div\n  class=\"wr-file-upload__zone\"\n  role=\"button\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"resolvedDropZone()\"\n  [attr.aria-disabled]=\"effectiveDisabled() || null\"\n  (click)=\"openPicker()\"\n  (keydown)=\"onZoneKey($event)\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <svg class=\"wr-file-upload__icon\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <path\n      d=\"M12 16V4M12 4l-4 4M12 4l4 4M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n  <div class=\"wr-file-upload__hint\">\n    <strong>{{ resolvedPick() }}</strong>\n    <span>{{ resolvedDrop() }}</span>\n    @if (helperText()) {\n      <small>{{ helperText() }}</small>\n    }\n  </div>\n  <input\n    #picker\n    class=\"wr-file-upload__picker\"\n    type=\"file\"\n    [attr.accept]=\"accept() || null\"\n    [attr.multiple]=\"multiple() ? '' : null\"\n    [disabled]=\"effectiveDisabled()\"\n    (change)=\"onPickerChange($event)\"\n  />\n</div>\n\n@if (showList() && files().length > 0) {\n  <ul class=\"wr-file-upload__list\">\n    @for (file of files(); track $index) {\n      <li class=\"wr-file-upload__item\">\n        <span class=\"wr-file-upload__name\" [title]=\"file.name\">{{ file.name }}</span>\n        <span class=\"wr-file-upload__size\">{{ formatBytes(file.size) }}</span>\n        <button\n          type=\"button\"\n          class=\"wr-file-upload__remove\"\n          [attr.aria-label]=\"resolvedRemove()\"\n          [disabled]=\"effectiveDisabled()\"\n          (click)=\"removeAt($index)\"\n        >\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n            <path\n              d=\"M2 2 L10 10 M10 2 L2 10\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </button>\n      </li>\n    }\n  </ul>\n}\n" }]
+        }], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], showList: [{ type: i0.Input, args: [{ isSignal: true, alias: "showList", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], pickLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickLabel", required: false }] }], dropLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropLabel", required: false }] }], dropZoneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropZoneLabel", required: false }] }], removeFileLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeFileLabel", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], rejected: [{ type: i0.Output, args: ["rejected"] }], picker: [{ type: i0.ViewChild, args: ['picker', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrFileUpload };
+//# sourceMappingURL=ngwr-file-upload.mjs.map

package/fesm2022/ngwr-file-upload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-file-upload.mjs","sources":["../../../projects/lib/file-upload/file-upload.ts","../../../projects/lib/file-upload/file-upload.html","../../../projects/lib/file-upload/ngwr-file-upload.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport {\n  Component,\n  type ElementRef,\n  ViewEncapsulation,\n  computed,\n  forwardRef,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { noop } from 'ngwr/utils';\n\nimport type { WrFileUploadRejection, WrFileUploadRejectionReason } from './interfaces';\n\n/** Human-readable byte size (e.g. `1.2 MB`). */\nfunction formatBytes(bytes: number): string {\n  if (!Number.isFinite(bytes) || bytes <= 0) return '0 B';\n  const units = ['B', 'KB', 'MB', 'GB', 'TB'];\n  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);\n  const v = bytes / 1024 ** i;\n  return `${v.toFixed(v >= 100 || i === 0 ? 0 : 1)} ${units[i]}`;\n}\n\n/** Does `file` match the `accept` attribute (extensions or MIME globs)? */\nfunction matchesAccept(file: File, accept: string): boolean {\n  if (!accept) return true;\n  const tokens = accept\n    .split(',')\n    .map(t => t.trim().toLowerCase())\n    .filter(Boolean);\n  if (tokens.length === 0) return true;\n  const name = file.name.toLowerCase();\n  const mime = file.type.toLowerCase();\n  return tokens.some(token => {\n    if (token.startsWith('.')) return name.endsWith(token);\n    if (token.endsWith('/*')) return mime.startsWith(token.slice(0, -1));\n    return mime === token;\n  });\n}\n\n/**\n * Drag-and-drop file upload zone. Click to browse, drag-and-drop to add,\n * with an optional file list + remove buttons.\n *\n * Implements `ControlValueAccessor` — value is `File | File[] | null`\n * (single or array, governed by `multiple`).\n *\n * @example\n * ```html\n * <wr-file-upload [(ngModel)]=\"files\" [multiple]=\"true\" accept=\"image/*\" />\n * <wr-file-upload [(ngModel)]=\"avatar\" accept=\".png,.jpg\" [maxSize]=\"2 * 1024 * 1024\" />\n * ```\n *\n * @see https://ngwr.dev/components/file-upload\n */\n@Component({\n  selector: 'wr-file-upload',\n  templateUrl: './file-upload.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n  imports: [],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => WrFileUpload),\n      multi: true,\n    },\n  ],\n})\nexport class WrFileUpload implements ControlValueAccessor {\n  /** Allow multiple files. Single mode replaces on each add. @default false */\n  readonly multiple = input(false, { transform: coerceBooleanProperty });\n\n  /** `accept` attribute — comma-separated MIME types or extensions. @default '' */\n  readonly accept = input<string>('');\n\n  /** Max bytes per file. `0` disables the check. @default 0 */\n  readonly maxSize = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n  /** Max files (multi mode only). `0` disables the check. @default 0 */\n  readonly maxFiles = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n  /** Render the picked-files list below the zone. @default true */\n  readonly showList = input(true, { transform: coerceBooleanProperty });\n\n  /** Disable interaction. @default false */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** Primary call-to-action label. Falls back to `fileUpload.browse`. */\n  readonly pickLabel = input<string | null>(null);\n\n  /** Secondary instruction below the CTA. Falls back to `fileUpload.dropZone`. */\n  readonly dropLabel = input<string | null>(null);\n\n  /** Drop-zone host aria-label. Falls back to `fileUpload.dropZoneLabel`. */\n  readonly dropZoneLabel = input<string | null>(null);\n\n  /** Remove-file button aria-label. Falls back to `fileUpload.removeFile`. */\n  readonly removeFileLabel = input<string | null>(null);\n\n  protected readonly resolvedPick = useI18nText(this.pickLabel, 'fileUpload.browse', 'Click to browse');\n  protected readonly resolvedDrop = useI18nText(this.dropLabel, 'fileUpload.dropZone', 'or drop files here');\n  protected readonly resolvedDropZone = useI18nText(\n    this.dropZoneLabel,\n    'fileUpload.dropZoneLabel',\n    'File upload drop zone — click or drop files'\n  );\n  protected readonly resolvedRemove = useI18nText(this.removeFileLabel, 'fileUpload.removeFile', 'Remove file');\n\n  /** Optional helper text shown below the labels (e.g. accepted formats). */\n  readonly helperText = input<string>('');\n\n  /** Emitted when files are rejected for type / size / count reasons. */\n  readonly rejected = output<readonly WrFileUploadRejection[]>();\n\n  protected readonly picker = viewChild.required<ElementRef<HTMLInputElement>>('picker');\n\n  protected readonly files = signal<readonly File[]>([]);\n  protected readonly dragging = signal(false);\n\n  private readonly disabledFromCva = signal(false);\n\n  protected readonly effectiveDisabled = computed(() => this.disabled() || this.disabledFromCva());\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-file-upload'];\n    if (this.dragging()) parts.push('wr-file-upload--dragging');\n    if (this.effectiveDisabled()) parts.push('wr-file-upload--disabled');\n    return parts.join(' ');\n  });\n\n  protected readonly formatBytes = formatBytes;\n\n  // ControlValueAccessor\n\n  private onChange: (value: File | readonly File[] | null) => void = noop;\n  private onTouched: () => void = noop;\n\n  writeValue(value: File | readonly File[] | null): void {\n    if (value === null || value === undefined) {\n      this.files.set([]);\n      return;\n    }\n    this.files.set(Array.isArray(value) ? value : [value as File]);\n  }\n\n  registerOnChange(fn: (value: File | readonly File[] | null) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabledFromCva.set(coerceBooleanProperty(isDisabled));\n  }\n\n  // Template handlers\n\n  protected openPicker(): void {\n    if (this.effectiveDisabled()) return;\n    this.picker().nativeElement.click();\n  }\n\n  protected onZoneKey(event: KeyboardEvent): void {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.openPicker();\n    }\n  }\n\n  protected onPickerChange(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    if (target.files) this.acceptFiles(Array.from(target.files));\n    // Reset so picking the same file twice re-fires `change`.\n    target.value = '';\n  }\n\n  protected onDragEnter(event: DragEvent): void {\n    if (this.effectiveDisabled()) return;\n    event.preventDefault();\n    this.dragging.set(true);\n  }\n\n  protected onDragOver(event: DragEvent): void {\n    if (this.effectiveDisabled()) return;\n    event.preventDefault();\n    if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy';\n  }\n\n  protected onDragLeave(event: DragEvent): void {\n    // Only clear when leaving the zone itself, not internal children.\n    if (event.currentTarget === event.target) this.dragging.set(false);\n  }\n\n  protected onDrop(event: DragEvent): void {\n    event.preventDefault();\n    this.dragging.set(false);\n    if (this.effectiveDisabled()) return;\n    const dropped = event.dataTransfer?.files ? Array.from(event.dataTransfer.files) : [];\n    if (dropped.length > 0) this.acceptFiles(dropped);\n  }\n\n  protected removeAt(index: number): void {\n    if (this.effectiveDisabled()) return;\n    const next = this.files().filter((_, i) => i !== index);\n    this.files.set(next);\n    this.emit();\n  }\n\n  // Internals\n\n  private acceptFiles(incoming: readonly File[]): void {\n    const accept = this.accept();\n    const maxSize = this.maxSize();\n    const rejections: WrFileUploadRejection[] = [];\n    const accepted: File[] = [];\n\n    for (const file of incoming) {\n      const reason = this.reject(file, accept, maxSize);\n      if (reason) rejections.push({ file, reason });\n      else accepted.push(file);\n    }\n\n    let next: File[];\n    if (this.multiple()) {\n      next = [...this.files(), ...accepted];\n      const maxFiles = this.maxFiles();\n      if (maxFiles > 0 && next.length > maxFiles) {\n        const overflow = next.splice(maxFiles);\n        for (const file of overflow) rejections.push({ file, reason: 'count' });\n      }\n    } else {\n      // Single mode — last accepted wins, prior selection cleared.\n      next = accepted.length > 0 ? [accepted[accepted.length - 1]] : [...this.files()];\n    }\n\n    this.files.set(next);\n    this.onTouched();\n    this.emit();\n    if (rejections.length > 0) this.rejected.emit(rejections);\n  }\n\n  private reject(file: File, accept: string, maxSize: number): WrFileUploadRejectionReason | null {\n    if (accept && !matchesAccept(file, accept)) return 'type';\n    if (maxSize > 0 && file.size > maxSize) return 'size';\n    return null;\n  }\n\n  private emit(): void {\n    const list = this.files();\n    if (this.multiple()) {\n      this.onChange(list);\n    } else {\n      this.onChange(list.length > 0 ? list[0] : null);\n    }\n  }\n}\n","<div\n  class=\"wr-file-upload__zone\"\n  role=\"button\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"resolvedDropZone()\"\n  [attr.aria-disabled]=\"effectiveDisabled() || null\"\n  (click)=\"openPicker()\"\n  (keydown)=\"onZoneKey($event)\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <svg class=\"wr-file-upload__icon\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <path\n      d=\"M12 16V4M12 4l-4 4M12 4l4 4M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n  <div class=\"wr-file-upload__hint\">\n    <strong>{{ resolvedPick() }}</strong>\n    <span>{{ resolvedDrop() }}</span>\n    @if (helperText()) {\n      <small>{{ helperText() }}</small>\n    }\n  </div>\n  <input\n    #picker\n    class=\"wr-file-upload__picker\"\n    type=\"file\"\n    [attr.accept]=\"accept() || null\"\n    [attr.multiple]=\"multiple() ? '' : null\"\n    [disabled]=\"effectiveDisabled()\"\n    (change)=\"onPickerChange($event)\"\n  />\n</div>\n\n@if (showList() && files().length > 0) {\n  <ul class=\"wr-file-upload__list\">\n    @for (file of files(); track $index) {\n      <li class=\"wr-file-upload__item\">\n        <span class=\"wr-file-upload__name\" [title]=\"file.name\">{{ file.name }}</span>\n        <span class=\"wr-file-upload__size\">{{ formatBytes(file.size) }}</span>\n        <button\n          type=\"button\"\n          class=\"wr-file-upload__remove\"\n          [attr.aria-label]=\"resolvedRemove()\"\n          [disabled]=\"effectiveDisabled()\"\n          (click)=\"removeAt($index)\"\n        >\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n            <path\n              d=\"M2 2 L10 10 M10 2 L2 10\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </button>\n      </li>\n    }\n  </ul>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-form.mjs

@@ -1,5 +1,7 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, booleanAttribute, Input } from '@angular/core';
+import { input, computed, ViewEncapsulation, Component, contentChild } from '@angular/core';
+import { NgControl } from '@angular/forms';
 
 /**
  * @license
@@ -8,28 +10,48 @@ import { Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, boo
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
 /**
- * NGWR form error component.
+ * Wraps a label + control + error message into a single field row.
  *
- * {@tutorial} [How to use wr-alert]{@link http://ngwr.dev/docs/components/form}
+ * Toggle `hasError` to apply error styling to the projected label and
+ * any descendant input / textarea / checkbox.
+ *
+ * @example
+ * ```html
+ * <wr-form-item [hasError]="form.controls.email.invalid">
+ *   <label>Email</label>
+ *   <wr-input formControlName="email" />
+ *   <wr-form-error>Invalid email</wr-form-error>
+ * </wr-form-item>
+ * ```
+ *
+ * @see https://ngwr.dev/components/form
  */
-class WrFormErrorComponent {
-    constructor() {
-        this.class = 'wr-form-error';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrFormErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: WrFormErrorComponent, isStandalone: true, selector: "wr-form-error", host: { properties: { "class": "this.class" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+class WrFormItem {
+    /**
+     * When `true`, applies error coloring to the projected label and inputs.
+     *
+     * @default false
+     */
+    hasError = input(false, { ...(ngDevMode ? { debugName: "hasError" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    classes = computed(() => {
+        const parts = ['wr-form-item'];
+        if (this.hasError())
+            parts.push('wr-form-item--error');
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrFormItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: WrFormItem, isStandalone: true, selector: "wr-form-item", inputs: { hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrFormErrorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrFormItem, decorators: [{
             type: Component,
             args: [{
-                    selector: 'wr-form-error',
-                    template: `<ng-content />`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'wr-form-item',
+                    template: '<ng-content />',
                     encapsulation: ViewEncapsulation.None,
+                    host: { '[class]': 'classes()' },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding
-            }] } });
+        }], propDecorators: { hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }] } });
 
 /**
  * @license
@@ -37,50 +59,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
+let uid = 0;
 /**
- * NGWR form item component.
+ * Wraps a label + control + hint + error messages into a single block —
+ * the layout primitive every form ends up reinventing.
+ *
+ * - Auto-binds `label[for]` to the projected control via a generated id
+ *   (or use the form-control's `[id]` if you set one).
+ * - Reads the projected control's `NgControl` to surface validation
+ *   errors only when the control has been touched / submitted.
+ * - Optional `[required]` / `[optional]` markers next to the label.
  *
- * {@tutorial} [How to use wr-alert]{@link http://ngwr.dev/docs/components/form}
+ * @example
+ * ```html
+ * <wr-form-field label="Email" hint="We'll never share it.">
+ *   <input wrInput [formControl]="email" type="email" />
+ *   <wr-form-error key="required">Email is required.</wr-form-error>
+ *   <wr-form-error key="email">Not a valid email.</wr-form-error>
+ * </wr-form-field>
+ * ```
+ *
+ * @see https://ngwr.dev/components/form-field
  */
-class WrFormItemComponent {
-    constructor() {
-        this.hasError = false;
-    }
-    get elClasses() {
-        return {
-            'wr-form-item': true,
-            'wr-form-item--has-error': this.hasError,
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrFormItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.10", type: WrFormItemComponent, isStandalone: true, selector: "wr-form-item", inputs: { hasError: ["hasError", "hasError", booleanAttribute] }, host: { properties: { "class": "this.elClasses" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+class WrFormField {
+    /** Label text shown above the control. */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Hint text shown below the control. Hidden when an error is visible. */
+    hint = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Show a `*` next to the label. @default false */
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Show `(optional)` next to the label. Mutually exclusive with `required`. @default false */
+    optional = input(false, { ...(ngDevMode ? { debugName: "optional" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Force a specific id on the label's `for` attribute. Auto-generated otherwise. */
+    controlId = input(`wr-form-field-${++uid}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    /** Projected `NgControl` — used to read touched / dirty / errors. */
+    ngControl = contentChild(NgControl, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ngControl" }] : /* istanbul ignore next */ []));
+    errors = computed(() => {
+        const c = this.ngControl();
+        if (!c)
+            return null;
+        if (!c.touched && !c.dirty)
+            return null;
+        return c.errors;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => {
+        const errs = this.errors();
+        return !!errs && Object.keys(errs).length > 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const parts = ['wr-form-field'];
+        if (this.hasError())
+            parts.push('wr-form-field--invalid');
+        if (this.required())
+            parts.push('wr-form-field--required');
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrFormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrFormField, isStandalone: true, selector: "wr-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, queries: [{ propertyName: "ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <label class=\"wr-form-field__label\" [attr.for]=\"controlId()\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"wr-form-field__required\" aria-hidden=\"true\">*</span>\n    } @else if (optional()) {\n      <span class=\"wr-form-field__optional\">(optional)</span>\n    }\n  </label>\n}\n\n<div class=\"wr-form-field__control\"><ng-content /></div>\n\n@if (hasError()) {\n  <div class=\"wr-form-field__errors\">\n    <ng-content select=\"wr-form-error\" />\n  </div>\n} @else if (hint()) {\n  <small class=\"wr-form-field__hint\">{{ hint() }}</small>\n}\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrFormItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrFormField, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-form-field', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, template: "@if (label()) {\n  <label class=\"wr-form-field__label\" [attr.for]=\"controlId()\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"wr-form-field__required\" aria-hidden=\"true\">*</span>\n    } @else if (optional()) {\n      <span class=\"wr-form-field__optional\">(optional)</span>\n    }\n  </label>\n}\n\n<div class=\"wr-form-field__control\"><ng-content /></div>\n\n@if (hasError()) {\n  <div class=\"wr-form-field__errors\">\n    <ng-content select=\"wr-form-error\" />\n  </div>\n} @else if (hint()) {\n  <small class=\"wr-form-field__hint\">{{ hint() }}</small>\n}\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], ngControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { isSignal: true }] }] } });
+/**
+ * One error message tied to a validator key. Renders only when the
+ * parent form-field has a matching error in `control.errors`.
+ *
+ * @example
+ * ```html
+ * <wr-form-error key="required">This field is required.</wr-form-error>
+ * <wr-form-error key="email">That doesn't look right.</wr-form-error>
+ * ```
+ */
+class WrFormError {
+    /**
+     * Validator key this message corresponds to (e.g. `'required'`).
+     * Optional — without a key the message always renders, which is the
+     * plain inline-error usage inside `<wr-form-item>`.
+     */
+    key = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "key" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrFormError, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: WrFormError, isStandalone: true, selector: "wr-form-error", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "alert" }, properties: { "attr.data-key": "key() ?? null" }, classAttribute: "wr-form-error wr-form-field__error" }, ngImport: i0, template: `<ng-content />`, isInline: true, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrFormError, decorators: [{
             type: Component,
             args: [{
-                    selector: 'wr-form-item',
+                    selector: 'wr-form-error',
                     template: `<ng-content />`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
+                    host: {
+                        class: 'wr-form-error wr-form-field__error',
+                        role: 'alert',
+                        '[attr.data-key]': 'key() ?? null',
+                    },
                 }]
-        }], propDecorators: { hasError: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], elClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-/**
- * @license
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
- */
+        }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { WrFormErrorComponent, WrFormItemComponent };
+export { WrFormError, WrFormField, WrFormItem };
 //# sourceMappingURL=ngwr-form.mjs.map

package/fesm2022/ngwr-form.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-form.mjs","sources":["../../../projects/lib/form/form-error.component.ts","../../../projects/lib/form/form-item.component.ts","../../../projects/lib/form/public-api.ts","../../../projects/lib/form/ngwr-form.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation } from '@angular/core';\n\n/**\n * NGWR form error component.\n *\n * {@tutorial} [How to use wr-alert]{@link http://ngwr.dev/docs/components/form}\n */\n@Component({\n  selector: 'wr-form-error',\n  template: `<ng-content />`,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class WrFormErrorComponent {\n  @HostBinding() class = 'wr-form-error';\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  HostBinding,\n  Input,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport { SafeAny } from 'ngwr/cdk/types';\n\n/**\n * NGWR form item component.\n *\n * {@tutorial} [How to use wr-alert]{@link http://ngwr.dev/docs/components/form}\n */\n@Component({\n  selector: 'wr-form-item',\n  template: `<ng-content />`,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class WrFormItemComponent {\n  @Input({ transform: booleanAttribute }) hasError = false;\n\n  @HostBinding('class')\n  get elClasses(): SafeAny {\n    return {\n      'wr-form-item': true,\n      'wr-form-item--has-error': this.hasError,\n    };\n  }\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nexport * from './form-error.component';\nexport * from './form-item.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;AAAA;;;;;AAKG;AAIH;;;;AAIG;MAOU,oBAAoB,CAAA;AANjC,IAAA,WAAA,GAAA;QAOiB,IAAK,CAAA,KAAA,GAAG,eAAe;AACvC;+GAFY,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,oBAAoB,0HAJrB,CAAgB,cAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAIf,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBANhC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,eAAe;AACzB,oBAAA,QAAQ,EAAE,CAAgB,cAAA,CAAA;oBAC1B,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;AACtC,iBAAA;;sBAEE;;;ACrBH;;;;;AAKG;AAaH;;;;AAIG;MAOU,mBAAmB,CAAA;AANhC,IAAA,WAAA,GAAA;QAO0C,IAAQ,CAAA,QAAA,GAAG,KAAK;AASzD;AAPC,IAAA,IACI,SAAS,GAAA;QACX,OAAO;AACL,YAAA,cAAc,EAAE,IAAI;YACpB,yBAAyB,EAAE,IAAI,CAAC,QAAQ;SACzC;;+GARQ,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAnB,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,CAAA,UAAA,EAAA,UAAA,EACV,gBAAgB,CAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAL1B,CAAgB,cAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAIf,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAN/B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,cAAc;AACxB,oBAAA,QAAQ,EAAE,CAAgB,cAAA,CAAA;oBAC1B,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;AACtC,iBAAA;;sBAEE,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;sBAErC,WAAW;uBAAC,OAAO;;;AChCtB;;;;;AAKG;;ACLH;;AAEG;;;;"}
+{"version":3,"file":"ngwr-form.mjs","sources":["../../../projects/lib/form/form-item.ts","../../../projects/lib/form/form-field.ts","../../../projects/lib/form/form-field.html","../../../projects/lib/form/ngwr-form.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\n/**\n * Wraps a label + control + error message into a single field row.\n *\n * Toggle `hasError` to apply error styling to the projected label and\n * any descendant input / textarea / checkbox.\n *\n * @example\n * ```html\n * <wr-form-item [hasError]=\"form.controls.email.invalid\">\n *   <label>Email</label>\n *   <wr-input formControlName=\"email\" />\n *   <wr-form-error>Invalid email</wr-form-error>\n * </wr-form-item>\n * ```\n *\n * @see https://ngwr.dev/components/form\n */\n@Component({\n  selector: 'wr-form-item',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrFormItem {\n  /**\n   * When `true`, applies error coloring to the projected label and inputs.\n   *\n   * @default false\n   */\n  readonly hasError = input(false, { transform: coerceBooleanProperty });\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-form-item'];\n    if (this.hasError()) parts.push('wr-form-item--error');\n    return parts.join(' ');\n  });\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, contentChild, input } from '@angular/core';\nimport { NgControl } from '@angular/forms';\n\nlet uid = 0;\n\n/**\n * Wraps a label + control + hint + error messages into a single block —\n * the layout primitive every form ends up reinventing.\n *\n * - Auto-binds `label[for]` to the projected control via a generated id\n *   (or use the form-control's `[id]` if you set one).\n * - Reads the projected control's `NgControl` to surface validation\n *   errors only when the control has been touched / submitted.\n * - Optional `[required]` / `[optional]` markers next to the label.\n *\n * @example\n * ```html\n * <wr-form-field label=\"Email\" hint=\"We'll never share it.\">\n *   <input wrInput [formControl]=\"email\" type=\"email\" />\n *   <wr-form-error key=\"required\">Email is required.</wr-form-error>\n *   <wr-form-error key=\"email\">Not a valid email.</wr-form-error>\n * </wr-form-field>\n * ```\n *\n * @see https://ngwr.dev/components/form-field\n */\n@Component({\n  selector: 'wr-form-field',\n  templateUrl: './form-field.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrFormField {\n  /** Label text shown above the control. */\n  readonly label = input<string>('');\n\n  /** Hint text shown below the control. Hidden when an error is visible. */\n  readonly hint = input<string>('');\n\n  /** Show a `*` next to the label. @default false */\n  readonly required = input(false, { transform: coerceBooleanProperty });\n\n  /** Show `(optional)` next to the label. Mutually exclusive with `required`. @default false */\n  readonly optional = input(false, { transform: coerceBooleanProperty });\n\n  /** Force a specific id on the label's `for` attribute. Auto-generated otherwise. */\n  readonly controlId = input<string>(`wr-form-field-${++uid}`);\n\n  /** Projected `NgControl` — used to read touched / dirty / errors. */\n  protected readonly ngControl = contentChild(NgControl);\n\n  protected readonly errors = computed(() => {\n    const c = this.ngControl();\n    if (!c) return null;\n    if (!c.touched && !c.dirty) return null;\n    return c.errors;\n  });\n\n  protected readonly hasError = computed(() => {\n    const errs = this.errors();\n    return !!errs && Object.keys(errs).length > 0;\n  });\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-form-field'];\n    if (this.hasError()) parts.push('wr-form-field--invalid');\n    if (this.required()) parts.push('wr-form-field--required');\n    return parts.join(' ');\n  });\n}\n\n/**\n * One error message tied to a validator key. Renders only when the\n * parent form-field has a matching error in `control.errors`.\n *\n * @example\n * ```html\n * <wr-form-error key=\"required\">This field is required.</wr-form-error>\n * <wr-form-error key=\"email\">That doesn't look right.</wr-form-error>\n * ```\n */\n@Component({\n  selector: 'wr-form-error',\n  template: `<ng-content />`,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'wr-form-error wr-form-field__error',\n    role: 'alert',\n    '[attr.data-key]': 'key() ?? null',\n  },\n})\nexport class WrFormError {\n  /**\n   * Validator key this message corresponds to (e.g. `'required'`).\n   * Optional — without a key the message always renders, which is the\n   * plain inline-error usage inside `<wr-form-item>`.\n   */\n  readonly key = input<string>();\n}\n","@if (label()) {\n  <label class=\"wr-form-field__label\" [attr.for]=\"controlId()\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"wr-form-field__required\" aria-hidden=\"true\">*</span>\n    } @else if (optional()) {\n      <span class=\"wr-form-field__optional\">(optional)</span>\n    }\n  </label>\n}\n\n<div class=\"wr-form-field__control\"><ng-content /></div>\n\n@if (hasError()) {\n  <div class=\"wr-form-field__errors\">\n    <ng-content select=\"wr-form-error\" />\n  </div>\n} @else if (hint()) {\n  <small class=\"wr-form-field__hint\">{{ hint() }}</small>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}