@elasticias/ui 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elasticias/ui",
-  "version": "1.0.3",
+  "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 {

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';
@@ -917,6 +918,80 @@ declare class EfConfirmDialogComponent {
     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;
@@ -1364,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>;
 }
 
 /**
@@ -5024,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, 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 { 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 };