@elasticias/ui 1.0.34 → 1.0.36

package/fesm2022/elasticias-ui.mjs

@@ -66,6 +66,8 @@ import * as i1$f from 'primeng/selectbutton';
 import { SelectButtonModule, SelectButton } from 'primeng/selectbutton';
 import * as i2$5 from 'primeng/table';
 import { TableModule } from 'primeng/table';
+import * as i1$g from 'primeng/radiobutton';
+import { RadioButtonModule } from 'primeng/radiobutton';
 import { updatePreset, updateSurfacePalette, $t } from '@primeng/themes';
 import Aura from '@primeng/themes/aura';
 import Lara from '@primeng/themes/lara';
@@ -9394,6 +9396,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * 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"
@@ -9417,6 +9427,14 @@ class EfCheckboxComponent extends AbstractEfFormControl {
      *                           styled against `.ef-checkbox-native`.
      */
     variant = 'primeng';
+    /** Label beside the box (default). `false` stacks the label above,
+     *  matching the other form fields in a grid row. */
+    inline = true;
+    get isStacked() { return !this.inline; }
+    /** Whether the label renders beside the box (inline layout only). */
+    get hasLabel() {
+        return !!(this.labelKey() || this.label());
+    }
     /** Two-way bindable `[(checked)]`. */
     checked = false;
     checkedChange = new EventEmitter();
@@ -9472,11 +9490,11 @@ class EfCheckboxComponent extends AbstractEfFormControl {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfCheckboxComponent, isStandalone: true, selector: "ef-checkbox", inputs: { value: "value", binary: ["binary", "binary", booleanAttribute], variant: "variant", checked: "checked" }, outputs: { checkedChange: "checkedChange" }, usesInheritance: true, ngImport: i0, template: "@if (variant === 'comptoir') {\n  <label class=\"ef-checkbox-native\" [class.is-disabled]=\"disabled\">\n    <input\n      type=\"checkbox\"\n      [id]=\"effectiveId\"\n      [attr.name]=\"name() || null\"\n      [checked]=\"!!checked\"\n      [disabled]=\"isDisabled()\"\n      [class.is-invalid]=\"isInvalid\"\n      [attr.aria-label]=\"effectiveAriaLabel\"\n      [attr.aria-required]=\"required() ? 'true' : null\"\n      [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n      [attr.aria-describedby]=\"(showRequired || serverErrors) ? errorsId : null\"\n      (change)=\"handleNativeChange($any($event.target).checked)\"\n    />\n    <span class=\"ef-checkbox-box\" aria-hidden=\"true\"></span>\n    @if (labelKey() || label()) {\n      <span class=\"ef-checkbox-label\">\n        {{ labelKey() ? (labelKey() | translate) : label() }}\n        @if (required()) {\n          <span class=\"ef-checkbox-required\" aria-hidden=\"true\">*</span>\n        }\n      </span>\n    }\n  </label>\n} @else {\n  <p-checkbox\n    [inputId]=\"effectiveId\"\n    [name]=\"name()\"\n    [ngModel]=\"checked\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (onChange)=\"handleChange($event)\"\n    [value]=\"value\"\n    [binary]=\"binary\"\n    [disabled]=\"isDisabled()\"\n    [ariaLabel]=\"effectiveAriaLabel || undefined\"\n  />\n  @if (labelKey() || label()) {\n    <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" styleClass=\"form-label-left cursor-pointer\" />\n  }\n}\n@if (showRequired || serverErrors) {\n  <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n    @if (showRequired) {\n      <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n    }\n    @if (serverErrors; as errors) {\n      @for (error of errors; track error) {\n        <small class=\"text-danger block\">{{ error }}</small>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfCheckboxComponent, isStandalone: true, selector: "ef-checkbox", inputs: { value: "value", binary: ["binary", "binary", booleanAttribute], variant: "variant", inline: ["inline", "inline", booleanAttribute], checked: "checked" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.ef-stacked": "this.isStacked" } }, usesInheritance: true, ngImport: i0, template: "@if (!inline && hasLabel) {\n  <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-checkbox-control\">\n  @if (variant === 'comptoir') {\n    <label class=\"ef-checkbox-native\" [class.is-disabled]=\"disabled\">\n      <input\n        type=\"checkbox\"\n        [id]=\"effectiveId\"\n        [attr.name]=\"name() || null\"\n        [checked]=\"!!checked\"\n        [disabled]=\"isDisabled()\"\n        [class.is-invalid]=\"isInvalid\"\n        [attr.aria-label]=\"effectiveAriaLabel\"\n        [attr.aria-required]=\"required() ? 'true' : null\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n        [attr.aria-describedby]=\"(showRequired || serverErrors) ? errorsId : null\"\n        (change)=\"handleNativeChange($any($event.target).checked)\"\n      />\n      <span class=\"ef-checkbox-box\" aria-hidden=\"true\"></span>\n      @if (inline && hasLabel) {\n        <span class=\"ef-checkbox-label\">\n          {{ labelKey() ? (labelKey() | translate) : label() }}\n          @if (required()) {\n            <span class=\"ef-checkbox-required\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n      }\n    </label>\n  } @else {\n    <p-checkbox\n      [inputId]=\"effectiveId\"\n      [name]=\"name()\"\n      [ngModel]=\"checked\"\n      [ngModelOptions]=\"{standalone: true}\"\n      (onChange)=\"handleChange($event)\"\n      [value]=\"value\"\n      [binary]=\"binary\"\n      [disabled]=\"isDisabled()\"\n      [ariaLabel]=\"effectiveAriaLabel || undefined\"\n    />\n    @if (inline && hasLabel) {\n      <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" styleClass=\"form-label-left cursor-pointer\" />\n    }\n  }\n</div>\n@if (showRequired || serverErrors) {\n  <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n    @if (showRequired) {\n      <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n    }\n    @if (serverErrors; as errors) {\n      @for (error of errors; track error) {\n        <small class=\"text-danger block\">{{ error }}</small>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}.ef-checkbox-control{display:inline-flex;align-items:center;gap:.5rem;min-width:0}:host(.ef-stacked){display:block}:host(.ef-stacked)>.ef-checkbox-control{display:flex;min-height:var(--hit-base)}\n"], dependencies: [{ kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ef-checkbox', standalone: true, imports: [CheckboxModule, FormsModule, TranslateModule, EfLabelComponent], template: "@if (variant === 'comptoir') {\n  <label class=\"ef-checkbox-native\" [class.is-disabled]=\"disabled\">\n    <input\n      type=\"checkbox\"\n      [id]=\"effectiveId\"\n      [attr.name]=\"name() || null\"\n      [checked]=\"!!checked\"\n      [disabled]=\"isDisabled()\"\n      [class.is-invalid]=\"isInvalid\"\n      [attr.aria-label]=\"effectiveAriaLabel\"\n      [attr.aria-required]=\"required() ? 'true' : null\"\n      [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n      [attr.aria-describedby]=\"(showRequired || serverErrors) ? errorsId : null\"\n      (change)=\"handleNativeChange($any($event.target).checked)\"\n    />\n    <span class=\"ef-checkbox-box\" aria-hidden=\"true\"></span>\n    @if (labelKey() || label()) {\n      <span class=\"ef-checkbox-label\">\n        {{ labelKey() ? (labelKey() | translate) : label() }}\n        @if (required()) {\n          <span class=\"ef-checkbox-required\" aria-hidden=\"true\">*</span>\n        }\n      </span>\n    }\n  </label>\n} @else {\n  <p-checkbox\n    [inputId]=\"effectiveId\"\n    [name]=\"name()\"\n    [ngModel]=\"checked\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (onChange)=\"handleChange($event)\"\n    [value]=\"value\"\n    [binary]=\"binary\"\n    [disabled]=\"isDisabled()\"\n    [ariaLabel]=\"effectiveAriaLabel || undefined\"\n  />\n  @if (labelKey() || label()) {\n    <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" styleClass=\"form-label-left cursor-pointer\" />\n  }\n}\n@if (showRequired || serverErrors) {\n  <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n    @if (showRequired) {\n      <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n    }\n    @if (serverErrors; as errors) {\n      @for (error of errors; track error) {\n        <small class=\"text-danger block\">{{ error }}</small>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:.5rem}\n"] }]
+            args: [{ selector: 'ef-checkbox', standalone: true, imports: [CheckboxModule, FormsModule, TranslateModule, EfLabelComponent], template: "@if (!inline && hasLabel) {\n  <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-checkbox-control\">\n  @if (variant === 'comptoir') {\n    <label class=\"ef-checkbox-native\" [class.is-disabled]=\"disabled\">\n      <input\n        type=\"checkbox\"\n        [id]=\"effectiveId\"\n        [attr.name]=\"name() || null\"\n        [checked]=\"!!checked\"\n        [disabled]=\"isDisabled()\"\n        [class.is-invalid]=\"isInvalid\"\n        [attr.aria-label]=\"effectiveAriaLabel\"\n        [attr.aria-required]=\"required() ? 'true' : null\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n        [attr.aria-describedby]=\"(showRequired || serverErrors) ? errorsId : null\"\n        (change)=\"handleNativeChange($any($event.target).checked)\"\n      />\n      <span class=\"ef-checkbox-box\" aria-hidden=\"true\"></span>\n      @if (inline && hasLabel) {\n        <span class=\"ef-checkbox-label\">\n          {{ labelKey() ? (labelKey() | translate) : label() }}\n          @if (required()) {\n            <span class=\"ef-checkbox-required\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n      }\n    </label>\n  } @else {\n    <p-checkbox\n      [inputId]=\"effectiveId\"\n      [name]=\"name()\"\n      [ngModel]=\"checked\"\n      [ngModelOptions]=\"{standalone: true}\"\n      (onChange)=\"handleChange($event)\"\n      [value]=\"value\"\n      [binary]=\"binary\"\n      [disabled]=\"isDisabled()\"\n      [ariaLabel]=\"effectiveAriaLabel || undefined\"\n    />\n    @if (inline && hasLabel) {\n      <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" styleClass=\"form-label-left cursor-pointer\" />\n    }\n  }\n</div>\n@if (showRequired || serverErrors) {\n  <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n    @if (showRequired) {\n      <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n    }\n    @if (serverErrors; as errors) {\n      @for (error of errors; track error) {\n        <small class=\"text-danger block\">{{ error }}</small>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}.ef-checkbox-control{display:inline-flex;align-items:center;gap:.5rem;min-width:0}:host(.ef-stacked){display:block}:host(.ef-stacked)>.ef-checkbox-control{display:flex;min-height:var(--hit-base)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], binary: [{
@@ -9484,6 +9502,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 args: [{ transform: booleanAttribute }]
             }], variant: [{
                 type: Input
+            }], inline: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isStacked: [{
+                type: HostBinding,
+                args: ['class.ef-stacked']
             }], checked: [{
                 type: Input
             }], checkedChange: [{
@@ -11017,6 +11041,137 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             args: [{ selector: 'ef-change-password', standalone: true, imports: [CommonModule, TranslateModule, EfPasswordComponent, EfFormGridComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ef-form-grid>\n  @if (requireCurrent()) {\n    <ef-password\n      class=\"col-12\"\n      name=\"currentPassword\"\n      labelKey=\"ef_change_password_current\"\n      autocomplete=\"current-password\"\n      required\n      (valueChangeEvent)=\"currentPassword.set($event)\"\n    />\n  }\n  <ef-password\n    class=\"col-6\"\n    name=\"newPassword\"\n    labelKey=\"ef_change_password_new\"\n    autocomplete=\"new-password\"\n    required\n    (valueChangeEvent)=\"newPassword.set($event)\"\n  />\n  <ef-password\n    class=\"col-6\"\n    name=\"newPasswordConfirmation\"\n    labelKey=\"ef_change_password_confirm\"\n    autocomplete=\"new-password\"\n    required\n    (valueChangeEvent)=\"confirmation.set($event)\"\n  />\n</ef-form-grid>\n\n@if (validationKeys().length || errors().length) {\n  <ul class=\"ef-change-password__errors\">\n    @for (key of validationKeys(); track $index) {\n      <li>{{ key | translate }}</li>\n    }\n    <!-- Server messages arrive already translated (Identity returns prose,\n         not keys), so they are printed verbatim. -->\n    @for (error of errors(); track $index) {\n      <li>{{ error }}</li>\n    }\n  </ul>\n}\n", styles: [":host{display:grid;gap:var(--s-2, 8px);min-width:0}.ef-change-password__errors{display:grid;gap:4px;margin:0;padding:0;list-style:none;min-width:0;font-size:12px;line-height:1.4;color:var(--st-cancelled-fg, #b42318)}\n"] }]
         }], propDecorators: { requireCurrent: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireCurrent", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }] } });
 
+/**
+ * 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 })" />
+ * ```
+ */
+class EfRadioComponent extends AbstractEfFormControl {
+    options = [];
+    /** Property shown as the option's text. */
+    optionLabel = 'label';
+    /** Property used as the value. Unset → the whole option object. */
+    optionValue;
+    /** Property that disables a single option when truthy. */
+    optionDisabled;
+    /** Group label beside the options (default). `false` stacks it above,
+     *  matching the other form fields in a grid row. */
+    inline = true;
+    get isStacked() { return !this.inline; }
+    value = null;
+    selectionChangeEvent = new EventEmitter();
+    onChange = () => { };
+    onTouched = () => { };
+    ngControl = inject(NgControl, { self: true, optional: true });
+    constructor() {
+        super();
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    get hasLabel() {
+        return !!(this.labelKey() || this.label());
+    }
+    /** Shared `name` so the browser treats the options as one group. */
+    get groupName() {
+        return this.name() || this.effectiveId;
+    }
+    get labelId() {
+        return `${this.effectiveId}-label`;
+    }
+    get showRequired() {
+        const ctrl = this.ngControl?.control;
+        return !!(ctrl?.hasError('required') && ctrl?.touched);
+    }
+    get serverErrors() {
+        return this.resolvedExternalErrors() ?? this.ngControl?.control?.errors?.['serverError'] ?? null;
+    }
+    get isInvalid() {
+        if (this.resolvedExternalErrors()?.length)
+            return true;
+        const ctrl = this.ngControl?.control;
+        return !!(ctrl?.invalid && (ctrl?.touched || ctrl?.dirty));
+    }
+    optionValueOf(opt) {
+        return this.optionValue ? opt?.[this.optionValue] : opt;
+    }
+    optionLabelOf(opt) {
+        return opt?.[this.optionLabel] ?? '';
+    }
+    isOptionDisabled(opt) {
+        return this.isDisabled() || (!!this.optionDisabled && !!opt?.[this.optionDisabled]);
+    }
+    optionId(index) {
+        return `${this.effectiveId}-${index}`;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.updateDisabledState(isDisabled);
+    }
+    handleChange(next) {
+        this.value = next;
+        this.onChange(next);
+        this.selectionChangeEvent.emit(next);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfRadioComponent, isStandalone: true, selector: "ef-radio", inputs: { options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", inline: ["inline", "inline", booleanAttribute], value: "value" }, outputs: { selectionChangeEvent: "selectionChangeEvent" }, host: { properties: { "class.ef-stacked": "this.isStacked" } }, usesInheritance: true, ngImport: i0, template: "@if (hasLabel) {\n  <span class=\"ef-radio-group-label\" [id]=\"labelId\">\n    <ef-label\n      [labelKey]=\"labelKey()\"\n      [label]=\"label()\"\n      [required]=\"required()\"\n      [styleClass]=\"inline ? 'form-label-left' : 'form-label'\"\n    />\n  </span>\n}\n<div\n  class=\"ef-radio-options\"\n  role=\"radiogroup\"\n  [attr.aria-labelledby]=\"hasLabel ? labelId : null\"\n  [attr.aria-label]=\"hasLabel ? null : effectiveAriaLabel\"\n  [attr.aria-required]=\"required() ? 'true' : null\"\n  [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n  [attr.aria-describedby]=\"(showRequired || serverErrors) ? errorsId : null\"\n>\n  @for (opt of options; track $index; let i = $index) {\n    <div class=\"ef-radio-option\">\n      <p-radiobutton\n        [inputId]=\"optionId(i)\"\n        [name]=\"groupName\"\n        [value]=\"optionValueOf(opt)\"\n        [ngModel]=\"value\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        (ngModelChange)=\"handleChange($event)\"\n        [disabled]=\"isOptionDisabled(opt)\"\n      />\n      <label class=\"ef-radio-option-label\" [for]=\"optionId(i)\" [class.is-disabled]=\"isOptionDisabled(opt)\">\n        {{ optionLabelOf(opt) }}\n      </label>\n    </div>\n  }\n</div>\n@if (showRequired || serverErrors) {\n  <div class=\"ef-radio-errors\" [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n    @if (showRequired) {\n      <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n    }\n    @if (serverErrors; as errors) {\n      @for (error of errors; track error) {\n        <small class=\"text-danger block\">{{ error }}</small>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;min-width:0}.ef-radio-options{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;min-width:0}.ef-radio-option{display:inline-flex;align-items:center;gap:.5rem;min-width:0}.ef-radio-option-label{font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none}.ef-radio-option-label.is-disabled{color:var(--text-mute);cursor:not-allowed}.ef-radio-errors{flex-basis:100%}:host(.ef-stacked){display:block}:host(.ef-stacked)>.ef-radio-group-label{display:block}:host(.ef-stacked)>.ef-radio-options{min-height:var(--hit-base)}\n"], dependencies: [{ kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i1$g.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "styleClass", "autofocus", "binary", "variant", "size"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfRadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ef-radio', standalone: true, imports: [RadioButtonModule, FormsModule, TranslateModule, EfLabelComponent], template: "@if (hasLabel) {\n  <span class=\"ef-radio-group-label\" [id]=\"labelId\">\n    <ef-label\n      [labelKey]=\"labelKey()\"\n      [label]=\"label()\"\n      [required]=\"required()\"\n      [styleClass]=\"inline ? 'form-label-left' : 'form-label'\"\n    />\n  </span>\n}\n<div\n  class=\"ef-radio-options\"\n  role=\"radiogroup\"\n  [attr.aria-labelledby]=\"hasLabel ? labelId : null\"\n  [attr.aria-label]=\"hasLabel ? null : effectiveAriaLabel\"\n  [attr.aria-required]=\"required() ? 'true' : null\"\n  [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n  [attr.aria-describedby]=\"(showRequired || serverErrors) ? errorsId : null\"\n>\n  @for (opt of options; track $index; let i = $index) {\n    <div class=\"ef-radio-option\">\n      <p-radiobutton\n        [inputId]=\"optionId(i)\"\n        [name]=\"groupName\"\n        [value]=\"optionValueOf(opt)\"\n        [ngModel]=\"value\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        (ngModelChange)=\"handleChange($event)\"\n        [disabled]=\"isOptionDisabled(opt)\"\n      />\n      <label class=\"ef-radio-option-label\" [for]=\"optionId(i)\" [class.is-disabled]=\"isOptionDisabled(opt)\">\n        {{ optionLabelOf(opt) }}\n      </label>\n    </div>\n  }\n</div>\n@if (showRequired || serverErrors) {\n  <div class=\"ef-radio-errors\" [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n    @if (showRequired) {\n      <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n    }\n    @if (serverErrors; as errors) {\n      @for (error of errors; track error) {\n        <small class=\"text-danger block\">{{ error }}</small>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;min-width:0}.ef-radio-options{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;min-width:0}.ef-radio-option{display:inline-flex;align-items:center;gap:.5rem;min-width:0}.ef-radio-option-label{font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none}.ef-radio-option-label.is-disabled{color:var(--text-mute);cursor:not-allowed}.ef-radio-errors{flex-basis:100%}:host(.ef-stacked){display:block}:host(.ef-stacked)>.ef-radio-group-label{display:block}:host(.ef-stacked)>.ef-radio-options{min-height:var(--hit-base)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{
+                type: Input
+            }], optionLabel: [{
+                type: Input
+            }], optionValue: [{
+                type: Input
+            }], optionDisabled: [{
+                type: Input
+            }], inline: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isStacked: [{
+                type: HostBinding,
+                args: ['class.ef-stacked']
+            }], value: [{
+                type: Input
+            }], selectionChangeEvent: [{
+                type: Output
+            }] } });
+
 /**
  * Native Comptoir textarea — no PrimeNG wrapper. Pairs with the
  * `.ef-textarea` rule in `@elasticias/ui/styles/patterns` (focus
@@ -11882,5 +12037,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-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 };
 //# sourceMappingURL=elasticias-ui.mjs.map