@api-client/ui 0.5.57 → 0.6.0

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

@@ -0,0 +1,384 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
+import { ApiEditor } from './ApiEditor.js';
+import { apiActionKindToIcon, apiActionKindToLabel } from '../lib/ui_mapping.js';
+import { renderHelp } from '../../help/render.js';
+let ApiModelingEntityEditor = (() => {
+    let _classSuper = ApiEditor;
+    let _exposed_decorators;
+    let _exposed_initializers = [];
+    let _exposed_extraInitializers = [];
+    let _entity_decorators;
+    let _entity_initializers = [];
+    let _entity_extraInitializers = [];
+    let _showCloseButton_decorators;
+    let _showCloseButton_initializers = [];
+    let _showCloseButton_extraInitializers = [];
+    return class ApiModelingEntityEditor extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _exposed_decorators = [state()];
+            _entity_decorators = [state()];
+            _showCloseButton_decorators = [property({ type: Boolean })];
+            __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);
+            __esDecorate(this, null, _entity_decorators, { kind: "accessor", name: "entity", static: false, private: false, access: { has: obj => "entity" in obj, get: obj => obj.entity, set: (obj, value) => { obj.entity = value; } }, metadata: _metadata }, _entity_initializers, _entity_extraInitializers);
+            __esDecorate(this, null, _showCloseButton_decorators, { kind: "accessor", name: "showCloseButton", static: false, private: false, access: { has: obj => "showCloseButton" in obj, get: obj => obj.showCloseButton, set: (obj, value) => { obj.showCloseButton = value; } }, metadata: _metadata }, _showCloseButton_initializers, _showCloseButton_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #exposed_accessor_storage = __runInitializers(this, _exposed_initializers, void 0);
+        /**
+         * Computed exposed entity being edited.
+         */
+        get exposed() { return this.#exposed_accessor_storage; }
+        set exposed(value) { this.#exposed_accessor_storage = value; }
+        #entity_accessor_storage = (__runInitializers(this, _exposed_extraInitializers), __runInitializers(this, _entity_initializers, void 0));
+        /**
+         * Computed domain entity that corresponds to the exposed entity being edited.
+         */
+        get entity() { return this.#entity_accessor_storage; }
+        set entity(value) { this.#entity_accessor_storage = value; }
+        #showCloseButton_accessor_storage = (__runInitializers(this, _entity_extraInitializers), __runInitializers(this, _showCloseButton_initializers, false));
+        /**
+         * When true, shows a close button in the editor header.
+         * @attribute
+         */
+        get showCloseButton() { return this.#showCloseButton_accessor_storage; }
+        set showCloseButton(value) { this.#showCloseButton_accessor_storage = value; }
+        setupModel(model, domainKey) {
+            this.exposed = undefined;
+            this.entity = undefined;
+            if (!model || !domainKey) {
+                return;
+            }
+            const exposed = model.exposes.find((exposed) => exposed.key === domainKey);
+            this.exposed = exposed;
+            if (!exposed) {
+                return;
+            }
+            const domain = model.domain;
+            if (!domain) {
+                return;
+            }
+            const entity = domain.findEntity(exposed.entity.key, exposed.entity.domain);
+            if (!entity) {
+                return;
+            }
+            this.entity = entity;
+        }
+        handleCloseButtonClick() {
+            this.dispatchEvent(new Event('close'));
+        }
+        handleCollectionPathChange(e) {
+            const { exposed } = this;
+            if (!exposed) {
+                return;
+            }
+            const input = e.target;
+            input.invalid = false;
+            try {
+                exposed.setCollectionPath(input.value);
+                this.notifyChange();
+            }
+            catch (e) {
+                input.invalid = true;
+                input.invalidText = e.message;
+            }
+        }
+        handleResourcePathChange(e) {
+            const { exposed } = this;
+            if (!exposed) {
+                return;
+            }
+            const input = e.target;
+            input.invalid = false;
+            try {
+                exposed.setResourcePath(input.value);
+                this.notifyChange();
+            }
+            catch (e) {
+                input.invalid = true;
+                input.invalidText = e.message;
+            }
+        }
+        handleActionToggle(e) {
+            const { exposed } = this;
+            if (!exposed) {
+                return;
+            }
+            const toggle = e.target;
+            const { name, checked } = toggle;
+            if (checked) {
+                this.addAction(name);
+            }
+            else {
+                this.removeAction(name);
+            }
+        }
+        removeAction(kind) {
+            const { exposed } = this;
+            if (!exposed) {
+                return;
+            }
+            const action = exposed.actions.findIndex((action) => action.kind === kind);
+            if (action === -1) {
+                return;
+            }
+            exposed.actions.splice(action, 1);
+            this.notifyChange();
+            this.requestUpdate();
+        }
+        addAction(kind) {
+            const { exposed } = this;
+            if (!exposed) {
+                return;
+            }
+            const existing = exposed.actions.find((action) => action.kind === kind);
+            if (existing) {
+                return;
+            }
+            let action;
+            switch (kind) {
+                case 'list':
+                    action = { kind: 'list', filterableFields: [], sortableFields: [], pagination: { kind: 'offset' } };
+                    break;
+                case 'read':
+                case 'create':
+                case 'delete':
+                    action = { kind };
+                    break;
+                case 'update':
+                    action = { kind: 'update', allowedMethods: ['PUT'] };
+                    break;
+                case 'search':
+                    action = { kind: 'search', fields: [] };
+                    break;
+                default:
+                    throw new Error(`Unsupported action kind: ${kind}`);
+            }
+            exposed.actions.push(action);
+            this.notifyChange();
+            this.requestUpdate();
+        }
+        render() {
+            if (!this.exposed || !this.entity) {
+                return nothing;
+            }
+            return html `<div class="container">
+      ${this.renderHeader(this.entity)} ${this.renderEndpointsConfiguration(this.exposed)}
+      ${this.renderActionsSection(this.exposed)}
+    </div>`;
+        }
+        /**
+         * Renders a template of the editor header.
+         * @param entity The related domain entity.
+         */
+        renderHeader(entity) {
+            return html `<div class="intro">
+      <div class="header">
+        <span class="headline-medium ">${entity.info.getLabel()}</span>
+        ${this.renderCloseButton()}
+      </div>
+      <div class="body-medium description">
+        Define the logic related to the data entity. It is an endpoint that will be exposed through the API after
+        attaching actions to it.
+      </div>
+    </div>`;
+        }
+        /**
+         * Renders the close button if the `showCloseButton` flag is set.
+         */
+        renderCloseButton() {
+            if (!this.showCloseButton) {
+                return nothing;
+            }
+            return html `<ui-icon-button
+      color="outlined"
+      class="close-button"
+      aria-label="Close editor"
+      @click="${this.handleCloseButtonClick}"
+    >
+      <ui-icon icon="close"></ui-icon>
+    </ui-icon-button>`;
+        }
+        renderEndpointsConfiguration(exposed) {
+            return html `<div class="endpoints-configuration config-section">
+      <div class="section-header title-large">Endpoints</div>
+      <div class="section-description body-medium">Define endpoint paths for the collection and resource.</div>
+      ${exposed.hasCollection ? this.renderCollectionPathInput(exposed) : nothing}
+      ${this.renderResourcePathInput(exposed)}
+    </div>`;
+        }
+        renderCollectionPathInput(exposed) {
+            return html `<div class="row input-row">
+      <ui-outlined-text-field
+        class="input"
+        name="collectionPath"
+        label="Collection path"
+        .value=${live(exposed.collectionPath || '')}
+        ?disabled="${this.readonly}"
+        @change=${this.handleCollectionPathChange}
+      ></ui-outlined-text-field>
+      ${renderHelp('modeling', 'api:collection-path-input')}
+    </div>`;
+        }
+        renderResourcePathInput(exposed) {
+            return html `<div class="row input-row">
+      <ui-outlined-text-field
+        class="input"
+        name="resourcePath"
+        label="Resource path"
+        .value=${exposed.resourcePath || ''}
+        ?disabled="${this.readonly}"
+        @change=${this.handleResourcePathChange}
+      ></ui-outlined-text-field>
+      ${renderHelp('modeling', 'api:resource-path-input')}
+    </div>`;
+        }
+        renderActionsSection(exposed) {
+            return html `<div class="actions-configuration config-section">
+      <div class="section-header title-large">Actions</div>
+      <div class="section-description body-medium">
+        In this section you can decide which actions can be performed on a collection and a resource.
+      </div>
+      ${this.renderCollectionActionsSection(exposed)} ${this.renderResourceActionsSection(exposed)}
+    </div>`;
+        }
+        renderCollectionActionsSection(exposed) {
+            if (!exposed.hasCollection) {
+                return nothing;
+            }
+            let list = false;
+            let create = false;
+            let search = false;
+            for (const action of exposed.actions) {
+                if (action.kind === 'list') {
+                    list = true;
+                }
+                else if (action.kind === 'create') {
+                    create = true;
+                }
+                else if (action.kind === 'search') {
+                    search = true;
+                }
+            }
+            return html `<div class="collection-actions-configuration config-section">
+      <div class="section-header">
+        <div class="title-medium">Collection Actions</div>
+        ${renderHelp('modeling', 'api:collection-actions')}
+      </div>
+      <ui-list class="action-presets">
+        <ui-list-item lines="two">
+          <ui-icon slot="start" class="action-icon">${apiActionKindToIcon('create')}</ui-icon>
+          <span>${apiActionKindToLabel('create')}</span>
+          <span slot="supporting-text">Create a new resource</span>
+          <ui-switch
+            slot="end"
+            .checked=${create}
+            name="create"
+            @change=${this.handleActionToggle}
+            ?disabled=${this.readonly}
+          ></ui-switch>
+        </ui-list-item>
+        <ui-list-item lines="two">
+          <ui-icon slot="start" class="action-icon">${apiActionKindToIcon('list')}</ui-icon>
+          <span>${apiActionKindToLabel('list')}</span>
+          <span slot="supporting-text">Paginate through the collection</span>
+          <ui-switch
+            slot="end"
+            .checked=${list}
+            name="list"
+            @change=${this.handleActionToggle}
+            ?disabled=${this.readonly}
+          ></ui-switch>
+        </ui-list-item>
+        <ui-list-item lines="two">
+          <ui-icon slot="start" class="action-icon">${apiActionKindToIcon('search')}</ui-icon>
+          <span>${apiActionKindToLabel('search')}</span>
+          <span slot="supporting-text">Search for a record</span>
+          <ui-switch
+            slot="end"
+            .checked=${search}
+            name="search"
+            @change=${this.handleActionToggle}
+            ?disabled=${this.readonly}
+          ></ui-switch>
+        </ui-list-item>
+      </ui-list>
+    </div>`;
+        }
+        renderResourceActionsSection(exposed) {
+            let read = false;
+            let update = false;
+            let del = false;
+            for (const action of exposed.actions) {
+                if (action.kind === 'read') {
+                    read = true;
+                }
+                else if (action.kind === 'update') {
+                    update = true;
+                }
+                else if (action.kind === 'delete') {
+                    del = true;
+                }
+            }
+            return html `<div class="resource-actions-configuration config-section">
+      <div class="section-header">
+        <div class="title-medium">Resource Actions</div>
+        ${renderHelp('modeling', 'api:resource-actions')}
+      </div>
+      <ui-list class="action-presets">
+        <ui-list-item lines="two">
+          <ui-icon slot="start" class="action-icon">${apiActionKindToIcon('read')}</ui-icon>
+          <span>${apiActionKindToLabel('read')}</span>
+          <span slot="supporting-text">Read a single object</span>
+          <ui-switch
+            slot="end"
+            .checked=${read}
+            name="read"
+            @change=${this.handleActionToggle}
+            ?disabled=${this.readonly}
+          ></ui-switch>
+        </ui-list-item>
+        <ui-list-item lines="two">
+          <ui-icon slot="start" class="action-icon">${apiActionKindToIcon('update')}</ui-icon>
+          <span>${apiActionKindToLabel('update')}</span>
+          <span slot="supporting-text">Update the object</span>
+          <ui-switch
+            slot="end"
+            .checked=${update}
+            name="update"
+            @change=${this.handleActionToggle}
+            ?disabled=${this.readonly}
+          ></ui-switch>
+        </ui-list-item>
+        <ui-list-item lines="two">
+          <ui-icon slot="start" class="action-icon">${apiActionKindToIcon('delete')}</ui-icon>
+          <span>${apiActionKindToLabel('delete')}</span>
+          <span slot="supporting-text">Delete from the collection</span>
+          <ui-switch
+            slot="end"
+            .checked=${del}
+            name="delete"
+            @change=${this.handleActionToggle}
+            ?disabled=${this.readonly}
+          ></ui-switch>
+        </ui-list-item>
+      </ui-list>
+    </div>`;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _showCloseButton_extraInitializers);
+        }
+    };
+})();
+/**
+ * An entity editor displaying information about an exposed entity
+ * in the API model, including its domain entity.
+ *
+ * @fires close - Fired when the user clicks the close button in the header.
+ */
+export default ApiModelingEntityEditor;
+//# sourceMappingURL=ApiModelingEntityEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApiModelingEntityEditor.js","sourceRoot":"","sources":["../../../../src/modeling/internals/ApiModelingEntityEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, type TemplateResult, nothing } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { live } from 'lit/directives/live.js'\nimport { ApiEditor } from './ApiEditor.js'\nimport type { ApiAction, ApiModel, DomainEntity, ExposedEntity } from '@api-client/core/browser.js'\nimport { apiActionKindToIcon, apiActionKindToLabel } from '../lib/ui_mapping.js'\nimport { renderHelp } from '../../help/render.js'\nimport type { UiOutlinedTextFieldElement } from '../../md/text-field/ui-outlined-text-field.js'\n\ntype ActionKind = 'list' | 'read' | 'create' | 'update' | 'delete' | 'search'\n\n/**\n * An entity editor displaying information about an exposed entity\n * in the API model, including its domain entity.\n *\n * @fires close - Fired when the user clicks the close button in the header.\n */\nexport default class ApiModelingEntityEditor extends ApiEditor {\n  /**\n   * Computed exposed entity being edited.\n   */\n  @state() accessor exposed: ExposedEntity | undefined\n  /**\n   * Computed domain entity that corresponds to the exposed entity being edited.\n   */\n  @state() accessor entity: DomainEntity | undefined\n  /**\n   * When true, shows a close button in the editor header.\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor showCloseButton = false\n\n  protected override setupModel(model?: ApiModel, domainKey?: string): void | Promise<void> {\n    this.exposed = undefined\n    this.entity = undefined\n    if (!model || !domainKey) {\n      return\n    }\n    const exposed = model.exposes.find((exposed) => exposed.key === domainKey)\n    this.exposed = exposed\n    if (!exposed) {\n      return\n    }\n    const domain = model.domain\n    if (!domain) {\n      return\n    }\n    const entity = domain.findEntity(exposed.entity.key, exposed.entity.domain)\n    if (!entity) {\n      return\n    }\n    this.entity = entity\n  }\n\n  protected handleCloseButtonClick(): void {\n    this.dispatchEvent(new Event('close'))\n  }\n\n  protected handleCollectionPathChange(e: Event): void {\n    const { exposed } = this\n    if (!exposed) {\n      return\n    }\n    const input = e.target as UiOutlinedTextFieldElement\n    input.invalid = false\n    try {\n      exposed.setCollectionPath(input.value)\n      this.notifyChange()\n    } catch (e) {\n      input.invalid = true\n      input.invalidText = (e as Error).message\n    }\n  }\n\n  protected handleResourcePathChange(e: Event): void {\n    const { exposed } = this\n    if (!exposed) {\n      return\n    }\n    const input = e.target as UiOutlinedTextFieldElement\n    input.invalid = false\n    try {\n      exposed.setResourcePath(input.value)\n      this.notifyChange()\n    } catch (e) {\n      input.invalid = true\n      input.invalidText = (e as Error).message\n    }\n  }\n\n  protected handleActionToggle(e: Event): void {\n    const { exposed } = this\n    if (!exposed) {\n      return\n    }\n    const toggle = e.target as HTMLInputElement\n    const { name, checked } = toggle\n    if (checked) {\n      this.addAction(name as ActionKind)\n    } else {\n      this.removeAction(name as ActionKind)\n    }\n  }\n\n  removeAction(kind: ActionKind): void {\n    const { exposed } = this\n    if (!exposed) {\n      return\n    }\n    const action = exposed.actions.findIndex((action) => action.kind === kind)\n    if (action === -1) {\n      return\n    }\n    exposed.actions.splice(action, 1)\n    this.notifyChange()\n    this.requestUpdate()\n  }\n\n  addAction(kind: ActionKind): void {\n    const { exposed } = this\n    if (!exposed) {\n      return\n    }\n    const existing = exposed.actions.find((action) => action.kind === kind)\n    if (existing) {\n      return\n    }\n    let action: ApiAction\n    switch (kind) {\n      case 'list':\n        action = { kind: 'list', filterableFields: [], sortableFields: [], pagination: { kind: 'offset' } }\n        break\n      case 'read':\n      case 'create':\n      case 'delete':\n        action = { kind }\n        break\n      case 'update':\n        action = { kind: 'update', allowedMethods: ['PUT'] }\n        break\n      case 'search':\n        action = { kind: 'search', fields: [] }\n        break\n      default:\n        throw new Error(`Unsupported action kind: ${kind}`)\n    }\n    exposed.actions.push(action)\n    this.notifyChange()\n    this.requestUpdate()\n  }\n\n  protected override render(): TemplateResult | typeof nothing {\n    if (!this.exposed || !this.entity) {\n      return nothing\n    }\n    return html`<div class=\"container\">\n      ${this.renderHeader(this.entity)} ${this.renderEndpointsConfiguration(this.exposed)}\n      ${this.renderActionsSection(this.exposed)}\n    </div>`\n  }\n\n  /**\n   * Renders a template of the editor header.\n   * @param entity The related domain entity.\n   */\n  protected renderHeader(entity: DomainEntity): TemplateResult {\n    return html`<div class=\"intro\">\n      <div class=\"header\">\n        <span class=\"headline-medium \">${entity.info.getLabel()}</span>\n        ${this.renderCloseButton()}\n      </div>\n      <div class=\"body-medium description\">\n        Define the logic related to the data entity. It is an endpoint that will be exposed through the API after\n        attaching actions to it.\n      </div>\n    </div>`\n  }\n\n  /**\n   * Renders the close button if the `showCloseButton` flag is set.\n   */\n  protected renderCloseButton(): TemplateResult | typeof nothing {\n    if (!this.showCloseButton) {\n      return nothing\n    }\n    return html`<ui-icon-button\n      color=\"outlined\"\n      class=\"close-button\"\n      aria-label=\"Close editor\"\n      @click=\"${this.handleCloseButtonClick}\"\n    >\n      <ui-icon icon=\"close\"></ui-icon>\n    </ui-icon-button>`\n  }\n\n  protected renderEndpointsConfiguration(exposed: ExposedEntity): TemplateResult {\n    return html`<div class=\"endpoints-configuration config-section\">\n      <div class=\"section-header title-large\">Endpoints</div>\n      <div class=\"section-description body-medium\">Define endpoint paths for the collection and resource.</div>\n      ${exposed.hasCollection ? this.renderCollectionPathInput(exposed) : nothing}\n      ${this.renderResourcePathInput(exposed)}\n    </div>`\n  }\n\n  protected renderCollectionPathInput(exposed: ExposedEntity): TemplateResult {\n    return html`<div class=\"row input-row\">\n      <ui-outlined-text-field\n        class=\"input\"\n        name=\"collectionPath\"\n        label=\"Collection path\"\n        .value=${live(exposed.collectionPath || '')}\n        ?disabled=\"${this.readonly}\"\n        @change=${this.handleCollectionPathChange}\n      ></ui-outlined-text-field>\n      ${renderHelp('modeling', 'api:collection-path-input')}\n    </div>`\n  }\n\n  protected renderResourcePathInput(exposed: ExposedEntity): TemplateResult {\n    return html`<div class=\"row input-row\">\n      <ui-outlined-text-field\n        class=\"input\"\n        name=\"resourcePath\"\n        label=\"Resource path\"\n        .value=${exposed.resourcePath || ''}\n        ?disabled=\"${this.readonly}\"\n        @change=${this.handleResourcePathChange}\n      ></ui-outlined-text-field>\n      ${renderHelp('modeling', 'api:resource-path-input')}\n    </div>`\n  }\n\n  protected renderActionsSection(exposed: ExposedEntity): TemplateResult {\n    return html`<div class=\"actions-configuration config-section\">\n      <div class=\"section-header title-large\">Actions</div>\n      <div class=\"section-description body-medium\">\n        In this section you can decide which actions can be performed on a collection and a resource.\n      </div>\n      ${this.renderCollectionActionsSection(exposed)} ${this.renderResourceActionsSection(exposed)}\n    </div>`\n  }\n\n  protected renderCollectionActionsSection(exposed: ExposedEntity): TemplateResult | typeof nothing {\n    if (!exposed.hasCollection) {\n      return nothing\n    }\n    let list = false\n    let create = false\n    let search = false\n    for (const action of exposed.actions) {\n      if (action.kind === 'list') {\n        list = true\n      } else if (action.kind === 'create') {\n        create = true\n      } else if (action.kind === 'search') {\n        search = true\n      }\n    }\n    return html`<div class=\"collection-actions-configuration config-section\">\n      <div class=\"section-header\">\n        <div class=\"title-medium\">Collection Actions</div>\n        ${renderHelp('modeling', 'api:collection-actions')}\n      </div>\n      <ui-list class=\"action-presets\">\n        <ui-list-item lines=\"two\">\n          <ui-icon slot=\"start\" class=\"action-icon\">${apiActionKindToIcon('create')}</ui-icon>\n          <span>${apiActionKindToLabel('create')}</span>\n          <span slot=\"supporting-text\">Create a new resource</span>\n          <ui-switch\n            slot=\"end\"\n            .checked=${create}\n            name=\"create\"\n            @change=${this.handleActionToggle}\n            ?disabled=${this.readonly}\n          ></ui-switch>\n        </ui-list-item>\n        <ui-list-item lines=\"two\">\n          <ui-icon slot=\"start\" class=\"action-icon\">${apiActionKindToIcon('list')}</ui-icon>\n          <span>${apiActionKindToLabel('list')}</span>\n          <span slot=\"supporting-text\">Paginate through the collection</span>\n          <ui-switch\n            slot=\"end\"\n            .checked=${list}\n            name=\"list\"\n            @change=${this.handleActionToggle}\n            ?disabled=${this.readonly}\n          ></ui-switch>\n        </ui-list-item>\n        <ui-list-item lines=\"two\">\n          <ui-icon slot=\"start\" class=\"action-icon\">${apiActionKindToIcon('search')}</ui-icon>\n          <span>${apiActionKindToLabel('search')}</span>\n          <span slot=\"supporting-text\">Search for a record</span>\n          <ui-switch\n            slot=\"end\"\n            .checked=${search}\n            name=\"search\"\n            @change=${this.handleActionToggle}\n            ?disabled=${this.readonly}\n          ></ui-switch>\n        </ui-list-item>\n      </ui-list>\n    </div>`\n  }\n\n  protected renderResourceActionsSection(exposed: ExposedEntity): TemplateResult {\n    let read = false\n    let update = false\n    let del = false\n    for (const action of exposed.actions) {\n      if (action.kind === 'read') {\n        read = true\n      } else if (action.kind === 'update') {\n        update = true\n      } else if (action.kind === 'delete') {\n        del = true\n      }\n    }\n    return html`<div class=\"resource-actions-configuration config-section\">\n      <div class=\"section-header\">\n        <div class=\"title-medium\">Resource Actions</div>\n        ${renderHelp('modeling', 'api:resource-actions')}\n      </div>\n      <ui-list class=\"action-presets\">\n        <ui-list-item lines=\"two\">\n          <ui-icon slot=\"start\" class=\"action-icon\">${apiActionKindToIcon('read')}</ui-icon>\n          <span>${apiActionKindToLabel('read')}</span>\n          <span slot=\"supporting-text\">Read a single object</span>\n          <ui-switch\n            slot=\"end\"\n            .checked=${read}\n            name=\"read\"\n            @change=${this.handleActionToggle}\n            ?disabled=${this.readonly}\n          ></ui-switch>\n        </ui-list-item>\n        <ui-list-item lines=\"two\">\n          <ui-icon slot=\"start\" class=\"action-icon\">${apiActionKindToIcon('update')}</ui-icon>\n          <span>${apiActionKindToLabel('update')}</span>\n          <span slot=\"supporting-text\">Update the object</span>\n          <ui-switch\n            slot=\"end\"\n            .checked=${update}\n            name=\"update\"\n            @change=${this.handleActionToggle}\n            ?disabled=${this.readonly}\n          ></ui-switch>\n        </ui-list-item>\n        <ui-list-item lines=\"two\">\n          <ui-icon slot=\"start\" class=\"action-icon\">${apiActionKindToIcon('delete')}</ui-icon>\n          <span>${apiActionKindToLabel('delete')}</span>\n          <span slot=\"supporting-text\">Delete from the collection</span>\n          <ui-switch\n            slot=\"end\"\n            .checked=${del}\n            name=\"delete\"\n            @change=${this.handleActionToggle}\n            ?disabled=${this.readonly}\n          ></ui-switch>\n        </ui-list-item>\n      </ui-list>\n    </div>`\n  }\n}\n"]}

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

@@ -0,0 +1,36 @@
+import { LitElement, type TemplateResult } from 'lit';
+import type { NavigationItemElement } from '../../elements/navigation/ui-navigation-item.js';
+export type NavigationPage = 'data-domain' | 'description' | 'api-access' | 'session' | 'actions' | 'publish';
+export declare function isNavigationPage(value?: string): value is NavigationPage;
+/**
+ * The navigation component for API modeling screens.
+ *
+ * @fires pagechange - Fired when the navigation page changes. The detail object has
+ *                     the `page` property with the new page.
+ */
+export default class ApiModelingNavigation extends LitElement {
+    /**
+     * The current navigation page.
+     * @attribute
+     */
+    accessor page: NavigationPage;
+    /**
+     * Whether the navigation is collapsed (drawer closed).
+     * @attribute
+     */
+    accessor collapsed: boolean;
+    /**
+     * Sets the current navigation page and fires the `pagechange` event.
+     * @param page The page to set
+     */
+    selectPage(page: NavigationPage): void;
+    /**
+     * A handler for the navigation select event.
+     * @param event The select event
+     */
+    protected handleSelect(event: CustomEvent<{
+        item: NavigationItemElement;
+    }>): void;
+    render(): TemplateResult;
+}
+//# sourceMappingURL=ApiModelingNavigation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApiModelingNavigation.d.ts","sourceRoot":"","sources":["../../../../src/modeling/internals/ApiModelingNavigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAA;AAE3D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iDAAiD,CAAA;AAE5F,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,aAAa,GAAG,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAE7G,wBAAgB,gBAAgB,CAAC,KAAK,SAAK,GAAG,KAAK,IAAI,cAAc,CAEpE;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,UAAU;IAC3D;;;OAGG;IACyB,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAgB;IACzE;;;OAGG;IACyC,QAAQ,CAAC,SAAS,UAAQ;IAEtE;;;OAGG;IACH,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAWtC;;;OAGG;IACH,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,IAAI,EAAE,qBAAqB,CAAA;KAAE,CAAC,GAAG,IAAI;IAQxE,MAAM,IAAI,cAAc;CA+BlC"}

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

@@ -0,0 +1,115 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+export function isNavigationPage(value = '') {
+    return ['data-domain', 'description', 'api-access', 'session', 'actions', 'publish'].includes(value);
+}
+let ApiModelingNavigation = (() => {
+    let _classSuper = LitElement;
+    let _page_decorators;
+    let _page_initializers = [];
+    let _page_extraInitializers = [];
+    let _collapsed_decorators;
+    let _collapsed_initializers = [];
+    let _collapsed_extraInitializers = [];
+    return class ApiModelingNavigation extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _page_decorators = [property({ type: String })];
+            _collapsed_decorators = [property({ type: Boolean, reflect: true })];
+            __esDecorate(this, null, _page_decorators, { kind: "accessor", name: "page", static: false, private: false, access: { has: obj => "page" in obj, get: obj => obj.page, set: (obj, value) => { obj.page = value; } }, metadata: _metadata }, _page_initializers, _page_extraInitializers);
+            __esDecorate(this, null, _collapsed_decorators, { kind: "accessor", name: "collapsed", static: false, private: false, access: { has: obj => "collapsed" in obj, get: obj => obj.collapsed, set: (obj, value) => { obj.collapsed = value; } }, metadata: _metadata }, _collapsed_initializers, _collapsed_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #page_accessor_storage = __runInitializers(this, _page_initializers, 'data-domain'
+        /**
+         * Whether the navigation is collapsed (drawer closed).
+         * @attribute
+         */
+        );
+        /**
+         * The current navigation page.
+         * @attribute
+         */
+        get page() { return this.#page_accessor_storage; }
+        set page(value) { this.#page_accessor_storage = value; }
+        #collapsed_accessor_storage = (__runInitializers(this, _page_extraInitializers), __runInitializers(this, _collapsed_initializers, false
+        /**
+         * Sets the current navigation page and fires the `pagechange` event.
+         * @param page The page to set
+         */
+        ));
+        /**
+         * Whether the navigation is collapsed (drawer closed).
+         * @attribute
+         */
+        get collapsed() { return this.#collapsed_accessor_storage; }
+        set collapsed(value) { this.#collapsed_accessor_storage = value; }
+        /**
+         * Sets the current navigation page and fires the `pagechange` event.
+         * @param page The page to set
+         */
+        selectPage(page) {
+            this.page = page;
+            this.dispatchEvent(new CustomEvent('pagechange', {
+                detail: { page },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        /**
+         * A handler for the navigation select event.
+         * @param event The select event
+         */
+        handleSelect(event) {
+            const selectedPage = event.detail.item.dataset.page;
+            const page = selectedPage?.substring(1); // Remove leading slash
+            if (isNavigationPage(page)) {
+                this.selectPage(page);
+            }
+        }
+        render() {
+            const { collapsed, page = 'data-domain' } = this;
+            return html `
+      <ui-navigation aria-label="Main navigation" current="step" class="drawer" @select="${this.handleSelect}">
+        <ui-navigation-item data-page="/data-domain" .iconOnly=${collapsed} .selected=${page === 'data-domain'}>
+          <ui-icon slot="icon" icon="schemaNamespace"></ui-icon>
+          Data Domain
+        </ui-navigation-item>
+        <ui-navigation-item data-page="/description" .iconOnly=${collapsed} .selected=${page === 'description'}>
+          <ui-icon slot="icon">description</ui-icon>
+          Description
+        </ui-navigation-item>
+        <ui-navigation-item data-page="/api-access" .iconOnly=${collapsed} .selected=${page === 'api-access'}>
+          <ui-icon slot="icon">lock</ui-icon>
+          Api Access
+        </ui-navigation-item>
+        <ui-navigation-item data-page="/session" .iconOnly=${collapsed} .selected=${page === 'session'}>
+          <ui-icon slot="icon">person</ui-icon>
+          Session
+        </ui-navigation-item>
+        <ui-navigation-item data-page="/actions" .iconOnly=${collapsed} .selected=${page === 'actions'}>
+          <ui-icon slot="icon">integration_instructions</ui-icon>
+          Actions
+        </ui-navigation-item>
+        <ui-navigation-item data-page="/publish" .iconOnly=${collapsed} .selected=${page === 'publish'}>
+          <ui-icon slot="icon">publish</ui-icon>
+          Publish
+        </ui-navigation-item>
+      </ui-navigation>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _collapsed_extraInitializers);
+        }
+    };
+})();
+/**
+ * The navigation component for API modeling screens.
+ *
+ * @fires pagechange - Fired when the navigation page changes. The detail object has
+ *                     the `page` property with the new page.
+ */
+export default ApiModelingNavigation;
+//# sourceMappingURL=ApiModelingNavigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApiModelingNavigation.js","sourceRoot":"","sources":["../../../../src/modeling/internals/ApiModelingNavigation.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuB,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAK5C,MAAM,UAAU,gBAAgB,CAAC,KAAK,GAAG,EAAE;IACzC,OAAO,CAAC,aAAa,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;AACtG,CAAC;;sBAQkD,UAAU;;;;;;;iBAAxC,qBAAsB,SAAQ,WAAU;;;gCAK1D,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCAK1B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;YALf,iKAAS,IAAI,6BAAJ,IAAI,mFAAgC;YAK7B,gLAAS,SAAS,6BAAT,SAAS,6FAAQ;;;QAL1C,qEAAgC,aAAa;QACzE;;;WAGG;UAJsE;QAJzE;;;WAGG;QACyB,IAAS,IAAI,0CAAgC;QAA7C,IAAS,IAAI,gDAAgC;QAK7B,kIAAqB,KAAK;QAEtE;;;WAGG;WALmE;QAJtE;;;WAGG;QACyC,IAAS,SAAS,+CAAQ;QAA1B,IAAS,SAAS,qDAAQ;QAEtE;;;WAGG;QACH,UAAU,CAAC,IAAoB;YAC7B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;YAChB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,YAAY,EAAE;gBAC5B,MAAM,EAAE,EAAE,IAAI,EAAE;gBAChB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAA;QACH,CAAC;QAED;;;WAGG;QACO,YAAY,CAAC,KAAmD;YACxE,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAA;YACnD,MAAM,IAAI,GAAG,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC,CAAA,CAAC,uBAAuB;YAC/D,IAAI,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;YACvB,CAAC;QACH,CAAC;QAEQ,MAAM;YACb,MAAM,EAAE,SAAS,EAAE,IAAI,GAAG,aAAa,EAAE,GAAG,IAAI,CAAA;YAChD,OAAO,IAAI,CAAA;2FAC4E,IAAI,CAAC,YAAY;iEAC3C,SAAS,cAAc,IAAI,KAAK,aAAa;;;;iEAI7C,SAAS,cAAc,IAAI,KAAK,aAAa;;;;gEAI9C,SAAS,cAAc,IAAI,KAAK,YAAY;;;;6DAI/C,SAAS,cAAc,IAAI,KAAK,SAAS;;;;6DAIzC,SAAS,cAAc,IAAI,KAAK,SAAS;;;;6DAIzC,SAAS,cAAc,IAAI,KAAK,SAAS;;;;;KAKjG,CAAA;QACH,CAAC;;;;;;;AA3EH;;;;;GAKG;AACH,qCAsEC","sourcesContent":["import { LitElement, type TemplateResult, html } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport type { NavigationItemElement } from '../../elements/navigation/ui-navigation-item.js'\n\nexport type NavigationPage = 'data-domain' | 'description' | 'api-access' | 'session' | 'actions' | 'publish'\n\nexport function isNavigationPage(value = ''): value is NavigationPage {\n  return ['data-domain', 'description', 'api-access', 'session', 'actions', 'publish'].includes(value)\n}\n\n/**\n * The navigation component for API modeling screens.\n *\n * @fires pagechange - Fired when the navigation page changes. The detail object has\n *                     the `page` property with the new page.\n */\nexport default class ApiModelingNavigation extends LitElement {\n  /**\n   * The current navigation page.\n   * @attribute\n   */\n  @property({ type: String }) accessor page: NavigationPage = 'data-domain'\n  /**\n   * Whether the navigation is collapsed (drawer closed).\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor collapsed = false\n\n  /**\n   * Sets the current navigation page and fires the `pagechange` event.\n   * @param page The page to set\n   */\n  selectPage(page: NavigationPage): void {\n    this.page = page\n    this.dispatchEvent(\n      new CustomEvent('pagechange', {\n        detail: { page },\n        bubbles: true,\n        composed: true,\n      })\n    )\n  }\n\n  /**\n   * A handler for the navigation select event.\n   * @param event The select event\n   */\n  protected handleSelect(event: CustomEvent<{ item: NavigationItemElement }>): void {\n    const selectedPage = event.detail.item.dataset.page\n    const page = selectedPage?.substring(1) // Remove leading slash\n    if (isNavigationPage(page)) {\n      this.selectPage(page)\n    }\n  }\n\n  override render(): TemplateResult {\n    const { collapsed, page = 'data-domain' } = this\n    return html`\n      <ui-navigation aria-label=\"Main navigation\" current=\"step\" class=\"drawer\" @select=\"${this.handleSelect}\">\n        <ui-navigation-item data-page=\"/data-domain\" .iconOnly=${collapsed} .selected=${page === 'data-domain'}>\n          <ui-icon slot=\"icon\" icon=\"schemaNamespace\"></ui-icon>\n          Data Domain\n        </ui-navigation-item>\n        <ui-navigation-item data-page=\"/description\" .iconOnly=${collapsed} .selected=${page === 'description'}>\n          <ui-icon slot=\"icon\">description</ui-icon>\n          Description\n        </ui-navigation-item>\n        <ui-navigation-item data-page=\"/api-access\" .iconOnly=${collapsed} .selected=${page === 'api-access'}>\n          <ui-icon slot=\"icon\">lock</ui-icon>\n          Api Access\n        </ui-navigation-item>\n        <ui-navigation-item data-page=\"/session\" .iconOnly=${collapsed} .selected=${page === 'session'}>\n          <ui-icon slot=\"icon\">person</ui-icon>\n          Session\n        </ui-navigation-item>\n        <ui-navigation-item data-page=\"/actions\" .iconOnly=${collapsed} .selected=${page === 'actions'}>\n          <ui-icon slot=\"icon\">integration_instructions</ui-icon>\n          Actions\n        </ui-navigation-item>\n        <ui-navigation-item data-page=\"/publish\" .iconOnly=${collapsed} .selected=${page === 'publish'}>\n          <ui-icon slot=\"icon\">publish</ui-icon>\n          Publish\n        </ui-navigation-item>\n      </ui-navigation>\n    `\n  }\n}\n"]}

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

@@ -0,0 +1,59 @@
+import { type TemplateResult, type PropertyValues, nothing } from 'lit';
+import { ApiEditor } from './ApiEditor.js';
+import type { ApiModel, RateLimitRule } from '@api-client/core/browser.js';
+import type { ApiModelAccessTarget, ApiModelOperationName } from '../types.js';
+/**
+ * An editor for configuring rate limiting settings at the API, endpoint, or action level.
+ *
+ * This editor writes directly into the provided model (no separate dirty buffer).
+ */
+export default class ApiModelingRateLimiting extends ApiEditor {
+    /**
+     * The operation name when editing action-level limits.
+     * Ignored when target is 'api' or 'endpoint'.
+     * @attribute
+     */
+    accessor operation: ApiModelOperationName | undefined;
+    /**
+     * The target scope where limits are applied: api | endpoint | action.
+     * @attribute
+     */
+    accessor target: ApiModelAccessTarget | undefined;
+    /**
+     * The editable list of rules. This is a direct reference when available.
+     */
+    accessor rules: RateLimitRule[];
+    constructor();
+    protected willUpdate(cp: PropertyValues<this>): void;
+    protected resetModel(): void;
+    protected setupModel(model?: ApiModel, domainKey?: string): void | Promise<void>;
+    /**
+     * Reads rules from the model for the given scope.
+     */
+    protected readRules(model: ApiModel, target: ApiModelAccessTarget, domainKey?: string, operation?: ApiModelOperationName): RateLimitRule[] | undefined;
+    /**
+     * Synchronizes the current rules array into the model at the proper scope.
+     */
+    protected synchronizeModel(): void;
+    /**
+     * Adds a new rule with sensible defaults.
+     */
+    addRule(): void;
+    deleteRule(index: number): void;
+    protected handleAddRuleClick(): void;
+    protected handleDeleteRuleClick(e: Event): void;
+    protected handleDescriptionChange(e: Event): void;
+    protected handleKeyTypeChange(e: CustomEvent<{
+        value: string;
+    }>): void;
+    protected handleRoleValueChange(e: Event): void;
+    protected handleRateChange(e: Event): void;
+    protected handleIntervalChange(e: CustomEvent<{
+        value: string;
+    }>): void;
+    protected handleBurstChange(e: Event): void;
+    protected render(): TemplateResult | typeof nothing;
+    protected renderRules(): TemplateResult | typeof nothing;
+    protected renderRule(rule: RateLimitRule, index: number): TemplateResult;
+}
+//# sourceMappingURL=ApiModelingRateLimiting.d.ts.map