@hermes-ui/angular 0.1.4

package/package.json

@@ -0,0 +1,325 @@
+{
+  "name": "@hermes-ui/angular",
+  "version": "0.1.4",
+  "description": "Angular components for Hermes",
+  "keywords": [
+    "hermes",
+    "angular",
+    "components"
+  ],
+  "author": "Hermes Design System",
+  "license": "MIT",
+  "schematics": "./schematics/collection.json",
+  "ng-update": {
+    "migrations": "./schematics/collection.json"
+  },
+  "peerDependencies": {
+    "@angular/animations": ">= 21.1.0",
+    "@angular/cdk": ">= 21.1.0",
+    "@angular/common": ">= 21.1.0",
+    "@angular/core": ">= 21.1.0",
+    "@angular/forms": ">= 21.1.0",
+    "@angular/platform-browser": ">= 21.1.0",
+    "@angular/router": ">= 21.1.0",
+    "@hermes-ui/core": "*",
+    "asn1js": "^3.0.6",
+    "pkijs": "^3.2.5",
+    "rxjs": "^7.8.0"
+  },
+  "peerDependenciesMeta": {
+    "asn1js": {
+      "optional": true
+    },
+    "pkijs": {
+      "optional": true
+    }
+  },
+  "module": "fesm2022/hermes-ui-angular.mjs",
+  "typings": "types/hermes-ui-angular.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/hermes-ui-angular.d.ts",
+      "default": "./fesm2022/hermes-ui-angular.mjs"
+    },
+    "./accordion": {
+      "types": "./types/hermes-ui-angular-accordion.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-accordion.mjs"
+    },
+    "./addons/a11y": {
+      "types": "./types/hermes-ui-angular-addons-a11y.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-addons-a11y.mjs"
+    },
+    "./addons/card-container": {
+      "types": "./types/hermes-ui-angular-addons-card-container.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-addons-card-container.mjs"
+    },
+    "./addons/certificate-viewer": {
+      "types": "./types/hermes-ui-angular-addons-certificate-viewer.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-addons-certificate-viewer.mjs"
+    },
+    "./addons/datagrid": {
+      "types": "./types/hermes-ui-angular-addons-datagrid.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-addons-datagrid.mjs"
+    },
+    "./addons/datagrid-filters": {
+      "types": "./types/hermes-ui-angular-addons-datagrid-filters.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-addons-datagrid-filters.mjs"
+    },
+    "./addons/dialog": {
+      "types": "./types/hermes-ui-angular-addons-dialog.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-addons-dialog.mjs"
+    },
+    "./addons/drag-and-drop": {
+      "types": "./types/hermes-ui-angular-addons-drag-and-drop.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-addons-drag-and-drop.mjs"
+    },
+    "./addons/menu": {
+      "types": "./types/hermes-ui-angular-addons-menu.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-addons-menu.mjs"
+    },
+    "./addons/property-view": {
+      "types": "./types/hermes-ui-angular-addons-property-view.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-addons-property-view.mjs"
+    },
+    "./addons/stepper": {
+      "types": "./types/hermes-ui-angular-addons-stepper.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-addons-stepper.mjs"
+    },
+    "./addons/tabs": {
+      "types": "./types/hermes-ui-angular-addons-tabs.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-addons-tabs.mjs"
+    },
+    "./addons/testing": {
+      "types": "./types/hermes-ui-angular-addons-testing.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-addons-testing.mjs"
+    },
+    "./addons/theme-builder": {
+      "types": "./types/hermes-ui-angular-addons-theme-builder.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-addons-theme-builder.mjs"
+    },
+    "./addons/translate": {
+      "types": "./types/hermes-ui-angular-addons-translate.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-addons-translate.mjs"
+    },
+    "./addons/var": {
+      "types": "./types/hermes-ui-angular-addons-var.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-addons-var.mjs"
+    },
+    "./addons/wizard": {
+      "types": "./types/hermes-ui-angular-addons-wizard.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-addons-wizard.mjs"
+    },
+    "./addons/workflow": {
+      "types": "./types/hermes-ui-angular-addons-workflow.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-addons-workflow.mjs"
+    },
+    "./addons/workflow/strings": {
+      "types": "./types/hermes-ui-angular-addons-workflow-strings.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-addons-workflow-strings.mjs"
+    },
+    "./button": {
+      "types": "./types/hermes-ui-angular-button.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-button.mjs"
+    },
+    "./collapsible-panel": {
+      "types": "./types/hermes-ui-angular-collapsible-panel.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-collapsible-panel.mjs"
+    },
+    "./data": {
+      "types": "./types/hermes-ui-angular-data.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-data.mjs"
+    },
+    "./data/datagrid": {
+      "types": "./types/hermes-ui-angular-data-datagrid.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-data-datagrid.mjs"
+    },
+    "./data/stack-view": {
+      "types": "./types/hermes-ui-angular-data-stack-view.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-data-stack-view.mjs"
+    },
+    "./data/tree-view": {
+      "types": "./types/hermes-ui-angular-data-tree-view.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-data-tree-view.mjs"
+    },
+    "./emphasis": {
+      "types": "./types/hermes-ui-angular-emphasis.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-emphasis.mjs"
+    },
+    "./emphasis/alert": {
+      "types": "./types/hermes-ui-angular-emphasis-alert.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-emphasis-alert.mjs"
+    },
+    "./emphasis/badge": {
+      "types": "./types/hermes-ui-angular-emphasis-badge.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-emphasis-badge.mjs"
+    },
+    "./emphasis/common": {
+      "types": "./types/hermes-ui-angular-emphasis-common.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-emphasis-common.mjs"
+    },
+    "./emphasis/label": {
+      "types": "./types/hermes-ui-angular-emphasis-label.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-emphasis-label.mjs"
+    },
+    "./forms": {
+      "types": "./types/hermes-ui-angular-forms.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-forms.mjs"
+    },
+    "./forms/checkbox": {
+      "types": "./types/hermes-ui-angular-forms-checkbox.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-forms-checkbox.mjs"
+    },
+    "./forms/combobox": {
+      "types": "./types/hermes-ui-angular-forms-combobox.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-forms-combobox.mjs"
+    },
+    "./forms/common": {
+      "types": "./types/hermes-ui-angular-forms-common.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-forms-common.mjs"
+    },
+    "./forms/datalist": {
+      "types": "./types/hermes-ui-angular-forms-datalist.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-forms-datalist.mjs"
+    },
+    "./forms/datepicker": {
+      "types": "./types/hermes-ui-angular-forms-datepicker.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-forms-datepicker.mjs"
+    },
+    "./forms/file-input": {
+      "types": "./types/hermes-ui-angular-forms-file-input.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-forms-file-input.mjs"
+    },
+    "./forms/input": {
+      "types": "./types/hermes-ui-angular-forms-input.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-forms-input.mjs"
+    },
+    "./forms/native-select": {
+      "types": "./types/hermes-ui-angular-forms-native-select.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-forms-native-select.mjs"
+    },
+    "./forms/number-input": {
+      "types": "./types/hermes-ui-angular-forms-number-input.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-forms-number-input.mjs"
+    },
+    "./forms/password": {
+      "types": "./types/hermes-ui-angular-forms-password.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-forms-password.mjs"
+    },
+    "./forms/radio": {
+      "types": "./types/hermes-ui-angular-forms-radio.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-forms-radio.mjs"
+    },
+    "./forms/range": {
+      "types": "./types/hermes-ui-angular-forms-range.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-forms-range.mjs"
+    },
+    "./forms/select": {
+      "types": "./types/hermes-ui-angular-forms-select.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-forms-select.mjs"
+    },
+    "./forms/textarea": {
+      "types": "./types/hermes-ui-angular-forms-textarea.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-forms-textarea.mjs"
+    },
+    "./icon": {
+      "types": "./types/hermes-ui-angular-icon.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-icon.mjs"
+    },
+    "./layout": {
+      "types": "./types/hermes-ui-angular-layout.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-layout.mjs"
+    },
+    "./layout/breadcrumbs": {
+      "types": "./types/hermes-ui-angular-layout-breadcrumbs.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-layout-breadcrumbs.mjs"
+    },
+    "./layout/main-container": {
+      "types": "./types/hermes-ui-angular-layout-main-container.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-layout-main-container.mjs"
+    },
+    "./layout/nav": {
+      "types": "./types/hermes-ui-angular-layout-nav.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-layout-nav.mjs"
+    },
+    "./layout/tabs": {
+      "types": "./types/hermes-ui-angular-layout-tabs.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-layout-tabs.mjs"
+    },
+    "./layout/vertical-nav": {
+      "types": "./types/hermes-ui-angular-layout-vertical-nav.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-layout-vertical-nav.mjs"
+    },
+    "./modal": {
+      "types": "./types/hermes-ui-angular-modal.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-modal.mjs"
+    },
+    "./popover": {
+      "types": "./types/hermes-ui-angular-popover.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-popover.mjs"
+    },
+    "./popover/common": {
+      "types": "./types/hermes-ui-angular-popover-common.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-popover-common.mjs"
+    },
+    "./popover/dropdown": {
+      "types": "./types/hermes-ui-angular-popover-dropdown.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-popover-dropdown.mjs"
+    },
+    "./popover/signpost": {
+      "types": "./types/hermes-ui-angular-popover-signpost.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-popover-signpost.mjs"
+    },
+    "./popover/tooltip": {
+      "types": "./types/hermes-ui-angular-popover-tooltip.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-popover-tooltip.mjs"
+    },
+    "./progress/progress-bars": {
+      "types": "./types/hermes-ui-angular-progress-progress-bars.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-progress-progress-bars.mjs"
+    },
+    "./progress/spinner": {
+      "types": "./types/hermes-ui-angular-progress-spinner.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-progress-spinner.mjs"
+    },
+    "./stepper": {
+      "types": "./types/hermes-ui-angular-stepper.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-stepper.mjs"
+    },
+    "./timeline": {
+      "types": "./types/hermes-ui-angular-timeline.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-timeline.mjs"
+    },
+    "./toast": {
+      "types": "./types/hermes-ui-angular-toast.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-toast.mjs"
+    },
+    "./utils": {
+      "types": "./types/hermes-ui-angular-utils.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-utils.mjs"
+    },
+    "./utils/conditional": {
+      "types": "./types/hermes-ui-angular-utils-conditional.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-utils-conditional.mjs"
+    },
+    "./utils/loading": {
+      "types": "./types/hermes-ui-angular-utils-loading.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-utils-loading.mjs"
+    },
+    "./wizard": {
+      "types": "./types/hermes-ui-angular-wizard.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-wizard.mjs"
+    },
+    "./hermes-ui.scss": "./hermes-ui.scss",
+    "./main.scss": "./main.scss",
+    "./styles/*": "./styles/*",
+    "./typography/*": "./typography/*"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/popover/common/README.md

@@ -0,0 +1,112 @@
+# HermesPopover Utilities
+
+The `HermesPopover` implementation is a utility infrastructure based on the Angular Overlay and Portals implementation provided in the Angular CDK. It is not a standalone component, but a set of directives and services used to build Clarity overlay components like **Dropdowns**, **Signposts**, and **Tooltips**.
+
+## Goal
+
+The goal is to provide a straightforward utility within the Clarity library that allows for popover-like elements to use a consistent API. It offloads all positioning, z-indexing, and layering logic to the Angular CDK, which is better equipped to handle complex rendering situations.
+
+## Architecture
+
+At its most basic, the popover utility is implemented with a set of directives and a service to track, manage, and subscribe to state change events.
+
+### Service: `HermesPopoverService`
+
+The **`HermesPopoverService`** acts as the central state manager for a specific popover instance. It is **transient** and must be provided at the component level (e.g., inside `HermesDropdown`, `HermesSignpost`, or `HermesTooltip`) to ensure that each popover maintains its own isolated state.
+
+The service is responsible for:
+
+- **State Management**:
+  - **`open`**: A boolean property to get or set the current visibility state of the popover. Setting this triggers the `openChange` observable.
+  - **`position`**: Tracks the current `HermesPopoverPosition` (e.g., `bottom-left`), triggering the `getPositionChange()` stream when updated.
+  - **`popoverType`**: Defines the type of popover (Tooltip, Signpost, etc.) to determine offset calculations.
+
+- **Event Handling**:
+  - **`toggleWithEvent(event: any)`**: A helper method used by triggers. It toggles the `open` state, stores the triggering event (to prevent conflicts like "click outside" closing immediately), and prevents default scrolling behavior for arrow keys.
+  - **`openEvent`**: Stores the specific browser event that triggered the opening of the popover.
+
+- **Focus & Origin Management**:
+  - **`origin`**: Holds the `FlexibleConnectedPositionStrategyOrigin` — either an `ElementRef` (trigger element) or a `HermesPopoverPoint` (`{ x, y }` coordinate). This is used by the CDK to calculate where the overlay should appear.
+  - **`originElement`**: Convenience getter that returns the origin as `ElementRef<HTMLElement>` when element-based, or `null` when point-based.
+  - **`originPoint`**: Convenience getter that returns the origin as `HermesPopoverPoint` when point-based, or `null` when element-based.
+  - **`closeButtonRef`**: Holds the `ElementRef` of the internal close button (if applicable).
+  - **`focusOrigin()`**: A utility method to return focus to the origin element (e.g., when the menu closes), ensuring accessibility compliance. No-op for point-based origins.
+  - **`focusCloseButton()`**: Moves focus to the close button inside the content when appropriate.
+
+- **Reactive Streams**:
+  - **`openChange`**: Observable that emits whenever the open state changes.
+  - **`popoverVisible`**: Observable used to coordinate when the DOM is actually ready/visible.
+  - **`getEventChange()`**: Observable stream of the events that triggered state changes.
+
+### Directives
+
+1.  **`[hermesPopoverOrigin]`**:
+
+- Used on the element that serves as the reference point for positioning.
+- Passes an `ElementRef` to the service as the `origin`, which is used for focus management and positioning calculations.
+
+2.  **`*hermesPopoverContent`**:
+
+- A structural directive that renders the view and hoists it to an Overlay on the `body` element using a `DomPortal`.
+- Accepts configuration arguments for the overlay (open state, position, outside click behavior, scroll behavior).
+- Manages "Click Outside" and "Scroll to Close" logic.
+
+3.  **`[hermesPopoverCloseButton]`**:
+
+- Should only be used inside popover content containers.
+- Calls the toggle method on the service and restores focus to the origin element.
+
+4.  **`[hermesPopoverOpenCloseButton]`**:
+
+- Handles toggling the popover content open and closed via the popover service.
+- Typically used on triggers (e.g., the button that opens a menu).
+
+### HermesPopoverContent Inputs
+
+The `*hermesPopoverContent` directive is the "workhorse" of the utility. It accepts several inputs to configure behavior:
+
+- **`hermesPopoverContent`** (boolean):
+  - Controls the open/closed state of the popover. When true, the overlay is created and attached; when false, it is detached.
+- **`hermesPopoverContentAt`** (`HermesPopoverPosition | ConnectedPosition`):
+  - Defines the preferred position of the content relative to the origin (e.g., `top-right`, `bottom-left`). It sets the `preferredPosition` for the CDK overlay.
+- **`hermesPopoverContentAvailablePositions`** (`ConnectedPosition[]`):
+  - A prioritized list of fallback positions the overlay can attempt to use if the preferred position does not fit within the viewport.
+- **`hermesPopoverContentType`** (`HermesPopoverType`):
+  - Specifies the type of popover (e.g., `DROPDOWN`, `TOOLTIP`, `SIGNPOST`). This determines specific offsets and behavior variations associated with that type.
+- **`hermesPopoverContentOutsideClickToClose`** (boolean):
+  - Determines if clicking outside the popover content should automatically close it. Defaults to `true`.
+- **`hermesPopoverContentScrollToClose`** (boolean):
+  - Determines if scrolling the page should automatically close the popover. Defaults to `false`.
+
+## Enums
+
+1.  **`HermesPopoverType`**: Describes the popover variation: `SIGNPOST`, `TOOLTIP`, `DROPDOWN`, and `DEFAULT`.
+2.  **`HermesPopoverPosition`**: Describes the popover position relative to the origin (e.g., `top-left`, `bottom-right`).
+3.  **`HermesPosition`**: Describes the specific point of contact on both the origin and content elements.
+
+---
+
+## Usage Example
+
+To use the popover utility, a host component must provide the `HermesPopoverService`. Components generally provide a `HermesPopoverPosition` via the `at` input to describe the preferred content position.
+
+```html
+<button class="btn" hermesPopoverOpenCloseButton hermesPopoverOrigin [attr.aria-owns]="popoverId">
+  <hermes-icon shape="home"></hermes-icon> Popover Origin
+</button>
+<div
+  [id]="popoverId"
+  role="dialog"
+  cdkTrapFocus
+  *hermesPopoverContent="open;
+    at: position; availablePositions: [...]; outsideClickToClose: true; scrollToClose: true"
+>
+  <div role="heading">
+    Overlay Header
+    <button class="btn btn-sm btn-outline-neutral btn-icon" hermesPopoverCloseButton>
+      <hermes-icon shape="times"></hermes-icon>
+    </button>
+  </div>
+  <div>Overlay Content</div>
+</div>
+```

package/popover/common/_popover.clarity.scss

@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+
+@use 'sass:map';
+@use '../../styles/mixins';
+@use '../../styles/variables/variables.global';
+@use '@angular/cdk/overlay-prebuilt.css';
+
+@include mixins.exports('popover.clarity') {
+  .is-off-screen {
+    @include mixins.off-screen-styles();
+  }
+
+  .hermes-popover-content {
+    z-index: map.get(variables.$hermes-layers, smart-popover);
+  }
+
+  .hermes-overlay-container {
+    &,
+    .cdk-overlay-connected-position-bounding-box {
+      z-index: map.get(variables.$hermes-layers, smart-popover);
+    }
+  }
+}