@caribeng/ui 22.4.0 → 22.5.0

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

@@ -0,0 +1,637 @@
+import * as i0 from '@angular/core';
+import { inject, Injector, model, input, booleanAttribute, output, signal, computed, viewChild, linkedSignal, afterNextRender, 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, cbFieldState, cbFormat } from '@caribeng/ui';
+import { CbIcon } from '@caribeng/ui/icon';
+
+const pad = (n) => String(n).padStart(2, '0');
+function isoDay(d) {
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+function lastDay(year, month) {
+    return new Date(year, month + 1, 0);
+}
+/** Mes: `2026-10`. */
+function monthPeriod(year, month) {
+    return { kind: 'month', from: new Date(year, month, 1), to: lastDay(year, month), key: `${year}-${pad(month + 1)}` };
+}
+/**
+ * Año fiscal que empieza en `startMonth` (0 = enero). Se nombra por el año en
+ * que termina (con inicio en julio, el año fiscal 2026 va de jul 2025 a jun 2026).
+ */
+function fiscalYear(year, startMonth = 0) {
+    const from = new Date(startMonth === 0 ? year : year - 1, startMonth, 1);
+    const to = lastDay(from.getFullYear() + 1, startMonth - 1);
+    return { kind: 'year', from, to, key: String(year) };
+}
+/** Trimestre `q` (1–4) del año fiscal `year`. */
+function quarterPeriod(year, q, startMonth = 0) {
+    const fy = fiscalYear(year, startMonth);
+    const from = new Date(fy.from.getFullYear(), fy.from.getMonth() + (q - 1) * 3, 1);
+    const to = lastDay(from.getFullYear(), from.getMonth() + 2);
+    return { kind: 'quarter', from, to, key: `${year}-Q${q}` };
+}
+function rangePeriod(from, to) {
+    const a = new Date(from.getFullYear(), from.getMonth(), from.getDate());
+    const b = new Date(to.getFullYear(), to.getMonth(), to.getDate());
+    return { kind: 'range', from: a, to: b, key: `${isoDay(a)}_${isoDay(b)}` };
+}
+/** Año fiscal al que pertenece una fecha. */
+function fiscalYearOf(date, startMonth = 0) {
+    return startMonth === 0 || date.getMonth() < startMonth ? date.getFullYear() : date.getFullYear() + 1;
+}
+/** Trimestre fiscal (1–4) de una fecha. */
+function quarterOf(date, startMonth = 0) {
+    return Math.floor((((date.getMonth() - startMonth) % 12) + 12) % 12 / 3) + 1;
+}
+/** Periodo de un atajo respecto a `today`. */
+function presetPeriod(preset, today, startMonth = 0) {
+    const y = today.getFullYear();
+    const m = today.getMonth();
+    const fy = fiscalYearOf(today, startMonth);
+    const q = quarterOf(today, startMonth);
+    switch (preset) {
+        case 'thisMonth':
+            return monthPeriod(y, m);
+        case 'lastMonth':
+            return m === 0 ? monthPeriod(y - 1, 11) : monthPeriod(y, m - 1);
+        case 'thisQuarter':
+            return quarterPeriod(fy, q, startMonth);
+        case 'lastQuarter':
+            return q === 1 ? quarterPeriod(fy - 1, 4, startMonth) : quarterPeriod(fy, q - 1, startMonth);
+        case 'yearToDate':
+            return rangePeriod(fiscalYear(fy, startMonth).from, today);
+        case 'thisYear':
+            return fiscalYear(fy, startMonth);
+        case 'lastYear':
+            return fiscalYear(fy - 1, startMonth);
+    }
+}
+/** Meses (`AAAA-MM`) que abarca un periodo. */
+function monthsOf(period) {
+    const out = [];
+    const d = new Date(period.from.getFullYear(), period.from.getMonth(), 1);
+    while (d <= period.to) {
+        out.push(`${d.getFullYear()}-${pad(d.getMonth() + 1)}`);
+        d.setMonth(d.getMonth() + 1);
+    }
+    return out;
+}
+/** El periodo incluye algún mes cerrado. */
+function touchesClosed(period, closed) {
+    return closed.size > 0 && monthsOf(period).some((m) => closed.has(m));
+}
+/** Periodo a partir de su clave (`2026-10`, `2026-Q3`, `2026`, `2026-01-01_2026-03-31`). */
+function periodFromKey(key, startMonth = 0) {
+    let m = /^(\d{4})-(\d{2})$/.exec(key);
+    if (m)
+        return monthPeriod(+m[1], +m[2] - 1);
+    m = /^(\d{4})-Q([1-4])$/.exec(key);
+    if (m)
+        return quarterPeriod(+m[1], +m[2], startMonth);
+    m = /^(\d{4})$/.exec(key);
+    if (m)
+        return fiscalYear(+m[1], startMonth);
+    m = /^(\d{4})-(\d{2})-(\d{2})_(\d{4})-(\d{2})-(\d{2})$/.exec(key);
+    if (m)
+        return rangePeriod(new Date(+m[1], +m[2] - 1, +m[3]), new Date(+m[4], +m[5] - 1, +m[6]));
+    return null;
+}
+
+/** Columnas de la cuadrícula (meses, trimestres y años van de 4 en 4). */
+const COLS = 4;
+let nextUid = 0;
+/**
+ * Selector de periodo contable de CaribeNG: mes, trimestre o año (fiscal), con
+ * atajos («Mes anterior», «Año a la fecha»…) y periodos cerrados marcados.
+ *
+ * - `fiscalYearStart` mueve el inicio del año fiscal (trimestres y años incluidos).
+ * - `closed` marca meses cerrados con un candado; con `disableClosed` no se eligen
+ *   (útil al contabilizar), sin él se pueden consultar (útil en informes).
+ * - Funciona con Angular Forms o con `[(value)]`; el valor es un `CbPeriod` con
+ *   `from`, `to`, `kind` y `key`.
+ *
+ * @example
+ * ```html
+ * <cb-period-picker label="Periodo" [(value)]="periodo" [closed]="cerrados" />
+ * ```
+ */
+class CbPeriodPicker {
+    constructor() {
+        this.t = injectCbTranslation();
+        this.injector = inject(Injector);
+        this.uid = `cb-period-picker-${++nextUid}`;
+        this.value = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Vista de la cuadrícula: mes, trimestre o año. */
+        this.mode = model('month', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        /** Vistas disponibles y su orden. */
+        this.modes = input(['month', 'quarter', 'year'], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "modes" }] : /* istanbul ignore next */ []));
+        /** Atajos del panel (lista vacía para quitarlos). */
+        this.presets = input(['thisMonth', 'lastMonth', 'thisQuarter', 'lastQuarter', 'yearToDate', 'thisYear', 'lastYear'], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+        /** Mes en que empieza el año fiscal (1 = enero). */
+        this.fiscalYearStart = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fiscalYearStart" }] : /* istanbul ignore next */ []));
+        /** Meses cerrados (`AAAA-MM`): se marcan con un candado. */
+        this.closed = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closed" }] : /* istanbul ignore next */ []));
+        /** No deja elegir periodos que incluyan meses cerrados. */
+        this.disableClosed = input(false, { ...(ngDevMode ? { debugName: "disableClosed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Primer y último día que se pueden elegir. */
+        this.min = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        this.max = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        /** «Hoy» para los atajos y el periodo actual (por defecto, la fecha del sistema). */
+        this.today = input(new Date(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []));
+        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-period-picker-input-${nextUid}`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+        this.periodChange = 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 },
+            { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+        ];
+        this.open = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "open" }] : /* 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.startMonth = computed(() => Math.min(12, Math.max(1, this.fiscalYearStart())) - 1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startMonth" }] : /* istanbul ignore next */ []));
+        this.closedSet = computed(() => new Set(this.closed()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closedSet" }] : /* istanbul ignore next */ []));
+        /** Año (o primer año de la docena, en la vista de años) que muestra la cuadrícula. */
+        this.year = linkedSignal(() => {
+            const ref = this.value()?.from ?? this.today();
+            return this.mode() === 'month' ? ref.getFullYear() : fiscalYearOf(ref, this.startMonth());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "year" }] : /* istanbul ignore next */ []));
+        this.decadeStart = computed(() => this.year() - (((this.year() % 12) + 12) % 12), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "decadeStart" }] : /* istanbul ignore next */ []));
+        this.cells = computed(() => {
+            const t = this.t();
+            const locale = t.intlLocale;
+            const y = this.year();
+            const sm = this.startMonth();
+            const mk = (period, text) => {
+                const closed = touchesClosed(period, this.closedSet());
+                const outside = (!!this.min() && period.to < this.day(this.min())) || (!!this.max() && period.from > this.day(this.max()));
+                const label = this.labelOf(period) + (closed ? `, ${t.periodClosed}` : '');
+                return { period, text, label, closed, disabled: outside || (closed && this.disableClosed()) };
+            };
+            switch (this.mode()) {
+                case 'month': {
+                    const fmt = new Intl.DateTimeFormat(locale, { month: 'short' });
+                    return Array.from({ length: 12 }, (_, m) => mk(monthPeriod(y, m), fmt.format(new Date(y, m, 1)).replace('.', '')));
+                }
+                case 'quarter':
+                    return [1, 2, 3, 4].map((q) => mk(quarterPeriod(y, q, sm), cbFormat(t.periodQuarterShort, q)));
+                case 'year': {
+                    const start = this.decadeStart();
+                    return Array.from({ length: 12 }, (_, i) => mk(fiscalYear(start + i, sm), String(start + i)));
+                }
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cells" }] : /* istanbul ignore next */ []));
+        /** Celda con el foco (la elegida, la del periodo actual o la primera). */
+        this.focusIndex = linkedSignal(() => {
+            const cells = this.cells();
+            const selected = cells.findIndex((c) => c.period.key === this.value()?.key);
+            if (selected >= 0)
+                return selected;
+            const current = cells.findIndex((c) => this.isCurrent(c.period));
+            return current >= 0 ? current : 0;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focusIndex" }] : /* istanbul ignore next */ []));
+        this.navTitle = computed(() => {
+            if (this.mode() === 'year')
+                return `${this.decadeStart()} – ${this.decadeStart() + 11}`;
+            if (this.mode() === 'quarter' && this.startMonth() !== 0)
+                return cbFormat(this.t().periodFiscalYear, this.year());
+            return String(this.year());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navTitle" }] : /* 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);
+        if (value && value.kind !== 'range' && this.modes().includes(value.kind))
+            this.mode.set(value.kind);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.cvaDisabled.set(disabled);
+    }
+    // --- Textos ------------------------------------------------------------------------------
+    /** Nombre de un periodo: «Octubre de 2026», «T3 2026», «2026», «1 ene – 23 oct 2026». */
+    labelOf(period) {
+        const t = this.t();
+        const locale = t.intlLocale;
+        const cap = (s) => s.charAt(0).toLocaleUpperCase(locale) + s.slice(1);
+        switch (period.kind) {
+            case 'month':
+                return cap(new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(period.from));
+            case 'quarter': {
+                const [y, q] = period.key.split('-Q');
+                return cbFormat(this.startMonth() ? t.periodFiscalQuarter : t.periodQuarter, q, y);
+            }
+            case 'year':
+                return this.startMonth() ? cbFormat(t.periodFiscalYear, period.key) : period.key;
+            case 'range': {
+                const f = new Intl.DateTimeFormat(locale, { day: 'numeric', month: 'short', year: 'numeric' });
+                return `${f.format(period.from)} – ${f.format(period.to)}`.replace(/\./g, '');
+            }
+        }
+    }
+    modeLabel(mode) {
+        const t = this.t();
+        return mode === 'month' ? t.periodMonth : mode === 'quarter' ? t.periodQuarterTab : t.periodYear;
+    }
+    presetLabel(preset) {
+        const t = this.t();
+        const labels = {
+            thisMonth: t.periodThisMonth,
+            lastMonth: t.periodLastMonth,
+            thisQuarter: t.periodThisQuarter,
+            lastQuarter: t.periodLastQuarter,
+            yearToDate: t.periodYearToDate,
+            thisYear: t.periodThisYear,
+            lastYear: t.periodLastYear,
+        };
+        return labels[preset];
+    }
+    isClosed(period) {
+        return touchesClosed(period, this.closedSet());
+    }
+    isCurrent(period) {
+        const today = this.day(this.today());
+        return period.from <= today && today <= period.to;
+    }
+    isPresetActive(preset) {
+        return presetPeriod(preset, this.day(this.today()), this.startMonth()).key === this.value()?.key;
+    }
+    presetDisabled(preset) {
+        return this.disableClosed() && this.isClosed(presetPeriod(preset, this.day(this.today()), this.startMonth()));
+    }
+    // --- Interacción -------------------------------------------------------------------------
+    toggle() {
+        if (this.open())
+            this.close(false);
+        else
+            this.openPanel();
+    }
+    onTriggerKeydown(event) {
+        if ((event.key === 'ArrowDown' || event.key === 'ArrowUp') && !this.open()) {
+            event.preventDefault();
+            this.openPanel();
+        }
+    }
+    onOutsideClick(event) {
+        if (!this.trigger().nativeElement.contains(event.target))
+            this.close(false);
+    }
+    setMode(mode) {
+        this.mode.set(mode);
+        this.focusCell();
+    }
+    step(delta) {
+        this.year.update((y) => y + delta * (this.mode() === 'year' ? 12 : 1));
+    }
+    choose(cell) {
+        if (cell.disabled)
+            return;
+        this.setValue(cell.period);
+        this.close(true);
+    }
+    choosePreset(preset) {
+        this.setValue(presetPeriod(preset, this.day(this.today()), this.startMonth()));
+        this.close(true);
+    }
+    onGridKeydown(event) {
+        const cells = this.cells();
+        const i = this.focusIndex();
+        let next = null;
+        switch (event.key) {
+            case 'ArrowRight':
+                next = i + 1;
+                break;
+            case 'ArrowLeft':
+                next = i - 1;
+                break;
+            case 'ArrowDown':
+                next = i + COLS;
+                break;
+            case 'ArrowUp':
+                next = i - COLS;
+                break;
+            case 'Home':
+                next = 0;
+                break;
+            case 'End':
+                next = cells.length - 1;
+                break;
+            case 'PageUp':
+            case 'PageDown':
+                event.preventDefault();
+                this.step(event.key === 'PageUp' ? -1 : 1);
+                this.focusIndex.set(i);
+                this.focusCell();
+                return;
+            default:
+                return;
+        }
+        event.preventDefault();
+        // Al salir de la cuadrícula por un lado, pasa al año (o docena) vecino.
+        if (next < 0 || next >= cells.length) {
+            const dir = next < 0 ? -1 : 1;
+            this.step(dir);
+            this.focusIndex.set((next + cells.length) % cells.length);
+        }
+        else
+            this.focusIndex.set(next);
+        this.focusCell();
+    }
+    openPanel() {
+        if (this.isDisabled())
+            return;
+        this.open.set(true);
+        this.focusCell();
+    }
+    /** Cierra el panel (y devuelve el foco al botón si se cerró desde dentro). */
+    close(refocus) {
+        if (!this.open())
+            return;
+        this.open.set(false);
+        this.onTouched();
+        if (refocus)
+            this.trigger().nativeElement.focus();
+    }
+    focusCell() {
+        afterNextRender(() => {
+            const panel = this.trigger().nativeElement.ownerDocument.querySelector(`.cb-pp__panel [data-index="${this.focusIndex()}"]`);
+            panel?.focus();
+        }, { injector: this.injector });
+    }
+    setValue(period) {
+        this.value.set(period);
+        this.onChange(period);
+        this.periodChange.emit(period);
+    }
+    day(d) {
+        return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbPeriodPicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbPeriodPicker, isStandalone: true, selector: "cb-period-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, modes: { classPropertyName: "modes", publicName: "modes", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, fiscalYearStart: { classPropertyName: "fiscalYearStart", publicName: "fiscalYearStart", isSignal: true, isRequired: false, transformFunction: null }, closed: { classPropertyName: "closed", publicName: "closed", isSignal: true, isRequired: false, transformFunction: null }, disableClosed: { classPropertyName: "disableClosed", publicName: "disableClosed", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, today: { classPropertyName: "today", publicName: "today", 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 } }, outputs: { value: "valueChange", mode: "modeChange", periodChange: "periodChange" }, host: { classAttribute: "cb-period-picker-host" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CbPeriodPicker), multi: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (label()) {
+      <label class="cb-pp__label" [attr.for]="inputId()">
+        {{ label() }}
+        @if (fieldState.indicator(); as mark) {
+          <span [class]="'cb-pp__required cb-pp__required--' + mark.kind" [attr.aria-hidden]="mark.kind === 'optional' ? null : 'true'">{{ mark.text }}</span>
+        }
+      </label>
+    }
+    <button
+      #trigger
+      type="button"
+      class="cb-pp"
+      [class]="'cb-pp--' + size()"
+      [class.cb-is-open]="open()"
+      [class.cb-is-invalid]="fieldState.invalid()"
+      [id]="inputId()"
+      [disabled]="isDisabled()"
+      aria-haspopup="dialog"
+      [attr.aria-expanded]="open()"
+      [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
+      [attr.aria-describedby]="describedBy()"
+      (click)="toggle()"
+      (keydown)="onTriggerKeydown($event)"
+    >
+      <cb-icon class="cb-pp__icon" name="calendar" [size]="16" aria-hidden="true" />
+      <span class="cb-pp__text" [class.cb-pp__text--empty]="!value()">{{ value() ? labelOf(value()!) : (placeholder() ?? t().periodPickerPlaceholder) }}</span>
+      @if (value() && isClosed(value()!)) {
+        <cb-icon class="cb-pp__lock" name="lock" [size]="14" aria-hidden="true" />
+        <span class="cb-pp__sr">{{ t().periodClosed }}</span>
+      }
+      <cb-icon class="cb-pp__caret" name="chevron-down" [size]="16" aria-hidden="true" />
+    </button>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="trigger"
+      [cdkConnectedOverlayOpen]="open()"
+      [cdkConnectedOverlayPositions]="positions"
+      (overlayOutsideClick)="onOutsideClick($event)"
+      (detach)="close(false)"
+    >
+      <div class="cb-pp__panel" role="dialog" [attr.aria-label]="label() || t().periodPickerPlaceholder" (keydown.escape)="close(true)">
+        @if (presets().length) {
+          <div class="cb-pp__presets" role="group" [attr.aria-label]="t().periodPresets">
+            @for (p of presets(); track p) {
+              <button type="button" class="cb-pp__preset" [class.cb-is-active]="isPresetActive(p)" [disabled]="presetDisabled(p)" (click)="choosePreset(p)">{{ presetLabel(p) }}</button>
+            }
+          </div>
+        }
+        <div class="cb-pp__main">
+          @if (modes().length > 1) {
+            <div class="cb-pp__modes" role="group" [attr.aria-label]="t().periodKind">
+              @for (m of modes(); track m) {
+                <button type="button" class="cb-pp__mode" [attr.aria-pressed]="mode() === m" (click)="setMode(m)">{{ modeLabel(m) }}</button>
+              }
+            </div>
+          }
+          <div class="cb-pp__nav">
+            <button type="button" class="cb-pp__step" [attr.aria-label]="mode() === 'year' ? t().periodPrevYears : t().periodPrevYear" (click)="step(-1)">
+              <cb-icon name="chevron-left" [size]="16" aria-hidden="true" />
+            </button>
+            <span class="cb-pp__title" aria-live="polite">{{ navTitle() }}</span>
+            <button type="button" class="cb-pp__step" [attr.aria-label]="mode() === 'year' ? t().periodNextYears : t().periodNextYear" (click)="step(1)">
+              <cb-icon name="chevron-right" [size]="16" aria-hidden="true" />
+            </button>
+          </div>
+          <div class="cb-pp__grid" [class.cb-pp__grid--quarters]="mode() === 'quarter'" role="group" [attr.aria-label]="navTitle()" (keydown)="onGridKeydown($event)">
+            @for (cell of cells(); track cell.period.key; let i = $index) {
+              <button
+                type="button"
+                class="cb-pp__cell"
+                [attr.data-index]="i"
+                [class.cb-is-selected]="cell.period.key === value()?.key"
+                [class.cb-is-current]="isCurrent(cell.period)"
+                [class.cb-pp__cell--closed]="cell.closed"
+                [attr.tabindex]="i === focusIndex() ? 0 : -1"
+                [attr.aria-pressed]="cell.period.key === value()?.key"
+                [attr.aria-disabled]="cell.disabled || null"
+                [attr.aria-label]="cell.label"
+                (click)="choose(cell)"
+              >
+                {{ cell.text }}
+                @if (cell.closed) {
+                  <cb-icon class="cb-pp__cell-lock" name="lock" [size]="11" aria-hidden="true" />
+                }
+              </button>
+            }
+          </div>
+        </div>
+      </div>
+    </ng-template>
+
+    @if (fieldState.invalid() && error()) {
+      <p class="cb-pp__message cb-pp__message--error" [id]="inputId() + '-error'" role="alert">{{ error() }}</p>
+    } @else if (hint()) {
+      <p class="cb-pp__message" [id]="inputId() + '-hint'">{{ hint() }}</p>
+    }
+  `, isInline: true, styles: [":host{display:block;font-family:var(--cb-font-sans)}.cb-pp__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-pp__required{margin-left:2px;color:var(--cb-color-danger)}.cb-pp{display:flex;align-items:center;gap:.5rem;box-sizing:border-box;width:100%;padding:0 var(--cb-space-3);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;font-size:var(--cb-text-base);text-align:start;cursor:pointer;transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-pp--sm{min-height:2rem;font-size:var(--cb-text-sm)}.cb-pp--md{min-height:2.5rem}.cb-pp--lg{min-height:3rem;font-size:var(--cb-text-lg)}.cb-pp:hover:not(:disabled){border-color:var(--cb-color-text-muted)}.cb-pp:focus-visible,.cb-pp.cb-is-open{outline:none;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-pp.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-pp:disabled{background:var(--cb-color-surface);opacity:.8;cursor:not-allowed}.cb-pp__icon,.cb-pp__caret,.cb-pp__lock{flex:none;color:var(--cb-color-text-muted)}.cb-pp__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-pp__text--empty{color:var(--cb-color-text-muted)}.cb-pp__panel{display:flex;gap:var(--cb-space-3);padding:var(--cb-space-3);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised);box-shadow:var(--cb-shadow-md);color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm)}.cb-pp__presets{display:grid;align-content:start;gap:2px;min-width:9.5rem;padding-right:var(--cb-space-3);border-right:1px solid var(--cb-color-border)}.cb-pp__preset,.cb-pp__mode,.cb-pp__step,.cb-pp__cell{border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}.cb-pp__preset{padding:.4rem .6rem;border-radius:var(--cb-radius-sm, 4px);text-align:start;white-space:nowrap}.cb-pp__preset:hover:not(:disabled),.cb-pp__step:hover,.cb-pp__cell:hover:not([aria-disabled=true]){background:var(--cb-color-surface-hover)}.cb-pp__preset.cb-is-active{color:var(--cb-color-primary-text, var(--cb-color-primary-700));font-weight:var(--cb-font-weight-semibold, 600)}.cb-pp__preset:disabled{opacity:.45;cursor:not-allowed}.cb-pp__main{display:grid;gap:var(--cb-space-2);min-width:15rem}.cb-pp__modes{display:flex;padding:2px;border-radius:var(--cb-radius-md);background:var(--cb-color-surface-subtle)}.cb-pp__mode{flex:1;padding:.3rem .5rem;border-radius:var(--cb-radius-sm, 4px);color:var(--cb-color-text-muted)}.cb-pp__mode[aria-pressed=true]{background:var(--cb-color-bg);box-shadow:var(--cb-shadow-sm, 0 1px 2px rgb(0 0 0 / .08));color:var(--cb-color-text);font-weight:var(--cb-font-weight-medium, 500)}.cb-pp__nav{display:flex;align-items:center;justify-content:space-between}.cb-pp__step{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:var(--cb-radius-sm, 4px)}.cb-pp__title{font-weight:var(--cb-font-weight-semibold, 600)}.cb-pp__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.cb-pp__cell{position:relative;min-height:2.25rem;padding:.35rem .25rem;border-radius:var(--cb-radius-sm, 4px);text-transform:capitalize}.cb-pp__cell.cb-is-current{box-shadow:inset 0 0 0 1px var(--cb-color-primary-500)}.cb-pp__cell.cb-is-selected{background:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast, #fff);font-weight:var(--cb-font-weight-semibold, 600)}.cb-pp__cell--closed:not(.cb-is-selected){color:var(--cb-color-text-muted)}.cb-pp__cell[aria-disabled=true]{opacity:.4;cursor:not-allowed}.cb-pp__cell-lock{position:absolute;top:3px;right:3px}:is(.cb-pp__preset,.cb-pp__mode,.cb-pp__step,.cb-pp__cell):focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-pp__message{margin:var(--cb-space-1) 0 0;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs)}.cb-pp__message--error{color:var(--cb-color-danger)}.cb-pp__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(max-width:30rem){.cb-pp__panel{flex-direction:column}.cb-pp__presets{grid-template-columns:1fr 1fr;padding:0 0 var(--cb-space-3);border-right:0;border-bottom:1px solid var(--cb-color-border)}}\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: CbPeriodPicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-period-picker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [OverlayModule, CbIcon], host: { class: 'cb-period-picker-host' }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CbPeriodPicker), multi: true }], template: `
+    @if (label()) {
+      <label class="cb-pp__label" [attr.for]="inputId()">
+        {{ label() }}
+        @if (fieldState.indicator(); as mark) {
+          <span [class]="'cb-pp__required cb-pp__required--' + mark.kind" [attr.aria-hidden]="mark.kind === 'optional' ? null : 'true'">{{ mark.text }}</span>
+        }
+      </label>
+    }
+    <button
+      #trigger
+      type="button"
+      class="cb-pp"
+      [class]="'cb-pp--' + size()"
+      [class.cb-is-open]="open()"
+      [class.cb-is-invalid]="fieldState.invalid()"
+      [id]="inputId()"
+      [disabled]="isDisabled()"
+      aria-haspopup="dialog"
+      [attr.aria-expanded]="open()"
+      [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
+      [attr.aria-describedby]="describedBy()"
+      (click)="toggle()"
+      (keydown)="onTriggerKeydown($event)"
+    >
+      <cb-icon class="cb-pp__icon" name="calendar" [size]="16" aria-hidden="true" />
+      <span class="cb-pp__text" [class.cb-pp__text--empty]="!value()">{{ value() ? labelOf(value()!) : (placeholder() ?? t().periodPickerPlaceholder) }}</span>
+      @if (value() && isClosed(value()!)) {
+        <cb-icon class="cb-pp__lock" name="lock" [size]="14" aria-hidden="true" />
+        <span class="cb-pp__sr">{{ t().periodClosed }}</span>
+      }
+      <cb-icon class="cb-pp__caret" name="chevron-down" [size]="16" aria-hidden="true" />
+    </button>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="trigger"
+      [cdkConnectedOverlayOpen]="open()"
+      [cdkConnectedOverlayPositions]="positions"
+      (overlayOutsideClick)="onOutsideClick($event)"
+      (detach)="close(false)"
+    >
+      <div class="cb-pp__panel" role="dialog" [attr.aria-label]="label() || t().periodPickerPlaceholder" (keydown.escape)="close(true)">
+        @if (presets().length) {
+          <div class="cb-pp__presets" role="group" [attr.aria-label]="t().periodPresets">
+            @for (p of presets(); track p) {
+              <button type="button" class="cb-pp__preset" [class.cb-is-active]="isPresetActive(p)" [disabled]="presetDisabled(p)" (click)="choosePreset(p)">{{ presetLabel(p) }}</button>
+            }
+          </div>
+        }
+        <div class="cb-pp__main">
+          @if (modes().length > 1) {
+            <div class="cb-pp__modes" role="group" [attr.aria-label]="t().periodKind">
+              @for (m of modes(); track m) {
+                <button type="button" class="cb-pp__mode" [attr.aria-pressed]="mode() === m" (click)="setMode(m)">{{ modeLabel(m) }}</button>
+              }
+            </div>
+          }
+          <div class="cb-pp__nav">
+            <button type="button" class="cb-pp__step" [attr.aria-label]="mode() === 'year' ? t().periodPrevYears : t().periodPrevYear" (click)="step(-1)">
+              <cb-icon name="chevron-left" [size]="16" aria-hidden="true" />
+            </button>
+            <span class="cb-pp__title" aria-live="polite">{{ navTitle() }}</span>
+            <button type="button" class="cb-pp__step" [attr.aria-label]="mode() === 'year' ? t().periodNextYears : t().periodNextYear" (click)="step(1)">
+              <cb-icon name="chevron-right" [size]="16" aria-hidden="true" />
+            </button>
+          </div>
+          <div class="cb-pp__grid" [class.cb-pp__grid--quarters]="mode() === 'quarter'" role="group" [attr.aria-label]="navTitle()" (keydown)="onGridKeydown($event)">
+            @for (cell of cells(); track cell.period.key; let i = $index) {
+              <button
+                type="button"
+                class="cb-pp__cell"
+                [attr.data-index]="i"
+                [class.cb-is-selected]="cell.period.key === value()?.key"
+                [class.cb-is-current]="isCurrent(cell.period)"
+                [class.cb-pp__cell--closed]="cell.closed"
+                [attr.tabindex]="i === focusIndex() ? 0 : -1"
+                [attr.aria-pressed]="cell.period.key === value()?.key"
+                [attr.aria-disabled]="cell.disabled || null"
+                [attr.aria-label]="cell.label"
+                (click)="choose(cell)"
+              >
+                {{ cell.text }}
+                @if (cell.closed) {
+                  <cb-icon class="cb-pp__cell-lock" name="lock" [size]="11" aria-hidden="true" />
+                }
+              </button>
+            }
+          </div>
+        </div>
+      </div>
+    </ng-template>
+
+    @if (fieldState.invalid() && error()) {
+      <p class="cb-pp__message cb-pp__message--error" [id]="inputId() + '-error'" role="alert">{{ error() }}</p>
+    } @else if (hint()) {
+      <p class="cb-pp__message" [id]="inputId() + '-hint'">{{ hint() }}</p>
+    }
+  `, styles: [":host{display:block;font-family:var(--cb-font-sans)}.cb-pp__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-pp__required{margin-left:2px;color:var(--cb-color-danger)}.cb-pp{display:flex;align-items:center;gap:.5rem;box-sizing:border-box;width:100%;padding:0 var(--cb-space-3);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;font-size:var(--cb-text-base);text-align:start;cursor:pointer;transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-pp--sm{min-height:2rem;font-size:var(--cb-text-sm)}.cb-pp--md{min-height:2.5rem}.cb-pp--lg{min-height:3rem;font-size:var(--cb-text-lg)}.cb-pp:hover:not(:disabled){border-color:var(--cb-color-text-muted)}.cb-pp:focus-visible,.cb-pp.cb-is-open{outline:none;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-pp.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-pp:disabled{background:var(--cb-color-surface);opacity:.8;cursor:not-allowed}.cb-pp__icon,.cb-pp__caret,.cb-pp__lock{flex:none;color:var(--cb-color-text-muted)}.cb-pp__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-pp__text--empty{color:var(--cb-color-text-muted)}.cb-pp__panel{display:flex;gap:var(--cb-space-3);padding:var(--cb-space-3);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised);box-shadow:var(--cb-shadow-md);color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm)}.cb-pp__presets{display:grid;align-content:start;gap:2px;min-width:9.5rem;padding-right:var(--cb-space-3);border-right:1px solid var(--cb-color-border)}.cb-pp__preset,.cb-pp__mode,.cb-pp__step,.cb-pp__cell{border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}.cb-pp__preset{padding:.4rem .6rem;border-radius:var(--cb-radius-sm, 4px);text-align:start;white-space:nowrap}.cb-pp__preset:hover:not(:disabled),.cb-pp__step:hover,.cb-pp__cell:hover:not([aria-disabled=true]){background:var(--cb-color-surface-hover)}.cb-pp__preset.cb-is-active{color:var(--cb-color-primary-text, var(--cb-color-primary-700));font-weight:var(--cb-font-weight-semibold, 600)}.cb-pp__preset:disabled{opacity:.45;cursor:not-allowed}.cb-pp__main{display:grid;gap:var(--cb-space-2);min-width:15rem}.cb-pp__modes{display:flex;padding:2px;border-radius:var(--cb-radius-md);background:var(--cb-color-surface-subtle)}.cb-pp__mode{flex:1;padding:.3rem .5rem;border-radius:var(--cb-radius-sm, 4px);color:var(--cb-color-text-muted)}.cb-pp__mode[aria-pressed=true]{background:var(--cb-color-bg);box-shadow:var(--cb-shadow-sm, 0 1px 2px rgb(0 0 0 / .08));color:var(--cb-color-text);font-weight:var(--cb-font-weight-medium, 500)}.cb-pp__nav{display:flex;align-items:center;justify-content:space-between}.cb-pp__step{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:var(--cb-radius-sm, 4px)}.cb-pp__title{font-weight:var(--cb-font-weight-semibold, 600)}.cb-pp__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.cb-pp__cell{position:relative;min-height:2.25rem;padding:.35rem .25rem;border-radius:var(--cb-radius-sm, 4px);text-transform:capitalize}.cb-pp__cell.cb-is-current{box-shadow:inset 0 0 0 1px var(--cb-color-primary-500)}.cb-pp__cell.cb-is-selected{background:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast, #fff);font-weight:var(--cb-font-weight-semibold, 600)}.cb-pp__cell--closed:not(.cb-is-selected){color:var(--cb-color-text-muted)}.cb-pp__cell[aria-disabled=true]{opacity:.4;cursor:not-allowed}.cb-pp__cell-lock{position:absolute;top:3px;right:3px}:is(.cb-pp__preset,.cb-pp__mode,.cb-pp__step,.cb-pp__cell):focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-pp__message{margin:var(--cb-space-1) 0 0;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs)}.cb-pp__message--error{color:var(--cb-color-danger)}.cb-pp__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(max-width:30rem){.cb-pp__panel{flex-direction:column}.cb-pp__presets{grid-template-columns:1fr 1fr;padding:0 0 var(--cb-space-3);border-right:0;border-bottom:1px solid var(--cb-color-border)}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }, { type: i0.Output, args: ["modeChange"] }], modes: [{ type: i0.Input, args: [{ isSignal: true, alias: "modes", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], fiscalYearStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "fiscalYearStart", required: false }] }], closed: [{ type: i0.Input, args: [{ isSignal: true, alias: "closed", required: false }] }], disableClosed: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableClosed", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], today: [{ type: i0.Input, args: [{ isSignal: true, alias: "today", 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 }] }], periodChange: [{ type: i0.Output, args: ["periodChange"] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/period-picker
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbPeriodPicker, fiscalYear, fiscalYearOf, monthPeriod, monthsOf, periodFromKey, presetPeriod, quarterOf, quarterPeriod, rangePeriod };