@api-client/ui 0.6.9 → 0.6.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.6.9",
+  "version": "0.6.10",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",

package/src/md/button/internals/group.styles.ts

@@ -4,6 +4,7 @@ import { css } from 'lit'
 export default css`
   :host {
     display: flex;
+    flex-wrap: wrap;
 
     --_gap: 8px;
     --_xs-radius: 16px;

package/src/modeling/domain-template-browser.ts

@@ -1,6 +1,7 @@
 import { customElement } from 'lit/decorators.js'
 import Element from './internals/DomainTemplateBrowser.js'
 import styles from './internals/styles/DomainTemplateBrowser.styles.js'
+import typography from '../styles/m3/typography.module.js'
 
 import '../md/button/ui-button.js'
 import '../md/button/ui-button-group.js'
@@ -9,7 +10,7 @@ import '../md/text-field/ui-outlined-text-field.js'
 
 @customElement('domain-template-browser')
 export class DomainTemplateBrowserElement extends Element {
-  static override styles = [styles]
+  static override styles = [styles, typography]
 }
 
 declare global {

package/src/modeling/internals/DomainTemplateBrowser.ts

@@ -94,6 +94,27 @@ function searchTemplates(query: string): DomainTemplateMetadata[] {
     )
 }
 
+function getVerticalName(id: string): string {
+  switch (id) {
+    case 'businessServices':
+      return 'Business Services'
+    case 'educationTraining':
+      return 'Education & Training'
+    case 'healthcareLifeSciences':
+      return 'Healthcare & Life Sciences'
+    case 'manufacturingLogistics':
+      return 'Manufacturing & Logistics'
+    case 'publicSector':
+      return 'Public Sector'
+    case 'realEstateConstruction':
+      return 'Real Estate & Construction'
+    case 'technologyMedia':
+      return 'Technology & Media'
+    default:
+      return id
+  }
+}
+
 /**
  * A browser component for exploring and selecting domain templates.
  * It provides the UI for searching, filtering, previewing, and selecting data domain templates.
@@ -266,7 +287,7 @@ export default class DomainTemplateBrowser extends LitElement {
               ?selected="${isSelected}"
               @click="${this.handleFilterClick}"
             >
-              ${category}
+              ${getVerticalName(category)}
             </ui-button>`
           })}
         </ui-button-group>
@@ -287,6 +308,10 @@ export default class DomainTemplateBrowser extends LitElement {
 
     return html`
       <div class="template-card">
+        <div class="meta">
+          <span class="value body-small" title="Updated at">${new Date(template.updatedAt).toLocaleDateString()}</span>
+          <span class="value body-small" title="Version">v${template.version}</span>
+        </div>
         <h3 class="template-title display-small">${templateName}</h3>
         <p class="template-description body-medium">${templateDescription}</p>
 

package/src/modeling/internals/styles/DomainTemplateBrowser.styles.ts

@@ -71,6 +71,18 @@ export default css`
     color: var(--md-sys-color-on-surface);
     border: 1px solid var(--md-sys-color-outline-variant);
     border-radius: var(--md-sys-shape-corner-medium);
+
+    .meta {
+      display: flex;
+      gap: 8px;
+
+      .value {
+        color: var(--md-sys-color-on-surface-variant);
+        border: 1px var(--md-sys-color-outline-variant) solid;
+        border-radius: 8px;
+        padding: 0 4px;
+      }
+    }
   }
 
   .template-description {