xaml-ui 1.0.4 → 1.0.6

package/fesm2022/xaml-ui.mjs

@@ -1,7 +1,12 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Input, Component, EventEmitter, HostListener, ContentChild, Output, TemplateRef, ViewChild, Optional, Directive, NgModule } 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']
@@ -166,20 +187,20 @@ class ButtonComponent extends BorderComponent {
         return this.IsEnabled ? undefined : true;
     }
     get flyoutOpen() {
-        return this._popup?.IsOpen;
+        return this._flyout?.IsOpen;
     }
     onHostPointerEvent(event) {
         if (!this.IsEnabled)
             return;
-        this.Click.emit();
-        this._popup?.Show();
+        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 }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ButtonComponent, isStandalone: true, selector: "Button", inputs: { IsEnabled: "IsEnabled", HorizontalContentAlignment: "HorizontalContentAlignment", VerticalContentAlignment: "VerticalContentAlignment" }, outputs: { Click: "Click" }, host: { listeners: { "click": "onHostPointerEvent($event)" }, properties: { "style.align-content": "this.alignContent", "style.justify-content": "this.justifyContent", "attr.type": "this.type", "attr.disabled": "this.disabled", "class.disabled": "this.disabled", "class.popup-open": "this.flyoutOpen" } }, queries: [{ propertyName: "_popup", first: true, predicate: ["ButtonFlyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:hover:not(.checked):not(.popup-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.popup-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.popup-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(.popup-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.popup-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked:not(.popup-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(.popup-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.popup-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.popup-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"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ButtonComponent, isStandalone: true, selector: "Button", inputs: { IsEnabled: "IsEnabled", HorizontalContentAlignment: "HorizontalContentAlignment", VerticalContentAlignment: "VerticalContentAlignment" }, outputs: { Click: "Click" }, host: { listeners: { "click": "onHostPointerEvent($event)" }, properties: { "style.align-content": "this.alignContent", "style.justify-content": "this.justifyContent", "attr.type": "this.type", "attr.disabled": "this.disabled", "class.disabled": "this.disabled", "class.flyout-open": "this.flyoutOpen" } }, queries: [{ propertyName: "_flyout", first: true, predicate: ["xaml-flyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host: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"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'Button', template: `<ng-content/>`, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:hover:not(.checked):not(.popup-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.popup-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.popup-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(.popup-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.popup-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked:not(.popup-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(.popup-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.popup-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.popup-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"] }]
+            args: [{ selector: 'Button', template: `<ng-content/>`, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host: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"] }]
         }], propDecorators: { IsEnabled: [{
                 type: Input
             }], Click: [{
@@ -205,10 +226,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 args: ['class.disabled']
             }], flyoutOpen: [{
                 type: HostBinding,
-                args: ['class.popup-open']
-            }], _popup: [{
+                args: ['class.flyout-open']
+            }], _flyout: [{
                 type: ContentChild,
-                args: ['ButtonFlyout']
+                args: ['xaml-flyout']
             }], onHostPointerEvent: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -255,24 +276,153 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Output
             }] } });
 
+function colorToString(value) {
+    return '#' + value.toString(16).padStart(8, '0');
+}
+function stringToColor(value) {
+    return parseInt(value.replace('#', ''), 16);
+}
+function colorToRgb(value) {
+    return {
+        r: value >> 16 & 0xff,
+        g: value >> 8 & 0xff,
+        b: value & 0xff,
+        a: value >> 24 & 0xff
+    };
+}
+function rgbToHsl(rgb) {
+    const { r: r255, g: g255, b: b255, a: a255 } = rgb;
+    const r = r255 / 255;
+    const g = g255 / 255;
+    const b = b255 / 255;
+    const a = a255 / 255;
+    let max = Math.max(r, g, b);
+    let min = Math.min(r, g, b);
+    let h = (max + min) / 2;
+    let s = h;
+    let l = h;
+    if (max === min) {
+        // Achromatic
+        return { h: 0, s: 0, l: l * 100, a: a * 100 };
+    }
+    const d = max - min;
+    s = l >= 0.5 ? d / (2 - (max + min)) : d / (max + min);
+    switch (max) {
+        case r:
+            h = ((g - b) / d + 0) * 60;
+            break;
+        case g:
+            h = ((b - r) / d + 2) * 60;
+            break;
+        case b:
+            h = ((r - g) / d + 4) * 60;
+            break;
+    }
+    return { h, s: s * 100, l: l * 100, a: a * 100 };
+}
+
+class ColorPickerComponent extends FrameworkElementComponent {
+    constructor() {
+        super(...arguments);
+        this._color = 0xffffffff;
+        this.ColorChange = new EventEmitter();
+    }
+    get Color() {
+        return this._color;
+    }
+    set Color(value) {
+        this.setColor(value);
+        this.updateSelectorPosition();
+    }
+    setColor(value) {
+        if (this._color === value)
+            return;
+        this._color = value;
+        this.ColorChange.emit(value);
+    }
+    ngAfterViewInit() {
+        let canvas = this._canvas.nativeElement;
+        canvas.width = parseInt(this.Width ?? '300');
+        canvas.height = parseInt(this.Height ?? '300');
+        let context = this._context = canvas.getContext('2d', { willReadFrequently: true });
+        let radius = canvas.width / 2;
+        // Draw hue circle
+        for (let angle = 0; angle < 360; angle++) {
+            let startAngle = (angle - 1) * (Math.PI / 180);
+            let endAngle = (angle + 1) * (Math.PI / 180);
+            context.beginPath();
+            context.moveTo(radius, radius);
+            context.arc(radius, radius, radius * 2, startAngle, endAngle);
+            context.closePath();
+            context.fillStyle = `hsl(${angle}, 100%, 50%)`;
+            context.fill();
+        }
+        // Add radial gradient for saturation
+        let gradient = context.createRadialGradient(radius, radius, 0, radius, radius, radius);
+        gradient.addColorStop(0, 'white');
+        gradient.addColorStop(1, 'transparent');
+        context.fillStyle = gradient;
+        context.fillRect(0, 0, canvas.width, canvas.height);
+        // Position sample
+        this.updateSelectorPosition();
+    }
+    onPointerDown(event) {
+        this._canvas.nativeElement.setPointerCapture(event.pointerId);
+        this.onPointerMove(event);
+    }
+    onPointerMove(event) {
+        if (!this._canvas.nativeElement.hasPointerCapture(event.pointerId))
+            return;
+        let radius = this._canvas.nativeElement.width / 2;
+        let rawX = event.offsetX - radius;
+        let rawY = event.offsetY - radius;
+        let length = Math.sqrt(rawX * rawX + rawY * rawY);
+        let scale = length < radius ? 1 : radius / Math.sqrt(rawX * rawX + rawY * rawY);
+        let sampleX = radius + rawX * scale;
+        let sampleY = radius + rawY * scale;
+        this._selector.nativeElement.style.left = sampleX + 'px';
+        this._selector.nativeElement.style.top = sampleY + 'px';
+        let imageData = this._context.getImageData(sampleX, sampleY, 1, 1).data;
+        let [r, g, b] = imageData;
+        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;
+        let angle = hsl.h / 180 * Math.PI;
+        let length = hsl.s / 100 * radius;
+        let x = radius + Math.cos(angle) * length;
+        let y = radius + Math.sin(angle) * length;
+        this._selector.nativeElement.style.left = x + 'px';
+        this._selector.nativeElement.style.top = y + 'px';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ColorPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ColorPickerComponent, isStandalone: true, selector: "ColorPicker", inputs: { Color: "Color" }, outputs: { ColorChange: "ColorChange" }, viewQueries: [{ propertyName: "_canvas", first: true, predicate: ["canvas"], descendants: true }, { propertyName: "_selector", first: true, predicate: ["selector"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<canvas #canvas (pointerdown)="onPointerDown($event)" (pointermove)="onPointerMove($event)"></canvas><div #selector class="selector"></div>`, isInline: true, styles: [":host{position:relative}canvas{clip-path:circle(50%);position:relative}.selector{position:absolute;transform:translate(-50%,-50%);width:10px;height:10px;border-color:#fff;border-width:2px;border-style:solid;border-radius:10px;mix-blend-mode:difference}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ColorPicker', template: `<canvas #canvas (pointerdown)="onPointerDown($event)" (pointermove)="onPointerMove($event)"></canvas><div #selector class="selector"></div>`, styles: [":host{position:relative}canvas{clip-path:circle(50%);position:relative}.selector{position:absolute;transform:translate(-50%,-50%);width:10px;height:10px;border-color:#fff;border-width:2px;border-style:solid;border-radius:10px;mix-blend-mode:difference}\n"] }]
+        }], propDecorators: { Color: [{
+                type: Input
+            }], ColorChange: [{
+                type: Output
+            }], _canvas: [{
+                type: ViewChild,
+                args: ['canvas']
+            }], _selector: [{
+                type: ViewChild,
+                args: ['selector']
+            }] } });
+
 const SelectorItemTemplate = `<ng-container *ngIf="ItemTemplate">
     <ng-container *ngTemplateOutlet="ItemTemplate; context: { $implicit: item }"/>
   </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);
     }
@@ -286,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() {
@@ -311,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
@@ -320,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;
@@ -334,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: [{
@@ -343,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: [{
@@ -512,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,
@@ -520,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: [{
@@ -623,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: [{
@@ -645,17 +834,22 @@ class StackPanelComponent extends PanelComponent {
     constructor() {
         super(...arguments);
         this.Orientation = 'Vertical';
-        this.Spacing = 0;
     }
-    get flexDirection() {
-        return this.Orientation === 'Horizontal' ? 'row' : 'column';
+    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.flex-direction": "this.flexDirection" } }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:flex;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,
-            args: [{ selector: 'StackPanel', template: `<ng-content/>`, styles: [":host{display:flex;position:relative}\n"] }]
+            args: [{ selector: 'StackPanel', template: `<ng-content/>`, styles: [":host{display:grid;position:relative}\n"] }]
         }], propDecorators: { Orientation: [{
                 type: Input
             }], Spacing: [{
@@ -663,104 +857,330 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }, {
                 type: HostBinding,
                 args: ['style.gap']
-            }], flexDirection: [{
+            }], gridAutoFlow: [{
+                type: HostBinding,
+                args: ['style.grid-auto-flow']
+            }], gridAutoRows: [{
+                type: HostBinding,
+                args: ['style.grid-auto-rows']
+            }], gridAutoColumns: [{
                 type: HostBinding,
-                args: ['style.flex-direction']
+                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 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 PopupComponent {
+class FlyoutPresenter {
     constructor() {
-        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 ? 'popup-open' : undefined;
-    }
-    onBackdropClick(event) {
-        this.Hide();
-        event.stopPropagation();
-    }
-    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: { classAttribute: "popup" }, 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{z-index:900}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;position:absolute;pointer-events:none;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 #0000001a;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.popup-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{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'
-                    }, styles: [":host{position:relative}:host{z-index:900}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;position:absolute;pointer-events:none;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 #0000001a;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.popup-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{position:fixed;inset:0}\n"] }]
-        }], propDecorators: { IsOpen: [{
+            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: [{
-                type: Input
-            }], HorizontalOffset: [{
+            }], Target: [{
                 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(.popup-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.popup-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.popup-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(.popup-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.popup-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked:not(.popup-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(.popup-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.popup-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.popup-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(.popup-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(.popup-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.popup-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.popup-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(.popup-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.popup-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked:not(.popup-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(.popup-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.popup-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.popup-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(.popup-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 {
@@ -770,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 {
@@ -906,6 +1327,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Output
             }] } });
 
+class RepeatButtonComponent extends ButtonComponent {
+    constructor() {
+        super(...arguments);
+        this.Delay = 250;
+        this.Interval = 250;
+    }
+    onPointerDown(event) {
+        if (!this.IsEnabled)
+            return;
+        event.target.setPointerCapture(event.pointerId);
+        this.Click.emit();
+        this._delayTimer = setTimeout(() => {
+            this.Click.emit();
+            this._intervalTimer = setInterval(() => {
+                this.Click.emit();
+            }, this.Interval);
+        }, this.Delay);
+    }
+    onPointerUp() {
+        this.clearTimers();
+    }
+    clearTimers() {
+        if (this._delayTimer !== undefined)
+            clearTimeout(this._delayTimer);
+        if (this._intervalTimer !== undefined)
+            clearInterval(this._intervalTimer);
+    }
+    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"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RepeatButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'RepeatButton', template: `<ng-content/>`, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host: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"] }]
+        }], propDecorators: { Delay: [{
+                type: Input
+            }], Interval: [{
+                type: Input
+            }], onPointerDown: [{
+                type: HostListener,
+                args: ['pointerdown', ['$event']]
+            }], onPointerUp: [{
+                type: HostListener,
+                args: ['pointerup', ['$event']]
+            }] } });
+
 class SliderComponent extends FrameworkElementComponent {
     constructor() {
         super(...arguments);
@@ -917,28 +1389,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: [{
@@ -957,55 +1429,282 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }] } });
 
-class ToggleButtonComponent extends ButtonComponent {
+class GridComponent extends PanelComponent {
     constructor() {
         super(...arguments);
-        this.IsChecked = false;
-        this.IsCheckedChange = new EventEmitter();
+        this.Orientation = 'Horizontal';
     }
-    onPointerUp(event) {
-        if (!this.IsEnabled)
-            return;
-        this.IsChecked = !this.IsChecked;
-        this.IsCheckedChange.emit(this.IsChecked);
+    get gridAutoFlow() {
+        return this.Orientation == 'Horizontal' ? 'row' : 'column';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ToggleButtonComponent, isStandalone: true, selector: "ToggleButton", inputs: { IsChecked: "IsChecked" }, outputs: { IsCheckedChange: "IsCheckedChange" }, host: { listeners: { "pointerup": "onPointerUp($event)" }, properties: { "class.checked": "this.IsChecked" } }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:hover:not(.checked):not(.popup-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.popup-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.popup-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(.popup-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.popup-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked:not(.popup-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(.popup-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.popup-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.popup-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"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: GridComponent, isStandalone: false, selector: "Grid", inputs: { ColumnDefinitions: "ColumnDefinitions", RowDefinitions: "RowDefinitions", ColumnSpacing: "ColumnSpacing", RowSpacing: "RowSpacing", Orientation: "Orientation" }, host: { properties: { "style.grid-template-columns": "this.ColumnDefinitions", "style.grid-template-rows": "this.RowDefinitions", "style.column-gap": "this.ColumnSpacing", "style.row-gap": "this.RowSpacing", "style.grid-auto-flow": "this.gridAutoFlow" } }, 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: ToggleButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ToggleButton', template: `<ng-content/>`, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:hover:not(.checked):not(.popup-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:active:not(.checked):not(.popup-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:active:not(.checked):not(.popup-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(.popup-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host:hover.checked:not(.popup-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host:active.checked:not(.popup-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host:active.checked:not(.popup-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(.popup-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.popup-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.popup-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"] }]
-        }], propDecorators: { IsChecked: [{
+            args: [{ selector: 'Grid', template: `<ng-content/>`, standalone: false, styles: [":host{display:grid;position:relative}\n"] }]
+        }], propDecorators: { ColumnDefinitions: [{
                 type: Input
             }, {
                 type: HostBinding,
-                args: ['class.checked']
-            }], IsCheckedChange: [{
-                type: Output
-            }], onPointerUp: [{
-                type: HostListener,
-                args: ['pointerup', ['$event']]
-            }] } });
-
-class ToggleSwitchComponent extends CheckBoxComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ToggleSwitchComponent, isStandalone: true, selector: "ToggleSwitch", usesInheritance: true, ngImport: i0, template: `<label class="container">
-    <input type="checkbox" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
-    <div class="slider">
-      <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"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleSwitchComponent, decorators: [{
-            type: Component,
+                args: ['style.grid-template-columns']
+            }], RowDefinitions: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.grid-template-rows']
+            }], ColumnSpacing: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.column-gap']
+            }], RowSpacing: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.row-gap']
+            }], Orientation: [{
+                type: Input
+            }], gridAutoFlow: [{
+                type: HostBinding,
+                args: ['style.grid-auto-flow']
+            }] } });
+class GridProperty {
+}
+class GridDirective {
+    constructor() {
+        this.Grid = new GridProperty();
+    }
+    get gridColumnStart() {
+        return this.Grid.Column !== undefined ? this.Grid.Column + 1 : undefined;
+    }
+    get gridRowStart() {
+        return this.Grid.Row !== undefined ? this.Grid.Row + 1 : undefined;
+    }
+    get gridColumnEnd() {
+        return this.Grid.ColumnSpan !== undefined ? ('span ' + this.Grid.ColumnSpan) : undefined;
+    }
+    get gridRowEnd() {
+        return this.Grid.RowSpan !== undefined ? ('span ' + this.Grid.RowSpan) : undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: GridDirective, isStandalone: false, selector: "[Grid]", inputs: { Grid: "Grid" }, host: { properties: { "style.grid-column-start": "this.gridColumnStart", "style.grid-row-start": "this.gridRowStart", "style.grid-column-end": "this.gridColumnEnd", "style.grid-row-end": "this.gridRowEnd" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[Grid]',
+                    standalone: false
+                }]
+        }], propDecorators: { Grid: [{
+                type: Input
+            }], gridColumnStart: [{
+                type: HostBinding,
+                args: ['style.grid-column-start']
+            }], gridRowStart: [{
+                type: HostBinding,
+                args: ['style.grid-row-start']
+            }], gridColumnEnd: [{
+                type: HostBinding,
+                args: ['style.grid-column-end']
+            }], gridRowEnd: [{
+                type: HostBinding,
+                args: ['style.grid-row-end']
+            }] } });
+class GridRowDirective {
+    get gridRowStart() {
+        return this.Row !== undefined ? parseInt(this.Row) + 1 : undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: GridRowDirective, isStandalone: false, selector: "[Grid-Row]", inputs: { Row: ["Grid-Row", "Row"] }, host: { properties: { "style.grid-row-start": "this.gridRowStart" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridRowDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[Grid-Row]',
+                    standalone: false
+                }]
+        }], propDecorators: { Row: [{
+                type: Input,
+                args: ['Grid-Row']
+            }], gridRowStart: [{
+                type: HostBinding,
+                args: ['style.grid-row-start']
+            }] } });
+class GridColumnDirective {
+    get gridColumnStart() {
+        return this.Column !== undefined ? parseInt(this.Column) + 1 : undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: GridColumnDirective, isStandalone: false, selector: "[Grid-Column]", inputs: { Column: ["Grid-Column", "Column"] }, host: { properties: { "style.grid-column-start": "this.gridColumnStart" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridColumnDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[Grid-Column]',
+                    standalone: false
+                }]
+        }], propDecorators: { Column: [{
+                type: Input,
+                args: ['Grid-Column']
+            }], gridColumnStart: [{
+                type: HostBinding,
+                args: ['style.grid-column-start']
+            }] } });
+class GridRowSpanDirective {
+    get gridRowEnd() {
+        return this.RowSpan !== undefined ? ('span ' + this.RowSpan) : undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridRowSpanDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: GridRowSpanDirective, isStandalone: false, selector: "[Grid-RowSpan]", inputs: { RowSpan: ["Grid-RowSpan", "RowSpan"] }, host: { properties: { "style.grid-row-end": "this.gridRowEnd" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridRowSpanDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[Grid-RowSpan]',
+                    standalone: false
+                }]
+        }], propDecorators: { RowSpan: [{
+                type: Input,
+                args: ['Grid-RowSpan']
+            }], gridRowEnd: [{
+                type: HostBinding,
+                args: ['style.grid-row-end']
+            }] } });
+class GridColumnSpanDirective {
+    get gridColumnEnd() {
+        return this.ColumnSpan !== undefined ? ('span ' + this.ColumnSpan) : undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridColumnSpanDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: GridColumnSpanDirective, isStandalone: false, selector: "[Grid-ColumnSpan]", inputs: { ColumnSpan: ["Grid-ColumnSpan", "ColumnSpan"] }, host: { properties: { "style.grid-column-end": "this.gridColumnEnd" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridColumnSpanDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[Grid-ColumnSpan]',
+                    standalone: false
+                }]
+        }], propDecorators: { ColumnSpan: [{
+                type: Input,
+                args: ['Grid-ColumnSpan']
+            }], gridColumnEnd: [{
+                type: HostBinding,
+                args: ['style.grid-column-end']
+            }] } });
+const GridComponents = [
+    GridComponent,
+    GridDirective,
+    GridRowDirective,
+    GridRowSpanDirective,
+    GridColumnDirective,
+    GridColumnSpanDirective
+];
+class GridModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: GridModule, declarations: [GridComponent, GridDirective, GridRowDirective, GridRowSpanDirective, GridColumnDirective, GridColumnSpanDirective], exports: [GridComponent, GridDirective, GridRowDirective, GridRowSpanDirective, GridColumnDirective, GridColumnSpanDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: GridComponents,
+                    exports: GridComponents
+                }]
+        }] });
+
+class SplitButtonComponent extends FrameworkElementComponent {
+    constructor() {
+        super(...arguments);
+        this.IsEnabled = true;
+        this.Click = new EventEmitter();
+    }
+    get buttonClass() {
+        return this._popup?.IsOpen ? 'flyout-open' : undefined;
+    }
+    onButtonClick() {
+        if (!this.IsEnabled)
+            return;
+        this.Click.emit();
+    }
+    onDropDownClick() {
+        if (!this._popup || !this.IsEnabled)
+            return;
+        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: ["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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SplitButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'SplitButton',
+                    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>`,
+                    imports: [CommonModule, ButtonComponent, DropDownButtonComponent, GridModule]
+                }]
+        }], propDecorators: { IsEnabled: [{
+                type: Input
+            }], Click: [{
+                type: Output
+            }], _popup: [{
+                type: ContentChild,
+                args: ['xaml-flyout']
+            }] } });
+
+class ToggleButtonComponent extends ButtonComponent {
+    constructor() {
+        super(...arguments);
+        this.IsChecked = false;
+        this.IsCheckedChange = new EventEmitter();
+    }
+    onPointerUp(event) {
+        if (!this.IsEnabled)
+            return;
+        this.IsChecked = !this.IsChecked;
+        this.IsCheckedChange.emit(this.IsChecked);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ToggleButtonComponent, isStandalone: true, selector: "ToggleButton", inputs: { IsChecked: "IsChecked" }, outputs: { IsCheckedChange: "IsCheckedChange" }, host: { listeners: { "pointerup": "onPointerUp($event)" }, properties: { "class.checked": "this.IsChecked" } }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host: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"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ToggleButton', template: `<ng-content/>`, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host: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"] }]
+        }], propDecorators: { IsChecked: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.checked']
+            }], IsCheckedChange: [{
+                type: Output
+            }], onPointerUp: [{
+                type: HostListener,
+                args: ['pointerup', ['$event']]
+            }] } });
+
+class ToggleSwitchComponent extends CheckBoxComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ToggleSwitchComponent, isStandalone: true, selector: "ToggleSwitch", usesInheritance: true, ngImport: i0, template: `<label class="container">
+    <input type="checkbox" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
+    <div class="slider">
+      <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}.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,
             args: [{ selector: 'ToggleSwitch', template: `<label class="container">
     <input type="checkbox" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
     <div class="slider">
       <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 {
@@ -1019,157 +1718,70 @@ 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';
+class MenuFlyoutComponent extends FlyoutComponent {
+    get transitionAnimation() {
+        return 'Default';
     }
-    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,
-        };
+    OnOverlay(overlay) {
+        if (this._menuClickSubscription)
+            this._menuClickSubscription();
+        this._menuClickSubscription = this._renderer.listen(overlay.overlayElement, 'click', p => this.onMenuClick(p));
     }
-    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;
+    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: "<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, 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;
+    }
+    ngAfterViewInit() {
+        this._flyout = this._viewContainer.injector.get(FlyoutComponent, null) ||
+            this._viewContainer.injector.get(MenuFlyoutComponent, null);
+        if (this._flyout) {
+            this._flyout.Placement = 'BottomEdgeAlignedLeft';
         }
-        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 parentElement = this._hostComponent.nativeElement.parentElement;
+        if (parentElement) {
+            parentElement.oncontextmenu = p => this.onContextMenu(p);
         }
-        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;
+    }
+    onContextMenu(event) {
+        if (!this._flyout)
+            return;
+        if (!this._flyout.IsOpen) {
+            this._flyout.Target = { x: event.clientX, y: event.clientY };
+            this._flyout.IsOpen = true;
         }
-        return {
-            'top': top,
-            'left': left,
-            'right': right,
-            'bottom': bottom,
-            'transform': transform,
-            'margin': margin,
-            'transition': 'transform var(--ControlNormalAnimationDuration)'
-        };
+        else {
+            this._flyout.IsOpen = false;
+        }
+        event.preventDefault();
+        event.stopPropagation();
     }
-    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" }, 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{z-index:900}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;position:absolute;pointer-events:none;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 #0000001a;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.popup-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{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"] }] }); }
+    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]", ngImport: i0 }); }
 }
-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>`, styles: [":host{position:relative}:host{z-index:900}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;position:absolute;pointer-events:none;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 #0000001a;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.popup-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{position:fixed;inset:0}\n"] }]
-        }], propDecorators: { Placement: [{
-                type: Input
-            }] } });
+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 }] });
 
 class TextBlockComponent extends FrameworkElementComponent {
     constructor() {
@@ -1332,204 +1944,144 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 args: ['style.font-family']
             }], FontSize: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.font-size']
-            }], FontStyle: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.font-style']
-            }], FontWeight: [{
-                type: Input
-            }], Glyph: [{
-                type: Input
-            }], fontWeight: [{
-                type: HostBinding,
-                args: ['style.font-weight']
-            }] } });
-
-class GridComponent extends PanelComponent {
-    constructor() {
-        super(...arguments);
-        this.Orientation = 'Horizontal';
-    }
-    get gridAutoFlow() {
-        return this.Orientation == 'Horizontal' ? 'row' : 'column';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: GridComponent, isStandalone: false, selector: "Grid", inputs: { ColumnDefinitions: "ColumnDefinitions", RowDefinitions: "RowDefinitions", ColumnSpacing: "ColumnSpacing", RowSpacing: "RowSpacing", Orientation: "Orientation" }, host: { properties: { "style.grid-template-columns": "this.ColumnDefinitions", "style.grid-template-rows": "this.RowDefinitions", "style.column-gap": "this.ColumnSpacing", "style.row-gap": "this.RowSpacing", "style.grid-auto-flow": "this.gridAutoFlow" } }, 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: GridComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'Grid', template: `<ng-content/>`, standalone: false, styles: [":host{display:grid;position:relative}\n"] }]
-        }], propDecorators: { ColumnDefinitions: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.grid-template-columns']
-            }], RowDefinitions: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.grid-template-rows']
-            }], ColumnSpacing: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.column-gap']
-            }], RowSpacing: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.row-gap']
-            }], Orientation: [{
-                type: Input
-            }], gridAutoFlow: [{
-                type: HostBinding,
-                args: ['style.grid-auto-flow']
-            }] } });
-class GridProperty {
-}
-class GridDirective {
-    constructor() {
-        this.Grid = new GridProperty();
-    }
-    get gridColumnStart() {
-        return this.Grid.Column !== undefined ? this.Grid.Column + 1 : undefined;
-    }
-    get gridRowStart() {
-        return this.Grid.Row !== undefined ? this.Grid.Row + 1 : undefined;
-    }
-    get gridColumnEnd() {
-        return this.Grid.ColumnSpan !== undefined ? ('span ' + this.Grid.ColumnSpan) : undefined;
-    }
-    get gridRowEnd() {
-        return this.Grid.RowSpan !== undefined ? ('span ' + this.Grid.RowSpan) : undefined;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: GridDirective, isStandalone: false, selector: "[Grid]", inputs: { Grid: "Grid" }, host: { properties: { "style.grid-column-start": "this.gridColumnStart", "style.grid-row-start": "this.gridRowStart", "style.grid-column-end": "this.gridColumnEnd", "style.grid-row-end": "this.gridRowEnd" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[Grid]',
-                    standalone: false
-                }]
-        }], propDecorators: { Grid: [{
-                type: Input
-            }], gridColumnStart: [{
-                type: HostBinding,
-                args: ['style.grid-column-start']
-            }], gridRowStart: [{
+            }, {
                 type: HostBinding,
-                args: ['style.grid-row-start']
-            }], gridColumnEnd: [{
+                args: ['style.font-size']
+            }], FontStyle: [{
+                type: Input
+            }, {
                 type: HostBinding,
-                args: ['style.grid-column-end']
-            }], gridRowEnd: [{
+                args: ['style.font-style']
+            }], FontWeight: [{
+                type: Input
+            }], Glyph: [{
+                type: Input
+            }], fontWeight: [{
                 type: HostBinding,
-                args: ['style.grid-row-end']
+                args: ['style.font-weight']
             }] } });
-class GridRowDirective {
-    get gridRowStart() {
-        return this.Row !== undefined ? parseInt(this.Row) + 1 : undefined;
+
+class ImageComponent extends FrameworkElementComponent {
+    constructor() {
+        super(...arguments);
+        this.Stretch = 'Uniform';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: GridRowDirective, isStandalone: false, selector: "[Grid-Row]", inputs: { Row: ["Grid-Row", "Row"] }, host: { properties: { "style.grid-row-start": "this.gridRowStart" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridRowDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[Grid-Row]',
-                    standalone: false
-                }]
-        }], propDecorators: { Row: [{
-                type: Input,
-                args: ['Grid-Row']
-            }], gridRowStart: [{
-                type: HostBinding,
-                args: ['style.grid-row-start']
-            }] } });
-class GridColumnDirective {
-    get gridColumnStart() {
-        return this.Column !== undefined ? parseInt(this.Column) + 1 : undefined;
+    get imageStyle() {
+        return {
+            width: this.Width,
+            height: this.Height
+        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: GridColumnDirective, isStandalone: false, selector: "[Grid-Column]", inputs: { Column: ["Grid-Column", "Column"] }, host: { properties: { "style.grid-column-start": "this.gridColumnStart" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ImageComponent, isStandalone: true, selector: "Image", inputs: { Source: "Source", Stretch: "Stretch" }, usesInheritance: true, ngImport: i0, template: `<img [src]="Source" [class]="Stretch" [ngStyle]="imageStyle" [alt]="">`, isInline: true, styles: [":host{display:grid;overflow:hidden}img{place-self:stretch}img.None{object-fit:none}img.Fill{object-fit:fill}img.Uniform{object-fit:contain}img.UniformToFill{object-fit:cover}\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: GridColumnDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[Grid-Column]',
-                    standalone: false
-                }]
-        }], propDecorators: { Column: [{
-                type: Input,
-                args: ['Grid-Column']
-            }], gridColumnStart: [{
-                type: HostBinding,
-                args: ['style.grid-column-start']
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'Image', template: `<img [src]="Source" [class]="Stretch" [ngStyle]="imageStyle" [alt]="">`, imports: [CommonModule], styles: [":host{display:grid;overflow:hidden}img{place-self:stretch}img.None{object-fit:none}img.Fill{object-fit:fill}img.Uniform{object-fit:contain}img.UniformToFill{object-fit:cover}\n"] }]
+        }], propDecorators: { Source: [{
+                type: Input
+            }], Stretch: [{
+                type: Input
             }] } });
-class GridRowSpanDirective {
-    get gridRowEnd() {
-        return this.RowSpan !== undefined ? ('span ' + this.RowSpan) : undefined;
+
+class AppBarButtonComponent extends FrameworkElementComponent {
+    constructor() {
+        super(...arguments);
+        this.IsEnabled = true;
+        this.Click = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridRowSpanDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: GridRowSpanDirective, isStandalone: false, selector: "[Grid-RowSpan]", inputs: { RowSpan: ["Grid-RowSpan", "RowSpan"] }, host: { properties: { "style.grid-row-end": "this.gridRowEnd" } }, ngImport: i0 }); }
+    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: { 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: GridRowSpanDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[Grid-RowSpan]',
-                    standalone: false
-                }]
-        }], propDecorators: { RowSpan: [{
-                type: Input,
-                args: ['Grid-RowSpan']
-            }], gridRowEnd: [{
+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><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: [{
+                type: Input
+            }], Icon: [{
+                type: Input
+            }], Click: [{
+                type: Output
+            }], disabled: [{
                 type: HostBinding,
-                args: ['style.grid-row-end']
+                args: ['class.disabled']
+            }], _flyout: [{
+                type: ContentChild,
+                args: ['xaml-flyout']
+            }], onHostPointerEvent: [{
+                type: HostListener,
+                args: ['click', ['$event']]
             }] } });
-class GridColumnSpanDirective {
-    get gridColumnEnd() {
-        return this.ColumnSpan !== undefined ? ('span ' + this.ColumnSpan) : undefined;
+
+class CommandBarComponent extends FrameworkElementComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CommandBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: CommandBarComponent, isStandalone: true, selector: "CommandBar", usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:flex;flex-direction:row;align-items:stretch;justify-content:flex-start;padding:3px;gap:3px}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CommandBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'CommandBar', template: `<ng-content/>`, styles: [":host{display:flex;flex-direction:row;align-items:stretch;justify-content:flex-start;padding:3px;gap:3px}\n"] }]
+        }] });
+
+class MenuFlyoutItemBase {
+}
+
+class MenuFlyoutItemComponent extends MenuFlyoutItemBase {
+    constructor() {
+        super(...arguments);
+        this.IsEnabled = true;
+        this.Text = '';
+        this.Click = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridColumnSpanDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: GridColumnSpanDirective, isStandalone: false, selector: "[Grid-ColumnSpan]", inputs: { ColumnSpan: ["Grid-ColumnSpan", "ColumnSpan"] }, host: { properties: { "style.grid-column-end": "this.gridColumnEnd" } }, ngImport: i0 }); }
+    get disabled() {
+        return !this.IsEnabled;
+    }
+    onClick() {
+        this.Click.emit();
+    }
+    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;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: GridColumnSpanDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[Grid-ColumnSpan]',
-                    standalone: false
-                }]
-        }], propDecorators: { ColumnSpan: [{
-                type: Input,
-                args: ['Grid-ColumnSpan']
-            }], gridColumnEnd: [{
+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;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: [{
+                type: Input
+            }], Icon: [{
+                type: Input
+            }], Click: [{
+                type: Output
+            }], disabled: [{
                 type: HostBinding,
-                args: ['style.grid-column-end']
+                args: ['class.disabled']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', []]
             }] } });
-const GridComponents = [
-    GridComponent,
-    GridDirective,
-    GridRowDirective,
-    GridRowSpanDirective,
-    GridColumnDirective,
-    GridColumnSpanDirective
-];
-class GridModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: GridModule, declarations: [GridComponent, GridDirective, GridRowDirective, GridRowSpanDirective, GridColumnDirective, GridColumnSpanDirective], exports: [GridComponent, GridDirective, GridRowDirective, GridRowSpanDirective, GridColumnDirective, GridColumnSpanDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridModule }); }
+
+class MenuFlyoutSeparator extends MenuFlyoutItemBase {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MenuFlyoutSeparator, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MenuFlyoutSeparator, isStandalone: true, selector: "MenuFlyoutSeparator", usesInheritance: true, ngImport: i0, template: `<div class="separator"></div>`, isInline: true, styles: [":host{position:relative}:host{display:table-row;position:relative}:host>.separator{position:absolute;display:block;inset:-.5px -2px;background-color:var(--DividerStrokeColorDefault)}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: GridComponents,
-                    exports: GridComponents
-                }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MenuFlyoutSeparator, decorators: [{
+            type: Component,
+            args: [{ selector: 'MenuFlyoutSeparator', template: `<div class="separator"></div>`, styles: [":host{position:relative}:host{display:table-row;position:relative}:host>.separator{position:absolute;display:block;inset:-.5px -2px;background-color:var(--DividerStrokeColorDefault)}\n"] }]
         }] });
 
 class ToolTipDirective {
@@ -1562,15 +2114,201 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 }]
         }] });
 
+class NumberBoxComponent extends FrameworkElementComponent {
+    get Text() {
+        return this._text;
+    }
+    get Value() {
+        return this._value;
+    }
+    set Value(value) {
+        this.setValue(value);
+        this.updateText();
+    }
+    setValue(value) {
+        value = this.clampValue(value);
+        if (value == this.Value)
+            return;
+        this._value = value;
+        this.ValueChange.emit(value);
+    }
+    constructor() {
+        super();
+        this.IsEnabled = true;
+        this.PlaceholderText = '';
+        this.IsPlaceholderEditable = false;
+        this.TextAlignment = 'Left';
+        this.InputMode = 'Float';
+        this.Minimum = -Infinity;
+        this.Maximum = Infinity;
+        this.SmallChange = 1;
+        this.LargeChange = 10;
+        this.NumberFormatter = (value) => value.toString();
+        this.ValueChange = new EventEmitter();
+        this._text = '';
+        this._value = NaN;
+        this.TextAlignment = 'Right';
+    }
+    onChange() {
+        this._text = this._input.nativeElement.value;
+        let value;
+        switch (this.InputMode) {
+            case 'Float':
+                value = parseFloat(this._text);
+                break;
+            case 'Integer':
+                value = parseInt(this._text);
+                break;
+        }
+        this.setValue(value);
+    }
+    clampValue(value) {
+        if (!Number.isNaN(value)) {
+            if (this.Minimum !== undefined && value < this.Minimum)
+                value = this.Minimum;
+            if (this.Maximum !== undefined && value > this.Maximum)
+                value = this.Maximum;
+        }
+        return value;
+    }
+    onIncreaseClick() {
+        this.Value += this.SmallChange;
+    }
+    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) {
+            case 'ArrowUp':
+                this.Value += this.SmallChange;
+                break;
+            case 'ArrowDown':
+                this.Value -= this.SmallChange;
+                break;
+            case 'PageUp':
+                this.Value += this.LargeChange;
+                break;
+            case 'PageDown':
+                this.Value -= this.LargeChange;
+                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);
+    }
+    onContextMenu(event) {
+        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", 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>
+    <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>
+    <div class="icon">&#xEC8F;</div>
+    <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: [{
+                type: Input
+            }], Minimum: [{
+                type: Input
+            }], Maximum: [{
+                type: Input
+            }], SmallChange: [{
+                type: Input
+            }], LargeChange: [{
+                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']]
+            }] } });
+
 class TextBoxComponent extends FrameworkElementComponent {
     constructor() {
         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;
@@ -1581,32 +2319,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']]
@@ -1617,11 +2375,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']]
@@ -1636,5 +2394,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BorderComponent, ButtonComponent, CheckBoxComponent, ComboBoxComponent, DropDownButtonComponent, FlyoutComponent, FontIconComponent, FrameworkElementComponent, GridColumnDirective, GridColumnSpanDirective, GridComponent, GridDirective, GridModule, GridProperty, GridRowDirective, GridRowSpanDirective, ListBoxComponent, ListViewComponent, PanelComponent, PopupComponent, RadioButtonComponent, RadioButtonGroup, ScrollBarComponent, ScrollViewerComponent, SelectorComponent, SelectorItemTemplate, SliderComponent, StackPanelComponent, TextBlockComponent, TextBoxComponent, ToggleButtonComponent, ToggleSwitchComponent, ToolTipDirective, ToolTipServiceModule, XamlRootComponent, 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, RadioButtonGroup, 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