@caribeng/ui 22.4.0 → 22.5.0

package/fesm2022/caribeng-ui-account-picker.mjs

@@ -0,0 +1,533 @@
+import * as i0 from '@angular/core';
+import { model, input, booleanAttribute, output, signal, computed, viewChild, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { injectCbTranslation, cbFormat, cbFieldState } from '@caribeng/ui';
+import { CbIcon } from '@caribeng/ui/icon';
+
+/** Resuelve padre, nivel, antepasados y si admite movimientos, en el orden del código. */
+function resolveAccounts(accounts) {
+    const byCode = new Map(accounts.map((a) => [a.code, a]));
+    const parentOf = (a) => {
+        if (a.parent !== undefined)
+            return a.parent ? (byCode.get(a.parent) ?? null) : null;
+        for (let len = a.code.length - 1; len > 0; len--) {
+            const p = byCode.get(a.code.slice(0, len));
+            if (p)
+                return p;
+        }
+        return null;
+    };
+    const children = new Map();
+    const parents = new Map();
+    for (const a of accounts) {
+        const p = parentOf(a);
+        parents.set(a.code, p);
+        if (p)
+            children.set(p.code, (children.get(p.code) ?? 0) + 1);
+    }
+    const ancestorsOf = (a) => {
+        const out = [];
+        const seen = new Set([a.code]);
+        let p = parents.get(a.code) ?? null;
+        while (p && !seen.has(p.code)) {
+            out.unshift(p);
+            seen.add(p.code);
+            p = parents.get(p.code) ?? null;
+        }
+        return out;
+    };
+    return [...accounts]
+        .sort((a, b) => a.code.localeCompare(b.code, undefined, { numeric: false }))
+        .map((a) => {
+        const ancestors = ancestorsOf(a);
+        const childCount = children.get(a.code) ?? 0;
+        return { ...a, ancestors, level: ancestors.length + 1, childCount, postable: a.postable ?? childCount === 0 };
+    });
+}
+/** `110505 Caja general`. */
+function accountLabel(account) {
+    return `${account.code} ${account.name}`;
+}
+/** Ruta de antepasados: `1 Activo › 11 Disponible › 1105 Caja`. */
+function accountPath(account, separator = ' › ') {
+    return account.ancestors.map(accountLabel).join(separator);
+}
+function fold(text) {
+    return text.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase().trim();
+}
+/**
+ * Cuentas que coinciden con lo escrito: las que empiezan por el código primero
+ * (`1105` encuentra `1105` y `110505`), después las que contienen el texto en el
+ * nombre o la ruta; sin distinguir mayúsculas ni tildes.
+ */
+function searchAccounts(accounts, text, limit = 50) {
+    const q = fold(text);
+    if (!q)
+        return accounts.slice(0, limit);
+    const byCode = [];
+    const byName = [];
+    const words = q.split(/\s+/);
+    for (const a of accounts) {
+        if (a.code.startsWith(q) || fold(accountLabel(a)).startsWith(q))
+            byCode.push(a);
+        else {
+            const haystack = fold(`${a.name} ${a.ancestors.map((x) => x.name).join(' ')}`);
+            if (words.every((w) => haystack.includes(w)))
+                byName.push(a);
+        }
+    }
+    return [...byCode, ...byName].slice(0, limit);
+}
+/**
+ * Opciones para una columna `autocomplete` del Data Grid (o un `select`):
+ * etiqueta `código nombre`, la ruta como descripción y, por defecto, solo las
+ * cuentas de movimiento.
+ */
+function cbAccountOptions(accounts, options = {}) {
+    return resolveAccounts(accounts)
+        .filter((a) => !(options.postableOnly ?? true) || a.postable)
+        .map((a) => ({ label: accountLabel(a), value: a.code, description: accountPath(a), disabled: !!a.disabled || !a.postable }));
+}
+
+let nextUid = 0;
+/**
+ * Selector de cuenta contable de CaribeNG: busca en el plan de cuentas (PUC) por
+ * código o por nombre y muestra la ruta de cada cuenta («1 Activo › 11 Disponible»).
+ *
+ * - Por defecto solo deja elegir cuentas de movimiento (las que no tienen hijas);
+ *   las cuentas mayores aparecen como contexto, sin poder elegirse.
+ * - Escribir el código completo y salir del campo la elige; Enter elige la resaltada.
+ * - Funciona con Angular Forms (`formControlName`) o con `[(value)]`; el valor es el código.
+ *
+ * @example
+ * ```html
+ * <cb-account-picker label="Cuenta" [accounts]="puc" formControlName="cuenta" />
+ * ```
+ */
+class CbAccountPicker {
+    constructor() {
+        this.t = injectCbTranslation();
+        this.fmt = cbFormat;
+        this.uid = `cb-account-picker-${++nextUid}`;
+        /** Código de la cuenta elegida. */
+        this.value = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Plan de cuentas (lista plana; la jerarquía se deduce de `parent` o del código). */
+        this.accounts = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "accounts" }] : /* istanbul ignore next */ []));
+        /** Deja elegir también cuentas mayores (con hijas). */
+        this.allowParents = input(false, { ...(ngDevMode ? { debugName: "allowParents" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Muestra la ruta de la cuenta bajo el campo y en los resultados. */
+        this.showPath = input(true, { ...(ngDevMode ? { debugName: "showPath" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.label = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.hint = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+        this.error = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+        this.placeholder = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.size = input('md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.requiredIndicator = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "requiredIndicator" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.inputId = input(`cb-account-picker-input-${nextUid}`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+        /** Máximo de resultados en la lista. */
+        this.limit = input(50, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "limit" }] : /* istanbul ignore next */ []));
+        /** La cuenta elegida (o `null` al limpiar). */
+        this.accountChange = output();
+        this.fieldState = cbFieldState({
+            invalid: () => this.invalid(),
+            required: () => this.required(),
+            requiredIndicator: () => this.requiredIndicator(),
+        });
+        this.positions = [
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+        ];
+        this.open = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        /** Texto que se está buscando (`null`: el campo muestra la cuenta elegida). */
+        this.search = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+        this.active = signal(-1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        this.width = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        this.cvaDisabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+        this.isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        this.trigger = viewChild.required('trigger');
+        this.field = viewChild.required('field');
+        this.resolved = computed(() => resolveAccounts(this.accounts()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+        this.byCode = computed(() => new Map(this.resolved().map((a) => [a.code, a])), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "byCode" }] : /* istanbul ignore next */ []));
+        this.selected = computed(() => {
+            const code = this.value();
+            return code ? (this.byCode().get(code) ?? null) : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.query = computed(() => {
+            const search = this.search();
+            if (search !== null)
+                return search;
+            const acc = this.selected();
+            return acc ? accountLabel(acc) : (this.value() ?? '');
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+        this.results = computed(() => searchAccounts(this.resolved(), this.search() ?? '', this.limit()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "results" }] : /* istanbul ignore next */ []));
+        this.isSearching = computed(() => !!this.search(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSearching" }] : /* istanbul ignore next */ []));
+        this.describedBy = computed(() => {
+            if (this.fieldState.invalid() && this.error())
+                return `${this.inputId()}-error`;
+            return this.hint() ? `${this.inputId()}-hint` : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    // --- ControlValueAccessor ----------------------------------------------------------------
+    writeValue(value) {
+        this.value.set(value ?? null);
+        this.search.set(null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.cvaDisabled.set(disabled);
+    }
+    // --- Plantilla ---------------------------------------------------------------------------
+    path(acc) {
+        return accountPath(acc);
+    }
+    indent(acc) {
+        // Sin búsqueda se ve el árbol con sangría; al buscar, plano.
+        return this.search() ? 0 : acc.level - 1;
+    }
+    selectable(acc) {
+        return !acc.disabled && (acc.postable || this.allowParents());
+    }
+    onFocus(event) {
+        event.target.select();
+    }
+    onInput(event) {
+        this.search.set(event.target.value);
+        this.openList();
+        this.active.set(this.results().findIndex((a) => this.selectable(a)));
+    }
+    onBlur() {
+        const search = this.search();
+        if (search !== null) {
+            const q = search.trim();
+            if (!q)
+                this.setValue(null);
+            else {
+                // El código exacto (o la etiqueta completa) elige la cuenta; si no, se vuelve a la anterior.
+                const exact = this.resolved().find((a) => (a.code === q || accountLabel(a).toLowerCase() === q.toLowerCase()) && this.selectable(a));
+                if (exact)
+                    this.setValue(exact.code);
+            }
+        }
+        this.search.set(null);
+        this.open.set(false);
+        this.onTouched();
+    }
+    onKeydown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowUp': {
+                event.preventDefault();
+                if (!this.open()) {
+                    this.openList();
+                    const current = this.results().findIndex((a) => a.code === this.value());
+                    this.active.set(current >= 0 ? current : this.results().findIndex((a) => this.selectable(a)));
+                    return;
+                }
+                this.move(event.key === 'ArrowDown' ? 1 : -1);
+                break;
+            }
+            case 'Enter': {
+                const acc = this.results()[this.active()];
+                if (this.open() && acc && this.selectable(acc)) {
+                    event.preventDefault();
+                    this.choose(acc);
+                }
+                break;
+            }
+            case 'Escape':
+                if (this.open()) {
+                    event.preventDefault();
+                    this.open.set(false);
+                    this.search.set(null);
+                }
+                break;
+            case 'Tab': {
+                // Tab con la lista abierta y una búsqueda elige la resaltada (como en un comprobante).
+                const acc = this.results()[this.active()];
+                if (this.open() && this.search()?.trim() && acc && this.selectable(acc))
+                    this.choose(acc, false);
+                break;
+            }
+        }
+    }
+    choose(acc, refocus = true) {
+        if (!this.selectable(acc))
+            return;
+        this.setValue(acc.code);
+        this.search.set(null);
+        this.open.set(false);
+        if (refocus)
+            queueMicrotask(() => this.field().nativeElement.focus());
+    }
+    /** Quita la cuenta elegida. */
+    clear() {
+        this.setValue(null);
+        this.search.set(null);
+        this.field().nativeElement.focus();
+    }
+    openList() {
+        this.width.set(this.trigger().nativeElement.offsetWidth);
+        this.open.set(true);
+    }
+    move(step) {
+        const list = this.results();
+        if (!list.length)
+            return;
+        let i = this.active();
+        for (let n = 0; n < list.length; n++) {
+            i = (i + step + list.length) % list.length;
+            if (this.selectable(list[i]))
+                break;
+        }
+        this.active.set(i);
+        this.trigger().nativeElement.ownerDocument.getElementById(`${this.uid}-opt-${i}`)?.scrollIntoView?.({ block: 'nearest' });
+    }
+    setValue(code) {
+        if (code === this.value())
+            return;
+        this.value.set(code);
+        this.onChange(code);
+        this.accountChange.emit(code ? (this.byCode().get(code) ?? null) : null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbAccountPicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbAccountPicker, isStandalone: true, selector: "cb-account-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, accounts: { classPropertyName: "accounts", publicName: "accounts", isSignal: true, isRequired: false, transformFunction: null }, allowParents: { classPropertyName: "allowParents", publicName: "allowParents", isSignal: true, isRequired: false, transformFunction: null }, showPath: { classPropertyName: "showPath", publicName: "showPath", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, requiredIndicator: { classPropertyName: "requiredIndicator", publicName: "requiredIndicator", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", accountChange: "accountChange" }, host: { classAttribute: "cb-account-picker-host" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CbAccountPicker), multi: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "field", first: true, predicate: ["field"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (label()) {
+      <label class="cb-ap__label" [attr.for]="inputId()">
+        {{ label() }}
+        @if (fieldState.indicator(); as mark) {
+          <span [class]="'cb-ap__required cb-ap__required--' + mark.kind" [attr.aria-hidden]="mark.kind === 'optional' ? null : 'true'">{{ mark.text }}</span>
+        }
+      </label>
+    }
+    <div
+      #trigger
+      class="cb-ap"
+      [class]="'cb-ap--' + size()"
+      [class.cb-is-open]="open()"
+      [class.cb-is-invalid]="fieldState.invalid()"
+      [class.cb-is-disabled]="isDisabled()"
+    >
+      <cb-icon class="cb-ap__icon" name="search" [size]="16" aria-hidden="true" />
+      <input
+        #field
+        class="cb-ap__field"
+        type="text"
+        role="combobox"
+        autocomplete="off"
+        aria-autocomplete="list"
+        [id]="inputId()"
+        [attr.aria-expanded]="open()"
+        [attr.aria-controls]="uid + '-list'"
+        [attr.aria-activedescendant]="open() && active() >= 0 ? uid + '-opt-' + active() : null"
+        [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
+        [attr.aria-describedby]="describedBy()"
+        [attr.aria-required]="fieldState.required() || null"
+        [value]="query()"
+        [placeholder]="placeholder() ?? t().accountPickerPlaceholder"
+        [disabled]="isDisabled()"
+        (input)="onInput($event)"
+        (focus)="onFocus($event)"
+        (blur)="onBlur()"
+        (keydown)="onKeydown($event)"
+      />
+      @if (value() && !isDisabled()) {
+        <button type="button" class="cb-ap__clear" tabindex="-1" [attr.aria-label]="t().clear" (mousedown)="$event.preventDefault()" (click)="clear()">
+          <cb-icon name="x" [size]="14" aria-hidden="true" />
+        </button>
+      }
+    </div>
+    @if (showPath() && selected(); as acc) {
+      @if (acc.ancestors.length) {
+        <p class="cb-ap__path">{{ path(acc) }}</p>
+      }
+    }
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="trigger"
+      [cdkConnectedOverlayOpen]="open()"
+      [cdkConnectedOverlayWidth]="width()"
+      [cdkConnectedOverlayPositions]="positions"
+      (overlayOutsideClick)="open.set(false)"
+      (detach)="open.set(false)"
+    >
+      <ul class="cb-ap__list" role="listbox" [id]="uid + '-list'" [attr.aria-label]="label() || t().accountPickerPlaceholder">
+        @for (acc of results(); track acc.code; let i = $index) {
+          <li
+            class="cb-ap__option"
+            role="option"
+            [id]="uid + '-opt-' + i"
+            [class.cb-ap__option--active]="i === active()"
+            [class.cb-ap__option--group]="!selectable(acc)"
+            [class.cb-ap__option--selected]="acc.code === value()"
+            [style.padding-inline-start]="'calc(0.6rem + ' + indent(acc) + ' * 0.75rem)'"
+            [attr.aria-selected]="acc.code === value()"
+            [attr.aria-disabled]="!selectable(acc) || null"
+            (mousedown)="$event.preventDefault()"
+            (mouseenter)="active.set(i)"
+            (click)="choose(acc)"
+          >
+            <span class="cb-ap__code">{{ acc.code }}</span>
+            <span class="cb-ap__name">{{ acc.name }}</span>
+            @if (showPath() && isSearching() && acc.ancestors.length) {
+              <span class="cb-ap__opt-path">{{ path(acc) }}</span>
+            }
+          </li>
+        } @empty {
+          <li class="cb-ap__option cb-ap__option--empty" role="option" aria-disabled="true">{{ t().noResults }}</li>
+        }
+      </ul>
+    </ng-template>
+
+    @if (fieldState.invalid() && error()) {
+      <p class="cb-ap__message cb-ap__message--error" [id]="inputId() + '-error'" role="alert">{{ error() }}</p>
+    } @else if (hint()) {
+      <p class="cb-ap__message" [id]="inputId() + '-hint'">{{ hint() }}</p>
+    }
+    <span class="cb-ap__sr" role="status">{{ open() ? fmt(t().accountPickerResults, results().length) : '' }}</span>
+  `, isInline: true, styles: [":host{display:block;min-width:0;font-family:var(--cb-font-sans)}.cb-ap__label{display:block;margin-bottom:var(--cb-space-1);color:var(--cb-color-text);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium)}.cb-ap__required{margin-left:2px;color:var(--cb-color-danger)}.cb-ap{position:relative;display:flex;align-items:center;box-sizing:border-box;width:100%;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-ap:hover:not(.cb-is-disabled):not(:focus-within){border-color:var(--cb-color-text-muted)}.cb-ap:focus-within,.cb-ap.cb-is-open{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-ap.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-ap.cb-is-disabled{background-color:var(--cb-color-surface);opacity:.8}.cb-ap__icon{flex:none;margin-left:var(--cb-space-3);color:var(--cb-color-text-muted)}.cb-ap__field{flex:1 1 auto;min-width:0;box-sizing:border-box;border:none;background:transparent;color:var(--cb-color-text);font-family:var(--cb-font-sans);font-variant-numeric:tabular-nums}.cb-ap__field::placeholder{color:var(--cb-color-text-muted)}.cb-ap__field:focus{outline:none}.cb-ap--sm .cb-ap__field{min-height:2rem;padding:var(--cb-space-1) var(--cb-space-2);font-size:var(--cb-text-sm)}.cb-ap--md .cb-ap__field{min-height:2.5rem;padding:var(--cb-space-2) var(--cb-space-3) var(--cb-space-2) var(--cb-space-2);font-size:var(--cb-text-base)}.cb-ap--lg .cb-ap__field{min-height:3rem;padding:var(--cb-space-3) var(--cb-space-4) var(--cb-space-3) var(--cb-space-2);font-size:var(--cb-text-lg)}.cb-ap__clear{display:inline-flex;flex:none;align-items:center;justify-content:center;width:2rem;height:2rem;margin-right:.25rem;padding:0;border:0;border-radius:var(--cb-radius-sm, 4px);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-ap__clear:hover{color:var(--cb-color-text);background:var(--cb-color-surface-hover)}.cb-ap__path{margin:var(--cb-space-1) 0 0;overflow:hidden;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs);text-overflow:ellipsis;white-space:nowrap}.cb-ap__list{box-sizing:border-box;max-height:18rem;margin:0;padding:var(--cb-space-1);overflow-y:auto;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background-color:var(--cb-color-surface-raised);box-shadow:var(--cb-shadow-md);list-style:none;font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);color:var(--cb-color-text)}.cb-ap__option{display:grid;grid-template-columns:auto 1fr;column-gap:.6rem;align-items:baseline;padding:.4rem .6rem;border-radius:var(--cb-radius-sm, 4px);cursor:pointer}.cb-ap__option--active{background:color-mix(in srgb,var(--cb-color-primary-500) 12%,transparent)}.cb-ap__option--selected .cb-ap__name{font-weight:var(--cb-font-weight-semibold, 600)}.cb-ap__option--group{color:var(--cb-color-text-muted);cursor:default}.cb-ap__option--group.cb-ap__option--active{background:transparent}.cb-ap__option--empty{display:block;color:var(--cb-color-text-muted);cursor:default}.cb-ap__code{font-variant-numeric:tabular-nums;font-weight:var(--cb-font-weight-semibold, 600)}.cb-ap__opt-path{grid-column:2;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs)}.cb-ap__message{margin:var(--cb-space-1) 0 0;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs)}.cb-ap__message--error{color:var(--cb-color-danger)}.cb-ap__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbAccountPicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-account-picker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [OverlayModule, CbIcon], host: { class: 'cb-account-picker-host' }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CbAccountPicker), multi: true }], template: `
+    @if (label()) {
+      <label class="cb-ap__label" [attr.for]="inputId()">
+        {{ label() }}
+        @if (fieldState.indicator(); as mark) {
+          <span [class]="'cb-ap__required cb-ap__required--' + mark.kind" [attr.aria-hidden]="mark.kind === 'optional' ? null : 'true'">{{ mark.text }}</span>
+        }
+      </label>
+    }
+    <div
+      #trigger
+      class="cb-ap"
+      [class]="'cb-ap--' + size()"
+      [class.cb-is-open]="open()"
+      [class.cb-is-invalid]="fieldState.invalid()"
+      [class.cb-is-disabled]="isDisabled()"
+    >
+      <cb-icon class="cb-ap__icon" name="search" [size]="16" aria-hidden="true" />
+      <input
+        #field
+        class="cb-ap__field"
+        type="text"
+        role="combobox"
+        autocomplete="off"
+        aria-autocomplete="list"
+        [id]="inputId()"
+        [attr.aria-expanded]="open()"
+        [attr.aria-controls]="uid + '-list'"
+        [attr.aria-activedescendant]="open() && active() >= 0 ? uid + '-opt-' + active() : null"
+        [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
+        [attr.aria-describedby]="describedBy()"
+        [attr.aria-required]="fieldState.required() || null"
+        [value]="query()"
+        [placeholder]="placeholder() ?? t().accountPickerPlaceholder"
+        [disabled]="isDisabled()"
+        (input)="onInput($event)"
+        (focus)="onFocus($event)"
+        (blur)="onBlur()"
+        (keydown)="onKeydown($event)"
+      />
+      @if (value() && !isDisabled()) {
+        <button type="button" class="cb-ap__clear" tabindex="-1" [attr.aria-label]="t().clear" (mousedown)="$event.preventDefault()" (click)="clear()">
+          <cb-icon name="x" [size]="14" aria-hidden="true" />
+        </button>
+      }
+    </div>
+    @if (showPath() && selected(); as acc) {
+      @if (acc.ancestors.length) {
+        <p class="cb-ap__path">{{ path(acc) }}</p>
+      }
+    }
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="trigger"
+      [cdkConnectedOverlayOpen]="open()"
+      [cdkConnectedOverlayWidth]="width()"
+      [cdkConnectedOverlayPositions]="positions"
+      (overlayOutsideClick)="open.set(false)"
+      (detach)="open.set(false)"
+    >
+      <ul class="cb-ap__list" role="listbox" [id]="uid + '-list'" [attr.aria-label]="label() || t().accountPickerPlaceholder">
+        @for (acc of results(); track acc.code; let i = $index) {
+          <li
+            class="cb-ap__option"
+            role="option"
+            [id]="uid + '-opt-' + i"
+            [class.cb-ap__option--active]="i === active()"
+            [class.cb-ap__option--group]="!selectable(acc)"
+            [class.cb-ap__option--selected]="acc.code === value()"
+            [style.padding-inline-start]="'calc(0.6rem + ' + indent(acc) + ' * 0.75rem)'"
+            [attr.aria-selected]="acc.code === value()"
+            [attr.aria-disabled]="!selectable(acc) || null"
+            (mousedown)="$event.preventDefault()"
+            (mouseenter)="active.set(i)"
+            (click)="choose(acc)"
+          >
+            <span class="cb-ap__code">{{ acc.code }}</span>
+            <span class="cb-ap__name">{{ acc.name }}</span>
+            @if (showPath() && isSearching() && acc.ancestors.length) {
+              <span class="cb-ap__opt-path">{{ path(acc) }}</span>
+            }
+          </li>
+        } @empty {
+          <li class="cb-ap__option cb-ap__option--empty" role="option" aria-disabled="true">{{ t().noResults }}</li>
+        }
+      </ul>
+    </ng-template>
+
+    @if (fieldState.invalid() && error()) {
+      <p class="cb-ap__message cb-ap__message--error" [id]="inputId() + '-error'" role="alert">{{ error() }}</p>
+    } @else if (hint()) {
+      <p class="cb-ap__message" [id]="inputId() + '-hint'">{{ hint() }}</p>
+    }
+    <span class="cb-ap__sr" role="status">{{ open() ? fmt(t().accountPickerResults, results().length) : '' }}</span>
+  `, styles: [":host{display:block;min-width:0;font-family:var(--cb-font-sans)}.cb-ap__label{display:block;margin-bottom:var(--cb-space-1);color:var(--cb-color-text);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium)}.cb-ap__required{margin-left:2px;color:var(--cb-color-danger)}.cb-ap{position:relative;display:flex;align-items:center;box-sizing:border-box;width:100%;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-ap:hover:not(.cb-is-disabled):not(:focus-within){border-color:var(--cb-color-text-muted)}.cb-ap:focus-within,.cb-ap.cb-is-open{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-ap.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-ap.cb-is-disabled{background-color:var(--cb-color-surface);opacity:.8}.cb-ap__icon{flex:none;margin-left:var(--cb-space-3);color:var(--cb-color-text-muted)}.cb-ap__field{flex:1 1 auto;min-width:0;box-sizing:border-box;border:none;background:transparent;color:var(--cb-color-text);font-family:var(--cb-font-sans);font-variant-numeric:tabular-nums}.cb-ap__field::placeholder{color:var(--cb-color-text-muted)}.cb-ap__field:focus{outline:none}.cb-ap--sm .cb-ap__field{min-height:2rem;padding:var(--cb-space-1) var(--cb-space-2);font-size:var(--cb-text-sm)}.cb-ap--md .cb-ap__field{min-height:2.5rem;padding:var(--cb-space-2) var(--cb-space-3) var(--cb-space-2) var(--cb-space-2);font-size:var(--cb-text-base)}.cb-ap--lg .cb-ap__field{min-height:3rem;padding:var(--cb-space-3) var(--cb-space-4) var(--cb-space-3) var(--cb-space-2);font-size:var(--cb-text-lg)}.cb-ap__clear{display:inline-flex;flex:none;align-items:center;justify-content:center;width:2rem;height:2rem;margin-right:.25rem;padding:0;border:0;border-radius:var(--cb-radius-sm, 4px);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-ap__clear:hover{color:var(--cb-color-text);background:var(--cb-color-surface-hover)}.cb-ap__path{margin:var(--cb-space-1) 0 0;overflow:hidden;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs);text-overflow:ellipsis;white-space:nowrap}.cb-ap__list{box-sizing:border-box;max-height:18rem;margin:0;padding:var(--cb-space-1);overflow-y:auto;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background-color:var(--cb-color-surface-raised);box-shadow:var(--cb-shadow-md);list-style:none;font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);color:var(--cb-color-text)}.cb-ap__option{display:grid;grid-template-columns:auto 1fr;column-gap:.6rem;align-items:baseline;padding:.4rem .6rem;border-radius:var(--cb-radius-sm, 4px);cursor:pointer}.cb-ap__option--active{background:color-mix(in srgb,var(--cb-color-primary-500) 12%,transparent)}.cb-ap__option--selected .cb-ap__name{font-weight:var(--cb-font-weight-semibold, 600)}.cb-ap__option--group{color:var(--cb-color-text-muted);cursor:default}.cb-ap__option--group.cb-ap__option--active{background:transparent}.cb-ap__option--empty{display:block;color:var(--cb-color-text-muted);cursor:default}.cb-ap__code{font-variant-numeric:tabular-nums;font-weight:var(--cb-font-weight-semibold, 600)}.cb-ap__opt-path{grid-column:2;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs)}.cb-ap__message{margin:var(--cb-space-1) 0 0;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs)}.cb-ap__message--error{color:var(--cb-color-danger)}.cb-ap__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], accounts: [{ type: i0.Input, args: [{ isSignal: true, alias: "accounts", required: false }] }], allowParents: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowParents", required: false }] }], showPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPath", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], requiredIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredIndicator", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: false }] }], accountChange: [{ type: i0.Output, args: ["accountChange"] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/account-picker
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbAccountPicker, accountLabel, accountPath, cbAccountOptions, resolveAccounts, searchAccounts };