Add Command Bar host class

Author: sha4be

libs/schematic/generators/ng-generate/components/shared/generators/components/command-bar/files/__name@dasherize__-command-bar.component.scss.template

@@ -1,106 +1,108 @@
 /** <%= options.generationDisclaimerText %> **/
-.toolbar {
-  font-size: inherit;
-  align-items: center;
-  max-width: unset;
+.js-sdk-command-bar {
+  .toolbar {
+    font-size: inherit;
+    align-items: center;
+    max-width: unset;
 
-  .command-bar-number-of-items {
-    display: flex;
-  }
-
-  mat-toolbar {
-    overflow: hidden;
-  }
-
-  .mat-mdc-menu-panel {
-    max-width: max-content !important;
-  }
-
-  .mat-mdc-form-field {
-    padding-top: 20px;
-    margin-right: 8px;
-  }
-
-  <% if (options.componentType === 'card' && options.addCommandBar) { %>
-    .sorting-content {
+    .command-bar-number-of-items {
       display: flex;
-      align-items: center;
-      cursor: pointer;
-      padding-right: 20px;
     }
-  <% } %>
 
-  .command-bar-number-of-items {
-    margin-right: 10px;
-  }
+    mat-toolbar {
+      overflow: hidden;
+    }
 
-  .padding-40 {
-    padding:40px;
-  }
+    .mat-mdc-menu-panel {
+      max-width: max-content !important;
+    }
 
-  .filter-options-container {
-    overflow-y: auto;
-    min-height: 100px;
-    max-height: 200px;
-  }
+    .mat-mdc-form-field {
+      padding-top: 20px;
+      margin-right: 8px;
+    }
+
+    <% if (options.componentType === 'card' && options.addCommandBar) { %>
+      .sorting-content {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        padding-right: 20px;
+      }
+    <% } %>
 
-  .filter-actions-container {
-    text-align: right;
-    padding: 6px;
+    .command-bar-number-of-items {
+      margin-right: 10px;
+    }
 
-    .filter-apply-btn {
-      margin-left: 10px;
+    .padding-40 {
+      padding:40px;
     }
-  }
 
-  ::ng-deep {
-    .advanced-search-option-description {
-      position: relative;
-      float: left;
-      font-size: 10px;
-      line-height: 1;
-      top: -12px;
-      white-space: break-spaces;
+    .filter-options-container {
+      overflow-y: auto;
+      min-height: 100px;
+      max-height: 200px;
     }
 
-    & .resizing {
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none;
-      cursor: e-resize;
+    .filter-actions-container {
+      text-align: right;
+      padding: 6px;
+
+      .filter-apply-btn {
+        margin-left: 10px;
+      }
     }
 
-    & .handle {
-      width: 15px;
-      position: absolute;
-      top: 0;
-      right: 0;
-      height: 100%;
-      cursor: col-resize;
-      opacity: 0;
-      transition: all 0.2s ease-in;
-
-      &:after {
-        content: '';
-        display: block;
-        width: 1px;
+    ::ng-deep {
+      .advanced-search-option-description {
+        position: relative;
+        float: left;
+        font-size: 10px;
+        line-height: 1;
+        top: -12px;
+        white-space: break-spaces;
+      }
+
+      & .resizing {
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        cursor: e-resize;
+      }
+
+      & .handle {
+        width: 15px;
+        position: absolute;
+        top: 0;
+        right: 0;
         height: 100%;
-        z-index: 1;
-        background: linear-gradient(0, rgba(255, 255, 255, 1) 0%, rgba(157, 157, 157, 1) 49%, rgba(255, 255, 255, 1) 100%);
-        transition: all 0.5ms ease-in;
+        cursor: col-resize;
+        opacity: 0;
+        transition: all 0.2s ease-in;
+
+        &:after {
+          content: '';
+          display: block;
+          width: 1px;
+          height: 100%;
+          z-index: 1;
+          background: linear-gradient(0, rgba(255, 255, 255, 1) 0%, rgba(157, 157, 157, 1) 49%, rgba(255, 255, 255, 1) 100%);
+          transition: all 0.5ms ease-in;
+        }
       }
-    }
 
-    .mat-mdc-menu-panel {
-      max-width: max-content !important;
-    }
+      .mat-mdc-menu-panel {
+        max-width: max-content !important;
+      }
 
-    .mat-list-item-content {
-      flex-direction: row !important;
-    }
+      .mat-list-item-content {
+        flex-direction: row !important;
+      }
 
-    .mat-pseudo-checkbox {
-      margin-right: 10px;
+      .mat-pseudo-checkbox {
+        margin-right: 10px;
+      }
     }
   }
 }

libs/schematic/generators/ng-generate/components/shared/generators/components/command-bar/files/__name@dasherize__-command-bar.component.ts.template

@@ -55,6 +55,7 @@ import {MatInput} from '@angular/material/input';
     templateUrl: './<%= dasherize(name) %>-command-bar.component.html',
     styleUrls: ['./<%= dasherize(name) %>-command-bar.component.scss'],
     encapsulation: ViewEncapsulation.None,
+    host: {class: 'js-sdk-command-bar' }
 })
 export class <%= classify(name) %>CommandBarComponent implements AfterViewInit {
     private dialog = inject(MatDialog);