@jigisha_ruparel/taf-client-filter-bar-angular 0.1.0

package/fesm2022/jigisha_ruparel-taf-client-filter-bar-angular.mjs

@@ -0,0 +1,363 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Directive, EventEmitter, booleanAttribute, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+
+/** Marks host content to place at the end of the bar (an export button, a view switch). */
+class TafFilterBarEndDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TafFilterBarEndDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: TafFilterBarEndDirective, isStandalone: true, selector: "[tafFilterBarEnd]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TafFilterBarEndDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[tafFilterBarEnd]', standalone: true }]
+        }] });
+/**
+ * `<taf-filter-bar>` — the row of controls that sits above a list: a search box, some selects, a
+ * chip group, a date range, and a Clear that appears once anything is set.
+ *
+ * The bar owns no state. It renders `[value]`, and every interaction emits `(changed)` with the one
+ * key that moved plus `(valueChange)` with the whole record, so a host can keep either one signal per
+ * filter or a single object — whichever it already has.
+ *
+ * Values by kind: `search`/`select`/`date` → string; `chips` → string[]; `date-range` →
+ * `{ from: string; to: string }`; `toggle` → boolean.
+ *
+ * Ships NO theme — `taf-filter-bar__*` class hooks plus `data-kind` / `data-active`, and
+ * `ViewEncapsulation.None` is deliberately NOT used here: the controls are plain elements the host
+ * app styles through those classes.
+ */
+class TafFilterBarComponent {
+    filters = [];
+    value = {};
+    /** Show a Clear button once any filter is set. */
+    showClear = true;
+    clearLabel = 'Clear';
+    /** Default debounce for `search` filters that do not set their own, in ms. */
+    searchDebounce = 200;
+    /** The one filter that moved. */
+    changed = new EventEmitter();
+    /** The whole record after that change. */
+    valueChange = new EventEmitter();
+    /** Clear pressed — the host decides what "empty" means for its own state. */
+    cleared = new EventEmitter();
+    timer;
+    ngOnDestroy() {
+        if (this.timer)
+            clearTimeout(this.timer);
+    }
+    /** True when anything is set — what makes Clear appear. */
+    get isDirty() {
+        return this.filters.some((f) => {
+            const v = this.value[f.key];
+            if (Array.isArray(v))
+                return v.length > 0;
+            if (v && typeof v === 'object')
+                return Object.values(v).some(Boolean);
+            return v !== undefined && v !== null && v !== '' && v !== false;
+        });
+    }
+    trackKey = (_, f) => f.key;
+    options(f) {
+        const raw = f.options ?? [];
+        const vk = f.optionValue;
+        const lk = f.optionLabel;
+        if (!vk && !lk)
+            return raw;
+        return raw.map((o) => ({
+            value: String(o[vk ?? 'value'] ?? ''),
+            label: String(o[lk ?? 'label'] ?? o[vk ?? 'value'] ?? ''),
+        }));
+    }
+    asText(key) {
+        const v = this.value[key];
+        return v === undefined || v === null ? '' : String(v);
+    }
+    range(key) {
+        const v = (this.value[key] ?? {});
+        return { from: v.from ?? '', to: v.to ?? '' };
+    }
+    isPicked(key, option) {
+        const v = this.value[key];
+        return Array.isArray(v) ? v.includes(option) : false;
+    }
+    onSearch(f, text) {
+        const wait = f.debounce ?? this.searchDebounce;
+        if (this.timer)
+            clearTimeout(this.timer);
+        if (!wait) {
+            this.set(f.key, text);
+            return;
+        }
+        this.timer = setTimeout(() => this.set(f.key, text), wait);
+    }
+    toggleChip(key, option) {
+        const current = Array.isArray(this.value[key]) ? ([...this.value[key]]) : [];
+        const at = current.indexOf(option);
+        if (at >= 0)
+            current.splice(at, 1);
+        else
+            current.push(option);
+        this.set(key, current);
+    }
+    setRange(key, edge, text) {
+        this.set(key, { ...this.range(key), [edge]: text });
+    }
+    set(key, next) {
+        this.value = { ...this.value, [key]: next };
+        this.changed.emit({ key, value: next });
+        this.valueChange.emit(this.value);
+    }
+    clear() {
+        const empty = {};
+        for (const f of this.filters) {
+            empty[f.key] =
+                f.kind === 'chips' ? [] : f.kind === 'date-range' ? { from: '', to: '' } : f.kind === 'toggle' ? false : '';
+        }
+        this.value = empty;
+        this.cleared.emit();
+        this.valueChange.emit(this.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TafFilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.1.5", type: TafFilterBarComponent, isStandalone: true, selector: "taf-filter-bar", inputs: { filters: "filters", value: "value", showClear: ["showClear", "showClear", booleanAttribute], clearLabel: "clearLabel", searchDebounce: "searchDebounce" }, outputs: { changed: "changed", valueChange: "valueChange", cleared: "cleared" }, ngImport: i0, template: `
+    <div class="taf-filter-bar" role="search">
+      <ng-container *ngFor="let f of filters; trackBy: trackKey">
+        <ng-container [ngSwitch]="f.kind">
+          <input
+            *ngSwitchCase="'search'"
+            class="taf-filter-bar__field taf-filter-bar__search"
+            type="search"
+            data-kind="search"
+            [attr.data-key]="f.key"
+            [attr.aria-label]="f.label || 'Search'"
+            [placeholder]="f.label || ''"
+            [disabled]="!!f.disabled"
+            [style.width.px]="f.width || null"
+            [value]="asText(f.key)"
+            (input)="onSearch(f, $any($event.target).value)"
+          />
+
+          <select
+            *ngSwitchCase="'select'"
+            class="taf-filter-bar__field taf-filter-bar__select"
+            data-kind="select"
+            [attr.data-key]="f.key"
+            [attr.data-active]="asText(f.key) ? '' : null"
+            [attr.aria-label]="f.title || f.label || f.key"
+            [disabled]="!!f.disabled"
+            [style.width.px]="f.width || null"
+            [value]="asText(f.key)"
+            (change)="set(f.key, $any($event.target).value)"
+          >
+            <option value="" [selected]="!asText(f.key)">{{ f.label || 'All' }}</option>
+            <option
+              *ngFor="let o of options(f)"
+              [value]="o.value"
+              [selected]="asText(f.key) === o.value"
+            >{{ o.label }}</option>
+          </select>
+
+          <div *ngSwitchCase="'chips'" class="taf-filter-bar__chips" data-kind="chips" [attr.data-key]="f.key">
+            <button
+              *ngFor="let o of options(f)"
+              type="button"
+              class="taf-filter-bar__chip"
+              [attr.data-active]="isPicked(f.key, o.value) ? '' : null"
+              [attr.aria-pressed]="isPicked(f.key, o.value)"
+              [disabled]="!!f.disabled"
+              (click)="toggleChip(f.key, o.value)"
+            >{{ o.label }}</button>
+          </div>
+
+          <input
+            *ngSwitchCase="'date'"
+            class="taf-filter-bar__field taf-filter-bar__date"
+            type="date"
+            data-kind="date"
+            [attr.data-key]="f.key"
+            [attr.aria-label]="f.label || f.key"
+            [attr.title]="f.title || f.label || null"
+            [disabled]="!!f.disabled"
+            [value]="asText(f.key)"
+            (input)="set(f.key, $any($event.target).value)"
+          />
+
+          <div *ngSwitchCase="'date-range'" class="taf-filter-bar__range" data-kind="date-range" [attr.data-key]="f.key">
+            <input
+              type="date"
+              class="taf-filter-bar__field taf-filter-bar__date"
+              [attr.aria-label]="(f.label || f.key) + ' from'"
+              title="From"
+              [disabled]="!!f.disabled"
+              [value]="range(f.key).from"
+              (input)="setRange(f.key, 'from', $any($event.target).value)"
+            />
+            <span class="taf-filter-bar__range-sep" aria-hidden="true">–</span>
+            <input
+              type="date"
+              class="taf-filter-bar__field taf-filter-bar__date"
+              [attr.aria-label]="(f.label || f.key) + ' to'"
+              title="To"
+              [disabled]="!!f.disabled"
+              [value]="range(f.key).to"
+              (input)="setRange(f.key, 'to', $any($event.target).value)"
+            />
+          </div>
+
+          <label *ngSwitchCase="'toggle'" class="taf-filter-bar__toggle" data-kind="toggle" [attr.data-key]="f.key">
+            <input
+              type="checkbox"
+              [disabled]="!!f.disabled"
+              [checked]="!!value[f.key]"
+              (change)="set(f.key, $any($event.target).checked)"
+            />
+            {{ f.label }}
+          </label>
+        </ng-container>
+      </ng-container>
+
+      <span class="taf-filter-bar__spacer"></span>
+      <ng-content select="[tafFilterBarEnd]"></ng-content>
+      <button
+        *ngIf="showClear && isDirty"
+        type="button"
+        class="taf-filter-bar__clear"
+        (click)="clear()"
+      >{{ clearLabel }}</button>
+    </div>
+  `, isInline: true, styles: ["taf-filter-bar{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TafFilterBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'taf-filter-bar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="taf-filter-bar" role="search">
+      <ng-container *ngFor="let f of filters; trackBy: trackKey">
+        <ng-container [ngSwitch]="f.kind">
+          <input
+            *ngSwitchCase="'search'"
+            class="taf-filter-bar__field taf-filter-bar__search"
+            type="search"
+            data-kind="search"
+            [attr.data-key]="f.key"
+            [attr.aria-label]="f.label || 'Search'"
+            [placeholder]="f.label || ''"
+            [disabled]="!!f.disabled"
+            [style.width.px]="f.width || null"
+            [value]="asText(f.key)"
+            (input)="onSearch(f, $any($event.target).value)"
+          />
+
+          <select
+            *ngSwitchCase="'select'"
+            class="taf-filter-bar__field taf-filter-bar__select"
+            data-kind="select"
+            [attr.data-key]="f.key"
+            [attr.data-active]="asText(f.key) ? '' : null"
+            [attr.aria-label]="f.title || f.label || f.key"
+            [disabled]="!!f.disabled"
+            [style.width.px]="f.width || null"
+            [value]="asText(f.key)"
+            (change)="set(f.key, $any($event.target).value)"
+          >
+            <option value="" [selected]="!asText(f.key)">{{ f.label || 'All' }}</option>
+            <option
+              *ngFor="let o of options(f)"
+              [value]="o.value"
+              [selected]="asText(f.key) === o.value"
+            >{{ o.label }}</option>
+          </select>
+
+          <div *ngSwitchCase="'chips'" class="taf-filter-bar__chips" data-kind="chips" [attr.data-key]="f.key">
+            <button
+              *ngFor="let o of options(f)"
+              type="button"
+              class="taf-filter-bar__chip"
+              [attr.data-active]="isPicked(f.key, o.value) ? '' : null"
+              [attr.aria-pressed]="isPicked(f.key, o.value)"
+              [disabled]="!!f.disabled"
+              (click)="toggleChip(f.key, o.value)"
+            >{{ o.label }}</button>
+          </div>
+
+          <input
+            *ngSwitchCase="'date'"
+            class="taf-filter-bar__field taf-filter-bar__date"
+            type="date"
+            data-kind="date"
+            [attr.data-key]="f.key"
+            [attr.aria-label]="f.label || f.key"
+            [attr.title]="f.title || f.label || null"
+            [disabled]="!!f.disabled"
+            [value]="asText(f.key)"
+            (input)="set(f.key, $any($event.target).value)"
+          />
+
+          <div *ngSwitchCase="'date-range'" class="taf-filter-bar__range" data-kind="date-range" [attr.data-key]="f.key">
+            <input
+              type="date"
+              class="taf-filter-bar__field taf-filter-bar__date"
+              [attr.aria-label]="(f.label || f.key) + ' from'"
+              title="From"
+              [disabled]="!!f.disabled"
+              [value]="range(f.key).from"
+              (input)="setRange(f.key, 'from', $any($event.target).value)"
+            />
+            <span class="taf-filter-bar__range-sep" aria-hidden="true">–</span>
+            <input
+              type="date"
+              class="taf-filter-bar__field taf-filter-bar__date"
+              [attr.aria-label]="(f.label || f.key) + ' to'"
+              title="To"
+              [disabled]="!!f.disabled"
+              [value]="range(f.key).to"
+              (input)="setRange(f.key, 'to', $any($event.target).value)"
+            />
+          </div>
+
+          <label *ngSwitchCase="'toggle'" class="taf-filter-bar__toggle" data-kind="toggle" [attr.data-key]="f.key">
+            <input
+              type="checkbox"
+              [disabled]="!!f.disabled"
+              [checked]="!!value[f.key]"
+              (change)="set(f.key, $any($event.target).checked)"
+            />
+            {{ f.label }}
+          </label>
+        </ng-container>
+      </ng-container>
+
+      <span class="taf-filter-bar__spacer"></span>
+      <ng-content select="[tafFilterBarEnd]"></ng-content>
+      <button
+        *ngIf="showClear && isDirty"
+        type="button"
+        class="taf-filter-bar__clear"
+        (click)="clear()"
+      >{{ clearLabel }}</button>
+    </div>
+  `, styles: ["taf-filter-bar{display:contents}\n"] }]
+        }], propDecorators: { filters: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], showClear: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], clearLabel: [{
+                type: Input
+            }], searchDebounce: [{
+                type: Input
+            }], changed: [{
+                type: Output
+            }], valueChange: [{
+                type: Output
+            }], cleared: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TafFilterBarComponent, TafFilterBarEndDirective };
+//# sourceMappingURL=jigisha_ruparel-taf-client-filter-bar-angular.mjs.map

package/fesm2022/jigisha_ruparel-taf-client-filter-bar-angular.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"jigisha_ruparel-taf-client-filter-bar-angular.mjs","sources":["../../src/taf-filter-bar.component.ts","../../src/jigisha_ruparel-taf-client-filter-bar-angular.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  Directive,\n  EventEmitter,\n  Input,\n  OnDestroy,\n  Output,\n  booleanAttribute,\n} from '@angular/core';\n\n/** What a filter looks like on screen. */\nexport type TafFilterKind = 'search' | 'select' | 'chips' | 'date' | 'date-range' | 'toggle';\n\n/** One entry in a select or chip group. */\nexport interface TafFilterOption {\n  value: string;\n  label: string;\n}\n\n/** One filter in the bar. `key` is what the value is stored and emitted under. */\nexport interface TafFilterSpec {\n  key: string;\n  kind: TafFilterKind;\n  /** Placeholder for a search box, the \"nothing selected\" entry for a select, the caption for a toggle. */\n  label?: string;\n  /** Options for `select` and `chips`. Raw rows work too — name the fields with optionValue/optionLabel. */\n  options?: readonly TafFilterOption[] | readonly object[];\n  optionValue?: string;\n  optionLabel?: string;\n  /** Width in px; the bar's own layout applies when unset. */\n  width?: number;\n  /** Search only: ms to wait after typing before emitting (0 emits on every keystroke). */\n  debounce?: number;\n  /** Shown instead of `label` inside the control, when both make sense (e.g. a select's own title). */\n  title?: string;\n  disabled?: boolean;\n}\n\n/** The bar's current state: one entry per filter key. */\nexport type TafFilterValue = Record<string, unknown>;\n\n/** Marks host content to place at the end of the bar (an export button, a view switch). */\n@Directive({ selector: '[tafFilterBarEnd]', standalone: true })\nexport class TafFilterBarEndDirective {}\n\n/**\n * `<taf-filter-bar>` — the row of controls that sits above a list: a search box, some selects, a\n * chip group, a date range, and a Clear that appears once anything is set.\n *\n * The bar owns no state. It renders `[value]`, and every interaction emits `(changed)` with the one\n * key that moved plus `(valueChange)` with the whole record, so a host can keep either one signal per\n * filter or a single object — whichever it already has.\n *\n * Values by kind: `search`/`select`/`date` → string; `chips` → string[]; `date-range` →\n * `{ from: string; to: string }`; `toggle` → boolean.\n *\n * Ships NO theme — `taf-filter-bar__*` class hooks plus `data-kind` / `data-active`, and\n * `ViewEncapsulation.None` is deliberately NOT used here: the controls are plain elements the host\n * app styles through those classes.\n */\n@Component({\n  selector: 'taf-filter-bar',\n  standalone: true,\n  imports: [CommonModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div class=\"taf-filter-bar\" role=\"search\">\n      <ng-container *ngFor=\"let f of filters; trackBy: trackKey\">\n        <ng-container [ngSwitch]=\"f.kind\">\n          <input\n            *ngSwitchCase=\"'search'\"\n            class=\"taf-filter-bar__field taf-filter-bar__search\"\n            type=\"search\"\n            data-kind=\"search\"\n            [attr.data-key]=\"f.key\"\n            [attr.aria-label]=\"f.label || 'Search'\"\n            [placeholder]=\"f.label || ''\"\n            [disabled]=\"!!f.disabled\"\n            [style.width.px]=\"f.width || null\"\n            [value]=\"asText(f.key)\"\n            (input)=\"onSearch(f, $any($event.target).value)\"\n          />\n\n          <select\n            *ngSwitchCase=\"'select'\"\n            class=\"taf-filter-bar__field taf-filter-bar__select\"\n            data-kind=\"select\"\n            [attr.data-key]=\"f.key\"\n            [attr.data-active]=\"asText(f.key) ? '' : null\"\n            [attr.aria-label]=\"f.title || f.label || f.key\"\n            [disabled]=\"!!f.disabled\"\n            [style.width.px]=\"f.width || null\"\n            [value]=\"asText(f.key)\"\n            (change)=\"set(f.key, $any($event.target).value)\"\n          >\n            <option value=\"\" [selected]=\"!asText(f.key)\">{{ f.label || 'All' }}</option>\n            <option\n              *ngFor=\"let o of options(f)\"\n              [value]=\"o.value\"\n              [selected]=\"asText(f.key) === o.value\"\n            >{{ o.label }}</option>\n          </select>\n\n          <div *ngSwitchCase=\"'chips'\" class=\"taf-filter-bar__chips\" data-kind=\"chips\" [attr.data-key]=\"f.key\">\n            <button\n              *ngFor=\"let o of options(f)\"\n              type=\"button\"\n              class=\"taf-filter-bar__chip\"\n              [attr.data-active]=\"isPicked(f.key, o.value) ? '' : null\"\n              [attr.aria-pressed]=\"isPicked(f.key, o.value)\"\n              [disabled]=\"!!f.disabled\"\n              (click)=\"toggleChip(f.key, o.value)\"\n            >{{ o.label }}</button>\n          </div>\n\n          <input\n            *ngSwitchCase=\"'date'\"\n            class=\"taf-filter-bar__field taf-filter-bar__date\"\n            type=\"date\"\n            data-kind=\"date\"\n            [attr.data-key]=\"f.key\"\n            [attr.aria-label]=\"f.label || f.key\"\n            [attr.title]=\"f.title || f.label || null\"\n            [disabled]=\"!!f.disabled\"\n            [value]=\"asText(f.key)\"\n            (input)=\"set(f.key, $any($event.target).value)\"\n          />\n\n          <div *ngSwitchCase=\"'date-range'\" class=\"taf-filter-bar__range\" data-kind=\"date-range\" [attr.data-key]=\"f.key\">\n            <input\n              type=\"date\"\n              class=\"taf-filter-bar__field taf-filter-bar__date\"\n              [attr.aria-label]=\"(f.label || f.key) + ' from'\"\n              title=\"From\"\n              [disabled]=\"!!f.disabled\"\n              [value]=\"range(f.key).from\"\n              (input)=\"setRange(f.key, 'from', $any($event.target).value)\"\n            />\n            <span class=\"taf-filter-bar__range-sep\" aria-hidden=\"true\">–</span>\n            <input\n              type=\"date\"\n              class=\"taf-filter-bar__field taf-filter-bar__date\"\n              [attr.aria-label]=\"(f.label || f.key) + ' to'\"\n              title=\"To\"\n              [disabled]=\"!!f.disabled\"\n              [value]=\"range(f.key).to\"\n              (input)=\"setRange(f.key, 'to', $any($event.target).value)\"\n            />\n          </div>\n\n          <label *ngSwitchCase=\"'toggle'\" class=\"taf-filter-bar__toggle\" data-kind=\"toggle\" [attr.data-key]=\"f.key\">\n            <input\n              type=\"checkbox\"\n              [disabled]=\"!!f.disabled\"\n              [checked]=\"!!value[f.key]\"\n              (change)=\"set(f.key, $any($event.target).checked)\"\n            />\n            {{ f.label }}\n          </label>\n        </ng-container>\n      </ng-container>\n\n      <span class=\"taf-filter-bar__spacer\"></span>\n      <ng-content select=\"[tafFilterBarEnd]\"></ng-content>\n      <button\n        *ngIf=\"showClear && isDirty\"\n        type=\"button\"\n        class=\"taf-filter-bar__clear\"\n        (click)=\"clear()\"\n      >{{ clearLabel }}</button>\n    </div>\n  `,\n  styles: [\n    `\n      taf-filter-bar { display: contents; }\n    `,\n  ],\n})\nexport class TafFilterBarComponent implements OnDestroy {\n  @Input() filters: readonly TafFilterSpec[] = [];\n  @Input() value: TafFilterValue = {};\n  /** Show a Clear button once any filter is set. */\n  @Input({ transform: booleanAttribute }) showClear = true;\n  @Input() clearLabel = 'Clear';\n  /** Default debounce for `search` filters that do not set their own, in ms. */\n  @Input() searchDebounce = 200;\n\n  /** The one filter that moved. */\n  @Output() readonly changed = new EventEmitter<{ key: string; value: unknown }>();\n  /** The whole record after that change. */\n  @Output() readonly valueChange = new EventEmitter<TafFilterValue>();\n  /** Clear pressed — the host decides what \"empty\" means for its own state. */\n  @Output() readonly cleared = new EventEmitter<void>();\n\n  private timer?: ReturnType<typeof setTimeout>;\n\n  ngOnDestroy(): void {\n    if (this.timer) clearTimeout(this.timer);\n  }\n\n  /** True when anything is set — what makes Clear appear. */\n  get isDirty(): boolean {\n    return this.filters.some((f) => {\n      const v = this.value[f.key];\n      if (Array.isArray(v)) return v.length > 0;\n      if (v && typeof v === 'object') return Object.values(v as object).some(Boolean);\n      return v !== undefined && v !== null && v !== '' && v !== false;\n    });\n  }\n\n  protected trackKey = (_: number, f: TafFilterSpec) => f.key;\n\n  protected options(f: TafFilterSpec): TafFilterOption[] {\n    const raw = f.options ?? [];\n    const vk = f.optionValue;\n    const lk = f.optionLabel;\n    if (!vk && !lk) return raw as TafFilterOption[];\n    return (raw as readonly Record<string, unknown>[]).map((o) => ({\n      value: String(o[vk ?? 'value'] ?? ''),\n      label: String(o[lk ?? 'label'] ?? o[vk ?? 'value'] ?? ''),\n    }));\n  }\n\n  protected asText(key: string): string {\n    const v = this.value[key];\n    return v === undefined || v === null ? '' : String(v);\n  }\n\n  protected range(key: string): { from: string; to: string } {\n    const v = (this.value[key] ?? {}) as { from?: string; to?: string };\n    return { from: v.from ?? '', to: v.to ?? '' };\n  }\n\n  protected isPicked(key: string, option: string): boolean {\n    const v = this.value[key];\n    return Array.isArray(v) ? v.includes(option) : false;\n  }\n\n  protected onSearch(f: TafFilterSpec, text: string): void {\n    const wait = f.debounce ?? this.searchDebounce;\n    if (this.timer) clearTimeout(this.timer);\n    if (!wait) {\n      this.set(f.key, text);\n      return;\n    }\n    this.timer = setTimeout(() => this.set(f.key, text), wait);\n  }\n\n  protected toggleChip(key: string, option: string): void {\n    const current = Array.isArray(this.value[key]) ? ([...(this.value[key] as string[])]) : [];\n    const at = current.indexOf(option);\n    if (at >= 0) current.splice(at, 1);\n    else current.push(option);\n    this.set(key, current);\n  }\n\n  protected setRange(key: string, edge: 'from' | 'to', text: string): void {\n    this.set(key, { ...this.range(key), [edge]: text });\n  }\n\n  protected set(key: string, next: unknown): void {\n    this.value = { ...this.value, [key]: next };\n    this.changed.emit({ key, value: next });\n    this.valueChange.emit(this.value);\n  }\n\n  protected clear(): void {\n    const empty: TafFilterValue = {};\n    for (const f of this.filters) {\n      empty[f.key] =\n        f.kind === 'chips' ? [] : f.kind === 'date-range' ? { from: '', to: '' } : f.kind === 'toggle' ? false : '';\n    }\n    this.value = empty;\n    this.cleared.emit();\n    this.valueChange.emit(this.value);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@jigisha_ruparel/taf-client-filter-bar-angular",
+  "version": "0.1.0",
+  "description": "<taf-filter-bar> — the themeless row of list filters: search, selects, chip groups, date ranges and Clear.",
+  "publishConfig": {
+    "access": "public",
+    "directory": "dist"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=17",
+    "@angular/common": ">=17"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "module": "fesm2022/jigisha_ruparel-taf-client-filter-bar-angular.mjs",
+  "typings": "types/jigisha_ruparel-taf-client-filter-bar-angular.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/jigisha_ruparel-taf-client-filter-bar-angular.d.ts",
+      "default": "./fesm2022/jigisha_ruparel-taf-client-filter-bar-angular.mjs"
+    }
+  },
+  "sideEffects": false,
+  "type": "module"
+}

package/types/jigisha_ruparel-taf-client-filter-bar-angular.d.ts

@@ -0,0 +1,91 @@
+import * as i0 from '@angular/core';
+import { OnDestroy, EventEmitter } from '@angular/core';
+
+/** What a filter looks like on screen. */
+type TafFilterKind = 'search' | 'select' | 'chips' | 'date' | 'date-range' | 'toggle';
+/** One entry in a select or chip group. */
+interface TafFilterOption {
+    value: string;
+    label: string;
+}
+/** One filter in the bar. `key` is what the value is stored and emitted under. */
+interface TafFilterSpec {
+    key: string;
+    kind: TafFilterKind;
+    /** Placeholder for a search box, the "nothing selected" entry for a select, the caption for a toggle. */
+    label?: string;
+    /** Options for `select` and `chips`. Raw rows work too — name the fields with optionValue/optionLabel. */
+    options?: readonly TafFilterOption[] | readonly object[];
+    optionValue?: string;
+    optionLabel?: string;
+    /** Width in px; the bar's own layout applies when unset. */
+    width?: number;
+    /** Search only: ms to wait after typing before emitting (0 emits on every keystroke). */
+    debounce?: number;
+    /** Shown instead of `label` inside the control, when both make sense (e.g. a select's own title). */
+    title?: string;
+    disabled?: boolean;
+}
+/** The bar's current state: one entry per filter key. */
+type TafFilterValue = Record<string, unknown>;
+/** Marks host content to place at the end of the bar (an export button, a view switch). */
+declare class TafFilterBarEndDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TafFilterBarEndDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TafFilterBarEndDirective, "[tafFilterBarEnd]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * `<taf-filter-bar>` — the row of controls that sits above a list: a search box, some selects, a
+ * chip group, a date range, and a Clear that appears once anything is set.
+ *
+ * The bar owns no state. It renders `[value]`, and every interaction emits `(changed)` with the one
+ * key that moved plus `(valueChange)` with the whole record, so a host can keep either one signal per
+ * filter or a single object — whichever it already has.
+ *
+ * Values by kind: `search`/`select`/`date` → string; `chips` → string[]; `date-range` →
+ * `{ from: string; to: string }`; `toggle` → boolean.
+ *
+ * Ships NO theme — `taf-filter-bar__*` class hooks plus `data-kind` / `data-active`, and
+ * `ViewEncapsulation.None` is deliberately NOT used here: the controls are plain elements the host
+ * app styles through those classes.
+ */
+declare class TafFilterBarComponent implements OnDestroy {
+    filters: readonly TafFilterSpec[];
+    value: TafFilterValue;
+    /** Show a Clear button once any filter is set. */
+    showClear: boolean;
+    clearLabel: string;
+    /** Default debounce for `search` filters that do not set their own, in ms. */
+    searchDebounce: number;
+    /** The one filter that moved. */
+    readonly changed: EventEmitter<{
+        key: string;
+        value: unknown;
+    }>;
+    /** The whole record after that change. */
+    readonly valueChange: EventEmitter<TafFilterValue>;
+    /** Clear pressed — the host decides what "empty" means for its own state. */
+    readonly cleared: EventEmitter<void>;
+    private timer?;
+    ngOnDestroy(): void;
+    /** True when anything is set — what makes Clear appear. */
+    get isDirty(): boolean;
+    protected trackKey: (_: number, f: TafFilterSpec) => string;
+    protected options(f: TafFilterSpec): TafFilterOption[];
+    protected asText(key: string): string;
+    protected range(key: string): {
+        from: string;
+        to: string;
+    };
+    protected isPicked(key: string, option: string): boolean;
+    protected onSearch(f: TafFilterSpec, text: string): void;
+    protected toggleChip(key: string, option: string): void;
+    protected setRange(key: string, edge: 'from' | 'to', text: string): void;
+    protected set(key: string, next: unknown): void;
+    protected clear(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TafFilterBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TafFilterBarComponent, "taf-filter-bar", never, { "filters": { "alias": "filters"; "required": false; }; "value": { "alias": "value"; "required": false; }; "showClear": { "alias": "showClear"; "required": false; }; "clearLabel": { "alias": "clearLabel"; "required": false; }; "searchDebounce": { "alias": "searchDebounce"; "required": false; }; }, { "changed": "changed"; "valueChange": "valueChange"; "cleared": "cleared"; }, never, ["[tafFilterBarEnd]"], true, never>;
+    static ngAcceptInputType_showClear: unknown;
+}
+
+export { TafFilterBarComponent, TafFilterBarEndDirective };
+export type { TafFilterKind, TafFilterOption, TafFilterSpec, TafFilterValue };