@elasticias/ui 1.0.34 → 1.0.36

package/package.json

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

package/styles/_patterns.scss

@@ -3679,12 +3679,18 @@ input.ef-input[type='number'] {
 }
 
 /* The same centring, for the clear that PrimeNG owns rather than we do.
-   `ef-password` fills PrimeNG's `#clearicon` slot with the 22px `.ef-clear`
-   used by every other field, but PrimeNG offsets that slot by half of *its*
-   glyph, not ours — so the ✕ sat 3.2px below the middle while the mask toggle
-   beside it, which PrimeNG renders itself, was exactly centred. One field
-   looked level and the other did not, from the same 8px inset. */
-.p-password-clear-icon {
+   PrimeNG centres both password icons with `top: 50%; margin-top: -8px`, which
+   is exact for the 16px mask toggle it draws itself and wrong for anything
+   else. `ef-password` fills the `#clearicon` slot with the 22.5px `.ef-clear`
+   every other field uses, so -8px is the wrong half and the ✕ sat 3.2px below
+   the middle, beside a toggle that was perfectly level.
+
+   Scoped through `.ef-password-field` — the styleClass `ef-password` already
+   puts on the wrapper — because PrimeNG's own rule is a single class and an
+   unscoped override loses the `margin-top` while still winning the
+   `transform`, which stacks both corrections and throws the ✕ 8px high
+   instead. Measured after: clear 0.00, toggle 0.00, difference 0.00. */
+.ef-password-field .p-password-clear-icon {
   top: 50%;
   margin-top: 0;
   transform: translateY(-50%);

package/types/elasticias-ui.d.ts

@@ -3468,6 +3468,14 @@ declare class EfSelectComponent extends AbstractEfFormControl implements Control
  * value when ticked, `null` when unticked) — the latter pairs with
  * a parent NgModel array for multi-select scenarios.
  *
+ * Two layouts, set by `inline`:
+ * - `inline` (default) — box with its label to the right, for
+ *   standalone toggles and dense lists.
+ * - `[inline]="false"` — field layout: the label sits above, like
+ *   `ef-select` / `ef-input-text`, and the box is centred in a
+ *   `--hit-base` row so it lines up with the inputs beside it in a
+ *   form grid.
+ *
  * ```html
  * <ef-checkbox
  *   labelKey="catalog.is_active"
@@ -3489,6 +3497,12 @@ declare class EfCheckboxComponent extends AbstractEfFormControl implements Contr
      *                           styled against `.ef-checkbox-native`.
      */
     variant: 'primeng' | 'comptoir';
+    /** Label beside the box (default). `false` stacks the label above,
+     *  matching the other form fields in a grid row. */
+    inline: boolean;
+    get isStacked(): boolean;
+    /** Whether the label renders beside the box (inline layout only). */
+    get hasLabel(): boolean;
     /** Two-way bindable `[(checked)]`. */
     checked: any;
     checkedChange: EventEmitter<any>;
@@ -3508,8 +3522,9 @@ declare class EfCheckboxComponent extends AbstractEfFormControl implements Contr
     /** Handler for the native checkbox change event (Comptoir variant). */
     handleNativeChange(rawChecked: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfCheckboxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfCheckboxComponent, "ef-checkbox", never, { "value": { "alias": "value"; "required": false; }; "binary": { "alias": "binary"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; }, { "checkedChange": "checkedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfCheckboxComponent, "ef-checkbox", never, { "value": { "alias": "value"; "required": false; }; "binary": { "alias": "binary"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; }, { "checkedChange": "checkedChange"; }, never, never, true, never>;
     static ngAcceptInputType_binary: unknown;
+    static ngAcceptInputType_inline: unknown;
 }
 
 /**
@@ -5400,6 +5415,74 @@ declare class EfChangePasswordComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfChangePasswordComponent, "ef-change-password", never, { "requireCurrent": { "alias": "requireCurrent"; "required": false; "isSignal": true; }; "busy": { "alias": "busy"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; }, { "submitted": "submitted"; }, never, never, true, never>;
 }
 
+/**
+ * Comptoir radio group — one `p-radiobutton` per option, single value.
+ *
+ * Options follow the `ef-select` shape (`options` / `optionLabel` /
+ * `optionValue`, change via `selectionChangeEvent`), so a short select
+ * can become a radio group by swapping the tag.
+ *
+ * Two layouts, set by `inline`, matching `ef-checkbox`:
+ * - `inline` (default) — group label and options on one line.
+ * - `[inline]="false"` — field layout: the label sits above, like
+ *   `ef-select` / `ef-input-text`, and the options sit in a
+ *   `--hit-base` row so they line up with the inputs beside them in a
+ *   form grid.
+ *
+ * Options wrap when the row runs out of width, so a long list never
+ * widens the page on a phone.
+ *
+ * ```html
+ * <ef-radio
+ *   name="clientType"
+ *   labelKey="sales_clients_col_type"
+ *   [inline]="false"
+ *   [options]="context.ref.get('client_type')()"
+ *   optionLabel="label"
+ *   optionValue="code"
+ *   [value]="clientType()"
+ *   (selectionChangeEvent)="patchEntity({ clientType: $event })" />
+ * ```
+ */
+declare class EfRadioComponent extends AbstractEfFormControl implements ControlValueAccessor {
+    options: any[];
+    /** Property shown as the option's text. */
+    optionLabel: string;
+    /** Property used as the value. Unset → the whole option object. */
+    optionValue?: string;
+    /** Property that disables a single option when truthy. */
+    optionDisabled?: string;
+    /** Group label beside the options (default). `false` stacks it above,
+     *  matching the other form fields in a grid row. */
+    inline: boolean;
+    get isStacked(): boolean;
+    value: any;
+    selectionChangeEvent: EventEmitter<any>;
+    private onChange;
+    private onTouched;
+    readonly ngControl: NgControl;
+    constructor();
+    get hasLabel(): boolean;
+    /** Shared `name` so the browser treats the options as one group. */
+    get groupName(): string;
+    get labelId(): string;
+    get showRequired(): boolean;
+    get serverErrors(): string[] | null;
+    get isInvalid(): boolean;
+    optionValueOf(opt: any): any;
+    optionLabelOf(opt: any): string;
+    isOptionDisabled(opt: any): boolean;
+    optionId(index: number): string;
+    writeValue(value: any): void;
+    registerOnChange(fn: (value: any) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    handleChange(next: any): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfRadioComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfRadioComponent, "ef-radio", never, { "options": { "alias": "options"; "required": false; }; "optionLabel": { "alias": "optionLabel"; "required": false; }; "optionValue": { "alias": "optionValue"; "required": false; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "selectionChangeEvent": "selectionChangeEvent"; }, never, never, true, never>;
+    static ngAcceptInputType_inline: unknown;
+}
+
 /**
  * Native Comptoir textarea — no PrimeNG wrapper. Pairs with the
  * `.ef-textarea` rule in `@elasticias/ui/styles/patterns` (focus
@@ -5995,5 +6078,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_DATA_CARD_MOBILE_LAYOUT, EF_STATUS_COLORS, EF_STATUS_COLOR_ALIASES, EfAboutDialogComponent, EfActivationFilterComponent, EfAppMainComponent, EfAppShellComponent, EfAppShellMobileComponent, EfAppTopComponent, EfBadgeComponent, EfBlockUiComponent, EfBlockableDivComponent, EfBottomSheetComponent, EfBuildStampComponent, EfBulkBarComponent, EfButtonComponent, EfButtonGroupComponent, EfCardComponent, EfChangeHistoryComponent, EfChangePasswordComponent, 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, EfOverflowTooltipDirective, EfPagerComponent, EfPasswordComponent, EfPdfPreviewComponent, EfPillGroupComponent, EfPresetPillComponent, EfPriceDisplayComponent, EfProductCatalogueComponent, EfProductCatalogueFilterComponent, EfProductTypeaheadComponent, EfProfileChipComponent, EfProfileMenuComponent, EfPulseComponent, EfQuantitySelectorComponent, EfQuantityStepperComponent, EfRankListComponent, EfRowActionsComponent, EfSearchToolbarComponent, EfSelectButtonComponent, EfSelectComponent, EfServerErrorsDirective, EfShortcutsDialogComponent, EfSkeletonComponent, EfSmartBarComponent, EfStatsComponent, EfStatusChipComponent, EfTabPanelDirective, EfTabsComponent, EfTextareaComponent, EfThemeConfiguratorComponent, EfThemeToggleComponent, EfTimelineComponent, EfToastRegionComponent, EfToggleSwitchComponent, EfToolbarComponent, EfTooltipDirective, 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_DATA_CARD_MOBILE_LAYOUT, EF_STATUS_COLORS, EF_STATUS_COLOR_ALIASES, EfAboutDialogComponent, EfActivationFilterComponent, EfAppMainComponent, EfAppShellComponent, EfAppShellMobileComponent, EfAppTopComponent, EfBadgeComponent, EfBlockUiComponent, EfBlockableDivComponent, EfBottomSheetComponent, EfBuildStampComponent, EfBulkBarComponent, EfButtonComponent, EfButtonGroupComponent, EfCardComponent, EfChangeHistoryComponent, EfChangePasswordComponent, 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, EfOverflowTooltipDirective, EfPagerComponent, EfPasswordComponent, EfPdfPreviewComponent, EfPillGroupComponent, EfPresetPillComponent, EfPriceDisplayComponent, EfProductCatalogueComponent, EfProductCatalogueFilterComponent, EfProductTypeaheadComponent, EfProfileChipComponent, EfProfileMenuComponent, EfPulseComponent, EfQuantitySelectorComponent, EfQuantityStepperComponent, EfRadioComponent, EfRankListComponent, EfRowActionsComponent, EfSearchToolbarComponent, EfSelectButtonComponent, EfSelectComponent, EfServerErrorsDirective, EfShortcutsDialogComponent, 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, EfAboutServer, EfBadgeColor, EfBadgeConfig, EfBadgeSize, EfBadgeVariant, EfButtonComptoirSeverity, EfButtonPrimeNGSeverity, EfButtonSeverity, EfChangeHistoryEntry, EfChangeHistoryFieldChange, EfChangePasswordSubmit, EfChartSeries, EfChartType, EfDataCardMobileLayout, EfDataCardRowAction, EfDatatableActions, EfDatatableColumn, EfDatatableColumnAlign, EfDatatableColumnType, EfDatatableConfig, EfDateFieldValue, EfDatePreset, EfDialogAction, EfDialogSeverity, EfDialogSize, EfFabPosition, EfKpiDeltaTone, EfKpiSparkline, EfPillItem, EfPresetItem, EfProfileMenuItem, 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 };