@elasticias/ui 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elasticias/ui",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",

package/styles/_patterns.scss

@@ -800,6 +800,102 @@
   letter-spacing: -0.005em;
 }
 
+/* ──────────── TOOLTIP — COMPTOIR SKIN OVER P-TOOLTIP ────────────
+   PrimeNG owns the positioning and the show/hide; these rules own the
+   look, so `efTooltip` and `ef-button`'s own tooltip read the same.
+   Ink-active ground rather than paper: a tooltip is an overlay on top
+   of the surface, not another surface. */
+
+.p-tooltip .p-tooltip-text {
+  background: var(--ink-active);
+  color: var(--paper);
+  border-radius: var(--r-md);
+  padding: 7px 10px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.4;
+  letter-spacing: -0.005em;
+  max-width: 260px;
+  box-shadow: var(--shadow-3);
+  white-space: normal;
+}
+
+/* The arrow is a bordered triangle per side; colour the one that shows. */
+.p-tooltip.p-tooltip-top .p-tooltip-arrow {
+  border-top-color: var(--ink-active);
+}
+.p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+  border-bottom-color: var(--ink-active);
+}
+.p-tooltip.p-tooltip-left .p-tooltip-arrow {
+  border-left-color: var(--ink-active);
+}
+.p-tooltip.p-tooltip-right .p-tooltip-arrow {
+  border-right-color: var(--ink-active);
+}
+
+/* ──────────── BUILD STAMP ───────────────────────────────────────
+   Footer-weight metadata: mono, muted, never competing with the
+   content above it. */
+
+.ef-build-stamp {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 11px;
+  letter-spacing: 0.02em;
+  color: var(--text-soft);
+  white-space: nowrap;
+}
+
+.ef-build-stamp__sep {
+  opacity: 0.6;
+}
+
+/* ──────────── APP-BAR ICON ACTIONS ──────────────────────────────
+   The theme switch and sign-out sit at the trailing edge of
+   ef-app-top. They borrow the row-actions trigger's shape rather
+   than inventing a third kind of icon button. */
+
+.ef-theme-toggle,
+.ef-app-top__logout {
+  appearance: none;
+  background: var(--paper-alt);
+  border: 1px solid var(--rule);
+  width: var(--hit);
+  height: var(--hit);
+  border-radius: var(--r-pill);
+  display: inline-grid;
+  place-items: center;
+  color: var(--text-mute);
+  cursor: pointer;
+  transition:
+    background var(--t-fast) var(--ease-out),
+    border-color var(--t-fast) var(--ease-out),
+    color var(--t-fast) var(--ease-out);
+}
+
+.ef-theme-toggle:hover,
+.ef-app-top__logout:hover {
+  color: var(--text);
+  border-color: var(--ink-400);
+}
+
+.ef-theme-toggle:focus-visible,
+.ef-app-top__logout:focus-visible {
+  outline: 0;
+  border-color: var(--tenant-400);
+  box-shadow: 0 0 0 4px var(--tenant-100);
+  color: var(--text);
+}
+
+.ef-theme-toggle i,
+.ef-app-top__logout i {
+  font-size: 14px;
+  line-height: 1;
+}
+
 /* ──────────── PAGER ─────────────────────────────────────────────── */
 
 .pager {
@@ -850,16 +946,22 @@
   color: var(--text-mute);
 }
 
-.pager .size select {
-  font: inherit;
-  font-size: 12.5px;
+/* The lines-per-page control is an <ef-select> (`.es--sm`, 32px) so it
+   matches every other dropdown in the app. Only the width needs walking
+   back: the shared trigger is full-width with a 200px floor, which is
+   right in a form column and far too wide next to a page count. */
+.pager .size ef-select {
+  flex: 0 0 auto;
+}
+
+.pager .size .es.p-select {
+  width: auto;
+  min-width: 0;
   font-weight: 600;
-  background: var(--paper);
-  border: 1px solid var(--rule);
-  border-radius: var(--r-md);
-  padding: 5px 8px;
-  color: var(--text);
-  min-height: 30px;
+}
+
+.pager .size .es .p-select-label {
+  padding-right: 2px;
 }
 
 /* ──────────── BULK ACTIONS BAR ─────────────────────────────────── */
@@ -1419,6 +1521,25 @@
   inset-inline-start: 0;
 }
 
+/* Not enough room below the trigger — flip above it, and reverse the
+   entry slide so the menu still moves away from its trigger. */
+.row-actions__menu.up {
+  top: auto;
+  bottom: calc(100% + 8px);
+  animation-name: row-actions-menu-in-up;
+}
+
+@keyframes row-actions-menu-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(4px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
 @keyframes row-actions-menu-in {
   from {
     opacity: 0;
@@ -3927,6 +4048,101 @@ input.ef-input[type='number'] {
   color: var(--tenant-700);
 }
 
+/* ── Confirm dialog ───────────────────────────────────────────
+   `ef-confirm-dialog` hands PrimeNG's confirm modal the `es-dialog`
+   classes, so the panel, header, footer and close button above already
+   apply. What is left is what only the confirm modal renders: an icon
+   and a message in the body, and the accept / reject pair in the
+   footer, which are `p-button`s rather than our own `.btn`. */
+
+.es-confirm .p-dialog-content {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+}
+
+/* Same 36px tile as the dialog header icon, tinted like a warning
+   since that is what a confirmation is. */
+.es-confirm .p-confirmdialog-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--r-pill);
+  display: inline-grid;
+  place-items: center;
+  background: var(--st-pending-bg);
+  color: var(--st-pending-fg);
+  font-size: 15px;
+  flex-shrink: 0;
+}
+
+.es-confirm .p-confirmdialog-message {
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--text);
+  margin: 0;
+}
+
+/* Action pair — `.btn` shape and tokens, applied to the p-buttons
+   PrimeNG renders. Written out rather than shared with `.btn` because
+   these carry PrimeNG's own base rules at equal specificity, and the
+   two-class selector is what wins. */
+.es-confirm .p-confirmdialog-accept-button,
+.es-confirm .p-confirmdialog-reject-button {
+  appearance: none;
+  font: inherit;
+  font-size: 13.5px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: -0.005em;
+  padding: 10px 18px;
+  min-height: var(--hit-base);
+  border-radius: var(--r-pill);
+  border: 1px solid transparent;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  transition: all var(--t-base) var(--ease-spring);
+}
+
+.es-confirm .p-confirmdialog-accept-button:active,
+.es-confirm .p-confirmdialog-reject-button:active {
+  transform: scale(0.97);
+}
+
+.es-confirm .p-confirmdialog-accept-button {
+  background: var(--ink-active);
+  color: var(--paper);
+  border-color: var(--ink-active);
+}
+
+.es-confirm .p-confirmdialog-accept-button:hover {
+  background: var(--ink-active);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-2, 0 4px 14px -4px rgba(15, 17, 21, 0.1));
+}
+
+/* The reject button is a secondary + outlined p-button, whose own colour
+   rule matches this one's specificity — the footer in the selector is
+   what makes ours win, so "Annuler" reads at --text like every other
+   ghost button rather than PrimeNG's muted grey. */
+.es-confirm .p-dialog-footer .p-confirmdialog-reject-button {
+  background: var(--paper-alt);
+  color: var(--text);
+  border-color: var(--rule);
+}
+
+.es-confirm .p-dialog-footer .p-confirmdialog-reject-button:hover {
+  background: var(--paper-alt);
+  border-color: var(--text);
+}
+
+.es-confirm .p-confirmdialog-accept-button:focus-visible,
+.es-confirm .p-confirmdialog-reject-button:focus-visible {
+  outline: 2px solid var(--tenant-400);
+  outline-offset: 2px;
+}
+
 .es-dialog .es-dialog__title-block {
   display: grid;
   gap: 2px;

package/types/elasticias-ui.d.ts

@@ -1,11 +1,12 @@
 import * as _angular_core from '@angular/core';
 import { PipeTransform, OnInit, OnChanges, TemplateRef, EventEmitter, AfterContentInit, OnDestroy, SimpleChanges, AfterViewInit } from '@angular/core';
 import { Menu } from 'primeng/menu';
+import * as _elasticias_core from '@elasticias/core';
+import { EfModule, EfModuleId, EfNavSection, EfNavItem, EfToast, EfToastAction, EfThemeConfigService } from '@elasticias/core';
+import * as i1 from 'primeng/tooltip';
 import * as _elasticias_screens from '@elasticias/screens';
 import { ScreenContext, EfDetailToolbarAction, EfSearchToolbarAction, EfDataCardColumn, EfDataCardSort, EfDateRange, EfDatePresetKey } from '@elasticias/screens';
 export { EfDataCardColumn, EfDataCardColumnAlign, EfDataCardColumnType, EfDataCardSort, EfDataCardSortDirection, EfDatePresetKey, EfDateRange, EfDetailToolbarAction, EfSearchToolbarAction } from '@elasticias/screens';
-import * as _elasticias_core from '@elasticias/core';
-import { EfModule, EfModuleId, EfNavSection, EfNavItem, EfToast, EfToastAction, EfThemeConfigService } from '@elasticias/core';
 import { BlockableUI } from 'primeng/api';
 import { SafeResourceUrl } from '@angular/platform-browser';
 import { ChartConfiguration } from 'chart.js';
@@ -889,6 +890,108 @@ declare class EfDialogComponent {
     static ngAcceptInputType_saveDisabled: unknown;
 }
 
+/**
+ * The app-wide confirmation modal, wearing the same skin as `ef-dialog`.
+ *
+ * PrimeNG's `<p-confirmdialog>` renders an ordinary `<p-dialog>` inside
+ * itself and forwards `styleClass` to its root, so handing it the
+ * `es-dialog` classes makes every rule that dresses `ef-dialog` — the
+ * paper-alt panel, the rule-separated header and footer, the Bricolage
+ * title, the ghost close — apply here too. Only the confirm-specific
+ * internals (the icon tile, the message, the two action buttons) need
+ * their own rules, and those live beside the rest in `_patterns.scss`.
+ *
+ * Drop one instance at the application root; the content is driven by
+ * `ConfirmDialogService.confirm()`, not by inputs.
+ *
+ * ```html
+ * <ef-confirm-dialog />
+ * ```
+ */
+declare class EfConfirmDialogComponent {
+    /** Panel width preset, mirroring `ef-dialog`'s `size`. */
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    /** Extra classes appended to the panel. */
+    readonly styleClass: _angular_core.InputSignal<string>;
+    protected readonly effectiveStyleClass: () => string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfConfirmDialogComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfConfirmDialogComponent, "ef-confirm-dialog", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Light / dark switch.
+ *
+ * All of the machinery already exists in `EfThemeConfigService`: it holds
+ * `darkTheme` in the persisted app state, puts `.p-dark` on `<html>`, and
+ * runs the swap through a view transition where the browser supports one.
+ * This is the control that was missing, so the preference had no way to be
+ * expressed.
+ *
+ * The icon shows the theme you would move to, not the one you are in, which
+ * is what makes a single-button toggle readable: a moon means "go dark".
+ *
+ * ```html
+ * <ef-theme-toggle />
+ * ```
+ */
+declare class EfThemeToggleComponent {
+    private readonly themeConfig;
+    /** Icon shown while light is active (i.e. "switch to dark"). */
+    readonly darkIcon: _angular_core.InputSignal<string>;
+    /** Icon shown while dark is active (i.e. "switch to light"). */
+    readonly lightIcon: _angular_core.InputSignal<string>;
+    /** Translation key for the accessible name. */
+    readonly ariaLabelKey: _angular_core.InputSignal<string>;
+    readonly isDark: _angular_core.Signal<boolean>;
+    protected readonly labelKey: _angular_core.Signal<string>;
+    toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfThemeToggleComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfThemeToggleComponent, "ef-theme-toggle", never, { "darkIcon": { "alias": "darkIcon"; "required": false; "isSignal": true; }; "lightIcon": { "alias": "lightIcon"; "required": false; "isSignal": true; }; "ariaLabelKey": { "alias": "ariaLabelKey"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Which build is running, for a footer or an about box.
+ *
+ * Reads `EF_BUILD_INFO` optionally and renders nothing when the app has not
+ * provided it, so a consumer that never wired a build stamp shows no empty
+ * line. The commit and branch go in the tooltip rather than the label: the
+ * date is what a person recognises, the hash is what you paste into an issue.
+ *
+ * ```html
+ * <ef-build-stamp owner="Elasticias" />
+ * ```
+ */
+declare class EfBuildStampComponent {
+    /** Copyright holder shown before the build. Omit for the build alone. */
+    readonly owner: _angular_core.InputSignal<string>;
+    protected readonly info: _elasticias_core.EfBuildInfo;
+    protected readonly year: number;
+    protected readonly detail: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfBuildStampComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfBuildStampComponent, "ef-build-stamp", never, { "owner": { "alias": "owner"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Comptoir-skinned tooltip.
+ *
+ * `ef-button` already drives PrimeNG's tooltip through its `tooltipKey`
+ * input, so this composes the same directive rather than introducing a
+ * second tooltip with its own positioning and its own bugs. It contributes
+ * the `ef-*` name the house style asks for and nothing else; the look comes
+ * from the `.p-tooltip` rules in `_patterns.scss`, which means every tooltip
+ * in the app — this one and `ef-button`'s — reads the same.
+ *
+ * Text is a plain input, so translate at the call site:
+ *
+ * ```html
+ * <span [efTooltip]="'module_sales_hint' | translate" efTooltipPosition="top"></span>
+ * ```
+ */
+declare class EfTooltipDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfTooltipDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<EfTooltipDirective, "[efTooltip]", never, {}, {}, never, never, true, [{ directive: typeof i1.Tooltip; inputs: { "pTooltip": "efTooltip"; "tooltipPosition": "efTooltipPosition"; "tooltipDisabled": "efTooltipDisabled"; "tooltipStyleClass": "efTooltipStyleClass"; "tooltipEvent": "efTooltipEvent"; "showDelay": "efTooltipShowDelay"; "hideDelay": "efTooltipHideDelay"; "appendTo": "efTooltipAppendTo"; "autoHide": "efTooltipAutoHide"; "escape": "efTooltipEscape"; "life": "efTooltipLife"; }; outputs: {}; }]>;
+}
+
 declare class EfFieldsetComponent {
     /** Direct legend text (not translated) */
     legend?: string;
@@ -1336,12 +1439,30 @@ declare class EfAppMainComponent {
  * breadcrumb can still project their own content into `[breadcrumb]`.
  */
 declare class EfAppTopComponent {
+    /**
+     * Show the light/dark switch at the trailing edge of the bar.
+     *
+     * It lives here rather than being projected through `[actions]`
+     * because that slot is declared once per viewport branch in
+     * `ef-app-shell` and only the mobile one receives content — so
+     * anything an app projects there never appears on desktop.
+     */
+    readonly themeToggle: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Show the sign-out button. It only renders when the app has provided
+     * `EF_SESSION`, so this input turns off a control the app opted into
+     * rather than being the thing that enables it.
+     */
+    readonly logout: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Present only when the app provides `EF_SESSION`. */
+    protected readonly session: _elasticias_core.EfSession;
+    protected signOut(): void;
     private readonly active;
     readonly module: _angular_core.Signal<_elasticias_core.EfModule>;
     readonly navItem: _angular_core.Signal<_elasticias_core.EfNavItem>;
     readonly hasBreadcrumb: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfAppTopComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfAppTopComponent, "ef-app-top", never, {}, {}, never, ["[breadcrumb]", "[actions]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfAppTopComponent, "ef-app-top", never, { "themeToggle": { "alias": "themeToggle"; "required": false; "isSignal": true; }; "logout": { "alias": "logout"; "required": false; "isSignal": true; }; }, {}, never, ["[breadcrumb]", "[actions]"], true, never>;
 }
 
 /**
@@ -4053,6 +4174,8 @@ declare class EfColumnHeaderTemplateDirective {
  *
  * Behaviour:
  * - Click the trigger to toggle. Trigger gets `.open` (ink-active) while the menu is open.
+ * - Only one row menu is open at a time — opening one closes the last.
+ * - The menu flips above the trigger when there isn't room below it.
  * - Click outside or press `Escape` to close.
  * - Clicking an item runs its `command` then closes the menu.
  * - dblclick on the trigger or menu does NOT propagate, so the data-card's
@@ -4088,9 +4211,35 @@ declare class EfRowActionsComponent {
     readonly visibleItems: _angular_core.Signal<readonly EfRowAction[]>;
     /** Open state. */
     readonly open: _angular_core.WritableSignal<boolean>;
+    /** Menu renders above the trigger instead of below it. */
+    readonly dropUp: _angular_core.WritableSignal<boolean>;
+    /**
+     * The one menu currently open, app-wide.
+     *
+     * The trigger click is stopped from reaching `document` so it can't
+     * select or open the row, which also means no other instance's
+     * outside-click listener ever sees it. Without an explicit hand-off
+     * every menu clicked stays open and they stack up on screen.
+     */
+    private static openInstance;
     toggle(event: MouseEvent): void;
     runCommand(action: EfRowAction, event: MouseEvent): void;
     close(): void;
+    /** Gap between the trigger and the menu, plus a little breathing room
+     *  against the viewport edge. Matches `top: calc(100% + 8px)`. */
+    private static readonly EDGE_GAP;
+    /**
+     * Drop upward when the menu would not fit below the trigger and there
+     * is more room above. On a short viewport where it fits neither way,
+     * below wins, which is where it has always been.
+     */
+    private shouldDropUp;
+    /** Rough height before the menu exists: item padding + line box, with
+     *  dividers and the menu's own padding and border. */
+    private estimateMenuHeight;
+    /** Re-decide against the rendered height — item labels wrap, and the
+     *  estimate can't know that. */
+    private correctPlacementAfterRender;
     /** Bubbling DOM event so ancestors (e.g. ef-data-card) can react —
      *  see `.tbl-wrap.has-open-menu { overflow: visible }`. */
     private dispatchToggle;
@@ -4142,6 +4291,14 @@ declare class EfPagerComponent {
     readonly hideSize: _angular_core.InputSignal<boolean>;
     readonly pageChange: _angular_core.OutputEmitterRef<number>;
     readonly pageSizeChange: _angular_core.OutputEmitterRef<number>;
+    /** Falls back to the first configured option if the value ever goes empty. */
+    private get defaultSize();
+    /** `pageSizeOptions` shaped for `ef-select`, which reads a label and a
+     *  value off each option rather than taking bare primitives. */
+    readonly sizeOptions: _angular_core.Signal<{
+        label: string;
+        value: number;
+    }[]>;
     readonly totalPages: _angular_core.Signal<number>;
     readonly range: _angular_core.Signal<{
         start: number;
@@ -4150,7 +4307,7 @@ declare class EfPagerComponent {
     /** First page · current ±1 · last page, with ellipsis fillers. */
     readonly pageButtons: _angular_core.Signal<readonly PageBtn[]>;
     goToPage(page: number): void;
-    onSizeChange(value: string): void;
+    onSizeChange(value: number | string | null): void;
     trackBtn(index: number, btn: PageBtn): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfPagerComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfPagerComponent, "ef-pager", never, { "pageNumber": { "alias": "pageNumber"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "totalCount": { "alias": "totalCount"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "linesPerPageLabelKey": { "alias": "linesPerPageLabelKey"; "required": false; "isSignal": true; }; "ofLabelKey": { "alias": "ofLabelKey"; "required": false; "isSignal": true; }; "prevLabelKey": { "alias": "prevLabelKey"; "required": false; "isSignal": true; }; "nextLabelKey": { "alias": "nextLabelKey"; "required": false; "isSignal": true; }; "hideSize": { "alias": "hideSize"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; }, never, never, true, never>;
@@ -4960,5 +5117,5 @@ declare class EfEmailMetricsCardComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfEmailMetricsCardComponent, "ef-email-metrics-card", never, { "metrics": { "alias": "metrics"; "required": false; "isSignal": true; }; "recentEvents": { "alias": "recentEvents"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; }, { "rangeChange": "rangeChange"; }, never, never, true, never>;
 }
 
-export { EF_BADGE_BG_COLORS, EF_BADGE_BG_LIGHT_COLORS, EF_BADGE_BORDER_COLORS, EF_BADGE_DEFAULTS, EF_BADGE_TEXT_COLORS, EF_CHART_PALETTE, EF_DATATABLE_ACTIONS_DEFAULTS, EF_DATATABLE_COLUMN_DEFAULTS, EF_DATATABLE_DEFAULTS, EF_STATUS_COLORS, EF_STATUS_COLOR_ALIASES, EfActivationFilterComponent, EfAppMainComponent, EfAppShellComponent, EfAppShellMobileComponent, EfAppTopComponent, EfBadgeComponent, EfBlockUiComponent, EfBlockableDivComponent, EfBottomSheetComponent, EfBulkBarComponent, EfButtonComponent, EfButtonGroupComponent, EfCardComponent, EfChangeHistoryComponent, EfChartComponent, EfCheckboxComponent, EfClearButtonComponent, EfColumnHeaderTemplateDirective, EfColumnTemplateDirective, EfCompactPipe, EfCurrencyPipe, EfDataCardComponent, EfDatatableActionBarComponent, EfDatatableComponent, EfDatepickerAdvancedComponent, EfDatepickerComponent, EfDetailToolbarComponent, EfDialogComponent, EfEmailMetricsCardComponent, EfEmptyStateComponent, EfFabComponent, EfFieldsetComponent, EfFilterDrawerComponent, EfFilterPillComponent, EfFormGridComponent, EfInputNumberComponent, EfInputTextComponent, EfKpiCardComponent, EfLabelComponent, EfModuleRailComponent, EfModuleSideComponent, EfMultiSelectComponent, EfOrderBuilderComponent, EfOrderSummaryComponent, EfPagerComponent, EfPasswordComponent, EfPdfPreviewComponent, EfPillGroupComponent, EfPresetPillComponent, EfPriceDisplayComponent, EfProductCatalogueComponent, EfProductCatalogueFilterComponent, EfProductTypeaheadComponent, EfProfileChipComponent, EfPulseComponent, EfQuantitySelectorComponent, EfQuantityStepperComponent, EfRankListComponent, EfRowActionsComponent, EfSearchToolbarComponent, EfSelectButtonComponent, EfSelectComponent, EfServerErrorsDirective, EfSkeletonComponent, EfSmartBarComponent, EfStatsComponent, EfStatusChipComponent, EfTabPanelDirective, EfTabsComponent, EfTextareaComponent, EfThemeConfiguratorComponent, EfTimelineComponent, EfToastRegionComponent, EfToggleSwitchComponent, EfToolbarComponent, EfTotalsComponent, OrderEntityHelper, OrderLineItemHelper, TruncatePipe, buildChartConfig, getColumnAlignment, mergeColumnDefaults, resolveEfStatusColor };
+export { EF_BADGE_BG_COLORS, EF_BADGE_BG_LIGHT_COLORS, EF_BADGE_BORDER_COLORS, EF_BADGE_DEFAULTS, EF_BADGE_TEXT_COLORS, EF_CHART_PALETTE, EF_DATATABLE_ACTIONS_DEFAULTS, EF_DATATABLE_COLUMN_DEFAULTS, EF_DATATABLE_DEFAULTS, EF_STATUS_COLORS, EF_STATUS_COLOR_ALIASES, EfActivationFilterComponent, EfAppMainComponent, EfAppShellComponent, EfAppShellMobileComponent, EfAppTopComponent, EfBadgeComponent, EfBlockUiComponent, EfBlockableDivComponent, EfBottomSheetComponent, EfBuildStampComponent, EfBulkBarComponent, EfButtonComponent, EfButtonGroupComponent, EfCardComponent, EfChangeHistoryComponent, EfChartComponent, EfCheckboxComponent, EfClearButtonComponent, EfColumnHeaderTemplateDirective, EfColumnTemplateDirective, EfCompactPipe, EfConfirmDialogComponent, EfCurrencyPipe, EfDataCardComponent, EfDatatableActionBarComponent, EfDatatableComponent, EfDatepickerAdvancedComponent, EfDatepickerComponent, EfDetailToolbarComponent, EfDialogComponent, EfEmailMetricsCardComponent, EfEmptyStateComponent, EfFabComponent, EfFieldsetComponent, EfFilterDrawerComponent, EfFilterPillComponent, EfFormGridComponent, EfInputNumberComponent, EfInputTextComponent, EfKpiCardComponent, EfLabelComponent, EfModuleRailComponent, EfModuleSideComponent, EfMultiSelectComponent, EfOrderBuilderComponent, EfOrderSummaryComponent, EfPagerComponent, EfPasswordComponent, EfPdfPreviewComponent, EfPillGroupComponent, EfPresetPillComponent, EfPriceDisplayComponent, EfProductCatalogueComponent, EfProductCatalogueFilterComponent, EfProductTypeaheadComponent, EfProfileChipComponent, EfPulseComponent, EfQuantitySelectorComponent, EfQuantityStepperComponent, EfRankListComponent, EfRowActionsComponent, EfSearchToolbarComponent, EfSelectButtonComponent, EfSelectComponent, EfServerErrorsDirective, EfSkeletonComponent, EfSmartBarComponent, EfStatsComponent, EfStatusChipComponent, EfTabPanelDirective, EfTabsComponent, EfTextareaComponent, EfThemeConfiguratorComponent, EfThemeToggleComponent, EfTimelineComponent, EfToastRegionComponent, EfToggleSwitchComponent, EfToolbarComponent, EfTooltipDirective, EfTotalsComponent, OrderEntityHelper, OrderLineItemHelper, TruncatePipe, buildChartConfig, getColumnAlignment, mergeColumnDefaults, resolveEfStatusColor };
 export type { CatalogueProduct, CatalogueProductVariant, CategoryAssignment, CategoryGroup, CategoryItem, DatatableSearchEntity, DocumentConfig, EfBadgeColor, EfBadgeConfig, EfBadgeSize, EfBadgeVariant, EfButtonComptoirSeverity, EfButtonPrimeNGSeverity, EfButtonSeverity, EfChangeHistoryEntry, EfChangeHistoryFieldChange, EfChartSeries, EfChartType, EfDataCardRowAction, EfDatatableActions, EfDatatableColumn, EfDatatableColumnAlign, EfDatatableColumnType, EfDatatableConfig, EfDateFieldValue, EfDatePreset, EfDialogAction, EfDialogSeverity, EfDialogSize, EfFabPosition, EfKpiDeltaTone, EfKpiSparkline, EfPillItem, EfPresetItem, EfRankRow, EfRowAction, EfSkeletonVariant, EfStatsRow, EfStatusColor, EfStatusReferenceItem, EfTabItem, EfTabsModule, EfTabsVariant, EfTimelineItem, EfTimelineState, EfToastRegionPosition, EfTotalsGrand, EfTotalsRow, HighlightSegment, OrderChangeInfo, OrderEntity, OrderLineItem, OrderProductsSummary, OrderSummaryItem, ProductCountGroup, ProductCountGroupLabel, ProductTypeaheadRow, ProductTypeaheadSelection, ProductWithCountGroup, SelectedFilter, ValidationResult };