@hermes-ui/angular 0.1.4

package/addons/datagrid-filters/common-styles.scss

@@ -0,0 +1,98 @@
+/*
+ * 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.
+ */
+
+.form-compact {
+  padding: 0;
+  text-align: left;
+  font-weight: normal;
+}
+
+.form-control-compact {
+  margin-top: 0.3rem;
+}
+
+.btn-compact {
+  min-width: 1.2rem;
+  padding: 0;
+  margin: 0 0.4rem;
+}
+
+.btn-right {
+  float: right;
+  margin-right: 0;
+  margin-top: 0.9rem;
+  margin-left: 0.3rem;
+}
+
+.mt-half {
+  margin-top: 0.6rem;
+}
+
+.mt-compact {
+  margin-top: 0.9rem;
+}
+
+.mb-compact {
+  margin-bottom: 0.9rem;
+}
+
+.ml-half {
+  margin-left: 0.6rem;
+}
+
+.mt-0 {
+  margin-top: 0;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+:host-context(.zoom2x, .zoom4x) {
+  .form-max-height {
+    max-height: 8rem;
+    overflow-y: auto;
+  }
+}
+
+select {
+  max-width: 18rem;
+  text-overflow: ellipsis;
+}
+// in order to display properties with longer names.
+hermes-signpost-content {
+  max-width: 20rem;
+}
+
+.flex-end-container {
+  display: flex;
+  align-items: flex-end;
+}
+
+.flex-container {
+  display: flex;
+}
+
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--hermes-datagrid-loading-background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+
+.loading-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}

package/addons/datagrid-filters/composite-filters.component.scss

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+.composite-filter-container {
+  display: flex;
+}
+
+.height-standard {
+  height: 1.2rem;
+}
+
+.manage-filter-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+:host-context(.zoom2x, .zoom4x) {
+  .composite-filter-container,
+  .manage-filter-container {
+    display: contents;
+  }
+}

package/addons/datagrid-filters/datagrid-filters.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.
+ */
+
+.filter-container {
+  display: flex;
+  align-items: baseline;
+  margin-left: 0.2rem;
+}
+
+:host-context(.zoom2x, .zoom4x) {
+  .filter-container {
+    flex-wrap: wrap;
+  }
+
+  .filter-contents {
+    display: contents;
+  }
+}

package/addons/datagrid-filters/manage-filters/manage-filter.component.scss

@@ -0,0 +1,42 @@
+/*
+ * 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.
+ */
+
+.filter-remove-btn {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.text-lower {
+  text-transform: lowercase;
+}
+
+:host-context(body[data-theme='light']) {
+  :host-context(.user-tabbing) {
+    .edit-filter:focus,
+    .remove-filter:focus {
+      outline: 2px solid #000;
+    }
+
+    .edit-filter:focus {
+      outline-offset: 1px;
+    }
+  }
+}
+
+:host-context(body[data-theme='dark']) {
+  :host-context(.user-tabbing) {
+    .edit-filter:focus,
+    .remove-filter:focus {
+      outline: 2px solid #fafafa;
+    }
+
+    .edit-filter:focus {
+      outline-offset: 1px;
+    }
+  }
+}

package/addons/dialog/README.md

@@ -0,0 +1,112 @@
+### Overview
+
+AppFx Multi-Page Dialog (`appfx-dialog`) renders a composition of step components as tabs inside a Clarity modal.
+It is built on top of [AppFx Tabs](../tabs/README.md), reusing the same `Step`/`WorkflowModel` API, and adds the
+modal chrome (title, footer buttons, close handling) on top.
+
+Step components and step models can be reused between AppFx Tabs and AppFx Dialog.
+
+### Features
+
+#### Horizontal or Vertical tabs
+
+AppFx Dialog offers the flexibility to display tabs horizontally (the default) or in a vertical orientation.
+To customize the layout, refer to the `DialogComponent.tabLayout` property.
+
+#### Submit / Cancel workflow
+
+The dialog's OK and Cancel buttons are wired to an optional `closeHandler`. `closeHandler.onSubmit` is invoked
+when the user clicks OK, `closeHandler.onCancel` when the user clicks Cancel or closes the dialog. The dialog
+waits for the returned `Observable` to complete before closing; if it errors, the error is shown in the dialog
+and it remains open.
+
+#### Reusable with AppFx Tabs
+
+AppFx Dialog is fully compatible with AppFx Tabs, with both components sharing the same functionality. The key
+distinction lies in how they are rendered, with AppFx Dialog appearing as a modal popup. This compatibility
+allows one to effortlessly reuse the same steps and models between an inline AppFx Tabs page and an AppFx Dialog,
+reducing code duplication and enhancing maintainability.
+
+### Component API
+
+#### appfx-dialog
+
+| Attribute            | I/O    | Type                           | Required? | Description                                                                                     |
+| -------------------- | ------ | ------------------------------ | --------- | ----------------------------------------------------------------------------------------------- |
+| `title`              | Input  | `string`                       | No        | The title of the dialog.                                                                        |
+| `subTitle`           | Input  | `string \| Observable<string>` | No        | The sub title of the dialog.                                                                    |
+| `size`               | Input  | `ModalSize`                    | No        | Dialog's Clarity size (`'xl' \| 'lg' \| 'md' \| 'sm' \| 'full-screen'`).                        |
+| `height`             | Input  | `string`                       | No        | Specifies the height of the dialog.                                                             |
+| `defaultButton`      | Input  | `'submit' \| 'close'`          | No        | Which button is highlighted. Default value: `'close'`.                                          |
+| `cancelButtonLabel`  | Input  | `string`                       | No        | The cancel button label.                                                                        |
+| `okButtonLabel`      | Input  | `string`                       | No        | The OK button label.                                                                            |
+| `tabLayout`          | Input  | `'horizontal' \| 'vertical'`   | No        | Tab layout. Default value: `'horizontal'`.                                                      |
+| `disableTabsContent` | Input  | `boolean`                      | No        | Disable the content of the tabs.                                                                |
+| `loading`            | Input  | `boolean`                      | No        | Display loading indicator when set to `true`. Default value: `false`.                           |
+| `steps`              | Input  | `Step[]`                       | Yes       | Configure pages of the dialog - title, component class, model, etc.                             |
+| `model`              | Input  | `WorkflowModel`                | No        | Object used to inject/eject properties between step models. Steps stay disconnected if omitted. |
+| `closeHandler`       | Input  | `CloseHandler`                 | No        | Callbacks invoked when the dialog is submitted or cancelled.                                    |
+| `showTabLinks`       | Input  | `boolean`                      | No        | Show tab links. Default value: `true`. Set to `false` if you have only one step.                |
+| `opened`             | Input  | `boolean`                      | No        | Controls the dialog open/close state.                                                           |
+| `onModelChange`      | Output | `EventEmitter<ModelChange[]>`  | No        | Emits when any of the workflow model's variables changes.                                       |
+| `onClose`            | Output | `EventEmitter<void>`           | No        | Emits when the dialog is closed (close button, or the OK/Cancel buttons).                       |
+| `openedChange`       | Output | `EventEmitter<boolean>`        | No        | Emits when the `opened` input changes.                                                          |
+
+See [AppFx Tabs](../tabs/README.md) for the `Step` interface reference.
+
+### Examples
+
+_sample-dialog.component.html_:
+
+```html
+<button class="btn btn-primary" (click)="dialogOpened = true">Open Dialog</button>
+
+<appfx-dialog
+  [(opened)]="dialogOpened"
+  [steps]="steps"
+  [model]="dialogModel"
+  [title]="'Sample Dialog'"
+  [tabLayout]="TabLayout.horizontal"
+  [closeHandler]="closeHandler"
+>
+</appfx-dialog>
+```
+
+_sample-dialog.component.ts_:
+
+```ts
+import { AppfxMultiPageDialogModule } from '@hermes/angular/addons/dialog';
+import { CloseHandler, Step, TabLayout } from '@hermes/angular/addons/var';
+
+@Component({
+  templateUrl: 'sample-dialog.component.html',
+})
+export class SampleDialog {
+  TabLayout = TabLayout;
+
+  dialogOpened = false;
+  steps: Step[];
+  dialogModel: SampleWorkflowModel;
+
+  closeHandler: CloseHandler = {
+    onSubmit: () => this.workflowService.apply(this.dialogModel),
+    onCancel: () => of(true),
+  };
+
+  constructor() {
+    this.dialogModel = new SampleWorkflowModel();
+    this.steps = [
+      <Step>{
+        title: 'Virtual Machine Name',
+        componentClass: ObjectNameComponent,
+        model: new ObjectNameModel(),
+      },
+      <Step>{
+        title: 'Select a Compute Resource',
+        componentClass: SelectHostComponent,
+        model: new SelectHostModel(),
+      },
+    ];
+  }
+}
+```

package/addons/dialog/multi-page-dialog.a11y.scss

@@ -0,0 +1,203 @@
+/*
+ * 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-dialog {
+  // note mibryamov: dialog positioning related styling that is making sure the
+  // dialog is sized and displayed well in zoom mode similar to clarity wizard,
+  // this styling applies to both modes of the dialog - horizontal and vertical
+  // - and is not related to re-flowing of the dialog content
+  &.zoom2x,
+  &.zoom4x {
+    ::ng-deep {
+      .modal {
+        overflow: visible;
+
+        .modal-dialog {
+          .modal-content-wrapper {
+            display: flex;
+            flex-direction: row;
+            flex: 1 1 100%;
+            height: 100%;
+            width: 100%;
+            max-height: 100%;
+
+            .modal-content {
+              display: flex;
+              flex-direction: column;
+              flex: 2 2 auto;
+              align-items: flex-start;
+              padding: 0;
+              overflow: hidden;
+              border: none;
+              border-radius: 0;
+
+              .modal-header--accessible {
+                flex: 0 0 auto;
+                width: 100%;
+                padding: 1.2rem;
+                display: flex;
+                justify-content: space-between;
+                align-items: flex-start;
+
+                .modal-title-wrapper {
+                  width: calc(100% - 1.2rem);
+
+                  .modal-title {
+                    flex-direction: column;
+                    max-width: 100%;
+
+                    .separator {
+                      display: none;
+                    }
+                  }
+                }
+              }
+
+              .modal-body {
+                flex: 1 1 auto;
+                width: 100%;
+                height: 100%;
+                padding: 0 1.2rem;
+              }
+
+              .modal-footer {
+                padding-right: 1.2rem;
+                display: block;
+                height: 4.2rem;
+                min-height: 4.2rem;
+                max-height: 4.2rem;
+                width: 100%;
+                flex: 0 0 4.2rem;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .secondaryTitle {
+      white-space: pre-line;
+    }
+  }
+
+  &.zoom2x {
+    ::ng-deep {
+      .modal-dialog {
+        height: 75vh;
+      }
+    }
+  }
+
+  &.zoom4x {
+    ::ng-deep {
+      .modal {
+        padding: 0;
+
+        .modal-dialog {
+          width: 100%;
+          height: 100%;
+          margin: 0;
+
+          .modal-content-wrapper {
+            .modal-content {
+              display: block;
+              overflow-y: auto;
+
+              .modal-body {
+                overflow-y: hidden;
+                max-height: unset;
+                height: unset;
+              }
+
+              .modal-footer {
+                position: sticky;
+                bottom: 0;
+                background-color: inherit;
+                min-height: 3.2rem;
+                height: 3.2rem;
+                padding-top: 0.7rem;
+                z-index: 1000;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .primaryTitle {
+      max-width: 55%;
+    }
+  }
+
+  // zoom related styling for vertical tabs dialog
+  &.vertical {
+    &.zoom2x,
+    &.zoom4x {
+      &:not(.tab-links-opened) {
+        .primaryTitle {
+          display: none;
+        }
+
+        .secondaryTitle {
+          white-space: pre-line;
+        }
+      }
+
+      &.tab-links-opened {
+        ::ng-deep {
+          .modal-dialog .modal-content-wrapper .modal-content {
+            .modal-header--accessible {
+              flex-direction: row;
+
+              .modal-title-wrapper .modal-title {
+                flex-direction: initial;
+              }
+
+              .close {
+                display: none;
+              }
+            }
+          }
+        }
+
+        .primaryTitle {
+          width: 100%;
+          max-width: 100%;
+        }
+
+        .separator,
+        .secondaryTitle {
+          display: none;
+        }
+      }
+
+      .secondaryTitle {
+        padding-left: 1.5rem;
+      }
+    }
+  }
+}
+
+:host {
+  .appfx-dialog {
+    &.show-tab-content {
+      ::ng-deep {
+        .tab-content {
+          display: flex;
+        }
+      }
+    }
+
+    &:not(.show-tab-content) {
+      ::ng-deep {
+        .tab-content {
+          display: none !important;
+        }
+      }
+    }
+  }
+}

package/addons/dialog/multi-page-dialog.component.scss

@@ -0,0 +1,102 @@
+/*
+ * 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.
+ */
+
+:root {
+  :host ::ng-deep {
+    .tab-content {
+      display: inline;
+    }
+  }
+}
+
+/* considered as a clone of js-ui-lib from `vxActivityIndicator.less`. Simplify and reduce these styles as needed */
+.center-dialog-content {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+/* considered as a clone of js-ui-lib from `modal.less`. Simplify and reduce these styles as needed */
+%text-overflow-ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+// action and object name parts of a title
+.modal-title {
+  display: flex;
+  align-items: flex-start;
+  padding-left: 0;
+
+  // note: Clarity should define headers, however using the h3 introduced awkward spacing
+  $title-height: 24px;
+  $secondary-title-height: 18px;
+
+  .primaryTitle {
+    flex-shrink: 0;
+    font-size: $title-height;
+
+    &.secondaryTitleIsEmpty {
+      @extend %text-overflow-ellipsis;
+
+      flex-shrink: 1;
+    }
+
+    &:not(.secondaryTitleIsEmpty) {
+      max-width: 65%;
+    }
+  }
+
+  .secondaryTitle {
+    display: block;
+    word-break: break-all;
+    margin-top: 0;
+    margin-bottom: 0;
+    line-height: 24px;
+    font-size: $secondary-title-height;
+  }
+
+  .separator {
+    content: '';
+    border-left: 1px solid #ccc;
+    margin: 0 18px;
+    height: 22px;
+  }
+}
+
+.div-disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.6;
+
+  // Prevent double-disabling of elements.
+  .div-disabled {
+    opacity: 1;
+  }
+}
+
+.debug-popup {
+  ::ng-deep {
+    div.modal-dialog.modal-xl {
+      margin-left: 350px; // width of hermes-signpost-popup
+    }
+  }
+}
+
+hermes-tabs {
+  ::ng-deep {
+    section {
+      flex: 1 1 auto;
+    }
+  }
+}

package/addons/dialog/toggle-component/toggle.component.scss

@@ -0,0 +1,15 @@
+/*
+ * 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.
+ */
+.toggle-header {
+  display: flex;
+  margin-left: 0;
+  margin-bottom: 5px;
+}
+
+.toggle-label {
+  margin-right: 5px;
+}

package/addons/drag-and-drop/README.md

@@ -0,0 +1,48 @@
+### Overview & Rationale
+
+AppFx Drag and Drop provides utilities to easily and declaratively work with CDK drag-and-drop within Angular applications.
+
+### DragAndDropGroupService
+
+The DragAndDropGroupService is a singleton Angular service that manages groups of items that can be dragged and dropped using Angular's CDK Drag and Drop functionality. It facilitates the organization and manipulation of draggable items by grouping them and providing methods for adding, retrieving, and removing drop lists (CdkDropList) associated with specific groups.
+
+#### Methods
+
+`getGroupItems(group: string): readonly CdkDropList[]` - Retrieves an array of CdkDropList instances belonging to the specified group. If the group doesn't exist, it returns an empty array.
+
+`addGroupItem(group: string, item: CdkDropList): void` - Adds a CdkDropList instance to the specified group. If the group doesn't exist, it creates a new one.
+
+`removeGroupItem(group: string, item: CdkDropList): void` - Removes a CdkDropList instance from the specified group if it exists.
+
+#### Example Code
+
+_example-drag-and-drop.component.ts_:
+
+```typescript
+import { DragAndDropGroupService } from '@hermes/angular/addons/drag-and-drop';
+
+@Component({
+  selector: 'example-drag-and-drop',
+  templateUrl: 'example-drag-and-drop.component.html',
+})
+export class ExampleDragAndDropComponent {
+  @ViewChild(CdkDropList, { static: true })
+  public readonly dropList: CdkDropList;
+
+  private dropGroup: string;
+
+  public constructor(private groupService: DragAndDropGroupService) {}
+
+  public dropGroup(group: string): readonly CdkDropList[] {
+    return this.groupService.getGroupItems(group);
+  }
+
+  public ngAfterViewInit(): void {
+    this.groupService.addGroupItem(this.dropGroup, this.dropList);
+  }
+
+  public ngOnDestroy(): void {
+    this.groupService.removeGroupItem(this.dropGroup, this.dropList);
+  }
+}
+```