xaml-ui 1.0.1 → 1.0.4

package/fesm2022/xaml-ui.mjs

@@ -1,35 +1,51 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Input, Component, HostListener, ContentChildren, EventEmitter, Output, TemplateRef, ContentChild, Directive, NgModule } from '@angular/core';
+import { HostBinding, Input, Component, EventEmitter, HostListener, ContentChild, Output, TemplateRef, ViewChild, Optional, Directive, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
-class FrameworkElement {
+function toJustification(value) {
+    return value.toLowerCase();
+}
+function toAlignment(value) {
+    switch (value) {
+        case 'Top':
+            return 'flex-start';
+        case 'Center':
+            return 'center';
+        case 'Bottom':
+            return 'flex-end';
+        case 'Stretch':
+            return 'stretch';
+    }
+}
+
+class FrameworkElementComponent {
     constructor() {
         this.HorizontalAlignment = 'Stretch';
         this.VerticalAlignment = 'Stretch';
+        this._id = FrameworkElementComponent._nextId++;
+    }
+    get width() {
+        if (this.Width !== undefined)
+            return this.Width;
+        return this.HorizontalAlignment === 'Stretch' ? undefined : 'min-content';
+    }
+    get height() {
+        if (this.Height !== undefined)
+            return this.Height;
+        return this.VerticalAlignment === 'Stretch' ? undefined : 'min-content';
     }
     get justifySelf() {
-        return this.HorizontalAlignment.toLowerCase();
+        return toJustification(this.HorizontalAlignment);
     }
     get alignSelf() {
-        switch (this.VerticalAlignment) {
-            case 'Top':
-                return 'flex-start';
-            case 'Center':
-                return 'center';
-            case 'Bottom':
-                return 'flex-end';
-            case 'Stretch':
-                return 'stretch';
-        }
-    }
-    get overflow() {
-        return 'clip';
+        return toAlignment(this.VerticalAlignment);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FrameworkElement, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FrameworkElement, isStandalone: true, selector: "FrameworkElement", inputs: { Width: "Width", Height: "Height", HorizontalAlignment: "HorizontalAlignment", VerticalAlignment: "VerticalAlignment", Margin: "Margin", Padding: "Padding" }, host: { properties: { "style.width": "this.Width", "style.height": "this.Height", "style.margin": "this.Margin", "style.padding": "this.Padding", "style.justify-self": "this.justifySelf", "style.align-self": "this.alignSelf", "style.overflow": "this.overflow" } }, ngImport: i0, template: `<ng-container/>`, isInline: true }); }
+    static { this._nextId = 1; }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FrameworkElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FrameworkElementComponent, isStandalone: true, selector: "FrameworkElement", inputs: { Width: "Width", MinWidth: "MinWidth", MaxWidth: "MaxWidth", Height: "Height", MinHeight: "MinHeight", MaxHeight: "MaxHeight", HorizontalAlignment: "HorizontalAlignment", VerticalAlignment: "VerticalAlignment", Margin: "Margin", Padding: "Padding" }, host: { properties: { "style.min-width": "this.MinWidth", "style.max-width": "this.MaxWidth", "style.min-height": "this.MinHeight", "style.max-height": "this.MaxHeight", "style.margin": "this.Margin", "style.padding": "this.Padding", "style.width": "this.width", "style.height": "this.height", "style.justify-self": "this.justifySelf", "style.align-self": "this.alignSelf" } }, ngImport: i0, template: `<ng-container/>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FrameworkElement, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FrameworkElementComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'FrameworkElement',
@@ -37,14 +53,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 }]
         }], propDecorators: { Width: [{
                 type: Input
+            }], MinWidth: [{
+                type: Input
             }, {
                 type: HostBinding,
-                args: ['style.width']
+                args: ['style.min-width']
+            }], MaxWidth: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.max-width']
             }], Height: [{
                 type: Input
+            }], MinHeight: [{
+                type: Input
             }, {
                 type: HostBinding,
-                args: ['style.height']
+                args: ['style.min-height']
+            }], MaxHeight: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.max-height']
             }], HorizontalAlignment: [{
                 type: Input
             }], VerticalAlignment: [{
@@ -59,583 +89,767 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }, {
                 type: HostBinding,
                 args: ['style.padding']
+            }], width: [{
+                type: HostBinding,
+                args: ['style.width']
+            }], height: [{
+                type: HostBinding,
+                args: ['style.height']
             }], justifySelf: [{
                 type: HostBinding,
                 args: ['style.justify-self']
             }], alignSelf: [{
                 type: HostBinding,
                 args: ['style.align-self']
-            }], overflow: [{
-                type: HostBinding,
-                args: ['style.overflow']
             }] } });
 
-class TextBlock extends FrameworkElement {
-    constructor() {
-        super(...arguments);
-        this.FontWeight = 'Normal';
-        this.TextAlignment = 'Left';
-        this.TextWrapping = 'NoWrap';
-    }
-    get fontWeight() {
-        return TextBlock.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';
-        }
+class PanelComponent extends FrameworkElementComponent {
+    get borderStyle() {
+        return this.BorderThickness !== undefined ? 'solid' : undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBlock, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TextBlock, 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: PanelComponent, isStandalone: true, selector: "Border", inputs: { Background: "Background", CornerRadius: "CornerRadius", BorderThickness: "BorderThickness", BorderBrush: "BorderBrush" }, host: { properties: { "style.background": "this.Background", "style.border-radius": "this.CornerRadius", "style.border-width": "this.BorderThickness", "style.border-color": "this.BorderBrush", "style.border-style": "this.borderStyle" } }, 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: TextBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PanelComponent, 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: [{
+            args: [{ selector: 'Border', template: `<ng-content/>`, styles: [":host{display:grid;position:relative}\n"] }]
+        }], propDecorators: { Background: [{
                 type: Input
             }, {
                 type: HostBinding,
-                args: ['style.font-size']
-            }], FontStyle: [{
+                args: ['style.background']
+            }], CornerRadius: [{
                 type: Input
             }, {
                 type: HostBinding,
-                args: ['style.font-style']
-            }], FontWeight: [{
-                type: Input
-            }], Foreground: [{
+                args: ['style.border-radius']
+            }], BorderThickness: [{
                 type: Input
             }, {
                 type: HostBinding,
-                args: ['style.color']
-            }], TextAlignment: [{
+                args: ['style.border-width']
+            }], BorderBrush: [{
                 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: [{
+                args: ['style.border-color']
+            }], borderStyle: [{
                 type: HostBinding,
-                args: ['style.white-space']
+                args: ['style.border-style']
             }] } });
 
-class FontIcon extends FrameworkElement {
+class BorderComponent extends PanelComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BorderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: BorderComponent, isStandalone: true, selector: "Border", usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;position:relative}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BorderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'Border', template: `<ng-content/>`, styles: [":host{display:grid;position:relative}\n"] }]
+        }] });
+
+class ButtonComponent extends BorderComponent {
     constructor() {
         super(...arguments);
-        this.FontWeight = 'Normal';
+        this.IsEnabled = true;
+        this.Click = new EventEmitter();
+        this.HorizontalContentAlignment = 'Center';
+        this.VerticalContentAlignment = 'Center';
+        this.type = 'button';
     }
-    get fontWeight() {
-        return TextBlock.ToFontWeight(this.FontWeight);
+    get alignContent() {
+        return toAlignment(this.VerticalContentAlignment);
+    }
+    get justifyContent() {
+        return toJustification(this.HorizontalContentAlignment);
+    }
+    get disabled() {
+        return this.IsEnabled ? undefined : true;
+    }
+    get flyoutOpen() {
+        return this._popup?.IsOpen;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FontIcon, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FontIcon, 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"] }); }
+    onHostPointerEvent(event) {
+        if (!this.IsEnabled)
+            return;
+        this.Click.emit();
+        this._popup?.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"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FontIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'FontIcon', template: `{{Glyph}}`, styles: [":host{font-family:Segoe Fluent Icons,Segoe MDL2 Assets}\n"] }]
-        }], propDecorators: { FontFamily: [{
+            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"] }]
+        }], propDecorators: { IsEnabled: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.font-family']
-            }], FontSize: [{
+            }], Click: [{
+                type: Output
+            }], HorizontalContentAlignment: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.font-size']
-            }], FontStyle: [{
+            }], VerticalContentAlignment: [{
                 type: Input
+            }], alignContent: [{
+                type: HostBinding,
+                args: ['style.align-content']
+            }], justifyContent: [{
+                type: HostBinding,
+                args: ['style.justify-content']
+            }], type: [{
+                type: HostBinding,
+                args: ['attr.type']
+            }], disabled: [{
+                type: HostBinding,
+                args: ['attr.disabled']
             }, {
                 type: HostBinding,
-                args: ['style.font-style']
-            }], FontWeight: [{
-                type: Input
-            }], Glyph: [{
-                type: Input
-            }], fontWeight: [{
+                args: ['class.disabled']
+            }], flyoutOpen: [{
                 type: HostBinding,
-                args: ['style.font-weight']
+                args: ['class.popup-open']
+            }], _popup: [{
+                type: ContentChild,
+                args: ['ButtonFlyout']
+            }], onHostPointerEvent: [{
+                type: HostListener,
+                args: ['click', ['$event']]
             }] } });
 
-class Border extends FrameworkElement {
-    get borderStyle() {
-        return this.BorderThickness !== undefined ? 'solid' : undefined;
+class CheckBoxComponent extends BorderComponent {
+    constructor() {
+        super(...arguments);
+        this.IsEnabled = true;
+        this.IsChecked = false;
+        this.IsCheckedChange = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Border, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: Border, isStandalone: true, selector: "Border", inputs: { Background: "Background", CornerRadius: "CornerRadius", BorderThickness: "BorderThickness", BorderBrush: "BorderBrush" }, host: { properties: { "style.background": "this.Background", "style.border-radius": "this.CornerRadius", "style.border-width": "this.BorderThickness", "style.border-color": "this.BorderBrush", "style.border-style": "this.borderStyle" } }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    onChange(event) {
+        this.IsChecked = (event.target).checked;
+        this.IsCheckedChange.emit(this.IsChecked);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CheckBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: CheckBoxComponent, isStandalone: true, selector: "CheckBox", inputs: { IsEnabled: "IsEnabled", IsChecked: "IsChecked" }, outputs: { IsCheckedChange: "IsCheckedChange" }, usesInheritance: true, ngImport: i0, template: `<label class="container">
+    <input type="checkbox" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
+    <div class="checkBox">
+      <div class="checkMark">&#xE73E;</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[type=checkbox]:checked+.checkBox>.checkMark{display:grid;color:var(--TextOnAccentFillColorPrimary);animation:fade-in-animation var(--ControlNormalAnimationDuration) ease-out forwards}@keyframes fade-in-animation{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}input[type=checkbox]:not(:checked):not(:hover):not(:active):not(:disabled)+.checkBox{background-color:var(--ControlAltFillColorSecondary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=checkbox]:not(:checked):hover:not(:active):not(:disabled)+.checkBox{background-color:var(--ControlAltFillColorTertiary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=checkbox]:not(:checked):active+.checkBox{background-color:var(--SubtleFillColorTransparent);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=checkbox]:checked:not(:hover):not(:disabled)+.checkBox{background-color:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault)}input[type=checkbox]:checked:hover:not(:disabled)+.checkBox{background-color:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary)}input[type=checkbox]:checked:active:not(:disabled)+.checkBox{background-color:var(--AccentFillColorTertiary);border-color:var(--AccentFillColorTertiary)}input[type=checkbox]:checked:active:not(:disabled)+.checkBox>.checkMark{color:var(--TextOnAccentFillColorSecondary)}input[type=checkbox]:not(:checked):disabled+.checkBox{background-color:var(--ControlAltFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=checkbox]:checked:disabled+.checkBox{background-color:var(--AccentFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=checkbox]:checked:disabled+.checkBox>.checkMark{color:var(--TextOnAccentFillColorDisabled)}.checkBox{display:grid;width:20px;height:20px;border-radius:var(--ControlCornerRadius);border-style:solid;border-width:var(--ControlBorderThickness)}.checkMark{display:none;font-family:var(--SymbolFontFamily);font-size:12pt;align-self:center;justify-self:center;color:var(--TextOnAccentFillColorPrimary)}@media (prefers-color-scheme: dark){.checkMark{color:var(--TextOnAccentFillColorPrimaryDark)}}.content{align-self:center}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Border, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CheckBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'Border', imports: [CommonModule], template: `<ng-content/>`, styles: [":host{display:grid}\n"] }]
-        }], propDecorators: { Background: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.background']
-            }], CornerRadius: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.border-radius']
-            }], BorderThickness: [{
+            args: [{ selector: 'CheckBox', template: `<label class="container">
+    <input type="checkbox" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
+    <div class="checkBox">
+      <div class="checkMark">&#xE73E;</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[type=checkbox]:checked+.checkBox>.checkMark{display:grid;color:var(--TextOnAccentFillColorPrimary);animation:fade-in-animation var(--ControlNormalAnimationDuration) ease-out forwards}@keyframes fade-in-animation{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}input[type=checkbox]:not(:checked):not(:hover):not(:active):not(:disabled)+.checkBox{background-color:var(--ControlAltFillColorSecondary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=checkbox]:not(:checked):hover:not(:active):not(:disabled)+.checkBox{background-color:var(--ControlAltFillColorTertiary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=checkbox]:not(:checked):active+.checkBox{background-color:var(--SubtleFillColorTransparent);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=checkbox]:checked:not(:hover):not(:disabled)+.checkBox{background-color:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault)}input[type=checkbox]:checked:hover:not(:disabled)+.checkBox{background-color:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary)}input[type=checkbox]:checked:active:not(:disabled)+.checkBox{background-color:var(--AccentFillColorTertiary);border-color:var(--AccentFillColorTertiary)}input[type=checkbox]:checked:active:not(:disabled)+.checkBox>.checkMark{color:var(--TextOnAccentFillColorSecondary)}input[type=checkbox]:not(:checked):disabled+.checkBox{background-color:var(--ControlAltFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=checkbox]:checked:disabled+.checkBox{background-color:var(--AccentFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=checkbox]:checked:disabled+.checkBox>.checkMark{color:var(--TextOnAccentFillColorDisabled)}.checkBox{display:grid;width:20px;height:20px;border-radius:var(--ControlCornerRadius);border-style:solid;border-width:var(--ControlBorderThickness)}.checkMark{display:none;font-family:var(--SymbolFontFamily);font-size:12pt;align-self:center;justify-self:center;color:var(--TextOnAccentFillColorPrimary)}@media (prefers-color-scheme: dark){.checkMark{color:var(--TextOnAccentFillColorPrimaryDark)}}.content{align-self:center}\n"] }]
+        }], propDecorators: { IsEnabled: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.border-width']
-            }], BorderBrush: [{
+            }], IsChecked: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.border-color']
-            }], borderStyle: [{
-                type: HostBinding,
-                args: ['style.border-style']
+            }], IsCheckedChange: [{
+                type: Output
             }] } });
 
-class Flyout {
+const SelectorItemTemplate = `<ng-container *ngIf="ItemTemplate">
+    <ng-container *ngTemplateOutlet="ItemTemplate; context: { $implicit: item }"/>
+  </ng-container>
+  <ng-container *ngIf="!ItemTemplate">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container>`;
+class SelectorComponent extends FrameworkElementComponent {
     constructor() {
-        this.PlacementMode = 'Top';
-        this.Id = 'xaml-flyout-' + Flyout._nextId++;
-        this._popover = '';
+        super(...arguments);
+        this.IsEnabled = true;
+        this.HorizontalContentAlignment = 'Left';
+        this.VerticalContentAlignment = 'Center';
+        //ItemSource
+        this._itemSource = [];
+        //Selected index
+        this._selectedIndex = -1;
+        this.SelectedIndexChange = new EventEmitter();
+        this.SelectedValueChange = new EventEmitter();
+        this.SelectedItemChange = new EventEmitter();
     }
-    static { this._nextId = 1; }
-    get styles() {
-        let anchor = `--${this.Id}-host`;
-        let top;
-        let left;
-        let right;
-        let bottom;
-        let alignSelf;
-        let justifySelf;
-        let margin;
-        switch (this.PlacementMode) {
-            case 'Top':
-            case 'TopEdgeAlignedLeft':
-            case 'TopEdgeAlignedRight':
-                bottom = `anchor(${anchor} top)`;
-                left = `anchor(${anchor} left)`;
-                right = `anchor(${anchor} right)`;
-                alignSelf = 'flex-end';
-                break;
-            case 'Bottom':
-            case 'BottomEdgeAlignedLeft':
-            case 'BottomEdgeAlignedRight':
-                top = `anchor(${anchor} bottom)`;
-                left = `anchor(${anchor} left)`;
-                right = `anchor(${anchor} right)`;
-                alignSelf = 'flex-start';
-                break;
-            case 'Left':
-            case 'LeftEdgeAlignedBottom':
-            case 'LeftEdgeAlignedTop':
-                right = `anchor(${anchor} left)`;
-                top = `anchor(${anchor} top)`;
-                bottom = `anchor(${anchor} bottom)`;
-                justifySelf = 'right';
-                break;
-            case 'Right':
-            case 'RightEdgeAlignedBottom':
-            case 'RightEdgeAlignedTop':
-                left = `anchor(${anchor} right)`;
-                top = `anchor(${anchor} top)`;
-                bottom = `anchor(${anchor} bottom)`;
-                justifySelf = 'left';
-                break;
-        }
-        switch (this.PlacementMode) {
-            case 'Top':
-            case 'Bottom':
-                justifySelf = 'center';
-                margin = '0 -100% 0 -100%';
-                break;
-            case 'TopEdgeAlignedLeft':
-            case 'BottomEdgeAlignedLeft':
-                justifySelf = 'left';
-                margin = '0 -100% 0 0';
-                break;
-            case 'TopEdgeAlignedRight':
-            case 'BottomEdgeAlignedRight':
-                justifySelf = 'right';
-                margin = '0 0 0 -100%';
-                break;
-            case 'Left':
-            case 'Right':
-                alignSelf = 'center';
-                margin = '-100% 0 -100% 0';
-                break;
-            case 'LeftEdgeAlignedTop':
-            case 'RightEdgeAlignedTop':
-                alignSelf = 'flex-start';
-                break;
-            case 'LeftEdgeAlignedBottom':
-            case 'RightEdgeAlignedBottom':
-                alignSelf = 'flex-end';
-                break;
-        }
-        return {
-            'position-anchor': anchor,
-            'top': top,
-            'left': left,
-            'right': right,
-            'bottom': bottom,
-            'align-self': alignSelf,
-            'justify-self': justifySelf,
-            'margin': margin
-        };
+    get alignContent() {
+        return toAlignment(this.VerticalContentAlignment);
     }
-    get class() {
-        switch (this.PlacementMode) {
-            case 'Top':
-            case 'TopEdgeAlignedLeft':
-            case 'TopEdgeAlignedRight':
-                return "roll-up";
-            case 'Bottom':
-            case 'BottomEdgeAlignedLeft':
-            case 'BottomEdgeAlignedRight':
-                return "roll-down";
-            case 'Left':
-            case 'LeftEdgeAlignedBottom':
-            case 'LeftEdgeAlignedTop':
-                return "roll-left";
-            case 'Right':
-            case 'RightEdgeAlignedBottom':
-            case 'RightEdgeAlignedTop':
-                return "roll-right";
-        }
+    get justifyContent() {
+        return toJustification(this.HorizontalContentAlignment);
+    }
+    get disabled() {
+        return !this.IsEnabled;
+    }
+    get ItemSource() {
+        return this._itemSource;
+    }
+    set ItemSource(value) {
+        this._itemSource = value;
+        this.SelectedIndex = this.SelectedIndex;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Flyout, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: Flyout, isStandalone: true, selector: "Flyout", inputs: { PlacementMode: "PlacementMode" }, host: { properties: { "attr.id": "this.Id", "attr.popover": "this._popover", "style": "this.styles", "class": "this.class" } }, ngImport: i0, template: `<div class="content"><ng-content/></div>`, isInline: true, styles: [":host{background-color:transparent;display:grid;padding:0;margin:0;border:0;overflow:hidden;pointer-events:none}:host>.content{display:grid;padding:16px;border-width:1px;border-style:solid;border-radius:8px;opacity:0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .25s,opacity .25s;border-color:#0000000f;background-color:#fcfcfc26}@media (prefers-color-scheme: dark){:host>.content{border-color:#0003;background-color:#2c2c2c26}}:host.roll-up>.content{transform:translateY(25%)}:host.roll-down>.content{transform:translateY(-25%)}:host.roll-left>.content{transform:translate(25%)}:host.roll-right>.content{transform:translate(-25%)}:host:popover-open{pointer-events:all}:host:popover-open>.content{transform:translate(0);opacity:1}\n"] }); }
+    get SelectedIndex() {
+        return this._selectedIndex;
+    }
+    set SelectedIndex(value) {
+        if (value < 0 && this.ItemSource.length > 0)
+            value = 0;
+        if (value >= this.ItemSource.length)
+            value = this.ItemSource.length - 1;
+        if (value == this._selectedIndex)
+            return;
+        this._selectedIndex = value;
+        this.SelectedIndexChange.emit(this.SelectedIndex);
+        this.SelectedValueChange.emit(this.SelectedValue);
+        this.SelectedItemChange.emit(this.SelectedItem);
+    }
+    //Selected value
+    get SelectedValue() {
+        if (this.SelectedIndex < 0 || this.SelectedIndex >= this.ItemSource.length)
+            return null;
+        return this.getValue(-1, this.ItemSource[this.SelectedIndex]);
+    }
+    set SelectedValue(value) {
+        this.SelectedIndex = this.ItemSource.findIndex(p => this.getValue(-1, p) == value);
+    }
+    //Selected item
+    get SelectedItem() {
+        if (this.SelectedIndex < 0 || this.SelectedIndex >= this.ItemSource.length)
+            return null;
+        return this.ItemSource[this.SelectedIndex];
+    }
+    set SelectedItem(value) {
+        this.SelectedIndex = this.ItemSource.findIndex(value);
+    }
+    getValue(index, item) {
+        return this.SelectedValuePath ? item[this.SelectedValuePath] : item;
+    }
+    onItemClick(event, index, item) {
+        if (this.SelectedIndex === index || !this.IsEnabled)
+            return;
+        this.SelectedIndex = index;
+        event.stopPropagation();
+    }
+    GetElement(index) {
+        return document.querySelector(`#xaml-selector-${this._id}-item-${index}`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: SelectorComponent, isStandalone: true, selector: "Selector", inputs: { IsEnabled: "IsEnabled", HorizontalContentAlignment: "HorizontalContentAlignment", VerticalContentAlignment: "VerticalContentAlignment", ItemSource: "ItemSource", SelectedIndex: "SelectedIndex", SelectedValue: "SelectedValue", SelectedItem: "SelectedItem", DisplayMemberPath: "DisplayMemberPath", SelectedValuePath: "SelectedValuePath" }, outputs: { SelectedIndexChange: "SelectedIndexChange", SelectedValueChange: "SelectedValueChange", SelectedItemChange: "SelectedItemChange" }, host: { properties: { "class.disabled": "this.disabled" } }, queries: [{ propertyName: "ItemTemplate", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Flyout, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'Flyout', template: `<div class="content"><ng-content/></div>`, styles: [":host{background-color:transparent;display:grid;padding:0;margin:0;border:0;overflow:hidden;pointer-events:none}:host>.content{display:grid;padding:16px;border-width:1px;border-style:solid;border-radius:8px;opacity:0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .25s,opacity .25s;border-color:#0000000f;background-color:#fcfcfc26}@media (prefers-color-scheme: dark){:host>.content{border-color:#0003;background-color:#2c2c2c26}}:host.roll-up>.content{transform:translateY(25%)}:host.roll-down>.content{transform:translateY(-25%)}:host.roll-left>.content{transform:translate(25%)}:host.roll-right>.content{transform:translate(-25%)}:host:popover-open{pointer-events:all}:host:popover-open>.content{transform:translate(0);opacity:1}\n"] }]
-        }], propDecorators: { PlacementMode: [{
+            args: [{
+                    selector: 'Selector',
+                    template: '',
+                }]
+        }], propDecorators: { ItemTemplate: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }], IsEnabled: [{
                 type: Input
-            }], Id: [{
-                type: HostBinding,
-                args: ['attr.id']
-            }], _popover: [{
-                type: HostBinding,
-                args: ['attr.popover']
-            }], styles: [{
-                type: HostBinding,
-                args: ['style']
-            }], class: [{
+            }], HorizontalContentAlignment: [{
+                type: Input
+            }], VerticalContentAlignment: [{
+                type: Input
+            }], disabled: [{
                 type: HostBinding,
-                args: ['class']
+                args: ['class.disabled']
+            }], ItemSource: [{
+                type: Input
+            }], SelectedIndex: [{
+                type: Input
+            }], SelectedIndexChange: [{
+                type: Output
+            }], SelectedValue: [{
+                type: Input
+            }], SelectedValueChange: [{
+                type: Output
+            }], SelectedItem: [{
+                type: Input
+            }], SelectedItemChange: [{
+                type: Output
+            }], DisplayMemberPath: [{
+                type: Input
+            }], SelectedValuePath: [{
+                type: Input
             }] } });
 
-class Button extends Border {
+class ScrollBarComponent extends FrameworkElementComponent {
     constructor() {
         super(...arguments);
+        this.Orientation = 'Vertical';
+        this.ViewportSize = 0;
+        this.ScrollSize = 0;
+        this.StepSize = 5;
+        this._value = 0;
+        this.ValueChange = new EventEmitter();
         this.IsEnabled = true;
-        this.type = 'button';
-        this._popover = null;
-        this._flyoutOpen = false;
+        this._isScrolling = false;
+        this._startPointerPosition = 0;
+        this._startScrollPosition = 0;
     }
-    get disabled() {
-        return this.IsEnabled ? undefined : true;
+    get Value() {
+        return this._value;
+    }
+    ;
+    set Value(value) {
+        let scrollRange = this.ScrollSize - this.ViewportSize;
+        if (value > scrollRange)
+            value = scrollRange;
+        if (value < 0)
+            value = 0;
+        this._value = value;
+        this.ValueChange.emit(value);
+    }
+    get decreaseGlyph() {
+        return this.Orientation === 'Vertical' ? '\ueddb' : '\uedd9';
+    }
+    get increaseGlyph() {
+        return this.Orientation === 'Vertical' ? '\ueddc' : '\uedda';
+    }
+    get class() {
+        return this.Orientation.toLowerCase();
     }
-    ngAfterContentInit() {
-        if (this._children.length === 0)
+    getElementSize(element) {
+        return this.Orientation === 'Vertical' ? element.offsetHeight : element.offsetWidth;
+    }
+    getPointerPosition(event) {
+        return this.Orientation === 'Vertical' ? event.clientY : event.clientX;
+    }
+    get thumbStyle() {
+        if (!this._track)
+            return {};
+        let trackLength = this.getElementSize(this._track.nativeElement);
+        let scrollPosition = this.Value / (this.ScrollSize - this.ViewportSize);
+        let size = trackLength * (this.ViewportSize / this.ScrollSize);
+        let position = scrollPosition * (trackLength - size);
+        switch (this.Orientation) {
+            case 'Vertical':
+                return {
+                    'height': size + 'px',
+                    'top': position + 'px'
+                };
+            case 'Horizontal':
+                return {
+                    'width': size + 'px',
+                    'left': position + 'px'
+                };
+        }
+    }
+    onButtonDown(event, direction) {
+        event.target.setPointerCapture(event.pointerId);
+        this._interval = setInterval(() => {
+            this.Value += direction ? this.StepSize : -this.StepSize;
+        }, 50);
+    }
+    onButtonUp(event) {
+        event.target.releasePointerCapture(event.pointerId);
+        clearInterval(this._interval);
+    }
+    onTrackDown(event) {
+        let direction;
+        if (this.Orientation === 'Vertical') {
+            if (event.offsetY < this._thumb.nativeElement.offsetTop) {
+                direction = false;
+            }
+            if (this._thumb.nativeElement.offsetTop + this._thumb.nativeElement.offsetHeight < event.offsetY) {
+                direction = true;
+            }
+        }
+        else {
+            if (event.offsetX < this._thumb.nativeElement.offsetLeft) {
+                direction = false;
+            }
+            if (this._thumb.nativeElement.offsetLeft + this._thumb.nativeElement.offsetWidth < event.offsetX) {
+                direction = true;
+            }
+        }
+        if (direction === undefined)
             return;
-        this._popoverTarget = this._children.first.Id;
+        event.target.setPointerCapture(event.pointerId);
+        this.Value += direction ? this.ViewportSize : -this.ViewportSize;
+        this._interval = setInterval(() => {
+            this.Value += direction ? this.ViewportSize : -this.ViewportSize;
+        }, 250);
     }
-    ngAfterViewInit() {
-        this._popover = document.querySelector('#' + this._popoverTarget);
+    onTrackUp(event) {
+        event.target.releasePointerCapture(event.pointerId);
+        clearInterval(this._interval);
     }
-    onHostPointerEvent(event) {
-        this._flyoutOpen = this._popover?.matches(':popover-open') ?? false;
+    onPointerDown(event) {
+        if (event.buttons !== 1)
+            return;
+        this._thumb.nativeElement.setPointerCapture(event.pointerId);
+        this._isScrolling = true;
+        this._startPointerPosition = this.getPointerPosition(event);
+        this._startScrollPosition = this.Value;
+        event.stopPropagation();
+    }
+    onPointerMove(event) {
+        if (!this._isScrolling)
+            return;
+        if (event.buttons !== 1) {
+            this._isScrolling = false;
+            return;
+        }
+        let delta = this.getPointerPosition(event) - this._startPointerPosition;
+        let trackLength = this.getElementSize(this._track.nativeElement);
+        let thumbLength = this.getElementSize(this._thumb.nativeElement);
+        let scrollPercent = delta / (trackLength - thumbLength);
+        this.Value = this._startScrollPosition + scrollPercent * (this.ScrollSize - this.ViewportSize);
+        event.stopPropagation();
     }
-    get anchorName() {
-        return this._popoverTarget ? `--${this._popoverTarget}-host` : undefined;
+    onPointerUp(event) {
+        if (event.buttons !== 1)
+            return;
+        this._isScrolling = false;
+        this._thumb.nativeElement.releasePointerCapture(event.pointerId);
+        event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Button, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: Button, isStandalone: true, selector: "Button", inputs: { IsEnabled: "IsEnabled" }, host: { listeners: { "pointerdown": "onHostPointerEvent($event)", "pointerenter": "onHostPointerEvent($event)", "pointerup": "onHostPointerEvent($event)" }, properties: { "attr.type": "this.type", "attr.disabled": "this.disabled", "attr.popovertarget": "this._popoverTarget", "class.flyout-open": "this._flyoutOpen", "style.anchor-name": "this.anchorName" } }, queries: [{ propertyName: "_children", predicate: Flyout }], usesInheritance: true, ngImport: i0, template: `<ng-content/><ng-content select="flyout"/>`, isInline: true, styles: [":host{display:grid;align-content:center;justify-content:center;padding:5px 11px;border-width:1px;border-style:solid;border-radius:4px;background:#ffffffb3;border-color:#0000000f;color:#000000e4;transition:all .167s}:host::ng-deep *{color:#000000e4}@media (prefers-color-scheme: dark){:host{background:#ffffff0f;border-color:#ffffff12;color:#fff}:host::ng-deep *{color:#fff}}:host:hover:not(.checked):not(.flyout-open){background:#f9f9f980}@media (prefers-color-scheme: dark){:host:hover:not(.checked):not(.flyout-open){background:#ffffff15}}:host:active:not(.checked):not(.flyout-open){background:#f9f9f94d;color:#0000009e}:host:active:not(.checked):not(.flyout-open)::ng-deep *{color:#0000009e}@media (prefers-color-scheme: dark){:host:active:not(.checked):not(.flyout-open){background:#ffffff08;color:#ffffffc5}:host:active:not(.checked):not(.flyout-open)::ng-deep *{color:#ffffffc5}}:host:disabled:not(.checked){background:#f9f9f94d;color:#0000005c}:host:disabled:not(.checked)::ng-deep *{color:#0000005c}@media (prefers-color-scheme: dark){:host:disabled:not(.checked){background:#ffffff0b;color:#ffffff5d}:host:disabled:not(.checked)::ng-deep *{color:#ffffff5d}}:host.checked{background:#0067c0;border-color:#0067c0;color:#fff}:host.checked::ng-deep *{color:#fff}@media (prefers-color-scheme: dark){:host.checked{background:#4cc2ff;border-color:#4cc2ff;color:#000}:host.checked::ng-deep *{color:#000}}:host:hover.checked:not(.flyout-open){background:#0067c0e6;border-color:#0067c0e6;color:#fff}:host:hover.checked:not(.flyout-open)::ng-deep *{color:#fff}@media (prefers-color-scheme: dark){:host:hover.checked:not(.flyout-open){background:#4cc2ffe6;border-color:#4cc2ffe6;color:#000}:host:hover.checked:not(.flyout-open)::ng-deep *{color:#000}}:host:active.checked:not(.flyout-open){background:#0067c0cc;border-color:#fff0;color:#ffffffb3}:host:active.checked:not(.flyout-open)::ng-deep *{color:#ffffffb3}@media (prefers-color-scheme: dark){:host:active.checked:not(.flyout-open){background:#4cc2ffcc;border-color:#fff0;color:#00000080}:host:active.checked:not(.flyout-open)::ng-deep *{color:#00000080}}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScrollBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ScrollBarComponent, isStandalone: true, selector: "ScrollBar", inputs: { Orientation: "Orientation", ViewportSize: "ViewportSize", ScrollSize: "ScrollSize", StepSize: "StepSize", Value: "Value", IsEnabled: "IsEnabled" }, outputs: { ValueChange: "ValueChange" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_track", first: true, predicate: ["track"], descendants: true }, { propertyName: "_thumb", first: true, predicate: ["thumb"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<div class="buttons" (pointerdown)="onButtonDown($event, false)" (pointerup)="onButtonUp($event)">{{decreaseGlyph}}</div>
+    <div #track class="track" (pointerdown)="onTrackDown($event)" (pointerup)="onTrackUp($event)">
+      <div #thumb class="thumb" [ngStyle]="thumbStyle" (pointerdown)="onPointerDown($event)" (pointermove)="onPointerMove($event)" (pointerup)="onPointerUp($event)"></div>
+    </div>
+    <div class="buttons" (pointerdown)="onButtonDown($event, true)" (pointerup)="onButtonUp($event)">{{increaseGlyph}}</div>`, isInline: true, styles: [":host{position:relative}:host{display:grid;background-color:var(--SubtleFillColorTransparent)}:host.horizontal{grid-template-columns:auto 1fr auto}:host.horizontal>.buttons{align-self:center}:host.horizontal>.track{transform:translateY(-.75px);align-self:center;margin:0 -2px 0 -3px}:host.horizontal>.track>.thumb{transform:translateY(3px)}:host.vertical{grid-template-rows:auto 1fr auto}:host.vertical>.buttons{justify-self:center}:host.vertical>.track{transform:translate(-.75px);justify-self:center;margin:-3px 0 -2px}:host.vertical>.track>.thumb{transform:translate(3px)}:host:hover{background-color:var(--AcrylicInAppFillColorDefault);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}:host:hover>.buttons{display:grid;opacity:1}:host:hover>.track>.thumb{min-width:10px;min-height:10px;transform:translate(0)}:host>.buttons{display:hidden;font-family:var(--SymbolFontFamily);font-size:8pt;min-width:12px;min-height:12px;margin:4px;transform-origin:center;opacity:0;transition:opacity var(--ControlNormalAnimationDuration);color:var(--ControlStrongFillColorDefault)}:host>.buttons:hover{color:var(--TextFillColorSecondary)}:host>.buttons:active{color:var(--TextFillColorSecondary);transform:scale(.875)}:host>.track{display:grid;position:relative}:host>.track>.thumb{background-color:var(--ControlStrongFillColorDefault);position:relative;border-radius:3px;transition:transform var(--ControlNormalAnimationDuration),min-width var(--ControlNormalAnimationDuration),min-height var(--ControlNormalAnimationDuration);min-width:2px;min-height:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Button, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScrollBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'Button', template: `<ng-content/><ng-content select="flyout"/>`, styles: [":host{display:grid;align-content:center;justify-content:center;padding:5px 11px;border-width:1px;border-style:solid;border-radius:4px;background:#ffffffb3;border-color:#0000000f;color:#000000e4;transition:all .167s}:host::ng-deep *{color:#000000e4}@media (prefers-color-scheme: dark){:host{background:#ffffff0f;border-color:#ffffff12;color:#fff}:host::ng-deep *{color:#fff}}:host:hover:not(.checked):not(.flyout-open){background:#f9f9f980}@media (prefers-color-scheme: dark){:host:hover:not(.checked):not(.flyout-open){background:#ffffff15}}:host:active:not(.checked):not(.flyout-open){background:#f9f9f94d;color:#0000009e}:host:active:not(.checked):not(.flyout-open)::ng-deep *{color:#0000009e}@media (prefers-color-scheme: dark){:host:active:not(.checked):not(.flyout-open){background:#ffffff08;color:#ffffffc5}:host:active:not(.checked):not(.flyout-open)::ng-deep *{color:#ffffffc5}}:host:disabled:not(.checked){background:#f9f9f94d;color:#0000005c}:host:disabled:not(.checked)::ng-deep *{color:#0000005c}@media (prefers-color-scheme: dark){:host:disabled:not(.checked){background:#ffffff0b;color:#ffffff5d}:host:disabled:not(.checked)::ng-deep *{color:#ffffff5d}}:host.checked{background:#0067c0;border-color:#0067c0;color:#fff}:host.checked::ng-deep *{color:#fff}@media (prefers-color-scheme: dark){:host.checked{background:#4cc2ff;border-color:#4cc2ff;color:#000}:host.checked::ng-deep *{color:#000}}:host:hover.checked:not(.flyout-open){background:#0067c0e6;border-color:#0067c0e6;color:#fff}:host:hover.checked:not(.flyout-open)::ng-deep *{color:#fff}@media (prefers-color-scheme: dark){:host:hover.checked:not(.flyout-open){background:#4cc2ffe6;border-color:#4cc2ffe6;color:#000}:host:hover.checked:not(.flyout-open)::ng-deep *{color:#000}}:host:active.checked:not(.flyout-open){background:#0067c0cc;border-color:#fff0;color:#ffffffb3}:host:active.checked:not(.flyout-open)::ng-deep *{color:#ffffffb3}@media (prefers-color-scheme: dark){:host:active.checked:not(.flyout-open){background:#4cc2ffcc;border-color:#fff0;color:#00000080}:host:active.checked:not(.flyout-open)::ng-deep *{color:#00000080}}\n"] }]
-        }], propDecorators: { IsEnabled: [{
+            args: [{ selector: 'ScrollBar', imports: [CommonModule], template: `<div class="buttons" (pointerdown)="onButtonDown($event, false)" (pointerup)="onButtonUp($event)">{{decreaseGlyph}}</div>
+    <div #track class="track" (pointerdown)="onTrackDown($event)" (pointerup)="onTrackUp($event)">
+      <div #thumb class="thumb" [ngStyle]="thumbStyle" (pointerdown)="onPointerDown($event)" (pointermove)="onPointerMove($event)" (pointerup)="onPointerUp($event)"></div>
+    </div>
+    <div class="buttons" (pointerdown)="onButtonDown($event, true)" (pointerup)="onButtonUp($event)">{{increaseGlyph}}</div>`, styles: [":host{position:relative}:host{display:grid;background-color:var(--SubtleFillColorTransparent)}:host.horizontal{grid-template-columns:auto 1fr auto}:host.horizontal>.buttons{align-self:center}:host.horizontal>.track{transform:translateY(-.75px);align-self:center;margin:0 -2px 0 -3px}:host.horizontal>.track>.thumb{transform:translateY(3px)}:host.vertical{grid-template-rows:auto 1fr auto}:host.vertical>.buttons{justify-self:center}:host.vertical>.track{transform:translate(-.75px);justify-self:center;margin:-3px 0 -2px}:host.vertical>.track>.thumb{transform:translate(3px)}:host:hover{background-color:var(--AcrylicInAppFillColorDefault);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}:host:hover>.buttons{display:grid;opacity:1}:host:hover>.track>.thumb{min-width:10px;min-height:10px;transform:translate(0)}:host>.buttons{display:hidden;font-family:var(--SymbolFontFamily);font-size:8pt;min-width:12px;min-height:12px;margin:4px;transform-origin:center;opacity:0;transition:opacity var(--ControlNormalAnimationDuration);color:var(--ControlStrongFillColorDefault)}:host>.buttons:hover{color:var(--TextFillColorSecondary)}:host>.buttons:active{color:var(--TextFillColorSecondary);transform:scale(.875)}:host>.track{display:grid;position:relative}:host>.track>.thumb{background-color:var(--ControlStrongFillColorDefault);position:relative;border-radius:3px;transition:transform var(--ControlNormalAnimationDuration),min-width var(--ControlNormalAnimationDuration),min-height var(--ControlNormalAnimationDuration);min-width:2px;min-height:2px}\n"] }]
+        }], propDecorators: { Orientation: [{
                 type: Input
-            }], type: [{
-                type: HostBinding,
-                args: ['attr.type']
-            }], disabled: [{
-                type: HostBinding,
-                args: ['attr.disabled']
-            }], _popoverTarget: [{
-                type: HostBinding,
-                args: ['attr.popovertarget']
-            }], _flyoutOpen: [{
-                type: HostBinding,
-                args: ['class.flyout-open']
-            }], _children: [{
-                type: ContentChildren,
-                args: [Flyout]
-            }], onHostPointerEvent: [{
-                type: HostListener,
-                args: ['pointerdown', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['pointerenter', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['pointerup', ['$event']]
-            }], anchorName: [{
+            }], ViewportSize: [{
+                type: Input
+            }], ScrollSize: [{
+                type: Input
+            }], StepSize: [{
+                type: Input
+            }], Value: [{
+                type: Input
+            }], ValueChange: [{
+                type: Output
+            }], IsEnabled: [{
+                type: Input
+            }], _track: [{
+                type: ViewChild,
+                args: ['track']
+            }], _thumb: [{
+                type: ViewChild,
+                args: ['thumb']
+            }], class: [{
                 type: HostBinding,
-                args: ['style.anchor-name']
+                args: ['class']
             }] } });
 
-class CheckBox extends Border {
-    constructor() {
-        super(...arguments);
-        this.IsEnabled = true;
-        this.IsChecked = false;
-        this.IsCheckedChange = new EventEmitter();
+class ScrollViewerComponent extends FrameworkElementComponent {
+    get IsHorizontalScrollBarVisible() {
+        switch (this.HorizontalScrollMode) {
+            case 'Disabled':
+                return false;
+            case 'Auto':
+                return this.ViewportWidth < this.ExtentWidth;
+            case 'Enabled':
+                return true;
+        }
     }
-    onIsCheckedChange(event) {
-        this.IsChecked = (event.target).checked;
-        this.IsCheckedChange.emit(this.IsChecked);
+    get IsVerticalScrollBarVisible() {
+        switch (this.VerticalScrollMode) {
+            case 'Disabled':
+                return false;
+            case 'Auto':
+                return this.ViewportHeight < this.ExtentHeight;
+            case 'Enabled':
+                return true;
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CheckBox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: CheckBox, isStandalone: true, selector: "CheckBox", inputs: { IsEnabled: "IsEnabled", IsChecked: "IsChecked" }, outputs: { IsCheckedChange: "IsCheckedChange" }, usesInheritance: true, ngImport: i0, template: `<label class="container">
-    <input type="checkbox" [checked]="IsChecked" (change)="onIsCheckedChange($event)" [disabled]="!IsEnabled">
-    <div class="checkBox">
-      <div class="checkMark">&#xE73E;</div>
-    </div>
-    <div class="content">
-      <ng-content/>
-    </div>
-  </label>`, isInline: true, styles: [".container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input[type=checkbox]:checked+.checkBox>.checkMark{display:grid}input[type=checkbox]:not(:checked):not(:hover):not(:active):not(:disabled)+.checkBox{background-color:#00000006;border-color:#00000072}@media (prefers-color-scheme: dark){input[type=checkbox]:not(:checked):not(:hover):not(:active):not(:disabled)+.checkBox{background-color:#00000019;border-color:#ffffff8b}}input[type=checkbox]:not(:checked):hover:not(:active):not(:disabled)+.checkBox{background-color:#0000000f;border-color:#00000072}@media (prefers-color-scheme: dark){input[type=checkbox]:not(:checked):hover:not(:active):not(:disabled)+.checkBox{background-color:#ffffff0b;border-color:#ffffff8b}}input[type=checkbox]:not(:checked):active+.checkBox{background-color:#fff0;border-color:#00000037}@media (prefers-color-scheme: dark){input[type=checkbox]:not(:checked):active+.checkBox{background-color:#fff0;border-color:#ffffff28}}input[type=checkbox]:checked:not(:hover):not(:disabled)+.checkBox{background-color:#0067c0;border-color:#0067c0}@media (prefers-color-scheme: dark){input[type=checkbox]:checked:not(:hover):not(:disabled)+.checkBox{background-color:#4cc2ff;border-color:#4cc2ff}}input[type=checkbox]:checked:hover:not(:disabled)+.checkBox{background-color:#0067c0e6;border-color:#0067c0e6}@media (prefers-color-scheme: dark){input[type=checkbox]:checked:hover:not(:disabled)+.checkBox{background-color:#4cc2ffe6;border-color:#4cc2ffe6}}input[type=checkbox]:checked:active:not(:disabled)+.checkBox{background-color:#0067c0cc;border-color:#0067c0cc}input[type=checkbox]:checked:active:not(:disabled)+.checkBox>.checkMark{color:#ffffffb3}@media (prefers-color-scheme: dark){input[type=checkbox]:checked:active:not(:disabled)+.checkBox{background-color:#4cc2ffcc;border-color:#4cc2ffcc}input[type=checkbox]:checked:active:not(:disabled)+.checkBox>.checkMark{color:#00000080}}input[type=checkbox]:not(:checked):disabled+.checkBox{background-color:#fff0;border-color:#00000037}@media (prefers-color-scheme: dark){input[type=checkbox]:not(:checked):disabled+.checkBox{background-color:#fff0;border-color:#ffffff28}}input[type=checkbox]:checked:disabled+.checkBox{background-color:#ffffff37;border-color:#00000037}input[type=checkbox]:checked:disabled+.checkBox>.checkMark{color:#fff}@media (prefers-color-scheme: dark){input[type=checkbox]:checked:disabled+.checkBox{background-color:#ffffff28;border-color:#ffffff28}input[type=checkbox]:checked:disabled+.checkBox>.checkMark{color:#ffffff87}}.checkBox{display:grid;width:20px;height:20px;border-radius:4px;border-style:solid;border-width:1px}.checkMark{display:none;font-family:Segoe Fluent Icons,Segoe MDL2 Assets;font-size:12pt;align-self:center;justify-self:center;color:#fff}@media (prefers-color-scheme: dark){.checkMark{color:#000}}.content{align-self:center}\n"] }); }
+    get ExtentWidth() {
+        return this._content?.nativeElement.scrollWidth;
+    }
+    get ExtentHeight() {
+        return this._content?.nativeElement.scrollHeight;
+    }
+    get ViewportWidth() {
+        return this._content?.nativeElement.clientWidth;
+    }
+    get ViewportHeight() {
+        return this._content?.nativeElement.clientHeight;
+    }
+    get HorizontalOffset() {
+        return this._content?.nativeElement.scrollLeft;
+    }
+    set HorizontalOffset(value) {
+        if (this._content)
+            this._content.nativeElement.scrollLeft = value;
+    }
+    get VerticalOffset() {
+        return this._content?.nativeElement.scrollTop;
+    }
+    set VerticalOffset(value) {
+        if (this._content)
+            this._content.nativeElement.scrollTop = value;
+    }
+    static toOverflow(value) {
+        switch (value) {
+            case 'Disabled':
+                return 'hidden';
+            case 'Enabled':
+                return 'scroll';
+            case 'Auto':
+                return 'auto';
+        }
+    }
+    get contentStyle() {
+        return {
+            'overflow-x': ScrollViewerComponent.toOverflow(this.HorizontalScrollMode),
+            'overflow-y': ScrollViewerComponent.toOverflow(this.VerticalScrollMode)
+        };
+    }
+    constructor(_changeDetector) {
+        super();
+        this._changeDetector = _changeDetector;
+        this.HorizontalScrollMode = 'Auto';
+        this.VerticalScrollMode = 'Auto';
+    }
+    onScroll() {
+        //trigger change detect on scroll
+    }
+    ngAfterViewInit() {
+        //help the layout finish itself
+        this._changeDetector.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScrollViewerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ScrollViewerComponent, isStandalone: true, selector: "ScrollViewer", inputs: { HorizontalScrollMode: "HorizontalScrollMode", VerticalScrollMode: "VerticalScrollMode" }, viewQueries: [{ propertyName: "_content", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<div #content class="content" [ngStyle]="contentStyle" (scroll)="onScroll()"><ng-content/></div>
+    <ScrollBar *ngIf="IsVerticalScrollBarVisible" HorizontalAlignment="Right" class="scrollbar" Orientation="Vertical" [ScrollSize]="ExtentHeight" [ViewportSize]="ViewportHeight" [(Value)]="VerticalOffset"/>
+    <ScrollBar *ngIf="IsHorizontalScrollBarVisible" VerticalAlignment="Bottom" class="scrollbar" Orientation="Horizontal" [ScrollSize]="ExtentWidth" [ViewportSize]="ViewportWidth" [(Value)]="HorizontalOffset"/>`, isInline: true, styles: [":host{display:grid;overflow:auto}:host>.content{overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;display:grid;grid-row-start:1;grid-column-start:1;justify-self:stretch;align-self:stretch}:host>.content::-webkit-scrollbar{display:none}:host>.scrollbar{display:grid;grid-row-start:1;grid-column-start:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ScrollBarComponent, selector: "ScrollBar", inputs: ["Orientation", "ViewportSize", "ScrollSize", "StepSize", "Value", "IsEnabled"], outputs: ["ValueChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CheckBox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScrollViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'CheckBox', template: `<label class="container">
-    <input type="checkbox" [checked]="IsChecked" (change)="onIsCheckedChange($event)" [disabled]="!IsEnabled">
-    <div class="checkBox">
-      <div class="checkMark">&#xE73E;</div>
-    </div>
-    <div class="content">
-      <ng-content/>
-    </div>
-  </label>`, styles: [".container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input[type=checkbox]:checked+.checkBox>.checkMark{display:grid}input[type=checkbox]:not(:checked):not(:hover):not(:active):not(:disabled)+.checkBox{background-color:#00000006;border-color:#00000072}@media (prefers-color-scheme: dark){input[type=checkbox]:not(:checked):not(:hover):not(:active):not(:disabled)+.checkBox{background-color:#00000019;border-color:#ffffff8b}}input[type=checkbox]:not(:checked):hover:not(:active):not(:disabled)+.checkBox{background-color:#0000000f;border-color:#00000072}@media (prefers-color-scheme: dark){input[type=checkbox]:not(:checked):hover:not(:active):not(:disabled)+.checkBox{background-color:#ffffff0b;border-color:#ffffff8b}}input[type=checkbox]:not(:checked):active+.checkBox{background-color:#fff0;border-color:#00000037}@media (prefers-color-scheme: dark){input[type=checkbox]:not(:checked):active+.checkBox{background-color:#fff0;border-color:#ffffff28}}input[type=checkbox]:checked:not(:hover):not(:disabled)+.checkBox{background-color:#0067c0;border-color:#0067c0}@media (prefers-color-scheme: dark){input[type=checkbox]:checked:not(:hover):not(:disabled)+.checkBox{background-color:#4cc2ff;border-color:#4cc2ff}}input[type=checkbox]:checked:hover:not(:disabled)+.checkBox{background-color:#0067c0e6;border-color:#0067c0e6}@media (prefers-color-scheme: dark){input[type=checkbox]:checked:hover:not(:disabled)+.checkBox{background-color:#4cc2ffe6;border-color:#4cc2ffe6}}input[type=checkbox]:checked:active:not(:disabled)+.checkBox{background-color:#0067c0cc;border-color:#0067c0cc}input[type=checkbox]:checked:active:not(:disabled)+.checkBox>.checkMark{color:#ffffffb3}@media (prefers-color-scheme: dark){input[type=checkbox]:checked:active:not(:disabled)+.checkBox{background-color:#4cc2ffcc;border-color:#4cc2ffcc}input[type=checkbox]:checked:active:not(:disabled)+.checkBox>.checkMark{color:#00000080}}input[type=checkbox]:not(:checked):disabled+.checkBox{background-color:#fff0;border-color:#00000037}@media (prefers-color-scheme: dark){input[type=checkbox]:not(:checked):disabled+.checkBox{background-color:#fff0;border-color:#ffffff28}}input[type=checkbox]:checked:disabled+.checkBox{background-color:#ffffff37;border-color:#00000037}input[type=checkbox]:checked:disabled+.checkBox>.checkMark{color:#fff}@media (prefers-color-scheme: dark){input[type=checkbox]:checked:disabled+.checkBox{background-color:#ffffff28;border-color:#ffffff28}input[type=checkbox]:checked:disabled+.checkBox>.checkMark{color:#ffffff87}}.checkBox{display:grid;width:20px;height:20px;border-radius:4px;border-style:solid;border-width:1px}.checkMark{display:none;font-family:Segoe Fluent Icons,Segoe MDL2 Assets;font-size:12pt;align-self:center;justify-self:center;color:#fff}@media (prefers-color-scheme: dark){.checkMark{color:#000}}.content{align-self:center}\n"] }]
-        }], propDecorators: { IsEnabled: [{
+            args: [{ selector: 'ScrollViewer', imports: [CommonModule, ScrollBarComponent], template: `<div #content class="content" [ngStyle]="contentStyle" (scroll)="onScroll()"><ng-content/></div>
+    <ScrollBar *ngIf="IsVerticalScrollBarVisible" HorizontalAlignment="Right" class="scrollbar" Orientation="Vertical" [ScrollSize]="ExtentHeight" [ViewportSize]="ViewportHeight" [(Value)]="VerticalOffset"/>
+    <ScrollBar *ngIf="IsHorizontalScrollBarVisible" VerticalAlignment="Bottom" class="scrollbar" Orientation="Horizontal" [ScrollSize]="ExtentWidth" [ViewportSize]="ViewportWidth" [(Value)]="HorizontalOffset"/>`, styles: [":host{display:grid;overflow:auto}:host>.content{overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;display:grid;grid-row-start:1;grid-column-start:1;justify-self:stretch;align-self:stretch}:host>.content::-webkit-scrollbar{display:none}:host>.scrollbar{display:grid;grid-row-start:1;grid-column-start:1}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { HorizontalScrollMode: [{
                 type: Input
-            }], IsChecked: [{
+            }], VerticalScrollMode: [{
                 type: Input
-            }], IsCheckedChange: [{
-                type: Output
+            }], _content: [{
+                type: ViewChild,
+                args: ['content']
             }] } });
 
-class ListBox extends FrameworkElement {
+class StackPanelComponent extends PanelComponent {
     constructor() {
         super(...arguments);
-        this.SelectedIndex = -1;
-        this.SelectedIndexChange = new EventEmitter();
-        this.SelectedValue = null;
-        this.SelectedValueChange = new EventEmitter();
+        this.Orientation = 'Vertical';
+        this.Spacing = 0;
     }
-    getValue(index, item) {
-        return this.SelectedValuePath ? item[this.SelectedValuePath] : item;
+    get flexDirection() {
+        return this.Orientation === 'Horizontal' ? 'row' : 'column';
     }
-    onItemClick(index, item) {
-        this.SelectedIndex = index;
-        this.SelectedIndexChange.emit(index);
-        this.SelectedValue = this.getValue(index, item);
-        this.SelectedValueChange.emit(index);
-    }
-    get overflow() {
-        return 'auto';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListBox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ListBox, isStandalone: true, selector: "ListBox", inputs: { ItemSource: "ItemSource", SelectedIndex: "SelectedIndex", SelectedValue: "SelectedValue", DisplayMemberPath: "DisplayMemberPath", SelectedValuePath: "SelectedValuePath" }, outputs: { SelectedIndexChange: "SelectedIndexChange", SelectedValueChange: "SelectedValueChange" }, queries: [{ propertyName: "ItemTemplate", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: `<div *ngFor="let item of ItemSource; index as index; trackBy: getValue" class="item" [ngClass]="{'selected': index == SelectedIndex}" (click)="onItemClick(index, item)">
-    <ng-container *ngIf="ItemTemplate">
-      <ng-container *ngTemplateOutlet="ItemTemplate; context: { $implicit: item }"/>
-    </ng-container>
-    <ng-container *ngIf="!ItemTemplate">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container>
-  </div>`, isInline: true, styles: [":host{display:flex;flex-direction:column;background-color:#f2f2f2}@media (prefers-color-scheme: dark){:host{background-color:#2b2b2b}}.item{display:grid;padding:12px;margin:0}.item:not(:hover):not(:active):not(.selected){background-color:transparent;color:#000000e4}@media (prefers-color-scheme: dark){.item:not(:hover):not(:active):not(.selected){color:#fff}}.item:hover:not(.active):not(.selected){background-color:#00000009}@media (prefers-color-scheme: dark){.item:hover:not(.active):not(.selected){background-color:#ffffff0f}}.item:active:not(.selected){background-color:#00000006}@media (prefers-color-scheme: dark){.item:active:not(.selected){background-color:#ffffff0a}}.item:not(:hover):not(:active).selected{background-color:#0078d466}@media (prefers-color-scheme: dark){.item:not(:hover):not(:active).selected{background-color:#0078d499}}.item:hover:not(:active).selected{background-color:#0078d499}@media (prefers-color-scheme: dark){.item:hover:not(:active).selected{background-color:#0078d4cc}}.item:active.selected{background-color:#0078d4b3}@media (prefers-color-scheme: dark){.item:active.selected{background-color:#0078d4e6}}\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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListBox, decorators: [{
+    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"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: StackPanelComponent, 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(index, item)">
-    <ng-container *ngIf="ItemTemplate">
-      <ng-container *ngTemplateOutlet="ItemTemplate; context: { $implicit: item }"/>
-    </ng-container>
-    <ng-container *ngIf="!ItemTemplate">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container>
-  </div>`, styles: [":host{display:flex;flex-direction:column;background-color:#f2f2f2}@media (prefers-color-scheme: dark){:host{background-color:#2b2b2b}}.item{display:grid;padding:12px;margin:0}.item:not(:hover):not(:active):not(.selected){background-color:transparent;color:#000000e4}@media (prefers-color-scheme: dark){.item:not(:hover):not(:active):not(.selected){color:#fff}}.item:hover:not(.active):not(.selected){background-color:#00000009}@media (prefers-color-scheme: dark){.item:hover:not(.active):not(.selected){background-color:#ffffff0f}}.item:active:not(.selected){background-color:#00000006}@media (prefers-color-scheme: dark){.item:active:not(.selected){background-color:#ffffff0a}}.item:not(:hover):not(:active).selected{background-color:#0078d466}@media (prefers-color-scheme: dark){.item:not(:hover):not(:active).selected{background-color:#0078d499}}.item:hover:not(:active).selected{background-color:#0078d499}@media (prefers-color-scheme: dark){.item:hover:not(:active).selected{background-color:#0078d4cc}}.item:active.selected{background-color:#0078d4b3}@media (prefers-color-scheme: dark){.item:active.selected{background-color:#0078d4e6}}\n"] }]
-        }], propDecorators: { ItemSource: [{
-                type: Input
-            }], ItemTemplate: [{
-                type: ContentChild,
-                args: [TemplateRef]
-            }], SelectedIndex: [{
+            args: [{ selector: 'StackPanel', template: `<ng-content/>`, styles: [":host{display:flex;position:relative}\n"] }]
+        }], propDecorators: { Orientation: [{
                 type: Input
-            }], SelectedIndexChange: [{
-                type: Output
-            }], SelectedValue: [{
+            }], Spacing: [{
                 type: Input
-            }], SelectedValueChange: [{
+            }, {
+                type: HostBinding,
+                args: ['style.gap']
+            }], flexDirection: [{
+                type: HostBinding,
+                args: ['style.flex-direction']
+            }] } });
+
+class ListViewComponent extends SelectorComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ListViewComponent, isStandalone: true, selector: "ListView", usesInheritance: true, ngImport: i0, template: "<ScrollViewer>\n    <StackPanel Padding=\"2px 0\">\n      <div *ngFor=\"let item of ItemSource; index as index; trackBy: getValue\" class=\"item\" [ngClass]=\"{'selected': index == SelectedIndex}\" (click)=\"onItemClick($event, index, item)\" [id]=\"'xaml-selector-'+_id+'-item-'+index\">\n        <div class=\"item-selector\"></div>\n        <div class=\"item-content\" [ngStyle]=\"{'align-content': alignContent, 'justify-content': justifyContent}\"><ng-container *ngIf=\"ItemTemplate\">\n    <ng-container *ngTemplateOutlet=\"ItemTemplate; context: { $implicit: item }\"/>\n  </ng-container>\n  <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container></div>\n      </div>\n    </StackPanel>\n  </ScrollViewer>", isInline: true, styles: [":host{position:relative}:host{display:grid}:host .item{display:grid;margin:2px 4px;border-radius:4px}:host .item>.item-selector,:host .item>.item-content{display:grid;grid-row-start:1;grid-column-start:1;justify-self:stretch}:host .item>.item-selector{justify-self:left;align-self:center;width:4px;height:12px;border-radius:2px;transition:height var(--ControlNormalAnimationDuration)}:host .item>.item-content{padding:8px 12px}:host .item.selected>.item-selector{height:18px}:host:not(.disabled) .item:not(:hover):not(:active):not(.selected){background-color:transparent;color:var(--TextFillColorPrimary)}:host:not(.disabled) .item:hover:not(.active):not(.selected){background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:active:not(.selected){background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:not(:hover):not(:active).selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:hover:not(:active).selected{background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:active.selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item.selected>.item-selector{background-color:var(--AccentFillColorDefault)}:host.disabled .item>.item-content{color:var(--TextFillColorDisabled)}:host.disabled .item:not(.selected){background-color:transparent}:host.disabled .item.selected{background-color:var(--SubtleFillColorSecondary)}:host.disabled .item.selected>.item-selector{background-color:var(--AccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ScrollViewerComponent, selector: "ScrollViewer", inputs: ["HorizontalScrollMode", "VerticalScrollMode"] }, { kind: "component", type: StackPanelComponent, selector: "StackPanel", inputs: ["Orientation", "Spacing"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ListView', imports: [CommonModule, ScrollViewerComponent, StackPanelComponent], template: `<ScrollViewer>
+    <StackPanel Padding="2px 0">
+      <div *ngFor="let item of ItemSource; index as index; trackBy: getValue" class="item" [ngClass]="{'selected': index == SelectedIndex}" (click)="onItemClick($event, index, item)" [id]="'xaml-selector-'+_id+'-item-'+index">
+        <div class="item-selector"></div>
+        <div class="item-content" [ngStyle]="{'align-content': alignContent, 'justify-content': justifyContent}">${SelectorItemTemplate}</div>
+      </div>
+    </StackPanel>
+  </ScrollViewer>`, styles: [":host{position:relative}:host{display:grid}:host .item{display:grid;margin:2px 4px;border-radius:4px}:host .item>.item-selector,:host .item>.item-content{display:grid;grid-row-start:1;grid-column-start:1;justify-self:stretch}:host .item>.item-selector{justify-self:left;align-self:center;width:4px;height:12px;border-radius:2px;transition:height var(--ControlNormalAnimationDuration)}:host .item>.item-content{padding:8px 12px}:host .item.selected>.item-selector{height:18px}:host:not(.disabled) .item:not(:hover):not(:active):not(.selected){background-color:transparent;color:var(--TextFillColorPrimary)}:host:not(.disabled) .item:hover:not(.active):not(.selected){background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:active:not(.selected){background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:not(:hover):not(:active).selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:hover:not(:active).selected{background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:active.selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item.selected>.item-selector{background-color:var(--AccentFillColorDefault)}:host.disabled .item>.item-content{color:var(--TextFillColorDisabled)}:host.disabled .item:not(.selected){background-color:transparent}:host.disabled .item.selected{background-color:var(--SubtleFillColorSecondary)}:host.disabled .item.selected>.item-selector{background-color:var(--AccentFillColorDisabled)}\n"] }]
+        }] });
+
+class PopupComponent {
+    constructor() {
+        this.isRendered = false;
+        this._isOpen = false;
+        this.IsOpenChange = new EventEmitter();
+        this.VerticalOffset = 0;
+        this.HorizontalOffset = 0;
+    }
+    get IsOpen() {
+        return this._isOpen;
+    }
+    ;
+    set IsOpen(value) {
+        this._isOpen = value;
+        if (this._isRenderedTimeout !== undefined) {
+            clearTimeout(this._isRenderedTimeout);
+        }
+        if (value) {
+            this.isRendered = true;
+        }
+        else {
+            this._isRenderedTimeout = setTimeout(() => {
+                this.isRendered = false;
+            }, 250);
+        }
+        if (value && this._container) {
+            this._container.nativeElement.style.transform = `translate(${this.HorizontalOffset}px, ${this.VerticalOffset - 4}px)`;
+        }
+    }
+    ;
+    Show() {
+        this.IsOpen = true;
+    }
+    Hide() {
+        this.IsOpen = false;
+    }
+    get containerClass() {
+        return this.IsOpen ? 'popup-open' : undefined;
+    }
+    onBackdropClick(event) {
+        this.Hide();
+        event.stopPropagation();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: PopupComponent, isStandalone: true, selector: "Popup", inputs: { IsOpen: "IsOpen", VerticalOffset: "VerticalOffset", HorizontalOffset: "HorizontalOffset" }, outputs: { IsOpenChange: "IsOpenChange" }, host: { classAttribute: "popup" }, viewQueries: [{ propertyName: "_container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `<div class="popup-backdrop" (click)="onBackdropClick($event)" (contextmenu)="onBackdropClick($event)" *ngIf="IsOpen"></div>
+    <div #container class="popup-container" [ngClass]="containerClass">
+      <div class="popup-content" *ngIf="isRendered"><ng-content/></div>
+    </div>`, isInline: true, styles: [":host{position:relative}:host{z-index:900}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;position:absolute;pointer-events:none;z-index:1000}.popup-container>.popup-content{display:grid;padding:16px;border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);opacity:0;transition:opacity var(--ControlNormalAnimationDuration);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #0000001a;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.popup-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{position:fixed;inset:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'Popup', imports: [CommonModule], template: `<div class="popup-backdrop" (click)="onBackdropClick($event)" (contextmenu)="onBackdropClick($event)" *ngIf="IsOpen"></div>
+    <div #container class="popup-container" [ngClass]="containerClass">
+      <div class="popup-content" *ngIf="isRendered"><ng-content/></div>
+    </div>`, host: {
+                        class: 'popup'
+                    }, styles: [":host{position:relative}:host{z-index:900}.popup-container{background-color:transparent;display:grid;padding:0;margin:0;border:0;position:absolute;pointer-events:none;z-index:1000}.popup-container>.popup-content{display:grid;padding:16px;border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);opacity:0;transition:opacity var(--ControlNormalAnimationDuration);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #0000001a;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault)}.popup-container.popup-open>.popup-content{opacity:1;pointer-events:all}.popup-backdrop{position:fixed;inset:0}\n"] }]
+        }], propDecorators: { IsOpen: [{
+                type: Input
+            }], IsOpenChange: [{
                 type: Output
-            }], DisplayMemberPath: [{
+            }], VerticalOffset: [{
                 type: Input
-            }], SelectedValuePath: [{
+            }], HorizontalOffset: [{
                 type: Input
+            }], _container: [{
+                type: ViewChild,
+                args: ['container']
             }] } });
 
-class StackPanel extends Border {
-    constructor() {
-        super(...arguments);
-        this.Orientation = 'Vertical';
-        this.Spacing = 0;
+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"] }); }
+}
+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"] }]
+        }] });
+
+class ComboBoxComponent extends SelectorComponent {
+    get item() {
+        return this.SelectedItem;
     }
-    get flexDirection() {
-        return this.Orientation === 'Horizontal' ? 'row' : 'column';
+    get index() {
+        return this.SelectedIndex;
+    }
+    constructor(_changeDetector) {
+        super();
+        this._changeDetector = _changeDetector;
+        this._popupOffset = -4;
+        this.SelectedIndexChange.subscribe(() => this.onSelectionChanged());
+    }
+    ngAfterViewInit() {
+        //help the layout finish itself
+        this._changeDetector.detectChanges();
+    }
+    get popupOffset() {
+        //Cache the value so the change detector will not complain    
+        let popupOffset = -(this._selector?.GetElement(this.SelectedIndex)?.offsetTop ?? 0);
+        if (popupOffset !== 0)
+            this._popupOffset = popupOffset;
+        return this._popupOffset;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: StackPanel, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: StackPanel, 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}\n"] }); }
+    onSelectionChanged() {
+        if (this._popup)
+            this._popup.IsOpen = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ComboBoxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ComboBoxComponent, isStandalone: true, selector: "ComboBox", viewQueries: [{ propertyName: "_selector", first: true, predicate: ListViewComponent, descendants: true }, { propertyName: "_popup", first: true, predicate: PopupComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<DropDownButton [HorizontalContentAlignment]=\"HorizontalContentAlignment\" [VerticalContentAlignment]=\"VerticalContentAlignment\" [IsEnabled]=\"IsEnabled\">\n    <ng-container *ngIf=\"ItemTemplate\">\n    <ng-container *ngTemplateOutlet=\"ItemTemplate; context: { $implicit: item }\"/>\n  </ng-container>\n  <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container>\n    <Popup #ButtonFlyout [VerticalOffset]=\"popupOffset\">\n      <ListView [ItemSource]=\"ItemSource\" [(SelectedIndex)]=\"SelectedIndex\"  [HorizontalContentAlignment]=\"HorizontalContentAlignment\" [VerticalContentAlignment]=\"VerticalContentAlignment\"/>\n    </Popup>\n  </DropDownButton>", isInline: true, styles: [":host ::ng-deep .popup>.popup-container{left:0;right:0;top:0}:host ::ng-deep .popup>.popup-container>.popup-content{padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropDownButtonComponent, selector: "DropDownButton" }, { kind: "component", type: PopupComponent, selector: "Popup", inputs: ["IsOpen", "VerticalOffset", "HorizontalOffset"], outputs: ["IsOpenChange"] }, { kind: "component", type: ListViewComponent, selector: "ListView" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: StackPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'StackPanel', template: `<ng-content/>`, styles: [":host{display:flex}\n"] }]
-        }], propDecorators: { Orientation: [{
-                type: Input
-            }], Spacing: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.gap']
-            }], flexDirection: [{
-                type: HostBinding,
-                args: ['style.flex-direction']
+            args: [{ selector: 'ComboBox', imports: [CommonModule, DropDownButtonComponent, PopupComponent, ListViewComponent], template: `<DropDownButton [HorizontalContentAlignment]="HorizontalContentAlignment" [VerticalContentAlignment]="VerticalContentAlignment" [IsEnabled]="IsEnabled">
+    ${SelectorItemTemplate}
+    <Popup #ButtonFlyout [VerticalOffset]="popupOffset">
+      <ListView [ItemSource]="ItemSource" [(SelectedIndex)]="SelectedIndex"  [HorizontalContentAlignment]="HorizontalContentAlignment" [VerticalContentAlignment]="VerticalContentAlignment"/>
+    </Popup>
+  </DropDownButton>`, styles: [":host ::ng-deep .popup>.popup-container{left:0;right:0;top:0}:host ::ng-deep .popup>.popup-container>.popup-content{padding:0!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { _selector: [{
+                type: ViewChild,
+                args: [ListViewComponent]
+            }], _popup: [{
+                type: ViewChild,
+                args: [PopupComponent]
             }] } });
 
-class RadioButton extends Border {
-    constructor() {
-        super(...arguments);
+class RadioButtonComponent extends BorderComponent {
+    onChange(event) {
+        this.IsChecked = (event.target).checked;
+        this.IsCheckedChange.emit(this.IsChecked);
+    }
+    constructor(_group) {
+        super();
+        this._group = _group;
         this.IsEnabled = true;
         this.IsChecked = false;
         this.IsCheckedChange = new EventEmitter();
         this.Group = "";
+        if (this._group)
+            this._group.registerOption(this);
     }
-    onIsCheckedChange(event) {
-        this.IsChecked = (event.target).checked;
-        this.IsCheckedChange.emit(this.IsChecked);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButton, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: RadioButton, isStandalone: true, selector: "RadioButton", inputs: { IsEnabled: "IsEnabled", IsChecked: "IsChecked", Group: "Group", Value: "Value" }, outputs: { IsCheckedChange: "IsCheckedChange" }, usesInheritance: true, ngImport: i0, template: `<label class="container">
-    <input type="radio" [name]="Group" [value]="Value" [checked]="IsChecked" (change)="onIsCheckedChange($event)" [disabled]="!IsEnabled">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonComponent, deps: [{ token: RadioButtonGroup, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: RadioButtonComponent, isStandalone: true, selector: "RadioButton", inputs: { IsEnabled: "IsEnabled", IsChecked: "IsChecked", Group: "Group", Value: "Value" }, outputs: { IsCheckedChange: "IsCheckedChange" }, usesInheritance: true, ngImport: i0, template: `<label class="container">
+    <input type="radio" [name]="Group" [value]="Value" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
     <div class="radioButton">
       <div class="circle"></div>
     </div>
     <div class="content">
       <ng-content/>
     </div>
-  </label>`, isInline: true, styles: [".container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input[type=radio]:checked+.radioButton>.circle{display:grid}input[type=radio]:not(:checked):not(:hover):not(:active):not(:disabled)+.radioButton{background-color:#00000006;border-color:#00000072}@media (prefers-color-scheme: dark){input[type=radio]:not(:checked):not(:hover):not(:active):not(:disabled)+.radioButton{background-color:#00000019;border-color:#ffffff8b}}input[type=radio]:not(:checked):hover:not(:active):not(:disabled)+.radioButton{background-color:#0000000f;border-color:#00000072}@media (prefers-color-scheme: dark){input[type=radio]:not(:checked):hover:not(:active):not(:disabled)+.radioButton{background-color:#ffffff0b;border-color:#ffffff8b}}input[type=radio]:not(:checked):active:not(:disabled)+.radioButton{background-color:#fff0;border-color:#00000037}@media (prefers-color-scheme: dark){input[type=radio]:not(:checked):active:not(:disabled)+.radioButton{background-color:#fff0;border-color:#ffffff28}}input[type=radio]:not(:checked):active:not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton{background-color:#0067c0;border-color:#0067c0}@media (prefers-color-scheme: dark){input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton{background-color:#4cc2ff;border-color:#4cc2ff}}input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton{background-color:#0067c0e6;border-color:#0067c0e6}@media (prefers-color-scheme: dark){input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton{background-color:#4cc2ffe6;border-color:#4cc2ffe6}}input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton>.circle{transform:scale(1.2)}input[type=radio]:checked:active:not(:disabled)+.radioButton{background-color:#0067c0cc;border-color:#0067c0cc}input[type=radio]:checked:active:not(:disabled)+.radioButton>.circle{transform:scale(1)}@media (prefers-color-scheme: dark){input[type=radio]:checked:active:not(:disabled)+.radioButton{background-color:#4cc2ffcc;border-color:#4cc2ffcc}}input[type=radio]:not(:checked):disabled+.radioButton{background-color:#fff0;border-color:#00000037}@media (prefers-color-scheme: dark){input[type=radio]:not(:checked):disabled+.radioButton{background-color:#fff0;border-color:#ffffff28}}input[type=radio]:checked:disabled+.radioButton{background-color:#ffffff37;border-color:#00000037}@media (prefers-color-scheme: dark){input[type=radio]:checked:disabled+.radioButton{background-color:#ffffff28;border-color:#ffffff28}}.radioButton{display:grid;width:20px;height:20px;border-radius:11px;border-style:solid;border-width:1px;transition:border-color .167s;transition:background-color .167s}.circle{width:11px;height:11px;border-radius:6.5px;align-self:center;justify-self:center;background-color:#fff;transition:transform .25s;transform:scale(0)}@media (prefers-color-scheme: dark){.circle{background-color:#000}}.content{align-self:center}\n"] }); }
+  </label>`, isInline: true, styles: [":host{position:relative}.container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input[type=radio]:checked+.radioButton>.circle{display:grid}input[type=radio]:not(:checked):not(:hover):not(:active):not(:disabled)+.radioButton{background-color:var(--ControlAltFillColorSecondary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=radio]:not(:checked):hover:not(:active):not(:disabled)+.radioButton{background-color:var(--ControlAltFillColorTertiary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=radio]:not(:checked):active:not(:disabled)+.radioButton{background-color:var(--SubtleFillColorTransparent);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=radio]:not(:checked):active:not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton{background-color:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault)}input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton{background-color:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary)}input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton>.circle{transform:scale(1.2)}input[type=radio]:checked:active:not(:disabled)+.radioButton{background-color:var(--AccentFillColorTertiary);border-color:var(--AccentFillColorTertiary)}input[type=radio]:checked:active:not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:not(:checked):disabled+.radioButton{background-color:var(--ControlAltFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=radio]:checked:disabled+.radioButton{background-color:var(--AccentFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}.radioButton{display:grid;width:20px;height:20px;border-radius:11px;border-style:solid;border-width:var(--ControlBorderThickness);transition:border-color var(--ControlFastAnimationDuration);transition:background-color var(--ControlFastAnimationDuration)}.circle{width:11px;height:11px;border-radius:6.5px;align-self:center;justify-self:center;background-color:var(--TextOnAccentFillColorPrimary);transition:transform var(--ControlNormalAnimationDuration);transform:scale(0)}.content{align-self:center}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'RadioButton', template: `<label class="container">
-    <input type="radio" [name]="Group" [value]="Value" [checked]="IsChecked" (change)="onIsCheckedChange($event)" [disabled]="!IsEnabled">
+    <input type="radio" [name]="Group" [value]="Value" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
     <div class="radioButton">
       <div class="circle"></div>
     </div>
     <div class="content">
       <ng-content/>
     </div>
-  </label>`, styles: [".container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input[type=radio]:checked+.radioButton>.circle{display:grid}input[type=radio]:not(:checked):not(:hover):not(:active):not(:disabled)+.radioButton{background-color:#00000006;border-color:#00000072}@media (prefers-color-scheme: dark){input[type=radio]:not(:checked):not(:hover):not(:active):not(:disabled)+.radioButton{background-color:#00000019;border-color:#ffffff8b}}input[type=radio]:not(:checked):hover:not(:active):not(:disabled)+.radioButton{background-color:#0000000f;border-color:#00000072}@media (prefers-color-scheme: dark){input[type=radio]:not(:checked):hover:not(:active):not(:disabled)+.radioButton{background-color:#ffffff0b;border-color:#ffffff8b}}input[type=radio]:not(:checked):active:not(:disabled)+.radioButton{background-color:#fff0;border-color:#00000037}@media (prefers-color-scheme: dark){input[type=radio]:not(:checked):active:not(:disabled)+.radioButton{background-color:#fff0;border-color:#ffffff28}}input[type=radio]:not(:checked):active:not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton{background-color:#0067c0;border-color:#0067c0}@media (prefers-color-scheme: dark){input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton{background-color:#4cc2ff;border-color:#4cc2ff}}input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton{background-color:#0067c0e6;border-color:#0067c0e6}@media (prefers-color-scheme: dark){input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton{background-color:#4cc2ffe6;border-color:#4cc2ffe6}}input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton>.circle{transform:scale(1.2)}input[type=radio]:checked:active:not(:disabled)+.radioButton{background-color:#0067c0cc;border-color:#0067c0cc}input[type=radio]:checked:active:not(:disabled)+.radioButton>.circle{transform:scale(1)}@media (prefers-color-scheme: dark){input[type=radio]:checked:active:not(:disabled)+.radioButton{background-color:#4cc2ffcc;border-color:#4cc2ffcc}}input[type=radio]:not(:checked):disabled+.radioButton{background-color:#fff0;border-color:#00000037}@media (prefers-color-scheme: dark){input[type=radio]:not(:checked):disabled+.radioButton{background-color:#fff0;border-color:#ffffff28}}input[type=radio]:checked:disabled+.radioButton{background-color:#ffffff37;border-color:#00000037}@media (prefers-color-scheme: dark){input[type=radio]:checked:disabled+.radioButton{background-color:#ffffff28;border-color:#ffffff28}}.radioButton{display:grid;width:20px;height:20px;border-radius:11px;border-style:solid;border-width:1px;transition:border-color .167s;transition:background-color .167s}.circle{width:11px;height:11px;border-radius:6.5px;align-self:center;justify-self:center;background-color:#fff;transition:transform .25s;transform:scale(0)}@media (prefers-color-scheme: dark){.circle{background-color:#000}}.content{align-self:center}\n"] }]
-        }], propDecorators: { IsEnabled: [{
+  </label>`, styles: [":host{position:relative}.container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input[type=radio]:checked+.radioButton>.circle{display:grid}input[type=radio]:not(:checked):not(:hover):not(:active):not(:disabled)+.radioButton{background-color:var(--ControlAltFillColorSecondary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=radio]:not(:checked):hover:not(:active):not(:disabled)+.radioButton{background-color:var(--ControlAltFillColorTertiary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=radio]:not(:checked):active:not(:disabled)+.radioButton{background-color:var(--SubtleFillColorTransparent);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=radio]:not(:checked):active:not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton{background-color:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault)}input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton{background-color:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary)}input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton>.circle{transform:scale(1.2)}input[type=radio]:checked:active:not(:disabled)+.radioButton{background-color:var(--AccentFillColorTertiary);border-color:var(--AccentFillColorTertiary)}input[type=radio]:checked:active:not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:not(:checked):disabled+.radioButton{background-color:var(--ControlAltFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=radio]:checked:disabled+.radioButton{background-color:var(--AccentFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}.radioButton{display:grid;width:20px;height:20px;border-radius:11px;border-style:solid;border-width:var(--ControlBorderThickness);transition:border-color var(--ControlFastAnimationDuration);transition:background-color var(--ControlFastAnimationDuration)}.circle{width:11px;height:11px;border-radius:6.5px;align-self:center;justify-self:center;background-color:var(--TextOnAccentFillColorPrimary);transition:transform var(--ControlNormalAnimationDuration);transform:scale(0)}.content{align-self:center}\n"] }]
+        }], ctorParameters: () => [{ type: RadioButtonGroup, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { IsEnabled: [{
                 type: Input
             }], IsChecked: [{
                 type: Input
@@ -646,16 +860,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }], Value: [{
                 type: Input
             }] } });
-class RadioButtonGroup extends StackPanel {
+class RadioButtonGroup extends StackPanelComponent {
     constructor() {
         super(...arguments);
         this.ValueChange = new EventEmitter();
-        this._id = RadioButtonGroup._nextId++;
+        this._children = [];
     }
     set Value(value) {
         if (this._children) {
             for (let item of this._children) {
-                if (item.Value = value) {
+                if (item.Value === value) {
                     item.IsChecked = true;
                     break;
                 }
@@ -668,37 +882,31 @@ class RadioButtonGroup extends StackPanel {
     get Value() {
         return this._value;
     }
-    static { this._nextId = 1; }
-    ngAfterContentInit() {
-        let index = 0;
-        for (let item of this._children) {
-            item.Group = 'xaml-radio-button-group-' + this._id;
-            if (item.Value === undefined)
-                item.Value = index++;
-            if (item.Value === this.Value)
-                item.IsChecked = true;
-            item.IsCheckedChange.subscribe(p => {
-                this.Value = item.Value;
-                this.ValueChange.emit(item.Value);
-            });
-        }
+    registerOption(child) {
+        child.Group = 'xaml-radio-button-group-' + this._id;
+        if (child.Value === undefined)
+            child.Value = this._children.length;
+        if (child.Value === this.Value)
+            child.IsChecked = true;
+        child.IsCheckedChange.subscribe(p => {
+            this.Value = child.Value;
+            this.ValueChange.emit(child.Value);
+        });
+        this._children.push(child);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonGroup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: RadioButtonGroup, isStandalone: true, selector: "RadioButtonGroup", inputs: { Value: "Value" }, outputs: { ValueChange: "ValueChange" }, queries: [{ propertyName: "_children", predicate: RadioButton }], usesInheritance: true, ngImport: i0, template: `<ng-container><ng-content/></ng-container>`, isInline: true, styles: [":host{display:flex}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: RadioButtonGroup, isStandalone: true, selector: "RadioButtonGroup", inputs: { Value: "Value" }, outputs: { ValueChange: "ValueChange" }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:contents}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonGroup, decorators: [{
             type: Component,
-            args: [{ selector: 'RadioButtonGroup', template: `<ng-container><ng-content/></ng-container>`, styles: [":host{display:flex}\n"] }]
+            args: [{ selector: 'RadioButtonGroup', template: `<ng-content/>`, styles: [":host{display:contents}\n"] }]
         }], propDecorators: { Value: [{
                 type: Input
             }], ValueChange: [{
                 type: Output
-            }], _children: [{
-                type: ContentChildren,
-                args: [RadioButton]
             }] } });
 
-class Slider extends FrameworkElement {
+class SliderComponent extends FrameworkElementComponent {
     constructor() {
         super(...arguments);
         this.Minimum = 0.0;
@@ -709,178 +917,626 @@ class Slider extends FrameworkElement {
         this.IsEnabled = true;
         this.Orientation = 'Horizontal';
     }
-    onValueChange(event) {
-        this.Value = parseFloat(event.target.value);
-        this.ValueChange.emit(this.Value);
+    onChange(event) {
+        this.Value = parseFloat(event.target.value);
+        this.ValueChange.emit(this.Value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: SliderComponent, isStandalone: true, selector: "Slider", inputs: { Minimum: "Minimum", Maximum: "Maximum", StepFrequency: "StepFrequency", Value: "Value", IsEnabled: "IsEnabled", Orientation: "Orientation" }, outputs: { ValueChange: "ValueChange" }, usesInheritance: true, ngImport: i0, template: `<input type="range" 
+    [min]="Minimum" 
+    [max]="Maximum" 
+    [value]="Value" 
+    [step]="StepFrequency" 
+    (change)="onChange($event)" 
+    [disabled]="!IsEnabled"
+    [className]="Orientation.toLowerCase()">`, isInline: true, styles: [":host{position:relative}:host{display:grid}input{display:grid;-webkit-appearance:none;appearance:none;background-color:var(--ControlStrongFillColorDefault);border-radius:2px;outline:none}input.horizontal{height:4px;margin:7px 0}input.vertical{width:4px;margin:0 7px;writing-mode:vertical-lr;direction:rtl;vertical-align:middle}input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:50%;width:16px;height:16px;border-style:solid;border-width:4px;outline:1px solid var(--ControlStrokeColorOnAccentDefaultDark);border-color:var(--ControlSolidFillColorDefault);background-color:var(--AccentFillColorDefault);transition:border-width var(--ControlFastAnimationDuration)}input::-moz-range-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:50%;width:16px;height:16px;border-style:solid;border-width:4px;outline:1px solid var(--ControlStrokeColorOnAccentDefaultDark);border-color:var(--ControlSolidFillColorDefault);background-color:var(--AccentFillColorDefault);transition:border-width var(--ControlFastAnimationDuration)}input:not(:disabled)::-webkit-slider-thumb:hover{border-width:3px;background-color:var(--AccentFillColorSecondary)}input:not(:disabled)::-webkit-slider-thumb:active{border-width:5px;background-color:var(--AccentFillColorTertiary)}input:not(:disabled)::-moz-range-thumb:hover{border-width:3px;background-color:var(--AccentFillColorSecondary)}input:not(:disabled)::-moz-range-thumb:active{border-width:5px;background-color:var(--AccentFillColorTertiary)}input:disabled{background-color:var(--ControlStrongFillColorDisabled)}input:disabled::-webkit-slider-thumb{border-width:2px;background-color:var(--AccentFillColorDisabled)}input:disabled::-moz-range-thumb{border-width:2px;background-color:var(--AccentFillColorDisabled)}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'Slider', template: `<input type="range" 
+    [min]="Minimum" 
+    [max]="Maximum" 
+    [value]="Value" 
+    [step]="StepFrequency" 
+    (change)="onChange($event)" 
+    [disabled]="!IsEnabled"
+    [className]="Orientation.toLowerCase()">`, styles: [":host{position:relative}:host{display:grid}input{display:grid;-webkit-appearance:none;appearance:none;background-color:var(--ControlStrongFillColorDefault);border-radius:2px;outline:none}input.horizontal{height:4px;margin:7px 0}input.vertical{width:4px;margin:0 7px;writing-mode:vertical-lr;direction:rtl;vertical-align:middle}input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:50%;width:16px;height:16px;border-style:solid;border-width:4px;outline:1px solid var(--ControlStrokeColorOnAccentDefaultDark);border-color:var(--ControlSolidFillColorDefault);background-color:var(--AccentFillColorDefault);transition:border-width var(--ControlFastAnimationDuration)}input::-moz-range-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:50%;width:16px;height:16px;border-style:solid;border-width:4px;outline:1px solid var(--ControlStrokeColorOnAccentDefaultDark);border-color:var(--ControlSolidFillColorDefault);background-color:var(--AccentFillColorDefault);transition:border-width var(--ControlFastAnimationDuration)}input:not(:disabled)::-webkit-slider-thumb:hover{border-width:3px;background-color:var(--AccentFillColorSecondary)}input:not(:disabled)::-webkit-slider-thumb:active{border-width:5px;background-color:var(--AccentFillColorTertiary)}input:not(:disabled)::-moz-range-thumb:hover{border-width:3px;background-color:var(--AccentFillColorSecondary)}input:not(:disabled)::-moz-range-thumb:active{border-width:5px;background-color:var(--AccentFillColorTertiary)}input:disabled{background-color:var(--ControlStrongFillColorDisabled)}input:disabled::-webkit-slider-thumb{border-width:2px;background-color:var(--AccentFillColorDisabled)}input:disabled::-moz-range-thumb{border-width:2px;background-color:var(--AccentFillColorDisabled)}\n"] }]
+        }], propDecorators: { Minimum: [{
+                type: Input
+            }], Maximum: [{
+                type: Input
+            }], StepFrequency: [{
+                type: Input
+            }], Value: [{
+                type: Input
+            }], ValueChange: [{
+                type: Output
+            }], IsEnabled: [{
+                type: Input
+            }], Orientation: [{
+                type: Input
+            }] } });
+
+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(.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"] }); }
+}
+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(.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: [{
+                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" }, 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: Slider, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: Slider, isStandalone: true, selector: "Slider", inputs: { Minimum: "Minimum", Maximum: "Maximum", StepFrequency: "StepFrequency", Value: "Value", IsEnabled: "IsEnabled", Orientation: "Orientation" }, outputs: { ValueChange: "ValueChange" }, usesInheritance: true, ngImport: i0, template: `<input type="range" 
-    [min]="Minimum" 
-    [max]="Maximum" 
-    [value]="Value" 
-    [step]="StepFrequency" 
-    (change)="onValueChange($event)" 
-    [disabled]="!IsEnabled"
-    [className]="Orientation.toLowerCase()">`, isInline: true, styles: [":host{display:grid}input{display:grid;-webkit-appearance:none;appearance:none;background-color:#00000072;border-radius:2px;outline:none}input.horizontal{height:4px;margin:7px 0}input.vertical{width:4px;margin:0 7px;writing-mode:vertical-lr;direction:rtl;vertical-align:middle}@media (prefers-color-scheme: dark){input{background-color:#ffffff8b}}input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:50%;width:16px;height:16px;border-style:solid;border-width:4px;outline:1px solid rgba(255,255,255,.0784313725);border-color:#fff;background-color:#0067c0;transition:border-width .167s}@media (prefers-color-scheme: dark){input::-webkit-slider-thumb{border-color:#454545;background-color:#4cc2ff}}input::-moz-range-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:50%;width:16px;height:16px;border-style:solid;border-width:4px;outline:1px solid rgba(255,255,255,.0784313725);border-color:#fff;background-color:#0067c0;transition:border-width .167s}@media (prefers-color-scheme: dark){input::-moz-range-thumb{border-color:#454545;background-color:#4cc2ff}}input:not(:disabled)::-webkit-slider-thumb:hover{border-width:3px;background-color:#0067c0e6}@media (prefers-color-scheme: dark){input:not(:disabled)::-webkit-slider-thumb:hover{background-color:#4cc2ffe6}}input:not(:disabled)::-webkit-slider-thumb:active{border-width:5px;background-color:#0067c0cc}@media (prefers-color-scheme: dark){input:not(:disabled)::-webkit-slider-thumb:active{background-color:#4cc2ffcc}}input:not(:disabled)::-moz-range-thumb:hover{border-width:3px;background-color:#0067c0e6}@media (prefers-color-scheme: dark){input:not(:disabled)::-moz-range-thumb:hover{background-color:#4cc2ffe6}}input:not(:disabled)::-moz-range-thumb:active{border-width:5px;background-color:#0067c0cc}@media (prefers-color-scheme: dark){input:not(:disabled)::-moz-range-thumb:active{background-color:#4cc2ffcc}}input:disabled{background-color:#00000051}@media (prefers-color-scheme: dark){input:disabled{background-color:#ffffff3f}}input:disabled::-webkit-slider-thumb{border-width:2px;background-color:#ffffff37}@media (prefers-color-scheme: dark){input:disabled::-webkit-slider-thumb{background-color:#ffffff28}}input:disabled::-moz-range-thumb{border-width:2px;background-color:#ffffff37}@media (prefers-color-scheme: dark){input:disabled::-moz-range-thumb{background-color:#ffffff28}}\n"] }); }
+    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: Slider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBlockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'Slider', template: `<input type="range" 
-    [min]="Minimum" 
-    [max]="Maximum" 
-    [value]="Value" 
-    [step]="StepFrequency" 
-    (change)="onValueChange($event)" 
-    [disabled]="!IsEnabled"
-    [className]="Orientation.toLowerCase()">`, styles: [":host{display:grid}input{display:grid;-webkit-appearance:none;appearance:none;background-color:#00000072;border-radius:2px;outline:none}input.horizontal{height:4px;margin:7px 0}input.vertical{width:4px;margin:0 7px;writing-mode:vertical-lr;direction:rtl;vertical-align:middle}@media (prefers-color-scheme: dark){input{background-color:#ffffff8b}}input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:50%;width:16px;height:16px;border-style:solid;border-width:4px;outline:1px solid rgba(255,255,255,.0784313725);border-color:#fff;background-color:#0067c0;transition:border-width .167s}@media (prefers-color-scheme: dark){input::-webkit-slider-thumb{border-color:#454545;background-color:#4cc2ff}}input::-moz-range-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:50%;width:16px;height:16px;border-style:solid;border-width:4px;outline:1px solid rgba(255,255,255,.0784313725);border-color:#fff;background-color:#0067c0;transition:border-width .167s}@media (prefers-color-scheme: dark){input::-moz-range-thumb{border-color:#454545;background-color:#4cc2ff}}input:not(:disabled)::-webkit-slider-thumb:hover{border-width:3px;background-color:#0067c0e6}@media (prefers-color-scheme: dark){input:not(:disabled)::-webkit-slider-thumb:hover{background-color:#4cc2ffe6}}input:not(:disabled)::-webkit-slider-thumb:active{border-width:5px;background-color:#0067c0cc}@media (prefers-color-scheme: dark){input:not(:disabled)::-webkit-slider-thumb:active{background-color:#4cc2ffcc}}input:not(:disabled)::-moz-range-thumb:hover{border-width:3px;background-color:#0067c0e6}@media (prefers-color-scheme: dark){input:not(:disabled)::-moz-range-thumb:hover{background-color:#4cc2ffe6}}input:not(:disabled)::-moz-range-thumb:active{border-width:5px;background-color:#0067c0cc}@media (prefers-color-scheme: dark){input:not(:disabled)::-moz-range-thumb:active{background-color:#4cc2ffcc}}input:disabled{background-color:#00000051}@media (prefers-color-scheme: dark){input:disabled{background-color:#ffffff3f}}input:disabled::-webkit-slider-thumb{border-width:2px;background-color:#ffffff37}@media (prefers-color-scheme: dark){input:disabled::-webkit-slider-thumb{background-color:#ffffff28}}input:disabled::-moz-range-thumb{border-width:2px;background-color:#ffffff37}@media (prefers-color-scheme: dark){input:disabled::-moz-range-thumb{background-color:#ffffff28}}\n"] }]
-        }], propDecorators: { Minimum: [{
+            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
-            }], Maximum: [{
+            }, {
+                type: HostBinding,
+                args: ['style.font-family']
+            }], Text: [{
                 type: Input
-            }], StepFrequency: [{
+            }], FontSize: [{
                 type: Input
-            }], Value: [{
+            }, {
+                type: HostBinding,
+                args: ['style.font-size']
+            }], FontStyle: [{
                 type: Input
-            }], ValueChange: [{
-                type: Output
-            }], IsEnabled: [{
+            }, {
+                type: HostBinding,
+                args: ['style.font-style']
+            }], FontWeight: [{
                 type: Input
-            }], Orientation: [{
+            }], 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 TextBox extends FrameworkElement {
+class FontIconComponent extends FrameworkElementComponent {
     constructor() {
         super(...arguments);
-        this.IsEnabled = true;
-        this.PlaceholderText = '';
-        this.Text = '';
-        this.TextChange = new EventEmitter();
-        this.TextAlignment = 'Left';
-        this.TextWrapping = 'NoWrap';
+        this.FontWeight = 'Normal';
     }
-    onChange(event) {
-        this.Text = (event.target).value;
-        this.TextChange.emit(this.Text);
+    get fontWeight() {
+        return TextBlockComponent.ToFontWeight(this.FontWeight);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TextBox, isStandalone: true, selector: "TextBox", inputs: { IsEnabled: "IsEnabled", PlaceholderText: "PlaceholderText", Text: "Text", TextAlignment: "TextAlignment", TextWrapping: "TextWrapping" }, outputs: { TextChange: "TextChange" }, usesInheritance: true, ngImport: i0, template: `
-  <input *ngIf="TextWrapping === 'NoWrap'" type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"/>
-  <textarea *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (change)="onChange($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"></textarea>`, isInline: true, styles: [":host{display:grid}textarea{resize:none}input,textarea{outline-style:none;border-style:solid;border-width:1px;border-radius:4px;padding:6px;background-color:#ffffffb3;border-color:#0000000f;border-bottom-color:#00000072;color:#000000e4}@media (prefers-color-scheme: dark){input,textarea{background-color:#ffffff0f;border-color:#ffffff12;border-bottom-color:#ffffff8b;color:#fff}}input::placeholder,textarea::placeholder{color:#0000009e;opacity:1}@media (prefers-color-scheme: dark){input::placeholder,textarea::placeholder{color:#ffffffc5}}input:hover,textarea:hover{background-color:#f9f9f980}@media (prefers-color-scheme: dark){input:hover,textarea:hover{background-color:#ffffff15}}input:focus,textarea:focus{background-color:#fff;border-bottom-color:#0067c0}@media (prefers-color-scheme: dark){input:focus,textarea:focus{background-color:#1e1e1eb3;border-bottom-color:#4cc2ff}}input:disabled,textarea:disabled{background-color:#f9f9f94d;border-bottom-color:#0000000f;color:#0000005c}@media (prefers-color-scheme: dark){input:disabled,textarea:disabled{background-color:#ffffff0b;border-bottom-color:#ffffff12;color:#ffffff5d}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: 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: TextBox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FontIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'TextBox', imports: [CommonModule], template: `
-  <input *ngIf="TextWrapping === 'NoWrap'" type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"/>
-  <textarea *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (change)="onChange($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"></textarea>`, styles: [":host{display:grid}textarea{resize:none}input,textarea{outline-style:none;border-style:solid;border-width:1px;border-radius:4px;padding:6px;background-color:#ffffffb3;border-color:#0000000f;border-bottom-color:#00000072;color:#000000e4}@media (prefers-color-scheme: dark){input,textarea{background-color:#ffffff0f;border-color:#ffffff12;border-bottom-color:#ffffff8b;color:#fff}}input::placeholder,textarea::placeholder{color:#0000009e;opacity:1}@media (prefers-color-scheme: dark){input::placeholder,textarea::placeholder{color:#ffffffc5}}input:hover,textarea:hover{background-color:#f9f9f980}@media (prefers-color-scheme: dark){input:hover,textarea:hover{background-color:#ffffff15}}input:focus,textarea:focus{background-color:#fff;border-bottom-color:#0067c0}@media (prefers-color-scheme: dark){input:focus,textarea:focus{background-color:#1e1e1eb3;border-bottom-color:#4cc2ff}}input:disabled,textarea:disabled{background-color:#f9f9f94d;border-bottom-color:#0000000f;color:#0000005c}@media (prefers-color-scheme: dark){input:disabled,textarea:disabled{background-color:#ffffff0b;border-bottom-color:#ffffff12;color:#ffffff5d}}\n"] }]
-        }], propDecorators: { IsEnabled: [{
+            args: [{ selector: 'FontIcon', template: `{{Glyph}}`, styles: [":host{font-family:Segoe Fluent Icons,Segoe MDL2 Assets}\n"] }]
+        }], propDecorators: { FontFamily: [{
                 type: Input
-            }], PlaceholderText: [{
+            }, {
+                type: HostBinding,
+                args: ['style.font-family']
+            }], FontSize: [{
                 type: Input
-            }], Text: [{
+            }, {
+                type: HostBinding,
+                args: ['style.font-size']
+            }], FontStyle: [{
                 type: Input
-            }], TextChange: [{
-                type: Output
-            }], TextAlignment: [{
+            }, {
+                type: HostBinding,
+                args: ['style.font-style']
+            }], FontWeight: [{
                 type: Input
-            }], TextWrapping: [{
+            }], Glyph: [{
                 type: Input
+            }], fontWeight: [{
+                type: HostBinding,
+                args: ['style.font-weight']
             }] } });
 
-class ToggleButton extends Button {
+class GridComponent extends PanelComponent {
     constructor() {
         super(...arguments);
-        this.IsChecked = false;
-        this.IsCheckedChange = new EventEmitter();
+        this.Orientation = 'Horizontal';
     }
-    onPointerUp(event) {
-        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: ToggleButton, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ToggleButton, 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{display:grid;align-content:center;justify-content:center;padding:5px 11px;border-width:1px;border-style:solid;border-radius:4px;background:#ffffffb3;border-color:#0000000f;color:#000000e4;transition:all .167s}:host::ng-deep *{color:#000000e4}@media (prefers-color-scheme: dark){:host{background:#ffffff0f;border-color:#ffffff12;color:#fff}:host::ng-deep *{color:#fff}}:host:hover:not(.checked):not(.flyout-open){background:#f9f9f980}@media (prefers-color-scheme: dark){:host:hover:not(.checked):not(.flyout-open){background:#ffffff15}}:host:active:not(.checked):not(.flyout-open){background:#f9f9f94d;color:#0000009e}:host:active:not(.checked):not(.flyout-open)::ng-deep *{color:#0000009e}@media (prefers-color-scheme: dark){:host:active:not(.checked):not(.flyout-open){background:#ffffff08;color:#ffffffc5}:host:active:not(.checked):not(.flyout-open)::ng-deep *{color:#ffffffc5}}:host:disabled:not(.checked){background:#f9f9f94d;color:#0000005c}:host:disabled:not(.checked)::ng-deep *{color:#0000005c}@media (prefers-color-scheme: dark){:host:disabled:not(.checked){background:#ffffff0b;color:#ffffff5d}:host:disabled:not(.checked)::ng-deep *{color:#ffffff5d}}:host.checked{background:#0067c0;border-color:#0067c0;color:#fff}:host.checked::ng-deep *{color:#fff}@media (prefers-color-scheme: dark){:host.checked{background:#4cc2ff;border-color:#4cc2ff;color:#000}:host.checked::ng-deep *{color:#000}}:host:hover.checked:not(.flyout-open){background:#0067c0e6;border-color:#0067c0e6;color:#fff}:host:hover.checked:not(.flyout-open)::ng-deep *{color:#fff}@media (prefers-color-scheme: dark){:host:hover.checked:not(.flyout-open){background:#4cc2ffe6;border-color:#4cc2ffe6;color:#000}:host:hover.checked:not(.flyout-open)::ng-deep *{color:#000}}:host:active.checked:not(.flyout-open){background:#0067c0cc;border-color:#fff0;color:#ffffffb3}:host:active.checked:not(.flyout-open)::ng-deep *{color:#ffffffb3}@media (prefers-color-scheme: dark){:host:active.checked:not(.flyout-open){background:#4cc2ffcc;border-color:#fff0;color:#00000080}:host:active.checked:not(.flyout-open)::ng-deep *{color:#00000080}}\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: ToggleButton, 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{display:grid;align-content:center;justify-content:center;padding:5px 11px;border-width:1px;border-style:solid;border-radius:4px;background:#ffffffb3;border-color:#0000000f;color:#000000e4;transition:all .167s}:host::ng-deep *{color:#000000e4}@media (prefers-color-scheme: dark){:host{background:#ffffff0f;border-color:#ffffff12;color:#fff}:host::ng-deep *{color:#fff}}:host:hover:not(.checked):not(.flyout-open){background:#f9f9f980}@media (prefers-color-scheme: dark){:host:hover:not(.checked):not(.flyout-open){background:#ffffff15}}:host:active:not(.checked):not(.flyout-open){background:#f9f9f94d;color:#0000009e}:host:active:not(.checked):not(.flyout-open)::ng-deep *{color:#0000009e}@media (prefers-color-scheme: dark){:host:active:not(.checked):not(.flyout-open){background:#ffffff08;color:#ffffffc5}:host:active:not(.checked):not(.flyout-open)::ng-deep *{color:#ffffffc5}}:host:disabled:not(.checked){background:#f9f9f94d;color:#0000005c}:host:disabled:not(.checked)::ng-deep *{color:#0000005c}@media (prefers-color-scheme: dark){:host:disabled:not(.checked){background:#ffffff0b;color:#ffffff5d}:host:disabled:not(.checked)::ng-deep *{color:#ffffff5d}}:host.checked{background:#0067c0;border-color:#0067c0;color:#fff}:host.checked::ng-deep *{color:#fff}@media (prefers-color-scheme: dark){:host.checked{background:#4cc2ff;border-color:#4cc2ff;color:#000}:host.checked::ng-deep *{color:#000}}:host:hover.checked:not(.flyout-open){background:#0067c0e6;border-color:#0067c0e6;color:#fff}:host:hover.checked:not(.flyout-open)::ng-deep *{color:#fff}@media (prefers-color-scheme: dark){:host:hover.checked:not(.flyout-open){background:#4cc2ffe6;border-color:#4cc2ffe6;color:#000}:host:hover.checked:not(.flyout-open)::ng-deep *{color:#000}}:host:active.checked:not(.flyout-open){background:#0067c0cc;border-color:#fff0;color:#ffffffb3}:host:active.checked:not(.flyout-open)::ng-deep *{color:#ffffffb3}@media (prefers-color-scheme: dark){:host:active.checked:not(.flyout-open){background:#4cc2ffcc;border-color:#fff0;color:#00000080}:host:active.checked:not(.flyout-open)::ng-deep *{color:#00000080}}\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 ToggleSwitch extends CheckBox {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleSwitch, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ToggleSwitch, isStandalone: true, selector: "ToggleSwitch", usesInheritance: true, ngImport: i0, template: `<label class="container">
-    <input type="checkbox" [checked]="IsChecked" (change)="onIsCheckedChange($event)" [disabled]="!IsEnabled">
-    <div class="slider">
-      <div class="thumb"></div>
-    </div>
-    <div class="content"><ng-content/></div>
-  </label>`, isInline: true, styles: [".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:#00000006;border-color:#00000072}@media (prefers-color-scheme: dark){input:not(:checked):not(:active):not(:disabled)+.slider:not(:hover){background-color:#00000019;border-color:#ffffff8b}}input:not(:checked):not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:#0000009e}@media (prefers-color-scheme: dark){input:not(:checked):not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:#ffffffc5}}input:not(:checked):not(:active):not(:disabled)+.slider:hover{background-color:#0000000f;border-color:#00000072}@media (prefers-color-scheme: dark){input:not(:checked):not(:active):not(:disabled)+.slider:hover{background-color:#ffffff0b;border-color:#ffffff8b}}input:not(:checked):not(:active):not(:disabled)+.slider:hover>.thumb{background-color:#0000009e}@media (prefers-color-scheme: dark){input:not(:checked):not(:active):not(:disabled)+.slider:hover>.thumb{background-color:#ffffffc5}}input:not(:checked):active:not(:disabled)+.slider{background-color:#00000018;border-color:#00000072}@media (prefers-color-scheme: dark){input:not(:checked):active:not(:disabled)+.slider{background-color:#ffffff12;border-color:#ffffff8b}}input:not(:checked):active:not(:disabled)+.slider>.thumb{background-color:#0000009e}@media (prefers-color-scheme: dark){input:not(:checked):active:not(:disabled)+.slider>.thumb{background-color:#ffffffc5}}input:not(:checked):disabled+.slider{background-color:#fff0;border-color:#00000037}@media (prefers-color-scheme: dark){input:not(:checked):disabled+.slider{background-color:#fff0;border-color:#ffffff28}}input:not(:checked):disabled+.slider>.thumb{background-color:#0000005c}@media (prefers-color-scheme: dark){input:not(:checked):disabled+.slider>.thumb{background-color:#ffffff5d}}input:checked:not(:active):not(:disabled)+.slider:not(:hover){background-color:#0067c0;border-color:#0067c0}@media (prefers-color-scheme: dark){input:checked:not(:active):not(:disabled)+.slider:not(:hover){background-color:#4cc2ff;border-color:#4cc2ff}}input:checked:not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:#fff}@media (prefers-color-scheme: dark){input:checked:not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:#000}}input:checked:not(:active):not(:disabled)+.slider:hover{background-color:#0067c0e6;border-color:#0067c0e6}@media (prefers-color-scheme: dark){input:checked:not(:active):not(:disabled)+.slider:hover{background-color:#4cc2ffe6;border-color:#4cc2ffe6}}input:checked:not(:active):not(:disabled)+.slider:hover>.thumb{background-color:#fff}@media (prefers-color-scheme: dark){input:checked:not(:active):not(:disabled)+.slider:hover>.thumb{background-color:#000}}input:checked:active:not(:disabled)+.slider{background-color:#0067c0cc;border-color:#0067c0cc}@media (prefers-color-scheme: dark){input:checked:active:not(:disabled)+.slider{background-color:#4cc2ffcc;border-color:#4cc2ffcc}}input:checked:active:not(:disabled)+.slider>.thumb{background-color:#fff}@media (prefers-color-scheme: dark){input:checked:active:not(:disabled)+.slider>.thumb{background-color:#000}}input:checked:disabled+.slider{background-color:#ffffff37;border-color:#ffffff37}@media (prefers-color-scheme: dark){input:checked:disabled+.slider{background-color:#ffffff28;border-color:#ffffff28}}input:checked:disabled+.slider>.thumb{background-color:#fff}@media (prefers-color-scheme: dark){input:checked:disabled+.slider>.thumb{background-color:#ffffff87}}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 .25s;background-color:#00000006}@media (prefers-color-scheme: dark){.slider{background-color:#00000019}}.thumb{display:grid;width:12px;height:12px;border-radius:7px;align-self:center;margin:0 3px;transition:transform .25s;transition:width .167s;transition:margin-left .167s}\n"] }); }
+class GridProperty {
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleSwitch, decorators: [{
-            type: Component,
-            args: [{ selector: 'ToggleSwitch', template: `<label class="container">
-    <input type="checkbox" [checked]="IsChecked" (change)="onIsCheckedChange($event)" [disabled]="!IsEnabled">
-    <div class="slider">
-      <div class="thumb"></div>
-    </div>
-    <div class="content"><ng-content/></div>
-  </label>`, styles: [".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:#00000006;border-color:#00000072}@media (prefers-color-scheme: dark){input:not(:checked):not(:active):not(:disabled)+.slider:not(:hover){background-color:#00000019;border-color:#ffffff8b}}input:not(:checked):not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:#0000009e}@media (prefers-color-scheme: dark){input:not(:checked):not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:#ffffffc5}}input:not(:checked):not(:active):not(:disabled)+.slider:hover{background-color:#0000000f;border-color:#00000072}@media (prefers-color-scheme: dark){input:not(:checked):not(:active):not(:disabled)+.slider:hover{background-color:#ffffff0b;border-color:#ffffff8b}}input:not(:checked):not(:active):not(:disabled)+.slider:hover>.thumb{background-color:#0000009e}@media (prefers-color-scheme: dark){input:not(:checked):not(:active):not(:disabled)+.slider:hover>.thumb{background-color:#ffffffc5}}input:not(:checked):active:not(:disabled)+.slider{background-color:#00000018;border-color:#00000072}@media (prefers-color-scheme: dark){input:not(:checked):active:not(:disabled)+.slider{background-color:#ffffff12;border-color:#ffffff8b}}input:not(:checked):active:not(:disabled)+.slider>.thumb{background-color:#0000009e}@media (prefers-color-scheme: dark){input:not(:checked):active:not(:disabled)+.slider>.thumb{background-color:#ffffffc5}}input:not(:checked):disabled+.slider{background-color:#fff0;border-color:#00000037}@media (prefers-color-scheme: dark){input:not(:checked):disabled+.slider{background-color:#fff0;border-color:#ffffff28}}input:not(:checked):disabled+.slider>.thumb{background-color:#0000005c}@media (prefers-color-scheme: dark){input:not(:checked):disabled+.slider>.thumb{background-color:#ffffff5d}}input:checked:not(:active):not(:disabled)+.slider:not(:hover){background-color:#0067c0;border-color:#0067c0}@media (prefers-color-scheme: dark){input:checked:not(:active):not(:disabled)+.slider:not(:hover){background-color:#4cc2ff;border-color:#4cc2ff}}input:checked:not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:#fff}@media (prefers-color-scheme: dark){input:checked:not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:#000}}input:checked:not(:active):not(:disabled)+.slider:hover{background-color:#0067c0e6;border-color:#0067c0e6}@media (prefers-color-scheme: dark){input:checked:not(:active):not(:disabled)+.slider:hover{background-color:#4cc2ffe6;border-color:#4cc2ffe6}}input:checked:not(:active):not(:disabled)+.slider:hover>.thumb{background-color:#fff}@media (prefers-color-scheme: dark){input:checked:not(:active):not(:disabled)+.slider:hover>.thumb{background-color:#000}}input:checked:active:not(:disabled)+.slider{background-color:#0067c0cc;border-color:#0067c0cc}@media (prefers-color-scheme: dark){input:checked:active:not(:disabled)+.slider{background-color:#4cc2ffcc;border-color:#4cc2ffcc}}input:checked:active:not(:disabled)+.slider>.thumb{background-color:#fff}@media (prefers-color-scheme: dark){input:checked:active:not(:disabled)+.slider>.thumb{background-color:#000}}input:checked:disabled+.slider{background-color:#ffffff37;border-color:#ffffff37}@media (prefers-color-scheme: dark){input:checked:disabled+.slider{background-color:#ffffff28;border-color:#ffffff28}}input:checked:disabled+.slider>.thumb{background-color:#fff}@media (prefers-color-scheme: dark){input:checked:disabled+.slider>.thumb{background-color:#ffffff87}}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 .25s;background-color:#00000006}@media (prefers-color-scheme: dark){.slider{background-color:#00000019}}.thumb{display:grid;width:12px;height:12px;border-radius:7px;align-self:center;margin:0 3px;transition:transform .25s;transition:width .167s;transition:margin-left .167s}\n"] }]
-        }] });
-
-class ScrollViewer extends FrameworkElement {
+class GridDirective {
     constructor() {
-        super(...arguments);
-        this.HorizontalScrollMode = 'Enabled';
-        this.VerticalScrollMode = 'Enabled';
+        this.Grid = new GridProperty();
     }
-    static toOverflow(value) {
-        switch (value) {
-            case 'Disabled':
-                return 'hidden';
-            case 'Enabled':
-                return 'scroll';
-            case 'Auto':
-                return 'auto';
-        }
+    get gridColumnStart() {
+        return this.Grid.Column !== undefined ? this.Grid.Column + 1 : undefined;
+    }
+    get gridRowStart() {
+        return this.Grid.Row !== undefined ? this.Grid.Row + 1 : undefined;
     }
-    get overflowX() {
-        return ScrollViewer.toOverflow(this.HorizontalScrollMode);
+    get gridColumnEnd() {
+        return this.Grid.ColumnSpan !== undefined ? ('span ' + this.Grid.ColumnSpan) : undefined;
     }
-    get overflowY() {
-        return ScrollViewer.toOverflow(this.VerticalScrollMode);
+    get gridRowEnd() {
+        return this.Grid.RowSpan !== undefined ? ('span ' + this.Grid.RowSpan) : undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScrollViewer, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ScrollViewer, isStandalone: true, selector: "ScrollViewer", inputs: { HorizontalScrollMode: "HorizontalScrollMode", VerticalScrollMode: "VerticalScrollMode" }, host: { properties: { "style.overflow-x": "this.overflowX", "style.overflow-y": "this.overflowY" } }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: GridDirective, isStandalone: false, selector: "[Grid]", inputs: { Grid: "Grid" }, host: { properties: { "style.grid-column-start": "this.gridColumnStart", "style.grid-row-start": "this.gridRowStart", "style.grid-column-end": "this.gridColumnEnd", "style.grid-row-end": "this.gridRowEnd" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScrollViewer, decorators: [{
-            type: Component,
-            args: [{ selector: 'ScrollViewer', template: `<ng-content/>`, styles: [":host{display:grid}\n"] }]
-        }], propDecorators: { HorizontalScrollMode: [{
-                type: Input
-            }], VerticalScrollMode: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[Grid]',
+                    standalone: false
+                }]
+        }], propDecorators: { Grid: [{
                 type: Input
-            }], overflowX: [{
+            }], gridColumnStart: [{
+                type: HostBinding,
+                args: ['style.grid-column-start']
+            }], gridRowStart: [{
+                type: HostBinding,
+                args: ['style.grid-row-start']
+            }], gridColumnEnd: [{
+                type: HostBinding,
+                args: ['style.grid-column-end']
+            }], gridRowEnd: [{
+                type: HostBinding,
+                args: ['style.grid-row-end']
+            }] } });
+class GridRowDirective {
+    get gridRowStart() {
+        return this.Row !== undefined ? parseInt(this.Row) + 1 : undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: GridRowDirective, isStandalone: false, selector: "[Grid-Row]", inputs: { Row: ["Grid-Row", "Row"] }, host: { properties: { "style.grid-row-start": "this.gridRowStart" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridRowDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[Grid-Row]',
+                    standalone: false
+                }]
+        }], propDecorators: { Row: [{
+                type: Input,
+                args: ['Grid-Row']
+            }], gridRowStart: [{
+                type: HostBinding,
+                args: ['style.grid-row-start']
+            }] } });
+class GridColumnDirective {
+    get gridColumnStart() {
+        return this.Column !== undefined ? parseInt(this.Column) + 1 : undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: GridColumnDirective, isStandalone: false, selector: "[Grid-Column]", inputs: { Column: ["Grid-Column", "Column"] }, host: { properties: { "style.grid-column-start": "this.gridColumnStart" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridColumnDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[Grid-Column]',
+                    standalone: false
+                }]
+        }], propDecorators: { Column: [{
+                type: Input,
+                args: ['Grid-Column']
+            }], gridColumnStart: [{
+                type: HostBinding,
+                args: ['style.grid-column-start']
+            }] } });
+class GridRowSpanDirective {
+    get gridRowEnd() {
+        return this.RowSpan !== undefined ? ('span ' + this.RowSpan) : undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridRowSpanDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: GridRowSpanDirective, isStandalone: false, selector: "[Grid-RowSpan]", inputs: { RowSpan: ["Grid-RowSpan", "RowSpan"] }, host: { properties: { "style.grid-row-end": "this.gridRowEnd" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridRowSpanDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[Grid-RowSpan]',
+                    standalone: false
+                }]
+        }], propDecorators: { RowSpan: [{
+                type: Input,
+                args: ['Grid-RowSpan']
+            }], gridRowEnd: [{
                 type: HostBinding,
-                args: ['style.overflow-x']
-            }], overflowY: [{
+                args: ['style.grid-row-end']
+            }] } });
+class GridColumnSpanDirective {
+    get gridColumnEnd() {
+        return this.ColumnSpan !== undefined ? ('span ' + this.ColumnSpan) : undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridColumnSpanDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: GridColumnSpanDirective, isStandalone: false, selector: "[Grid-ColumnSpan]", inputs: { ColumnSpan: ["Grid-ColumnSpan", "ColumnSpan"] }, host: { properties: { "style.grid-column-end": "this.gridColumnEnd" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridColumnSpanDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[Grid-ColumnSpan]',
+                    standalone: false
+                }]
+        }], propDecorators: { ColumnSpan: [{
+                type: Input,
+                args: ['Grid-ColumnSpan']
+            }], gridColumnEnd: [{
                 type: HostBinding,
-                args: ['style.overflow-y']
+                args: ['style.grid-column-end']
             }] } });
+const GridComponents = [
+    GridComponent,
+    GridDirective,
+    GridRowDirective,
+    GridRowSpanDirective,
+    GridColumnDirective,
+    GridColumnSpanDirective
+];
+class GridModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: GridModule, declarations: [GridComponent, GridDirective, GridRowDirective, GridRowSpanDirective, GridColumnDirective, GridColumnSpanDirective], exports: [GridComponent, GridDirective, GridRowDirective, GridRowSpanDirective, GridColumnDirective, GridColumnSpanDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: GridComponents,
+                    exports: GridComponents
+                }]
+        }] });
 
-class ToolTipProperty {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToolTipProperty, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: ToolTipProperty, isStandalone: false, selector: "[ToolTipService-ToolTip]", inputs: { ToolTip: ["ToolTipService-ToolTip", "ToolTip"] }, host: { properties: { "attr.title": "this.ToolTip" } }, ngImport: i0 }); }
+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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToolTipProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToolTipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ToolTipService-ToolTip]',
@@ -893,35 +1549,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: HostBinding,
                 args: ['attr.title']
             }] } });
-class ToolTipService {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToolTipService, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: ToolTipService, declarations: [ToolTipProperty], exports: [ToolTipProperty] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToolTipService }); }
+class ToolTipServiceModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToolTipServiceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: ToolTipServiceModule, declarations: [ToolTipDirective], exports: [ToolTipDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToolTipServiceModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToolTipService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToolTipServiceModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ToolTipProperty],
-                    exports: [ToolTipProperty]
+                    declarations: [ToolTipDirective],
+                    exports: [ToolTipDirective]
                 }]
         }] });
 
-class XamlRoot {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: XamlRoot, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: XamlRoot, isStandalone: true, selector: "XamlRoot", ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;background-color:#f3f3f3}:host::ng-deep *{font-family:Segoe UI,Arial,sans-serif;font-size:10pt;color:#000}@media (prefers-color-scheme: dark){:host{background-color:#202020}:host::ng-deep *{color:#fff}}\n"] }); }
+class TextBoxComponent extends FrameworkElementComponent {
+    constructor() {
+        super(...arguments);
+        this.IsEnabled = true;
+        this.PlaceholderText = '';
+        this.TextChange = new EventEmitter();
+        this.TextAlignment = 'Left';
+        this.TextWrapping = 'NoWrap';
+        this._text = '';
+    }
+    get Text() {
+        return this._text;
+    }
+    set Text(value) {
+        if (value == this._text)
+            return;
+        this._text = value;
+        this.TextChange.emit(value);
+    }
+    onChange(event) {
+        this.Text = (event.target).value;
+    }
+    onContextMenu(event) {
+        event.stopPropagation();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TextBoxComponent, isStandalone: true, selector: "TextBox", inputs: { IsEnabled: "IsEnabled", PlaceholderText: "PlaceholderText", TextAlignment: "TextAlignment", TextWrapping: "TextWrapping", Text: "Text" }, outputs: { TextChange: "TextChange" }, host: { listeners: { "contextmenu": "onContextMenu($event)" } }, usesInheritance: true, ngImport: i0, template: `<input *ngIf="TextWrapping === 'NoWrap'" type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"/>
+  <textarea *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (change)="onChange($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"></textarea>`, isInline: true, styles: [":host{position:relative}:host{display:grid}textarea{resize:none}input,textarea{outline-style:none;border-style:solid;border-width:1px;border-radius:var(--ControlCornerRadius);padding:6px;background-color:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);border-bottom-color:var(--ControlStrongStrokeColorDefault);color:var(--TextFillColorPrimary)}input::placeholder,textarea::placeholder{color:var(--TextFillColorSecondary);opacity:1}input:hover,textarea:hover{background-color:var(--ControlFillColorSecondary)}input:focus,input:active,textarea:focus,textarea:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}input:disabled,textarea:disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor);color:var(--TextOnAccentFillColorPrimary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'TextBox', imports: [CommonModule], template: `<input *ngIf="TextWrapping === 'NoWrap'" type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"/>
+  <textarea *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (change)="onChange($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"></textarea>`, styles: [":host{position:relative}:host{display:grid}textarea{resize:none}input,textarea{outline-style:none;border-style:solid;border-width:1px;border-radius:var(--ControlCornerRadius);padding:6px;background-color:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);border-bottom-color:var(--ControlStrongStrokeColorDefault);color:var(--TextFillColorPrimary)}input::placeholder,textarea::placeholder{color:var(--TextFillColorSecondary);opacity:1}input:hover,textarea:hover{background-color:var(--ControlFillColorSecondary)}input:focus,input:active,textarea:focus,textarea:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}input:disabled,textarea:disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor);color:var(--TextOnAccentFillColorPrimary)}\n"] }]
+        }], propDecorators: { IsEnabled: [{
+                type: Input
+            }], PlaceholderText: [{
+                type: Input
+            }], TextChange: [{
+                type: Output
+            }], TextAlignment: [{
+                type: Input
+            }], TextWrapping: [{
+                type: Input
+            }], Text: [{
+                type: Input
+            }], onContextMenu: [{
+                type: HostListener,
+                args: ['contextmenu', ['$event']]
+            }] } });
+
+class XamlRootComponent {
+    onContextMenu(event) {
+        event.preventDefault();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: XamlRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: XamlRootComponent, isStandalone: true, selector: "XamlRoot", host: { listeners: { "contextmenu": "onContextMenu($event)" } }, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;background-color:#f3f3f3;overflow:hidden;-webkit-user-select:none;user-select:none}:host::ng-deep *{font-family:Segoe UI,Arial,sans-serif;font-size:10pt;color:#000}@media (prefers-color-scheme: dark){:host{background-color:#202020}:host::ng-deep *{color:#fff}}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: XamlRoot, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: XamlRootComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'XamlRoot', template: `<ng-content/>`, styles: [":host{display:grid;background-color:#f3f3f3}:host::ng-deep *{font-family:Segoe UI,Arial,sans-serif;font-size:10pt;color:#000}@media (prefers-color-scheme: dark){:host{background-color:#202020}:host::ng-deep *{color:#fff}}\n"] }]
-        }] });
+            args: [{ selector: 'XamlRoot', template: `<ng-content/>`, styles: [":host{display:grid;background-color:#f3f3f3;overflow:hidden;-webkit-user-select:none;user-select:none}:host::ng-deep *{font-family:Segoe UI,Arial,sans-serif;font-size:10pt;color:#000}@media (prefers-color-scheme: dark){:host{background-color:#202020}:host::ng-deep *{color:#fff}}\n"] }]
+        }], propDecorators: { onContextMenu: [{
+                type: HostListener,
+                args: ['contextmenu', ['$event']]
+            }] } });
 
 /*
  * Public API Surface of xaml-ui
  */
+//Basic input
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { Border, Button, CheckBox, Flyout, FontIcon, FrameworkElement, ListBox, RadioButton, RadioButtonGroup, ScrollViewer, Slider, StackPanel, TextBlock, TextBox, ToggleButton, ToggleSwitch, ToolTipProperty, ToolTipService, XamlRoot };
+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 };
 //# sourceMappingURL=xaml-ui.mjs.map