xaml-ui 1.0.17 → 1.0.19

package/fesm2022/xaml-ui.mjs

@@ -66,6 +66,10 @@ class FrameworkElementComponent {
         return toAlignment(this.VerticalAlignment);
     }
     static { this._nextId = 1; }
+    static { this.DefaultStyles = `:host {
+    display: grid;
+    position: relative;
+  }`; }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FrameworkElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FrameworkElementComponent, isStandalone: true, selector: "FrameworkElement", inputs: { Width: "Width", MinWidth: "MinWidth", MaxWidth: "MaxWidth", Height: "Height", MinHeight: "MinHeight", MaxHeight: "MaxHeight", HorizontalAlignment: "HorizontalAlignment", VerticalAlignment: "VerticalAlignment", Margin: "Margin", Padding: "Padding", Opacity: "Opacity" }, host: { properties: { "style.max-width": "this.MaxWidth", "style.max-height": "this.MaxHeight", "style.margin": "this.Margin", "style.padding": "this.Padding", "style.opacity": "this.Opacity", "style.overflow": "this.overflow", "style.min-width": "this.minWidth", "style.min-height": "this.minHeight", "style.width": "this.width", "style.height": "this.height", "style.justify-self": "this.justifySelf", "style.align-self": "this.alignSelf" } }, ngImport: i0, template: `<ng-container/>`, isInline: true }); }
 }
@@ -172,11 +176,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
 
 class BorderComponent extends PanelComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BorderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: BorderComponent, isStandalone: true, selector: "Border", usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;position:relative}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: BorderComponent, isStandalone: true, selector: "Border", usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;position:relative;grid-template-areas:\"children\"}:host::ng-deep>*{grid-area:children}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BorderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'Border', template: `<ng-content/>`, styles: [":host{display:grid;position:relative}\n"] }]
+            args: [{ selector: 'Border', template: `<ng-content/>`, styles: [":host{display:grid;position:relative;grid-template-areas:\"children\"}:host::ng-deep>*{grid-area:children}\n"] }]
         }] });
 
 class ButtonComponent extends BorderComponent {
@@ -207,11 +211,11 @@ class ButtonComponent extends BorderComponent {
         this._flyout?.Show();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ButtonComponent, isStandalone: true, selector: "Button", inputs: { IsEnabled: "IsEnabled", HorizontalContentAlignment: "HorizontalContentAlignment", VerticalContentAlignment: "VerticalContentAlignment" }, outputs: { Click: "Click" }, host: { listeners: { "click": "onHostPointerEvent($event)" }, properties: { "style.align-content": "this.alignContent", "style.justify-content": "this.justifyContent", "attr.type": "this.type", "attr.disabled": "this.disabled", "class.disabled": "this.disabled", "class.flyout-open": "this.flyoutOpen" } }, queries: [{ propertyName: "_flyout", first: true, predicate: ["xaml-flyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ButtonComponent, isStandalone: true, selector: "Button", inputs: { IsEnabled: "IsEnabled", HorizontalContentAlignment: "HorizontalContentAlignment", VerticalContentAlignment: "VerticalContentAlignment" }, outputs: { Click: "Click" }, host: { listeners: { "click": "onHostPointerEvent($event)" }, properties: { "style.align-content": "this.alignContent", "style.justify-content": "this.justifyContent", "attr.type": "this.type", "attr.disabled": "this.disabled", "class.disabled": "this.disabled", "class.flyout-open": "this.flyoutOpen" } }, queries: [{ propertyName: "_flyout", first: true, predicate: ["xaml-flyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'Button', template: `<ng-content/>`, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"] }]
+            args: [{ selector: 'Button', template: `<ng-content/>`, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"] }]
         }], propDecorators: { IsEnabled: [{
                 type: Input
             }], Click: [{
@@ -432,7 +436,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
 const SelectorItemTemplate = `<ng-container *ngIf="ItemTemplate">
     <ng-container [ngTemplateOutlet]="ItemTemplate" [ngTemplateOutletContext]="{ $implicit: item }" [ngTemplateOutletInjector]="container.Injector" />
     </ng-container>
-  <ng-container *ngIf="!ItemTemplate">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container>`;
+  <ng-container *ngIf="!ItemTemplate">{{ DisplayMemberPath && item !== null ? item[DisplayMemberPath] : item }}</ng-container>`;
 class SelectorComponent extends FrameworkElementComponent {
     get alignContent() {
         return toAlignment(this.VerticalContentAlignment);
@@ -894,7 +898,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
 
 class ListViewComponent extends SelectorComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ListViewComponent, isStandalone: true, selector: "ListView", usesInheritance: true, ngImport: i0, template: "<ScrollViewer>\n    <StackPanel Padding=\"2px 0\">\n      <ItemContainer #container *ngFor=\"let item of ItemSource; index as index; trackBy: getValue\" class=\"item\" [ngClass]=\"{'selected': index == SelectedIndex}\" (click)=\"onItemClick($event, index, item)\" [id]=\"'xaml-selector-'+_id+'-item-'+index\" @itemFading>\n        <div class=\"item-selector\"></div>\n        <div class=\"item-content\" [ngStyle]=\"{'align-content': alignContent, 'justify-content': justifyContent}\"><ng-container *ngIf=\"ItemTemplate\">\n    <ng-container [ngTemplateOutlet]=\"ItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutletInjector]=\"container.Injector\" />\n    </ng-container>\n  <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container></div>\n      </ItemContainer>\n    </StackPanel>\n  </ScrollViewer>", isInline: true, styles: [":host{position:relative}:host{display:grid}:host .item{display:grid;margin:2px 4px;border-radius:4px}:host .item>.item-selector,:host .item>.item-content{display:grid;grid-row-start:1;grid-column-start:1;justify-self:stretch}:host .item>.item-selector{justify-self:left;align-self:center;width:4px;height:12px;border-radius:2px;transition:height var(--ControlNormalAnimationDuration)}:host .item>.item-content{padding:8px 12px}:host .item.selected>.item-selector{height:18px}:host:not(.disabled) .item:not(:hover):not(:active):not(.selected){background-color:transparent;color:var(--TextFillColorPrimary)}:host:not(.disabled) .item:hover:not(.active):not(.selected){background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:active:not(.selected){background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:not(:hover):not(:active).selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:hover:not(:active).selected{background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:active.selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item.selected>.item-selector{background-color:var(--AccentFillColorDefault)}:host.disabled .item>.item-content{color:var(--TextFillColorDisabled)}:host.disabled .item:not(.selected){background-color:transparent}:host.disabled .item.selected{background-color:var(--SubtleFillColorSecondary)}:host.disabled .item.selected>.item-selector{background-color:var(--AccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ScrollViewerComponent, selector: "ScrollViewer", inputs: ["HorizontalScrollMode", "VerticalScrollMode"] }, { kind: "component", type: StackPanelComponent, selector: "StackPanel", inputs: ["Orientation", "Spacing"] }, { kind: "component", type: ItemContainerComponent, selector: "ItemContainer" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ListViewComponent, isStandalone: true, selector: "ListView", usesInheritance: true, ngImport: i0, template: "<ScrollViewer>\n    <StackPanel Padding=\"2px 0\">\n      <ItemContainer #container *ngFor=\"let item of ItemSource; index as index; trackBy: getValue\" class=\"item\" [ngClass]=\"{'selected': index == SelectedIndex}\" (click)=\"onItemClick($event, index, item)\" [id]=\"'xaml-selector-'+_id+'-item-'+index\" @itemFading>\n        <div class=\"item-selector\"></div>\n        <div class=\"item-content\" [ngStyle]=\"{'align-content': alignContent, 'justify-content': justifyContent}\"><ng-container *ngIf=\"ItemTemplate\">\n    <ng-container [ngTemplateOutlet]=\"ItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutletInjector]=\"container.Injector\" />\n    </ng-container>\n  <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath && item !== null ? item[DisplayMemberPath] : item }}</ng-container></div>\n      </ItemContainer>\n    </StackPanel>\n  </ScrollViewer>", isInline: true, styles: [":host{position:relative}:host{display:grid}:host .item{display:grid;margin:2px 4px;border-radius:4px}:host .item>.item-selector,:host .item>.item-content{display:grid;grid-row-start:1;grid-column-start:1;justify-self:stretch}:host .item>.item-selector{justify-self:left;align-self:center;width:4px;height:12px;border-radius:2px;transition:height var(--ControlNormalAnimationDuration)}:host .item>.item-content{padding:8px 12px}:host .item.selected>.item-selector{height:18px}:host:not(.disabled) .item:not(:hover):not(:active):not(.selected){background-color:transparent;color:var(--TextFillColorPrimary)}:host:not(.disabled) .item:hover:not(.active):not(.selected){background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:active:not(.selected){background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:not(:hover):not(:active).selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:hover:not(:active).selected{background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:active.selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item.selected>.item-selector{background-color:var(--AccentFillColorDefault)}:host.disabled .item>.item-content{color:var(--TextFillColorDisabled)}:host.disabled .item:not(.selected){background-color:transparent}:host.disabled .item.selected{background-color:var(--SubtleFillColorSecondary)}:host.disabled .item.selected>.item-selector{background-color:var(--AccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ScrollViewerComponent, selector: "ScrollViewer", inputs: ["HorizontalScrollMode", "VerticalScrollMode"] }, { kind: "component", type: StackPanelComponent, selector: "StackPanel", inputs: ["Orientation", "Spacing"] }, { kind: "component", type: ItemContainerComponent, selector: "ItemContainer" }], animations: [
             trigger('itemFading', [
                 transition(':enter', [animate('500ms ease-in', keyframes([
                         style({ opacity: 0, height: 0 }),
@@ -936,11 +940,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
 
 class DropDownButtonComponent extends ButtonComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DropDownButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: DropDownButtonComponent, isStandalone: true, selector: "DropDownButton", usesInheritance: true, ngImport: i0, template: `<div class="drop-down-glyph">&#xE70D;</div><ng-content/>`, isInline: true, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n", ".drop-down-glyph{display:grid;font-family:var(--SymbolFontFamily);font-size:8pt;position:absolute;right:12px;top:0;bottom:0;align-content:center;transition:transform var(--ControlNormalAnimationDuration)}:host:active:not(.flyout-open):not(.disabled) .drop-down-glyph{transform:translateY(3px)}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: DropDownButtonComponent, isStandalone: true, selector: "DropDownButton", usesInheritance: true, ngImport: i0, template: `<div class="drop-down-glyph">&#xE70D;</div><ng-content/>`, isInline: true, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n", ".drop-down-glyph{display:grid;font-family:var(--SymbolFontFamily);font-size:8pt;position:absolute;right:12px;top:0;bottom:0;align-content:center;transition:transform var(--ControlNormalAnimationDuration)}:host:active:not(.flyout-open):not(.disabled) .drop-down-glyph{transform:translateY(3px)}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DropDownButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'DropDownButton', template: `<div class="drop-down-glyph">&#xE70D;</div><ng-content/>`, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n", ".drop-down-glyph{display:grid;font-family:var(--SymbolFontFamily);font-size:8pt;position:absolute;right:12px;top:0;bottom:0;align-content:center;transition:transform var(--ControlNormalAnimationDuration)}:host:active:not(.flyout-open):not(.disabled) .drop-down-glyph{transform:translateY(3px)}\n"] }]
+            args: [{ selector: 'DropDownButton', template: `<div class="drop-down-glyph">&#xE70D;</div><ng-content/>`, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n", ".drop-down-glyph{display:grid;font-family:var(--SymbolFontFamily);font-size:8pt;position:absolute;right:12px;top:0;bottom:0;align-content:center;transition:transform var(--ControlNormalAnimationDuration)}:host:active:not(.flyout-open):not(.disabled) .drop-down-glyph{transform:translateY(3px)}\n"] }]
         }] });
 
 class FlyoutPresenter {
@@ -1255,14 +1259,15 @@ class ComboBoxComponent extends SelectorComponent {
             this._popup.IsOpen = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ComboBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ComboBoxComponent, isStandalone: true, selector: "ComboBox", viewQueries: [{ propertyName: "_selector", first: true, predicate: ListViewComponent, descendants: true }, { propertyName: "_popup", first: true, predicate: ["xaml-flyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<DropDownButton [HorizontalContentAlignment]=\"HorizontalContentAlignment\" [VerticalContentAlignment]=\"VerticalContentAlignment\" [IsEnabled]=\"IsEnabled\">\n    <ItemContainer #container><ng-container *ngIf=\"ItemTemplate\">\n    <ng-container [ngTemplateOutlet]=\"ItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutletInjector]=\"container.Injector\" />\n    </ng-container>\n  <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container></ItemContainer>\n    <Flyout Placement=\"Cover\" Padding=\"0\" [Target]=\"target\" (IsOpenChange)=\"onIsOpenChanged($event)\">\n      <ListView [ItemSource]=\"ItemSource\" [(SelectedIndex)]=\"SelectedIndex\"  [HorizontalContentAlignment]=\"HorizontalContentAlignment\" [VerticalContentAlignment]=\"VerticalContentAlignment\"/>\n    </Flyout>\n  </DropDownButton>", isInline: true, styles: [":host ::ng-deep .popup>.popup-container{left:0;right:0;top:0}:host ::ng-deep .popup>.popup-container>.popup-content{padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropDownButtonComponent, selector: "DropDownButton" }, { kind: "component", type: FlyoutComponent, selector: "Flyout" }, { kind: "component", type: ListViewComponent, selector: "ListView" }, { kind: "component", type: ItemContainerComponent, selector: "ItemContainer" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ComboBoxComponent, isStandalone: true, selector: "ComboBox", viewQueries: [{ propertyName: "_selector", first: true, predicate: ListViewComponent, descendants: true }, { propertyName: "_popup", first: true, predicate: ["xaml-flyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<DropDownButton [HorizontalContentAlignment]=\"HorizontalContentAlignment\" [VerticalContentAlignment]=\"VerticalContentAlignment\" [IsEnabled]=\"IsEnabled\">\n    <ItemContainer #container><ng-container *ngIf=\"ItemTemplate\">\n    <ng-container [ngTemplateOutlet]=\"ItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutletInjector]=\"container.Injector\" />\n    </ng-container>\n  <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath && item !== null ? item[DisplayMemberPath] : item }}</ng-container></ItemContainer>\n    <Flyout Placement=\"Cover\" Padding=\"0\" [Target]=\"target\" (IsOpenChange)=\"onIsOpenChanged($event)\">\n      <ListView [ItemSource]=\"ItemSource\" [(SelectedIndex)]=\"SelectedIndex\" [HorizontalContentAlignment]=\"HorizontalContentAlignment\" [VerticalContentAlignment]=\"VerticalContentAlignment\"\n                [DisplayMemberPath]=\"DisplayMemberPath\" [SelectedValuePath]=\"SelectedValuePath\"/>\n    </Flyout>\n  </DropDownButton>", isInline: true, styles: [":host ::ng-deep .popup>.popup-container{left:0;right:0;top:0}:host ::ng-deep .popup>.popup-container>.popup-content{padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropDownButtonComponent, selector: "DropDownButton" }, { kind: "component", type: FlyoutComponent, selector: "Flyout" }, { kind: "component", type: ListViewComponent, selector: "ListView" }, { kind: "component", type: ItemContainerComponent, selector: "ItemContainer" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ComboBox', imports: [CommonModule, DropDownButtonComponent, FlyoutComponent, ListViewComponent, ItemContainerComponent], template: `<DropDownButton [HorizontalContentAlignment]="HorizontalContentAlignment" [VerticalContentAlignment]="VerticalContentAlignment" [IsEnabled]="IsEnabled">
     <ItemContainer #container>${SelectorItemTemplate}</ItemContainer>
     <Flyout Placement="Cover" Padding="0" [Target]="target" (IsOpenChange)="onIsOpenChanged($event)">
-      <ListView [ItemSource]="ItemSource" [(SelectedIndex)]="SelectedIndex"  [HorizontalContentAlignment]="HorizontalContentAlignment" [VerticalContentAlignment]="VerticalContentAlignment"/>
+      <ListView [ItemSource]="ItemSource" [(SelectedIndex)]="SelectedIndex" [HorizontalContentAlignment]="HorizontalContentAlignment" [VerticalContentAlignment]="VerticalContentAlignment"
+                [DisplayMemberPath]="DisplayMemberPath" [SelectedValuePath]="SelectedValuePath"/>
     </Flyout>
   </DropDownButton>`, styles: [":host ::ng-deep .popup>.popup-container{left:0;right:0;top:0}:host ::ng-deep .popup>.popup-container>.popup-content{padding:0!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { _selector: [{
@@ -1335,9 +1340,10 @@ class RadioButtonGroupComponent extends StackPanelComponent {
                 item.IsChecked = item.Value === value;
             }
         }
-        else {
-            this._value = value;
-        }
+        if (this._value === value)
+            return;
+        this._value = value;
+        this.ValueChange.emit(value);
     }
     get Value() {
         return this._value;
@@ -1350,16 +1356,15 @@ class RadioButtonGroupComponent extends StackPanelComponent {
             child.IsChecked = true;
         child.IsCheckedChange.subscribe(p => {
             this.Value = child.Value;
-            this.ValueChange.emit(child.Value);
         });
         this._children.push(child);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: RadioButtonGroupComponent, isStandalone: true, selector: "RadioButtonGroup", inputs: { Value: "Value" }, outputs: { ValueChange: "ValueChange" }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:contents}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: RadioButtonGroupComponent, isStandalone: true, selector: "RadioButtonGroup", inputs: { Value: "Value" }, outputs: { ValueChange: "ValueChange" }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;position:relative}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'RadioButtonGroup', template: `<ng-content/>`, styles: [":host{display:contents}\n"] }]
+            args: [{ selector: 'RadioButtonGroup', template: `<ng-content/>`, styles: [":host{display:grid;position:relative}\n"] }]
         }], propDecorators: { Value: [{
                 type: Input
             }], ValueChange: [{
@@ -1374,14 +1379,14 @@ class RadioToggleButtonComponent extends RadioButtonComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: RadioToggleButtonComponent, isStandalone: true, selector: "RadioToggleButton", host: { properties: { "class.checked": "this.checked" } }, usesInheritance: true, ngImport: i0, template: `<label>
     <input type="radio" [name]="Group" [value]="Value" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
     <ng-content/>
-  </label>`, isInline: true, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n", ":host{padding:0}input{display:none}label{padding:5px 11px}\n"] }); }
+  </label>`, isInline: true, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n", ":host{padding:0}input{display:none}label{padding:5px 11px}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioToggleButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'RadioToggleButton', template: `<label>
     <input type="radio" [name]="Group" [value]="Value" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
     <ng-content/>
-  </label>`, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n", ":host{padding:0}input{display:none}label{padding:5px 11px}\n"] }]
+  </label>`, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n", ":host{padding:0}input{display:none}label{padding:5px 11px}\n"] }]
         }], propDecorators: { checked: [{
                 type: HostBinding,
                 args: ['class.checked']
@@ -1421,11 +1426,11 @@ class RepeatButtonComponent extends ButtonComponent {
         this.clearTimers();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RepeatButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: RepeatButtonComponent, isStandalone: true, selector: "RepeatButton", inputs: { Delay: "Delay", Interval: "Interval" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp($event)" } }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: RepeatButtonComponent, isStandalone: true, selector: "RepeatButton", inputs: { Delay: "Delay", Interval: "Interval" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp($event)" } }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RepeatButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'RepeatButton', template: `<ng-content/>`, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"] }]
+            args: [{ selector: 'RepeatButton', template: `<ng-content/>`, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"] }]
         }], propDecorators: { Delay: [{
                 type: Input
             }], Interval: [{
@@ -1439,59 +1444,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }] } });
 
 class SliderComponent extends FrameworkElementComponent {
-    constructor() {
-        super(...arguments);
+    static { this._thumbRadius = 8; }
+    constructor(_renderer) {
+        super();
+        this._renderer = _renderer;
         this.Minimum = 0.0;
         this.Maximum = 1.0;
-        this.StepFrequency = 0.01;
+        this.StepFrequency = 0;
         this.Value = 0.0;
         this.ValueChange = new EventEmitter();
         this.IsEnabled = true;
         this.Orientation = 'Horizontal';
     }
-    onInput(event) {
-        this.Value = parseFloat(event.target.value);
-        this.ValueChange.emit(this.Value);
-    }
-    get inputStyle() {
+    getStyle() {
         let style = {};
-        if (this.Orientation === 'Horizontal' && this.Width !== undefined) {
-            style['width'] = this.Width;
-        }
-        if (this.Orientation === 'Vertical' && this.Height !== undefined) {
-            style['height'] = this.Height;
-        }
         let minimum = this.Minimum ?? 0;
         let maximum = this.Maximum ?? 1;
         let range = maximum - minimum;
         let progress = range > 0 ? (this.Value - minimum) / range : 1;
         progress = Math.min(Math.max(progress, 0), 1);
-        style['--progress'] = (progress * 100).toFixed(4) + '%';
+        let progressText = (progress * 100).toFixed(4);
+        style['--progress-size'] = progressText + (this.Orientation == 'Horizontal' ? 'cqw' : 'cqh');
+        style['--progress-percent'] = progressText + '%';
         return style;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: SliderComponent, isStandalone: true, selector: "Slider", inputs: { Minimum: "Minimum", Maximum: "Maximum", StepFrequency: "StepFrequency", Value: "Value", IsEnabled: "IsEnabled", Orientation: "Orientation" }, outputs: { ValueChange: "ValueChange" }, usesInheritance: true, ngImport: i0, template: `<input type="range" 
-    [step]="StepFrequency" 
-    [min]="Minimum" 
-    [max]="Maximum" 
-    [value]="Value" 
-    (input)="onInput($event)" 
-    [disabled]="!IsEnabled"
-    [className]="Orientation.toLowerCase()"
-    [ngStyle]="inputStyle">`, isInline: true, styles: [":host{position:relative}:host{display:grid}input{display:grid;-webkit-appearance:none;appearance:none;background-color:var(--ControlStrongFillColorDefault);border-radius:2px;outline:none}input.horizontal{height:4px;margin:7px 0}input.horizontal::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--AccentFillColorDefault) 0 var(--progress),var(--ControlStrongFillColorDefault) var(--progress) 100%)}input.horizontal::-moz-range-track,input.horizontal::-moz-range-progress{height:4px}input.vertical{width:4px;margin:0 7px;writing-mode:vertical-lr;direction:rtl;vertical-align:middle}input.vertical::-webkit-slider-runnable-track{width:4px;border-radius:2px;background:linear-gradient(to top,var(--AccentFillColorDefault) 0 var(--progress),var(--ControlStrongFillColorDefault) var(--progress) 100%)}input.vertical::-moz-range-track,input.vertical::-moz-range-progress{width:4px}input::-moz-range-track,input::-moz-range-progress{border-radius:2px}input::-moz-range-track{background:var(--ControlStrongFillColorDefault)}input::-moz-range-progress{background:var(--AccentFillColorDefault)}input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:50%;width:16px;height:16px;border-style:solid;border-width:4px;box-shadow:none;outline:1px solid var(--ControlStrokeColorOnAccentDefaultDark);border-color:var(--ControlSolidFillColorDefault);background-color:var(--AccentFillColorDefault);transition:border-width var(--ControlFastAnimationDuration)}input::-moz-range-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:50%;width:16px;height:16px;border-style:solid;border-width:4px;box-shadow:none;outline:1px solid var(--ControlStrokeColorOnAccentDefaultDark);border-color:var(--ControlSolidFillColorDefault);background-color:var(--AccentFillColorDefault);transition:border-width var(--ControlFastAnimationDuration)}input.horizontal::-webkit-slider-thumb{transform:translateY(-6px)}input.vertical::-webkit-slider-thumb{transform:translate(-6px)}input:not(:disabled)::-webkit-slider-thumb:hover{border-width:3px;background-color:var(--AccentFillColorSecondary)}input:not(:disabled)::-webkit-slider-thumb:active{border-width:5px;background-color:var(--AccentFillColorTertiary)}input:not(:disabled)::-moz-range-thumb:hover{border-width:3px;background-color:var(--AccentFillColorSecondary)}input:not(:disabled)::-moz-range-thumb:active{border-width:5px;background-color:var(--AccentFillColorTertiary)}input:disabled::-webkit-slider-runnable-track,input:disabled::-moz-range-track{background:var(--ControlStrongFillColorDisabled)}input:disabled::-moz-range-progress{background:var(--AccentFillColorDisabled)}input:disabled::-webkit-slider-thumb{border-width:2px;background-color:var(--AccentFillColorDisabled)}input:disabled::-moz-range-thumb{border-width:2px;background-color:var(--AccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    getClasses(value) {
+        var results = [value];
+        results.push(this.Orientation.toLowerCase());
+        if (this.IsEnabled !== true)
+            results.push('disabled');
+        return results;
+    }
+    onThumbPointerDown(event) {
+        if (!this.IsEnabled)
+            return;
+        this._thumb.nativeElement.setPointerCapture(event.pointerId);
+        this._thumbPointerMoveEventSubscription = this._renderer.listen(this._track.nativeElement, 'pointermove', p => this.onThumbPointerMove(p));
+        this.onThumbPointerMove(event);
+    }
+    onThumbPointerMove(event) {
+        let trackRectangle = this._track.nativeElement.getBoundingClientRect();
+        let position;
+        switch (this.Orientation) {
+            case "Horizontal":
+                position = (event.clientX - trackRectangle.left - SliderComponent._thumbRadius) / (trackRectangle.width - 2 * SliderComponent._thumbRadius);
+                break;
+            case "Vertical":
+                position = 1 - (event.clientY - trackRectangle.top - SliderComponent._thumbRadius) / (trackRectangle.height - 2 * SliderComponent._thumbRadius);
+                break;
+        }
+        //Apply range
+        let value = position * (this.Maximum - this.Minimum) + this.Minimum;
+        //Apply step frequency
+        if (this.StepFrequency !== 0)
+            value = Math.trunc(value / this.StepFrequency) * this.StepFrequency;
+        //Apply min-max
+        value = Math.min(this.Maximum, Math.max(this.Minimum, value));
+        //Update value
+        this.Value = value;
+    }
+    onThumbPointerUp(event) {
+        this.onThumbPointerMove(event);
+        this._thumb.nativeElement.releasePointerCapture(event.pointerId);
+        if (this._thumbPointerMoveEventSubscription)
+            this._thumbPointerMoveEventSubscription();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SliderComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: SliderComponent, isStandalone: true, selector: "Slider", inputs: { Minimum: "Minimum", Maximum: "Maximum", StepFrequency: "StepFrequency", Value: "Value", IsEnabled: "IsEnabled", Orientation: "Orientation" }, outputs: { ValueChange: "ValueChange" }, host: { listeners: { "pointerdown": "onThumbPointerDown($event)", "pointerup": "onThumbPointerUp($event)" } }, viewQueries: [{ propertyName: "_track", first: true, predicate: ["track"], descendants: true }, { propertyName: "_thumb", first: true, predicate: ["thumb"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<div #track [ngClass]="getClasses('track')" [ngStyle]="getStyle()">
+    <div class="usable-range">
+      <div #thumb [ngClass]="getClasses('thumb')">
+        <div class="handle"></div>
+      </div>
+    </div>
+  </div>`, isInline: true, styles: [":host{position:relative}:host{display:grid}.track{display:grid;background-color:var(--ControlStrongFillColorDefault);border-radius:2px}.track>.usable-range{container-type:size}.track.horizontal{height:4px;margin:6px 0;background:linear-gradient(to right,var(--AccentFillColorDefault) 0 var(--progress-percent),var(--ControlStrongFillColorDefault) var(--progress-percent) 100%)}.track.horizontal>.usable-range{margin:0 8px}.track.vertical{width:4px;margin:0 6px;background:linear-gradient(to top,var(--AccentFillColorDefault) 0 var(--progress-percent),var(--ControlStrongFillColorDefault) var(--progress-percent) 100%)}.track.vertical>.usable-range{margin:8px 0}.track.disabled{background:var(--ControlStrongFillColorDisabled)}.thumb{display:grid;border-radius:50%;width:16px;height:16px;box-sizing:border-box;border:1px solid var(--ControlStrokeColorOnAccentDefaultDark);background-color:var(--ControlSolidFillColorDefault)}.thumb.horizontal{transform:translate(calc(var(--progress-size) - 8px),-6px)}.thumb.vertical{transform:translate(-6px,calc(100cqh - var(--progress-size) - 8px))}.thumb>.handle{place-self:center;background-color:var(--AccentFillColorDefault);width:8px;height:8px;border-radius:50%;transition:transform var(--ControlFastAnimationDuration),background-color var(--ControlFastAnimationDuration)}.thumb:not(.disabled):hover>.handle{transform:scale(125%);background-color:var(--AccentFillColorSecondary)}.thumb:not(.disabled):active>.handle{transform:scale(75%);background-color:var(--AccentFillColorTertiary)}.thumb.disabled>.handle{transform:scale(125%);background-color:var(--AccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'Slider', template: `<input type="range" 
-    [step]="StepFrequency" 
-    [min]="Minimum" 
-    [max]="Maximum" 
-    [value]="Value" 
-    (input)="onInput($event)" 
-    [disabled]="!IsEnabled"
-    [className]="Orientation.toLowerCase()"
-    [ngStyle]="inputStyle">`, imports: [CommonModule], styles: [":host{position:relative}:host{display:grid}input{display:grid;-webkit-appearance:none;appearance:none;background-color:var(--ControlStrongFillColorDefault);border-radius:2px;outline:none}input.horizontal{height:4px;margin:7px 0}input.horizontal::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--AccentFillColorDefault) 0 var(--progress),var(--ControlStrongFillColorDefault) var(--progress) 100%)}input.horizontal::-moz-range-track,input.horizontal::-moz-range-progress{height:4px}input.vertical{width:4px;margin:0 7px;writing-mode:vertical-lr;direction:rtl;vertical-align:middle}input.vertical::-webkit-slider-runnable-track{width:4px;border-radius:2px;background:linear-gradient(to top,var(--AccentFillColorDefault) 0 var(--progress),var(--ControlStrongFillColorDefault) var(--progress) 100%)}input.vertical::-moz-range-track,input.vertical::-moz-range-progress{width:4px}input::-moz-range-track,input::-moz-range-progress{border-radius:2px}input::-moz-range-track{background:var(--ControlStrongFillColorDefault)}input::-moz-range-progress{background:var(--AccentFillColorDefault)}input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:50%;width:16px;height:16px;border-style:solid;border-width:4px;box-shadow:none;outline:1px solid var(--ControlStrokeColorOnAccentDefaultDark);border-color:var(--ControlSolidFillColorDefault);background-color:var(--AccentFillColorDefault);transition:border-width var(--ControlFastAnimationDuration)}input::-moz-range-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:50%;width:16px;height:16px;border-style:solid;border-width:4px;box-shadow:none;outline:1px solid var(--ControlStrokeColorOnAccentDefaultDark);border-color:var(--ControlSolidFillColorDefault);background-color:var(--AccentFillColorDefault);transition:border-width var(--ControlFastAnimationDuration)}input.horizontal::-webkit-slider-thumb{transform:translateY(-6px)}input.vertical::-webkit-slider-thumb{transform:translate(-6px)}input:not(:disabled)::-webkit-slider-thumb:hover{border-width:3px;background-color:var(--AccentFillColorSecondary)}input:not(:disabled)::-webkit-slider-thumb:active{border-width:5px;background-color:var(--AccentFillColorTertiary)}input:not(:disabled)::-moz-range-thumb:hover{border-width:3px;background-color:var(--AccentFillColorSecondary)}input:not(:disabled)::-moz-range-thumb:active{border-width:5px;background-color:var(--AccentFillColorTertiary)}input:disabled::-webkit-slider-runnable-track,input:disabled::-moz-range-track{background:var(--ControlStrongFillColorDisabled)}input:disabled::-moz-range-progress{background:var(--AccentFillColorDisabled)}input:disabled::-webkit-slider-thumb{border-width:2px;background-color:var(--AccentFillColorDisabled)}input:disabled::-moz-range-thumb{border-width:2px;background-color:var(--AccentFillColorDisabled)}\n"] }]
-        }], propDecorators: { Minimum: [{
+            args: [{ selector: 'Slider', template: `<div #track [ngClass]="getClasses('track')" [ngStyle]="getStyle()">
+    <div class="usable-range">
+      <div #thumb [ngClass]="getClasses('thumb')">
+        <div class="handle"></div>
+      </div>
+    </div>
+  </div>`, imports: [CommonModule], styles: [":host{position:relative}:host{display:grid}.track{display:grid;background-color:var(--ControlStrongFillColorDefault);border-radius:2px}.track>.usable-range{container-type:size}.track.horizontal{height:4px;margin:6px 0;background:linear-gradient(to right,var(--AccentFillColorDefault) 0 var(--progress-percent),var(--ControlStrongFillColorDefault) var(--progress-percent) 100%)}.track.horizontal>.usable-range{margin:0 8px}.track.vertical{width:4px;margin:0 6px;background:linear-gradient(to top,var(--AccentFillColorDefault) 0 var(--progress-percent),var(--ControlStrongFillColorDefault) var(--progress-percent) 100%)}.track.vertical>.usable-range{margin:8px 0}.track.disabled{background:var(--ControlStrongFillColorDisabled)}.thumb{display:grid;border-radius:50%;width:16px;height:16px;box-sizing:border-box;border:1px solid var(--ControlStrokeColorOnAccentDefaultDark);background-color:var(--ControlSolidFillColorDefault)}.thumb.horizontal{transform:translate(calc(var(--progress-size) - 8px),-6px)}.thumb.vertical{transform:translate(-6px,calc(100cqh - var(--progress-size) - 8px))}.thumb>.handle{place-self:center;background-color:var(--AccentFillColorDefault);width:8px;height:8px;border-radius:50%;transition:transform var(--ControlFastAnimationDuration),background-color var(--ControlFastAnimationDuration)}.thumb:not(.disabled):hover>.handle{transform:scale(125%);background-color:var(--AccentFillColorSecondary)}.thumb:not(.disabled):active>.handle{transform:scale(75%);background-color:var(--AccentFillColorTertiary)}.thumb.disabled>.handle{transform:scale(125%);background-color:var(--AccentFillColorDisabled)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { Minimum: [{
                 type: Input
             }], Maximum: [{
                 type: Input
@@ -1505,12 +1541,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }], Orientation: [{
                 type: Input
+            }], _track: [{
+                type: ViewChild,
+                args: ['track']
+            }], _thumb: [{
+                type: ViewChild,
+                args: ['thumb']
+            }], onThumbPointerDown: [{
+                type: HostListener,
+                args: ['pointerdown', ['$event']]
+            }], onThumbPointerUp: [{
+                type: HostListener,
+                args: ['pointerup', ['$event']]
             }] } });
 
 class GridComponent extends PanelComponent {
     constructor() {
         super(...arguments);
-        this.Orientation = 'Vertical';
+        this.Orientation = 'Horizontal';
     }
     get gridAutoFlow() {
         if (this.ColumnDefinitions == undefined && this.RowDefinitions == undefined) {
@@ -1764,11 +1812,11 @@ class ToggleButtonComponent extends ButtonComponent {
         this.IsCheckedChange.emit(this.IsChecked);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ToggleButtonComponent, isStandalone: true, selector: "ToggleButton", inputs: { IsChecked: "IsChecked" }, outputs: { IsCheckedChange: "IsCheckedChange" }, host: { listeners: { "pointerup": "onPointerUp($event)" }, properties: { "class.checked": "this.IsChecked" } }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ToggleButtonComponent, isStandalone: true, selector: "ToggleButton", inputs: { IsChecked: "IsChecked" }, outputs: { IsCheckedChange: "IsCheckedChange" }, host: { listeners: { "pointerup": "onPointerUp($event)" }, properties: { "class.checked": "this.IsChecked" } }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ToggleButton', template: `<ng-content/>`, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"] }]
+            args: [{ selector: 'ToggleButton', template: `<ng-content/>`, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"] }]
         }], propDecorators: { IsChecked: [{
                 type: Input
             }, {
@@ -1804,7 +1852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
 
 class ListBoxComponent extends SelectorComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ListBoxComponent, isStandalone: true, selector: "ListBox", usesInheritance: true, ngImport: i0, template: "<ItemContainer #container *ngFor=\"let item of ItemSource; index as index; trackBy: getValue\" class=\"item\" [ngClass]=\"{'selected': index == SelectedIndex}\" (click)=\"onItemClick($event, index, item)\" [id]=\"'xaml-selector-'+_id+'-item-'+index\" [ngStyle]=\"{'align-content': alignContent, 'justify-content': justifyContent}\">\n    <ng-container *ngIf=\"ItemTemplate\">\n    <ng-container [ngTemplateOutlet]=\"ItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutletInjector]=\"container.Injector\" />\n    </ng-container>\n  <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container>\n</ItemContainer>", isInline: true, styles: [":host{position:relative}:host{display:flex;flex-direction:column;background-color:var(--SystemChromeMediumLowColor)}:host .item{display:grid;padding:12px;margin:0}:host:not(.disabled) .item:not(:hover):not(:active):not(.selected){color:var(--TextFillColorPrimary)}:host:not(.disabled) .item:hover:not(.active):not(.selected){background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:active:not(.selected){background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:not(:hover):not(:active).selected{background-color:var(--SystemControlHighlightListAccentLow)}:host:not(.disabled) .item:hover:not(:active).selected{background-color:var(--SystemControlHighlightListAccentMedium)}:host:not(.disabled) .item:active.selected{background-color:var(--SystemControlHighlightListAccentHigh)}:host.disabled .item:not(.selected){color:var(--TextFillColorDisabled)}:host.disabled .item.selected{background-color:var(--SubtleFillColorSecondary);color:var(--AccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ItemContainerComponent, selector: "ItemContainer" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ListBoxComponent, isStandalone: true, selector: "ListBox", usesInheritance: true, ngImport: i0, template: "<ItemContainer #container *ngFor=\"let item of ItemSource; index as index; trackBy: getValue\" class=\"item\" [ngClass]=\"{'selected': index == SelectedIndex}\" (click)=\"onItemClick($event, index, item)\" [id]=\"'xaml-selector-'+_id+'-item-'+index\" [ngStyle]=\"{'align-content': alignContent, 'justify-content': justifyContent}\">\n    <ng-container *ngIf=\"ItemTemplate\">\n    <ng-container [ngTemplateOutlet]=\"ItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutletInjector]=\"container.Injector\" />\n    </ng-container>\n  <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath && item !== null ? item[DisplayMemberPath] : item }}</ng-container>\n</ItemContainer>", isInline: true, styles: [":host{position:relative}:host{display:flex;flex-direction:column;background-color:var(--SystemChromeMediumLowColor)}:host .item{display:grid;padding:12px;margin:0}:host:not(.disabled) .item:not(:hover):not(:active):not(.selected){color:var(--TextFillColorPrimary)}:host:not(.disabled) .item:hover:not(.active):not(.selected){background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:active:not(.selected){background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:not(:hover):not(:active).selected{background-color:var(--SystemControlHighlightListAccentLow)}:host:not(.disabled) .item:hover:not(:active).selected{background-color:var(--SystemControlHighlightListAccentMedium)}:host:not(.disabled) .item:active.selected{background-color:var(--SystemControlHighlightListAccentHigh)}:host.disabled .item:not(.selected){color:var(--TextFillColorDisabled)}:host.disabled .item.selected{background-color:var(--SubtleFillColorSecondary);color:var(--AccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ItemContainerComponent, selector: "ItemContainer" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListBoxComponent, decorators: [{
             type: Component,
@@ -1826,7 +1874,7 @@ class GridViewComponent extends SelectorComponent {
         return this.Orientation == "Vertical" ? `repeat(${this.MaximumRowsOrColumns}, 1fr)` : undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: GridViewComponent, isStandalone: true, selector: "GridView", inputs: { MaximumRowsOrColumns: "MaximumRowsOrColumns", Orientation: "Orientation" }, usesInheritance: true, ngImport: i0, template: "<ScrollViewer>\n    <Grid [Orientation]=\"Orientation\" [ColumnDefinitions]=\"columnDefinitions\" [RowDefinitions]=\"rowDefinitions\" RowSpacing=\"3px\" ColumnSpacing=\"3px\">\n      <ItemContainer #container *ngFor=\"let item of ItemSource; index as index; trackBy: getValue\" class=\"item\" (click)=\"onItemClick($event, index, item)\" [ngClass]=\"{'selected': index == SelectedIndex}\" [id]=\"'xaml-selector-'+_id+'-item-'+index\" @itemFading>\n        <div class=\"item-content\" [ngStyle]=\"{'align-content': alignContent, 'justify-content': justifyContent}\"><ng-container *ngIf=\"ItemTemplate\">\n    <ng-container [ngTemplateOutlet]=\"ItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutletInjector]=\"container.Injector\" />\n    </ng-container>\n  <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container></div>\n        <div class=\"selection-indicator\" *ngIf=\"index == SelectedIndex\"></div>\n      </ItemContainer>\n    </Grid>\n  </ScrollViewer>", isInline: true, styles: [":host{position:relative}:host{display:grid}:host .item{border-radius:var(--ControlCornerRadius)}:host .item>.item-content{display:grid;grid-row:1;grid-column:1;padding:8px 12px}:host .item>.selection-indicator{border-radius:var(--ControlCornerRadius);border-style:solid;border-color:var(--AccentFillColorDefault);grid-row:1;grid-column:1}:host:not(.disabled) .item:not(:hover):not(:active):not(.selected){background-color:transparent;color:var(--TextFillColorPrimary)}:host:not(.disabled) .item:hover:not(.active):not(.selected){background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:active:not(.selected){background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:not(:hover):not(:active).selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:hover:not(:active).selected{background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:active.selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item.selected>.item-selector{background-color:var(--AccentFillColorDefault)}:host.disabled .item>.item-content{color:var(--TextFillColorDisabled)}:host.disabled .item:not(.selected){background-color:transparent}:host.disabled .item.selected{background-color:var(--SubtleFillColorSecondary)}:host.disabled .item.selected>.item-selector{background-color:var(--AccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ScrollViewerComponent, selector: "ScrollViewer", inputs: ["HorizontalScrollMode", "VerticalScrollMode"] }, { kind: "ngmodule", type: GridModule }, { kind: "component", type: GridComponent, selector: "Grid", inputs: ["ColumnDefinitions", "RowDefinitions", "AutoColumnDefinition", "AutoRowDefinition", "ColumnSpacing", "RowSpacing", "Orientation"] }, { kind: "component", type: ItemContainerComponent, selector: "ItemContainer" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: GridViewComponent, isStandalone: true, selector: "GridView", inputs: { MaximumRowsOrColumns: "MaximumRowsOrColumns", Orientation: "Orientation" }, usesInheritance: true, ngImport: i0, template: "<ScrollViewer>\n    <Grid [Orientation]=\"Orientation\" [ColumnDefinitions]=\"columnDefinitions\" [RowDefinitions]=\"rowDefinitions\" RowSpacing=\"3px\" ColumnSpacing=\"3px\">\n      <ItemContainer #container *ngFor=\"let item of ItemSource; index as index; trackBy: getValue\" class=\"item\" (click)=\"onItemClick($event, index, item)\" [ngClass]=\"{'selected': index == SelectedIndex}\" [id]=\"'xaml-selector-'+_id+'-item-'+index\" @itemFading>\n        <div class=\"item-content\" [ngStyle]=\"{'align-content': alignContent, 'justify-content': justifyContent}\"><ng-container *ngIf=\"ItemTemplate\">\n    <ng-container [ngTemplateOutlet]=\"ItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutletInjector]=\"container.Injector\" />\n    </ng-container>\n  <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath && item !== null ? item[DisplayMemberPath] : item }}</ng-container></div>\n        <div class=\"selection-indicator\" *ngIf=\"index == SelectedIndex\"></div>\n      </ItemContainer>\n    </Grid>\n  </ScrollViewer>", isInline: true, styles: [":host{position:relative}:host{display:grid}:host .item{border-radius:var(--ControlCornerRadius)}:host .item>.item-content{display:grid;grid-row:1;grid-column:1;padding:8px 12px}:host .item>.selection-indicator{border-radius:var(--ControlCornerRadius);border-style:solid;border-color:var(--AccentFillColorDefault);grid-row:1;grid-column:1}:host:not(.disabled) .item:not(:hover):not(:active):not(.selected){background-color:transparent;color:var(--TextFillColorPrimary)}:host:not(.disabled) .item:hover:not(.active):not(.selected){background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:active:not(.selected){background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:not(:hover):not(:active).selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:hover:not(:active).selected{background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:active.selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item.selected>.item-selector{background-color:var(--AccentFillColorDefault)}:host.disabled .item>.item-content{color:var(--TextFillColorDisabled)}:host.disabled .item:not(.selected){background-color:transparent}:host.disabled .item.selected{background-color:var(--SubtleFillColorSecondary)}:host.disabled .item.selected>.item-selector{background-color:var(--AccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ScrollViewerComponent, selector: "ScrollViewer", inputs: ["HorizontalScrollMode", "VerticalScrollMode"] }, { kind: "ngmodule", type: GridModule }, { kind: "component", type: GridComponent, selector: "Grid", inputs: ["ColumnDefinitions", "RowDefinitions", "AutoColumnDefinition", "AutoRowDefinition", "ColumnSpacing", "RowSpacing", "Orientation"] }, { kind: "component", type: ItemContainerComponent, selector: "ItemContainer" }], animations: [
             trigger('itemFading', [
                 transition(':enter', [animate('500ms ease-in', keyframes([
                         style({ opacity: 0, height: 0 }),
@@ -2160,6 +2208,61 @@ var ContentDialogButton;
     ContentDialogButton[ContentDialogButton["Secondary"] = 2] = "Secondary";
     ContentDialogButton[ContentDialogButton["Close"] = 3] = "Close";
 })(ContentDialogButton || (ContentDialogButton = {}));
+class ContentDialogPresenter extends DialogPresenter {
+    constructor(dialog) {
+        super();
+        this._dialog = dialog;
+    }
+    onPrimaryButtonClicked() {
+        this._dialog.PrimaryButtonClicked.emit();
+        this._dialog.Result = ContentDialogResult.Primary;
+    }
+    onSecondaryButtonClicked() {
+        this._dialog.SecondaryButtonClicked.emit();
+        this._dialog.Result = ContentDialogResult.Secondary;
+    }
+    onCloseButtonClicked() {
+        this._dialog.CloseButtonClicked.emit();
+        this._dialog.Result = ContentDialogResult.None;
+    }
+    get isPrimaryButtonDefault() {
+        return this._dialog.DefaultButton === ContentDialogButton.Primary;
+    }
+    get isSecondaryButtonDefault() {
+        return this._dialog.DefaultButton === ContentDialogButton.Secondary;
+    }
+    get isCloseButtonDefault() {
+        return this._dialog.DefaultButton === ContentDialogButton.Close;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ContentDialogPresenter, deps: [{ token: ContentDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ContentDialogPresenter, isStandalone: true, selector: "ContentDialogPresenter", providers: [{ provide: 'xaml-dialog-presenter', useExisting: ContentDialogPresenter }], usesInheritance: true, ngImport: i0, template: `<div #header class="header">{{_dialog.Title}}</div>
+    <div class="body">
+      <TextBlock TextWrapping="Wrap">{{_dialog.Content}}</TextBlock>
+      <ng-content/>
+    </div>
+    <div #footer class="footer" [ngStyle]="{'display': isFooterVisible ? 'grid' : 'none'}">
+      <Grid Orientation="Horizontal" ColumnSpacing="6px" AutoColumnDefinition="minmax(0, 1fr)" Footer>
+        <Button *ngIf="_dialog.PrimaryButtonText !== undefined" [IsEnabled]="_dialog.IsPrimaryButtonEnabled" (Click)="onPrimaryButtonClicked()" [class.AccentButtonStyle]="isPrimaryButtonDefault">{{_dialog.PrimaryButtonText}}</Button>
+        <Button *ngIf="_dialog.SecondaryButtonText !== undefined" [IsEnabled]="_dialog.IsSecondaryButtonEnabled" (Click)="onSecondaryButtonClicked()" [class.AccentButtonStyle]="isSecondaryButtonDefault">{{_dialog.SecondaryButtonText}}</Button>
+        <Button *ngIf="_dialog.CloseButtonText !== undefined" (Click)="onCloseButtonClicked()" [class.AccentButtonStyle]="isCloseButtonDefault">{{_dialog.CloseButtonText}}</Button>
+      </Grid>
+    </div>`, isInline: true, styles: [":host{display:grid;overflow:hidden;-webkit-user-select:none;user-select:none;background-color:#f3f3f3;touch-action:none}:host::ng-deep *{-webkit-user-select:none;user-select:none;touch-action:none}@media (prefers-color-scheme: dark){:host{background-color:#202020}}\n", ":host{border-radius:var(--OverlayCornerRadius);border-color:var(--SurfaceStrokeColorDefault);border-style:solid;border-width:1px;box-shadow:0 0 15px #00000080;opacity:0;transform:scale(1.1);transition:transform var(--ControlNormalAnimationDuration),opacity var(--ControlNormalAnimationDuration)}:host.visible{opacity:1;transform:scale(1)}.header{font-size:20pt;padding:24px 24px 0}.body,.footer{padding:24px}.header,.body{background:var(--LayerFillColorAlt)}\n", ""], dependencies: [{ kind: "ngmodule", type: GridModule }, { kind: "component", type: GridComponent, selector: "Grid", inputs: ["ColumnDefinitions", "RowDefinitions", "AutoColumnDefinition", "AutoRowDefinition", "ColumnSpacing", "RowSpacing", "Orientation"] }, { kind: "component", type: ButtonComponent, selector: "Button", inputs: ["IsEnabled", "HorizontalContentAlignment", "VerticalContentAlignment"], outputs: ["Click"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TextBlockComponent, selector: "TextBlock", inputs: ["FontFamily", "Text", "FontSize", "FontStyle", "FontWeight", "Foreground", "TextAlignment", "IsTextSelectionEnabled", "TextDecorations", "TextTrimming", "TextWrapping"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ContentDialogPresenter, decorators: [{
+            type: Component,
+            args: [{ selector: 'ContentDialogPresenter', template: `<div #header class="header">{{_dialog.Title}}</div>
+    <div class="body">
+      <TextBlock TextWrapping="Wrap">{{_dialog.Content}}</TextBlock>
+      <ng-content/>
+    </div>
+    <div #footer class="footer" [ngStyle]="{'display': isFooterVisible ? 'grid' : 'none'}">
+      <Grid Orientation="Horizontal" ColumnSpacing="6px" AutoColumnDefinition="minmax(0, 1fr)" Footer>
+        <Button *ngIf="_dialog.PrimaryButtonText !== undefined" [IsEnabled]="_dialog.IsPrimaryButtonEnabled" (Click)="onPrimaryButtonClicked()" [class.AccentButtonStyle]="isPrimaryButtonDefault">{{_dialog.PrimaryButtonText}}</Button>
+        <Button *ngIf="_dialog.SecondaryButtonText !== undefined" [IsEnabled]="_dialog.IsSecondaryButtonEnabled" (Click)="onSecondaryButtonClicked()" [class.AccentButtonStyle]="isSecondaryButtonDefault">{{_dialog.SecondaryButtonText}}</Button>
+        <Button *ngIf="_dialog.CloseButtonText !== undefined" (Click)="onCloseButtonClicked()" [class.AccentButtonStyle]="isCloseButtonDefault">{{_dialog.CloseButtonText}}</Button>
+      </Grid>
+    </div>`, imports: [GridModule, ButtonComponent, CommonModule, TextBlockComponent], providers: [{ provide: 'xaml-dialog-presenter', useExisting: ContentDialogPresenter }], styles: [":host{display:grid;overflow:hidden;-webkit-user-select:none;user-select:none;background-color:#f3f3f3;touch-action:none}:host::ng-deep *{-webkit-user-select:none;user-select:none;touch-action:none}@media (prefers-color-scheme: dark){:host{background-color:#202020}}\n", ":host{border-radius:var(--OverlayCornerRadius);border-color:var(--SurfaceStrokeColorDefault);border-style:solid;border-width:1px;box-shadow:0 0 15px #00000080;opacity:0;transform:scale(1.1);transition:transform var(--ControlNormalAnimationDuration),opacity var(--ControlNormalAnimationDuration)}:host.visible{opacity:1;transform:scale(1)}.header{font-size:20pt;padding:24px 24px 0}.body,.footer{padding:24px}.header,.body{background:var(--LayerFillColorAlt)}\n"] }]
+        }], ctorParameters: () => [{ type: ContentDialog }] });
 class ContentDialog extends Dialog {
     constructor() {
         super(...arguments);
@@ -2178,59 +2281,20 @@ class ContentDialog extends Dialog {
         this._result = value;
         this.Hide();
     }
-    onPrimaryButtonClicked() {
-        this.PrimaryButtonClicked.emit();
-        this.Result = ContentDialogResult.Primary;
-    }
-    onSecondaryButtonClicked() {
-        this.SecondaryButtonClicked.emit();
-        this.Result = ContentDialogResult.Secondary;
-    }
-    onCloseButtonClicked() {
-        this.CloseButtonClicked.emit();
-        this.Result = ContentDialogResult.None;
-    }
-    get isPrimaryButtonDefault() {
-        return this.DefaultButton === ContentDialogButton.Primary;
-    }
-    get isSecondaryButtonDefault() {
-        return this.DefaultButton === ContentDialogButton.Secondary;
-    }
-    get isCloseButtonDefault() {
-        return this.DefaultButton === ContentDialogButton.Close;
-    }
     async ShowAsync() {
         await super.ShowAsync();
         return this._result;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ContentDialog, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ContentDialog, isStandalone: true, selector: "ContentDialog", inputs: { Title: "Title", PrimaryButtonText: "PrimaryButtonText", IsPrimaryButtonEnabled: "IsPrimaryButtonEnabled", SecondaryButtonText: "SecondaryButtonText", IsSecondaryButtonEnabled: "IsSecondaryButtonEnabled", CloseButtonText: "CloseButtonText", Content: "Content", DefaultButton: "DefaultButton" }, outputs: { PrimaryButtonClicked: "PrimaryButtonClicked", SecondaryButtonClicked: "SecondaryButtonClicked", CloseButtonClicked: "CloseButtonClicked" }, usesInheritance: true, ngImport: i0, template: `<ng-template #template>
-    <DialogPresenter>
-      <div Header>{{Title}}</div>
-      <TextBlock TextWrapping="Wrap">{{Content}}</TextBlock>
-      <ng-content/>
-      <Grid RowDefinitions="auto" Orientation="Horizontal" ColumnSpacing="6px" AutoColumnDefinition="minmax(0, 1fr)" Footer>
-        <Button *ngIf="PrimaryButtonText !== undefined" [IsEnabled]="IsPrimaryButtonEnabled" (Click)="onPrimaryButtonClicked()" [class.AccentButtonStyle]="isPrimaryButtonDefault">{{PrimaryButtonText}}</Button>
-        <Button *ngIf="SecondaryButtonText !== undefined" [IsEnabled]="IsSecondaryButtonEnabled" (Click)="onSecondaryButtonClicked()" [class.AccentButtonStyle]="isSecondaryButtonDefault">{{SecondaryButtonText}}</Button>
-        <Button *ngIf="CloseButtonText !== undefined" (Click)="onCloseButtonClicked()" [class.AccentButtonStyle]="isCloseButtonDefault">{{CloseButtonText}}</Button>
-      </Grid>
-    </DialogPresenter>
-  </ng-template>`, isInline: true, styles: [""], dependencies: [{ kind: "component", type: DialogPresenter, selector: "DialogPresenter", inputs: ["IsVisible"] }, { kind: "ngmodule", type: GridModule }, { kind: "component", type: GridComponent, selector: "Grid", inputs: ["ColumnDefinitions", "RowDefinitions", "AutoColumnDefinition", "AutoRowDefinition", "ColumnSpacing", "RowSpacing", "Orientation"] }, { kind: "component", type: ButtonComponent, selector: "Button", inputs: ["IsEnabled", "HorizontalContentAlignment", "VerticalContentAlignment"], outputs: ["Click"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextBlockComponent, selector: "TextBlock", inputs: ["FontFamily", "Text", "FontSize", "FontStyle", "FontWeight", "Foreground", "TextAlignment", "IsTextSelectionEnabled", "TextDecorations", "TextTrimming", "TextWrapping"] }] }); }
+    <ContentDialogPresenter/>
+  </ng-template>`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContentDialogPresenter, selector: "ContentDialogPresenter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ContentDialog, decorators: [{
             type: Component,
             args: [{ selector: 'ContentDialog', template: `<ng-template #template>
-    <DialogPresenter>
-      <div Header>{{Title}}</div>
-      <TextBlock TextWrapping="Wrap">{{Content}}</TextBlock>
-      <ng-content/>
-      <Grid RowDefinitions="auto" Orientation="Horizontal" ColumnSpacing="6px" AutoColumnDefinition="minmax(0, 1fr)" Footer>
-        <Button *ngIf="PrimaryButtonText !== undefined" [IsEnabled]="IsPrimaryButtonEnabled" (Click)="onPrimaryButtonClicked()" [class.AccentButtonStyle]="isPrimaryButtonDefault">{{PrimaryButtonText}}</Button>
-        <Button *ngIf="SecondaryButtonText !== undefined" [IsEnabled]="IsSecondaryButtonEnabled" (Click)="onSecondaryButtonClicked()" [class.AccentButtonStyle]="isSecondaryButtonDefault">{{SecondaryButtonText}}</Button>
-        <Button *ngIf="CloseButtonText !== undefined" (Click)="onCloseButtonClicked()" [class.AccentButtonStyle]="isCloseButtonDefault">{{CloseButtonText}}</Button>
-      </Grid>
-    </DialogPresenter>
-  </ng-template>`, imports: [DialogPresenter, GridModule, ButtonComponent, CommonModule, TextBlockComponent] }]
+    <ContentDialogPresenter/>
+  </ng-template>`, imports: [CommonModule, ContentDialogPresenter] }]
         }], propDecorators: { Title: [{
                 type: Input
             }], PrimaryButtonText: [{
@@ -2362,11 +2426,11 @@ class FontIconComponent extends FrameworkElementComponent {
         return TextBlockComponent.ToFontWeight(this.FontWeight);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FontIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FontIconComponent, isStandalone: true, selector: "FontIcon", inputs: { FontFamily: "FontFamily", FontSize: "FontSize", FontStyle: "FontStyle", Foreground: "Foreground", FontWeight: "FontWeight", Glyph: "Glyph" }, host: { properties: { "style.font-family": "this.FontFamily", "style.font-size": "this.FontSize", "style.font-style": "this.FontStyle", "style.color": "this.Foreground", "style.font-weight": "this.fontWeight" } }, usesInheritance: true, ngImport: i0, template: `{{Glyph}}`, isInline: true, styles: [":host{font-family:Segoe Fluent Icons,Segoe MDL2 Assets}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FontIconComponent, isStandalone: true, selector: "FontIcon", inputs: { FontFamily: "FontFamily", FontSize: "FontSize", FontStyle: "FontStyle", Foreground: "Foreground", FontWeight: "FontWeight", Glyph: "Glyph" }, host: { properties: { "style.font-family": "this.FontFamily", "style.font-size": "this.FontSize", "style.font-style": "this.FontStyle", "style.color": "this.Foreground", "style.font-weight": "this.fontWeight" } }, usesInheritance: true, ngImport: i0, template: `{{Glyph}}`, isInline: true, styles: [":host{font-family:Segoe Fluent Icons,Segoe MDL2 Assets;align-content:center}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FontIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'FontIcon', template: `{{Glyph}}`, styles: [":host{font-family:Segoe Fluent Icons,Segoe MDL2 Assets}\n"] }]
+            args: [{ selector: 'FontIcon', template: `{{Glyph}}`, styles: [":host{font-family:Segoe Fluent Icons,Segoe MDL2 Assets;align-content:center}\n"] }]
         }], propDecorators: { FontFamily: [{
                 type: Input
             }, {
@@ -2432,7 +2496,7 @@ class PersonPictureComponent extends FrameworkElementComponent {
         return '?';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PersonPictureComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: PersonPictureComponent, isStandalone: true, selector: "PersonPicture", inputs: { DisplayName: "DisplayName", ProfilePicture: "ProfilePicture", Initials: "Initials", BadgeText: "BadgeText", BadgeGlyph: "BadgeGlyph", BadgeImageSource: "BadgeImageSource" }, usesInheritance: true, ngImport: i0, template: `<div class="avatar">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: PersonPictureComponent, isStandalone: true, selector: "PersonPicture", inputs: { Foreground: "Foreground", Background: "Background", DisplayName: "DisplayName", ProfilePicture: "ProfilePicture", Initials: "Initials", BadgeText: "BadgeText", BadgeGlyph: "BadgeGlyph", BadgeImageSource: "BadgeImageSource" }, host: { properties: { "style.color": "this.Foreground", "style.background-color": "this.Background" } }, usesInheritance: true, ngImport: i0, template: `<div class="avatar">
     <img *ngIf="ProfilePicture; else initialsTemplate"
          [src]="ProfilePicture" alt="{{ DisplayName || Initials }}" />
     <ng-template #initialsTemplate>
@@ -2459,7 +2523,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
     <span *ngIf="BadgeText">{{ BadgeText }}</span>
     <span *ngIf="BadgeGlyph" class="glyph">{{ BadgeGlyph }}</span>
   </div>`, imports: [CommonModule], styles: [":host{width:96px;height:96px;place-self:stretch;overflow:hidden;position:relative;container-type:inline-size}.avatar{position:absolute;width:100%;height:100%;background-color:var(--ControlAltFillColorQuarternary);border-color:var(--ControlAltFillColorSecondary);border-style:solid;border-width:1px;border-radius:50%;box-sizing:border-box;overflow:hidden;display:grid}.avatar>img{place-self:stretch;width:100%;height:100%;object-fit:cover}.avatar>.initials{place-self:center;text-align:center;text-overflow:clip;font-size:40cqw}.badge{position:absolute;min-width:30cqw;height:30cqw;top:0;right:0;background:var(--AccentFillColorDefault);border-radius:50%;overflow:hidden;display:grid;place-self:flex-start right}.badge>img{place-self:center;width:30cqw;height:30cqw;object-fit:cover}.badge>span{place-self:center;font-size:20cqw;text-align:center;color:var(--TextOnAccentFillColorPrimary)}.badge>span.glyph{font-family:Segoe MDL2 Assets}\n"] }]
-        }], propDecorators: { DisplayName: [{
+        }], propDecorators: { Foreground: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.color']
+            }], Background: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.background-color']
+            }], DisplayName: [{
                 type: Input
             }], ProfilePicture: [{
                 type: Input
@@ -2776,6 +2850,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }] } });
 
 class NumberBoxComponent extends FrameworkElementComponent {
+    get NumberFormatter() {
+        return this._numberFormatter;
+    }
+    set NumberFormatter(value) {
+        this._numberFormatter = value;
+        this.updateText();
+    }
     get flyoutTarget() {
         return this._input?.nativeElement;
     }
@@ -2807,8 +2888,8 @@ class NumberBoxComponent extends FrameworkElementComponent {
         this.Maximum = Infinity;
         this.SmallChange = 1;
         this.LargeChange = 10;
-        this.NumberFormatter = (value) => value.toString();
         this.ValueChange = new EventEmitter();
+        this._numberFormatter = (value) => value.toString();
         this._text = '';
         this._value = NaN;
         this.TextAlignment = 'Right';
@@ -2860,7 +2941,7 @@ class NumberBoxComponent extends FrameworkElementComponent {
     onBlur() {
         this.updateText();
         this._input.nativeElement.value = this._text;
-        if (this.IsPlaceholderEditable && this._input.nativeElement.value === this.PlaceholderText) {
+        if (this.IsPlaceholderEditable && this.PlaceholderText && this._input.nativeElement.value === this.PlaceholderText) {
             this._input.nativeElement.value = '';
             this.onChange();
         }
@@ -2886,7 +2967,7 @@ class NumberBoxComponent extends FrameworkElementComponent {
         this._input.nativeElement.focus();
     }
     onFocusIn() {
-        if (this.IsPlaceholderEditable && Number.isNaN(this.Value)) {
+        if (this.IsPlaceholderEditable && this.PlaceholderText && Number.isNaN(this.Value)) {
             this._input.nativeElement.value = this.PlaceholderText;
             this.onChange();
         }
@@ -2894,33 +2975,36 @@ class NumberBoxComponent extends FrameworkElementComponent {
         this._input.nativeElement.select();
     }
     updateText() {
-        this._text = Number.isNaN(this.Value) ? '' : this.NumberFormatter(this.Value);
+        this._text = Number.isNaN(this.Value) ? '' : this._numberFormatter(this.Value);
     }
     onContextMenu(event) {
         event.stopPropagation();
     }
+    get disabled() {
+        return !this.IsEnabled;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NumberBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: NumberBoxComponent, isStandalone: true, selector: "NumberBox", inputs: { IsEnabled: "IsEnabled", PlaceholderText: "PlaceholderText", IsPlaceholderEditable: "IsPlaceholderEditable", TextAlignment: "TextAlignment", InputMode: "InputMode", Minimum: "Minimum", Maximum: "Maximum", SmallChange: "SmallChange", LargeChange: "LargeChange", NumberFormatter: "NumberFormatter", Unit: "Unit", Value: "Value" }, outputs: { ValueChange: "ValueChange" }, host: { listeners: { "click": "onClick()", "focusin": "onFocusIn()", "contextmenu": "onContextMenu($event)" } }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true }, { propertyName: "_flyout", first: true, predicate: ["flyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<label>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: NumberBoxComponent, isStandalone: true, selector: "NumberBox", inputs: { IsEnabled: "IsEnabled", PlaceholderText: "PlaceholderText", IsPlaceholderEditable: "IsPlaceholderEditable", TextAlignment: "TextAlignment", InputMode: "InputMode", Minimum: "Minimum", Maximum: "Maximum", SmallChange: "SmallChange", LargeChange: "LargeChange", Unit: "Unit", NumberFormatter: "NumberFormatter", Value: "Value" }, outputs: { ValueChange: "ValueChange" }, host: { listeners: { "click": "onClick()", "focusin": "onFocusIn()", "contextmenu": "onContextMenu($event)" }, properties: { "class.disabled": "this.disabled" } }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true }, { propertyName: "_flyout", first: true, predicate: ["flyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<label>
     <div class="icon">&#xEC8F;</div>
-    <input class="text-box" #input type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}" (blur)="onBlur()" (keydown)="onKeyDown($event)"/>
+    <input class="text-box" #input size="1" type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}" (blur)="onBlur()" (keydown)="onKeyDown($event)"/>
     <Flyout #flyout Padding="2px" Placement="Left" [HasBackdrop]="false" [Target]="flyoutTarget">
       <RepeatButton Class="InlineButtonStyle" (Click)="onIncreaseClick()" [Delay]="500" [Interval]="50"  (pointerdown)="onButtonPress()" (pointerup)="onButtonPress()"><FontIcon Glyph="&#xE70E;"/></RepeatButton>
       <RepeatButton Class="InlineButtonStyle" (Click)="onDecreaseClick()" [Delay]="500" [Interval]="50"  (pointerdown)="onButtonPress()" (pointerup)="onButtonPress()"><FontIcon Glyph="&#xE70D;"/></RepeatButton>
     </Flyout>
     <div class="unit" *ngIf="Unit !== undefined">{{Unit}}</div>    
-  </label>`, isInline: true, styles: [":host{position:relative}:host{display:grid;cursor:text;outline-style:none;border-style:solid;border-width:1px;border-radius:var(--ControlCornerRadius);padding:6px;background-color:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);border-bottom-color:var(--ControlStrongStrokeColorDefault)}:host:hover{background-color:var(--ControlFillColorSecondary)}:host:focus-within,:host:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}:host.disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault)}textarea{resize:none}.text-box{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary);font-family:var(--SystemFontFamily);font-size:var(--SystemFontSize)}.text-box::placeholder{color:var(--TextFillColorSecondary)}.text-box:disabled{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor)}\n", "label{display:grid;position:relative;grid-template-columns:auto 1fr auto auto}.icon{align-self:center;font-family:var(--SymbolFontFamily);color:var(--TextFillColorSecondary);pointer-events:none}.unit{align-self:center;color:var(--TextFillColorSecondary);pointer-events:none}.InlineButtonStyle{padding:5px}input:focus+.popup,input:active+.popup{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RepeatButtonComponent, selector: "RepeatButton", inputs: ["Delay", "Interval"] }, { kind: "component", type: FontIconComponent, selector: "FontIcon", inputs: ["FontFamily", "FontSize", "FontStyle", "Foreground", "FontWeight", "Glyph"] }, { kind: "component", type: FlyoutComponent, selector: "Flyout" }] }); }
+  </label>`, isInline: true, styles: [":host{position:relative}:host{display:grid;cursor:text;outline-style:none;border-style:solid;border-width:1px;border-radius:var(--ControlCornerRadius);padding:6px;background-color:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);border-bottom-color:var(--ControlStrongStrokeColorDefault)}:host:hover{background-color:var(--ControlFillColorSecondary)}:host:focus-within,:host:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}:host.disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault);pointer-events:none}textarea{resize:none}.text-box{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary);font-family:var(--SystemFontFamily);font-size:var(--SystemFontSize)}.text-box::placeholder{color:var(--TextFillColorSecondary)}.text-box:disabled{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor);color:var(--TextOnAccentFillColorSelected)}\n", "label{display:grid;position:relative;grid-template-columns:auto 1fr auto auto}.icon{align-self:center;font-family:var(--SymbolFontFamily);color:var(--TextFillColorSecondary);pointer-events:none}.unit{align-self:center;color:var(--TextFillColorSecondary);pointer-events:none}.InlineButtonStyle{padding:5px}input:focus+.popup,input:active+.popup{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RepeatButtonComponent, selector: "RepeatButton", inputs: ["Delay", "Interval"] }, { kind: "component", type: FontIconComponent, selector: "FontIcon", inputs: ["FontFamily", "FontSize", "FontStyle", "Foreground", "FontWeight", "Glyph"] }, { kind: "component", type: FlyoutComponent, selector: "Flyout" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NumberBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'NumberBox', template: `<label>
     <div class="icon">&#xEC8F;</div>
-    <input class="text-box" #input type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}" (blur)="onBlur()" (keydown)="onKeyDown($event)"/>
+    <input class="text-box" #input size="1" type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}" (blur)="onBlur()" (keydown)="onKeyDown($event)"/>
     <Flyout #flyout Padding="2px" Placement="Left" [HasBackdrop]="false" [Target]="flyoutTarget">
       <RepeatButton Class="InlineButtonStyle" (Click)="onIncreaseClick()" [Delay]="500" [Interval]="50"  (pointerdown)="onButtonPress()" (pointerup)="onButtonPress()"><FontIcon Glyph="&#xE70E;"/></RepeatButton>
       <RepeatButton Class="InlineButtonStyle" (Click)="onDecreaseClick()" [Delay]="500" [Interval]="50"  (pointerdown)="onButtonPress()" (pointerup)="onButtonPress()"><FontIcon Glyph="&#xE70D;"/></RepeatButton>
     </Flyout>
     <div class="unit" *ngIf="Unit !== undefined">{{Unit}}</div>    
-  </label>`, imports: [CommonModule, RepeatButtonComponent, FontIconComponent, FlyoutComponent], styles: [":host{position:relative}:host{display:grid;cursor:text;outline-style:none;border-style:solid;border-width:1px;border-radius:var(--ControlCornerRadius);padding:6px;background-color:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);border-bottom-color:var(--ControlStrongStrokeColorDefault)}:host:hover{background-color:var(--ControlFillColorSecondary)}:host:focus-within,:host:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}:host.disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault)}textarea{resize:none}.text-box{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary);font-family:var(--SystemFontFamily);font-size:var(--SystemFontSize)}.text-box::placeholder{color:var(--TextFillColorSecondary)}.text-box:disabled{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor)}\n", "label{display:grid;position:relative;grid-template-columns:auto 1fr auto auto}.icon{align-self:center;font-family:var(--SymbolFontFamily);color:var(--TextFillColorSecondary);pointer-events:none}.unit{align-self:center;color:var(--TextFillColorSecondary);pointer-events:none}.InlineButtonStyle{padding:5px}input:focus+.popup,input:active+.popup{display:flex}\n"] }]
+  </label>`, imports: [CommonModule, RepeatButtonComponent, FontIconComponent, FlyoutComponent], styles: [":host{position:relative}:host{display:grid;cursor:text;outline-style:none;border-style:solid;border-width:1px;border-radius:var(--ControlCornerRadius);padding:6px;background-color:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);border-bottom-color:var(--ControlStrongStrokeColorDefault)}:host:hover{background-color:var(--ControlFillColorSecondary)}:host:focus-within,:host:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}:host.disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault);pointer-events:none}textarea{resize:none}.text-box{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary);font-family:var(--SystemFontFamily);font-size:var(--SystemFontSize)}.text-box::placeholder{color:var(--TextFillColorSecondary)}.text-box:disabled{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor);color:var(--TextOnAccentFillColorSelected)}\n", "label{display:grid;position:relative;grid-template-columns:auto 1fr auto auto}.icon{align-self:center;font-family:var(--SymbolFontFamily);color:var(--TextFillColorSecondary);pointer-events:none}.unit{align-self:center;color:var(--TextFillColorSecondary);pointer-events:none}.InlineButtonStyle{padding:5px}input:focus+.popup,input:active+.popup{display:flex}\n"] }]
         }], ctorParameters: () => [], propDecorators: { IsEnabled: [{
                 type: Input
             }], PlaceholderText: [{
@@ -2939,12 +3023,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }], LargeChange: [{
                 type: Input
-            }], NumberFormatter: [{
-                type: Input
             }], Unit: [{
                 type: Input
             }], ValueChange: [{
                 type: Output
+            }], NumberFormatter: [{
+                type: Input
             }], _input: [{
                 type: ViewChild,
                 args: ['input']
@@ -2962,6 +3046,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }], onContextMenu: [{
                 type: HostListener,
                 args: ['contextmenu', ['$event']]
+            }], disabled: [{
+                type: HostBinding,
+                args: ['class.disabled']
             }] } });
 
 class TextBoxComponent extends FrameworkElementComponent {
@@ -2969,11 +3056,13 @@ class TextBoxComponent extends FrameworkElementComponent {
         super(...arguments);
         this.IsEnabled = true;
         this.PlaceholderText = '';
+        this.IsPlaceholderEditable = false;
         this.TextAlignment = 'Left';
         this.TextWrapping = 'NoWrap';
         this.UpdateTrigger = 'PropertyChanged';
         this._text = '';
         this.TextChange = new EventEmitter();
+        this._validatedValue = '';
     }
     get Text() {
         return this._text;
@@ -2982,18 +3071,33 @@ class TextBoxComponent extends FrameworkElementComponent {
         if (value == this._text)
             return;
         this._text = value;
+        this._validatedValue = value;
         this.TextChange.emit(value);
     }
-    onInput(event) {
+    onInput() {
+        //Validate input
+        if (this.Pattern) {
+            let element = this._input.nativeElement;
+            let regex = new RegExp(this.Pattern);
+            if (!element.value.match(regex)) {
+                element.value = this._validatedValue;
+                return;
+            }
+            this._validatedValue = element.value;
+        }
         if (this.UpdateTrigger == 'PropertyChanged')
-            this.update(event);
+            this.update();
     }
-    onBlur(event) {
+    onBlur() {
+        if (this.IsPlaceholderEditable && this.PlaceholderText && this._input.nativeElement.value === this.PlaceholderText) {
+            this._input.nativeElement.value = '';
+            this.update();
+        }
         if (this.UpdateTrigger == 'LostFocus')
-            this.update(event);
+            this.update();
     }
-    update(event) {
-        this.Text = (event.target).value;
+    update() {
+        this.Text = this._input.nativeElement.value;
     }
     get disabled() {
         return !this.IsEnabled;
@@ -3009,24 +3113,34 @@ class TextBoxComponent extends FrameworkElementComponent {
             this._input.nativeElement.focus();
         }, 0);
     }
+    onFocusIn() {
+        if (this.IsPlaceholderEditable && this.PlaceholderText && this.Text === '') {
+            this._input.nativeElement.value = this.PlaceholderText;
+            this.update();
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TextBoxComponent, isStandalone: true, selector: "TextBox", inputs: { IsEnabled: "IsEnabled", PlaceholderText: "PlaceholderText", TextAlignment: "TextAlignment", TextWrapping: "TextWrapping", UpdateTrigger: "UpdateTrigger", Text: "Text" }, outputs: { TextChange: "TextChange" }, host: { listeners: { "click": "onClick()", "contextmenu": "onContextMenu($event)" }, properties: { "class.disabled": "this.disabled" } }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<input class="text-box" #input *ngIf="TextWrapping === 'NoWrap'" type="text" [disabled]="!IsEnabled" [value]="Text" (input)="onInput($event)" (blur)="onBlur($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"/>
-  <textarea class="text-box" #input *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (input)="onInput($event)" (blur)="onBlur($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"></textarea>`, isInline: true, styles: [":host{position:relative}:host{display:grid;cursor:text;outline-style:none;border-style:solid;border-width:1px;border-radius:var(--ControlCornerRadius);padding:6px;background-color:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);border-bottom-color:var(--ControlStrongStrokeColorDefault)}:host:hover{background-color:var(--ControlFillColorSecondary)}:host:focus-within,:host:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}:host.disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault)}textarea{resize:none}.text-box{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary);font-family:var(--SystemFontFamily);font-size:var(--SystemFontSize)}.text-box::placeholder{color:var(--TextFillColorSecondary)}.text-box:disabled{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TextBoxComponent, isStandalone: true, selector: "TextBox", inputs: { IsEnabled: "IsEnabled", PlaceholderText: "PlaceholderText", IsPlaceholderEditable: "IsPlaceholderEditable", TextAlignment: "TextAlignment", TextWrapping: "TextWrapping", UpdateTrigger: "UpdateTrigger", Pattern: "Pattern", Text: "Text" }, outputs: { TextChange: "TextChange" }, host: { listeners: { "click": "onClick()", "contextmenu": "onContextMenu($event)", "focusin": "onFocusIn()" }, properties: { "class.disabled": "this.disabled" } }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<input class="text-box" #input *ngIf="TextWrapping === 'NoWrap'" type="text" size="1" [disabled]="!IsEnabled" [value]="Text" (input)="onInput()" (blur)="onBlur()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"/>
+  <textarea class="text-box" #input *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (input)="onInput()" (blur)="onBlur()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"></textarea>`, isInline: true, styles: [":host{position:relative}:host{display:grid;cursor:text;outline-style:none;border-style:solid;border-width:1px;border-radius:var(--ControlCornerRadius);padding:6px;background-color:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);border-bottom-color:var(--ControlStrongStrokeColorDefault)}:host:hover{background-color:var(--ControlFillColorSecondary)}:host:focus-within,:host:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}:host.disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault);pointer-events:none}textarea{resize:none}.text-box{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary);font-family:var(--SystemFontFamily);font-size:var(--SystemFontSize)}.text-box::placeholder{color:var(--TextFillColorSecondary)}.text-box:disabled{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor);color:var(--TextOnAccentFillColorSelected)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'TextBox', imports: [CommonModule], template: `<input class="text-box" #input *ngIf="TextWrapping === 'NoWrap'" type="text" [disabled]="!IsEnabled" [value]="Text" (input)="onInput($event)" (blur)="onBlur($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"/>
-  <textarea class="text-box" #input *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (input)="onInput($event)" (blur)="onBlur($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"></textarea>`, styles: [":host{position:relative}:host{display:grid;cursor:text;outline-style:none;border-style:solid;border-width:1px;border-radius:var(--ControlCornerRadius);padding:6px;background-color:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);border-bottom-color:var(--ControlStrongStrokeColorDefault)}:host:hover{background-color:var(--ControlFillColorSecondary)}:host:focus-within,:host:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}:host.disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault)}textarea{resize:none}.text-box{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary);font-family:var(--SystemFontFamily);font-size:var(--SystemFontSize)}.text-box::placeholder{color:var(--TextFillColorSecondary)}.text-box:disabled{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor)}\n"] }]
+            args: [{ selector: 'TextBox', imports: [CommonModule], template: `<input class="text-box" #input *ngIf="TextWrapping === 'NoWrap'" type="text" size="1" [disabled]="!IsEnabled" [value]="Text" (input)="onInput()" (blur)="onBlur()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"/>
+  <textarea class="text-box" #input *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (input)="onInput()" (blur)="onBlur()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"></textarea>`, styles: [":host{position:relative}:host{display:grid;cursor:text;outline-style:none;border-style:solid;border-width:1px;border-radius:var(--ControlCornerRadius);padding:6px;background-color:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);border-bottom-color:var(--ControlStrongStrokeColorDefault)}:host:hover{background-color:var(--ControlFillColorSecondary)}:host:focus-within,:host:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}:host.disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault);pointer-events:none}textarea{resize:none}.text-box{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary);font-family:var(--SystemFontFamily);font-size:var(--SystemFontSize)}.text-box::placeholder{color:var(--TextFillColorSecondary)}.text-box:disabled{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor);color:var(--TextOnAccentFillColorSelected)}\n"] }]
         }], propDecorators: { IsEnabled: [{
                 type: Input
             }], PlaceholderText: [{
                 type: Input
+            }], IsPlaceholderEditable: [{
+                type: Input
             }], TextAlignment: [{
                 type: Input
             }], TextWrapping: [{
                 type: Input
             }], UpdateTrigger: [{
                 type: Input
+            }], Pattern: [{
+                type: Input
             }], _input: [{
                 type: ViewChild,
                 args: ['input']
@@ -3043,6 +3157,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }], onContextMenu: [{
                 type: HostListener,
                 args: ['contextmenu', ['$event']]
+            }], onFocusIn: [{
+                type: HostListener,
+                args: ['focusin', []]
             }] } });
 
 /*
@@ -3054,5 +3171,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AppBarButtonComponent, BorderComponent, ButtonComponent, CheckBoxComponent, ColorPickerComponent, ComboBoxComponent, CommandBarComponent, ContentDialog, ContentDialogButton, ContentDialogResult, ContextFlyoutDirective, Dialog, DialogPresenter, DropDownButtonComponent, EllipseComponent, FlyoutBaseComponent, FlyoutComponent, FlyoutDirective, FlyoutPresenter, FontIconComponent, FrameworkElementComponent, GridColumnDirective, GridColumnSpanDirective, GridComponent, GridDirective, GridModule, GridProperty, GridRowDirective, GridRowSpanDirective, GridViewComponent, ImageComponent, ItemFlyoutDirective, ListBoxComponent, ListViewComponent, MenuFlyoutComponent, MenuFlyoutItemBase, MenuFlyoutItemComponent, MenuFlyoutSeparator, NumberBoxComponent, PanelComponent, PersonPictureComponent, PopupTemplate, ProgressBarComponent, ProgressRingComponent, RadioButtonComponent, RadioButtonGroupComponent, RadioToggleButtonComponent, RepeatButtonComponent, ScrollBarComponent, ScrollViewerComponent, SelectorComponent, SelectorItemTemplate, SliderComponent, SplitButtonComponent, StackPanelComponent, TextBlockComponent, TextBoxComponent, ToggleButtonComponent, ToggleMenuFlyoutItemComponent, ToggleSwitchComponent, ToolTipDirective, ToolTipServiceModule, XamlRootComponent, colorToRgb, colorToString, resume_after, resume_on_event, rgbToHsl, stringToColor, toAlignment, toJustification };
+export { AppBarButtonComponent, BorderComponent, ButtonComponent, CheckBoxComponent, ColorPickerComponent, ComboBoxComponent, CommandBarComponent, ContentDialog, ContentDialogButton, ContentDialogPresenter, ContentDialogResult, ContextFlyoutDirective, Dialog, DialogPresenter, DropDownButtonComponent, EllipseComponent, FlyoutBaseComponent, FlyoutComponent, FlyoutDirective, FlyoutPresenter, FontIconComponent, FrameworkElementComponent, GridColumnDirective, GridColumnSpanDirective, GridComponent, GridDirective, GridModule, GridProperty, GridRowDirective, GridRowSpanDirective, GridViewComponent, ImageComponent, ItemFlyoutDirective, ListBoxComponent, ListViewComponent, MenuFlyoutComponent, MenuFlyoutItemBase, MenuFlyoutItemComponent, MenuFlyoutSeparator, NumberBoxComponent, PanelComponent, PersonPictureComponent, PopupTemplate, ProgressBarComponent, ProgressRingComponent, RadioButtonComponent, RadioButtonGroupComponent, RadioToggleButtonComponent, RepeatButtonComponent, ScrollBarComponent, ScrollViewerComponent, SelectorComponent, SelectorItemTemplate, SliderComponent, SplitButtonComponent, StackPanelComponent, TextBlockComponent, TextBoxComponent, ToggleButtonComponent, ToggleMenuFlyoutItemComponent, ToggleSwitchComponent, ToolTipDirective, ToolTipServiceModule, XamlRootComponent, colorToRgb, colorToString, resume_after, resume_on_event, rgbToHsl, stringToColor, toAlignment, toJustification };
 //# sourceMappingURL=xaml-ui.mjs.map