ng-adflowtail 0.1.0

package/fesm2022/ng-adflowtail-ad-multi-select.mjs

@@ -0,0 +1,97 @@
+import * as i0 from '@angular/core';
+import { signal, computed, HostListener, Input, Component } from '@angular/core';
+import * as i1 from 'ng-adflowtail';
+import { AdPrimaryColorDirective } from 'ng-adflowtail';
+
+class AdMultiSelect {
+    el;
+    /** Signal Forms field bound to a string[] value, e.g. userForm.settings.permissions */
+    formField;
+    options = [];
+    placeholder = 'Select options';
+    disabled = false;
+    errorMessage = '';
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    constructor(el) {
+        this.el = el;
+    }
+    /** field() returns FieldState<string[]>; .value() is the actual array signal */
+    selectedValues = computed(() => this.formField().value() ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
+    hasError() {
+        return this.formField().touched() && this.formField().invalid();
+    }
+    labelFor(value) {
+        return this.options.find((o) => o.value === value)?.label ?? value;
+    }
+    isSelected(value) {
+        return this.selectedValues().includes(value);
+    }
+    toggleOpen() {
+        if (this.disabled)
+            return;
+        this.isOpen.update((v) => !v);
+    }
+    close() {
+        this.isOpen.set(false);
+    }
+    toggleValue(value) {
+        const current = this.selectedValues();
+        const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
+        this.writeValue(next);
+    }
+    removeValue(value, event) {
+        event.stopPropagation(); // don't reopen/close the dropdown when removing a chip
+        this.writeValue(this.selectedValues().filter((v) => v !== value));
+    }
+    selectAll() {
+        this.writeValue(this.options.map((o) => o.value));
+    }
+    clearAll() {
+        this.writeValue([]);
+    }
+    writeValue(next) {
+        // field() returns FieldState<string[]>; .value is a WritableSignal<string[]>
+        this.formField().value.set(next);
+        this.formField().markAsTouched();
+        this.formField().markAsDirty();
+    }
+    onDocumentClick(event) {
+        if (!this.el.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AdMultiSelect, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: AdMultiSelect, isStandalone: true, selector: "ad-multi-select", inputs: { formField: "formField", options: "options", placeholder: "placeholder", disabled: "disabled", errorMessage: "errorMessage" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, hostDirectives: [{ directive: i1.AdPrimaryColorDirective, inputs: ["primaryColor", "primaryColor"] }], ngImport: i0, template: "<div class=\"relative w-full\" (keydown.escape)=\"close()\">\n  <!-- Trigger -->\n  <button\n    type=\"button\"\n    class=\"flex items-center justify-between bg-neutral-secondary-medium border-2 border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand w-full px-3 py-2.5 shadow-xs placeholder:text-body\"\n    [class.border-default-medium]=\"!hasError()\"\n    [class.border-red-500]=\"hasError()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-disabled]=\"disabled\"\n    [disabled]=\"disabled\"\n    (click)=\"toggleOpen()\"\n  >\n    <!-- Selected chips, or placeholder -->\n    <div class=\"flex flex-wrap gap-1.5 items-center\" [class.text-fg-disabled]=\"disabled\">\n      @if (selectedValues().length) {\n        @for (val of selectedValues(); track val) {\n          <span\n            class=\"inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-brand/10 text-fg-brand\"\n          >\n            {{ labelFor(val) }}\n\n            @if (!disabled) {\n              <span\n                class=\"cursor-pointer hover:text-red-500\"\n                (click)=\"removeValue(val, $event)\"\n                role=\"button\"\n                [attr.aria-label]=\"'Remove ' + labelFor(val)\"\n              >\n                &times;\n              </span>\n            }\n          </span>\n        }\n      } @else {\n        <span class=\"text-body\">{{ placeholder }}</span>\n      }\n    </div>\n\n    <svg\n      class=\"w-4 h-4 ms-2 shrink-0 text-body transition-transform\"\n      [class.rotate-180]=\"isOpen()\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n    >\n      <path\n        stroke=\"currentColor\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\"\n        d=\"m19 9-7 7-7-7\"\n      />\n    </svg>\n  </button>\n\n  <!-- Dropdown panel -->\n  @if (isOpen()) {\n    <div\n      class=\"absolute z-10 mt-1 w-full bg-neutral-primary-medium border border-default-medium rounded-base shadow-lg max-h-60 overflow-y-auto\"\n    >\n      <div class=\"flex items-center justify-between px-2 py-1.5 border-b border-default-medium\">\n        <button\n          type=\"button\"\n          class=\"text-xs font-medium text-fg-brand hover:underline\"\n          (click)=\"selectAll()\"\n        >\n          Select all\n        </button>\n        <button\n          type=\"button\"\n          class=\"text-xs font-medium text-body hover:underline\"\n          (click)=\"clearAll()\"\n        >\n          Clear\n        </button>\n      </div>\n\n      <ul class=\"p-1 text-sm text-body\" role=\"listbox\" aria-multiselectable=\"true\">\n        @for (opt of options; track opt) {\n          <li>\n            <label\n              class=\"flex items-center gap-2 w-full p-2 rounded-md cursor-pointer hover:bg-neutral-tertiary-medium text-sm font-medium text-heading\"\n            >\n              <input\n                type=\"checkbox\"\n                class=\"w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft\"\n                [checked]=\"isSelected(opt.value)\"\n                (change)=\"toggleValue(opt.value)\"\n              />\n              {{ opt.label }}\n            </label>\n          </li>\n        }\n\n        @if (!options.length) {\n          <li class=\"p-2 text-body text-sm\">No options available</li>\n        }\n      </ul>\n    </div>\n  }\n\n  @if (hasError() && errorMessage) {\n    <p class=\"mt-1.5 text-sm text-red-500\">\n      {{ errorMessage }}\n    </p>\n  }\n</div>\n", styles: [":host{display:block}:host ::ng-deep .rotate-180{transform:rotate(180deg)}ul::-webkit-scrollbar{width:6px}ul::-webkit-scrollbar-thumb{background-color:#9ca3af80;border-radius:9999px}ul::-webkit-scrollbar-track{background:transparent}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AdMultiSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'ad-multi-select', imports: [], hostDirectives: [
+                        {
+                            directive: AdPrimaryColorDirective,
+                            inputs: ['primaryColor']
+                        }
+                    ], template: "<div class=\"relative w-full\" (keydown.escape)=\"close()\">\n  <!-- Trigger -->\n  <button\n    type=\"button\"\n    class=\"flex items-center justify-between bg-neutral-secondary-medium border-2 border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand w-full px-3 py-2.5 shadow-xs placeholder:text-body\"\n    [class.border-default-medium]=\"!hasError()\"\n    [class.border-red-500]=\"hasError()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-disabled]=\"disabled\"\n    [disabled]=\"disabled\"\n    (click)=\"toggleOpen()\"\n  >\n    <!-- Selected chips, or placeholder -->\n    <div class=\"flex flex-wrap gap-1.5 items-center\" [class.text-fg-disabled]=\"disabled\">\n      @if (selectedValues().length) {\n        @for (val of selectedValues(); track val) {\n          <span\n            class=\"inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-brand/10 text-fg-brand\"\n          >\n            {{ labelFor(val) }}\n\n            @if (!disabled) {\n              <span\n                class=\"cursor-pointer hover:text-red-500\"\n                (click)=\"removeValue(val, $event)\"\n                role=\"button\"\n                [attr.aria-label]=\"'Remove ' + labelFor(val)\"\n              >\n                &times;\n              </span>\n            }\n          </span>\n        }\n      } @else {\n        <span class=\"text-body\">{{ placeholder }}</span>\n      }\n    </div>\n\n    <svg\n      class=\"w-4 h-4 ms-2 shrink-0 text-body transition-transform\"\n      [class.rotate-180]=\"isOpen()\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n    >\n      <path\n        stroke=\"currentColor\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\"\n        d=\"m19 9-7 7-7-7\"\n      />\n    </svg>\n  </button>\n\n  <!-- Dropdown panel -->\n  @if (isOpen()) {\n    <div\n      class=\"absolute z-10 mt-1 w-full bg-neutral-primary-medium border border-default-medium rounded-base shadow-lg max-h-60 overflow-y-auto\"\n    >\n      <div class=\"flex items-center justify-between px-2 py-1.5 border-b border-default-medium\">\n        <button\n          type=\"button\"\n          class=\"text-xs font-medium text-fg-brand hover:underline\"\n          (click)=\"selectAll()\"\n        >\n          Select all\n        </button>\n        <button\n          type=\"button\"\n          class=\"text-xs font-medium text-body hover:underline\"\n          (click)=\"clearAll()\"\n        >\n          Clear\n        </button>\n      </div>\n\n      <ul class=\"p-1 text-sm text-body\" role=\"listbox\" aria-multiselectable=\"true\">\n        @for (opt of options; track opt) {\n          <li>\n            <label\n              class=\"flex items-center gap-2 w-full p-2 rounded-md cursor-pointer hover:bg-neutral-tertiary-medium text-sm font-medium text-heading\"\n            >\n              <input\n                type=\"checkbox\"\n                class=\"w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft\"\n                [checked]=\"isSelected(opt.value)\"\n                (change)=\"toggleValue(opt.value)\"\n              />\n              {{ opt.label }}\n            </label>\n          </li>\n        }\n\n        @if (!options.length) {\n          <li class=\"p-2 text-body text-sm\">No options available</li>\n        }\n      </ul>\n    </div>\n  }\n\n  @if (hasError() && errorMessage) {\n    <p class=\"mt-1.5 text-sm text-red-500\">\n      {{ errorMessage }}\n    </p>\n  }\n</div>\n", styles: [":host{display:block}:host ::ng-deep .rotate-180{transform:rotate(180deg)}ul::-webkit-scrollbar{width:6px}ul::-webkit-scrollbar-thumb{background-color:#9ca3af80;border-radius:9999px}ul::-webkit-scrollbar-track{background:transparent}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { formField: [{
+                type: Input,
+                args: [{ required: true }]
+            }], options: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AdMultiSelect };
+//# sourceMappingURL=ng-adflowtail-ad-multi-select.mjs.map

package/fesm2022/ng-adflowtail-ad-multi-select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-adflowtail-ad-multi-select.mjs","sources":["../../../projects/ng-adflowtail/ad-multi-select/src/lib/ad-multi-select.ts","../../../projects/ng-adflowtail/ad-multi-select/src/lib/ad-multi-select.html","../../../projects/ng-adflowtail/ad-multi-select/src/ng-adflowtail-ad-multi-select.ts"],"sourcesContent":["import { Component, computed, ElementRef, HostListener, Input, signal } from '@angular/core';\nimport { FieldTree } from '@angular/forms/signals';\nimport { AdPrimaryColorDirective } from 'ng-adflowtail';\n\nexport interface AdMultiSelectOption {\n  label: string;\n  value: string;\n}\n\n@Component({\n  selector: 'ad-multi-select',\n  imports: [],\n  templateUrl: './ad-multi-select.html',\n  styleUrl: './ad-multi-select.css',\n  hostDirectives: [\n    {\n      directive: AdPrimaryColorDirective,\n      inputs: ['primaryColor']\n    }\n  ]\n})\nexport class AdMultiSelect {\n  /** Signal Forms field bound to a string[] value, e.g. userForm.settings.permissions */\n  @Input({ required: true }) formField!: FieldTree<string[]>;\n\n  @Input() options: AdMultiSelectOption[] = [];\n  @Input() placeholder = 'Select options';\n  @Input() disabled = false;\n  @Input() errorMessage = '';\n\n  protected isOpen = signal(false);\n\n  constructor(private el: ElementRef<HTMLElement>) {}\n\n  /** field() returns FieldState<string[]>; .value() is the actual array signal */\n  protected selectedValues = computed<string[]>(() => this.formField().value() ?? []);\n\n  protected hasError(): boolean {\n    return this.formField().touched() && this.formField().invalid();\n  }\n\n  protected labelFor(value: string): string {\n    return this.options.find((o) => o.value === value)?.label ?? value;\n  }\n\n  protected isSelected(value: string): boolean {\n    return this.selectedValues().includes(value);\n  }\n\n  protected toggleOpen(): void {\n    if (this.disabled) return;\n    this.isOpen.update((v) => !v);\n  }\n\n  protected close(): void {\n    this.isOpen.set(false);\n  }\n\n  protected toggleValue(value: string): void {\n    const current = this.selectedValues();\n    const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];\n    this.writeValue(next);\n  }\n\n  protected removeValue(value: string, event: Event): void {\n    event.stopPropagation(); // don't reopen/close the dropdown when removing a chip\n    this.writeValue(this.selectedValues().filter((v) => v !== value));\n  }\n\n  protected selectAll(): void {\n    this.writeValue(this.options.map((o) => o.value));\n  }\n\n  protected clearAll(): void {\n    this.writeValue([]);\n  }\n\n  private writeValue(next: string[]): void {\n    // field() returns FieldState<string[]>; .value is a WritableSignal<string[]>\n    this.formField().value.set(next);\n    this.formField().markAsTouched();\n    this.formField().markAsDirty();\n  }\n\n  @HostListener('document:click', ['$event'])\n  onDocumentClick(event: MouseEvent): void {\n    if (!this.el.nativeElement.contains(event.target as Node)) {\n      this.close();\n    }\n  }\n}\n","<div class=\"relative w-full\" (keydown.escape)=\"close()\">\n  <!-- Trigger -->\n  <button\n    type=\"button\"\n    class=\"flex items-center justify-between bg-neutral-secondary-medium border-2 border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand w-full px-3 py-2.5 shadow-xs placeholder:text-body\"\n    [class.border-default-medium]=\"!hasError()\"\n    [class.border-red-500]=\"hasError()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-disabled]=\"disabled\"\n    [disabled]=\"disabled\"\n    (click)=\"toggleOpen()\"\n  >\n    <!-- Selected chips, or placeholder -->\n    <div class=\"flex flex-wrap gap-1.5 items-center\" [class.text-fg-disabled]=\"disabled\">\n      @if (selectedValues().length) {\n        @for (val of selectedValues(); track val) {\n          <span\n            class=\"inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-brand/10 text-fg-brand\"\n          >\n            {{ labelFor(val) }}\n\n            @if (!disabled) {\n              <span\n                class=\"cursor-pointer hover:text-red-500\"\n                (click)=\"removeValue(val, $event)\"\n                role=\"button\"\n                [attr.aria-label]=\"'Remove ' + labelFor(val)\"\n              >\n                &times;\n              </span>\n            }\n          </span>\n        }\n      } @else {\n        <span class=\"text-body\">{{ placeholder }}</span>\n      }\n    </div>\n\n    <svg\n      class=\"w-4 h-4 ms-2 shrink-0 text-body transition-transform\"\n      [class.rotate-180]=\"isOpen()\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n    >\n      <path\n        stroke=\"currentColor\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\"\n        d=\"m19 9-7 7-7-7\"\n      />\n    </svg>\n  </button>\n\n  <!-- Dropdown panel -->\n  @if (isOpen()) {\n    <div\n      class=\"absolute z-10 mt-1 w-full bg-neutral-primary-medium border border-default-medium rounded-base shadow-lg max-h-60 overflow-y-auto\"\n    >\n      <div class=\"flex items-center justify-between px-2 py-1.5 border-b border-default-medium\">\n        <button\n          type=\"button\"\n          class=\"text-xs font-medium text-fg-brand hover:underline\"\n          (click)=\"selectAll()\"\n        >\n          Select all\n        </button>\n        <button\n          type=\"button\"\n          class=\"text-xs font-medium text-body hover:underline\"\n          (click)=\"clearAll()\"\n        >\n          Clear\n        </button>\n      </div>\n\n      <ul class=\"p-1 text-sm text-body\" role=\"listbox\" aria-multiselectable=\"true\">\n        @for (opt of options; track opt) {\n          <li>\n            <label\n              class=\"flex items-center gap-2 w-full p-2 rounded-md cursor-pointer hover:bg-neutral-tertiary-medium text-sm font-medium text-heading\"\n            >\n              <input\n                type=\"checkbox\"\n                class=\"w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft\"\n                [checked]=\"isSelected(opt.value)\"\n                (change)=\"toggleValue(opt.value)\"\n              />\n              {{ opt.label }}\n            </label>\n          </li>\n        }\n\n        @if (!options.length) {\n          <li class=\"p-2 text-body text-sm\">No options available</li>\n        }\n      </ul>\n    </div>\n  }\n\n  @if (hasError() && errorMessage) {\n    <p class=\"mt-1.5 text-sm text-red-500\">\n      {{ errorMessage }}\n    </p>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ng-adflowtail.mjs

@@ -0,0 +1,40 @@
+import * as i0 from '@angular/core';
+import { Input, Directive } from '@angular/core';
+
+class AdPrimaryColorDirective {
+    primaryColor;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AdPrimaryColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: AdPrimaryColorDirective, isStandalone: true, selector: "[adPrimaryColor]", inputs: { primaryColor: "primaryColor" }, host: { properties: { "style.--color-brand": "primaryColor || null", "style.--color-fg-brand": "primaryColor || null", "style.--color-brand-soft": "primaryColor ? 'color-mix(in srgb, ' + primaryColor + ' 10%, transparent)' : null", "style.--color-brand-softer": "primaryColor ? 'color-mix(in srgb, ' + primaryColor + ' 5%, transparent)' : null", "style.--color-brand-medium": "primaryColor ? 'color-mix(in srgb, ' + primaryColor + ' 20%, transparent)' : null", "style.--color-brand-strong": "primaryColor ? 'color-mix(in srgb, ' + primaryColor + ' 90%, black)' : null", "style.--color-brand-subtle": "primaryColor ? 'color-mix(in srgb, ' + primaryColor + ' 20%, transparent)' : null", "style.--color-brand-light": "primaryColor ? 'color-mix(in srgb, ' + primaryColor + ' 80%, white)' : null", "style.--color-fg-brand-subtle": "primaryColor ? 'color-mix(in srgb, ' + primaryColor + ' 30%, transparent)' : null", "style.--color-fg-brand-strong": "primaryColor ? 'color-mix(in srgb, ' + primaryColor + ' 80%, black)' : null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AdPrimaryColorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[adPrimaryColor]',
+                    standalone: true,
+                    host: {
+                        '[style.--color-brand]': 'primaryColor || null',
+                        '[style.--color-fg-brand]': 'primaryColor || null',
+                        '[style.--color-brand-soft]': "primaryColor ? 'color-mix(in srgb, ' + primaryColor + ' 10%, transparent)' : null",
+                        '[style.--color-brand-softer]': "primaryColor ? 'color-mix(in srgb, ' + primaryColor + ' 5%, transparent)' : null",
+                        '[style.--color-brand-medium]': "primaryColor ? 'color-mix(in srgb, ' + primaryColor + ' 20%, transparent)' : null",
+                        '[style.--color-brand-strong]': "primaryColor ? 'color-mix(in srgb, ' + primaryColor + ' 90%, black)' : null",
+                        '[style.--color-brand-subtle]': "primaryColor ? 'color-mix(in srgb, ' + primaryColor + ' 20%, transparent)' : null",
+                        '[style.--color-brand-light]': "primaryColor ? 'color-mix(in srgb, ' + primaryColor + ' 80%, white)' : null",
+                        '[style.--color-fg-brand-subtle]': "primaryColor ? 'color-mix(in srgb, ' + primaryColor + ' 30%, transparent)' : null",
+                        '[style.--color-fg-brand-strong]': "primaryColor ? 'color-mix(in srgb, ' + primaryColor + ' 80%, black)' : null",
+                    }
+                }]
+        }], propDecorators: { primaryColor: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of ng-adflowtail
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AdPrimaryColorDirective };
+//# sourceMappingURL=ng-adflowtail.mjs.map

package/fesm2022/ng-adflowtail.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-adflowtail.mjs","sources":["../../../projects/ng-adflowtail/src/lib/shared/ad-primary-color.directive.ts","../../../projects/ng-adflowtail/src/public-api.ts","../../../projects/ng-adflowtail/src/ng-adflowtail.ts"],"sourcesContent":["import { Directive, Input } from '@angular/core';\n\n@Directive({\n  selector: '[adPrimaryColor]',\n  standalone: true,\n  host: {\n    '[style.--color-brand]': 'primaryColor || null',\n    '[style.--color-fg-brand]': 'primaryColor || null',\n    '[style.--color-brand-soft]': \"primaryColor ? 'color-mix(in srgb, ' + primaryColor + ' 10%, transparent)' : null\",\n    '[style.--color-brand-softer]': \"primaryColor ? 'color-mix(in srgb, ' + primaryColor + ' 5%, transparent)' : null\",\n    '[style.--color-brand-medium]': \"primaryColor ? 'color-mix(in srgb, ' + primaryColor + ' 20%, transparent)' : null\",\n    '[style.--color-brand-strong]': \"primaryColor ? 'color-mix(in srgb, ' + primaryColor + ' 90%, black)' : null\",\n    '[style.--color-brand-subtle]': \"primaryColor ? 'color-mix(in srgb, ' + primaryColor + ' 20%, transparent)' : null\",\n    '[style.--color-brand-light]': \"primaryColor ? 'color-mix(in srgb, ' + primaryColor + ' 80%, white)' : null\",\n    '[style.--color-fg-brand-subtle]': \"primaryColor ? 'color-mix(in srgb, ' + primaryColor + ' 30%, transparent)' : null\",\n    '[style.--color-fg-brand-strong]': \"primaryColor ? 'color-mix(in srgb, ' + primaryColor + ' 80%, black)' : null\",\n  }\n})\nexport class AdPrimaryColorDirective {\n  @Input() primaryColor?: string;\n}\n","/*\n * Public API Surface of ng-adflowtail\n */\n\nexport * from './lib/shared/ad-common.types';\nexport * from './lib/shared/ad-primary-color.directive';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAkBa,uBAAuB,CAAA;AACzB,IAAA,YAAY;uGADV,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,qBAAA,EAAA,sBAAA,EAAA,wBAAA,EAAA,sBAAA,EAAA,0BAAA,EAAA,mFAAA,EAAA,4BAAA,EAAA,kFAAA,EAAA,4BAAA,EAAA,mFAAA,EAAA,4BAAA,EAAA,6EAAA,EAAA,4BAAA,EAAA,mFAAA,EAAA,2BAAA,EAAA,6EAAA,EAAA,+BAAA,EAAA,mFAAA,EAAA,+BAAA,EAAA,6EAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAvB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAhBnC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,kBAAkB;AAC5B,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACJ,wBAAA,uBAAuB,EAAE,sBAAsB;AAC/C,wBAAA,0BAA0B,EAAE,sBAAsB;AAClD,wBAAA,4BAA4B,EAAE,mFAAmF;AACjH,wBAAA,8BAA8B,EAAE,kFAAkF;AAClH,wBAAA,8BAA8B,EAAE,mFAAmF;AACnH,wBAAA,8BAA8B,EAAE,6EAA6E;AAC7G,wBAAA,8BAA8B,EAAE,mFAAmF;AACnH,wBAAA,6BAA6B,EAAE,6EAA6E;AAC5G,wBAAA,iCAAiC,EAAE,mFAAmF;AACtH,wBAAA,iCAAiC,EAAE,6EAA6E;AACjH;AACF,iBAAA;;sBAEE;;;ACnBH;;AAEG;;ACFH;;AAEG;;;;"}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "ng-adflowtail",
+  "version": "0.1.0",
+  "peerDependencies": {
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "flowbite": "^4.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/ng-adflowtail.mjs",
+  "typings": "types/ng-adflowtail.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/ng-adflowtail.d.ts",
+      "default": "./fesm2022/ng-adflowtail.mjs"
+    },
+    "./ad-data-table": {
+      "types": "./types/ng-adflowtail-ad-data-table.d.ts",
+      "default": "./fesm2022/ng-adflowtail-ad-data-table.mjs"
+    },
+    "./ad-multi-select": {
+      "types": "./types/ng-adflowtail-ad-multi-select.d.ts",
+      "default": "./fesm2022/ng-adflowtail-ad-multi-select.mjs"
+    }
+  },
+  "type": "module"
+}

package/types/ng-adflowtail-ad-data-table.d.ts

@@ -0,0 +1,139 @@
+import * as i0 from '@angular/core';
+import { OnInit, OnChanges, AfterViewInit, EventEmitter, SimpleChanges } from '@angular/core';
+import * as i1 from 'ng-adflowtail';
+
+type DataTableButtonAction = 'EDIT' | 'DELETE' | 'VIEW';
+interface TableColumn {
+    field: string;
+    header: string;
+    type?: 'text' | 'number' | 'date' | 'currency' | 'status' | 'action' | 'template';
+    format?: string;
+    actionTemplate?: (item: any) => string;
+    statusColors?: {
+        [key: string]: string;
+    };
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    searchType?: 'text' | 'select' | 'multiSelect' | 'date' | 'dateRange' | 'number' | 'autocomplete';
+    searchOptions?: Array<{
+        value: any;
+        label: string;
+    }>;
+    multiSelectConfig?: {
+        maxItems?: number;
+        showSelectAll?: boolean;
+    };
+    autocompleteConfig?: {
+        apiUrl?: string;
+        debounceTime?: number;
+        minChars?: number;
+        valueField?: string;
+        labelField?: string;
+        customSearchFn?: (searchTerm: string) => Promise<Array<{
+            value: any;
+            label: string;
+        }>>;
+    };
+    actions?: TableAction[];
+}
+interface TableAction {
+    id: DataTableButtonAction;
+    label: string;
+    icon?: string;
+    color?: 'primary' | 'success' | 'danger' | 'warning' | 'info' | 'secondary';
+    className?: string;
+    visible?: (item: any) => boolean;
+    disabled?: (item: any) => boolean;
+    tooltip?: string;
+}
+interface TableConfig {
+    columns: TableColumn[];
+    totalCount?: number;
+    currentPage?: number;
+    pageSize?: number;
+    itemsPerPage?: number;
+    showPagination?: boolean;
+    showPageSize?: boolean;
+    pageSizeOptions?: number[];
+    showSearch?: boolean;
+    searchPlaceholder?: string;
+    showActions?: boolean;
+    showColumnSearch?: boolean;
+}
+interface ColumnSearchEvent {
+    column: string;
+    value: any;
+    field: string;
+    searchType: string;
+}
+interface DateRangeValue {
+    start: Date | string | null;
+    end: Date | string | null;
+}
+interface SuggestionItem {
+    value: any;
+    label: string;
+}
+declare class AdDataTable implements OnInit, OnChanges, AfterViewInit {
+    title: string;
+    data: any[];
+    tableStyle?: string;
+    config: TableConfig;
+    pageChange: EventEmitter<number>;
+    pageSizeChange: EventEmitter<number>;
+    rowClick: EventEmitter<any>;
+    actionClick: EventEmitter<{
+        action: DataTableButtonAction;
+        item: any;
+    }>;
+    searchChange: EventEmitter<string>;
+    columnSearchChange: EventEmitter<ColumnSearchEvent>;
+    currentPage: number;
+    pageSize: number;
+    totalPages: number;
+    paginatedData: any[];
+    searchTerm: string;
+    columnSearchValues: {
+        [key: string]: string;
+    };
+    showColumnFilters: {
+        [key: string]: boolean;
+    };
+    dateRangeValues: {
+        [key: string]: DateRangeValue;
+    };
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    initializeColumnSearch(): void;
+    onTextSearchKeyup(column: TableColumn, event: any): void;
+    onSelectSearchChange(column: TableColumn): void;
+    onMultiSelectSearchChange(column: TableColumn): void;
+    onDateSearchChange(column: TableColumn): void;
+    onDateRangeSearchChange(column: TableColumn): void;
+    updatePagination(): void;
+    getNestedValue(obj: any, path: string): any;
+    formatValue(item: any, column: TableColumn): any;
+    onSearch(event: any): void;
+    onColumnSearchSubmit(column: TableColumn): void;
+    onColumnSearchClear(column: TableColumn): void;
+    toggleColumnFilter(columnField: string): void;
+    onPageChange(page: number): void;
+    onPageSizeChange(event: any): void;
+    onRowClick(item: any): void;
+    onActionClick(actionId: DataTableButtonAction, item: any, event: Event): void;
+    getPageNumbers(): number[];
+    getStartIndex(): number;
+    getEndIndex(): number;
+    /**
+     * Get color classes for action button
+     */
+    getActionColorClass(action: TableAction): string;
+    getActionsForItem(column: TableColumn, item: any): TableAction[];
+    isActionDisabled(action: TableAction, item: any): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdDataTable, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AdDataTable, "ad-data-table", never, { "title": { "alias": "title"; "required": false; }; "data": { "alias": "data"; "required": false; }; "tableStyle": { "alias": "tableStyle"; "required": false; }; "config": { "alias": "config"; "required": false; }; }, { "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "rowClick": "rowClick"; "actionClick": "actionClick"; "searchChange": "searchChange"; "columnSearchChange": "columnSearchChange"; }, never, never, true, [{ directive: typeof i1.AdPrimaryColorDirective; inputs: { "primaryColor": "primaryColor"; }; outputs: {}; }]>;
+}
+
+export { AdDataTable };
+export type { ColumnSearchEvent, DataTableButtonAction, DateRangeValue, SuggestionItem, TableAction, TableColumn, TableConfig };

package/types/ng-adflowtail-ad-multi-select.d.ts

@@ -0,0 +1,38 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+import { FieldTree } from '@angular/forms/signals';
+import * as i1 from 'ng-adflowtail';
+
+interface AdMultiSelectOption {
+    label: string;
+    value: string;
+}
+declare class AdMultiSelect {
+    private el;
+    /** Signal Forms field bound to a string[] value, e.g. userForm.settings.permissions */
+    formField: FieldTree<string[]>;
+    options: AdMultiSelectOption[];
+    placeholder: string;
+    disabled: boolean;
+    errorMessage: string;
+    protected isOpen: _angular_core.WritableSignal<boolean>;
+    constructor(el: ElementRef<HTMLElement>);
+    /** field() returns FieldState<string[]>; .value() is the actual array signal */
+    protected selectedValues: _angular_core.Signal<string[]>;
+    protected hasError(): boolean;
+    protected labelFor(value: string): string;
+    protected isSelected(value: string): boolean;
+    protected toggleOpen(): void;
+    protected close(): void;
+    protected toggleValue(value: string): void;
+    protected removeValue(value: string, event: Event): void;
+    protected selectAll(): void;
+    protected clearAll(): void;
+    private writeValue;
+    onDocumentClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AdMultiSelect, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AdMultiSelect, "ad-multi-select", never, { "formField": { "alias": "formField"; "required": true; }; "options": { "alias": "options"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.AdPrimaryColorDirective; inputs: { "primaryColor": "primaryColor"; }; outputs: {}; }]>;
+}
+
+export { AdMultiSelect };
+export type { AdMultiSelectOption };

package/types/ng-adflowtail.d.ts

@@ -0,0 +1,15 @@
+import * as i0 from '@angular/core';
+
+interface AdColumn<T = unknown> {
+    key: keyof T & string;
+    label: string;
+}
+
+declare class AdPrimaryColorDirective {
+    primaryColor?: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdPrimaryColorDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AdPrimaryColorDirective, "[adPrimaryColor]", never, { "primaryColor": { "alias": "primaryColor"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+export { AdPrimaryColorDirective };
+export type { AdColumn };