@elasticias/ui 1.0.2 → 1.0.3

package/package.json

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

package/styles/_patterns.scss

@@ -850,16 +850,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 +1425,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 +3952,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

@@ -889,6 +889,34 @@ 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>;
+}
+
 declare class EfFieldsetComponent {
     /** Direct legend text (not translated) */
     legend?: string;
@@ -4053,6 +4081,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 +4118,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 +4198,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 +4214,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 +5024,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, 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, EfTimelineComponent, EfToastRegionComponent, EfToggleSwitchComponent, EfToolbarComponent, 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 };