@lifecorner/angular-ui-kit 3.4.0 → 3.5.0

package/fesm2022/lifecorner-angular-ui-kit-file-upload.mjs

@@ -0,0 +1,281 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, output, signal, viewChild } from "@angular/core";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+var FileUploadComponent = class FileUploadComponent {
+	accept = input("", ...ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []);
+	multiple = input(false, ...ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []);
+	maxSizeBytes = input(0, ...ngDevMode ? [{ debugName: "maxSizeBytes" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	hint = input("Drag & drop files here, or click to browse", ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+	acceptedLabel = input("Accepted:", ...ngDevMode ? [{ debugName: "acceptedLabel" }] : /* istanbul ignore next */ []);
+	maxSizeLabel = input("Max:", ...ngDevMode ? [{ debugName: "maxSizeLabel" }] : /* istanbul ignore next */ []);
+	removeFileAriaLabel = input("Remove file", ...ngDevMode ? [{ debugName: "removeFileAriaLabel" }] : /* istanbul ignore next */ []);
+	filesSelected = output();
+	fileRejected = output();
+	isDragOver = signal(false, ...ngDevMode ? [{ debugName: "isDragOver" }] : /* istanbul ignore next */ []);
+	selectedFiles = signal([], ...ngDevMode ? [{ debugName: "selectedFiles" }] : /* istanbul ignore next */ []);
+	fileInputRef = viewChild("fileInput", ...ngDevMode ? [{ debugName: "fileInputRef" }] : /* istanbul ignore next */ []);
+	dropzoneClasses = computed(() => {
+		return [
+			"file-upload",
+			this.isDragOver() ? "file-upload--drag-over" : "",
+			this.disabled() ? "file-upload--disabled" : ""
+		].filter(Boolean).join(" ");
+	}, ...ngDevMode ? [{ debugName: "dropzoneClasses" }] : /* istanbul ignore next */ []);
+	onDragOver(event) {
+		event.preventDefault();
+		event.stopPropagation();
+		if (!this.disabled()) this.isDragOver.set(true);
+	}
+	onDragLeave(event) {
+		event.preventDefault();
+		event.stopPropagation();
+		this.isDragOver.set(false);
+	}
+	onDrop(event) {
+		event.preventDefault();
+		event.stopPropagation();
+		this.isDragOver.set(false);
+		if (this.disabled() || !event.dataTransfer?.files.length) return;
+		this.processFiles(event.dataTransfer.files);
+	}
+	onFileChange(event) {
+		const input = event.target;
+		if (input.files?.length) this.processFiles(input.files);
+		input.value = "";
+	}
+	openFilePicker() {
+		if (!this.disabled()) this.fileInputRef()?.nativeElement.click();
+	}
+	removeFile(index) {
+		this.selectedFiles.update((files) => files.filter((_, i) => i !== index));
+		this.filesSelected.emit(this.selectedFiles());
+	}
+	formatSize(bytes) {
+		if (bytes < 1024) return `${bytes} B`;
+		if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KB`;
+		return `${(bytes / 1048576).toFixed(1)} MB`;
+	}
+	processFiles(fileList) {
+		const files = Array.from(fileList);
+		const accepted = [];
+		for (const file of files) {
+			if (this.maxSizeBytes() > 0 && file.size > this.maxSizeBytes()) {
+				this.fileRejected.emit({
+					file,
+					reason: "File too large"
+				});
+				continue;
+			}
+			accepted.push({
+				file,
+				name: file.name,
+				size: file.size,
+				type: file.type
+			});
+		}
+		if (this.multiple()) this.selectedFiles.update((prev) => [...prev, ...accepted]);
+		else this.selectedFiles.set(accepted.slice(0, 1));
+		this.filesSelected.emit(this.selectedFiles());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: FileUploadComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: FileUploadComponent,
+		isStandalone: true,
+		selector: "lc-file-upload",
+		inputs: {
+			accept: {
+				classPropertyName: "accept",
+				publicName: "accept",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			multiple: {
+				classPropertyName: "multiple",
+				publicName: "multiple",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxSizeBytes: {
+				classPropertyName: "maxSizeBytes",
+				publicName: "maxSizeBytes",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hint: {
+				classPropertyName: "hint",
+				publicName: "hint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			acceptedLabel: {
+				classPropertyName: "acceptedLabel",
+				publicName: "acceptedLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxSizeLabel: {
+				classPropertyName: "maxSizeLabel",
+				publicName: "maxSizeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			removeFileAriaLabel: {
+				classPropertyName: "removeFileAriaLabel",
+				publicName: "removeFileAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			filesSelected: "filesSelected",
+			fileRejected: "fileRejected"
+		},
+		viewQueries: [{
+			propertyName: "fileInputRef",
+			first: true,
+			predicate: ["fileInput"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div\n  [class]=\"dropzoneClasses()\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  (click)=\"openFilePicker()\"\n  role=\"button\"\n  tabindex=\"0\"\n  (keydown.enter)=\"openFilePicker()\"\n  (keydown.space)=\"openFilePicker()\"\n  [attr.aria-label]=\"hint()\"\n  [attr.aria-disabled]=\"disabled()\"\n>\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"file-upload__input\"\n    [accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"disabled()\"\n    (change)=\"onFileChange($event)\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n  />\n  <div class=\"file-upload__content\">\n    <lc-icon name=\"cloud-arrow-up\" class=\"file-upload__icon\"></lc-icon>\n    <p class=\"file-upload__hint\">{{ hint() }}</p>\n    @if (accept()) {\n      <p class=\"file-upload__accept\">{{ acceptedLabel() }} {{ accept() }}</p>\n    }\n    @if (maxSizeBytes() > 0) {\n      <p class=\"file-upload__accept\">{{ maxSizeLabel() }} {{ formatSize(maxSizeBytes()) }}</p>\n    }\n  </div>\n</div>\n\n@if (selectedFiles().length > 0) {\n  <ul class=\"file-upload__list\">\n    @for (f of selectedFiles(); track f.name; let i = $index) {\n      <li class=\"file-upload__file\">\n        <lc-icon name=\"document\" class=\"file-upload__file-icon\"></lc-icon>\n        <span class=\"file-upload__file-name\">{{ f.name }}</span>\n        <span class=\"file-upload__file-size\">{{ formatSize(f.size) }}</span>\n        <button\n          type=\"button\"\n          class=\"file-upload__file-remove\"\n          (click)=\"removeFile(i); $event.stopPropagation()\"\n          [attr.aria-label]=\"removeFileAriaLabel()\"\n        >\n          <lc-icon name=\"x-mark\"></lc-icon>\n        </button>\n      </li>\n    }\n  </ul>\n}\n",
+		styles: [":host{display:block;width:100%}.file-upload{display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem;border:2px dashed var(--color-border-strong);border-radius:var(--border-radius-lg);background-color:var(--color-surface-2);cursor:pointer;transition:border-color .15s ease,background-color .15s ease;text-align:center}.file-upload:hover{border-color:var(--color-primary-500);background-color:var(--color-surface-hover)}.file-upload:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.file-upload--drag-over{border-color:var(--color-primary-500);background-color:var(--color-surface-selected)}.file-upload--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.file-upload__input{position:absolute;width:0;height:0;overflow:hidden;opacity:0}.file-upload__content{display:flex;flex-direction:column;align-items:center;gap:.5rem}.file-upload__icon{--icon-size: 2rem;color:var(--color-primary-500)}.file-upload__hint{margin:0;font-size:.875rem;color:var(--color-text-secondary)}.file-upload__accept{margin:0;font-size:.75rem;color:var(--color-text-tertiary)}.file-upload__list{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}.file-upload__file{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--border-radius-md);font-size:.8125rem}.file-upload__file-icon{--icon-size: 1rem;color:var(--color-text-tertiary);flex-shrink:0}.file-upload__file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text-primary)}.file-upload__file-size{flex-shrink:0;color:var(--color-text-tertiary);font-size:.75rem}.file-upload__file-remove{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:var(--color-surface-hover);cursor:pointer;padding:0;--icon-size: .75rem;color:var(--color-text-secondary)}.file-upload__file-remove:hover{background:#9d0e0e2e;color:var(--color-error)}\n"],
+		dependencies: [{
+			kind: "component",
+			type: IconComponent,
+			selector: "lc-icon",
+			inputs: [
+				"name",
+				"variant",
+				"size",
+				"color",
+				"ariaLabel",
+				"decorative",
+				"strict"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: FileUploadComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-file-upload",
+			standalone: true,
+			imports: [IconComponent],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div\n  [class]=\"dropzoneClasses()\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  (click)=\"openFilePicker()\"\n  role=\"button\"\n  tabindex=\"0\"\n  (keydown.enter)=\"openFilePicker()\"\n  (keydown.space)=\"openFilePicker()\"\n  [attr.aria-label]=\"hint()\"\n  [attr.aria-disabled]=\"disabled()\"\n>\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"file-upload__input\"\n    [accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"disabled()\"\n    (change)=\"onFileChange($event)\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n  />\n  <div class=\"file-upload__content\">\n    <lc-icon name=\"cloud-arrow-up\" class=\"file-upload__icon\"></lc-icon>\n    <p class=\"file-upload__hint\">{{ hint() }}</p>\n    @if (accept()) {\n      <p class=\"file-upload__accept\">{{ acceptedLabel() }} {{ accept() }}</p>\n    }\n    @if (maxSizeBytes() > 0) {\n      <p class=\"file-upload__accept\">{{ maxSizeLabel() }} {{ formatSize(maxSizeBytes()) }}</p>\n    }\n  </div>\n</div>\n\n@if (selectedFiles().length > 0) {\n  <ul class=\"file-upload__list\">\n    @for (f of selectedFiles(); track f.name; let i = $index) {\n      <li class=\"file-upload__file\">\n        <lc-icon name=\"document\" class=\"file-upload__file-icon\"></lc-icon>\n        <span class=\"file-upload__file-name\">{{ f.name }}</span>\n        <span class=\"file-upload__file-size\">{{ formatSize(f.size) }}</span>\n        <button\n          type=\"button\"\n          class=\"file-upload__file-remove\"\n          (click)=\"removeFile(i); $event.stopPropagation()\"\n          [attr.aria-label]=\"removeFileAriaLabel()\"\n        >\n          <lc-icon name=\"x-mark\"></lc-icon>\n        </button>\n      </li>\n    }\n  </ul>\n}\n",
+			styles: [":host{display:block;width:100%}.file-upload{display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem;border:2px dashed var(--color-border-strong);border-radius:var(--border-radius-lg);background-color:var(--color-surface-2);cursor:pointer;transition:border-color .15s ease,background-color .15s ease;text-align:center}.file-upload:hover{border-color:var(--color-primary-500);background-color:var(--color-surface-hover)}.file-upload:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.file-upload--drag-over{border-color:var(--color-primary-500);background-color:var(--color-surface-selected)}.file-upload--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.file-upload__input{position:absolute;width:0;height:0;overflow:hidden;opacity:0}.file-upload__content{display:flex;flex-direction:column;align-items:center;gap:.5rem}.file-upload__icon{--icon-size: 2rem;color:var(--color-primary-500)}.file-upload__hint{margin:0;font-size:.875rem;color:var(--color-text-secondary)}.file-upload__accept{margin:0;font-size:.75rem;color:var(--color-text-tertiary)}.file-upload__list{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}.file-upload__file{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--border-radius-md);font-size:.8125rem}.file-upload__file-icon{--icon-size: 1rem;color:var(--color-text-tertiary);flex-shrink:0}.file-upload__file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text-primary)}.file-upload__file-size{flex-shrink:0;color:var(--color-text-tertiary);font-size:.75rem}.file-upload__file-remove{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:var(--color-surface-hover);cursor:pointer;padding:0;--icon-size: .75rem;color:var(--color-text-secondary)}.file-upload__file-remove:hover{background:#9d0e0e2e;color:var(--color-error)}\n"]
+		}]
+	}],
+	propDecorators: {
+		accept: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "accept",
+				required: false
+			}]
+		}],
+		multiple: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "multiple",
+				required: false
+			}]
+		}],
+		maxSizeBytes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxSizeBytes",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		hint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hint",
+				required: false
+			}]
+		}],
+		acceptedLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "acceptedLabel",
+				required: false
+			}]
+		}],
+		maxSizeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxSizeLabel",
+				required: false
+			}]
+		}],
+		removeFileAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "removeFileAriaLabel",
+				required: false
+			}]
+		}],
+		filesSelected: [{
+			type: i0.Output,
+			args: ["filesSelected"]
+		}],
+		fileRejected: [{
+			type: i0.Output,
+			args: ["fileRejected"]
+		}],
+		fileInputRef: [{
+			type: i0.ViewChild,
+			args: ["fileInput", { isSignal: true }]
+		}]
+	}
+});
+export { FileUploadComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-file-upload.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-file-upload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-file-upload.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/file-upload/file-upload.component.ts","../../../../libs/angular-ui-kit/src/lib/file-upload/file-upload.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  output,\n  signal,\n  computed,\n  ElementRef,\n  viewChild,\n} from '@angular/core';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\n\nexport interface FileUploadFile {\n  file: File;\n  name: string;\n  size: number;\n  type: string;\n}\n\n/**\n * File upload / dropzone component with drag & drop support.\n *\n * @example\n * ```html\n * <lc-file-upload\n *   accept=\".pdf,.png,.jpg\"\n *   [multiple]=\"true\"\n *   [maxSizeBytes]=\"5242880\"\n *   (filesSelected)=\"onFiles($event)\"\n * ></lc-file-upload>\n * ```\n */\n@Component({\n  selector: 'lc-file-upload',\n  standalone: true,\n  imports: [IconComponent],\n  templateUrl: './file-upload.component.html',\n  styleUrls: ['./file-upload.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * File upload component with drag-and-drop support.\n *\n * Features:\n * - Drag-and-drop file dropzone with visual feedback\n * - Click-to-browse file selection\n * - File type and size validation\n * - Multi-file upload support\n * - File list display with removal\n * - Disabled state support\n *\n * @example\n * ```html\n * <lc-file-upload accept=\".pdf,.jpg\" [multiple]=\"true\" [maxSizeBytes]=\"5242880\" />\n * ```\n */\nexport class FileUploadComponent {\n  /**\n   * Accepted file types (e.g. \".pdf,.jpg,image/*\").\n   */\n  accept = input<string>('');\n\n  /**\n   * Allow multiple files.\n   * @default false\n   */\n  multiple = input<boolean>(false);\n\n  /**\n   * Maximum file size in bytes. 0 for unlimited.\n   * @default 0\n   */\n  maxSizeBytes = input<number>(0);\n\n  /**\n   * Whether the dropzone is disabled.\n   * @default false\n   */\n  disabled = input<boolean>(false);\n\n  /**\n   * Hint text shown in the dropzone.\n   * @default 'Drag & drop files here, or click to browse'\n   */\n  hint = input<string>('Drag & drop files here, or click to browse');\n\n  /** Prefix of the accepted file types line (`accept`). */\n  acceptedLabel = input('Accepted:');\n\n  /** Prefix of the maximum file size line (`maxSizeBytes`). */\n  maxSizeLabel = input('Max:');\n\n  /** Accessible name of a selected file's remove button. */\n  removeFileAriaLabel = input('Remove file');\n\n  /**\n   * Emitted with selected files after validation.\n   */\n  readonly filesSelected = output<FileUploadFile[]>();\n\n  /**\n   * Emitted when a file is rejected (too large or wrong type).\n   */\n  readonly fileRejected = output<{ file: File; reason: string }>();\n\n  protected isDragOver = signal(false);\n  protected selectedFiles = signal<FileUploadFile[]>([]);\n  protected readonly fileInputRef = viewChild<ElementRef<HTMLInputElement>>('fileInput');\n\n  protected dropzoneClasses = computed(() => {\n    return [\n      'file-upload',\n      this.isDragOver() ? 'file-upload--drag-over' : '',\n      this.disabled() ? 'file-upload--disabled' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  protected onDragOver(event: DragEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n    if (!this.disabled()) {\n      this.isDragOver.set(true);\n    }\n  }\n\n  protected onDragLeave(event: DragEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n    this.isDragOver.set(false);\n  }\n\n  protected onDrop(event: DragEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n    this.isDragOver.set(false);\n    if (this.disabled() || !event.dataTransfer?.files.length) return;\n    this.processFiles(event.dataTransfer.files);\n  }\n\n  protected onFileChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    if (input.files?.length) {\n      this.processFiles(input.files);\n    }\n    // Reset so the same file can be re-selected\n    input.value = '';\n  }\n\n  protected openFilePicker(): void {\n    if (!this.disabled()) {\n      this.fileInputRef()?.nativeElement.click();\n    }\n  }\n\n  protected removeFile(index: number): void {\n    this.selectedFiles.update((files) => files.filter((_, i) => i !== index));\n    this.filesSelected.emit(this.selectedFiles());\n  }\n\n  protected formatSize(bytes: number): string {\n    if (bytes < 1024) return `${bytes} B`;\n    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n  }\n\n  private processFiles(fileList: FileList): void {\n    const files = Array.from(fileList);\n    const accepted: FileUploadFile[] = [];\n\n    for (const file of files) {\n      if (this.maxSizeBytes() > 0 && file.size > this.maxSizeBytes()) {\n        this.fileRejected.emit({ file, reason: 'File too large' });\n        continue;\n      }\n      accepted.push({\n        file,\n        name: file.name,\n        size: file.size,\n        type: file.type,\n      });\n    }\n\n    if (this.multiple()) {\n      this.selectedFiles.update((prev) => [...prev, ...accepted]);\n    } else {\n      this.selectedFiles.set(accepted.slice(0, 1));\n    }\n\n    this.filesSelected.emit(this.selectedFiles());\n  }\n}\n","<div\n  [class]=\"dropzoneClasses()\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  (click)=\"openFilePicker()\"\n  role=\"button\"\n  tabindex=\"0\"\n  (keydown.enter)=\"openFilePicker()\"\n  (keydown.space)=\"openFilePicker()\"\n  [attr.aria-label]=\"hint()\"\n  [attr.aria-disabled]=\"disabled()\"\n>\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"file-upload__input\"\n    [accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"disabled()\"\n    (change)=\"onFileChange($event)\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n  />\n  <div class=\"file-upload__content\">\n    <lc-icon name=\"cloud-arrow-up\" class=\"file-upload__icon\"></lc-icon>\n    <p class=\"file-upload__hint\">{{ hint() }}</p>\n    @if (accept()) {\n      <p class=\"file-upload__accept\">{{ acceptedLabel() }} {{ accept() }}</p>\n    }\n    @if (maxSizeBytes() > 0) {\n      <p class=\"file-upload__accept\">{{ maxSizeLabel() }} {{ formatSize(maxSizeBytes()) }}</p>\n    }\n  </div>\n</div>\n\n@if (selectedFiles().length > 0) {\n  <ul class=\"file-upload__list\">\n    @for (f of selectedFiles(); track f.name; let i = $index) {\n      <li class=\"file-upload__file\">\n        <lc-icon name=\"document\" class=\"file-upload__file-icon\"></lc-icon>\n        <span class=\"file-upload__file-name\">{{ f.name }}</span>\n        <span class=\"file-upload__file-size\">{{ formatSize(f.size) }}</span>\n        <button\n          type=\"button\"\n          class=\"file-upload__file-remove\"\n          (click)=\"removeFile(i); $event.stopPropagation()\"\n          [attr.aria-label]=\"removeFileAriaLabel()\"\n        >\n          <lc-icon name=\"x-mark\"></lc-icon>\n        </button>\n      </li>\n    }\n  </ul>\n}\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-filter-bar.mjs

@@ -0,0 +1,258 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, output } from "@angular/core";
+import * as i1 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+import { SearchInputComponent } from "@lifecorner/angular-ui-kit/search-input";
+import { SelectComponent } from "@lifecorner/angular-ui-kit/select";
+const NO_OPTIONS = [];
+var FilterBarComponent = class FilterBarComponent {
+	static nextId = 0;
+	barId = `lc-filter-bar-${++FilterBarComponent.nextId}`;
+	filters = input.required(...ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []);
+	values = input({}, ...ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	selectPlaceholder = input("Select an option", ...ngDevMode ? [{ debugName: "selectPlaceholder" }] : /* istanbul ignore next */ []);
+	searchPlaceholder = input("Search...", ...ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []);
+	valuesChange = output();
+	sizeClass = computed(() => `lc-filter-bar--${this.size()}`, ...ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []);
+	selectOptionsByKey = computed(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const filter of this.filters()) if (filter.type === "select") map.set(filter.key, (filter.options ?? []).map((opt) => ({ ...opt })));
+		return map;
+	}, ...ngDevMode ? [{ debugName: "selectOptionsByKey" }] : /* istanbul ignore next */ []);
+	getValue(key) {
+		return this.values()[key] ?? "";
+	}
+	selectOptions(key) {
+		return this.selectOptionsByKey().get(key) ?? NO_OPTIONS;
+	}
+	fieldId(key) {
+		return `${this.barId}-${key}`;
+	}
+	labelId(key) {
+		return `${this.barId}-${key}-label`;
+	}
+	onFilterChange(key, value) {
+		const updated = {
+			...this.values(),
+			[key]: value
+		};
+		this.valuesChange.emit(updated);
+	}
+	onSearchInput(key, value) {
+		this.onFilterChange(key, value);
+	}
+	normalizeSelectValue(value) {
+		return value == null ? "" : String(value);
+	}
+	isToggleActive(key, optionValue) {
+		return this.getValue(key) === optionValue;
+	}
+	getToggleClasses(key, option) {
+		const classes = ["lc-filter-bar__toggle-btn"];
+		if (this.isToggleActive(key, option.value)) classes.push("lc-filter-bar__toggle-btn--active");
+		if (option.disabled) classes.push("lc-filter-bar__toggle-btn--disabled");
+		return classes.join(" ");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: FilterBarComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: FilterBarComponent,
+		isStandalone: true,
+		selector: "lc-filter-bar",
+		inputs: {
+			filters: {
+				classPropertyName: "filters",
+				publicName: "filters",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			values: {
+				classPropertyName: "values",
+				publicName: "values",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectPlaceholder: {
+				classPropertyName: "selectPlaceholder",
+				publicName: "selectPlaceholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			searchPlaceholder: {
+				classPropertyName: "searchPlaceholder",
+				publicName: "searchPlaceholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { valuesChange: "valuesChange" },
+		ngImport: i0,
+		template: "<div class=\"lc-filter-bar\" [class]=\"sizeClass()\">\n  @for (filter of filters(); track filter.key) {\n    <div class=\"lc-filter-bar__item\">\n      @if (filter.label) {\n        @if (filter.type === 'search') {\n          <label class=\"lc-filter-bar__label\" [id]=\"labelId(filter.key)\" [for]=\"fieldId(filter.key)\">\n            {{ filter.label }}\n          </label>\n        } @else {\n          <span class=\"lc-filter-bar__label\" [id]=\"labelId(filter.key)\">{{ filter.label }}</span>\n        }\n      }\n\n      @switch (filter.type) {\n        @case ('select') {\n          <lc-select\n            class=\"lc-filter-bar__select\"\n            [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n            [placeholder]=\"filter.placeholder ?? selectPlaceholder()\"\n            [options]=\"selectOptions(filter.key)\"\n            [ariaLabel]=\"filter.label || filter.placeholder || filter.key\"\n            [ngModel]=\"getValue(filter.key)\"\n            (ngModelChange)=\"onFilterChange(filter.key, normalizeSelectValue($event))\"\n          />\n        }\n\n        @case ('toggle') {\n          <div\n            class=\"lc-filter-bar__toggle-group\"\n            role=\"group\"\n            [attr.aria-labelledby]=\"filter.label ? labelId(filter.key) : null\"\n            [attr.aria-label]=\"filter.label ? null : filter.key\"\n          >\n            @for (opt of filter.options; track opt.value) {\n              <button\n                type=\"button\"\n                [class]=\"getToggleClasses(filter.key, opt)\"\n                [disabled]=\"opt.disabled ?? false\"\n                [attr.aria-pressed]=\"isToggleActive(filter.key, opt.value)\"\n                (click)=\"onFilterChange(filter.key, opt.value)\"\n              >\n                {{ opt.label }}\n              </button>\n            }\n          </div>\n        }\n\n        @case ('search') {\n          <lc-search-input\n            class=\"lc-filter-bar__search\"\n            [inputId]=\"fieldId(filter.key)\"\n            [ariaLabelledBy]=\"filter.label ? labelId(filter.key) : undefined\"\n            [ariaLabel]=\"filter.label ? undefined : filter.placeholder || filter.key\"\n            [placeholder]=\"filter.placeholder ?? searchPlaceholder()\"\n            [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n            [debounceMs]=\"0\"\n            [value]=\"getValue(filter.key)\"\n            (searchChange)=\"onSearchInput(filter.key, $event)\"\n          />\n        }\n      }\n    </div>\n  }\n</div>\n",
+		styles: [".lc-filter-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem}.lc-filter-bar__item{display:flex;flex-direction:column;gap:.25rem}.lc-filter-bar__label{font-size:var(--font-size-xs, .75rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.05em}.lc-filter-bar__select{display:block;min-width:140px}.lc-filter-bar__toggle-group{display:inline-flex;border-radius:.5rem;border:1px solid var(--color-border);background-color:var(--color-surface-hover);overflow:hidden}.lc-filter-bar__toggle-btn{padding:.5rem .75rem;font-size:var(--font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary);transition:color .15s ease,background-color .15s ease;border:none;background:transparent;cursor:pointer}.lc-filter-bar__toggle-btn:hover{color:var(--color-text-primary);background-color:var(--color-surface-hover)}.lc-filter-bar__toggle-btn--active{background-color:var(--color-surface-2);color:var(--color-text-primary);box-shadow:0 1px 2px #0000000d}.lc-filter-bar__toggle-btn--disabled{cursor:not-allowed;opacity:.5}.lc-filter-bar__toggle-btn+.lc-filter-bar__toggle-btn{border-left:1px solid var(--color-border)}.lc-filter-bar__search{display:block;min-width:200px}.lc-filter-bar--sm .lc-filter-bar__select,.lc-filter-bar--sm .lc-filter-bar__toggle-btn{padding-top:.375rem;padding-bottom:.375rem;font-size:var(--font-size-xs, .75rem)}\n"],
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "component",
+				type: SelectComponent,
+				selector: "lc-select",
+				inputs: [
+					"variant",
+					"size",
+					"disabled",
+					"error",
+					"required",
+					"loading",
+					"searchable",
+					"multiple",
+					"placeholder",
+					"helperText",
+					"errorMessage",
+					"ariaLabel",
+					"options",
+					"clearAriaLabel",
+					"searchPlaceholder",
+					"searchAriaLabel",
+					"noOptionsLabel"
+				],
+				outputs: [
+					"selectionChange",
+					"opened",
+					"closed"
+				]
+			},
+			{
+				kind: "component",
+				type: SearchInputComponent,
+				selector: "lc-search-input",
+				inputs: [
+					"inputId",
+					"placeholder",
+					"size",
+					"debounceMs",
+					"disabled",
+					"ariaLabel",
+					"ariaLabelledBy",
+					"clearAriaLabel",
+					"value"
+				],
+				outputs: [
+					"valueChange",
+					"searchChange",
+					"searchSubmit"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: FilterBarComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-filter-bar",
+			standalone: true,
+			imports: [
+				FormsModule,
+				SelectComponent,
+				SearchInputComponent
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"lc-filter-bar\" [class]=\"sizeClass()\">\n  @for (filter of filters(); track filter.key) {\n    <div class=\"lc-filter-bar__item\">\n      @if (filter.label) {\n        @if (filter.type === 'search') {\n          <label class=\"lc-filter-bar__label\" [id]=\"labelId(filter.key)\" [for]=\"fieldId(filter.key)\">\n            {{ filter.label }}\n          </label>\n        } @else {\n          <span class=\"lc-filter-bar__label\" [id]=\"labelId(filter.key)\">{{ filter.label }}</span>\n        }\n      }\n\n      @switch (filter.type) {\n        @case ('select') {\n          <lc-select\n            class=\"lc-filter-bar__select\"\n            [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n            [placeholder]=\"filter.placeholder ?? selectPlaceholder()\"\n            [options]=\"selectOptions(filter.key)\"\n            [ariaLabel]=\"filter.label || filter.placeholder || filter.key\"\n            [ngModel]=\"getValue(filter.key)\"\n            (ngModelChange)=\"onFilterChange(filter.key, normalizeSelectValue($event))\"\n          />\n        }\n\n        @case ('toggle') {\n          <div\n            class=\"lc-filter-bar__toggle-group\"\n            role=\"group\"\n            [attr.aria-labelledby]=\"filter.label ? labelId(filter.key) : null\"\n            [attr.aria-label]=\"filter.label ? null : filter.key\"\n          >\n            @for (opt of filter.options; track opt.value) {\n              <button\n                type=\"button\"\n                [class]=\"getToggleClasses(filter.key, opt)\"\n                [disabled]=\"opt.disabled ?? false\"\n                [attr.aria-pressed]=\"isToggleActive(filter.key, opt.value)\"\n                (click)=\"onFilterChange(filter.key, opt.value)\"\n              >\n                {{ opt.label }}\n              </button>\n            }\n          </div>\n        }\n\n        @case ('search') {\n          <lc-search-input\n            class=\"lc-filter-bar__search\"\n            [inputId]=\"fieldId(filter.key)\"\n            [ariaLabelledBy]=\"filter.label ? labelId(filter.key) : undefined\"\n            [ariaLabel]=\"filter.label ? undefined : filter.placeholder || filter.key\"\n            [placeholder]=\"filter.placeholder ?? searchPlaceholder()\"\n            [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n            [debounceMs]=\"0\"\n            [value]=\"getValue(filter.key)\"\n            (searchChange)=\"onSearchInput(filter.key, $event)\"\n          />\n        }\n      }\n    </div>\n  }\n</div>\n",
+			styles: [".lc-filter-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem}.lc-filter-bar__item{display:flex;flex-direction:column;gap:.25rem}.lc-filter-bar__label{font-size:var(--font-size-xs, .75rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.05em}.lc-filter-bar__select{display:block;min-width:140px}.lc-filter-bar__toggle-group{display:inline-flex;border-radius:.5rem;border:1px solid var(--color-border);background-color:var(--color-surface-hover);overflow:hidden}.lc-filter-bar__toggle-btn{padding:.5rem .75rem;font-size:var(--font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary);transition:color .15s ease,background-color .15s ease;border:none;background:transparent;cursor:pointer}.lc-filter-bar__toggle-btn:hover{color:var(--color-text-primary);background-color:var(--color-surface-hover)}.lc-filter-bar__toggle-btn--active{background-color:var(--color-surface-2);color:var(--color-text-primary);box-shadow:0 1px 2px #0000000d}.lc-filter-bar__toggle-btn--disabled{cursor:not-allowed;opacity:.5}.lc-filter-bar__toggle-btn+.lc-filter-bar__toggle-btn{border-left:1px solid var(--color-border)}.lc-filter-bar__search{display:block;min-width:200px}.lc-filter-bar--sm .lc-filter-bar__select,.lc-filter-bar--sm .lc-filter-bar__toggle-btn{padding-top:.375rem;padding-bottom:.375rem;font-size:var(--font-size-xs, .75rem)}\n"]
+		}]
+	}],
+	propDecorators: {
+		filters: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filters",
+				required: true
+			}]
+		}],
+		values: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "values",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		selectPlaceholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectPlaceholder",
+				required: false
+			}]
+		}],
+		searchPlaceholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "searchPlaceholder",
+				required: false
+			}]
+		}],
+		valuesChange: [{
+			type: i0.Output,
+			args: ["valuesChange"]
+		}]
+	}
+});
+export { FilterBarComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-filter-bar.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-filter-bar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-filter-bar.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/filter-bar/filter-bar.component.ts","../../../../libs/angular-ui-kit/src/lib/filter-bar/filter-bar.component.html"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  input,\n  output,\n  computed,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { SearchInputComponent } from '@lifecorner/angular-ui-kit/search-input';\nimport { SelectComponent, SelectOption } from '@lifecorner/angular-ui-kit/select';\n\n/**\n * Configuration for a single filter in the FilterBar.\n */\nexport interface FilterConfig {\n  /** Unique key for this filter */\n  readonly key: string;\n  /** Display label */\n  readonly label: string;\n  /** Filter type */\n  readonly type: 'select' | 'toggle' | 'search';\n  /** Available options for select/toggle types */\n  readonly options?: readonly FilterOption[];\n  /** Placeholder text (for search type) */\n  readonly placeholder?: string;\n}\n\nexport interface FilterOption {\n  readonly value: string;\n  readonly label: string;\n  readonly disabled?: boolean;\n}\n\nexport interface FilterValues {\n  [key: string]: string;\n}\n\nconst NO_OPTIONS: SelectOption[] = [];\n\n/**\n * Filter bar component for composable data filtering.\n *\n * Features:\n * - Select dropdowns, toggle groups, and search inputs\n * - Declarative filter configuration via FilterConfig array\n * - Two-way filter values binding\n * - Responsive horizontal flex layout\n * - Size variants (sm, md)\n * - Dark mode support\n *\n * @example\n * ```html\n * <lc-filter-bar\n *   [filters]=\"filterConfig\"\n *   [values]=\"currentFilters\"\n *   (valuesChange)=\"onFilterChange($event)\"\n * />\n * ```\n */\n@Component({\n  selector: 'lc-filter-bar',\n  standalone: true,\n  imports: [FormsModule, SelectComponent, SearchInputComponent],\n  templateUrl: './filter-bar.component.html',\n  styleUrl: './filter-bar.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FilterBarComponent {\n  private static nextId = 0;\n\n  /** Per-instance id prefix for label/control linking */\n  readonly barId = `lc-filter-bar-${++FilterBarComponent.nextId}`;\n\n  /** Filter configurations */\n  filters = input.required<readonly FilterConfig[]>();\n\n  /** Current filter values (two-way bindable) */\n  values = input<FilterValues>({});\n\n  /** Size variant */\n  size = input<'sm' | 'md'>('md');\n\n  /** Placeholder of select filters without their own `placeholder`. */\n  selectPlaceholder = input('Select an option');\n\n  /** Placeholder of search filters without their own `placeholder`. */\n  searchPlaceholder = input('Search...');\n\n  /** Emitted when any filter value changes */\n  valuesChange = output<FilterValues>();\n\n  /** Computed size class */\n  sizeClass = computed(() => `lc-filter-bar--${this.size()}`);\n\n  /**\n   * Select options per filter key, built once per `filters` change so the\n   * lc-select `options` input keeps a stable reference across change detection.\n   */\n  private readonly selectOptionsByKey = computed(() => {\n    const map = new Map<string, SelectOption[]>();\n    for (const filter of this.filters()) {\n      if (filter.type === 'select') {\n        map.set(filter.key, (filter.options ?? []).map((opt) => ({ ...opt })));\n      }\n    }\n    return map;\n  });\n\n  /** Get the current value for a filter key */\n  getValue(key: string): string {\n    return this.values()[key] ?? '';\n  }\n\n  /** Memoised select options for a filter key */\n  selectOptions(key: string): SelectOption[] {\n    return this.selectOptionsByKey().get(key) ?? NO_OPTIONS;\n  }\n\n  /** id of the control rendered for a filter (used by `<label for>`) */\n  fieldId(key: string): string {\n    return `${this.barId}-${key}`;\n  }\n\n  /** id of the label rendered for a filter (used by `aria-labelledby`) */\n  labelId(key: string): string {\n    return `${this.barId}-${key}-label`;\n  }\n\n  /** Handle select / toggle change */\n  onFilterChange(key: string, value: string): void {\n    const updated = { ...this.values(), [key]: value };\n    this.valuesChange.emit(updated);\n  }\n\n  /** Handle search input */\n  onSearchInput(key: string, value: string): void {\n    this.onFilterChange(key, value);\n  }\n\n  normalizeSelectValue(value: string | number | null): string {\n    return value == null ? '' : String(value);\n  }\n\n  /** Check if a toggle option is active */\n  isToggleActive(key: string, optionValue: string): boolean {\n    return this.getValue(key) === optionValue;\n  }\n\n  /** Get toggle button classes */\n  getToggleClasses(key: string, option: FilterOption): string {\n    const classes = ['lc-filter-bar__toggle-btn'];\n    if (this.isToggleActive(key, option.value)) {\n      classes.push('lc-filter-bar__toggle-btn--active');\n    }\n    if (option.disabled) {\n      classes.push('lc-filter-bar__toggle-btn--disabled');\n    }\n    return classes.join(' ');\n  }\n\n}\n","<div class=\"lc-filter-bar\" [class]=\"sizeClass()\">\n  @for (filter of filters(); track filter.key) {\n    <div class=\"lc-filter-bar__item\">\n      @if (filter.label) {\n        @if (filter.type === 'search') {\n          <label class=\"lc-filter-bar__label\" [id]=\"labelId(filter.key)\" [for]=\"fieldId(filter.key)\">\n            {{ filter.label }}\n          </label>\n        } @else {\n          <span class=\"lc-filter-bar__label\" [id]=\"labelId(filter.key)\">{{ filter.label }}</span>\n        }\n      }\n\n      @switch (filter.type) {\n        @case ('select') {\n          <lc-select\n            class=\"lc-filter-bar__select\"\n            [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n            [placeholder]=\"filter.placeholder ?? selectPlaceholder()\"\n            [options]=\"selectOptions(filter.key)\"\n            [ariaLabel]=\"filter.label || filter.placeholder || filter.key\"\n            [ngModel]=\"getValue(filter.key)\"\n            (ngModelChange)=\"onFilterChange(filter.key, normalizeSelectValue($event))\"\n          />\n        }\n\n        @case ('toggle') {\n          <div\n            class=\"lc-filter-bar__toggle-group\"\n            role=\"group\"\n            [attr.aria-labelledby]=\"filter.label ? labelId(filter.key) : null\"\n            [attr.aria-label]=\"filter.label ? null : filter.key\"\n          >\n            @for (opt of filter.options; track opt.value) {\n              <button\n                type=\"button\"\n                [class]=\"getToggleClasses(filter.key, opt)\"\n                [disabled]=\"opt.disabled ?? false\"\n                [attr.aria-pressed]=\"isToggleActive(filter.key, opt.value)\"\n                (click)=\"onFilterChange(filter.key, opt.value)\"\n              >\n                {{ opt.label }}\n              </button>\n            }\n          </div>\n        }\n\n        @case ('search') {\n          <lc-search-input\n            class=\"lc-filter-bar__search\"\n            [inputId]=\"fieldId(filter.key)\"\n            [ariaLabelledBy]=\"filter.label ? labelId(filter.key) : undefined\"\n            [ariaLabel]=\"filter.label ? undefined : filter.placeholder || filter.key\"\n            [placeholder]=\"filter.placeholder ?? searchPlaceholder()\"\n            [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n            [debounceMs]=\"0\"\n            [value]=\"getValue(filter.key)\"\n            (searchChange)=\"onSearchInput(filter.key, $event)\"\n          />\n        }\n      }\n    </div>\n  }\n</div>\n"],"mappings":"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"}