@api-client/ui 0.5.58 → 0.6.0

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

@@ -0,0 +1,492 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { html, LitElement } from 'lit';
+import { state, property } from 'lit/decorators.js';
+import { TEMPLATE_METADATA_REGISTRY, TEMPLATE_CATEGORIES, searchTemplates, getTemplatesByCategory, } from '@api-client/core/modeling/templates/meta/index.js';
+export const availableCategories = Object.keys(TEMPLATE_CATEGORIES);
+/**
+ * Generates an icon name for the DomainProperty that illustrate its primary purpose.
+ */
+export function getPropertyIcon(p) {
+    if (p.primary) {
+        return 'key';
+    }
+    switch (p.type) {
+        // case 'integer':
+        case 'number':
+            return 'number';
+        case 'date':
+            return 'calendarToday';
+        case 'time':
+            return 'schedule';
+        case 'datetime':
+            return 'event';
+        case 'boolean':
+            return 'checkCircle';
+        case 'binary':
+            return 'draft';
+        default:
+            return 'textFields';
+    }
+}
+let DomainTemplateBrowser = (() => {
+    let _classSuper = LitElement;
+    let _query_decorators;
+    let _query_initializers = [];
+    let _query_extraInitializers = [];
+    let _category_decorators;
+    let _category_initializers = [];
+    let _category_extraInitializers = [];
+    let _templates_decorators;
+    let _templates_initializers = [];
+    let _templates_extraInitializers = [];
+    let _previewTemplate_decorators;
+    let _previewTemplate_initializers = [];
+    let _previewTemplate_extraInitializers = [];
+    return class DomainTemplateBrowser extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _query_decorators = [property({ type: String })];
+            _category_decorators = [property({ type: String })];
+            _templates_decorators = [state()];
+            _previewTemplate_decorators = [state()];
+            __esDecorate(this, null, _query_decorators, { kind: "accessor", name: "query", static: false, private: false, access: { has: obj => "query" in obj, get: obj => obj.query, set: (obj, value) => { obj.query = value; } }, metadata: _metadata }, _query_initializers, _query_extraInitializers);
+            __esDecorate(this, null, _category_decorators, { kind: "accessor", name: "category", static: false, private: false, access: { has: obj => "category" in obj, get: obj => obj.category, set: (obj, value) => { obj.category = value; } }, metadata: _metadata }, _category_initializers, _category_extraInitializers);
+            __esDecorate(this, null, _templates_decorators, { kind: "accessor", name: "templates", static: false, private: false, access: { has: obj => "templates" in obj, get: obj => obj.templates, set: (obj, value) => { obj.templates = value; } }, metadata: _metadata }, _templates_initializers, _templates_extraInitializers);
+            __esDecorate(this, null, _previewTemplate_decorators, { kind: "accessor", name: "previewTemplate", static: false, private: false, access: { has: obj => "previewTemplate" in obj, get: obj => obj.previewTemplate, set: (obj, value) => { obj.previewTemplate = value; } }, metadata: _metadata }, _previewTemplate_initializers, _previewTemplate_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #query_accessor_storage = __runInitializers(this, _query_initializers, void 0);
+        /**
+         * The user entered search query to filter the templates.
+         * If not set, all templates are shown (unless filtered by category).
+         * @attribute
+         */
+        get query() { return this.#query_accessor_storage; }
+        set query(value) { this.#query_accessor_storage = value; }
+        #category_accessor_storage = (__runInitializers(this, _query_extraInitializers), __runInitializers(this, _category_initializers, void 0));
+        /**
+         * The selected template category to filter the list.
+         * If not set, all categories are included.
+         * @attribute
+         */
+        get category() { return this.#category_accessor_storage; }
+        set category(value) { this.#category_accessor_storage = value; }
+        #templates_accessor_storage = (__runInitializers(this, _category_extraInitializers), __runInitializers(this, _templates_initializers, [...Object.values(TEMPLATE_METADATA_REGISTRY)]
+        /**
+         * The currently previewed template. When set, the component renders the preview view instead of the list.
+         */
+        ));
+        /**
+         * The internal list of filtered templates to render in the UI.
+         * This is computed based on `query` and `category`.
+         */
+        get templates() { return this.#templates_accessor_storage; }
+        set templates(value) { this.#templates_accessor_storage = value; }
+        #previewTemplate_accessor_storage = (__runInitializers(this, _templates_extraInitializers), __runInitializers(this, _previewTemplate_initializers, void 0));
+        /**
+         * The currently previewed template. When set, the component renders the preview view instead of the list.
+         */
+        get previewTemplate() { return this.#previewTemplate_accessor_storage; }
+        set previewTemplate(value) { this.#previewTemplate_accessor_storage = value; }
+        /**
+         * Handles keydown events on the search input.
+         * Triggers a search on Enter or resets on Escape.
+         */
+        handleSearchKeydown(e) {
+            const input = e.currentTarget;
+            const value = input.value.trim();
+            if (e.key === 'Enter' && value) {
+                this.search(value);
+            }
+            else if (e.key === 'Escape') {
+                e.preventDefault();
+                e.stopPropagation();
+                input.value = '';
+                this.search();
+            }
+        }
+        /**
+         * Performs an in-memory search for templates matching the provided query.
+         * Updates the `templates` state with the search results.
+         *
+         * @param value The search query. If empty, resets the search.
+         */
+        search(value) {
+            this.query = value;
+            if (!value) {
+                this.templates = [...Object.values(TEMPLATE_METADATA_REGISTRY)];
+            }
+            else {
+                this.templates = searchTemplates(value);
+            }
+        }
+        handleFilterClick(e) {
+            const target = e.target;
+            const value = target.dataset.value;
+            // Toggle category selection
+            if (this.category === value) {
+                return;
+            }
+            if (value === '') {
+                this.category = undefined;
+                this.templates = [...Object.values(TEMPLATE_METADATA_REGISTRY)];
+            }
+            else {
+                this.category = value;
+                this.templates = getTemplatesByCategory(this.category);
+            }
+        }
+        handleTemplateSelect(e) {
+            const templateId = e.currentTarget.dataset.id;
+            if (!templateId) {
+                return;
+            }
+            // Dispatch selection event
+            this.dispatchEvent(new CustomEvent('selectionchange', {
+                detail: { selected: templateId },
+                bubbles: false,
+            }));
+        }
+        handleTemplatePreview(e) {
+            e.stopPropagation();
+            const templateId = e.currentTarget.dataset.id;
+            if (!templateId) {
+                return;
+            }
+            this.previewTemplate = this.templates.find((t) => t.id === templateId);
+        }
+        handleClosePreview() {
+            this.previewTemplate = undefined;
+        }
+        render() {
+            if (this.previewTemplate) {
+                return this.renderPreviewMode();
+            }
+            return html `
+      <div class="controls">${this.renderTopControls()} ${this.renderCategoryFilters()}</div>
+      ${this.templates.length > 0 ? this.renderTemplatesGrid() : this.renderEmptyState()}
+    `;
+        }
+        renderTopControls() {
+            return html `
+      <div class="top-row">
+        <div class="search-group">${this.renderSearchInput()}</div>
+      </div>
+    `;
+        }
+        renderSearchInput() {
+            return html `
+      <ui-outlined-text-field
+        id="template-search"
+        label="Search templates..."
+        type="search"
+        class="search"
+        .value="${this.query ?? ''}"
+        @keydown="${this.handleSearchKeydown}"
+      >
+        <ui-icon slot="prefix">search</ui-icon>
+      </ui-outlined-text-field>
+    `;
+        }
+        renderCategoryFilters() {
+            return html `
+      <div class="category-tabs">
+        <ui-button-group type="connected">
+          <ui-button
+            color="tonal"
+            size="s"
+            toggle
+            data-value=""
+            ?selected="${!this.category}"
+            @click="${this.handleFilterClick}"
+          >
+            All
+          </ui-button>
+          ${availableCategories.map((category) => {
+                const isSelected = this.category === category;
+                return html `<ui-button
+              color="tonal"
+              size="s"
+              toggle
+              data-value="${category}"
+              ?selected="${isSelected}"
+              @click="${this.handleFilterClick}"
+            >
+              ${category}
+            </ui-button>`;
+            })}
+        </ui-button-group>
+      </div>
+    `;
+        }
+        renderTemplatesGrid() {
+            return html `
+      <div class="templates-grid">${this.templates.map((template) => this.renderTemplateCard(template))}</div>
+    `;
+        }
+        renderTemplateCard(template) {
+            // Use available properties from DomainTemplate interface
+            const templateName = template.name || 'Unnamed Template';
+            const templateDescription = template.description || 'No description available';
+            return html `
+      <div class="template-card">
+        <h3 class="template-title display-small">${templateName}</h3>
+        <p class="template-description body-medium">${templateDescription}</p>
+
+        <div class="template-actions">
+          <ui-button data-id="${template.id}" color="outlined" size="s" @click="${this.handleTemplatePreview}">
+            Details
+          </ui-button>
+          <ui-button color="filled" size="s" data-id="${template.id}" @click="${this.handleTemplateSelect}">
+            Use template
+          </ui-button>
+        </div>
+      </div>
+    `;
+        }
+        renderEmptyState() {
+            const message = this.query
+                ? `No templates found for "${this.query}"`
+                : this.category
+                    ? `No templates found in "${this.category}" category`
+                    : 'No templates available';
+            const description = this.query || this.category ? 'Try adjusting your search or filters' : 'Templates will appear here when available';
+            return html `
+      <div class="empty-state">
+        <ui-icon class="empty-icon">search_off</ui-icon>
+        <h3 class="empty-title title-large">${message}</h3>
+        <p class="empty-description body-large">${description}</p>
+      </div>
+    `;
+        }
+        renderPreviewMode() {
+            return html `
+      <div class="preview-header">
+        <ui-button color="text" @click="${this.handleClosePreview}">
+          <ui-icon slot="icon">arrow_back</ui-icon>
+          Back to Templates
+        </ui-button>
+      </div>
+      <div class="preview-main">${this.renderTemplateDetails(this.previewTemplate)}</div>
+    `;
+        }
+        renderTemplateDetails(template) {
+            return html `
+      <div class="template-details">
+        <h1 class="template-details-title display-small">${template.name}</h1>
+        <div class="template-details-header">
+          <div class="template-details-info">
+            <p class="template-details-description">${template.description}</p>
+            <div class="template-metadata">
+              <div class="metadata-item">
+                <span class="metadata-label">Author:</span>
+                <span class="metadata-value">${template.author}</span>
+              </div>
+              <div class="metadata-item">
+                <span class="metadata-label">Version:</span>
+                <span class="metadata-value">${template.version}</span>
+              </div>
+              <div class="metadata-item">
+                <span class="metadata-label">Created:</span>
+                <span class="metadata-value">${new Date(template.createdAt).toLocaleDateString()}</span>
+              </div>
+              <div class="metadata-item">
+                <span class="metadata-label">Updated:</span>
+                <span class="metadata-value">${new Date(template.updatedAt).toLocaleDateString()}</span>
+              </div>
+            </div>
+            <div class="template-tags">
+              ${template.tags.map((tag) => html `<span class="template-tag">${tag}</span>`)}
+            </div>
+          </div>
+          <div class="template-details-actions">
+            <ui-button color="filled" size="s" data-id="${template.id}" @click="${this.handleTemplateSelect}">
+              <ui-icon slot="icon">download</ui-icon>
+              Use This Template
+            </ui-button>
+          </div>
+        </div>
+
+        <div class="template-structure">
+          <h2 class="structure-title title-large">Data Domain Structure</h2>
+          ${this.renderDomainStructure(template)}
+        </div>
+      </div>
+    `;
+        }
+        renderDomainStructure(template) {
+            const { structure } = template;
+            const { namespaces } = structure;
+            return html `<div class="domain-structure">${this.renderNamespaces(namespaces)}</div>`;
+        }
+        renderNamespaces(namespaces) {
+            return html `
+      <div class="namespaces-section">
+        <h3 class="title-medium">Namespaces</h3>
+        ${namespaces.map((namespace) => html `
+            <div class="namespace-item">
+              <div class="namespace-header">
+                <ui-icon class="namespace-icon" icon="schemaNamespace"></ui-icon>
+                <h4 class="title-small">${namespace.displayName || namespace.name}</h4>
+              </div>
+              ${namespace.description
+                ? html `<p class="namespace-description body-medium">${namespace.description}</p>`
+                : ''}
+              ${this.renderModels(namespace.models)}
+            </div>
+          `)}
+      </div>
+    `;
+        }
+        renderModels(models) {
+            return html `
+      <div class="models-section">
+        ${models.map((model) => html `
+            <div class="domain-model">
+              <div class="domain-model-header">
+                <ui-icon class="model-icon" icon="schemaModel"></ui-icon>
+                <h5 class="title-small">${model.displayName || model.name}</h5>
+              </div>
+              ${model.description ? html `<p class="model-description body-medium">${model.description}</p>` : ''}
+              <div class="model-entities">${model.entities.map((entity) => this.renderDomainEntity(entity))}</div>
+            </div>
+          `)}
+      </div>
+    `;
+        }
+        renderDomainEntity(entity) {
+            return html `
+      <div class="domain-entity">
+        <div class="entity-header">
+          <div class="entity-title">
+            <ui-icon class="entity-icon" icon="schemaEntity"></ui-icon>
+            <h6 class="entity-name label-large">${entity.displayName || entity.name}</h6>
+            ${entity.deprecated ? html `<span class="deprecated-badge">Deprecated</span>` : ''}
+          </div>
+          ${entity.description ? html `<p class="entity-description body-medium">${entity.description}</p>` : ''}
+        </div>
+        ${entity.semantics?.length > 0
+                ? html `
+              <div class="entity-semantics">
+                <span class="semantics-label">Semantics:</span>
+                ${entity.semantics.map((semantic) => html `<span class="semantic-tag">${semantic}</span>`)}
+              </div>
+            `
+                : ''}
+        ${entity.properties?.length > 0
+                ? html `
+              <div class="entity-section">
+                <h5 class="section-title title-small">Properties (${entity.propertyCount})</h5>
+                <div class="properties-list">${entity.properties.map((prop) => this.renderProperty(prop))}</div>
+              </div>
+            `
+                : ''}
+        ${entity.associations?.length > 0
+                ? html `
+              <div class="entity-section">
+                <h5 class="section-title title-small">Associations (${entity.associationCount})</h5>
+                <div class="associations-list">
+                  ${entity.associations.map((assoc) => this.renderAssociation(assoc))}
+                </div>
+              </div>
+            `
+                : ''}
+      </div>
+    `;
+        }
+        renderProperty(property) {
+            const badges = [];
+            if (property.required)
+                badges.push('Required');
+            if (property.primary)
+                badges.push('Primary');
+            if (property.unique)
+                badges.push('Unique');
+            if (property.readOnly)
+                badges.push('Read-only');
+            if (property.writeOnly)
+                badges.push('Write-only');
+            if (property.multiple)
+                badges.push('Multiple');
+            if (property.deprecated)
+                badges.push('Deprecated');
+            const icon = getPropertyIcon(property);
+            return html `
+      <div class="property-item ${property.deprecated ? 'deprecated' : ''}">
+        <div class="property-header">
+          <ui-icon class="property-icon" .icon=${icon}></ui-icon>
+          <span class="label-large">${property.displayName || property.name}</span>
+          <span class="property-type body-small">${property.type}</span>
+        </div>
+        ${property.description ? html `<p class="property-description body-medium">${property.description}</p>` : ''}
+        ${badges.length > 0
+                ? html `<div class="property-badges">
+              ${badges.map((badge) => html `<span class="property-badge body-small">${badge}</span>`)}
+            </div>`
+                : ''}
+        ${property.defaultValue
+                ? html `<div class="property-default">Default: <code>${property.defaultValue}</code></div>`
+                : ''}
+        ${property.enumValues && property.enumValues.length > 0
+                ? html `<div class="property-enum">
+              Values: ${property.enumValues.map((val) => html `<code>${val}</code>`)}
+            </div>`
+                : ''}
+        ${property.semantics?.length > 0
+                ? html `
+              <div class="property-semantics">
+                ${property.semantics.map((semantic) => html `<span class="semantic-tag">${semantic}</span>`)}
+              </div>
+            `
+                : ''}
+      </div>
+    `;
+        }
+        renderAssociation(association) {
+            const badges = [];
+            if (association.required)
+                badges.push('Required');
+            if (association.multiple)
+                badges.push('Multiple');
+            if (association.readOnly)
+                badges.push('Read-only');
+            return html `
+      <div class="association-item">
+        <div class="association-header">
+          <ui-icon class="association-icon">link</ui-icon>
+          <span class="label-large">${association.displayName || association.name}</span>
+          <span class="association-targets">${association.targetEntities.join(', ')}</span>
+        </div>
+        ${association.description ? html `<p class="association-description">${association.description}</p>` : ''}
+        ${badges.length > 0
+                ? html `<div class="association-badges">
+              ${badges.map((badge) => html `<span class="association-badge">${badge}</span>`)}
+            </div>`
+                : ''}
+        ${association.semantics?.length > 0
+                ? html `
+              <div class="association-semantics">
+                ${association.semantics.map((semantic) => html `<span class="semantic-tag">${semantic}</span>`)}
+              </div>
+            `
+                : ''}
+      </div>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _previewTemplate_extraInitializers);
+        }
+    };
+})();
+/**
+ * A browser component for exploring and selecting domain templates.
+ * It provides the UI for searching, filtering, previewing, and selecting data domain templates.
+ *
+ * It manages the filtering state internally but allows property binding for query and category.
+ *
+ * @fires selectionchange - Dispatched when the user selects a template item. The detail object contains the `selected`
+ *                          status which is the template ID (e.g. `CustomEvent<{ selected: string }>`).
+ */
+export default DomainTemplateBrowser;
+//# sourceMappingURL=DomainTemplateBrowser.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DomainTemplateBrowser.js","sourceRoot":"","sources":["../../../../src/modeling/internals/DomainTemplateBrowser.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, type TemplateResult, LitElement } from 'lit'\nimport { state, property } from 'lit/decorators.js'\nimport {\n  TEMPLATE_METADATA_REGISTRY,\n  TEMPLATE_CATEGORIES,\n  searchTemplates,\n  getTemplatesByCategory,\n} from '@api-client/core/modeling/templates/meta/index.js'\nimport type {\n  AssociationInfo,\n  DomainTemplate,\n  EntityInfo,\n  ModelInfo,\n  NamespaceInfo,\n  PropertyInfo,\n} from '@api-client/core/modeling/templates/types.js'\nimport type { IconType } from '../../md/icons/Icons.js'\n\nexport const availableCategories = Object.keys(TEMPLATE_CATEGORIES) as (keyof typeof TEMPLATE_CATEGORIES)[]\n\n/**\n * The selection detail object dispatched by the `selectionchange` event.\n */\nexport interface BrowseTemplatesSelection {\n  /**\n   * The key of the selected template\n   */\n  selected: string\n}\n\n/**\n * Generates an icon name for the DomainProperty that illustrate its primary purpose.\n */\nexport function getPropertyIcon(p: PropertyInfo): IconType {\n  if (p.primary) {\n    return 'key'\n  }\n  switch (p.type) {\n    // case 'integer':\n    case 'number':\n      return 'number'\n    case 'date':\n      return 'calendarToday'\n    case 'time':\n      return 'schedule'\n    case 'datetime':\n      return 'event'\n    case 'boolean':\n      return 'checkCircle'\n    case 'binary':\n      return 'draft'\n    default:\n      return 'textFields'\n  }\n}\n\n/**\n * A browser component for exploring and selecting domain templates.\n * It provides the UI for searching, filtering, previewing, and selecting data domain templates.\n *\n * It manages the filtering state internally but allows property binding for query and category.\n *\n * @fires selectionchange - Dispatched when the user selects a template item. The detail object contains the `selected`\n *                          status which is the template ID (e.g. `CustomEvent<{ selected: string }>`).\n */\nexport default class DomainTemplateBrowser extends LitElement {\n  /**\n   * The user entered search query to filter the templates.\n   * If not set, all templates are shown (unless filtered by category).\n   * @attribute\n   */\n  @property({ type: String }) accessor query: string | undefined\n\n  /**\n   * The selected template category to filter the list.\n   * If not set, all categories are included.\n   * @attribute\n   */\n  @property({ type: String }) accessor category: keyof typeof TEMPLATE_CATEGORIES | undefined\n\n  /**\n   * The internal list of filtered templates to render in the UI.\n   * This is computed based on `query` and `category`.\n   */\n  @state() accessor templates: DomainTemplate[] = [...Object.values(TEMPLATE_METADATA_REGISTRY)]\n\n  /**\n   * The currently previewed template. When set, the component renders the preview view instead of the list.\n   */\n  @state() accessor previewTemplate: DomainTemplate | undefined\n\n  /**\n   * Handles keydown events on the search input.\n   * Triggers a search on Enter or resets on Escape.\n   */\n  protected handleSearchKeydown(e: KeyboardEvent): void {\n    const input = e.currentTarget as HTMLInputElement\n    const value = input.value.trim()\n    if (e.key === 'Enter' && value) {\n      this.search(value)\n    } else if (e.key === 'Escape') {\n      e.preventDefault()\n      e.stopPropagation()\n      input.value = ''\n      this.search()\n    }\n  }\n\n  /**\n   * Performs an in-memory search for templates matching the provided query.\n   * Updates the `templates` state with the search results.\n   *\n   * @param value The search query. If empty, resets the search.\n   */\n  search(value?: string): void {\n    this.query = value\n    if (!value) {\n      this.templates = [...Object.values(TEMPLATE_METADATA_REGISTRY)]\n    } else {\n      this.templates = searchTemplates(value)\n    }\n  }\n\n  protected handleFilterClick(e: Event): void {\n    const target = e.target as HTMLElement\n    const value = target.dataset.value\n    // Toggle category selection\n    if (this.category === value) {\n      return\n    }\n    if (value === '') {\n      this.category = undefined\n      this.templates = [...Object.values(TEMPLATE_METADATA_REGISTRY)]\n    } else {\n      this.category = value as keyof typeof TEMPLATE_CATEGORIES\n      this.templates = getTemplatesByCategory(this.category)\n    }\n  }\n\n  protected handleTemplateSelect(e: Event): void {\n    const templateId = (e.currentTarget as HTMLElement).dataset.id\n    if (!templateId) {\n      return\n    }\n    // Dispatch selection event\n    this.dispatchEvent(\n      new CustomEvent<BrowseTemplatesSelection>('selectionchange', {\n        detail: { selected: templateId },\n        bubbles: false,\n      })\n    )\n  }\n\n  protected handleTemplatePreview(e: Event): void {\n    e.stopPropagation()\n    const templateId = (e.currentTarget as HTMLElement).dataset.id\n    if (!templateId) {\n      return\n    }\n    this.previewTemplate = this.templates.find((t) => t.id === templateId)\n  }\n\n  protected handleClosePreview(): void {\n    this.previewTemplate = undefined\n  }\n\n  protected override render(): TemplateResult {\n    if (this.previewTemplate) {\n      return this.renderPreviewMode()\n    }\n\n    return html`\n      <div class=\"controls\">${this.renderTopControls()} ${this.renderCategoryFilters()}</div>\n      ${this.templates.length > 0 ? this.renderTemplatesGrid() : this.renderEmptyState()}\n    `\n  }\n\n  protected renderTopControls(): TemplateResult {\n    return html`\n      <div class=\"top-row\">\n        <div class=\"search-group\">${this.renderSearchInput()}</div>\n      </div>\n    `\n  }\n\n  protected renderSearchInput(): TemplateResult {\n    return html`\n      <ui-outlined-text-field\n        id=\"template-search\"\n        label=\"Search templates...\"\n        type=\"search\"\n        class=\"search\"\n        .value=\"${this.query ?? ''}\"\n        @keydown=\"${this.handleSearchKeydown}\"\n      >\n        <ui-icon slot=\"prefix\">search</ui-icon>\n      </ui-outlined-text-field>\n    `\n  }\n\n  protected renderCategoryFilters(): TemplateResult {\n    return html`\n      <div class=\"category-tabs\">\n        <ui-button-group type=\"connected\">\n          <ui-button\n            color=\"tonal\"\n            size=\"s\"\n            toggle\n            data-value=\"\"\n            ?selected=\"${!this.category}\"\n            @click=\"${this.handleFilterClick}\"\n          >\n            All\n          </ui-button>\n          ${availableCategories.map((category) => {\n            const isSelected = this.category === category\n            return html`<ui-button\n              color=\"tonal\"\n              size=\"s\"\n              toggle\n              data-value=\"${category}\"\n              ?selected=\"${isSelected}\"\n              @click=\"${this.handleFilterClick}\"\n            >\n              ${category}\n            </ui-button>`\n          })}\n        </ui-button-group>\n      </div>\n    `\n  }\n\n  protected renderTemplatesGrid(): TemplateResult {\n    return html`\n      <div class=\"templates-grid\">${this.templates.map((template) => this.renderTemplateCard(template))}</div>\n    `\n  }\n\n  protected renderTemplateCard(template: DomainTemplate): TemplateResult {\n    // Use available properties from DomainTemplate interface\n    const templateName = template.name || 'Unnamed Template'\n    const templateDescription = template.description || 'No description available'\n\n    return html`\n      <div class=\"template-card\">\n        <h3 class=\"template-title display-small\">${templateName}</h3>\n        <p class=\"template-description body-medium\">${templateDescription}</p>\n\n        <div class=\"template-actions\">\n          <ui-button data-id=\"${template.id}\" color=\"outlined\" size=\"s\" @click=\"${this.handleTemplatePreview}\">\n            Details\n          </ui-button>\n          <ui-button color=\"filled\" size=\"s\" data-id=\"${template.id}\" @click=\"${this.handleTemplateSelect}\">\n            Use template\n          </ui-button>\n        </div>\n      </div>\n    `\n  }\n\n  protected renderEmptyState(): TemplateResult {\n    const message = this.query\n      ? `No templates found for \"${this.query}\"`\n      : this.category\n        ? `No templates found in \"${this.category}\" category`\n        : 'No templates available'\n\n    const description =\n      this.query || this.category ? 'Try adjusting your search or filters' : 'Templates will appear here when available'\n\n    return html`\n      <div class=\"empty-state\">\n        <ui-icon class=\"empty-icon\">search_off</ui-icon>\n        <h3 class=\"empty-title title-large\">${message}</h3>\n        <p class=\"empty-description body-large\">${description}</p>\n      </div>\n    `\n  }\n\n  renderPreviewMode(): TemplateResult {\n    return html`\n      <div class=\"preview-header\">\n        <ui-button color=\"text\" @click=\"${this.handleClosePreview}\">\n          <ui-icon slot=\"icon\">arrow_back</ui-icon>\n          Back to Templates\n        </ui-button>\n      </div>\n      <div class=\"preview-main\">${this.renderTemplateDetails(this.previewTemplate as DomainTemplate)}</div>\n    `\n  }\n\n  protected renderTemplateDetails(template: DomainTemplate): TemplateResult {\n    return html`\n      <div class=\"template-details\">\n        <h1 class=\"template-details-title display-small\">${template.name}</h1>\n        <div class=\"template-details-header\">\n          <div class=\"template-details-info\">\n            <p class=\"template-details-description\">${template.description}</p>\n            <div class=\"template-metadata\">\n              <div class=\"metadata-item\">\n                <span class=\"metadata-label\">Author:</span>\n                <span class=\"metadata-value\">${template.author}</span>\n              </div>\n              <div class=\"metadata-item\">\n                <span class=\"metadata-label\">Version:</span>\n                <span class=\"metadata-value\">${template.version}</span>\n              </div>\n              <div class=\"metadata-item\">\n                <span class=\"metadata-label\">Created:</span>\n                <span class=\"metadata-value\">${new Date(template.createdAt).toLocaleDateString()}</span>\n              </div>\n              <div class=\"metadata-item\">\n                <span class=\"metadata-label\">Updated:</span>\n                <span class=\"metadata-value\">${new Date(template.updatedAt).toLocaleDateString()}</span>\n              </div>\n            </div>\n            <div class=\"template-tags\">\n              ${template.tags.map((tag) => html`<span class=\"template-tag\">${tag}</span>`)}\n            </div>\n          </div>\n          <div class=\"template-details-actions\">\n            <ui-button color=\"filled\" size=\"s\" data-id=\"${template.id}\" @click=\"${this.handleTemplateSelect}\">\n              <ui-icon slot=\"icon\">download</ui-icon>\n              Use This Template\n            </ui-button>\n          </div>\n        </div>\n\n        <div class=\"template-structure\">\n          <h2 class=\"structure-title title-large\">Data Domain Structure</h2>\n          ${this.renderDomainStructure(template)}\n        </div>\n      </div>\n    `\n  }\n\n  protected renderDomainStructure(template: DomainTemplate): TemplateResult {\n    const { structure } = template\n    const { namespaces } = structure\n\n    return html`<div class=\"domain-structure\">${this.renderNamespaces(namespaces)}</div>`\n  }\n\n  protected renderNamespaces(namespaces: NamespaceInfo[]): TemplateResult {\n    return html`\n      <div class=\"namespaces-section\">\n        <h3 class=\"title-medium\">Namespaces</h3>\n        ${namespaces.map(\n          (namespace) => html`\n            <div class=\"namespace-item\">\n              <div class=\"namespace-header\">\n                <ui-icon class=\"namespace-icon\" icon=\"schemaNamespace\"></ui-icon>\n                <h4 class=\"title-small\">${namespace.displayName || namespace.name}</h4>\n              </div>\n              ${namespace.description\n                ? html`<p class=\"namespace-description body-medium\">${namespace.description}</p>`\n                : ''}\n              ${this.renderModels(namespace.models)}\n            </div>\n          `\n        )}\n      </div>\n    `\n  }\n\n  protected renderModels(models: ModelInfo[]): TemplateResult {\n    return html`\n      <div class=\"models-section\">\n        ${models.map(\n          (model) => html`\n            <div class=\"domain-model\">\n              <div class=\"domain-model-header\">\n                <ui-icon class=\"model-icon\" icon=\"schemaModel\"></ui-icon>\n                <h5 class=\"title-small\">${model.displayName || model.name}</h5>\n              </div>\n              ${model.description ? html`<p class=\"model-description body-medium\">${model.description}</p>` : ''}\n              <div class=\"model-entities\">${model.entities.map((entity) => this.renderDomainEntity(entity))}</div>\n            </div>\n          `\n        )}\n      </div>\n    `\n  }\n\n  protected renderDomainEntity(entity: EntityInfo): TemplateResult {\n    return html`\n      <div class=\"domain-entity\">\n        <div class=\"entity-header\">\n          <div class=\"entity-title\">\n            <ui-icon class=\"entity-icon\" icon=\"schemaEntity\"></ui-icon>\n            <h6 class=\"entity-name label-large\">${entity.displayName || entity.name}</h6>\n            ${entity.deprecated ? html`<span class=\"deprecated-badge\">Deprecated</span>` : ''}\n          </div>\n          ${entity.description ? html`<p class=\"entity-description body-medium\">${entity.description}</p>` : ''}\n        </div>\n        ${entity.semantics?.length > 0\n          ? html`\n              <div class=\"entity-semantics\">\n                <span class=\"semantics-label\">Semantics:</span>\n                ${entity.semantics.map((semantic: string) => html`<span class=\"semantic-tag\">${semantic}</span>`)}\n              </div>\n            `\n          : ''}\n        ${entity.properties?.length > 0\n          ? html`\n              <div class=\"entity-section\">\n                <h5 class=\"section-title title-small\">Properties (${entity.propertyCount})</h5>\n                <div class=\"properties-list\">${entity.properties.map((prop) => this.renderProperty(prop))}</div>\n              </div>\n            `\n          : ''}\n        ${entity.associations?.length > 0\n          ? html`\n              <div class=\"entity-section\">\n                <h5 class=\"section-title title-small\">Associations (${entity.associationCount})</h5>\n                <div class=\"associations-list\">\n                  ${entity.associations.map((assoc) => this.renderAssociation(assoc))}\n                </div>\n              </div>\n            `\n          : ''}\n      </div>\n    `\n  }\n\n  protected renderProperty(property: PropertyInfo): TemplateResult {\n    const badges: string[] = []\n\n    if (property.required) badges.push('Required')\n    if (property.primary) badges.push('Primary')\n    if (property.unique) badges.push('Unique')\n    if (property.readOnly) badges.push('Read-only')\n    if (property.writeOnly) badges.push('Write-only')\n    if (property.multiple) badges.push('Multiple')\n    if (property.deprecated) badges.push('Deprecated')\n\n    const icon = getPropertyIcon(property)\n    return html`\n      <div class=\"property-item ${property.deprecated ? 'deprecated' : ''}\">\n        <div class=\"property-header\">\n          <ui-icon class=\"property-icon\" .icon=${icon}></ui-icon>\n          <span class=\"label-large\">${property.displayName || property.name}</span>\n          <span class=\"property-type body-small\">${property.type}</span>\n        </div>\n        ${property.description ? html`<p class=\"property-description body-medium\">${property.description}</p>` : ''}\n        ${badges.length > 0\n          ? html`<div class=\"property-badges\">\n              ${badges.map((badge) => html`<span class=\"property-badge body-small\">${badge}</span>`)}\n            </div>`\n          : ''}\n        ${property.defaultValue\n          ? html`<div class=\"property-default\">Default: <code>${property.defaultValue}</code></div>`\n          : ''}\n        ${property.enumValues && property.enumValues.length > 0\n          ? html`<div class=\"property-enum\">\n              Values: ${property.enumValues.map((val) => html`<code>${val}</code>`)}\n            </div>`\n          : ''}\n        ${property.semantics?.length > 0\n          ? html`\n              <div class=\"property-semantics\">\n                ${property.semantics.map((semantic) => html`<span class=\"semantic-tag\">${semantic}</span>`)}\n              </div>\n            `\n          : ''}\n      </div>\n    `\n  }\n\n  protected renderAssociation(association: AssociationInfo): TemplateResult {\n    const badges = []\n\n    if (association.required) badges.push('Required')\n    if (association.multiple) badges.push('Multiple')\n    if (association.readOnly) badges.push('Read-only')\n\n    return html`\n      <div class=\"association-item\">\n        <div class=\"association-header\">\n          <ui-icon class=\"association-icon\">link</ui-icon>\n          <span class=\"label-large\">${association.displayName || association.name}</span>\n          <span class=\"association-targets\">${association.targetEntities.join(', ')}</span>\n        </div>\n        ${association.description ? html`<p class=\"association-description\">${association.description}</p>` : ''}\n        ${badges.length > 0\n          ? html`<div class=\"association-badges\">\n              ${badges.map((badge: string) => html`<span class=\"association-badge\">${badge}</span>`)}\n            </div>`\n          : ''}\n        ${association.semantics?.length > 0\n          ? html`\n              <div class=\"association-semantics\">\n                ${association.semantics.map((semantic: string) => html`<span class=\"semantic-tag\">${semantic}</span>`)}\n              </div>\n            `\n          : ''}\n      </div>\n    `\n  }\n}\n"]}

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

@@ -0,0 +1,85 @@
+import { LitElement, nothing, type PropertyValues, type TemplateResult } from 'lit';
+import type { DomainValidation } from '@api-client/core/modeling/validation/rules.js';
+import type { DataDomain } from '@api-client/core/browser.js';
+/**
+ * An element that specializes in displaying a domain validation report.
+ * It is used in the context of the domain validation process.
+ *
+ * The report is generated elsewhere and passed to this element for display.
+ *
+ * @fires openissue {CustomEvent<SchemaSelectionInfo>} Fired when the user clicks on the "Open" button
+ *   of a validation issue.
+ *   The detail contains `SchemaSelectionInfo` with the entity/property/association to navigate to.
+ * @fires autofix - Fired when the user clicks on the "Auto fix" button.
+ */
+export default class DomainValidationReport extends LitElement {
+    #private;
+    /**
+     * The generated report of domain validation.
+     */
+    accessor report: DomainValidation[];
+    /**
+     * The domain that was validated.
+     * This is used to provide context for the validation report.
+     */
+    accessor domain: DataDomain | undefined;
+    /**
+     * When set to true, the UI will include an "Auto fix" button
+     * that allows the user to attempt to automatically fix issues in the report.
+     * The host must handle the `autofix` event to perform the actual fixing.
+     * @attribute
+     */
+    accessor withAutoFix: boolean;
+    /**
+     * The number of issues with the severity of "info".
+     */
+    accessor infoCount: number;
+    /**
+     * The number of issues with the severity of "warning".
+     */
+    accessor warningCount: number;
+    /**
+     * The number of issues with the severity of "error".
+     */
+    accessor errorCount: number;
+    /**
+     * Controls which severity levels are currently shown.
+     * Determines which validation messages are filtered and displayed.
+     */
+    accessor visibleSeverities: Set<"error" | "info" | "warning">;
+    /**
+     * Cached filtered report based on current severity filters.
+     * This improves performance by avoiding re-filtering on every render.
+     */
+    accessor filteredReport: DomainValidation[];
+    protected willUpdate(cp: PropertyValues<this>): void;
+    /**
+     * Computes the number of issues in the report based on their severity.
+     * This method is called whenever the `report` is updated.
+     */
+    protected computeIssueCounters(): void;
+    /**
+     * Sets the default filters based on available issues.
+     * By default shows errors. If no errors, shows warnings. Never shows notices by default.
+     */
+    protected setDefaultFilters(): void;
+    /**
+     * Updates the filtered report based on the current severity filters.
+     * This method is called whenever the visibility filters change.
+     */
+    protected updateFilteredReport(): void;
+    /**
+     * Handles the filter button click events.
+     * Toggles the visibility of validation messages by severity.
+     */
+    protected handleFilterClick(e: Event): void;
+    /**
+     * A handler for the "Open" button click event.
+     * It prepares the Intent data to be used to run the activity
+     * that will open the corresponding issue.
+     */
+    protected handleOpenIssue(e: Event): void;
+    handleAutoFix(): void;
+    render(): TemplateResult | typeof nothing;
+}
+//# sourceMappingURL=DomainValidationReport.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DomainValidationReport.d.ts","sourceRoot":"","sources":["../../../../src/modeling/internals/DomainValidationReport.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAGzF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+CAA+C,CAAA;AAErF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAE7D;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,UAAU;;IAC5D;;OAEG;IACwB,QAAQ,CAAC,MAAM,EAAE,gBAAgB,EAAE,CAAK;IAEnE;;;OAGG;IACyB,QAAQ,CAAC,MAAM,EAAE,UAAU,GAAG,SAAS,CAAA;IACnE;;;;;OAKG;IAC0B,QAAQ,CAAC,WAAW,UAAQ;IACzD;;OAEG;IACM,QAAQ,CAAC,SAAS,SAAI;IAC/B;;OAEG;IACM,QAAQ,CAAC,YAAY,SAAI;IAClC;;OAEG;IACM,QAAQ,CAAC,UAAU,SAAI;IAChC;;;OAGG;IACM,QAAQ,CAAC,iBAAiB,oCAA0C;IAC7E;;;OAGG;IACM,QAAQ,CAAC,cAAc,EAAE,gBAAgB,EAAE,CAAK;cAEtC,UAAU,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAY7D;;;OAGG;IACH,SAAS,CAAC,oBAAoB,IAAI,IAAI;IAMtC;;;OAGG;IACH,SAAS,CAAC,iBAAiB,IAAI,IAAI;IAUnC;;;OAGG;IACH,SAAS,CAAC,oBAAoB,IAAI,IAAI;IAMtC;;;OAGG;IACH,SAAS,CAAC,iBAAiB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAgB3C;;;;OAIG;IACH,SAAS,CAAC,eAAe,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IA0DzC,aAAa,IAAI,IAAI;IAIZ,MAAM,IAAI,cAAc,GAAG,OAAO,OAAO;CAkGnD"}