@api-client/ui 0.5.57 → 0.6.0

package/build/src/modeling/internals/ApiModelingActionsScreen.js

@@ -0,0 +1,298 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { html, nothing } from 'lit';
+import { state } from 'lit/decorators.js';
+import { ApiModelingScreen } from './ApiModelingScreen.js';
+let ApiModelingActionsScreen = (() => {
+    let _classSuper = ApiModelingScreen;
+    let _hasDomain_decorators;
+    let _hasDomain_initializers = [];
+    let _hasDomain_extraInitializers = [];
+    let _exposed_decorators;
+    let _exposed_initializers = [];
+    let _exposed_extraInitializers = [];
+    return class ApiModelingActionsScreen extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _hasDomain_decorators = [state()];
+            _exposed_decorators = [state()];
+            __esDecorate(this, null, _hasDomain_decorators, { kind: "accessor", name: "hasDomain", static: false, private: false, access: { has: obj => "hasDomain" in obj, get: obj => obj.hasDomain, set: (obj, value) => { obj.hasDomain = value; } }, metadata: _metadata }, _hasDomain_initializers, _hasDomain_extraInitializers);
+            __esDecorate(this, null, _exposed_decorators, { kind: "accessor", name: "exposed", static: false, private: false, access: { has: obj => "exposed" in obj, get: obj => obj.exposed, set: (obj, value) => { obj.exposed = value; } }, metadata: _metadata }, _exposed_initializers, _exposed_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #hasDomain_accessor_storage = __runInitializers(this, _hasDomain_initializers, false
+        /**
+         * The list of exposed entities **on the root level**.
+         */
+        );
+        /**
+         * A flag that determines whether the API has added a data domain.
+         */
+        get hasDomain() { return this.#hasDomain_accessor_storage; }
+        set hasDomain(value) { this.#hasDomain_accessor_storage = value; }
+        #exposed_accessor_storage = (__runInitializers(this, _hasDomain_extraInitializers), __runInitializers(this, _exposed_initializers, []));
+        /**
+         * The list of exposed entities **on the root level**.
+         */
+        get exposed() { return this.#exposed_accessor_storage; }
+        set exposed(value) { this.#exposed_accessor_storage = value; }
+        handleModelChange(model) {
+            this.hasDomain = false;
+            this.exposed = [];
+            if (!model) {
+                return;
+            }
+            if (!model.domain) {
+                return;
+            }
+            this.hasDomain = true;
+            this.exposed = model.exposes.filter((expose) => expose.isRoot);
+        }
+        handleDomainChange() {
+            // TODO: this is too much for a model change, but temporary we will re-render the screen on any model change
+            // until we figure out how to expose a new entity to the API and capture only that change.
+            this.handleModelChange(this.model);
+            this.requestUpdate();
+        }
+        /**
+         * A handler for the "Add data" button click.
+         * It dispatches the `exposeentity` event to notify the parent component that the user wants to expose an entity.
+         */
+        handleAddDataClick() {
+            this.dispatchEvent(new Event('exposed-new', {
+                bubbles: true,
+                cancelable: true,
+                composed: true,
+            }));
+        }
+        /**
+         * A handler for the "Remove action" button click.
+         * It removes the action from the model and updates the exposed list.
+         * @param event The event object.
+         */
+        handleRemoveAction(e) {
+            const card = e.currentTarget;
+            const id = card.domainKey;
+            if (!id) {
+                return;
+            }
+            this.dispatchEvent(new CustomEvent('exposed-remove', {
+                bubbles: true,
+                cancelable: true,
+                composed: true,
+                detail: {
+                    exposedId: id,
+                },
+            }));
+        }
+        /**
+         * Handles the action selection event.
+         * It dispatches the `editaction` event to notify the parent component that the user wants to edit an action.
+         * @param e The event object.
+         */
+        handleActionSelect(e) {
+            const card = e.currentTarget;
+            const id = card.domainKey;
+            if (!id) {
+                return;
+            }
+            this.dispatchEvent(new CustomEvent('action-edit', {
+                bubbles: true,
+                cancelable: true,
+                composed: true,
+                detail: {
+                    exposedId: id,
+                    kind: e.detail.kind,
+                },
+            }));
+        }
+        handleEditAction(e) {
+            const card = e.currentTarget;
+            const id = card.domainKey;
+            if (!id) {
+                return;
+            }
+            this.dispatchEvent(new CustomEvent('exposed-edit', {
+                bubbles: true,
+                cancelable: true,
+                composed: true,
+                detail: {
+                    exposedId: id,
+                },
+            }));
+        }
+        render() {
+            const model = this.model;
+            if (!model) {
+                return nothing;
+            }
+            return html `
+      <div class="config-section horizontal center">
+        <div class="section-header">
+          <h2 class="headline-medium">API Actions</h2>
+          <p class="body-medium">
+            You define your API logic by selecting data objects you want to use in your API and adding predefined
+            actions to these data.
+          </p>
+        </div>
+        <ui-button @click="${this.handleAddDataClick}">Add data</ui-button>
+      </div>
+      ${this.hasDomain ? this.renderContent(model) : html `<p>No data domain selected.</p>`}
+    `;
+        }
+        renderContent(model) {
+            if (!this.exposed.length) {
+                return this.renderEmptyView();
+            }
+            return html `<div class="exposed-canvas">
+      ${this.exposed.map((expose) => this.renderExposedPath(model, expose))}
+    </div>`;
+        }
+        renderEmptyView() {
+            return html `
+      <section class="empty-screen">
+        <div class="icon-wrapper">
+          <ui-icon class="icon" icon="api"></ui-icon>
+        </div>
+        <p class="empty-message body-large">Find your API logic here</p>
+        <p class="empty-message body-medium">Add a data entity to define your API behavior.</p>
+      </section>
+    `;
+        }
+        renderExposedPath(model, rootExpose) {
+            // Render the root expose and all its nested children (by parent key) in a single row.
+            // Use the model.exposes list as the source of truth for child relationships.
+            const allExposes = model.exposes ?? [];
+            const row = this.renderExposeTree(model, rootExpose, allExposes);
+            return html `<div class="exposure-row">${row}</div>`;
+        }
+        /**
+         * Recursively render an expose and its children. Shows entity name only.
+         * The model guarantees no infinite cycles, so the UI does not need to track visited nodes.
+         */
+        renderExposeTree(model, rootExpose, allExposes) {
+            if (!rootExpose || !rootExpose.key) {
+                return nothing;
+            }
+            // Render current entity
+            const current = this.renderEntity(model, rootExpose);
+            // Find children that reference this expose as parent.
+            const children = allExposes.filter((e) => e.parent?.key === rootExpose.key);
+            // If no children, render just the entity
+            if (!children.length) {
+                return html `<div class="expose-node inline">${current}</div>`;
+            }
+            // Render current entity and stack children vertically. Each child row shows
+            // the child and its inline descendants (classic tree view).
+            return html `${current}
+      <div class="children-list">
+        ${children.map((child) => html `
+            <div class="child-row">
+              <span class="expose-sep">→</span>
+              ${this.renderExposeTree(model, child, allExposes)}
+            </div>
+          `)}
+      </div>`;
+            // <!-- ${this.renderExposeInline(model, child, allExposes)} -->
+        }
+        /**
+         * Render a node and all its descendants inline (used for child rows).
+         */
+        renderExposeInline(model, expose, allExposes) {
+            if (!expose || !expose.key) {
+                return nothing;
+            }
+            const current = this.renderEntity(model, expose);
+            const children = allExposes.filter((e) => {
+                const parentRef = e.parent;
+                const parentKey = parentRef?.key;
+                return parentKey === expose.key;
+            });
+            if (!children.length) {
+                return html `${current}`;
+            }
+            return html `${current}${children.map((child) => html `
+        <span class="expose-sep">→</span>
+        ${this.renderExposeInline(model, child, allExposes)}
+      `)}`;
+        }
+        renderEntity(model, expose) {
+            const entity = model.domain?.findEntity(expose.entity.key, expose.entity.domain);
+            if (!entity) {
+                return this.renderMissingEntity(expose);
+            }
+            return html `<api-modeling-entity-card
+      .model=${model}
+      .domainKey=${expose.key}
+      ?showCollectionActions="${expose.hasCollection}"
+      @select="${this.handleActionSelect}"
+      @edit="${this.handleEditAction}"
+      @remove="${this.handleRemoveAction}"
+    ></api-modeling-entity-card>`;
+        }
+        renderMissingEntity(expose) {
+            return html `<div class="entity missing-entity">
+      <span class="entity-missing-label">Missing entity:</span>
+      <span class="api-action-entity">${expose.key}</span>
+    </div>`;
+        }
+        renderEntityActions(expose) {
+            const hasActions = !!expose.actions.length;
+            if (!hasActions) {
+                return html `<div class="no-actions">
+        <p class="body-medium">No API actions are defined for this object.</p>
+      </div>`;
+            }
+            return html `${this.renderCollectionActions(expose)}${this.renderResourceActions(expose)}`;
+        }
+        renderCollectionActions(expose) {
+            const actions = expose.actions.filter((action) => ['create', 'list', 'search'].includes(action.kind));
+            const hasActions = !!actions.length;
+            const templates = [];
+            if (!hasActions) {
+                templates.push(html `<p class="body-medium">No API actions are defined for this collection.</p>`);
+            }
+            else {
+                templates.push(...actions.map((action) => this.renderEntityAction(action)));
+            }
+            return html `<div class="actions-group">
+      <div class="label-small">Collection</div>
+      ${templates}
+    </div>`;
+        }
+        renderResourceActions(expose) {
+            const actions = expose.actions.filter((action) => ['read', 'update', 'delete'].includes(action.kind));
+            const hasActions = !!actions.length;
+            const templates = [];
+            if (!hasActions) {
+                templates.push(html `<p class="body-medium">No API actions are defined for this resource.</p>`);
+            }
+            else {
+                templates.push(...actions.map((action) => this.renderEntityAction(action)));
+            }
+            return html `<div class="actions-group">
+      <div class="label-small">Resource</div>
+      ${templates}
+    </div>`;
+        }
+        renderEntityAction(action) {
+            return html `<ui-chip type="assist">${action.kind}</ui-chip>`;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _exposed_extraInitializers);
+        }
+    };
+})();
+/**
+ * A screen that allows the user to expose data entities as a root level actions
+ * and configure their properties:
+ * - Collection actions (create, list, search)
+ * - Resource actions (read, update, delete)
+ *
+ * @fires exposed-new - When the user wants to expose an entity.
+ * @fires action-edit - When the user wants to edit an action.
+ * @fires exposed-edit - When the user wants to edit an exposed entity.
+ * @fires exposed-remove - When the user wants to remove an exposed entity.
+ */
+export default ApiModelingActionsScreen;
+//# sourceMappingURL=ApiModelingActionsScreen.js.map

package/build/src/modeling/internals/ApiModelingActionsScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApiModelingActionsScreen.js","sourceRoot":"","sources":["../../../../src/modeling/internals/ApiModelingActionsScreen.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAuB,OAAO,EAAE,MAAM,KAAK,CAAA;AAGxD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;;sBAgCJ,iBAAiB;;;;;;;iBAAlD,wBAAyB,SAAQ,WAAiB;;;qCAIpE,KAAK,EAAE;mCAKP,KAAK,EAAE;YALC,gLAAS,SAAS,6BAAT,SAAS,6FAAQ;YAK1B,0KAAS,OAAO,6BAAP,OAAO,yFAAsB;;;QALtC,+EAAqB,KAAK;QAEnC;;WAEG;UAJgC;QAHnC;;WAEG;QACM,IAAS,SAAS,+CAAQ;QAA1B,IAAS,SAAS,qDAAQ;QAK1B,mIAAoC,EAAE,GAAA;QAH/C;;WAEG;QACM,IAAS,OAAO,6CAAsB;QAAtC,IAAS,OAAO,mDAAsB;QAErC,iBAAiB,CAAC,KAA2B;YACrD,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;YACtB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAA;YACjB,IAAI,CAAC,KAAK,EAAE,CAAC;gBACX,OAAM;YACR,CAAC;YAED,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;gBAClB,OAAM;YACR,CAAC;YACD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA;YACrB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;QAChE,CAAC;QAEkB,kBAAkB;YACnC,4GAA4G;YAC5G,0FAA0F;YAC1F,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YAClC,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC;QAED;;;WAGG;QACO,kBAAkB;YAC1B,IAAI,CAAC,aAAa,CAChB,IAAI,KAAK,CAAC,aAAa,EAAE;gBACvB,OAAO,EAAE,IAAI;gBACb,UAAU,EAAE,IAAI;gBAChB,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAA;QACH,CAAC;QAED;;;;WAIG;QACO,kBAAkB,CAAC,CAAQ;YACnC,MAAM,IAAI,GAAG,CAAC,CAAC,aAA6C,CAAA;YAC5D,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,CAAA;YACzB,IAAI,CAAC,EAAE,EAAE,CAAC;gBACR,OAAM;YACR,CAAC;YACD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAA+B,gBAAgB,EAAE;gBAC9D,OAAO,EAAE,IAAI;gBACb,UAAU,EAAE,IAAI;gBAChB,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE;oBACN,SAAS,EAAE,EAAE;iBACd;aACF,CAAC,CACH,CAAA;QACH,CAAC;QAED;;;;WAIG;QACO,kBAAkB,CAAC,CAAgC;YAC3D,MAAM,IAAI,GAAG,CAAC,CAAC,aAA6C,CAAA;YAC5D,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,CAAA;YACzB,IAAI,CAAC,EAAE,EAAE,CAAC;gBACR,OAAM;YACR,CAAC;YACD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAwB,aAAa,EAAE;gBACpD,OAAO,EAAE,IAAI;gBACb,UAAU,EAAE,IAAI;gBAChB,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE;oBACN,SAAS,EAAE,EAAE;oBACb,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI;iBACpB;aACF,CAAC,CACH,CAAA;QACH,CAAC;QAES,gBAAgB,CAAC,CAAQ;YACjC,MAAM,IAAI,GAAG,CAAC,CAAC,aAA6C,CAAA;YAC5D,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,CAAA;YACzB,IAAI,CAAC,EAAE,EAAE,CAAC;gBACR,OAAM;YACR,CAAC;YACD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAA+B,cAAc,EAAE;gBAC5D,OAAO,EAAE,IAAI;gBACb,UAAU,EAAE,IAAI;gBAChB,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE;oBACN,SAAS,EAAE,EAAE;iBACd;aACF,CAAC,CACH,CAAA;QACH,CAAC;QAEQ,MAAM;YACb,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;YACxB,IAAI,CAAC,KAAK,EAAE,CAAC;gBACX,OAAO,OAAO,CAAA;YAChB,CAAC;YACD,OAAO,IAAI,CAAA;;;;;;;;;6BASc,IAAI,CAAC,kBAAkB;;QAE5C,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,iCAAiC;KACrF,CAAA;QACH,CAAC;QAEO,aAAa,CAAC,KAAe;YACnC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;gBACzB,OAAO,IAAI,CAAC,eAAe,EAAE,CAAA;YAC/B,CAAC;YACD,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;WAChE,CAAA;QACT,CAAC;QAEO,eAAe;YACrB,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAA;QACH,CAAC;QAEO,iBAAiB,CAAC,KAAe,EAAE,UAAyB;YAClE,sFAAsF;YACtF,6EAA6E;YAC7E,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,IAAI,EAAE,CAAA;YACtC,MAAM,GAAG,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,UAAU,EAAE,UAAU,CAAC,CAAA;YAChE,OAAO,IAAI,CAAA,6BAA6B,GAAG,QAAQ,CAAA;QACrD,CAAC;QAED;;;WAGG;QACK,gBAAgB,CACtB,KAAe,EACf,UAAyB,EACzB,UAA2B;YAE3B,IAAI,CAAC,UAAU,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC;gBACnC,OAAO,OAAO,CAAA;YAChB,CAAC;YAED,wBAAwB;YACxB,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAA;YAEpD,sDAAsD;YACtD,MAAM,QAAQ,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,KAAK,UAAU,CAAC,GAAG,CAAC,CAAA;YAE3E,yCAAyC;YACzC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;gBACrB,OAAO,IAAI,CAAA,mCAAmC,OAAO,QAAQ,CAAA;YAC/D,CAAC;YAED,4EAA4E;YAC5E,4DAA4D;YAC5D,OAAO,IAAI,CAAA,GAAG,OAAO;;UAEf,QAAQ,CAAC,GAAG,CACZ,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;;gBAGT,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC;;WAEpD,CACF;aACI,CAAA;YACT,gEAAgE;QAClE,CAAC;QAED;;WAEG;QACK,kBAAkB,CACxB,KAAe,EACf,MAAqB,EACrB,UAA2B;YAE3B,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC;gBAC3B,OAAO,OAAO,CAAA;YAChB,CAAC;YACD,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;YAEhD,MAAM,QAAQ,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE;gBACvC,MAAM,SAAS,GAAI,CAA8C,CAAC,MAAM,CAAA;gBACxE,MAAM,SAAS,GAAG,SAAS,EAAE,GAAG,CAAA;gBAChC,OAAO,SAAS,KAAK,MAAM,CAAC,GAAG,CAAA;YACjC,CAAC,CAAC,CAAA;YAEF,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;gBACrB,OAAO,IAAI,CAAA,GAAG,OAAO,EAAE,CAAA;YACzB,CAAC;YAED,OAAO,IAAI,CAAA,GAAG,OAAO,GAAG,QAAQ,CAAC,GAAG,CAClC,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;UAEX,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC;OACpD,CACF,EAAE,CAAA;QACL,CAAC;QAEO,YAAY,CAAC,KAAe,EAAE,MAAqB;YACzD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;YAChF,IAAI,CAAC,MAAM,EAAE,CAAC;gBACZ,OAAO,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAA;YACzC,CAAC;YACD,OAAO,IAAI,CAAA;eACA,KAAK;mBACD,MAAM,CAAC,GAAG;gCACG,MAAM,CAAC,aAAa;iBACnC,IAAI,CAAC,kBAAkB;eACzB,IAAI,CAAC,gBAAgB;iBACnB,IAAI,CAAC,kBAAkB;iCACP,CAAA;QAC/B,CAAC;QAEO,mBAAmB,CAAC,MAAqB;YAC/C,OAAO,IAAI,CAAA;;wCAEyB,MAAM,CAAC,GAAG;WACvC,CAAA;QACT,CAAC;QAEO,mBAAmB,CAAC,MAAqB;YAC/C,MAAM,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAA;YAC1C,IAAI,CAAC,UAAU,EAAE,CAAC;gBAChB,OAAO,IAAI,CAAA;;aAEJ,CAAA;YACT,CAAC;YACD,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,uBAAuB,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,CAAA;QAC3F,CAAC;QAEO,uBAAuB,CAAC,MAAqB;YACnD,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;YACrG,MAAM,UAAU,GAAG,CAAC,CAAC,OAAO,CAAC,MAAM,CAAA;YACnC,MAAM,SAAS,GAAqB,EAAE,CAAA;YACtC,IAAI,CAAC,UAAU,EAAE,CAAC;gBAChB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,4EAA4E,CAAC,CAAA;YAClG,CAAC;iBAAM,CAAC;gBACN,SAAS,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;YAC7E,CAAC;YACD,OAAO,IAAI,CAAA;;QAEP,SAAS;WACN,CAAA;QACT,CAAC;QAEO,qBAAqB,CAAC,MAAqB;YACjD,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;YACrG,MAAM,UAAU,GAAG,CAAC,CAAC,OAAO,CAAC,MAAM,CAAA;YACnC,MAAM,SAAS,GAAqB,EAAE,CAAA;YACtC,IAAI,CAAC,UAAU,EAAE,CAAC;gBAChB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,0EAA0E,CAAC,CAAA;YAChG,CAAC;iBAAM,CAAC;gBACN,SAAS,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;YAC7E,CAAC;YACD,OAAO,IAAI,CAAA;;QAEP,SAAS;WACN,CAAA;QACT,CAAC;QAEO,kBAAkB,CAAC,MAAiB;YAC1C,OAAO,IAAI,CAAA,0BAA0B,MAAM,CAAC,IAAI,YAAY,CAAA;QAC9D,CAAC;;;;;;;AAlTH;;;;;;;;;;GAUG;AACH,wCAwSC","sourcesContent":["import { html, type TemplateResult, nothing } from 'lit'\nimport { ExposedEntity, type ApiModel } from '@api-client/core/browser.js'\nimport type { ApiAction } from '@api-client/core/modeling/types.js'\nimport { state } from 'lit/decorators.js'\nimport { ApiModelingScreen } from './ApiModelingScreen.js'\nimport type ApiModelingEntityCardElement from './ApiModelingEntityCard.js'\n\nexport interface EditActionEventDetail {\n  /**\n   * The id of the exposed entity.\n   */\n  exposedId: string\n  /**\n   * The kind of operation to edit (list, read, delete, etc)\n   */\n  kind: string\n}\n\nexport interface EditExposedEntityEventDetail {\n  /**\n   * The id of the exposed entity.\n   */\n  exposedId: string\n}\n\n/**\n * A screen that allows the user to expose data entities as a root level actions\n * and configure their properties:\n * - Collection actions (create, list, search)\n * - Resource actions (read, update, delete)\n *\n * @fires exposed-new - When the user wants to expose an entity.\n * @fires action-edit - When the user wants to edit an action.\n * @fires exposed-edit - When the user wants to edit an exposed entity.\n * @fires exposed-remove - When the user wants to remove an exposed entity.\n */\nexport default class ApiModelingActionsScreen extends ApiModelingScreen {\n  /**\n   * A flag that determines whether the API has added a data domain.\n   */\n  @state() accessor hasDomain = false\n\n  /**\n   * The list of exposed entities **on the root level**.\n   */\n  @state() accessor exposed: ExposedEntity[] = []\n\n  protected handleModelChange(model: ApiModel | undefined): void {\n    this.hasDomain = false\n    this.exposed = []\n    if (!model) {\n      return\n    }\n\n    if (!model.domain) {\n      return\n    }\n    this.hasDomain = true\n    this.exposed = model.exposes.filter((expose) => expose.isRoot)\n  }\n\n  protected override handleDomainChange(): void {\n    // TODO: this is too much for a model change, but temporary we will re-render the screen on any model change\n    // until we figure out how to expose a new entity to the API and capture only that change.\n    this.handleModelChange(this.model)\n    this.requestUpdate()\n  }\n\n  /**\n   * A handler for the \"Add data\" button click.\n   * It dispatches the `exposeentity` event to notify the parent component that the user wants to expose an entity.\n   */\n  protected handleAddDataClick(): void {\n    this.dispatchEvent(\n      new Event('exposed-new', {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n      })\n    )\n  }\n\n  /**\n   * A handler for the \"Remove action\" button click.\n   * It removes the action from the model and updates the exposed list.\n   * @param event The event object.\n   */\n  protected handleRemoveAction(e: Event): void {\n    const card = e.currentTarget as ApiModelingEntityCardElement\n    const id = card.domainKey\n    if (!id) {\n      return\n    }\n    this.dispatchEvent(\n      new CustomEvent<EditExposedEntityEventDetail>('exposed-remove', {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          exposedId: id,\n        },\n      })\n    )\n  }\n\n  /**\n   * Handles the action selection event.\n   * It dispatches the `editaction` event to notify the parent component that the user wants to edit an action.\n   * @param e The event object.\n   */\n  protected handleActionSelect(e: CustomEvent<{ kind: string }>): void {\n    const card = e.currentTarget as ApiModelingEntityCardElement\n    const id = card.domainKey\n    if (!id) {\n      return\n    }\n    this.dispatchEvent(\n      new CustomEvent<EditActionEventDetail>('action-edit', {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          exposedId: id,\n          kind: e.detail.kind,\n        },\n      })\n    )\n  }\n\n  protected handleEditAction(e: Event): void {\n    const card = e.currentTarget as ApiModelingEntityCardElement\n    const id = card.domainKey\n    if (!id) {\n      return\n    }\n    this.dispatchEvent(\n      new CustomEvent<EditExposedEntityEventDetail>('exposed-edit', {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          exposedId: id,\n        },\n      })\n    )\n  }\n\n  override render(): TemplateResult | typeof nothing {\n    const model = this.model\n    if (!model) {\n      return nothing\n    }\n    return html`\n      <div class=\"config-section horizontal center\">\n        <div class=\"section-header\">\n          <h2 class=\"headline-medium\">API Actions</h2>\n          <p class=\"body-medium\">\n            You define your API logic by selecting data objects you want to use in your API and adding predefined\n            actions to these data.\n          </p>\n        </div>\n        <ui-button @click=\"${this.handleAddDataClick}\">Add data</ui-button>\n      </div>\n      ${this.hasDomain ? this.renderContent(model) : html`<p>No data domain selected.</p>`}\n    `\n  }\n\n  private renderContent(model: ApiModel): TemplateResult | typeof nothing {\n    if (!this.exposed.length) {\n      return this.renderEmptyView()\n    }\n    return html`<div class=\"exposed-canvas\">\n      ${this.exposed.map((expose) => this.renderExposedPath(model, expose))}\n    </div>`\n  }\n\n  private renderEmptyView(): TemplateResult | typeof nothing {\n    return html`\n      <section class=\"empty-screen\">\n        <div class=\"icon-wrapper\">\n          <ui-icon class=\"icon\" icon=\"api\"></ui-icon>\n        </div>\n        <p class=\"empty-message body-large\">Find your API logic here</p>\n        <p class=\"empty-message body-medium\">Add a data entity to define your API behavior.</p>\n      </section>\n    `\n  }\n\n  private renderExposedPath(model: ApiModel, rootExpose: ExposedEntity): TemplateResult | typeof nothing {\n    // Render the root expose and all its nested children (by parent key) in a single row.\n    // Use the model.exposes list as the source of truth for child relationships.\n    const allExposes = model.exposes ?? []\n    const row = this.renderExposeTree(model, rootExpose, allExposes)\n    return html`<div class=\"exposure-row\">${row}</div>`\n  }\n\n  /**\n   * Recursively render an expose and its children. Shows entity name only.\n   * The model guarantees no infinite cycles, so the UI does not need to track visited nodes.\n   */\n  private renderExposeTree(\n    model: ApiModel,\n    rootExpose: ExposedEntity,\n    allExposes: ExposedEntity[]\n  ): TemplateResult | typeof nothing {\n    if (!rootExpose || !rootExpose.key) {\n      return nothing\n    }\n\n    // Render current entity\n    const current = this.renderEntity(model, rootExpose)\n\n    // Find children that reference this expose as parent.\n    const children = allExposes.filter((e) => e.parent?.key === rootExpose.key)\n\n    // If no children, render just the entity\n    if (!children.length) {\n      return html`<div class=\"expose-node inline\">${current}</div>`\n    }\n\n    // Render current entity and stack children vertically. Each child row shows\n    // the child and its inline descendants (classic tree view).\n    return html`${current}\n      <div class=\"children-list\">\n        ${children.map(\n          (child) => html`\n            <div class=\"child-row\">\n              <span class=\"expose-sep\">→</span>\n              ${this.renderExposeTree(model, child, allExposes)}\n            </div>\n          `\n        )}\n      </div>`\n    // <!-- ${this.renderExposeInline(model, child, allExposes)} -->\n  }\n\n  /**\n   * Render a node and all its descendants inline (used for child rows).\n   */\n  private renderExposeInline(\n    model: ApiModel,\n    expose: ExposedEntity,\n    allExposes: ExposedEntity[]\n  ): TemplateResult | typeof nothing {\n    if (!expose || !expose.key) {\n      return nothing\n    }\n    const current = this.renderEntity(model, expose)\n\n    const children = allExposes.filter((e) => {\n      const parentRef = (e as unknown as { parent?: { key?: string } }).parent\n      const parentKey = parentRef?.key\n      return parentKey === expose.key\n    })\n\n    if (!children.length) {\n      return html`${current}`\n    }\n\n    return html`${current}${children.map(\n      (child) => html`\n        <span class=\"expose-sep\">→</span>\n        ${this.renderExposeInline(model, child, allExposes)}\n      `\n    )}`\n  }\n\n  private renderEntity(model: ApiModel, expose: ExposedEntity): TemplateResult {\n    const entity = model.domain?.findEntity(expose.entity.key, expose.entity.domain)\n    if (!entity) {\n      return this.renderMissingEntity(expose)\n    }\n    return html`<api-modeling-entity-card\n      .model=${model}\n      .domainKey=${expose.key}\n      ?showCollectionActions=\"${expose.hasCollection}\"\n      @select=\"${this.handleActionSelect}\"\n      @edit=\"${this.handleEditAction}\"\n      @remove=\"${this.handleRemoveAction}\"\n    ></api-modeling-entity-card>`\n  }\n\n  private renderMissingEntity(expose: ExposedEntity): TemplateResult {\n    return html`<div class=\"entity missing-entity\">\n      <span class=\"entity-missing-label\">Missing entity:</span>\n      <span class=\"api-action-entity\">${expose.key}</span>\n    </div>`\n  }\n\n  private renderEntityActions(expose: ExposedEntity): TemplateResult {\n    const hasActions = !!expose.actions.length\n    if (!hasActions) {\n      return html`<div class=\"no-actions\">\n        <p class=\"body-medium\">No API actions are defined for this object.</p>\n      </div>`\n    }\n    return html`${this.renderCollectionActions(expose)}${this.renderResourceActions(expose)}`\n  }\n\n  private renderCollectionActions(expose: ExposedEntity): TemplateResult {\n    const actions = expose.actions.filter((action) => ['create', 'list', 'search'].includes(action.kind))\n    const hasActions = !!actions.length\n    const templates: TemplateResult[] = []\n    if (!hasActions) {\n      templates.push(html`<p class=\"body-medium\">No API actions are defined for this collection.</p>`)\n    } else {\n      templates.push(...actions.map((action) => this.renderEntityAction(action)))\n    }\n    return html`<div class=\"actions-group\">\n      <div class=\"label-small\">Collection</div>\n      ${templates}\n    </div>`\n  }\n\n  private renderResourceActions(expose: ExposedEntity): TemplateResult {\n    const actions = expose.actions.filter((action) => ['read', 'update', 'delete'].includes(action.kind))\n    const hasActions = !!actions.length\n    const templates: TemplateResult[] = []\n    if (!hasActions) {\n      templates.push(html`<p class=\"body-medium\">No API actions are defined for this resource.</p>`)\n    } else {\n      templates.push(...actions.map((action) => this.renderEntityAction(action)))\n    }\n    return html`<div class=\"actions-group\">\n      <div class=\"label-small\">Resource</div>\n      ${templates}\n    </div>`\n  }\n\n  private renderEntityAction(action: ApiAction): TemplateResult {\n    return html`<ui-chip type=\"assist\">${action.kind}</ui-chip>`\n  }\n}\n"]}

package/build/src/modeling/internals/ApiModelingDescriptionScreen.d.ts

@@ -0,0 +1,40 @@
+import { type TemplateResult, nothing } from 'lit';
+import { ApiModelingScreen } from './ApiModelingScreen.js';
+import type { ApiModel } from '@api-client/core/browser.js';
+/**
+ * A screen for editing API description information.
+ * Used in API modeling.
+ */
+export default class ApiModelingDescriptionScreen extends ApiModelingScreen {
+    /**
+     * Whether a custom license name is being used.
+     */
+    protected accessor isCustomLicense: boolean;
+    /**
+     * Whether contact information is enabled.
+     */
+    protected accessor isContactEnabled: boolean;
+    protected handleModelChange(model: ApiModel | undefined): void;
+    /**
+     * Checks if the current license is a custom one and updates the state.
+     * @param model The current API model.
+     */
+    checkCustomLicense(model?: ApiModel | undefined): void;
+    /**
+     * Checks if contact information is available and updates the state.
+     * @param model The current API model.
+     */
+    checkContactEnabled(model?: ApiModel): void;
+    protected handleMetaChange(e: Event): void;
+    protected handleLicenseSelect(e: CustomEvent): void;
+    protected handleContactToggle(e: Event): void;
+    getLicenseUrl(name: string): string | undefined;
+    render(): TemplateResult | typeof nothing;
+    protected renderMetaFields(model: ApiModel): TemplateResult;
+    protected renderLegalFields(model: ApiModel): TemplateResult;
+    protected renderCustomLicenseName(model: ApiModel): TemplateResult;
+    protected renderLicenseUrl(model: ApiModel): TemplateResult;
+    protected renderContactSection(model: ApiModel): TemplateResult;
+    protected renderContactFields(model: ApiModel): TemplateResult;
+}
+//# sourceMappingURL=ApiModelingDescriptionScreen.d.ts.map

package/build/src/modeling/internals/ApiModelingDescriptionScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApiModelingDescriptionScreen.d.ts","sourceRoot":"","sources":["../../../../src/modeling/internals/ApiModelingDescriptionScreen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAI1D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAI3D;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,4BAA6B,SAAQ,iBAAiB;IACzE;;OAEG;IACM,SAAS,CAAC,QAAQ,CAAC,eAAe,UAAQ;IAEnD;;OAEG;IACM,SAAS,CAAC,QAAQ,CAAC,gBAAgB,UAAQ;IAEpD,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,QAAQ,GAAG,SAAS,GAAG,IAAI;IAK9D;;;OAGG;IACH,kBAAkB,CAAC,KAAK,GAAE,QAAQ,GAAG,SAAsB,GAAG,IAAI;IASlE;;;OAGG;IACH,mBAAmB,CAAC,KAAK,CAAC,EAAE,QAAQ,GAAG,IAAI;IAK3C,SAAS,CAAC,gBAAgB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAsD1C,SAAS,CAAC,mBAAmB,CAAC,CAAC,EAAE,WAAW,GAAG,IAAI;IA4BnD,SAAS,CAAC,mBAAmB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAkB7C,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IAatC,MAAM,IAAI,cAAc,GAAG,OAAO,OAAO;IAUlD,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,QAAQ,GAAG,cAAc;IAwC3D,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,QAAQ,GAAG,cAAc;IAuC5D,SAAS,CAAC,uBAAuB,CAAC,KAAK,EAAE,QAAQ,GAAG,cAAc;IAgBlE,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,QAAQ,GAAG,cAAc;IAgB3D,SAAS,CAAC,oBAAoB,CAAC,KAAK,EAAE,QAAQ,GAAG,cAAc;IAmB/D,SAAS,CAAC,mBAAmB,CAAC,KAAK,EAAE,QAAQ,GAAG,cAAc;CAqC/D"}