@hermes-ui/angular 0.1.4

package/addons/menu/menu.component.scss

@@ -0,0 +1,120 @@
+/*
+ * 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-dropdown-menu {
+  div.scrollable-content {
+    position: static;
+    overflow: hidden auto;
+  }
+
+  .dropdown-header {
+    display: flex;
+
+    .title-text {
+      overflow-wrap: break-word;
+      white-space: normal;
+      min-width: 11rem;
+      max-height: 21rem;
+    }
+  }
+
+  .dropdown-item {
+    &.menu-item-action {
+      height: auto;
+
+      .dropdown-item-content {
+        display: contents;
+      }
+    }
+  }
+
+  .dropdown-divider {
+    margin: 5px var(--hermes-base-horizontal-offset-l);
+  }
+}
+
+hermes-dropdown {
+  display: block;
+  position: static;
+}
+
+.appfx-menu-trigger {
+  display: none;
+}
+
+.menu-item-action {
+  display: flex;
+  align-items: center;
+}
+
+.menu-item-text {
+  flex: 1 1 auto;
+  white-space: pre-line;
+  overflow-wrap: break-word;
+  width: max-content;
+}
+
+.menu-item-icon {
+  margin-right: 4px;
+  margin-left: 0;
+  display: inline-block;
+  flex: 0 0 auto;
+}
+
+.no-icon-item {
+  width: 18px;
+}
+
+.menu-item-shortcut {
+  flex: 0 0 auto;
+  padding-left: 0.5rem;
+  opacity: 0.6;
+}
+
+.app-menu {
+  .fullscreen {
+    width: 100vw;
+    height: 100vh;
+  }
+
+  &.zoom4x {
+    hermes-dropdown-menu {
+      // This style should be removed when clarity starts to support zoom4x natively.
+      // For now we are overwriting the clarity style to add support for zoom4x.
+      position: fixed !important;
+      max-width: none;
+      margin: 0;
+      border-width: 0;
+      border-radius: 0;
+      transform: none !important;
+    }
+
+    .submenu-header-text {
+      vertical-align: middle;
+    }
+
+    .btn-close-submenu {
+      cursor: pointer;
+      margin-right: 4px;
+      margin-left: 0;
+      margin-top: 1px;
+      display: inline-block;
+      border: 0;
+      background: transparent;
+      padding: 0;
+
+      hermes-icon {
+        fill: var(--hermes-alias-typography-color-400);
+      }
+    }
+
+    .btn-close-menu {
+      margin-top: 2px;
+      display: block;
+    }
+  }
+}

package/addons/property-view/components/property-view-category.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.
+ */
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  padding: 0.6rem;
+  line-height: 14px;
+  box-sizing: border-box;
+
+  .pv-sections-table {
+    width: auto;
+    margin: 0;
+    box-sizing: border-box;
+    border-collapse: separate;
+
+    .section-spacer,
+    [appfx-property-view-section] {
+      border: 0 solid transparent;
+    }
+
+    .section-spacer th {
+      padding-top: 0.6rem;
+      padding-bottom: 0;
+      // unset clarity visual style --hermes-table-noborder-bg-color
+      background-color: unset;
+    }
+
+    .pv-section-visually-hidden {
+      display: none;
+    }
+  }
+}

package/addons/property-view/components/property-view-message.component.scss

@@ -0,0 +1,48 @@
+/*
+ * 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 {
+  &.indented {
+    .pv-message-container {
+      padding-left: 0.96rem;
+    }
+  }
+
+  &.collapsed {
+    visibility: hidden;
+
+    .pv-message-container {
+      padding-top: 0;
+      padding-bottom: 0;
+
+      .pv-message-content {
+        display: block;
+        height: 0;
+        overflow: hidden;
+      }
+    }
+  }
+
+  .pv-message-container {
+    padding-left: 0;
+    padding-right: 0;
+    line-height: inherit;
+
+    .pv-message-content {
+      display: inline-block;
+
+      .pv-message-icon {
+        display: inline-block;
+        margin: 0;
+        vertical-align: middle;
+      }
+
+      .pv-message-text {
+        vertical-align: middle;
+      }
+    }
+  }
+}

package/addons/property-view/components/property-view-property.component.scss

@@ -0,0 +1,122 @@
+/*
+ * 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 {
+  &.indented {
+    .pv-property-key-container {
+      padding-left: 0.96rem;
+    }
+  }
+
+  &.collapsed {
+    visibility: hidden;
+
+    .pv-property-key-container,
+    .pv-property-values-container {
+      padding-top: 0;
+      padding-bottom: 0;
+
+      .pv-property-key-content,
+      .pv-property-values-content {
+        display: block;
+        height: 0;
+        overflow: hidden;
+      }
+    }
+  }
+
+  .pv-property-key-container,
+  .pv-property-values-container {
+    // Explicitly set the padding-top and padding-bottom because of different global styles leaking
+    // from '_tables.clarity.scss' that change the spacing layout of appfx-property-view.
+    // To ensure a consistent layout across Clarity versions, set the padding explicitly.
+    // Note: The 'important' keyword is needed to override the padding inherited from global Clarity styles.
+    padding-top: 0.4rem !important;
+    padding-bottom: 0.2rem !important;
+    padding-left: 0;
+    padding-right: 0;
+    line-height: inherit;
+  }
+
+  .pv-property-key-container {
+    font-weight: 500;
+    padding-right: 0.96rem;
+
+    .pv-property-key-content {
+      display: inline-block;
+      width: 7.2rem;
+      overflow-wrap: break-word;
+
+      .pv-property-key-icon {
+        display: inline-block;
+        margin: 0;
+        vertical-align: middle;
+      }
+
+      .pv-property-key-text {
+        white-space: pre-wrap;
+        vertical-align: middle;
+      }
+    }
+  }
+
+  .pv-property-values-container {
+    padding-left: 0.96rem;
+
+    .pv-property-values-content {
+      min-width: 7.2rem;
+      display: inline-block;
+      width: 100%;
+      box-sizing: border-box;
+
+      .pv-property-value {
+        width: 100%;
+        display: inline-block;
+
+        &:not(:first-child) {
+          padding-top: 0.24rem;
+        }
+
+        .pv-property-value-icon {
+          display: inline-block;
+          margin: 0;
+          vertical-align: middle;
+        }
+
+        .pv-property-value-link {
+          vertical-align: middle;
+        }
+
+        .pv-property-value-text {
+          white-space: pre-wrap;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+
+  &.zoom4x {
+    &:not(.indented) {
+      .pv-property-values-container {
+        padding-left: 0;
+      }
+    }
+
+    .pv-property-key-container {
+      padding-right: 0;
+    }
+
+    .pv-property-key-container,
+    .pv-property-values-container {
+      display: block;
+      width: 100%;
+    }
+
+    .pv-property-key-container .pv-property-key-content {
+      width: 100%;
+    }
+  }
+}

package/addons/property-view/components/property-view-section.component.scss

@@ -0,0 +1,59 @@
+/*
+ * 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 {
+  $hermes-td-font-size: 0.65rem;
+
+  .pv-section-title-container {
+    .pv-section-title-content {
+      padding-left: 0;
+      padding-right: 0;
+      border: 0 solid transparent;
+      line-height: inherit;
+      // since UX requirement is to bold the keys of the property view,
+      // after doing it the keys appears bigger than the section title,
+      // because Clarity sets TH size to 0.55re and TD to 0.65rem. To
+      // workaround this we override the TH size in property view by
+      // increasing its font size as TD.
+      font-size: $hermes-td-font-size;
+      // unset clarity visual style --hermes-table-noborder-bg-color
+      background-color: unset;
+
+      .pv-section-title-expand-button {
+        padding: 0;
+        border: 0;
+        background-color: transparent;
+        cursor: pointer;
+        vertical-align: middle;
+        color: unset;
+      }
+
+      .pv-section-title-icon {
+        margin: 0;
+        vertical-align: middle;
+      }
+
+      .pv-section-title-text {
+        vertical-align: middle;
+      }
+
+      .pv-section-actions-dropdown {
+        display: inline-block;
+        vertical-align: middle;
+
+        [hermesDropdownTrigger] {
+          height: auto;
+          font-size: inherit;
+          line-height: inherit;
+        }
+
+        hermes-icon {
+          top: 2px;
+        }
+      }
+    }
+  }
+}

package/addons/property-view/components/property-view.component.scss

@@ -0,0 +1,23 @@
+/*
+ * 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: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+
+  .nav {
+    flex: 0 0 auto;
+  }
+
+  .pv-category-container {
+    flex: 1 1 auto;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+  }
+}

package/addons/stepper/stepper.component.scss

@@ -0,0 +1,53 @@
+/*
+ * 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.
+ */
+
+.disable-form {
+  left: 0;
+  top: 0;
+  z-index: 10;
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+form appfx-spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 999;
+}
+
+hermes-step-description {
+  ::ng-deep {
+    appfx-property-view-category {
+      padding: 0;
+    }
+
+    td.pv-message-container {
+      padding: 0 !important;
+    }
+
+    .pv-message-text {
+      line-height: 1.2rem;
+    }
+
+    .table td,
+    .table th {
+      background: none;
+    }
+  }
+}
+
+:host {
+  /*
+   * Style for the 'Back' stepper navigation button.
+   * Overrides the default Clarity btn-link style for the 'previous' button
+   * to provide a consistent 'outline' look with the Appfx 'Back' wizard button.
+   */
+  button[hermesStepButton='previous'] {
+    border: 1px solid var(--hermes-btn-primary-outline-color);
+  }
+}

package/addons/tabs/tab-links/tab-links.component.scss

@@ -0,0 +1,61 @@
+/*
+ * 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 {
+  .btn-show-tabs {
+    cursor: pointer;
+    display: inline-flex;
+    border: 0;
+    background: transparent;
+    padding-left: 0;
+    padding-top: 0;
+
+    hermes-icon {
+      height: 1.2rem;
+      width: 1rem;
+      fill: var(--hermes-alias-typography-color-400);
+    }
+  }
+
+  .btn-close-tabs {
+    cursor: pointer;
+    display: none;
+    border: 0;
+    background: transparent;
+    padding-left: 0;
+    margin-top: -0.1rem;
+
+    hermes-icon {
+      height: 1.2rem;
+      width: 1rem;
+      fill: var(--hermes-alias-typography-color-400);
+    }
+  }
+
+  .nav-step-title-wrapper {
+    display: inline-flex;
+
+    .nav-step-title {
+      margin: 0;
+      padding: 0 0.15rem;
+    }
+  }
+
+  &.opened {
+    .btn-show-tabs {
+      display: none;
+    }
+
+    .btn-close-tabs {
+      display: inline-block;
+    }
+
+    .nav-step-title-wrapper {
+      display: none;
+    }
+  }
+}

package/addons/tabs/tabs.a11y.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.
+ */
+
+:host {
+  .appfx-tabs {
+    &.show-tab-content {
+      ::ng-deep {
+        .tab-content {
+          display: flex;
+        }
+      }
+    }
+
+    &:not(.show-tab-content) {
+      ::ng-deep {
+        .tab-content {
+          display: none;
+        }
+      }
+    }
+  }
+}

package/addons/tabs/tabs.component.scss

@@ -0,0 +1,95 @@
+/*
+ * 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.
+ */
+
+.div-disabled {
+  left: 0;
+  top: 0;
+  z-index: 10;
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* 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;
+}
+
+:host {
+  min-height: inherit;
+  display: block;
+
+  &.loading {
+    position: relative;
+  }
+
+  ::ng-deep {
+    .tab-content {
+      width: 100%;
+    }
+  }
+
+  ::ng-deep hermes-tabs.appfx-secondary-tabs > ul.nav {
+    gap: 0;
+    box-shadow: none;
+
+    li[role='presentation'] {
+      &:not(:first-of-type) button {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      &:not(:last-of-type) button {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+
+    [role='tab'] {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  .appfx-tabs {
+    &.show-tab-nav {
+      ::ng-deep {
+        .nav {
+          display: flex;
+        }
+      }
+    }
+
+    &:not(.show-tab-nav) {
+      ::ng-deep {
+        .nav {
+          display: none;
+        }
+      }
+    }
+
+    appfx-step-container.content-container {
+      width: 100%;
+    }
+
+    hermes-tabs.tabs-vertical {
+      ::ng-deep {
+        & > ul.nav {
+          button {
+            white-space: normal;
+            height: auto;
+            line-height: 1.2rem;
+            min-height: 1.8rem;
+            // Keep the bottom border hidden on hover
+            border: none !important;
+          }
+        }
+      }
+    }
+  }
+}