@elasticias/ui 1.0.51 → 1.0.53

package/package.json

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

package/styles/_patterns.scss

@@ -3750,10 +3750,39 @@ input.ef-input[type='number'] {
   outline: 0;
 }
 
-.es.p-disabled {
-  opacity: 0.55;
+/* Disabled reads like every other disabled comptoir field (`.ef-input[disabled]`
+   above): flat --paper fill, the usual --rule border, --text-mute text, no
+   fading. The root selector doubles `.p-select` / `.p-multiselect` because
+   PrimeNG injects `.p-select.p-disabled { opacity: 1; background: <its grey> }`
+   at runtime, after this sheet, and at a tie that later rule won, so the
+   disabled select came out a heavier grey than its neighbours. */
+.es.p-select.p-disabled,
+.es.p-multiselect.p-disabled {
+  opacity: 1;
   cursor: not-allowed;
   background: var(--paper);
+  border-color: var(--rule);
+  color: var(--text-mute);
+}
+
+.es.p-select.p-disabled .p-select-label,
+.es.p-multiselect.p-disabled .p-multiselect-label {
+  color: var(--text-mute);
+}
+
+/* The caret stays as a quiet hint of what the field is, not an affordance. */
+.es.p-select.p-disabled .p-select-dropdown,
+.es.p-multiselect.p-disabled .p-multiselect-dropdown {
+  color: var(--text-soft);
+}
+
+/* Comptoir variant: the dense-row select. It replaced a native <select>,
+   which had no minimum width, so it keeps none and shrinks with its cell
+   or grid column instead of widening it (the 200px floor above would push
+   a 390px row sideways). Height stays on --hit-field like the default. */
+.es--comptoir.p-select,
+.es--comptoir.p-multiselect {
+  min-width: 0;
 }
 
 /* Small variant — match `.btn-sm` height */
@@ -5266,3 +5295,23 @@ input.ef-input[type='number'] {
   color: var(--text-mute);
   cursor: pointer;
 }
+
+/* -- Touch tier for the ef-select panel --------------------------------
+   The trigger already grows to --hit-touch on a coarse pointer through
+   --hit-field; the rows it opens were still ~36px and the filter 32px,
+   too small for a thumb now that every comptoir select opens this panel
+   instead of the OS list. A virtual-scrolled list is left alone: its rows
+   must match `virtualScrollItemSize`, so a caller that turns it on sets
+   that to the touch height itself. Last in the file so the base rules
+   above do not win. */
+@media (pointer: coarse) {
+  .es__panel:not(:has(.p-virtualscroller)) .p-select-option,
+  .es__panel:not(:has(.p-virtualscroller)) .p-multiselect-option {
+    min-block-size: var(--hit-touch);
+  }
+
+  .es__panel .p-select-filter,
+  .es__panel .p-multiselect-filter {
+    min-block-size: var(--hit-touch);
+  }
+}

package/types/elasticias-ui.d.ts

@@ -2729,6 +2729,7 @@ declare function resolveEfStatusColor(value: string | null | undefined): EfStatu
  * - `[color]` forces a specific Comptoir tone, ignoring metadata.
  * - `[label]` / `[labelKey]` force the text, ignoring reference data.
  * - `[hideDot]` removes the leading ● glyph.
+ * - `metadata.icon` (or `[icon]`) swaps the ● for a PrimeIcons glyph, e.g. `pi-check`.
  * - `[showCode]` displays the raw code (useful for admin screens).
  */
 declare class EfStatusChipComponent {
@@ -2743,6 +2744,8 @@ declare class EfStatusChipComponent {
     readonly label: _angular_core.InputSignal<string>;
     /** Translation key — preferred when forcing a label. */
     readonly labelKey: _angular_core.InputSignal<string>;
+    /** PrimeIcons class (e.g. `pi-check`) shown instead of the ● dot. Overrides `metadata.icon`. */
+    readonly icon: _angular_core.InputSignal<string>;
     /** Hide the leading ● dot. */
     readonly hideDot: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Render the raw `code` after the label (admin-screen helper). */
@@ -2753,12 +2756,14 @@ declare class EfStatusChipComponent {
      *  generic color-name alias, e.g. `green` → `delivered`) → code
      *  fallback → `neutral`. */
     readonly resolvedColor: _angular_core.Signal<EfStatusColor>;
+    /** Leading icon: the `icon` input, else the entry's `metadata.icon`, else none (the ● dot shows). */
+    readonly resolvedIcon: _angular_core.Signal<string>;
     /** Resolved label — labelKey input → label input → reference label → code. */
     readonly resolvedLabel: _angular_core.Signal<string>;
     /** Translation key returned for the template's translate pipe. */
     readonly resolvedLabelKey: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfStatusChipComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfStatusChipComponent, "ef-status-chip", never, { "referenceKey": { "alias": "referenceKey"; "required": false; "isSignal": true; }; "code": { "alias": "code"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelKey": { "alias": "labelKey"; "required": false; "isSignal": true; }; "hideDot": { "alias": "hideDot"; "required": false; "isSignal": true; }; "showCode": { "alias": "showCode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfStatusChipComponent, "ef-status-chip", never, { "referenceKey": { "alias": "referenceKey"; "required": false; "isSignal": true; }; "code": { "alias": "code"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelKey": { "alias": "labelKey"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "hideDot": { "alias": "hideDot"; "required": false; "isSignal": true; }; "showCode": { "alias": "showCode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -3900,10 +3905,14 @@ declare class EfInputTextComponent extends AbstractEfFormControl implements Cont
  * Elasticias API surface (i18n `*Key` inputs, `selectionChangeEvent`,
  * `filterByKeys`, content-projected templates).
  *
- * The `'comptoir'` variant remains as a lite, no-deps escape hatch
- * (native `<select>` styled via `.ef-select-native`); use the default
- * `'primeng'` variant for any screen that needs filter / multi /
- * group / templating.
+ * Both variants render PrimeNG. `'comptoir'` used to be a native
+ * `<select>`, which opened the operating system's own list (a blank,
+ * checked first row on macOS, no search); it now gets the same `.es`
+ * dropdown, sized for dense rows and appended to `body` so a scrolling
+ * card or table cannot clip its panel.
+ *
+ * The search box turns itself on past `EF_SELECT_FILTER_THRESHOLD`
+ * options unless the caller binds `[filter]` either way.
  *
  * ```html
  * <ef-select
@@ -3949,7 +3958,10 @@ declare class EfSelectComponent extends AbstractEfFormControl implements Control
     appendTo?: string;
     /** Multi-selection — internally swaps `<p-select>` for `<p-multiselect>`. */
     multiple: boolean;
-    filter: boolean;
+    /** Show the search box in the panel. Unset (the default) turns it on
+     *  when there are more than `EF_SELECT_FILTER_THRESHOLD` options; bind
+     *  `true` or `false` to decide for the screen. */
+    filter: boolean | undefined;
     /** Filter the list against these option fields (string or csv).
      *  PrimeNG default: `optionLabel`. */
     filterBy?: string;
@@ -4004,12 +4016,13 @@ declare class EfSelectComponent extends AbstractEfFormControl implements Control
      *                           to the canonical `--hit-field` (40px, 48px on touch) trigger
      *                           height (`.es.p-select { min-height: --hit-field }`),
      *                           so it aligns with inputs/buttons in a row.
-     * - `'comptoir'`           — lite native `<select class="ef-select-native">`.
-     *                           No filter / panel / multi / templates; use it for
-     *                           inline / dense contexts that want the plain native
-     *                           control (e.g. table-row editors).
-     * The `.es` dropdown is the default per the design system; opt into
-     * `comptoir` only when a native control is specifically wanted. See ADR-009.
+     * - `'comptoir'`:          the same `p-select` / `p-multiselect`, for dense
+     *                           rows and table-row editors: no 200px minimum width,
+     *                           so it shrinks with its cell, and the panel goes to
+     *                           `body` unless `appendTo` says otherwise. It no
+     *                           longer renders a native `<select>`.
+     * Both share the `--hit-field` height (40px, 48px on a coarse pointer), so a
+     * select lines up with comptoir inputs and buttons in a row. See ADR-009.
      */
     variant: 'primeng' | 'comptoir';
     get isInline(): boolean;
@@ -4033,10 +4046,47 @@ declare class EfSelectComponent extends AbstractEfFormControl implements Control
     filteredOptions: any[];
     private onChange;
     private onTouched;
+    /** Set once the host binds `[showClear]`, so its value wins over the
+     *  required rule. The inherited signal input cannot tell "bound" from its
+     *  default, but a bound signal input does show up in `ngOnChanges`. */
+    private showClearBound;
     /** Resolved lazily in ngOnInit to avoid circular DI with NG_VALUE_ACCESSOR */
     ngControl: NgControl | null;
     private readonly injector;
     ngOnInit(): void;
+    /** Whether the panel shows its search box: the bound `filter`, or past
+     *  the threshold when the caller left it unset. */
+    get effectiveFilter(): boolean;
+    /**
+     * Whether the clear ✕ is offered. A bound `[showClear]` decides. Otherwise
+     * only an optional select gets one: on a required select the ✕ would just
+     * lead the user into the "required" error, since clearing is never a valid
+     * answer there.
+     */
+    get effectiveShowClear(): boolean;
+    /**
+     * Required by the `[required]` input or by the bound control: a reactive
+     * `Validators.required`, or any validator (template-driven `required`,
+     * a composed list) that rejects an empty value as required.
+     */
+    get isRequiredField(): boolean;
+    /**
+     * Whether the current value is one of the options, compared the way
+     * PrimeNG compares (`optionValue`, else the whole option or its
+     * `dataKey`). An option whose value is null or '' counts: "Aucune" with a
+     * null id is a real choice and must read as a value, not as the
+     * placeholder.
+     */
+    get hasSelectedOption(): boolean;
+    /**
+     * The placeholder handed to PrimeNG. Empty while an option is selected:
+     * PrimeNG greys the trigger whenever its label equals the placeholder, so
+     * a selected "Aucune" beside a placeholder "Aucune" rendered as unset.
+     */
+    get triggerPlaceholder(): string;
+    /** The overlay target. A comptoir select lives in cards and table rows
+     *  that scroll, which would clip a panel attached in place. */
+    get effectiveAppendTo(): string | undefined;
     /**
      * The text an unset select shows: the placeholder, or nothing. A blank or
      * dash-only placeholder (a translation of " " or "—") counts as nothing, so
@@ -4083,10 +4133,8 @@ declare class EfSelectComponent extends AbstractEfFormControl implements Control
     }): void;
     handlePanelShow(): void;
     handlePanelHide(): void;
-    /** Comptoir variant — native `<select>` change handler. The empty
-     *  string from the placeholder option becomes `null`; otherwise we
-     *  resolve the value through `optionValue` if provided. */
-    handleNativeSelectChange(rawValue: string): void;
+    private optionValueOf;
+    private flatOptions;
     private applyFilters;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfSelectComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfSelectComponent, "ef-select", never, { "options": { "alias": "options"; "required": false; }; "optionLabel": { "alias": "optionLabel"; "required": false; }; "optionValue": { "alias": "optionValue"; "required": false; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; }; "dataKey": { "alias": "dataKey"; "required": false; }; "group": { "alias": "group"; "required": false; }; "optionGroupLabel": { "alias": "optionGroupLabel"; "required": false; }; "optionGroupChildren": { "alias": "optionGroupChildren"; "required": false; }; "size": { "alias": "size"; "required": false; }; "fluid": { "alias": "fluid"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "filterBy": { "alias": "filterBy"; "required": false; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; }; "filterPlaceholderKey": { "alias": "filterPlaceholderKey"; "required": false; }; "autofocusFilter": { "alias": "autofocusFilter"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; }; "virtualScrollItemSize": { "alias": "virtualScrollItemSize"; "required": false; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; }; "multiDisplay": { "alias": "multiDisplay"; "required": false; }; "showToggleAll": { "alias": "showToggleAll"; "required": false; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; }; "emptyMessageKey": { "alias": "emptyMessageKey"; "required": false; }; "emptyFilterMessage": { "alias": "emptyFilterMessage"; "required": false; }; "emptyFilterMessageKey": { "alias": "emptyFilterMessageKey"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "panelStyleClass": { "alias": "panelStyleClass"; "required": false; }; "filterByKeys": { "alias": "filterByKeys"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "selectionChangeEvent": "selectionChangeEvent"; "filterChangeEvent": "filterChangeEvent"; "panelShowEvent": "panelShowEvent"; "panelHideEvent": "panelHideEvent"; }, ["itemTemplate", "selectedItemTemplate", "groupTemplate", "headerTemplate", "footerTemplate", "emptyTemplate", "emptyFilterTemplate", "filterTemplate", "loaderTemplate"], never, true, never>;