@hermes-ui/angular 0.1.4

package/addons/theme-builder/README.md

@@ -0,0 +1,70 @@
+### Overview & Rationale
+
+`ThemeBuilderComponent` is a standalone, embeddable UI for customizing Clarity's color tokens
+(primary, info, success, warning, danger) across both the light and dark theme, previewing the
+result live, and exporting a CSS override file consumers can drop into their application.
+
+### Design
+
+#### ThemeBuilderComponent
+
+- `[presets]` — the list of named color presets shown in the preset selector. Defaults to
+  Hermes's built-in preset list (`PRESETS`), exported from this entry point so consumers can
+  extend it (e.g. `[...PRESETS, myPreset]`) or replacing it outright. Whatever list is
+  provided, the default (Evergreen) preset is always prepended and selected initially, so it
+  remains always available. The original Clarity blue theme is still available as an explicit
+  `Clarity` entry in `PRESETS`.
+- `(generatedCSS)` — emits the generated CSS override text (a `string`) every time a color,
+  preset, reset, or the warning-text-override toggle changes.
+- Content projection — anything projected through `<ng-content>` renders above the built-in
+  preview, which covers most Clarity components (buttons, forms, datagrid, alerts, navigation,
+  etc.) so the color changes can be seen in context. Projected content renders inside the same
+  themed preview sandbox, so it reacts to the light/dark toggle and every color edit exactly like
+  the built-in preview does.
+
+##### The component doesn't support:
+
+- Persisting the generated CSS — it's the consumer's responsibility to display, copy, or save the
+  value emitted through `generatedCSS`.
+- Editing color tokens other than the five status/primary aliases (primary, info, success,
+  warning, danger) and their computed tint/shade/dark variants.
+
+### Example Code
+
+_host.component.html_:
+
+```html
+<hermes-theme-builder [presets]="presets" (generatedCSS)="generatedCss = $event"></hermes-theme-builder>
+
+<pre>{{ generatedCss }}</pre>
+```
+
+_host.component.html_ — projecting a custom preview above the built-in one:
+
+```html
+<hermes-theme-builder [presets]="presets" (generatedCSS)="generatedCss = $event">
+  <my-app-shell></my-app-shell>
+</hermes-theme-builder>
+```
+
+_host.component.ts_:
+
+```ts
+import { Color, PRESETS, ThemeBuilderComponent, ThemePreset } from '@hermes/angular/addons/theme-builder';
+
+@Component({
+  imports: [ThemeBuilderComponent /* ... */],
+})
+export class HostComponent {
+  presets: ThemePreset[] = [
+    ...PRESETS,
+    {
+      name: 'Custom',
+      light: { primary: new Color('--hermes-alias-primary', 'hsl(160deg 69% 36%)') },
+      dark: { primary: new Color('--hermes-alias-primary', 'hsl(160deg 69% 53%)') },
+    },
+  ];
+
+  generatedCss = '';
+}
+```

package/addons/theme-builder/theme-builder.component.scss

@@ -0,0 +1,194 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+:host {
+  display: block;
+
+  ::ng-deep {
+    .stack-view .stack-view-key {
+      min-width: 26%;
+      max-width: 26%;
+    }
+
+    .stack-view .stack-block-content {
+      max-width: 46%;
+    }
+
+    .card .alert {
+      margin: 0;
+    }
+
+    .card-block .progress,
+    .card-block .progress-static {
+      position: relative;
+      height: var(--hermes-base-progress-bar-height);
+      margin: 0;
+
+      > progress {
+        height: 100%;
+        position: static;
+      }
+    }
+  }
+}
+
+.tb-presets {
+  display: flex;
+  align-items: center;
+  gap: var(--hermes-base-gap-m);
+  flex-wrap: wrap;
+  margin: 0 var(--hermes-base-gap-m);
+}
+
+.tb-preset-cards {
+  gap: var(--hermes-base-gap-l);
+
+  // Modeled on app-link-cards' `.card-link`: a clickable card pairing a colored
+  // badge with a text label — square swatch instead of a hexagon, no arrow icon.
+  .tb-preset-card {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hermes-base-gap-m);
+    margin: 0;
+    padding: var(--hermes-base-vertical-offset-m) var(--hermes-base-horizontal-offset-m);
+    min-width: 170px;
+
+    &.tb-preset-card-active {
+      outline: var(--hermes-alias-object-border-width-200) solid var(--hermes-alias-primary);
+      outline-offset: 2px;
+    }
+
+    .card-text {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.tb-preset-swatch {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--hermes-base-row-height-m);
+  min-width: var(--hermes-base-row-height-m);
+  border: var(--hermes-alias-object-border-width-100) solid var(--hermes-alias-object-border-color);
+  border-radius: var(--hermes-alias-object-border-radius-100);
+  background: var(--hermes-alias-object-container-background);
+  color: var(--hermes-alias-typography-color-300);
+}
+
+// ── Two-column grid ──
+
+.tb-layout {
+  display: grid;
+  grid-template-columns: 370px 1fr;
+  gap: var(--hermes-base-gap-l);
+  align-items: start;
+}
+
+// ── Controls card ──
+
+.tb-controls-card {
+  margin-top: 0;
+  position: sticky;
+  top: 0;
+  max-height: calc(100vh - var(--hermes-global-space-15));
+  overflow-y: auto;
+
+  .tb-control-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+.tb-wcag-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--hermes-base-gap-s);
+
+  .tb-wcag-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+.card-block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--hermes-base-gap-l);
+
+  .tb-color-input-wrap {
+    display: flex;
+    align-items: center;
+    gap: var(--hermes-base-gap-s);
+    min-width: 190px;
+  }
+
+  .tb-color-picker {
+    padding: var(--hermes-base-vertical-offset-2xs) var(--hermes-base-horizontal-offset-2xs);
+    border: var(--hermes-alias-object-border-width-100) solid var(--hermes-alias-object-border-color);
+    border-radius: var(--hermes-alias-object-border-radius-100);
+    cursor: pointer;
+    background: var(--hermes-alias-object-container-background);
+    width: var(--hermes-global-space-11);
+  }
+
+  .tb-hex-input {
+    width: var(--hermes-base-layout-space-5xl);
+    padding: var(--hermes-base-vertical-offset-2xs) var(--hermes-base-horizontal-offset-s);
+    border: var(--hermes-alias-object-border-width-100) solid var(--hermes-alias-object-border-color);
+    border-radius: var(--hermes-alias-object-border-radius-100);
+  }
+
+  .tb-stack-label {
+    display: flex;
+    gap: var(--hermes-base-gap-m);
+    align-items: center;
+  }
+}
+
+// ── Preview card ──
+
+.tb-preview-card {
+  margin-top: 0;
+
+  // Card-header contains "Live Preview" label + light/dark toggle button
+  .card-header {
+    display: flex;
+    align-items: center;
+    gap: var(--hermes-base-gap-m);
+  }
+}
+
+.tb-preview-sandbox {
+  display: flex;
+  flex-direction: column;
+  gap: var(--hermes-base-gap-l);
+  border-bottom-left-radius: var(--hermes-alias-object-border-radius-100);
+  border-bottom-right-radius: var(--hermes-alias-object-border-radius-100);
+}
+
+.tb-preview-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--hermes-base-gap-m);
+}
+
+.tb-preview-row {
+  display: flex;
+  align-items: center;
+  gap: var(--hermes-base-gap-m);
+  flex-wrap: wrap;
+}
+
+.tb-nav-preview-wrap {
+  height: 180px;
+  border: var(--hermes-alias-object-border-width-100) solid var(--hermes-alias-object-border-color);
+  overflow: hidden;
+  display: flex;
+}

package/addons/translate/README.md

@@ -0,0 +1,124 @@
+### Overview & Rationale
+
+AppFx Translate provides translations for the AppFx components. It aims to provide
+independence and applicability of AppFx components across different products using
+different localization libraries - or stay independent of the localization library of
+choice for the application.
+
+### Design
+
+#### AppfxTranslateService
+
+<div class="alert alert-info" role="alert">
+    <div class="alert-items">
+        <div class="alert-item static">
+            <div class="alert-icon-wrapper">
+                <hermes-icon class="alert-icon" shape="info-circle"></hermes-icon>
+            </div>
+            <span class="alert-text">
+                Consumers of the AppFx library should only use the AppfxTranslateService to
+                sync the locale with their application locale.
+            </span>
+        </div>
+    </div>
+</div>
+
+#### Features:
+
+- Single locale management point for AppFx components
+- Simple translate functionality with interpolation arguments similar to
+  [@ngx-translate/core](https://github.com/ngx-translate/core).
+- Per-component translations isolation through `InjectionToken`s.
+
+##### The service doesn't support:
+
+- Loading translations from an endpoint
+
+##### It's discouraged to:
+
+- Use the service as a general purpose translate service outside AppFx because it's meant
+  to be a light weight implementation for the AppFx components and thus lacks some
+  general purpose functionalities.
+- Provide global translations. Each AppFx component that needs translations should use
+  its own component providers to achieve isolation.
+
+#### TranslatePipe
+
+Exposes the translate functionality of the AppfxTranslateService as a pipe.
+
+#### DateTimeService
+
+##### Features:
+
+- Standardized date-time formatting for AppFx components.
+
+##### The service doesn't support:
+
+- Custom date formats. To keep the formatting standardized there are only a few different
+  formatting options.
+
+#### DateTimePipe
+
+Exposes the date-time formatting functionality of the DateTimeService as a pipe.
+
+### Example Code
+
+_translate-demo.component.html_:
+
+```html
+<hermes-native-select-container>
+  <label>Locale</label>
+  <select hermesNativeSelect name="locales" [(ngModel)]="translateService.locale">
+    @for( let locale of locales ) {
+    <option [value]="locale[1]">{{ locale[0] }}</option>
+    }
+  </select>
+</hermes-native-select-container>
+
+<p>{{ 'hello-world' | translate }}</p>
+<p>{{ getNow() | dateTime: dateTimeFormat }}</p>
+```
+
+_translate-demo.component.ts_:
+
+```ts
+@Component({
+  templateUrl: './translate-demo.component.html',
+  providers: [
+    AppfxTranslateService,
+    // Provide the translations
+    {
+      provide: appfxTranslations,
+      useValue: {
+        [Locale.En]: {
+          'hello-world': 'Hello World!',
+        },
+        [Locale.De]: {
+          'hello-world': 'Hallo Welt!',
+        },
+      },
+    },
+    // Override the default hook for missing translations
+    {
+      provide: appfxMissingTranslation,
+      useValue: (translations: Translations, locale: Locale, key: string, args?: InterpolationParams) => {
+        return `<Missing translation for locale "\${locale}" with key "\${key}">`;
+      },
+    },
+  ],
+})
+export class TranslateDemoComponent {
+  readonly locales = Object.entries(Locale);
+
+  readonly dateTimeFormat: DateTimeFormatOptions = {
+    dateTimeKind: DateTimeKind.DateTime,
+    hourFormat: HourFormat.Hour24,
+  };
+
+  constructor(public readonly translateService: AppfxTranslateService) {}
+
+  getNow(): Date {
+    return new Date();
+  }
+}
+```

package/addons/var/debug/workflow-model-monitor.component.scss

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+.title {
+  margin-bottom: 0.36rem;
+}
+
+.prop-name {
+  margin-top: 0.12rem;
+}
+
+.prop-value {
+  white-space: nowrap;
+  margin-top: 0.12rem;
+}
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.simple-var {
+  color: #2283bc;
+}
+
+.computed-var {
+  color: #9c46bf;
+}
+
+.prop-changed {
+  color: #3fa740;
+}
+
+:host {
+  ::ng-deep {
+    .signpost-content-body {
+      max-height: 650px;
+    }
+
+    .signpost-trigger {
+      height: 1.2rem;
+      line-height: normal;
+    }
+  }
+}

package/addons/var/error/error.component.scss

@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+hermes-stack-view {
+  ::ng-deep {
+    .stack-view {
+      height: unset;
+    }
+  }
+}
+
+.error-details-block {
+  font-family: monospace;
+
+  ::ng-deep {
+    div.stack-view-key {
+      display: none;
+    }
+
+    div.stack-block-label {
+      padding-left: 0;
+      width: 100%;
+    }
+  }
+}
+
+.stack-trace {
+  white-space: pre;
+  overflow-x: auto;
+}
+
+.btn-primary hermes-icon {
+  margin-right: 5px;
+}

package/addons/var/spinner/spinner.component.scss

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+:host {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  z-index: 999;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .progress-item {
+    padding-top: 0.5rem;
+  }
+}
+
+:host .overlay-spinner {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  min-height: inherit;
+  inset: 0;
+  z-index: 1200;
+}

package/addons/wizard/summary/summary.component.scss

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+appfx-property-view {
+  height: unset;
+
+  ::ng-deep {
+    appfx-property-view-category {
+      padding-left: unset;
+    }
+
+    .table td,
+    .table th {
+      font-size: unset !important;
+      background: none;
+    }
+  }
+}