mn-angular-lib 0.0.77 → 0.0.78

package/fesm2022/mn-angular-lib.mjs

@@ -2007,7 +2007,21 @@ class MnDatetime {
     }
     // ========== ControlValueAccessor Implementation ==========
     writeValue(val) {
-        this.value = val != null ? String(val) : null;
+        if (val != null) {
+            let str = String(val);
+            // Convert ISO 8601 strings (e.g. "2025-01-01T10:00:00.000Z") to datetime-local format
+            if (str.includes('T') && (str.endsWith('Z') || /[+-]\d{2}:\d{2}$/.test(str))) {
+                const date = new Date(str);
+                if (!isNaN(date.getTime())) {
+                    const pad = (n) => n.toString().padStart(2, '0');
+                    str = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+                }
+            }
+            this.value = str;
+        }
+        else {
+            this.value = null;
+        }
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -4454,6 +4468,12 @@ class MnWizardBodyComponent {
             return;
         if (step.id === this.currentStepId)
             return;
+        // Validate current step's form before allowing direct step navigation
+        const formBody = this.getCurrentFormBody();
+        if (formBody && formBody.form.invalid) {
+            formBody.form.markAllAsTouched();
+            return;
+        }
         const previousStepId = this.currentStepId;
         this.currentStepId = step.id;
         if (!this.visitedStepIds.includes(this.currentStepId)) {
@@ -4615,6 +4635,36 @@ class MnWizardBodyComponent {
         });
         return aggregated;
     }
+    /**
+     * Maps a footer action's ActionStyle to mnButton data props.
+     * @param action The footer action configuration.
+     */
+    getFooterActionButtonData(action) {
+        switch (action.style) {
+            case ActionStyle.DANGER:
+                return { variant: 'outline', color: 'error' };
+            case ActionStyle.PRIMARY:
+                return { variant: 'fill', color: 'primary' };
+            case ActionStyle.SECONDARY:
+                return { variant: 'outline', color: 'secondary' };
+            case ActionStyle.GHOST:
+                return { variant: 'ghost', color: 'secondary' };
+            default:
+                return { variant: 'outline', color: 'secondary' };
+        }
+    }
+    /**
+     * Handles a custom footer action click.
+     * @param action The footer action configuration.
+     */
+    async handleFooterAction(action) {
+        if (action.handler) {
+            await action.handler(this.modalRef);
+        }
+        if (action.closesModal) {
+            this.modalRef.close((action.closeReason || ModalCloseReason.PROGRAMMATIC));
+        }
+    }
     async notifyStepChange(previousStepId, direction) {
         if (this.config.onStepChange) {
             await this.config.onStepChange.handle({
@@ -4625,11 +4675,11 @@ class MnWizardBodyComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnWizardBodyComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnWizardBodyComponent, isStandalone: true, selector: "mn-wizard-body", inputs: { config: "config", modalRef: "modalRef" }, viewQueries: [{ propertyName: "formBodies", predicate: MnFormBodyComponent, descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-6\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"asAny(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n      class=\"block\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"flex gap-2 pb-4 border-b border-base-300\">\n    @for (step of visibleSteps; track step.id; let i = $index) {\n      <div\n        class=\"flex items-center gap-2 flex-1\"\n        [class.active]=\"step.id === currentStepId\"\n        [class.complete]=\"visitedStepIds.includes(step.id) && step.id !== currentStepId\"\n        [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n        (click)=\"isFreeFlow ? goToStep(step) : null\"\n      >\n        <div\n          class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          [ngClass]=\"{\n            'bg-blue-500 text-white': step.id === currentStepId,\n            'bg-green-500 text-white': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n            'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n          }\"\n        >{{ i + 1 }}</div>\n        <div\n          class=\"text-sm\"\n          [ngClass]=\"{\n            'text-base-content font-semibold': step.id === currentStepId,\n            'text-base-content/50': step.id !== currentStepId\n          }\"\n        >{{ step.title }}</div>\n      </div>\n    }\n  </div>\n\n  <div class=\"min-h-48\">\n    @for (step of config.steps; track step.id) {\n      <div [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-base-content mb-4\">{{ step.title }}</h3>\n        <div class=\"text-base-content/80\">\n          <!-- Form step -->\n          @if (stepFormConfigs[step.id]) {\n            <mn-form-body\n              [config]=\"stepFormConfigs[step.id]\"\n              [modalRef]=\"asAny(modalRef)\"\n              [hideFooter]=\"true\"\n              [hideCustomBody]=\"true\"\n            ></mn-form-body>\n          }\n\n          <!-- Text body -->\n          @if (!stepFormConfigs[step.id] && isTextBody(step)) {\n            <div>\n              {{ step.body }}\n            </div>\n          }\n\n          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 px-2 py-2 bg-red-50 rounded-md\">\n      @for (err of wizardErrors | keyvalue; track err.key) {\n        <div class=\"text-red-500 text-sm\">\n          {{ err.value }}\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"flex gap-3 pt-4 border-t border-base-300\">\n    @if (!currentStep?.hideBack) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <div class=\"flex-1\"></div>\n\n    @if (!isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n        (click)=\"next()\"\n      >\n        {{ currentStep?.nextLabel || labels.next }}\n      </button>\n    }\n\n    @if (isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n        [disabled]=\"!isCurrentStepValid || isCompleting\"\n        (click)=\"complete()\"\n      >\n        {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnWizardBodyComponent, isStandalone: true, selector: "mn-wizard-body", inputs: { config: "config", modalRef: "modalRef" }, viewQueries: [{ propertyName: "formBodies", predicate: MnFormBodyComponent, descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-6\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"asAny(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n      class=\"block\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"flex gap-2 pb-4 border-b border-base-300\">\n    @for (step of visibleSteps; track step.id; let i = $index) {\n      <div\n        class=\"flex items-center gap-2 flex-1\"\n        [class.active]=\"step.id === currentStepId\"\n        [class.complete]=\"visitedStepIds.includes(step.id) && step.id !== currentStepId\"\n        [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n        (click)=\"isFreeFlow ? goToStep(step) : null\"\n      >\n        <div\n          class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          [ngClass]=\"{\n            'bg-blue-500 text-white': step.id === currentStepId,\n            'bg-green-500 text-white': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n            'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n          }\"\n        >{{ i + 1 }}</div>\n        <div\n          class=\"text-sm\"\n          [ngClass]=\"{\n            'text-base-content font-semibold': step.id === currentStepId,\n            'text-base-content/50': step.id !== currentStepId\n          }\"\n        >{{ step.title }}</div>\n      </div>\n    }\n  </div>\n\n  <div class=\"min-h-48\">\n    @for (step of config.steps; track step.id) {\n      <div [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-base-content mb-4\">{{ step.title }}</h3>\n        <div class=\"text-base-content/80\">\n          <!-- Form step -->\n          @if (stepFormConfigs[step.id]) {\n            <mn-form-body\n              [config]=\"stepFormConfigs[step.id]\"\n              [modalRef]=\"asAny(modalRef)\"\n              [hideFooter]=\"true\"\n              [hideCustomBody]=\"true\"\n            ></mn-form-body>\n          }\n\n          <!-- Text body -->\n          @if (!stepFormConfigs[step.id] && isTextBody(step)) {\n            <div>\n              {{ step.body }}\n            </div>\n          }\n\n          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 px-2 py-2 bg-red-50 rounded-md\">\n      @for (err of wizardErrors | keyvalue; track err.key) {\n        <div class=\"text-red-500 text-sm\">\n          {{ err.value }}\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"flex gap-3 pt-4 border-t border-base-300\">\n    @if (!currentStep?.hideBack) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <!-- Custom footer actions (e.g. Delete) -->\n    @if (config.footerActions) {\n      @for (action of config.footerActions; track action.label) {\n        @if (action.position === 'left') {\n          <button\n            mnButton\n            [data]=\"getFooterActionButtonData(action)\"\n            [disabled]=\"action.disabled || false\"\n            (click)=\"handleFooterAction(action)\"\n          >\n            {{ action.label }}\n          </button>\n        }\n      }\n    }\n\n    <div class=\"flex-1\"></div>\n\n    <!-- Custom footer actions on the right -->\n    @if (config.footerActions) {\n      @for (action of config.footerActions; track action.label) {\n        @if (action.position !== 'left') {\n          <button\n            mnButton\n            [data]=\"getFooterActionButtonData(action)\"\n            [disabled]=\"action.disabled || false\"\n            (click)=\"handleFooterAction(action)\"\n          >\n            {{ action.label }}\n          </button>\n        }\n      }\n    }\n\n    @if (!isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n        (click)=\"next()\"\n      >\n        {{ currentStep?.nextLabel || labels.next }}\n      </button>\n    }\n\n    @if (isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n        [disabled]=\"!isCurrentStepValid || isCompleting\"\n        (click)=\"complete()\"\n      >\n        {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnWizardBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-wizard-body', standalone: true, imports: [CommonModule, ReactiveFormsModule, MnButton, MnFormBodyComponent, MnCustomBodyHostComponent], template: "<div class=\"flex flex-col gap-6\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"asAny(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n      class=\"block\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"flex gap-2 pb-4 border-b border-base-300\">\n    @for (step of visibleSteps; track step.id; let i = $index) {\n      <div\n        class=\"flex items-center gap-2 flex-1\"\n        [class.active]=\"step.id === currentStepId\"\n        [class.complete]=\"visitedStepIds.includes(step.id) && step.id !== currentStepId\"\n        [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n        (click)=\"isFreeFlow ? goToStep(step) : null\"\n      >\n        <div\n          class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          [ngClass]=\"{\n            'bg-blue-500 text-white': step.id === currentStepId,\n            'bg-green-500 text-white': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n            'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n          }\"\n        >{{ i + 1 }}</div>\n        <div\n          class=\"text-sm\"\n          [ngClass]=\"{\n            'text-base-content font-semibold': step.id === currentStepId,\n            'text-base-content/50': step.id !== currentStepId\n          }\"\n        >{{ step.title }}</div>\n      </div>\n    }\n  </div>\n\n  <div class=\"min-h-48\">\n    @for (step of config.steps; track step.id) {\n      <div [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-base-content mb-4\">{{ step.title }}</h3>\n        <div class=\"text-base-content/80\">\n          <!-- Form step -->\n          @if (stepFormConfigs[step.id]) {\n            <mn-form-body\n              [config]=\"stepFormConfigs[step.id]\"\n              [modalRef]=\"asAny(modalRef)\"\n              [hideFooter]=\"true\"\n              [hideCustomBody]=\"true\"\n            ></mn-form-body>\n          }\n\n          <!-- Text body -->\n          @if (!stepFormConfigs[step.id] && isTextBody(step)) {\n            <div>\n              {{ step.body }}\n            </div>\n          }\n\n          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 px-2 py-2 bg-red-50 rounded-md\">\n      @for (err of wizardErrors | keyvalue; track err.key) {\n        <div class=\"text-red-500 text-sm\">\n          {{ err.value }}\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"flex gap-3 pt-4 border-t border-base-300\">\n    @if (!currentStep?.hideBack) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <div class=\"flex-1\"></div>\n\n    @if (!isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n        (click)=\"next()\"\n      >\n        {{ currentStep?.nextLabel || labels.next }}\n      </button>\n    }\n\n    @if (isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n        [disabled]=\"!isCurrentStepValid || isCompleting\"\n        (click)=\"complete()\"\n      >\n        {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n      </button>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'mn-wizard-body', standalone: true, imports: [CommonModule, ReactiveFormsModule, MnButton, MnFormBodyComponent, MnCustomBodyHostComponent], template: "<div class=\"flex flex-col gap-6\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"asAny(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n      class=\"block\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"flex gap-2 pb-4 border-b border-base-300\">\n    @for (step of visibleSteps; track step.id; let i = $index) {\n      <div\n        class=\"flex items-center gap-2 flex-1\"\n        [class.active]=\"step.id === currentStepId\"\n        [class.complete]=\"visitedStepIds.includes(step.id) && step.id !== currentStepId\"\n        [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n        (click)=\"isFreeFlow ? goToStep(step) : null\"\n      >\n        <div\n          class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          [ngClass]=\"{\n            'bg-blue-500 text-white': step.id === currentStepId,\n            'bg-green-500 text-white': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n            'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n          }\"\n        >{{ i + 1 }}</div>\n        <div\n          class=\"text-sm\"\n          [ngClass]=\"{\n            'text-base-content font-semibold': step.id === currentStepId,\n            'text-base-content/50': step.id !== currentStepId\n          }\"\n        >{{ step.title }}</div>\n      </div>\n    }\n  </div>\n\n  <div class=\"min-h-48\">\n    @for (step of config.steps; track step.id) {\n      <div [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-base-content mb-4\">{{ step.title }}</h3>\n        <div class=\"text-base-content/80\">\n          <!-- Form step -->\n          @if (stepFormConfigs[step.id]) {\n            <mn-form-body\n              [config]=\"stepFormConfigs[step.id]\"\n              [modalRef]=\"asAny(modalRef)\"\n              [hideFooter]=\"true\"\n              [hideCustomBody]=\"true\"\n            ></mn-form-body>\n          }\n\n          <!-- Text body -->\n          @if (!stepFormConfigs[step.id] && isTextBody(step)) {\n            <div>\n              {{ step.body }}\n            </div>\n          }\n\n          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 px-2 py-2 bg-red-50 rounded-md\">\n      @for (err of wizardErrors | keyvalue; track err.key) {\n        <div class=\"text-red-500 text-sm\">\n          {{ err.value }}\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"flex gap-3 pt-4 border-t border-base-300\">\n    @if (!currentStep?.hideBack) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <!-- Custom footer actions (e.g. Delete) -->\n    @if (config.footerActions) {\n      @for (action of config.footerActions; track action.label) {\n        @if (action.position === 'left') {\n          <button\n            mnButton\n            [data]=\"getFooterActionButtonData(action)\"\n            [disabled]=\"action.disabled || false\"\n            (click)=\"handleFooterAction(action)\"\n          >\n            {{ action.label }}\n          </button>\n        }\n      }\n    }\n\n    <div class=\"flex-1\"></div>\n\n    <!-- Custom footer actions on the right -->\n    @if (config.footerActions) {\n      @for (action of config.footerActions; track action.label) {\n        @if (action.position !== 'left') {\n          <button\n            mnButton\n            [data]=\"getFooterActionButtonData(action)\"\n            [disabled]=\"action.disabled || false\"\n            (click)=\"handleFooterAction(action)\"\n          >\n            {{ action.label }}\n          </button>\n        }\n      }\n    }\n\n    @if (!isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n        (click)=\"next()\"\n      >\n        {{ currentStep?.nextLabel || labels.next }}\n      </button>\n    }\n\n    @if (isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n        [disabled]=\"!isCurrentStepValid || isCompleting\"\n        (click)=\"complete()\"\n      >\n        {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n      </button>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{