@microsoft/windows-admin-center-sdk 2.186.0 → 2.294.0

package/angular/fesm2015/microsoft-windows-admin-center-sdk-angular.js

@@ -1,4 +1,4 @@
-import { EventEmitter, ɵɵdirectiveInject, ChangeDetectorRef, ɵɵdefineDirective, ɵsetClassMetadata, Directive, Optional, Host, Output, Input, ɵɵdefineNgModule, ɵɵdefineInjector, ɵɵsetNgModuleScope, NgModule, ɵɵdefineInjectable, ɵɵgetInheritedFactory, Injectable, ElementRef, ViewContainerRef, ɵɵNgOnChangesFeature, ɵɵInheritDefinitionFeature, ɵɵattribute, HostBinding, Renderer2, ɵɵhostProperty, ɵɵsanitizeHtml, InjectFlags, ɵɵinject, Injector, ɵɵclassProp, KeyValueDiffers, ɵɵdefinePipe, Pipe, ɵɵdefineComponent, ɵɵstyleProp, ɵɵprojectionDef, ɵɵelementStart, ɵɵlistener, ɵɵelementEnd, ɵɵprojection, ɵɵproperty, ɵɵadvance, Component, ɵɵelement, InjectionToken, ɵɵelementContainerStart, ɵɵelementContainer, ɵɵelementContainerEnd, ɵɵnextContext, ɵɵtext, ɵɵtextInterpolate, ɵɵtemplate, NgZone, ɵɵviewQuery, ɵɵqueryRefresh, ɵɵloadQuery, ɵɵresolveWindow, ɵɵresolveDocument, ViewChild, HostListener, ɵɵProvidersFeature, forwardRef, ɵɵpureFunction2, ɵɵcontentQuery, ContentChildren, ɵɵpureFunction4, Inject, IterableDiffers, ɵɵgetCurrentView, ɵɵrestoreView, ɵɵreference, ɵɵpipe, ɵɵpipeBind3, QueryList, ComponentFactoryResolver, ɵɵsetComponentScope, ɵɵtextInterpolate1, ɵɵpureFunction1, ɵɵpureFunction3, ɵɵclassMapInterpolate1, Self, TemplateRef, ContentChild, SkipSelf, ViewChildren, ɵɵtemplateRefExtractor, ɵɵpureFunction0, ɵɵpipeBind2, ɵɵclassMap, ɵɵpropertyInterpolate, ɵɵsanitizeUrl, ɵɵpipeBind1, ɵɵnamespaceSVG, ɵɵtextInterpolate2, isDevMode, ɵɵattributeInterpolate5, ErrorHandler } from '@angular/core';
+import { EventEmitter, ɵɵdirectiveInject, ChangeDetectorRef, ɵɵdefineDirective, ɵsetClassMetadata, Directive, Optional, Host, Output, Input, ɵɵdefineNgModule, ɵɵdefineInjector, ɵɵsetNgModuleScope, NgModule, ɵɵdefineInjectable, ɵɵgetInheritedFactory, Injectable, ElementRef, ViewContainerRef, ɵɵNgOnChangesFeature, ɵɵInheritDefinitionFeature, ɵɵattribute, HostBinding, Renderer2, ɵɵhostProperty, ɵɵsanitizeHtml, InjectFlags, ɵɵinject, Injector, ɵɵlistener, ɵɵresolveWindow, HostListener, ɵɵclassProp, KeyValueDiffers, ɵɵdefinePipe, Pipe, ɵɵdefineComponent, ɵɵstyleProp, ɵɵprojectionDef, ɵɵelementStart, ɵɵelementEnd, ɵɵprojection, ɵɵproperty, ɵɵadvance, Component, ɵɵelement, InjectionToken, ɵɵelementContainerStart, ɵɵelementContainer, ɵɵelementContainerEnd, ɵɵnextContext, ɵɵtext, ɵɵtextInterpolate, ɵɵtemplate, NgZone, ɵɵviewQuery, ɵɵqueryRefresh, ɵɵloadQuery, ɵɵresolveDocument, ViewChild, ɵɵProvidersFeature, forwardRef, ɵɵpureFunction2, ɵɵcontentQuery, ContentChildren, ɵɵpureFunction4, Inject, IterableDiffers, ɵɵgetCurrentView, ɵɵrestoreView, ɵɵreference, ɵɵpipe, ɵɵpipeBind3, QueryList, ComponentFactoryResolver, ɵɵsetComponentScope, ɵɵtextInterpolate1, ɵɵpureFunction1, ɵɵpureFunction3, ɵɵclassMapInterpolate1, Self, TemplateRef, ContentChild, SkipSelf, ViewChildren, ɵɵtemplateRefExtractor, ɵɵpureFunction0, ɵɵpipeBind2, ɵɵclassMap, ɵɵpropertyInterpolate, ɵɵsanitizeUrl, ɵɵpipeBind1, ɵɵnamespaceSVG, ɵɵtextInterpolate2, isDevMode, ɵɵattributeInterpolate5, ErrorHandler } from '@angular/core';
 import { NavigationEnd, RouterLink, RouterLinkWithHref, Router, PRIMARY_OUTLET, RouterOutlet, RouterModule, ActivatedRoute, RouterLinkActive, NavigationStart } from '@angular/router';
 import { ResourceCache } from '@microsoft/windows-admin-center-sdk/core/data/resource-cache';
 import { LogLevel } from '@microsoft/windows-admin-center-sdk/core/diagnostics/log-level';
@@ -6,11 +6,11 @@ import { Logging } from '@microsoft/windows-admin-center-sdk/core/diagnostics/lo
 import { __decorate, __metadata } from 'tslib';
 import { Debounce as Debounce$1 } from '@microsoft/windows-admin-center-sdk/core/base/decorators/debounce.decorators';
 import { Dom, ElementPosition } from '@microsoft/windows-admin-center-sdk/core/dom/dom';
-import * as marked_ from 'marked';
+import { marked } from 'marked';
 import { createClassDecorator, getDecoratorStrings, createUniversalDecorator } from '@microsoft/windows-admin-center-sdk/core/base/decorators/base';
 import { Location, CommonModule, NgClass, NgIf, NgForOf, NgStyle, NgTemplateOutlet, NgSwitch, NgSwitchCase, KeyValuePipe, DatePipe } from '@angular/common';
 import { GatewayInventoryCache } from '@microsoft/windows-admin-center-sdk/core/shared/gateway-inventory/gateway-inventory-cache';
-import { Observable, of, forkJoin, merge, Subject, fromEvent, ReplaySubject, empty, fromEventPattern, zip, from, throwError } from 'rxjs';
+import { Observable, of, forkJoin, merge, Subject, fromEvent, ReplaySubject, empty, fromEventPattern, zip, from, EMPTY, throwError } from 'rxjs';
 import { map, take, catchError, mergeMap, delay, takeLast, flatMap, shareReplay, tap, filter, first, switchMap, debounceTime } from 'rxjs/operators';
 import { AppContext } from '@microsoft/windows-admin-center-sdk/core/data/app-context';
 import { SmeWebTelemetry } from '@microsoft/windows-admin-center-sdk/core/diagnostics/sme-web-telemetry';
@@ -63,6 +63,7 @@ import { RpcOverlayCloseClient } from '@microsoft/windows-admin-center-sdk/core/
 import { RpcType, RpcOutboundCommands, RpcOpenState, RpcDeactivateState } from '@microsoft/windows-admin-center-sdk/core/rpc/rpc-base';
 import { RpcOverlayOpenSubjectServer } from '@microsoft/windows-admin-center-sdk/core/rpc/overlay/rpc-overlay-open-subject-server';
 import { RxjsLifetimeManager } from '@microsoft/windows-admin-center-sdk/core/base/rxjs-lifetime-manager';
+import { TelemetryActionTypes } from '@microsoft/windows-admin-center-sdk/core/diagnostics/sme-web-telemetry-models';
 import { ColumnPicker } from '@microsoft/windows-admin-center-sdk/core/data/column-picker';
 import { Electron } from '@microsoft/windows-admin-center-sdk/core/data/electron';
 import { JobsManager } from '@microsoft/windows-admin-center-sdk/core/data/jobs/jobs-manager';
@@ -648,7 +649,6 @@ class DisabledModule {
             }]
     }], null, null); })();
 
-const marked = marked_;
 /**
  *
  * @smeDoc {@label Markdown @id sme-markdown-directive}
@@ -665,7 +665,6 @@ class MarkdownDirective {
     constructor(host, renderer) {
         this.host = host;
         this.renderer = renderer;
-        this.smeMarkdownUseInlineLexer = false;
     }
     get content() {
         return this.renderedContent;
@@ -679,22 +678,16 @@ class MarkdownDirective {
         }
     }
     render() {
-        let content = '';
+        this.renderedContent = '';
         if (marked && !MsftSme.isNullOrWhiteSpace(this.smeMarkdown)) {
-            if (this.smeMarkdownUseInlineLexer) {
-                content = marked.inlineLexer(this.smeMarkdown, []);
-            }
-            else {
-                content = marked(this.smeMarkdown);
-            }
+            this.renderedContent = marked.parse(this.smeMarkdown);
         }
-        this.renderedContent = content;
     }
 }
 /** @nocollapse */ MarkdownDirective.ɵfac = function MarkdownDirective_Factory(t) { return new (t || MarkdownDirective)(ɵɵdirectiveInject(ElementRef), ɵɵdirectiveInject(Renderer2)); };
 /** @nocollapse */ MarkdownDirective.ɵdir = ɵɵdefineDirective({ type: MarkdownDirective, selectors: [["", "smeMarkdown", ""]], hostVars: 1, hostBindings: function MarkdownDirective_HostBindings(rf, ctx) { if (rf & 2) {
         ɵɵhostProperty("innerHtml", ctx.content, ɵɵsanitizeHtml);
-    } }, inputs: { smeMarkdown: "smeMarkdown", smeMarkdownUseInlineLexer: "smeMarkdownUseInlineLexer" }, features: [ɵɵNgOnChangesFeature] });
+    } }, inputs: { smeMarkdown: "smeMarkdown" }, features: [ɵɵNgOnChangesFeature] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(MarkdownDirective, [{
         type: Directive,
         args: [{
@@ -703,8 +696,6 @@ class MarkdownDirective {
             }]
     }], function () { return [{ type: ElementRef }, { type: Renderer2 }]; }, { smeMarkdown: [{
             type: Input
-        }], smeMarkdownUseInlineLexer: [{
-            type: Input
         }], content: [{
             type: HostBinding,
             args: ['innerHtml']
@@ -1094,6 +1085,16 @@ class ClampDirective extends CoreBaseComponent {
     get breakWords() {
         return this.hostElement.nativeElement.classList.contains(breakAllClass);
     }
+    /**
+     * Host listener for page resize event.
+     */
+    onResize() {
+        // reset initial content state
+        this.resetClampContent();
+        if (this.needsClamping) {
+            this.clamp(this.hostElement.nativeElement);
+        }
+    }
     /**
      * Implementation of angular OnChanges interface
      * On every input change, we recalculate the clamp.
@@ -1102,10 +1103,7 @@ class ClampDirective extends CoreBaseComponent {
         super.ngOnChanges(changes);
         if (changes.smeClamp) {
             // reset initial content state
-            this.removeBreakWords();
-            this.hostElement.nativeElement.innerHTML = this.smeClamp || '';
-            // whenever this changes, we need to measure and output whether the content will be clamped.
-            this.clamped.emit({ clamped: this.needsClamping });
+            this.resetClampContent();
         }
         // if the input changes require clamping again, then re-clamp
         if (this.needsClamping) {
@@ -1124,6 +1122,13 @@ class ClampDirective extends CoreBaseComponent {
             element.classList.remove(breakAllClass);
         }
     }
+    resetClampContent() {
+        // reset initial content state
+        this.removeBreakWords();
+        this.hostElement.nativeElement.innerHTML = this.smeClamp || '';
+        // whenever this changes, we need to measure and output whether the content will be clamped.
+        this.clamped.emit({ clamped: this.needsClamping });
+    }
     /**
      * Gets the initial host classes to be applied to this element
      */
@@ -1214,7 +1219,9 @@ class ClampDirective extends CoreBaseComponent {
     }
 }
 /** @nocollapse */ ClampDirective.ɵfac = function ClampDirective_Factory(t) { return new (t || ClampDirective)(ɵɵdirectiveInject(Injector)); };
-/** @nocollapse */ ClampDirective.ɵdir = ɵɵdefineDirective({ type: ClampDirective, selectors: [["", "smeClamp", ""]], inputs: { smeClamp: "smeClamp", smeClampLines: "smeClampLines" }, outputs: { clamped: "clamped" }, features: [ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature] });
+/** @nocollapse */ ClampDirective.ɵdir = ɵɵdefineDirective({ type: ClampDirective, selectors: [["", "smeClamp", ""]], hostBindings: function ClampDirective_HostBindings(rf, ctx) { if (rf & 1) {
+        ɵɵlistener("resize", function ClampDirective_resize_HostBindingHandler() { return ctx.onResize(); }, false, ɵɵresolveWindow);
+    } }, inputs: { smeClamp: "smeClamp", smeClampLines: "smeClampLines" }, outputs: { clamped: "clamped" }, features: [ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(ClampDirective, [{
         type: Directive,
         args: [{
@@ -1226,6 +1233,9 @@ class ClampDirective extends CoreBaseComponent {
             type: Input
         }], clamped: [{
             type: Output
+        }], onResize: [{
+            type: HostListener,
+            args: ['window:resize']
         }] }); })();
 
 class ClampModule {
@@ -1632,7 +1642,7 @@ class DiscardDirective {
         this.strings = MsftSme.getStrings();
         this.smeDiscardId = `sme-discard-id-${MsftSme.newGuid()}`;
         this.isAlerting = false;
-        this.alertElement = this.createAlertElement(this.strings.MsftSmeShell.Angular.Common.discard);
+        this.alertElement = this.createAlertElement(this.strings.MsftSmeShell.Angular.Common.discarded);
     }
     ngOnInit() {
         if (this.host && this.host.nativeElement) {
@@ -1740,6 +1750,19 @@ class DevGuardService {
         type: Injectable
     }], function () { return [{ type: Router }]; }, null); })();
 
+/**
+ *
+ * @smeDoc {@label Experiments and IsProduction @id sme-dev-guide-utilities-msft-sme-experiments}
+ *
+ * @overview
+ * @file {@filepath ./experiment-key/examples/overview.md}
+ *
+ * @example {@label Experiment key @id experiment-key}
+ * @file {@filename experiment-key.ts @filepath ./experiment-key/examples/experiment-key.ts}
+ *
+ * @example {@label IsProduction @id isProduction}
+ * @file {@filename isproduction.ts @filepath ./experiment-key/examples/isproduction.ts}
+ */
 class ExperimentGuardService {
     /**
      * Initializes a new instance of the ExperimentGuardService class.
@@ -1834,16 +1857,17 @@ class GatewayService extends GatewayConnection {
      *
      * @param http the Http object.
      * @param rpcService the RPC service.
+     * @param authorizationService the authorizaton service.
      */
-    constructor(httpService, rpcService) {
-        super(httpService, rpcService);
+    constructor(httpService, rpcService, authorizationService) {
+        super(httpService, rpcService, authorizationService);
     }
 }
-/** @nocollapse */ GatewayService.ɵfac = function GatewayService_Factory(t) { return new (t || GatewayService)(ɵɵinject(HttpService), ɵɵinject(RpcService)); };
+/** @nocollapse */ GatewayService.ɵfac = function GatewayService_Factory(t) { return new (t || GatewayService)(ɵɵinject(HttpService), ɵɵinject(RpcService), ɵɵinject(AuthorizationService)); };
 /** @nocollapse */ GatewayService.ɵprov = ɵɵdefineInjectable({ token: GatewayService, factory: GatewayService.ɵfac });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(GatewayService, [{
         type: Injectable
-    }], function () { return [{ type: HttpService }, { type: RpcService }]; }, null); })();
+    }], function () { return [{ type: HttpService }, { type: RpcService }, { type: AuthorizationService }]; }, null); })();
 
 /**
  * The batch service class.
@@ -2438,6 +2462,28 @@ Navigation.gatewayUrl = 'gatewayUrl';
 Navigation.staticVersion = 'staticVersion';
 Navigation.pushStateBackup = null;
 
+/**
+ *
+ * @smeDoc {@label Notifications @id sme-dev-guide-shell-services-notifications}
+ *
+ * @overview
+ * @file {@filepath ./notifications/examples/overview.md}
+ *
+ * @example {@label In progress notification @id in-progress-notification}
+ * @file {@filename notifications-in-progress.ts @filepath ./notifications/examples/notifications-in-progress.ts}
+ *
+ * @example {@label Alert notification @id alert-notifications}
+ * @file {@filename notifications-alert.ts @filepath ./notifications/examples/notifications-alert.ts}
+ *
+ * @example {@label Information notification @id information-notification}
+ * @file {@filename notifications-information.ts @filepath ./notifications/examples/notifications-information.ts}
+ *
+ * @example {@label Long running notification @id long-running-notification}
+ * @file {@filename notifications-long-running.ts @filepath ./notifications/examples/notifications-long-running.ts}
+ *
+ * @example {@label Long running with disabled notification @id long-running-disable-notification}
+ * @file {@filename notifications-long-running-disable.ts @filepath ./notifications/examples/notifications-long-running-disable.ts}
+ */
 /**
  * Notification service class.
  */
@@ -2667,6 +2713,16 @@ class GuardsModule {
  * export all public APIs.
  */
 
+/**
+ * @smeDoc {@label BooleanConverterPipe @id smeBooleanConverter}
+ *
+ * @overview
+ * @file {@filepath ./examples/boolean-converter-overview.md}
+ *
+ * @example {@label Example Boolean Converter @id boolean-converter-example }
+ * @file {@filename component.html @filepath ./examples/boolean-converter-example.component.html}
+ * @file {@filename component.ts @filepath ./examples/boolean-converter-example.component.ts}
+ */
 class BooleanConverterPipe {
     transform(value, args) {
         if (args) {
@@ -2844,6 +2900,16 @@ var MediaConversion2;
         return iterator;
     }
 })(MediaConversion2 || (MediaConversion2 = {}));
+/**
+ * @smeDoc {@label byteConverterPipe @id smeByteUnitConverter}
+ *
+ * @overview
+ * @file {@filepath ./examples/byte-converter-overview.md}
+ *
+ * @example {@label Example byte Converter @id byte-converter-example }
+ * @file {@filename component.html @filepath ./examples/byte-converter-example.component.html}
+ * @file {@filename component.ts @filepath ./examples/byte-converter-example.component.ts}
+ */
 class ByteUnitConverterPipe {
     transform(value, baseNumber) {
         const base = baseNumber;
@@ -2961,6 +3027,21 @@ class DateConverterPipeModule {
             }]
     }], null, null); })();
 
+/**
+ * @smeDoc {@label enumConverterPipe @id smeEnumConverter}
+ *
+ * @overview
+ * @file {@filepath ./examples/enum-converter-overview.md}
+ *
+ * @example {@label Example Enum Converter @id enum-converter-example }
+ * @file {@filename component.html @filepath ./examples/enum-converter-example.component.html}
+ * @file {@filename component.ts @filepath ./examples/enum-converter-example.component.ts}
+ *
+ * @example {@label Example Color Enum Converter @id color-enum-color-converter }
+ * @file {@filename color.ts @filepath ./examples/enum-converter-example-color.ts}
+ * @file {@filename color.component.html @filepath ./examples/enum-converter-example-color.component.html}
+ * @file {@filename color.component.ts @filepath ./examples/enum-converter-example-color.component.ts}
+ */
 class EnumConverterPipe {
     /**
      * Registers an Extended enum for use with this pipe
@@ -3119,6 +3200,16 @@ class FilterPipeModule {
             }]
     }], null, null); })();
 
+/**
+ * @smeDoc {@label FormatPipe @id smeFormat}
+ *
+ * @overview
+ * @file {@filepath ./examples/format-overview.md}
+ *
+ * @example {@label Example enum Converter @id format-example }
+ * @file {@filename component.html @filepath ./examples/format-example.component.html}
+ * @file {@filename component.ts @filepath ./examples/format-example.component.ts}
+ */
 class FormatPipe {
     transform(format, values) {
         if (!format || MsftSme.isNullOrUndefined(values) || values === []) {
@@ -3163,6 +3254,16 @@ class FormatPipeModule {
             }]
     }], null, null); })();
 
+/**
+ * @smeDoc {@label highlightPipe @id smeHighlight}
+ *
+ * @overview
+ * @file {@filepath ./examples/highlight-overview.md}
+ *
+ * @example {@label Example enum Converter @id highlight-example }
+ * @file {@filename component.html @filepath ./examples/highlight-example.component.html}
+ * @file {@filename component.ts @filepath ./examples/highlight-example.component.ts}
+ */
 class HighlightPipe {
     transform(attribute, search, highlightClass) {
         if (search === undefined || search === null || search === '' || attribute == null) {
@@ -3202,6 +3303,16 @@ class HighlightPipeModule {
             }]
     }], null, null); })();
 
+/**
+ * @smeDoc {@label yesno-converterPipe @id smeBooleanToYesNoConverter}
+ *
+ * @overview
+ * @file {@filepath ./examples/yesno-converter-overview.md}
+ *
+ * @example {@label Example enum Converter @id yesno-converter-example }
+ * @file {@filename component.html @filepath ./examples/yesno-converter-example.component.html}
+ * @file {@filename component.ts @filepath ./examples/yesno-converter-example.component.ts}
+ */
 class YesNoConverterPipe {
     constructor() {
         this.strings = MsftSme.getStrings();
@@ -3678,11 +3789,17 @@ class TooltipHostComponent extends CoreBaseComponent {
     /**
      * Escape key listener
      */
-    onClick() {
+    onClick(event) {
         if (this.options && this.options.showOn === TooltipShowMode.Click) {
             this.options.onWindowClick();
             this.hide(this.options.targetid);
         }
+        if (MsftSme.isNullOrUndefined(this.mousePosition)) {
+            this.mousePosition = {
+                x: event.x,
+                y: event.y
+            };
+        }
     }
     /**
      * Show a tooltip with the given options
@@ -3784,7 +3901,12 @@ class TooltipHostComponent extends CoreBaseComponent {
                 // then adjust the pointer and tooltip to align with the pointer
                 if (tooltipRect.width < targetRect.width) {
                     pointerLeft = (((tooltipRect.width / 2) - (pointerRect.width / 2)) - tooltipLeftMargin);
-                    left = (this.mousePosition.x - ((tooltipRect.width / 2) - tooltipLeftMargin));
+                    if (this.mousePosition.x <= 0) {
+                        left = (tooltipRect.width / 2) - tooltipLeftMargin;
+                    }
+                    else {
+                        left = (this.mousePosition.x - ((tooltipRect.width / 2) - tooltipLeftMargin));
+                    }
                 }
                 // check if right edge of tooltip is off the screen
                 const right = (left + tooltipRect.width);
@@ -3865,7 +3987,7 @@ TooltipHostComponent.SCREEN_EDGE_MARGIN = 16;
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.tooltipContainer = _t.first);
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.tooltipPointer = _t.first);
     } }, hostBindings: function TooltipHostComponent_HostBindings(rf, ctx) { if (rf & 1) {
-        ɵɵlistener("resize", function TooltipHostComponent_resize_HostBindingHandler($event) { return ctx.onWindowResized($event); }, false, ɵɵresolveWindow)("blur", function TooltipHostComponent_blur_HostBindingHandler($event) { return ctx.onWindowResized($event); }, false, ɵɵresolveWindow)("keyup.escape", function TooltipHostComponent_keyup_escape_HostBindingHandler($event) { return ctx.onEscape($event); }, false, ɵɵresolveDocument)("click", function TooltipHostComponent_click_HostBindingHandler() { return ctx.onClick(); }, false, ɵɵresolveWindow);
+        ɵɵlistener("resize", function TooltipHostComponent_resize_HostBindingHandler($event) { return ctx.onWindowResized($event); }, false, ɵɵresolveWindow)("blur", function TooltipHostComponent_blur_HostBindingHandler($event) { return ctx.onWindowResized($event); }, false, ɵɵresolveWindow)("keyup.escape", function TooltipHostComponent_keyup_escape_HostBindingHandler($event) { return ctx.onEscape($event); }, false, ɵɵresolveDocument)("click", function TooltipHostComponent_click_HostBindingHandler($event) { return ctx.onClick($event); }, false, ɵɵresolveWindow);
     } }, features: [ɵɵInheritDefinitionFeature], decls: 8, vars: 4, consts: [[1, "sme-tooltip", "sme-tooltip-position-bottom", "sme-layer-tooltip", "sme-shadow-tooltip", 3, "focusin", "focusout", "mouseenter", "mouseleave"], ["tooltipContainer", ""], [1, "sme-tooltip-pointer"], ["tooltipPointer", ""], [1, "sme-tooltip-pointer-cover"], ["class", "sme-tooltip-content sme-focus-trap", 3, "id", 4, "ngIf"], ["aria-live", "assertive"], ["class", "sme-tooltip-content", 3, "id", 4, "ngIf"], [1, "sme-tooltip-content", "sme-focus-trap", 3, "id"], [4, "ngIf"], ["smeTemplateOutlet", "", 3, "template", "data", "hostData"], [1, "sme-font-label", 3, "id"], [1, "sme-tooltip-content", 3, "id"]], template: function TooltipHostComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵelementStart(0, "div", 0, 1);
         ɵɵlistener("focusin", function TooltipHostComponent_Template_div_focusin_0_listener($event) { return ctx.onFocusChanged($event); })("focusout", function TooltipHostComponent_Template_div_focusout_0_listener($event) { return ctx.onFocusChanged($event); })("mouseenter", function TooltipHostComponent_Template_div_mouseenter_0_listener($event) { return ctx.onHoverChanged($event); })("mouseleave", function TooltipHostComponent_Template_div_mouseleave_0_listener($event) { return ctx.onHoverChanged($event); });
@@ -3906,7 +4028,7 @@ TooltipHostComponent.SCREEN_EDGE_MARGIN = 16;
             args: ['document:keyup.escape', ['$event']]
         }], onClick: [{
             type: HostListener,
-            args: ['window:click']
+            args: ['window:click', ['$event']]
         }] }); })();
 
 const _c0$3 = ["*"];
@@ -6032,7 +6154,7 @@ class DropdownComponent {
         ɵɵlistener("keyup", function DropdownComponent_keyup_HostBindingHandler($event) { return ctx.onKeyup($event); });
     } if (rf & 2) {
         ɵɵclassProp("sme-disabled", ctx.disabled);
-    } }, inputs: { autoToggle: "autoToggle", autoWidth: "autoWidth", calculateHeight: "calculateHeight", displayToSide: "displayToSide", isContextMenu: "isContextMenu", dropdownApplyFormFieldOffsetWidth: "dropdownApplyFormFieldOffsetWidth", disabled: "disabled" }, outputs: { onToggled: "onToggled", toggled: "toggled" }, ngContentSelectors: _c4, decls: 6, vars: 6, consts: [[1, "sme-dropdown-toggle-container"], ["smeDropdownToggle", ""], [1, "sme-layout-dropdown", "sme-layout-fixed", "sme-position-below", "sme-scheme-dropdown", "sme-layer-nav", "sme-shadow-dropdown", 3, "ngClass"], ["smeDropdownContent", ""]], template: function DropdownComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { autoToggle: "autoToggle", autoWidth: "autoWidth", calculateHeight: "calculateHeight", displayToSide: "displayToSide", isContextMenu: "isContextMenu", dropdownApplyFormFieldOffsetWidth: "dropdownApplyFormFieldOffsetWidth", disabled: "disabled" }, outputs: { onToggled: "onToggled", toggled: "toggled" }, ngContentSelectors: _c4, decls: 6, vars: 6, consts: [["data-uta-id", "dropdown-toggle", 1, "sme-dropdown-toggle-container"], ["smeDropdownToggle", ""], ["data-uta-id", "dropdown-content", 1, "sme-layout-dropdown", "sme-layout-fixed", "sme-position-below", "sme-scheme-dropdown", "sme-layer-nav", "sme-shadow-dropdown", 3, "ngClass"], ["smeDropdownContent", ""]], template: function DropdownComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵprojectionDef(_c2$1);
         ɵɵelementStart(0, "div", 0, 1);
         ɵɵprojection(2);
@@ -6655,7 +6777,7 @@ class ActionBarComponent extends ActionContainerComponent {
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.dropDown = _t.first);
     } }, hostBindings: function ActionBarComponent_HostBindings(rf, ctx) { if (rf & 1) {
         ɵɵlistener("focusin", function ActionBarComponent_focusin_HostBindingHandler($event) { return ctx.onFocusEvent($event); })("focusout", function ActionBarComponent_focusout_HostBindingHandler($event) { return ctx.onFocusEvent($event); })("keydown", function ActionBarComponent_keydown_HostBindingHandler($event) { return ctx.onToggleKeydown($event); })("mouseenter", function ActionBarComponent_mouseenter_HostBindingHandler($event) { return ctx.onMouseEvent($event); })("mouseleave", function ActionBarComponent_mouseleave_HostBindingHandler($event) { return ctx.onMouseEvent($event); })("resize", function ActionBarComponent_resize_HostBindingHandler() { return ctx.onResize(); }, false, ɵɵresolveWindow);
-    } }, outputs: { actionsUpdated: "actionsUpdated" }, features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c3$2, decls: 12, vars: 14, consts: [["role", "menubar", 1, "sme-position-flex-none", "sme-arrange-stack-h"], ["actionBarElement", ""], ["class", "sme-arrange-stack-h sme-arrange-stack-centered sme-arrange-stack-inline", 3, "item", "sme-action-bar-item-no-padding-v", "itemChanged", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "sme-position-flex-none"], ["dropDown", ""], ["type", "button", "role", "menuitem", "aria-haspopup", "true", 1, "sme-button-trigger", "sme-layout-action-bar-item-height", "sme-button-auto-width", "sme-dropdown-toggle"], ["dropDownButton", ""], [1, "sme-icon", "sme-icon-more", 3, "title"], [1, "sme-screen-reader"], ["role", "menu", 1, "sme-dropdown-content", 3, "actions", "target", "targetChange", "error", "executed"], [1, "sme-arrange-stack-h", "sme-arrange-stack-centered", "sme-arrange-stack-inline", 3, "item", "itemChanged"]], template: function ActionBarComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, outputs: { actionsUpdated: "actionsUpdated" }, features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c3$2, decls: 12, vars: 14, consts: [["role", "menubar", 1, "sme-position-flex-none", "sme-arrange-stack-h"], ["actionBarElement", ""], ["class", "sme-arrange-stack-h sme-arrange-stack-centered sme-arrange-stack-inline", 3, "item", "sme-action-bar-item-no-padding-v", "itemChanged", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "sme-position-flex-none"], ["dropDown", ""], ["type", "button", "role", "menuitem", "aria-haspopup", "true", "data-uta-id", "action-bar-more", 1, "sme-button-trigger", "sme-layout-action-bar-item-height", "sme-button-auto-width", "sme-dropdown-toggle"], ["dropDownButton", ""], [1, "sme-icon", "sme-icon-more", 3, "title"], [1, "sme-screen-reader"], ["role", "menu", 1, "sme-dropdown-content", 3, "actions", "target", "targetChange", "error", "executed"], [1, "sme-arrange-stack-h", "sme-arrange-stack-centered", "sme-arrange-stack-inline", 3, "item", "itemChanged"]], template: function ActionBarComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵprojectionDef();
         ɵɵelementStart(0, "div", 0, 1);
         ɵɵtemplate(2, ActionBarComponent_sme_dynamic_action_item_2_Template, 1, 3, "sme-dynamic-action-item", 2);
@@ -7012,10 +7134,12 @@ class ActionItemComponent {
     }
 }
 /** @nocollapse */ ActionItemComponent.ɵfac = function ActionItemComponent_Factory(t) { return new (t || ActionItemComponent)(); };
-/** @nocollapse */ ActionItemComponent.ɵdir = ɵɵdefineDirective({ type: ActionItemComponent, inputs: { hidden: "hidden", enabled: "enabled", toggled: "toggled", text: "text", iconClass: "iconClass" }, features: [ɵɵNgOnChangesFeature] });
+/** @nocollapse */ ActionItemComponent.ɵdir = ɵɵdefineDirective({ type: ActionItemComponent, inputs: { actionId: "actionId", hidden: "hidden", enabled: "enabled", toggled: "toggled", text: "text", name: "name", iconClass: "iconClass" }, features: [ɵɵNgOnChangesFeature] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(ActionItemComponent, [{
         type: Directive
-    }], function () { return []; }, { hidden: [{
+    }], function () { return []; }, { actionId: [{
+            type: Input
+        }], hidden: [{
             type: Input
         }], enabled: [{
             type: Input
@@ -7023,6 +7147,8 @@ class ActionItemComponent {
             type: Input
         }], text: [{
             type: Input
+        }], name: [{
+            type: Input
         }], iconClass: [{
             type: Input
         }] }); })();
@@ -7040,7 +7166,7 @@ function ActionButtonRendererComponent_button_0_Template(rf, ctx) { if (rf & 1)
     const ctx_r0 = ɵɵnextContext();
     ɵɵclassProp("sme-toggled", ctx_r0.ariaChecked);
     ɵɵproperty("smeDisabled", !ctx_r0.item.enabled || ctx_r0.item.busy || !ctx_r0.item.ready);
-    ɵɵattribute("role", ctx_r0.ariaRole)("aria-checked", ctx_r0.ariaChecked);
+    ɵɵattribute("role", ctx_r0.ariaRole)("aria-checked", ctx_r0.ariaChecked)("data-uta-id", ctx_r0.item.actionId);
     ɵɵadvance(1);
     ɵɵproperty("ngClass", ctx_r0.item.iconClass || "");
     ɵɵadvance(2);
@@ -7056,7 +7182,7 @@ function ActionButtonRendererComponent_button_1_Template(rf, ctx) { if (rf & 1)
     const ctx_r1 = ɵɵnextContext();
     ɵɵclassProp("sme-toggled", ctx_r1.ariaChecked);
     ɵɵproperty("smeDisabled", !ctx_r1.item.enabled || ctx_r1.item.busy || !ctx_r1.item.ready)("title", ctx_r1.item.text);
-    ɵɵattribute("role", ctx_r1.ariaRole)("aria-checked", ctx_r1.ariaChecked)("aria-label", ctx_r1.item.text);
+    ɵɵattribute("role", ctx_r1.ariaRole)("aria-checked", ctx_r1.ariaChecked)("data-uta-id", ctx_r1.item.actionId)("aria-label", ctx_r1.item.text);
     ɵɵadvance(1);
     ɵɵproperty("ngClass", ctx_r1.item.iconClass || "");
 } }
@@ -7116,8 +7242,8 @@ class ActionButtonRendererComponent extends ActionItemRendererComponent {
 }
 /** @nocollapse */ ActionButtonRendererComponent.ɵfac = function ActionButtonRendererComponent_Factory(t) { return new (t || ActionButtonRendererComponent)(ɵɵdirectiveInject(Renderer2), ɵɵdirectiveInject(ElementRef)); };
 /** @nocollapse */ ActionButtonRendererComponent.ɵcmp = ɵɵdefineComponent({ type: ActionButtonRendererComponent, selectors: [["sme-action-button-renderer"]], features: [ɵɵInheritDefinitionFeature], decls: 2, vars: 2, consts: [["class", "sme-button-trigger sme-button-auto-width sme-button-align-left sme-position-stretch", "type", "button", 3, "sme-toggled", "smeDisabled", "click", 4, "ngIf"], ["class", "sme-button-trigger sme-button-auto-width sme-button-align-left sme-position-stretch", "type", "button", 3, "sme-toggled", "smeDisabled", "title", "click", 4, "ngIf"], ["type", "button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-button-align-left", "sme-position-stretch", 3, "smeDisabled", "click"], ["aria-hidden", "true", 3, "ngClass"], ["type", "button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-button-align-left", "sme-position-stretch", 3, "smeDisabled", "title", "click"]], template: function ActionButtonRendererComponent_Template(rf, ctx) { if (rf & 1) {
-        ɵɵtemplate(0, ActionButtonRendererComponent_button_0_Template, 4, 7, "button", 0);
-        ɵɵtemplate(1, ActionButtonRendererComponent_button_1_Template, 2, 8, "button", 1);
+        ɵɵtemplate(0, ActionButtonRendererComponent_button_0_Template, 4, 8, "button", 0);
+        ɵɵtemplate(1, ActionButtonRendererComponent_button_1_Template, 2, 9, "button", 1);
     } if (rf & 2) {
         ɵɵproperty("ngIf", !(ctx.item.container == null ? null : ctx.item.container.compact));
         ɵɵadvance(1);
@@ -7399,11 +7525,20 @@ class ActionButtonComponent extends ActionItemComponent {
 
 const _c0$9 = ["dropDown"];
 const _c1$4 = ["dropDownButton"];
-function ActionDropdownRendererComponent_span_7_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelement(0, "span", 8);
+function ActionDropdownRendererComponent_p_4_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "p", 9);
+    ɵɵtext(1);
+    ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = ɵɵnextContext();
+    ɵɵadvance(1);
+    ɵɵtextInterpolate(ctx_r2.actionTitle);
 } }
 function ActionDropdownRendererComponent_span_8_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelement(0, "span", 9);
+    ɵɵelement(0, "span", 10);
+} }
+function ActionDropdownRendererComponent_span_9_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelement(0, "span", 11);
 } }
 const _c2$3 = ["action"];
 class ActionDropdown extends ActionItem {
@@ -7425,6 +7560,12 @@ class ActionDropdownRendererComponent extends ActionItemRendererComponent {
         this.isHovering = false;
         renderer.addClass(hostElement.nativeElement, 'sme-position-stretch');
     }
+    get actionTitle() {
+        return this.item.name && this.item.name !== this.item.text ? this.item.name : null;
+    }
+    get actionDropdownId() {
+        return this.item.actionId;
+    }
     /**
      * Method called to register a change with the ActionButton.
      * @param item The ActionButton to register change for.
@@ -7498,18 +7639,19 @@ ActionDropdownRendererComponent.hoverTimeToActivate = 500;
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.dropDownButtonElement = _t.first);
     } }, hostBindings: function ActionDropdownRendererComponent_HostBindings(rf, ctx) { if (rf & 1) {
         ɵɵlistener("keydown", function ActionDropdownRendererComponent_keydown_HostBindingHandler($event) { return ctx.onToggleKeydown($event); })("mouseenter", function ActionDropdownRendererComponent_mouseenter_HostBindingHandler($event) { return ctx.onMouseEvent($event); })("mouseleave", function ActionDropdownRendererComponent_mouseleave_HostBindingHandler($event) { return ctx.onMouseEvent($event); });
-    } }, features: [ɵɵInheritDefinitionFeature], decls: 10, vars: 13, consts: [["role", "presentation", 1, "sme-position-flex-none", 3, "displayToSide"], ["dropDown", ""], ["role", "menuitem", "type", "button", "aria-haspopup", "true", 1, "sme-button-trigger", "sme-layout-action-bar-item-height", "sme-button-auto-width", "sme-button-align-left", "sme-position-stretch-h", "sme-dropdown-toggle", 3, "smeDisabled"], ["dropDownButton", ""], [3, "ngClass"], ["class", "sme-icon sme-icon-size-xxs sme-icon-chevronDown sme-margin-left-xs", 4, "ngIf"], ["class", "sme-icon sme-icon-size-xxs sme-icon-chevronRight sme-position-right-inline", 4, "ngIf"], ["role", "menu", 1, "sme-dropdown-content", 3, "actions", "target", "targetChange", "error", "executed"], [1, "sme-icon", "sme-icon-size-xxs", "sme-icon-chevronDown", "sme-margin-left-xs"], [1, "sme-icon", "sme-icon-size-xxs", "sme-icon-chevronRight", "sme-position-right-inline"]], template: function ActionDropdownRendererComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, features: [ɵɵInheritDefinitionFeature], decls: 11, vars: 16, consts: [["role", "presentation", 1, "sme-position-flex-none", 3, "displayToSide"], ["dropDown", ""], ["role", "menuitem", "type", "button", "aria-haspopup", "true", 1, "sme-button-trigger", "sme-layout-action-bar-item-height", "sme-button-auto-width", "sme-button-align-left", "sme-position-stretch-h", "sme-dropdown-toggle", 3, "smeDisabled", "title"], ["dropDownButton", ""], ["class", "sme-screen-reader", 4, "ngIf"], [3, "ngClass"], ["class", "sme-icon sme-icon-size-xxs sme-icon-chevronDown sme-margin-left-xs", 4, "ngIf"], ["class", "sme-icon sme-icon-size-xxs sme-icon-chevronRight sme-position-right-inline", 4, "ngIf"], ["role", "menu", 1, "sme-dropdown-content", 3, "actions", "target", "targetChange", "error", "executed"], [1, "sme-screen-reader"], [1, "sme-icon", "sme-icon-size-xxs", "sme-icon-chevronDown", "sme-margin-left-xs"], [1, "sme-icon", "sme-icon-size-xxs", "sme-icon-chevronRight", "sme-position-right-inline"]], template: function ActionDropdownRendererComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵelementStart(0, "sme-dropdown", 0, 1);
         ɵɵelementStart(2, "button", 2, 3);
-        ɵɵelement(4, "span", 4);
-        ɵɵelementStart(5, "span");
-        ɵɵtext(6);
+        ɵɵtemplate(4, ActionDropdownRendererComponent_p_4_Template, 2, 1, "p", 4);
+        ɵɵelement(5, "span", 5);
+        ɵɵelementStart(6, "span");
+        ɵɵtext(7);
         ɵɵelementEnd();
-        ɵɵtemplate(7, ActionDropdownRendererComponent_span_7_Template, 1, 0, "span", 5);
         ɵɵtemplate(8, ActionDropdownRendererComponent_span_8_Template, 1, 0, "span", 6);
+        ɵɵtemplate(9, ActionDropdownRendererComponent_span_9_Template, 1, 0, "span", 7);
         ɵɵelementEnd();
-        ɵɵelementStart(9, "sme-action-menu", 7);
-        ɵɵlistener("targetChange", function ActionDropdownRendererComponent_Template_sme_action_menu_targetChange_9_listener($event) { return ctx.item.container.target = $event; })("error", function ActionDropdownRendererComponent_Template_sme_action_menu_error_9_listener($event) { return ctx.item.container.error.emit($event); })("executed", function ActionDropdownRendererComponent_Template_sme_action_menu_executed_9_listener($event) { return ctx.item.container.executed.emit($event); });
+        ɵɵelementStart(10, "sme-action-menu", 8);
+        ɵɵlistener("targetChange", function ActionDropdownRendererComponent_Template_sme_action_menu_targetChange_10_listener($event) { return ctx.item.container.target = $event; })("error", function ActionDropdownRendererComponent_Template_sme_action_menu_error_10_listener($event) { return ctx.item.container.error.emit($event); })("executed", function ActionDropdownRendererComponent_Template_sme_action_menu_executed_10_listener($event) { return ctx.item.container.executed.emit($event); });
         ɵɵelementEnd();
         ɵɵelementEnd();
     } if (rf & 2) {
@@ -7517,9 +7659,11 @@ ActionDropdownRendererComponent.hoverTimeToActivate = 500;
         ɵɵproperty("displayToSide", (ctx.item.container == null ? null : ctx.item.container.orientation) === "horizontal");
         ɵɵadvance(2);
         ɵɵclassProp("sme-toggled", _r0.isOpen);
-        ɵɵproperty("smeDisabled", !ctx.item.enabled || ctx.item.busy || !ctx.item.ready);
-        ɵɵattribute("aria-expanded", _r0.isOpen);
+        ɵɵproperty("smeDisabled", !ctx.item.enabled || ctx.item.busy || !ctx.item.ready)("title", ctx.actionTitle);
+        ɵɵattribute("aria-expanded", _r0.isOpen)("data-uta-id", ctx.actionDropdownId);
         ɵɵadvance(2);
+        ɵɵproperty("ngIf", ctx.actionTitle);
+        ɵɵadvance(1);
         ɵɵproperty("ngClass", ctx.item.iconClass || "");
         ɵɵadvance(1);
         ɵɵclassProp("sme-screen-reader", ctx.item.container.compact);
@@ -7987,7 +8131,7 @@ class ActionsModule {
     }], null, null); })();
 ɵɵsetComponentScope(ActionBarComponent, [NgForOf, DynamicActionItemComponent, DropdownComponent, TooltipDirective, ActionMenuComponent], []);
 ɵɵsetComponentScope(ActionMenuComponent, [NgForOf, DynamicActionItemComponent], [FilterPipe]);
-ɵɵsetComponentScope(ActionDropdownRendererComponent, [DropdownComponent, DisabledDirective, NgClass, NgIf, ActionMenuComponent], []);
+ɵɵsetComponentScope(ActionDropdownRendererComponent, [DropdownComponent, DisabledDirective, TooltipDirective, NgIf, NgClass, ActionMenuComponent], []);
 
 const _c0$c = ["*"];
 class DropZoneComponent extends BaseComponent {
@@ -8774,6 +8918,22 @@ var LoadingWheelSize;
     }
     LoadingWheelSize.toProgressClass = toProgressClass;
 })(LoadingWheelSize || (LoadingWheelSize = {}));
+/**
+ * @smeDoc {@label Loading Wheel @id sme-loading-wheel}
+ *
+ * @overview
+ * @file {@filepath ./examples/loading-wheel-overview.md}
+ *
+ * @example {@label Small loading wheel example @id small-loading-wheel}
+ * @file {@filename small-loading-wheel-example.html @filepath ./examples/small-loading-wheel-example.html }
+ * @file {@filename small-loading-wheel-example.ts @filepath ./examples/small-loading-wheel-example.ts }
+ * @file {@filename loading-wheel-example.module.ts @filepath ./examples/loading-wheel-example.module.ts }
+ *
+ * @example {@label Large loading wheel example @id large-loading-wheel}
+ * @file {@filename large-loading-wheel-example.html @filepath ./examples/large-loading-wheel-example.html }
+ * @file {@filename large-loading-wheel-example.ts @filepath ./examples/large-loading-wheel-example.ts }
+ * @file {@filename loading-wheel-example.module.ts @filepath ./examples/loading-wheel-example.module.ts }
+ */
 class LoadingWheelComponent extends CoreBaseComponent {
     constructor(layout, injector) {
         super(injector);
@@ -9678,6 +9838,13 @@ class FormFieldComponent extends BaseComponent {
     get loadingOrDisabled() {
         return (this.disabled || this.loading) ? true : null;
     }
+    /**
+     * The form field's UTA id getter.
+     * The ID is based on the form field name that's set on the ngModel.
+     */
+    get dataUtaId() {
+        return this.utaId ? this.utaId : this.ngModel && this.ngModel.name && this.ngModel.name.toString();
+    }
     /**
      * Placeholder for the combined disabled state
      */
@@ -10349,10 +10516,10 @@ FormFieldComponent.selector = 'sme-form-field';
     } if (rf & 2) {
         let _t;
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.subFormTemplate = _t.first);
-    } }, hostVars: 14, hostBindings: function FormFieldComponent_HostBindings(rf, ctx) { if (rf & 2) {
-        ɵɵattribute("disabled", ctx.loadingOrDisabled)("aria-disabled", ctx.loadingOrDisabled);
+    } }, hostVars: 15, hostBindings: function FormFieldComponent_HostBindings(rf, ctx) { if (rf & 2) {
+        ɵɵattribute("disabled", ctx.loadingOrDisabled)("aria-disabled", ctx.loadingOrDisabled)("data-uta-id", ctx.dataUtaId);
         ɵɵclassProp("sme-form-field-auto-height", ctx.compact)("sme-form-field-minimal", ctx.minimal)("sme-disabled", ctx.loadingOrDisabled)("sme-form-field-error-alert-border", ctx.errorAlertBorder)("sme-form-field-orientation-horizontal", ctx.isHorizontalLayout)("sme-form-field-orientation-vertical", ctx.isVerticalLayout);
-    } }, inputs: { type: "type", hideHeader: "hideHeader", hideHeaderSpace: "hideHeaderSpace", required: "required", autofocus: "autofocus", placeholder: "placeholder", label: "label", description: "description", compact: "compact", minimal: "minimal", readonly: "readonly", instructions: "instructions", tooltipTemplate: "tooltipTemplate", tooltip: "tooltip", tooltipContext: "tooltipContext", disabledInput: ["disabled", "disabledInput"], loading: "loading", loadingMessage: "loadingMessage", pendingMessage: "pendingMessage", immediateValidation: "immediateValidation", orientation: "orientation", formFieldContainer: "formFieldContainer" }, outputs: { change: "change" }, features: [ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature] });
+    } }, inputs: { type: "type", hideHeader: "hideHeader", hideHeaderSpace: "hideHeaderSpace", required: "required", autofocus: "autofocus", placeholder: "placeholder", label: "label", description: "description", compact: "compact", minimal: "minimal", readonly: "readonly", instructions: "instructions", tooltipTemplate: "tooltipTemplate", tooltip: "tooltip", tooltipContext: "tooltipContext", disabledInput: ["disabled", "disabledInput"], loading: "loading", loadingMessage: "loadingMessage", pendingMessage: "pendingMessage", utaId: "utaId", immediateValidation: "immediateValidation", orientation: "orientation", formFieldContainer: "formFieldContainer" }, outputs: { change: "change" }, features: [ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature] });
 __decorate([
     SmeInject(NgControl, true),
     __metadata("design:type", NgControl)
@@ -10452,6 +10619,11 @@ __decorate([
             type: Input
         }], pendingMessage: [{
             type: Input
+        }], utaId: [{
+            type: Input
+        }], dataUtaId: [{
+            type: HostBinding,
+            args: ['attr.data-uta-id']
         }], immediateValidation: [{
             type: Input
         }], change: [{
@@ -11019,14 +11191,16 @@ class FormFieldOptionComponent {
         let _t;
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.defaultSubFormTemplate = _t.first);
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.allTemplates = _t);
-    } }, inputs: { value: "value", label: "label", description: "description", disabled: "disabled", hidden: "hidden", tooltip: "tooltip", tooltipTemplate: "tooltipTemplate", tooltipContext: "tooltipContext" }, decls: 0, vars: 0, template: function FormFieldOptionComponent_Template(rf, ctx) { }, encapsulation: 2 });
+    } }, inputs: { utaId: "utaId", value: "value", label: "label", description: "description", disabled: "disabled", hidden: "hidden", tooltip: "tooltip", tooltipTemplate: "tooltipTemplate", tooltipContext: "tooltipContext" }, decls: 0, vars: 0, template: function FormFieldOptionComponent_Template(rf, ctx) { }, encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(FormFieldOptionComponent, [{
         type: Component,
         args: [{
                 selector: 'sme-option',
                 template: ''
             }]
-    }], null, { value: [{
+    }], null, { utaId: [{
+            type: Input
+        }], value: [{
             type: Input
         }], label: [{
             type: Input
@@ -11820,7 +11994,7 @@ function ValidationAlertComponent_div_1_p_4_Template(rf, ctx) { if (rf & 1) {
     ɵɵelement(0, "p", 7);
 } if (rf & 2) {
     const ctx_r3 = ɵɵnextContext(2);
-    ɵɵproperty("smeMarkdown", ctx_r3.message)("smeMarkdownUseInlineLexer", ctx_r3.useInlineLexer);
+    ɵɵproperty("smeMarkdown", ctx_r3.message);
     ɵɵattribute("id", ctx_r3.idBag.alertMessage);
 } }
 function ValidationAlertComponent_div_1_Template(rf, ctx) { if (rf & 1) {
@@ -11829,7 +12003,7 @@ function ValidationAlertComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     ɵɵtext(2);
     ɵɵelementEnd();
     ɵɵtemplate(3, ValidationAlertComponent_div_1_span_3_Template, 2, 2, "span", 4);
-    ɵɵtemplate(4, ValidationAlertComponent_div_1_p_4_Template, 1, 3, "p", 5);
+    ɵɵtemplate(4, ValidationAlertComponent_div_1_p_4_Template, 1, 2, "p", 5);
     ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = ɵɵnextContext();
@@ -11953,12 +12127,6 @@ class ValidationAlertComponent extends CoreBaseComponent {
     get isSuccess() {
         return this.valid && !this.isPending && !this.hasSeverity;
     }
-    /**
-     * Optionally center text for the alert.
-     */
-    get useInlineLexer() {
-        return this.hasAlert ? !!this.alert.useInlineLexer : false;
-    }
     /**
      * Indicates that the current alert is an success alert
      */
@@ -12043,7 +12211,7 @@ class ValidationAlertComponent extends CoreBaseComponent {
 /** @nocollapse */ ValidationAlertComponent.ɵfac = function ValidationAlertComponent_Factory(t) { return ɵValidationAlertComponent_BaseFactory(t || ValidationAlertComponent); };
 /** @nocollapse */ ValidationAlertComponent.ɵcmp = ɵɵdefineComponent({ type: ValidationAlertComponent, selectors: [["sme-validation-alert"], ["sme-alert"]], hostVars: 14, hostBindings: function ValidationAlertComponent_HostBindings(rf, ctx) { if (rf & 2) {
         ɵɵclassProp("sme-alert-background", ctx.showBackground)("sme-layout-none", ctx.isHidden)("sme-alert-pending", ctx.isPending)("sme-alert-error", ctx.isError)("sme-alert-warning", ctx.isWarning)("sme-alert-informational", ctx.isInformational)("sme-alert-success", ctx.isSuccess);
-    } }, inputs: { showBackground: "showBackground", alert: "alert", role: "role" }, features: [ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature], decls: 2, vars: 2, consts: [["size", "small", "class", "sme-layout-relative sme-layout-inline-block sme-width-lg sme-margin-right-xs", 3, "isBackgroundTransparent", 4, "ngIf"], [4, "ngIf"], ["size", "small", 1, "sme-layout-relative", "sme-layout-inline-block", "sme-width-lg", "sme-margin-right-xs", 3, "isBackgroundTransparent"], [1, "sme-screen-reader"], ["aria-hidden", "true", 4, "ngIf"], ["aria-hidden", "true", 3, "smeMarkdown", "smeMarkdownUseInlineLexer", 4, "ngIf"], ["aria-hidden", "true"], ["aria-hidden", "true", 3, "smeMarkdown", "smeMarkdownUseInlineLexer"]], template: function ValidationAlertComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { showBackground: "showBackground", alert: "alert", role: "role" }, features: [ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature], decls: 2, vars: 2, consts: [["size", "small", "class", "sme-layout-relative sme-layout-inline-block sme-width-lg sme-margin-right-xs", 3, "isBackgroundTransparent", 4, "ngIf"], [4, "ngIf"], ["size", "small", 1, "sme-layout-relative", "sme-layout-inline-block", "sme-width-lg", "sme-margin-right-xs", 3, "isBackgroundTransparent"], [1, "sme-screen-reader"], ["aria-hidden", "true", 4, "ngIf"], ["aria-hidden", "true", 3, "smeMarkdown", 4, "ngIf"], ["aria-hidden", "true"], ["aria-hidden", "true", 3, "smeMarkdown"]], template: function ValidationAlertComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵtemplate(0, ValidationAlertComponent_sme_loading_wheel_0_Template, 1, 1, "sme-loading-wheel", 0);
         ɵɵtemplate(1, ValidationAlertComponent_div_1_Template, 5, 6, "div", 1);
     } if (rf & 2) {
@@ -12247,7 +12415,7 @@ function ChecklistFormFieldComponent_div_1_div_1_Template(rf, ctx) { if (rf & 1)
     const ctx_r1 = ɵɵnextContext(2);
     ɵɵadvance(2);
     ɵɵproperty("id", ctx_r1.idBag.selectAllCheckbox)("checked", ctx_r1.isAllOptionsSelected)("disabled", ctx_r1.loadingOrDisabled);
-    ɵɵattribute("aria-label", ctx_r1.selectAllLabel)("aria-describedby", ctx_r1.idBag.selectAllCheckboxDescription)("aria-checked", ctx_r1.isAllOptionsSelected);
+    ɵɵattribute("aria-label", ctx_r1.selectAllLabel)("aria-describedby", ctx_r1.idBag.selectAllCheckboxDescription)("aria-checked", ctx_r1.isAllOptionsSelected)("aria-required", ctx_r1.required);
     ɵɵadvance(2);
     ɵɵtextInterpolate(ctx_r1.selectAllLabel);
     ɵɵadvance(1);
@@ -12304,7 +12472,7 @@ function ChecklistFormFieldComponent_div_1_ng_container_2_Template(rf, ctx) { if
 } }
 function ChecklistFormFieldComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementStart(0, "div", 3);
-    ɵɵtemplate(1, ChecklistFormFieldComponent_div_1_div_1_Template, 7, 9, "div", 4);
+    ɵɵtemplate(1, ChecklistFormFieldComponent_div_1_div_1_Template, 7, 10, "div", 4);
     ɵɵtemplate(2, ChecklistFormFieldComponent_div_1_ng_container_2_Template, 9, 11, "ng-container", 5);
     ɵɵelementEnd();
 } if (rf & 2) {
@@ -13833,13 +14001,14 @@ class DialogService {
      * @deprecated since 02/20/18. Please use 'AppContextService.frame.showDialogConfirmation' instead
      */
     showConfirmation(options) {
+        let confirmationObservable;
         // if running from shell, manually launch dialog
         if (this.appContext.rpc.isShell) {
-            return this.show(this.commonIds.confirmation, options);
+            confirmationObservable = this.show(this.commonIds.confirmation, options);
         }
         else {
             // otherwise ask the shell to do it for us.
-            return this.appContext.frame.showDialogConfirmation({
+            confirmationObservable = this.appContext.frame.showDialogConfirmation({
                 cancelButtonText: options.cancelButtonText,
                 checkboxText: options.checkboxText,
                 confirmButtonText: options.confirmButtonText,
@@ -13848,6 +14017,9 @@ class DialogService {
                 title: options.title
             });
         }
+        return confirmationObservable.pipe(map((response) => {
+            return response || { confirmed: false, checkboxResult: false };
+        }));
     }
     /**
      * Hide a confirmation dialog.
@@ -14767,54 +14939,63 @@ function ArrayFormFieldLoaderComponent_ng_template_2_Template(rf, ctx) { if (rf
 } }
 const _c1$b = ["addButton"];
 const _c2$7 = ["type", "array"];
+const _c3$3 = function (a0, a1) { return { index: a0, ariaLabelId: a1 }; };
+function ArrayFormFieldComponent_sme_accordion_panel_3_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementContainer(0, 15);
+} if (rf & 2) {
+    const ctx_r8 = ɵɵnextContext();
+    const item_r2 = ctx_r8.$implicit;
+    const i_r3 = ctx_r8.index;
+    const ctx_r4 = ɵɵnextContext();
+    ɵɵproperty("template", ctx_r4.headerTemplate)("data", item_r2)("hostData", ɵɵpureFunction2(3, _c3$3, i_r3, ctx_r4.getItemAriaId(i_r3, "itemHeader")));
+} }
 function ArrayFormFieldComponent_sme_accordion_panel_3_button_3_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = ɵɵgetCurrentView();
-    ɵɵelementStart(0, "button", 13);
-    ɵɵlistener("click", function ArrayFormFieldComponent_sme_accordion_panel_3_button_3_Template_button_click_0_listener() { ɵɵrestoreView(_r9); const item_r2 = ɵɵnextContext().$implicit; const ctx_r7 = ɵɵnextContext(); return ctx_r7.moveUp(item_r2); });
-    ɵɵelement(1, "span", 14);
+    const _r11 = ɵɵgetCurrentView();
+    ɵɵelementStart(0, "button", 16);
+    ɵɵlistener("click", function ArrayFormFieldComponent_sme_accordion_panel_3_button_3_Template_button_click_0_listener() { ɵɵrestoreView(_r11); const item_r2 = ɵɵnextContext().$implicit; const ctx_r9 = ɵɵnextContext(); return ctx_r9.moveUp(item_r2); });
+    ɵɵelement(1, "span", 17);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r4 = ɵɵnextContext(2);
-    ɵɵproperty("title", ctx_r4.strings.MsftSmeShell.Angular.Form.Array.promoteButtonTooltip)("smeDisabled", ctx_r4.loadingOrDisabled);
-    ɵɵattribute("aria-label", ctx_r4.strings.MsftSmeShell.Angular.Form.Array.promoteButtonAriaLabel);
+    const ctx_r5 = ɵɵnextContext(2);
+    ɵɵproperty("title", ctx_r5.strings.MsftSmeShell.Angular.Form.Array.promoteButtonTooltip)("smeDisabled", ctx_r5.loadingOrDisabled);
+    ɵɵattribute("aria-label", ctx_r5.strings.MsftSmeShell.Angular.Form.Array.promoteButtonAriaLabel);
 } }
 function ArrayFormFieldComponent_sme_accordion_panel_3_button_4_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = ɵɵgetCurrentView();
-    ɵɵelementStart(0, "button", 13);
-    ɵɵlistener("click", function ArrayFormFieldComponent_sme_accordion_panel_3_button_4_Template_button_click_0_listener() { ɵɵrestoreView(_r12); const item_r2 = ɵɵnextContext().$implicit; const ctx_r10 = ɵɵnextContext(); return ctx_r10.moveDown(item_r2); });
-    ɵɵelement(1, "span", 15);
+    const _r14 = ɵɵgetCurrentView();
+    ɵɵelementStart(0, "button", 18);
+    ɵɵlistener("click", function ArrayFormFieldComponent_sme_accordion_panel_3_button_4_Template_button_click_0_listener() { ɵɵrestoreView(_r14); const item_r2 = ɵɵnextContext().$implicit; const ctx_r12 = ɵɵnextContext(); return ctx_r12.moveDown(item_r2); });
+    ɵɵelement(1, "span", 19);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r5 = ɵɵnextContext(2);
-    ɵɵproperty("title", ctx_r5.strings.MsftSmeShell.Angular.Form.Array.demoteButtonTooltip)("smeDisabled", ctx_r5.loadingOrDisabled);
-    ɵɵattribute("aria-label", ctx_r5.strings.MsftSmeShell.Angular.Form.Array.demoteButtonAriaLabel);
+    const ctx_r6 = ɵɵnextContext(2);
+    ɵɵproperty("title", ctx_r6.strings.MsftSmeShell.Angular.Form.Array.demoteButtonTooltip)("smeDisabled", ctx_r6.loadingOrDisabled);
+    ɵɵattribute("aria-label", ctx_r6.strings.MsftSmeShell.Angular.Form.Array.demoteButtonAriaLabel);
 } }
 function ArrayFormFieldComponent_sme_accordion_panel_3_button_5_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = ɵɵgetCurrentView();
-    ɵɵelementStart(0, "button", 13);
-    ɵɵlistener("click", function ArrayFormFieldComponent_sme_accordion_panel_3_button_5_Template_button_click_0_listener() { ɵɵrestoreView(_r15); const item_r2 = ɵɵnextContext().$implicit; const ctx_r13 = ɵɵnextContext(); return ctx_r13.delete(item_r2); });
-    ɵɵelement(1, "span", 16);
+    const _r17 = ɵɵgetCurrentView();
+    ɵɵelementStart(0, "button", 20);
+    ɵɵlistener("click", function ArrayFormFieldComponent_sme_accordion_panel_3_button_5_Template_button_click_0_listener() { ɵɵrestoreView(_r17); const item_r2 = ɵɵnextContext().$implicit; const ctx_r15 = ɵɵnextContext(); return ctx_r15.delete(item_r2); });
+    ɵɵelement(1, "span", 21);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r6 = ɵɵnextContext(2);
-    ɵɵproperty("title", ctx_r6.strings.MsftSmeShell.Angular.Form.Array.removeButtonTooltip)("smeDisabled", ctx_r6.loadingOrDisabled);
-    ɵɵattribute("aria-label", ctx_r6.strings.MsftSmeShell.Angular.Form.Array.removeButtonAriaLabel);
+    const ctx_r7 = ɵɵnextContext(2);
+    ɵɵproperty("title", ctx_r7.strings.MsftSmeShell.Angular.Form.Array.removeButtonTooltip)("smeDisabled", ctx_r7.loadingOrDisabled);
+    ɵɵattribute("aria-label", ctx_r7.strings.MsftSmeShell.Angular.Form.Array.removeButtonAriaLabel);
 } }
-const _c3$3 = function (a0, a1) { return { index: a0, ariaLabelId: a1 }; };
 function ArrayFormFieldComponent_sme_accordion_panel_3_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementStart(0, "sme-accordion-panel", 7);
     ɵɵelementStart(1, "sme-panel-control");
-    ɵɵelementContainer(2, 8);
+    ɵɵtemplate(2, ArrayFormFieldComponent_sme_accordion_panel_3_ng_container_2_Template, 1, 6, "ng-container", 8);
     ɵɵtemplate(3, ArrayFormFieldComponent_sme_accordion_panel_3_button_3_Template, 2, 3, "button", 9);
-    ɵɵtemplate(4, ArrayFormFieldComponent_sme_accordion_panel_3_button_4_Template, 2, 3, "button", 9);
-    ɵɵtemplate(5, ArrayFormFieldComponent_sme_accordion_panel_3_button_5_Template, 2, 3, "button", 9);
+    ɵɵtemplate(4, ArrayFormFieldComponent_sme_accordion_panel_3_button_4_Template, 2, 3, "button", 10);
+    ɵɵtemplate(5, ArrayFormFieldComponent_sme_accordion_panel_3_button_5_Template, 2, 3, "button", 11);
     ɵɵelementEnd();
-    ɵɵelementStart(6, "span", 10);
+    ɵɵelementStart(6, "span", 12);
     ɵɵtext(7);
     ɵɵelementEnd();
-    ɵɵelementStart(8, "fieldset", 11);
-    ɵɵelementStart(9, "div", 12);
-    ɵɵelementContainer(10, 8);
+    ɵɵelementStart(8, "fieldset", 13);
+    ɵɵelementStart(9, "div", 14);
+    ɵɵelementContainer(10, 15);
     ɵɵelementEnd();
     ɵɵelementEnd();
     ɵɵelementEnd();
@@ -14823,8 +15004,9 @@ function ArrayFormFieldComponent_sme_accordion_panel_3_Template(rf, ctx) { if (r
     const i_r3 = ctx.index;
     const ctx_r0 = ɵɵnextContext();
     ɵɵproperty("header", ctx_r0.getItemTitle(item_r2, i_r3))("isExpandable", false);
+    ɵɵattribute("data-uta-id", "array-form-field-item-" + i_r3);
     ɵɵadvance(2);
-    ɵɵproperty("template", ctx_r0.headerTemplate)("data", item_r2)("hostData", ɵɵpureFunction2(17, _c3$3, i_r3, ctx_r0.getItemAriaId(i_r3, "itemHeader")));
+    ɵɵproperty("ngIf", ctx_r0.headerTemplate);
     ɵɵadvance(1);
     ɵɵproperty("ngIf", ctx_r0.showMove);
     ɵɵadvance(1);
@@ -14841,12 +15023,12 @@ function ArrayFormFieldComponent_sme_accordion_panel_3_Template(rf, ctx) { if (r
     ɵɵadvance(1);
     ɵɵproperty("id", ctx_r0.getItemAriaId(i_r3, "itemContainer"));
     ɵɵadvance(1);
-    ɵɵproperty("template", ctx_r0.itemTemplate)("data", item_r2)("hostData", ɵɵpureFunction2(20, _c3$3, i_r3, ctx_r0.getItemAriaId(i_r3, "item")));
+    ɵɵproperty("template", ctx_r0.itemTemplate)("data", item_r2)("hostData", ɵɵpureFunction2(16, _c3$3, i_r3, ctx_r0.getItemAriaId(i_r3, "item")));
 } }
 function ArrayFormFieldComponent_button_4_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = ɵɵgetCurrentView();
-    ɵɵelementStart(0, "button", 17, 18);
-    ɵɵlistener("click", function ArrayFormFieldComponent_button_4_Template_button_click_0_listener() { ɵɵrestoreView(_r18); const ctx_r17 = ɵɵnextContext(); return ctx_r17.add(); });
+    const _r20 = ɵɵgetCurrentView();
+    ɵɵelementStart(0, "button", 22, 23);
+    ɵɵlistener("click", function ArrayFormFieldComponent_button_4_Template_button_click_0_listener() { ɵɵrestoreView(_r20); const ctx_r19 = ɵɵnextContext(); return ctx_r19.add(); });
     ɵɵtext(2);
     ɵɵelementEnd();
 } if (rf & 2) {
@@ -15157,11 +15339,11 @@ let ArrayFormFieldComponent = class ArrayFormFieldComponent extends SmeInternalF
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.addButton = _t.first);
     } }, hostVars: 1, hostBindings: function ArrayFormFieldComponent_HostBindings(rf, ctx) { if (rf & 2) {
         ɵɵattribute("aria-label", ctx.ariaLabel);
-    } }, inputs: { adjustControlButtonLocation: "adjustControlButtonLocation", newItem: "newItem", showAdd: "showAdd", showRemove: "showRemove", showMove: "showMove", canCloseAll: "canCloseAll", canCloseAny: "canCloseAny", canOpenMultiple: "canOpenMultiple", maxItems: "maxItems", addButtonText: "addButtonText", headerTemplate: "headerTemplate", itemTitle: "itemTitle" }, outputs: { askForNewItem: "askForNewItem", askForItemHeader: "askForItemHeader", askForRemoveEvaluator: "askForRemoveEvaluator" }, features: [ɵɵInheritDefinitionFeature], attrs: _c2$7, decls: 8, vars: 8, consts: [[3, "formField"], [1, "sme-array"], [3, "canCloseAny", "canCloseAll", "canOpenMultiple"], [3, "header", "isExpandable", 4, "ngFor", "ngForOf"], ["type", "button", "class", "sme-button-trigger sme-button-auto-width sme-icon sme-icon-add sme-margin-bottom-xs", 3, "smeDisabled", "title", "click", 4, "ngIf"], [3, "alert"], ["aria-live", "assertive", "aria-relevant", "all", 1, "sme-screen-reader"], [3, "header", "isExpandable"], ["smeTemplateOutlet", "", "hostDataName", "context", 3, "template", "data", "hostData"], ["type", "button", "class", "sme-button-trigger sme-button-auto-width sme-form-field-height sme-padding-horizontal-xs", 3, "title", "smeDisabled", "click", 4, "ngIf"], [1, "sme-screen-reader", 3, "id"], [1, "sme-arrange-stack-h", "sme-margin-bottom-lg", "sme-array-item"], [1, "sme-position-flex-auto", "sme-padding-inset-md", 3, "id"], ["type", "button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-form-field-height", "sme-padding-horizontal-xs", 3, "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-up"], [1, "sme-icon", "sme-icon-down"], [1, "sme-icon", "sme-icon-delete", "sme-color-red"], ["type", "button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-icon", "sme-icon-add", "sme-margin-bottom-xs", 3, "smeDisabled", "title", "click"], ["addButton", ""]], template: function ArrayFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { adjustControlButtonLocation: "adjustControlButtonLocation", newItem: "newItem", showAdd: "showAdd", showRemove: "showRemove", showMove: "showMove", canCloseAll: "canCloseAll", canCloseAny: "canCloseAny", canOpenMultiple: "canOpenMultiple", maxItems: "maxItems", addButtonText: "addButtonText", headerTemplate: "headerTemplate", itemTitle: "itemTitle" }, outputs: { askForNewItem: "askForNewItem", askForItemHeader: "askForItemHeader", askForRemoveEvaluator: "askForRemoveEvaluator" }, features: [ɵɵInheritDefinitionFeature], attrs: _c2$7, decls: 8, vars: 8, consts: [[3, "formField"], [1, "sme-array"], [3, "canCloseAny", "canCloseAll", "canOpenMultiple"], [3, "header", "isExpandable", 4, "ngFor", "ngForOf"], ["type", "button", "data-uta-id", "add-button", "class", "sme-button-trigger sme-button-auto-width sme-icon sme-icon-add sme-margin-bottom-xs", 3, "smeDisabled", "title", "click", 4, "ngIf"], [3, "alert"], ["aria-live", "assertive", "aria-relevant", "all", 1, "sme-screen-reader"], [3, "header", "isExpandable"], ["smeTemplateOutlet", "", "hostDataName", "context", 3, "template", "data", "hostData", 4, "ngIf"], ["type", "button", "class", "sme-button-trigger sme-button-auto-width sme-form-field-height sme-padding-horizontal-xs", "data-uta-id", "promote-button", 3, "title", "smeDisabled", "click", 4, "ngIf"], ["type", "button", "class", "sme-button-trigger sme-button-auto-width sme-form-field-height sme-padding-horizontal-xs", "data-uta-id", "demote-button", 3, "title", "smeDisabled", "click", 4, "ngIf"], ["type", "button", "class", "sme-button-trigger sme-button-auto-width sme-form-field-height sme-padding-horizontal-xs", "data-uta-id", "remove-button", 3, "title", "smeDisabled", "click", 4, "ngIf"], [1, "sme-screen-reader", 3, "id"], [1, "sme-arrange-stack-h", "sme-margin-bottom-lg", "sme-array-item"], [1, "sme-position-flex-auto", "sme-padding-inset-md", 3, "id"], ["smeTemplateOutlet", "", "hostDataName", "context", 3, "template", "data", "hostData"], ["type", "button", "data-uta-id", "promote-button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-form-field-height", "sme-padding-horizontal-xs", 3, "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-up"], ["type", "button", "data-uta-id", "demote-button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-form-field-height", "sme-padding-horizontal-xs", 3, "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-down"], ["type", "button", "data-uta-id", "remove-button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-form-field-height", "sme-padding-horizontal-xs", 3, "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-delete", "sme-color-red"], ["type", "button", "data-uta-id", "add-button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-icon", "sme-icon-add", "sme-margin-bottom-xs", 3, "smeDisabled", "title", "click"], ["addButton", ""]], template: function ArrayFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵelementStart(0, "sme-form-field-layout", 0);
         ɵɵelementStart(1, "div", 1);
         ɵɵelementStart(2, "sme-accordion", 2);
-        ɵɵtemplate(3, ArrayFormFieldComponent_sme_accordion_panel_3_Template, 11, 23, "sme-accordion-panel", 3);
+        ɵɵtemplate(3, ArrayFormFieldComponent_sme_accordion_panel_3_Template, 11, 19, "sme-accordion-panel", 3);
         ɵɵelementEnd();
         ɵɵtemplate(4, ArrayFormFieldComponent_button_4_Template, 3, 4, "button", 4);
         ɵɵelementEnd();
@@ -15182,7 +15364,7 @@ let ArrayFormFieldComponent = class ArrayFormFieldComponent extends SmeInternalF
         ɵɵproperty("alert", ctx.alert);
         ɵɵadvance(2);
         ɵɵtextInterpolate(ctx.screenReaderEvent);
-    } }, directives: [FormFieldLayoutComponent, AccordionComponent, NgForOf, NgIf, ValidationAlertComponent, AccordionPanelComponent, PanelControlComponent, TemplateOutletDirective, FieldsetDirective, TooltipDirective, DisabledDirective], encapsulation: 2 });
+    } }, directives: [FormFieldLayoutComponent, AccordionComponent, NgForOf, NgIf, ValidationAlertComponent, AccordionPanelComponent, PanelControlComponent, FieldsetDirective, TemplateOutletDirective, TooltipDirective, DisabledDirective], encapsulation: 2 });
 ArrayFormFieldComponent = __decorate([
     SmeSchemaProperty({
         type: SchemaPrimitiveType.Array,
@@ -17229,7 +17411,7 @@ class SearchFormFieldComponent extends SmeInternalFormFieldComponent {
     }
 }
 /** @nocollapse */ SearchFormFieldComponent.ɵfac = function SearchFormFieldComponent_Factory(t) { return new (t || SearchFormFieldComponent)(ɵɵdirectiveInject(Injector)); };
-/** @nocollapse */ SearchFormFieldComponent.ɵcmp = ɵɵdefineComponent({ type: SearchFormFieldComponent, selectors: [["sme-form-field", "type", "search"]], inputs: { count: "count", searching: "searching", trimSearch: "trimSearch", emphasizeSearchButton: "emphasizeSearchButton", searchButtonText: "searchButtonText", disableSearchButton: "disableSearchButton" }, outputs: { search: "search", deliberateSearch: "deliberateSearch" }, features: [ɵɵInheritDefinitionFeature], attrs: _c0$u, decls: 11, vars: 17, consts: [[3, "formField"], [1, "sme-searchbox", "sme-searchbox-button-icon"], ["type", "search", 3, "required", "autofocus", "disabled", "ngModel", "placeholder", "ngModelChange", "keydown.Enter"], [4, "ngIf"], [1, "sme-screen-reader", 3, "id"], ["aria-live", "polite", "aria-relevant", "all", 4, "ngIf"], [3, "alert"], ["type", "button", "class", "sme-button-trigger sme-button-auto-width sme-form-field-height", 3, "smeDisabled", "title", "click", 4, "ngIf"], ["type", "button", "class", "sme-button-primary sme-button-auto-width sme-form-field-height", 3, "smeDisabled", "click", 4, "ngIf"], ["type", "button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-form-field-height", 3, "smeDisabled", "title", "click"], [1, "sme-icon", "sme-icon-search"], ["type", "button", 1, "sme-button-primary", "sme-button-auto-width", "sme-form-field-height", 3, "smeDisabled", "click"], [1, "sme-icon", "sme-icon-search", "sme-margin-right-xs"], [1, "sme-icon", "sme-icon-search", "sme-margin-right-xs", "sme-margin-top-xs", 3, "click"], ["aria-live", "polite", "aria-relevant", "all"]], template: function SearchFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
+/** @nocollapse */ SearchFormFieldComponent.ɵcmp = ɵɵdefineComponent({ type: SearchFormFieldComponent, selectors: [["sme-form-field", "type", "search"]], inputs: { count: "count", searching: "searching", trimSearch: "trimSearch", emphasizeSearchButton: "emphasizeSearchButton", searchButtonText: "searchButtonText", disableSearchButton: "disableSearchButton" }, outputs: { search: "search", deliberateSearch: "deliberateSearch" }, features: [ɵɵInheritDefinitionFeature], attrs: _c0$u, decls: 11, vars: 17, consts: [[3, "formField"], [1, "sme-searchbox", "sme-searchbox-button-icon"], ["type", "search", 3, "required", "autofocus", "disabled", "ngModel", "placeholder", "ngModelChange", "keydown.Enter"], [4, "ngIf"], [1, "sme-screen-reader", 3, "id"], ["aria-live", "polite", "aria-relevant", "all", 4, "ngIf"], [3, "alert"], ["type", "button", "class", "sme-button-trigger sme-button-auto-width sme-form-field-height", "data-uta-id", "search-button", 3, "smeDisabled", "title", "click", 4, "ngIf"], ["type", "button", "class", "sme-button-primary sme-button-auto-width sme-form-field-height", "data-uta-id", "search-button", 3, "smeDisabled", "click", 4, "ngIf"], ["type", "button", "data-uta-id", "search-button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-form-field-height", 3, "smeDisabled", "title", "click"], [1, "sme-icon", "sme-icon-search"], ["type", "button", "data-uta-id", "search-button", 1, "sme-button-primary", "sme-button-auto-width", "sme-form-field-height", 3, "smeDisabled", "click"], [1, "sme-icon", "sme-icon-search", "sme-margin-right-xs"], [1, "sme-icon", "sme-icon-search", "sme-margin-right-xs", "sme-margin-top-xs", 3, "click"], ["aria-live", "polite", "aria-relevant", "all"]], template: function SearchFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵelementStart(0, "sme-form-field-layout", 0);
         ɵɵelementStart(1, "div", 1);
         ɵɵelementStart(2, "input", 2);
@@ -17423,14 +17605,14 @@ function ComboboxFormFieldComponent_ng_template_16_Template(rf, ctx) { if (rf &
     const ctx_r9 = ɵɵnextContext();
     ɵɵclassProp("sme-selected", option_r22.isSelected);
     ɵɵproperty("disabled", option_r22.disabled);
-    ɵɵattribute("aria-selected", option_r22.isSelected)("aria-label", option_r22.toString());
+    ɵɵattribute("aria-selected", option_r22.isSelected)("aria-label", option_r22.toString())("data-uta-id", option_r22.utaId ? option_r22.utaId : option_r22.value);
     ɵɵadvance(1);
     ɵɵproperty("smeTooltip", option_r22.disabled ? null : option_r22.resolvedTooltipTemplate)("smeTooltipContext", option_r22.disabled ? null : option_r22.tooltipContext || option_r22);
     ɵɵadvance(1);
     ɵɵclassProp("sme-arrange-ellipsis", !ctx_r9.overflowWrap)("sme-combobox-option-wrap", ctx_r9.overflowWrap);
     ɵɵproperty("title", option_r22.resolvedTitle);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(option_r22.toString());
+    ɵɵtextInterpolate1("", option_r22.toString(), " ");
 } }
 function ComboboxFormFieldComponent_ng_template_18_Template(rf, ctx) { if (rf & 1) {
     const _r27 = ɵɵgetCurrentView();
@@ -17439,9 +17621,10 @@ function ComboboxFormFieldComponent_ng_template_18_Template(rf, ctx) { if (rf &
     ɵɵelementStart(2, "input", 28);
     ɵɵlistener("change", function ComboboxFormFieldComponent_ng_template_18_Template_input_change_2_listener() { ɵɵrestoreView(_r27); const option_r25 = ctx.$implicit; const ctx_r26 = ɵɵnextContext(); return ctx_r26.toggleOption(option_r25, !option_r25.isSelected); });
     ɵɵelementEnd();
-    ɵɵelementStart(3, "span", 29);
-    ɵɵelementStart(4, "span", 30);
-    ɵɵtext(5);
+    ɵɵtext(3, " [disabled]=\"option.disabled\" class=\"sme-layout-absolute sme-position-inset-none\" /> ");
+    ɵɵelementStart(4, "span", 29);
+    ɵɵelementStart(5, "span", 30);
+    ɵɵtext(6);
     ɵɵelementEnd();
     ɵɵelementEnd();
     ɵɵelementEnd();
@@ -17450,15 +17633,15 @@ function ComboboxFormFieldComponent_ng_template_18_Template(rf, ctx) { if (rf &
     const option_r25 = ctx.$implicit;
     const ctx_r11 = ɵɵnextContext();
     ɵɵadvance(2);
-    ɵɵproperty("checked", option_r25.isSelected)("disabled", option_r25.disabled);
-    ɵɵattribute("aria-checked", option_r25.isSelected)("aria-label", option_r25.toString());
-    ɵɵadvance(1);
+    ɵɵproperty("checked", option_r25.isSelected);
+    ɵɵattribute("aria-checked", option_r25.isSelected)("aria-label", option_r25.toString())("data-uta-id", option_r25.utaId ? option_r25.utaId : option_r25.value);
+    ɵɵadvance(2);
     ɵɵclassProp("sme-combobox-option-wrap", ctx_r11.overflowWrap);
     ɵɵproperty("smeTooltip", option_r25.disabled ? null : option_r25.resolvedTooltipTemplate)("title", option_r25.resolvedTitle)("smeTooltipContext", option_r25.disabled ? null : option_r25.tooltipContext || option_r25);
     ɵɵadvance(1);
     ɵɵclassProp("sme-arrange-ellipsis", !ctx_r11.overflowWrap);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(option_r25.toString());
+    ɵɵtextInterpolate1("", option_r25.toString(), " ");
 } }
 const _c5 = function (a0) { return { "max-width.px": a0 }; };
 const _c6 = function () { return { "max-width": "initial" }; };
@@ -17771,7 +17954,7 @@ let ComboboxFormFieldComponent = class ComboboxFormFieldComponent extends SmeInt
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.multiSelectTemplate = _t.first);
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.listboxElement = _t.first);
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.dropDown = _t.first);
-    } }, inputs: { multiple: "multiple", overflowWrap: "overflowWrap", maintainSearch: "maintainSearch", dropdownApplyFormFieldOffsetWidth: "dropdownApplyFormFieldOffsetWidth" }, features: [ɵɵInheritDefinitionFeature], attrs: _c4$1, decls: 20, vars: 30, consts: [[3, "formField"], [1, "sme-combobox", "sme-focus-zone", "sme-form-field-editor", 3, "autoToggle", "disabled", "calculateHeight", "dropdownApplyFormFieldOffsetWidth", "toggled"], ["dropDown", ""], [1, "sme-combobox-header", "sme-dropdown-toggle", 3, "keydown", "keypress"], ["dropdownHeader", ""], ["type", "text", "role", "combobox", "readonly", "", "spellcheck", "false", "autocapitalize", "off", "autocomplete", "off", 3, "value", "placeholder", "click"], ["textInput", ""], ["type", "button", "tabindex", "-1", "role", "presentation", "aria-hidden", "true", 1, "sme-button-trigger", "sme-button-auto-width", 3, "click"], [1, "sme-icon", "sme-icon-chevronDown"], ["role", "listbox", 1, "sme-dropdown-content", "sme-dropdown-content-inherit-container-height", 3, "ngStyle", "id", "keydown"], ["listbox", ""], [3, "sme-padding-squish-v-xs", "keydown", 4, "ngIf"], ["class", "sme-checkbox sme-dropdown-interaction-enabled", "role", "option", 3, "sme-layout-none", 4, "ngIf"], [4, "ngIf"], [3, "alert"], ["singleSelectTemplate", ""], ["multiSelectTemplate", ""], [3, "keydown"], ["name", "searchStringValue", "type", "search", 3, "disableSearchButton", "placeholder", "label", "id", "count", "ngModel", "ngModelChange"], ["role", "option", 1, "sme-checkbox", "sme-dropdown-interaction-enabled"], [1, "sme-position-stretch-h", "sme-arrange-word-break-all"], ["type", "checkbox", "role", "checkbox", 1, "sme-layout-absolute", "sme-position-inset-none", 3, "checked", "change"], ["aria-hidden", "true"], [4, "ngFor", "ngForOf", "ngForTrackBy"], ["smeTemplateOutlet", "", 3, "template", "data"], ["type", "button", "role", "option", 3, "disabled", "click"], [3, "smeTooltip", "smeTooltipContext"], [1, "sme-layout-float-left", 3, "title"], ["type", "checkbox", "role", "checkbox", 1, "sme-layout-absolute", "sme-position-inset-none", 3, "checked", "disabled", "change"], ["aria-hidden", "true", 1, "sme-position-stretch-h", "sme-layout-float-left", 3, "smeTooltip", "title", "smeTooltipContext"], [1, "sme-position-stretch-h", "sme-layout-float-left"]], template: function ComboboxFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { multiple: "multiple", overflowWrap: "overflowWrap", maintainSearch: "maintainSearch", dropdownApplyFormFieldOffsetWidth: "dropdownApplyFormFieldOffsetWidth" }, features: [ɵɵInheritDefinitionFeature], attrs: _c4$1, decls: 20, vars: 30, consts: [[3, "formField"], [1, "sme-combobox", "sme-focus-zone", "sme-form-field-editor", 3, "autoToggle", "disabled", "calculateHeight", "dropdownApplyFormFieldOffsetWidth", "toggled"], ["dropDown", ""], [1, "sme-combobox-header", "sme-dropdown-toggle", 3, "keydown", "keypress"], ["dropdownHeader", ""], ["type", "text", "role", "combobox", "readonly", "", "spellcheck", "false", "autocapitalize", "off", "autocomplete", "off", 3, "value", "placeholder", "click"], ["textInput", ""], ["type", "button", "tabindex", "-1", "role", "presentation", "aria-hidden", "true", 1, "sme-button-trigger", "sme-button-auto-width", 3, "click"], [1, "sme-icon", "sme-icon-chevronDown"], ["role", "listbox", 1, "sme-dropdown-content", "sme-dropdown-content-inherit-container-height", 3, "ngStyle", "id", "keydown"], ["listbox", ""], [3, "sme-padding-squish-v-xs", "keydown", 4, "ngIf"], ["class", "sme-checkbox sme-dropdown-interaction-enabled", "role", "option", 3, "sme-layout-none", 4, "ngIf"], [4, "ngIf"], [3, "alert"], ["singleSelectTemplate", ""], ["multiSelectTemplate", ""], [3, "keydown"], ["name", "searchStringValue", "type", "search", 3, "disableSearchButton", "placeholder", "label", "id", "count", "ngModel", "ngModelChange"], ["role", "option", 1, "sme-checkbox", "sme-dropdown-interaction-enabled"], [1, "sme-position-stretch-h", "sme-arrange-word-break-all"], ["type", "checkbox", "role", "checkbox", 1, "sme-layout-absolute", "sme-position-inset-none", 3, "checked", "change"], ["aria-hidden", "true"], [4, "ngFor", "ngForOf", "ngForTrackBy"], ["smeTemplateOutlet", "", 3, "template", "data"], ["type", "button", "role", "option", 3, "disabled", "click"], [3, "smeTooltip", "smeTooltipContext"], [1, "sme-layout-float-left", 3, "title"], ["type", "checkbox", "role", "checkbox", 3, "checked", "change"], ["aria-hidden", "true", 1, "sme-position-stretch-h", "sme-layout-float-left", 3, "smeTooltip", "title", "smeTooltipContext"], [1, "sme-position-stretch-h", "sme-layout-float-left"]], template: function ComboboxFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
         const _r28 = ɵɵgetCurrentView();
         ɵɵelementStart(0, "sme-form-field-layout", 0);
         ɵɵelementStart(1, "sme-dropdown", 1, 2);
@@ -17795,8 +17978,8 @@ let ComboboxFormFieldComponent = class ComboboxFormFieldComponent extends SmeInt
         ɵɵelementEnd();
         ɵɵelementEnd();
         ɵɵelement(15, "sme-validation-alert", 14);
-        ɵɵtemplate(16, ComboboxFormFieldComponent_ng_template_16_Template, 4, 13, "ng-template", null, 15, ɵɵtemplateRefExtractor);
-        ɵɵtemplate(18, ComboboxFormFieldComponent_ng_template_18_Template, 6, 12, "ng-template", null, 16, ɵɵtemplateRefExtractor);
+        ɵɵtemplate(16, ComboboxFormFieldComponent_ng_template_16_Template, 4, 14, "ng-template", null, 15, ɵɵtemplateRefExtractor);
+        ɵɵtemplate(18, ComboboxFormFieldComponent_ng_template_18_Template, 7, 12, "ng-template", null, 16, ɵɵtemplateRefExtractor);
         ɵɵelementEnd();
     } if (rf & 2) {
         const _r0 = ɵɵreference(2);
@@ -18287,7 +18470,7 @@ class DateTimeFormFieldComponent extends DateLikeFormFieldComponent {
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.dropDown = _t.first);
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.calendar = _t.first);
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.clock = _t.first);
-    } }, features: [ɵɵInheritDefinitionFeature], attrs: _c3$5, decls: 24, vars: 27, consts: [[3, "formField"], [1, "sme-arrange-stack-h", "sme-focus-zone", "sme-form-field-editor"], [1, "sme-combobox", 3, "autoToggle", "disabled", "autoWidth", "toggled"], ["dropDown", ""], [1, "sme-combobox-header", "sme-dropdown-toggle", 3, "keydown"], ["dropdownHeader", ""], ["type", "text", "role", "combobox", "spellcheck", "false", "autocapitalize", "off", "autocomplete", "off", 3, "ngModel", "placeholder", "ngModelChange"], ["textInput", ""], ["type", "button", "tabindex", "-1", "role", "presentation", "aria-hidden", "true", 1, "sme-button-trigger", "sme-button-auto-width", 3, "click"], ["dropDownButton", ""], [1, "sme-icon", "sme-icon-dateTime2"], [1, "sme-dropdown-content", "sme-dropdown-interaction-enabled", "sme-focus-trap", 3, "id"], [1, "sme-datetime-dropdown"], [1, "sme-datetime-main-content"], ["type", "calendar", "orientation", "vertical", 3, "ngModel", "required", "hideHeader", "ngModelChange"], ["calendar", ""], ["type", "clock", "orientation", "vertical", 3, "ngModel", "required", "hideHeader", "ngModelChange"], ["clock", ""], [1, "sme-datetime-confirmation"], ["tabindex", "0", 3, "click"], [1, "sme-icon", "sme-icon-size-xxs", "sme-icon-accept"], [1, "sme-icon", "sme-icon-size-xxs", "sme-icon-clear"], [3, "alert"]], template: function DateTimeFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, features: [ɵɵInheritDefinitionFeature], attrs: _c3$5, decls: 24, vars: 27, consts: [[3, "formField"], [1, "sme-arrange-stack-h", "sme-focus-zone", "sme-form-field-editor"], [1, "sme-combobox", 3, "autoToggle", "disabled", "autoWidth", "toggled"], ["dropDown", ""], [1, "sme-combobox-header", "sme-dropdown-toggle", 3, "keydown"], ["dropdownHeader", ""], ["type", "text", "role", "combobox", "spellcheck", "false", "autocapitalize", "off", "autocomplete", "off", 3, "ngModel", "placeholder", "ngModelChange"], ["textInput", ""], ["type", "button", "tabindex", "-1", "role", "presentation", "aria-hidden", "true", 1, "sme-button-trigger", "sme-button-auto-width", 3, "click"], ["dropDownButton", ""], [1, "sme-icon", "sme-icon-dateTime2"], [1, "sme-dropdown-content", "sme-dropdown-interaction-enabled", "sme-focus-trap", 3, "id"], [1, "sme-datetime-dropdown"], [1, "sme-datetime-main-content"], ["type", "calendar", "orientation", "vertical", 3, "ngModel", "required", "hideHeader", "ngModelChange"], ["calendar", ""], ["type", "clock", "orientation", "vertical", 3, "ngModel", "required", "hideHeader", "ngModelChange"], ["clock", ""], [1, "sme-datetime-confirmation"], ["tabindex", "0", 1, "sme-focus-zone", 3, "click"], [1, "sme-icon", "sme-icon-size-xxs", "sme-icon-accept"], [1, "sme-icon", "sme-icon-size-xxs", "sme-icon-clear"], [3, "alert"]], template: function DateTimeFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
         const _r6 = ɵɵgetCurrentView();
         ɵɵelementStart(0, "sme-form-field-layout", 0);
         ɵɵelementStart(1, "div", 1);
@@ -19987,7 +20170,7 @@ function OrderedListFormFieldLoaderComponent_ng_container_3_Template(rf, ctx) {
 } }
 const _c0$D = ["type", "orderedlist"];
 function OrderedListFormFieldComponent_div_1_div_1_p_3_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "p", 13);
+    ɵɵelementStart(0, "p", 14);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
@@ -19998,14 +20181,14 @@ function OrderedListFormFieldComponent_div_1_div_1_p_3_Template(rf, ctx) { if (r
     ɵɵtextInterpolate(ctx_r5.arrayGetValueDisplayString(ctx_r5.value[i_r4]));
 } }
 function OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_ng_container_1_sme_option_1_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelement(0, "sme-option", 17);
+    ɵɵelement(0, "sme-option", 18);
 } if (rf & 2) {
     const option_r12 = ɵɵnextContext().$implicit;
-    ɵɵproperty("value", option_r12.value)("label", option_r12.toString())("disabled", option_r12.disabled);
+    ɵɵproperty("utaId", option_r12.utaId ? option_r12.utaId : option_r12.value)("value", option_r12.value)("label", option_r12.toString())("disabled", option_r12.disabled);
 } }
 function OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementContainerStart(0);
-    ɵɵtemplate(1, OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_ng_container_1_sme_option_1_Template, 1, 3, "sme-option", 16);
+    ɵɵtemplate(1, OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_ng_container_1_sme_option_1_Template, 1, 4, "sme-option", 17);
     ɵɵelementContainerEnd();
 } if (rf & 2) {
     const option_r12 = ctx.$implicit;
@@ -20016,22 +20199,24 @@ function OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_ng_container
 } }
 function OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_Template(rf, ctx) { if (rf & 1) {
     const _r17 = ɵɵgetCurrentView();
-    ɵɵelementStart(0, "sme-form-field", 14);
+    ɵɵelementStart(0, "sme-form-field", 15);
     ɵɵlistener("ngModelChange", function OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_Template_sme_form_field_ngModelChange_0_listener($event) { ɵɵrestoreView(_r17); const i_r4 = ɵɵnextContext().index; const ctx_r16 = ɵɵnextContext(2); return (ctx_r16.value[i_r4] = $event); })("ngModelChange", function OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_Template_sme_form_field_ngModelChange_0_listener() { ɵɵrestoreView(_r17); const ctx_r19 = ɵɵnextContext(3); return ctx_r19.triggerValueChange(); })("customValidate", function OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_Template_sme_form_field_customValidate_0_listener() { ɵɵrestoreView(_r17); const ctx_r20 = ɵɵnextContext(3); return ctx_r20.newItemCheck(); });
-    ɵɵtemplate(1, OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_ng_container_1_Template, 2, 1, "ng-container", 15);
+    ɵɵtemplate(1, OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_ng_container_1_Template, 2, 1, "ng-container", 16);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const i_r4 = ɵɵnextContext().index;
+    const ctx_r21 = ɵɵnextContext();
+    const item_r3 = ctx_r21.$implicit;
+    const i_r4 = ctx_r21.index;
     const ctx_r6 = ɵɵnextContext(2);
-    ɵɵproperty("hideHeader", true)("valueComparator", ctx_r6.valueComparator)("ngModel", ctx_r6.value[i_r4])("label", ctx_r6.label)("searchable", ctx_r6.searchable);
+    ɵɵproperty("utaId", item_r3 ? item_r3.toString() + "-combobox" : "new-combobox")("hideHeader", true)("valueComparator", ctx_r6.valueComparator)("ngModel", ctx_r6.value[i_r4])("label", ctx_r6.label)("searchable", ctx_r6.searchable);
     ɵɵadvance(1);
     ɵɵproperty("ngForOf", ctx_r6.options);
 } }
 function OrderedListFormFieldComponent_div_1_div_1_button_6_Template(rf, ctx) { if (rf & 1) {
     const _r24 = ɵɵgetCurrentView();
-    ɵɵelementStart(0, "button", 18);
+    ɵɵelementStart(0, "button", 19);
     ɵɵlistener("click", function OrderedListFormFieldComponent_div_1_div_1_button_6_Template_button_click_0_listener() { ɵɵrestoreView(_r24); const i_r4 = ɵɵnextContext().index; const ctx_r22 = ɵɵnextContext(2); return ctx_r22.promoteItemAt(i_r4); });
-    ɵɵelement(1, "span", 19);
+    ɵɵelement(1, "span", 20);
     ɵɵelementEnd();
 } if (rf & 2) {
     const i_r4 = ɵɵnextContext().index;
@@ -20041,9 +20226,9 @@ function OrderedListFormFieldComponent_div_1_div_1_button_6_Template(rf, ctx) {
 } }
 function OrderedListFormFieldComponent_div_1_div_1_button_7_Template(rf, ctx) { if (rf & 1) {
     const _r28 = ɵɵgetCurrentView();
-    ɵɵelementStart(0, "button", 18);
+    ɵɵelementStart(0, "button", 21);
     ɵɵlistener("click", function OrderedListFormFieldComponent_div_1_div_1_button_7_Template_button_click_0_listener() { ɵɵrestoreView(_r28); const i_r4 = ɵɵnextContext().index; const ctx_r26 = ɵɵnextContext(2); return ctx_r26.demoteItemAt(i_r4); });
-    ɵɵelement(1, "span", 20);
+    ɵɵelement(1, "span", 22);
     ɵɵelementEnd();
 } if (rf & 2) {
     const i_r4 = ɵɵnextContext().index;
@@ -20053,9 +20238,9 @@ function OrderedListFormFieldComponent_div_1_div_1_button_7_Template(rf, ctx) {
 } }
 function OrderedListFormFieldComponent_div_1_div_1_button_8_Template(rf, ctx) { if (rf & 1) {
     const _r32 = ɵɵgetCurrentView();
-    ɵɵelementStart(0, "button", 21);
+    ɵɵelementStart(0, "button", 23);
     ɵɵlistener("click", function OrderedListFormFieldComponent_div_1_div_1_button_8_Template_button_click_0_listener() { ɵɵrestoreView(_r32); const i_r4 = ɵɵnextContext().index; const ctx_r30 = ɵɵnextContext(2); return ctx_r30.removeItemAt(i_r4); });
-    ɵɵelement(1, "span", 22);
+    ɵɵelement(1, "span", 24);
     ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r9 = ɵɵnextContext(3);
@@ -20069,15 +20254,17 @@ function OrderedListFormFieldComponent_div_1_div_1_Template(rf, ctx) { if (rf &
     ɵɵelementEnd();
     ɵɵtemplate(3, OrderedListFormFieldComponent_div_1_div_1_p_3_Template, 2, 2, "p", 8);
     ɵɵelementStart(4, "div", 9);
-    ɵɵtemplate(5, OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_Template, 2, 6, "sme-form-field", 10);
+    ɵɵtemplate(5, OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_Template, 2, 7, "sme-form-field", 10);
     ɵɵelementEnd();
     ɵɵtemplate(6, OrderedListFormFieldComponent_div_1_div_1_button_6_Template, 2, 4, "button", 11);
-    ɵɵtemplate(7, OrderedListFormFieldComponent_div_1_div_1_button_7_Template, 2, 4, "button", 11);
-    ɵɵtemplate(8, OrderedListFormFieldComponent_div_1_div_1_button_8_Template, 2, 3, "button", 12);
+    ɵɵtemplate(7, OrderedListFormFieldComponent_div_1_div_1_button_7_Template, 2, 4, "button", 12);
+    ɵɵtemplate(8, OrderedListFormFieldComponent_div_1_div_1_button_8_Template, 2, 3, "button", 13);
     ɵɵelementEnd();
 } if (rf & 2) {
+    const item_r3 = ctx.$implicit;
     const i_r4 = ctx.index;
     const ctx_r1 = ɵɵnextContext(2);
+    ɵɵattribute("data-uta-id", item_r3 ? item_r3.toString() + "-row" : "new-item-row");
     ɵɵadvance(1);
     ɵɵproperty("id", ctx_r1.idBag.detailsSpan + i_r4);
     ɵɵadvance(1);
@@ -20097,7 +20284,7 @@ function OrderedListFormFieldComponent_div_1_div_1_Template(rf, ctx) { if (rf &
 } }
 function OrderedListFormFieldComponent_div_1_button_2_Template(rf, ctx) { if (rf & 1) {
     const _r34 = ɵɵgetCurrentView();
-    ɵɵelementStart(0, "button", 23);
+    ɵɵelementStart(0, "button", 25);
     ɵɵlistener("click", function OrderedListFormFieldComponent_div_1_button_2_Template_button_click_0_listener() { ɵɵrestoreView(_r34); const ctx_r33 = ɵɵnextContext(2); return ctx_r33.addListItem(); });
     ɵɵtext(1);
     ɵɵelementEnd();
@@ -20110,7 +20297,7 @@ function OrderedListFormFieldComponent_div_1_button_2_Template(rf, ctx) { if (rf
 } }
 function OrderedListFormFieldComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementStart(0, "div", 3);
-    ɵɵtemplate(1, OrderedListFormFieldComponent_div_1_div_1_Template, 9, 9, "div", 4);
+    ɵɵtemplate(1, OrderedListFormFieldComponent_div_1_div_1_Template, 9, 10, "div", 4);
     ɵɵtemplate(2, OrderedListFormFieldComponent_div_1_button_2_Template, 2, 4, "button", 5);
     ɵɵelementEnd();
 } if (rf & 2) {
@@ -20384,7 +20571,7 @@ let OrderedListFormFieldComponent = class OrderedListFormFieldComponent extends
 /** @nocollapse */ OrderedListFormFieldComponent.ɵfac = function OrderedListFormFieldComponent_Factory(t) { return new (t || OrderedListFormFieldComponent)(ɵɵdirectiveInject(Injector)); };
 /** @nocollapse */ OrderedListFormFieldComponent.ɵcmp = ɵɵdefineComponent({ type: OrderedListFormFieldComponent, selectors: [["sme-form-field", "type", "orderedlist"]], hostVars: 1, hostBindings: function OrderedListFormFieldComponent_HostBindings(rf, ctx) { if (rf & 2) {
         ɵɵattribute("aria-label", ctx.ariaLabel);
-    } }, inputs: { showAddRemove: "showAddRemove", showMove: "showMove", showSelect: "showSelect", addButtonText: "addButtonText", searchable: "searchable", allowEmpty: "allowEmpty" }, features: [ɵɵInheritDefinitionFeature], attrs: _c0$D, decls: 3, vars: 3, consts: [[3, "formField"], ["class", "sme-margin-bottom-xs sme-form-field-editor", 4, "ngIf"], [3, "alert"], [1, "sme-margin-bottom-xs", "sme-form-field-editor"], ["class", "sme-arrange-stack-h sme-margin-bottom-xs sme-form-field-width", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["type", "button", "class", "sme-button-trigger sme-button-auto-width sme-icon sme-icon-add sme-margin-bottom-xs", 3, "smeDisabled", "title", "click", 4, "ngIf"], [1, "sme-arrange-stack-h", "sme-margin-bottom-xs", "sme-form-field-width"], [1, "sme-screen-reader", 3, "id"], ["class", "sme-position-flex-auto", "role", "textbox", "tabindex", "0", 4, "ngIf"], [1, "sme-layout-relative", "sme-position-flex-auto"], ["type", "combobox", 3, "hideHeader", "valueComparator", "ngModel", "label", "searchable", "ngModelChange", "customValidate", 4, "ngIf"], ["type", "button", "class", "sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height", 3, "id", "title", "smeDisabled", "click", 4, "ngIf"], ["type", "button", "class", "sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height", 3, "title", "smeDisabled", "click", 4, "ngIf"], ["role", "textbox", "tabindex", "0", 1, "sme-position-flex-auto"], ["type", "combobox", 3, "hideHeader", "valueComparator", "ngModel", "label", "searchable", "ngModelChange", "customValidate"], [4, "ngFor", "ngForOf"], [3, "value", "label", "disabled", 4, "ngIf"], [3, "value", "label", "disabled"], ["type", "button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", "sme-form-field-height", 3, "id", "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-up"], [1, "sme-icon", "sme-icon-down"], ["type", "button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", "sme-form-field-height", 3, "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-cancel", "sme-color-red"], ["type", "button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-icon", "sme-icon-add", "sme-margin-bottom-xs", 3, "smeDisabled", "title", "click"]], template: function OrderedListFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { showAddRemove: "showAddRemove", showMove: "showMove", showSelect: "showSelect", addButtonText: "addButtonText", searchable: "searchable", allowEmpty: "allowEmpty" }, features: [ɵɵInheritDefinitionFeature], attrs: _c0$D, decls: 3, vars: 3, consts: [[3, "formField"], ["class", "sme-margin-bottom-xs sme-form-field-editor", 4, "ngIf"], [3, "alert"], [1, "sme-margin-bottom-xs", "sme-form-field-editor"], ["class", "sme-arrange-stack-h sme-margin-bottom-xs sme-form-field-width", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["type", "button", "class", "sme-button-trigger sme-button-auto-width sme-icon sme-icon-add sme-margin-bottom-xs", "data-uta-id", "add-button", 3, "smeDisabled", "title", "click", 4, "ngIf"], [1, "sme-arrange-stack-h", "sme-margin-bottom-xs", "sme-form-field-width"], [1, "sme-screen-reader", 3, "id"], ["class", "sme-position-flex-auto", "role", "textbox", "tabindex", "0", 4, "ngIf"], [1, "sme-layout-relative", "sme-position-flex-auto"], ["type", "combobox", 3, "utaId", "hideHeader", "valueComparator", "ngModel", "label", "searchable", "ngModelChange", "customValidate", 4, "ngIf"], ["type", "button", "class", "sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height", "data-uta-id", "promote-button", 3, "id", "title", "smeDisabled", "click", 4, "ngIf"], ["type", "button", "class", "sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height", "data-uta-id", "demote-button", 3, "id", "title", "smeDisabled", "click", 4, "ngIf"], ["type", "button", "class", "sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height", "data-uta-id", "remove-button", 3, "title", "smeDisabled", "click", 4, "ngIf"], ["role", "textbox", "tabindex", "0", 1, "sme-position-flex-auto"], ["type", "combobox", 3, "utaId", "hideHeader", "valueComparator", "ngModel", "label", "searchable", "ngModelChange", "customValidate"], [4, "ngFor", "ngForOf"], [3, "utaId", "value", "label", "disabled", 4, "ngIf"], [3, "utaId", "value", "label", "disabled"], ["type", "button", "data-uta-id", "promote-button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", "sme-form-field-height", 3, "id", "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-up"], ["type", "button", "data-uta-id", "demote-button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", "sme-form-field-height", 3, "id", "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-down"], ["type", "button", "data-uta-id", "remove-button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", "sme-form-field-height", 3, "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-cancel", "sme-color-red"], ["type", "button", "data-uta-id", "add-button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-icon", "sme-icon-add", "sme-margin-bottom-xs", 3, "smeDisabled", "title", "click"]], template: function OrderedListFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵelementStart(0, "sme-form-field-layout", 0);
         ɵɵtemplate(1, OrderedListFormFieldComponent_div_1_Template, 3, 3, "div", 1);
         ɵɵelement(2, "sme-validation-alert", 2);
@@ -20809,7 +20996,7 @@ function RadioGroupFormFieldComponent_ng_container_1_ng_container_1_ng_container
     const ctx_r5 = ɵɵnextContext(2);
     ɵɵadvance(3);
     ɵɵproperty("name", ctx_r5.idBag.groupName)("value", option_r3.value)("ngModel", ctx_r5.value)("disabled", ctx_r5.loadingOrDisabled || option_r3.disabled);
-    ɵɵattribute("aria-label", option_r3.label)("aria-describedby", option_r3.description)("aria-checked", option_r3.isSelected)("name", ctx_r5.idBag.groupName)("aria-required", ctx_r5.required);
+    ɵɵattribute("aria-label", option_r3.label)("aria-describedby", option_r3.description)("aria-checked", option_r3.isSelected)("name", ctx_r5.idBag.groupName)("data-uta-id", option_r3.utaId)("aria-required", ctx_r5.required);
     ɵɵadvance(3);
     ɵɵtextInterpolate(option_r3.label);
     ɵɵadvance(1);
@@ -20823,7 +21010,7 @@ function RadioGroupFormFieldComponent_ng_container_1_ng_container_1_ng_container
 } }
 function RadioGroupFormFieldComponent_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementContainerStart(0);
-    ɵɵtemplate(1, RadioGroupFormFieldComponent_ng_container_1_ng_container_1_ng_container_1_Template, 11, 14, "ng-container", 1);
+    ɵɵtemplate(1, RadioGroupFormFieldComponent_ng_container_1_ng_container_1_ng_container_1_Template, 11, 15, "ng-container", 1);
     ɵɵelementContainerEnd();
 } if (rf & 2) {
     const option_r3 = ctx.$implicit;
@@ -20886,7 +21073,7 @@ function RadioGroupFormFieldComponent_ng_container_2_ng_container_1_ng_container
     const ctx_r24 = ɵɵnextContext(2);
     ɵɵadvance(4);
     ɵɵproperty("name", ctx_r24.idBag.groupName)("value", option_r22.value)("ngModel", ctx_r24.value)("disabled", ctx_r24.loadingOrDisabled || option_r22.disabled);
-    ɵɵattribute("aria-label", option_r22.label)("aria-describedby", option_r22.description)("aria-checked", option_r22.isSelected)("name", ctx_r24.idBag.groupName)("aria-required", ctx_r24.required);
+    ɵɵattribute("aria-label", option_r22.label)("aria-describedby", option_r22.description)("aria-checked", option_r22.isSelected)("name", ctx_r24.idBag.groupName)("data-uta-id", option_r22.utaId)("aria-required", ctx_r24.required);
     ɵɵadvance(3);
     ɵɵtextInterpolate(option_r22.label);
     ɵɵadvance(1);
@@ -20898,7 +21085,7 @@ function RadioGroupFormFieldComponent_ng_container_2_ng_container_1_ng_container
 } }
 function RadioGroupFormFieldComponent_ng_container_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementContainerStart(0);
-    ɵɵtemplate(1, RadioGroupFormFieldComponent_ng_container_2_ng_container_1_ng_container_1_Template, 11, 13, "ng-container", 1);
+    ɵɵtemplate(1, RadioGroupFormFieldComponent_ng_container_2_ng_container_1_ng_container_1_Template, 11, 14, "ng-container", 1);
     ɵɵelementContainerEnd();
 } if (rf & 2) {
     const option_r22 = ctx.$implicit;
@@ -21931,7 +22118,7 @@ let TagsFormFieldComponent = class TagsFormFieldComponent extends SmeInternalFor
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.newTagInput = _t.first);
     } }, hostVars: 1, hostBindings: function TagsFormFieldComponent_HostBindings(rf, ctx) { if (rf & 2) {
         ɵɵattribute("aria-label", ctx.ariaLabel);
-    } }, inputs: { tagSplitCharacter: "tagSplitCharacter", textButton: "textButton", compact: "compact", suggestions: "suggestions" }, features: [ɵɵInheritDefinitionFeature], attrs: _c1$j, decls: 14, vars: 15, consts: [[3, "formField"], [1, "sme-tags-input", "sme-focus-zone"], ["class", "sme-tag", 4, "ngFor", "ngForOf"], [1, "sme-tag"], [1, "sme-screen-reader", 3, "id"], ["type", "text", "autocomplete", "off", 1, "sme-tag-input", 3, "disabled", "ngModel", "ngModelChange", "keydown.enter", "blur", "focus", "keypress"], ["newTagInput", ""], [3, "id"], [4, "ngFor", "ngForOf"], ["type", "button", "role", "button", 1, "sme-button-trigger", "sme-tag-button", "sme-button-auto-width", "sme-tag-button-add", 3, "click"], [1, "sme-icon", "sme-icon-add", "sme-icon-size-xxs"], [4, "ngIf"], [3, "alert"], [1, "sme-tag-content"], ["type", "button", "role", "button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-tag-button", "sme-tag-button-delete", 3, "title", "click"], [1, "sme-icon", "sme-icon-clear", "sme-icon-size-xxs"]], template: function TagsFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { tagSplitCharacter: "tagSplitCharacter", textButton: "textButton", compact: "compact", suggestions: "suggestions" }, features: [ɵɵInheritDefinitionFeature], attrs: _c1$j, decls: 14, vars: 15, consts: [[3, "formField"], [1, "sme-tags-input", "sme-focus-zone"], ["class", "sme-tag", 4, "ngFor", "ngForOf"], [1, "sme-tag"], [1, "sme-screen-reader", 3, "id"], ["type", "text", "autocomplete", "off", "data-uta-id", "tag-add-input", 1, "sme-tag-input", 3, "disabled", "ngModel", "ngModelChange", "keydown.enter", "blur", "focus", "keypress"], ["newTagInput", ""], [3, "id"], [4, "ngFor", "ngForOf"], ["type", "button", "role", "button", "data-uta-id", "tag-add-button", 1, "sme-button-trigger", "sme-tag-button", "sme-button-auto-width", "sme-tag-button-add", 3, "click"], [1, "sme-icon", "sme-icon-add", "sme-icon-size-xxs"], [4, "ngIf"], [3, "alert"], [1, "sme-tag-content"], ["type", "button", "role", "button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-tag-button", "sme-tag-button-delete", 3, "title", "click"], [1, "sme-icon", "sme-icon-clear", "sme-icon-size-xxs"]], template: function TagsFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵelementStart(0, "sme-form-field-layout", 0);
         ɵɵelementStart(1, "div", 1);
         ɵɵtemplate(2, TagsFormFieldComponent_div_2_Template, 7, 9, "div", 2);
@@ -23736,14 +23923,16 @@ class DataTableColumnComponent {
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.bodyTemplate = _t.first);
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.bodyReadTemplate = _t.first);
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.bodyEditTemplate = _t.first);
-    } }, inputs: { field: "field", header: "header", sortable: "sortable", width: "width", hidden: "hidden", getTooltipHandler: "getTooltipHandler", compareFunction: "compareFunction", filterOverridingFunction: "filterOverridingFunction", selectionMode: "selectionMode", styleClass: "styleClass", searchable: "searchable", queryEditorType: "queryEditorType", queryEditorOptions: "queryEditorOptions", queryEditorEqualIsContain: "queryEditorEqualIsContain" }, decls: 0, vars: 0, template: function DataTableColumnComponent_Template(rf, ctx) { }, encapsulation: 2 });
+    } }, inputs: { utaId: "utaId", field: "field", header: "header", sortable: "sortable", width: "width", hidden: "hidden", getTooltipHandler: "getTooltipHandler", compareFunction: "compareFunction", filterOverridingFunction: "filterOverridingFunction", selectionMode: "selectionMode", styleClass: "styleClass", searchable: "searchable", queryEditorType: "queryEditorType", queryEditorOptions: "queryEditorOptions", queryEditorEqualIsContain: "queryEditorEqualIsContain" }, decls: 0, vars: 0, template: function DataTableColumnComponent_Template(rf, ctx) { }, encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(DataTableColumnComponent, [{
         type: Component,
         args: [{
                 selector: 'sme-data-table-column:not([type]), sme-tree-table-column:not([type])',
                 template: ''
             }]
-    }], null, { field: [{
+    }], null, { utaId: [{
+            type: Input
+        }], field: [{
             type: Input
         }], header: [{
             type: Input
@@ -24213,8 +24402,8 @@ function DataTableComponent_div_7_Template(rf, ctx) { if (rf & 1) {
     const colIndex_r19 = ctx.index;
     const ctx_r3 = ɵɵnextContext();
     ɵɵclassMapInterpolate1("sme-table-caption sme-table-column-header sme-position-flex-auto ", column_r18.styleClass, "");
-    ɵɵproperty("ngStyle", ɵɵpureFunction1(9, _c13, column_r18.width));
-    ɵɵattribute("field", column_r18.field);
+    ɵɵproperty("ngStyle", ɵɵpureFunction1(11, _c13, column_r18.width));
+    ɵɵattribute("field", column_r18.field)("data-uta-id", column_r18.utaId)("column-index", colIndex_r19);
     ɵɵadvance(1);
     ɵɵproperty("ngIf", column_r18.sortable && column_r18.sortable != "false" && ctx_r3.showHeader);
     ɵɵadvance(1);
@@ -24926,8 +25115,8 @@ function TreeTableComponent_div_7_Template(rf, ctx) { if (rf & 1) {
     const colIndex_r19 = ctx.index;
     const ctx_r3 = ɵɵnextContext();
     ɵɵclassMapInterpolate1("sme-table-caption sme-table-column-header sme-position-flex-auto ", column_r18.styleClass, "");
-    ɵɵproperty("ngStyle", ɵɵpureFunction1(9, _c13, column_r18.width));
-    ɵɵattribute("field", column_r18.field);
+    ɵɵproperty("ngStyle", ɵɵpureFunction1(11, _c13, column_r18.width));
+    ɵɵattribute("field", column_r18.field)("data-uta-id", column_r18.utaId)("column-index", colIndex_r19);
     ɵɵadvance(1);
     ɵɵproperty("ngIf", column_r18.sortable && column_r18.sortable != "false" && ctx_r3.showHeader);
     ɵɵadvance(1);
@@ -27111,6 +27300,13 @@ class DataTableComponent extends CoreBaseComponent {
     getNoRecordsMessage() {
         return this.noRecordMessage || this.strings.MsftSmeShell.Angular.DataTable.NoRecordsFound;
     }
+    /**
+     * It determines whether to, or not to show the No-Records Message.
+     */
+    showNoRecordsMessage() {
+        return (this.renderedItems.length === 0 && !this.lazyLoad) || !this.isColumnWidthCalculated ||
+            (this.lazyLoad && this.items && this.items.length === 0);
+    }
     /**
      * It handles the behavior that when a group toggle is clicked.
      */
@@ -27513,7 +27709,7 @@ class DataTableComponent extends CoreBaseComponent {
         return this.items && this.items.length || undefined;
     }
     set virtualCount(value) {
-        if (value) {
+        if (value >= 0) {
             this.items = Array(value);
             for (let i = 0; i < value; i++) {
                 this.items[i] = null;
@@ -27527,7 +27723,7 @@ class DataTableComponent extends CoreBaseComponent {
      * An example of path is "location.zipCode".
      */
     resolveObjectPath(obj, path) {
-        if (path) {
+        if (obj && path) {
             const pathSegments = path.split('.');
             if (pathSegments.length === 1) {
                 return obj[path];
@@ -28158,19 +28354,6 @@ class DataTableComponent extends CoreBaseComponent {
         if (this.isComponentInitialized && this.renderedItems) {
             // Scroll container is the div to render the view port of the data table and to provide the scroll bar.
             const scrollContainerElement = this.scrollContainerElement.nativeElement;
-            // Scroll body is the div to represent the actual data container.
-            // Its height is the height needed by all the data table items.
-            // When the list is long, this div can be very high and triggers the scroll container to show the scroll bar.
-            const scrollBodyElement = this.scrollBodyElement.nativeElement;
-            // Scroll data element is the div to show the displayed list items in and below the view port.
-            // When the scrolling is happening, we always adjust the top of this div to make sure it remains in the view port.
-            const scrollDataElement = this.scrollDataElement.nativeElement;
-            // "scroll above data" element is the div show the list items above the view port.
-            // We need to render this "above" data seperately
-            // then it's easy for us to find the "top" of the displayed list item in the view port.
-            // Note: the "scroll below data" is rendered in Scroll data element because we don't need to calculate the "top" for it
-            // since anyway it just follow the displayed list items in the view port.
-            const scrollAboveDataElement = this.scrollAboveDataElement.nativeElement;
             // Calculates how many items can be rendered in the view port.
             this.renderedItemLengthInViewPort = this.scrollable
                 ? Math.min(this.renderedItems.length, scrollContainerElement.offsetHeight / this.rowHeight)
@@ -29151,7 +29334,7 @@ DataTableComponent.pxConverter = new PxConverter();
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.emptyMessageElement = _t.first);
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.lastFocusableShadowElement = _t.first);
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.dataTableTemplateLoaderComponents = _t);
-    } }, inputs: { isBusy: "isBusy", enableRightClickSelect: "enableRightClickSelect", loadingMessage: "loadingMessage", noRecordMessage: "noRecordMessage", editable: "editable", expandTreeNodeOnChecked: "expandTreeNodeOnChecked", isAllEditableRowsVisible: "isAllEditableRowsVisible", scrollableHorizontal: "scrollableHorizontal", lazyLoad: "lazyLoad", rememberTreeNodeToggle: "rememberTreeNodeToggle", rememberSelection: "rememberSelection", preventEnterKeyForDefaultAction: "preventEnterKeyForDefaultAction", getItemIdentityFunction: "getItemIdentityFunction", disableNaturalSort: "disableNaturalSort", shouldScrollToSelectionAfterSorting: "shouldScrollToSelectionAfterSorting", globalFilter: "globalFilter", caseSensitiveFilter: "caseSensitiveFilter", showAsTree: "showAsTree", editableNewDataItem: "editableNewDataItem", items: "items", selection: "selection", selectionMode: "selectionMode", defaultSortColumn: "defaultSortColumn", defaultSortMode: "defaultSortMode", groupColumn: "groupColumn", groupSortMode: "groupSortMode", useGroupToggle: "useGroupToggle", showHeader: "showHeader", tableAriaLabelledBy: "tableAriaLabelledBy", tableAriaLabel: "tableAriaLabel", showGrid: "showGrid", showAllItemCheckbox: "showAllItemCheckbox", selectAndCheck: "selectAndCheck", rowHeight: "rowHeight", linkParentChildrenSelections: "linkParentChildrenSelections", selectItemWhenNavigatingWithKeyboard: "selectItemWhenNavigatingWithKeyboard", showLeftMargin: "showLeftMargin", scrollable: "scrollable", disableUIVirtualization: "disableUIVirtualization", selectable: "selectable", editableAutoNewRow: "editableAutoNewRow", defaultGroupToggleExpanded: "defaultGroupToggleExpanded", autoRowHeight: "autoRowHeight", virtualCount: "virtualCount" }, outputs: { onChangesetUpdated: "onChangesetUpdated", changesetUpdated: "changesetUpdated", selectionChange: "selectionChange", onRowDblclick: "onRowDblclick", rowDblclick: "rowDblclick", onGroupToggleClicked: "onGroupToggleClicked", groupToggleClick: "groupToggleClick", onNewEditableRowAdded: "onNewEditableRowAdded", editableRowAdded: "editableRowAdded", renderedItemsChange: "renderedItemsChange", lazyLoadingData: "lazyLoadingData", onNodeExpand: "onNodeExpand", nodeExpanded: "nodeExpanded", onNodeCollapsed: "onNodeCollapsed", nodeCollapsed: "nodeCollapsed", onNodeSelect: "onNodeSelect", nodeSelected: "nodeSelected", itemsChange: "itemsChange", onFilter: "onFilter", filter: "filter", doCustomSort: "doCustomSort", onRowSelect: "onRowSelect", rowSelected: "rowSelected", onRowUnselect: "onRowUnselect", rowUnselected: "rowUnselected" }, features: [ɵɵInheritDefinitionFeature], decls: 30, vars: 45, consts: [["role", "presentation", 1, "sme-table-header", "sme-focus-zone", "sme-data-table-transition"], ["header", ""], ["role", "rowgroup", 1, "sme-table", "sme-table-virtualized"], ["headerTable", ""], ["role", "row", 1, "sme-table-row", "sme-arrange-stack-h", "sme-position-flex-auto", 3, "keydown"], [1, "sme-table-caption"], ["class", "sme-table-checkbox sme-table-header-checkbox", "role", "presentation", 4, "ngIf"], ["role", "presentation", 3, "ngStyle", "class", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "sme-focus-zone", "sme-table-container", "sme-data-table-transition"], ["content", ""], ["role", "rowgroup", 1, "sme-table-scroll-container", "sme-layout-absolute", "sme-position-inset-none", 3, "ngClass"], ["scrollContainer", ""], ["role", "row", "class", "sme-table-row sme-table-row-placeholder", "tabindex", "0", 4, "ngIf"], ["role", "presentation", 1, "sme-layout-relative", "sme-position-stretch-h", "sme-arrange-overflow-hide"], ["scrollBody", ""], ["sme-lint-disable", "", 1, "sme-table", "sme-table-scrollable", "sme-table-virtualized", 3, "ngStyle"], ["scrollAboveData", ""], ["class", "sme-table-row sme-table-row-data sme-table-row-selectable", 3, "sme-table-row-active", "sme-table-row-selected", "sme-table-group-item", "sme-table-group-header", "sme-checked", 4, "ngFor", "ngForOf"], ["sme-lint-disable", "", "role", "presentation", 1, "sme-table", "sme-table-scrollable", 3, "ngStyle"], ["scrollData", ""], ["class", "sme-table-row sme-table-row-data sme-table-row-selectable", "role", "row", 3, "sme-table-row-active", "sme-table-row-selected", "sme-table-group-item", "sme-table-group-header", "sme-checked", "sme-table-row-editable", "sme-has-validation-error", "sme-data-table-row-new-item", "keydown", "keyup", "contextmenu", "click", "dblclick", "focus", "focusin", "focusout", "mouseenter", "mouseleave", 4, "ngFor", "ngForOf"], [1, "sme-table-row"], ["tempRow", ""], ["tabindex", "0", 1, "sme-table-td"], [1, "sme-table-cell"], ["class", "sme-focus-zone", "data-sme-last-focusable-shadow-element", "", "tabindex", "0", 3, "focus", 4, "ngIf"], ["class", "sme-layout-absolute sme-position-inset-none", 4, "ngIf"], [1, "sme-width-xxs", "sme-layout-absolute", "sme-position-stretch-v", "sme-background-color-base-80", "sme-layer-flyout", "sme-layout-none"], ["resizerIndicator", ""], ["role", "presentation", 1, "sme-table-checkbox", "sme-table-header-checkbox"], ["sme-lint-disable-self", "", "type", "checkbox", 3, "checked", "change"], ["role", "presentation"], ["role", "presentation", 3, "ngStyle"], ["class", "sme-table-header-cell sme-focus-zone", "role", "columnheader", "aria-live", "polite", "tabindex", "0", 3, "title", "click", 4, "ngIf"], ["class", "sme-table-header-cell", "role", "columnheader", 3, "title", 4, "ngIf"], ["class", "sme-table-header-cell", "role", "columnheader", 4, "ngIf"], ["tabindex", "0", "resizerHostSelector", "div.sme-table-header", "orientation", "left", "class", "sme-focus-zone", 3, "visibleToScreenReader", "showResizerCover", "resized", "resizing", 4, "ngIf"], ["role", "columnheader", "aria-live", "polite", "tabindex", "0", 1, "sme-table-header-cell", "sme-focus-zone", 3, "title", "click"], [1, "sme-icon", "sme-margin-left-xxs", 3, "ngClass"], ["role", "columnheader", 1, "sme-table-header-cell", 3, "title"], ["role", "columnheader", 1, "sme-table-header-cell"], ["tabindex", "0", "resizerHostSelector", "div.sme-table-header", "orientation", "left", 1, "sme-focus-zone", 3, "visibleToScreenReader", "showResizerCover", "resized", "resizing"], ["role", "row", "tabindex", "0", 1, "sme-table-row", "sme-table-row-placeholder"], ["emptyMessage", ""], [3, "message", 4, "ngIf"], [1, "sme-table-cell", "sme-table-cell-placeholder"], ["role", "cell", 1, "sme-table-cell"], [3, "message"], [1, "sme-table-row", "sme-table-row-data", "sme-table-row-selectable"], [1, "sme-arrange-stack-h"], [1, "sme-table-td", "sme-position-flex-auto"], ["class", "sme-table-checkbox", "role", "presentation", 4, "ngIf"], [3, "ngClass", "ngStyle", "class", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "sme-table-checkbox"], ["type", "checkbox", 3, "checked"], [3, "ngClass", "ngStyle"], ["class", "sme-screen-reader sme-screen-reader-disable-copy", 4, "ngIf"], ["class", "sme-table-cell", 3, "click", 4, "ngIf"], ["class", "sme-table-expander-cell", 3, "ngStyle", "ngClass", 4, "ngIf"], ["class", "sme-table-expander-cell", 3, "ngStyle", 4, "ngIf"], ["class", "sme-table-cell sme-table-checkbox-container", "role", "presentation", 4, "ngIf"], [4, "ngIf"], [1, "sme-screen-reader", "sme-screen-reader-disable-copy"], [1, "sme-table-cell", 3, "click"], ["class", "sme-icon sme-icon-size-xxs sme-margin-right-xxs", 3, "ngClass", 4, "ngIf"], [1, "sme-icon", "sme-icon-size-xxs", "sme-margin-right-xxs", 3, "ngClass"], [3, "template", "data"], [1, "sme-table-expander-cell", 3, "ngStyle", "ngClass"], ["role", "button", 1, "sme-icon", "sme-icon-size-xxs", 3, "ngClass", "click"], [1, "sme-table-expander-cell-placeholder"], [1, "sme-table-expander-cell", 3, "ngStyle"], ["size", "extra-small", 3, "inline", "isBackgroundTransparent"], ["role", "presentation", 1, "sme-table-cell", "sme-table-checkbox-container"], ["type", "checkbox", 3, "checked", "change"], ["class", "sme-table-cell", 3, "sme-table-cell-full-height", 4, "ngIf"], ["class", "sme-table-cell", 3, "sme-table-cell-full-height", "sme-table-cell-height-auto", 4, "ngIf"], [3, "template", "data", "rowIndex", 4, "ngIf"], [3, "template", "data", "rowIndex"], ["role", "row", 1, "sme-table-row", "sme-table-row-data", "sme-table-row-selectable", 3, "keydown", "keyup", "contextmenu", "click", "dblclick", "focus", "focusin", "focusout", "mouseenter", "mouseleave"], ["role", "presentation", 1, "sme-arrange-stack-h"], ["class", "sme-table-cell sme-table-checkbox-container", "role", "presentation", 3, "sme-table-cell-full-height", 4, "ngIf"], ["class", "sme-table-row-validation", 4, "ngIf"], ["class", "sme-table-cell", 3, "id", "click", 4, "ngIf"], [1, "sme-table-cell", 3, "id", "click"], ["class", "sme-table-cell", 3, "sme-table-cell-full-height", "id", 4, "ngIf"], ["class", "sme-table-cell", 3, "sme-table-cell-height-auto", "sme-table-cell-full-height", "id", 4, "ngIf"], [1, "sme-table-cell", 3, "id"], ["class", "sme-table-cell", 4, "ngIf"], [3, "renderedItem", "template", "data", "rowIndex", 4, "ngIf"], [3, "renderedItem", "template", "data", "rowIndex"], ["class", "sme-table-cell sme-table-edit-container", 4, "ngIf"], [1, "sme-table-cell", "sme-table-edit-container"], [3, "template", "field", "data", "rowIndex", "renderedItem", "validationAlert", "dataChanged", 4, "ngIf"], [3, "template", "field", "data", "rowIndex", "renderedItem", "validationAlert", "dataChanged"], [1, "sme-table-row-validation"], ["role", "presentation", 1, "sme-table-cell"], [4, "ngFor", "ngForOf"], [3, "alert"], ["data-sme-last-focusable-shadow-element", "", "tabindex", "0", 1, "sme-focus-zone", 3, "focus"], ["lastFocusableShadowElement", ""], [1, "sme-layout-absolute", "sme-position-inset-none"], [3, "isBackgroundTransparent"]], template: function DataTableComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { isBusy: "isBusy", enableRightClickSelect: "enableRightClickSelect", loadingMessage: "loadingMessage", noRecordMessage: "noRecordMessage", editable: "editable", expandTreeNodeOnChecked: "expandTreeNodeOnChecked", isAllEditableRowsVisible: "isAllEditableRowsVisible", scrollableHorizontal: "scrollableHorizontal", lazyLoad: "lazyLoad", rememberTreeNodeToggle: "rememberTreeNodeToggle", rememberSelection: "rememberSelection", preventEnterKeyForDefaultAction: "preventEnterKeyForDefaultAction", getItemIdentityFunction: "getItemIdentityFunction", disableNaturalSort: "disableNaturalSort", shouldScrollToSelectionAfterSorting: "shouldScrollToSelectionAfterSorting", globalFilter: "globalFilter", caseSensitiveFilter: "caseSensitiveFilter", showAsTree: "showAsTree", editableNewDataItem: "editableNewDataItem", items: "items", selection: "selection", selectionMode: "selectionMode", defaultSortColumn: "defaultSortColumn", defaultSortMode: "defaultSortMode", groupColumn: "groupColumn", groupSortMode: "groupSortMode", useGroupToggle: "useGroupToggle", showHeader: "showHeader", tableAriaLabelledBy: "tableAriaLabelledBy", tableAriaLabel: "tableAriaLabel", showGrid: "showGrid", showAllItemCheckbox: "showAllItemCheckbox", selectAndCheck: "selectAndCheck", rowHeight: "rowHeight", linkParentChildrenSelections: "linkParentChildrenSelections", selectItemWhenNavigatingWithKeyboard: "selectItemWhenNavigatingWithKeyboard", showLeftMargin: "showLeftMargin", scrollable: "scrollable", disableUIVirtualization: "disableUIVirtualization", selectable: "selectable", editableAutoNewRow: "editableAutoNewRow", defaultGroupToggleExpanded: "defaultGroupToggleExpanded", autoRowHeight: "autoRowHeight", virtualCount: "virtualCount" }, outputs: { onChangesetUpdated: "onChangesetUpdated", changesetUpdated: "changesetUpdated", selectionChange: "selectionChange", onRowDblclick: "onRowDblclick", rowDblclick: "rowDblclick", onGroupToggleClicked: "onGroupToggleClicked", groupToggleClick: "groupToggleClick", onNewEditableRowAdded: "onNewEditableRowAdded", editableRowAdded: "editableRowAdded", renderedItemsChange: "renderedItemsChange", lazyLoadingData: "lazyLoadingData", onNodeExpand: "onNodeExpand", nodeExpanded: "nodeExpanded", onNodeCollapsed: "onNodeCollapsed", nodeCollapsed: "nodeCollapsed", onNodeSelect: "onNodeSelect", nodeSelected: "nodeSelected", itemsChange: "itemsChange", onFilter: "onFilter", filter: "filter", doCustomSort: "doCustomSort", onRowSelect: "onRowSelect", rowSelected: "rowSelected", onRowUnselect: "onRowUnselect", rowUnselected: "rowUnselected" }, features: [ɵɵInheritDefinitionFeature], decls: 30, vars: 45, consts: [["role", "presentation", 1, "sme-table-header", "sme-focus-zone", "sme-data-table-transition"], ["header", ""], ["role", "rowgroup", 1, "sme-table", "sme-table-virtualized"], ["headerTable", ""], ["role", "row", 1, "sme-table-row", "sme-arrange-stack-h", "sme-position-flex-auto", 3, "keydown"], ["data-uta-id", "checkboxColumn", 1, "sme-table-caption"], ["class", "sme-table-checkbox sme-table-header-checkbox", "role", "presentation", 4, "ngIf"], ["role", "presentation", 3, "ngStyle", "class", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "sme-focus-zone", "sme-table-container", "sme-data-table-transition"], ["content", ""], ["role", "rowgroup", 1, "sme-table-scroll-container", "sme-layout-absolute", "sme-position-inset-none", 3, "ngClass"], ["scrollContainer", ""], ["role", "row", "class", "sme-table-row sme-table-row-placeholder", "tabindex", "0", "data-uta-id", "empty-table-message", 4, "ngIf"], ["role", "presentation", 1, "sme-layout-relative", "sme-position-stretch-h", "sme-arrange-overflow-hide"], ["scrollBody", ""], ["sme-lint-disable", "", 1, "sme-table", "sme-table-scrollable", "sme-table-virtualized", 3, "ngStyle"], ["scrollAboveData", ""], ["class", "sme-table-row sme-table-row-data sme-table-row-selectable", 3, "sme-table-row-active", "sme-table-row-selected", "sme-table-group-item", "sme-table-group-header", "sme-checked", 4, "ngFor", "ngForOf"], ["sme-lint-disable", "", "role", "presentation", 1, "sme-table", "sme-table-scrollable", 3, "ngStyle"], ["scrollData", ""], ["class", "sme-table-row sme-table-row-data sme-table-row-selectable", "role", "row", 3, "sme-table-row-active", "sme-table-row-selected", "sme-table-group-item", "sme-table-group-header", "sme-checked", "sme-table-row-editable", "sme-has-validation-error", "sme-data-table-row-new-item", "keydown", "keyup", "contextmenu", "click", "dblclick", "focus", "focusin", "focusout", "mouseenter", "mouseleave", 4, "ngFor", "ngForOf"], [1, "sme-table-row"], ["tempRow", ""], ["tabindex", "0", 1, "sme-table-td"], [1, "sme-table-cell"], ["class", "sme-focus-zone", "data-sme-last-focusable-shadow-element", "", "tabindex", "0", 3, "focus", 4, "ngIf"], ["class", "sme-layout-absolute sme-position-inset-none", 4, "ngIf"], [1, "sme-width-xxs", "sme-layout-absolute", "sme-position-stretch-v", "sme-background-color-base-80", "sme-layer-flyout", "sme-layout-none"], ["resizerIndicator", ""], ["role", "presentation", 1, "sme-table-checkbox", "sme-table-header-checkbox"], ["sme-lint-disable-self", "", "type", "checkbox", 3, "checked", "change"], ["role", "presentation"], ["role", "presentation", 3, "ngStyle"], ["class", "sme-table-header-cell sme-focus-zone", "role", "columnheader", "aria-live", "polite", "tabindex", "0", 3, "title", "click", 4, "ngIf"], ["class", "sme-table-header-cell", "role", "columnheader", 3, "title", 4, "ngIf"], ["class", "sme-table-header-cell", "role", "columnheader", 4, "ngIf"], ["tabindex", "0", "resizerHostSelector", "div.sme-table-header", "orientation", "left", "class", "sme-focus-zone", 3, "visibleToScreenReader", "showResizerCover", "resized", "resizing", 4, "ngIf"], ["role", "columnheader", "aria-live", "polite", "tabindex", "0", 1, "sme-table-header-cell", "sme-focus-zone", 3, "title", "click"], [1, "sme-icon", "sme-margin-left-xxs", 3, "ngClass"], ["role", "columnheader", 1, "sme-table-header-cell", 3, "title"], ["role", "columnheader", 1, "sme-table-header-cell"], ["tabindex", "0", "resizerHostSelector", "div.sme-table-header", "orientation", "left", 1, "sme-focus-zone", 3, "visibleToScreenReader", "showResizerCover", "resized", "resizing"], ["role", "row", "tabindex", "0", "data-uta-id", "empty-table-message", 1, "sme-table-row", "sme-table-row-placeholder"], ["emptyMessage", ""], [3, "message", 4, "ngIf"], [1, "sme-table-cell", "sme-table-cell-placeholder"], ["role", "cell", 1, "sme-table-cell"], [3, "message"], [1, "sme-table-row", "sme-table-row-data", "sme-table-row-selectable"], [1, "sme-arrange-stack-h"], [1, "sme-table-td", "sme-position-flex-auto"], ["class", "sme-table-checkbox", "role", "presentation", 4, "ngIf"], [3, "ngClass", "ngStyle", "class", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "sme-table-checkbox"], ["type", "checkbox", 3, "checked"], [3, "ngClass", "ngStyle"], ["class", "sme-screen-reader sme-screen-reader-disable-copy", 4, "ngIf"], ["class", "sme-table-cell", 3, "click", 4, "ngIf"], ["class", "sme-table-expander-cell", 3, "ngStyle", "ngClass", 4, "ngIf"], ["class", "sme-table-expander-cell", 3, "ngStyle", 4, "ngIf"], ["class", "sme-table-cell sme-table-checkbox-container", "role", "presentation", 4, "ngIf"], [4, "ngIf"], [1, "sme-screen-reader", "sme-screen-reader-disable-copy"], [1, "sme-table-cell", 3, "click"], ["class", "sme-icon sme-icon-size-xxs sme-margin-right-xxs", 3, "ngClass", 4, "ngIf"], [1, "sme-icon", "sme-icon-size-xxs", "sme-margin-right-xxs", 3, "ngClass"], [3, "template", "data"], [1, "sme-table-expander-cell", 3, "ngStyle", "ngClass"], ["role", "button", 1, "sme-icon", "sme-icon-size-xxs", 3, "ngClass", "click"], [1, "sme-table-expander-cell-placeholder"], [1, "sme-table-expander-cell", 3, "ngStyle"], ["size", "extra-small", 3, "inline", "isBackgroundTransparent"], ["role", "presentation", 1, "sme-table-cell", "sme-table-checkbox-container"], ["type", "checkbox", 3, "checked", "change"], ["class", "sme-table-cell", 3, "sme-table-cell-full-height", 4, "ngIf"], ["class", "sme-table-cell", 3, "sme-table-cell-full-height", "sme-table-cell-height-auto", 4, "ngIf"], [3, "template", "data", "rowIndex", 4, "ngIf"], [3, "template", "data", "rowIndex"], ["role", "row", 1, "sme-table-row", "sme-table-row-data", "sme-table-row-selectable", 3, "keydown", "keyup", "contextmenu", "click", "dblclick", "focus", "focusin", "focusout", "mouseenter", "mouseleave"], ["role", "presentation", 1, "sme-arrange-stack-h"], ["class", "sme-table-cell sme-table-checkbox-container", "role", "presentation", 3, "sme-table-cell-full-height", 4, "ngIf"], ["class", "sme-table-row-validation", 4, "ngIf"], ["class", "sme-table-cell", 3, "id", "click", 4, "ngIf"], [1, "sme-table-cell", 3, "id", "click"], ["class", "sme-table-cell", 3, "sme-table-cell-full-height", "id", 4, "ngIf"], ["class", "sme-table-cell", 3, "sme-table-cell-height-auto", "sme-table-cell-full-height", "id", 4, "ngIf"], [1, "sme-table-cell", 3, "id"], ["class", "sme-table-cell", 4, "ngIf"], [3, "renderedItem", "template", "data", "rowIndex", 4, "ngIf"], [3, "renderedItem", "template", "data", "rowIndex"], ["class", "sme-table-cell sme-table-edit-container", 4, "ngIf"], [1, "sme-table-cell", "sme-table-edit-container"], [3, "template", "field", "data", "rowIndex", "renderedItem", "validationAlert", "dataChanged", 4, "ngIf"], [3, "template", "field", "data", "rowIndex", "renderedItem", "validationAlert", "dataChanged"], [1, "sme-table-row-validation"], ["role", "presentation", 1, "sme-table-cell"], [4, "ngFor", "ngForOf"], [3, "alert"], ["data-sme-last-focusable-shadow-element", "", "tabindex", "0", 1, "sme-focus-zone", 3, "focus"], ["lastFocusableShadowElement", ""], [1, "sme-layout-absolute", "sme-position-inset-none"], [3, "isBackgroundTransparent"]], template: function DataTableComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵelementStart(0, "div", 0, 1);
         ɵɵelementStart(2, "div", 2, 3);
         ɵɵelementStart(4, "div", 4);
@@ -29159,7 +29342,7 @@ DataTableComponent.pxConverter = new PxConverter();
         ɵɵelementStart(5, "div", 5);
         ɵɵtemplate(6, DataTableComponent_div_6_Template, 3, 3, "div", 6);
         ɵɵelementEnd();
-        ɵɵtemplate(7, DataTableComponent_div_7_Template, 5, 11, "div", 7);
+        ɵɵtemplate(7, DataTableComponent_div_7_Template, 5, 13, "div", 7);
         ɵɵelementEnd();
         ɵɵelementEnd();
         ɵɵelementEnd();
@@ -29199,7 +29382,7 @@ DataTableComponent.pxConverter = new PxConverter();
         ɵɵadvance(2);
         ɵɵproperty("ngClass", ɵɵpureFunction2(38, _c18, ctx.scrollable, ctx.shouldScroll));
         ɵɵadvance(2);
-        ɵɵproperty("ngIf", ctx.renderedItems.length === 0 && !ctx.lazyLoad || !ctx.isColumnWidthCalculated);
+        ɵɵproperty("ngIf", ctx.showNoRecordsMessage());
         ɵɵadvance(3);
         ɵɵproperty("ngStyle", ɵɵpureFunction1(41, _c19, ctx.scrollAboveDataStyleTop));
         ɵɵattribute("aria-hidden", true);
@@ -29459,7 +29642,7 @@ class TreeTableComponent extends DataTableComponent {
     }
 }
 /** @nocollapse */ TreeTableComponent.ɵfac = function TreeTableComponent_Factory(t) { return new (t || TreeTableComponent)(ɵɵdirectiveInject(Injector)); };
-/** @nocollapse */ TreeTableComponent.ɵcmp = ɵɵdefineComponent({ type: TreeTableComponent, selectors: [["sme-tree-table"]], features: [ɵɵInheritDefinitionFeature], decls: 30, vars: 45, consts: [["role", "presentation", 1, "sme-table-header", "sme-focus-zone", "sme-data-table-transition"], ["header", ""], ["role", "rowgroup", 1, "sme-table", "sme-table-virtualized"], ["headerTable", ""], ["role", "row", 1, "sme-table-row", "sme-arrange-stack-h", "sme-position-flex-auto", 3, "keydown"], [1, "sme-table-caption"], ["class", "sme-table-checkbox sme-table-header-checkbox", "role", "presentation", 4, "ngIf"], ["role", "presentation", 3, "ngStyle", "class", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "sme-focus-zone", "sme-table-container", "sme-data-table-transition"], ["content", ""], ["role", "rowgroup", 1, "sme-table-scroll-container", "sme-layout-absolute", "sme-position-inset-none", 3, "ngClass"], ["scrollContainer", ""], ["role", "row", "class", "sme-table-row sme-table-row-placeholder", "tabindex", "0", 4, "ngIf"], ["role", "presentation", 1, "sme-layout-relative", "sme-position-stretch-h", "sme-arrange-overflow-hide"], ["scrollBody", ""], ["sme-lint-disable", "", 1, "sme-table", "sme-table-scrollable", "sme-table-virtualized", 3, "ngStyle"], ["scrollAboveData", ""], ["class", "sme-table-row sme-table-row-data sme-table-row-selectable", 3, "sme-table-row-active", "sme-table-row-selected", "sme-table-group-item", "sme-table-group-header", "sme-checked", 4, "ngFor", "ngForOf"], ["sme-lint-disable", "", "role", "presentation", 1, "sme-table", "sme-table-scrollable", 3, "ngStyle"], ["scrollData", ""], ["class", "sme-table-row sme-table-row-data sme-table-row-selectable", "role", "row", 3, "sme-table-row-active", "sme-table-row-selected", "sme-table-group-item", "sme-table-group-header", "sme-checked", "sme-table-row-editable", "sme-has-validation-error", "sme-data-table-row-new-item", "keydown", "keyup", "contextmenu", "click", "dblclick", "focus", "focusin", "focusout", "mouseenter", "mouseleave", 4, "ngFor", "ngForOf"], [1, "sme-table-row"], ["tempRow", ""], ["tabindex", "0", 1, "sme-table-td"], [1, "sme-table-cell"], ["class", "sme-focus-zone", "data-sme-last-focusable-shadow-element", "", "tabindex", "0", 3, "focus", 4, "ngIf"], ["class", "sme-layout-absolute sme-position-inset-none", 4, "ngIf"], [1, "sme-width-xxs", "sme-layout-absolute", "sme-position-stretch-v", "sme-background-color-base-80", "sme-layer-flyout", "sme-layout-none"], ["resizerIndicator", ""], ["role", "presentation", 1, "sme-table-checkbox", "sme-table-header-checkbox"], ["sme-lint-disable-self", "", "type", "checkbox", 3, "checked", "change"], ["role", "presentation"], ["role", "presentation", 3, "ngStyle"], ["class", "sme-table-header-cell sme-focus-zone", "role", "columnheader", "aria-live", "polite", "tabindex", "0", 3, "title", "click", 4, "ngIf"], ["class", "sme-table-header-cell", "role", "columnheader", 3, "title", 4, "ngIf"], ["class", "sme-table-header-cell", "role", "columnheader", 4, "ngIf"], ["tabindex", "0", "resizerHostSelector", "div.sme-table-header", "orientation", "left", "class", "sme-focus-zone", 3, "visibleToScreenReader", "showResizerCover", "resized", "resizing", 4, "ngIf"], ["role", "columnheader", "aria-live", "polite", "tabindex", "0", 1, "sme-table-header-cell", "sme-focus-zone", 3, "title", "click"], [1, "sme-icon", "sme-margin-left-xxs", 3, "ngClass"], ["role", "columnheader", 1, "sme-table-header-cell", 3, "title"], ["role", "columnheader", 1, "sme-table-header-cell"], ["tabindex", "0", "resizerHostSelector", "div.sme-table-header", "orientation", "left", 1, "sme-focus-zone", 3, "visibleToScreenReader", "showResizerCover", "resized", "resizing"], ["role", "row", "tabindex", "0", 1, "sme-table-row", "sme-table-row-placeholder"], ["emptyMessage", ""], [3, "message", 4, "ngIf"], [1, "sme-table-cell", "sme-table-cell-placeholder"], ["role", "cell", 1, "sme-table-cell"], [3, "message"], [1, "sme-table-row", "sme-table-row-data", "sme-table-row-selectable"], [1, "sme-arrange-stack-h"], [1, "sme-table-td", "sme-position-flex-auto"], ["class", "sme-table-checkbox", "role", "presentation", 4, "ngIf"], [3, "ngClass", "ngStyle", "class", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "sme-table-checkbox"], ["type", "checkbox", 3, "checked"], [3, "ngClass", "ngStyle"], ["class", "sme-screen-reader sme-screen-reader-disable-copy", 4, "ngIf"], ["class", "sme-table-cell", 3, "click", 4, "ngIf"], ["class", "sme-table-expander-cell", 3, "ngStyle", "ngClass", 4, "ngIf"], ["class", "sme-table-expander-cell", 3, "ngStyle", 4, "ngIf"], ["class", "sme-table-cell sme-table-checkbox-container", "role", "presentation", 4, "ngIf"], [4, "ngIf"], [1, "sme-screen-reader", "sme-screen-reader-disable-copy"], [1, "sme-table-cell", 3, "click"], ["class", "sme-icon sme-icon-size-xxs sme-margin-right-xxs", 3, "ngClass", 4, "ngIf"], [1, "sme-icon", "sme-icon-size-xxs", "sme-margin-right-xxs", 3, "ngClass"], [3, "template", "data"], [1, "sme-table-expander-cell", 3, "ngStyle", "ngClass"], ["role", "button", 1, "sme-icon", "sme-icon-size-xxs", 3, "ngClass", "click"], [1, "sme-table-expander-cell-placeholder"], [1, "sme-table-expander-cell", 3, "ngStyle"], ["size", "extra-small", 3, "inline", "isBackgroundTransparent"], ["role", "presentation", 1, "sme-table-cell", "sme-table-checkbox-container"], ["type", "checkbox", 3, "checked", "change"], ["class", "sme-table-cell", 3, "sme-table-cell-full-height", 4, "ngIf"], ["class", "sme-table-cell", 3, "sme-table-cell-full-height", "sme-table-cell-height-auto", 4, "ngIf"], [3, "template", "data", "rowIndex", 4, "ngIf"], [3, "template", "data", "rowIndex"], ["role", "row", 1, "sme-table-row", "sme-table-row-data", "sme-table-row-selectable", 3, "keydown", "keyup", "contextmenu", "click", "dblclick", "focus", "focusin", "focusout", "mouseenter", "mouseleave"], ["role", "presentation", 1, "sme-arrange-stack-h"], ["class", "sme-table-cell sme-table-checkbox-container", "role", "presentation", 3, "sme-table-cell-full-height", 4, "ngIf"], ["class", "sme-table-row-validation", 4, "ngIf"], ["class", "sme-table-cell", 3, "id", "click", 4, "ngIf"], [1, "sme-table-cell", 3, "id", "click"], ["class", "sme-table-cell", 3, "sme-table-cell-full-height", "id", 4, "ngIf"], ["class", "sme-table-cell", 3, "sme-table-cell-height-auto", "sme-table-cell-full-height", "id", 4, "ngIf"], [1, "sme-table-cell", 3, "id"], ["class", "sme-table-cell", 4, "ngIf"], [3, "renderedItem", "template", "data", "rowIndex", 4, "ngIf"], [3, "renderedItem", "template", "data", "rowIndex"], ["class", "sme-table-cell sme-table-edit-container", 4, "ngIf"], [1, "sme-table-cell", "sme-table-edit-container"], [3, "template", "field", "data", "rowIndex", "renderedItem", "validationAlert", "dataChanged", 4, "ngIf"], [3, "template", "field", "data", "rowIndex", "renderedItem", "validationAlert", "dataChanged"], [1, "sme-table-row-validation"], ["role", "presentation", 1, "sme-table-cell"], [4, "ngFor", "ngForOf"], [3, "alert"], ["data-sme-last-focusable-shadow-element", "", "tabindex", "0", 1, "sme-focus-zone", 3, "focus"], ["lastFocusableShadowElement", ""], [1, "sme-layout-absolute", "sme-position-inset-none"], [3, "isBackgroundTransparent"]], template: function TreeTableComponent_Template(rf, ctx) { if (rf & 1) {
+/** @nocollapse */ TreeTableComponent.ɵcmp = ɵɵdefineComponent({ type: TreeTableComponent, selectors: [["sme-tree-table"]], features: [ɵɵInheritDefinitionFeature], decls: 30, vars: 45, consts: [["role", "presentation", 1, "sme-table-header", "sme-focus-zone", "sme-data-table-transition"], ["header", ""], ["role", "rowgroup", 1, "sme-table", "sme-table-virtualized"], ["headerTable", ""], ["role", "row", 1, "sme-table-row", "sme-arrange-stack-h", "sme-position-flex-auto", 3, "keydown"], ["data-uta-id", "checkboxColumn", 1, "sme-table-caption"], ["class", "sme-table-checkbox sme-table-header-checkbox", "role", "presentation", 4, "ngIf"], ["role", "presentation", 3, "ngStyle", "class", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "sme-focus-zone", "sme-table-container", "sme-data-table-transition"], ["content", ""], ["role", "rowgroup", 1, "sme-table-scroll-container", "sme-layout-absolute", "sme-position-inset-none", 3, "ngClass"], ["scrollContainer", ""], ["role", "row", "class", "sme-table-row sme-table-row-placeholder", "tabindex", "0", "data-uta-id", "empty-table-message", 4, "ngIf"], ["role", "presentation", 1, "sme-layout-relative", "sme-position-stretch-h", "sme-arrange-overflow-hide"], ["scrollBody", ""], ["sme-lint-disable", "", 1, "sme-table", "sme-table-scrollable", "sme-table-virtualized", 3, "ngStyle"], ["scrollAboveData", ""], ["class", "sme-table-row sme-table-row-data sme-table-row-selectable", 3, "sme-table-row-active", "sme-table-row-selected", "sme-table-group-item", "sme-table-group-header", "sme-checked", 4, "ngFor", "ngForOf"], ["sme-lint-disable", "", "role", "presentation", 1, "sme-table", "sme-table-scrollable", 3, "ngStyle"], ["scrollData", ""], ["class", "sme-table-row sme-table-row-data sme-table-row-selectable", "role", "row", 3, "sme-table-row-active", "sme-table-row-selected", "sme-table-group-item", "sme-table-group-header", "sme-checked", "sme-table-row-editable", "sme-has-validation-error", "sme-data-table-row-new-item", "keydown", "keyup", "contextmenu", "click", "dblclick", "focus", "focusin", "focusout", "mouseenter", "mouseleave", 4, "ngFor", "ngForOf"], [1, "sme-table-row"], ["tempRow", ""], ["tabindex", "0", 1, "sme-table-td"], [1, "sme-table-cell"], ["class", "sme-focus-zone", "data-sme-last-focusable-shadow-element", "", "tabindex", "0", 3, "focus", 4, "ngIf"], ["class", "sme-layout-absolute sme-position-inset-none", 4, "ngIf"], [1, "sme-width-xxs", "sme-layout-absolute", "sme-position-stretch-v", "sme-background-color-base-80", "sme-layer-flyout", "sme-layout-none"], ["resizerIndicator", ""], ["role", "presentation", 1, "sme-table-checkbox", "sme-table-header-checkbox"], ["sme-lint-disable-self", "", "type", "checkbox", 3, "checked", "change"], ["role", "presentation"], ["role", "presentation", 3, "ngStyle"], ["class", "sme-table-header-cell sme-focus-zone", "role", "columnheader", "aria-live", "polite", "tabindex", "0", 3, "title", "click", 4, "ngIf"], ["class", "sme-table-header-cell", "role", "columnheader", 3, "title", 4, "ngIf"], ["class", "sme-table-header-cell", "role", "columnheader", 4, "ngIf"], ["tabindex", "0", "resizerHostSelector", "div.sme-table-header", "orientation", "left", "class", "sme-focus-zone", 3, "visibleToScreenReader", "showResizerCover", "resized", "resizing", 4, "ngIf"], ["role", "columnheader", "aria-live", "polite", "tabindex", "0", 1, "sme-table-header-cell", "sme-focus-zone", 3, "title", "click"], [1, "sme-icon", "sme-margin-left-xxs", 3, "ngClass"], ["role", "columnheader", 1, "sme-table-header-cell", 3, "title"], ["role", "columnheader", 1, "sme-table-header-cell"], ["tabindex", "0", "resizerHostSelector", "div.sme-table-header", "orientation", "left", 1, "sme-focus-zone", 3, "visibleToScreenReader", "showResizerCover", "resized", "resizing"], ["role", "row", "tabindex", "0", "data-uta-id", "empty-table-message", 1, "sme-table-row", "sme-table-row-placeholder"], ["emptyMessage", ""], [3, "message", 4, "ngIf"], [1, "sme-table-cell", "sme-table-cell-placeholder"], ["role", "cell", 1, "sme-table-cell"], [3, "message"], [1, "sme-table-row", "sme-table-row-data", "sme-table-row-selectable"], [1, "sme-arrange-stack-h"], [1, "sme-table-td", "sme-position-flex-auto"], ["class", "sme-table-checkbox", "role", "presentation", 4, "ngIf"], [3, "ngClass", "ngStyle", "class", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "sme-table-checkbox"], ["type", "checkbox", 3, "checked"], [3, "ngClass", "ngStyle"], ["class", "sme-screen-reader sme-screen-reader-disable-copy", 4, "ngIf"], ["class", "sme-table-cell", 3, "click", 4, "ngIf"], ["class", "sme-table-expander-cell", 3, "ngStyle", "ngClass", 4, "ngIf"], ["class", "sme-table-expander-cell", 3, "ngStyle", 4, "ngIf"], ["class", "sme-table-cell sme-table-checkbox-container", "role", "presentation", 4, "ngIf"], [4, "ngIf"], [1, "sme-screen-reader", "sme-screen-reader-disable-copy"], [1, "sme-table-cell", 3, "click"], ["class", "sme-icon sme-icon-size-xxs sme-margin-right-xxs", 3, "ngClass", 4, "ngIf"], [1, "sme-icon", "sme-icon-size-xxs", "sme-margin-right-xxs", 3, "ngClass"], [3, "template", "data"], [1, "sme-table-expander-cell", 3, "ngStyle", "ngClass"], ["role", "button", 1, "sme-icon", "sme-icon-size-xxs", 3, "ngClass", "click"], [1, "sme-table-expander-cell-placeholder"], [1, "sme-table-expander-cell", 3, "ngStyle"], ["size", "extra-small", 3, "inline", "isBackgroundTransparent"], ["role", "presentation", 1, "sme-table-cell", "sme-table-checkbox-container"], ["type", "checkbox", 3, "checked", "change"], ["class", "sme-table-cell", 3, "sme-table-cell-full-height", 4, "ngIf"], ["class", "sme-table-cell", 3, "sme-table-cell-full-height", "sme-table-cell-height-auto", 4, "ngIf"], [3, "template", "data", "rowIndex", 4, "ngIf"], [3, "template", "data", "rowIndex"], ["role", "row", 1, "sme-table-row", "sme-table-row-data", "sme-table-row-selectable", 3, "keydown", "keyup", "contextmenu", "click", "dblclick", "focus", "focusin", "focusout", "mouseenter", "mouseleave"], ["role", "presentation", 1, "sme-arrange-stack-h"], ["class", "sme-table-cell sme-table-checkbox-container", "role", "presentation", 3, "sme-table-cell-full-height", 4, "ngIf"], ["class", "sme-table-row-validation", 4, "ngIf"], ["class", "sme-table-cell", 3, "id", "click", 4, "ngIf"], [1, "sme-table-cell", 3, "id", "click"], ["class", "sme-table-cell", 3, "sme-table-cell-full-height", "id", 4, "ngIf"], ["class", "sme-table-cell", 3, "sme-table-cell-height-auto", "sme-table-cell-full-height", "id", 4, "ngIf"], [1, "sme-table-cell", 3, "id"], ["class", "sme-table-cell", 4, "ngIf"], [3, "renderedItem", "template", "data", "rowIndex", 4, "ngIf"], [3, "renderedItem", "template", "data", "rowIndex"], ["class", "sme-table-cell sme-table-edit-container", 4, "ngIf"], [1, "sme-table-cell", "sme-table-edit-container"], [3, "template", "field", "data", "rowIndex", "renderedItem", "validationAlert", "dataChanged", 4, "ngIf"], [3, "template", "field", "data", "rowIndex", "renderedItem", "validationAlert", "dataChanged"], [1, "sme-table-row-validation"], ["role", "presentation", 1, "sme-table-cell"], [4, "ngFor", "ngForOf"], [3, "alert"], ["data-sme-last-focusable-shadow-element", "", "tabindex", "0", 1, "sme-focus-zone", 3, "focus"], ["lastFocusableShadowElement", ""], [1, "sme-layout-absolute", "sme-position-inset-none"], [3, "isBackgroundTransparent"]], template: function TreeTableComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵelementStart(0, "div", 0, 1);
         ɵɵelementStart(2, "div", 2, 3);
         ɵɵelementStart(4, "div", 4);
@@ -29467,7 +29650,7 @@ class TreeTableComponent extends DataTableComponent {
         ɵɵelementStart(5, "div", 5);
         ɵɵtemplate(6, TreeTableComponent_div_6_Template, 3, 3, "div", 6);
         ɵɵelementEnd();
-        ɵɵtemplate(7, TreeTableComponent_div_7_Template, 5, 11, "div", 7);
+        ɵɵtemplate(7, TreeTableComponent_div_7_Template, 5, 13, "div", 7);
         ɵɵelementEnd();
         ɵɵelementEnd();
         ɵɵelementEnd();
@@ -29507,7 +29690,7 @@ class TreeTableComponent extends DataTableComponent {
         ɵɵadvance(2);
         ɵɵproperty("ngClass", ɵɵpureFunction2(38, _c18, ctx.scrollable, ctx.shouldScroll));
         ɵɵadvance(2);
-        ɵɵproperty("ngIf", ctx.renderedItems.length === 0 && !ctx.lazyLoad || !ctx.isColumnWidthCalculated);
+        ɵɵproperty("ngIf", ctx.showNoRecordsMessage());
         ɵɵadvance(3);
         ɵɵproperty("ngStyle", ɵɵpureFunction1(41, _c19, ctx.scrollAboveDataStyleTop));
         ɵɵattribute("aria-hidden", true);
@@ -30103,21 +30286,28 @@ class PivotComponent extends CoreBaseComponent {
     isSelected(tab) {
         return this.selection && this.selection === tab;
     }
+    /**
+     * Force refresh for the pivot tabs.
+     */
+    refresh() {
+        this.updatePivotTabs();
+    }
     /**
      * Selects a tab
      * @param tab The tab to select
      */
     select(tab) {
-        /** At any given time we should have an attribute that lets us know if a tab is visible or not.
-         *
-         *
+        /**
+         * At any given time we should have an attribute that lets us know if a tab is visible or not.
          */
         if (tab) {
             for (let i = 0; i < this.trayTabs.length; i++) {
                 if (this.trayTabs[i] === tab) {
-                    const hiddenTab = this.visibleTabs.pop();
-                    hiddenTab.isVisible = false;
-                    this.trayTabs.push(hiddenTab);
+                    if (this.visibleTabs && this.visibleTabs.length > 0) {
+                        const hiddenTab = this.visibleTabs.pop();
+                        hiddenTab.isVisible = false;
+                        this.trayTabs.push(hiddenTab);
+                    }
                     this.visibleTabs.push(tab);
                     tab.isVisible = true;
                     this.trayTabs.splice(i, 1);
@@ -30198,7 +30388,6 @@ class PivotComponent extends CoreBaseComponent {
                 currentFill += tabWidth;
             }
         }
-        this.emitLayoutChanged();
     }
 }
 /** @nocollapse */ PivotComponent.ɵfac = function PivotComponent_Factory(t) { return new (t || PivotComponent)(ɵɵdirectiveInject(Injector), ɵɵdirectiveInject(SME_LAYOUT_PROVIDER, 12)); };
@@ -30270,6 +30459,12 @@ __decorate([
     SmeInject(ChangeDetectorRef),
     __metadata("design:type", ChangeDetectorRef)
 ], PivotComponent.prototype, "changeDetectorRef", void 0);
+__decorate([
+    Debounce$1(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PivotComponent.prototype, "refresh", null);
 __decorate([
     Debounce$1(),
     __metadata("design:type", Function),
@@ -30329,7 +30524,7 @@ __decorate([
         }], changeDetectorRef: [], dropDownButtonElement: [{
             type: ViewChild,
             args: ['dropDownButton']
-        }], emitLayoutChanged: [], onLayoutChanged: [] }); })();
+        }], refresh: [], emitLayoutChanged: [], onLayoutChanged: [] }); })();
 
 class PivotModule {
 }
@@ -30840,17 +31035,17 @@ const _c1$q = ["smeTreeTable"];
 const _c2$f = ["container"];
 const _c3$9 = ["dataView"];
 function MasterViewComponent_h2_0_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "h2", 18);
+    ɵɵelementStart(0, "h2", 19);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = ɵɵnextContext();
-    ɵɵproperty("hidden", ctx_r0.hideHeader);
+    ɵɵproperty("hidden", ctx_r0.hideHeader)("id", ctx_r0.headerId);
     ɵɵadvance(1);
     ɵɵtextInterpolate(ctx_r0.header);
 } }
 function MasterViewComponent_div_4_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "div", 19);
+    ɵɵelementStart(0, "div", 20);
     ɵɵprojection(1, 2);
     ɵɵelementEnd();
 } if (rf & 2) {
@@ -30859,15 +31054,15 @@ function MasterViewComponent_div_4_Template(rf, ctx) { if (rf & 1) {
 } }
 function MasterViewComponent_button_12_Template(rf, ctx) { if (rf & 1) {
     const _r13 = ɵɵgetCurrentView();
-    ɵɵelementStart(0, "button", 20);
+    ɵɵelementStart(0, "button", 21);
     ɵɵlistener("click", function MasterViewComponent_button_12_Template_button_click_0_listener($event) { ɵɵrestoreView(_r13); const ctx_r12 = ɵɵnextContext(); return ctx_r12.doClearSelection($event); });
-    ɵɵelementStart(1, "i", 21);
+    ɵɵelementStart(1, "i", 22);
     ɵɵtext(2);
     ɵɵelementEnd();
-    ɵɵelementStart(3, "i", 22);
+    ɵɵelementStart(3, "i", 23);
     ɵɵtext(4);
     ɵɵelementEnd();
-    ɵɵelement(5, "i", 23);
+    ɵɵelement(5, "i", 24);
     ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r4 = ɵɵnextContext();
@@ -30880,9 +31075,9 @@ function MasterViewComponent_button_12_Template(rf, ctx) { if (rf & 1) {
 } }
 function MasterViewComponent_button_14_Template(rf, ctx) { if (rf & 1) {
     const _r15 = ɵɵgetCurrentView();
-    ɵɵelementStart(0, "button", 24);
+    ɵɵelementStart(0, "button", 25);
     ɵɵlistener("click", function MasterViewComponent_button_14_Template_button_click_0_listener() { ɵɵrestoreView(_r15); const ctx_r14 = ɵɵnextContext(); return ctx_r14.columnPicker.next(); });
-    ɵɵelement(1, "span", 25);
+    ɵɵelement(1, "span", 26);
     ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r5 = ɵɵnextContext();
@@ -30892,9 +31087,9 @@ function MasterViewComponent_button_14_Template(rf, ctx) { if (rf & 1) {
 } }
 function MasterViewComponent_button_15_Template(rf, ctx) { if (rf & 1) {
     const _r17 = ɵɵgetCurrentView();
-    ɵɵelementStart(0, "button", 26);
+    ɵɵelementStart(0, "button", 27);
     ɵɵlistener("click", function MasterViewComponent_button_15_Template_button_click_0_listener() { ɵɵrestoreView(_r17); const ctx_r16 = ɵɵnextContext(); return ctx_r16.refresh.next(); });
-    ɵɵelement(1, "span", 27);
+    ɵɵelement(1, "span", 28);
     ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r6 = ɵɵnextContext();
@@ -30903,9 +31098,9 @@ function MasterViewComponent_button_15_Template(rf, ctx) { if (rf & 1) {
 } }
 function MasterViewComponent_button_16_Template(rf, ctx) { if (rf & 1) {
     const _r19 = ɵɵgetCurrentView();
-    ɵɵelementStart(0, "button", 24);
+    ɵɵelementStart(0, "button", 29);
     ɵɵlistener("click", function MasterViewComponent_button_16_Template_button_click_0_listener() { ɵɵrestoreView(_r19); const ctx_r18 = ɵɵnextContext(); return ctx_r18.filter.next(); });
-    ɵɵelement(1, "span", 28);
+    ɵɵelement(1, "span", 30);
     ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r7 = ɵɵnextContext();
@@ -30915,9 +31110,9 @@ function MasterViewComponent_button_16_Template(rf, ctx) { if (rf & 1) {
 } }
 function MasterViewComponent_button_17_Template(rf, ctx) { if (rf & 1) {
     const _r21 = ɵɵgetCurrentView();
-    ɵɵelementStart(0, "button", 24);
+    ɵɵelementStart(0, "button", 29);
     ɵɵlistener("click", function MasterViewComponent_button_17_Template_button_click_0_listener() { ɵɵrestoreView(_r21); const ctx_r20 = ɵɵnextContext(); return ctx_r20.group.next(); });
-    ɵɵelement(1, "span", 29);
+    ɵɵelement(1, "span", 31);
     ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r8 = ɵɵnextContext();
@@ -30926,13 +31121,13 @@ function MasterViewComponent_button_17_Template(rf, ctx) { if (rf & 1) {
     ɵɵattribute("aria-label", ctx_r8.resourceStrings.group.title);
 } }
 function MasterViewComponent_div_19_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "div", 30);
+    ɵɵelementStart(0, "div", 32);
     ɵɵprojection(1, 3);
     ɵɵelementEnd();
 } }
 function MasterViewComponent_form_20_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "form", 31);
-    ɵɵelementStart(1, "div", 32);
+    ɵɵelementStart(0, "form", 33);
+    ɵɵelementStart(1, "div", 34);
     ɵɵprojection(2, 4);
     ɵɵelementEnd();
     ɵɵelementEnd();
@@ -30983,6 +31178,7 @@ class MasterViewComponent extends CoreBaseComponent {
         this.addClass('sme-arrange-stack-v');
         this.addClass('sme-arrange-overflow-hide-y');
         this.addClass('sme-arrange-overflow-auto-x');
+        this.headerId = 'master-view-header' + this.componentId;
     }
     /**
      * The source name to use for logging
@@ -31164,7 +31360,7 @@ class MasterViewComponent extends CoreBaseComponent {
     setupDataTableAccessibility() {
         if (this.internalSmeDataTable) {
             if (this.header) {
-                this.internalSmeDataTable.tableAriaLabelledBy = 'master-view-header';
+                this.internalSmeDataTable.tableAriaLabelledBy = this.headerId;
             }
             else if (this.pivotComponent) {
                 const selectedTab = this.pivotComponent.tabs.toArray().filter(item => this.pivotComponent.isSelected(item))[0];
@@ -31181,7 +31377,8 @@ class MasterViewComponent extends CoreBaseComponent {
     createIdBag() {
         return {
             filterLabel: '',
-            columnPickerLabel: ''
+            columnPickerLabel: '',
+            itemCountLabel: ''
         };
     }
 }
@@ -31206,9 +31403,9 @@ class MasterViewComponent extends CoreBaseComponent {
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.dataView = _t.first);
     } }, hostBindings: function MasterViewComponent_HostBindings(rf, ctx) { if (rf & 1) {
         ɵɵlistener("resize", function MasterViewComponent_resize_HostBindingHandler() { return ctx.updateLayout(); }, false, ɵɵresolveWindow);
-    } }, inputs: { noSideMargin: "noSideMargin", hideHeader: "hideHeader", header: "header", total: "total", showSelection: "showSelection", showColumnPicker: "showColumnPicker", columnPickerActive: "columnPickerActive", showRefresh: "showRefresh", disableRefresh: "disableRefresh", dataTableMinWidth: "dataTableMinWidth", showFilter: "showFilter", filterActive: "filterActive", enableQueryEditor: "enableQueryEditor", selection: "selection", requireDataItemUniqueId: "requireDataItemUniqueId", showCustomFilter: "showCustomFilter", groupActive: "groupActive", stretchToAbsolute: "stretchToAbsolute", autoExpandDetailsPane: "autoExpandDetailsPane", showGroup: "showGroup" }, outputs: { selectionChange: "selectionChange", columnPicker: "columnPicker", refresh: "refresh", filter: "filter", group: "group", clearSelection: "clearSelection" }, features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c5$3, decls: 24, vars: 26, consts: [["class", "sme-position-flex-none sme-padding-squish-v-lg sme-arrange-word-wrap-break-word sme-font-h3", "id", "master-view-header", 3, "hidden", 4, "ngIf"], [3, "layoutChanged"], ["layout", ""], ["name", "narrow", 3, "until"], ["class", "sme-position-flex-none", 3, "sme-padding-horizontal-sm", 4, "ngIf"], [1, "sme-position-flex-none", "sme-arrange-stack-reversed"], ["container", ""], [1, "sme-position-flex-none", "sme-arrange-stack-h"], [1, "sme-focus-zone", "sme-position-flex-none", "sme-arrange-stack-h", "sme-arrange-ws-nowrap", "sme-scheme-secondary-text"], [1, "sme-layout-action-bar-item", "sme-padding-horizontal-sm"], ["type", "button", "role", "button", "class", "sme-button-trigger sme-layout-action-bar-item-height sme-scheme-secondary-text sme-button-auto-width", 3, "click", 4, "ngIf"], [1, "sme-focus-zone", "sme-arrange-ws-nowrap"], ["type", "button", "role", "button", "class", "sme-layout-action-bar-item-height sme-button-trigger sme-button-auto-width", 3, "title", "sme-toggled", "click", 4, "ngIf"], ["type", "button", "role", "button", "class", "sme-layout-action-bar-item-height sme-button-trigger sme-button-auto-width", 3, "disabled", "title", "click", 4, "ngIf"], [1, "sme-focus-zone"], ["class", "sme-margin-horizontal-sm", 4, "ngIf"], ["style", "position: relative;", 4, "ngIf"], ["dataView", ""], ["id", "master-view-header", 1, "sme-position-flex-none", "sme-padding-squish-v-lg", "sme-arrange-word-wrap-break-word", "sme-font-h3", 3, "hidden"], [1, "sme-position-flex-none"], ["type", "button", "role", "button", 1, "sme-button-trigger", "sme-layout-action-bar-item-height", "sme-scheme-secondary-text", "sme-button-auto-width", 3, "click"], ["aria-hidden", "true"], [1, "sme-screen-reader"], ["aria-hidden", "true", 1, "sme-icon", "sme-icon-clear", "sme-margin-left-xs", 3, "title"], ["type", "button", "role", "button", 1, "sme-layout-action-bar-item-height", "sme-button-trigger", "sme-button-auto-width", 3, "title", "click"], [1, "sme-icon", "sme-icon-tripleColumn"], ["type", "button", "role", "button", 1, "sme-layout-action-bar-item-height", "sme-button-trigger", "sme-button-auto-width", 3, "disabled", "title", "click"], [1, "sme-icon", "sme-icon-refresh"], [1, "sme-icon", "sme-icon-filter"], [1, "sme-icon", "sme-icon-groupedList"], [1, "sme-margin-horizontal-sm"], [2, "position", "relative"], [1, "sme-position-flex-none", "sme-layout-action-bar-item"]], template: function MasterViewComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { noSideMargin: "noSideMargin", hideHeader: "hideHeader", header: "header", total: "total", showSelection: "showSelection", showColumnPicker: "showColumnPicker", columnPickerActive: "columnPickerActive", showRefresh: "showRefresh", disableRefresh: "disableRefresh", dataTableMinWidth: "dataTableMinWidth", showFilter: "showFilter", filterActive: "filterActive", enableQueryEditor: "enableQueryEditor", selection: "selection", requireDataItemUniqueId: "requireDataItemUniqueId", showCustomFilter: "showCustomFilter", groupActive: "groupActive", stretchToAbsolute: "stretchToAbsolute", autoExpandDetailsPane: "autoExpandDetailsPane", showGroup: "showGroup" }, outputs: { selectionChange: "selectionChange", columnPicker: "columnPicker", refresh: "refresh", filter: "filter", group: "group", clearSelection: "clearSelection" }, features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c5$3, decls: 24, vars: 27, consts: [["class", "sme-position-flex-none sme-padding-squish-v-lg sme-arrange-word-wrap-break-word sme-font-h3", 3, "hidden", "id", 4, "ngIf"], [3, "layoutChanged"], ["layout", ""], ["name", "narrow", 3, "until"], ["class", "sme-position-flex-none", 3, "sme-padding-horizontal-sm", 4, "ngIf"], [1, "sme-position-flex-none", "sme-arrange-stack-reversed"], ["container", ""], [1, "sme-position-flex-none", "sme-arrange-stack-h"], [1, "sme-focus-zone", "sme-position-flex-none", "sme-arrange-stack-h", "sme-arrange-ws-nowrap", "sme-scheme-secondary-text"], ["role", "status", 1, "sme-layout-action-bar-item", "sme-padding-horizontal-sm", 3, "id"], ["type", "button", "role", "button", "class", "sme-button-trigger sme-layout-action-bar-item-height sme-scheme-secondary-text sme-button-auto-width", 3, "click", 4, "ngIf"], [1, "sme-focus-zone", "sme-arrange-ws-nowrap"], ["type", "button", "role", "button", "class", "sme-layout-action-bar-item-height sme-button-trigger sme-button-auto-width", "data-uta-id", "column-picker-button", 3, "title", "sme-toggled", "click", 4, "ngIf"], ["type", "button", "role", "button", "class", "sme-layout-action-bar-item-height sme-button-trigger sme-button-auto-width", 3, "disabled", "title", "click", 4, "ngIf"], ["type", "button", "role", "button", "class", "sme-layout-action-bar-item-height sme-button-trigger sme-button-auto-width", 3, "title", "sme-toggled", "click", 4, "ngIf"], [1, "sme-focus-zone"], ["class", "sme-margin-horizontal-sm", 4, "ngIf"], ["style", "position: relative;", 4, "ngIf"], ["dataView", ""], [1, "sme-position-flex-none", "sme-padding-squish-v-lg", "sme-arrange-word-wrap-break-word", "sme-font-h3", 3, "hidden", "id"], [1, "sme-position-flex-none"], ["type", "button", "role", "button", 1, "sme-button-trigger", "sme-layout-action-bar-item-height", "sme-scheme-secondary-text", "sme-button-auto-width", 3, "click"], ["aria-hidden", "true"], [1, "sme-screen-reader"], ["aria-hidden", "true", 1, "sme-icon", "sme-icon-clear", "sme-margin-left-xs", 3, "title"], ["type", "button", "role", "button", "data-uta-id", "column-picker-button", 1, "sme-layout-action-bar-item-height", "sme-button-trigger", "sme-button-auto-width", 3, "title", "click"], [1, "sme-icon", "sme-icon-tripleColumn"], ["type", "button", "role", "button", 1, "sme-layout-action-bar-item-height", "sme-button-trigger", "sme-button-auto-width", 3, "disabled", "title", "click"], [1, "sme-icon", "sme-icon-refresh"], ["type", "button", "role", "button", 1, "sme-layout-action-bar-item-height", "sme-button-trigger", "sme-button-auto-width", 3, "title", "click"], [1, "sme-icon", "sme-icon-filter"], [1, "sme-icon", "sme-icon-groupedList"], [1, "sme-margin-horizontal-sm"], [2, "position", "relative"], [1, "sme-position-flex-none", "sme-layout-action-bar-item"]], template: function MasterViewComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵprojectionDef(_c4$5);
-        ɵɵtemplate(0, MasterViewComponent_h2_0_Template, 2, 2, "h2", 0);
+        ɵɵtemplate(0, MasterViewComponent_h2_0_Template, 2, 3, "h2", 0);
         ɵɵelementStart(1, "sme-layout", 1, 2);
         ɵɵlistener("layoutChanged", function MasterViewComponent_Template_sme_layout_layoutChanged_1_listener() { return ctx.updateActionBar(); });
         ɵɵelement(3, "sme-layout-definition", 3);
@@ -31226,16 +31423,16 @@ class MasterViewComponent extends CoreBaseComponent {
         ɵɵelementStart(13, "div", 11);
         ɵɵtemplate(14, MasterViewComponent_button_14_Template, 2, 4, "button", 12);
         ɵɵtemplate(15, MasterViewComponent_button_15_Template, 2, 3, "button", 13);
-        ɵɵtemplate(16, MasterViewComponent_button_16_Template, 2, 4, "button", 12);
-        ɵɵtemplate(17, MasterViewComponent_button_17_Template, 2, 4, "button", 12);
+        ɵɵtemplate(16, MasterViewComponent_button_16_Template, 2, 4, "button", 14);
+        ɵɵtemplate(17, MasterViewComponent_button_17_Template, 2, 4, "button", 14);
         ɵɵelementEnd();
-        ɵɵelementStart(18, "div", 14);
-        ɵɵtemplate(19, MasterViewComponent_div_19_Template, 2, 0, "div", 15);
+        ɵɵelementStart(18, "div", 15);
+        ɵɵtemplate(19, MasterViewComponent_div_19_Template, 2, 0, "div", 16);
         ɵɵelementEnd();
-        ɵɵtemplate(20, MasterViewComponent_form_20_Template, 3, 0, "form", 16);
+        ɵɵtemplate(20, MasterViewComponent_form_20_Template, 3, 0, "form", 17);
         ɵɵelementEnd();
         ɵɵelementEnd();
-        ɵɵelementStart(21, "div", null, 17);
+        ɵɵelementStart(21, "div", null, 18);
         ɵɵprojection(23, 1);
         ɵɵelementEnd();
     } if (rf & 2) {
@@ -31251,7 +31448,9 @@ class MasterViewComponent extends CoreBaseComponent {
         ɵɵclassProp("sme-padding-horizontal-sm", !ctx.noSideMargin)("sme-padding-left-sm", ctx.noSideMargin);
         ɵɵadvance(1);
         ɵɵclassProp("sme-margin-right-xs", ctx.selectedItemCount === 0 || !ctx.showSelection);
-        ɵɵadvance(2);
+        ɵɵadvance(1);
+        ɵɵproperty("id", ctx.idBag.itemCountLabel);
+        ɵɵadvance(1);
         ɵɵtextInterpolate(ctx.getItemCountText());
         ɵɵadvance(1);
         ɵɵproperty("ngIf", ctx.selectedItemCount > 0 && ctx.showSelection);
@@ -31466,6 +31665,7 @@ class DataTableColumnPickerExtension {
         const allColumns = this.dataTable.columns ? this.dataTable.columns.toArray() : [];
         const dataTableAllColumns = allColumns.map((item) => {
             return {
+                'utaId': item.utaId,
                 'field': item.field,
                 'header': item.header,
                 'hidden': item.hidden,
@@ -31807,6 +32007,17 @@ function getCssSizeString(defaultSize, size = defaultSize) {
 }
 
 const _c0$W = ["*"];
+/**
+ * @smeDoc {@label Layered Icon @id sme-layered-icon}
+ *
+ * @overview
+ * @file {@filepath ./examples/layered-icon-overview.md}
+ *
+ * @example {@label Layered Icon example @id layered-icon-example}
+ * @file {@filename layered-icon-example.component.html @filepath ./examples/layered-icon-example.component.html }
+ * @file {@filename layered-icon-example.component.ts @filepath ./examples/layered-icon-example.component.ts }
+ * @file {@filename layered-icon-example.module.ts @filepath ./examples/layered-icon-example.module.ts }
+ */
 class LayeredIconComponent extends CoreBaseComponent {
     constructor(injector) {
         super(injector);
@@ -31968,7 +32179,7 @@ class IconLayerComponent extends CoreBaseComponent {
         }] }); })();
 
 function StatusIconComponent_sme_icon_layer_1_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelement(0, "sme-icon-layer", 2);
+    ɵɵelement(0, "sme-icon-layer", 3);
 } if (rf & 2) {
     const layer_r1 = ctx.$implicit;
     const ctx_r0 = ɵɵnextContext();
@@ -32009,8 +32220,37 @@ var StatusIconType;
         return value;
     }
     StatusIconType.fromBindableType = fromBindableType;
+    function getIconLayers(iconType) {
+        switch (iconType) {
+            case StatusIconType.Critical:
+                return ['sme-icon', 'sme-color-critical', 'sme-icon-statusErrorFull'];
+            case StatusIconType.Error:
+                return ['sme-icon', 'sme-color-error', 'sme-icon-criticalErrorSolid'];
+            case StatusIconType.Warning:
+                return ['sme-icon', 'sme-color-warning', 'sme-icon-warningSolid'];
+            case StatusIconType.Progress:
+                return ['sme-icon', 'sme-color-progress', 'sme-icon-syncStatusSolid'];
+            case StatusIconType.Info:
+                return ['sme-icon', 'sme-color-info', 'sme-icon-infoSolid'];
+            case StatusIconType.Success:
+                return ['sme-icon', 'sme-color-success', 'sme-icon-completedSolid'];
+            case StatusIconType.Unknown:
+                return ['sme-icon', 'sme-color-neutral', 'sme-icon-unknownSolid'];
+        }
+    }
+    StatusIconType.getIconLayers = getIconLayers;
 })(StatusIconType || (StatusIconType = {}));
-class StatusIconComponent {
+class StatusIconComponent extends CoreBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.localStrings = this.strings.MsftSmeShell.Angular.StatusIcon;
+    }
+    /**
+     * The source name to use for logging
+    */
+    get logSourceName() {
+        return 'StatusIconComponent';
+    }
     /**
      * Input binding for the status icon type
      */
@@ -32019,39 +32259,52 @@ class StatusIconComponent {
         switch (type) {
             case StatusIconType.Critical:
                 layers.push(['sme-icon', 'sme-color-critical', 'sme-icon-statusErrorFull']);
+                this.statusString = this.localStrings.Critical;
                 break;
             case StatusIconType.Error:
                 layers.push(['sme-icon', 'sme-color-error', 'sme-icon-criticalErrorSolid']);
+                this.statusString = this.localStrings.Error;
                 break;
             case StatusIconType.Warning:
                 layers.push(['sme-icon', 'sme-color-warning', 'sme-icon-warningSolid']);
+                this.statusString = this.localStrings.Warning;
                 break;
             case StatusIconType.Progress:
                 layers.push(['sme-icon', 'sme-color-progress', 'sme-icon-syncStatusSolid']);
+                this.statusString = this.localStrings.Progress;
                 break;
             case StatusIconType.Info:
                 layers.push(['sme-icon', 'sme-color-info', 'sme-icon-infoSolid']);
+                this.statusString = this.localStrings.Info;
                 break;
             case StatusIconType.Success:
                 layers.push(['sme-icon', 'sme-color-success', 'sme-icon-completedSolid']);
+                this.statusString = this.localStrings.Success;
                 break;
             case StatusIconType.Unknown:
                 layers.push(['sme-icon', 'sme-color-neutral', 'sme-icon-unknownSolid']);
+                this.statusString = this.localStrings.Unknown;
                 break;
         }
         this.layers = layers;
     }
 }
-/** @nocollapse */ StatusIconComponent.ɵfac = function StatusIconComponent_Factory(t) { return new (t || StatusIconComponent)(); };
-/** @nocollapse */ StatusIconComponent.ɵcmp = ɵɵdefineComponent({ type: StatusIconComponent, selectors: [["sme-status-icon"]], inputs: { size: "size", status: "status" }, decls: 2, vars: 2, consts: [[3, "size"], [3, "size", "ngClass", 4, "ngFor", "ngForOf"], [3, "size", "ngClass"]], template: function StatusIconComponent_Template(rf, ctx) { if (rf & 1) {
+/** @nocollapse */ StatusIconComponent.ɵfac = function StatusIconComponent_Factory(t) { return ɵStatusIconComponent_BaseFactory(t || StatusIconComponent); };
+/** @nocollapse */ StatusIconComponent.ɵcmp = ɵɵdefineComponent({ type: StatusIconComponent, selectors: [["sme-status-icon"]], inputs: { size: "size", status: "status" }, features: [ɵɵInheritDefinitionFeature], decls: 4, vars: 4, consts: [["aria-hidden", "true", 3, "size", "title"], [3, "size", "ngClass", 4, "ngFor", "ngForOf"], [1, "sme-screen-reader"], [3, "size", "ngClass"]], template: function StatusIconComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵelementStart(0, "sme-layered-icon", 0);
         ɵɵtemplate(1, StatusIconComponent_sme_icon_layer_1_Template, 1, 2, "sme-icon-layer", 1);
         ɵɵelementEnd();
+        ɵɵelementStart(2, "div", 2);
+        ɵɵtext(3);
+        ɵɵelementEnd();
     } if (rf & 2) {
-        ɵɵproperty("size", ctx.size);
+        ɵɵproperty("size", ctx.size)("title", ctx.statusString);
         ɵɵadvance(1);
         ɵɵproperty("ngForOf", ctx.layers);
-    } }, directives: [LayeredIconComponent, NgForOf, IconLayerComponent, NgClass], encapsulation: 2 });
+        ɵɵadvance(2);
+        ɵɵtextInterpolate(ctx.statusString);
+    } }, directives: [LayeredIconComponent, TooltipDirective, NgForOf, IconLayerComponent, NgClass], encapsulation: 2 });
+const ɵStatusIconComponent_BaseFactory = /*@__PURE__*/ ɵɵgetInheritedFactory(StatusIconComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(StatusIconComponent, [{
         type: Component,
         args: [{
@@ -32681,12 +32934,6 @@ class BadgeBaseComponent extends BaseComponent {
             }
         }
     }
-    /**
-     * The title that we actually bind to
-     */
-    get resolvedTitle() {
-        return this.resolvedTooltip ? null : this.description;
-    }
     /**
      * The title that we actually bind to
      */
@@ -32695,12 +32942,7 @@ class BadgeBaseComponent extends BaseComponent {
         if (this.tooltip) {
             return this.tooltip;
         }
-        // if there is a learnMoreLink or feedbackLink, then use the default tooltip
-        if (this.learnMoreLink || this.showFeedbackLink) {
-            return this.defaultTooltip;
-        }
-        // otherwise its just a description. in which case we should use the title property instead
-        return null;
+        return this.defaultTooltip;
     }
     /**
      * Gets the initial host classes to be applied to this element
@@ -32754,85 +32996,46 @@ const ɵCoreBadgeBaseComponent_BaseFactory = /*@__PURE__*/ ɵɵgetInheritedFacto
     }], null, null); })();
 
 const _c0$_ = ["type", "comingsoon"];
-const _c1$s = function (a1) { return ["sme-icon", a1]; };
-function ComingSoonBadgeComponent_p_0_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "p", 4);
-    ɵɵelementStart(1, "span", 5);
-    ɵɵtext(2);
-    ɵɵelementEnd();
-    ɵɵelement(3, "span", 6);
-    ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = ɵɵnextContext();
-    ɵɵproperty("smeTooltip", ctx_r0.resolvedTooltip)("title", ctx_r0.resolvedTitle);
-    ɵɵattribute("aria-label", ctx_r0.resolvedTitle ? ctx_r0.ariaLabel : null);
-    ɵɵadvance(2);
-    ɵɵtextInterpolate(ctx_r0.label);
-    ɵɵadvance(1);
-    ɵɵproperty("ngClass", ɵɵpureFunction1(5, _c1$s, ctx_r0.icon));
-} }
-function ComingSoonBadgeComponent_p_1_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "p", 7);
-    ɵɵelementStart(1, "span");
-    ɵɵtext(2);
-    ɵɵelementEnd();
-    ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = ɵɵnextContext();
-    ɵɵproperty("smeTooltip", ctx_r1.resolvedTooltip)("title", ctx_r1.resolvedTitle);
-    ɵɵattribute("aria-label", ctx_r1.resolvedTitle ? ctx_r1.ariaLabel : null);
-    ɵɵadvance(2);
-    ɵɵtextInterpolate(ctx_r1.label);
-} }
-function ComingSoonBadgeComponent_ng_template_2_a_5_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "a", 12);
+function ComingSoonBadgeComponent_ng_template_6_a_3_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "a", 9);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r5 = ɵɵnextContext(2);
-    ɵɵproperty("href", ctx_r5.learnMoreLink.toString(), ɵɵsanitizeUrl);
+    const ctx_r3 = ɵɵnextContext(2);
+    ɵɵproperty("href", ctx_r3.learnMoreLink.toString(), ɵɵsanitizeUrl);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r5.strings.MsftSmeShell.Angular.Badges.Common.learnMore);
+    ɵɵtextInterpolate(ctx_r3.strings.MsftSmeShell.Angular.Badges.Common.learnMore);
 } }
-function ComingSoonBadgeComponent_ng_template_2_a_7_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "a", 12);
+function ComingSoonBadgeComponent_ng_template_6_a_5_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "a", 9);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r6 = ɵɵnextContext(2);
-    ɵɵproperty("href", ctx_r6.feedbackLink.toString(), ɵɵsanitizeUrl);
+    const ctx_r4 = ɵɵnextContext(2);
+    ɵɵproperty("href", ctx_r4.feedbackLink.toString(), ɵɵsanitizeUrl);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r6.strings.MsftSmeShell.Angular.Badges.Common.feedback);
+    ɵɵtextInterpolate(ctx_r4.strings.MsftSmeShell.Angular.Badges.Common.feedback);
 } }
-function ComingSoonBadgeComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "h3", 8);
+function ComingSoonBadgeComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "p", 6);
     ɵɵtext(1);
     ɵɵelementEnd();
-    ɵɵelementStart(2, "p", 9);
-    ɵɵtext(3);
-    ɵɵelementEnd();
-    ɵɵelementStart(4, "div", 10);
-    ɵɵtemplate(5, ComingSoonBadgeComponent_ng_template_2_a_5_Template, 2, 2, "a", 11);
+    ɵɵelementStart(2, "div", 7);
+    ɵɵtemplate(3, ComingSoonBadgeComponent_ng_template_6_a_3_Template, 2, 2, "a", 8);
     ɵɵelementEnd();
-    ɵɵelementStart(6, "div", 10);
-    ɵɵtemplate(7, ComingSoonBadgeComponent_ng_template_2_a_7_Template, 2, 2, "a", 11);
+    ɵɵelementStart(4, "div", 7);
+    ɵɵtemplate(5, ComingSoonBadgeComponent_ng_template_6_a_5_Template, 2, 2, "a", 8);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const hostData_r4 = ctx.hostData;
-    const ctx_r3 = ɵɵnextContext();
-    ɵɵproperty("id", hostData_r4.ariaLabelId);
-    ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r3.ariaLabel);
-    ɵɵadvance(1);
-    ɵɵproperty("id", hostData_r4.ariaDescriptionId);
-    ɵɵattribute("aria-describedby", hostData_r4.ariaDescriptionId);
+    const ctx_r1 = ɵɵnextContext();
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r3.description);
+    ɵɵtextInterpolate(ctx_r1.description);
     ɵɵadvance(2);
-    ɵɵproperty("ngIf", !!ctx_r3.learnMoreLink);
+    ɵɵproperty("ngIf", !!ctx_r1.learnMoreLink);
     ɵɵadvance(2);
-    ɵɵproperty("ngIf", ctx_r3.showFeedbackLink);
+    ɵɵproperty("ngIf", ctx_r1.showFeedbackLink);
 } }
+const _c1$s = function (a1) { return ["sme-icon", a1]; };
 /**
  * Defines a coming soon badge
  */
@@ -32862,15 +33065,26 @@ class ComingSoonBadgeComponent extends CoreBadgeBaseComponent {
     }
 }
 /** @nocollapse */ ComingSoonBadgeComponent.ɵfac = function ComingSoonBadgeComponent_Factory(t) { return new (t || ComingSoonBadgeComponent)(ɵɵdirectiveInject(Injector)); };
-/** @nocollapse */ ComingSoonBadgeComponent.ɵcmp = ɵɵdefineComponent({ type: ComingSoonBadgeComponent, selectors: [["sme-badge", "type", "comingsoon"]], features: [ɵɵInheritDefinitionFeature], attrs: _c0$_, decls: 4, vars: 2, consts: [["tabindex", "0", 3, "smeTooltip", "title", 4, "ngIf"], [3, "smeTooltip", "title", 4, "ngIf"], ["class", "sme-arrange-stack-v"], ["defaultTooltip", ""], ["tabindex", "0", 3, "smeTooltip", "title"], ["aria-hidden", "true"], ["aria-hidden", "true", 3, "ngClass"], [3, "smeTooltip", "title"], [1, "sme-screen-reader", 3, "id"], [1, "sme-margin-bottom-xs", "sme-font-label", 3, "id"], [1, "sme-position-stretch-h"], ["target", "about:blank", "class", "sme-link", 3, "href", 4, "ngIf"], ["target", "about:blank", 1, "sme-link", 3, "href"]], template: function ComingSoonBadgeComponent_Template(rf, ctx) { if (rf & 1) {
-        ɵɵtemplate(0, ComingSoonBadgeComponent_p_0_Template, 4, 7, "p", 0);
-        ɵɵtemplate(1, ComingSoonBadgeComponent_p_1_Template, 3, 4, "p", 1);
-        ɵɵtemplate(2, ComingSoonBadgeComponent_ng_template_2_Template, 8, 7, "ng-template", 2, 3, ɵɵtemplateRefExtractor);
+/** @nocollapse */ ComingSoonBadgeComponent.ɵcmp = ɵɵdefineComponent({ type: ComingSoonBadgeComponent, selectors: [["sme-badge", "type", "comingsoon"]], features: [ɵɵInheritDefinitionFeature], attrs: _c0$_, decls: 8, vars: 6, consts: [["tabindex", "0", 3, "smeTooltip"], [1, "sme-screen-reader"], ["aria-hidden", "true"], ["aria-hidden", "true", 3, "ngClass"], ["class", "sme-arrange-stack-v"], ["defaultTooltip", ""], [1, "sme-margin-bottom-xs", "sme-font-label"], [1, "sme-position-stretch-h"], ["target", "about:blank", "class", "sme-link", 3, "href", 4, "ngIf"], ["target", "about:blank", 1, "sme-link", 3, "href"]], template: function ComingSoonBadgeComponent_Template(rf, ctx) { if (rf & 1) {
+        ɵɵelementStart(0, "p", 0);
+        ɵɵelementStart(1, "span", 1);
+        ɵɵtext(2);
+        ɵɵelementEnd();
+        ɵɵelementStart(3, "span", 2);
+        ɵɵtext(4);
+        ɵɵelementEnd();
+        ɵɵelement(5, "span", 3);
+        ɵɵelementEnd();
+        ɵɵtemplate(6, ComingSoonBadgeComponent_ng_template_6_Template, 6, 3, "ng-template", 4, 5, ɵɵtemplateRefExtractor);
     } if (rf & 2) {
-        ɵɵproperty("ngIf", ctx.resolvedTooltip || ctx.resolvedTitle);
+        ɵɵproperty("smeTooltip", ctx.resolvedTooltip);
+        ɵɵadvance(2);
+        ɵɵtextInterpolate(ctx.ariaLabel);
+        ɵɵadvance(2);
+        ɵɵtextInterpolate(ctx.label);
         ɵɵadvance(1);
-        ɵɵproperty("ngIf", !ctx.resolvedTooltip && !ctx.resolvedTitle);
-    } }, directives: [NgIf, TooltipDirective, NgClass], encapsulation: 2 });
+        ɵɵproperty("ngClass", ɵɵpureFunction1(4, _c1$s, ctx.icon));
+    } }, directives: [TooltipDirective, NgClass, NgIf], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(ComingSoonBadgeComponent, [{
         type: Component,
         args: [{
@@ -32880,85 +33094,46 @@ class ComingSoonBadgeComponent extends CoreBadgeBaseComponent {
     }], function () { return [{ type: Injector }]; }, null); })();
 
 const _c0$$ = ["type", "custom"];
-const _c1$t = function (a1) { return ["sme-icon", a1]; };
-function CustomBadgeComponent_p_0_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "p", 4);
-    ɵɵelementStart(1, "span", 5);
-    ɵɵtext(2);
-    ɵɵelementEnd();
-    ɵɵelement(3, "span", 6);
-    ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = ɵɵnextContext();
-    ɵɵproperty("smeTooltip", ctx_r0.resolvedTooltip)("title", ctx_r0.resolvedTitle);
-    ɵɵattribute("aria-label", ctx_r0.resolvedTitle ? ctx_r0.ariaLabel : null);
-    ɵɵadvance(2);
-    ɵɵtextInterpolate(ctx_r0.label);
-    ɵɵadvance(1);
-    ɵɵproperty("ngClass", ɵɵpureFunction1(5, _c1$t, ctx_r0.icon));
-} }
-function CustomBadgeComponent_p_1_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "p", 7);
-    ɵɵelementStart(1, "span");
-    ɵɵtext(2);
-    ɵɵelementEnd();
-    ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = ɵɵnextContext();
-    ɵɵproperty("smeTooltip", ctx_r1.resolvedTooltip)("title", ctx_r1.resolvedTitle);
-    ɵɵattribute("aria-label", ctx_r1.resolvedTitle ? ctx_r1.ariaLabel : null);
-    ɵɵadvance(2);
-    ɵɵtextInterpolate(ctx_r1.label);
-} }
-function CustomBadgeComponent_ng_template_2_a_5_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "a", 12);
+function CustomBadgeComponent_ng_template_6_a_3_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "a", 9);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r5 = ɵɵnextContext(2);
-    ɵɵproperty("href", ctx_r5.learnMoreLink.toString(), ɵɵsanitizeUrl);
+    const ctx_r3 = ɵɵnextContext(2);
+    ɵɵproperty("href", ctx_r3.learnMoreLink.toString(), ɵɵsanitizeUrl);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r5.strings.MsftSmeShell.Angular.Badges.Common.learnMore);
+    ɵɵtextInterpolate(ctx_r3.strings.MsftSmeShell.Angular.Badges.Common.learnMore);
 } }
-function CustomBadgeComponent_ng_template_2_a_7_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "a", 12);
+function CustomBadgeComponent_ng_template_6_a_5_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "a", 9);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r6 = ɵɵnextContext(2);
-    ɵɵproperty("href", ctx_r6.feedbackLink.toString(), ɵɵsanitizeUrl);
+    const ctx_r4 = ɵɵnextContext(2);
+    ɵɵproperty("href", ctx_r4.feedbackLink.toString(), ɵɵsanitizeUrl);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r6.strings.MsftSmeShell.Angular.Badges.Common.feedback);
+    ɵɵtextInterpolate(ctx_r4.strings.MsftSmeShell.Angular.Badges.Common.feedback);
 } }
-function CustomBadgeComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "h3", 8);
+function CustomBadgeComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "p", 6);
     ɵɵtext(1);
     ɵɵelementEnd();
-    ɵɵelementStart(2, "p", 9);
-    ɵɵtext(3);
-    ɵɵelementEnd();
-    ɵɵelementStart(4, "div", 10);
-    ɵɵtemplate(5, CustomBadgeComponent_ng_template_2_a_5_Template, 2, 2, "a", 11);
+    ɵɵelementStart(2, "div", 7);
+    ɵɵtemplate(3, CustomBadgeComponent_ng_template_6_a_3_Template, 2, 2, "a", 8);
     ɵɵelementEnd();
-    ɵɵelementStart(6, "div", 10);
-    ɵɵtemplate(7, CustomBadgeComponent_ng_template_2_a_7_Template, 2, 2, "a", 11);
+    ɵɵelementStart(4, "div", 7);
+    ɵɵtemplate(5, CustomBadgeComponent_ng_template_6_a_5_Template, 2, 2, "a", 8);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const hostData_r4 = ctx.hostData;
-    const ctx_r3 = ɵɵnextContext();
-    ɵɵproperty("id", hostData_r4.ariaLabelId);
-    ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r3.ariaLabel);
-    ɵɵadvance(1);
-    ɵɵproperty("id", hostData_r4.ariaDescriptionId);
-    ɵɵattribute("aria-describedby", hostData_r4.ariaDescriptionId);
+    const ctx_r1 = ɵɵnextContext();
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r3.description);
+    ɵɵtextInterpolate(ctx_r1.description);
     ɵɵadvance(2);
-    ɵɵproperty("ngIf", !!ctx_r3.learnMoreLink);
+    ɵɵproperty("ngIf", !!ctx_r1.learnMoreLink);
     ɵɵadvance(2);
-    ɵɵproperty("ngIf", ctx_r3.showFeedbackLink);
+    ɵɵproperty("ngIf", ctx_r1.showFeedbackLink);
 } }
+const _c1$t = function (a1) { return ["sme-icon", a1]; };
 /**
  * Defines a custom badge
  */
@@ -32986,15 +33161,26 @@ class CustomBadgeComponent extends CoreBadgeBaseComponent {
     }
 }
 /** @nocollapse */ CustomBadgeComponent.ɵfac = function CustomBadgeComponent_Factory(t) { return new (t || CustomBadgeComponent)(ɵɵdirectiveInject(Injector)); };
-/** @nocollapse */ CustomBadgeComponent.ɵcmp = ɵɵdefineComponent({ type: CustomBadgeComponent, selectors: [["sme-badge", "type", "custom"]], features: [ɵɵInheritDefinitionFeature], attrs: _c0$$, decls: 4, vars: 2, consts: [["tabindex", "0", 3, "smeTooltip", "title", 4, "ngIf"], [3, "smeTooltip", "title", 4, "ngIf"], ["class", "sme-arrange-stack-v"], ["defaultTooltip", ""], ["tabindex", "0", 3, "smeTooltip", "title"], ["aria-hidden", "true"], ["aria-hidden", "true", 3, "ngClass"], [3, "smeTooltip", "title"], [1, "sme-screen-reader", 3, "id"], [1, "sme-margin-bottom-xs", "sme-font-label", 3, "id"], [1, "sme-position-stretch-h"], ["target", "about:blank", "class", "sme-link", 3, "href", 4, "ngIf"], ["target", "about:blank", 1, "sme-link", 3, "href"]], template: function CustomBadgeComponent_Template(rf, ctx) { if (rf & 1) {
-        ɵɵtemplate(0, CustomBadgeComponent_p_0_Template, 4, 7, "p", 0);
-        ɵɵtemplate(1, CustomBadgeComponent_p_1_Template, 3, 4, "p", 1);
-        ɵɵtemplate(2, CustomBadgeComponent_ng_template_2_Template, 8, 7, "ng-template", 2, 3, ɵɵtemplateRefExtractor);
+/** @nocollapse */ CustomBadgeComponent.ɵcmp = ɵɵdefineComponent({ type: CustomBadgeComponent, selectors: [["sme-badge", "type", "custom"]], features: [ɵɵInheritDefinitionFeature], attrs: _c0$$, decls: 8, vars: 6, consts: [["tabindex", "0", 3, "smeTooltip"], [1, "sme-screen-reader"], ["aria-hidden", "true"], ["aria-hidden", "true", 3, "ngClass"], ["class", "sme-arrange-stack-v"], ["defaultTooltip", ""], [1, "sme-margin-bottom-xs", "sme-font-label"], [1, "sme-position-stretch-h"], ["target", "about:blank", "class", "sme-link", 3, "href", 4, "ngIf"], ["target", "about:blank", 1, "sme-link", 3, "href"]], template: function CustomBadgeComponent_Template(rf, ctx) { if (rf & 1) {
+        ɵɵelementStart(0, "p", 0);
+        ɵɵelementStart(1, "span", 1);
+        ɵɵtext(2);
+        ɵɵelementEnd();
+        ɵɵelementStart(3, "span", 2);
+        ɵɵtext(4);
+        ɵɵelementEnd();
+        ɵɵelement(5, "span", 3);
+        ɵɵelementEnd();
+        ɵɵtemplate(6, CustomBadgeComponent_ng_template_6_Template, 6, 3, "ng-template", 4, 5, ɵɵtemplateRefExtractor);
     } if (rf & 2) {
-        ɵɵproperty("ngIf", ctx.resolvedTooltip || ctx.resolvedTitle);
+        ɵɵproperty("smeTooltip", ctx.resolvedTooltip);
+        ɵɵadvance(2);
+        ɵɵtextInterpolate(ctx.ariaLabel);
+        ɵɵadvance(2);
+        ɵɵtextInterpolate(ctx.label);
         ɵɵadvance(1);
-        ɵɵproperty("ngIf", !ctx.resolvedTooltip && !ctx.resolvedTitle);
-    } }, directives: [NgIf, TooltipDirective, NgClass], encapsulation: 2 });
+        ɵɵproperty("ngClass", ɵɵpureFunction1(4, _c1$t, ctx.icon));
+    } }, directives: [TooltipDirective, NgClass, NgIf], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(CustomBadgeComponent, [{
         type: Component,
         args: [{
@@ -33004,85 +33190,46 @@ class CustomBadgeComponent extends CoreBadgeBaseComponent {
     }], function () { return [{ type: Injector }]; }, null); })();
 
 const _c0$10 = ["type", "feedback"];
-const _c1$u = function (a1) { return ["sme-icon", a1]; };
-function FeedbackBadgeComponent_p_0_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "p", 4);
-    ɵɵelementStart(1, "span", 5);
-    ɵɵtext(2);
-    ɵɵelementEnd();
-    ɵɵelement(3, "span", 6);
-    ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = ɵɵnextContext();
-    ɵɵproperty("smeTooltip", ctx_r0.resolvedTooltip)("title", ctx_r0.resolvedTitle);
-    ɵɵattribute("aria-label", ctx_r0.resolvedTitle ? ctx_r0.ariaLabel : null);
-    ɵɵadvance(2);
-    ɵɵtextInterpolate(ctx_r0.label);
-    ɵɵadvance(1);
-    ɵɵproperty("ngClass", ɵɵpureFunction1(5, _c1$u, ctx_r0.icon));
-} }
-function FeedbackBadgeComponent_p_1_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "p", 7);
-    ɵɵelementStart(1, "span");
-    ɵɵtext(2);
-    ɵɵelementEnd();
-    ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = ɵɵnextContext();
-    ɵɵproperty("smeTooltip", ctx_r1.resolvedTooltip)("title", ctx_r1.resolvedTitle);
-    ɵɵattribute("aria-label", ctx_r1.resolvedTitle ? ctx_r1.ariaLabel : null);
-    ɵɵadvance(2);
-    ɵɵtextInterpolate(ctx_r1.label);
-} }
-function FeedbackBadgeComponent_ng_template_2_a_5_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "a", 12);
+function FeedbackBadgeComponent_ng_template_6_a_3_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "a", 9);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r5 = ɵɵnextContext(2);
-    ɵɵproperty("href", ctx_r5.learnMoreLink.toString(), ɵɵsanitizeUrl);
+    const ctx_r3 = ɵɵnextContext(2);
+    ɵɵproperty("href", ctx_r3.learnMoreLink.toString(), ɵɵsanitizeUrl);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r5.strings.MsftSmeShell.Angular.Badges.Common.learnMore);
+    ɵɵtextInterpolate(ctx_r3.strings.MsftSmeShell.Angular.Badges.Common.learnMore);
 } }
-function FeedbackBadgeComponent_ng_template_2_a_7_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "a", 12);
+function FeedbackBadgeComponent_ng_template_6_a_5_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "a", 9);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r6 = ɵɵnextContext(2);
-    ɵɵproperty("href", ctx_r6.feedbackLink.toString(), ɵɵsanitizeUrl);
+    const ctx_r4 = ɵɵnextContext(2);
+    ɵɵproperty("href", ctx_r4.feedbackLink.toString(), ɵɵsanitizeUrl);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r6.strings.MsftSmeShell.Angular.Badges.Common.feedback);
+    ɵɵtextInterpolate(ctx_r4.strings.MsftSmeShell.Angular.Badges.Common.feedback);
 } }
-function FeedbackBadgeComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "h3", 8);
+function FeedbackBadgeComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "p", 6);
     ɵɵtext(1);
     ɵɵelementEnd();
-    ɵɵelementStart(2, "p", 9);
-    ɵɵtext(3);
-    ɵɵelementEnd();
-    ɵɵelementStart(4, "div", 10);
-    ɵɵtemplate(5, FeedbackBadgeComponent_ng_template_2_a_5_Template, 2, 2, "a", 11);
+    ɵɵelementStart(2, "div", 7);
+    ɵɵtemplate(3, FeedbackBadgeComponent_ng_template_6_a_3_Template, 2, 2, "a", 8);
     ɵɵelementEnd();
-    ɵɵelementStart(6, "div", 10);
-    ɵɵtemplate(7, FeedbackBadgeComponent_ng_template_2_a_7_Template, 2, 2, "a", 11);
+    ɵɵelementStart(4, "div", 7);
+    ɵɵtemplate(5, FeedbackBadgeComponent_ng_template_6_a_5_Template, 2, 2, "a", 8);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const hostData_r4 = ctx.hostData;
-    const ctx_r3 = ɵɵnextContext();
-    ɵɵproperty("id", hostData_r4.ariaLabelId);
-    ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r3.ariaLabel);
-    ɵɵadvance(1);
-    ɵɵproperty("id", hostData_r4.ariaDescriptionId);
-    ɵɵattribute("aria-describedby", hostData_r4.ariaDescriptionId);
+    const ctx_r1 = ɵɵnextContext();
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r3.description);
+    ɵɵtextInterpolate(ctx_r1.description);
     ɵɵadvance(2);
-    ɵɵproperty("ngIf", !!ctx_r3.learnMoreLink);
+    ɵɵproperty("ngIf", !!ctx_r1.learnMoreLink);
     ɵɵadvance(2);
-    ɵɵproperty("ngIf", ctx_r3.showFeedbackLink);
+    ɵɵproperty("ngIf", ctx_r1.showFeedbackLink);
 } }
+const _c1$u = function (a1) { return ["sme-icon", a1]; };
 /**
  * Defines a feedback badge
  */
@@ -33112,15 +33259,26 @@ class FeedbackBadgeComponent extends CoreBadgeBaseComponent {
     }
 }
 /** @nocollapse */ FeedbackBadgeComponent.ɵfac = function FeedbackBadgeComponent_Factory(t) { return new (t || FeedbackBadgeComponent)(ɵɵdirectiveInject(Injector)); };
-/** @nocollapse */ FeedbackBadgeComponent.ɵcmp = ɵɵdefineComponent({ type: FeedbackBadgeComponent, selectors: [["sme-badge", "type", "feedback"]], features: [ɵɵInheritDefinitionFeature], attrs: _c0$10, decls: 4, vars: 2, consts: [["tabindex", "0", 3, "smeTooltip", "title", 4, "ngIf"], [3, "smeTooltip", "title", 4, "ngIf"], ["class", "sme-arrange-stack-v"], ["defaultTooltip", ""], ["tabindex", "0", 3, "smeTooltip", "title"], ["aria-hidden", "true"], ["aria-hidden", "true", 3, "ngClass"], [3, "smeTooltip", "title"], [1, "sme-screen-reader", 3, "id"], [1, "sme-margin-bottom-xs", "sme-font-label", 3, "id"], [1, "sme-position-stretch-h"], ["target", "about:blank", "class", "sme-link", 3, "href", 4, "ngIf"], ["target", "about:blank", 1, "sme-link", 3, "href"]], template: function FeedbackBadgeComponent_Template(rf, ctx) { if (rf & 1) {
-        ɵɵtemplate(0, FeedbackBadgeComponent_p_0_Template, 4, 7, "p", 0);
-        ɵɵtemplate(1, FeedbackBadgeComponent_p_1_Template, 3, 4, "p", 1);
-        ɵɵtemplate(2, FeedbackBadgeComponent_ng_template_2_Template, 8, 7, "ng-template", 2, 3, ɵɵtemplateRefExtractor);
+/** @nocollapse */ FeedbackBadgeComponent.ɵcmp = ɵɵdefineComponent({ type: FeedbackBadgeComponent, selectors: [["sme-badge", "type", "feedback"]], features: [ɵɵInheritDefinitionFeature], attrs: _c0$10, decls: 8, vars: 6, consts: [["tabindex", "0", 3, "smeTooltip"], [1, "sme-screen-reader"], ["aria-hidden", "true"], ["aria-hidden", "true", 3, "ngClass"], ["class", "sme-arrange-stack-v"], ["defaultTooltip", ""], [1, "sme-margin-bottom-xs", "sme-font-label"], [1, "sme-position-stretch-h"], ["target", "about:blank", "class", "sme-link", 3, "href", 4, "ngIf"], ["target", "about:blank", 1, "sme-link", 3, "href"]], template: function FeedbackBadgeComponent_Template(rf, ctx) { if (rf & 1) {
+        ɵɵelementStart(0, "p", 0);
+        ɵɵelementStart(1, "span", 1);
+        ɵɵtext(2);
+        ɵɵelementEnd();
+        ɵɵelementStart(3, "span", 2);
+        ɵɵtext(4);
+        ɵɵelementEnd();
+        ɵɵelement(5, "span", 3);
+        ɵɵelementEnd();
+        ɵɵtemplate(6, FeedbackBadgeComponent_ng_template_6_Template, 6, 3, "ng-template", 4, 5, ɵɵtemplateRefExtractor);
     } if (rf & 2) {
-        ɵɵproperty("ngIf", ctx.resolvedTooltip || ctx.resolvedTitle);
+        ɵɵproperty("smeTooltip", ctx.resolvedTooltip);
+        ɵɵadvance(2);
+        ɵɵtextInterpolate(ctx.ariaLabel);
+        ɵɵadvance(2);
+        ɵɵtextInterpolate(ctx.label);
         ɵɵadvance(1);
-        ɵɵproperty("ngIf", !ctx.resolvedTooltip && !ctx.resolvedTitle);
-    } }, directives: [NgIf, TooltipDirective, NgClass], encapsulation: 2 });
+        ɵɵproperty("ngClass", ɵɵpureFunction1(4, _c1$u, ctx.icon));
+    } }, directives: [TooltipDirective, NgClass, NgIf], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(FeedbackBadgeComponent, [{
         type: Component,
         args: [{
@@ -33130,85 +33288,46 @@ class FeedbackBadgeComponent extends CoreBadgeBaseComponent {
     }], function () { return [{ type: Injector }]; }, null); })();
 
 const _c0$11 = ["type", "new"];
-const _c1$v = function (a1) { return ["sme-icon", a1]; };
-function NewBadgeComponent_p_0_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "p", 4);
-    ɵɵelementStart(1, "span", 5);
-    ɵɵtext(2);
-    ɵɵelementEnd();
-    ɵɵelement(3, "span", 6);
-    ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = ɵɵnextContext();
-    ɵɵproperty("smeTooltip", ctx_r0.resolvedTooltip)("title", ctx_r0.resolvedTitle);
-    ɵɵattribute("aria-label", ctx_r0.resolvedTitle ? ctx_r0.ariaLabel : null);
-    ɵɵadvance(2);
-    ɵɵtextInterpolate(ctx_r0.label);
-    ɵɵadvance(1);
-    ɵɵproperty("ngClass", ɵɵpureFunction1(5, _c1$v, ctx_r0.icon));
-} }
-function NewBadgeComponent_p_1_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "p", 7);
-    ɵɵelementStart(1, "span");
-    ɵɵtext(2);
-    ɵɵelementEnd();
-    ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = ɵɵnextContext();
-    ɵɵproperty("smeTooltip", ctx_r1.resolvedTooltip)("title", ctx_r1.resolvedTitle);
-    ɵɵattribute("aria-label", ctx_r1.resolvedTitle ? ctx_r1.ariaLabel : null);
-    ɵɵadvance(2);
-    ɵɵtextInterpolate(ctx_r1.label);
-} }
-function NewBadgeComponent_ng_template_2_a_5_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "a", 12);
+function NewBadgeComponent_ng_template_6_a_3_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "a", 9);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r5 = ɵɵnextContext(2);
-    ɵɵproperty("href", ctx_r5.learnMoreLink.toString(), ɵɵsanitizeUrl);
+    const ctx_r3 = ɵɵnextContext(2);
+    ɵɵproperty("href", ctx_r3.learnMoreLink.toString(), ɵɵsanitizeUrl);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r5.strings.MsftSmeShell.Angular.Badges.Common.learnMore);
+    ɵɵtextInterpolate(ctx_r3.strings.MsftSmeShell.Angular.Badges.Common.learnMore);
 } }
-function NewBadgeComponent_ng_template_2_a_7_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "a", 12);
+function NewBadgeComponent_ng_template_6_a_5_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "a", 9);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r6 = ɵɵnextContext(2);
-    ɵɵproperty("href", ctx_r6.feedbackLink.toString(), ɵɵsanitizeUrl);
+    const ctx_r4 = ɵɵnextContext(2);
+    ɵɵproperty("href", ctx_r4.feedbackLink.toString(), ɵɵsanitizeUrl);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r6.strings.MsftSmeShell.Angular.Badges.Common.feedback);
+    ɵɵtextInterpolate(ctx_r4.strings.MsftSmeShell.Angular.Badges.Common.feedback);
 } }
-function NewBadgeComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "h3", 8);
+function NewBadgeComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "p", 6);
     ɵɵtext(1);
     ɵɵelementEnd();
-    ɵɵelementStart(2, "p", 9);
-    ɵɵtext(3);
-    ɵɵelementEnd();
-    ɵɵelementStart(4, "div", 10);
-    ɵɵtemplate(5, NewBadgeComponent_ng_template_2_a_5_Template, 2, 2, "a", 11);
+    ɵɵelementStart(2, "div", 7);
+    ɵɵtemplate(3, NewBadgeComponent_ng_template_6_a_3_Template, 2, 2, "a", 8);
     ɵɵelementEnd();
-    ɵɵelementStart(6, "div", 10);
-    ɵɵtemplate(7, NewBadgeComponent_ng_template_2_a_7_Template, 2, 2, "a", 11);
+    ɵɵelementStart(4, "div", 7);
+    ɵɵtemplate(5, NewBadgeComponent_ng_template_6_a_5_Template, 2, 2, "a", 8);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const hostData_r4 = ctx.hostData;
-    const ctx_r3 = ɵɵnextContext();
-    ɵɵproperty("id", hostData_r4.ariaLabelId);
-    ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r3.ariaLabel);
-    ɵɵadvance(1);
-    ɵɵproperty("id", hostData_r4.ariaDescriptionId);
-    ɵɵattribute("aria-describedby", hostData_r4.ariaDescriptionId);
+    const ctx_r1 = ɵɵnextContext();
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r3.description);
+    ɵɵtextInterpolate(ctx_r1.description);
     ɵɵadvance(2);
-    ɵɵproperty("ngIf", !!ctx_r3.learnMoreLink);
+    ɵɵproperty("ngIf", !!ctx_r1.learnMoreLink);
     ɵɵadvance(2);
-    ɵɵproperty("ngIf", ctx_r3.showFeedbackLink);
+    ɵɵproperty("ngIf", ctx_r1.showFeedbackLink);
 } }
+const _c1$v = function (a1) { return ["sme-icon", a1]; };
 /**
  * Defines a 'new' badge
  */
@@ -33238,15 +33357,26 @@ class NewBadgeComponent extends CoreBadgeBaseComponent {
     }
 }
 /** @nocollapse */ NewBadgeComponent.ɵfac = function NewBadgeComponent_Factory(t) { return new (t || NewBadgeComponent)(ɵɵdirectiveInject(Injector)); };
-/** @nocollapse */ NewBadgeComponent.ɵcmp = ɵɵdefineComponent({ type: NewBadgeComponent, selectors: [["sme-badge", "type", "new"]], features: [ɵɵInheritDefinitionFeature], attrs: _c0$11, decls: 4, vars: 2, consts: [["tabindex", "0", 3, "smeTooltip", "title", 4, "ngIf"], [3, "smeTooltip", "title", 4, "ngIf"], ["class", "sme-arrange-stack-v"], ["defaultTooltip", ""], ["tabindex", "0", 3, "smeTooltip", "title"], ["aria-hidden", "true"], ["aria-hidden", "true", 3, "ngClass"], [3, "smeTooltip", "title"], [1, "sme-screen-reader", 3, "id"], [1, "sme-margin-bottom-xs", "sme-font-label", 3, "id"], [1, "sme-position-stretch-h"], ["target", "about:blank", "class", "sme-link", 3, "href", 4, "ngIf"], ["target", "about:blank", 1, "sme-link", 3, "href"]], template: function NewBadgeComponent_Template(rf, ctx) { if (rf & 1) {
-        ɵɵtemplate(0, NewBadgeComponent_p_0_Template, 4, 7, "p", 0);
-        ɵɵtemplate(1, NewBadgeComponent_p_1_Template, 3, 4, "p", 1);
-        ɵɵtemplate(2, NewBadgeComponent_ng_template_2_Template, 8, 7, "ng-template", 2, 3, ɵɵtemplateRefExtractor);
+/** @nocollapse */ NewBadgeComponent.ɵcmp = ɵɵdefineComponent({ type: NewBadgeComponent, selectors: [["sme-badge", "type", "new"]], features: [ɵɵInheritDefinitionFeature], attrs: _c0$11, decls: 8, vars: 6, consts: [["tabindex", "0", 3, "smeTooltip"], [1, "sme-screen-reader"], ["aria-hidden", "true"], ["aria-hidden", "true", 3, "ngClass"], ["class", "sme-arrange-stack-v"], ["defaultTooltip", ""], [1, "sme-margin-bottom-xs", "sme-font-label"], [1, "sme-position-stretch-h"], ["target", "about:blank", "class", "sme-link", 3, "href", 4, "ngIf"], ["target", "about:blank", 1, "sme-link", 3, "href"]], template: function NewBadgeComponent_Template(rf, ctx) { if (rf & 1) {
+        ɵɵelementStart(0, "p", 0);
+        ɵɵelementStart(1, "span", 1);
+        ɵɵtext(2);
+        ɵɵelementEnd();
+        ɵɵelementStart(3, "span", 2);
+        ɵɵtext(4);
+        ɵɵelementEnd();
+        ɵɵelement(5, "span", 3);
+        ɵɵelementEnd();
+        ɵɵtemplate(6, NewBadgeComponent_ng_template_6_Template, 6, 3, "ng-template", 4, 5, ɵɵtemplateRefExtractor);
     } if (rf & 2) {
-        ɵɵproperty("ngIf", ctx.resolvedTooltip || ctx.resolvedTitle);
+        ɵɵproperty("smeTooltip", ctx.resolvedTooltip);
+        ɵɵadvance(2);
+        ɵɵtextInterpolate(ctx.ariaLabel);
+        ɵɵadvance(2);
+        ɵɵtextInterpolate(ctx.label);
         ɵɵadvance(1);
-        ɵɵproperty("ngIf", !ctx.resolvedTooltip && !ctx.resolvedTitle);
-    } }, directives: [NgIf, TooltipDirective, NgClass], encapsulation: 2 });
+        ɵɵproperty("ngClass", ɵɵpureFunction1(4, _c1$v, ctx.icon));
+    } }, directives: [TooltipDirective, NgClass, NgIf], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(NewBadgeComponent, [{
         type: Component,
         args: [{
@@ -33256,85 +33386,46 @@ class NewBadgeComponent extends CoreBadgeBaseComponent {
     }], function () { return [{ type: Injector }]; }, null); })();
 
 const _c0$12 = ["type", "preview"];
-const _c1$w = function (a1) { return ["sme-icon", a1]; };
-function PreviewBadgeComponent_p_0_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "p", 4);
-    ɵɵelementStart(1, "span", 5);
-    ɵɵtext(2);
-    ɵɵelementEnd();
-    ɵɵelement(3, "span", 6);
-    ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = ɵɵnextContext();
-    ɵɵproperty("smeTooltip", ctx_r0.resolvedTooltip)("title", ctx_r0.resolvedTitle);
-    ɵɵattribute("aria-label", ctx_r0.resolvedTitle ? ctx_r0.ariaLabel : null);
-    ɵɵadvance(2);
-    ɵɵtextInterpolate(ctx_r0.label);
-    ɵɵadvance(1);
-    ɵɵproperty("ngClass", ɵɵpureFunction1(5, _c1$w, ctx_r0.icon));
-} }
-function PreviewBadgeComponent_p_1_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "p", 7);
-    ɵɵelementStart(1, "span");
-    ɵɵtext(2);
-    ɵɵelementEnd();
-    ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = ɵɵnextContext();
-    ɵɵproperty("smeTooltip", ctx_r1.resolvedTooltip)("title", ctx_r1.resolvedTitle);
-    ɵɵattribute("aria-label", ctx_r1.resolvedTitle ? ctx_r1.ariaLabel : null);
-    ɵɵadvance(2);
-    ɵɵtextInterpolate(ctx_r1.label);
-} }
-function PreviewBadgeComponent_ng_template_2_a_5_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "a", 12);
+function PreviewBadgeComponent_ng_template_6_a_3_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "a", 9);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r5 = ɵɵnextContext(2);
-    ɵɵproperty("href", ctx_r5.learnMoreLink.toString(), ɵɵsanitizeUrl);
+    const ctx_r3 = ɵɵnextContext(2);
+    ɵɵproperty("href", ctx_r3.learnMoreLink.toString(), ɵɵsanitizeUrl);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r5.strings.MsftSmeShell.Angular.Badges.Common.learnMore);
+    ɵɵtextInterpolate(ctx_r3.strings.MsftSmeShell.Angular.Badges.Common.learnMore);
 } }
-function PreviewBadgeComponent_ng_template_2_a_7_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "a", 12);
+function PreviewBadgeComponent_ng_template_6_a_5_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "a", 9);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r6 = ɵɵnextContext(2);
-    ɵɵproperty("href", ctx_r6.feedbackLink.toString(), ɵɵsanitizeUrl);
+    const ctx_r4 = ɵɵnextContext(2);
+    ɵɵproperty("href", ctx_r4.feedbackLink.toString(), ɵɵsanitizeUrl);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r6.strings.MsftSmeShell.Angular.Badges.Common.feedback);
+    ɵɵtextInterpolate(ctx_r4.strings.MsftSmeShell.Angular.Badges.Common.feedback);
 } }
-function PreviewBadgeComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "h3", 8);
+function PreviewBadgeComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "p", 6);
     ɵɵtext(1);
     ɵɵelementEnd();
-    ɵɵelementStart(2, "p", 9);
-    ɵɵtext(3);
-    ɵɵelementEnd();
-    ɵɵelementStart(4, "div", 10);
-    ɵɵtemplate(5, PreviewBadgeComponent_ng_template_2_a_5_Template, 2, 2, "a", 11);
+    ɵɵelementStart(2, "div", 7);
+    ɵɵtemplate(3, PreviewBadgeComponent_ng_template_6_a_3_Template, 2, 2, "a", 8);
     ɵɵelementEnd();
-    ɵɵelementStart(6, "div", 10);
-    ɵɵtemplate(7, PreviewBadgeComponent_ng_template_2_a_7_Template, 2, 2, "a", 11);
+    ɵɵelementStart(4, "div", 7);
+    ɵɵtemplate(5, PreviewBadgeComponent_ng_template_6_a_5_Template, 2, 2, "a", 8);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const hostData_r4 = ctx.hostData;
-    const ctx_r3 = ɵɵnextContext();
-    ɵɵproperty("id", hostData_r4.ariaLabelId);
-    ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r3.ariaLabel);
-    ɵɵadvance(1);
-    ɵɵproperty("id", hostData_r4.ariaDescriptionId);
-    ɵɵattribute("aria-describedby", hostData_r4.ariaDescriptionId);
+    const ctx_r1 = ɵɵnextContext();
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r3.description);
+    ɵɵtextInterpolate(ctx_r1.description);
     ɵɵadvance(2);
-    ɵɵproperty("ngIf", !!ctx_r3.learnMoreLink);
+    ɵɵproperty("ngIf", !!ctx_r1.learnMoreLink);
     ɵɵadvance(2);
-    ɵɵproperty("ngIf", ctx_r3.showFeedbackLink);
+    ɵɵproperty("ngIf", ctx_r1.showFeedbackLink);
 } }
+const _c1$w = function (a1) { return ["sme-icon", a1]; };
 /**
  * Defines a preview badge
  */
@@ -33365,15 +33456,26 @@ class PreviewBadgeComponent extends CoreBadgeBaseComponent {
     }
 }
 /** @nocollapse */ PreviewBadgeComponent.ɵfac = function PreviewBadgeComponent_Factory(t) { return new (t || PreviewBadgeComponent)(ɵɵdirectiveInject(Injector)); };
-/** @nocollapse */ PreviewBadgeComponent.ɵcmp = ɵɵdefineComponent({ type: PreviewBadgeComponent, selectors: [["sme-badge", "type", "preview"]], features: [ɵɵInheritDefinitionFeature], attrs: _c0$12, decls: 4, vars: 2, consts: [["tabindex", "0", 3, "smeTooltip", "title", 4, "ngIf"], [3, "smeTooltip", "title", 4, "ngIf"], ["class", "sme-arrange-stack-v"], ["defaultTooltip", ""], ["tabindex", "0", 3, "smeTooltip", "title"], ["aria-hidden", "true"], ["aria-hidden", "true", 3, "ngClass"], [3, "smeTooltip", "title"], [1, "sme-screen-reader", 3, "id"], [1, "sme-margin-bottom-xs", "sme-font-label", 3, "id"], [1, "sme-position-stretch-h"], ["target", "about:blank", "class", "sme-link", 3, "href", 4, "ngIf"], ["target", "about:blank", 1, "sme-link", 3, "href"]], template: function PreviewBadgeComponent_Template(rf, ctx) { if (rf & 1) {
-        ɵɵtemplate(0, PreviewBadgeComponent_p_0_Template, 4, 7, "p", 0);
-        ɵɵtemplate(1, PreviewBadgeComponent_p_1_Template, 3, 4, "p", 1);
-        ɵɵtemplate(2, PreviewBadgeComponent_ng_template_2_Template, 8, 7, "ng-template", 2, 3, ɵɵtemplateRefExtractor);
+/** @nocollapse */ PreviewBadgeComponent.ɵcmp = ɵɵdefineComponent({ type: PreviewBadgeComponent, selectors: [["sme-badge", "type", "preview"]], features: [ɵɵInheritDefinitionFeature], attrs: _c0$12, decls: 8, vars: 6, consts: [["tabindex", "0", 3, "smeTooltip"], [1, "sme-screen-reader"], ["aria-hidden", "true"], ["aria-hidden", "true", 3, "ngClass"], ["class", "sme-arrange-stack-v"], ["defaultTooltip", ""], [1, "sme-margin-bottom-xs", "sme-font-label"], [1, "sme-position-stretch-h"], ["target", "about:blank", "class", "sme-link", 3, "href", 4, "ngIf"], ["target", "about:blank", 1, "sme-link", 3, "href"]], template: function PreviewBadgeComponent_Template(rf, ctx) { if (rf & 1) {
+        ɵɵelementStart(0, "p", 0);
+        ɵɵelementStart(1, "span", 1);
+        ɵɵtext(2);
+        ɵɵelementEnd();
+        ɵɵelementStart(3, "span", 2);
+        ɵɵtext(4);
+        ɵɵelementEnd();
+        ɵɵelement(5, "span", 3);
+        ɵɵelementEnd();
+        ɵɵtemplate(6, PreviewBadgeComponent_ng_template_6_Template, 6, 3, "ng-template", 4, 5, ɵɵtemplateRefExtractor);
     } if (rf & 2) {
-        ɵɵproperty("ngIf", ctx.resolvedTooltip || ctx.resolvedTitle);
+        ɵɵproperty("smeTooltip", ctx.resolvedTooltip);
+        ɵɵadvance(2);
+        ɵɵtextInterpolate(ctx.ariaLabel);
+        ɵɵadvance(2);
+        ɵɵtextInterpolate(ctx.label);
         ɵɵadvance(1);
-        ɵɵproperty("ngIf", !ctx.resolvedTooltip && !ctx.resolvedTitle);
-    } }, directives: [NgIf, TooltipDirective, NgClass], encapsulation: 2 });
+        ɵɵproperty("ngClass", ɵɵpureFunction1(4, _c1$w, ctx.icon));
+    } }, directives: [TooltipDirective, NgClass, NgIf], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(PreviewBadgeComponent, [{
         type: Component,
         args: [{
@@ -33383,85 +33485,46 @@ class PreviewBadgeComponent extends CoreBadgeBaseComponent {
     }], function () { return [{ type: Injector }]; }, null); })();
 
 const _c0$13 = ["type", "bugfixes-feature"];
-const _c1$x = function (a1) { return ["sme-icon", a1]; };
-function BugFixesFeatureBadgeComponent_p_0_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "p", 4);
-    ɵɵelementStart(1, "span", 5);
-    ɵɵtext(2);
-    ɵɵelementEnd();
-    ɵɵelement(3, "span", 6);
-    ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = ɵɵnextContext();
-    ɵɵproperty("smeTooltip", ctx_r0.resolvedTooltip)("title", ctx_r0.resolvedTitle);
-    ɵɵattribute("aria-label", ctx_r0.resolvedTitle ? ctx_r0.ariaLabel : null);
-    ɵɵadvance(2);
-    ɵɵtextInterpolate(ctx_r0.label);
-    ɵɵadvance(1);
-    ɵɵproperty("ngClass", ɵɵpureFunction1(5, _c1$x, ctx_r0.icon));
-} }
-function BugFixesFeatureBadgeComponent_p_1_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "p", 7);
-    ɵɵelementStart(1, "span");
-    ɵɵtext(2);
-    ɵɵelementEnd();
-    ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = ɵɵnextContext();
-    ɵɵproperty("smeTooltip", ctx_r1.resolvedTooltip)("title", ctx_r1.resolvedTitle);
-    ɵɵattribute("aria-label", ctx_r1.resolvedTitle ? ctx_r1.ariaLabel : null);
-    ɵɵadvance(2);
-    ɵɵtextInterpolate(ctx_r1.label);
-} }
-function BugFixesFeatureBadgeComponent_ng_template_2_a_5_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "a", 12);
+function BugFixesFeatureBadgeComponent_ng_template_6_a_3_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "a", 9);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r5 = ɵɵnextContext(2);
-    ɵɵproperty("href", ctx_r5.learnMoreLink.toString(), ɵɵsanitizeUrl);
+    const ctx_r3 = ɵɵnextContext(2);
+    ɵɵproperty("href", ctx_r3.learnMoreLink.toString(), ɵɵsanitizeUrl);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r5.strings.MsftSmeShell.Angular.Badges.Common.learnMore);
+    ɵɵtextInterpolate(ctx_r3.strings.MsftSmeShell.Angular.Badges.Common.learnMore);
 } }
-function BugFixesFeatureBadgeComponent_ng_template_2_a_7_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "a", 12);
+function BugFixesFeatureBadgeComponent_ng_template_6_a_5_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "a", 9);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r6 = ɵɵnextContext(2);
-    ɵɵproperty("href", ctx_r6.feedbackLink.toString(), ɵɵsanitizeUrl);
+    const ctx_r4 = ɵɵnextContext(2);
+    ɵɵproperty("href", ctx_r4.feedbackLink.toString(), ɵɵsanitizeUrl);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r6.strings.MsftSmeShell.Angular.Badges.Common.feedback);
+    ɵɵtextInterpolate(ctx_r4.strings.MsftSmeShell.Angular.Badges.Common.feedback);
 } }
-function BugFixesFeatureBadgeComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "h3", 8);
+function BugFixesFeatureBadgeComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "p", 6);
     ɵɵtext(1);
     ɵɵelementEnd();
-    ɵɵelementStart(2, "p", 9);
-    ɵɵtext(3);
-    ɵɵelementEnd();
-    ɵɵelementStart(4, "div", 10);
-    ɵɵtemplate(5, BugFixesFeatureBadgeComponent_ng_template_2_a_5_Template, 2, 2, "a", 11);
+    ɵɵelementStart(2, "div", 7);
+    ɵɵtemplate(3, BugFixesFeatureBadgeComponent_ng_template_6_a_3_Template, 2, 2, "a", 8);
     ɵɵelementEnd();
-    ɵɵelementStart(6, "div", 10);
-    ɵɵtemplate(7, BugFixesFeatureBadgeComponent_ng_template_2_a_7_Template, 2, 2, "a", 11);
+    ɵɵelementStart(4, "div", 7);
+    ɵɵtemplate(5, BugFixesFeatureBadgeComponent_ng_template_6_a_5_Template, 2, 2, "a", 8);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const hostData_r4 = ctx.hostData;
-    const ctx_r3 = ɵɵnextContext();
-    ɵɵproperty("id", hostData_r4.ariaLabelId);
-    ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r3.ariaLabel);
-    ɵɵadvance(1);
-    ɵɵproperty("id", hostData_r4.ariaDescriptionId);
-    ɵɵattribute("aria-describedby", hostData_r4.ariaDescriptionId);
+    const ctx_r1 = ɵɵnextContext();
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r3.description);
+    ɵɵtextInterpolate(ctx_r1.description);
     ɵɵadvance(2);
-    ɵɵproperty("ngIf", !!ctx_r3.learnMoreLink);
+    ɵɵproperty("ngIf", !!ctx_r1.learnMoreLink);
     ɵɵadvance(2);
-    ɵɵproperty("ngIf", ctx_r3.showFeedbackLink);
+    ɵɵproperty("ngIf", ctx_r1.showFeedbackLink);
 } }
+const _c1$x = function (a1) { return ["sme-icon", a1]; };
 /**
  * Defines an 'improvement-feature' badge
  */
@@ -33494,15 +33557,26 @@ class BugFixesFeatureBadgeComponent extends CoreBadgeBaseComponent {
     }
 }
 /** @nocollapse */ BugFixesFeatureBadgeComponent.ɵfac = function BugFixesFeatureBadgeComponent_Factory(t) { return new (t || BugFixesFeatureBadgeComponent)(ɵɵdirectiveInject(Injector)); };
-/** @nocollapse */ BugFixesFeatureBadgeComponent.ɵcmp = ɵɵdefineComponent({ type: BugFixesFeatureBadgeComponent, selectors: [["sme-badge", "type", "bugfixes-feature"]], features: [ɵɵInheritDefinitionFeature], attrs: _c0$13, decls: 4, vars: 2, consts: [["tabindex", "0", 3, "smeTooltip", "title", 4, "ngIf"], [3, "smeTooltip", "title", 4, "ngIf"], ["class", "sme-arrange-stack-v"], ["defaultTooltip", ""], ["tabindex", "0", 3, "smeTooltip", "title"], ["aria-hidden", "true"], ["aria-hidden", "true", 3, "ngClass"], [3, "smeTooltip", "title"], [1, "sme-screen-reader", 3, "id"], [1, "sme-margin-bottom-xs", "sme-font-label", 3, "id"], [1, "sme-position-stretch-h"], ["target", "about:blank", "class", "sme-link", 3, "href", 4, "ngIf"], ["target", "about:blank", 1, "sme-link", 3, "href"]], template: function BugFixesFeatureBadgeComponent_Template(rf, ctx) { if (rf & 1) {
-        ɵɵtemplate(0, BugFixesFeatureBadgeComponent_p_0_Template, 4, 7, "p", 0);
-        ɵɵtemplate(1, BugFixesFeatureBadgeComponent_p_1_Template, 3, 4, "p", 1);
-        ɵɵtemplate(2, BugFixesFeatureBadgeComponent_ng_template_2_Template, 8, 7, "ng-template", 2, 3, ɵɵtemplateRefExtractor);
+/** @nocollapse */ BugFixesFeatureBadgeComponent.ɵcmp = ɵɵdefineComponent({ type: BugFixesFeatureBadgeComponent, selectors: [["sme-badge", "type", "bugfixes-feature"]], features: [ɵɵInheritDefinitionFeature], attrs: _c0$13, decls: 8, vars: 6, consts: [["tabindex", "0", 3, "smeTooltip"], [1, "sme-screen-reader"], ["aria-hidden", "true"], ["aria-hidden", "true", 3, "ngClass"], ["class", "sme-arrange-stack-v"], ["defaultTooltip", ""], [1, "sme-margin-bottom-xs", "sme-font-label"], [1, "sme-position-stretch-h"], ["target", "about:blank", "class", "sme-link", 3, "href", 4, "ngIf"], ["target", "about:blank", 1, "sme-link", 3, "href"]], template: function BugFixesFeatureBadgeComponent_Template(rf, ctx) { if (rf & 1) {
+        ɵɵelementStart(0, "p", 0);
+        ɵɵelementStart(1, "span", 1);
+        ɵɵtext(2);
+        ɵɵelementEnd();
+        ɵɵelementStart(3, "span", 2);
+        ɵɵtext(4);
+        ɵɵelementEnd();
+        ɵɵelement(5, "span", 3);
+        ɵɵelementEnd();
+        ɵɵtemplate(6, BugFixesFeatureBadgeComponent_ng_template_6_Template, 6, 3, "ng-template", 4, 5, ɵɵtemplateRefExtractor);
     } if (rf & 2) {
-        ɵɵproperty("ngIf", ctx.resolvedTooltip || ctx.resolvedTitle);
+        ɵɵproperty("smeTooltip", ctx.resolvedTooltip);
+        ɵɵadvance(2);
+        ɵɵtextInterpolate(ctx.ariaLabel);
+        ɵɵadvance(2);
+        ɵɵtextInterpolate(ctx.label);
         ɵɵadvance(1);
-        ɵɵproperty("ngIf", !ctx.resolvedTooltip && !ctx.resolvedTitle);
-    } }, directives: [NgIf, TooltipDirective, NgClass], encapsulation: 2 });
+        ɵɵproperty("ngClass", ɵɵpureFunction1(4, _c1$x, ctx.icon));
+    } }, directives: [TooltipDirective, NgClass, NgIf], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(BugFixesFeatureBadgeComponent, [{
         type: Component,
         args: [{
@@ -33512,85 +33586,46 @@ class BugFixesFeatureBadgeComponent extends CoreBadgeBaseComponent {
     }], function () { return [{ type: Injector }]; }, null); })();
 
 const _c0$14 = ["type", "credsspenabled"];
-const _c1$y = function (a1) { return ["sme-icon", a1]; };
-function CredSSPEnabledBadgeComponent_p_0_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "p", 4);
-    ɵɵelementStart(1, "span", 5);
-    ɵɵtext(2);
-    ɵɵelementEnd();
-    ɵɵelement(3, "span", 6);
-    ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = ɵɵnextContext();
-    ɵɵproperty("smeTooltip", ctx_r0.resolvedTooltip)("title", ctx_r0.resolvedTitle);
-    ɵɵattribute("aria-label", ctx_r0.resolvedTitle ? ctx_r0.ariaLabel : null);
-    ɵɵadvance(2);
-    ɵɵtextInterpolate(ctx_r0.label);
-    ɵɵadvance(1);
-    ɵɵproperty("ngClass", ɵɵpureFunction1(5, _c1$y, ctx_r0.icon));
-} }
-function CredSSPEnabledBadgeComponent_p_1_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "p", 7);
-    ɵɵelementStart(1, "span");
-    ɵɵtext(2);
-    ɵɵelementEnd();
-    ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = ɵɵnextContext();
-    ɵɵproperty("smeTooltip", ctx_r1.resolvedTooltip)("title", ctx_r1.resolvedTitle);
-    ɵɵattribute("aria-label", ctx_r1.resolvedTitle ? ctx_r1.ariaLabel : null);
-    ɵɵadvance(2);
-    ɵɵtextInterpolate(ctx_r1.label);
-} }
-function CredSSPEnabledBadgeComponent_ng_template_2_a_5_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "a", 12);
+function CredSSPEnabledBadgeComponent_ng_template_6_a_3_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "a", 9);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r5 = ɵɵnextContext(2);
-    ɵɵproperty("href", ctx_r5.learnMoreLink.toString(), ɵɵsanitizeUrl);
+    const ctx_r3 = ɵɵnextContext(2);
+    ɵɵproperty("href", ctx_r3.learnMoreLink.toString(), ɵɵsanitizeUrl);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r5.strings.MsftSmeShell.Angular.Badges.Common.learnMore);
+    ɵɵtextInterpolate(ctx_r3.strings.MsftSmeShell.Angular.Badges.Common.learnMore);
 } }
-function CredSSPEnabledBadgeComponent_ng_template_2_a_7_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "a", 12);
+function CredSSPEnabledBadgeComponent_ng_template_6_a_5_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "a", 9);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r6 = ɵɵnextContext(2);
-    ɵɵproperty("href", ctx_r6.feedbackLink.toString(), ɵɵsanitizeUrl);
+    const ctx_r4 = ɵɵnextContext(2);
+    ɵɵproperty("href", ctx_r4.feedbackLink.toString(), ɵɵsanitizeUrl);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r6.strings.MsftSmeShell.Angular.Badges.Common.feedback);
+    ɵɵtextInterpolate(ctx_r4.strings.MsftSmeShell.Angular.Badges.Common.feedback);
 } }
-function CredSSPEnabledBadgeComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "h3", 8);
+function CredSSPEnabledBadgeComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "p", 6);
     ɵɵtext(1);
     ɵɵelementEnd();
-    ɵɵelementStart(2, "p", 9);
-    ɵɵtext(3);
-    ɵɵelementEnd();
-    ɵɵelementStart(4, "div", 10);
-    ɵɵtemplate(5, CredSSPEnabledBadgeComponent_ng_template_2_a_5_Template, 2, 2, "a", 11);
+    ɵɵelementStart(2, "div", 7);
+    ɵɵtemplate(3, CredSSPEnabledBadgeComponent_ng_template_6_a_3_Template, 2, 2, "a", 8);
     ɵɵelementEnd();
-    ɵɵelementStart(6, "div", 10);
-    ɵɵtemplate(7, CredSSPEnabledBadgeComponent_ng_template_2_a_7_Template, 2, 2, "a", 11);
+    ɵɵelementStart(4, "div", 7);
+    ɵɵtemplate(5, CredSSPEnabledBadgeComponent_ng_template_6_a_5_Template, 2, 2, "a", 8);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const hostData_r4 = ctx.hostData;
-    const ctx_r3 = ɵɵnextContext();
-    ɵɵproperty("id", hostData_r4.ariaLabelId);
-    ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r3.ariaLabel);
-    ɵɵadvance(1);
-    ɵɵproperty("id", hostData_r4.ariaDescriptionId);
-    ɵɵattribute("aria-describedby", hostData_r4.ariaDescriptionId);
+    const ctx_r1 = ɵɵnextContext();
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r3.description);
+    ɵɵtextInterpolate(ctx_r1.description);
     ɵɵadvance(2);
-    ɵɵproperty("ngIf", !!ctx_r3.learnMoreLink);
+    ɵɵproperty("ngIf", !!ctx_r1.learnMoreLink);
     ɵɵadvance(2);
-    ɵɵproperty("ngIf", ctx_r3.showFeedbackLink);
+    ɵɵproperty("ngIf", ctx_r1.showFeedbackLink);
 } }
+const _c1$y = function (a1) { return ["sme-icon", a1]; };
 /**
  * Defines a preview badge
  */
@@ -33620,15 +33655,26 @@ class CredSSPEnabledBadgeComponent extends CoreBadgeBaseComponent {
     }
 }
 /** @nocollapse */ CredSSPEnabledBadgeComponent.ɵfac = function CredSSPEnabledBadgeComponent_Factory(t) { return new (t || CredSSPEnabledBadgeComponent)(ɵɵdirectiveInject(Injector)); };
-/** @nocollapse */ CredSSPEnabledBadgeComponent.ɵcmp = ɵɵdefineComponent({ type: CredSSPEnabledBadgeComponent, selectors: [["sme-badge", "type", "credsspenabled"]], features: [ɵɵInheritDefinitionFeature], attrs: _c0$14, decls: 4, vars: 2, consts: [["tabindex", "0", 3, "smeTooltip", "title", 4, "ngIf"], [3, "smeTooltip", "title", 4, "ngIf"], ["class", "sme-arrange-stack-v"], ["defaultTooltip", ""], ["tabindex", "0", 3, "smeTooltip", "title"], ["aria-hidden", "true"], ["aria-hidden", "true", 3, "ngClass"], [3, "smeTooltip", "title"], [1, "sme-screen-reader", 3, "id"], [1, "sme-margin-bottom-xs", "sme-font-label", 3, "id"], [1, "sme-position-stretch-h"], ["target", "about:blank", "class", "sme-link", 3, "href", 4, "ngIf"], ["target", "about:blank", 1, "sme-link", 3, "href"]], template: function CredSSPEnabledBadgeComponent_Template(rf, ctx) { if (rf & 1) {
-        ɵɵtemplate(0, CredSSPEnabledBadgeComponent_p_0_Template, 4, 7, "p", 0);
-        ɵɵtemplate(1, CredSSPEnabledBadgeComponent_p_1_Template, 3, 4, "p", 1);
-        ɵɵtemplate(2, CredSSPEnabledBadgeComponent_ng_template_2_Template, 8, 7, "ng-template", 2, 3, ɵɵtemplateRefExtractor);
+/** @nocollapse */ CredSSPEnabledBadgeComponent.ɵcmp = ɵɵdefineComponent({ type: CredSSPEnabledBadgeComponent, selectors: [["sme-badge", "type", "credsspenabled"]], features: [ɵɵInheritDefinitionFeature], attrs: _c0$14, decls: 8, vars: 6, consts: [["tabindex", "0", 3, "smeTooltip"], [1, "sme-screen-reader"], ["aria-hidden", "true"], ["aria-hidden", "true", 3, "ngClass"], ["class", "sme-arrange-stack-v"], ["defaultTooltip", ""], [1, "sme-margin-bottom-xs", "sme-font-label"], [1, "sme-position-stretch-h"], ["target", "about:blank", "class", "sme-link", 3, "href", 4, "ngIf"], ["target", "about:blank", 1, "sme-link", 3, "href"]], template: function CredSSPEnabledBadgeComponent_Template(rf, ctx) { if (rf & 1) {
+        ɵɵelementStart(0, "p", 0);
+        ɵɵelementStart(1, "span", 1);
+        ɵɵtext(2);
+        ɵɵelementEnd();
+        ɵɵelementStart(3, "span", 2);
+        ɵɵtext(4);
+        ɵɵelementEnd();
+        ɵɵelement(5, "span", 3);
+        ɵɵelementEnd();
+        ɵɵtemplate(6, CredSSPEnabledBadgeComponent_ng_template_6_Template, 6, 3, "ng-template", 4, 5, ɵɵtemplateRefExtractor);
     } if (rf & 2) {
-        ɵɵproperty("ngIf", ctx.resolvedTooltip || ctx.resolvedTitle);
+        ɵɵproperty("smeTooltip", ctx.resolvedTooltip);
+        ɵɵadvance(2);
+        ɵɵtextInterpolate(ctx.ariaLabel);
+        ɵɵadvance(2);
+        ɵɵtextInterpolate(ctx.label);
         ɵɵadvance(1);
-        ɵɵproperty("ngIf", !ctx.resolvedTooltip && !ctx.resolvedTitle);
-    } }, directives: [NgIf, TooltipDirective, NgClass], encapsulation: 2 });
+        ɵɵproperty("ngClass", ɵɵpureFunction1(4, _c1$y, ctx.icon));
+    } }, directives: [TooltipDirective, NgClass, NgIf], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(CredSSPEnabledBadgeComponent, [{
         type: Component,
         args: [{
@@ -33638,85 +33684,46 @@ class CredSSPEnabledBadgeComponent extends CoreBadgeBaseComponent {
     }], function () { return [{ type: Injector }]; }, null); })();
 
 const _c0$15 = ["type", "critical"];
-const _c1$z = function (a1) { return ["sme-icon", a1]; };
-function CriticalBadgeComponent_p_0_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "p", 4);
-    ɵɵelementStart(1, "span", 5);
-    ɵɵtext(2);
-    ɵɵelementEnd();
-    ɵɵelement(3, "span", 6);
-    ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = ɵɵnextContext();
-    ɵɵproperty("smeTooltip", ctx_r0.resolvedTooltip)("title", ctx_r0.resolvedTitle);
-    ɵɵattribute("aria-label", ctx_r0.resolvedTitle ? ctx_r0.ariaLabel : null);
-    ɵɵadvance(2);
-    ɵɵtextInterpolate(ctx_r0.label);
-    ɵɵadvance(1);
-    ɵɵproperty("ngClass", ɵɵpureFunction1(5, _c1$z, ctx_r0.icon));
-} }
-function CriticalBadgeComponent_p_1_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "p", 7);
-    ɵɵelementStart(1, "span");
-    ɵɵtext(2);
-    ɵɵelementEnd();
-    ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = ɵɵnextContext();
-    ɵɵproperty("smeTooltip", ctx_r1.resolvedTooltip)("title", ctx_r1.resolvedTitle);
-    ɵɵattribute("aria-label", ctx_r1.resolvedTitle ? ctx_r1.ariaLabel : null);
-    ɵɵadvance(2);
-    ɵɵtextInterpolate(ctx_r1.label);
-} }
-function CriticalBadgeComponent_ng_template_2_a_5_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "a", 12);
+function CriticalBadgeComponent_ng_template_6_a_3_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "a", 9);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r5 = ɵɵnextContext(2);
-    ɵɵproperty("href", ctx_r5.learnMoreLink.toString(), ɵɵsanitizeUrl);
+    const ctx_r3 = ɵɵnextContext(2);
+    ɵɵproperty("href", ctx_r3.learnMoreLink.toString(), ɵɵsanitizeUrl);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r5.strings.MsftSmeShell.Angular.Badges.Common.learnMore);
+    ɵɵtextInterpolate(ctx_r3.strings.MsftSmeShell.Angular.Badges.Common.learnMore);
 } }
-function CriticalBadgeComponent_ng_template_2_a_7_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "a", 12);
+function CriticalBadgeComponent_ng_template_6_a_5_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "a", 9);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r6 = ɵɵnextContext(2);
-    ɵɵproperty("href", ctx_r6.feedbackLink.toString(), ɵɵsanitizeUrl);
+    const ctx_r4 = ɵɵnextContext(2);
+    ɵɵproperty("href", ctx_r4.feedbackLink.toString(), ɵɵsanitizeUrl);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r6.strings.MsftSmeShell.Angular.Badges.Common.feedback);
+    ɵɵtextInterpolate(ctx_r4.strings.MsftSmeShell.Angular.Badges.Common.feedback);
 } }
-function CriticalBadgeComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "h3", 8);
+function CriticalBadgeComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "p", 6);
     ɵɵtext(1);
     ɵɵelementEnd();
-    ɵɵelementStart(2, "p", 9);
-    ɵɵtext(3);
+    ɵɵelementStart(2, "div", 7);
+    ɵɵtemplate(3, CriticalBadgeComponent_ng_template_6_a_3_Template, 2, 2, "a", 8);
     ɵɵelementEnd();
-    ɵɵelementStart(4, "div", 10);
-    ɵɵtemplate(5, CriticalBadgeComponent_ng_template_2_a_5_Template, 2, 2, "a", 11);
-    ɵɵelementEnd();
-    ɵɵelementStart(6, "div", 10);
-    ɵɵtemplate(7, CriticalBadgeComponent_ng_template_2_a_7_Template, 2, 2, "a", 11);
+    ɵɵelementStart(4, "div", 7);
+    ɵɵtemplate(5, CriticalBadgeComponent_ng_template_6_a_5_Template, 2, 2, "a", 8);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const hostData_r4 = ctx.hostData;
-    const ctx_r3 = ɵɵnextContext();
-    ɵɵproperty("id", hostData_r4.ariaLabelId);
-    ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r3.ariaLabel);
-    ɵɵadvance(1);
-    ɵɵproperty("id", hostData_r4.ariaDescriptionId);
-    ɵɵattribute("aria-describedby", hostData_r4.ariaDescriptionId);
+    const ctx_r1 = ɵɵnextContext();
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r3.description);
+    ɵɵtextInterpolate(ctx_r1.description);
     ɵɵadvance(2);
-    ɵɵproperty("ngIf", !!ctx_r3.learnMoreLink);
+    ɵɵproperty("ngIf", !!ctx_r1.learnMoreLink);
     ɵɵadvance(2);
-    ɵɵproperty("ngIf", ctx_r3.showFeedbackLink);
+    ɵɵproperty("ngIf", ctx_r1.showFeedbackLink);
 } }
+const _c1$z = function (a1) { return ["sme-icon", a1]; };
 /**
  * Defines the critical badge.
  */
@@ -33745,15 +33752,26 @@ class CriticalBadgeComponent extends CoreBadgeBaseComponent {
     }
 }
 /** @nocollapse */ CriticalBadgeComponent.ɵfac = function CriticalBadgeComponent_Factory(t) { return new (t || CriticalBadgeComponent)(ɵɵdirectiveInject(Injector)); };
-/** @nocollapse */ CriticalBadgeComponent.ɵcmp = ɵɵdefineComponent({ type: CriticalBadgeComponent, selectors: [["sme-badge", "type", "critical"]], features: [ɵɵInheritDefinitionFeature], attrs: _c0$15, decls: 4, vars: 2, consts: [["tabindex", "0", 3, "smeTooltip", "title", 4, "ngIf"], [3, "smeTooltip", "title", 4, "ngIf"], ["class", "sme-arrange-stack-v"], ["defaultTooltip", ""], ["tabindex", "0", 3, "smeTooltip", "title"], ["aria-hidden", "true"], ["aria-hidden", "true", 3, "ngClass"], [3, "smeTooltip", "title"], [1, "sme-screen-reader", 3, "id"], [1, "sme-margin-bottom-xs", "sme-font-label", 3, "id"], [1, "sme-position-stretch-h"], ["target", "about:blank", "class", "sme-link", 3, "href", 4, "ngIf"], ["target", "about:blank", 1, "sme-link", 3, "href"]], template: function CriticalBadgeComponent_Template(rf, ctx) { if (rf & 1) {
-        ɵɵtemplate(0, CriticalBadgeComponent_p_0_Template, 4, 7, "p", 0);
-        ɵɵtemplate(1, CriticalBadgeComponent_p_1_Template, 3, 4, "p", 1);
-        ɵɵtemplate(2, CriticalBadgeComponent_ng_template_2_Template, 8, 7, "ng-template", 2, 3, ɵɵtemplateRefExtractor);
+/** @nocollapse */ CriticalBadgeComponent.ɵcmp = ɵɵdefineComponent({ type: CriticalBadgeComponent, selectors: [["sme-badge", "type", "critical"]], features: [ɵɵInheritDefinitionFeature], attrs: _c0$15, decls: 8, vars: 6, consts: [["tabindex", "0", 3, "smeTooltip"], [1, "sme-screen-reader"], ["aria-hidden", "true"], ["aria-hidden", "true", 3, "ngClass"], ["class", "sme-arrange-stack-v"], ["defaultTooltip", ""], [1, "sme-margin-bottom-xs", "sme-font-label"], [1, "sme-position-stretch-h"], ["target", "about:blank", "class", "sme-link", 3, "href", 4, "ngIf"], ["target", "about:blank", 1, "sme-link", 3, "href"]], template: function CriticalBadgeComponent_Template(rf, ctx) { if (rf & 1) {
+        ɵɵelementStart(0, "p", 0);
+        ɵɵelementStart(1, "span", 1);
+        ɵɵtext(2);
+        ɵɵelementEnd();
+        ɵɵelementStart(3, "span", 2);
+        ɵɵtext(4);
+        ɵɵelementEnd();
+        ɵɵelement(5, "span", 3);
+        ɵɵelementEnd();
+        ɵɵtemplate(6, CriticalBadgeComponent_ng_template_6_Template, 6, 3, "ng-template", 4, 5, ɵɵtemplateRefExtractor);
     } if (rf & 2) {
-        ɵɵproperty("ngIf", ctx.resolvedTooltip || ctx.resolvedTitle);
+        ɵɵproperty("smeTooltip", ctx.resolvedTooltip);
+        ɵɵadvance(2);
+        ɵɵtextInterpolate(ctx.ariaLabel);
+        ɵɵadvance(2);
+        ɵɵtextInterpolate(ctx.label);
         ɵɵadvance(1);
-        ɵɵproperty("ngIf", !ctx.resolvedTooltip && !ctx.resolvedTitle);
-    } }, directives: [NgIf, TooltipDirective, NgClass], encapsulation: 2 });
+        ɵɵproperty("ngClass", ɵɵpureFunction1(4, _c1$z, ctx.icon));
+    } }, directives: [TooltipDirective, NgClass, NgIf], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(CriticalBadgeComponent, [{
         type: Component,
         args: [{
@@ -33763,85 +33781,46 @@ class CriticalBadgeComponent extends CoreBadgeBaseComponent {
     }], function () { return [{ type: Injector }]; }, null); })();
 
 const _c0$16 = ["type", "improvement-feature"];
-const _c1$A = function (a1) { return ["sme-icon", a1]; };
-function ImprovementFeatureBadgeComponent_p_0_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "p", 4);
-    ɵɵelementStart(1, "span", 5);
-    ɵɵtext(2);
-    ɵɵelementEnd();
-    ɵɵelement(3, "span", 6);
-    ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = ɵɵnextContext();
-    ɵɵproperty("smeTooltip", ctx_r0.resolvedTooltip)("title", ctx_r0.resolvedTitle);
-    ɵɵattribute("aria-label", ctx_r0.resolvedTitle ? ctx_r0.ariaLabel : null);
-    ɵɵadvance(2);
-    ɵɵtextInterpolate(ctx_r0.label);
-    ɵɵadvance(1);
-    ɵɵproperty("ngClass", ɵɵpureFunction1(5, _c1$A, ctx_r0.icon));
-} }
-function ImprovementFeatureBadgeComponent_p_1_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "p", 7);
-    ɵɵelementStart(1, "span");
-    ɵɵtext(2);
-    ɵɵelementEnd();
-    ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = ɵɵnextContext();
-    ɵɵproperty("smeTooltip", ctx_r1.resolvedTooltip)("title", ctx_r1.resolvedTitle);
-    ɵɵattribute("aria-label", ctx_r1.resolvedTitle ? ctx_r1.ariaLabel : null);
-    ɵɵadvance(2);
-    ɵɵtextInterpolate(ctx_r1.label);
-} }
-function ImprovementFeatureBadgeComponent_ng_template_2_a_5_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "a", 12);
+function ImprovementFeatureBadgeComponent_ng_template_6_a_3_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "a", 9);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r5 = ɵɵnextContext(2);
-    ɵɵproperty("href", ctx_r5.learnMoreLink.toString(), ɵɵsanitizeUrl);
+    const ctx_r3 = ɵɵnextContext(2);
+    ɵɵproperty("href", ctx_r3.learnMoreLink.toString(), ɵɵsanitizeUrl);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r5.strings.MsftSmeShell.Angular.Badges.Common.learnMore);
+    ɵɵtextInterpolate(ctx_r3.strings.MsftSmeShell.Angular.Badges.Common.learnMore);
 } }
-function ImprovementFeatureBadgeComponent_ng_template_2_a_7_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "a", 12);
+function ImprovementFeatureBadgeComponent_ng_template_6_a_5_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "a", 9);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r6 = ɵɵnextContext(2);
-    ɵɵproperty("href", ctx_r6.feedbackLink.toString(), ɵɵsanitizeUrl);
+    const ctx_r4 = ɵɵnextContext(2);
+    ɵɵproperty("href", ctx_r4.feedbackLink.toString(), ɵɵsanitizeUrl);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r6.strings.MsftSmeShell.Angular.Badges.Common.feedback);
+    ɵɵtextInterpolate(ctx_r4.strings.MsftSmeShell.Angular.Badges.Common.feedback);
 } }
-function ImprovementFeatureBadgeComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "h3", 8);
+function ImprovementFeatureBadgeComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "p", 6);
     ɵɵtext(1);
     ɵɵelementEnd();
-    ɵɵelementStart(2, "p", 9);
-    ɵɵtext(3);
-    ɵɵelementEnd();
-    ɵɵelementStart(4, "div", 10);
-    ɵɵtemplate(5, ImprovementFeatureBadgeComponent_ng_template_2_a_5_Template, 2, 2, "a", 11);
+    ɵɵelementStart(2, "div", 7);
+    ɵɵtemplate(3, ImprovementFeatureBadgeComponent_ng_template_6_a_3_Template, 2, 2, "a", 8);
     ɵɵelementEnd();
-    ɵɵelementStart(6, "div", 10);
-    ɵɵtemplate(7, ImprovementFeatureBadgeComponent_ng_template_2_a_7_Template, 2, 2, "a", 11);
+    ɵɵelementStart(4, "div", 7);
+    ɵɵtemplate(5, ImprovementFeatureBadgeComponent_ng_template_6_a_5_Template, 2, 2, "a", 8);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const hostData_r4 = ctx.hostData;
-    const ctx_r3 = ɵɵnextContext();
-    ɵɵproperty("id", hostData_r4.ariaLabelId);
-    ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r3.ariaLabel);
-    ɵɵadvance(1);
-    ɵɵproperty("id", hostData_r4.ariaDescriptionId);
-    ɵɵattribute("aria-describedby", hostData_r4.ariaDescriptionId);
+    const ctx_r1 = ɵɵnextContext();
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r3.description);
+    ɵɵtextInterpolate(ctx_r1.description);
     ɵɵadvance(2);
-    ɵɵproperty("ngIf", !!ctx_r3.learnMoreLink);
+    ɵɵproperty("ngIf", !!ctx_r1.learnMoreLink);
     ɵɵadvance(2);
-    ɵɵproperty("ngIf", ctx_r3.showFeedbackLink);
+    ɵɵproperty("ngIf", ctx_r1.showFeedbackLink);
 } }
+const _c1$A = function (a1) { return ["sme-icon", a1]; };
 /**
  * Defines an 'improvement-feature' badge
  */
@@ -33874,15 +33853,26 @@ class ImprovementFeatureBadgeComponent extends CoreBadgeBaseComponent {
     }
 }
 /** @nocollapse */ ImprovementFeatureBadgeComponent.ɵfac = function ImprovementFeatureBadgeComponent_Factory(t) { return new (t || ImprovementFeatureBadgeComponent)(ɵɵdirectiveInject(Injector)); };
-/** @nocollapse */ ImprovementFeatureBadgeComponent.ɵcmp = ɵɵdefineComponent({ type: ImprovementFeatureBadgeComponent, selectors: [["sme-badge", "type", "improvement-feature"]], features: [ɵɵInheritDefinitionFeature], attrs: _c0$16, decls: 4, vars: 2, consts: [["tabindex", "0", 3, "smeTooltip", "title", 4, "ngIf"], [3, "smeTooltip", "title", 4, "ngIf"], ["class", "sme-arrange-stack-v"], ["defaultTooltip", ""], ["tabindex", "0", 3, "smeTooltip", "title"], ["aria-hidden", "true"], ["aria-hidden", "true", 3, "ngClass"], [3, "smeTooltip", "title"], [1, "sme-screen-reader", 3, "id"], [1, "sme-margin-bottom-xs", "sme-font-label", 3, "id"], [1, "sme-position-stretch-h"], ["target", "about:blank", "class", "sme-link", 3, "href", 4, "ngIf"], ["target", "about:blank", 1, "sme-link", 3, "href"]], template: function ImprovementFeatureBadgeComponent_Template(rf, ctx) { if (rf & 1) {
-        ɵɵtemplate(0, ImprovementFeatureBadgeComponent_p_0_Template, 4, 7, "p", 0);
-        ɵɵtemplate(1, ImprovementFeatureBadgeComponent_p_1_Template, 3, 4, "p", 1);
-        ɵɵtemplate(2, ImprovementFeatureBadgeComponent_ng_template_2_Template, 8, 7, "ng-template", 2, 3, ɵɵtemplateRefExtractor);
+/** @nocollapse */ ImprovementFeatureBadgeComponent.ɵcmp = ɵɵdefineComponent({ type: ImprovementFeatureBadgeComponent, selectors: [["sme-badge", "type", "improvement-feature"]], features: [ɵɵInheritDefinitionFeature], attrs: _c0$16, decls: 8, vars: 6, consts: [["tabindex", "0", 3, "smeTooltip"], [1, "sme-screen-reader"], ["aria-hidden", "true"], ["aria-hidden", "true", 3, "ngClass"], ["class", "sme-arrange-stack-v"], ["defaultTooltip", ""], [1, "sme-margin-bottom-xs", "sme-font-label"], [1, "sme-position-stretch-h"], ["target", "about:blank", "class", "sme-link", 3, "href", 4, "ngIf"], ["target", "about:blank", 1, "sme-link", 3, "href"]], template: function ImprovementFeatureBadgeComponent_Template(rf, ctx) { if (rf & 1) {
+        ɵɵelementStart(0, "p", 0);
+        ɵɵelementStart(1, "span", 1);
+        ɵɵtext(2);
+        ɵɵelementEnd();
+        ɵɵelementStart(3, "span", 2);
+        ɵɵtext(4);
+        ɵɵelementEnd();
+        ɵɵelement(5, "span", 3);
+        ɵɵelementEnd();
+        ɵɵtemplate(6, ImprovementFeatureBadgeComponent_ng_template_6_Template, 6, 3, "ng-template", 4, 5, ɵɵtemplateRefExtractor);
     } if (rf & 2) {
-        ɵɵproperty("ngIf", ctx.resolvedTooltip || ctx.resolvedTitle);
+        ɵɵproperty("smeTooltip", ctx.resolvedTooltip);
+        ɵɵadvance(2);
+        ɵɵtextInterpolate(ctx.ariaLabel);
+        ɵɵadvance(2);
+        ɵɵtextInterpolate(ctx.label);
         ɵɵadvance(1);
-        ɵɵproperty("ngIf", !ctx.resolvedTooltip && !ctx.resolvedTitle);
-    } }, directives: [NgIf, TooltipDirective, NgClass], encapsulation: 2 });
+        ɵɵproperty("ngClass", ɵɵpureFunction1(4, _c1$A, ctx.icon));
+    } }, directives: [TooltipDirective, NgClass, NgIf], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(ImprovementFeatureBadgeComponent, [{
         type: Component,
         args: [{
@@ -33892,85 +33882,46 @@ class ImprovementFeatureBadgeComponent extends CoreBadgeBaseComponent {
     }], function () { return [{ type: Injector }]; }, null); })();
 
 const _c0$17 = ["type", "new-feature"];
-const _c1$B = function (a1) { return ["sme-icon", a1]; };
-function NewFeatureBadgeComponent_p_0_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "p", 4);
-    ɵɵelementStart(1, "span", 5);
-    ɵɵtext(2);
-    ɵɵelementEnd();
-    ɵɵelement(3, "span", 6);
-    ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = ɵɵnextContext();
-    ɵɵproperty("smeTooltip", ctx_r0.resolvedTooltip)("title", ctx_r0.resolvedTitle);
-    ɵɵattribute("aria-label", ctx_r0.resolvedTitle ? ctx_r0.ariaLabel : null);
-    ɵɵadvance(2);
-    ɵɵtextInterpolate(ctx_r0.label);
-    ɵɵadvance(1);
-    ɵɵproperty("ngClass", ɵɵpureFunction1(5, _c1$B, ctx_r0.icon));
-} }
-function NewFeatureBadgeComponent_p_1_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "p", 7);
-    ɵɵelementStart(1, "span");
-    ɵɵtext(2);
-    ɵɵelementEnd();
-    ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = ɵɵnextContext();
-    ɵɵproperty("smeTooltip", ctx_r1.resolvedTooltip)("title", ctx_r1.resolvedTitle);
-    ɵɵattribute("aria-label", ctx_r1.resolvedTitle ? ctx_r1.ariaLabel : null);
-    ɵɵadvance(2);
-    ɵɵtextInterpolate(ctx_r1.label);
-} }
-function NewFeatureBadgeComponent_ng_template_2_a_5_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "a", 12);
+function NewFeatureBadgeComponent_ng_template_6_a_3_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "a", 9);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r5 = ɵɵnextContext(2);
-    ɵɵproperty("href", ctx_r5.learnMoreLink.toString(), ɵɵsanitizeUrl);
+    const ctx_r3 = ɵɵnextContext(2);
+    ɵɵproperty("href", ctx_r3.learnMoreLink.toString(), ɵɵsanitizeUrl);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r5.strings.MsftSmeShell.Angular.Badges.Common.learnMore);
+    ɵɵtextInterpolate(ctx_r3.strings.MsftSmeShell.Angular.Badges.Common.learnMore);
 } }
-function NewFeatureBadgeComponent_ng_template_2_a_7_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "a", 12);
+function NewFeatureBadgeComponent_ng_template_6_a_5_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "a", 9);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r6 = ɵɵnextContext(2);
-    ɵɵproperty("href", ctx_r6.feedbackLink.toString(), ɵɵsanitizeUrl);
+    const ctx_r4 = ɵɵnextContext(2);
+    ɵɵproperty("href", ctx_r4.feedbackLink.toString(), ɵɵsanitizeUrl);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r6.strings.MsftSmeShell.Angular.Badges.Common.feedback);
+    ɵɵtextInterpolate(ctx_r4.strings.MsftSmeShell.Angular.Badges.Common.feedback);
 } }
-function NewFeatureBadgeComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "h3", 8);
+function NewFeatureBadgeComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "p", 6);
     ɵɵtext(1);
     ɵɵelementEnd();
-    ɵɵelementStart(2, "p", 9);
-    ɵɵtext(3);
-    ɵɵelementEnd();
-    ɵɵelementStart(4, "div", 10);
-    ɵɵtemplate(5, NewFeatureBadgeComponent_ng_template_2_a_5_Template, 2, 2, "a", 11);
+    ɵɵelementStart(2, "div", 7);
+    ɵɵtemplate(3, NewFeatureBadgeComponent_ng_template_6_a_3_Template, 2, 2, "a", 8);
     ɵɵelementEnd();
-    ɵɵelementStart(6, "div", 10);
-    ɵɵtemplate(7, NewFeatureBadgeComponent_ng_template_2_a_7_Template, 2, 2, "a", 11);
+    ɵɵelementStart(4, "div", 7);
+    ɵɵtemplate(5, NewFeatureBadgeComponent_ng_template_6_a_5_Template, 2, 2, "a", 8);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const hostData_r4 = ctx.hostData;
-    const ctx_r3 = ɵɵnextContext();
-    ɵɵproperty("id", hostData_r4.ariaLabelId);
-    ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r3.ariaLabel);
-    ɵɵadvance(1);
-    ɵɵproperty("id", hostData_r4.ariaDescriptionId);
-    ɵɵattribute("aria-describedby", hostData_r4.ariaDescriptionId);
+    const ctx_r1 = ɵɵnextContext();
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r3.description);
+    ɵɵtextInterpolate(ctx_r1.description);
     ɵɵadvance(2);
-    ɵɵproperty("ngIf", !!ctx_r3.learnMoreLink);
+    ɵɵproperty("ngIf", !!ctx_r1.learnMoreLink);
     ɵɵadvance(2);
-    ɵɵproperty("ngIf", ctx_r3.showFeedbackLink);
+    ɵɵproperty("ngIf", ctx_r1.showFeedbackLink);
 } }
+const _c1$B = function (a1) { return ["sme-icon", a1]; };
 /**
  * Defines a 'new-feature' badge
  */
@@ -34003,15 +33954,26 @@ class NewFeatureBadgeComponent extends CoreBadgeBaseComponent {
     }
 }
 /** @nocollapse */ NewFeatureBadgeComponent.ɵfac = function NewFeatureBadgeComponent_Factory(t) { return new (t || NewFeatureBadgeComponent)(ɵɵdirectiveInject(Injector)); };
-/** @nocollapse */ NewFeatureBadgeComponent.ɵcmp = ɵɵdefineComponent({ type: NewFeatureBadgeComponent, selectors: [["sme-badge", "type", "new-feature"]], features: [ɵɵInheritDefinitionFeature], attrs: _c0$17, decls: 4, vars: 2, consts: [["tabindex", "0", 3, "smeTooltip", "title", 4, "ngIf"], [3, "smeTooltip", "title", 4, "ngIf"], ["class", "sme-arrange-stack-v"], ["defaultTooltip", ""], ["tabindex", "0", 3, "smeTooltip", "title"], ["aria-hidden", "true"], ["aria-hidden", "true", 3, "ngClass"], [3, "smeTooltip", "title"], [1, "sme-screen-reader", 3, "id"], [1, "sme-margin-bottom-xs", "sme-font-label", 3, "id"], [1, "sme-position-stretch-h"], ["target", "about:blank", "class", "sme-link", 3, "href", 4, "ngIf"], ["target", "about:blank", 1, "sme-link", 3, "href"]], template: function NewFeatureBadgeComponent_Template(rf, ctx) { if (rf & 1) {
-        ɵɵtemplate(0, NewFeatureBadgeComponent_p_0_Template, 4, 7, "p", 0);
-        ɵɵtemplate(1, NewFeatureBadgeComponent_p_1_Template, 3, 4, "p", 1);
-        ɵɵtemplate(2, NewFeatureBadgeComponent_ng_template_2_Template, 8, 7, "ng-template", 2, 3, ɵɵtemplateRefExtractor);
+/** @nocollapse */ NewFeatureBadgeComponent.ɵcmp = ɵɵdefineComponent({ type: NewFeatureBadgeComponent, selectors: [["sme-badge", "type", "new-feature"]], features: [ɵɵInheritDefinitionFeature], attrs: _c0$17, decls: 8, vars: 6, consts: [["tabindex", "0", 3, "smeTooltip"], [1, "sme-screen-reader"], ["aria-hidden", "true"], ["aria-hidden", "true", 3, "ngClass"], ["class", "sme-arrange-stack-v"], ["defaultTooltip", ""], [1, "sme-margin-bottom-xs", "sme-font-label"], [1, "sme-position-stretch-h"], ["target", "about:blank", "class", "sme-link", 3, "href", 4, "ngIf"], ["target", "about:blank", 1, "sme-link", 3, "href"]], template: function NewFeatureBadgeComponent_Template(rf, ctx) { if (rf & 1) {
+        ɵɵelementStart(0, "p", 0);
+        ɵɵelementStart(1, "span", 1);
+        ɵɵtext(2);
+        ɵɵelementEnd();
+        ɵɵelementStart(3, "span", 2);
+        ɵɵtext(4);
+        ɵɵelementEnd();
+        ɵɵelement(5, "span", 3);
+        ɵɵelementEnd();
+        ɵɵtemplate(6, NewFeatureBadgeComponent_ng_template_6_Template, 6, 3, "ng-template", 4, 5, ɵɵtemplateRefExtractor);
     } if (rf & 2) {
-        ɵɵproperty("ngIf", ctx.resolvedTooltip || ctx.resolvedTitle);
+        ɵɵproperty("smeTooltip", ctx.resolvedTooltip);
+        ɵɵadvance(2);
+        ɵɵtextInterpolate(ctx.ariaLabel);
+        ɵɵadvance(2);
+        ɵɵtextInterpolate(ctx.label);
         ɵɵadvance(1);
-        ɵɵproperty("ngIf", !ctx.resolvedTooltip && !ctx.resolvedTitle);
-    } }, directives: [NgIf, TooltipDirective, NgClass], encapsulation: 2 });
+        ɵɵproperty("ngClass", ɵɵpureFunction1(4, _c1$B, ctx.icon));
+    } }, directives: [TooltipDirective, NgClass, NgIf], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(NewFeatureBadgeComponent, [{
         type: Component,
         args: [{
@@ -34021,85 +33983,46 @@ class NewFeatureBadgeComponent extends CoreBadgeBaseComponent {
     }], function () { return [{ type: Injector }]; }, null); })();
 
 const _c0$18 = ["type", "warning"];
-const _c1$C = function (a1) { return ["sme-icon", a1]; };
-function WarningBadgeComponent_p_0_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "p", 4);
-    ɵɵelementStart(1, "span", 5);
-    ɵɵtext(2);
-    ɵɵelementEnd();
-    ɵɵelement(3, "span", 6);
-    ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = ɵɵnextContext();
-    ɵɵproperty("smeTooltip", ctx_r0.resolvedTooltip)("title", ctx_r0.resolvedTitle);
-    ɵɵattribute("aria-label", ctx_r0.resolvedTitle ? ctx_r0.ariaLabel : null);
-    ɵɵadvance(2);
-    ɵɵtextInterpolate(ctx_r0.label);
-    ɵɵadvance(1);
-    ɵɵproperty("ngClass", ɵɵpureFunction1(5, _c1$C, ctx_r0.icon));
-} }
-function WarningBadgeComponent_p_1_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "p", 7);
-    ɵɵelementStart(1, "span");
-    ɵɵtext(2);
-    ɵɵelementEnd();
-    ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = ɵɵnextContext();
-    ɵɵproperty("smeTooltip", ctx_r1.resolvedTooltip)("title", ctx_r1.resolvedTitle);
-    ɵɵattribute("aria-label", ctx_r1.resolvedTitle ? ctx_r1.ariaLabel : null);
-    ɵɵadvance(2);
-    ɵɵtextInterpolate(ctx_r1.label);
-} }
-function WarningBadgeComponent_ng_template_2_a_5_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "a", 12);
+function WarningBadgeComponent_ng_template_6_a_3_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "a", 9);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r5 = ɵɵnextContext(2);
-    ɵɵproperty("href", ctx_r5.learnMoreLink.toString(), ɵɵsanitizeUrl);
+    const ctx_r3 = ɵɵnextContext(2);
+    ɵɵproperty("href", ctx_r3.learnMoreLink.toString(), ɵɵsanitizeUrl);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r5.strings.MsftSmeShell.Angular.Badges.Common.learnMore);
+    ɵɵtextInterpolate(ctx_r3.strings.MsftSmeShell.Angular.Badges.Common.learnMore);
 } }
-function WarningBadgeComponent_ng_template_2_a_7_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "a", 12);
+function WarningBadgeComponent_ng_template_6_a_5_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "a", 9);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r6 = ɵɵnextContext(2);
-    ɵɵproperty("href", ctx_r6.feedbackLink.toString(), ɵɵsanitizeUrl);
+    const ctx_r4 = ɵɵnextContext(2);
+    ɵɵproperty("href", ctx_r4.feedbackLink.toString(), ɵɵsanitizeUrl);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r6.strings.MsftSmeShell.Angular.Badges.Common.feedback);
+    ɵɵtextInterpolate(ctx_r4.strings.MsftSmeShell.Angular.Badges.Common.feedback);
 } }
-function WarningBadgeComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "h3", 8);
+function WarningBadgeComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "p", 6);
     ɵɵtext(1);
     ɵɵelementEnd();
-    ɵɵelementStart(2, "p", 9);
-    ɵɵtext(3);
-    ɵɵelementEnd();
-    ɵɵelementStart(4, "div", 10);
-    ɵɵtemplate(5, WarningBadgeComponent_ng_template_2_a_5_Template, 2, 2, "a", 11);
+    ɵɵelementStart(2, "div", 7);
+    ɵɵtemplate(3, WarningBadgeComponent_ng_template_6_a_3_Template, 2, 2, "a", 8);
     ɵɵelementEnd();
-    ɵɵelementStart(6, "div", 10);
-    ɵɵtemplate(7, WarningBadgeComponent_ng_template_2_a_7_Template, 2, 2, "a", 11);
+    ɵɵelementStart(4, "div", 7);
+    ɵɵtemplate(5, WarningBadgeComponent_ng_template_6_a_5_Template, 2, 2, "a", 8);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const hostData_r4 = ctx.hostData;
-    const ctx_r3 = ɵɵnextContext();
-    ɵɵproperty("id", hostData_r4.ariaLabelId);
-    ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r3.ariaLabel);
-    ɵɵadvance(1);
-    ɵɵproperty("id", hostData_r4.ariaDescriptionId);
-    ɵɵattribute("aria-describedby", hostData_r4.ariaDescriptionId);
+    const ctx_r1 = ɵɵnextContext();
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r3.description);
+    ɵɵtextInterpolate(ctx_r1.description);
     ɵɵadvance(2);
-    ɵɵproperty("ngIf", !!ctx_r3.learnMoreLink);
+    ɵɵproperty("ngIf", !!ctx_r1.learnMoreLink);
     ɵɵadvance(2);
-    ɵɵproperty("ngIf", ctx_r3.showFeedbackLink);
+    ɵɵproperty("ngIf", ctx_r1.showFeedbackLink);
 } }
+const _c1$C = function (a1) { return ["sme-icon", a1]; };
 /**
  * Defines the rbac badge.
  */
@@ -34128,15 +34051,26 @@ class WarningBadgeComponent extends CoreBadgeBaseComponent {
     }
 }
 /** @nocollapse */ WarningBadgeComponent.ɵfac = function WarningBadgeComponent_Factory(t) { return new (t || WarningBadgeComponent)(ɵɵdirectiveInject(Injector)); };
-/** @nocollapse */ WarningBadgeComponent.ɵcmp = ɵɵdefineComponent({ type: WarningBadgeComponent, selectors: [["sme-badge", "type", "warning"]], features: [ɵɵInheritDefinitionFeature], attrs: _c0$18, decls: 4, vars: 2, consts: [["tabindex", "0", 3, "smeTooltip", "title", 4, "ngIf"], [3, "smeTooltip", "title", 4, "ngIf"], ["class", "sme-arrange-stack-v"], ["defaultTooltip", ""], ["tabindex", "0", 3, "smeTooltip", "title"], ["aria-hidden", "true"], ["aria-hidden", "true", 3, "ngClass"], [3, "smeTooltip", "title"], [1, "sme-screen-reader", 3, "id"], [1, "sme-margin-bottom-xs", "sme-font-label", 3, "id"], [1, "sme-position-stretch-h"], ["target", "about:blank", "class", "sme-link", 3, "href", 4, "ngIf"], ["target", "about:blank", 1, "sme-link", 3, "href"]], template: function WarningBadgeComponent_Template(rf, ctx) { if (rf & 1) {
-        ɵɵtemplate(0, WarningBadgeComponent_p_0_Template, 4, 7, "p", 0);
-        ɵɵtemplate(1, WarningBadgeComponent_p_1_Template, 3, 4, "p", 1);
-        ɵɵtemplate(2, WarningBadgeComponent_ng_template_2_Template, 8, 7, "ng-template", 2, 3, ɵɵtemplateRefExtractor);
+/** @nocollapse */ WarningBadgeComponent.ɵcmp = ɵɵdefineComponent({ type: WarningBadgeComponent, selectors: [["sme-badge", "type", "warning"]], features: [ɵɵInheritDefinitionFeature], attrs: _c0$18, decls: 8, vars: 6, consts: [["tabindex", "0", 3, "smeTooltip"], [1, "sme-screen-reader"], ["aria-hidden", "true"], ["aria-hidden", "true", 3, "ngClass"], ["class", "sme-arrange-stack-v"], ["defaultTooltip", ""], [1, "sme-margin-bottom-xs", "sme-font-label"], [1, "sme-position-stretch-h"], ["target", "about:blank", "class", "sme-link", 3, "href", 4, "ngIf"], ["target", "about:blank", 1, "sme-link", 3, "href"]], template: function WarningBadgeComponent_Template(rf, ctx) { if (rf & 1) {
+        ɵɵelementStart(0, "p", 0);
+        ɵɵelementStart(1, "span", 1);
+        ɵɵtext(2);
+        ɵɵelementEnd();
+        ɵɵelementStart(3, "span", 2);
+        ɵɵtext(4);
+        ɵɵelementEnd();
+        ɵɵelement(5, "span", 3);
+        ɵɵelementEnd();
+        ɵɵtemplate(6, WarningBadgeComponent_ng_template_6_Template, 6, 3, "ng-template", 4, 5, ɵɵtemplateRefExtractor);
     } if (rf & 2) {
-        ɵɵproperty("ngIf", ctx.resolvedTooltip || ctx.resolvedTitle);
+        ɵɵproperty("smeTooltip", ctx.resolvedTooltip);
+        ɵɵadvance(2);
+        ɵɵtextInterpolate(ctx.ariaLabel);
+        ɵɵadvance(2);
+        ɵɵtextInterpolate(ctx.label);
         ɵɵadvance(1);
-        ɵɵproperty("ngIf", !ctx.resolvedTooltip && !ctx.resolvedTitle);
-    } }, directives: [NgIf, TooltipDirective, NgClass], encapsulation: 2 });
+        ɵɵproperty("ngClass", ɵɵpureFunction1(4, _c1$C, ctx.icon));
+    } }, directives: [TooltipDirective, NgClass, NgIf], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(WarningBadgeComponent, [{
         type: Component,
         args: [{
@@ -34844,7 +34778,7 @@ class BreadcrumbHeaderComponent extends CoreBaseComponent {
     }
 }
 /** @nocollapse */ BreadcrumbHeaderComponent.ɵfac = function BreadcrumbHeaderComponent_Factory(t) { return ɵBreadcrumbHeaderComponent_BaseFactory(t || BreadcrumbHeaderComponent); };
-/** @nocollapse */ BreadcrumbHeaderComponent.ɵcmp = ɵɵdefineComponent({ type: BreadcrumbHeaderComponent, selectors: [["sme-breadcrumb-header"]], inputs: { breadcrumbItems: "breadcrumbItems", breadcrumbSeparator: "breadcrumbSeparator", noLeftPadding: "noLeftPadding", useToolTitleStyle: "useToolTitleStyle" }, features: [ɵɵInheritDefinitionFeature], decls: 3, vars: 1, consts: [["class", "tool-header-box", 3, "paddingLeft", 4, "ngIf"], ["content", ""], [1, "tool-header-box"], ["class", "sme-position-flex-none", 4, "ngIf"], ["class", "tool-header sme-position-flex-none", 4, "ngIf"], [1, "sme-position-flex-none"], [4, "ngTemplateOutlet"], [1, "tool-header", "sme-position-flex-none"], ["class", "sme-behavior-hover-trigger", 4, "ngFor", "ngForOf"], [1, "sme-behavior-hover-trigger"], ["class", "sme-behavior-hover-target-underline", "tabindex", "0", "role", "link", 3, "sme-font-family-normal", "click", 4, "ngIf"], [3, "sme-font-family-normal", 4, "ngIf"], ["class", "sme-font-family-normal", 3, "ngSwitch", 4, "ngIf"], ["tabindex", "0", "role", "link", 1, "sme-behavior-hover-target-underline", 3, "click"], [1, "sme-font-family-normal", 3, "ngSwitch"], [4, "ngSwitchCase"], ["class", "sme-icon sme-icon-chevronRight sme-icon-size-sm", 4, "ngSwitchCase"], [1, "sme-icon", "sme-icon-chevronRight", "sme-icon-size-sm"]], template: function BreadcrumbHeaderComponent_Template(rf, ctx) { if (rf & 1) {
+/** @nocollapse */ BreadcrumbHeaderComponent.ɵcmp = ɵɵdefineComponent({ type: BreadcrumbHeaderComponent, selectors: [["sme-breadcrumb-header"]], inputs: { breadcrumbItems: "breadcrumbItems", breadcrumbSeparator: "breadcrumbSeparator", noLeftPadding: "noLeftPadding", useToolTitleStyle: "useToolTitleStyle" }, features: [ɵɵInheritDefinitionFeature], decls: 3, vars: 1, consts: [["class", "tool-header-box", 3, "paddingLeft", 4, "ngIf"], ["content", ""], [1, "tool-header-box"], ["class", "sme-position-flex-none", 4, "ngIf"], ["class", "tool-header sme-position-flex-none", 4, "ngIf"], [1, "sme-position-flex-none"], [4, "ngTemplateOutlet"], [1, "tool-header", "sme-position-flex-none"], ["class", "sme-behavior-hover-trigger", 4, "ngFor", "ngForOf"], [1, "sme-behavior-hover-trigger"], ["class", "sme-behavior-hover-target-underline sme-focus-zone", "tabindex", "0", "role", "link", 3, "sme-font-family-normal", "click", 4, "ngIf"], [3, "sme-font-family-normal", 4, "ngIf"], ["class", "sme-font-family-normal", 3, "ngSwitch", 4, "ngIf"], ["tabindex", "0", "role", "link", 1, "sme-behavior-hover-target-underline", "sme-focus-zone", 3, "click"], [1, "sme-font-family-normal", 3, "ngSwitch"], [4, "ngSwitchCase"], ["class", "sme-icon sme-icon-chevronRight sme-icon-size-sm", 4, "ngSwitchCase"], [1, "sme-icon", "sme-icon-chevronRight", "sme-icon-size-sm"]], template: function BreadcrumbHeaderComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵtemplate(0, BreadcrumbHeaderComponent_div_0_Template, 3, 4, "div", 0);
         ɵɵtemplate(1, BreadcrumbHeaderComponent_ng_template_1_Template, 1, 1, "ng-template", null, 1, ɵɵtemplateRefExtractor);
     } if (rf & 2) {
@@ -34915,20 +34849,20 @@ function BreadcrumbComponent_span_0_span_3_Template(rf, ctx) { if (rf & 1) {
     ɵɵtextInterpolate(item_r1.label);
 } }
 function BreadcrumbComponent_span_0_span_4_span_1_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "span");
+    ɵɵelementStart(0, "span", 10);
     ɵɵtext(1, "\u00A0\\\u00A0");
     ɵɵelementEnd();
 } }
 function BreadcrumbComponent_span_0_span_4_span_2_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "span");
+    ɵɵelementStart(0, "span", 10);
     ɵɵtext(1, "\u00A0/\u00A0");
     ɵɵelementEnd();
 } }
 function BreadcrumbComponent_span_0_span_4_span_3_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelement(0, "span", 10);
+    ɵɵelement(0, "span", 11);
 } }
 function BreadcrumbComponent_span_0_span_4_span_4_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "span");
+    ɵɵelementStart(0, "span", 10);
     ɵɵtext(1, "\u00A0,\u00A0");
     ɵɵelementEnd();
 } }
@@ -35020,7 +34954,7 @@ BreadcrumbComponent.separators = {
     comma: BreadcrumbSeparator.Comma
 };
 /** @nocollapse */ BreadcrumbComponent.ɵfac = function BreadcrumbComponent_Factory(t) { return new (t || BreadcrumbComponent)(ɵɵdirectiveInject(Injector)); };
-/** @nocollapse */ BreadcrumbComponent.ɵcmp = ɵɵdefineComponent({ type: BreadcrumbComponent, selectors: [["sme-breadcrumb"]], inputs: { breadcrumbs: "breadcrumbs", separator: "separator" }, features: [ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [[4, "ngFor", "ngForOf"], [1, "sme-behavior-hover-trigger"], ["class", "sme-behavior-hover-target-underline", "tabindex", "0", "role", "link", 3, "click", 4, "ngIf"], ["tabindex", "0", 4, "ngIf"], ["class", "sme-breadcrumb-separator", 3, "ngSwitch", 4, "ngIf"], ["tabindex", "0", "role", "link", 1, "sme-behavior-hover-target-underline", 3, "click"], ["tabindex", "0"], [1, "sme-breadcrumb-separator", 3, "ngSwitch"], [4, "ngSwitchCase"], ["class", "sme-icon sme-icon-chevronRight", 4, "ngSwitchCase"], [1, "sme-icon", "sme-icon-chevronRight"]], template: function BreadcrumbComponent_Template(rf, ctx) { if (rf & 1) {
+/** @nocollapse */ BreadcrumbComponent.ɵcmp = ɵɵdefineComponent({ type: BreadcrumbComponent, selectors: [["sme-breadcrumb"]], inputs: { breadcrumbs: "breadcrumbs", separator: "separator" }, features: [ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [[4, "ngFor", "ngForOf"], [1, "sme-behavior-hover-trigger"], ["class", "sme-behavior-hover-target-underline sme-focus-zone", "tabindex", "0", "role", "link", 3, "click", 4, "ngIf"], ["tabindex", "0", 4, "ngIf"], ["class", "sme-breadcrumb-separator", 3, "ngSwitch", 4, "ngIf"], ["tabindex", "0", "role", "link", 1, "sme-behavior-hover-target-underline", "sme-focus-zone", 3, "click"], ["tabindex", "0"], [1, "sme-breadcrumb-separator", 3, "ngSwitch"], ["aria-hidden", "true", 4, "ngSwitchCase"], ["class", "sme-icon sme-icon-chevronRight", "aria-hidden", "true", 4, "ngSwitchCase"], ["aria-hidden", "true"], ["aria-hidden", "true", 1, "sme-icon", "sme-icon-chevronRight"]], template: function BreadcrumbComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵtemplate(0, BreadcrumbComponent_span_0_Template, 5, 5, "span", 0);
     } if (rf & 2) {
         ɵɵproperty("ngForOf", ctx.breadcrumbs);
@@ -35688,7 +35622,7 @@ class DetailsComponent extends CoreBaseComponent {
     } if (rf & 2) {
         let _t;
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.expander = _t.first);
-    } }, inputs: { initialHeightPercentage: "initialHeightPercentage", header: "header", chevronInverted: "chevronInverted", title: "title", isExpanded: "isExpanded", ignoreChangeInExpandedSize: "ignoreChangeInExpandedSize" }, outputs: { isExpandedChange: "isExpandedChange" }, features: [ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature], ngContentSelectors: _c2$g, decls: 11, vars: 12, consts: [["role", "button", "tabindex", "0", 1, "sme-button", "sme-button-trigger", "sme-button-auto-width", "sme-position-flex-none", "sme-padding-squish-v-md", "sme-padding-horizontal-lg", "sme-position-stretch-h", "sme-position-left-inline", "sme-arrange-stack-h", "sme-focus-zone", 3, "title", "click"], ["expander", ""], [1, "sme-position-flex-auto", "sme-arrange-ellipsis"], ["class", "sme-icon sme-position-flex-none", 3, "ngClass", 4, "ngIf"], [1, "sme-screen-reader", 3, "id"], [1, "sme-position-flex-auto", "sme-layout-relative"], [1, "sme-layout-absolute", "sme-position-inset-none", "sme-padding-bottom-sm", "sme-arrange-overflow-auto"], [1, "sme-icon", "sme-position-flex-none", 3, "ngClass"]], template: function DetailsComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { initialHeightPercentage: "initialHeightPercentage", header: "header", chevronInverted: "chevronInverted", title: "title", isExpanded: "isExpanded", ignoreChangeInExpandedSize: "ignoreChangeInExpandedSize" }, outputs: { isExpandedChange: "isExpandedChange" }, features: [ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature], ngContentSelectors: _c2$g, decls: 11, vars: 12, consts: [["role", "button", "tabindex", "0", 1, "sme-button", "sme-button-trigger", "sme-button-auto-width", "sme-position-flex-none", "sme-padding-squish-v-md", "sme-padding-horizontal-lg", "sme-position-stretch-h", "sme-position-left-inline", "sme-arrange-stack-h", "sme-focus-zone", 3, "title", "click"], ["expander", ""], [1, "sme-position-flex-auto", "sme-arrange-ellipsis"], ["class", "sme-icon sme-position-flex-none", "aria-hidden", "true", 3, "ngClass", 4, "ngIf"], [1, "sme-screen-reader", 3, "id"], [1, "sme-position-flex-auto", "sme-layout-relative"], [1, "sme-layout-absolute", "sme-position-inset-none", "sme-padding-bottom-sm", "sme-arrange-overflow-auto"], ["aria-hidden", "true", 1, "sme-icon", "sme-position-flex-none", 3, "ngClass"]], template: function DetailsComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵprojectionDef();
         ɵɵelementStart(0, "div", 0, 1);
         ɵɵlistener("click", function DetailsComponent_Template_div_click_0_listener() { return ctx.toggleExpansion(); });
@@ -35905,43 +35839,29 @@ class BaseDialogComponent {
 function ConfirmationDialogComponent_div_9_Template(rf, ctx) { if (rf & 1) {
     const _r5 = ɵɵgetCurrentView();
     ɵɵelementStart(0, "div", 10);
-    ɵɵelementStart(1, "label", 11);
-    ɵɵelementStart(2, "input", 12);
-    ɵɵlistener("ngModelChange", function ConfirmationDialogComponent_div_9_Template_input_ngModelChange_2_listener($event) { ɵɵrestoreView(_r5); const ctx_r4 = ɵɵnextContext(); return ctx_r4.checked = $event; });
-    ɵɵelementEnd();
-    ɵɵelementStart(3, "span");
-    ɵɵtext(4);
-    ɵɵelementEnd();
+    ɵɵelementStart(1, "sme-form-field", 11);
+    ɵɵlistener("ngModelChange", function ConfirmationDialogComponent_div_9_Template_sme_form_field_ngModelChange_1_listener($event) { ɵɵrestoreView(_r5); const ctx_r4 = ɵɵnextContext(); return ctx_r4.checked = $event; });
     ɵɵelementEnd();
     ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = ɵɵnextContext();
-    ɵɵadvance(2);
-    ɵɵproperty("ngModel", ctx_r1.checked);
-    ɵɵadvance(2);
-    ɵɵtextInterpolate(ctx_r1.checkboxText);
+    ɵɵadvance(1);
+    ɵɵproperty("ngModel", ctx_r1.checked)("label", ctx_r1.checkboxText);
 } }
 function ConfirmationDialogComponent_div_10_Template(rf, ctx) { if (rf & 1) {
     const _r7 = ɵɵgetCurrentView();
-    ɵɵelementStart(0, "div", 13);
-    ɵɵelementStart(1, "label", 11);
-    ɵɵelementStart(2, "input", 14);
-    ɵɵlistener("ngModelChange", function ConfirmationDialogComponent_div_10_Template_input_ngModelChange_2_listener($event) { ɵɵrestoreView(_r7); const ctx_r6 = ɵɵnextContext(); return ctx_r6.doubleChecked = $event; });
-    ɵɵelementEnd();
-    ɵɵelementStart(3, "span");
-    ɵɵtext(4);
-    ɵɵelementEnd();
+    ɵɵelementStart(0, "div", 12);
+    ɵɵelementStart(1, "sme-form-field", 13);
+    ɵɵlistener("ngModelChange", function ConfirmationDialogComponent_div_10_Template_sme_form_field_ngModelChange_1_listener($event) { ɵɵrestoreView(_r7); const ctx_r6 = ɵɵnextContext(); return ctx_r6.doubleChecked = $event; });
     ɵɵelementEnd();
     ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = ɵɵnextContext();
-    ɵɵadvance(2);
-    ɵɵproperty("ngModel", ctx_r2.doubleChecked);
-    ɵɵadvance(2);
-    ɵɵtextInterpolate(ctx_r2.doubleCheckText);
+    ɵɵadvance(1);
+    ɵɵproperty("ngModel", ctx_r2.doubleChecked)("label", ctx_r2.doubleCheckText);
 } }
 function ConfirmationDialogComponent_sme_alert_11_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelement(0, "sme-alert", 15);
+    ɵɵelement(0, "sme-alert", 14);
 } if (rf & 2) {
     const ctx_r3 = ɵɵnextContext();
     ɵɵproperty("alert", ctx_r3.alert);
@@ -35956,6 +35876,7 @@ class ConfirmationDialogComponent extends BaseDialogComponent {
      */
     constructor(dialogService) {
         super(dialogService);
+        this.keepOpen = true;
     }
     /**
      * handler for when a close is requested
@@ -36016,7 +35937,7 @@ class ConfirmationDialogComponent extends BaseDialogComponent {
     }
 }
 /** @nocollapse */ ConfirmationDialogComponent.ɵfac = function ConfirmationDialogComponent_Factory(t) { return new (t || ConfirmationDialogComponent)(ɵɵdirectiveInject(DialogService)); };
-/** @nocollapse */ ConfirmationDialogComponent.ɵcmp = ɵɵdefineComponent({ type: ConfirmationDialogComponent, selectors: [["sme-confirmation-dialog"]], features: [ɵɵInheritDefinitionFeature], decls: 17, vars: 13, consts: [["dialogMode", "centered", 3, "clickBackdrop"], ["dialog", ""], ["id", "sme-dialog-title"], ["id", "sme-confirmation-dialog-form"], ["id", "sme-dialog-desc"], ["class", "sme-checkbox sme-margin-top-sm", 4, "ngIf"], ["class", "sme-checkbox sme-margin-top-xs", 4, "ngIf"], ["class", "sme-margin-vertical-sm", 3, "alert", 4, "ngIf"], ["type", "submit", "form", "sme-confirmation-dialog-form", 1, "sme-button-primary", 3, "disabled", "click"], ["type", "button", 3, "click"], [1, "sme-checkbox", "sme-margin-top-sm"], [1, "sme-font-body"], ["type", "checkbox", "name", "checked", 3, "ngModel", "ngModelChange"], [1, "sme-checkbox", "sme-margin-top-xs"], ["type", "checkbox", "name", "doubleChecked", 3, "ngModel", "ngModelChange"], [1, "sme-margin-vertical-sm", 3, "alert"]], template: function ConfirmationDialogComponent_Template(rf, ctx) { if (rf & 1) {
+/** @nocollapse */ ConfirmationDialogComponent.ɵcmp = ɵɵdefineComponent({ type: ConfirmationDialogComponent, selectors: [["sme-confirmation-dialog"]], features: [ɵɵInheritDefinitionFeature], decls: 17, vars: 13, consts: [["dialogMode", "centered", 3, "clickBackdrop"], ["dialog", ""], ["id", "sme-dialog-title"], ["id", "sme-confirmation-dialog-form"], ["id", "sme-dialog-desc"], ["class", "sme-margin-top-sm", 4, "ngIf"], ["class", "sme-margin-top-xs", 4, "ngIf"], ["class", "sme-margin-vertical-sm", 3, "alert", 4, "ngIf"], ["type", "submit", "form", "sme-confirmation-dialog-form", "data-uta-id", "dialog-confirm-button", 1, "sme-button-primary", "sme-focus-zone", 3, "disabled", "click"], ["type", "button", "data-uta-id", "dialog-cancel-button", 1, "sme-focus-zone", 3, "click"], [1, "sme-margin-top-sm"], ["type", "checkbox", "name", "checked", 3, "ngModel", "label", "ngModelChange"], [1, "sme-margin-top-xs"], ["type", "checkbox", "name", "doubleChecked", 3, "ngModel", "label", "ngModelChange"], [1, "sme-margin-vertical-sm", 3, "alert"]], template: function ConfirmationDialogComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵelementStart(0, "sme-dialog", 0, 1);
         ɵɵelementStart(2, "sme-dialog-header");
         ɵɵelementStart(3, "h2", 2);
@@ -36028,8 +35949,8 @@ class ConfirmationDialogComponent extends BaseDialogComponent {
         ɵɵelementStart(7, "p", 4);
         ɵɵtext(8);
         ɵɵelementEnd();
-        ɵɵtemplate(9, ConfirmationDialogComponent_div_9_Template, 5, 2, "div", 5);
-        ɵɵtemplate(10, ConfirmationDialogComponent_div_10_Template, 5, 2, "div", 6);
+        ɵɵtemplate(9, ConfirmationDialogComponent_div_9_Template, 2, 2, "div", 5);
+        ɵɵtemplate(10, ConfirmationDialogComponent_div_10_Template, 2, 2, "div", 6);
         ɵɵtemplate(11, ConfirmationDialogComponent_sme_alert_11_Template, 1, 1, "sme-alert", 7);
         ɵɵelementEnd();
         ɵɵelementEnd();
@@ -36063,7 +35984,7 @@ class ConfirmationDialogComponent extends BaseDialogComponent {
         ɵɵtextInterpolate(ctx.confirmButtonText);
         ɵɵadvance(2);
         ɵɵtextInterpolate(ctx.cancelButtonText);
-    } }, directives: [DialogComponent, DialogHeaderComponent, DialogContentComponent, ɵangular_packages_forms_forms_ba, NgControlStatusGroup, NgForm, NgIf, DialogFooterComponent, CheckboxControlValueAccessor, NgControlStatus, NgModel, ValidationAlertComponent], encapsulation: 2 });
+    } }, directives: [DialogComponent, DialogHeaderComponent, DialogContentComponent, ɵangular_packages_forms_forms_ba, NgControlStatusGroup, NgForm, NgIf, DialogFooterComponent, FormFieldAccessorDirective, FormFieldValidatorDirective, CheckboxFormFieldComponent, NgControlStatus, NgModel, ValidationAlertComponent], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(ConfirmationDialogComponent, [{
         type: Component,
         args: [{
@@ -38617,6 +38538,22 @@ function StackedHorizontalBarChartComponent_div_7_Template(rf, ctx) { if (rf & 1
     ɵɵadvance(1);
     ɵɵproperty("ngIf", ctx_r3.legendTotalData);
 } }
+/**
+ *
+ * @smeDoc {@label Stacked Horizontal Bar Chart @id sme-stacked-horizontal-bar-chart-dev-guide}
+ *
+ * @overview
+ * @file {@filepath ./examples/overview.md}
+ *
+ * @example {@label Stacked horizontal bar chart @id horizontal-bar-chart}
+ * @file {@filename component.html @filepath ./examples/horizontal-bar-chart.component.html}
+ * @file {@filename component.ts @filepath ./examples/horizontal-bar-chart.component.ts}
+ *
+ * @example {@label Stacked horizontal bar chart with custom color @id horizontal-bar-chart-custom-color}
+ * @file {@filename component.html @filepath ./examples/horizontal-bar-chart-custom-color.component.html}
+ * @file {@filename component.ts @filepath ./examples/horizontal-bar-chart-custom-color.component.ts}
+ *
+ */
 class StackedHorizontalBarChartComponent extends CapacityBase {
     constructor(injector) {
         super(injector);
@@ -40070,7 +40007,7 @@ function PropertyGridComponent_sme_layout_item_5_span_6_Template(rf, ctx) { if (
     const _r16 = ɵɵreference(2);
     ɵɵproperty("title", item_r14.tooltip)("tooltipZone", _r16);
 } }
-function PropertyGridComponent_sme_layout_item_5_ng_container_7_Template(rf, ctx) { if (rf & 1) {
+function PropertyGridComponent_sme_layout_item_5_ng_container_9_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementContainer(0);
 } }
 const _c4$6 = function (a0, a1) { return { $implicit: a0, index: a1 }; };
@@ -40082,17 +40019,11 @@ function PropertyGridComponent_sme_layout_item_5_Template(rf, ctx) { if (rf & 1)
     ɵɵtext(5);
     ɵɵelementEnd();
     ɵɵtemplate(6, PropertyGridComponent_sme_layout_item_5_span_6_Template, 1, 2, "span", 17);
+    ɵɵelementStart(7, "span", 18);
+    ɵɵtext(8);
     ɵɵelementEnd();
-    ɵɵtemplate(7, PropertyGridComponent_sme_layout_item_5_ng_container_7_Template, 1, 0, "ng-container", 18);
-    ɵɵelementStart(8, "span", 19);
-    ɵɵtext(9);
-    ɵɵelementEnd();
-    ɵɵelementStart(10, "span", 19);
-    ɵɵtext(11);
-    ɵɵelementEnd();
-    ɵɵelementStart(12, "span", 19);
-    ɵɵtext(13);
     ɵɵelementEnd();
+    ɵɵtemplate(9, PropertyGridComponent_sme_layout_item_5_ng_container_9_Template, 1, 0, "ng-container", 19);
     ɵɵelementEnd();
     ɵɵelementEnd();
 } if (rf & 2) {
@@ -40104,20 +40035,10 @@ function PropertyGridComponent_sme_layout_item_5_Template(rf, ctx) { if (rf & 1)
     ɵɵtextInterpolate(item_r14.label);
     ɵɵadvance(1);
     ɵɵproperty("ngIf", item_r14.tooltip);
-    ɵɵadvance(1);
-    ɵɵproperty("ngTemplateOutlet", ctx_r3.getTemplate(item_r14))("ngTemplateOutletContext", ɵɵpureFunction2(12, _c4$6, item_r14, i_r15));
-    ɵɵadvance(1);
-    ɵɵproperty("id", ctx_r3.idBag.detailsSpan + i_r15);
-    ɵɵadvance(1);
+    ɵɵadvance(2);
     ɵɵtextInterpolate(item_r14.tooltip);
     ɵɵadvance(1);
-    ɵɵproperty("id", ctx_r3.idBag.labelSpan + i_r15);
-    ɵɵadvance(1);
-    ɵɵtextInterpolate(item_r14.label);
-    ɵɵadvance(1);
-    ɵɵproperty("id", ctx_r3.idBag.valueSpan + i_r15);
-    ɵɵadvance(1);
-    ɵɵtextInterpolate(item_r14.value);
+    ɵɵproperty("ngTemplateOutlet", ctx_r3.getTemplate(item_r14))("ngTemplateOutletContext", ɵɵpureFunction2(7, _c4$6, item_r14, i_r15));
 } }
 function PropertyGridComponent_ng_template_6_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementContainer(0);
@@ -40134,7 +40055,7 @@ function PropertyGridComponent_ng_template_6_span_2_Template(rf, ctx) { if (rf &
 } }
 function PropertyGridComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementStart(0, "p", 21);
-    ɵɵtemplate(1, PropertyGridComponent_ng_template_6_ng_container_1_Template, 1, 0, "ng-container", 18);
+    ɵɵtemplate(1, PropertyGridComponent_ng_template_6_ng_container_1_Template, 1, 0, "ng-container", 19);
     ɵɵtemplate(2, PropertyGridComponent_ng_template_6_span_2_Template, 2, 1, "span", 22);
     ɵɵelementEnd();
 } if (rf & 2) {
@@ -40153,7 +40074,7 @@ function PropertyGridComponent_ng_template_8_ng_container_1_Template(rf, ctx) {
 } }
 function PropertyGridComponent_ng_template_8_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementStart(0, "p");
-    ɵɵtemplate(1, PropertyGridComponent_ng_template_8_ng_container_1_Template, 1, 0, "ng-container", 18);
+    ɵɵtemplate(1, PropertyGridComponent_ng_template_8_ng_container_1_Template, 1, 0, "ng-container", 19);
     ɵɵelementStart(2, "a", 23);
     ɵɵlistener("click", function PropertyGridComponent_ng_template_8_Template_a_click_2_listener() { const item_r25 = ctx.$implicit; return item_r25.action(item_r25); });
     ɵɵtext(3);
@@ -40176,7 +40097,7 @@ function PropertyGridComponent_ng_template_10_ng_container_1_Template(rf, ctx) {
 } }
 function PropertyGridComponent_ng_template_10_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementStart(0, "p");
-    ɵɵtemplate(1, PropertyGridComponent_ng_template_10_ng_container_1_Template, 1, 0, "ng-container", 18);
+    ɵɵtemplate(1, PropertyGridComponent_ng_template_10_ng_container_1_Template, 1, 0, "ng-container", 19);
     ɵɵelementStart(2, "a", 24);
     ɵɵtext(3);
     ɵɵelementEnd();
@@ -40199,7 +40120,7 @@ function PropertyGridComponent_ng_template_12_ng_container_1_Template(rf, ctx) {
 } }
 function PropertyGridComponent_ng_template_12_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementStart(0, "p");
-    ɵɵtemplate(1, PropertyGridComponent_ng_template_12_ng_container_1_Template, 1, 0, "ng-container", 18);
+    ɵɵtemplate(1, PropertyGridComponent_ng_template_12_ng_container_1_Template, 1, 0, "ng-container", 19);
     ɵɵelementStart(2, "a", 25);
     ɵɵelementStart(3, "span");
     ɵɵtext(4);
@@ -40382,12 +40303,12 @@ class PropertyGridComponent extends CoreBaseComponent {
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.externalLinkTemplate = _t.first);
     } }, inputs: { orientation: "orientation" }, outputs: { layoutChanged: "layoutChanged" }, features: [ɵɵProvidersFeature([
             { provide: SME_LAYOUT_PROVIDER, useExisting: forwardRef((() => PropertyGridComponent)) }
-        ]), ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature], decls: 16, vars: 6, consts: [[1, "sme-position-inset-none", "sme-position-stretch-h", 3, "padLastItem"], ["layout", ""], ["name", "narrow", 3, "until", "columns"], ["name", "medium", 3, "until", "columns", 4, "ngIf"], ["name", "wide", 3, "columns", 4, "ngIf"], [3, "columnSpan", "maxWidth", 4, "ngFor", "ngForOf"], ["readonlyTemplate", ""], ["actionLinkTemplate", ""], ["internalLinkTemplate", ""], ["externalLinkTemplate", ""], ["iconTemplate", ""], ["name", "medium", 3, "until", "columns"], ["name", "wide", 3, "columns"], [3, "columnSpan", "maxWidth"], ["smeTooltipZone", "", 1, "sme-property-grid-item"], ["zone", "smeTooltipZone"], ["aria-hidden", "true", 1, "sme-arrange-stack-h"], ["class", "sme-position-flex-none sme-icon sme-icon-info sme-info-bubble sme-margin-left-xs", 3, "title", "tooltipZone", 4, "ngIf"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["aria-hidden", "true", 1, "sme-screen-reader", 3, "id"], [1, "sme-position-flex-none", "sme-icon", "sme-icon-info", "sme-info-bubble", "sme-margin-left-xs", 3, "title", "tooltipZone"], [1, "read-only-template"], [4, "ngIf"], ["tabindex", "0", "role", "link", 1, "sme-link", "sme-focus-zone", "action-link-template", 3, "click"], ["role", "link", 1, "sme-link", "sme-focus-zone", 3, "routerLink"], ["role", "link", "target", "_blank", 1, "sme-link", "sme-focus-zone", 3, "href"], [1, "sme-icon", "sme-icon-openInNewWindow", "sme-margin-left-xs"], [3, "class", 4, "ngIf"], ["class", "sme-layout-inline-block sme-margin-right-xs ", "size", "16px", 3, "status", 4, "ngIf"], ["size", "16px", 1, "sme-layout-inline-block", "sme-margin-right-xs", 3, "status"]], template: function PropertyGridComponent_Template(rf, ctx) { if (rf & 1) {
+        ]), ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature], decls: 16, vars: 6, consts: [[1, "sme-position-inset-none", "sme-position-stretch-h", 3, "padLastItem"], ["layout", ""], ["name", "narrow", 3, "until", "columns"], ["name", "medium", 3, "until", "columns", 4, "ngIf"], ["name", "wide", 3, "columns", 4, "ngIf"], [3, "columnSpan", "maxWidth", 4, "ngFor", "ngForOf"], ["readonlyTemplate", ""], ["actionLinkTemplate", ""], ["internalLinkTemplate", ""], ["externalLinkTemplate", ""], ["iconTemplate", ""], ["name", "medium", 3, "until", "columns"], ["name", "wide", 3, "columns"], [3, "columnSpan", "maxWidth"], ["smeTooltipZone", "", 1, "sme-property-grid-item"], ["zone", "smeTooltipZone"], [1, "sme-arrange-stack-h"], ["class", "sme-position-flex-none sme-icon sme-icon-info sme-info-bubble sme-margin-left-xs", "aria-hidden", "true", 3, "title", "tooltipZone", 4, "ngIf"], [1, "sme-screen-reader"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["aria-hidden", "true", 1, "sme-position-flex-none", "sme-icon", "sme-icon-info", "sme-info-bubble", "sme-margin-left-xs", 3, "title", "tooltipZone"], [1, "read-only-template"], [4, "ngIf"], ["tabindex", "0", "role", "link", 1, "sme-link", "sme-focus-zone", "action-link-template", 3, "click"], ["role", "link", 1, "sme-link", "sme-focus-zone", 3, "routerLink"], ["role", "link", "target", "_blank", 1, "sme-link", "sme-focus-zone", 3, "href"], [1, "sme-icon", "sme-icon-openInNewWindow", "sme-margin-left-xs"], [3, "class", 4, "ngIf"], ["class", "sme-layout-inline-block sme-margin-right-xs ", "size", "16px", 3, "status", 4, "ngIf"], ["size", "16px", 1, "sme-layout-inline-block", "sme-margin-right-xs", 3, "status"]], template: function PropertyGridComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵelementStart(0, "sme-layout", 0, 1);
         ɵɵelement(2, "sme-layout-definition", 2);
         ɵɵtemplate(3, PropertyGridComponent_sme_layout_definition_3_Template, 1, 2, "sme-layout-definition", 3);
         ɵɵtemplate(4, PropertyGridComponent_sme_layout_definition_4_Template, 1, 1, "sme-layout-definition", 4);
-        ɵɵtemplate(5, PropertyGridComponent_sme_layout_item_5_Template, 14, 15, "sme-layout-item", 5);
+        ɵɵtemplate(5, PropertyGridComponent_sme_layout_item_5_Template, 10, 10, "sme-layout-item", 5);
         ɵɵelementEnd();
         ɵɵtemplate(6, PropertyGridComponent_ng_template_6_Template, 3, 8, "ng-template", null, 6, ɵɵtemplateRefExtractor);
         ɵɵtemplate(8, PropertyGridComponent_ng_template_8_Template, 4, 8, "ng-template", null, 7, ɵɵtemplateRefExtractor);
@@ -41974,10 +41895,10 @@ class SchemaFormContentComponent {
         }
     }
     get isFormValid() {
-        return this.fieldHostComponent.isValid();
+        return !!this.fieldHostComponent && this.fieldHostComponent.isValid();
     }
     get isFormDirty() {
-        return this.fieldHostComponent.isDirty();
+        return !!this.fieldHostComponent && this.fieldHostComponent.isDirty();
     }
     onFormActionExecuted(action, data) {
         this.formActionExecuted.emit({ action: action, data: data });
@@ -41989,7 +41910,10 @@ class SchemaFormContentComponent {
         this.context.formController = this.formController;
     }
     getFormContainerLoaderComponent() {
-        return this.fieldHostComponent.getFormFieldLoaderComponent();
+        if (this.fieldHostComponent) {
+            return this.fieldHostComponent.getFormFieldLoaderComponent();
+        }
+        return null;
     }
 }
 /** @nocollapse */ SchemaFormContentComponent.ɵfac = function SchemaFormContentComponent_Factory(t) { return new (t || SchemaFormContentComponent)(); };
@@ -44588,6 +44512,33 @@ function SettingsComponent_div_1_Template(rf, ctx) { if (rf & 1) {
 } }
 const _c0$1u = [[["sme-settings-navigation"]], [["sme-settings-header"]], [["sme-settings-content"]], [["sme-settings-footer"]]];
 const _c1$O = ["sme-settings-navigation", "sme-settings-header", "sme-settings-content", "sme-settings-footer"];
+/**
+ *
+ * @smeDoc {@label Settings @id sme-settings}
+ *
+ * @overview
+ * @file {@filepath ./examples/settings-overview.md}
+ *
+ * @example {@label Basic Multi-Form Usage @id basic-multi}
+ * @file {@filename component.html @filepath ./examples/multi-form-example/component.html}
+ * @file {@filename component.ts @filepath ./examples/multi-form-example/component.ts}
+ * @file {@filename panel1.ts @filepath ./examples/multi-form-example/panel1.ts}
+ * @file {@filename panel1.html @filepath ./examples/multi-form-example/panel1.html}
+ * @file {@filename panel2.ts @filepath ./examples/multi-form-example/panel2.ts}
+ * @file {@filename panel2.html @filepath ./examples/multi-form-example/panel2.html}
+ * @file {@filename component-routing.module @filepath ./examples/multi-form-example/routing.module.ts}
+ *
+ * @example {@label Basic Single-Form Usage @id basic-single}
+ * @file {@filename component.html @filepath ./examples/single-form-example/component.html}
+ * @file {@filename component.ts @filepath ./examples/single-form-example/component.ts}
+ * @file {@filename panel.ts @filepath ./examples/single-form-example/panel.ts}
+ * @file {@filename panel.html @filepath ./examples/single-form-example/panel.html}
+ * @file {@filename component-routing.module @filepath ./examples/single-form-example/routing.module.ts}
+ *
+ */
+/**
+ * Defines base settings component, implements core functionality + settings form.
+ */
 class SettingsComponent extends CoreBaseComponent {
     constructor(injector) {
         super(injector);
@@ -44753,7 +44704,9 @@ function CommonSettingsComponent_li_6_h3_1_Template(rf, ctx) { if (rf & 1) {
     ɵɵtextInterpolate(group_r4.group);
 } }
 function CommonSettingsComponent_li_6_a_2_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = ɵɵgetCurrentView();
     ɵɵelementStart(0, "a", 13);
+    ɵɵlistener("smeRouterLinkActivated", function CommonSettingsComponent_li_6_a_2_Template_a_smeRouterLinkActivated_0_listener() { ɵɵrestoreView(_r12); const setting_r9 = ctx.$implicit; const ctx_r11 = ɵɵnextContext(2); return ctx_r11.selectedSetting = setting_r9; });
     ɵɵelement(1, "div", 14);
     ɵɵelementStart(2, "div", 15);
     ɵɵelementStart(3, "span", 16);
@@ -44768,7 +44721,7 @@ function CommonSettingsComponent_li_6_a_2_Template(rf, ctx) { if (rf & 1) {
     const ctx_r7 = ɵɵnextContext();
     ɵɵattributeInterpolate5("aria-labelledby", "", ctx_r7.idBag.option, "-", j_r5, "-", i_r10, " ", ctx_r7.idBag.group, "-", j_r5, "");
     ɵɵproperty("routerLink", setting_r9.routeParams.commands)("preserveFragment", setting_r9.routeParams.extras && setting_r9.routeParams.extras.preserveFragment)("skipLocationChange", setting_r9.routeParams.extras && setting_r9.routeParams.extras.skipLocationChange)("replaceUrl", setting_r9.routeParams.extras && setting_r9.routeParams.extras.replaceUrl)("queryParams", setting_r9.routeParams.extras && setting_r9.routeParams.extras.queryParams)("title", setting_r9.label);
-    ɵɵattribute("aria-selected", ctx_r7.router.isActive(setting_r9.routeParams.commands[0], false));
+    ɵɵattribute("aria-selected", ctx_r7.selectedSetting === setting_r9);
     ɵɵadvance(1);
     ɵɵproperty("ngClass", ctx_r7.getSmeIconClass(setting_r9));
     ɵɵadvance(2);
@@ -44791,9 +44744,9 @@ function CommonSettingsComponent_li_6_Template(rf, ctx) { if (rf & 1) {
     ɵɵproperty("ngForOf", group_r4.options);
 } }
 function CommonSettingsComponent_div_7_div_1_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = ɵɵgetCurrentView();
+    const _r17 = ɵɵgetCurrentView();
     ɵɵelementStart(0, "div", 18);
-    ɵɵlistener("click", function CommonSettingsComponent_div_7_div_1_Template_div_click_0_listener() { ɵɵrestoreView(_r15); const layer_r13 = ctx.$implicit; const ctx_r14 = ɵɵnextContext(2); return ctx_r14.onOverlayClick(layer_r13); });
+    ɵɵlistener("click", function CommonSettingsComponent_div_7_div_1_Template_div_click_0_listener() { ɵɵrestoreView(_r17); const layer_r15 = ctx.$implicit; const ctx_r16 = ɵɵnextContext(2); return ctx_r16.onOverlayClick(layer_r15); });
     ɵɵelementEnd();
 } }
 function CommonSettingsComponent_div_7_Template(rf, ctx) { if (rf & 1) {
@@ -44810,10 +44763,10 @@ function CommonSettingsComponent_sme_settings_header_8_h3_1_Template(rf, ctx) {
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r16 = ɵɵnextContext(2);
-    ɵɵattribute("aria-label", ctx_r16.selectedSettingTitle);
+    const ctx_r18 = ɵɵnextContext(2);
+    ɵɵattribute("aria-label", ctx_r18.selectedSetting.label);
     ɵɵadvance(1);
-    ɵɵtextInterpolate1(" ", ctx_r16.selectedSettingTitle, "");
+    ɵɵtextInterpolate1(" ", ctx_r18.selectedSetting.label, "");
 } }
 function CommonSettingsComponent_sme_settings_header_8_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementStart(0, "sme-settings-header");
@@ -44822,14 +44775,16 @@ function CommonSettingsComponent_sme_settings_header_8_Template(rf, ctx) { if (r
 } if (rf & 2) {
     const ctx_r3 = ɵɵnextContext();
     ɵɵadvance(1);
-    ɵɵproperty("ngIf", !!ctx_r3.getActiveSettingItem());
+    ɵɵproperty("ngIf", !!ctx_r3.selectedSetting);
 } }
 const _c0$1v = ["*"];
+/**
+ * Container around settings component, handles common settings behavior.
+ */
 class CommonSettingsComponent extends CoreBaseComponent {
-    constructor(injector, router, activatedRoute, settingsForms, iterableDiffers, appContext, rpcShellService) {
+    constructor(injector, router, settingsForms, iterableDiffers, appContext, rpcShellService) {
         super(injector);
         this.router = router;
-        this.activatedRoute = activatedRoute;
         this.settingsForms = settingsForms;
         this.iterableDiffers = iterableDiffers;
         this.appContext = appContext;
@@ -44924,7 +44879,7 @@ class CommonSettingsComponent extends CoreBaseComponent {
         }
     }
     recalculateActivePanel() {
-        const setting = this.getActiveSettingItem();
+        const setting = this.selectedSetting;
         if (MsftSme.isNullOrUndefined(setting)) {
             return;
         }
@@ -44953,7 +44908,7 @@ class CommonSettingsComponent extends CoreBaseComponent {
     discardAllChildForms() {
         // For the current active setting, we need to reset the form to its
         // original pristine form when discarding changes
-        const activeSetting = this.getActiveSettingItem();
+        const activeSetting = this.selectedSetting;
         const settingWithForm = activeSetting;
         if (settingWithForm.form) {
             settingWithForm.form.reset(this.latestPristineFormValue);
@@ -44970,7 +44925,7 @@ class CommonSettingsComponent extends CoreBaseComponent {
         });
     }
     acceptAllChildFormsValue() {
-        const activeSetting = this.getActiveSettingItem();
+        const activeSetting = this.selectedSetting;
         this.settings.forEach((setting) => {
             const settingWithForm = setting;
             if (settingWithForm.form) {
@@ -45012,22 +44967,6 @@ class CommonSettingsComponent extends CoreBaseComponent {
             option: ''
         };
     }
-    getActiveSettingItem() {
-        if (this.settings && this.settings.length > 0) {
-            for (const setting of this.settings) {
-                const extras = setting.routeParams.extras || {};
-                Object.assign(extras, {
-                    relativeTo: this.activatedRoute
-                });
-                const urlTree = this.router.createUrlTree(setting.routeParams.commands, extras);
-                if (this.router.isActive(urlTree, false)) {
-                    this.selectedSettingTitle = setting.label;
-                    return setting;
-                }
-            }
-        }
-        return undefined;
-    }
     onOverlayClick(layer) {
         const layerRpc = this.appContext.rpc.rpcManager.rpcChannel.getRpc(layer.sourceName, layer.sourceSubName, RpcType.Outbound);
         from(RpcOverlayCloseClient.overlayClose(this.appContext.rpc, { overlay: false, dialogId: layer.dialogId }, layerRpc))
@@ -45041,7 +44980,7 @@ class CommonSettingsComponent extends CoreBaseComponent {
             if (this.layers.length > 0) {
                 this.layers.pop();
             }
-            return empty();
+            return EMPTY;
         });
     }
     /**
@@ -45073,13 +45012,13 @@ class CommonSettingsComponent extends CoreBaseComponent {
         return formControl.value;
     }
 }
-/** @nocollapse */ CommonSettingsComponent.ɵfac = function CommonSettingsComponent_Factory(t) { return new (t || CommonSettingsComponent)(ɵɵdirectiveInject(Injector), ɵɵdirectiveInject(Router), ɵɵdirectiveInject(ActivatedRoute), ɵɵdirectiveInject(SettingsFormService), ɵɵdirectiveInject(IterableDiffers), ɵɵdirectiveInject(AppContextService), ɵɵdirectiveInject(RpcShellService)); };
+/** @nocollapse */ CommonSettingsComponent.ɵfac = function CommonSettingsComponent_Factory(t) { return new (t || CommonSettingsComponent)(ɵɵdirectiveInject(Injector), ɵɵdirectiveInject(Router), ɵɵdirectiveInject(SettingsFormService), ɵɵdirectiveInject(IterableDiffers), ɵɵdirectiveInject(AppContextService), ɵɵdirectiveInject(RpcShellService)); };
 /** @nocollapse */ CommonSettingsComponent.ɵcmp = ɵɵdefineComponent({ type: CommonSettingsComponent, selectors: [["sme-common-settings"]], viewQuery: function CommonSettingsComponent_Query(rf, ctx) { if (rf & 1) {
         ɵɵviewQuery(SettingsComponent, 1);
     } if (rf & 2) {
         let _t;
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.settingsComponent = _t.first);
-    } }, inputs: { settingsTitle: "settingsTitle", settings: "settings", showHeader: "showHeader", hackShowOverlay: "hackShowOverlay", hackToolHeader: "hackToolHeader", backRoute: "backRoute" }, features: [ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature], ngContentSelectors: _c0$1v, decls: 13, vars: 6, consts: [[3, "settingsTitle"], ["class", "sme-layout-tool-header", 4, "ngIf"], ["role", "region"], ["role", "tablist", 1, "sme-padding-horizontal-lg", "sme-arrange-stack-v", "sme-focus-zone"], ["role", "presentation", 1, "sme-position-flex-auto", "sme-arrange-stack-v", "sme-arrange-overflow-hide-x", "sme-arrange-overflow-auto-y"], ["class", "sme-margin-inset-none", "role", "presentation", 4, "ngFor", "ngForOf"], [4, "ngIf"], [1, "sme-layout-tool-header"], [1, "sme-position-flex-none", "sme-font-h3"], ["role", "presentation", 1, "sme-margin-inset-none"], ["class", "sme-margin-top-xs sme-font-h5", 3, "id", "title", 4, "ngIf"], ["class", "sme-padding-squish-v-sm sme-arrange-stack-h sme-scheme-nav-item", "role", "tab", "href", "setting.routeParams.extras && setting.routeParams.extras.replaceUrl", "routerLinkActive", "sme-active", 3, "routerLink", "preserveFragment", "skipLocationChange", "replaceUrl", "queryParams", "title", 4, "ngFor", "ngForOf"], [1, "sme-margin-top-xs", "sme-font-h5", 3, "id", "title"], ["role", "tab", "href", "setting.routeParams.extras && setting.routeParams.extras.replaceUrl", "routerLinkActive", "sme-active", 1, "sme-padding-squish-v-sm", "sme-arrange-stack-h", "sme-scheme-nav-item", 3, "routerLink", "preserveFragment", "skipLocationChange", "replaceUrl", "queryParams", "title"], [1, "sme-icon", "sme-margin-right-xs", 3, "ngClass"], [1, "sme-position-flex-auto"], [3, "id"], ["class", "sme-layout-absolute sme-position-inset-none sme-layer-above sme-scheme-backdrop-opaque", 3, "click", 4, "ngFor", "ngForOf"], [1, "sme-layout-absolute", "sme-position-inset-none", "sme-layer-above", "sme-scheme-backdrop-opaque", 3, "click"], ["id", "sme-shell-setting-selectedTitle", 4, "ngIf"], ["id", "sme-shell-setting-selectedTitle"]], template: function CommonSettingsComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { settingsTitle: "settingsTitle", settings: "settings", showHeader: "showHeader", hackShowOverlay: "hackShowOverlay", hackToolHeader: "hackToolHeader", backRoute: "backRoute" }, features: [ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature], ngContentSelectors: _c0$1v, decls: 13, vars: 6, consts: [[3, "settingsTitle"], ["class", "sme-layout-tool-header", 4, "ngIf"], ["role", "region"], ["role", "tablist", 1, "sme-padding-horizontal-lg", "sme-arrange-stack-v", "sme-focus-zone"], ["role", "presentation", 1, "sme-position-flex-auto", "sme-arrange-stack-v", "sme-arrange-overflow-hide-x", "sme-arrange-overflow-auto-y"], ["class", "sme-margin-inset-none", "role", "presentation", 4, "ngFor", "ngForOf"], [4, "ngIf"], [1, "sme-layout-tool-header"], [1, "sme-position-flex-none", "sme-font-h3"], ["role", "presentation", 1, "sme-margin-inset-none"], ["class", "sme-margin-top-xs sme-font-h5", 3, "id", "title", 4, "ngIf"], ["class", "sme-padding-squish-v-sm sme-arrange-stack-h sme-scheme-nav-item", "role", "tab", "href", "setting.routeParams.extras && setting.routeParams.extras.replaceUrl", "routerLinkActive", "sme-active", 3, "routerLink", "preserveFragment", "skipLocationChange", "replaceUrl", "queryParams", "title", "smeRouterLinkActivated", 4, "ngFor", "ngForOf"], [1, "sme-margin-top-xs", "sme-font-h5", 3, "id", "title"], ["role", "tab", "href", "setting.routeParams.extras && setting.routeParams.extras.replaceUrl", "routerLinkActive", "sme-active", 1, "sme-padding-squish-v-sm", "sme-arrange-stack-h", "sme-scheme-nav-item", 3, "routerLink", "preserveFragment", "skipLocationChange", "replaceUrl", "queryParams", "title", "smeRouterLinkActivated"], [1, "sme-icon", "sme-margin-right-xs", 3, "ngClass"], [1, "sme-position-flex-auto"], [3, "id"], ["class", "sme-layout-absolute sme-position-inset-none sme-layer-above sme-scheme-backdrop-opaque", 3, "click", 4, "ngFor", "ngForOf"], [1, "sme-layout-absolute", "sme-position-inset-none", "sme-layer-above", "sme-scheme-backdrop-opaque", 3, "click"], ["id", "sme-shell-setting-selectedTitle", 4, "ngIf"], ["id", "sme-shell-setting-selectedTitle"]], template: function CommonSettingsComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵprojectionDef();
         ɵɵelementStart(0, "sme-settings", 0);
         ɵɵelementStart(1, "sme-settings-navigation");
@@ -45120,7 +45059,7 @@ class CommonSettingsComponent extends CoreBaseComponent {
                 selector: 'sme-common-settings',
                 templateUrl: './common-settings.component.html'
             }]
-    }], function () { return [{ type: Injector }, { type: Router }, { type: ActivatedRoute }, { type: SettingsFormService }, { type: IterableDiffers }, { type: AppContextService }, { type: RpcShellService }]; }, { settingsTitle: [{
+    }], function () { return [{ type: Injector }, { type: Router }, { type: SettingsFormService }, { type: IterableDiffers }, { type: AppContextService }, { type: RpcShellService }]; }, { settingsTitle: [{
             type: Input
         }], settings: [{
             type: Input
@@ -45388,6 +45327,7 @@ class SettingsModule {
         SettingsFormService,
         CanDeactivateGuard
     ], imports: [[
+            SmeRouterModule,
             RouterModule,
             CommonModule,
             HeaderModule,
@@ -45401,7 +45341,8 @@ class SettingsModule {
         SettingsContentComponent,
         SettingsPageComponent,
         SettingsNavigationComponent,
-        CommonSettingsComponent], imports: [RouterModule,
+        CommonSettingsComponent], imports: [SmeRouterModule,
+        RouterModule,
         CommonModule,
         HeaderModule,
         LayoutModule,
@@ -45417,6 +45358,7 @@ class SettingsModule {
         type: NgModule,
         args: [{
                 imports: [
+                    SmeRouterModule,
                     RouterModule,
                     CommonModule,
                     HeaderModule,
@@ -45450,7 +45392,7 @@ class SettingsModule {
             }]
     }], null, null); })();
 ɵɵsetComponentScope(CommonSettingsComponent, [SettingsComponent,
-    SettingsNavigationComponent, NgIf, NgForOf, TooltipDirective, RouterLinkWithHref, RouterLinkActive, NgClass, SettingsHeaderComponent,
+    SettingsNavigationComponent, NgIf, NgForOf, TooltipDirective, RouterLinkWithHref, RouterLinkActive, SmeRouterLinkDirective, NgClass, SettingsHeaderComponent,
     SettingsContentComponent, RouterOutlet, SettingsFooterComponent], []);
 
 // tslint:disable-next-line: directive-class-suffix
@@ -46403,7 +46345,7 @@ function WizardComponent_div_4_ul_1_li_1_span_4_Template(rf, ctx) { if (rf & 1)
     ɵɵadvance(1);
     ɵɵtextInterpolate(step_r14.name);
 } }
-const _c3$c = function (a0) { return { "sme-scheme-list-item sme-active sme-color-base-5": a0 }; };
+const _c3$c = function (a0) { return { "sme-scheme-nav-list-item sme-active sme-color-base-5": a0 }; };
 const _c4$8 = function (a0) { return { "sme-step-active": a0 }; };
 function WizardComponent_div_4_ul_1_li_1_Template(rf, ctx) { if (rf & 1) {
     const _r19 = ɵɵgetCurrentView();
@@ -46540,6 +46482,23 @@ var WizardState;
  */
 class WizardTelemetryData {
 }
+/**
+ * @smeDoc {@label Wizard @id sme-wizard}
+ *
+ * @overview
+ * @file {@filepath ./examples/overview.md}
+ *
+ * @example {@label Example Wizard @id simple-wizard}
+ * @file {@filename component.html @filepath ./examples/wizard-example.component.html}
+ * @file {@filename component.ts @filepath ./examples/wizard-example.component.ts}
+ * @file {@filename data-model.ts @filepath ./examples/example-model.ts}
+ * @file {@filename finish-component.ts @filepath ./examples/finish.component.ts}
+ * @file {@filename finish-component.html @filepath ./examples/finish.component.html}
+ * @file {@filename simple-static-text.html @filepath ./examples/simple-static-text.component.html}
+ * @file {@filename simple-static-text.ts @filepath ./examples/simple-static-text.ts}
+ * @file {@filename simple-text-input.component.html @filepath ./examples/simple-text-input.component.html}
+ * @file {@filename simple-text-input.component.ts @filepath ./examples/simple-text-input.component.ts}
+ */
 /**
  * The component class definition for the wizard component.
  */
@@ -46561,6 +46520,7 @@ class WizardComponent extends DynamicComponentBase {
          */
         this.telemetryData = {
             stepIndexNumber: '1.1',
+            stepName: '',
             stepIndexStartTime: (new Date()).toISOString(),
             entryPoint: EnvironmentModule.createEntrypointId(MsftSme.self().Init.moduleName, MsftSme.self().Init.entryPointName),
             state: WizardState.Entry
@@ -46614,6 +46574,18 @@ class WizardComponent extends DynamicComponentBase {
     get model() {
         return this.internalModel;
     }
+    /**
+     * Create and return the current telemetry event structure for wizard telemetry. This can be used for any automatic
+     * actions not triggered by a DOM interaction.
+     */
+    get wizardTelemetryEventBlob() {
+        const wizardTelemetryBase = {
+            contentId: 'sme-wizard',
+            areaName: 'WizardComponent'
+        };
+        MsftSme.deepAssign(wizardTelemetryBase, this.telemetryData);
+        return wizardTelemetryBase;
+    }
     /**
      * Gets the index of the current stage of the wizard.
      */
@@ -46897,17 +46869,17 @@ class WizardComponent extends DynamicComponentBase {
             this.telemetryData.wizardType = filledModel.wizardType;
         }
         this.navigationInformation.resetHistory();
+        // update here first to get updated telemetry info
         this.updateTelemetryTags();
+        SmeWebTelemetry.traceAction(null, { content: this.wizardTelemetryEventBlob, actionType: TelemetryActionTypes.Automatic });
+        this.updateTelemetryTags(WizardState.Active);
         window.addEventListener('pagehide', () => {
             if (this.telemetryData.state !== WizardState.Finished) {
                 // manually set at this point b/c view is destructed.
                 this.telemetryData.state = WizardState.Exit;
             }
-            // Populate ourselves b/c the element ref is destructed at this point. Container tags should not change
-            const exitTelemetryData = { contentId: 'sme-wizard', areaName: 'WizardComponent' };
-            MsftSme.deepAssign(exitTelemetryData, this.telemetryData);
             // actionType A for Auto (according to AWA dictionary) to differentiate from CL
-            SmeWebTelemetry.traceAction(null, { content: exitTelemetryData, actionType: 'A' });
+            SmeWebTelemetry.traceAction(null, { content: this.wizardTelemetryEventBlob, actionType: TelemetryActionTypes.Automatic });
         });
     }
     /**
@@ -47165,6 +47137,7 @@ class WizardComponent extends DynamicComponentBase {
     updateTelemetryTags(state) {
         this.telemetryData.state = state ? state : this.telemetryData.state;
         this.telemetryData.stepIndexNumber = `${this.stageIndex + 1}.${this.stepIndex + 1}`;
+        this.telemetryData.stepName = `${this.currentStage.name}.${this.currentStep.name}`;
         this.telemetryData.stepIndexStartTime = (new Date()).toISOString(); // keep same format as event timestamp
         this.changeDetectorRef.detectChanges();
     }