@aurorajs.dev/catalyst-cli 1.0.0

package/dist/templates/frontend/application/src/@aurora/components/hlm-badge-icon-cell/hlm-badge-icon-cell.stories.ts

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '../../story.types';
+import { HlmBadgeIconCell } from './hlm-badge-icon-cell.component';
+
+type Story = StoryObj<HlmBadgeIconCell>;
+
+const sampleTenants = [
+  { id: 't1', name: 'Acme HQ' },
+  { id: 't2', name: 'Acme Europe' },
+  { id: 't3', name: 'Acme Latam' },
+];
+
+const sampleTags = ['admin', 'priority'];
+const sampleScopes = ['read:users', 'write:posts', 'delete:posts'];
+
+const meta: Meta<HlmBadgeIconCell> = {
+  title: '@aurora/components/hlm-badge-icon-cell',
+  component: HlmBadgeIconCell,
+  tags: ['autodocs'],
+  argTypes: {
+    items: {
+      control: 'object',
+      description:
+        'Collection to summarize. The number of items is shown as a badge; their names (resolved via `label`) form the tooltip.',
+    },
+    label: {
+      description:
+        'Function that extracts a display string from each item. For string arrays use `(s) => s`; for object arrays use `(item) => item.name` or similar.',
+    },
+    iconName: {
+      control: 'text',
+      description:
+        'Icon registered via `provideIcons()` upstream. The cell is icon-agnostic — the caller decides which icon represents the relation.',
+    },
+  },
+  args: {
+    iconName: 'lucideBuilding2',
+  },
+  parameters: {
+    aurora: {
+      category: 'data-table',
+      when: 'TanStack column cell that represents a small collection of relations (tenants, tags, scopes). Wraps `provideIcons()`-registered icons with a count badge and joined-names tooltip.',
+      whenNot:
+        'For columns that show a single relation name, use a plain text cell. For columns that need filtering/sorting on the relation itself, use a server-side query — the cell is presentation only.',
+    },
+  },
+};
+
+export default meta;
+
+export const WithTenants: Story = {
+  args: {
+    items: sampleTenants,
+    label: (t: unknown) => (t as { name: string }).name,
+    iconName: 'lucideBuilding2',
+  },
+  name: 'With tenants (object array)',
+};
+
+export const WithTags: Story = {
+  args: {
+    items: sampleTags,
+    label: (s: unknown) => String(s),
+    iconName: 'lucideTag',
+  },
+  name: 'With tags (string array)',
+};
+
+export const WithScopes: Story = {
+  args: {
+    items: sampleScopes,
+    label: (s: unknown) => String(s),
+    iconName: 'lucideTarget',
+  },
+  name: 'With scopes',
+};
+
+export const Empty: Story = {
+  args: {
+    items: [],
+    iconName: 'lucideBuilding2',
+  },
+  name: 'Empty (no badge, no tooltip)',
+};

package/dist/templates/frontend/application/src/@aurora/components/hlm-badge-icon-cell/index.ts

@@ -0,0 +1 @@
+export * from './hlm-badge-icon-cell.component';

package/dist/templates/frontend/application/src/@aurora/components/hlm-password-strength/hlm-password-strength.component.ts

@@ -0,0 +1,141 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+export interface HlmPasswordStrengthRules {
+  minLength?: number;
+  digit?: boolean;
+  specialCharacter?: boolean;
+  lowerCase?: boolean;
+  upperCase?: boolean;
+}
+
+interface RuleEvaluation {
+  key: keyof HlmPasswordStrengthRules;
+  label: string;
+  passed: boolean;
+}
+
+const RULE_LABELS: Record<keyof HlmPasswordStrengthRules, string> = {
+  minLength: 'Min length',
+  digit: 'Digit',
+  specialCharacter: 'Special character',
+  lowerCase: 'Lowercase',
+  upperCase: 'Uppercase',
+};
+
+const SPECIAL_CHAR_REGEX = /[!@#$%^&*()+_\-=}{[\]|:;"/?.><,`~]/;
+
+/**
+ * Visual indicator of how many password rules a candidate satisfies.
+ *
+ * Renders a horizontally-segmented bar (one segment per active rule, filled
+ * when the rule passes) and a checklist below. Color of the bar transitions
+ * red → yellow → green as the ratio of satisfied rules increases.
+ *
+ * Pure presentation: the host is responsible for validation/business logic.
+ *
+ * @example
+ * <au-hlm-password-strength
+ *   [password]="form.controls.password.value"
+ *   [rules]="{ minLength: 8, digit: true, specialCharacter: true, lowerCase: true, upperCase: true }"
+ * />
+ */
+@Component({
+  selector: 'au-hlm-password-strength',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'block w-full' },
+  template: `
+    @let total = totalActiveRules();
+    @let passed = passedRules().length;
+    <div
+      role="progressbar"
+      class="grid w-full grid-flow-col gap-1"
+      [attr.aria-valuenow]="passed"
+      [attr.aria-valuemin]="0"
+      [attr.aria-valuemax]="total"
+    >
+      @for (segment of segments(); track segment.index) {
+        <div
+          class="h-1 rounded-full transition-colors"
+          [class]="segment.passed ? barColorClass() : 'bg-muted'"
+        ></div>
+      }
+    </div>
+
+    <ul class="mt-2 space-y-0.5 text-xs">
+      @for (rule of evaluations(); track rule.key) {
+        <li class="flex items-center gap-2">
+          <span
+            aria-hidden="true"
+            class="inline-flex h-3 w-3 items-center justify-center rounded-full text-[0.6rem] font-bold"
+            [class]="rule.passed ? 'bg-green-500 text-white' : 'bg-muted text-muted-foreground'"
+          >
+            {{ rule.passed ? '✓' : '✗' }}
+          </span>
+          <span [class]="rule.passed ? 'text-foreground' : 'text-muted-foreground'">
+            {{ rule.label }}
+          </span>
+        </li>
+      }
+    </ul>
+  `,
+})
+export class HlmPasswordStrength {
+  readonly password = input<string>('');
+  readonly rules = input<HlmPasswordStrengthRules>({});
+
+  protected readonly evaluations = computed<RuleEvaluation[]>(() => {
+    const value = this.password() ?? '';
+    const rules = this.rules();
+    const items: RuleEvaluation[] = [];
+
+    if (rules.minLength != null) {
+      items.push({
+        key: 'minLength',
+        label: `${RULE_LABELS.minLength} (${rules.minLength})`,
+        passed: value.length >= rules.minLength,
+      });
+    }
+    if (rules.digit) {
+      items.push({ key: 'digit', label: RULE_LABELS.digit, passed: /[0-9]/.test(value) });
+    }
+    if (rules.specialCharacter) {
+      items.push({
+        key: 'specialCharacter',
+        label: RULE_LABELS.specialCharacter,
+        passed: SPECIAL_CHAR_REGEX.test(value),
+      });
+    }
+    if (rules.lowerCase) {
+      items.push({ key: 'lowerCase', label: RULE_LABELS.lowerCase, passed: /[a-z]/.test(value) });
+    }
+    if (rules.upperCase) {
+      items.push({ key: 'upperCase', label: RULE_LABELS.upperCase, passed: /[A-Z]/.test(value) });
+    }
+
+    return items;
+  });
+
+  protected readonly totalActiveRules = computed(() => this.evaluations().length);
+
+  protected readonly passedRules = computed(() => this.evaluations().filter((rule) => rule.passed));
+
+  protected readonly segments = computed(() => {
+    const evals = this.evaluations();
+    return evals.map((evaluation, index) => ({
+      index,
+      passed: evaluation.passed,
+    }));
+  });
+
+  protected readonly barColorClass = computed(() => {
+    const total = this.totalActiveRules();
+    const passed = this.passedRules().length;
+    if (total === 0) return 'bg-muted';
+    const ratio = passed / total;
+    if (ratio < 0.5) return 'bg-red-500';
+    if (ratio < 1) return 'bg-yellow-500';
+    return 'bg-green-500';
+  });
+}
+
+export const HlmPasswordStrengthImports = [HlmPasswordStrength] as const;

package/dist/templates/frontend/application/src/@aurora/components/hlm-password-strength/hlm-password-strength.stories.ts

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '../../story.types';
+import { HlmPasswordStrength } from './hlm-password-strength.component';
+
+type Story = StoryObj<HlmPasswordStrength>;
+
+const fullRules = {
+  minLength: 8,
+  digit: true,
+  specialCharacter: true,
+  lowerCase: true,
+  upperCase: true,
+};
+
+const meta: Meta<HlmPasswordStrength> = {
+  title: '@aurora/components/hlm-password-strength',
+  component: HlmPasswordStrength,
+  tags: ['autodocs'],
+  argTypes: {
+    password: {
+      control: 'text',
+      description:
+        'Candidate password being evaluated. Empty string is allowed and renders all rules as pending.',
+    },
+    rules: {
+      control: 'object',
+      description:
+        'Active rules. Only rules with truthy entries are displayed. `minLength` is the only rule that takes a numeric threshold; others are boolean activations.',
+    },
+  },
+  args: {
+    password: '',
+    rules: fullRules,
+  },
+  parameters: {
+    aurora: {
+      category: 'form',
+      when: 'Visualize how many active password rules a candidate password satisfies. Pair with `passwordRulesValidator` from `@aurora/validators` (which produces matching error keys).',
+      whenNot:
+        'Not a validator itself — UI-only. Real validation belongs to the form control (`Validators.minLength`, `passwordRulesValidator`).',
+    },
+  },
+};
+
+export default meta;
+
+export const Empty: Story = {
+  args: {
+    password: '',
+    rules: fullRules,
+  },
+  name: 'Empty (0% — pending)',
+};
+
+export const Partial25: Story = {
+  args: {
+    password: 'abc',
+    rules: fullRules,
+  },
+  name: 'Partial 25% (only lowercase)',
+};
+
+export const Partial60: Story = {
+  args: {
+    password: 'abcAbc12',
+    rules: fullRules,
+  },
+  name: 'Partial 60% (no special character)',
+};
+
+export const Complete: Story = {
+  args: {
+    password: 'Abc12345!',
+    rules: fullRules,
+  },
+  name: 'Complete (100% — all rules satisfied)',
+};
+
+export const CustomRules: Story = {
+  args: {
+    password: 'simplepass',
+    rules: { minLength: 6, lowerCase: true },
+  },
+  name: 'Custom rules subset',
+};

package/dist/templates/frontend/application/src/@aurora/components/hlm-password-strength/index.ts

@@ -0,0 +1 @@
+export * from './hlm-password-strength.component';

package/dist/templates/frontend/application/src/@aurora/components/index.ts

@@ -0,0 +1,12 @@
+export * from './async-multiple-search-select';
+export * from './async-search-select';
+export * from './breadcrumb';
+export * from './data-table';
+export * from './grid-pick-dialog';
+export * from './grid-select-element';
+export * from './grid-select-multiple-elements';
+export * from './hlm-badge-icon-cell';
+export * from './hlm-password-strength';
+export * from './multiple-search-select';
+export * from './search-select';
+export * from './types';

package/dist/templates/frontend/application/src/@aurora/components/multiple-search-select/index.ts

@@ -0,0 +1 @@
+export * from './multiple-search-select.component';

package/dist/templates/frontend/application/src/@aurora/components/multiple-search-select/multiple-search-select.component.spec.ts

@@ -0,0 +1,86 @@
+import '@angular/compiler';
+import { ComponentRef } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import type { Option } from '../types';
+import { MultipleSearchSelect } from './multiple-search-select.component';
+
+describe('MultipleSearchSelect', () => {
+  let fixture: ComponentFixture<MultipleSearchSelect>;
+  let component: MultipleSearchSelect;
+  let componentRef: ComponentRef<MultipleSearchSelect>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [MultipleSearchSelect],
+    });
+
+    fixture = TestBed.createComponent(MultipleSearchSelect);
+    component = fixture.componentInstance;
+    componentRef = fixture.componentRef;
+  });
+
+  describe('selectedOptions computed', () => {
+    it('should be empty when value is []', () => {
+      componentRef.setInput('value', []);
+      componentRef.setInput('options', [{ value: 'a', label: 'A' }]);
+      fixture.detectChanges();
+      // biome-ignore lint/suspicious/noExplicitAny: access protected computed for test
+      expect((component as any).selectedOptions()).toEqual([]);
+    });
+
+    it('should resolve matching options from value + options', () => {
+      const options: Option[] = [
+        { value: 'a', label: 'A' },
+        { value: 'b', label: 'B' },
+        { value: 'c', label: 'C' },
+      ];
+      componentRef.setInput('value', ['a', 'c']);
+      componentRef.setInput('options', options);
+      fixture.detectChanges();
+      // biome-ignore lint/suspicious/noExplicitAny: access protected computed for test
+      expect((component as any).selectedOptions()).toEqual([options[0], options[2]]);
+    });
+
+    it('should ignore ids without a matching option', () => {
+      componentRef.setInput('value', ['a', 'missing']);
+      componentRef.setInput('options', [{ value: 'a', label: 'A' }]);
+      fixture.detectChanges();
+      // biome-ignore lint/suspicious/noExplicitAny: access protected computed for test
+      expect((component as any).selectedOptions()).toEqual([{ value: 'a', label: 'A' }]);
+    });
+  });
+
+  describe('valueChange output', () => {
+    it('should emit ids array when options are selected', () => {
+      const emitted: string[][] = [];
+      component.valueChange.subscribe((v) => emitted.push(v));
+
+      // biome-ignore lint/suspicious/noExplicitAny: invoke protected handler
+      (component as any).onValueChange([
+        { value: 'x', label: 'X' },
+        { value: 'y', label: 'Y' },
+      ]);
+
+      expect(emitted).toEqual([['x', 'y']]);
+    });
+
+    it('should emit empty array when nothing is selected', () => {
+      const emitted: string[][] = [];
+      component.valueChange.subscribe((v) => emitted.push(v));
+
+      // biome-ignore lint/suspicious/noExplicitAny: invoke protected handler
+      (component as any).onValueChange([]);
+
+      expect(emitted).toEqual([[]]);
+    });
+  });
+
+  describe('touched output', () => {
+    it('should fire when emitted', () => {
+      let emittedCount = 0;
+      component.touched.subscribe(() => emittedCount++);
+      component.touched.emit();
+      expect(emittedCount).toBe(1);
+    });
+  });
+});

package/dist/templates/frontend/application/src/@aurora/components/multiple-search-select/multiple-search-select.component.ts

@@ -0,0 +1,95 @@
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+import { HlmComboboxImports } from '@spartan-ng/helm/combobox';
+import type { Option } from '../types';
+
+/**
+ * Synchronous, searchable multi-select for many-to-many relationships with a
+ * medium catalog (20–500 options) preloaded by the route resolver. Filter is
+ * client-side via Spartan's default combobox filter.
+ *
+ * For server-side search (>500 options), see `<au-async-multiple-search-select>`.
+ *
+ * @example
+ * <au-multiple-search-select
+ *   [inputId]="'tagIds'"
+ *   [value]="form.controls.tagIds.value ?? []"
+ *   [options]="tagOptions()"
+ *   [emptyMessage]="t('Aurora.NoResults')"
+ *   (valueChange)="form.controls.tagIds.setValue($event)"
+ *   (touched)="form.controls.tagIds.markAsTouched()"
+ * />
+ */
+@Component({
+  selector: 'au-multiple-search-select',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [HlmComboboxImports],
+  host: { class: 'block' },
+  template: `
+    <hlm-combobox-multiple
+      class="w-full"
+      [value]="selectedOptions()"
+      [disabled]="disabled()"
+      [itemToString]="optionToString"
+      [isItemEqualToValue]="optionEqual"
+      (valueChange)="onValueChange($event)"
+      (closed)="touched.emit()"
+    >
+      <hlm-combobox-chips class="w-full">
+        <ng-template
+          hlmComboboxValues
+          let-values
+        >
+          @for (selected of values; track selected.value) {
+            <hlm-combobox-chip [value]="selected">{{ selected.label }}</hlm-combobox-chip>
+          }
+        </ng-template>
+        <input
+          [id]="inputId()"
+          [placeholder]="placeholder()"
+          hlmComboboxChipInput
+        />
+      </hlm-combobox-chips>
+      <hlm-combobox-content *hlmComboboxPortal>
+        <hlm-combobox-empty>{{ emptyMessage() }}</hlm-combobox-empty>
+        <div hlmComboboxList>
+          @for (opt of options(); track opt.value) {
+            <hlm-combobox-item
+              [value]="opt"
+              [disabled]="opt.disabled ?? false"
+            >
+              {{ opt.label }}
+            </hlm-combobox-item>
+          }
+        </div>
+      </hlm-combobox-content>
+    </hlm-combobox-multiple>
+
+    @if (errorMessage(); as err) {
+      <p class="text-destructive mt-1 text-xs">{{ err }}</p>
+    }
+  `,
+})
+export class MultipleSearchSelect {
+  readonly value = input<string[]>([]);
+  readonly options = input<Option[]>([]);
+  readonly inputId = input<string>('');
+  readonly placeholder = input<string>('Search...');
+  readonly disabled = input<boolean>(false);
+  readonly emptyMessage = input<string>('No results');
+  readonly errorMessage = input<string | null>(null);
+
+  readonly valueChange = output<string[]>();
+  readonly touched = output<void>();
+
+  protected readonly selectedOptions = computed<Option[]>(() => {
+    const ids = this.value();
+    return this.options().filter((o) => ids.includes(o.value));
+  });
+
+  protected readonly optionToString = (opt: Option | null) => opt?.label ?? '';
+  protected readonly optionEqual = (a: Option | null, b: Option | null) => a?.value === b?.value;
+
+  protected onValueChange(options: Option[] | null): void {
+    this.valueChange.emit((options ?? []).map((o) => o.value));
+  }
+}

package/dist/templates/frontend/application/src/@aurora/components/multiple-search-select/multiple-search-select.stories.ts

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '../../story.types';
+import type { Option } from '../types';
+import { MultipleSearchSelect } from './multiple-search-select.component';
+
+type Story = StoryObj<MultipleSearchSelect>;
+
+const tagOptions: Option[] = [
+  { value: 't1', label: 'urgent' },
+  { value: 't2', label: 'frontend' },
+  { value: 't3', label: 'backend' },
+  { value: 't4', label: 'design' },
+  { value: 't5', label: 'documentation' },
+  { value: 't6', label: 'bug' },
+  { value: 't7', label: 'enhancement' },
+  { value: 't8', label: 'wontfix' },
+];
+
+const meta: Meta<MultipleSearchSelect> = {
+  title: '@aurora/components/multiple-search-select',
+  component: MultipleSearchSelect,
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: 'object',
+      description: 'Array of selected option ids. Empty array means no selection.',
+    },
+    options: {
+      control: 'object',
+      description: 'Full preloaded option list. Filtering is client-side.',
+    },
+    placeholder: { control: 'text' },
+    disabled: { control: 'boolean' },
+    emptyMessage: { control: 'text' },
+    errorMessage: { control: 'text' },
+    valueChange: { action: 'valueChange' },
+  },
+  args: {
+    value: [],
+    options: tagOptions,
+    placeholder: 'Select tags...',
+    disabled: false,
+    emptyMessage: 'No results',
+    errorMessage: null,
+  },
+  parameters: {
+    aurora: {
+      category: 'form',
+      when: 'Many-to-many relationship picker for medium-sized catalogs (20–500 options). Runtime target of YAML `widget.type: multiple-search-select`. All options preloaded.',
+      whenNot:
+        'For <20 options use `<hlm-select-multiple>`. For >500 options use `<au-async-multiple-search-select>`. For single-pick use `<au-search-select>`.',
+    },
+  },
+};
+
+export default meta;
+
+export const Default: Story = {};
+
+export const WithPreselected: Story = {
+  args: { value: ['t2', 't4'] },
+};
+
+export const Empty: Story = {
+  args: {
+    options: [],
+    emptyMessage: 'No tags available',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    value: ['t1', 't3'],
+  },
+};
+
+export const Error: Story = {
+  args: {
+    value: [],
+    errorMessage: 'Pick at least one tag',
+  },
+};

package/dist/templates/frontend/application/src/@aurora/components/search-select/index.ts

@@ -0,0 +1 @@
+export * from './search-select.component';

package/dist/templates/frontend/application/src/@aurora/components/search-select/search-select.component.spec.ts

@@ -0,0 +1,82 @@
+import '@angular/compiler';
+import { ComponentRef } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import type { Option } from '../types';
+import { SearchSelect } from './search-select.component';
+
+describe('SearchSelect', () => {
+  let fixture: ComponentFixture<SearchSelect>;
+  let component: SearchSelect;
+  let componentRef: ComponentRef<SearchSelect>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [SearchSelect],
+    });
+
+    fixture = TestBed.createComponent(SearchSelect);
+    component = fixture.componentInstance;
+    componentRef = fixture.componentRef;
+  });
+
+  describe('selectedOption computed', () => {
+    it('should be null when value is null', () => {
+      componentRef.setInput('value', null);
+      componentRef.setInput('options', []);
+      fixture.detectChanges();
+      // biome-ignore lint/suspicious/noExplicitAny: access protected computed for test
+      expect((component as any).selectedOption()).toBeNull();
+    });
+
+    it('should resolve the matching option from value + options', () => {
+      const options: Option[] = [
+        { value: 'a', label: 'A' },
+        { value: 'b', label: 'B' },
+      ];
+      componentRef.setInput('value', 'b');
+      componentRef.setInput('options', options);
+      fixture.detectChanges();
+      // biome-ignore lint/suspicious/noExplicitAny: access protected computed for test
+      expect((component as any).selectedOption()).toEqual(options[1]);
+    });
+
+    it('should be null when value has no matching option', () => {
+      componentRef.setInput('value', 'missing');
+      componentRef.setInput('options', [{ value: 'a', label: 'A' }]);
+      fixture.detectChanges();
+      // biome-ignore lint/suspicious/noExplicitAny: access protected computed for test
+      expect((component as any).selectedOption()).toBeNull();
+    });
+  });
+
+  describe('valueChange output', () => {
+    it('should emit the option value when a selection happens', () => {
+      const emitted: (string | null)[] = [];
+      component.valueChange.subscribe((v) => emitted.push(v));
+
+      // biome-ignore lint/suspicious/noExplicitAny: invoke protected handler
+      (component as any).onValueChange({ value: 'x', label: 'X' });
+
+      expect(emitted).toEqual(['x']);
+    });
+
+    it('should emit null when selection is cleared', () => {
+      const emitted: (string | null)[] = [];
+      component.valueChange.subscribe((v) => emitted.push(v));
+
+      // biome-ignore lint/suspicious/noExplicitAny: invoke protected handler
+      (component as any).onValueChange(null);
+
+      expect(emitted).toEqual([null]);
+    });
+  });
+
+  describe('touched output', () => {
+    it('should fire when the consumer triggers it (popover close emits via template binding)', () => {
+      let emittedCount = 0;
+      component.touched.subscribe(() => emittedCount++);
+      component.touched.emit();
+      expect(emittedCount).toBe(1);
+    });
+  });
+});