xaml-ui 1.0.4 → 1.0.5

package/fesm2022/xaml-ui.mjs

@@ -1,5 +1,5 @@
 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';
 
@@ -166,20 +166,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._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 +205,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,6 +255,146 @@ 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 >> 24 & 0xff,
+        g: value >> 16 & 0xff,
+        b: value >> 8 & 0xff,
+        a: value & 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 = ((r << 24) + (g << 16) + (b << 8) + 0xff) >>> 0;
+        this.setColor(color);
+    }
+    updateSelectorPosition() {
+        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>
@@ -645,17 +785,16 @@ class StackPanelComponent extends PanelComponent {
     constructor() {
         super(...arguments);
         this.Orientation = 'Vertical';
-        this.Spacing = 0;
     }
-    get flexDirection() {
-        return this.Orientation === 'Horizontal' ? 'row' : 'column';
+    get gridAutoColumns() {
+        return this.Orientation === 'Horizontal' ? 'column' : 'row';
     }
     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.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,9 +802,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }, {
                 type: HostBinding,
                 args: ['style.gap']
-            }], flexDirection: [{
+            }], gridAutoColumns: [{
                 type: HostBinding,
-                args: ['style.flex-direction']
+                args: ['style.grid-auto-flow']
             }] } });
 
 class ListViewComponent extends SelectorComponent {
@@ -686,6 +825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
 
 class PopupComponent {
     constructor() {
+        this._title = '';
         this.isRendered = false;
         this._isOpen = false;
         this.IsOpenChange = new EventEmitter();
@@ -721,17 +861,17 @@ class PopupComponent {
         this.IsOpen = false;
     }
     get containerClass() {
-        return this.IsOpen ? 'popup-open' : undefined;
+        return this.IsOpen ? 'flyout-open' : undefined;
     }
     onBackdropClick(event) {
         this.Hide();
-        event.stopPropagation();
+        event.stopImmediatePropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: PopupComponent, isStandalone: true, selector: "Popup", inputs: { IsOpen: "IsOpen", VerticalOffset: "VerticalOffset", HorizontalOffset: "HorizontalOffset" }, outputs: { IsOpenChange: "IsOpenChange" }, host: { 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>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: PopupComponent, isStandalone: true, selector: "Popup", inputs: { IsOpen: "IsOpen", VerticalOffset: "VerticalOffset", HorizontalOffset: "HorizontalOffset" }, outputs: { IsOpenChange: "IsOpenChange" }, host: { properties: { "attr.title": "this._title" }, classAttribute: "popup" }, providers: [{ provide: 'xaml-flyout', useExisting: PopupComponent }], viewQueries: [{ propertyName: "_container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `<div class="popup-backdrop" (click)="onBackdropClick($event)" (contextmenu)="onBackdropClick($event)" *ngIf="IsOpen"></div>
     <div #container class="popup-container" [ngClass]="containerClass">
       <div class="popup-content" *ngIf="isRendered"><ng-content/></div>
-    </div>`, isInline: true, styles: [":host{position:relative}:host{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"] }] }); }
+    </div>`, isInline: true, styles: [":host{position:relative}:host{position:static}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;pointer-events:none;position:absolute;z-index:1000}.popup-container>.popup-content{display:grid;padding:16px;border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);opacity:0;transition:opacity var(--ControlNormalAnimationDuration);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #00000080;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.flyout-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{z-index:900;position:fixed;inset:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PopupComponent, decorators: [{
             type: Component,
@@ -739,9 +879,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
     <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: [{
+                        'class': 'popup',
+                    }, providers: [{ provide: 'xaml-flyout', useExisting: PopupComponent }], styles: [":host{position:relative}:host{position:static}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;pointer-events:none;position:absolute;z-index:1000}.popup-container>.popup-content{display:grid;padding:16px;border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);opacity:0;transition:opacity var(--ControlNormalAnimationDuration);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #00000080;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.flyout-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{z-index:900;position:fixed;inset:0}\n"] }]
+        }], propDecorators: { _title: [{
+                type: HostBinding,
+                args: ['attr.title']
+            }], IsOpen: [{
                 type: Input
             }], IsOpenChange: [{
                 type: Output
@@ -756,11 +899,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
 
 class DropDownButtonComponent extends ButtonComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DropDownButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: DropDownButtonComponent, isStandalone: true, selector: "DropDownButton", usesInheritance: true, ngImport: i0, template: `<div class="drop-down-glyph">&#xE70D;</div><ng-content/>`, isInline: true, styles: [":host{position:relative}:host{display:grid;padding:5px 11px;border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host: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"] }); }
+    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(.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: '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 ComboBoxComponent extends SelectorComponent {
@@ -906,6 +1049,51 @@ 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() {
+        if (this._delayTimer !== undefined)
+            clearTimeout(this._delayTimer);
+        if (this._intervalTimer !== undefined)
+            clearInterval(this._intervalTimer);
+    }
+    onHostPointerEvent(event) {
+        //Disable pointer event handling on the base button
+    }
+    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);
@@ -957,446 +1145,54 @@ 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']]
+                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 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: [{ 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"] }]
-        }] });
-
-class ListBoxComponent extends SelectorComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ListBoxComponent, isStandalone: true, selector: "ListBox", usesInheritance: true, ngImport: i0, template: "<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\" [ngStyle]=\"{'align-content': alignContent, 'justify-content': justifyContent}\">\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  </div>", isInline: true, styles: [":host{position:relative}:host{display:flex;flex-direction:column;background-color:var(--SystemChromeMediumLowColor)}:host .item{display:grid;padding:12px;margin:0}:host:not(.disabled) .item:not(:hover):not(:active):not(.selected){color:var(--TextFillColorPrimary)}:host:not(.disabled) .item:hover:not(.active):not(.selected){background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:active:not(.selected){background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:not(:hover):not(:active).selected{background-color:var(--SystemControlHighlightListAccentLow)}:host:not(.disabled) .item:hover:not(:active).selected{background-color:var(--SystemControlHighlightListAccentMedium)}:host:not(.disabled) .item:active.selected{background-color:var(--SystemControlHighlightListAccentHigh)}:host.disabled .item:not(.selected){color:var(--TextFillColorDisabled)}:host.disabled .item.selected{background-color:var(--SubtleFillColorSecondary);color:var(--AccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+class GridProperty {
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListBoxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ListBox', imports: [CommonModule], template: `<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" [ngStyle]="{'align-content': alignContent, 'justify-content': justifyContent}">
-    ${SelectorItemTemplate}
-  </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 {
+class GridDirective {
     constructor() {
-        super(...arguments);
-        this.Placement = 'Top';
+        this.Grid = new GridProperty();
     }
-    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,
-        };
-    }
-    get containerStyle() {
-        let top = '0';
-        let left = '0';
-        let right = '0';
-        let bottom = '0';
-        let transform;
-        function translate(x, y, isOpen) {
-            let result = '';
-            if (x !== 0) {
-                result += `translateX(${x > 0 ? '' : '-'}100%)`;
-                if (!isOpen) {
-                    result += `translateX(${x > 0 ? '-' : ''}10px)`;
-                }
-            }
-            if (y !== 0) {
-                result += `translateY(${y > 0 ? '' : '-'}100%)`;
-                if (!isOpen) {
-                    result += `translateY(${y > 0 ? '-' : ''}10px)`;
-                }
-            }
-            return result;
-        }
-        switch (this.Placement) {
-            case 'Top':
-            case 'TopEdgeAlignedLeft':
-            case 'TopEdgeAlignedRight':
-                bottom = undefined;
-                transform = translate(0, -1, this.IsOpen);
-                break;
-            case 'Bottom':
-            case 'BottomEdgeAlignedLeft':
-            case 'BottomEdgeAlignedRight':
-                top = undefined;
-                transform = translate(0, 1, this.IsOpen);
-                break;
-            case 'Left':
-            case 'LeftEdgeAlignedBottom':
-            case 'LeftEdgeAlignedTop':
-                right = undefined;
-                transform = translate(-1, 0, this.IsOpen);
-                break;
-            case 'Right':
-            case 'RightEdgeAlignedBottom':
-            case 'RightEdgeAlignedTop':
-                left = undefined;
-                transform = translate(1, 0, this.IsOpen);
-                break;
-        }
-        let margin;
-        switch (this.Placement) {
-            case 'Top':
-                margin = '0 -100vw -100vh -100vw';
-                break;
-            case 'TopEdgeAlignedLeft':
-                margin = '0 -100vw -100vh 0';
-                break;
-            case 'TopEdgeAlignedRight':
-                margin = '0 0 -100vh -100vw';
-                break;
-            case 'Bottom':
-                margin = '-100vh -100vw 0 -100vw';
-                break;
-            case 'BottomEdgeAlignedLeft':
-                margin = '0 -100vw 0 0';
-                break;
-            case 'BottomEdgeAlignedRight':
-                margin = '0 0 0 -100vw';
-                break;
-            case 'Left':
-                margin = '-100vh -100vw -100vh 0';
-                break;
-            case 'LeftEdgeAlignedTop':
-                margin = '0 -100vw -100vh 0';
-                break;
-            case 'LeftEdgeAlignedBottom':
-                margin = '-100vh -100vw 0 0';
-                break;
-            case 'Right':
-                margin = '-100vh 0 -100vh -100vw';
-                break;
-            case 'RightEdgeAlignedTop':
-                margin = '0 0 -100vh -100vw';
-                break;
-            case 'RightEdgeAlignedBottom':
-                margin = '-100vh 0 0 -100vw';
-                break;
-        }
-        return {
-            'top': top,
-            'left': left,
-            'right': right,
-            'bottom': bottom,
-            'transform': transform,
-            'margin': margin,
-            'transition': 'transform var(--ControlNormalAnimationDuration)'
-        };
-    }
-    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"] }] }); }
-}
-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
-            }] } });
-
-class TextBlockComponent extends FrameworkElementComponent {
-    constructor() {
-        super(...arguments);
-        this.FontWeight = 'Normal';
-        this.TextAlignment = 'Left';
-        this.TextWrapping = 'NoWrap';
-    }
-    get fontWeight() {
-        return TextBlockComponent.ToFontWeight(this.FontWeight);
-    }
-    static ToFontWeight(value) {
-        switch (value) {
-            case 'Black':
-                return 900;
-            case 'Bold':
-                return 700;
-            case 'ExtraBlack':
-                return 950;
-            case 'ExtraBold':
-                return 800;
-            case 'ExtraLight':
-                return 200;
-            case 'Light':
-                return 300;
-            case 'Medium':
-                return 500;
-            case 'Normal':
-                return 400;
-            case 'SemiBold':
-                return 600;
-            case 'SemiLight':
-                return 350;
-            case 'Thin':
-                return 100;
-        }
-    }
-    get userSelect() {
-        return this.IsTextSelectionEnabled === 'True' ? 'text' : 'none';
-    }
-    get textDecorationLine() {
-        switch (this.TextDecorations) {
-            case 'None':
-                return 'none';
-            case 'Strikethrough':
-                return 'line-through';
-            case 'Underline':
-                return 'underline';
-            default:
-                return undefined;
-        }
-    }
-    get textOverflow() {
-        switch (this.TextTrimming) {
-            case 'None':
-            case 'Clip':
-                return 'clip';
-            case 'CharacterEllipsis':
-                return 'Ellipsis';
-            default:
-                return undefined;
-        }
-    }
-    get whiteSpace() {
-        switch (this.TextWrapping) {
-            case 'NoWrap':
-                return 'nowrap';
-            case 'Wrap':
-                return 'normal';
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBlockComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TextBlockComponent, isStandalone: true, selector: "TextBlock", inputs: { FontFamily: "FontFamily", Text: "Text", FontSize: "FontSize", FontStyle: "FontStyle", FontWeight: "FontWeight", Foreground: "Foreground", TextAlignment: "TextAlignment", IsTextSelectionEnabled: "IsTextSelectionEnabled", TextDecorations: "TextDecorations", TextTrimming: "TextTrimming", TextWrapping: "TextWrapping" }, host: { properties: { "style.font-family": "this.FontFamily", "style.font-size": "this.FontSize", "style.font-style": "this.FontStyle", "style.color": "this.Foreground", "style.text-align": "this.TextAlignment", "style.font-weight": "this.fontWeight", "style.user-select": "this.userSelect", "style.text-decoration-line": "this.textDecorationLine", "style.text-overflow": "this.textOverflow", "style.white-space": "this.whiteSpace" } }, usesInheritance: true, ngImport: i0, template: `<ng-container>
-    <ng-content *ngIf="Text === undefined"/>
-    <ng-container *ngIf="Text !== undefined">{{Text}}</ng-container>
-  </ng-container>`, isInline: true, 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: TextBlockComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'TextBlock',
-                    imports: [CommonModule],
-                    template: `<ng-container>
-    <ng-content *ngIf="Text === undefined"/>
-    <ng-container *ngIf="Text !== undefined">{{Text}}</ng-container>
-  </ng-container>`
-                }]
-        }], propDecorators: { FontFamily: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.font-family']
-            }], Text: [{
-                type: Input
-            }], FontSize: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.font-size']
-            }], FontStyle: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.font-style']
-            }], FontWeight: [{
-                type: Input
-            }], Foreground: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.color']
-            }], TextAlignment: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.text-align']
-            }], IsTextSelectionEnabled: [{
-                type: Input
-            }], TextDecorations: [{
-                type: Input
-            }], TextTrimming: [{
-                type: Input
-            }], TextWrapping: [{
-                type: Input
-            }], fontWeight: [{
-                type: HostBinding,
-                args: ['style.font-weight']
-            }], userSelect: [{
-                type: HostBinding,
-                args: ['style.user-select']
-            }], textDecorationLine: [{
-                type: HostBinding,
-                args: ['style.text-decoration-line']
-            }], textOverflow: [{
-                type: HostBinding,
-                args: ['style.text-overflow']
-            }], whiteSpace: [{
-                type: HostBinding,
-                args: ['style.white-space']
-            }] } });
-
-class FontIconComponent extends FrameworkElementComponent {
-    constructor() {
-        super(...arguments);
-        this.FontWeight = 'Normal';
-    }
-    get fontWeight() {
-        return TextBlockComponent.ToFontWeight(this.FontWeight);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FontIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FontIconComponent, isStandalone: true, selector: "FontIcon", inputs: { FontFamily: "FontFamily", FontSize: "FontSize", FontStyle: "FontStyle", FontWeight: "FontWeight", Glyph: "Glyph" }, host: { properties: { "style.font-family": "this.FontFamily", "style.font-size": "this.FontSize", "style.font-style": "this.FontStyle", "style.font-weight": "this.fontWeight" } }, usesInheritance: true, ngImport: i0, template: `{{Glyph}}`, isInline: true, styles: [":host{font-family:Segoe Fluent Icons,Segoe MDL2 Assets}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FontIconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'FontIcon', template: `{{Glyph}}`, styles: [":host{font-family:Segoe Fluent Icons,Segoe MDL2 Assets}\n"] }]
-        }], propDecorators: { FontFamily: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                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 gridColumnStart() {
+        return this.Grid.Column !== undefined ? this.Grid.Column + 1 : undefined;
     }
     get gridRowStart() {
         return this.Grid.Row !== undefined ? this.Grid.Row + 1 : undefined;
@@ -1532,7 +1328,633 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 }]
         }] });
 
-class ToolTipDirective {
+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: ["ButtonFlyout"], 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: ['ButtonFlyout']
+            }] } });
+
+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}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"] }]
+        }] });
+
+class ListBoxComponent extends SelectorComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ListBoxComponent, isStandalone: true, selector: "ListBox", usesInheritance: true, ngImport: i0, template: "<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\" [ngStyle]=\"{'align-content': alignContent, 'justify-content': justifyContent}\">\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  </div>", isInline: true, styles: [":host{position:relative}:host{display:flex;flex-direction:column;background-color:var(--SystemChromeMediumLowColor)}:host .item{display:grid;padding:12px;margin:0}:host:not(.disabled) .item:not(:hover):not(:active):not(.selected){color:var(--TextFillColorPrimary)}:host:not(.disabled) .item:hover:not(.active):not(.selected){background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:active:not(.selected){background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:not(:hover):not(:active).selected{background-color:var(--SystemControlHighlightListAccentLow)}:host:not(.disabled) .item:hover:not(:active).selected{background-color:var(--SystemControlHighlightListAccentMedium)}:host:not(.disabled) .item:active.selected{background-color:var(--SystemControlHighlightListAccentHigh)}:host.disabled .item:not(.selected){color:var(--TextFillColorDisabled)}:host.disabled .item.selected{background-color:var(--SubtleFillColorSecondary);color:var(--AccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ListBox', imports: [CommonModule], template: `<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" [ngStyle]="{'align-content': alignContent, 'justify-content': justifyContent}">
+    ${SelectorItemTemplate}
+  </div>`, styles: [":host{position:relative}:host{display:flex;flex-direction:column;background-color:var(--SystemChromeMediumLowColor)}:host .item{display:grid;padding:12px;margin:0}:host:not(.disabled) .item:not(:hover):not(:active):not(.selected){color:var(--TextFillColorPrimary)}:host:not(.disabled) .item:hover:not(.active):not(.selected){background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:active:not(.selected){background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:not(:hover):not(:active).selected{background-color:var(--SystemControlHighlightListAccentLow)}:host:not(.disabled) .item:hover:not(:active).selected{background-color:var(--SystemControlHighlightListAccentMedium)}:host:not(.disabled) .item:active.selected{background-color:var(--SystemControlHighlightListAccentHigh)}:host.disabled .item:not(.selected){color:var(--TextFillColorDisabled)}:host.disabled .item.selected{background-color:var(--SubtleFillColorSecondary);color:var(--AccentFillColorDisabled)}\n"] }]
+        }] });
+
+class FlyoutComponent extends PopupComponent {
+    constructor() {
+        super(...arguments);
+        this.Placement = 'Top';
+    }
+    get contentStyle() {
+        let alignSelf;
+        let justifySelf;
+        switch (this.Placement) {
+            case 'Top':
+            case 'Bottom':
+                justifySelf = 'center';
+                break;
+            case 'TopEdgeAlignedLeft':
+            case 'BottomEdgeAlignedLeft':
+                justifySelf = 'left';
+                break;
+            case 'TopEdgeAlignedRight':
+            case 'BottomEdgeAlignedRight':
+                justifySelf = 'right';
+                break;
+            case 'Left':
+            case 'Right':
+                alignSelf = 'center';
+                break;
+            case 'LeftEdgeAlignedTop':
+            case 'RightEdgeAlignedTop':
+                alignSelf = 'flex-start';
+                break;
+            case 'LeftEdgeAlignedBottom':
+            case 'RightEdgeAlignedBottom':
+                alignSelf = 'flex-end';
+                break;
+        }
+        return {
+            'align-self': alignSelf,
+            'justify-self': justifySelf,
+        };
+    }
+    get containerStyle() {
+        let top = '0';
+        let left = '0';
+        let right = '0';
+        let bottom = '0';
+        let transform;
+        function translate(x, y, isOpen) {
+            let result = '';
+            if (x !== 0) {
+                result += `translateX(${x > 0 ? '' : '-'}100%)`;
+                if (!isOpen) {
+                    result += `translateX(${x > 0 ? '-' : ''}10px)`;
+                }
+            }
+            if (y !== 0) {
+                result += `translateY(${y > 0 ? '' : '-'}100%)`;
+                if (!isOpen) {
+                    result += `translateY(${y > 0 ? '-' : ''}10px)`;
+                }
+            }
+            return result;
+        }
+        switch (this.Placement) {
+            case 'Top':
+            case 'TopEdgeAlignedLeft':
+            case 'TopEdgeAlignedRight':
+                bottom = undefined;
+                transform = translate(0, -1, this.IsOpen);
+                break;
+            case 'Bottom':
+            case 'BottomEdgeAlignedLeft':
+            case 'BottomEdgeAlignedRight':
+                top = undefined;
+                transform = translate(0, 1, this.IsOpen);
+                break;
+            case 'Left':
+            case 'LeftEdgeAlignedBottom':
+            case 'LeftEdgeAlignedTop':
+                right = undefined;
+                transform = translate(-1, 0, this.IsOpen);
+                break;
+            case 'Right':
+            case 'RightEdgeAlignedBottom':
+            case 'RightEdgeAlignedTop':
+                left = undefined;
+                transform = translate(1, 0, this.IsOpen);
+                break;
+        }
+        let margin;
+        switch (this.Placement) {
+            case 'Top':
+                margin = '0 -100vw -100vh -100vw';
+                break;
+            case 'TopEdgeAlignedLeft':
+                margin = '0 -100vw -100vh 0';
+                break;
+            case 'TopEdgeAlignedRight':
+                margin = '0 0 -100vh -100vw';
+                break;
+            case 'Bottom':
+                margin = '-100vh -100vw 0 -100vw';
+                break;
+            case 'BottomEdgeAlignedLeft':
+                margin = '0 -100vw 0 0';
+                break;
+            case 'BottomEdgeAlignedRight':
+                margin = '0 0 0 -100vw';
+                break;
+            case 'Left':
+                margin = '-100vh -100vw -100vh 0';
+                break;
+            case 'LeftEdgeAlignedTop':
+                margin = '0 -100vw -100vh 0';
+                break;
+            case 'LeftEdgeAlignedBottom':
+                margin = '-100vh -100vw 0 0';
+                break;
+            case 'Right':
+                margin = '-100vh 0 -100vh -100vw';
+                break;
+            case 'RightEdgeAlignedTop':
+                margin = '0 0 -100vh -100vw';
+                break;
+            case 'RightEdgeAlignedBottom':
+                margin = '-100vh 0 0 -100vw';
+                break;
+        }
+        return {
+            'top': top,
+            'left': left,
+            'right': right,
+            'bottom': bottom,
+            'transform': transform,
+            'margin': margin,
+            'transition': 'transform var(--ControlNormalAnimationDuration)'
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FlyoutComponent, isStandalone: true, selector: "Flyout", inputs: { Placement: "Placement" }, providers: [{ provide: 'xaml-flyout', useExisting: FlyoutComponent }], usesInheritance: true, ngImport: i0, template: `<div class="popup-backdrop" (click)="onBackdropClick($event)" *ngIf="IsOpen"></div>
+    <div class="popup-container" [ngStyle]="containerStyle" [ngClass]="containerClass">
+    <div class="popup-content" [ngStyle]="contentStyle" *ngIf="isRendered"><ng-content/></div>
+  </div>`, isInline: true, styles: [":host{position:relative}:host{position:static}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;pointer-events:none;position:absolute;z-index:1000}.popup-container>.popup-content{display:grid;padding:16px;border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);opacity:0;transition:opacity var(--ControlNormalAnimationDuration);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #00000080;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.flyout-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{z-index:900;position:fixed;inset:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'Flyout', imports: [CommonModule], template: `<div class="popup-backdrop" (click)="onBackdropClick($event)" *ngIf="IsOpen"></div>
+    <div class="popup-container" [ngStyle]="containerStyle" [ngClass]="containerClass">
+    <div class="popup-content" [ngStyle]="contentStyle" *ngIf="isRendered"><ng-content/></div>
+  </div>`, providers: [{ provide: 'xaml-flyout', useExisting: FlyoutComponent }], styles: [":host{position:relative}:host{position:static}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;pointer-events:none;position:absolute;z-index:1000}.popup-container>.popup-content{display:grid;padding:16px;border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);opacity:0;transition:opacity var(--ControlNormalAnimationDuration);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #00000080;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.flyout-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{z-index:900;position:fixed;inset:0}\n"] }]
+        }], propDecorators: { Placement: [{
+                type: Input
+            }] } });
+
+class MenuFlyoutComponent extends FlyoutComponent {
+    onMenuClick(event) {
+        this.IsOpen = false;
+        event.stopPropagation();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MenuFlyoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MenuFlyoutComponent, isStandalone: true, selector: "MenuFlyout", providers: [{ provide: 'xaml-flyout', useExisting: MenuFlyoutComponent }], usesInheritance: true, ngImport: i0, template: `<div class="popup-backdrop" (click)="onBackdropClick($event)" *ngIf="IsOpen"></div>
+    <div class="popup-container" [ngStyle]="containerStyle" [ngClass]="containerClass">
+    <div class="popup-content" [ngStyle]="contentStyle" *ngIf="isRendered">
+      <div class="menu-container" (click)="onMenuClick($event)">
+        <ng-content/>
+      </div>
+    </div>
+  </div>`, isInline: true, styles: [":host{position:relative}:host{position:static}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;pointer-events:none;position:absolute;z-index:1000}.popup-container>.popup-content{display:grid;padding:16px;border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);opacity:0;transition:opacity var(--ControlNormalAnimationDuration);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #00000080;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.flyout-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{z-index:900;position:fixed;inset:0}\n", ".popup-container{left:0;right:0;top:0}.popup-container>.popup-content{padding:2px}.popup-container>.popup-content>.menu-container{margin:-3px 0;display:table;border-spacing:0 3px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MenuFlyoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'MenuFlyout', imports: [CommonModule], template: `<div class="popup-backdrop" (click)="onBackdropClick($event)" *ngIf="IsOpen"></div>
+    <div class="popup-container" [ngStyle]="containerStyle" [ngClass]="containerClass">
+    <div class="popup-content" [ngStyle]="contentStyle" *ngIf="isRendered">
+      <div class="menu-container" (click)="onMenuClick($event)">
+        <ng-content/>
+      </div>
+    </div>
+  </div>`, providers: [{ provide: 'xaml-flyout', useExisting: MenuFlyoutComponent }], styles: [":host{position:relative}:host{position:static}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;pointer-events:none;position:absolute;z-index:1000}.popup-container>.popup-content{display:grid;padding:16px;border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);opacity:0;transition:opacity var(--ControlNormalAnimationDuration);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #00000080;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.flyout-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{z-index:900;position:fixed;inset:0}\n", ".popup-container{left:0;right:0;top:0}.popup-container>.popup-content{padding:2px}.popup-container>.popup-content>.menu-container{margin:-3px 0;display:table;border-spacing:0 3px}\n"] }]
+        }] });
+
+class ContextFlyoutDirective {
+    constructor(_hostComponent, _viewContainer) {
+        this._hostComponent = _hostComponent;
+        this._viewContainer = _viewContainer;
+        this._positionX = 0;
+        this._positionY = 0;
+    }
+    get style() {
+        return {
+            'position': 'fixed',
+            'left': this._positionX + 'px',
+            'top': this._positionY + 'px'
+        };
+    }
+    ngAfterViewInit() {
+        this._flyout = this._viewContainer.injector.get(FlyoutComponent, null) ||
+            this._viewContainer.injector.get(MenuFlyoutComponent, null);
+        if (this._flyout) {
+            this._flyout.Placement = 'BottomEdgeAlignedLeft';
+        }
+        let parentElement = this._hostComponent.nativeElement.parentElement;
+        if (parentElement) {
+            parentElement.oncontextmenu = p => this.onContextMenu(p);
+        }
+    }
+    onContextMenu(event) {
+        if (!this._flyout)
+            return;
+        if (!this._flyout.IsOpen) {
+            this._positionX = event.clientX;
+            this._positionY = event.clientY;
+            this._flyout.IsOpen = true;
+        }
+        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: ContextFlyoutDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: ContextFlyoutDirective, isStandalone: true, selector: "[ContextFlyout]", host: { properties: { "style": "this.style" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ContextFlyoutDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ContextFlyout]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { style: [{
+                type: HostBinding,
+                args: ['style']
+            }] } });
+
+class TextBlockComponent extends FrameworkElementComponent {
+    constructor() {
+        super(...arguments);
+        this.FontWeight = 'Normal';
+        this.TextAlignment = 'Left';
+        this.TextWrapping = 'NoWrap';
+    }
+    get fontWeight() {
+        return TextBlockComponent.ToFontWeight(this.FontWeight);
+    }
+    static ToFontWeight(value) {
+        switch (value) {
+            case 'Black':
+                return 900;
+            case 'Bold':
+                return 700;
+            case 'ExtraBlack':
+                return 950;
+            case 'ExtraBold':
+                return 800;
+            case 'ExtraLight':
+                return 200;
+            case 'Light':
+                return 300;
+            case 'Medium':
+                return 500;
+            case 'Normal':
+                return 400;
+            case 'SemiBold':
+                return 600;
+            case 'SemiLight':
+                return 350;
+            case 'Thin':
+                return 100;
+        }
+    }
+    get userSelect() {
+        return this.IsTextSelectionEnabled === 'True' ? 'text' : 'none';
+    }
+    get textDecorationLine() {
+        switch (this.TextDecorations) {
+            case 'None':
+                return 'none';
+            case 'Strikethrough':
+                return 'line-through';
+            case 'Underline':
+                return 'underline';
+            default:
+                return undefined;
+        }
+    }
+    get textOverflow() {
+        switch (this.TextTrimming) {
+            case 'None':
+            case 'Clip':
+                return 'clip';
+            case 'CharacterEllipsis':
+                return 'Ellipsis';
+            default:
+                return undefined;
+        }
+    }
+    get whiteSpace() {
+        switch (this.TextWrapping) {
+            case 'NoWrap':
+                return 'nowrap';
+            case 'Wrap':
+                return 'normal';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBlockComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TextBlockComponent, isStandalone: true, selector: "TextBlock", inputs: { FontFamily: "FontFamily", Text: "Text", FontSize: "FontSize", FontStyle: "FontStyle", FontWeight: "FontWeight", Foreground: "Foreground", TextAlignment: "TextAlignment", IsTextSelectionEnabled: "IsTextSelectionEnabled", TextDecorations: "TextDecorations", TextTrimming: "TextTrimming", TextWrapping: "TextWrapping" }, host: { properties: { "style.font-family": "this.FontFamily", "style.font-size": "this.FontSize", "style.font-style": "this.FontStyle", "style.color": "this.Foreground", "style.text-align": "this.TextAlignment", "style.font-weight": "this.fontWeight", "style.user-select": "this.userSelect", "style.text-decoration-line": "this.textDecorationLine", "style.text-overflow": "this.textOverflow", "style.white-space": "this.whiteSpace" } }, usesInheritance: true, ngImport: i0, template: `<ng-container>
+    <ng-content *ngIf="Text === undefined"/>
+    <ng-container *ngIf="Text !== undefined">{{Text}}</ng-container>
+  </ng-container>`, isInline: true, 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: TextBlockComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'TextBlock',
+                    imports: [CommonModule],
+                    template: `<ng-container>
+    <ng-content *ngIf="Text === undefined"/>
+    <ng-container *ngIf="Text !== undefined">{{Text}}</ng-container>
+  </ng-container>`
+                }]
+        }], propDecorators: { FontFamily: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.font-family']
+            }], Text: [{
+                type: Input
+            }], FontSize: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.font-size']
+            }], FontStyle: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.font-style']
+            }], FontWeight: [{
+                type: Input
+            }], Foreground: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.color']
+            }], TextAlignment: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.text-align']
+            }], IsTextSelectionEnabled: [{
+                type: Input
+            }], TextDecorations: [{
+                type: Input
+            }], TextTrimming: [{
+                type: Input
+            }], TextWrapping: [{
+                type: Input
+            }], fontWeight: [{
+                type: HostBinding,
+                args: ['style.font-weight']
+            }], userSelect: [{
+                type: HostBinding,
+                args: ['style.user-select']
+            }], textDecorationLine: [{
+                type: HostBinding,
+                args: ['style.text-decoration-line']
+            }], textOverflow: [{
+                type: HostBinding,
+                args: ['style.text-overflow']
+            }], whiteSpace: [{
+                type: HostBinding,
+                args: ['style.white-space']
+            }] } });
+
+class FontIconComponent extends FrameworkElementComponent {
+    constructor() {
+        super(...arguments);
+        this.FontWeight = 'Normal';
+    }
+    get fontWeight() {
+        return TextBlockComponent.ToFontWeight(this.FontWeight);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FontIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FontIconComponent, isStandalone: true, selector: "FontIcon", inputs: { FontFamily: "FontFamily", FontSize: "FontSize", FontStyle: "FontStyle", FontWeight: "FontWeight", Glyph: "Glyph" }, host: { properties: { "style.font-family": "this.FontFamily", "style.font-size": "this.FontSize", "style.font-style": "this.FontStyle", "style.font-weight": "this.fontWeight" } }, usesInheritance: true, ngImport: i0, template: `{{Glyph}}`, isInline: true, styles: [":host{font-family:Segoe Fluent Icons,Segoe MDL2 Assets}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FontIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'FontIcon', template: `{{Glyph}}`, styles: [":host{font-family:Segoe Fluent Icons,Segoe MDL2 Assets}\n"] }]
+        }], propDecorators: { FontFamily: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                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 ImageComponent extends FrameworkElementComponent {
+    constructor() {
+        super(...arguments);
+        this.Stretch = 'Uniform';
+    }
+    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: 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: 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 AppBarButtonComponent extends FrameworkElementComponent {
+    constructor() {
+        super(...arguments);
+        this.IsEnabled = true;
+        this.Click = new EventEmitter();
+    }
+    get disabled() {
+        return !this.IsEnabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AppBarButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: AppBarButtonComponent, isStandalone: true, selector: "AppBarButton", inputs: { IsEnabled: "IsEnabled", Text: "Text", Icon: "Icon" }, outputs: { Click: "Click" }, host: { properties: { "class.disabled": "this.disabled" } }, usesInheritance: true, ngImport: i0, template: `<div class="icon">{{Icon}}</div><div class="text">{{Text}}</div>`, isInline: true, styles: [":host{position:relative}:host{display:flex;flex-direction:row;align-items:center;transition:background-color var(--ControlNormalAnimationDuration);border-radius:var(--ControlCornerRadius);gap:4px;padding:6px;background-color:var(--SubtleFillColorTransparent)}:host *{color:var(--TextFillColorPrimary)}:host:hover{background-color:var(--SubtleFillColorSecondary)}:host:hover *{color:var(--TextFillColorPrimary)}:host:active{background-color:var(--SubtleFillColorTertiary)}:host:active *{color:var(--TextFillColorSecondary)}:host.disabled{background-color:var(--SubtleFillColorDisabled)}:host.disabled *{color:var(--TextFillColorDisabled)}:host .icon{font-family:var(--SymbolFontFamily)}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AppBarButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'AppBarButton', template: `<div class="icon">{{Icon}}</div><div class="text">{{Text}}</div>`, styles: [":host{position:relative}:host{display:flex;flex-direction:row;align-items:center;transition:background-color var(--ControlNormalAnimationDuration);border-radius:var(--ControlCornerRadius);gap:4px;padding:6px;background-color:var(--SubtleFillColorTransparent)}:host *{color:var(--TextFillColorPrimary)}:host:hover{background-color:var(--SubtleFillColorSecondary)}:host:hover *{color:var(--TextFillColorPrimary)}:host:active{background-color:var(--SubtleFillColorTertiary)}:host:active *{color:var(--TextFillColorSecondary)}:host.disabled{background-color:var(--SubtleFillColorDisabled)}:host.disabled *{color:var(--TextFillColorDisabled)}:host .icon{font-family:var(--SymbolFontFamily)}\n"] }]
+        }], propDecorators: { IsEnabled: [{
+                type: Input
+            }], Text: [{
+                type: Input
+            }], Icon: [{
+                type: Input
+            }], Click: [{
+                type: Output
+            }], disabled: [{
+                type: HostBinding,
+                args: ['class.disabled']
+            }] } });
+
+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();
+    }
+    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}.submenu-indicator{display:table-cell;padding:3px 6px;border-radius:0 var(--ControlCornerRadius) var(--ControlCornerRadius) 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MenuFlyoutItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'MenuFlyoutItem', imports: [CommonModule], template: `<div class="icon">{{Icon}}</div>
+  <div class="text">{{Text}}</div>
+  <div class="submenu-indicator"></div>`, styles: [":host{position:relative}:host{display:table-row}:host:hover:not(.disabled)>*{background-color:var(--SubtleFillColorSecondary)}:host.disabled>*{color:var(--TextFillColorDisabled)}.icon{display:table-cell;padding:3px 6px;border-radius:var(--ControlCornerRadius) 0 0 var(--ControlCornerRadius);font-family:var(--SymbolFontFamily)}.text{display:table-cell;padding:3px;margin:6px 0}.submenu-indicator{display:table-cell;padding:3px 6px;border-radius:0 var(--ControlCornerRadius) var(--ControlCornerRadius) 0}\n"] }]
+        }], propDecorators: { IsEnabled: [{
+                type: Input
+            }], Text: [{
+                type: Input
+            }], Icon: [{
+                type: Input
+            }], Click: [{
+                type: Output
+            }], disabled: [{
+                type: HostBinding,
+                args: ['class.disabled']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', []]
+            }] } });
+
+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: 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 {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToolTipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: ToolTipDirective, isStandalone: false, selector: "[ToolTipService-ToolTip]", inputs: { ToolTip: ["ToolTipService-ToolTip", "ToolTip"] }, host: { properties: { "attr.title": "this.ToolTip" } }, ngImport: i0 }); }
 }
@@ -1562,6 +1984,144 @@ 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.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;
+    }
+    onBlur() {
+        this.updateText();
+        this._input.nativeElement.value = this._text;
+    }
+    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;
+        }
+    }
+    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", TextAlignment: "TextAlignment", InputMode: "InputMode", Minimum: "Minimum", Maximum: "Maximum", SmallChange: "SmallChange", LargeChange: "LargeChange", NumberFormatter: "NumberFormatter", Value: "Value" }, outputs: { ValueChange: "ValueChange" }, host: { listeners: { "contextmenu": "onContextMenu($event)" } }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<label>
+    <input #input type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}" (blur)="onBlur()" (keydown)="onKeyDown($event)"/>
+    <div class="popup">
+      <RepeatButton Class="InlineButtonStyle" (Click)="onIncreaseClick()" [Delay]="500" [Interval]="50"><FontIcon Glyph="&#xE70E;"/></RepeatButton>
+      <RepeatButton Class="InlineButtonStyle" (Click)="onDecreaseClick()" [Delay]="500" [Interval]="50"><FontIcon Glyph="&#xE70D;"/></RepeatButton>
+    </div>
+    <div class="icon">&#xEC8F;</div>
+  </label>`, isInline: true, styles: [":host{position:relative}:host{display:grid}textarea{resize:none}input,textarea{outline-style:none;border-style:solid;border-width:1px;border-radius:var(--ControlCornerRadius);padding:6px;background-color:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);border-bottom-color:var(--ControlStrongStrokeColorDefault);color:var(--TextFillColorPrimary)}input::placeholder,textarea::placeholder{color:var(--TextFillColorSecondary);opacity:1}input:hover,textarea:hover{background-color:var(--ControlFillColorSecondary)}input:focus,input:active,textarea:focus,textarea:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}input:disabled,textarea:disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor);color:var(--TextOnAccentFillColorPrimary)}\n", "label{display:grid;position:relative}input{grid-column-start:1;grid-row-start:1;padding-left:24px}.icon{grid-column-start:1;grid-row-start:1;align-self:center;justify-self:left;font-family:var(--SymbolFontFamily);margin-left:6px;color:var(--TextFillColorSecondary)}.popup{position:absolute;display:none;flex-direction:column;justify-content:center;left:0;top:50%;transform:translateY(-50%);border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #0000001a;gap:3px;padding:3px;z-index:1000}.popup .InlineButtonStyle{padding:5px}input:focus+.popup,input:active+.popup{display:flex}\n"], dependencies: [{ kind: "component", type: RepeatButtonComponent, selector: "RepeatButton", inputs: ["Delay", "Interval"] }, { kind: "component", type: FontIconComponent, selector: "FontIcon", inputs: ["FontFamily", "FontSize", "FontStyle", "FontWeight", "Glyph"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NumberBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'NumberBox', template: `<label>
+    <input #input type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}" (blur)="onBlur()" (keydown)="onKeyDown($event)"/>
+    <div class="popup">
+      <RepeatButton Class="InlineButtonStyle" (Click)="onIncreaseClick()" [Delay]="500" [Interval]="50"><FontIcon Glyph="&#xE70E;"/></RepeatButton>
+      <RepeatButton Class="InlineButtonStyle" (Click)="onDecreaseClick()" [Delay]="500" [Interval]="50"><FontIcon Glyph="&#xE70D;"/></RepeatButton>
+    </div>
+    <div class="icon">&#xEC8F;</div>
+  </label>`, imports: [RepeatButtonComponent, FontIconComponent], styles: [":host{position:relative}:host{display:grid}textarea{resize:none}input,textarea{outline-style:none;border-style:solid;border-width:1px;border-radius:var(--ControlCornerRadius);padding:6px;background-color:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);border-bottom-color:var(--ControlStrongStrokeColorDefault);color:var(--TextFillColorPrimary)}input::placeholder,textarea::placeholder{color:var(--TextFillColorSecondary);opacity:1}input:hover,textarea:hover{background-color:var(--ControlFillColorSecondary)}input:focus,input:active,textarea:focus,textarea:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}input:disabled,textarea:disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor);color:var(--TextOnAccentFillColorPrimary)}\n", "label{display:grid;position:relative}input{grid-column-start:1;grid-row-start:1;padding-left:24px}.icon{grid-column-start:1;grid-row-start:1;align-self:center;justify-self:left;font-family:var(--SymbolFontFamily);margin-left:6px;color:var(--TextFillColorSecondary)}.popup{position:absolute;display:none;flex-direction:column;justify-content:center;left:0;top:50%;transform:translateY(-50%);border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #0000001a;gap:3px;padding:3px;z-index:1000}.popup .InlineButtonStyle{padding:5px}input:focus+.popup,input:active+.popup{display:flex}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { IsEnabled: [{
+                type: Input
+            }], PlaceholderText: [{
+                type: Input
+            }], TextAlignment: [{
+                type: Input
+            }], InputMode: [{
+                type: Input
+            }], Minimum: [{
+                type: Input
+            }], Maximum: [{
+                type: Input
+            }], SmallChange: [{
+                type: Input
+            }], LargeChange: [{
+                type: Input
+            }], NumberFormatter: [{
+                type: Input
+            }], ValueChange: [{
+                type: Output
+            }], _input: [{
+                type: ViewChild,
+                args: ['input']
+            }], Value: [{
+                type: Input
+            }], onContextMenu: [{
+                type: HostListener,
+                args: ['contextmenu', ['$event']]
+            }] } });
+
 class TextBoxComponent extends FrameworkElementComponent {
     constructor() {
         super(...arguments);
@@ -1636,5 +2196,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, FlyoutComponent, FontIconComponent, FrameworkElementComponent, GridColumnDirective, GridColumnSpanDirective, GridComponent, GridDirective, GridModule, GridProperty, GridRowDirective, GridRowSpanDirective, ImageComponent, ListBoxComponent, ListViewComponent, MenuFlyoutComponent, MenuFlyoutItemBase, MenuFlyoutItemComponent, MenuFlyoutSeparator, NumberBoxComponent, PanelComponent, PopupComponent, RadioButtonComponent, RadioButtonGroup, RepeatButtonComponent, ScrollBarComponent, ScrollViewerComponent, SelectorComponent, SelectorItemTemplate, SliderComponent, SplitButtonComponent, StackPanelComponent, TextBlockComponent, TextBoxComponent, ToggleButtonComponent, ToggleSwitchComponent, ToolTipDirective, ToolTipServiceModule, XamlRootComponent, colorToRgb, colorToString, rgbToHsl, stringToColor, toAlignment, toJustification };
 //# sourceMappingURL=xaml-ui.mjs.map