@hermes-ui/angular 0.1.4

package/addons/datagrid/datagrid.component.scss

@@ -0,0 +1,339 @@
+/*
+ * 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.
+ */
+
+$zoom-4x-action-bar-padding: 10px;
+
+%draggable-column {
+  $draggable-column-width: 20px;
+
+  min-width: $draggable-column-width;
+  width: $draggable-column-width;
+  padding-left: 0 !important; // this is done as per specs https://github.com/vmware/clarity/issues/1826
+  order: -1;
+  flex: 0;
+}
+
+:host {
+  min-height: 3.6rem; // standard min height from clarity (see .datagrid-table)
+  ::ng-deep hermes-datagrid {
+    min-height: 0; // We need this for the grid to shrink and the scroller to be in the grid's body
+  }
+}
+
+:host(.zoom2x),
+:host(.zoom4x) {
+  ::ng-deep hermes-datagrid.flex-hermes-datagrid {
+    // overriding flexible and fluid grid layout styles coming from
+    // _mixins.scss that is why `important` is added
+    height: auto !important;
+    flex: 1 0 auto !important;
+  }
+}
+
+:host(.zoom4x) {
+  min-height: 7.2rem;
+}
+
+hermes-datagrid {
+  &.flex-hermes-datagrid {
+    flex-basis: auto;
+    height: 100%;
+  }
+
+  .custom-preview {
+    width: 250px;
+    overflow: hidden;
+    font-size: var(--hermes-alias-typography-secondary-font-size);
+    line-height: var(--hermes-alias-typography-secondary-line-height);
+
+    .grid-ghost {
+      border: 1px solid var(--hermes-table-border-color);
+      border-left: 2px solid var(--hermes-alias-object-interaction-background-highlight);
+      border-radius: 3px 0 0 3px;
+      background-color: var(--hermes-global-color-white);
+      padding: 5px;
+      max-height: 60px;
+      white-space: normal;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+
+      .drop-status {
+        margin-top: -4px;
+      }
+    }
+  }
+
+  &.datagrid-compact {
+    .custom-preview {
+      .grid-ghost {
+        .drop-status {
+          margin-top: -8px;
+        }
+      }
+    }
+  }
+
+  hermes-dg-cell.fixed-cell-height {
+    // Fixed cell height for datagrids with virtual scrolling.
+    // Considering padding and border row height will be 25px
+    height: 16px;
+  }
+
+  .single-ghost {
+    box-shadow: 0 3px 4px rgb(116 116 116 / 30%);
+  }
+
+  .multiple-ghost {
+    box-shadow:
+      8px 7px var(--hermes-table-bgcolor),
+      8px 7px var(--hermes-table-border-color),
+      8px 8px 4px rgb(116 116 116 / 30%);
+  }
+
+  .selection-ghost {
+    color: var(--hermes-global-color-gray-400);
+    background-color: var(--hermes-table-bgcolor);
+  }
+
+  .ghost-badge {
+    float: right;
+  }
+
+  &.disabled-grid {
+    pointer-events: none;
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .draggableCell {
+    @extend %draggable-column;
+
+    .draggableIcon {
+      // by default this style comes from clarity with value
+      // translateY(-0.05rem) which breaks the positioning of the ghost
+      // element
+      transform: unset;
+    }
+  }
+
+  hermes-dg-footer {
+    ::ng-deep .footer-actions {
+      margin-left: 10px;
+      display: flex;
+      align-items: center;
+
+      // ~~~~~~~ user interactions ~~~~~~~~~~~
+      &:not(:disabled) {
+        &:hover,
+        &:active {
+          cursor: pointer;
+          text-decoration: none;
+        }
+      }
+    }
+
+    ::ng-deep .datagrid-footer-description {
+      display: flex;
+      text-align: left;
+    }
+
+    ::ng-deep li {
+      white-space: normal;
+    }
+
+    hermes-dg-pagination {
+      display: inline-flex;
+      align-items: center;
+
+      ::ng-deep > ul {
+        height: auto;
+      }
+    }
+
+    //end show hide menu related scss
+  }
+
+  hermes-dg-column ::ng-deep .datagrid-column-flex {
+    width: 100%;
+  }
+
+  // CSS applied when the user drag column
+  hermes-dg-column {
+    &.grabbed:not(.cdk-drag-placeholder, .cdk-drag-preview) {
+      &::ng-deep .datagrid-column-title {
+        background-color: var(--hermes-datagrid-row-selected-background-color);
+        color: var(--hermes-datagrid-row-selected);
+      }
+
+      background-color: var(--hermes-datagrid-row-selected-background-color);
+      color: var(--hermes-datagrid-row-selected);
+    }
+
+    &.cdk-drag-placeholder {
+      outline: var(--hermes-alias-object-interaction-outline);
+      outline-color: -webkit-focus-ring-color;
+      outline-offset: var(--hermes-datagrid-cell-outline-offset);
+      z-index: 100;
+    }
+
+    &.cdk-drag-preview {
+      opacity: 0.75;
+    }
+  }
+
+  hermes-dg-action-bar {
+    // our placeholder container for customization of actionable items above the grid.
+    // Clarity simply mirrors content
+    .appfx-datagrid-actions-container {
+      display: flex;
+      justify-content: space-between;
+
+      .filter-input {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        hermes-icon {
+          cursor: pointer;
+        }
+      }
+
+      .action-bar {
+        flex: 1 0 auto;
+        width: 0.05rem; // if width is not specified, width of element becomes
+        // auto and content will overflow parent width
+      }
+    }
+  }
+
+  hermes-dg-row-detail {
+    appfx-dg-cell-container {
+      width: 100%;
+    }
+
+    // fixed the nested datagrid header overflow issue with its parent
+    &::ng-deep appfx-datagrid {
+      div.datagrid-header {
+        z-index: 500;
+      }
+    }
+  }
+
+  &.zoom4x {
+    min-height: 7.2rem;
+
+    hermes-dg-action-bar {
+      .appfx-datagrid-actions-container {
+        /* make the action and filter on separate rows on 4x zoom */
+        flex-direction: column;
+
+        .action-bar {
+          flex: 1 0 auto;
+
+          /*
+                       action bar width correction,
+                       because 1px does not fit the shish-kebab button
+                    */
+          width: 100%;
+          max-width: 100%;
+          min-width: 1px;
+
+          ::ng-deep .btn-group {
+            button:first-child {
+              padding-left: $zoom-4x-action-bar-padding;
+            }
+          }
+        }
+
+        .filter-input {
+          padding-left: $zoom-4x-action-bar-padding;
+          width: 100%;
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+
+          hermes-icon {
+            flex: 0 1 auto;
+          }
+
+          hermes-input-container {
+            flex: 1 0 auto;
+
+            ::ng-deep {
+              .hermes-control-container {
+                width: 100%;
+
+                input {
+                  width: 100%;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    ::ng-deep .column-switch-wrapper {
+      hermes-dropdown-menu {
+        /*
+                 make the column selector menu
+                 take full screen covering the header
+                */
+        position: fixed !important;
+        transform: none !important;
+        width: 100%;
+        min-width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  // Remove the placeholder item so it prevents the item rearrangement during drag.
+  .custom-placeholder {
+    height: 0;
+    width: 0;
+  }
+
+  hermes-icon[shape='drag-handle'] {
+    cursor: grab;
+  }
+}
+
+// Hide both drop status icons by default
+.drop-status {
+  display: none;
+  margin-left: 4px;
+  color: var(--hermes-global-color-black);
+}
+
+// Show valid drop status icon when body has drag-valid-target class
+:host-context(body.drag-valid-target) .drop-status-valid {
+  display: inline-block;
+}
+
+// Show invalid drop status icon when body has drag-invalid-target class
+:host-context(body.drag-invalid-target) .drop-status-invalid {
+  display: inline-block;
+}
+
+// Dark theme
+:host-context([data-theme='dark']) {
+  hermes-datagrid {
+    .custom-preview {
+      .grid-ghost {
+        background-color: var(--hermes-table-bgcolor);
+
+        .drop-status {
+          color: var(--hermes-global-color-white);
+        }
+      }
+    }
+  }
+}

package/addons/datagrid-filters/README.md

@@ -0,0 +1,223 @@
+## Overview & Rationale
+
+AppFx Datagrid Filters component provides an enhanced user experience for datagrid filtering.
+It is expected to be hosted in the datagrid action bar and can be used in three modes - quick, advanced and advanced only. <br/>
+Advanced modes allow users to build and manage complex filtering queries. Quick mode is suitable for quick search filtering.
+
+#### Advanced Filter
+
+![Datagrid Filters example screen](assets/appfx/datagrid-advanced-filter-overview.png)
+
+#### Quick Filter
+
+![Datagrid Filters example screen](assets/appfx/datagrid-quick-filter-overview.png)
+
+## Component API
+
+#### appfx-datagrid-filters
+
+| Property                | Input/Output | Type                             | Description                                                                                                                                                                                                                         |
+| ----------------------- | ------------ | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `filterMode`            | Input        | `FilterMode`                     | Enum parameter with three options.<br/>FilterMode.Quick - only quick filter is activated.<br/>FilterMode.Advanced - both quick and advanced filters are activated.<br/>FilterMode.AdvancedOnly - Only advanced filter is activated. |
+| `filterableProperties`  | Input        | `FilterablePropertyDefinition[]` | Array of properties, which are used for advanced filtering.<br/>Supported types: StringPropertyDefinition, NumericPropertyDefinition, EnumPropertyDefinition, DateTimePropertyDefinition                                            |
+| `presetFilters`         | Input        | `PropertyFilter[]`               | Array of pre-selected filters.                                                                                                                                                                                                      |
+| `searchTermChange`      | Output       | `EventEmitter<string>`           | Emits when the quick filter changes. Triggered on `Enter` key press and/or automatically on every 2 sec when the user is typing in the search input.                                                                                |
+| `propertyFiltersChange` | Output       | `EventEmitter<PropertyFilter[]>` | Emits when the advanced filter changes.                                                                                                                                                                                             |
+
+#### FilterablePropertyDefinition
+
+Base abstract class for filterable properties. Filterable properties are usually a subset of the datagrid columns.<br/>
+List of subclasses: StringPropertyDefinition, NumericPropertyDefinition, EnumPropertyDefinition, DateTimePropertyDefinition.
+
+| Property             | Type                   | Description                                                                                             |
+| -------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- |
+| `displayName`        | `string`               | Name as shown to users                                                                                  |
+| `property`           | `string`               | Actual name of the property that is used for filtering                                                  |
+| `supportedOperators` | `ComparisonOperator[]` | Optional. List of comparison operators. Can be used to override the default operators for the property. |
+
+#### StringPropertyDefinition
+
+Extends FilterablePropertyDefinition.
+
+| Property          | Type              | Description                                                                                                                     |
+| ----------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `singleCondition` | `boolean`         | Optional. Indicates that the property can be used with single condition only. Default: false                                    |
+| `logicalOperator` | `LogicalOperator` | Optional. Indicates that the property supports only AND or OR logical operators. Default: undefined (supports both AND and OR). |
+
+Default supported operators:
+
+1. ComparisonOperator.Equals
+2. ComparisonOperator.DoesNotEqual
+3. ComparisonOperator.Contains<br/>
+4. ComparisonOperator.DoesNotContain
+5. ComparisonOperator.StartsWith
+6. ComparisonOperator.EndsWith
+7. ComparisonOperator.IsEmpty
+
+#### EnumPropertyDefinition
+
+Extends FilterablePropertyDefinition.
+
+| Property          | Type                  | Description                                                                                       |
+| ----------------- | --------------------- | ------------------------------------------------------------------------------------------------- |
+| `values`          | `Map<string, string>` | Enumeration key/value data to be used in the filter selection.                                    |
+| `singleSelect`    | `boolean`             | Optional. Indicates that the property should be used for single select filtering. Default: false. |
+| `searchable`      | `boolean`             | Optional. Indicates that the property should provide a searching interface. Default: false.       |
+| `enableSelectAll` | `boolean`             | Optional. Indicates that a select all checkbox is shown. Default: true.                           |
+
+#### NumericPropertyDefinition
+
+Extends FilterablePropertyDefinition.
+
+| Property          | Type              | Description                                                                                                                     |
+| ----------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `singleCondition` | `boolean`         | Optional. Indicates that the property can be used with single condition only. Default: false.                                   |
+| `logicalOperator` | `LogicalOperator` | Optional. Indicates that the property supports only AND or OR logical operators. Default: undefined (supports both AND and OR). |
+
+Default supported operators:
+
+1. ComparisonOperator.Equals
+2. ComparisonOperator.DoesNotEqual
+3. ComparisonOperator.LessThan
+4. ComparisonOperator.LessThanOrEqualTo
+5. ComparisonOperator.GreaterThan
+6. ComparisonOperator.GreaterThanOrEqualTo
+7. ComparisonOperator.IsEmpty
+
+| Property | Type   | Description                                    |
+| -------- | ------ | ---------------------------------------------- |
+| `unit`   | `Unit` | Default unit of the property metric. Optional. |
+
+### DateTimePropertyDefinition
+
+Extends FilterablePropertyDefinition. Default supported operators:
+
+1. ComparisonOperator.Equals
+2. ComparisonOperator.Before
+3. ComparisonOperator.BeforeOrEqualTo
+4. ComparisonOperator.After
+5. ComparisonOperator.AfterOrEqualTo
+6. ComparisonOperator.CustomRange
+7. ComparisonOperator.IsEmpty
+8. ComparisonOperator.LastDay
+9. ComparisonOperator.LastWeek
+10. ComparisonOperator.LastMonth
+11. ComparisonOperator.LastYear
+12. ComparisonOperator.TimeSpan
+
+### PropertyFilter
+
+| Property   | Type                  | Description                                   |
+| ---------- | --------------------- | --------------------------------------------- |
+| `criteria` | `PropertyPredicate[]` | Filter criteria                               |
+| `operator` | `LogicalOperator`     | Logical operator. Supported values are AND/OR |
+
+### PropertyPredicate
+
+| Property             | Type                           | Description                         |
+| -------------------- | ------------------------------ | ----------------------------------- |
+| `filterableProperty` | `FilterablePropertyDefinition` | Property that is used for filtering |
+| `operator`           | `ComparisonOperator`           | Filtering operator                  |
+| `value`              | `any`                          | Filter value                        |
+
+### Example Code
+
+datagrid-filters-demo.component.html
+
+```html
+<appfx-datagrid-filters
+  [filterMode]="filterMode"
+  [filterableProperties]="filterableProperties"
+  [presetFilters]="presetFilters"
+  (searchTermChange)="onAdvancedSearchTermChange($event)"
+  (propertyFiltersChange)="onAdvancedFilterCriteriaChange($event)"
+>
+</appfx-datagrid-filters>
+```
+
+datagrid-filters-demo.component.ts
+
+```ts
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+
+import {
+  DateTimePropertyDefinition,
+  EnumPropertyDefinition,
+  FilterablePropertyDefinition,
+  FilterMode,
+  NumericPropertyDefinition,
+  PropertyFilter,
+  StringPropertyDefinition,
+  Unit,
+} from '@hermes/angular/addons/datagrid-filters';
+
+@Component({
+  templateUrl: 'datagrid-filters-demo.component.html',
+})
+export class DatagridFiltersDemoComponent implements OnInit {
+  /**
+   * Event emitter to tell hosting view that search term, used for filtering
+   * has changed.
+   */
+  @Output()
+  public searchTermChange: EventEmitter<string> = new EventEmitter<string>();
+
+  /**
+   * Event emitter to tell hosting view that filtering criteria have changed.
+   */
+  @Output()
+  public advancedFilterChange: EventEmitter<PropertyFilter[]> = new EventEmitter<PropertyFilter[]>();
+
+  public filterMode: FilterMode = FilterMode.Advanced;
+  public filterableProperties: FilterablePropertyDefinition[] = [];
+
+  public ngOnInit() {
+    const stringNameProperty: StringPropertyDefinition = new StringPropertyDefinition('Name', 'name');
+    const stringAddressProperty: StringPropertyDefinition = new StringPropertyDefinition('Address', 'address');
+
+    const dateTimeProperty: DateTimePropertyDefinition = new DateTimePropertyDefinition('Last change', 'lastChanged');
+
+    const numericCustomerCountProperty: NumericPropertyDefinition = new NumericPropertyDefinition(
+      'Number of customers',
+      'customersCount'
+    );
+    const numericCapacityProperty: NumericPropertyDefinition = new NumericPropertyDefinition(
+      'Capacity',
+      'capacity',
+      undefined, // default operators
+      Unit.MB
+    );
+
+    const enumValuesMap: Map<string, string> = new Map<string, string>();
+    enumValuesMap.set('green', 'Green');
+    enumValuesMap.set('yellow', 'Yellow');
+    enumValuesMap.set('orange', 'Orange');
+    enumValuesMap.set('red', 'Red');
+    const enumProperty: EnumPropertyDefinition = new EnumPropertyDefinition('Status', 'status', enumValuesMap);
+    const singleSelectEnumProperty: EnumPropertyDefinition = new EnumPropertyDefinition(
+      'Color',
+      'color',
+      enumValuesMap,
+      true
+    );
+
+    this.filterableProperties.push(
+      stringNameProperty,
+      stringAddressProperty,
+      dateTimeProperty,
+      numericCustomerCountProperty,
+      numericCapacityProperty,
+      enumProperty,
+      singleSelectEnumProperty
+    );
+  }
+
+  public onAdvancedSearchTermChange(searchTerm: string): void {
+    this.searchTermChange.emit(searchTerm);
+  }
+
+  public onAdvancedFilterCriteriaChange(filterCriteria: PropertyFilter[]): void {
+    this.advancedFilterChange.emit(filterCriteria);
+  }
+}
+```

package/addons/datagrid-filters/advanced-filters/date-time-filter.component.scss

@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+// TODO: zpopov: refactor with calculation over CSS vars
+hermes-input-container {
+  margin-top: 0.9rem;
+}

package/addons/datagrid-filters/advanced-filters/enum-filter.component.scss

@@ -0,0 +1,40 @@
+/*
+ * 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.
+ */
+
+.enum-options {
+  margin-top: 0.1rem;
+  text-align: left;
+}
+
+:host-context(.no-zoom) {
+  .enum-options {
+    overflow-y: auto;
+  }
+}
+
+.enum-filter-wrapper {
+  max-height: 18rem;
+  overflow: auto;
+}
+
+:host {
+  ::ng-deep .hermes-control-container {
+    margin-left: 0.2rem;
+  }
+}
+
+hermes-checkbox-container:not(.hermes-default-style) {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  min-height: auto !important;
+}
+
+.selection-counter {
+  .hermes-subtext {
+    color: var(--hermes-info-color, #0072a3);
+  }
+}

package/addons/datagrid-filters/advanced-filters/users-filter.component.scss

@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+
+.user-filter-wrapper {
+  max-height: 18rem;
+  overflow: auto;
+}