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

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

@@ -1,8 +1,18 @@
 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';
+import { Directive, EventEmitter, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
 
+/** Marks host content to place at the START of the bar, before the filters (a date navigator, a
+ * tab strip, a counts block) — the controls a row leads with rather than trails. */
+class TafFilterBarStartDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TafFilterBarStartDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: TafFilterBarStartDirective, isStandalone: true, selector: "[tafFilterBarStart]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TafFilterBarStartDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[tafFilterBarStart]', standalone: true }]
+        }] });
 /** 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 });
@@ -20,8 +30,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
  * 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.
+ * Values by kind: `search`/`select`/`date`/`segmented` → string; `chips` → string[]; `date-range` →
+ * `{ from: string; to: string }`; `toggle` → boolean. `segmented` is the single-select sibling of
+ * `chips`, for a status rail where exactly one choice is active.
  *
  * 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
@@ -30,8 +41,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 class TafFilterBarComponent {
     filters = [];
     value = {};
-    /** Show a Clear button once any filter is set. */
-    showClear = true;
+    /**
+     * Whether the Clear button renders. Left unset it appears once any filter is set; set it
+     * explicitly to decide yourself — a host whose Clear also resets state the bar cannot see (tiles,
+     * a tree selection) needs that, or Clear would hide while those filters are still on.
+     */
+    showClear = null;
     clearLabel = 'Clear';
     /** Default debounce for `search` filters that do not set their own, in ms. */
     searchDebounce = 200;
@@ -46,7 +61,11 @@ class TafFilterBarComponent {
         if (this.timer)
             clearTimeout(this.timer);
     }
-    /** True when anything is set — what makes Clear appear. */
+    /** Clear renders when the host says so, or by default once anything is set. */
+    get clearVisible() {
+        return this.showClear ?? this.isDirty;
+    }
+    /** True when anything is set. */
     get isDirty() {
         return this.filters.some((f) => {
             const v = this.value[f.key];
@@ -67,6 +86,8 @@ class TafFilterBarComponent {
         return raw.map((o) => ({
             value: String(o[vk ?? 'value'] ?? ''),
             label: String(o[lk ?? 'label'] ?? o[vk ?? 'value'] ?? ''),
+            count: typeof o['count'] === 'number' ? o['count'] : undefined,
+            dot: typeof o['dot'] === 'string' ? o['dot'] : undefined,
         }));
     }
     asText(key) {
@@ -119,9 +140,18 @@ class TafFilterBarComponent {
         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: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: TafFilterBarComponent, isStandalone: true, selector: "taf-filter-bar", inputs: { filters: "filters", value: "value", showClear: "showClear", clearLabel: "clearLabel", searchDebounce: "searchDebounce" }, outputs: { changed: "changed", valueChange: "valueChange", cleared: "cleared" }, ngImport: i0, template: `
     <div class="taf-filter-bar" role="search">
+      <ng-content select="[tafFilterBarStart]"></ng-content>
       <ng-container *ngFor="let f of filters; trackBy: trackKey">
+        <div
+          class="taf-filter-bar__group"
+          [attr.data-key]="f.key"
+          [attr.data-kind]="f.kind"
+          [attr.data-captioned]="f.caption ? '' : null"
+          [attr.data-grow]="f.grow ? '' : null"
+        >
+        <span class="taf-filter-bar__caption" *ngIf="f.caption">{{ f.caption }}</span>
         <ng-container [ngSwitch]="f.kind">
           <input
             *ngSwitchCase="'search'"
@@ -149,7 +179,7 @@ class TafFilterBarComponent {
             [value]="asText(f.key)"
             (change)="set(f.key, $any($event.target).value)"
           >
-            <option value="" [selected]="!asText(f.key)">{{ f.label || 'All' }}</option>
+            <option *ngIf="f.allowEmpty !== false" value="" [selected]="!asText(f.key)">{{ f.label || 'All' }}</option>
             <option
               *ngFor="let o of options(f)"
               [value]="o.value"
@@ -166,7 +196,35 @@ class TafFilterBarComponent {
               [attr.aria-pressed]="isPicked(f.key, o.value)"
               [disabled]="!!f.disabled"
               (click)="toggleChip(f.key, o.value)"
-            >{{ o.label }}</button>
+            >
+              <span class="taf-filter-bar__dot" *ngIf="o.dot" [style.background]="o.dot" aria-hidden="true"></span>
+              {{ o.label }}
+              <span class="taf-filter-bar__count" *ngIf="o.count !== undefined">{{ o.count }}</span>
+            </button>
+          </div>
+
+          <div
+            *ngSwitchCase="'segmented'"
+            class="taf-filter-bar__chips taf-filter-bar__chips--single"
+            data-kind="segmented"
+            role="radiogroup"
+            [attr.data-key]="f.key"
+          >
+            <button
+              *ngFor="let o of options(f)"
+              type="button"
+              role="radio"
+              class="taf-filter-bar__chip"
+              [attr.data-active]="asText(f.key) === o.value ? '' : null"
+              [attr.data-option]="o.value"
+              [attr.aria-checked]="asText(f.key) === o.value"
+              [disabled]="!!f.disabled"
+              (click)="set(f.key, o.value)"
+            >
+              <span class="taf-filter-bar__dot" *ngIf="o.dot" [style.background]="o.dot" aria-hidden="true"></span>
+              {{ o.label }}
+              <span class="taf-filter-bar__count" *ngIf="o.count !== undefined">{{ o.count }}</span>
+            </button>
           </div>
 
           <input
@@ -214,12 +272,13 @@ class TafFilterBarComponent {
             {{ f.label }}
           </label>
         </ng-container>
+        </div>
       </ng-container>
 
       <span class="taf-filter-bar__spacer"></span>
       <ng-content select="[tafFilterBarEnd]"></ng-content>
       <button
-        *ngIf="showClear && isDirty"
+        *ngIf="clearVisible"
         type="button"
         class="taf-filter-bar__clear"
         (click)="clear()"
@@ -231,7 +290,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             type: Component,
             args: [{ selector: 'taf-filter-bar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="taf-filter-bar" role="search">
+      <ng-content select="[tafFilterBarStart]"></ng-content>
       <ng-container *ngFor="let f of filters; trackBy: trackKey">
+        <div
+          class="taf-filter-bar__group"
+          [attr.data-key]="f.key"
+          [attr.data-kind]="f.kind"
+          [attr.data-captioned]="f.caption ? '' : null"
+          [attr.data-grow]="f.grow ? '' : null"
+        >
+        <span class="taf-filter-bar__caption" *ngIf="f.caption">{{ f.caption }}</span>
         <ng-container [ngSwitch]="f.kind">
           <input
             *ngSwitchCase="'search'"
@@ -259,7 +327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             [value]="asText(f.key)"
             (change)="set(f.key, $any($event.target).value)"
           >
-            <option value="" [selected]="!asText(f.key)">{{ f.label || 'All' }}</option>
+            <option *ngIf="f.allowEmpty !== false" value="" [selected]="!asText(f.key)">{{ f.label || 'All' }}</option>
             <option
               *ngFor="let o of options(f)"
               [value]="o.value"
@@ -276,7 +344,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
               [attr.aria-pressed]="isPicked(f.key, o.value)"
               [disabled]="!!f.disabled"
               (click)="toggleChip(f.key, o.value)"
-            >{{ o.label }}</button>
+            >
+              <span class="taf-filter-bar__dot" *ngIf="o.dot" [style.background]="o.dot" aria-hidden="true"></span>
+              {{ o.label }}
+              <span class="taf-filter-bar__count" *ngIf="o.count !== undefined">{{ o.count }}</span>
+            </button>
+          </div>
+
+          <div
+            *ngSwitchCase="'segmented'"
+            class="taf-filter-bar__chips taf-filter-bar__chips--single"
+            data-kind="segmented"
+            role="radiogroup"
+            [attr.data-key]="f.key"
+          >
+            <button
+              *ngFor="let o of options(f)"
+              type="button"
+              role="radio"
+              class="taf-filter-bar__chip"
+              [attr.data-active]="asText(f.key) === o.value ? '' : null"
+              [attr.data-option]="o.value"
+              [attr.aria-checked]="asText(f.key) === o.value"
+              [disabled]="!!f.disabled"
+              (click)="set(f.key, o.value)"
+            >
+              <span class="taf-filter-bar__dot" *ngIf="o.dot" [style.background]="o.dot" aria-hidden="true"></span>
+              {{ o.label }}
+              <span class="taf-filter-bar__count" *ngIf="o.count !== undefined">{{ o.count }}</span>
+            </button>
           </div>
 
           <input
@@ -324,12 +420,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             {{ f.label }}
           </label>
         </ng-container>
+        </div>
       </ng-container>
 
       <span class="taf-filter-bar__spacer"></span>
       <ng-content select="[tafFilterBarEnd]"></ng-content>
       <button
-        *ngIf="showClear && isDirty"
+        *ngIf="clearVisible"
         type="button"
         class="taf-filter-bar__clear"
         (click)="clear()"
@@ -341,8 +438,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             }], value: [{
                 type: Input
             }], showClear: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
+                type: Input
             }], clearLabel: [{
                 type: Input
             }], searchDebounce: [{
@@ -354,10 +450,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             }], cleared: [{
                 type: Output
             }] } });
+/**
+ * Everything `<taf-filter-bar>` needs, in one import: `imports: [...TAF_FILTER_BAR]`.
+ * Importing the component alone leaves `[tafFilterBarStart]` / `[tafFilterBarEnd]` content
+ * unprojected — it simply does not render, with no error.
+ */
+const TAF_FILTER_BAR = [
+    TafFilterBarComponent,
+    TafFilterBarStartDirective,
+    TafFilterBarEndDirective,
+];
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { TafFilterBarComponent, TafFilterBarEndDirective };
+export { TAF_FILTER_BAR, TafFilterBarComponent, TafFilterBarEndDirective, TafFilterBarStartDirective };
 //# sourceMappingURL=jigisha_ruparel-taf-client-filter-bar-angular.mjs.map

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

@@ -1 +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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"}
+{"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' | 'segmented' | 'date' | 'date-range' | 'toggle';\n\n/** One entry in a select or chip group. */\nexport interface TafFilterOption {\n  value: string;\n  label: string;\n  /** A live count beside the label — how many rows this choice would show. */\n  count?: number;\n  /** A colour for the chip's leading dot; the host theme decides what it means. */\n  dot?: 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  /** A caption above the control, for a bar whose groups are labelled (DATE RANGE, STATUS, …). */\n  caption?: string;\n  /**\n   * `select` only. False drops the injected \"nothing selected\" entry, for a preset picker whose\n   * every option is a real value and which therefore always has one chosen.\n   */\n  allowEmpty?: boolean;\n  /**\n   * Let this control take the row's leftover width — a chip group that used to be the flexible\n   * element of a toolbar, so what follows it stays on the same line instead of wrapping.\n   */\n  grow?: 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 START of the bar, before the filters (a date navigator, a\n * tab strip, a counts block) — the controls a row leads with rather than trails. */\n@Directive({ selector: '[tafFilterBarStart]', standalone: true })\nexport class TafFilterBarStartDirective {}\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`/`segmented` → string; `chips` → string[]; `date-range` →\n * `{ from: string; to: string }`; `toggle` → boolean. `segmented` is the single-select sibling of\n * `chips`, for a status rail where exactly one choice is active.\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-content select=\"[tafFilterBarStart]\"></ng-content>\n      <ng-container *ngFor=\"let f of filters; trackBy: trackKey\">\n        <div\n          class=\"taf-filter-bar__group\"\n          [attr.data-key]=\"f.key\"\n          [attr.data-kind]=\"f.kind\"\n          [attr.data-captioned]=\"f.caption ? '' : null\"\n          [attr.data-grow]=\"f.grow ? '' : null\"\n        >\n        <span class=\"taf-filter-bar__caption\" *ngIf=\"f.caption\">{{ f.caption }}</span>\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 *ngIf=\"f.allowEmpty !== false\" 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            >\n              <span class=\"taf-filter-bar__dot\" *ngIf=\"o.dot\" [style.background]=\"o.dot\" aria-hidden=\"true\"></span>\n              {{ o.label }}\n              <span class=\"taf-filter-bar__count\" *ngIf=\"o.count !== undefined\">{{ o.count }}</span>\n            </button>\n          </div>\n\n          <div\n            *ngSwitchCase=\"'segmented'\"\n            class=\"taf-filter-bar__chips taf-filter-bar__chips--single\"\n            data-kind=\"segmented\"\n            role=\"radiogroup\"\n            [attr.data-key]=\"f.key\"\n          >\n            <button\n              *ngFor=\"let o of options(f)\"\n              type=\"button\"\n              role=\"radio\"\n              class=\"taf-filter-bar__chip\"\n              [attr.data-active]=\"asText(f.key) === o.value ? '' : null\"\n              [attr.data-option]=\"o.value\"\n              [attr.aria-checked]=\"asText(f.key) === o.value\"\n              [disabled]=\"!!f.disabled\"\n              (click)=\"set(f.key, o.value)\"\n            >\n              <span class=\"taf-filter-bar__dot\" *ngIf=\"o.dot\" [style.background]=\"o.dot\" aria-hidden=\"true\"></span>\n              {{ o.label }}\n              <span class=\"taf-filter-bar__count\" *ngIf=\"o.count !== undefined\">{{ o.count }}</span>\n            </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        </div>\n      </ng-container>\n\n      <span class=\"taf-filter-bar__spacer\"></span>\n      <ng-content select=\"[tafFilterBarEnd]\"></ng-content>\n      <button\n        *ngIf=\"clearVisible\"\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  /**\n   * Whether the Clear button renders. Left unset it appears once any filter is set; set it\n   * explicitly to decide yourself — a host whose Clear also resets state the bar cannot see (tiles,\n   * a tree selection) needs that, or Clear would hide while those filters are still on.\n   */\n  @Input() showClear: boolean | null = null;\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  /** Clear renders when the host says so, or by default once anything is set. */\n  get clearVisible(): boolean {\n    return this.showClear ?? this.isDirty;\n  }\n\n  /** True when anything is set. */\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      count: typeof o['count'] === 'number' ? (o['count'] as number) : undefined,\n      dot: typeof o['dot'] === 'string' ? (o['dot'] as string) : undefined,\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/**\n * Everything `<taf-filter-bar>` needs, in one import: `imports: [...TAF_FILTER_BAR]`.\n * Importing the component alone leaves `[tafFilterBarStart]` / `[tafFilterBarEnd]` content\n * unprojected — it simply does not render, with no error.\n */\nexport const TAF_FILTER_BAR = [\n  TafFilterBarComponent,\n  TafFilterBarStartDirective,\n  TafFilterBarEndDirective,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jigisha_ruparel/taf-client-filter-bar-angular",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "<taf-filter-bar> — the themeless row of list filters: search, selects, chip groups, date ranges and Clear.",
   "publishConfig": {
     "access": "public",

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

@@ -2,11 +2,15 @@ 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';
+type TafFilterKind = 'search' | 'select' | 'chips' | 'segmented' | 'date' | 'date-range' | 'toggle';
 /** One entry in a select or chip group. */
 interface TafFilterOption {
     value: string;
     label: string;
+    /** A live count beside the label — how many rows this choice would show. */
+    count?: number;
+    /** A colour for the chip's leading dot; the host theme decides what it means. */
+    dot?: string;
 }
 /** One filter in the bar. `key` is what the value is stored and emitted under. */
 interface TafFilterSpec {
@@ -25,9 +29,27 @@ interface TafFilterSpec {
     /** Shown instead of `label` inside the control, when both make sense (e.g. a select's own title). */
     title?: string;
     disabled?: boolean;
+    /** A caption above the control, for a bar whose groups are labelled (DATE RANGE, STATUS, …). */
+    caption?: string;
+    /**
+     * `select` only. False drops the injected "nothing selected" entry, for a preset picker whose
+     * every option is a real value and which therefore always has one chosen.
+     */
+    allowEmpty?: boolean;
+    /**
+     * Let this control take the row's leftover width — a chip group that used to be the flexible
+     * element of a toolbar, so what follows it stays on the same line instead of wrapping.
+     */
+    grow?: boolean;
 }
 /** The bar's current state: one entry per filter key. */
 type TafFilterValue = Record<string, unknown>;
+/** Marks host content to place at the START of the bar, before the filters (a date navigator, a
+ * tab strip, a counts block) — the controls a row leads with rather than trails. */
+declare class TafFilterBarStartDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TafFilterBarStartDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TafFilterBarStartDirective, "[tafFilterBarStart]", never, {}, {}, never, never, true, never>;
+}
 /** 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>;
@@ -41,8 +63,9 @@ declare class TafFilterBarEndDirective {
  * 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.
+ * Values by kind: `search`/`select`/`date`/`segmented` → string; `chips` → string[]; `date-range` →
+ * `{ from: string; to: string }`; `toggle` → boolean. `segmented` is the single-select sibling of
+ * `chips`, for a status rail where exactly one choice is active.
  *
  * 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
@@ -51,8 +74,12 @@ declare class TafFilterBarEndDirective {
 declare class TafFilterBarComponent implements OnDestroy {
     filters: readonly TafFilterSpec[];
     value: TafFilterValue;
-    /** Show a Clear button once any filter is set. */
-    showClear: boolean;
+    /**
+     * Whether the Clear button renders. Left unset it appears once any filter is set; set it
+     * explicitly to decide yourself — a host whose Clear also resets state the bar cannot see (tiles,
+     * a tree selection) needs that, or Clear would hide while those filters are still on.
+     */
+    showClear: boolean | null;
     clearLabel: string;
     /** Default debounce for `search` filters that do not set their own, in ms. */
     searchDebounce: number;
@@ -67,7 +94,9 @@ declare class TafFilterBarComponent implements OnDestroy {
     readonly cleared: EventEmitter<void>;
     private timer?;
     ngOnDestroy(): void;
-    /** True when anything is set — what makes Clear appear. */
+    /** Clear renders when the host says so, or by default once anything is set. */
+    get clearVisible(): boolean;
+    /** True when anything is set. */
     get isDirty(): boolean;
     protected trackKey: (_: number, f: TafFilterSpec) => string;
     protected options(f: TafFilterSpec): TafFilterOption[];
@@ -83,9 +112,14 @@ declare class TafFilterBarComponent implements OnDestroy {
     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;
+    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, ["[tafFilterBarStart]", "[tafFilterBarEnd]"], true, never>;
 }
+/**
+ * Everything `<taf-filter-bar>` needs, in one import: `imports: [...TAF_FILTER_BAR]`.
+ * Importing the component alone leaves `[tafFilterBarStart]` / `[tafFilterBarEnd]` content
+ * unprojected — it simply does not render, with no error.
+ */
+declare const TAF_FILTER_BAR: readonly [typeof TafFilterBarComponent, typeof TafFilterBarStartDirective, typeof TafFilterBarEndDirective];
 
-export { TafFilterBarComponent, TafFilterBarEndDirective };
+export { TAF_FILTER_BAR, TafFilterBarComponent, TafFilterBarEndDirective, TafFilterBarStartDirective };
 export type { TafFilterKind, TafFilterOption, TafFilterSpec, TafFilterValue };