feat(menu): show NEW badge on IoT Hub menu entry

Add optional isNew flag on MenuSection; when set, menu-link and
menu-toggle components render a NEW badge next to the label. Marks
the IoT Hub entry as new.

ui-ngx/src/app/core/services/menu.models.ts

@@ -30,6 +30,7 @@ export interface MenuSection {
   pages?: Array<MenuSection>;
   opened?: boolean;
   rootOnly?: boolean;
+  isNew?: boolean;
   customTranslate?: boolean;
 }
 
@@ -716,7 +717,8 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'iot-hub.iot-hub',
       type: 'link',
       path: '/iot-hub',
-      icon: 'store'
+      icon: 'store',
+      isNew: true
     }
   ]
 ]);

ui-ngx/src/app/modules/home/menu/menu-link.component.html

@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<a mat-button routerLinkActive="tb-active" [routerLinkActiveOptions]="{paths: 'subset', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored'}" routerLink="{{section.path}}">
+<a mat-button routerLinkActive="tb-active" [routerLinkActiveOptions]="{paths: 'subset', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored'}" routerLink="{{section.path}}"
+   [class.is-new]="section.isNew">
   <tb-icon matButtonIcon *ngIf="section.icon !== null">{{section.icon}}</tb-icon>
   <span>{{section.customTranslate ? (section.name | customTranslate) : (section.name | translate)}}</span>
 </a>

ui-ngx/src/app/modules/home/menu/menu-link.component.scss

@@ -13,6 +13,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-:host {
 
+@import '../../../../scss/constants';
+
+:host ::ng-deep {
+  a.is-new::after {
+    content: "NEW";
+    font-size: 12px;
+    letter-spacing: .03125em;
+    transform: translate(6px, -6px);
+    display: inline-block;
+    border-radius: 10px;
+    line-height: 22px;
+    height: 20px;
+    background: #fff;
+    color: $tb-primary-color;
+    padding-left: 6px;
+    padding-right: 6px;
+    margin-left: -6px;
+  }
 }

ui-ngx/src/app/modules/home/menu/menu-toggle.component.html

@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<a mat-button class="tb-button-toggle" (click)="toggleSection($event)">
+<a mat-button class="tb-button-toggle" (click)="toggleSection($event)"
+   [class.is-new]="section.isNew">
   <tb-icon matButtonIcon *ngIf="section.icon !== null">{{section.icon}}</tb-icon>
   <span>{{section.customTranslate ? (section.name | customTranslate) : (section.name | translate)}}</span>
   <span class="pull-right fa fa-chevron-down tb-toggle-icon"

ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss

@@ -13,6 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+@import '../../../../scss/constants';
+
 :host ::ng-deep {
   .tb-button-toggle {
     .tb-toggle-icon {
@@ -26,6 +29,23 @@
         transform: rotateZ(180deg);
       }
     }
+    &.is-new::after {
+      position: absolute;
+      right: 44px;
+      top: 4px;
+      content: "NEW";
+      font-size: 12px;
+      letter-spacing: .03125em;
+      display: inline-block;
+      border-radius: 10px;
+      line-height: 22px;
+      height: 20px;
+      background: #fff;
+      color: $tb-primary-color;
+      padding-left: 6px;
+      padding-right: 6px;
+      margin-left: -6px;
+    }
   }
 
   .tb-menu-toggle-list {