@genesislcap/foundation-entity-management 14.462.0 → 14.463.0

package/dist/dts/entities/smartFormModal.d.ts

@@ -1,10 +1,179 @@
+import type { UiSchema } from '@genesislcap/foundation-forms';
+import { CrudMenuPosition } from '../types';
 import { EntityManagement } from './entities';
 /**
- * The Smart Form Modal element. Allows to open a modal with an auto-generated form based
- * on the resource schema.
- * @alpha
+ * A focused form dialog component that renders a single trigger button which opens a modal
+ * containing an auto-generated form.
+ *
+ * @remarks
+ * `smart-form-modal` is a trimmed-down variant of {@link EntityManagement} intended for
+ * single-action use cases — approval submissions, bespoke inserts —
+ * where you want a button that opens a form modal without the accompanying data grid.
+ *
+ * The component inherits the full `entity-management` API but exposes a purpose-fit surface
+ * of its own:
+ *
+ * | `smart-form-modal` attr | Underlying property | Notes |
+ * |---|---|---|
+ * | `event` | `createEvent` | The Genesis event handler that processes the form submission |
+ * | `button-label` | `createLabel` | Button and modal title text; replaces the default "Add {entityLabel}" |
+ * | `form-ui-schema` (`:formUiSchema`) | `createFormUiSchema` | UI schema passed as a property binding |
+ * | `success-notification-title` | — | Overrides the toast title shown on successful submit |
+ * | `success-notification-body` | — | Overrides the toast body shown on successful submit |
+ *
+ * The underlying `entity-management` attributes (`createEvent`, `createFormUiSchema`,
+ * `create-label`, `confirmation-message`, `default-entity-values`, `design-system-prefix`,
+ * `set-approval-message`, `approval-message-label`, `form-renderers`,
+ * `additional-form-renderers`, `readonly`) all continue to work — the aliases listed above
+ * are simply the preferred vocabulary for this component.
+ *
+ * Attributes that belong to the grid (`updateEvent`, `deleteEvent`, `columns`, `gridOptions`,
+ * `datasource-config`, `resource-name`, `enable-search-bar`, `enable-filter-bar`, etc.) are
+ * inherited but have no effect because the grid is always hidden.
+ *
+ * **Defaults that differ from `entity-management`:**
+ * - `modalPosition` defaults to `'centre'` (entity-management defaults to `'right'`)
+ * - `crudMenuPosition` defaults to `'top'` (entity-management defaults to `'column'`)
+ *
+ * @example
+ * Minimal usage — form fields are auto-generated from the event schema:
+ * ```html
+ * <smart-form-modal
+ *   event="EVENT_TRADE_INSERT"
+ *   entity-label="Trade"
+ * ></smart-form-modal>
+ * ```
+ *
+ * @example
+ * Custom action label with styled button via CSS part:
+ * ```html
+ * <smart-form-modal
+ *   event="EVENT_PRICE_REJECT"
+ *   button-label="Reject Price"
+ *   success-notification-title="Price Rejected"
+ *   success-notification-body="The price was successfully rejected."
+ * ></smart-form-modal>
+ * ```
+ * ```css
+ * smart-form-modal::part(create-button) {
+ *   background-color: #d32f2f;
+ *   color: #fff;
+ * }
+ * ```
+ *
+ * @example
+ * Controlled form layout via `formUiSchema` property binding:
+ * ```html
+ * <smart-form-modal
+ *   event="EVENT_COUNTERPARTY_INSERT"
+ *   entity-label="Counterparty"
+ *   :formUiSchema="${() => myUiSchema}"
+ * ></smart-form-modal>
+ * ```
+ *
+ * @example
+ * Confirmation dialog before submit:
+ * ```html
+ * <smart-form-modal
+ *   event="EVENT_COUNTERPARTY_INSERT"
+ *   entity-label="Counterparty"
+ *   confirmation-message="Are you sure you want to submit?"
+ * ></smart-form-modal>
+ * ```
+ *
+ * @example
+ * Read-only view mode:
+ * ```html
+ * <smart-form-modal
+ *   event="EVENT_TRADE_INSERT"
+ *   entity-label="Trade"
+ *   readonly
+ * ></smart-form-modal>
+ * ```
+ *
+ * @csspart create-button - The trigger button that opens the modal. Style via `::part(create-button)`.
+ *
+ * @fires submit-success - Fired when the form is submitted successfully.
+ * @fires submit-failure - Fired when the form submission returns an error.
+ *
+ * @public
  */
 export declare class SmartFormModal extends EntityManagement {
+    /** @internal */
     gridVisible: boolean;
+    /** @internal */
+    modalPosition: 'centre' | 'left' | 'right';
+    /** @internal */
+    crudMenuPosition: CrudMenuPosition;
+    /**
+     * The Genesis event handler that processes the form submission.
+     *
+     * @remarks
+     * Alias for `createEvent`. Prefer `event` when using `smart-form-modal` — it reads more
+     * naturally for single-action components where the CRUD framing of `createEvent` does not apply.
+     *
+     * @example
+     * ```html
+     * <smart-form-modal event="EVENT_TRADE_INSERT"></smart-form-modal>
+     * ```
+     * @public
+     */
+    event: string;
+    eventChanged(_: string, next: string): void;
+    /**
+     * Label appended to the default button text, producing "Add {entity-label}".
+     *
+     * @remarks
+     * Re-declares the inherited `entityLabel` attr explicitly so FAST observes it on this element.
+     * Has no effect when `button-label` is also set — `button-label` takes full precedence.
+     *
+     * @example
+     * ```html
+     * <smart-form-modal event="EVENT_TRADE_INSERT" entity-label="Trade"></smart-form-modal>
+     * ```
+     * @public
+     */
+    entityLabel: string;
+    /**
+     * UI schema that controls the layout and visibility of form fields.
+     *
+     * @remarks
+     * Alias for `createFormUiSchema`. Must be set as a property binding (`:formUiSchema`) since it
+     * accepts a `UiSchema` object, not a plain string attribute.
+     *
+     * When omitted, the form is auto-generated from the event's server-side schema.
+     *
+     * @example
+     * ```html
+     * <smart-form-modal
+     *   event="EVENT_COUNTERPARTY_INSERT"
+     *   :formUiSchema="${() => ({
+     *     type: 'VerticalLayout',
+     *     elements: [
+     *       { type: 'Control', scope: '#/properties/NAME' },
+     *       { type: 'Control', scope: '#/properties/ENABLED' },
+     *     ],
+     *   })}"
+     * ></smart-form-modal>
+     * ```
+     * @public
+     */
+    formUiSchema: UiSchema;
+    formUiSchemaChanged(_: UiSchema, next: UiSchema): void;
+    /**
+     * Text displayed on the trigger button and as the modal title.
+     *
+     * @remarks
+     * Alias for `create-label`. When set, the default "Add {entityLabel}" text is replaced
+     * entirely and the `+` icon is hidden so the label stands alone.
+     *
+     * @example
+     * ```html
+     * <smart-form-modal button-label="Reject Price"></smart-form-modal>
+     * ```
+     * @public
+     */
+    buttonLabel: string;
+    buttonLabelChanged(_: string, next: string): void;
 }
 //# sourceMappingURL=smartFormModal.d.ts.map

package/dist/dts/entities/smartFormModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"smartFormModal.d.ts","sourceRoot":"","sources":["../../../src/entities/smartFormModal.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAG9C;;;;GAIG;AACH,qBAwBa,cAAe,SAAQ,gBAAgB;IAClD,WAAW,UAAS;CACrB"}
+{"version":3,"file":"smartFormModal.d.ts","sourceRoot":"","sources":["../../../src/entities/smartFormModal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAI9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgGG;AACH,qBAmDa,cAAe,SAAQ,gBAAgB;IAClD,gBAAgB;IAChB,WAAW,UAAS;IACpB,gBAAgB;IAChB,aAAa,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAY;IACtD,gBAAgB;IAChB,gBAAgB,EAAE,gBAAgB,CAAwB;IAE1D;;;;;;;;;;;;OAYG;IAC2B,KAAK,EAAE,MAAM,CAAC;IAC5C,YAAY,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM;IAIpC;;;;;;;;;;;;OAYG;IACkC,WAAW,EAAE,MAAM,CAAC;IAEzD;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACS,YAAY,EAAE,QAAQ,CAAC;IACnC,mBAAmB,CAAC,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ;IAI/C;;;;;;;;;;;;OAYG;IACkC,WAAW,EAAE,MAAM,CAAC;IACzD,kBAAkB,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM;CAG3C"}

package/dist/dts/react.d.ts

@@ -62,13 +62,13 @@ export declare const SmartFormModal: React.ForwardRefExoticComponent<
   React.PropsWithChildren<
     Omit<PublicOf<SmartFormModalWC>, 'children' | 'style'> &
     HTMLWCProps & {
+      onSubmitSuccess?: (event: CustomEvent<unknown>) => void;
+      onSubmitFailure?: (event: CustomEvent<unknown>) => void;
       onRequestChanged?: (event: CustomEvent<unknown>) => void;
       onCriteriaChanged?: (event: CustomEvent<unknown>) => void;
       onCreateEntity?: (event: CustomEvent<unknown>) => void;
       onEditEntity?: (event: CustomEvent<unknown>) => void;
       onDeleteEntity?: (event: CustomEvent<unknown>) => void;
-      onSubmitFailure?: (event: CustomEvent<unknown>) => void;
-      onSubmitSuccess?: (event: CustomEvent<unknown>) => void;
       onRowClick?: (event: CustomEvent<unknown>) => void;
       onRowDblClick?: (event: CustomEvent<unknown>) => void;
       onRowSelected?: (event: CustomEvent<unknown>) => void;

package/dist/esm/entities/entities.js

@@ -350,7 +350,7 @@ let EntityManagement = class EntityManagement extends LifecycleMixin(GenesisElem
     getTitleBasedOnActionOrType(actionOrType) {
         switch (actionOrType) {
             case ModalFormType.Create:
-                return `Add ${this.entityLabel || ''}`;
+                return this.createLabel || `Add ${this.entityLabel || ''}`;
             case ModalFormType.Update:
                 return `Edit ${this.entityLabel || ''}`;
             case CrudAction.Delete:
@@ -1016,6 +1016,7 @@ let EntityManagement = class EntityManagement extends LifecycleMixin(GenesisElem
      * @internal
      */
     handleNotify(type, requestError) {
+        var _a, _b;
         const notificationCloseTimeout = 5000;
         if (requestError) {
             logger.error(requestError);
@@ -1032,9 +1033,13 @@ let EntityManagement = class EntityManagement extends LifecycleMixin(GenesisElem
         else {
             const label = this.entityLabel ? this.entityLabel : 'Entity';
             const titleAndBody = getActionNotificationTitleAndBody(type, label);
-            showNotification(Object.assign(Object.assign({}, titleAndBody), { config: {
+            showNotification({
+                title: (_a = this.successNotificationTitle) !== null && _a !== void 0 ? _a : titleAndBody.title,
+                body: (_b = this.successNotificationBody) !== null && _b !== void 0 ? _b : titleAndBody.body,
+                config: {
                     toast: { type: 'success', autoClose: true, closeTimeout: notificationCloseTimeout },
-                } }), this.prefix);
+                },
+            }, this.prefix);
         }
     }
     /**
@@ -1215,12 +1220,21 @@ __decorate([
 __decorate([
     observable
 ], EntityManagement.prototype, "errorNotificationConfig", void 0);
+__decorate([
+    attr({ attribute: 'success-notification-title' })
+], EntityManagement.prototype, "successNotificationTitle", void 0);
+__decorate([
+    attr({ attribute: 'success-notification-body' })
+], EntityManagement.prototype, "successNotificationBody", void 0);
 __decorate([
     attr
 ], EntityManagement.prototype, "title", void 0);
 __decorate([
     attr
 ], EntityManagement.prototype, "entityLabel", void 0);
+__decorate([
+    attr({ attribute: 'create-label' })
+], EntityManagement.prototype, "createLabel", void 0);
 __decorate([
     attr({ mode: 'boolean', attribute: 'async-add' })
 ], EntityManagement.prototype, "asyncAdd", void 0);

package/dist/esm/entities/entities.template.js

@@ -27,8 +27,8 @@ const customActionButtonTemplate = (prefix, position) => html `
  */
 const addButtonTemplate = (prefix) => html `
   ${when((x) => x.createEvent, html `
-      <${prefix}-button class="crud-button" appearance="neutral" @click=${(x) => x.createEntity()}>
-        <${prefix}-icon size="lg" name="plus"></${prefix}-icon>
+      <${prefix}-button part="create-button" class="crud-button" appearance="neutral" @click=${(x) => x.createEntity()}>
+        ${when((x) => !x.createLabel, html `<${prefix}-icon size="lg" name="plus"></${prefix}-icon>`)}
         ${(x) => x.getTitleBasedOnActionOrType(ModalFormType.Create)}
       </${prefix}-button>
     `)}
@@ -71,13 +71,13 @@ export const crudButtonsTemplate = (prefix, position) => html `
                 ${addButtonTemplate(prefix)}
                 ${when((x) => x.crudMenuPosition !== CrudMenuPosition.Column, html `
                     ${when((x) => x.updateEvent && !x.hideEdit, html `
-                      <${prefix}-button class="crud-button" appearance="neutral" title="Select an item from the grid to enable editing" @click=${(x, y) => x.emitCrud('edit')} disabled=${(x) => (x.hasSelectedEntity ? null : 'disabled')}>
+                      <${prefix}-button part="edit-button" class="crud-button" appearance="neutral" title="Select an item from the grid to enable editing" @click=${(x, y) => x.emitCrud('edit')} disabled=${(x) => (x.hasSelectedEntity ? null : 'disabled')}>
                         <${prefix}-icon size="lg" name="pen"></${prefix}-icon>
                           ${(x) => x.getTitleBasedOnActionOrType(ModalFormType.Update)}
                       </${prefix}-button>
                       `)}
                     ${when((x) => x.deleteEvent && !x.hideDelete, html `
-                        <${prefix}-button class="crud-button" appearance="neutral" title="Select an item from the grid to enable deleting" @click=${(x, y) => x.emitCrud('delete')} disabled=${(x) => (x.hasSelectedEntity ? null : 'disabled')}>
+                        <${prefix}-button part="delete-button" class="crud-button" appearance="neutral" title="Select an item from the grid to enable deleting" @click=${(x, y) => x.emitCrud('delete')} disabled=${(x) => (x.hasSelectedEntity ? null : 'disabled')}>
                           <${prefix}-icon size="lg" name="trash-alt"></${prefix}-icon>
                           ${(x) => x.getTitleBasedOnActionOrType(CrudAction.Delete)}
                         </${prefix}-button>

package/dist/esm/entities/smartFormModal.js

@@ -1,27 +1,155 @@
 import { __decorate } from "tslib";
-import { css, customElement } from '@genesislcap/web-core';
+import { attr, css, customElement, observable } from '@genesislcap/web-core';
+import { CrudMenuPosition } from '../types';
 import { EntityManagement } from './entities';
 import { styles } from './entities.styles';
 import { template } from './entities.template';
 /**
- * The Smart Form Modal element. Allows to open a modal with an auto-generated form based
- * on the resource schema.
- * @alpha
+ * A focused form dialog component that renders a single trigger button which opens a modal
+ * containing an auto-generated form.
+ *
+ * @remarks
+ * `smart-form-modal` is a trimmed-down variant of {@link EntityManagement} intended for
+ * single-action use cases — approval submissions, bespoke inserts —
+ * where you want a button that opens a form modal without the accompanying data grid.
+ *
+ * The component inherits the full `entity-management` API but exposes a purpose-fit surface
+ * of its own:
+ *
+ * | `smart-form-modal` attr | Underlying property | Notes |
+ * |---|---|---|
+ * | `event` | `createEvent` | The Genesis event handler that processes the form submission |
+ * | `button-label` | `createLabel` | Button and modal title text; replaces the default "Add {entityLabel}" |
+ * | `form-ui-schema` (`:formUiSchema`) | `createFormUiSchema` | UI schema passed as a property binding |
+ * | `success-notification-title` | — | Overrides the toast title shown on successful submit |
+ * | `success-notification-body` | — | Overrides the toast body shown on successful submit |
+ *
+ * The underlying `entity-management` attributes (`createEvent`, `createFormUiSchema`,
+ * `create-label`, `confirmation-message`, `default-entity-values`, `design-system-prefix`,
+ * `set-approval-message`, `approval-message-label`, `form-renderers`,
+ * `additional-form-renderers`, `readonly`) all continue to work — the aliases listed above
+ * are simply the preferred vocabulary for this component.
+ *
+ * Attributes that belong to the grid (`updateEvent`, `deleteEvent`, `columns`, `gridOptions`,
+ * `datasource-config`, `resource-name`, `enable-search-bar`, `enable-filter-bar`, etc.) are
+ * inherited but have no effect because the grid is always hidden.
+ *
+ * **Defaults that differ from `entity-management`:**
+ * - `modalPosition` defaults to `'centre'` (entity-management defaults to `'right'`)
+ * - `crudMenuPosition` defaults to `'top'` (entity-management defaults to `'column'`)
+ *
+ * @example
+ * Minimal usage — form fields are auto-generated from the event schema:
+ * ```html
+ * <smart-form-modal
+ *   event="EVENT_TRADE_INSERT"
+ *   entity-label="Trade"
+ * ></smart-form-modal>
+ * ```
+ *
+ * @example
+ * Custom action label with styled button via CSS part:
+ * ```html
+ * <smart-form-modal
+ *   event="EVENT_PRICE_REJECT"
+ *   button-label="Reject Price"
+ *   success-notification-title="Price Rejected"
+ *   success-notification-body="The price was successfully rejected."
+ * ></smart-form-modal>
+ * ```
+ * ```css
+ * smart-form-modal::part(create-button) {
+ *   background-color: #d32f2f;
+ *   color: #fff;
+ * }
+ * ```
+ *
+ * @example
+ * Controlled form layout via `formUiSchema` property binding:
+ * ```html
+ * <smart-form-modal
+ *   event="EVENT_COUNTERPARTY_INSERT"
+ *   entity-label="Counterparty"
+ *   :formUiSchema="${() => myUiSchema}"
+ * ></smart-form-modal>
+ * ```
+ *
+ * @example
+ * Confirmation dialog before submit:
+ * ```html
+ * <smart-form-modal
+ *   event="EVENT_COUNTERPARTY_INSERT"
+ *   entity-label="Counterparty"
+ *   confirmation-message="Are you sure you want to submit?"
+ * ></smart-form-modal>
+ * ```
+ *
+ * @example
+ * Read-only view mode:
+ * ```html
+ * <smart-form-modal
+ *   event="EVENT_TRADE_INSERT"
+ *   entity-label="Trade"
+ *   readonly
+ * ></smart-form-modal>
+ * ```
+ *
+ * @csspart create-button - The trigger button that opens the modal. Style via `::part(create-button)`.
+ *
+ * @fires submit-success - Fired when the form is submitted successfully.
+ * @fires submit-failure - Fired when the form submission returns an error.
+ *
+ * @public
  */
 let SmartFormModal = class SmartFormModal extends EntityManagement {
     constructor() {
         super(...arguments);
+        /** @internal */
         this.gridVisible = false;
+        /** @internal */
+        this.modalPosition = 'centre';
+        /** @internal */
+        this.crudMenuPosition = CrudMenuPosition.Top;
+    }
+    eventChanged(_, next) {
+        this.createEvent = next;
+    }
+    formUiSchemaChanged(_, next) {
+        this.createFormUiSchema = next;
+    }
+    buttonLabelChanged(_, next) {
+        this.createLabel = next;
     }
 };
+__decorate([
+    attr({ attribute: 'event' })
+], SmartFormModal.prototype, "event", void 0);
+__decorate([
+    attr({ attribute: 'entity-label' })
+], SmartFormModal.prototype, "entityLabel", void 0);
+__decorate([
+    observable
+], SmartFormModal.prototype, "formUiSchema", void 0);
+__decorate([
+    attr({ attribute: 'button-label' })
+], SmartFormModal.prototype, "buttonLabel", void 0);
 SmartFormModal = __decorate([
     customElement({
         name: 'smart-form-modal',
         template,
         styles: css `
     ${styles}
+    /*
+     * The modal variant renders a single trigger button through the shared grid
+     * header scaffolding, which is laid out as a right-aligned toolbar. For a
+     * single-action launcher there is no toolbar to preserve, so neutralise the
+     * inherited right-alignment and let the trigger fill its host/cell. Scoped to
+     * this component only — the shared styles keep the grid's right-aligned toolbar.
+     */
     :host {
       padding: 0;
+      /* was implicitly inline (only \`contain: content\` set) -> collapsed to content width */
+      display: block;
     }
 
     .container {
@@ -30,12 +158,30 @@ SmartFormModal = __decorate([
 
     :host::part(header) {
       padding: 0;
+      margin-left: 0;
+      width: 100%;
+    }
+
+    .search-container {
+      justify-content: stretch;
     }
 
     .crud-buttons-wrapper-column,
     .crud-buttons-wrapper-top {
       flex: 1;
       padding: 0;
+      width: 100%;
+      justify-content: stretch;
+    }
+
+    .crud-buttons-column,
+    .crud-buttons-top {
+      width: 100%;
+    }
+
+    [part~='create-button'] {
+      flex: 1 1 auto;
+      width: 100%;
     }
   `,
     })