xaml-ui 1.0.5 → 1.0.7

package/fesm2022/xaml-ui.mjs

@@ -2,6 +2,11 @@ import * as i0 from '@angular/core';
 import { HostBinding, Input, Component, EventEmitter, HostListener, ContentChild, Output, ViewChild, TemplateRef, Optional, Directive, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { trigger, transition, animate, keyframes, style } from '@angular/animations';
+import * as i1$1 from '@angular/cdk/overlay';
+import { OverlayConfig } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
 
 function toJustification(value) {
     return value.toLowerCase();
@@ -25,6 +30,19 @@ class FrameworkElementComponent {
         this.VerticalAlignment = 'Stretch';
         this._id = FrameworkElementComponent._nextId++;
     }
+    get overflow() {
+        return 'hidden';
+    }
+    get minWidth() {
+        if (this.MinWidth !== undefined)
+            return this.MinWidth;
+        return this.MaxWidth === undefined && this.HorizontalAlignment === 'Stretch' ? 'min-content' : undefined;
+    }
+    get minHeight() {
+        if (this.MinHeight !== undefined)
+            return this.MinHeight;
+        return this.MaxHeight === undefined && this.VerticalAlignment === 'Stretch' ? 'min-content' : undefined;
+    }
     get width() {
         if (this.Width !== undefined)
             return this.Width;
@@ -43,7 +61,7 @@ class FrameworkElementComponent {
     }
     static { this._nextId = 1; }
     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" }, host: { properties: { "style.min-width": "this.MinWidth", "style.max-width": "this.MaxWidth", "style.min-height": "this.MinHeight", "style.max-height": "this.MaxHeight", "style.margin": "this.Margin", "style.padding": "this.Padding", "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 }); }
+    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" }, host: { properties: { "style.max-width": "this.MaxWidth", "style.max-height": "this.MaxHeight", "style.margin": "this.Margin", "style.padding": "this.Padding", "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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FrameworkElementComponent, decorators: [{
             type: Component,
@@ -55,9 +73,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }], MinWidth: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.min-width']
             }], MaxWidth: [{
                 type: Input
             }, {
@@ -67,9 +82,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }], MinHeight: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.min-height']
             }], MaxHeight: [{
                 type: Input
             }, {
@@ -89,6 +101,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }, {
                 type: HostBinding,
                 args: ['style.padding']
+            }], overflow: [{
+                type: HostBinding,
+                args: ['style.overflow']
+            }], minWidth: [{
+                type: HostBinding,
+                args: ['style.min-width']
+            }], minHeight: [{
+                type: HostBinding,
+                args: ['style.min-height']
             }], width: [{
                 type: HostBinding,
                 args: ['style.width']
@@ -171,7 +192,7 @@ class ButtonComponent extends BorderComponent {
     onHostPointerEvent(event) {
         if (!this.IsEnabled)
             return;
-        this.Click.emit();
+        this.Click.emit(event);
         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 }); }
@@ -263,10 +284,10 @@ function stringToColor(value) {
 }
 function colorToRgb(value) {
     return {
-        r: value >> 24 & 0xff,
-        g: value >> 16 & 0xff,
-        b: value >> 8 & 0xff,
-        a: value & 0xff
+        r: value >> 16 & 0xff,
+        g: value >> 8 & 0xff,
+        b: value & 0xff,
+        a: value >> 24 & 0xff
     };
 }
 function rgbToHsl(rgb) {
@@ -363,10 +384,12 @@ class ColorPickerComponent extends FrameworkElementComponent {
         this._selector.nativeElement.style.top = sampleY + 'px';
         let imageData = this._context.getImageData(sampleX, sampleY, 1, 1).data;
         let [r, g, b] = imageData;
-        let color = ((r << 24) + (g << 16) + (b << 8) + 0xff) >>> 0;
+        let color = ((0xff << 24) + (r << 16) + (g << 8) + b) >>> 0;
         this.setColor(color);
     }
     updateSelectorPosition() {
+        if (!this._canvas)
+            return;
         let rgb = colorToRgb(this.Color);
         let hsl = rgbToHsl(rgb);
         let radius = this._canvas.nativeElement.width / 2;
@@ -400,19 +423,6 @@ const SelectorItemTemplate = `<ng-container *ngIf="ItemTemplate">
   </ng-container>
   <ng-container *ngIf="!ItemTemplate">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container>`;
 class SelectorComponent extends FrameworkElementComponent {
-    constructor() {
-        super(...arguments);
-        this.IsEnabled = true;
-        this.HorizontalContentAlignment = 'Left';
-        this.VerticalContentAlignment = 'Center';
-        //ItemSource
-        this._itemSource = [];
-        //Selected index
-        this._selectedIndex = -1;
-        this.SelectedIndexChange = new EventEmitter();
-        this.SelectedValueChange = new EventEmitter();
-        this.SelectedItemChange = new EventEmitter();
-    }
     get alignContent() {
         return toAlignment(this.VerticalContentAlignment);
     }
@@ -426,23 +436,44 @@ class SelectorComponent extends FrameworkElementComponent {
         return this._itemSource;
     }
     set ItemSource(value) {
+        let oldIndex = this.SelectedIndex;
+        let oldValue = this.SelectedValue;
+        let oldItem = this.SelectedItem;
+        let newIndex = value.findIndex(p => this.getValue(-1, p) == oldValue);
+        let newValue = newIndex !== -1 ? oldValue : null;
+        let newItem = newIndex !== -1 ? value[newIndex] : null;
         this._itemSource = value;
-        this.SelectedIndex = this.SelectedIndex;
+        this._selectedIndex = newIndex;
+        if (oldIndex !== newIndex)
+            this.SelectedIndexChange.emit(this.SelectedIndex);
+        if (oldValue !== newValue)
+            this.SelectedValueChange.emit(this.SelectedValue);
+        if (oldItem !== newItem)
+            this.SelectedItemChange.emit(this.SelectedItem);
     }
     get SelectedIndex() {
         return this._selectedIndex;
     }
     set SelectedIndex(value) {
+        if (this.ItemSource === undefined)
+            return;
         if (value < 0 && this.ItemSource.length > 0)
-            value = 0;
+            value = -1;
         if (value >= this.ItemSource.length)
             value = this.ItemSource.length - 1;
-        if (value == this._selectedIndex)
-            return;
+        let oldIndex = this._selectedIndex;
+        let oldValue = this.SelectedValue;
+        let oldItem = this.SelectedItem;
         this._selectedIndex = value;
-        this.SelectedIndexChange.emit(this.SelectedIndex);
-        this.SelectedValueChange.emit(this.SelectedValue);
-        this.SelectedItemChange.emit(this.SelectedItem);
+        let newIndex = this._selectedIndex;
+        let newValue = this.SelectedValue;
+        let newItem = this.SelectedItem;
+        if (oldIndex !== newIndex)
+            this.SelectedIndexChange.emit(this.SelectedIndex);
+        if (oldValue !== newValue)
+            this.SelectedValueChange.emit(this.SelectedValue);
+        if (oldItem !== newItem)
+            this.SelectedItemChange.emit(this.SelectedItem);
     }
     //Selected value
     get SelectedValue() {
@@ -451,6 +482,8 @@ class SelectorComponent extends FrameworkElementComponent {
         return this.getValue(-1, this.ItemSource[this.SelectedIndex]);
     }
     set SelectedValue(value) {
+        if (this.ItemSource === undefined)
+            return;
         this.SelectedIndex = this.ItemSource.findIndex(p => this.getValue(-1, p) == value);
     }
     //Selected item
@@ -460,11 +493,10 @@ class SelectorComponent extends FrameworkElementComponent {
         return this.ItemSource[this.SelectedIndex];
     }
     set SelectedItem(value) {
+        if (this.ItemSource === undefined)
+            return;
         this.SelectedIndex = this.ItemSource.findIndex(value);
     }
-    getValue(index, item) {
-        return this.SelectedValuePath ? item[this.SelectedValuePath] : item;
-    }
     onItemClick(event, index, item) {
         if (this.SelectedIndex === index || !this.IsEnabled)
             return;
@@ -474,7 +506,24 @@ class SelectorComponent extends FrameworkElementComponent {
     GetElement(index) {
         return document.querySelector(`#xaml-selector-${this._id}-item-${index}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    constructor() {
+        super();
+        this.IsEnabled = true;
+        this.HorizontalContentAlignment = 'Left';
+        this.VerticalContentAlignment = 'Center';
+        //ItemSource
+        this._itemSource = [];
+        //Selected index
+        this._selectedIndex = -1;
+        this.SelectedIndexChange = new EventEmitter();
+        this.SelectedValueChange = new EventEmitter();
+        this.SelectedItemChange = new EventEmitter();
+        //This is required otherwise the SelectedValuePath cannot be read
+        this.getValue = (index, item) => {
+            return this.SelectedValuePath !== undefined ? item[this.SelectedValuePath] : item;
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: SelectorComponent, isStandalone: true, selector: "Selector", inputs: { IsEnabled: "IsEnabled", HorizontalContentAlignment: "HorizontalContentAlignment", VerticalContentAlignment: "VerticalContentAlignment", ItemSource: "ItemSource", SelectedIndex: "SelectedIndex", SelectedValue: "SelectedValue", SelectedItem: "SelectedItem", DisplayMemberPath: "DisplayMemberPath", SelectedValuePath: "SelectedValuePath" }, outputs: { SelectedIndexChange: "SelectedIndexChange", SelectedValueChange: "SelectedValueChange", SelectedItemChange: "SelectedItemChange" }, host: { properties: { "class.disabled": "this.disabled" } }, queries: [{ propertyName: "ItemTemplate", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectorComponent, decorators: [{
@@ -483,7 +532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                     selector: 'Selector',
                     template: '',
                 }]
-        }], propDecorators: { ItemTemplate: [{
+        }], ctorParameters: () => [], propDecorators: { ItemTemplate: [{
                 type: ContentChild,
                 args: [TemplateRef]
             }], IsEnabled: [{
@@ -652,7 +701,7 @@ class ScrollBarComponent extends FrameworkElementComponent {
     <div #track class="track" (pointerdown)="onTrackDown($event)" (pointerup)="onTrackUp($event)">
       <div #thumb class="thumb" [ngStyle]="thumbStyle" (pointerdown)="onPointerDown($event)" (pointermove)="onPointerMove($event)" (pointerup)="onPointerUp($event)"></div>
     </div>
-    <div class="buttons" (pointerdown)="onButtonDown($event, true)" (pointerup)="onButtonUp($event)">{{increaseGlyph}}</div>`, isInline: true, styles: [":host{position:relative}:host{display:grid;background-color:var(--SubtleFillColorTransparent)}:host.horizontal{grid-template-columns:auto 1fr auto}:host.horizontal>.buttons{align-self:center}:host.horizontal>.track{transform:translateY(-.75px);align-self:center;margin:0 -2px 0 -3px}:host.horizontal>.track>.thumb{transform:translateY(3px)}:host.vertical{grid-template-rows:auto 1fr auto}:host.vertical>.buttons{justify-self:center}:host.vertical>.track{transform:translate(-.75px);justify-self:center;margin:-3px 0 -2px}:host.vertical>.track>.thumb{transform:translate(3px)}:host:hover{background-color:var(--AcrylicInAppFillColorDefault);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}:host:hover>.buttons{display:grid;opacity:1}:host:hover>.track>.thumb{min-width:10px;min-height:10px;transform:translate(0)}:host>.buttons{display:hidden;font-family:var(--SymbolFontFamily);font-size:8pt;min-width:12px;min-height:12px;margin:4px;transform-origin:center;opacity:0;transition:opacity var(--ControlNormalAnimationDuration);color:var(--ControlStrongFillColorDefault)}:host>.buttons:hover{color:var(--TextFillColorSecondary)}:host>.buttons:active{color:var(--TextFillColorSecondary);transform:scale(.875)}:host>.track{display:grid;position:relative}:host>.track>.thumb{background-color:var(--ControlStrongFillColorDefault);position:relative;border-radius:3px;transition:transform var(--ControlNormalAnimationDuration),min-width var(--ControlNormalAnimationDuration),min-height var(--ControlNormalAnimationDuration);min-width:2px;min-height:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    <div class="buttons" (pointerdown)="onButtonDown($event, true)" (pointerup)="onButtonUp($event)">{{increaseGlyph}}</div>`, isInline: true, styles: [":host{position:relative}:host{display:grid;background-color:var(--SubtleFillColorTransparent)}:host.horizontal{grid-template-columns:auto 1fr auto}:host.horizontal>.buttons{align-self:center}:host.horizontal>.track{transform:translateY(-.75px);align-self:center;margin:0 -2px 0 -3px}:host.horizontal>.track>.thumb{transform:translateY(3px)}:host.vertical{grid-template-rows:auto 1fr auto}:host.vertical>.buttons{justify-self:center}:host.vertical>.track{transform:translate(-.75px);justify-self:center;margin:-3px 0 -2px}:host.vertical>.track>.thumb{transform:translate(3px)}:host:hover>.buttons{display:grid;opacity:1}:host:hover>.track>.thumb{min-width:10px;min-height:10px;transform:translate(0)}:host>.buttons{display:hidden;font-family:var(--SymbolFontFamily);font-size:8pt;min-width:12px;min-height:12px;margin:4px;transform-origin:center;opacity:0;transition:opacity var(--ControlNormalAnimationDuration);color:var(--ControlStrongFillColorDefault)}:host>.buttons:hover{color:var(--TextFillColorSecondary)}:host>.buttons:active{color:var(--TextFillColorSecondary);transform:scale(.875)}:host>.track{display:grid;position:relative}:host>.track>.thumb{background-color:var(--ControlStrongFillColorDefault);position:relative;border-radius:3px;transition:transform var(--ControlNormalAnimationDuration),min-width var(--ControlNormalAnimationDuration),min-height var(--ControlNormalAnimationDuration);min-width:2px;min-height:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScrollBarComponent, decorators: [{
             type: Component,
@@ -660,7 +709,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
     <div #track class="track" (pointerdown)="onTrackDown($event)" (pointerup)="onTrackUp($event)">
       <div #thumb class="thumb" [ngStyle]="thumbStyle" (pointerdown)="onPointerDown($event)" (pointermove)="onPointerMove($event)" (pointerup)="onPointerUp($event)"></div>
     </div>
-    <div class="buttons" (pointerdown)="onButtonDown($event, true)" (pointerup)="onButtonUp($event)">{{increaseGlyph}}</div>`, styles: [":host{position:relative}:host{display:grid;background-color:var(--SubtleFillColorTransparent)}:host.horizontal{grid-template-columns:auto 1fr auto}:host.horizontal>.buttons{align-self:center}:host.horizontal>.track{transform:translateY(-.75px);align-self:center;margin:0 -2px 0 -3px}:host.horizontal>.track>.thumb{transform:translateY(3px)}:host.vertical{grid-template-rows:auto 1fr auto}:host.vertical>.buttons{justify-self:center}:host.vertical>.track{transform:translate(-.75px);justify-self:center;margin:-3px 0 -2px}:host.vertical>.track>.thumb{transform:translate(3px)}:host:hover{background-color:var(--AcrylicInAppFillColorDefault);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}:host:hover>.buttons{display:grid;opacity:1}:host:hover>.track>.thumb{min-width:10px;min-height:10px;transform:translate(0)}:host>.buttons{display:hidden;font-family:var(--SymbolFontFamily);font-size:8pt;min-width:12px;min-height:12px;margin:4px;transform-origin:center;opacity:0;transition:opacity var(--ControlNormalAnimationDuration);color:var(--ControlStrongFillColorDefault)}:host>.buttons:hover{color:var(--TextFillColorSecondary)}:host>.buttons:active{color:var(--TextFillColorSecondary);transform:scale(.875)}:host>.track{display:grid;position:relative}:host>.track>.thumb{background-color:var(--ControlStrongFillColorDefault);position:relative;border-radius:3px;transition:transform var(--ControlNormalAnimationDuration),min-width var(--ControlNormalAnimationDuration),min-height var(--ControlNormalAnimationDuration);min-width:2px;min-height:2px}\n"] }]
+    <div class="buttons" (pointerdown)="onButtonDown($event, true)" (pointerup)="onButtonUp($event)">{{increaseGlyph}}</div>`, styles: [":host{position:relative}:host{display:grid;background-color:var(--SubtleFillColorTransparent)}:host.horizontal{grid-template-columns:auto 1fr auto}:host.horizontal>.buttons{align-self:center}:host.horizontal>.track{transform:translateY(-.75px);align-self:center;margin:0 -2px 0 -3px}:host.horizontal>.track>.thumb{transform:translateY(3px)}:host.vertical{grid-template-rows:auto 1fr auto}:host.vertical>.buttons{justify-self:center}:host.vertical>.track{transform:translate(-.75px);justify-self:center;margin:-3px 0 -2px}:host.vertical>.track>.thumb{transform:translate(3px)}:host:hover>.buttons{display:grid;opacity:1}:host:hover>.track>.thumb{min-width:10px;min-height:10px;transform:translate(0)}:host>.buttons{display:hidden;font-family:var(--SymbolFontFamily);font-size:8pt;min-width:12px;min-height:12px;margin:4px;transform-origin:center;opacity:0;transition:opacity var(--ControlNormalAnimationDuration);color:var(--ControlStrongFillColorDefault)}:host>.buttons:hover{color:var(--TextFillColorSecondary)}:host>.buttons:active{color:var(--TextFillColorSecondary);transform:scale(.875)}:host>.track{display:grid;position:relative}:host>.track>.thumb{background-color:var(--ControlStrongFillColorDefault);position:relative;border-radius:3px;transition:transform var(--ControlNormalAnimationDuration),min-width var(--ControlNormalAnimationDuration),min-height var(--ControlNormalAnimationDuration);min-width:2px;min-height:2px}\n"] }]
         }], propDecorators: { Orientation: [{
                 type: Input
             }], ViewportSize: [{
@@ -763,13 +812,13 @@ class ScrollViewerComponent extends FrameworkElementComponent {
         this._changeDetector.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScrollViewerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ScrollViewerComponent, isStandalone: true, selector: "ScrollViewer", inputs: { HorizontalScrollMode: "HorizontalScrollMode", VerticalScrollMode: "VerticalScrollMode" }, viewQueries: [{ propertyName: "_content", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<div #content class="content" [ngStyle]="contentStyle" (scroll)="onScroll()"><ng-content/></div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ScrollViewerComponent, isStandalone: true, selector: "ScrollViewer", inputs: { HorizontalScrollMode: "HorizontalScrollMode", VerticalScrollMode: "VerticalScrollMode" }, viewQueries: [{ propertyName: "_content", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<div #content class="content" [ngStyle]="contentStyle" (scroll)="onScroll()" cdkScrollable><ng-content/></div>
     <ScrollBar *ngIf="IsVerticalScrollBarVisible" HorizontalAlignment="Right" class="scrollbar" Orientation="Vertical" [ScrollSize]="ExtentHeight" [ViewportSize]="ViewportHeight" [(Value)]="VerticalOffset"/>
-    <ScrollBar *ngIf="IsHorizontalScrollBarVisible" VerticalAlignment="Bottom" class="scrollbar" Orientation="Horizontal" [ScrollSize]="ExtentWidth" [ViewportSize]="ViewportWidth" [(Value)]="HorizontalOffset"/>`, isInline: true, styles: [":host{display:grid;overflow:auto}:host>.content{overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;display:grid;grid-row-start:1;grid-column-start:1;justify-self:stretch;align-self:stretch}:host>.content::-webkit-scrollbar{display:none}:host>.scrollbar{display:grid;grid-row-start:1;grid-column-start:1}\n"], dependencies: [{ 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: ScrollBarComponent, selector: "ScrollBar", inputs: ["Orientation", "ViewportSize", "ScrollSize", "StepSize", "Value", "IsEnabled"], outputs: ["ValueChange"] }] }); }
+    <ScrollBar *ngIf="IsHorizontalScrollBarVisible" VerticalAlignment="Bottom" class="scrollbar" Orientation="Horizontal" [ScrollSize]="ExtentWidth" [ViewportSize]="ViewportWidth" [(Value)]="HorizontalOffset"/>`, isInline: true, styles: [":host{display:grid;overflow:auto}:host>.content{overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;display:grid;grid-row-start:1;grid-column-start:1;justify-self:stretch;align-self:stretch}:host>.content::-webkit-scrollbar{display:none}:host>.scrollbar{display:grid;grid-row-start:1;grid-column-start:1}\n"], dependencies: [{ 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: ScrollBarComponent, selector: "ScrollBar", inputs: ["Orientation", "ViewportSize", "ScrollSize", "StepSize", "Value", "IsEnabled"], outputs: ["ValueChange"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScrollViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ScrollViewer', imports: [CommonModule, ScrollBarComponent], template: `<div #content class="content" [ngStyle]="contentStyle" (scroll)="onScroll()"><ng-content/></div>
+            args: [{ selector: 'ScrollViewer', imports: [CommonModule, ScrollBarComponent, CdkScrollable], template: `<div #content class="content" [ngStyle]="contentStyle" (scroll)="onScroll()" cdkScrollable><ng-content/></div>
     <ScrollBar *ngIf="IsVerticalScrollBarVisible" HorizontalAlignment="Right" class="scrollbar" Orientation="Vertical" [ScrollSize]="ExtentHeight" [ViewportSize]="ViewportHeight" [(Value)]="VerticalOffset"/>
     <ScrollBar *ngIf="IsHorizontalScrollBarVisible" VerticalAlignment="Bottom" class="scrollbar" Orientation="Horizontal" [ScrollSize]="ExtentWidth" [ViewportSize]="ViewportWidth" [(Value)]="HorizontalOffset"/>`, styles: [":host{display:grid;overflow:auto}:host>.content{overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;display:grid;grid-row-start:1;grid-column-start:1;justify-self:stretch;align-self:stretch}:host>.content::-webkit-scrollbar{display:none}:host>.scrollbar{display:grid;grid-row-start:1;grid-column-start:1}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { HorizontalScrollMode: [{
@@ -786,11 +835,17 @@ class StackPanelComponent extends PanelComponent {
         super(...arguments);
         this.Orientation = 'Vertical';
     }
-    get gridAutoColumns() {
+    get gridAutoFlow() {
         return this.Orientation === 'Horizontal' ? 'column' : 'row';
     }
+    get gridAutoRows() {
+        return this.Orientation === 'Vertical' ? 'min-content' : undefined;
+    }
+    get gridAutoColumns() {
+        return this.Orientation === 'Horizontal' ? 'min-content' : undefined;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: StackPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: StackPanelComponent, isStandalone: true, selector: "StackPanel", inputs: { Orientation: "Orientation", Spacing: "Spacing" }, host: { properties: { "style.gap": "this.Spacing", "style.grid-auto-flow": "this.gridAutoColumns" } }, 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: StackPanelComponent, isStandalone: true, selector: "StackPanel", inputs: { Orientation: "Orientation", Spacing: "Spacing" }, host: { properties: { "style.gap": "this.Spacing", "style.grid-auto-flow": "this.gridAutoFlow", "style.grid-auto-rows": "this.gridAutoRows", "style.grid-auto-columns": "this.gridAutoColumns" } }, 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: StackPanelComponent, decorators: [{
             type: Component,
@@ -802,108 +857,330 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }, {
                 type: HostBinding,
                 args: ['style.gap']
-            }], gridAutoColumns: [{
+            }], gridAutoFlow: [{
                 type: HostBinding,
                 args: ['style.grid-auto-flow']
+            }], gridAutoRows: [{
+                type: HostBinding,
+                args: ['style.grid-auto-rows']
+            }], gridAutoColumns: [{
+                type: HostBinding,
+                args: ['style.grid-auto-columns']
             }] } });
 
 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      <div *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\">\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; context: { $implicit: item }\"/>\n  </ng-container>\n  <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container></div>\n      </div>\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"] }] }); }
+    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      <div *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; context: { $implicit: item }\"/>\n  </ng-container>\n  <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container></div>\n      </div>\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"] }], animations: [
+            trigger('itemFading', [
+                transition(':enter', [animate('500ms ease-in', keyframes([
+                        style({ opacity: 0, height: 0 }),
+                        style({ opacity: 0, height: '*' }),
+                        style({ opacity: 1, height: '*' }),
+                    ]))]),
+                transition(':leave', [animate('500ms ease-out', keyframes([
+                        style({ opacity: 1, height: '*' }),
+                        style({ opacity: 0, height: '*' }),
+                        style({ opacity: 0, height: 0 }),
+                    ]))]),
+            ])
+        ] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ListView', imports: [CommonModule, ScrollViewerComponent, StackPanelComponent], template: `<ScrollViewer>
     <StackPanel Padding="2px 0">
-      <div *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">
+      <div *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>
         <div class="item-selector"></div>
         <div class="item-content" [ngStyle]="{'align-content': alignContent, 'justify-content': justifyContent}">${SelectorItemTemplate}</div>
       </div>
     </StackPanel>
-  </ScrollViewer>`, 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"] }]
+  </ScrollViewer>`, animations: [
+                        trigger('itemFading', [
+                            transition(':enter', [animate('500ms ease-in', keyframes([
+                                    style({ opacity: 0, height: 0 }),
+                                    style({ opacity: 0, height: '*' }),
+                                    style({ opacity: 1, height: '*' }),
+                                ]))]),
+                            transition(':leave', [animate('500ms ease-out', keyframes([
+                                    style({ opacity: 1, height: '*' }),
+                                    style({ opacity: 0, height: '*' }),
+                                    style({ opacity: 0, height: 0 }),
+                                ]))]),
+                        ])
+                    ], 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"] }]
         }] });
 
-class PopupComponent {
+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:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.disabled:not(.checked){background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host.disabled:not(.checked)::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:hover.checked:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked: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)}\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:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.disabled:not(.checked){background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host.disabled:not(.checked)::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:hover.checked:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked: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)}\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 {
     constructor() {
-        this._title = '';
-        this.isRendered = false;
-        this._isOpen = false;
-        this.IsOpenChange = new EventEmitter();
-        this.VerticalOffset = 0;
-        this.HorizontalOffset = 0;
+        this.TransitionAnimation = 'Default';
+        this.IsVisible = false;
+    }
+    static { this.TransitionDuration = 250; }
+    get transitionClass() {
+        return 'transition-' + this.TransitionAnimation.toLowerCase();
+    }
+    get visible() {
+        return this.IsVisible;
     }
+    onContextMenu(event) {
+        event.preventDefault();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutPresenter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FlyoutPresenter, isStandalone: true, selector: "FlyoutPresenter", inputs: { TransitionAnimation: "TransitionAnimation", Padding: "Padding", IsVisible: "IsVisible" }, host: { listeners: { "contextmenu": "onContextMenu($event)" }, properties: { "style.padding": "this.Padding", "class": "this.transitionClass", "class.visible": "this.visible" } }, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;overflow:hidden;-webkit-user-select:none;user-select:none;border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #00000080;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault);transition:opacity var(--ControlNormalAnimationDuration),transform var(--ControlNormalAnimationDuration);opacity:0;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px)}:host.transition-slideup{transform:translateY(10px)}:host.transition-slidedown{transform:translateY(-10px)}:host.transition-slideleft{transform:translate(10px)}:host.transition-slideright{transform:translate(-10px)}:host.visible{opacity:1;transform:translate(0)}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutPresenter, decorators: [{
+            type: Component,
+            args: [{ selector: 'FlyoutPresenter', template: `<ng-content/>`, styles: [":host{display:grid;overflow:hidden;-webkit-user-select:none;user-select:none;border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #00000080;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault);transition:opacity var(--ControlNormalAnimationDuration),transform var(--ControlNormalAnimationDuration);opacity:0;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px)}:host.transition-slideup{transform:translateY(10px)}:host.transition-slidedown{transform:translateY(-10px)}:host.transition-slideleft{transform:translate(10px)}:host.transition-slideright{transform:translate(-10px)}:host.visible{opacity:1;transform:translate(0)}\n"] }]
+        }], propDecorators: { TransitionAnimation: [{
+                type: Input
+            }], Padding: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.padding']
+            }], IsVisible: [{
+                type: Input
+            }], transitionClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], visible: [{
+                type: HostBinding,
+                args: ['class.visible']
+            }], onContextMenu: [{
+                type: HostListener,
+                args: ['contextmenu', ['$event']]
+            }] } });
+
+const PopupTemplate = `<ng-template #template><FlyoutPresenter #presenter [IsVisible]="isVisible" [TransitionAnimation]="transitionAnimation" [Padding]="Padding"><ng-content/></FlyoutPresenter></ng-template>`;
+class FlyoutBaseComponent {
     get IsOpen() {
         return this._isOpen;
     }
-    ;
     set IsOpen(value) {
+        if (value === this._isOpen)
+            return;
         this._isOpen = value;
-        if (this._isRenderedTimeout !== undefined) {
-            clearTimeout(this._isRenderedTimeout);
-        }
         if (value) {
-            this.isRendered = true;
+            this.updatePlacement();
+            this._overlayRef.attach(this._templatePortal);
+            if (this.HasBackdrop)
+                this._backdropContextMenuSubscription = this._renderer.listen(this._overlayRef.backdropElement, 'contextmenu', p => { p.preventDefault(); this.Hide(); });
+            setTimeout(() => this.isVisible = true, 0);
         }
         else {
-            this._isRenderedTimeout = setTimeout(() => {
-                this.isRendered = false;
-            }, 250);
+            this.isVisible = false;
+            setTimeout(() => this._overlayRef.detach(), FlyoutPresenter.TransitionDuration);
+            if (this._backdropContextMenuSubscription)
+                this._backdropContextMenuSubscription();
+        }
+        this.IsOpenChange.emit(value);
+    }
+    updatePlacement() {
+        if (!this._overlayRef)
+            return;
+        let target = this.Target ?? this._hostElement;
+        let positionStrategy = this._overlay
+            .position()
+            .flexibleConnectedTo(target)
+            .withPositions([this.positioning])
+            .withGrowAfterOpen(true)
+            .withFlexibleDimensions(true)
+            .withPush(true);
+        this._overlayRef.updatePositionStrategy(positionStrategy);
+        if (this.Placement === 'Cover') {
+            this._overlayRef.updateSize(target);
         }
-        if (value && this._container) {
-            this._container.nativeElement.style.transform = `translate(${this.HorizontalOffset}px, ${this.VerticalOffset - 4}px)`;
+    }
+    get Target() {
+        return this._target;
+    }
+    set Target(value) {
+        this._target = value;
+        this.updatePlacement();
+    }
+    get style() {
+        return {
+            'position': 'absolute',
+            'inset': 0,
+            'pointer-events': 'none'
+        };
+    }
+    get transitionAnimation() {
+        return 'Default';
+    }
+    get positioning() {
+        switch (this.Placement) {
+            case "Top":
+                return {
+                    originX: 'center', originY: 'top',
+                    overlayX: 'center', overlayY: 'bottom'
+                };
+            case "TopEdgeAlignedLeft":
+                return {
+                    originX: 'start', originY: 'top',
+                    overlayX: 'start', overlayY: 'bottom'
+                };
+            case "TopEdgeAlignedRight":
+                return {
+                    originX: 'end', originY: 'top',
+                    overlayX: 'end', overlayY: 'bottom'
+                };
+            case "Bottom":
+                return {
+                    originX: 'center', originY: 'bottom',
+                    overlayX: 'center', overlayY: 'top'
+                };
+            case "BottomEdgeAlignedLeft":
+                return {
+                    originX: 'start', originY: 'bottom',
+                    overlayX: 'start', overlayY: 'top'
+                };
+            case "BottomEdgeAlignedRight":
+                return {
+                    originX: 'end', originY: 'bottom',
+                    overlayX: 'end', overlayY: 'top'
+                };
+            case "Left":
+                return {
+                    originX: 'start', originY: 'center',
+                    overlayX: 'end', overlayY: 'center'
+                };
+            case "LeftEdgeAlignedTop":
+                return {
+                    originX: 'start', originY: 'top',
+                    overlayX: 'end', overlayY: 'top'
+                };
+            case "LeftEdgeAlignedBottom":
+                return {
+                    originX: 'start', originY: 'bottom',
+                    overlayX: 'end', overlayY: 'bottom'
+                };
+            case "Right":
+                return {
+                    originX: 'end', originY: 'center',
+                    overlayX: 'start', overlayY: 'center'
+                };
+            case "RightEdgeAlignedTop":
+                return {
+                    originX: 'end', originY: 'top',
+                    overlayX: 'start', overlayY: 'top'
+                };
+            case "RightEdgeAlignedBottom":
+                return {
+                    originX: 'end', originY: 'bottom',
+                    overlayX: 'start', overlayY: 'bottom'
+                };
+            case "Cover":
+                return {
+                    originX: 'start', originY: 'top',
+                    overlayX: 'start', overlayY: 'top'
+                };
         }
     }
     ;
+    constructor(_viewContainerRef, _overlay, _hostElement, _renderer) {
+        this._viewContainerRef = _viewContainerRef;
+        this._overlay = _overlay;
+        this._hostElement = _hostElement;
+        this._renderer = _renderer;
+        this.Placement = 'Top';
+        this.HasBackdrop = true;
+        this._isOpen = false;
+        this.isVisible = false;
+        this.IsOpenChange = new EventEmitter();
+        this._target = null;
+    }
+    ngOnDestroy() {
+        if (this._backdropContextMenuSubscription)
+            this._backdropContextMenuSubscription();
+    }
+    ngAfterViewInit() {
+        this._templatePortal = new TemplatePortal(this._template, this._viewContainerRef);
+        let config = new OverlayConfig({
+            hasBackdrop: this.HasBackdrop,
+            scrollStrategy: this._overlay.scrollStrategies.reposition()
+        });
+        this._overlayRef = this._overlay.create(config);
+        this._overlayRef.backdropClick().subscribe(() => this.Hide());
+        this.OnOverlay(this._overlayRef);
+    }
+    OnOverlay(overlay) {
+    }
     Show() {
         this.IsOpen = true;
     }
     Hide() {
         this.IsOpen = false;
     }
-    get containerClass() {
-        return this.IsOpen ? 'flyout-open' : undefined;
-    }
-    onBackdropClick(event) {
-        this.Hide();
-        event.stopImmediatePropagation();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: PopupComponent, isStandalone: true, selector: "Popup", inputs: { IsOpen: "IsOpen", VerticalOffset: "VerticalOffset", HorizontalOffset: "HorizontalOffset" }, outputs: { IsOpenChange: "IsOpenChange" }, host: { properties: { "attr.title": "this._title" }, classAttribute: "popup" }, providers: [{ provide: 'xaml-flyout', useExisting: PopupComponent }], viewQueries: [{ propertyName: "_container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `<div class="popup-backdrop" (click)="onBackdropClick($event)" (contextmenu)="onBackdropClick($event)" *ngIf="IsOpen"></div>
-    <div #container class="popup-container" [ngClass]="containerClass">
-      <div class="popup-content" *ngIf="isRendered"><ng-content/></div>
-    </div>`, isInline: true, styles: [":host{position:relative}:host{position:static}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;pointer-events:none;position:absolute;z-index:1000}.popup-container>.popup-content{display:grid;padding:16px;border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);opacity:0;transition:opacity var(--ControlNormalAnimationDuration);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #00000080;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.flyout-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{z-index:900;position:fixed;inset:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutBaseComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$1.Overlay }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FlyoutBaseComponent, isStandalone: true, selector: "FlyoutBase", inputs: { Placement: "Placement", Padding: "Padding", HasBackdrop: "HasBackdrop", IsOpen: "IsOpen", Target: "Target" }, outputs: { IsOpenChange: "IsOpenChange" }, host: { properties: { "style": "this.style" } }, providers: [{ provide: 'xaml-flyout', useExisting: FlyoutBaseComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: ["template"], descendants: true }], ngImport: i0, template: "<ng-template #template><FlyoutPresenter #presenter [IsVisible]=\"isVisible\" [TransitionAnimation]=\"transitionAnimation\" [Padding]=\"Padding\"><ng-content/></FlyoutPresenter></ng-template>", isInline: true, dependencies: [{ kind: "component", type: FlyoutPresenter, selector: "FlyoutPresenter", inputs: ["TransitionAnimation", "Padding", "IsVisible"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutBaseComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'Popup', imports: [CommonModule], template: `<div class="popup-backdrop" (click)="onBackdropClick($event)" (contextmenu)="onBackdropClick($event)" *ngIf="IsOpen"></div>
-    <div #container class="popup-container" [ngClass]="containerClass">
-      <div class="popup-content" *ngIf="isRendered"><ng-content/></div>
-    </div>`, host: {
-                        'class': 'popup',
-                    }, providers: [{ provide: 'xaml-flyout', useExisting: PopupComponent }], styles: [":host{position:relative}:host{position:static}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;pointer-events:none;position:absolute;z-index:1000}.popup-container>.popup-content{display:grid;padding:16px;border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);opacity:0;transition:opacity var(--ControlNormalAnimationDuration);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #00000080;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.flyout-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{z-index:900;position:fixed;inset:0}\n"] }]
-        }], propDecorators: { _title: [{
-                type: HostBinding,
-                args: ['attr.title']
+            args: [{
+                    imports: [FlyoutPresenter],
+                    selector: 'FlyoutBase',
+                    template: PopupTemplate,
+                    providers: [{ provide: 'xaml-flyout', useExisting: FlyoutBaseComponent }]
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$1.Overlay }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { Placement: [{
+                type: Input
+            }], Padding: [{
+                type: Input
+            }], HasBackdrop: [{
+                type: Input
             }], IsOpen: [{
                 type: Input
             }], IsOpenChange: [{
                 type: Output
-            }], VerticalOffset: [{
+            }], Target: [{
                 type: Input
-            }], HorizontalOffset: [{
-                type: Input
-            }], _container: [{
+            }], _template: [{
                 type: ViewChild,
-                args: ['container']
+                args: ['template']
+            }], style: [{
+                type: HostBinding,
+                args: ['style']
             }] } });
 
-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:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.disabled:not(.checked){background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host.disabled:not(.checked)::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:hover.checked:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked: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)}\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 FlyoutComponent extends FlyoutBaseComponent {
+    get transitionAnimation() {
+        switch (this.Placement) {
+            case "Top":
+            case "TopEdgeAlignedLeft":
+            case "TopEdgeAlignedRight":
+                return 'SlideUp';
+            case "Bottom":
+            case "BottomEdgeAlignedLeft":
+            case "BottomEdgeAlignedRight":
+                return 'SlideDown';
+            case "Left":
+            case "LeftEdgeAlignedTop":
+            case "LeftEdgeAlignedBottom":
+                return 'SlideLeft';
+            case "Right":
+            case "RightEdgeAlignedTop":
+            case "RightEdgeAlignedBottom":
+                return 'SlideRight';
+            default:
+                return 'Default';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FlyoutComponent, isStandalone: true, selector: "Flyout", providers: [{ provide: 'xaml-flyout', useExisting: FlyoutComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template #template><FlyoutPresenter #presenter [IsVisible]=\"isVisible\" [TransitionAnimation]=\"transitionAnimation\" [Padding]=\"Padding\"><ng-content/></FlyoutPresenter></ng-template>", isInline: true, styles: ["FlyoutPresenter{padding:16px}\n"], dependencies: [{ kind: "component", type: FlyoutPresenter, selector: "FlyoutPresenter", inputs: ["TransitionAnimation", "Padding", "IsVisible"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DropDownButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutComponent, 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:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.disabled:not(.checked){background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host.disabled:not(.checked)::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:hover.checked:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked: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)}\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: 'Flyout', imports: [FlyoutPresenter], template: PopupTemplate, providers: [{ provide: 'xaml-flyout', useExisting: FlyoutComponent }], styles: ["FlyoutPresenter{padding:16px}\n"] }]
         }] });
 
 class ComboBoxComponent extends SelectorComponent {
@@ -913,44 +1190,45 @@ class ComboBoxComponent extends SelectorComponent {
     get index() {
         return this.SelectedIndex;
     }
-    constructor(_changeDetector) {
+    constructor(_changeDetector, _host) {
         super();
         this._changeDetector = _changeDetector;
-        this._popupOffset = -4;
+        this._host = _host;
+        this.target = null;
         this.SelectedIndexChange.subscribe(() => this.onSelectionChanged());
     }
+    onIsOpenChanged(value) {
+        if (!value)
+            return;
+        let rect = this._host.nativeElement.getBoundingClientRect();
+        let popupOffset = -(this._selector?.GetElement(this.SelectedIndex)?.offsetTop ?? 0);
+        this.target = { x: rect.left, y: rect.top + popupOffset - 4, width: rect.width };
+    }
     ngAfterViewInit() {
         //help the layout finish itself
         this._changeDetector.detectChanges();
     }
-    get popupOffset() {
-        //Cache the value so the change detector will not complain    
-        let popupOffset = -(this._selector?.GetElement(this.SelectedIndex)?.offsetTop ?? 0);
-        if (popupOffset !== 0)
-            this._popupOffset = popupOffset;
-        return this._popupOffset;
-    }
     onSelectionChanged() {
         if (this._popup)
             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 }], 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: PopupComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<DropDownButton [HorizontalContentAlignment]=\"HorizontalContentAlignment\" [VerticalContentAlignment]=\"VerticalContentAlignment\" [IsEnabled]=\"IsEnabled\">\n    <ng-container *ngIf=\"ItemTemplate\">\n    <ng-container *ngTemplateOutlet=\"ItemTemplate; context: { $implicit: item }\"/>\n  </ng-container>\n  <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container>\n    <Popup #ButtonFlyout [VerticalOffset]=\"popupOffset\">\n      <ListView [ItemSource]=\"ItemSource\" [(SelectedIndex)]=\"SelectedIndex\"  [HorizontalContentAlignment]=\"HorizontalContentAlignment\" [VerticalContentAlignment]=\"VerticalContentAlignment\"/>\n    </Popup>\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: PopupComponent, selector: "Popup", inputs: ["IsOpen", "VerticalOffset", "HorizontalOffset"], outputs: ["IsOpenChange"] }, { kind: "component", type: ListViewComponent, selector: "ListView" }] }); }
+    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    <ng-container *ngIf=\"ItemTemplate\">\n    <ng-container *ngTemplateOutlet=\"ItemTemplate; context: { $implicit: item }\"/>\n  </ng-container>\n  <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container>\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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ComboBox', imports: [CommonModule, DropDownButtonComponent, PopupComponent, ListViewComponent], template: `<DropDownButton [HorizontalContentAlignment]="HorizontalContentAlignment" [VerticalContentAlignment]="VerticalContentAlignment" [IsEnabled]="IsEnabled">
+            args: [{ selector: 'ComboBox', imports: [CommonModule, DropDownButtonComponent, FlyoutComponent, ListViewComponent], template: `<DropDownButton [HorizontalContentAlignment]="HorizontalContentAlignment" [VerticalContentAlignment]="VerticalContentAlignment" [IsEnabled]="IsEnabled">
     ${SelectorItemTemplate}
-    <Popup #ButtonFlyout [VerticalOffset]="popupOffset">
+    <Flyout Placement="Cover" Padding="0" [Target]="target" (IsOpenChange)="onIsOpenChanged($event)">
       <ListView [ItemSource]="ItemSource" [(SelectedIndex)]="SelectedIndex"  [HorizontalContentAlignment]="HorizontalContentAlignment" [VerticalContentAlignment]="VerticalContentAlignment"/>
-    </Popup>
+    </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 }], propDecorators: { _selector: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { _selector: [{
                 type: ViewChild,
                 args: [ListViewComponent]
             }], _popup: [{
                 type: ViewChild,
-                args: [PopupComponent]
+                args: ['xaml-flyout']
             }] } });
 
 class RadioButtonComponent extends BorderComponent {
@@ -968,7 +1246,7 @@ class RadioButtonComponent extends BorderComponent {
         if (this._group)
             this._group.registerOption(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonComponent, deps: [{ token: RadioButtonGroup, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonComponent, deps: [{ token: RadioButtonGroupComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: RadioButtonComponent, isStandalone: true, selector: "RadioButton", inputs: { IsEnabled: "IsEnabled", IsChecked: "IsChecked", Group: "Group", Value: "Value" }, outputs: { IsCheckedChange: "IsCheckedChange" }, usesInheritance: true, ngImport: i0, template: `<label class="container">
     <input type="radio" [name]="Group" [value]="Value" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
     <div class="radioButton">
@@ -990,7 +1268,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
       <ng-content/>
     </div>
   </label>`, styles: [":host{position:relative}.container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input[type=radio]:checked+.radioButton>.circle{display:grid}input[type=radio]:not(:checked):not(:hover):not(:active):not(:disabled)+.radioButton{background-color:var(--ControlAltFillColorSecondary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=radio]:not(:checked):hover:not(:active):not(:disabled)+.radioButton{background-color:var(--ControlAltFillColorTertiary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=radio]:not(:checked):active:not(:disabled)+.radioButton{background-color:var(--SubtleFillColorTransparent);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=radio]:not(:checked):active:not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton{background-color:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault)}input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton{background-color:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary)}input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton>.circle{transform:scale(1.2)}input[type=radio]:checked:active:not(:disabled)+.radioButton{background-color:var(--AccentFillColorTertiary);border-color:var(--AccentFillColorTertiary)}input[type=radio]:checked:active:not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:not(:checked):disabled+.radioButton{background-color:var(--ControlAltFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=radio]:checked:disabled+.radioButton{background-color:var(--AccentFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}.radioButton{display:grid;width:20px;height:20px;border-radius:11px;border-style:solid;border-width:var(--ControlBorderThickness);transition:border-color var(--ControlFastAnimationDuration);transition:background-color var(--ControlFastAnimationDuration)}.circle{width:11px;height:11px;border-radius:6.5px;align-self:center;justify-self:center;background-color:var(--TextOnAccentFillColorPrimary);transition:transform var(--ControlNormalAnimationDuration);transform:scale(0)}.content{align-self:center}\n"] }]
-        }], ctorParameters: () => [{ type: RadioButtonGroup, decorators: [{
+        }], ctorParameters: () => [{ type: RadioButtonGroupComponent, decorators: [{
                     type: Optional
                 }] }], propDecorators: { IsEnabled: [{
                 type: Input
@@ -1003,7 +1281,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }], Value: [{
                 type: Input
             }] } });
-class RadioButtonGroup extends StackPanelComponent {
+class RadioButtonGroupComponent extends StackPanelComponent {
     constructor() {
         super(...arguments);
         this.ValueChange = new EventEmitter();
@@ -1012,10 +1290,7 @@ class RadioButtonGroup extends StackPanelComponent {
     set Value(value) {
         if (this._children) {
             for (let item of this._children) {
-                if (item.Value === value) {
-                    item.IsChecked = true;
-                    break;
-                }
+                item.IsChecked = item.Value === value;
             }
         }
         else {
@@ -1037,10 +1312,10 @@ class RadioButtonGroup extends StackPanelComponent {
         });
         this._children.push(child);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonGroup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: RadioButtonGroup, 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.ɵ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"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonGroup, decorators: [{
+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"] }]
         }], propDecorators: { Value: [{
@@ -1049,6 +1324,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Output
             }] } });
 
+class RadioToggleButtonComponent extends RadioButtonComponent {
+    get checked() {
+        return this.IsChecked;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioToggleButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    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:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.disabled:not(.checked){background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host.disabled:not(.checked)::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:hover.checked:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked: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)}\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:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.disabled:not(.checked){background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host.disabled:not(.checked)::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:hover.checked:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked: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)}\n", ":host{padding:0}input{display:none}label{padding:5px 11px}\n"] }]
+        }], propDecorators: { checked: [{
+                type: HostBinding,
+                args: ['class.checked']
+            }] } });
+
 class RepeatButtonComponent extends ButtonComponent {
     constructor() {
         super(...arguments);
@@ -1068,6 +1364,9 @@ class RepeatButtonComponent extends ButtonComponent {
         }, this.Delay);
     }
     onPointerUp() {
+        this.clearTimers();
+    }
+    clearTimers() {
         if (this._delayTimer !== undefined)
             clearTimeout(this._delayTimer);
         if (this._intervalTimer !== undefined)
@@ -1076,6 +1375,9 @@ class RepeatButtonComponent extends ButtonComponent {
     onHostPointerEvent(event) {
         //Disable pointer event handling on the base button
     }
+    ngOnDestroy() {
+        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:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.disabled:not(.checked){background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled)}:host.disabled:not(.checked)::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:hover.checked:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked: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)}\n"] }); }
 }
@@ -1105,28 +1407,28 @@ class SliderComponent extends FrameworkElementComponent {
         this.IsEnabled = true;
         this.Orientation = 'Horizontal';
     }
-    onChange(event) {
+    onInput(event) {
         this.Value = parseFloat(event.target.value);
         this.ValueChange.emit(this.Value);
     }
     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" 
-    [step]="StepFrequency" 
-    (change)="onChange($event)" 
+    (input)="onInput($event)" 
     [disabled]="!IsEnabled"
     [className]="Orientation.toLowerCase()">`, 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.vertical{width:4px;margin:0 7px;writing-mode:vertical-lr;direction:rtl;vertical-align:middle}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;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;outline:1px solid var(--ControlStrokeColorOnAccentDefaultDark);border-color:var(--ControlSolidFillColorDefault);background-color:var(--AccentFillColorDefault);transition:border-width var(--ControlFastAnimationDuration)}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{background-color:var(--ControlStrongFillColorDisabled)}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"] }); }
 }
 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" 
-    [step]="StepFrequency" 
-    (change)="onChange($event)" 
+    (input)="onInput($event)" 
     [disabled]="!IsEnabled"
     [className]="Orientation.toLowerCase()">`, 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.vertical{width:4px;margin:0 7px;writing-mode:vertical-lr;direction:rtl;vertical-align:middle}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;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;outline:1px solid var(--ControlStrokeColorOnAccentDefaultDark);border-color:var(--ControlSolidFillColorDefault);background-color:var(--AccentFillColorDefault);transition:border-width var(--ControlFastAnimationDuration)}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{background-color:var(--ControlStrongFillColorDisabled)}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: [{
@@ -1348,7 +1650,7 @@ class SplitButtonComponent extends FrameworkElementComponent {
         this._popup.IsOpen = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SplitButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: SplitButtonComponent, isStandalone: true, selector: "SplitButton", inputs: { IsEnabled: "IsEnabled" }, outputs: { Click: "Click" }, queries: [{ propertyName: "_popup", first: true, predicate: ["ButtonFlyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<Grid ColumnDefinitions="1fr auto">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: SplitButtonComponent, isStandalone: true, selector: "SplitButton", inputs: { IsEnabled: "IsEnabled" }, outputs: { Click: "Click" }, queries: [{ propertyName: "_popup", first: true, predicate: ["xaml-flyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<Grid ColumnDefinitions="1fr auto">
     <Button CornerRadius="4px 0 0 4px" [IsEnabled]="IsEnabled" (Click)="onButtonClick()" [ngClass]="buttonClass"><ng-content/></Button>
     <DropDownButton CornerRadius="0 4px 4px 0" Width="12px" (Click)="onDropDownClick()" [IsEnabled]="IsEnabled"/>
   </Grid>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "Button", inputs: ["IsEnabled", "HorizontalContentAlignment", "VerticalContentAlignment"], outputs: ["Click"] }, { kind: "component", type: DropDownButtonComponent, selector: "DropDownButton" }, { kind: "ngmodule", type: GridModule }, { kind: "component", type: GridComponent, selector: "Grid", inputs: ["ColumnDefinitions", "RowDefinitions", "ColumnSpacing", "RowSpacing", "Orientation"] }] }); }
@@ -1369,7 +1671,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Output
             }], _popup: [{
                 type: ContentChild,
-                args: ['ButtonFlyout']
+                args: ['xaml-flyout']
             }] } });
 
 class ToggleButtonComponent extends ButtonComponent {
@@ -1410,7 +1712,7 @@ class ToggleSwitchComponent extends CheckBoxComponent {
       <div class="thumb"></div>
     </div>
     <div class="content"><ng-content/></div>
-  </label>`, isInline: true, styles: [":host{position:relative}.container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input:not(:checked):not(:active):not(:disabled)+.slider:not(:hover){background-color:var(--ControlAltFillColorSecondary);border-color:var(--ControlStrongStrokeColorDefault)}input:not(:checked):not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:var(--TextFillColorSecondary)}input:not(:checked):not(:active):not(:disabled)+.slider:hover{background-color:var(--ControlAltFillColorTertiary);border-color:var(--ControlStrongStrokeColorDefault)}input:not(:checked):not(:active):not(:disabled)+.slider:hover>.thumb{background-color:var(--TextFillColorSecondary)}input:not(:checked):active:not(:disabled)+.slider{background-color:var(--ControlAltFillColorQuarternary);border-color:var(--ControlStrongStrokeColorDefault)}input:not(:checked):active:not(:disabled)+.slider>.thumb{background-color:var(--TextFillColorSecondary)}input:not(:checked):disabled+.slider{background-color:var(--ControlAltFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input:not(:checked):disabled+.slider>.thumb{background-color:var(--TextFillColorDisabled)}input:checked:not(:active):not(:disabled)+.slider:not(:hover){background-color:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault)}input:checked:not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:var(--TextOnAccentFillColorPrimary)}input:checked:not(:active):not(:disabled)+.slider:hover{background-color:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary)}input:checked:not(:active):not(:disabled)+.slider:hover>.thumb{background-color:var(--TextOnAccentFillColorPrimary)}input:checked:active:not(:disabled)+.slider{background-color:var(--AccentFillColorTertiary);border-color:var(--AccentFillColorTertiary)}input:checked:active:not(:disabled)+.slider>.thumb{background-color:var(--TextOnAccentFillColorPrimary)}input:checked:disabled+.slider{background-color:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled)}input:checked:disabled+.slider>.thumb{background-color:var(--TextOnAccentFillColorDisabled)}input:checked+.slider>.thumb{transform:translate(22px)}input:not(:disabled):active+.slider>.thumb{width:17px;height:14px;transform:translate(-1px)}input:not(:disabled):not(:active):hover+.slider>.thumb{width:14px;height:14px;transform:translate(-1px)}input:not(:disabled):not(:active):checked:hover+.slider>.thumb{transform:translate(21px)}input:not(:disabled):checked:active+.slider>.thumb{transform:translate(18px);width:17px;height:14px}.slider{display:grid;width:40px;height:18px;border-radius:10px;border-style:solid;border-width:1.5px;transition:background-color var(--ControlNormalAnimationDuration);background-color:var(--ControlAltFillColorSecondary)}.thumb{display:grid;width:12px;height:12px;border-radius:7px;align-self:center;margin:0 3px;transition:transform var(--ControlNormalAnimationDuration);transition:width var(--ControlFastAnimationDuration);transition:margin-left var(--ControlFastAnimationDuration)}\n"] }); }
+  </label>`, isInline: true, styles: [":host{position:relative}.container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}.content{display:grid}input{display:none}input:not(:checked):not(:active):not(:disabled)+.slider:not(:hover){background-color:var(--ControlAltFillColorSecondary);border-color:var(--ControlStrongStrokeColorDefault)}input:not(:checked):not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:var(--TextFillColorSecondary)}input:not(:checked):not(:active):not(:disabled)+.slider:hover{background-color:var(--ControlAltFillColorTertiary);border-color:var(--ControlStrongStrokeColorDefault)}input:not(:checked):not(:active):not(:disabled)+.slider:hover>.thumb{background-color:var(--TextFillColorSecondary)}input:not(:checked):active:not(:disabled)+.slider{background-color:var(--ControlAltFillColorQuarternary);border-color:var(--ControlStrongStrokeColorDefault)}input:not(:checked):active:not(:disabled)+.slider>.thumb{background-color:var(--TextFillColorSecondary)}input:not(:checked):disabled+.slider{background-color:var(--ControlAltFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input:not(:checked):disabled+.slider>.thumb{background-color:var(--TextFillColorDisabled)}input:checked:not(:active):not(:disabled)+.slider:not(:hover){background-color:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault)}input:checked:not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:var(--TextOnAccentFillColorPrimary)}input:checked:not(:active):not(:disabled)+.slider:hover{background-color:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary)}input:checked:not(:active):not(:disabled)+.slider:hover>.thumb{background-color:var(--TextOnAccentFillColorPrimary)}input:checked:active:not(:disabled)+.slider{background-color:var(--AccentFillColorTertiary);border-color:var(--AccentFillColorTertiary)}input:checked:active:not(:disabled)+.slider>.thumb{background-color:var(--TextOnAccentFillColorPrimary)}input:checked:disabled+.slider{background-color:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled)}input:checked:disabled+.slider>.thumb{background-color:var(--TextOnAccentFillColorDisabled)}input:checked+.slider>.thumb{transform:translate(22px)}input:not(:disabled):active+.slider>.thumb{width:17px;height:14px;transform:translate(-1px)}input:not(:disabled):not(:active):hover+.slider>.thumb{width:14px;height:14px;transform:translate(-1px)}input:not(:disabled):not(:active):checked:hover+.slider>.thumb{transform:translate(21px)}input:not(:disabled):checked:active+.slider>.thumb{transform:translate(18px);width:17px;height:14px}.slider{display:grid;width:40px;height:18px;border-radius:10px;border-style:solid;border-width:1.5px;transition:background-color var(--ControlNormalAnimationDuration);background-color:var(--ControlAltFillColorSecondary)}.thumb{display:grid;width:12px;height:12px;border-radius:7px;align-self:center;margin:0 3px;transition:transform var(--ControlNormalAnimationDuration);transition:width var(--ControlFastAnimationDuration);transition:margin-left var(--ControlFastAnimationDuration)}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleSwitchComponent, decorators: [{
             type: Component,
@@ -1420,7 +1722,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
       <div class="thumb"></div>
     </div>
     <div class="content"><ng-content/></div>
-  </label>`, styles: [":host{position:relative}.container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input:not(:checked):not(:active):not(:disabled)+.slider:not(:hover){background-color:var(--ControlAltFillColorSecondary);border-color:var(--ControlStrongStrokeColorDefault)}input:not(:checked):not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:var(--TextFillColorSecondary)}input:not(:checked):not(:active):not(:disabled)+.slider:hover{background-color:var(--ControlAltFillColorTertiary);border-color:var(--ControlStrongStrokeColorDefault)}input:not(:checked):not(:active):not(:disabled)+.slider:hover>.thumb{background-color:var(--TextFillColorSecondary)}input:not(:checked):active:not(:disabled)+.slider{background-color:var(--ControlAltFillColorQuarternary);border-color:var(--ControlStrongStrokeColorDefault)}input:not(:checked):active:not(:disabled)+.slider>.thumb{background-color:var(--TextFillColorSecondary)}input:not(:checked):disabled+.slider{background-color:var(--ControlAltFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input:not(:checked):disabled+.slider>.thumb{background-color:var(--TextFillColorDisabled)}input:checked:not(:active):not(:disabled)+.slider:not(:hover){background-color:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault)}input:checked:not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:var(--TextOnAccentFillColorPrimary)}input:checked:not(:active):not(:disabled)+.slider:hover{background-color:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary)}input:checked:not(:active):not(:disabled)+.slider:hover>.thumb{background-color:var(--TextOnAccentFillColorPrimary)}input:checked:active:not(:disabled)+.slider{background-color:var(--AccentFillColorTertiary);border-color:var(--AccentFillColorTertiary)}input:checked:active:not(:disabled)+.slider>.thumb{background-color:var(--TextOnAccentFillColorPrimary)}input:checked:disabled+.slider{background-color:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled)}input:checked:disabled+.slider>.thumb{background-color:var(--TextOnAccentFillColorDisabled)}input:checked+.slider>.thumb{transform:translate(22px)}input:not(:disabled):active+.slider>.thumb{width:17px;height:14px;transform:translate(-1px)}input:not(:disabled):not(:active):hover+.slider>.thumb{width:14px;height:14px;transform:translate(-1px)}input:not(:disabled):not(:active):checked:hover+.slider>.thumb{transform:translate(21px)}input:not(:disabled):checked:active+.slider>.thumb{transform:translate(18px);width:17px;height:14px}.slider{display:grid;width:40px;height:18px;border-radius:10px;border-style:solid;border-width:1.5px;transition:background-color var(--ControlNormalAnimationDuration);background-color:var(--ControlAltFillColorSecondary)}.thumb{display:grid;width:12px;height:12px;border-radius:7px;align-self:center;margin:0 3px;transition:transform var(--ControlNormalAnimationDuration);transition:width var(--ControlFastAnimationDuration);transition:margin-left var(--ControlFastAnimationDuration)}\n"] }]
+  </label>`, styles: [":host{position:relative}.container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}.content{display:grid}input{display:none}input:not(:checked):not(:active):not(:disabled)+.slider:not(:hover){background-color:var(--ControlAltFillColorSecondary);border-color:var(--ControlStrongStrokeColorDefault)}input:not(:checked):not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:var(--TextFillColorSecondary)}input:not(:checked):not(:active):not(:disabled)+.slider:hover{background-color:var(--ControlAltFillColorTertiary);border-color:var(--ControlStrongStrokeColorDefault)}input:not(:checked):not(:active):not(:disabled)+.slider:hover>.thumb{background-color:var(--TextFillColorSecondary)}input:not(:checked):active:not(:disabled)+.slider{background-color:var(--ControlAltFillColorQuarternary);border-color:var(--ControlStrongStrokeColorDefault)}input:not(:checked):active:not(:disabled)+.slider>.thumb{background-color:var(--TextFillColorSecondary)}input:not(:checked):disabled+.slider{background-color:var(--ControlAltFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input:not(:checked):disabled+.slider>.thumb{background-color:var(--TextFillColorDisabled)}input:checked:not(:active):not(:disabled)+.slider:not(:hover){background-color:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault)}input:checked:not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:var(--TextOnAccentFillColorPrimary)}input:checked:not(:active):not(:disabled)+.slider:hover{background-color:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary)}input:checked:not(:active):not(:disabled)+.slider:hover>.thumb{background-color:var(--TextOnAccentFillColorPrimary)}input:checked:active:not(:disabled)+.slider{background-color:var(--AccentFillColorTertiary);border-color:var(--AccentFillColorTertiary)}input:checked:active:not(:disabled)+.slider>.thumb{background-color:var(--TextOnAccentFillColorPrimary)}input:checked:disabled+.slider{background-color:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled)}input:checked:disabled+.slider>.thumb{background-color:var(--TextOnAccentFillColorDisabled)}input:checked+.slider>.thumb{transform:translate(22px)}input:not(:disabled):active+.slider>.thumb{width:17px;height:14px;transform:translate(-1px)}input:not(:disabled):not(:active):hover+.slider>.thumb{width:14px;height:14px;transform:translate(-1px)}input:not(:disabled):not(:active):checked:hover+.slider>.thumb{transform:translate(21px)}input:not(:disabled):checked:active+.slider>.thumb{transform:translate(18px);width:17px;height:14px}.slider{display:grid;width:40px;height:18px;border-radius:10px;border-style:solid;border-width:1.5px;transition:background-color var(--ControlNormalAnimationDuration);background-color:var(--ControlAltFillColorSecondary)}.thumb{display:grid;width:12px;height:12px;border-radius:7px;align-self:center;margin:0 3px;transition:transform var(--ControlNormalAnimationDuration);transition:width var(--ControlFastAnimationDuration);transition:margin-left var(--ControlFastAnimationDuration)}\n"] }]
         }] });
 
 class ListBoxComponent extends SelectorComponent {
@@ -1434,198 +1736,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
   </div>`, 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"] }]
         }] });
 
-class FlyoutComponent extends PopupComponent {
-    constructor() {
-        super(...arguments);
-        this.Placement = 'Top';
-    }
-    get contentStyle() {
-        let alignSelf;
-        let justifySelf;
-        switch (this.Placement) {
-            case 'Top':
-            case 'Bottom':
-                justifySelf = 'center';
-                break;
-            case 'TopEdgeAlignedLeft':
-            case 'BottomEdgeAlignedLeft':
-                justifySelf = 'left';
-                break;
-            case 'TopEdgeAlignedRight':
-            case 'BottomEdgeAlignedRight':
-                justifySelf = 'right';
-                break;
-            case 'Left':
-            case 'Right':
-                alignSelf = 'center';
-                break;
-            case 'LeftEdgeAlignedTop':
-            case 'RightEdgeAlignedTop':
-                alignSelf = 'flex-start';
-                break;
-            case 'LeftEdgeAlignedBottom':
-            case 'RightEdgeAlignedBottom':
-                alignSelf = 'flex-end';
-                break;
-        }
-        return {
-            'align-self': alignSelf,
-            'justify-self': justifySelf,
-        };
+class MenuFlyoutComponent extends FlyoutComponent {
+    get transitionAnimation() {
+        return 'Default';
     }
-    get containerStyle() {
-        let top = '0';
-        let left = '0';
-        let right = '0';
-        let bottom = '0';
-        let transform;
-        function translate(x, y, isOpen) {
-            let result = '';
-            if (x !== 0) {
-                result += `translateX(${x > 0 ? '' : '-'}100%)`;
-                if (!isOpen) {
-                    result += `translateX(${x > 0 ? '-' : ''}10px)`;
-                }
-            }
-            if (y !== 0) {
-                result += `translateY(${y > 0 ? '' : '-'}100%)`;
-                if (!isOpen) {
-                    result += `translateY(${y > 0 ? '-' : ''}10px)`;
-                }
-            }
-            return result;
-        }
-        switch (this.Placement) {
-            case 'Top':
-            case 'TopEdgeAlignedLeft':
-            case 'TopEdgeAlignedRight':
-                bottom = undefined;
-                transform = translate(0, -1, this.IsOpen);
-                break;
-            case 'Bottom':
-            case 'BottomEdgeAlignedLeft':
-            case 'BottomEdgeAlignedRight':
-                top = undefined;
-                transform = translate(0, 1, this.IsOpen);
-                break;
-            case 'Left':
-            case 'LeftEdgeAlignedBottom':
-            case 'LeftEdgeAlignedTop':
-                right = undefined;
-                transform = translate(-1, 0, this.IsOpen);
-                break;
-            case 'Right':
-            case 'RightEdgeAlignedBottom':
-            case 'RightEdgeAlignedTop':
-                left = undefined;
-                transform = translate(1, 0, this.IsOpen);
-                break;
-        }
-        let margin;
-        switch (this.Placement) {
-            case 'Top':
-                margin = '0 -100vw -100vh -100vw';
-                break;
-            case 'TopEdgeAlignedLeft':
-                margin = '0 -100vw -100vh 0';
-                break;
-            case 'TopEdgeAlignedRight':
-                margin = '0 0 -100vh -100vw';
-                break;
-            case 'Bottom':
-                margin = '-100vh -100vw 0 -100vw';
-                break;
-            case 'BottomEdgeAlignedLeft':
-                margin = '0 -100vw 0 0';
-                break;
-            case 'BottomEdgeAlignedRight':
-                margin = '0 0 0 -100vw';
-                break;
-            case 'Left':
-                margin = '-100vh -100vw -100vh 0';
-                break;
-            case 'LeftEdgeAlignedTop':
-                margin = '0 -100vw -100vh 0';
-                break;
-            case 'LeftEdgeAlignedBottom':
-                margin = '-100vh -100vw 0 0';
-                break;
-            case 'Right':
-                margin = '-100vh 0 -100vh -100vw';
-                break;
-            case 'RightEdgeAlignedTop':
-                margin = '0 0 -100vh -100vw';
-                break;
-            case 'RightEdgeAlignedBottom':
-                margin = '-100vh 0 0 -100vw';
-                break;
-        }
-        return {
-            'top': top,
-            'left': left,
-            'right': right,
-            'bottom': bottom,
-            'transform': transform,
-            'margin': margin,
-            'transition': 'transform var(--ControlNormalAnimationDuration)'
-        };
+    OnOverlay(overlay) {
+        if (this._menuClickSubscription)
+            this._menuClickSubscription();
+        this._menuClickSubscription = this._renderer.listen(overlay.overlayElement, 'click', p => this.onMenuClick(p));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FlyoutComponent, isStandalone: true, selector: "Flyout", inputs: { Placement: "Placement" }, providers: [{ provide: 'xaml-flyout', useExisting: FlyoutComponent }], usesInheritance: true, ngImport: i0, template: `<div class="popup-backdrop" (click)="onBackdropClick($event)" *ngIf="IsOpen"></div>
-    <div class="popup-container" [ngStyle]="containerStyle" [ngClass]="containerClass">
-    <div class="popup-content" [ngStyle]="contentStyle" *ngIf="isRendered"><ng-content/></div>
-  </div>`, isInline: true, styles: [":host{position:relative}:host{position:static}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;pointer-events:none;position:absolute;z-index:1000}.popup-container>.popup-content{display:grid;padding:16px;border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);opacity:0;transition:opacity var(--ControlNormalAnimationDuration);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #00000080;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.flyout-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{z-index:900;position:fixed;inset:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'Flyout', imports: [CommonModule], template: `<div class="popup-backdrop" (click)="onBackdropClick($event)" *ngIf="IsOpen"></div>
-    <div class="popup-container" [ngStyle]="containerStyle" [ngClass]="containerClass">
-    <div class="popup-content" [ngStyle]="contentStyle" *ngIf="isRendered"><ng-content/></div>
-  </div>`, providers: [{ provide: 'xaml-flyout', useExisting: FlyoutComponent }], styles: [":host{position:relative}:host{position:static}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;pointer-events:none;position:absolute;z-index:1000}.popup-container>.popup-content{display:grid;padding:16px;border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);opacity:0;transition:opacity var(--ControlNormalAnimationDuration);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #00000080;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.flyout-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{z-index:900;position:fixed;inset:0}\n"] }]
-        }], propDecorators: { Placement: [{
-                type: Input
-            }] } });
-
-class MenuFlyoutComponent extends FlyoutComponent {
     onMenuClick(event) {
         this.IsOpen = false;
         event.stopPropagation();
     }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        if (this._menuClickSubscription)
+            this._menuClickSubscription();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MenuFlyoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MenuFlyoutComponent, isStandalone: true, selector: "MenuFlyout", providers: [{ provide: 'xaml-flyout', useExisting: MenuFlyoutComponent }], usesInheritance: true, ngImport: i0, template: `<div class="popup-backdrop" (click)="onBackdropClick($event)" *ngIf="IsOpen"></div>
-    <div class="popup-container" [ngStyle]="containerStyle" [ngClass]="containerClass">
-    <div class="popup-content" [ngStyle]="contentStyle" *ngIf="isRendered">
-      <div class="menu-container" (click)="onMenuClick($event)">
-        <ng-content/>
-      </div>
-    </div>
-  </div>`, isInline: true, styles: [":host{position:relative}:host{position:static}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;pointer-events:none;position:absolute;z-index:1000}.popup-container>.popup-content{display:grid;padding:16px;border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);opacity:0;transition:opacity var(--ControlNormalAnimationDuration);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #00000080;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.flyout-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{z-index:900;position:fixed;inset:0}\n", ".popup-container{left:0;right:0;top:0}.popup-container>.popup-content{padding:2px}.popup-container>.popup-content>.menu-container{margin:-3px 0;display:table;border-spacing:0 3px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MenuFlyoutComponent, isStandalone: true, selector: "MenuFlyout", providers: [{ provide: 'xaml-flyout', useExisting: MenuFlyoutComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template #template><FlyoutPresenter #presenter [IsVisible]=\"isVisible\" [TransitionAnimation]=\"transitionAnimation\" [Padding]=\"Padding\"><ng-content/></FlyoutPresenter></ng-template>", isInline: true, styles: [".popup-container{left:0;right:0;top:0}.popup-container>.popup-content{padding:2px}.popup-container>.popup-content>.menu-container{margin:-3px 0;display:table;border-spacing:0 3px}FlyoutPresenter{padding:0 2px;display:table;border-spacing:0 3px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FlyoutPresenter, selector: "FlyoutPresenter", inputs: ["TransitionAnimation", "Padding", "IsVisible"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MenuFlyoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'MenuFlyout', imports: [CommonModule], template: `<div class="popup-backdrop" (click)="onBackdropClick($event)" *ngIf="IsOpen"></div>
-    <div class="popup-container" [ngStyle]="containerStyle" [ngClass]="containerClass">
-    <div class="popup-content" [ngStyle]="contentStyle" *ngIf="isRendered">
-      <div class="menu-container" (click)="onMenuClick($event)">
-        <ng-content/>
-      </div>
-    </div>
-  </div>`, providers: [{ provide: 'xaml-flyout', useExisting: MenuFlyoutComponent }], styles: [":host{position:relative}:host{position:static}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;pointer-events:none;position:absolute;z-index:1000}.popup-container>.popup-content{display:grid;padding:16px;border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);opacity:0;transition:opacity var(--ControlNormalAnimationDuration);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #00000080;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.flyout-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{z-index:900;position:fixed;inset:0}\n", ".popup-container{left:0;right:0;top:0}.popup-container>.popup-content{padding:2px}.popup-container>.popup-content>.menu-container{margin:-3px 0;display:table;border-spacing:0 3px}\n"] }]
+            args: [{ selector: 'MenuFlyout', imports: [CommonModule, FlyoutPresenter], template: PopupTemplate, providers: [{ provide: 'xaml-flyout', useExisting: MenuFlyoutComponent }], styles: [".popup-container{left:0;right:0;top:0}.popup-container>.popup-content{padding:2px}.popup-container>.popup-content>.menu-container{margin:-3px 0;display:table;border-spacing:0 3px}FlyoutPresenter{padding:0 2px;display:table;border-spacing:0 3px}\n"] }]
         }] });
 
 class ContextFlyoutDirective {
     constructor(_hostComponent, _viewContainer) {
         this._hostComponent = _hostComponent;
         this._viewContainer = _viewContainer;
-        this._positionX = 0;
-        this._positionY = 0;
-    }
-    get style() {
-        return {
-            'position': 'fixed',
-            'left': this._positionX + 'px',
-            'top': this._positionY + 'px'
-        };
     }
     ngAfterViewInit() {
         this._flyout = this._viewContainer.injector.get(FlyoutComponent, null) ||
@@ -1642,8 +1782,7 @@ class ContextFlyoutDirective {
         if (!this._flyout)
             return;
         if (!this._flyout.IsOpen) {
-            this._positionX = event.clientX;
-            this._positionY = event.clientY;
+            this._flyout.Target = { x: event.clientX, y: event.clientY };
             this._flyout.IsOpen = true;
         }
         else {
@@ -1653,25 +1792,33 @@ class ContextFlyoutDirective {
         event.stopPropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ContextFlyoutDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: ContextFlyoutDirective, isStandalone: true, selector: "[ContextFlyout]", host: { properties: { "style": "this.style" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: ContextFlyoutDirective, isStandalone: true, selector: "[ContextFlyout]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ContextFlyoutDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ContextFlyout]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { style: [{
-                type: HostBinding,
-                args: ['style']
-            }] } });
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }] });
 
 class TextBlockComponent extends FrameworkElementComponent {
     constructor() {
         super(...arguments);
         this.FontWeight = 'Normal';
         this.TextAlignment = 'Left';
+        this.TextTrimming = 'None';
         this.TextWrapping = 'NoWrap';
     }
+    get width() {
+        if (this.Width !== undefined)
+            return this.Width;
+        return this.HorizontalAlignment === 'Stretch' || this.TextTrimming !== 'None' ? undefined : 'min-content';
+    }
+    get minWidth() {
+        if (this.MinWidth !== undefined)
+            return this.MinWidth;
+        return this.MaxWidth === undefined && this.HorizontalAlignment === 'Stretch' && this.TextTrimming === 'None' ? 'min-content' : undefined;
+    }
     get fontWeight() {
         return TextBlockComponent.ToFontWeight(this.FontWeight);
     }
@@ -1875,12 +2022,18 @@ class AppBarButtonComponent extends FrameworkElementComponent {
     get disabled() {
         return !this.IsEnabled;
     }
+    onHostPointerEvent(event) {
+        if (!this.IsEnabled)
+            return;
+        this.Click.emit(event);
+        this._flyout?.Show();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AppBarButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: AppBarButtonComponent, isStandalone: true, selector: "AppBarButton", inputs: { IsEnabled: "IsEnabled", Text: "Text", Icon: "Icon" }, outputs: { Click: "Click" }, host: { properties: { "class.disabled": "this.disabled" } }, usesInheritance: true, ngImport: i0, template: `<div class="icon">{{Icon}}</div><div class="text">{{Text}}</div>`, isInline: true, styles: [":host{position:relative}:host{display:flex;flex-direction:row;align-items:center;transition:background-color var(--ControlNormalAnimationDuration);border-radius:var(--ControlCornerRadius);gap:4px;padding:6px;background-color:var(--SubtleFillColorTransparent)}:host *{color:var(--TextFillColorPrimary)}:host:hover{background-color:var(--SubtleFillColorSecondary)}:host:hover *{color:var(--TextFillColorPrimary)}:host:active{background-color:var(--SubtleFillColorTertiary)}:host:active *{color:var(--TextFillColorSecondary)}:host.disabled{background-color:var(--SubtleFillColorDisabled)}:host.disabled *{color:var(--TextFillColorDisabled)}:host .icon{font-family:var(--SymbolFontFamily)}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: AppBarButtonComponent, isStandalone: true, selector: "AppBarButton", inputs: { IsEnabled: "IsEnabled", Text: "Text", Icon: "Icon" }, outputs: { Click: "Click" }, host: { listeners: { "click": "onHostPointerEvent($event)" }, properties: { "class.disabled": "this.disabled" } }, queries: [{ propertyName: "_flyout", first: true, predicate: ["xaml-flyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<div class="icon">{{Icon}}</div><div class="text">{{Text}}</div><ng-content/>`, isInline: true, styles: [":host{position:relative}:host{display:flex;flex-direction:row;align-items:center;transition:background-color var(--ControlNormalAnimationDuration);border-radius:var(--ControlCornerRadius);gap:4px;padding:6px;background-color:var(--SubtleFillColorTransparent)}:host *{color:var(--TextFillColorPrimary)}:host:hover{background-color:var(--SubtleFillColorSecondary)}:host:hover *{color:var(--TextFillColorPrimary)}:host:active{background-color:var(--SubtleFillColorTertiary)}:host:active *{color:var(--TextFillColorSecondary)}:host.disabled{background-color:var(--SubtleFillColorDisabled)}:host.disabled *{color:var(--TextFillColorDisabled)}:host .icon{padding-top:2px;font-family:var(--SymbolFontFamily)}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AppBarButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'AppBarButton', template: `<div class="icon">{{Icon}}</div><div class="text">{{Text}}</div>`, styles: [":host{position:relative}:host{display:flex;flex-direction:row;align-items:center;transition:background-color var(--ControlNormalAnimationDuration);border-radius:var(--ControlCornerRadius);gap:4px;padding:6px;background-color:var(--SubtleFillColorTransparent)}:host *{color:var(--TextFillColorPrimary)}:host:hover{background-color:var(--SubtleFillColorSecondary)}:host:hover *{color:var(--TextFillColorPrimary)}:host:active{background-color:var(--SubtleFillColorTertiary)}:host:active *{color:var(--TextFillColorSecondary)}:host.disabled{background-color:var(--SubtleFillColorDisabled)}:host.disabled *{color:var(--TextFillColorDisabled)}:host .icon{font-family:var(--SymbolFontFamily)}\n"] }]
+            args: [{ selector: 'AppBarButton', template: `<div class="icon">{{Icon}}</div><div class="text">{{Text}}</div><ng-content/>`, styles: [":host{position:relative}:host{display:flex;flex-direction:row;align-items:center;transition:background-color var(--ControlNormalAnimationDuration);border-radius:var(--ControlCornerRadius);gap:4px;padding:6px;background-color:var(--SubtleFillColorTransparent)}:host *{color:var(--TextFillColorPrimary)}:host:hover{background-color:var(--SubtleFillColorSecondary)}:host:hover *{color:var(--TextFillColorPrimary)}:host:active{background-color:var(--SubtleFillColorTertiary)}:host:active *{color:var(--TextFillColorSecondary)}:host.disabled{background-color:var(--SubtleFillColorDisabled)}:host.disabled *{color:var(--TextFillColorDisabled)}:host .icon{padding-top:2px;font-family:var(--SymbolFontFamily)}\n"] }]
         }], propDecorators: { IsEnabled: [{
                 type: Input
             }], Text: [{
@@ -1892,6 +2045,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }], disabled: [{
                 type: HostBinding,
                 args: ['class.disabled']
+            }], _flyout: [{
+                type: ContentChild,
+                args: ['xaml-flyout']
+            }], onHostPointerEvent: [{
+                type: HostListener,
+                args: ['click', ['$event']]
             }] } });
 
 class CommandBarComponent extends FrameworkElementComponent {
@@ -1922,13 +2081,13 @@ class MenuFlyoutItemComponent extends MenuFlyoutItemBase {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MenuFlyoutItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MenuFlyoutItemComponent, isStandalone: true, selector: "MenuFlyoutItem", inputs: { IsEnabled: "IsEnabled", Text: "Text", Icon: "Icon" }, outputs: { Click: "Click" }, host: { listeners: { "click": "onClick()" }, properties: { "class.disabled": "this.disabled" } }, usesInheritance: true, ngImport: i0, template: `<div class="icon">{{Icon}}</div>
   <div class="text">{{Text}}</div>
-  <div class="submenu-indicator"></div>`, isInline: true, styles: [":host{position:relative}:host{display:table-row}:host:hover:not(.disabled)>*{background-color:var(--SubtleFillColorSecondary)}:host.disabled>*{color:var(--TextFillColorDisabled)}.icon{display:table-cell;padding:3px 6px;border-radius:var(--ControlCornerRadius) 0 0 var(--ControlCornerRadius);font-family:var(--SymbolFontFamily)}.text{display:table-cell;padding:3px;margin:6px 0}.submenu-indicator{display:table-cell;padding:3px 6px;border-radius:0 var(--ControlCornerRadius) var(--ControlCornerRadius) 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+  <div class="submenu-indicator"></div>`, isInline: true, styles: [":host{position:relative}:host{display:table-row}:host:hover:not(.disabled)>*{background-color:var(--SubtleFillColorSecondary)}:host.disabled>*{color:var(--TextFillColorDisabled)}.icon{display:table-cell;padding:3px 6px;border-radius:var(--ControlCornerRadius) 0 0 var(--ControlCornerRadius);font-family:var(--SymbolFontFamily)}.text{display:table-cell;padding:3px;margin:6px 0;white-space:nowrap}.submenu-indicator{display:table-cell;padding:3px 6px;border-radius:0 var(--ControlCornerRadius) var(--ControlCornerRadius) 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MenuFlyoutItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'MenuFlyoutItem', imports: [CommonModule], template: `<div class="icon">{{Icon}}</div>
   <div class="text">{{Text}}</div>
-  <div class="submenu-indicator"></div>`, styles: [":host{position:relative}:host{display:table-row}:host:hover:not(.disabled)>*{background-color:var(--SubtleFillColorSecondary)}:host.disabled>*{color:var(--TextFillColorDisabled)}.icon{display:table-cell;padding:3px 6px;border-radius:var(--ControlCornerRadius) 0 0 var(--ControlCornerRadius);font-family:var(--SymbolFontFamily)}.text{display:table-cell;padding:3px;margin:6px 0}.submenu-indicator{display:table-cell;padding:3px 6px;border-radius:0 var(--ControlCornerRadius) var(--ControlCornerRadius) 0}\n"] }]
+  <div class="submenu-indicator"></div>`, styles: [":host{position:relative}:host{display:table-row}:host:hover:not(.disabled)>*{background-color:var(--SubtleFillColorSecondary)}:host.disabled>*{color:var(--TextFillColorDisabled)}.icon{display:table-cell;padding:3px 6px;border-radius:var(--ControlCornerRadius) 0 0 var(--ControlCornerRadius);font-family:var(--SymbolFontFamily)}.text{display:table-cell;padding:3px;margin:6px 0;white-space:nowrap}.submenu-indicator{display:table-cell;padding:3px 6px;border-radius:0 var(--ControlCornerRadius) var(--ControlCornerRadius) 0}\n"] }]
         }], propDecorators: { IsEnabled: [{
                 type: Input
             }], Text: [{
@@ -2006,6 +2165,7 @@ class NumberBoxComponent extends FrameworkElementComponent {
         super();
         this.IsEnabled = true;
         this.PlaceholderText = '';
+        this.IsPlaceholderEditable = false;
         this.TextAlignment = 'Left';
         this.InputMode = 'Float';
         this.Minimum = -Infinity;
@@ -2046,9 +2206,30 @@ class NumberBoxComponent extends FrameworkElementComponent {
     onDecreaseClick() {
         this.Value -= this.SmallChange;
     }
+    onButtonPress() {
+        this._input.nativeElement.focus();
+        setTimeout(() => this.cancelFlyoutDismiss(), 0);
+    }
+    cancelFlyoutDismiss() {
+        if (this._blurTimeout) {
+            clearTimeout(this._blurTimeout);
+            this._blurTimeout = undefined;
+        }
+    }
+    scheduleFlyoutDismiss() {
+        this.cancelFlyoutDismiss();
+        this._blurTimeout = setTimeout(() => {
+            this._flyout.Hide();
+        }, 0);
+    }
     onBlur() {
         this.updateText();
         this._input.nativeElement.value = this._text;
+        if (this.IsPlaceholderEditable && this._input.nativeElement.value === this.PlaceholderText) {
+            this._input.nativeElement.value = '';
+            this.onChange();
+        }
+        this.scheduleFlyoutDismiss();
     }
     onKeyDown(event) {
         switch (event.key) {
@@ -2066,6 +2247,17 @@ class NumberBoxComponent extends FrameworkElementComponent {
                 break;
         }
     }
+    onClick() {
+        this._input.nativeElement.focus();
+    }
+    onFocusIn() {
+        if (this.IsPlaceholderEditable && Number.isNaN(this.Value)) {
+            this._input.nativeElement.value = this.PlaceholderText;
+            this.onChange();
+        }
+        this._flyout.Show();
+        this._input.nativeElement.select();
+    }
     updateText() {
         this._text = Number.isNaN(this.Value) ? '' : this.NumberFormatter(this.Value);
     }
@@ -2073,29 +2265,33 @@ class NumberBoxComponent extends FrameworkElementComponent {
         event.stopPropagation();
     }
     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", TextAlignment: "TextAlignment", InputMode: "InputMode", Minimum: "Minimum", Maximum: "Maximum", SmallChange: "SmallChange", LargeChange: "LargeChange", NumberFormatter: "NumberFormatter", Value: "Value" }, outputs: { ValueChange: "ValueChange" }, host: { listeners: { "contextmenu": "onContextMenu($event)" } }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<label>
-    <input #input type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}" (blur)="onBlur()" (keydown)="onKeyDown($event)"/>
-    <div class="popup">
-      <RepeatButton Class="InlineButtonStyle" (Click)="onIncreaseClick()" [Delay]="500" [Interval]="50"><FontIcon Glyph="&#xE70E;"/></RepeatButton>
-      <RepeatButton Class="InlineButtonStyle" (Click)="onDecreaseClick()" [Delay]="500" [Interval]="50"><FontIcon Glyph="&#xE70D;"/></RepeatButton>
-    </div>
+    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>
     <div class="icon">&#xEC8F;</div>
-  </label>`, isInline: true, styles: [":host{position:relative}:host{display:grid}textarea{resize:none}input,textarea{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);color:var(--TextFillColorPrimary)}input::placeholder,textarea::placeholder{color:var(--TextFillColorSecondary);opacity:1}input:hover,textarea:hover{background-color:var(--ControlFillColorSecondary)}input:focus,input:active,textarea:focus,textarea:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}input:disabled,textarea:disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor);color:var(--TextOnAccentFillColorPrimary)}\n", "label{display:grid;position:relative}input{grid-column-start:1;grid-row-start:1;padding-left:24px}.icon{grid-column-start:1;grid-row-start:1;align-self:center;justify-self:left;font-family:var(--SymbolFontFamily);margin-left:6px;color:var(--TextFillColorSecondary)}.popup{position:absolute;display:none;flex-direction:column;justify-content:center;left:0;top:50%;transform:translateY(-50%);border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #0000001a;gap:3px;padding:3px;z-index:1000}.popup .InlineButtonStyle{padding:5px}input:focus+.popup,input:active+.popup{display:flex}\n"], dependencies: [{ kind: "component", type: RepeatButtonComponent, selector: "RepeatButton", inputs: ["Delay", "Interval"] }, { kind: "component", type: FontIconComponent, selector: "FontIcon", inputs: ["FontFamily", "FontSize", "FontStyle", "FontWeight", "Glyph"] }] }); }
+    <input #input 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">
+      <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}input,textarea{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary)}input::placeholder,textarea::placeholder{color:var(--TextFillColorSecondary)}input:disabled,textarea: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", "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>
-    <input #input type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}" (blur)="onBlur()" (keydown)="onKeyDown($event)"/>
-    <div class="popup">
-      <RepeatButton Class="InlineButtonStyle" (Click)="onIncreaseClick()" [Delay]="500" [Interval]="50"><FontIcon Glyph="&#xE70E;"/></RepeatButton>
-      <RepeatButton Class="InlineButtonStyle" (Click)="onDecreaseClick()" [Delay]="500" [Interval]="50"><FontIcon Glyph="&#xE70D;"/></RepeatButton>
-    </div>
     <div class="icon">&#xEC8F;</div>
-  </label>`, imports: [RepeatButtonComponent, FontIconComponent], styles: [":host{position:relative}:host{display:grid}textarea{resize:none}input,textarea{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);color:var(--TextFillColorPrimary)}input::placeholder,textarea::placeholder{color:var(--TextFillColorSecondary);opacity:1}input:hover,textarea:hover{background-color:var(--ControlFillColorSecondary)}input:focus,input:active,textarea:focus,textarea:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}input:disabled,textarea:disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor);color:var(--TextOnAccentFillColorPrimary)}\n", "label{display:grid;position:relative}input{grid-column-start:1;grid-row-start:1;padding-left:24px}.icon{grid-column-start:1;grid-row-start:1;align-self:center;justify-self:left;font-family:var(--SymbolFontFamily);margin-left:6px;color:var(--TextFillColorSecondary)}.popup{position:absolute;display:none;flex-direction:column;justify-content:center;left:0;top:50%;transform:translateY(-50%);border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #0000001a;gap:3px;padding:3px;z-index:1000}.popup .InlineButtonStyle{padding:5px}input:focus+.popup,input:active+.popup{display:flex}\n"] }]
+    <input #input 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">
+      <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}input,textarea{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary)}input::placeholder,textarea::placeholder{color:var(--TextFillColorSecondary)}input:disabled,textarea: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"] }]
         }], ctorParameters: () => [], propDecorators: { IsEnabled: [{
                 type: Input
             }], PlaceholderText: [{
                 type: Input
+            }], IsPlaceholderEditable: [{
+                type: Input
             }], TextAlignment: [{
                 type: Input
             }], InputMode: [{
@@ -2110,13 +2306,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }], NumberFormatter: [{
                 type: Input
+            }], Unit: [{
+                type: Input
             }], ValueChange: [{
                 type: Output
             }], _input: [{
                 type: ViewChild,
                 args: ['input']
+            }], _flyout: [{
+                type: ViewChild,
+                args: ['flyout']
             }], Value: [{
                 type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', []]
+            }], onFocusIn: [{
+                type: HostListener,
+                args: ['focusin', []]
             }], onContextMenu: [{
                 type: HostListener,
                 args: ['contextmenu', ['$event']]
@@ -2127,10 +2334,10 @@ class TextBoxComponent extends FrameworkElementComponent {
         super(...arguments);
         this.IsEnabled = true;
         this.PlaceholderText = '';
-        this.TextChange = new EventEmitter();
         this.TextAlignment = 'Left';
         this.TextWrapping = 'NoWrap';
         this._text = '';
+        this.TextChange = new EventEmitter();
     }
     get Text() {
         return this._text;
@@ -2141,32 +2348,52 @@ class TextBoxComponent extends FrameworkElementComponent {
         this._text = value;
         this.TextChange.emit(value);
     }
-    onChange(event) {
+    onInput(event) {
         this.Text = (event.target).value;
     }
+    get disabled() {
+        return !this.IsEnabled;
+    }
+    onClick() {
+        this._input.nativeElement.focus();
+    }
     onContextMenu(event) {
         event.stopPropagation();
     }
+    Focus() {
+        setTimeout(() => {
+            this._input.nativeElement.focus();
+        }, 0);
+    }
     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", Text: "Text" }, outputs: { TextChange: "TextChange" }, host: { listeners: { "contextmenu": "onContextMenu($event)" } }, usesInheritance: true, ngImport: i0, template: `<input *ngIf="TextWrapping === 'NoWrap'" type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"/>
-  <textarea *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (change)="onChange($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"></textarea>`, isInline: true, styles: [":host{position:relative}:host{display:grid}textarea{resize:none}input,textarea{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);color:var(--TextFillColorPrimary)}input::placeholder,textarea::placeholder{color:var(--TextFillColorSecondary);opacity:1}input:hover,textarea:hover{background-color:var(--ControlFillColorSecondary)}input:focus,input:active,textarea:focus,textarea:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}input:disabled,textarea:disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor);color:var(--TextOnAccentFillColorPrimary)}\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", TextAlignment: "TextAlignment", TextWrapping: "TextWrapping", 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 #input *ngIf="TextWrapping === 'NoWrap'" type="text" [disabled]="!IsEnabled" [value]="Text" (input)="onInput($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"/>
+  <textarea *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (change)="onInput($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}input,textarea{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary)}input::placeholder,textarea::placeholder{color:var(--TextFillColorSecondary)}input:disabled,textarea: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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'TextBox', imports: [CommonModule], template: `<input *ngIf="TextWrapping === 'NoWrap'" type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"/>
-  <textarea *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (change)="onChange($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"></textarea>`, styles: [":host{position:relative}:host{display:grid}textarea{resize:none}input,textarea{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);color:var(--TextFillColorPrimary)}input::placeholder,textarea::placeholder{color:var(--TextFillColorSecondary);opacity:1}input:hover,textarea:hover{background-color:var(--ControlFillColorSecondary)}input:focus,input:active,textarea:focus,textarea:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}input:disabled,textarea:disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor);color:var(--TextOnAccentFillColorPrimary)}\n"] }]
+            args: [{ selector: 'TextBox', imports: [CommonModule], template: `<input #input *ngIf="TextWrapping === 'NoWrap'" type="text" [disabled]="!IsEnabled" [value]="Text" (input)="onInput($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"/>
+  <textarea *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (change)="onInput($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}input,textarea{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary)}input::placeholder,textarea::placeholder{color:var(--TextFillColorSecondary)}input:disabled,textarea:disabled{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor)}\n"] }]
         }], propDecorators: { IsEnabled: [{
                 type: Input
             }], PlaceholderText: [{
                 type: Input
-            }], TextChange: [{
-                type: Output
             }], TextAlignment: [{
                 type: Input
             }], TextWrapping: [{
                 type: Input
+            }], _input: [{
+                type: ViewChild,
+                args: ['input']
             }], Text: [{
                 type: Input
+            }], TextChange: [{
+                type: Output
+            }], disabled: [{
+                type: HostBinding,
+                args: ['class.disabled']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', []]
             }], onContextMenu: [{
                 type: HostListener,
                 args: ['contextmenu', ['$event']]
@@ -2177,11 +2404,11 @@ class XamlRootComponent {
         event.preventDefault();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: XamlRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: XamlRootComponent, isStandalone: true, selector: "XamlRoot", host: { listeners: { "contextmenu": "onContextMenu($event)" } }, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;background-color:#f3f3f3;overflow:hidden;-webkit-user-select:none;user-select:none}:host::ng-deep *{font-family:Segoe UI,Arial,sans-serif;font-size:10pt;color:#000}@media (prefers-color-scheme: dark){:host{background-color:#202020}:host::ng-deep *{color:#fff}}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: XamlRootComponent, isStandalone: true, selector: "XamlRoot", host: { listeners: { "contextmenu": "onContextMenu($event)" } }, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;overflow:hidden;-webkit-user-select:none;user-select:none;background-color:#f3f3f3}@media (prefers-color-scheme: dark){:host{background-color:#202020}}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: XamlRootComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'XamlRoot', template: `<ng-content/>`, styles: [":host{display:grid;background-color:#f3f3f3;overflow:hidden;-webkit-user-select:none;user-select:none}:host::ng-deep *{font-family:Segoe UI,Arial,sans-serif;font-size:10pt;color:#000}@media (prefers-color-scheme: dark){:host{background-color:#202020}:host::ng-deep *{color:#fff}}\n"] }]
+            args: [{ selector: 'XamlRoot', template: `<ng-content/>`, styles: [":host{display:grid;overflow:hidden;-webkit-user-select:none;user-select:none;background-color:#f3f3f3}@media (prefers-color-scheme: dark){:host{background-color:#202020}}\n"] }]
         }], propDecorators: { onContextMenu: [{
                 type: HostListener,
                 args: ['contextmenu', ['$event']]
@@ -2196,5 +2423,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, ContextFlyoutDirective, DropDownButtonComponent, FlyoutComponent, FontIconComponent, FrameworkElementComponent, GridColumnDirective, GridColumnSpanDirective, GridComponent, GridDirective, GridModule, GridProperty, GridRowDirective, GridRowSpanDirective, ImageComponent, ListBoxComponent, ListViewComponent, MenuFlyoutComponent, MenuFlyoutItemBase, MenuFlyoutItemComponent, MenuFlyoutSeparator, NumberBoxComponent, PanelComponent, PopupComponent, RadioButtonComponent, RadioButtonGroup, RepeatButtonComponent, ScrollBarComponent, ScrollViewerComponent, SelectorComponent, SelectorItemTemplate, SliderComponent, SplitButtonComponent, StackPanelComponent, TextBlockComponent, TextBoxComponent, ToggleButtonComponent, ToggleSwitchComponent, ToolTipDirective, ToolTipServiceModule, XamlRootComponent, colorToRgb, colorToString, rgbToHsl, stringToColor, toAlignment, toJustification };
+export { AppBarButtonComponent, BorderComponent, ButtonComponent, CheckBoxComponent, ColorPickerComponent, ComboBoxComponent, CommandBarComponent, ContextFlyoutDirective, DropDownButtonComponent, FlyoutBaseComponent, FlyoutComponent, FlyoutPresenter, FontIconComponent, FrameworkElementComponent, GridColumnDirective, GridColumnSpanDirective, GridComponent, GridDirective, GridModule, GridProperty, GridRowDirective, GridRowSpanDirective, ImageComponent, ListBoxComponent, ListViewComponent, MenuFlyoutComponent, MenuFlyoutItemBase, MenuFlyoutItemComponent, MenuFlyoutSeparator, NumberBoxComponent, PanelComponent, PopupTemplate, RadioButtonComponent, RadioButtonGroupComponent, RadioToggleButtonComponent, RepeatButtonComponent, ScrollBarComponent, ScrollViewerComponent, SelectorComponent, SelectorItemTemplate, SliderComponent, SplitButtonComponent, StackPanelComponent, TextBlockComponent, TextBoxComponent, ToggleButtonComponent, ToggleSwitchComponent, ToolTipDirective, ToolTipServiceModule, XamlRootComponent, colorToRgb, colorToString, rgbToHsl, stringToColor, toAlignment, toJustification };
 //# sourceMappingURL=xaml-ui.mjs.map