feat: add icon support for six-sidbar-item

Author: Leupp, Joel

docs/changelog.md

@@ -12,15 +12,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 - **⚠️Experimental**: Adding example React app with Vite.
 
 - [Documentation](guide/angular.md) for using web components with Angular's standalone bootstrapping
+- `ActiveSidebarItemGroupDirective` and `ActiveSidebarItemDirective`: Added angular sidbar helper
+  directives
+- Added nested sidbar menu to the angular demo application to showcase the helper directives
 - `six-header-dropdown`: Added `filter` and `filterPlaceholder` properties.
 - `six-header-menu-button`: Added `caret`, `disabled`, `loading`, `submit` and `reset` properties.
 - `six-header-menu-button`: Added `suffix` and `prefix` slots.
+- `six-sidebar-item` : added icon property analog to `six-sidebar-item-group`
 
 ### Fixed
 
 - `six-logo`: removed inline style tag
 - `six-timepicker`: removed unnecessary bottom padding
 - `six-button` : simplify use of prefix and suffix icons
+- `six-sidebar-item-group`: fixed spacing for sub items
 
 ### Removed
 

docs/components/six-icon.md

@@ -282,6 +282,7 @@ Enter an icon label and press enter to display an icon:
  - [six-menu-item](six-menu-item.html)
  - [six-search-field](six-search-field.html)
  - [six-select](six-select.html)
+ - [six-sidebar-item](six-sidebar-item.html)
  - [six-sidebar-item-group](six-sidebar-item-group.html)
  - [six-stage-indicator](six-stage-indicator.html)
  - [six-tile](six-tile.html)
@@ -302,6 +303,7 @@ graph TD;
   six-menu-item --> six-icon
   six-search-field --> six-icon
   six-select --> six-icon
+  six-sidebar-item --> six-icon
   six-sidebar-item-group --> six-icon
   six-stage-indicator --> six-icon
   six-tile --> six-icon

docs/components/six-sidebar-item-group.md

@@ -8,8 +8,8 @@
 ```html
 <div style="max-width: 20rem; padding: 1rem">
   <six-sidebar-item-group icon="description" name="Upload" value="upload">
-    <six-sidebar-item value="data">Data</six-sidebar-item>
-    <six-sidebar-item value="history">History</six-sidebar-item>
+    <six-sidebar-item value="data" icon="analytics">Data</six-sidebar-item>
+    <six-sidebar-item value="history" icon="history">History</six-sidebar-item>
     <six-sidebar-item-group icon="settings" name="Settings">
       <six-sidebar-item value="data">Data</six-sidebar-item>
       <six-sidebar-item value="history">History</six-sidebar-item>

docs/components/six-sidebar-item.md

@@ -16,6 +16,21 @@
 ```
 
 
+## six sidebar item with icons
+
+<docs-demo-six-sidebar-item-1></docs-demo-six-sidebar-item-1>
+
+```html
+<div style="width: 10em" id="six-sidebar-items-icon">
+  <six-sidebar-item icon="description">Data</six-sidebar-item>
+  <six-sidebar-item icon="history">History</six-sidebar-item>
+  <six-sidebar-item icon="account_balance">Transactions</six-sidebar-item>
+  <six-sidebar-item icon="upload">Upload</six-sidebar-item>
+  <six-sidebar-item icon="link" href="http://www.google.ch">Link</six-sidebar-item>
+</div>
+```
+
+
 
 <!-- Auto Generated Below -->
 
@@ -26,6 +41,7 @@
 | ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
 | `disabled` | `disabled` | Set to true to draw the sidebar item in a disabled state.                                                                          | `boolean`             | `false`     |
 | `href`     | `href`     | Provide if the item should be rendered as anchor tag. Note, that the href is added automatically when using routerLink in Angular. | `string \| undefined` | `undefined` |
+| `icon`     | `icon`     | Icon of the item                                                                                                                   | `string`              | `''`        |
 | `selected` | `selected` | Set to true to draw the item in a selected state.                                                                                  | `boolean`             | `false`     |
 | `value`    | `value`    | A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected.                    | `string`              | `''`        |
 
@@ -37,6 +53,19 @@
 |      | Used to define the nested displayed text of the item. |
 
 
+## Dependencies
+
+### Depends on
+
+- [six-icon](six-icon.html)
+
+### Graph
+```mermaid
+graph TD;
+  six-sidebar-item --> six-icon
+  style six-sidebar-item fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 Copyright © 2021-present SIX-Group

docs/components/six-sidebar.md

@@ -14,8 +14,8 @@ six-sidebar allows to add a static sidebar to the left or right of the `six-root
 ```html
 <six-sidebar position="left" width="20rem" open>
   <six-sidebar-item-group icon="description" name="Upload" value="upload">
-    <six-sidebar-item value="data" disabled="true">Data</six-sidebar-item>
-    <six-sidebar-item value="history">History</six-sidebar-item>
+    <six-sidebar-item value="data" icon="analytics" disabled="true">Data</six-sidebar-item>
+    <six-sidebar-item value="history" icon="history">History</six-sidebar-item>
     <six-sidebar-item-group icon="settings" name="Settings">
       <six-sidebar-item value="data" selected>Data</six-sidebar-item>
       <six-sidebar-item value="history">History</six-sidebar-item>

docs/examples/docs-demo-six-sidebar-0.vue

@@ -3,8 +3,8 @@
 
         <six-sidebar position="left" width="20rem" open>
           <six-sidebar-item-group icon="description" name="Upload" value="upload">
-            <six-sidebar-item value="data" disabled="true">Data</six-sidebar-item>
-            <six-sidebar-item value="history">History</six-sidebar-item>
+            <six-sidebar-item value="data" icon="analytics" disabled="true">Data</six-sidebar-item>
+            <six-sidebar-item value="history" icon="history">History</six-sidebar-item>
             <six-sidebar-item-group icon="settings" name="Settings">
               <six-sidebar-item value="data" selected>Data</six-sidebar-item>
               <six-sidebar-item value="history">History</six-sidebar-item>

docs/examples/docs-demo-six-sidebar-item-1.vue

@@ -0,0 +1,22 @@
+<template>
+<div>
+
+        <div style="width: 10em" id="six-sidebar-items-icon">
+          <six-sidebar-item icon="description">Data</six-sidebar-item>
+          <six-sidebar-item icon="history">History</six-sidebar-item>
+          <six-sidebar-item icon="account_balance">Transactions</six-sidebar-item>
+          <six-sidebar-item icon="upload">Upload</six-sidebar-item>
+          <six-sidebar-item icon="link" href="http://www.google.ch">Link</six-sidebar-item>
+        </div>
+      
+</div>
+</template>
+<style>
+
+</style>
+<script>
+export default {
+  name: 'docs-demo-six-sidebar-item-1',
+  mounted() {  }
+}
+</script>

docs/examples/docs-demo-six-sidebar-item-group-0.vue

@@ -3,8 +3,8 @@
 
         <div style="max-width: 20rem; padding: 1rem">
           <six-sidebar-item-group icon="description" name="Upload" value="upload">
-            <six-sidebar-item value="data">Data</six-sidebar-item>
-            <six-sidebar-item value="history">History</six-sidebar-item>
+            <six-sidebar-item value="data" icon="analytics">Data</six-sidebar-item>
+            <six-sidebar-item value="history" icon="history">History</six-sidebar-item>
             <six-sidebar-item-group icon="settings" name="Settings">
               <six-sidebar-item value="data">Data</six-sidebar-item>
               <six-sidebar-item value="history">History</six-sidebar-item>

examples/angular/src/app/app.module.ts

@@ -14,6 +14,7 @@ import { HeaderComponent } from './components/header/header.component';
 import { FormComponent } from './pages/form/form.component';
 import { AlertComponent } from './pages/alert/alert.component';
 import { DialogComponent } from './pages/dialog/dialog.component';
+import { SettingsComponent } from './pages/settings/settings.component';
 
 @NgModule({
   declarations: [
@@ -25,6 +26,7 @@ import { DialogComponent } from './pages/dialog/dialog.component';
     FormComponent,
     AlertComponent,
     DialogComponent,
+    SettingsComponent,
   ],
   imports: [
     BrowserModule,

examples/angular/src/app/app.routes.ts

@@ -3,6 +3,7 @@ import { FormComponent } from './pages/form/form.component';
 import { HomeComponent } from './pages/home/home.component';
 import { AlertComponent } from './pages/alert/alert.component';
 import { DialogComponent } from './pages/dialog/dialog.component';
+import { SettingsComponent } from './pages/settings/settings.component';
 
 export const routes: Routes = [
   {
@@ -26,4 +27,12 @@ export const routes: Routes = [
     path: 'dialog',
     component: DialogComponent,
   },
+  {
+    path: 'settings',
+    children: [
+      { path: '', redirectTo: 'data', pathMatch: 'full' },
+      { path: 'data', component: SettingsComponent },
+      { path: 'history', component: SettingsComponent },
+    ],
+  },
 ];

examples/angular/src/app/components/left-sidebar/left-sidebar.component.html

@@ -3,4 +3,8 @@
   <six-sidebar-item-group routerLink="/form" name="Form" icon="assignment"></six-sidebar-item-group>
   <six-sidebar-item-group routerLink="/alert" name="Alert" icon="notifications_active"></six-sidebar-item-group>
   <six-sidebar-item-group routerLink="/dialog" name="Dialog" icon="web_asset"></six-sidebar-item-group>
+  <six-sidebar-item-group icon="settings" name="Settings">
+    <six-sidebar-item routerLink="/settings/data" icon="analytics">Data</six-sidebar-item>
+    <six-sidebar-item routerLink="/settings/history" icon="history">History</six-sidebar-item>
+  </six-sidebar-item-group>
 </six-sidebar>

examples/angular/src/app/pages/settings/settings.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { map } from 'rxjs';
+
+@Component({
+  selector: 'app-settings',
+  template: ` <h1>This is the {{ settingsType$ | async }} settings</h1> `,
+})
+export class SettingsComponent {
+  settingsType$ = this.route.url.pipe(map((segments) => segments[segments.length - 1].path));
+
+  constructor(private route: ActivatedRoute) {}
+}

libraries/ui-library-angular/src/lib/sidebar/active-sidebar-item-group.directive.ts

@@ -0,0 +1,26 @@
+import { ContentChildren, Directive, HostBinding, HostListener, inject, QueryList } from '@angular/core';
+import { RouterLinkActive } from '@angular/router';
+import { SixSidebarItem, SixSidebarItemGroup } from '../stencil-generated/components';
+
+/**
+ * This directive opens the six-sidbar-item-group bases on the active route
+ */
+@Directive({
+  selector: 'six-sidebar-item-group',
+  hostDirectives: [RouterLinkActive],
+})
+export class ActiveSidebarItemGroupDirective {
+  private routerLinkActive = inject(RouterLinkActive);
+  private sidebarItemGroup = inject(SixSidebarItemGroup);
+
+  @ContentChildren(SixSidebarItem) private sidebarItems!: QueryList<SixSidebarItem>;
+
+  @HostBinding('open')
+  get open() {
+    if (this.sidebarItems?.length > 0) {
+      return this.routerLinkActive.isActive ? true : this.sidebarItemGroup.open;
+    } else {
+      return this.routerLinkActive.isActive;
+    }
+  }
+}

libraries/ui-library-angular/src/lib/sidebar/active-sidebar-item.directive.ts

@@ -0,0 +1,18 @@
+import { Directive, HostBinding, inject } from '@angular/core';
+import { RouterLinkActive } from '@angular/router';
+
+/**
+ * This directive selects the six-sidbar-item bases on the active route
+ */
+@Directive({
+  selector: 'six-sidebar-item',
+  hostDirectives: [RouterLinkActive],
+})
+export class ActiveSidebarItemDirective {
+  private routerLinkActive = inject(RouterLinkActive);
+
+  @HostBinding('selected')
+  get selected() {
+    return this.routerLinkActive.isActive;
+  }
+}

libraries/ui-library-angular/src/lib/stencil-generated/components.ts

@@ -1301,14 +1301,14 @@ allow you to set it on a different element in the sidebar, such as an input or b
 
 
 @ProxyCmp({
-  inputs: ['disabled', 'href', 'selected', 'value']
+  inputs: ['disabled', 'href', 'icon', 'selected', 'value']
 })
 @Component({
   selector: 'six-sidebar-item',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['disabled', 'href', 'selected', 'value'],
+  inputs: ['disabled', 'href', 'icon', 'selected', 'value'],
 })
 export class SixSidebarItem {
   protected el: HTMLElement;

libraries/ui-library-angular/src/lib/ui-library-angular.module.ts

@@ -20,6 +20,8 @@ import { SwitchValueAccessor } from './control-value-accessors/switch-value-acce
 import { TimepickerValueAccessor } from './control-value-accessors/timepicker-value-accessor';
 import { ValidationMessagesService } from './services/validation-messages.service';
 import { SixRouterLinkDirective } from './link/six-router-link.directive';
+import { ActiveSidebarItemDirective } from './sidebar/active-sidebar-item.directive';
+import { ActiveSidebarItemGroupDirective } from './sidebar/active-sidebar-item-group.directive';
 
 @NgModule({
   declarations: [
@@ -50,6 +52,10 @@ import { SixRouterLinkDirective } from './link/six-router-link.directive';
 
     // router link directive
     SixRouterLinkDirective,
+
+    // sidebar helpers
+    ActiveSidebarItemDirective,
+    ActiveSidebarItemGroupDirective,
   ],
   imports: [],
   exports: [
@@ -80,6 +86,10 @@ import { SixRouterLinkDirective } from './link/six-router-link.directive';
 
     // router link directive
     SixRouterLinkDirective,
+
+    // sidebar helpers
+    ActiveSidebarItemDirective,
+    ActiveSidebarItemGroupDirective,
   ],
 })
 export class UiLibraryAngularModule {

libraries/ui-library-angular/src/public-api.ts

@@ -29,6 +29,10 @@ export * from './lib/form/six-form.directive';
 // link helpers
 export * from './lib/link/six-router-link.directive';
 
+// sidbar helpers
+export * from './lib/sidebar/active-sidebar-item.directive';
+export * from './lib/sidebar/active-sidebar-item-group.directive';
+
 // services
 export * from './lib/services/validation-messages.service';
 export * from './lib/services/alert.service';

libraries/ui-library-vue/src/lib/stencil-generated/components.ts

@@ -508,6 +508,7 @@ export const SixSidebarItem = /*@__PURE__*/ defineContainer<JSX.SixSidebarItem>(
   'value',
   'selected',
   'disabled',
+  'icon',
   'href'
 ]);
 

libraries/ui-library/src/components.d.ts

@@ -1558,6 +1558,10 @@ export namespace Components {
           * Provide if the item should be rendered as anchor tag. Note, that the href is added automatically when using routerLink in Angular.
          */
         "href": string | undefined;
+        /**
+          * Icon of the item
+         */
+        "icon": string;
         /**
           * Set to true to draw the item in a selected state.
          */
@@ -4784,6 +4788,10 @@ declare namespace LocalJSX {
           * Provide if the item should be rendered as anchor tag. Note, that the href is added automatically when using routerLink in Angular.
          */
         "href"?: string | undefined;
+        /**
+          * Icon of the item
+         */
+        "icon"?: string;
         /**
           * Set to true to draw the item in a selected state.
          */

libraries/ui-library/src/components/six-icon/readme.md

@@ -36,6 +36,7 @@
  - [six-menu-item](../six-menu-item)
  - [six-search-field](../six-search-field)
  - [six-select](../six-select)
+ - [six-sidebar-item](../six-sidebar-item)
  - [six-sidebar-item-group](../six-sidebar-item-group)
  - [six-stage-indicator](../six-stage-indicator)
  - [six-tile](../six-tile)
@@ -56,6 +57,7 @@ graph TD;
   six-menu-item --> six-icon
   six-search-field --> six-icon
   six-select --> six-icon
+  six-sidebar-item --> six-icon
   six-sidebar-item-group --> six-icon
   six-stage-indicator --> six-icon
   six-tile --> six-icon

libraries/ui-library/src/components/six-sidebar-item-group/index.html

@@ -15,8 +15,8 @@ <h2>six sidebar group</h2>
       <section>
         <div style="max-width: 20rem; padding: 1rem">
           <six-sidebar-item-group icon="description" name="Upload" value="upload">
-            <six-sidebar-item value="data">Data</six-sidebar-item>
-            <six-sidebar-item value="history">History</six-sidebar-item>
+            <six-sidebar-item value="data" icon="analytics">Data</six-sidebar-item>
+            <six-sidebar-item value="history" icon="history">History</six-sidebar-item>
             <six-sidebar-item-group icon="settings" name="Settings">
               <six-sidebar-item value="data">Data</six-sidebar-item>
               <six-sidebar-item value="history">History</six-sidebar-item>

libraries/ui-library/src/components/six-sidebar-item-group/six-sidebar-item-group.scss

@@ -14,6 +14,7 @@
 
 .six-sidebar-item-group--subgroup::part(header) {
   background-color: transparent !important;
+  --horizontal-padding: var(--six-spacing-large);
 }
 
 .six-sidebar-item-group__header-icon {