@api-client/ui 0.5.57 → 0.6.0

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

@@ -0,0 +1,505 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { ApiEditor } from './ApiEditor.js';
+import { apiActionKindToIcon, getPropertyIcon } from '../lib/ui_mapping.js';
+import { renderHelp } from '../../help/render.js';
+let ApiListActionEditor = (() => {
+    let _classSuper = ApiEditor;
+    let _exposed_decorators;
+    let _exposed_initializers = [];
+    let _exposed_extraInitializers = [];
+    let _entity_decorators;
+    let _entity_initializers = [];
+    let _entity_extraInitializers = [];
+    let _action_decorators;
+    let _action_initializers = [];
+    let _action_extraInitializers = [];
+    let _indexed_decorators;
+    let _indexed_initializers = [];
+    let _indexed_extraInitializers = [];
+    let _showCloseButton_decorators;
+    let _showCloseButton_initializers = [];
+    let _showCloseButton_extraInitializers = [];
+    let _activeTab_decorators;
+    let _activeTab_initializers = [];
+    let _activeTab_extraInitializers = [];
+    return class ApiListActionEditor extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _exposed_decorators = [state()];
+            _entity_decorators = [state()];
+            _action_decorators = [state()];
+            _indexed_decorators = [state()];
+            _showCloseButton_decorators = [property({ type: Boolean })];
+            _activeTab_decorators = [state()];
+            __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, _action_decorators, { kind: "accessor", name: "action", static: false, private: false, access: { has: obj => "action" in obj, get: obj => obj.action, set: (obj, value) => { obj.action = value; } }, metadata: _metadata }, _action_initializers, _action_extraInitializers);
+            __esDecorate(this, null, _indexed_decorators, { kind: "accessor", name: "indexed", static: false, private: false, access: { has: obj => "indexed" in obj, get: obj => obj.indexed, set: (obj, value) => { obj.indexed = value; } }, metadata: _metadata }, _indexed_initializers, _indexed_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);
+            __esDecorate(this, null, _activeTab_decorators, { kind: "accessor", name: "activeTab", static: false, private: false, access: { has: obj => "activeTab" in obj, get: obj => obj.activeTab, set: (obj, value) => { obj.activeTab = value; } }, metadata: _metadata }, _activeTab_initializers, _activeTab_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; }
+        #action_accessor_storage = (__runInitializers(this, _entity_extraInitializers), __runInitializers(this, _action_initializers, void 0));
+        /**
+         * Computed list action definition being edited.
+         */
+        get action() { return this.#action_accessor_storage; }
+        set action(value) { this.#action_accessor_storage = value; }
+        #indexed_accessor_storage = (__runInitializers(this, _action_extraInitializers), __runInitializers(this, _indexed_initializers, []
+        /**
+         * When true, shows a close button in the editor header.
+         * @attribute
+         */
+        ));
+        /**
+         * All the indexed properties of the entity.
+         */
+        get indexed() { return this.#indexed_accessor_storage; }
+        set indexed(value) { this.#indexed_accessor_storage = value; }
+        #showCloseButton_accessor_storage = (__runInitializers(this, _indexed_extraInitializers), __runInitializers(this, _showCloseButton_initializers, false
+        /**
+         * The currently active tab index.
+         */
+        ));
+        /**
+         * 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; }
+        #activeTab_accessor_storage = (__runInitializers(this, _showCloseButton_extraInitializers), __runInitializers(this, _activeTab_initializers, 0));
+        /**
+         * The currently active tab index.
+         */
+        get activeTab() { return this.#activeTab_accessor_storage; }
+        set activeTab(value) { this.#activeTab_accessor_storage = value; }
+        setupModel(model, domainKey) {
+            this.exposed = undefined;
+            this.entity = undefined;
+            this.action = undefined;
+            this.indexed = [];
+            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;
+            const action = exposed.actions.find((action) => action.kind === 'list');
+            this.action = action;
+            const indexed = [];
+            for (const property of entity.properties) {
+                if (property.index) {
+                    // Note that properties on the entity can't change as they belong to a published data domain.
+                    indexed.push(property);
+                }
+            }
+            this.indexed = indexed;
+        }
+        handleCloseButtonClick() {
+            this.dispatchEvent(new Event('close'));
+        }
+        /**
+         * Handles tab change events.
+         */
+        handleTabChange(e) {
+            this.activeTab = e.detail.index;
+        }
+        handlePaginationStrategyChange(e) {
+            const { value } = e.detail;
+            if (!value) {
+                return;
+            }
+            this.setPaginationStrategy(value);
+        }
+        /**
+         * Sets the pagination strategy for the action.
+         * @param strategy The strategy to set on the action. Must be `offset` or `cursor`.
+         */
+        setPaginationStrategy(strategy) {
+            if (!['offset', 'cursor'].includes(strategy)) {
+                throw new Error(`Invalid pagination strategy: ${strategy}.`);
+            }
+            const { action } = this;
+            if (!action) {
+                throw new Error('No action is set.');
+            }
+            if (!action.pagination) {
+                action.pagination = { kind: strategy };
+            }
+            else {
+                action.pagination.kind = strategy;
+            }
+            this.notifyChange();
+            this.requestUpdate();
+        }
+        handleDefaultPageSizeChange(e) {
+            const input = e.target;
+            const value = input.valueAsNumber;
+            this.setDefaultPageSize(value);
+        }
+        /**
+         * Sets the default page size for the action's pagination.
+         * @param pageSize The page size to set. Must be between 1 and 100.
+         */
+        setDefaultPageSize(pageSize) {
+            if (pageSize < 1 || pageSize > 100) {
+                throw new Error('Page size must be between 1 and 100.');
+            }
+            const { action } = this;
+            if (!action) {
+                throw new Error('No action is set.');
+            }
+            if (!action.pagination) {
+                action.pagination = { kind: 'offset', pageSize };
+            }
+            else {
+                action.pagination.pageSize = pageSize;
+            }
+            this.notifyChange();
+            this.requestUpdate();
+        }
+        handleAddFilterField(e) {
+            const item = e.detail.item;
+            if (!item.value) {
+                return;
+            }
+            this.addFilterField(item.value);
+        }
+        handleRemoveField(fieldKey, type) {
+            const { action } = this;
+            if (!action) {
+                throw new Error('No action is set.');
+            }
+            const index = type === 'filter' ? action.filterableFields.indexOf(fieldKey) : action.sortableFields.indexOf(fieldKey);
+            if (index !== -1) {
+                if (type === 'filter') {
+                    action.filterableFields.splice(index, 1);
+                }
+                else {
+                    action.sortableFields.splice(index, 1);
+                }
+                this.notifyChange();
+                this.requestUpdate();
+            }
+        }
+        addFilterField(fieldKey) {
+            const { action } = this;
+            if (!action) {
+                throw new Error('No action is set.');
+            }
+            if (!action.filterableFields.includes(fieldKey)) {
+                action.filterableFields.push(fieldKey);
+                this.notifyChange();
+                this.requestUpdate();
+            }
+        }
+        removeFilterField(fieldKey) {
+            const { action } = this;
+            if (!action) {
+                throw new Error('No action is set.');
+            }
+            const index = action.filterableFields.indexOf(fieldKey);
+            if (index !== -1) {
+                action.filterableFields.splice(index, 1);
+                this.notifyChange();
+                this.requestUpdate();
+            }
+        }
+        handleAddSortField(e) {
+            const item = e.detail.item;
+            if (!item.value) {
+                return;
+            }
+            this.addSortField(item.value);
+        }
+        addSortField(fieldKey) {
+            const { action } = this;
+            if (!action) {
+                throw new Error('No action is set.');
+            }
+            if (!action.sortableFields.includes(fieldKey)) {
+                action.sortableFields.push(fieldKey);
+                this.notifyChange();
+                this.requestUpdate();
+            }
+        }
+        removeSortField(fieldKey) {
+            const { action } = this;
+            if (!action) {
+                throw new Error('No action is set.');
+            }
+            const index = action.sortableFields.indexOf(fieldKey);
+            if (index !== -1) {
+                action.sortableFields.splice(index, 1);
+                this.notifyChange();
+                this.requestUpdate();
+            }
+        }
+        handleConfigurationChange() {
+            this.notifyChange();
+        }
+        render() {
+            if (!this.exposed || !this.entity || !this.action) {
+                return nothing;
+            }
+            return html `<div class="container">${this.renderHeader()} ${this.renderTabs()} ${this.renderTabContent()}</div>`;
+        }
+        /**
+         * Renders a template of the editor header.
+         */
+        renderHeader() {
+            const { entity } = this;
+            let label = 'List action';
+            if (entity) {
+                label = entity.info.getLabel() + ': List action';
+            }
+            return html `<div class="intro">
+      <div class="header">
+        <ui-icon>${apiActionKindToIcon('list')}</ui-icon>
+        <span class="headline-medium">${label}</span>
+        ${this.renderCloseButton()}
+      </div>
+      <div class="body-medium description">List action allows performing pagination on a collection of resources.</div>
+    </div>`;
+        }
+        /**
+         * Renders the tabs navigation.
+         */
+        renderTabs() {
+            return html `<ui-tabs
+      class="tabs"
+      .activeTabIndex="${this.activeTab}"
+      @change="${this.handleTabChange}"
+      priority="secondary"
+    >
+      <ui-tab>Configuration</ui-tab>
+      <ui-tab>Access</ui-tab>
+      <ui-tab>Limits</ui-tab>
+    </ui-tabs>`;
+        }
+        /**
+         * Renders the content for the currently active tab.
+         */
+        renderTabContent() {
+            if (!this.action) {
+                return nothing;
+            }
+            switch (this.activeTab) {
+                case 0:
+                    return this.renderConfigurationTab();
+                case 1:
+                    return this.renderAccessTab();
+                case 2:
+                    return this.renderLimitsTab();
+                default:
+                    return nothing;
+            }
+        }
+        /**
+         * Renders the Configuration tab content.
+         */
+        renderConfigurationTab() {
+            if (!this.action) {
+                return nothing;
+            }
+            return html `<div class="configuration-tab">
+      ${this.renderPaginationConfiguration(this.action)} ${this.renderFiltersConfiguration(this.action, this.indexed)}
+      ${this.renderSortConfiguration(this.action, this.indexed)}
+    </div>`;
+        }
+        /**
+         * Renders the Access tab content.
+         */
+        renderAccessTab() {
+            return html `<div class="config-section">
+      <api-modeling-access-configuration
+        .model="${this.model}"
+        domainKey="${this.exposed?.key || ''}"
+        operation="list"
+        target="action"
+        class="access-configuration"
+        @change="${this.handleConfigurationChange}"
+      ></api-modeling-access-configuration>
+    </div>`;
+        }
+        /**
+         * Renders the Limits tab content.
+         */
+        renderLimitsTab() {
+            return html `<div class="config-section">
+      <api-modeling-rate-limiting
+        .model="${this.model}"
+        domainKey="${this.exposed?.key || ''}"
+        operation="list"
+        target="action"
+        class="rate-limiting-configuration"
+        @change="${this.handleConfigurationChange}"
+      ></api-modeling-rate-limiting>
+    </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>`;
+        }
+        renderPaginationConfiguration(action) {
+            const { pagination } = action;
+            const strategy = pagination?.kind || 'offset';
+            const defaultPageSize = pagination?.pageSize || 30;
+            return html `<div class="pagination-configuration config-section">
+      <div class="config-intro">
+        <div class="section-header">
+          <span class="title-large">Pagination</span>
+          ${renderHelp('modeling', 'api:list-action:pagination')}
+        </div>
+        <div class="section-description body-medium">
+          Configure the pagination strategy to allow listing resources in this collection.
+        </div>
+      </div>
+
+      <div class="row input-row">
+        <ui-select
+          class="input"
+          label="Pagination strategy"
+          .value="${strategy}"
+          @change="${this.handlePaginationStrategyChange}"
+        >
+          <ui-option value="offset">Offset pagination</ui-option>
+          <ui-option value="cursor">Cursor pagination</ui-option>
+        </ui-select>
+      </div>
+
+      <div class="row input-row">
+        <ui-outlined-text-field
+          class="input"
+          label="Default page size"
+          type="number"
+          .value="${String(defaultPageSize)}"
+          min="1"
+          max="100"
+          @change="${this.handleDefaultPageSizeChange}"
+        ></ui-outlined-text-field>
+      </div>
+    </div>`;
+        }
+        renderFiltersConfiguration(action, indexed) {
+            const { filterableFields: selected } = action;
+            const availableFields = indexed.filter((property) => !selected.includes(property.key));
+            const hasAvailableFields = availableFields.length > 0;
+            return html `<div class="filters-configuration config-section">
+      <div class="config-intro">
+        <div class="section-header">
+          <span class="title-large">Filters</span>
+          ${renderHelp('modeling', 'api:list-action:filters')}
+        </div>
+        <div class="section-description body-medium">Fields from the entity that can be used for filtering.</div>
+      </div>
+
+      <ui-button class="add-button" color="tonal" popovertarget="filters-menu" ?disabled="${!hasAvailableFields}">
+        <ui-icon slot="icon" icon="add"></ui-icon>
+        Add field
+      </ui-button>
+      <ui-menu id="filters-menu" popover="auto" @select="${this.handleAddFilterField}">
+        ${availableFields.map((property) => html `<ui-menu-item value="${property.key}">${property.info.getLabel()}</ui-menu-item>`)}
+      </ui-menu>
+      ${selected.length > 0
+                ? html `<ui-list class="fields-list" delegateFocus
+            >${selected.map((fieldKey) => this.renderFieldListItem(fieldKey, indexed, 'filter'))}</ui-list
+          >`
+                : nothing}
+    </div>`;
+        }
+        renderFieldListItem(fieldKey, indexed, type) {
+            const property = indexed.find((p) => p.key === fieldKey);
+            const title = property?.info?.getLabel() || fieldKey;
+            const description = property?.info?.description;
+            const icon = property ? getPropertyIcon(property) : 'questionMark';
+            return html `<ui-list-item static class="field-list-item">
+      <span slot="start">
+        <ui-icon icon="${icon}"></ui-icon>
+      </span>
+      <span>${title}</span>
+      ${description ? html `<span slot="supporting-text">${description}</span>` : nothing}
+      <ui-icon-button
+        slot="end"
+        color="standard"
+        @click="${() => this.handleRemoveField(fieldKey, type)}"
+        aria-label="Remove filter field"
+        inwardFocus
+      >
+        <ui-icon icon="deleteOutline"></ui-icon>
+      </ui-icon-button>
+    </ui-list-item>`;
+        }
+        renderSortConfiguration(action, indexed) {
+            const { sortableFields: selected } = action;
+            const availableFields = indexed.filter((property) => !selected.includes(property.key));
+            const hasAvailableFields = availableFields.length > 0;
+            return html `<div class="sort-configuration config-section">
+      <div class="config-intro">
+        <div class="section-header">
+          <span class="title-large">Sort fields</span>
+          ${renderHelp('modeling', 'api:list-action:sort-fields')}
+        </div>
+        <div class="section-description body-medium">Fields from the entity that can be used for sorting.</div>
+      </div>
+
+      <ui-button class="add-button" color="tonal" popovertarget="sort-menu" ?disabled="${!hasAvailableFields}">
+        <ui-icon slot="icon" icon="add"></ui-icon>
+        Add field
+      </ui-button>
+      <ui-menu id="sort-menu" popover="auto" @select="${this.handleAddSortField}">
+        ${availableFields.map((property) => html `<ui-menu-item value="${property.key}">${property.info.getLabel()}</ui-menu-item>`)}
+      </ui-menu>
+
+      ${selected.length > 0
+                ? html `<ui-list class="fields-list" delegateFocus
+            >${selected.map((fieldKey) => this.renderFieldListItem(fieldKey, indexed, 'sort'))}</ui-list
+          >`
+                : nothing}
+    </div>`;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _activeTab_extraInitializers);
+        }
+    };
+})();
+export default ApiListActionEditor;
+//# sourceMappingURL=ApiListActionEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApiListActionEditor.js","sourceRoot":"","sources":["../../../../src/modeling/internals/ApiListActionEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, type TemplateResult, nothing } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ApiEditor } from './ApiEditor.js'\nimport { apiActionKindToIcon, getPropertyIcon } from '../lib/ui_mapping.js'\nimport { renderHelp } from '../../help/render.js'\nimport type { ListAction, ApiModel, DomainEntity, ExposedEntity, DomainProperty } from '@api-client/core/browser.js'\nimport type { TabSelectionDetail } from '../../md/tabs/ui-tabs.js'\nimport type { UiSelectChangeEvent } from '../../md/select/ui-select.js'\nimport type { UiListSelection } from '../../md/list/ui-list.js'\nimport type { UiMenuItemElement } from '../../md/menu/ui-menu-item.js'\n\nexport default class ApiListActionEditor 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   * Computed list action definition being edited.\n   */\n  @state() accessor action: ListAction | undefined\n  /**\n   * All the indexed properties of the entity.\n   */\n  @state() accessor indexed: DomainProperty[] = []\n  /**\n   * When true, shows a close button in the editor header.\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor showCloseButton = false\n  /**\n   * The currently active tab index.\n   */\n  @state() accessor activeTab = 0\n\n  protected override setupModel(model?: ApiModel, domainKey?: string): void | Promise<void> {\n    this.exposed = undefined\n    this.entity = undefined\n    this.action = undefined\n    this.indexed = []\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    const action = exposed.actions.find((action) => action.kind === 'list')\n    this.action = action\n    const indexed: DomainProperty[] = []\n    for (const property of entity.properties) {\n      if (property.index) {\n        // Note that properties on the entity can't change as they belong to a published data domain.\n        indexed.push(property)\n      }\n    }\n    this.indexed = indexed\n  }\n\n  protected handleCloseButtonClick(): void {\n    this.dispatchEvent(new Event('close'))\n  }\n\n  /**\n   * Handles tab change events.\n   */\n  protected handleTabChange(e: CustomEvent<TabSelectionDetail>): void {\n    this.activeTab = e.detail.index\n  }\n\n  protected handlePaginationStrategyChange(e: CustomEvent<UiSelectChangeEvent>): void {\n    const { value } = e.detail\n    if (!value) {\n      return\n    }\n    this.setPaginationStrategy(value)\n  }\n\n  /**\n   * Sets the pagination strategy for the action.\n   * @param strategy The strategy to set on the action. Must be `offset` or `cursor`.\n   */\n  setPaginationStrategy(strategy: string): void {\n    if (!['offset', 'cursor'].includes(strategy)) {\n      throw new Error(`Invalid pagination strategy: ${strategy}.`)\n    }\n    const { action } = this\n    if (!action) {\n      throw new Error('No action is set.')\n    }\n    if (!action.pagination) {\n      action.pagination = { kind: strategy }\n    } else {\n      action.pagination.kind = strategy\n    }\n    this.notifyChange()\n    this.requestUpdate()\n  }\n\n  protected handleDefaultPageSizeChange(e: Event): void {\n    const input = e.target as HTMLInputElement\n    const value = input.valueAsNumber\n    this.setDefaultPageSize(value)\n  }\n\n  /**\n   * Sets the default page size for the action's pagination.\n   * @param pageSize The page size to set. Must be between 1 and 100.\n   */\n  setDefaultPageSize(pageSize: number): void {\n    if (pageSize < 1 || pageSize > 100) {\n      throw new Error('Page size must be between 1 and 100.')\n    }\n    const { action } = this\n    if (!action) {\n      throw new Error('No action is set.')\n    }\n    if (!action.pagination) {\n      action.pagination = { kind: 'offset', pageSize }\n    } else {\n      action.pagination.pageSize = pageSize\n    }\n    this.notifyChange()\n    this.requestUpdate()\n  }\n\n  protected handleAddFilterField(e: CustomEvent<UiListSelection>): void {\n    const item = e.detail.item as UiMenuItemElement\n    if (!item.value) {\n      return\n    }\n    this.addFilterField(item.value)\n  }\n\n  protected handleRemoveField(fieldKey: string, type: 'filter' | 'sort'): void {\n    const { action } = this\n    if (!action) {\n      throw new Error('No action is set.')\n    }\n    const index =\n      type === 'filter' ? action.filterableFields.indexOf(fieldKey) : action.sortableFields.indexOf(fieldKey)\n    if (index !== -1) {\n      if (type === 'filter') {\n        action.filterableFields.splice(index, 1)\n      } else {\n        action.sortableFields.splice(index, 1)\n      }\n      this.notifyChange()\n      this.requestUpdate()\n    }\n  }\n\n  addFilterField(fieldKey: string): void {\n    const { action } = this\n    if (!action) {\n      throw new Error('No action is set.')\n    }\n    if (!action.filterableFields.includes(fieldKey)) {\n      action.filterableFields.push(fieldKey)\n      this.notifyChange()\n      this.requestUpdate()\n    }\n  }\n\n  removeFilterField(fieldKey: string): void {\n    const { action } = this\n    if (!action) {\n      throw new Error('No action is set.')\n    }\n    const index = action.filterableFields.indexOf(fieldKey)\n    if (index !== -1) {\n      action.filterableFields.splice(index, 1)\n      this.notifyChange()\n      this.requestUpdate()\n    }\n  }\n\n  protected handleAddSortField(e: CustomEvent<UiListSelection>): void {\n    const item = e.detail.item as UiMenuItemElement\n    if (!item.value) {\n      return\n    }\n    this.addSortField(item.value)\n  }\n\n  addSortField(fieldKey: string): void {\n    const { action } = this\n    if (!action) {\n      throw new Error('No action is set.')\n    }\n    if (!action.sortableFields.includes(fieldKey)) {\n      action.sortableFields.push(fieldKey)\n      this.notifyChange()\n      this.requestUpdate()\n    }\n  }\n\n  removeSortField(fieldKey: string): void {\n    const { action } = this\n    if (!action) {\n      throw new Error('No action is set.')\n    }\n    const index = action.sortableFields.indexOf(fieldKey)\n    if (index !== -1) {\n      action.sortableFields.splice(index, 1)\n      this.notifyChange()\n      this.requestUpdate()\n    }\n  }\n\n  protected handleConfigurationChange(): void {\n    this.notifyChange()\n  }\n\n  protected override render(): TemplateResult | typeof nothing {\n    if (!this.exposed || !this.entity || !this.action) {\n      return nothing\n    }\n    return html`<div class=\"container\">${this.renderHeader()} ${this.renderTabs()} ${this.renderTabContent()}</div>`\n  }\n\n  /**\n   * Renders a template of the editor header.\n   */\n  protected renderHeader(): TemplateResult {\n    const { entity } = this\n    let label = 'List action'\n    if (entity) {\n      label = entity.info.getLabel() + ': List action'\n    }\n    return html`<div class=\"intro\">\n      <div class=\"header\">\n        <ui-icon>${apiActionKindToIcon('list')}</ui-icon>\n        <span class=\"headline-medium\">${label}</span>\n        ${this.renderCloseButton()}\n      </div>\n      <div class=\"body-medium description\">List action allows performing pagination on a collection of resources.</div>\n    </div>`\n  }\n\n  /**\n   * Renders the tabs navigation.\n   */\n  protected renderTabs(): TemplateResult {\n    return html`<ui-tabs\n      class=\"tabs\"\n      .activeTabIndex=\"${this.activeTab}\"\n      @change=\"${this.handleTabChange}\"\n      priority=\"secondary\"\n    >\n      <ui-tab>Configuration</ui-tab>\n      <ui-tab>Access</ui-tab>\n      <ui-tab>Limits</ui-tab>\n    </ui-tabs>`\n  }\n\n  /**\n   * Renders the content for the currently active tab.\n   */\n  protected renderTabContent(): TemplateResult | typeof nothing {\n    if (!this.action) {\n      return nothing\n    }\n    switch (this.activeTab) {\n      case 0:\n        return this.renderConfigurationTab()\n      case 1:\n        return this.renderAccessTab()\n      case 2:\n        return this.renderLimitsTab()\n      default:\n        return nothing\n    }\n  }\n\n  /**\n   * Renders the Configuration tab content.\n   */\n  protected renderConfigurationTab(): TemplateResult | typeof nothing {\n    if (!this.action) {\n      return nothing\n    }\n    return html`<div class=\"configuration-tab\">\n      ${this.renderPaginationConfiguration(this.action)} ${this.renderFiltersConfiguration(this.action, this.indexed)}\n      ${this.renderSortConfiguration(this.action, this.indexed)}\n    </div>`\n  }\n\n  /**\n   * Renders the Access tab content.\n   */\n  protected renderAccessTab(): TemplateResult {\n    return html`<div class=\"config-section\">\n      <api-modeling-access-configuration\n        .model=\"${this.model}\"\n        domainKey=\"${this.exposed?.key || ''}\"\n        operation=\"list\"\n        target=\"action\"\n        class=\"access-configuration\"\n        @change=\"${this.handleConfigurationChange}\"\n      ></api-modeling-access-configuration>\n    </div>`\n  }\n\n  /**\n   * Renders the Limits tab content.\n   */\n  protected renderLimitsTab(): TemplateResult {\n    return html`<div class=\"config-section\">\n      <api-modeling-rate-limiting\n        .model=\"${this.model}\"\n        domainKey=\"${this.exposed?.key || ''}\"\n        operation=\"list\"\n        target=\"action\"\n        class=\"rate-limiting-configuration\"\n        @change=\"${this.handleConfigurationChange}\"\n      ></api-modeling-rate-limiting>\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 renderPaginationConfiguration(action: ListAction): TemplateResult {\n    const { pagination } = action\n    const strategy = pagination?.kind || 'offset'\n    const defaultPageSize = pagination?.pageSize || 30\n\n    return html`<div class=\"pagination-configuration config-section\">\n      <div class=\"config-intro\">\n        <div class=\"section-header\">\n          <span class=\"title-large\">Pagination</span>\n          ${renderHelp('modeling', 'api:list-action:pagination')}\n        </div>\n        <div class=\"section-description body-medium\">\n          Configure the pagination strategy to allow listing resources in this collection.\n        </div>\n      </div>\n\n      <div class=\"row input-row\">\n        <ui-select\n          class=\"input\"\n          label=\"Pagination strategy\"\n          .value=\"${strategy}\"\n          @change=\"${this.handlePaginationStrategyChange}\"\n        >\n          <ui-option value=\"offset\">Offset pagination</ui-option>\n          <ui-option value=\"cursor\">Cursor pagination</ui-option>\n        </ui-select>\n      </div>\n\n      <div class=\"row input-row\">\n        <ui-outlined-text-field\n          class=\"input\"\n          label=\"Default page size\"\n          type=\"number\"\n          .value=\"${String(defaultPageSize)}\"\n          min=\"1\"\n          max=\"100\"\n          @change=\"${this.handleDefaultPageSizeChange}\"\n        ></ui-outlined-text-field>\n      </div>\n    </div>`\n  }\n\n  protected renderFiltersConfiguration(action: ListAction, indexed: DomainProperty[]): TemplateResult {\n    const { filterableFields: selected } = action\n    const availableFields = indexed.filter((property) => !selected.includes(property.key))\n    const hasAvailableFields = availableFields.length > 0\n\n    return html`<div class=\"filters-configuration config-section\">\n      <div class=\"config-intro\">\n        <div class=\"section-header\">\n          <span class=\"title-large\">Filters</span>\n          ${renderHelp('modeling', 'api:list-action:filters')}\n        </div>\n        <div class=\"section-description body-medium\">Fields from the entity that can be used for filtering.</div>\n      </div>\n\n      <ui-button class=\"add-button\" color=\"tonal\" popovertarget=\"filters-menu\" ?disabled=\"${!hasAvailableFields}\">\n        <ui-icon slot=\"icon\" icon=\"add\"></ui-icon>\n        Add field\n      </ui-button>\n      <ui-menu id=\"filters-menu\" popover=\"auto\" @select=\"${this.handleAddFilterField}\">\n        ${availableFields.map(\n          (property) => html`<ui-menu-item value=\"${property.key}\">${property.info.getLabel()}</ui-menu-item>`\n        )}\n      </ui-menu>\n      ${selected.length > 0\n        ? html`<ui-list class=\"fields-list\" delegateFocus\n            >${selected.map((fieldKey) => this.renderFieldListItem(fieldKey, indexed, 'filter'))}</ui-list\n          >`\n        : nothing}\n    </div>`\n  }\n\n  protected renderFieldListItem(fieldKey: string, indexed: DomainProperty[], type: 'filter' | 'sort'): TemplateResult {\n    const property = indexed.find((p) => p.key === fieldKey)\n    const title = property?.info?.getLabel() || fieldKey\n    const description = property?.info?.description\n    const icon = property ? getPropertyIcon(property) : 'questionMark'\n\n    return html`<ui-list-item static class=\"field-list-item\">\n      <span slot=\"start\">\n        <ui-icon icon=\"${icon}\"></ui-icon>\n      </span>\n      <span>${title}</span>\n      ${description ? html`<span slot=\"supporting-text\">${description}</span>` : nothing}\n      <ui-icon-button\n        slot=\"end\"\n        color=\"standard\"\n        @click=\"${() => this.handleRemoveField(fieldKey, type)}\"\n        aria-label=\"Remove filter field\"\n        inwardFocus\n      >\n        <ui-icon icon=\"deleteOutline\"></ui-icon>\n      </ui-icon-button>\n    </ui-list-item>`\n  }\n\n  protected renderSortConfiguration(action: ListAction, indexed: DomainProperty[]): TemplateResult {\n    const { sortableFields: selected } = action\n    const availableFields = indexed.filter((property) => !selected.includes(property.key))\n    const hasAvailableFields = availableFields.length > 0\n\n    return html`<div class=\"sort-configuration config-section\">\n      <div class=\"config-intro\">\n        <div class=\"section-header\">\n          <span class=\"title-large\">Sort fields</span>\n          ${renderHelp('modeling', 'api:list-action:sort-fields')}\n        </div>\n        <div class=\"section-description body-medium\">Fields from the entity that can be used for sorting.</div>\n      </div>\n\n      <ui-button class=\"add-button\" color=\"tonal\" popovertarget=\"sort-menu\" ?disabled=\"${!hasAvailableFields}\">\n        <ui-icon slot=\"icon\" icon=\"add\"></ui-icon>\n        Add field\n      </ui-button>\n      <ui-menu id=\"sort-menu\" popover=\"auto\" @select=\"${this.handleAddSortField}\">\n        ${availableFields.map(\n          (property) => html`<ui-menu-item value=\"${property.key}\">${property.info.getLabel()}</ui-menu-item>`\n        )}\n      </ui-menu>\n\n      ${selected.length > 0\n        ? html`<ui-list class=\"fields-list\" delegateFocus\n            >${selected.map((fieldKey) => this.renderFieldListItem(fieldKey, indexed, 'sort'))}</ui-list\n          >`\n        : nothing}\n    </div>`\n  }\n}\n"]}

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

@@ -0,0 +1,100 @@
+import { type TemplateResult, type PropertyValues, nothing } from 'lit';
+import { type DomainAssociation, type MatchUserRoleAccessRule, type AccessRule, type ApiModel, type DomainProperty, type DomainEntity } from '@api-client/core/browser.js';
+import { ApiEditor } from './ApiEditor.js';
+import type { ApiModelAccessTarget, ApiModelOperationName } from '../types.js';
+/**
+ * An editor for configuring access settings of the API.
+ * Access settings can be added either to the API itself, on an endpoint (exposed entity), or to individual operations.
+ *
+ * This editor doesn't support the dirty state. Any changes made in the editor are immediately reflected in the model.
+ */
+export default class ApiModelingAccessConfiguration extends ApiEditor {
+    /**
+     * The operation of the access configuration.
+     * Can be one of: `list`, `read`, `create`, `update`, `delete`, or `search`.
+     *
+     * This property is only relevant when the `target` property is set to `action`.
+     * If the `target` property is set to `api` or `endpoint`, this property is ignored.
+     *
+     * If the value is not set, the editor will not render anything.
+     * @attribute
+     */
+    accessor operation: ApiModelOperationName | undefined;
+    /**
+     * The target of the access configuration.
+     * Can be one of: `api`, `action`, or `endpoint`.
+     *
+     * When the value is set to `api`, the `operation` and `domainKey` properties are ignored.
+     * When the value is set to `action`, the `operation` property must be set and the `domainKey` property
+     * must point to an exposed entity.
+     * When the value is set to `endpoint`, the `operation` property is ignored and the `domainKey` property
+     * must point to an exposed entity.
+     *
+     * If the value is not set, the editor will not render anything.
+     * @attribute
+     */
+    accessor target: ApiModelAccessTarget | undefined;
+    /**
+     * The access rules being edited.
+     * This property is set when the `model`, `domainKey`, `operation`, or `target` properties change.
+     * The editor should use this property to render the access rules and allow editing them.
+     *
+     * Note, it is a direct reference to the underlying model. Any changes to this array or its items
+     * will be reflected in the model.
+     */
+    accessor rules: AccessRule[];
+    /**
+     * The domain property of the user object in the domain model that has the UserRole semantic.
+     */
+    accessor userRoleProperty: DomainProperty | null;
+    /**
+     * An association of the exposed entity that has the ResourceOwner semantic.
+     */
+    accessor resourceOwnerAssociation: DomainAssociation | null;
+    constructor();
+    protected willUpdate(cp: PropertyValues<this>): void;
+    protected resetModel(): void;
+    protected setupModel(model?: ApiModel, domainKey?: string): void | Promise<void>;
+    protected setupRules(model: ApiModel, target: ApiModelAccessTarget, domainKey?: string): void;
+    protected setupUserRoleProperty(model: ApiModel): void;
+    protected analyzeUserEntity(entity: DomainEntity): void;
+    /**
+     * Finds and sets the resource owner association for the exposed entity.
+     * @param model The API model
+     * @param target The target of the editor
+     * @param domainKey The exposed entity id.
+     */
+    protected setupResourceOwnerAssociation(model: ApiModel, target: ApiModelAccessTarget, domainKey?: string): void;
+    protected handleAddModeSelect(e: CustomEvent): void;
+    /**
+     * Adds an empty access rule of the given type to the model.
+     * @param rule The rule to add
+     */
+    addEmptyRule(rule: AccessRule['type']): void;
+    protected synchronizeModel(): void;
+    protected handleRuleDelete(e: Event): void;
+    protected handleAddDomain(e: Event): void;
+    protected handleDomainDelete(e: Event): void;
+    protected handleDomainChange(e: Event): void;
+    protected handleUserRoleChange(e: Event): void;
+    protected render(): TemplateResult | typeof nothing;
+    protected renderIntro(): TemplateResult;
+    protected renderAddButton(): TemplateResult;
+    protected renderRules(): TemplateResult | typeof nothing;
+    protected renderRule(rule: AccessRule, index: number): TemplateResult;
+    protected renderRuleHeader(title: string, helpId: string, index: number): TemplateResult;
+    protected renderRuleDescription(description: string): TemplateResult;
+    protected renderPublicRule(index: number): TemplateResult;
+    protected renderAuthenticatedRule(index: number): TemplateResult;
+    protected renderResourceOwnerRule(index: number): TemplateResult;
+    protected renderResourceOwnerRuleDetails(): TemplateResult;
+    protected renderMatchUserRoleRule(rule: MatchUserRoleAccessRule, index: number): TemplateResult;
+    protected renderUserRoles(rule: MatchUserRoleAccessRule, ruleIndex: number): TemplateResult;
+    protected renderRoleInput(roles: string[], role: string, ruleIndex: number): TemplateResult;
+    protected renderMatchEmailDomainRule(rule: Extract<AccessRule, {
+        type: 'matchEmailDomain';
+    }>, index: number): TemplateResult;
+    protected renderEmailDomains(domains: string[], ruleIndex: number): TemplateResult;
+    protected renderDomainInput(domain: string, index: number, ruleIndex: number): TemplateResult;
+}
+//# sourceMappingURL=ApiModelingAccessConfiguration.d.ts.map