refactor(sidebar): drop sidebar-toggler component, use directive instead, use control flow, use @input() transform

Author: xidedix

projects/coreui-angular/src/lib/sidebar/public_api.ts

@@ -2,7 +2,7 @@ export { SidebarComponent } from './sidebar/sidebar.component';
 export { SidebarService } from './sidebar.service';
 export { SidebarBrandComponent } from './sidebar-brand/sidebar-brand.component';
 export { SidebarToggleDirective } from './sidebar-toggle/sidebar-toggle.directive';
-export { SidebarTogglerComponent } from './sidebar-toggler/sidebar-toggler.component';
+export { SidebarTogglerDirective } from './sidebar-toggler/sidebar-toggler.directive';
 export { SidebarHeaderComponent } from './sidebar-header/sidebar-header.component';
 export { SidebarFooterComponent } from './sidebar-footer/sidebar-footer.component';
 

projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.html

@@ -1,12 +1,10 @@
 @if (brandImg) {
   <a [routerLink]="routerLink">
     @if (brandFull) {
-      <img [cHtmlAttr]="brandFull"
-           [ngClass]="'sidebar-brand-full'">
+      <img [cHtmlAttr]="brandFull" [ngClass]="'sidebar-brand-full'">
     }
     @if (brandNarrow) {
-      <img [cHtmlAttr]="brandNarrow"
-           [ngClass]="'sidebar-brand-narrow'">
+      <img [cHtmlAttr]="brandNarrow" [ngClass]="'sidebar-brand-narrow'">
     }
   </a>
 } @else {

projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.component.html

@@ -12,15 +12,19 @@
   (@openClose.done)="onAnimationDone($event)"
   (@openClose.start)="onAnimationStart($event)"
   [@openClose]="open ? 'open' : 'closed'"
+  [compact]="compact"
   [dropdownMode]="dropdownMode"
   [groupItems]="true"
   [navItems]="navItems"
   [ngStyle]="display"
 />
 
 <ng-template #iconTemplate let-item>
+  <!--  <i *ngIf="item?.icon" [ngClass]="item | cSidebarNavIcon"></i>-->
   @if (item?.icon) {
-    <i [ngClass]="item | cSidebarNavIcon"></i>
+    <span class="nav-icon">
+    <span [ngClass]="item.icon ?? ''"></span>
+  </span>
   }
   @if (item?.iconComponent) {
     <svg

projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.html

@@ -1,6 +1,6 @@
-<a [ngClass]="getItemClass()"
-   href="{{item.url}}"
-   [cHtmlAttr]="item.attributes">
+<a [cHtmlAttr]="item.attributes"
+   [ngClass]="getItemClass()"
+   href="{{item.url}}">
   @if (helper.hasIcon(item)) {
     <i [ngClass]="getLabelIconClass()"></i>
   }

projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.html

@@ -1,8 +1,6 @@
 @switch (linkType) {
   @case ('disabled') {
-    <a [ngClass]="item | cSidebarNavLink"
-       [cHtmlAttr]="item.attributes ?? {}"
-    >
+    <a [cHtmlAttr]="item.attributes ?? {}" [ngClass]="item | cSidebarNavLink">
       <ng-container *ngTemplateOutlet="iconTemplate; context: {$implicit: item}" />
       <c-sidebar-nav-link-content [item]="item" />
       @if (item.badge) {
@@ -11,11 +9,7 @@
     </a>
   }
   @case ('external') {
-    <a [ngClass]="item | cSidebarNavLink"
-       [href]="href"
-       [cHtmlAttr]="item.attributes ?? {}"
-       (click)="linkClicked()"
-    >
+    <a (click)="linkClicked()" [cHtmlAttr]="item.attributes ?? {}" [href]="href" [ngClass]="item | cSidebarNavLink">
       <ng-container *ngTemplateOutlet="iconTemplate; context: {$implicit: item}" />
       <c-sidebar-nav-link-content [item]="item" />
       @if (item.badge) {
@@ -24,20 +18,20 @@
     </a>
   }
   @default {
-    <a [ngClass]="item | cSidebarNavLink"
+    <a (click)="linkClicked()"
        [cHtmlAttr]="item.attributes ?? {}"
-       [target]="item.attributes?.['target']"
-       [queryParams]="item.linkProps?.queryParams ?? null"
        [fragment]="item.linkProps?.fragment"
-       [queryParamsHandling]="item.linkProps?.queryParamsHandling"
+       [ngClass]="item | cSidebarNavLink"
        [preserveFragment]="item.linkProps?.preserveFragment ?? false"
-       [skipLocationChange]="item.linkProps?.skipLocationChange ?? false"
+       [queryParamsHandling]="item.linkProps?.queryParamsHandling"
+       [queryParams]="item.linkProps?.queryParams ?? null"
        [replaceUrl]="item.linkProps?.replaceUrl ?? false"
-       [state]="item.linkProps?.state ?? {}"
+       [routerLinkActiveOptions]="item.linkProps?.routerLinkActiveOptions ?? { exact: false }"
        [routerLink]="item.url"
+       [skipLocationChange]="item.linkProps?.skipLocationChange ?? false"
+       [state]="item.linkProps?.state ?? {}"
+       [target]="item.attributes?.['target']"
        routerLinkActive="active"
-       [routerLinkActiveOptions]="item.linkProps?.routerLinkActiveOptions ?? { exact: false }"
-       (click)="linkClicked()"
     >
       <!--    [class.active]="linkActive"-->
       <ng-container *ngTemplateOutlet="iconTemplate ; context: {$implicit: item}" />
@@ -48,16 +42,18 @@
     </a>
   }
 }
-
 <ng-template #iconTemplate let-item>
+  <!--  <i *ngIf="item?.icon" [ngClass]="item | cSidebarNavIcon"></i>-->
   @if (item?.icon) {
-    <i [ngClass]="item | cSidebarNavIcon"></i>
+    <span class="nav-icon">
+      <span [ngClass]="item.icon ?? ''"></span>
+    </span>
   }
   @if (item?.iconComponent) {
     <svg
       [cIcon]="item.iconComponent?.content"
-      [name]="item.iconComponent?.name"
       [customClasses]="item | cSidebarNavIcon"
+      [name]="item.iconComponent?.name"
     ></svg>
   }
   @if (!item?.icon && !item?.iconComponent) {

projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.ts

@@ -1,8 +1,9 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { NavigationEnd, Router, RouterModule } from '@angular/router';
 import { Observable, Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
+import { IconDirective } from '@coreui/icons-angular';
 
 // import {SidebarService} from '../sidebar.service';
 import { HtmlAttributesDirective } from '../../shared';
@@ -11,7 +12,6 @@ import { INavData } from './sidebar-nav';
 import { SidebarNavLinkPipe } from './sidebar-nav-link.pipe';
 import { SidebarNavBadgePipe } from './sidebar-nav-badge.pipe';
 import { SidebarNavIconPipe } from './sidebar-nav-icon.pipe';
-import { IconDirective } from '@coreui/icons-angular';
 
 @Component({
   selector: 'c-sidebar-nav-link-content',
@@ -40,12 +40,12 @@ export class SidebarNavLinkContentComponent {
     RouterModule,
     HtmlAttributesDirective,
     IconDirective,
-    NgClass,
-    NgTemplateOutlet,
     SidebarNavLinkContentComponent,
     SidebarNavLinkPipe,
     SidebarNavBadgePipe,
-    SidebarNavIconPipe
+    SidebarNavIconPipe,
+    NgTemplateOutlet,
+    NgClass
   ]
 })
 export class SidebarNavLinkComponent implements OnInit, OnDestroy {

projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.html

@@ -8,6 +8,7 @@
         [ngClass]="item | cSidebarNavItemClass"
         [routerLinkActiveOptions]="{exact: true}"
         routerLinkActive="show"
+        [compact]="compact"
       />
     }
     @case ('divider') {
@@ -42,4 +43,4 @@
     }
   }
 }
-<ng-content />
+<ng-content></ng-content>

projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.ts

@@ -1,6 +1,7 @@
 import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
 import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
 import {
+  booleanAttribute,
   Component,
   ElementRef,
   forwardRef,
@@ -80,6 +81,7 @@ export class SidebarNavGroupComponent implements OnInit, OnDestroy {
   @Input() item: any;
   @Input() dropdownMode: 'path' | 'none' | 'close' = 'path';
   @Input() show?: boolean;
+  @Input({ transform: booleanAttribute }) compact?: boolean;
 
   @HostBinding('class')
   get hostClasses(): any {
@@ -204,21 +206,22 @@ export class SidebarNavComponent implements OnChanges {
 
   @Input() navItems?: INavData[] = [];
   @Input() dropdownMode: 'path' | 'none' | 'close' = 'path';
-  @Input() groupItems?: boolean;
-  @Input() compact?: boolean;
+  @Input({ transform: booleanAttribute }) groupItems?: boolean;
+  @Input({ transform: booleanAttribute }) compact?: boolean;
 
   @HostBinding('class')
   get hostClasses(): any {
     return {
       'sidebar-nav': !this.groupItems,
-      compact: !this.groupItems && !!this.compact
+      'nav-group-items': this.groupItems,
+      compact: this.groupItems && this.compact
     };
   }
 
-  @HostBinding('class.nav-group-items')
-  get sidebarNavGroupItemsClass(): boolean {
-    return !!this.groupItems;
-  }
+  // @HostBinding('class.nav-group-items')
+  // get sidebarNavGroupItemsClass(): boolean {
+  //   return !!this.groupItems;
+  // }
 
   @HostBinding('attr.role') role = 'nav';
 

projects/coreui-angular/src/lib/sidebar/sidebar-toggler/sidebar-toggler.component.ts

@@ -0,0 +1,25 @@
+import { Directive, HostBinding, Input } from '@angular/core';
+import { SidebarToggleDirective } from '../sidebar-toggle/sidebar-toggle.directive';
+
+@Directive({
+  selector: '[cSidebarToggler]',
+  standalone: true,
+  hostDirectives: [{ directive: SidebarToggleDirective, inputs: ['cSidebarToggle: cSidebarToggler', 'toggle'] }]
+})
+export class SidebarTogglerDirective {
+
+  @HostBinding('attr.role')
+  @Input() role = 'button';
+
+  @HostBinding('class.sidebar-toggler') sidebarTogglerClass = true;
+
+  @HostBinding('style')
+  get getStyles(): any {
+    return {
+      appearance: 'button',
+      'align-items': 'flex-start',
+      cursor: 'pointer'
+    };
+  }
+
+}

projects/coreui-angular/src/lib/sidebar/sidebar-toggler/sidebar-toggler.directive.ts

@@ -4,7 +4,7 @@ import { SidebarComponent } from './sidebar/sidebar.component';
 import { SidebarService } from './sidebar.service';
 import { SidebarBrandComponent } from './sidebar-brand/sidebar-brand.component';
 import { SidebarToggleDirective } from './sidebar-toggle/sidebar-toggle.directive';
-import { SidebarTogglerComponent } from './sidebar-toggler/sidebar-toggler.component';
+import { SidebarTogglerDirective } from './sidebar-toggler/sidebar-toggler.directive';
 import { SidebarHeaderComponent } from './sidebar-header/sidebar-header.component';
 import { SidebarFooterComponent } from './sidebar-footer/sidebar-footer.component';
 import { SidebarNavGroupService } from './sidebar-nav/sidebar-nav-group.service';
@@ -42,12 +42,12 @@ import {
     SidebarNavLinkPipe,
     SidebarNavTitleComponent,
     SidebarToggleDirective,
-    SidebarTogglerComponent
+    SidebarTogglerDirective
   ],
   exports: [
     SidebarComponent,
     SidebarToggleDirective,
-    SidebarTogglerComponent,
+    SidebarTogglerDirective,
     SidebarBrandComponent,
     SidebarNavComponent,
     SidebarHeaderComponent,

projects/coreui-angular/src/lib/sidebar/sidebar.module.ts

@@ -1,4 +1,5 @@
 import {
+  booleanAttribute,
   Component,
   EventEmitter,
   HostBinding,
@@ -12,7 +13,6 @@ import {
   SimpleChanges
 } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
 import { Subscription } from 'rxjs';
 
@@ -22,18 +22,11 @@ import { SidebarBackdropService } from '../sidebar-backdrop/sidebar-backdrop.ser
 @Component({
   selector: 'c-sidebar',
   exportAs: 'cSidebar',
-  template: '<ng-content></ng-content>',
+  template: '<ng-content />',
   standalone: true
 })
 export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
-  static ngAcceptInputType_narrow: BooleanInput;
-  static ngAcceptInputType_overlaid: BooleanInput;
-  static ngAcceptInputType_unfoldable: BooleanInput;
-  static ngAcceptInputType_visible: BooleanInput;
-
-  #narrow = false;
-  #overlaid = false;
-  #unfoldable = false;
+
   #visible = false;
   #onMobile = false;
   #layoutChangeSubscription!: Subscription;
@@ -66,28 +59,16 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
   /**
    * Make sidebar narrow. [docs]
    * @type boolean
+   * @default false
    */
-  @Input()
-  set narrow(value: boolean) {
-    this.#narrow = coerceBooleanProperty(value);
-  }
-
-  get narrow() {
-    return this.#narrow;
-  }
+  @Input({ transform: booleanAttribute }) narrow: boolean = false;
 
   /**
    * Set sidebar to overlaid variant.
    * @type boolean
+   * @default false
    */
-  @Input()
-  set overlaid(value: boolean) {
-    this.#overlaid = coerceBooleanProperty(value);
-  }
-
-  get overlaid() {
-    return this.#overlaid;
-  }
+  @Input({ transform: booleanAttribute }) overlaid: boolean = false;
 
   /**
    * Components placement, there’s no default placement. [docs]
@@ -108,22 +89,19 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
 
   /**
    * Expand narrowed sidebar on hover. [docs]
+   * @type boolean
+   * @default false
    */
-  @Input()
-  set unfoldable(value: boolean) {
-    this.#unfoldable = coerceBooleanProperty(value);
-  }
-
-  get unfoldable() {
-    return this.#unfoldable;
-  }
+  @Input({ transform: booleanAttribute }) unfoldable: boolean = false;
 
   /**
    * Toggle the visibility of sidebar component. [docs]
+   * @type boolean
+   * @default false
    */
-  @Input()
+  @Input({ transform: booleanAttribute })
   set visible(value: boolean) {
-    const visible = coerceBooleanProperty(value);
+    const visible = value;
     if (this.#visible !== visible) {
       this.#visible = visible;
       this.visibleChange.emit(this.#visible);
@@ -192,8 +170,11 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
       'sidebar-narrow': this.narrow && !this.unfoldable,
       'sidebar-narrow-unfoldable': this.unfoldable,
       'sidebar-overlaid': this.overlaid,
+      [`sidebar-${this.placement}`]: !!this.placement,
+      [`sidebar-${this.colorScheme}`]: !!this.colorScheme,
       [`sidebar-${this.size}`]: !!this.size,
-      show: visible && this.#onMobile,
+      show: visible,
+      // show: visible && this.#onMobile, //todo: check
       hide: !visible
     };
   }
@@ -219,7 +200,7 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
     for (const propName in changes) {
       if (propList.includes(propName)) {
         if (changes[propName] && !changes[propName].firstChange) {
-          const value = coerceBooleanProperty(changes[propName].currentValue);
+          const value = booleanAttribute(changes[propName].currentValue);
           if (oldStateMap.get(propName) !== value) {
             newStateMap.set(propName, value);
           }