xaml-ui 1.0.30 → 1.0.34

package/fesm2022/xaml-ui.mjs

@@ -1,17 +1,17 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Input, Component, EventEmitter, HostListener, ContentChild, Output, ViewChild, TemplateRef, ViewEncapsulation, Optional, Directive, NgModule, ViewContainerRef, Renderer2 } from '@angular/core';
+import { HostBinding, Input, Component, EventEmitter, HostListener, ContentChild, Output, ViewChild, Directive, NgModule, TemplateRef, ChangeDetectionStrategy, ViewEncapsulation, Optional, ViewContainerRef, Renderer2 } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgTemplateOutlet } from '@angular/common';
 import { CdkScrollable } from '@angular/cdk/scrolling';
 import { trigger, transition, animate, keyframes, style } from '@angular/animations';
 import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayConfig, Overlay } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
+import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
 
-function toJustification(value) {
+function ToJustification(value) {
     return value.toLowerCase();
 }
-function toAlignment(value) {
+function ToAlignment(value) {
     switch (value) {
         case 'Top':
             return 'flex-start';
@@ -37,33 +37,33 @@ class FrameworkElementComponent {
         this._id = FrameworkElementComponent._nextId++;
     }
     get overflow() {
-        return 'hidden';
+        return undefined; //'clip';
     }
     get minWidth() {
-        if (this.MinWidth !== undefined)
-            return this.MinWidth;
-        return this.MaxWidth === undefined && this.HorizontalAlignment === 'Stretch' ? 'fit-content' : undefined;
+        return this.MinWidth;
     }
     get minHeight() {
-        if (this.MinHeight !== undefined)
-            return this.MinHeight;
-        return this.MaxHeight === undefined && this.VerticalAlignment === 'Stretch' ? 'fit-content' : undefined;
+        return this.MinHeight;
     }
     get width() {
-        if (this.Width !== undefined)
-            return this.Width;
-        return this.HorizontalAlignment === 'Stretch' ? undefined : 'fit-content';
+        return this.Width;
     }
     get height() {
-        if (this.Height !== undefined)
-            return this.Height;
-        return this.VerticalAlignment === 'Stretch' ? undefined : 'fit-content';
+        return this.Height;
     }
     get justifySelf() {
-        return toJustification(this.HorizontalAlignment);
+        return ToJustification(this.HorizontalAlignment);
     }
     get alignSelf() {
-        return toAlignment(this.VerticalAlignment);
+        return ToAlignment(this.VerticalAlignment);
+    }
+    //True on Safari and on the other WebKit based browsers of Apple platforms, which share its layout
+    //engine. Evaluated once, as host bindings are re-read on every change detection pass.
+    static get IsSafari() {
+        if (this._isSafari === undefined) {
+            this._isSafari = typeof navigator !== 'undefined' && /apple/i.test(navigator.vendor ?? '');
+        }
+        return this._isSafari;
     }
     static { this._nextId = 1; }
     static { this.DefaultStyles = `:host {
@@ -251,7 +251,7 @@ class TextBlockComponent extends FrameworkElementComponent {
             case 'Clip':
                 return 'clip';
             case 'CharacterEllipsis':
-                return 'Ellipsis';
+                return 'ellipsis';
             default:
                 return undefined;
         }
@@ -334,8 +334,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 args: ['style.white-space']
             }] } });
 
-const ButtonTemplate = `<ng-content *ngIf="Content === undefined"/>
-  <TextBlock *ngIf="Content !== undefined">{{Content}}</TextBlock>`;
+const ButtonTemplate = `<TextBlock *ngIf="Content !== undefined" [Text]="Content"/>
+  <ng-content/>`;
 class ButtonComponent extends BorderComponent {
     constructor() {
         super(...arguments);
@@ -344,12 +344,20 @@ class ButtonComponent extends BorderComponent {
         this.HorizontalContentAlignment = 'Center';
         this.VerticalContentAlignment = 'Center';
         this.type = 'button';
+        this.isPressed = false;
     }
     get alignContent() {
-        return toAlignment(this.VerticalContentAlignment);
+        return ToAlignment(this.VerticalContentAlignment);
     }
     get justifyContent() {
-        return toJustification(this.HorizontalContentAlignment);
+        return ToJustification(this.HorizontalContentAlignment);
+    }
+    onPointerDown(event) {
+        if (this.IsEnabled && event.button === 0)
+            this.isPressed = true;
+    }
+    onPointerUp(event) {
+        this.isPressed = false;
     }
     get disabled() {
         return this.IsEnabled ? undefined : true;
@@ -364,11 +372,11 @@ class ButtonComponent extends BorderComponent {
         this._flyout?.Show();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ButtonComponent, isStandalone: true, selector: "Button", inputs: { IsEnabled: "IsEnabled", Content: "Content", HorizontalContentAlignment: "HorizontalContentAlignment", VerticalContentAlignment: "VerticalContentAlignment" }, outputs: { Click: "Click" }, host: { listeners: { "click": "onClick($event)" }, properties: { "style.align-content": "this.alignContent", "style.justify-content": "this.justifyContent", "attr.type": "this.type", "attr.disabled": "this.disabled", "class.disabled": "this.disabled", "class.flyout-open": "this.flyoutOpen" } }, queries: [{ propertyName: "_flyout", first: true, predicate: ["xaml-flyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content *ngIf=\"Content === undefined\"/>\n  <TextBlock *ngIf=\"Content !== undefined\">{{Content}}</TextBlock>", isInline: true, styles: [":host{position:relative}:host{display:grid;padding:var(--ButtonPadding);border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;box-sizing:border-box;font-size:var(--SystemFontSize);font-family:var(--SystemFontFamily);background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle{border-style:none;border-width:0;background-color:transparent;color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.HyperlinkButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle:not(.disabled){cursor:pointer}:host.HyperlinkButtonStyle::ng-deep *{color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:not(.checked):active:not(.flyout-open):not(.disabled){color:var(--AccentFillColorSecondary)}:host.HyperlinkButtonStyle:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--AccentFillColorSecondary)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextBlockComponent, selector: "TextBlock", inputs: ["FontFamily", "Text", "FontSize", "FontStyle", "FontWeight", "Foreground", "TextAlignment", "IsTextSelectionEnabled", "TextDecorations", "TextTrimming", "TextWrapping"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ButtonComponent, isStandalone: true, selector: "Button", inputs: { IsEnabled: "IsEnabled", Content: "Content", HorizontalContentAlignment: "HorizontalContentAlignment", VerticalContentAlignment: "VerticalContentAlignment" }, outputs: { Click: "Click" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp($event)", "pointercancel": "onPointerUp($event)", "pointerleave": "onPointerUp($event)", "click": "onClick($event)" }, properties: { "style.align-content": "this.alignContent", "style.justify-content": "this.justifyContent", "attr.type": "this.type", "class.pressed": "this.isPressed", "attr.disabled": "this.disabled", "class.disabled": "this.disabled", "class.flyout-open": "this.flyoutOpen" } }, queries: [{ propertyName: "_flyout", first: true, predicate: ["xaml-flyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<TextBlock *ngIf=\"Content !== undefined\" [Text]=\"Content\"/>\n  <ng-content/>", isInline: true, styles: [":host{position:relative}:host{display:grid;padding:var(--ButtonPadding);border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;box-sizing:border-box;font-size:var(--SystemFontSize);font-family:var(--SystemFontFamily);background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked).pressed:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked).pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked.pressed:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked.pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle{border-style:none;border-width:0;background-color:transparent;color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.HyperlinkButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle:not(.disabled){cursor:pointer}:host.HyperlinkButtonStyle::ng-deep *{color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:not(.checked).pressed:not(.flyout-open):not(.disabled){color:var(--AccentFillColorSecondary)}:host.HyperlinkButtonStyle:not(.checked).pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--AccentFillColorSecondary)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle.pressed:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextBlockComponent, selector: "TextBlock", inputs: ["FontFamily", "Text", "FontSize", "FontStyle", "FontWeight", "Foreground", "TextAlignment", "IsTextSelectionEnabled", "TextDecorations", "TextTrimming", "TextWrapping"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'Button', imports: [CommonModule, TextBlockComponent], template: ButtonTemplate, styles: [":host{position:relative}:host{display:grid;padding:var(--ButtonPadding);border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;box-sizing:border-box;font-size:var(--SystemFontSize);font-family:var(--SystemFontFamily);background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle{border-style:none;border-width:0;background-color:transparent;color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.HyperlinkButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle:not(.disabled){cursor:pointer}:host.HyperlinkButtonStyle::ng-deep *{color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:not(.checked):active:not(.flyout-open):not(.disabled){color:var(--AccentFillColorSecondary)}:host.HyperlinkButtonStyle:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--AccentFillColorSecondary)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"] }]
+            args: [{ selector: 'Button', imports: [CommonModule, TextBlockComponent], template: ButtonTemplate, styles: [":host{position:relative}:host{display:grid;padding:var(--ButtonPadding);border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;box-sizing:border-box;font-size:var(--SystemFontSize);font-family:var(--SystemFontFamily);background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked).pressed:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked).pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked.pressed:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked.pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle{border-style:none;border-width:0;background-color:transparent;color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.HyperlinkButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle:not(.disabled){cursor:pointer}:host.HyperlinkButtonStyle::ng-deep *{color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:not(.checked).pressed:not(.flyout-open):not(.disabled){color:var(--AccentFillColorSecondary)}:host.HyperlinkButtonStyle:not(.checked).pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--AccentFillColorSecondary)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle.pressed:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"] }]
         }], propDecorators: { IsEnabled: [{
                 type: Input
             }], Content: [{
@@ -388,6 +396,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }], type: [{
                 type: HostBinding,
                 args: ['attr.type']
+            }], isPressed: [{
+                type: HostBinding,
+                args: ['class.pressed']
+            }], onPointerDown: [{
+                type: HostListener,
+                args: ['pointerdown', ['$event']]
+            }], onPointerUp: [{
+                type: HostListener,
+                args: ['pointerup', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['pointercancel', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['pointerleave', ['$event']]
             }], disabled: [{
                 type: HostBinding,
                 args: ['attr.disabled']
@@ -413,13 +436,13 @@ class HyperlinkButtonComponent extends ButtonComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: HyperlinkButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: HyperlinkButtonComponent, isStandalone: true, selector: "HyperlinkButton", inputs: { NavigateUri: "NavigateUri" }, host: { classAttribute: "HyperlinkButtonStyle" }, usesInheritance: true, ngImport: i0, template: "<ng-content *ngIf=\"Content === undefined\"/>\n  <TextBlock *ngIf=\"Content !== undefined\">{{Content}}</TextBlock>", isInline: true, styles: [":host{position:relative}:host{display:grid;padding:var(--ButtonPadding);border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;box-sizing:border-box;font-size:var(--SystemFontSize);font-family:var(--SystemFontFamily);background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle{border-style:none;border-width:0;background-color:transparent;color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.HyperlinkButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle:not(.disabled){cursor:pointer}:host.HyperlinkButtonStyle::ng-deep *{color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:not(.checked):active:not(.flyout-open):not(.disabled){color:var(--AccentFillColorSecondary)}:host.HyperlinkButtonStyle:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--AccentFillColorSecondary)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextBlockComponent, selector: "TextBlock", inputs: ["FontFamily", "Text", "FontSize", "FontStyle", "FontWeight", "Foreground", "TextAlignment", "IsTextSelectionEnabled", "TextDecorations", "TextTrimming", "TextWrapping"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: HyperlinkButtonComponent, isStandalone: true, selector: "HyperlinkButton", inputs: { NavigateUri: "NavigateUri" }, host: { classAttribute: "HyperlinkButtonStyle" }, usesInheritance: true, ngImport: i0, template: "<TextBlock *ngIf=\"Content !== undefined\" [Text]=\"Content\"/>\n  <ng-content/>", isInline: true, styles: [":host{position:relative}:host{display:grid;padding:var(--ButtonPadding);border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;box-sizing:border-box;font-size:var(--SystemFontSize);font-family:var(--SystemFontFamily);background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked).pressed:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked).pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked.pressed:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked.pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle{border-style:none;border-width:0;background-color:transparent;color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.HyperlinkButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle:not(.disabled){cursor:pointer}:host.HyperlinkButtonStyle::ng-deep *{color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:not(.checked).pressed:not(.flyout-open):not(.disabled){color:var(--AccentFillColorSecondary)}:host.HyperlinkButtonStyle:not(.checked).pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--AccentFillColorSecondary)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle.pressed:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextBlockComponent, selector: "TextBlock", inputs: ["FontFamily", "Text", "FontSize", "FontStyle", "FontWeight", "Foreground", "TextAlignment", "IsTextSelectionEnabled", "TextDecorations", "TextTrimming", "TextWrapping"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: HyperlinkButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'HyperlinkButton', standalone: true, imports: [CommonModule, TextBlockComponent], template: ButtonTemplate, host: {
                         'class': 'HyperlinkButtonStyle'
-                    }, styles: [":host{position:relative}:host{display:grid;padding:var(--ButtonPadding);border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;box-sizing:border-box;font-size:var(--SystemFontSize);font-family:var(--SystemFontFamily);background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle{border-style:none;border-width:0;background-color:transparent;color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.HyperlinkButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle:not(.disabled){cursor:pointer}:host.HyperlinkButtonStyle::ng-deep *{color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:not(.checked):active:not(.flyout-open):not(.disabled){color:var(--AccentFillColorSecondary)}:host.HyperlinkButtonStyle:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--AccentFillColorSecondary)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"] }]
+                    }, styles: [":host{position:relative}:host{display:grid;padding:var(--ButtonPadding);border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;box-sizing:border-box;font-size:var(--SystemFontSize);font-family:var(--SystemFontFamily);background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked).pressed:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked).pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked.pressed:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked.pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle{border-style:none;border-width:0;background-color:transparent;color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.HyperlinkButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle:not(.disabled){cursor:pointer}:host.HyperlinkButtonStyle::ng-deep *{color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:not(.checked).pressed:not(.flyout-open):not(.disabled){color:var(--AccentFillColorSecondary)}:host.HyperlinkButtonStyle:not(.checked).pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--AccentFillColorSecondary)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle.pressed:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"] }]
         }], propDecorators: { NavigateUri: [{
                 type: Input
             }] } });
@@ -465,1493 +488,1921 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Output
             }] } });
 
-function colorToString(value) {
-    return '#' + value.toString(16).padStart(8, '0');
-}
-function stringToColor(value) {
-    return parseInt(value.replace('#', ''), 16);
-}
-function colorToRgb(value) {
-    return {
-        r: value >> 16 & 0xff,
-        g: value >> 8 & 0xff,
-        b: value & 0xff,
-        a: value >> 24 & 0xff
-    };
-}
-function rgbToHsl(rgb) {
-    const { r: r255, g: g255, b: b255, a: a255 } = rgb;
-    const r = r255 / 255;
-    const g = g255 / 255;
-    const b = b255 / 255;
-    const a = a255 / 255;
-    let max = Math.max(r, g, b);
-    let min = Math.min(r, g, b);
-    let h = (max + min) / 2;
-    let s = h;
-    let l = h;
-    if (max === min) {
-        // Achromatic
-        return { h: 0, s: 0, l: l * 100, a: a * 100 };
-    }
-    const d = max - min;
-    s = l >= 0.5 ? d / (2 - (max + min)) : d / (max + min);
-    switch (max) {
-        case r:
-            h = ((g - b) / d + 0) * 60;
-            break;
-        case g:
-            h = ((b - r) / d + 2) * 60;
-            break;
-        case b:
-            h = ((r - g) / d + 4) * 60;
-            break;
-    }
-    return { h, s: s * 100, l: l * 100, a: a * 100 };
+function AreNearEqual(a, b, tolerance) {
+    return Math.abs(a - b) < tolerance;
 }
 
-class ColorPickerComponent extends FrameworkElementComponent {
+//A Color as #aarrggbb. Unsigned first, or a colour with the top alpha bit set
+//would format as its negative.
+function FormatColor(value) {
+    return '#' + (value >>> 0).toString(16).padStart(8, '0');
+}
+function ParseColor(value) {
+    return parseInt(value.replace('#', ''), 16) >>> 0;
+}
+//Half a step of the 8 bit form every color ends up in: two colors closer than
+//this round to the same bytes and so cannot be told apart once rendered.
+const ColorTolerance = 0.5;
+const HueTolerance = ColorTolerance / 255;
+//Hue is an angle, so 0.999 and 0.001 are all but the same place on the wheel.
+function AreHueNearEqual(a, b) {
+    let difference = Math.abs(a - b) % 1;
+    return Math.min(difference, 1 - difference) < HueTolerance;
+}
+//Color with 0..255 channels, the unpacked form of a 0xAARRGGBB Color.
+class ColorRgba {
+    constructor(R, G, B, A) {
+        this.R = R;
+        this.G = G;
+        this.B = B;
+        this.A = A;
+    }
+    ToNumber() {
+        //Unsigned: a top bit set in the alpha byte would otherwise make this negative.
+        return ((this.A << 24) | (this.R << 16) | (this.G << 8) | this.B) >>> 0;
+    }
+    static FromNumber(value) {
+        let a = (value >> 24) & 0xff;
+        let r = (value >> 16) & 0xff;
+        let g = (value >> 8) & 0xff;
+        let b = value & 0xff;
+        return new ColorRgba(r, g, b, a);
+    }
+    Clone() {
+        return new ColorRgba(this.R, this.G, this.B, this.A);
+    }
+    static AreNearEqual(a, b) {
+        return AreNearEqual(a.R, b.R, ColorTolerance)
+            && AreNearEqual(a.G, b.G, ColorTolerance)
+            && AreNearEqual(a.B, b.B, ColorTolerance)
+            && AreNearEqual(a.A, b.A, ColorTolerance);
+    }
+    ToHsla() {
+        return ColorHsla.FromRgba(this);
+    }
+    ToHsva() {
+        return ColorHsva.FromRgba(this);
+    }
+    ToString() {
+        return `rgba(${this.R}, ${this.G}, ${this.B}, ${this.A / 255})`;
+    }
+}
+//Color in hue/saturation/lightness form; every channel, hue included, is 0..1.
+class ColorHsla {
+    constructor(H, S, L, A) {
+        this.H = H;
+        this.S = S;
+        this.L = L;
+        this.A = A;
+    }
+    static FromRgba(rgba) {
+        let r = rgba.R / 255;
+        let g = rgba.G / 255;
+        let b = rgba.B / 255;
+        let a = rgba.A / 255;
+        let max = Math.max(r, g, b);
+        let min = Math.min(r, g, b);
+        let h = 0;
+        let s = 0;
+        let l = (max + min) / 2;
+        if (max !== min) {
+            let d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch (max) {
+                case r:
+                    h = (g - b) / d + (g < b ? 6 : 0);
+                    break;
+                case g:
+                    h = (b - r) / d + 2;
+                    break;
+                case b:
+                    h = (r - g) / d + 4;
+                    break;
+            }
+            h /= 6;
+        }
+        return new ColorHsla(h, s, l, a);
+    }
+    ToRgba() {
+        let h = this.H;
+        let s = this.S;
+        let l = this.L;
+        let a = this.A;
+        let r, g, b;
+        if (s === 0) {
+            r = g = b = l; //achromatic
+        }
+        else {
+            const hue2rgb = (p, q, t) => {
+                if (t < 0)
+                    t += 1;
+                if (t > 1)
+                    t -= 1;
+                if (t < 1 / 6)
+                    return p + (q - p) * 6 * t;
+                if (t < 1 / 2)
+                    return q;
+                if (t < 2 / 3)
+                    return p + (q - p) * (2 / 3 - t) * 6;
+                return p;
+            };
+            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+            const p = 2 * l - q;
+            r = hue2rgb(p, q, h + 1 / 3);
+            g = hue2rgb(p, q, h);
+            b = hue2rgb(p, q, h - 1 / 3);
+        }
+        return new ColorRgba(Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), Math.round(a * 255));
+    }
+    Clone() {
+        return new ColorHsla(this.H, this.S, this.L, this.A);
+    }
+    //Use this rather than ===; see ColorRgba.AreNearEqual.
+    static AreNearEqual(a, b) {
+        return AreHueNearEqual(a.H, b.H)
+            && AreNearEqual(a.S, b.S, HueTolerance)
+            && AreNearEqual(a.L, b.L, HueTolerance)
+            && AreNearEqual(a.A, b.A, HueTolerance);
+    }
+    ToString() {
+        return `hsla(${this.H * 360}, ${this.S * 100}%, ${this.L * 100}%, ${this.A})`;
+    }
+}
+//Color in hue/saturation/value form; every channel, hue included, is 0..1.
+class ColorHsva {
+    constructor(H, S, V, A) {
+        this.H = H;
+        this.S = S;
+        this.V = V;
+        this.A = A;
+    }
+    static FromRgba(rgba) {
+        let r = rgba.R / 255;
+        let g = rgba.G / 255;
+        let b = rgba.B / 255;
+        let a = rgba.A / 255;
+        let max = Math.max(r, g, b);
+        let min = Math.min(r, g, b);
+        let d = max - min;
+        let h = 0;
+        if (d !== 0) {
+            switch (max) {
+                case r:
+                    h = (g - b) / d + (g < b ? 6 : 0);
+                    break;
+                case g:
+                    h = (b - r) / d + 2;
+                    break;
+                case b:
+                    h = (r - g) / d + 4;
+                    break;
+            }
+            h /= 6;
+        }
+        return new ColorHsva(h, max === 0 ? 0 : d / max, max, a);
+    }
+    ToRgba() {
+        let sector = this.H * 6;
+        //Wrap so a hue of exactly 1 lands back on sector 0 rather than off the end.
+        let index = Math.floor(sector) % 6;
+        let offset = sector - Math.floor(sector);
+        let v = this.V;
+        let p = v * (1 - this.S);
+        let q = v * (1 - offset * this.S);
+        let t = v * (1 - (1 - offset) * this.S);
+        let rgb = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][index];
+        return new ColorRgba(Math.round(rgb[0] * 255), Math.round(rgb[1] * 255), Math.round(rgb[2] * 255), Math.round(this.A * 255));
+    }
+    Clone() {
+        return new ColorHsva(this.H, this.S, this.V, this.A);
+    }
+    static AreNearEqual(a, b) {
+        return AreHueNearEqual(a.H, b.H)
+            && AreNearEqual(a.S, b.S, HueTolerance)
+            && AreNearEqual(a.V, b.V, HueTolerance)
+            && AreNearEqual(a.A, b.A, HueTolerance);
+    }
+    ToString() {
+        return this.ToRgba().ToString();
+    }
+}
+
+class ColorSpectrumComponent extends FrameworkElementComponent {
     constructor() {
         super(...arguments);
-        this._color = 0xffffffff;
+        this._color = new ColorHsva(0, 0, 1, 1);
+        this.HsvColorChange = new EventEmitter();
         this.ColorChange = new EventEmitter();
     }
-    get Color() {
-        return this._color;
+    //The selected color in HSV color space, full precision floating point.
+    get HsvColor() {
+        return this._color.Clone();
     }
-    set Color(value) {
-        this.setColor(value);
+    set HsvColor(value) {
+        if (ColorHsva.AreNearEqual(value, this._color))
+            return;
+        let previousColor = this.Color;
+        //Cloned in both directions, so a caller cannot reach in and change the stored
+        //color afterwards without coming back through here.
+        this._color = value.Clone();
         this.updateSelectorPosition();
-    }
-    setColor(value) {
-        if (this._color === value)
+        this.HsvColorChange.emit(this.HsvColor);
+        //Color moves less often than HsvColor, because many HSVA states share one
+        //Color: at zero brightness every hue is black, so a drag there moves the
+        //selector and reports HsvColor, but leaves Color exactly where it was.
+        let color = this.Color;
+        if (color === previousColor)
             return;
-        this._color = value;
-        this.ColorChange.emit(value);
+        this.ColorChange.emit(color);
     }
+    //The selected color as 0xAARRGGBB, brightness and alpha included.
+    get Color() {
+        return this._color.ToRgba().ToNumber();
+    }
+    set Color(value) {
+        if (value === this.Color)
+            return;
+        this.HsvColor = ColorRgba.FromNumber(value).ToHsva();
+    }
+    //The value channel, 0..1. Dims the wheel, and darkens Color with it.
+    get Brightness() {
+        return this._color.V;
+    }
+    set Brightness(value) {
+        let color = this.HsvColor;
+        color.V = value;
+        this.HsvColor = color;
+    }
+    //The alpha channel, 0..1. Fades the wheel over the checkerboard, and Color with it.
+    get Alpha() {
+        return this._color.A;
+    }
+    set Alpha(value) {
+        let color = this.HsvColor;
+        color.A = value;
+        this.HsvColor = color;
+    }
+    //The wheel is inset from the control's edge by this many px. The whole square
+    //is clickable (clicks outside the wheel clamp to the rim) and the inset gives
+    //the selector room so it never spills outside the host's overflow:hidden.
+    static { this._selectorInset = 8; }
+    get selectorInset() { return ColorSpectrumComponent._selectorInset; }
+    get ringSize() { return this.Width ?? this.Height ?? '300px'; }
+    get center() { return this._ring.nativeElement.clientWidth / 2; }
+    get radius() { return this.center - ColorSpectrumComponent._selectorInset; }
     ngAfterViewInit() {
-        let canvas = this._canvas.nativeElement;
-        canvas.width = parseInt(this.Width ?? '300');
-        canvas.height = parseInt(this.Height ?? '300');
-        let context = this._context = canvas.getContext('2d', { willReadFrequently: true });
-        let radius = canvas.width / 2;
-        // Draw hue circle
-        for (let angle = 0; angle < 360; angle++) {
-            let startAngle = (angle - 1) * (Math.PI / 180);
-            let endAngle = (angle + 1) * (Math.PI / 180);
-            context.beginPath();
-            context.moveTo(radius, radius);
-            context.arc(radius, radius, radius * 2, startAngle, endAngle);
-            context.closePath();
-            context.fillStyle = `hsl(${angle}, 100%, 50%)`;
-            context.fill();
-        }
-        // Add radial gradient for saturation
-        let gradient = context.createRadialGradient(radius, radius, 0, radius, radius, radius);
-        gradient.addColorStop(0, 'white');
-        gradient.addColorStop(1, 'transparent');
-        context.fillStyle = gradient;
-        context.fillRect(0, 0, canvas.width, canvas.height);
-        // Position sample
         this.updateSelectorPosition();
     }
     onPointerDown(event) {
-        this._canvas.nativeElement.setPointerCapture(event.pointerId);
+        if (event.button !== 0)
+            return; //left button only
+        this._ring.nativeElement.setPointerCapture(event.pointerId);
         this.onPointerMove(event);
     }
     onPointerMove(event) {
-        if (!this._canvas.nativeElement.hasPointerCapture(event.pointerId))
+        if (!this._ring.nativeElement.hasPointerCapture(event.pointerId))
             return;
-        let radius = this._canvas.nativeElement.width / 2;
-        let rawX = event.offsetX - radius;
-        let rawY = event.offsetY - radius;
-        let length = Math.sqrt(rawX * rawX + rawY * rawY);
-        let scale = length < radius ? 1 : radius / Math.sqrt(rawX * rawX + rawY * rawY);
-        let sampleX = radius + rawX * scale;
-        let sampleY = radius + rawY * scale;
-        this._selector.nativeElement.style.left = sampleX + 'px';
-        this._selector.nativeElement.style.top = sampleY + 'px';
-        let imageData = this._context.getImageData(sampleX, sampleY, 1, 1).data;
-        let [r, g, b] = imageData;
-        let color = ((0xff << 24) + (r << 16) + (g << 8) + b) >>> 0;
-        this.setColor(color);
+        let center = this.center;
+        let x = event.offsetX - center;
+        let y = event.offsetY - center;
+        let color = this.HsvColor;
+        color.H = (Math.atan2(y, x) / (2 * Math.PI) + 1) % 1;
+        color.S = Math.min(Math.sqrt(x * x + y * y) / this.radius, 1);
+        this.HsvColor = color;
     }
     updateSelectorPosition() {
-        if (!this._canvas)
+        if (!this._ring)
             return;
-        let rgb = colorToRgb(this.Color);
-        let hsl = rgbToHsl(rgb);
-        let radius = this._canvas.nativeElement.width / 2;
-        let angle = hsl.h / 180 * Math.PI;
-        let length = hsl.s / 100 * radius;
-        let x = radius + Math.cos(angle) * length;
-        let y = radius + Math.sin(angle) * length;
-        this._selector.nativeElement.style.left = x + 'px';
-        this._selector.nativeElement.style.top = y + 'px';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ColorPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ColorPickerComponent, isStandalone: true, selector: "ColorPicker", inputs: { Color: "Color" }, outputs: { ColorChange: "ColorChange" }, viewQueries: [{ propertyName: "_canvas", first: true, predicate: ["canvas"], descendants: true }, { propertyName: "_selector", first: true, predicate: ["selector"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<canvas #canvas (pointerdown)="onPointerDown($event)" (pointermove)="onPointerMove($event)"></canvas><div #selector class="selector"></div>`, isInline: true, styles: [":host{position:relative}canvas{clip-path:circle(50%);position:relative}.selector{position:absolute;transform:translate(-50%,-50%);width:10px;height:10px;border-color:#fff;border-width:2px;border-style:solid;border-radius:10px;mix-blend-mode:difference}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ColorPickerComponent, decorators: [{
+        let center = this.center;
+        let angle = this._color.H * 2 * Math.PI;
+        let length = this._color.S * this.radius;
+        this._selector.nativeElement.style.left = center + Math.cos(angle) * length + 'px';
+        this._selector.nativeElement.style.top = center + Math.sin(angle) * length + 'px';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ColorSpectrumComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ColorSpectrumComponent, isStandalone: true, selector: "ColorSpectrum", inputs: { Color: "Color", Brightness: "Brightness", Alpha: "Alpha" }, outputs: { HsvColorChange: "HsvColorChange", ColorChange: "ColorChange" }, viewQueries: [{ propertyName: "_ring", first: true, predicate: ["ring"], descendants: true }, { propertyName: "_selector", first: true, predicate: ["selector"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<div #ring class="ring" [style.width]="ringSize" [style.height]="ringSize"
+    (pointerdown)="onPointerDown($event)" (pointermove)="onPointerMove($event)">
+    <div class="checkerboard" [style.inset.px]="selectorInset"></div>
+    <div class="wheel" [style.inset.px]="selectorInset"
+      [style.opacity]="Alpha" [style.filter]="'brightness(' + Brightness + ')'"></div>
+    <div #selector class="selector"></div>
+  </div>`, isInline: true, styles: [":host{display:block;line-height:0}.ring{position:relative;touch-action:none}.checkerboard,.wheel{position:absolute;border-radius:50%;pointer-events:none}.checkerboard{background:conic-gradient(from 90deg,#ccc 25%,#fff 0 50%,#ccc 0 75%,#fff 0) 0 0/16px 16px}.wheel{background:radial-gradient(circle closest-side,#fff,#fff0),conic-gradient(from 90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.selector{position:absolute;pointer-events:none;transform:translate(-50%,-50%);width:10px;height:10px;border-color:#fff;border-width:2px;border-style:solid;border-radius:10px;mix-blend-mode:difference}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ColorSpectrumComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ColorPicker', template: `<canvas #canvas (pointerdown)="onPointerDown($event)" (pointermove)="onPointerMove($event)"></canvas><div #selector class="selector"></div>`, styles: [":host{position:relative}canvas{clip-path:circle(50%);position:relative}.selector{position:absolute;transform:translate(-50%,-50%);width:10px;height:10px;border-color:#fff;border-width:2px;border-style:solid;border-radius:10px;mix-blend-mode:difference}\n"] }]
-        }], propDecorators: { Color: [{
+            args: [{ selector: 'ColorSpectrum', template: `<div #ring class="ring" [style.width]="ringSize" [style.height]="ringSize"
+    (pointerdown)="onPointerDown($event)" (pointermove)="onPointerMove($event)">
+    <div class="checkerboard" [style.inset.px]="selectorInset"></div>
+    <div class="wheel" [style.inset.px]="selectorInset"
+      [style.opacity]="Alpha" [style.filter]="'brightness(' + Brightness + ')'"></div>
+    <div #selector class="selector"></div>
+  </div>`, styles: [":host{display:block;line-height:0}.ring{position:relative;touch-action:none}.checkerboard,.wheel{position:absolute;border-radius:50%;pointer-events:none}.checkerboard{background:conic-gradient(from 90deg,#ccc 25%,#fff 0 50%,#ccc 0 75%,#fff 0) 0 0/16px 16px}.wheel{background:radial-gradient(circle closest-side,#fff,#fff0),conic-gradient(from 90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.selector{position:absolute;pointer-events:none;transform:translate(-50%,-50%);width:10px;height:10px;border-color:#fff;border-width:2px;border-style:solid;border-radius:10px;mix-blend-mode:difference}\n"] }]
+        }], propDecorators: { HsvColorChange: [{
+                type: Output
+            }], Color: [{
                 type: Input
             }], ColorChange: [{
                 type: Output
-            }], _canvas: [{
+            }], Brightness: [{
+                type: Input
+            }], Alpha: [{
+                type: Input
+            }], _ring: [{
                 type: ViewChild,
-                args: ['canvas']
+                args: ['ring']
             }], _selector: [{
                 type: ViewChild,
                 args: ['selector']
             }] } });
 
-const SelectorItemTemplate = `<ng-container *ngIf="ItemTemplate">
-    <ng-container [ngTemplateOutlet]="ItemTemplate" [ngTemplateOutletContext]="{ $implicit: item }" [ngTemplateOutletInjector]="container.Injector" />
-    </ng-container>
-  <ng-container *ngIf="!ItemTemplate">{{ DisplayMemberPath && item !== null ? item[DisplayMemberPath] : item }}</ng-container>`;
-class SelectorComponent extends FrameworkElementComponent {
-    get alignContent() {
-        return toAlignment(this.VerticalContentAlignment);
-    }
-    get justifyContent() {
-        return toJustification(this.HorizontalContentAlignment);
-    }
-    get disabled() {
-        return !this.IsEnabled;
-    }
-    get ItemSource() {
-        return this._itemSource;
+class SliderComponent extends FrameworkElementComponent {
+    static { this._thumbRadius = 8; }
+    constructor(_renderer) {
+        super();
+        this._renderer = _renderer;
+        this.Minimum = 0.0;
+        this.Maximum = 1.0;
+        this.StepFrequency = 0;
+        this.Value = 0.0;
+        this.ValueChange = new EventEmitter();
+        this.IsEnabled = true;
+        this.Orientation = 'Horizontal';
     }
-    set ItemSource(value) {
-        let oldIndex = this.SelectedIndex;
-        let oldValue = this.SelectedValue;
-        let oldItem = this.SelectedItem;
-        let newIndex = value.findIndex(p => this.getValue(-1, p) == oldValue);
-        let newValue = newIndex !== -1 ? oldValue : null;
-        let newItem = newIndex !== -1 ? value[newIndex] : null;
-        this._itemSource = value;
-        this._selectedIndex = newIndex;
-        if (oldIndex !== newIndex)
-            this.SelectedIndexChange.emit(this.SelectedIndex);
-        if (oldValue !== newValue)
-            this.SelectedValueChange.emit(this.SelectedValue);
-        if (oldItem !== newItem)
-            this.SelectedItemChange.emit(this.SelectedItem);
+    getStyle() {
+        let style = {};
+        let minimum = this.Minimum ?? 0;
+        let maximum = this.Maximum ?? 1;
+        let range = maximum - minimum;
+        let progress = range > 0 ? (this.Value - minimum) / range : 1;
+        progress = Math.min(Math.max(progress, 0), 1);
+        let progressText = (progress * 100).toFixed(4);
+        style['--progress-size'] = progressText + (this.Orientation == 'Horizontal' ? 'cqw' : 'cqh');
+        style['--progress-percent'] = progressText + '%';
+        return style;
     }
-    get SelectedIndex() {
-        return this._selectedIndex;
+    getClasses(value) {
+        var results = [value];
+        results.push(this.Orientation.toLowerCase());
+        if (this.IsEnabled !== true)
+            results.push('disabled');
+        return results;
     }
-    set SelectedIndex(value) {
-        if (this.ItemSource === undefined)
+    onThumbPointerDown(event) {
+        if (!this.IsEnabled)
             return;
-        if (value < 0 && this.ItemSource.length > 0)
-            value = -1;
-        if (value >= this.ItemSource.length)
-            value = this.ItemSource.length - 1;
-        let oldIndex = this._selectedIndex;
-        let oldValue = this.SelectedValue;
-        let oldItem = this.SelectedItem;
-        this._selectedIndex = value;
-        let newIndex = this._selectedIndex;
-        let newValue = this.SelectedValue;
-        let newItem = this.SelectedItem;
-        if (oldIndex !== newIndex)
-            this.SelectedIndexChange.emit(this.SelectedIndex);
-        if (oldValue !== newValue)
-            this.SelectedValueChange.emit(this.SelectedValue);
-        if (oldItem !== newItem)
-            this.SelectedItemChange.emit(this.SelectedItem);
-    }
-    //Selected value
-    get SelectedValue() {
-        if (this.SelectedIndex < 0 || this.SelectedIndex >= this.ItemSource.length)
-            return null;
-        return this.getValue(-1, this.ItemSource[this.SelectedIndex]);
-    }
-    set SelectedValue(value) {
-        if (this.ItemSource === undefined)
+        if (event.button !== 0)
             return;
-        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];
+        this._thumb.nativeElement.setPointerCapture(event.pointerId);
+        this._thumbPointerMoveEventSubscription = this._renderer.listen(this._track.nativeElement, 'pointermove', p => this.onThumbPointerMove(p));
+        this.onThumbPointerMove(event);
     }
-    set SelectedItem(value) {
-        if (this.ItemSource === undefined)
-            return;
-        this.SelectedIndex = this.ItemSource.findIndex(value);
+    onThumbPointerMove(event) {
+        let trackRectangle = this._track.nativeElement.getBoundingClientRect();
+        let position;
+        switch (this.Orientation) {
+            case "Horizontal":
+                position = (event.clientX - trackRectangle.left - SliderComponent._thumbRadius) / (trackRectangle.width - 2 * SliderComponent._thumbRadius);
+                break;
+            case "Vertical":
+                position = 1 - (event.clientY - trackRectangle.top - SliderComponent._thumbRadius) / (trackRectangle.height - 2 * SliderComponent._thumbRadius);
+                break;
+        }
+        //Apply range
+        let value = position * (this.Maximum - this.Minimum) + this.Minimum;
+        //Apply step frequency
+        if (this.StepFrequency !== 0)
+            value = Math.trunc(value / this.StepFrequency) * this.StepFrequency;
+        //Apply min-max
+        value = Math.min(this.Maximum, Math.max(this.Minimum, value));
+        //Update value
+        this.Value = value;
+        this.ValueChange.emit(this.Value);
     }
-    onItemClick(event, index, item) {
-        if (this.SelectedIndex === index || !this.IsEnabled)
+    onThumbPointerUp(event) {
+        if (event.button !== 0)
             return;
-        this.SelectedIndex = index;
-        event.stopPropagation();
-    }
-    GetElement(index) {
-        return document.querySelector(`#xaml-selector-${this._id}-item-${index}`);
-    }
-    constructor() {
-        super();
-        this.IsEnabled = true;
-        this.HorizontalContentAlignment = 'Left';
-        this.VerticalContentAlignment = 'Center';
-        //ItemSource
-        this._itemSource = [];
-        //Selected index
-        this._selectedIndex = -1;
-        this.SelectedIndexChange = new EventEmitter();
-        this.SelectedValueChange = new EventEmitter();
-        this.SelectedItemChange = new EventEmitter();
-        //This is required otherwise the SelectedValuePath cannot be read
-        this.getValue = (index, item) => {
-            return this.SelectedValuePath !== undefined ? item[this.SelectedValuePath] : item;
-        };
+        this.onThumbPointerMove(event);
+        this._thumb.nativeElement.releasePointerCapture(event.pointerId);
+        if (this._thumbPointerMoveEventSubscription)
+            this._thumbPointerMoveEventSubscription();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: SelectorComponent, isStandalone: true, selector: "Selector", inputs: { IsEnabled: "IsEnabled", HorizontalContentAlignment: "HorizontalContentAlignment", VerticalContentAlignment: "VerticalContentAlignment", ItemSource: "ItemSource", SelectedIndex: "SelectedIndex", SelectedValue: "SelectedValue", SelectedItem: "SelectedItem", DisplayMemberPath: "DisplayMemberPath", SelectedValuePath: "SelectedValuePath" }, outputs: { SelectedIndexChange: "SelectedIndexChange", SelectedValueChange: "SelectedValueChange", SelectedItemChange: "SelectedItemChange" }, host: { properties: { "class.disabled": "this.disabled" } }, queries: [{ propertyName: "ItemTemplate", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SliderComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: SliderComponent, isStandalone: true, selector: "Slider", inputs: { Minimum: "Minimum", Maximum: "Maximum", StepFrequency: "StepFrequency", Value: "Value", IsEnabled: "IsEnabled", Orientation: "Orientation" }, outputs: { ValueChange: "ValueChange" }, host: { listeners: { "pointerdown": "onThumbPointerDown($event)", "pointerup": "onThumbPointerUp($event)" } }, viewQueries: [{ propertyName: "_track", first: true, predicate: ["track"], descendants: true }, { propertyName: "_thumb", first: true, predicate: ["thumb"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<div #track [ngClass]="getClasses('track')" [ngStyle]="getStyle()">
+    <div class="usable-range">
+      <div #thumb [ngClass]="getClasses('thumb')">
+        <div class="handle"></div>
+      </div>
+    </div>
+  </div>`, isInline: true, styles: [":host{position:relative}:host{display:grid}.track{display:grid;background-color:var(--SliderTrackFillColor);border-radius:2px}.track>.usable-range{container-type:size}.track.horizontal{height:4px;margin:6px 0;background:linear-gradient(to right,var(--AccentFillColorDefault) 0 var(--progress-percent),var(--SliderTrackFillColor) var(--progress-percent) 100%)}.track.horizontal>.usable-range{margin:0 8px}.track.vertical{width:4px;margin:0 6px;background:linear-gradient(to top,var(--AccentFillColorDefault) 0 var(--progress-percent),var(--SliderTrackFillColor) var(--progress-percent) 100%)}.track.vertical>.usable-range{margin:8px 0}.track.disabled{background:var(--ControlStrongFillColorDisabled)}.thumb{display:grid;border-radius:50%;width:16px;height:16px;box-sizing:border-box;border:1px solid var(--ControlStrokeColorOnAccentDefaultDark);background-color:var(--ControlSolidFillColorDefault)}.thumb.horizontal{transform:translate(calc(var(--progress-size) - 8px),-6px)}.thumb.vertical{transform:translate(-6px,calc(100cqh - var(--progress-size) - 8px))}.thumb>.handle{place-self:center;background-color:var(--AccentFillColorDefault);width:8px;height:8px;border-radius:50%;transition:transform var(--ControlFastAnimationDuration),background-color var(--ControlFastAnimationDuration)}.thumb:not(.disabled):hover>.handle{transform:scale(125%);background-color:var(--AccentFillColorSecondary)}.thumb:not(.disabled):active>.handle{transform:scale(75%);background-color:var(--AccentFillColorTertiary)}.thumb.disabled>.handle{transform:scale(125%);background-color:var(--AccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'Selector',
-                    template: '',
-                }]
-        }], ctorParameters: () => [], propDecorators: { ItemTemplate: [{
-                type: ContentChild,
-                args: [TemplateRef]
-            }], IsEnabled: [{
-                type: Input
-            }], HorizontalContentAlignment: [{
-                type: Input
-            }], VerticalContentAlignment: [{
-                type: Input
-            }], disabled: [{
-                type: HostBinding,
-                args: ['class.disabled']
-            }], ItemSource: [{
+            args: [{ selector: 'Slider', template: `<div #track [ngClass]="getClasses('track')" [ngStyle]="getStyle()">
+    <div class="usable-range">
+      <div #thumb [ngClass]="getClasses('thumb')">
+        <div class="handle"></div>
+      </div>
+    </div>
+  </div>`, imports: [CommonModule], styles: [":host{position:relative}:host{display:grid}.track{display:grid;background-color:var(--SliderTrackFillColor);border-radius:2px}.track>.usable-range{container-type:size}.track.horizontal{height:4px;margin:6px 0;background:linear-gradient(to right,var(--AccentFillColorDefault) 0 var(--progress-percent),var(--SliderTrackFillColor) var(--progress-percent) 100%)}.track.horizontal>.usable-range{margin:0 8px}.track.vertical{width:4px;margin:0 6px;background:linear-gradient(to top,var(--AccentFillColorDefault) 0 var(--progress-percent),var(--SliderTrackFillColor) var(--progress-percent) 100%)}.track.vertical>.usable-range{margin:8px 0}.track.disabled{background:var(--ControlStrongFillColorDisabled)}.thumb{display:grid;border-radius:50%;width:16px;height:16px;box-sizing:border-box;border:1px solid var(--ControlStrokeColorOnAccentDefaultDark);background-color:var(--ControlSolidFillColorDefault)}.thumb.horizontal{transform:translate(calc(var(--progress-size) - 8px),-6px)}.thumb.vertical{transform:translate(-6px,calc(100cqh - var(--progress-size) - 8px))}.thumb>.handle{place-self:center;background-color:var(--AccentFillColorDefault);width:8px;height:8px;border-radius:50%;transition:transform var(--ControlFastAnimationDuration),background-color var(--ControlFastAnimationDuration)}.thumb:not(.disabled):hover>.handle{transform:scale(125%);background-color:var(--AccentFillColorSecondary)}.thumb:not(.disabled):active>.handle{transform:scale(75%);background-color:var(--AccentFillColorTertiary)}.thumb.disabled>.handle{transform:scale(125%);background-color:var(--AccentFillColorDisabled)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { Minimum: [{
                 type: Input
-            }], SelectedIndex: [{
+            }], Maximum: [{
                 type: Input
-            }], SelectedIndexChange: [{
-                type: Output
-            }], SelectedValue: [{
+            }], StepFrequency: [{
                 type: Input
-            }], SelectedValueChange: [{
-                type: Output
-            }], SelectedItem: [{
+            }], Value: [{
                 type: Input
-            }], SelectedItemChange: [{
+            }], ValueChange: [{
                 type: Output
-            }], DisplayMemberPath: [{
+            }], IsEnabled: [{
                 type: Input
-            }], SelectedValuePath: [{
+            }], Orientation: [{
                 type: Input
-            }] } });
+            }], _track: [{
+                type: ViewChild,
+                args: ['track']
+            }], _thumb: [{
+                type: ViewChild,
+                args: ['thumb']
+            }], onThumbPointerDown: [{
+                type: HostListener,
+                args: ['pointerdown', ['$event']]
+            }], onThumbPointerUp: [{
+                type: HostListener,
+                args: ['pointerup', ['$event']]
+            }] } });
 
-class ScrollBarComponent extends FrameworkElementComponent {
+class GridComponent extends PanelComponent {
     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._isScrolling = false;
-        this._startPointerPosition = 0;
-        this._startScrollPosition = 0;
-    }
-    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();
-    }
-    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);
+        this.Orientation = 'Horizontal';
     }
-    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;
-            }
+    get gridAutoFlow() {
+        if (this.ColumnDefinitions == undefined && this.RowDefinitions == undefined) {
+            //Make it work like equal with stack panel
+            return this.Orientation === 'Horizontal' ? 'column' : 'row';
         }
         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;
-        event.target.setPointerCapture(event.pointerId);
-        this.Value += direction ? this.ViewportSize : -this.ViewportSize;
-        this._interval = setInterval(() => {
-            this.Value += direction ? this.ViewportSize : -this.ViewportSize;
-        }, 250);
-    }
-    onTrackUp(event) {
-        event.target.releasePointerCapture(event.pointerId);
-        clearInterval(this._interval);
-    }
-    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;
+            //Use proper flow logic
+            return this.Orientation === 'Horizontal' ? 'row' : 'column';
         }
-        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();
-    }
-    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: 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>.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"] }] }); }
+    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", AutoColumnDefinition: "AutoColumnDefinition", AutoRowDefinition: "AutoRowDefinition", ColumnSpacing: "ColumnSpacing", RowSpacing: "RowSpacing", Orientation: "Orientation" }, host: { properties: { "style.grid-template-columns": "this.ColumnDefinitions", "style.grid-template-rows": "this.RowDefinitions", "style.grid-auto-columns": "this.AutoColumnDefinition", "style.grid-auto-rows": "this.AutoRowDefinition", "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: ScrollBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
-            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>.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: [{
+            args: [{ selector: 'Grid', template: `<ng-content/>`, standalone: false, styles: [":host{display:grid;position:relative}\n"] }]
+        }], propDecorators: { ColumnDefinitions: [{
                 type: Input
-            }], ViewportSize: [{
+            }, {
+                type: HostBinding,
+                args: ['style.grid-template-columns']
+            }], RowDefinitions: [{
                 type: Input
-            }], ScrollSize: [{
+            }, {
+                type: HostBinding,
+                args: ['style.grid-template-rows']
+            }], AutoColumnDefinition: [{
                 type: Input
-            }], StepSize: [{
+            }, {
+                type: HostBinding,
+                args: ['style.grid-auto-columns']
+            }], AutoRowDefinition: [{
                 type: Input
-            }], Value: [{
+            }, {
+                type: HostBinding,
+                args: ['style.grid-auto-rows']
+            }], ColumnSpacing: [{
                 type: Input
-            }], ValueChange: [{
-                type: Output
-            }], IsEnabled: [{
+            }, {
+                type: HostBinding,
+                args: ['style.column-gap']
+            }], RowSpacing: [{
                 type: Input
-            }], _track: [{
-                type: ViewChild,
-                args: ['track']
-            }], _thumb: [{
-                type: ViewChild,
-                args: ['thumb']
-            }], class: [{
+            }, {
                 type: HostBinding,
-                args: ['class']
+                args: ['style.row-gap']
+            }], Orientation: [{
+                type: Input
+            }], gridAutoFlow: [{
+                type: HostBinding,
+                args: ['style.grid-auto-flow']
             }] } });
-
-class ScrollViewerComponent extends FrameworkElementComponent {
-    get IsHorizontalScrollBarVisible() {
-        switch (this.HorizontalScrollMode) {
-            case 'Disabled':
-                return false;
-            case 'Auto':
-                return this.ViewportWidth < this.ExtentWidth;
-            case 'Enabled':
-                return true;
-        }
-    }
-    get IsVerticalScrollBarVisible() {
-        switch (this.VerticalScrollMode) {
-            case 'Disabled':
-                return false;
-            case 'Auto':
-                return this.ViewportHeight < this.ExtentHeight;
-            case 'Enabled':
-                return true;
-        }
-    }
-    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;
+class GridProperty {
+}
+class GridDirective {
+    constructor() {
+        this.Grid = new GridProperty();
     }
-    get HorizontalOffset() {
-        return this._content?.nativeElement.scrollLeft;
+    get gridColumnStart() {
+        return this.Grid.Column !== undefined ? this.Grid.Column + 1 : undefined;
     }
-    set HorizontalOffset(value) {
-        if (this._content)
-            this._content.nativeElement.scrollLeft = value;
+    get gridRowStart() {
+        return this.Grid.Row !== undefined ? this.Grid.Row + 1 : undefined;
     }
-    get VerticalOffset() {
-        return this._content?.nativeElement.scrollTop;
+    get gridColumnEnd() {
+        return this.Grid.ColumnSpan !== undefined ? ('span ' + this.Grid.ColumnSpan) : undefined;
     }
-    set VerticalOffset(value) {
-        if (this._content)
-            this._content.nativeElement.scrollTop = value;
+    get gridRowEnd() {
+        return this.Grid.RowSpan !== undefined ? ('span ' + this.Grid.RowSpan) : undefined;
     }
-    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()" cdkScrollable><ng-content/></div>
-    <ScrollBar *ngIf="IsVerticalScrollBarVisible" HorizontalAlignment="Right" class="scrollbar" Orientation="Vertical" [ScrollSize]="ExtentHeight" [ViewportSize]="ViewportHeight" [(Value)]="VerticalOffset"/>
-    <ScrollBar *ngIf="IsHorizontalScrollBarVisible" VerticalAlignment="Bottom" class="scrollbar" Orientation="Horizontal" [ScrollSize]="ExtentWidth" [ViewportSize]="ViewportWidth" [(Value)]="HorizontalOffset"/>`, isInline: true, styles: [":host{display:grid;overflow:auto;touch-action:pan-x pan-y}:host>.content{overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;display:grid;grid-row-start:1;grid-column-start:1;justify-self:stretch;align-self:stretch}:host>.content::-webkit-scrollbar{display:none}:host>.scrollbar{display:grid;grid-row-start:1;grid-column-start:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ScrollBarComponent, selector: "ScrollBar", inputs: ["Orientation", "ViewportSize", "ScrollSize", "StepSize", "Value", "IsEnabled"], outputs: ["ValueChange"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] }); }
+    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: ScrollViewerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ScrollViewer', imports: [CommonModule, ScrollBarComponent, CdkScrollable], template: `<div #content class="content" [ngStyle]="contentStyle" (scroll)="onScroll()" cdkScrollable><ng-content/></div>
-    <ScrollBar *ngIf="IsVerticalScrollBarVisible" HorizontalAlignment="Right" class="scrollbar" Orientation="Vertical" [ScrollSize]="ExtentHeight" [ViewportSize]="ViewportHeight" [(Value)]="VerticalOffset"/>
-    <ScrollBar *ngIf="IsHorizontalScrollBarVisible" VerticalAlignment="Bottom" class="scrollbar" Orientation="Horizontal" [ScrollSize]="ExtentWidth" [ViewportSize]="ViewportWidth" [(Value)]="HorizontalOffset"/>`, styles: [":host{display:grid;overflow:auto;touch-action:pan-x pan-y}: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
-            }], 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
-            }], _content: [{
-                type: ViewChild,
-                args: ['content']
+            }], 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 StackPanelComponent extends PanelComponent {
-    constructor() {
-        super(...arguments);
-        this.Orientation = 'Vertical';
-    }
-    get gridAutoFlow() {
-        return this.Orientation === 'Horizontal' ? 'column' : 'row';
-    }
-    get gridAutoRows() {
-        return this.Orientation === 'Vertical' ? 'min-content' : undefined;
-    }
-    get gridAutoColumns() {
-        return this.Orientation === 'Horizontal' ? 'min-content' : undefined;
+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: StackPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: StackPanelComponent, isStandalone: true, selector: "StackPanel", inputs: { Orientation: "Orientation", Spacing: "Spacing" }, host: { properties: { "style.gap": "this.Spacing", "style.grid-auto-flow": "this.gridAutoFlow", "style.grid-auto-rows": "this.gridAutoRows", "style.grid-auto-columns": "this.gridAutoColumns" } }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;position:relative}\n"] }); }
+    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: StackPanelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'StackPanel', template: `<ng-content/>`, styles: [":host{display:grid;position:relative}\n"] }]
-        }], propDecorators: { Orientation: [{
-                type: Input
-            }], Spacing: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.gap']
-            }], gridAutoFlow: [{
-                type: HostBinding,
-                args: ['style.grid-auto-flow']
-            }], gridAutoRows: [{
+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-auto-rows']
-            }], gridAutoColumns: [{
+                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-auto-columns']
+                args: ['style.grid-column-start']
             }] } });
-
-class ItemContainerComponent {
-    constructor(Element, Injector) {
-        this.Element = Element;
-        this.Injector = Injector;
+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: ItemContainerComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ItemContainerComponent, isStandalone: true, selector: "ItemContainer", ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;position:relative}\n"] }); }
+    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: ItemContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ItemContainer', template: `<ng-content/>`, styles: [":host{display:grid;position:relative}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Injector }] });
-
-class ListViewComponent extends SelectorComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ListViewComponent, isStandalone: true, selector: "ListView", usesInheritance: true, ngImport: i0, template: "<ScrollViewer>\n    <StackPanel Padding=\"2px 0\">\n      <ItemContainer #container *ngFor=\"let item of ItemSource; index as index; trackBy: getValue\" class=\"item\" [ngClass]=\"{'selected': index == SelectedIndex}\" (click)=\"onItemClick($event, index, item)\" [id]=\"'xaml-selector-'+_id+'-item-'+index\" @itemFading>\n        <div class=\"item-selector\"></div>\n        <div class=\"item-content\" [ngStyle]=\"{'align-content': alignContent, 'justify-content': justifyContent}\"><ng-container *ngIf=\"ItemTemplate\">\n    <ng-container [ngTemplateOutlet]=\"ItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutletInjector]=\"container.Injector\" />\n    </ng-container>\n  <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath && item !== null ? item[DisplayMemberPath] : item }}</ng-container></div>\n      </ItemContainer>\n    </StackPanel>\n  </ScrollViewer>", isInline: true, styles: [":host{position:relative}:host{display:grid}:host .item{display:grid;margin:2px 4px;border-radius:4px}:host .item>.item-selector,:host .item>.item-content{display:grid;grid-row-start:1;grid-column-start:1;justify-self:stretch}:host .item>.item-selector{justify-self:left;align-self:center;width:4px;height:12px;border-radius:2px;transition:height var(--ControlNormalAnimationDuration)}:host .item>.item-content{padding:8px 12px}:host .item.selected>.item-selector{height:18px}:host:not(.disabled) .item:not(:hover):not(:active):not(.selected){background-color:transparent;color:var(--TextFillColorPrimary)}:host:not(.disabled) .item:hover:not(.active):not(.selected){background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:active:not(.selected){background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:not(:hover):not(:active).selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:hover:not(:active).selected{background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:active.selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item.selected>.item-selector{background-color:var(--AccentFillColorDefault)}:host.disabled .item>.item-content{color:var(--TextFillColorDisabled)}:host.disabled .item:not(.selected){background-color:transparent}:host.disabled .item.selected{background-color:var(--SubtleFillColorSecondary)}:host.disabled .item.selected>.item-selector{background-color:var(--AccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ScrollViewerComponent, selector: "ScrollViewer", inputs: ["HorizontalScrollMode", "VerticalScrollMode"] }, { kind: "component", type: StackPanelComponent, selector: "StackPanel", inputs: ["Orientation", "Spacing"] }, { kind: "component", type: ItemContainerComponent, selector: "ItemContainer" }], animations: [
-            trigger('itemFading', [
-                transition(':enter', [animate('500ms ease-in', keyframes([
-                        style({ opacity: 0, height: 0 }),
-                        style({ opacity: 0, height: '*' }),
-                        style({ opacity: 1, height: '*' }),
-                    ]))]),
-                transition(':leave', [animate('500ms ease-out', keyframes([
-                        style({ opacity: 1, height: '*' }),
-                        style({ opacity: 0, height: '*' }),
-                        style({ opacity: 0, height: 0 }),
-                    ]))]),
-            ])
-        ] }); }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridRowSpanDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[Grid-RowSpan]',
+                    standalone: false
+                }]
+        }], propDecorators: { RowSpan: [{
+                type: Input,
+                args: ['Grid-RowSpan']
+            }], gridRowEnd: [{
+                type: HostBinding,
+                args: ['style.grid-row-end']
+            }] } });
+class GridColumnSpanDirective {
+    get gridColumnEnd() {
+        return this.ColumnSpan !== undefined ? ('span ' + this.ColumnSpan) : undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridColumnSpanDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: GridColumnSpanDirective, isStandalone: false, selector: "[Grid-ColumnSpan]", inputs: { ColumnSpan: ["Grid-ColumnSpan", "ColumnSpan"] }, host: { properties: { "style.grid-column-end": "this.gridColumnEnd" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ListView', imports: [CommonModule, ScrollViewerComponent, StackPanelComponent, ItemContainerComponent], template: `<ScrollViewer>
-    <StackPanel Padding="2px 0">
-      <ItemContainer #container *ngFor="let item of ItemSource; index as index; trackBy: getValue" class="item" [ngClass]="{'selected': index == SelectedIndex}" (click)="onItemClick($event, index, item)" [id]="'xaml-selector-'+_id+'-item-'+index" @itemFading>
-        <div class="item-selector"></div>
-        <div class="item-content" [ngStyle]="{'align-content': alignContent, 'justify-content': justifyContent}">${SelectorItemTemplate}</div>
-      </ItemContainer>
-    </StackPanel>
-  </ScrollViewer>`, animations: [
-                        trigger('itemFading', [
-                            transition(':enter', [animate('500ms ease-in', keyframes([
-                                    style({ opacity: 0, height: 0 }),
-                                    style({ opacity: 0, height: '*' }),
-                                    style({ opacity: 1, height: '*' }),
-                                ]))]),
-                            transition(':leave', [animate('500ms ease-out', keyframes([
-                                    style({ opacity: 1, height: '*' }),
-                                    style({ opacity: 0, height: '*' }),
-                                    style({ opacity: 0, height: 0 }),
-                                ]))]),
-                        ])
-                    ], styles: [":host{position:relative}:host{display:grid}:host .item{display:grid;margin:2px 4px;border-radius:4px}:host .item>.item-selector,:host .item>.item-content{display:grid;grid-row-start:1;grid-column-start:1;justify-self:stretch}:host .item>.item-selector{justify-self:left;align-self:center;width:4px;height:12px;border-radius:2px;transition:height var(--ControlNormalAnimationDuration)}:host .item>.item-content{padding:8px 12px}:host .item.selected>.item-selector{height:18px}:host:not(.disabled) .item:not(:hover):not(:active):not(.selected){background-color:transparent;color:var(--TextFillColorPrimary)}:host:not(.disabled) .item:hover:not(.active):not(.selected){background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:active:not(.selected){background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:not(:hover):not(:active).selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:hover:not(:active).selected{background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:active.selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item.selected>.item-selector{background-color:var(--AccentFillColorDefault)}:host.disabled .item>.item-content{color:var(--TextFillColorDisabled)}:host.disabled .item:not(.selected){background-color:transparent}:host.disabled .item.selected{background-color:var(--SubtleFillColorSecondary)}:host.disabled .item.selected>.item-selector{background-color:var(--AccentFillColorDisabled)}\n"] }]
-        }] });
-
-class DropDownButtonComponent extends ButtonComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DropDownButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: DropDownButtonComponent, isStandalone: true, selector: "DropDownButton", usesInheritance: true, ngImport: i0, template: `<div class="drop-down-glyph">&#xE70D;</div><ng-content/>`, isInline: true, styles: [":host{position:relative}:host{display:grid;padding:var(--ButtonPadding);border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;box-sizing:border-box;font-size:var(--SystemFontSize);font-family:var(--SystemFontFamily);background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle{border-style:none;border-width:0;background-color:transparent;color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.HyperlinkButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle:not(.disabled){cursor:pointer}:host.HyperlinkButtonStyle::ng-deep *{color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:not(.checked):active:not(.flyout-open):not(.disabled){color:var(--AccentFillColorSecondary)}:host.HyperlinkButtonStyle:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--AccentFillColorSecondary)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n", ".drop-down-glyph{display:grid;font-family:var(--SymbolFontFamily);font-size:8pt;position:absolute;right:12px;top:0;bottom:0;align-content:center;transition:transform var(--ControlNormalAnimationDuration)}:host:active:not(.flyout-open):not(.disabled) .drop-down-glyph{transform:translateY(3px)}\n"] }); }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridColumnSpanDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[Grid-ColumnSpan]',
+                    standalone: false
+                }]
+        }], propDecorators: { ColumnSpan: [{
+                type: Input,
+                args: ['Grid-ColumnSpan']
+            }], gridColumnEnd: [{
+                type: HostBinding,
+                args: ['style.grid-column-end']
+            }] } });
+const GridComponents = [
+    GridComponent,
+    GridDirective,
+    GridRowDirective,
+    GridRowSpanDirective,
+    GridColumnDirective,
+    GridColumnSpanDirective
+];
+class GridModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: GridModule, declarations: [GridComponent, GridDirective, GridRowDirective, GridRowSpanDirective, GridColumnDirective, GridColumnSpanDirective], exports: [GridComponent, GridDirective, GridRowDirective, GridRowSpanDirective, GridColumnDirective, GridColumnSpanDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: 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:var(--ButtonPadding);border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;box-sizing:border-box;font-size:var(--SystemFontSize);font-family:var(--SystemFontFamily);background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle{border-style:none;border-width:0;background-color:transparent;color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.HyperlinkButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle:not(.disabled){cursor:pointer}:host.HyperlinkButtonStyle::ng-deep *{color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:not(.checked):active:not(.flyout-open):not(.disabled){color:var(--AccentFillColorSecondary)}:host.HyperlinkButtonStyle:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--AccentFillColorSecondary)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n", ".drop-down-glyph{display:grid;font-family:var(--SymbolFontFamily);font-size:8pt;position:absolute;right:12px;top:0;bottom:0;align-content:center;transition:transform var(--ControlNormalAnimationDuration)}:host:active:not(.flyout-open):not(.disabled) .drop-down-glyph{transform:translateY(3px)}\n"] }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: GridComponents,
+                    exports: GridComponents
+                }]
         }] });
 
-class FlyoutPresenter {
-    constructor() {
-        this.TransitionAnimation = 'Default';
-        this.IsVisible = false;
-    }
-    static { this.TransitionDuration = 250; }
-    get transitionClass() {
-        return 'transition-' + this.TransitionAnimation.toLowerCase();
+//A ColorSpectrum with sliders for the two channels the wheel itself cannot show
+//a position for. The spectrum holds the color; this decides which channels the
+//user can reach and publishes the result.
+class ColorPickerComponent extends FrameworkElementComponent {
+    get Color() {
+        return this._color;
     }
-    get visible() {
-        return this.IsVisible;
+    set Color(value) {
+        if (value === this.Color)
+            return;
+        this._color = value;
+        this.updateChannelColors();
+        this.ColorChange.emit(this.Color);
     }
-    onContextMenu(event) {
-        event.preventDefault();
+    constructor(_host) {
+        super();
+        this._host = _host;
+        this.IsAlphaEnabled = false;
+        this.IsBrightnessEnabled = false;
+        this._color = 0xffffffff;
+        this.ColorChange = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutPresenter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FlyoutPresenter, isStandalone: true, selector: "FlyoutPresenter", inputs: { TransitionAnimation: "TransitionAnimation", Padding: "Padding", IsVisible: "IsVisible" }, host: { listeners: { "contextmenu": "onContextMenu($event)" }, properties: { "style.padding": "this.Padding", "class": "this.transitionClass", "class.visible": "this.visible" } }, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;overflow:hidden;-webkit-user-select:none;user-select:none;border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #00000080;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault);transition:opacity var(--ControlNormalAnimationDuration),transform var(--ControlNormalAnimationDuration);opacity:0;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px)}:host.transition-slideup{transform:translateY(10px)}:host.transition-slidedown{transform:translateY(-10px)}:host.transition-slideleft{transform:translate(10px)}:host.transition-slideright{transform:translate(-10px)}:host.visible{opacity:1;transform:translate(0)}\n"] }); }
+    ngAfterViewInit() {
+        //Seed the slider track gradients; nothing has changed yet to trigger an update.
+        this.updateChannelColors();
+    }
+    //Publish the selected hue and saturation, at full brightness and at the
+    //current one, as CSS custom properties for the slider track gradients.
+    updateChannelColors() {
+        let hsva = ColorRgba.FromNumber(this._color).ToHsva();
+        let full = new ColorHsva(hsva.H, hsva.S, 1, 1).ToRgba();
+        let opaque = new ColorHsva(hsva.H, hsva.S, hsva.V, 1).ToRgba();
+        this._host.nativeElement.style.setProperty('--full-color', full.ToString());
+        this._host.nativeElement.style.setProperty('--opaque-color', opaque.ToString());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ColorPickerComponent, isStandalone: true, selector: "ColorPicker", inputs: { IsAlphaEnabled: "IsAlphaEnabled", IsBrightnessEnabled: "IsBrightnessEnabled", Color: "Color" }, outputs: { ColorChange: "ColorChange" }, usesInheritance: true, ngImport: i0, template: `<Grid RowDefinitions="1fr auto auto" RowSpacing="3px">
+    <ColorSpectrum #spectrum [(Color)]="Color" [Width]="Width" [Height]="Width"/>
+    <Slider *ngIf="IsBrightnessEnabled" class="channel-slider brightness"
+      [Minimum]="0" [Maximum]="1" [(Value)]="spectrum.Brightness"/>
+    <Slider *ngIf="IsAlphaEnabled" class="channel-slider alpha"
+      [Minimum]="0" [Maximum]="1" [(Value)]="spectrum.Alpha"/>
+  </Grid>`, isInline: true, styles: [":host{display:grid}ColorSpectrum{align-self:center}.channel-slider.brightness ::ng-deep .track.horizontal{background:linear-gradient(to right,#000000,var(--full-color, #ffffff))}.channel-slider.alpha ::ng-deep .track.horizontal{background:linear-gradient(to right,transparent,var(--opaque-color, #ffffff)) 0 0/100% 100% no-repeat,conic-gradient(from 90deg,#ccc 25%,#fff 0 50%,#ccc 0 75%,#fff 0) 0 0/8px 8px repeat,#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColorSpectrumComponent, selector: "ColorSpectrum", inputs: ["Color", "Brightness", "Alpha"], outputs: ["HsvColorChange", "ColorChange"] }, { kind: "component", type: SliderComponent, selector: "Slider", inputs: ["Minimum", "Maximum", "StepFrequency", "Value", "IsEnabled", "Orientation"], outputs: ["ValueChange"] }, { kind: "ngmodule", type: GridModule }, { kind: "component", type: GridComponent, selector: "Grid", inputs: ["ColumnDefinitions", "RowDefinitions", "AutoColumnDefinition", "AutoRowDefinition", "ColumnSpacing", "RowSpacing", "Orientation"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutPresenter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'FlyoutPresenter', template: `<ng-content/>`, styles: [":host{display:grid;overflow:hidden;-webkit-user-select:none;user-select:none;border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #00000080;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault);transition:opacity var(--ControlNormalAnimationDuration),transform var(--ControlNormalAnimationDuration);opacity:0;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px)}:host.transition-slideup{transform:translateY(10px)}:host.transition-slidedown{transform:translateY(-10px)}:host.transition-slideleft{transform:translate(10px)}:host.transition-slideright{transform:translate(-10px)}:host.visible{opacity:1;transform:translate(0)}\n"] }]
-        }], propDecorators: { TransitionAnimation: [{
+            args: [{ selector: 'ColorPicker', imports: [CommonModule, ColorSpectrumComponent, SliderComponent, GridModule], template: `<Grid RowDefinitions="1fr auto auto" RowSpacing="3px">
+    <ColorSpectrum #spectrum [(Color)]="Color" [Width]="Width" [Height]="Width"/>
+    <Slider *ngIf="IsBrightnessEnabled" class="channel-slider brightness"
+      [Minimum]="0" [Maximum]="1" [(Value)]="spectrum.Brightness"/>
+    <Slider *ngIf="IsAlphaEnabled" class="channel-slider alpha"
+      [Minimum]="0" [Maximum]="1" [(Value)]="spectrum.Alpha"/>
+  </Grid>`, styles: [":host{display:grid}ColorSpectrum{align-self:center}.channel-slider.brightness ::ng-deep .track.horizontal{background:linear-gradient(to right,#000000,var(--full-color, #ffffff))}.channel-slider.alpha ::ng-deep .track.horizontal{background:linear-gradient(to right,transparent,var(--opaque-color, #ffffff)) 0 0/100% 100% no-repeat,conic-gradient(from 90deg,#ccc 25%,#fff 0 50%,#ccc 0 75%,#fff 0) 0 0/8px 8px repeat,#fff}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { IsAlphaEnabled: [{
                 type: Input
-            }], Padding: [{
+            }], IsBrightnessEnabled: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.padding']
-            }], IsVisible: [{
+            }], Color: [{
                 type: Input
-            }], transitionClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], visible: [{
-                type: HostBinding,
-                args: ['class.visible']
-            }], onContextMenu: [{
-                type: HostListener,
-                args: ['contextmenu', ['$event']]
+            }], ColorChange: [{
+                type: Output
             }] } });
 
-class XamlRootComponent {
-    onContextMenu(event) {
-        event.preventDefault();
+const SelectorItemTemplate = `<ng-container *ngIf="ItemTemplate">
+    <ng-container [ngTemplateOutlet]="ItemTemplate" [ngTemplateOutletContext]="{ $implicit: item }" [ngTemplateOutletInjector]="container.Injector" />
+    </ng-container>
+  <ng-container *ngIf="!ItemTemplate">{{ DisplayMemberPath && item !== null ? item[DisplayMemberPath] : item }}</ng-container>`;
+class SelectorComponent extends FrameworkElementComponent {
+    set ItemTemplate(value) {
+        this._inputItemTemplate = value;
     }
-    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)" }, classAttribute: "xaml-themed" }, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: ["XamlRoot{all:initial;display:grid;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none;box-sizing:border-box;font-family:var(--SystemFontFamily);font-size:var(--SystemFontSize);color:var(--TextFillColorPrimary);background:var(--WindowFillColorDefault)}.xaml-themed{--AcrylicBlur: var(--XamlUiOverrideAcrylicBlur, blur(12px));--ControlBorderThickness: var(--XamlUiOverrideControlBorderThickness, 1px);--ControlCornerRadius: var(--XamlUiOverrideControlCornerRadius, 4px);--OverlayCornerRadius: var(--XamlUiOverrideOverlayCornerRadius, 8px);--ButtonPadding: var(--XamlUiOverrideButtonPadding, 5px 11px);--SystemFontSize: var(--XamlUiOverrideSystemFontSize, 10pt);--SystemFontFamily: var(--XamlUiOverrideSystemFontFamily, \"Segoe UI\", Arial, sans-serif);--SymbolFontSize: var(--XamlUiOverrideSymbolFontSize, 10pt);--SymbolFontFamily: var(--XamlUiOverrideSymbolFontFamily, \"Segoe Fluent Icons\", \"Segoe MDL2 Assets\");--SystemAccentColor: var(--XamlUiOverrideSystemAccentColor, #0078d4);--SmokeFillColorDefault: var(--XamlUiOverrideSmokeFillColorDefault, #0000004D);--ControlNormalAnimationDuration: var(--XamlUiOverrideControlNormalAnimationDuration, .25s);--ControlFastAnimationDuration: var(--XamlUiOverrideControlFastAnimationDuration, .167s);--ControlFasterAnimationDuration: var(--XamlUiOverrideControlFasterAnimationDuration, 83ms);--WindowFillColorDefault: var(--XamlUiOverrideWindowFillColorDefault, #202020FF);--ControlFillColorDefault: var(--XamlUiOverrideControlFillColorDefault, #FFFFFF0F);--ControlFillColorSecondary: var(--XamlUiOverrideControlFillColorSecondary, #FFFFFF15);--ControlFillColorTertiary: var(--XamlUiOverrideControlFillColorTertiary, #FFFFFF08);--ControlFillColorDisabled: var(--XamlUiOverrideControlFillColorDisabled, #FFFFFF0B);--ControlFillColorInputActive: var(--XamlUiOverrideControlFillColorInputActive, #1E1E1EB3);--ControlSolidFillColorDefault: var(--XamlUiOverrideControlSolidFillColorDefault, #454545FF);--ControlAltFillColorSecondary: var(--XamlUiOverrideControlAltFillColorSecondary, #00000019);--ControlAltFillColorTertiary: var(--XamlUiOverrideControlAltFillColorTertiary, #FFFFFF0B);--ControlAltFillColorQuarternary: var(--XamlUiOverrideControlAltFillColorQuarternary, #FFFFFF12);--ControlAltFillColorDisabled: var(--XamlUiOverrideControlAltFillColorDisabled, #FFFFFF00);--ControlStrongFillColorDefault: var(--XamlUiOverrideControlStrongFillColorDefault, #FFFFFF8B);--ControlStrongFillColorDisabled: var(--XamlUiOverrideControlStrongFillColorDisabled, #FFFFFF3F);--ControlFillColorTransparent: var(--XamlUiOverrideControlFillColorTransparent, #FFFFFF00);--SubtleFillColorTransparent: var(--XamlUiOverrideSubtleFillColorTransparent, #FFFFFF00);--SubtleFillColorSecondary: var(--XamlUiOverrideSubtleFillColorSecondary, #FFFFFF0F);--SubtleFillColorTertiary: var(--XamlUiOverrideSubtleFillColorTertiary, #FFFFFF0A);--AccentFillColorDefault: var(--XamlUiOverrideAccentFillColorDefault, #4CC2FFFF);--AccentFillColorSecondary: var(--XamlUiOverrideAccentFillColorSecondary, #4CC2FFE6);--AccentFillColorTertiary: var(--XamlUiOverrideAccentFillColorTertiary, #4CC2FFCC);--AccentFillColorDisabled: var(--XamlUiOverrideAccentFillColorDisabled, #FFFFFF28);--SystemControlHighlightListAccentLow: var(--XamlUiOverrideSystemControlHighlightListAccentLow, #0078D499);--SystemControlHighlightListAccentMedium: var(--XamlUiOverrideSystemControlHighlightListAccentMedium, #0078D4CC);--SystemControlHighlightListAccentHigh: var(--XamlUiOverrideSystemControlHighlightListAccentHigh, #0078D4E6);--ControlStrokeColorDefault: var(--XamlUiOverrideControlStrokeColorDefault, #FFFFFF12);--ControlStrongStrokeColorDefault: var(--XamlUiOverrideControlStrongStrokeColorDefault, #FFFFFF8B);--ControlStrongStrokeColorDisabled: var(--XamlUiOverrideControlStrongStrokeColorDisabled, #FFFFFF28);--ControlStrokeColorOnAccentDefault: var(--XamlUiOverrideControlStrokeColorOnAccentDefault, #FFFFFF14);--TextFillColorPrimary: var(--XamlUiOverrideTextFillColorPrimary, #FFFFFFFF);--TextFillColorSecondary: var(--XamlUiOverrideTextFillColorSecondary, #FFFFFFC5);--TextFillColorDisabled: var(--XamlUiOverrideTextFillColorDisabled, #FFFFFF5D);--TextOnAccentFillColorSelected: var(--XamlUiOverrideTextOnAccentFillColorSelected, #FFFFFFFF);--TextOnAccentFillColorPrimary: var(--XamlUiOverrideTextOnAccentFillColorPrimary, #000000);--TextOnAccentFillColorSecondary: var(--XamlUiOverrideTextOnAccentFillColorSecondary, #00000080);--TextOnAccentFillColorDisabled: var(--XamlUiOverrideTextOnAccentFillColorDisabled, #FFFFFF87);--SurfaceStrokeColorFlyout: var(--XamlUiOverrideSurfaceStrokeColorFlyout, #00000033);--AcrylicInAppFillColorDefault: var(--XamlUiOverrideAcrylicInAppFillColorDefault, #2C2C2C26);--SystemChromeMediumLowColor: var(--XamlUiOverrideSystemChromeMediumLowColor, #2B2B2BFF);--DividerStrokeColorDefault: var(--XamlUiOverrideDividerStrokeColorDefault, #FFFFFF15);--LayerFillColorAlt: var(--XamlUiOverrideLayerFillColorAlt, #FFFFFF0D);--SurfaceStrokeColorDefault: var(--XamlUiOverrideSurfaceStrokeColorDefault, #75757566)}@media (prefers-color-scheme: light){.xaml-themed{--WindowFillColorDefault: var(--XamlUiOverrideWindowFillColorDefault, #F3F3F3FF);--ControlFillColorDefault: var(--XamlUiOverrideControlFillColorDefault, #FFFFFFB3);--ControlFillColorSecondary: var(--XamlUiOverrideControlFillColorSecondary, #F9F9F980);--ControlFillColorTertiary: var(--XamlUiOverrideControlFillColorTertiary, #F9F9F94D);--ControlFillColorDisabled: var(--XamlUiOverrideControlFillColorDisabled, #F9F9F94D);--ControlFillColorInputActive: var(--XamlUiOverrideControlFillColorInputActive, #FFFFFF);--ControlSolidFillColorDefault: var(--XamlUiOverrideControlSolidFillColorDefault, #FFFFFFFF);--ControlAltFillColorSecondary: var(--XamlUiOverrideControlAltFillColorSecondary, #00000006);--ControlAltFillColorTertiary: var(--XamlUiOverrideControlAltFillColorTertiary, #0000000F);--ControlAltFillColorQuarternary: var(--XamlUiOverrideControlAltFillColorQuarternary, #00000018);--ControlAltFillColorDisabled: var(--XamlUiOverrideControlAltFillColorDisabled, #FFFFFF00);--ControlStrongFillColorDefault: var(--XamlUiOverrideControlStrongFillColorDefault, #00000072);--ControlStrongFillColorDisabled: var(--XamlUiOverrideControlStrongFillColorDisabled, #00000051);--ControlFillColorTransparent: var(--XamlUiOverrideControlFillColorTransparent, #FFFFFF00);--SubtleFillColorTransparent: var(--XamlUiOverrideSubtleFillColorTransparent, #FFFFFF00);--SubtleFillColorSecondary: var(--XamlUiOverrideSubtleFillColorSecondary, #00000009);--SubtleFillColorTertiary: var(--XamlUiOverrideSubtleFillColorTertiary, #00000006);--AccentFillColorDefault: var(--XamlUiOverrideAccentFillColorDefault, #0067C0FF);--AccentFillColorSecondary: var(--XamlUiOverrideAccentFillColorSecondary, #0067C0E6);--AccentFillColorTertiary: var(--XamlUiOverrideAccentFillColorTertiary, #0067C0CC);--AccentFillColorDisabled: var(--XamlUiOverrideAccentFillColorDisabled, #FFFFFF37);--SystemControlHighlightListAccentLow: var(--XamlUiOverrideSystemControlHighlightListAccentLow, #0078D466);--SystemControlHighlightListAccentMedium: var(--XamlUiOverrideSystemControlHighlightListAccentMedium, #0078D499);--SystemControlHighlightListAccentHigh: var(--XamlUiOverrideSystemControlHighlightListAccentHigh, #0078D4B3);--ControlStrokeColorDefault: var(--XamlUiOverrideControlStrokeColorDefault, #0000000F);--ControlStrongStrokeColorDefault: var(--XamlUiOverrideControlStrongStrokeColorDefault, #00000072);--ControlStrongStrokeColorDisabled: var(--XamlUiOverrideControlStrongStrokeColorDisabled, #00000037);--ControlStrokeColorOnAccentDefault: var(--XamlUiOverrideControlStrokeColorOnAccentDefault, #FFFFFF14);--TextFillColorPrimary: var(--XamlUiOverrideTextFillColorPrimary, #000000E4);--TextFillColorSecondary: var(--XamlUiOverrideTextFillColorSecondary, #0000009E);--TextFillColorDisabled: var(--XamlUiOverrideTextFillColorDisabled, #0000005C);--TextOnAccentFillColorSelected: var(--XamlUiOverrideTextOnAccentFillColorSelected, #FFFFFFFF);--TextOnAccentFillColorPrimary: var(--XamlUiOverrideTextOnAccentFillColorPrimary, #FFFFFF);--TextOnAccentFillColorSecondary: var(--XamlUiOverrideTextOnAccentFillColorSecondary, #FFFFFFB3);--TextOnAccentFillColorDisabled: var(--XamlUiOverrideTextOnAccentFillColorDisabled, #FFFFFF);--SurfaceStrokeColorFlyout: var(--XamlUiOverrideSurfaceStrokeColorFlyout, #0000000F);--AcrylicInAppFillColorDefault: var(--XamlUiOverrideAcrylicInAppFillColorDefault, #FCFCFC26);--SystemChromeMediumLowColor: var(--XamlUiOverrideSystemChromeMediumLowColor, #F2F2F2FF);--DividerStrokeColorDefault: var(--XamlUiOverrideDividerStrokeColorDefault, #0000000F);--LayerFillColorAlt: var(--XamlUiOverrideLayerFillColorAlt, #FFFFFF);--SurfaceStrokeColorDefault: var(--XamlUiOverrideSurfaceStrokeColorDefault, #75757566)}}.xaml-flyout-overlay-backdrop{background:transparent}.xaml-dialog-overlay-backdrop{background:var(--SmokeFillColorDefault)}.cdk-overlay-pane.xaml-overlay-pane{display:grid!important}.cdk-overlay-pane.xaml-overlay-pane XamlRoot{overflow:visible;background:transparent}\n"], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: XamlRootComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'XamlRoot', template: `<ng-content/>`, encapsulation: ViewEncapsulation.None, host: {
-                        'class': 'xaml-themed'
-                    }, styles: ["XamlRoot{all:initial;display:grid;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none;box-sizing:border-box;font-family:var(--SystemFontFamily);font-size:var(--SystemFontSize);color:var(--TextFillColorPrimary);background:var(--WindowFillColorDefault)}.xaml-themed{--AcrylicBlur: var(--XamlUiOverrideAcrylicBlur, blur(12px));--ControlBorderThickness: var(--XamlUiOverrideControlBorderThickness, 1px);--ControlCornerRadius: var(--XamlUiOverrideControlCornerRadius, 4px);--OverlayCornerRadius: var(--XamlUiOverrideOverlayCornerRadius, 8px);--ButtonPadding: var(--XamlUiOverrideButtonPadding, 5px 11px);--SystemFontSize: var(--XamlUiOverrideSystemFontSize, 10pt);--SystemFontFamily: var(--XamlUiOverrideSystemFontFamily, \"Segoe UI\", Arial, sans-serif);--SymbolFontSize: var(--XamlUiOverrideSymbolFontSize, 10pt);--SymbolFontFamily: var(--XamlUiOverrideSymbolFontFamily, \"Segoe Fluent Icons\", \"Segoe MDL2 Assets\");--SystemAccentColor: var(--XamlUiOverrideSystemAccentColor, #0078d4);--SmokeFillColorDefault: var(--XamlUiOverrideSmokeFillColorDefault, #0000004D);--ControlNormalAnimationDuration: var(--XamlUiOverrideControlNormalAnimationDuration, .25s);--ControlFastAnimationDuration: var(--XamlUiOverrideControlFastAnimationDuration, .167s);--ControlFasterAnimationDuration: var(--XamlUiOverrideControlFasterAnimationDuration, 83ms);--WindowFillColorDefault: var(--XamlUiOverrideWindowFillColorDefault, #202020FF);--ControlFillColorDefault: var(--XamlUiOverrideControlFillColorDefault, #FFFFFF0F);--ControlFillColorSecondary: var(--XamlUiOverrideControlFillColorSecondary, #FFFFFF15);--ControlFillColorTertiary: var(--XamlUiOverrideControlFillColorTertiary, #FFFFFF08);--ControlFillColorDisabled: var(--XamlUiOverrideControlFillColorDisabled, #FFFFFF0B);--ControlFillColorInputActive: var(--XamlUiOverrideControlFillColorInputActive, #1E1E1EB3);--ControlSolidFillColorDefault: var(--XamlUiOverrideControlSolidFillColorDefault, #454545FF);--ControlAltFillColorSecondary: var(--XamlUiOverrideControlAltFillColorSecondary, #00000019);--ControlAltFillColorTertiary: var(--XamlUiOverrideControlAltFillColorTertiary, #FFFFFF0B);--ControlAltFillColorQuarternary: var(--XamlUiOverrideControlAltFillColorQuarternary, #FFFFFF12);--ControlAltFillColorDisabled: var(--XamlUiOverrideControlAltFillColorDisabled, #FFFFFF00);--ControlStrongFillColorDefault: var(--XamlUiOverrideControlStrongFillColorDefault, #FFFFFF8B);--ControlStrongFillColorDisabled: var(--XamlUiOverrideControlStrongFillColorDisabled, #FFFFFF3F);--ControlFillColorTransparent: var(--XamlUiOverrideControlFillColorTransparent, #FFFFFF00);--SubtleFillColorTransparent: var(--XamlUiOverrideSubtleFillColorTransparent, #FFFFFF00);--SubtleFillColorSecondary: var(--XamlUiOverrideSubtleFillColorSecondary, #FFFFFF0F);--SubtleFillColorTertiary: var(--XamlUiOverrideSubtleFillColorTertiary, #FFFFFF0A);--AccentFillColorDefault: var(--XamlUiOverrideAccentFillColorDefault, #4CC2FFFF);--AccentFillColorSecondary: var(--XamlUiOverrideAccentFillColorSecondary, #4CC2FFE6);--AccentFillColorTertiary: var(--XamlUiOverrideAccentFillColorTertiary, #4CC2FFCC);--AccentFillColorDisabled: var(--XamlUiOverrideAccentFillColorDisabled, #FFFFFF28);--SystemControlHighlightListAccentLow: var(--XamlUiOverrideSystemControlHighlightListAccentLow, #0078D499);--SystemControlHighlightListAccentMedium: var(--XamlUiOverrideSystemControlHighlightListAccentMedium, #0078D4CC);--SystemControlHighlightListAccentHigh: var(--XamlUiOverrideSystemControlHighlightListAccentHigh, #0078D4E6);--ControlStrokeColorDefault: var(--XamlUiOverrideControlStrokeColorDefault, #FFFFFF12);--ControlStrongStrokeColorDefault: var(--XamlUiOverrideControlStrongStrokeColorDefault, #FFFFFF8B);--ControlStrongStrokeColorDisabled: var(--XamlUiOverrideControlStrongStrokeColorDisabled, #FFFFFF28);--ControlStrokeColorOnAccentDefault: var(--XamlUiOverrideControlStrokeColorOnAccentDefault, #FFFFFF14);--TextFillColorPrimary: var(--XamlUiOverrideTextFillColorPrimary, #FFFFFFFF);--TextFillColorSecondary: var(--XamlUiOverrideTextFillColorSecondary, #FFFFFFC5);--TextFillColorDisabled: var(--XamlUiOverrideTextFillColorDisabled, #FFFFFF5D);--TextOnAccentFillColorSelected: var(--XamlUiOverrideTextOnAccentFillColorSelected, #FFFFFFFF);--TextOnAccentFillColorPrimary: var(--XamlUiOverrideTextOnAccentFillColorPrimary, #000000);--TextOnAccentFillColorSecondary: var(--XamlUiOverrideTextOnAccentFillColorSecondary, #00000080);--TextOnAccentFillColorDisabled: var(--XamlUiOverrideTextOnAccentFillColorDisabled, #FFFFFF87);--SurfaceStrokeColorFlyout: var(--XamlUiOverrideSurfaceStrokeColorFlyout, #00000033);--AcrylicInAppFillColorDefault: var(--XamlUiOverrideAcrylicInAppFillColorDefault, #2C2C2C26);--SystemChromeMediumLowColor: var(--XamlUiOverrideSystemChromeMediumLowColor, #2B2B2BFF);--DividerStrokeColorDefault: var(--XamlUiOverrideDividerStrokeColorDefault, #FFFFFF15);--LayerFillColorAlt: var(--XamlUiOverrideLayerFillColorAlt, #FFFFFF0D);--SurfaceStrokeColorDefault: var(--XamlUiOverrideSurfaceStrokeColorDefault, #75757566)}@media (prefers-color-scheme: light){.xaml-themed{--WindowFillColorDefault: var(--XamlUiOverrideWindowFillColorDefault, #F3F3F3FF);--ControlFillColorDefault: var(--XamlUiOverrideControlFillColorDefault, #FFFFFFB3);--ControlFillColorSecondary: var(--XamlUiOverrideControlFillColorSecondary, #F9F9F980);--ControlFillColorTertiary: var(--XamlUiOverrideControlFillColorTertiary, #F9F9F94D);--ControlFillColorDisabled: var(--XamlUiOverrideControlFillColorDisabled, #F9F9F94D);--ControlFillColorInputActive: var(--XamlUiOverrideControlFillColorInputActive, #FFFFFF);--ControlSolidFillColorDefault: var(--XamlUiOverrideControlSolidFillColorDefault, #FFFFFFFF);--ControlAltFillColorSecondary: var(--XamlUiOverrideControlAltFillColorSecondary, #00000006);--ControlAltFillColorTertiary: var(--XamlUiOverrideControlAltFillColorTertiary, #0000000F);--ControlAltFillColorQuarternary: var(--XamlUiOverrideControlAltFillColorQuarternary, #00000018);--ControlAltFillColorDisabled: var(--XamlUiOverrideControlAltFillColorDisabled, #FFFFFF00);--ControlStrongFillColorDefault: var(--XamlUiOverrideControlStrongFillColorDefault, #00000072);--ControlStrongFillColorDisabled: var(--XamlUiOverrideControlStrongFillColorDisabled, #00000051);--ControlFillColorTransparent: var(--XamlUiOverrideControlFillColorTransparent, #FFFFFF00);--SubtleFillColorTransparent: var(--XamlUiOverrideSubtleFillColorTransparent, #FFFFFF00);--SubtleFillColorSecondary: var(--XamlUiOverrideSubtleFillColorSecondary, #00000009);--SubtleFillColorTertiary: var(--XamlUiOverrideSubtleFillColorTertiary, #00000006);--AccentFillColorDefault: var(--XamlUiOverrideAccentFillColorDefault, #0067C0FF);--AccentFillColorSecondary: var(--XamlUiOverrideAccentFillColorSecondary, #0067C0E6);--AccentFillColorTertiary: var(--XamlUiOverrideAccentFillColorTertiary, #0067C0CC);--AccentFillColorDisabled: var(--XamlUiOverrideAccentFillColorDisabled, #FFFFFF37);--SystemControlHighlightListAccentLow: var(--XamlUiOverrideSystemControlHighlightListAccentLow, #0078D466);--SystemControlHighlightListAccentMedium: var(--XamlUiOverrideSystemControlHighlightListAccentMedium, #0078D499);--SystemControlHighlightListAccentHigh: var(--XamlUiOverrideSystemControlHighlightListAccentHigh, #0078D4B3);--ControlStrokeColorDefault: var(--XamlUiOverrideControlStrokeColorDefault, #0000000F);--ControlStrongStrokeColorDefault: var(--XamlUiOverrideControlStrongStrokeColorDefault, #00000072);--ControlStrongStrokeColorDisabled: var(--XamlUiOverrideControlStrongStrokeColorDisabled, #00000037);--ControlStrokeColorOnAccentDefault: var(--XamlUiOverrideControlStrokeColorOnAccentDefault, #FFFFFF14);--TextFillColorPrimary: var(--XamlUiOverrideTextFillColorPrimary, #000000E4);--TextFillColorSecondary: var(--XamlUiOverrideTextFillColorSecondary, #0000009E);--TextFillColorDisabled: var(--XamlUiOverrideTextFillColorDisabled, #0000005C);--TextOnAccentFillColorSelected: var(--XamlUiOverrideTextOnAccentFillColorSelected, #FFFFFFFF);--TextOnAccentFillColorPrimary: var(--XamlUiOverrideTextOnAccentFillColorPrimary, #FFFFFF);--TextOnAccentFillColorSecondary: var(--XamlUiOverrideTextOnAccentFillColorSecondary, #FFFFFFB3);--TextOnAccentFillColorDisabled: var(--XamlUiOverrideTextOnAccentFillColorDisabled, #FFFFFF);--SurfaceStrokeColorFlyout: var(--XamlUiOverrideSurfaceStrokeColorFlyout, #0000000F);--AcrylicInAppFillColorDefault: var(--XamlUiOverrideAcrylicInAppFillColorDefault, #FCFCFC26);--SystemChromeMediumLowColor: var(--XamlUiOverrideSystemChromeMediumLowColor, #F2F2F2FF);--DividerStrokeColorDefault: var(--XamlUiOverrideDividerStrokeColorDefault, #0000000F);--LayerFillColorAlt: var(--XamlUiOverrideLayerFillColorAlt, #FFFFFF);--SurfaceStrokeColorDefault: var(--XamlUiOverrideSurfaceStrokeColorDefault, #75757566)}}.xaml-flyout-overlay-backdrop{background:transparent}.xaml-dialog-overlay-backdrop{background:var(--SmokeFillColorDefault)}.cdk-overlay-pane.xaml-overlay-pane{display:grid!important}.cdk-overlay-pane.xaml-overlay-pane XamlRoot{overflow:visible;background:transparent}\n"] }]
-        }], propDecorators: { onContextMenu: [{
-                type: HostListener,
-                args: ['contextmenu', ['$event']]
-            }] } });
-
-const PopupTemplate = `<ng-template #template><XamlRoot><FlyoutPresenter #presenter [IsVisible]="isVisible" [TransitionAnimation]="transitionAnimation" [Padding]="Padding"><ng-content/></FlyoutPresenter></XamlRoot></ng-template>`;
-class FlyoutBaseComponent {
-    get IsOpen() {
-        return this._isOpen;
+    get ItemTemplate() {
+        return this._inputItemTemplate ?? this._contentItemTemplate;
     }
-    set IsOpen(value) {
-        if (value === this._isOpen)
+    get alignContent() {
+        return ToAlignment(this.VerticalContentAlignment);
+    }
+    get justifyContent() {
+        return ToJustification(this.HorizontalContentAlignment);
+    }
+    get disabled() {
+        return !this.IsEnabled;
+    }
+    get ItemSource() {
+        return this._itemSource;
+    }
+    set ItemSource(value) {
+        let oldIndex = this.SelectedIndex;
+        let oldValue = this.SelectedValue;
+        let oldItem = this.SelectedItem;
+        let newIndex = value.findIndex(p => this.getValue(-1, p) == oldValue);
+        let newValue = newIndex !== -1 ? oldValue : null;
+        let newItem = newIndex !== -1 ? value[newIndex] : null;
+        this._itemSource = value;
+        this._selectedIndex = newIndex;
+        if (oldIndex !== newIndex)
+            this.SelectedIndexChange.emit(this.SelectedIndex);
+        if (oldValue !== newValue)
+            this.SelectedValueChange.emit(this.SelectedValue);
+        if (oldItem !== newItem)
+            this.SelectedItemChange.emit(this.SelectedItem);
+    }
+    get SelectedIndex() {
+        return this._selectedIndex;
+    }
+    set SelectedIndex(value) {
+        if (this.ItemSource === undefined)
             return;
-        this._isOpen = value;
-        if (value) {
-            this.showOverlay();
-        }
-        else {
-            this.hideOverlay();
-        }
-        this.IsOpenChange.emit(value);
+        if (value < 0 && this.ItemSource.length > 0)
+            value = -1;
+        if (value >= this.ItemSource.length)
+            value = this.ItemSource.length - 1;
+        let oldIndex = this._selectedIndex;
+        let oldValue = this.SelectedValue;
+        let oldItem = this.SelectedItem;
+        this._selectedIndex = value;
+        let newIndex = this._selectedIndex;
+        let newValue = this.SelectedValue;
+        let newItem = this.SelectedItem;
+        if (oldIndex !== newIndex)
+            this.SelectedIndexChange.emit(this.SelectedIndex);
+        if (oldValue !== newValue)
+            this.SelectedValueChange.emit(this.SelectedValue);
+        if (oldItem !== newItem)
+            this.SelectedItemChange.emit(this.SelectedItem);
     }
-    updatePlacement() {
-        if (!this._overlayRef)
+    //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) {
+        if (this.ItemSource === undefined)
             return;
-        let target = this.Target ?? this._hostElement;
-        let positionStrategy = this._overlay
-            .position()
-            .flexibleConnectedTo(target)
-            .withPositions([this.positioning])
-            .withGrowAfterOpen(true)
-            .withFlexibleDimensions(true)
-            .withPush(true);
-        this._overlayRef.updatePositionStrategy(positionStrategy);
-        if (this.Placement === 'Cover') {
-            this._overlayRef.updateSize(target);
-        }
+        this.SelectedIndex = this.ItemSource.findIndex(p => this.getValue(-1, p) == value);
     }
-    async showOverlay() {
-        //Create overlay
-        let config = new OverlayConfig({
-            hasBackdrop: this.HasBackdrop,
-            panelClass: 'xaml-overlay-pane',
-            scrollStrategy: this._overlay.scrollStrategies.reposition(),
-            backdropClass: 'xaml-flyout-overlay-backdrop'
-        });
-        this._overlayRef = this._overlay.create(config);
-        this.OnOverlay(this._overlayRef);
-        //Configure overlay placement
-        this.updatePlacement();
-        //Display overlay
-        let templatePortal = new TemplatePortal(this._template, this._viewContainerRef);
-        this._overlayRef.attach(templatePortal);
-        //Ensure backdrop event handling
-        this._overlayRef.backdropClick().subscribe(() => this.Hide());
-        if (this.HasBackdrop)
-            this._backdropContextMenuSubscription = this._renderer.listen(this._overlayRef.backdropElement, 'contextmenu', p => { p.preventDefault(); this.Hide(); });
-        //Make content visible - after next layout
-        await resume_after(0);
-        this.isVisible = true;
+    //Selected item
+    get SelectedItem() {
+        if (this.SelectedIndex < 0 || this.SelectedIndex >= this.ItemSource.length)
+            return null;
+        return this.ItemSource[this.SelectedIndex];
     }
-    async hideOverlay() {
-        //Start hide animation
-        this.isVisible = false;
-        //Remove event handlers
-        if (this._backdropContextMenuSubscription)
-            this._backdropContextMenuSubscription();
-        //Dispose overlay after hidden
-        if (this._overlayRef === undefined)
+    set SelectedItem(value) {
+        if (this.ItemSource === undefined)
             return;
-        await resume_after(FlyoutPresenter.TransitionDuration);
-        this._overlayRef.detach();
-        this._overlayRef.dispose();
-        this._overlayRef = undefined;
+        this.SelectedIndex = this.ItemSource.findIndex(value);
     }
-    get Target() {
-        return this._target;
+    onItemClick(event, index, item) {
+        if (!this.IsEnabled)
+            return;
+        if (this.SelectedIndex !== index) {
+            this.SelectedIndex = index;
+            event.stopPropagation();
+        }
+        this.ItemClick.emit(index);
     }
-    set Target(value) {
-        this._target = value;
-        this.updatePlacement();
+    GetElement(index) {
+        return document.querySelector(`#xaml-selector-${this._id}-item-${index}`);
     }
-    get style() {
-        return {
-            'position': 'absolute',
-            'inset': 0,
-            'pointer-events': 'none'
+    constructor() {
+        super();
+        this.IsEnabled = true;
+        this.HorizontalContentAlignment = 'Left';
+        this.VerticalContentAlignment = 'Center';
+        //ItemSource
+        this._itemSource = [];
+        //Selected index
+        this._selectedIndex = -1;
+        this.SelectedIndexChange = new EventEmitter();
+        this.SelectedValueChange = new EventEmitter();
+        this.SelectedItemChange = new EventEmitter();
+        this.ItemClick = new EventEmitter();
+        //This is required otherwise the SelectedValuePath cannot be read
+        this.getValue = (index, item) => {
+            return this.SelectedValuePath !== undefined ? item[this.SelectedValuePath] : item;
         };
     }
-    get transitionAnimation() {
-        return 'Default';
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: SelectorComponent, isStandalone: true, selector: "Selector", inputs: { ItemTemplate: "ItemTemplate", 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", ItemClick: "ItemClick" }, host: { properties: { "class.disabled": "this.disabled" } }, queries: [{ propertyName: "_contentItemTemplate", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Selector',
+                    template: '',
+                }]
+        }], ctorParameters: () => [], propDecorators: { _contentItemTemplate: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }], ItemTemplate: [{
+                type: Input
+            }], IsEnabled: [{
+                type: Input
+            }], HorizontalContentAlignment: [{
+                type: Input
+            }], VerticalContentAlignment: [{
+                type: Input
+            }], disabled: [{
+                type: HostBinding,
+                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
+            }], ItemClick: [{
+                type: Output
+            }] } });
+
+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._isScrolling = false;
+        this._startPointerPosition = 0;
+        this._startScrollPosition = 0;
     }
-    get positioning() {
-        switch (this.Placement) {
-            case "Top":
-                return {
-                    originX: 'center', originY: 'top',
-                    overlayX: 'center', overlayY: 'bottom'
-                };
-            case "TopEdgeAlignedLeft":
-                return {
-                    originX: 'start', originY: 'top',
-                    overlayX: 'start', overlayY: 'bottom'
-                };
-            case "TopEdgeAlignedRight":
-                return {
-                    originX: 'end', originY: 'top',
-                    overlayX: 'end', overlayY: 'bottom'
-                };
-            case "Bottom":
-                return {
-                    originX: 'center', originY: 'bottom',
-                    overlayX: 'center', overlayY: 'top'
-                };
-            case "BottomEdgeAlignedLeft":
-                return {
-                    originX: 'start', originY: 'bottom',
-                    overlayX: 'start', overlayY: 'top'
-                };
-            case "BottomEdgeAlignedRight":
-                return {
-                    originX: 'end', originY: 'bottom',
-                    overlayX: 'end', overlayY: 'top'
-                };
-            case "Left":
-                return {
-                    originX: 'start', originY: 'center',
-                    overlayX: 'end', overlayY: 'center'
-                };
-            case "LeftEdgeAlignedTop":
-                return {
-                    originX: 'start', originY: 'top',
-                    overlayX: 'end', overlayY: 'top'
-                };
-            case "LeftEdgeAlignedBottom":
-                return {
-                    originX: 'start', originY: 'bottom',
-                    overlayX: 'end', overlayY: 'bottom'
-                };
-            case "Right":
-                return {
-                    originX: 'end', originY: 'center',
-                    overlayX: 'start', overlayY: 'center'
-                };
-            case "RightEdgeAlignedTop":
-                return {
-                    originX: 'end', originY: 'top',
-                    overlayX: 'start', overlayY: 'top'
-                };
-            case "RightEdgeAlignedBottom":
+    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();
+    }
+    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 {
-                    originX: 'end', originY: 'bottom',
-                    overlayX: 'start', overlayY: 'bottom'
+                    'height': size + 'px',
+                    'top': position + 'px'
                 };
-            case "Cover":
+            case 'Horizontal':
                 return {
-                    originX: 'start', originY: 'top',
-                    overlayX: 'start', overlayY: 'top'
+                    'width': size + 'px',
+                    'left': position + 'px'
                 };
         }
     }
-    ;
-    constructor(_viewContainerRef, _overlay, _hostElement, _renderer) {
-        this._viewContainerRef = _viewContainerRef;
-        this._overlay = _overlay;
-        this._hostElement = _hostElement;
-        this._renderer = _renderer;
-        this.Placement = 'Top';
-        this.HasBackdrop = true;
-        this._isOpen = false;
-        this.IsOpenChange = new EventEmitter();
-        this.isVisible = false;
-        this._target = null;
+    onButtonDown(event, direction) {
+        event.target.setPointerCapture(event.pointerId);
+        this._interval = setInterval(() => {
+            this.Value += direction ? this.StepSize : -this.StepSize;
+        }, 50);
     }
-    ngOnDestroy() {
-        this.hideOverlay();
+    onButtonUp(event) {
+        event.target.releasePointerCapture(event.pointerId);
+        clearInterval(this._interval);
     }
-    OnOverlay(overlay) {
+    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;
+        event.target.setPointerCapture(event.pointerId);
+        this.Value += direction ? this.ViewportSize : -this.ViewportSize;
+        this._interval = setInterval(() => {
+            this.Value += direction ? this.ViewportSize : -this.ViewportSize;
+        }, 250);
     }
-    Show() {
-        this.IsOpen = true;
+    onTrackUp(event) {
+        event.target.releasePointerCapture(event.pointerId);
+        clearInterval(this._interval);
     }
-    Hide() {
-        this.IsOpen = 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();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutBaseComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$1.Overlay }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FlyoutBaseComponent, isStandalone: true, selector: "FlyoutBase", inputs: { Placement: "Placement", Padding: "Padding", HasBackdrop: "HasBackdrop", IsOpen: "IsOpen", Target: "Target" }, outputs: { IsOpenChange: "IsOpenChange" }, host: { properties: { "style": "this.style" } }, providers: [{ provide: 'xaml-flyout', useExisting: FlyoutBaseComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: ["template"], descendants: true }], ngImport: i0, template: "<ng-template #template><XamlRoot><FlyoutPresenter #presenter [IsVisible]=\"isVisible\" [TransitionAnimation]=\"transitionAnimation\" [Padding]=\"Padding\"><ng-content/></FlyoutPresenter></XamlRoot></ng-template>", isInline: true, dependencies: [{ kind: "component", type: FlyoutPresenter, selector: "FlyoutPresenter", inputs: ["TransitionAnimation", "Padding", "IsVisible"] }, { kind: "component", type: XamlRootComponent, selector: "XamlRoot" }] }); }
+    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();
+    }
+    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: 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>.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: FlyoutBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScrollBarComponent, decorators: [{
             type: Component,
-            args: [{
-                    imports: [FlyoutPresenter, XamlRootComponent],
-                    selector: 'FlyoutBase',
-                    template: PopupTemplate,
-                    providers: [{ provide: 'xaml-flyout', useExisting: FlyoutBaseComponent }]
-                }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$1.Overlay }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { Placement: [{
+            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>.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
-            }], Padding: [{
+            }], ViewportSize: [{
                 type: Input
-            }], HasBackdrop: [{
+            }], ScrollSize: [{
                 type: Input
-            }], IsOpen: [{
+            }], StepSize: [{
                 type: Input
-            }], IsOpenChange: [{
+            }], Value: [{
+                type: Input
+            }], ValueChange: [{
                 type: Output
-            }], Target: [{
+            }], IsEnabled: [{
                 type: Input
-            }], _template: [{
+            }], _track: [{
                 type: ViewChild,
-                args: ['template']
-            }], style: [{
+                args: ['track']
+            }], _thumb: [{
+                type: ViewChild,
+                args: ['thumb']
+            }], class: [{
                 type: HostBinding,
-                args: ['style']
+                args: ['class']
             }] } });
 
-class FlyoutComponent extends FlyoutBaseComponent {
-    get transitionAnimation() {
-        switch (this.Placement) {
-            case "Top":
-            case "TopEdgeAlignedLeft":
-            case "TopEdgeAlignedRight":
-                return 'SlideUp';
-            case "Bottom":
-            case "BottomEdgeAlignedLeft":
-            case "BottomEdgeAlignedRight":
-                return 'SlideDown';
-            case "Left":
-            case "LeftEdgeAlignedTop":
-            case "LeftEdgeAlignedBottom":
-                return 'SlideLeft';
-            case "Right":
-            case "RightEdgeAlignedTop":
-            case "RightEdgeAlignedBottom":
-                return 'SlideRight';
-            default:
-                return 'Default';
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FlyoutComponent, isStandalone: true, selector: "Flyout", providers: [{ provide: 'xaml-flyout', useExisting: FlyoutComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template #template><XamlRoot><FlyoutPresenter #presenter [IsVisible]=\"isVisible\" [TransitionAnimation]=\"transitionAnimation\" [Padding]=\"Padding\"><ng-content/></FlyoutPresenter></XamlRoot></ng-template>", isInline: true, styles: ["FlyoutPresenter{padding:16px}\n"], dependencies: [{ kind: "component", type: FlyoutPresenter, selector: "FlyoutPresenter", inputs: ["TransitionAnimation", "Padding", "IsVisible"] }, { kind: "component", type: XamlRootComponent, selector: "XamlRoot" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'Flyout', imports: [FlyoutPresenter, XamlRootComponent], template: PopupTemplate, providers: [{ provide: 'xaml-flyout', useExisting: FlyoutComponent }], styles: ["FlyoutPresenter{padding:16px}\n"] }]
-        }] });
-
-class ComboBoxComponent extends SelectorComponent {
-    get item() {
-        return this.SelectedItem;
+class ScrollViewerComponent extends FrameworkElementComponent {
+    get IsHorizontalScrollBarVisible() {
+        switch (this.HorizontalScrollMode) {
+            case 'Disabled':
+                return false;
+            case 'Auto':
+                return this.ViewportWidth < this.ExtentWidth;
+            case 'Enabled':
+                return true;
+        }
     }
-    get index() {
-        return this.SelectedIndex;
+    get IsVerticalScrollBarVisible() {
+        switch (this.VerticalScrollMode) {
+            case 'Disabled':
+                return false;
+            case 'Auto':
+                return this.ViewportHeight < this.ExtentHeight;
+            case 'Enabled':
+                return true;
+        }
     }
-    constructor(_changeDetector, _host) {
+    get ExtentWidth() {
+        return this._extentWidth;
+    }
+    get ExtentHeight() {
+        return this._extentHeight;
+    }
+    get ViewportWidth() {
+        return this._viewportWidth;
+    }
+    get ViewportHeight() {
+        return this._viewportHeight;
+    }
+    get HorizontalOffset() {
+        return this._horizontalOffset;
+    }
+    set HorizontalOffset(value) {
+        const element = this._content?.nativeElement;
+        if (element) {
+            element.scrollLeft = value;
+            this._horizontalOffset = element.scrollLeft;
+        }
+    }
+    get VerticalOffset() {
+        return this._verticalOffset;
+    }
+    set VerticalOffset(value) {
+        const element = this._content?.nativeElement;
+        if (element) {
+            element.scrollTop = value;
+            this._verticalOffset = element.scrollTop;
+        }
+    }
+    get overflow() {
+        return "hidden";
+    }
+    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, _zone) {
         super();
         this._changeDetector = _changeDetector;
-        this._host = _host;
-        this.target = null;
-        this.SelectedIndexChange.subscribe(() => this.onSelectionChanged());
+        this._zone = _zone;
+        this.HorizontalScrollMode = 'Auto';
+        this.VerticalScrollMode = 'Auto';
+        //Cached scroll metrics, refreshed by measure() on scroll and resize, so the template can bind them
+        //without touching layout
+        this._extentWidth = 0;
+        this._extentHeight = 0;
+        this._viewportWidth = 0;
+        this._viewportHeight = 0;
+        this._horizontalOffset = 0;
+        this._verticalOffset = 0;
+        this._isDestroyed = false;
+    }
+    /** Scrolls to an absolute offset, leaving omitted axes where they are. */
+    ScrollTo(horizontalOffset, verticalOffset) {
+        if (horizontalOffset !== undefined)
+            this.HorizontalOffset = horizontalOffset;
+        if (verticalOffset !== undefined)
+            this.VerticalOffset = verticalOffset;
+    }
+    /** Scrolls by an offset relative to the current position. */
+    ScrollBy(horizontalDelta, verticalDelta) {
+        this.ScrollTo(this.HorizontalOffset + horizontalDelta, this.VerticalOffset + verticalDelta);
+    }
+    /** Scrolls an element of the content into view. */
+    ScrollToElement(element, options = { block: 'nearest' }) {
+        element.scrollIntoView(options);
+        this.measure();
     }
-    onIsOpenChanged(value) {
-        if (!value)
-            return;
-        let rect = this._host.nativeElement.getBoundingClientRect();
-        let popupOffset = -(this._selector?.GetElement(this.SelectedIndex)?.offsetTop ?? 0);
-        this.target = { x: rect.left + 3, y: rect.top + popupOffset - 4, width: rect.width };
+    onScroll() {
+        //the scroll event already marks this component for check, just refresh the cached offsets
+        this.measure();
     }
     ngAfterViewInit() {
+        this.measure();
+        this.observe();
         //help the layout finish itself
         this._changeDetector.detectChanges();
     }
-    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 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ComboBoxComponent, isStandalone: true, selector: "ComboBox", viewQueries: [{ propertyName: "_selector", first: true, predicate: ListViewComponent, descendants: true }, { propertyName: "_popup", first: true, predicate: ["xaml-flyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<DropDownButton [HorizontalContentAlignment]=\"HorizontalContentAlignment\" [VerticalContentAlignment]=\"VerticalContentAlignment\" [IsEnabled]=\"IsEnabled\">\n    <ItemContainer #container><ng-container *ngIf=\"ItemTemplate\">\n    <ng-container [ngTemplateOutlet]=\"ItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutletInjector]=\"container.Injector\" />\n    </ng-container>\n  <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath && item !== null ? item[DisplayMemberPath] : item }}</ng-container></ItemContainer>\n    <Flyout Placement=\"Cover\" Padding=\"0\" [Target]=\"target\" (IsOpenChange)=\"onIsOpenChanged($event)\">\n      <ListView [ItemSource]=\"ItemSource\" [(SelectedIndex)]=\"SelectedIndex\" [HorizontalContentAlignment]=\"HorizontalContentAlignment\" [VerticalContentAlignment]=\"VerticalContentAlignment\"\n                [DisplayMemberPath]=\"DisplayMemberPath\" [SelectedValuePath]=\"SelectedValuePath\"/>\n    </Flyout>\n  </DropDownButton>", isInline: true, styles: [":host ::ng-deep .popup>.popup-container{left:0;right:0;top:0}:host ::ng-deep .popup>.popup-container>.popup-content{padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropDownButtonComponent, selector: "DropDownButton" }, { kind: "component", type: FlyoutComponent, selector: "Flyout" }, { kind: "component", type: ListViewComponent, selector: "ListView" }, { kind: "component", type: ItemContainerComponent, selector: "ItemContainer" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ComboBoxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ComboBox', imports: [CommonModule, DropDownButtonComponent, FlyoutComponent, ListViewComponent, ItemContainerComponent], template: `<DropDownButton [HorizontalContentAlignment]="HorizontalContentAlignment" [VerticalContentAlignment]="VerticalContentAlignment" [IsEnabled]="IsEnabled">
-    <ItemContainer #container>${SelectorItemTemplate}</ItemContainer>
-    <Flyout Placement="Cover" Padding="0" [Target]="target" (IsOpenChange)="onIsOpenChanged($event)">
-      <ListView [ItemSource]="ItemSource" [(SelectedIndex)]="SelectedIndex" [HorizontalContentAlignment]="HorizontalContentAlignment" [VerticalContentAlignment]="VerticalContentAlignment"
-                [DisplayMemberPath]="DisplayMemberPath" [SelectedValuePath]="SelectedValuePath"/>
-    </Flyout>
-  </DropDownButton>`, styles: [":host ::ng-deep .popup>.popup-container{left:0;right:0;top:0}:host ::ng-deep .popup>.popup-container>.popup-content{padding:0!important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { _selector: [{
-                type: ViewChild,
-                args: [ListViewComponent]
-            }], _popup: [{
-                type: ViewChild,
-                args: ['xaml-flyout']
-            }] } });
-
-class RadioButtonComponent extends BorderComponent {
-    onChange(event) {
-        this.IsChecked = (event.target).checked;
-        this.IsCheckedChange.emit(this.IsChecked);
+    ngOnDestroy() {
+        this._isDestroyed = true;
+        this._resizeObserver?.disconnect();
+        this._mutationObserver?.disconnect();
+    }
+    //Reads the live geometry of the content into the cached fields, called from scroll and observer
+    //callbacks only, where the layout has already settled
+    measure() {
+        const element = this._content?.nativeElement;
+        if (!element)
+            return;
+        this._extentWidth = element.scrollWidth;
+        this._extentHeight = element.scrollHeight;
+        this._viewportWidth = element.clientWidth;
+        this._viewportHeight = element.clientHeight;
+        this._horizontalOffset = element.scrollLeft;
+        this._verticalOffset = element.scrollTop;
+    }
+    //Watches the content for size changes - the viewport resized, the content grown or shrunk - so the
+    //scrollbars stay correct without polling layout on every change detection cycle
+    observe() {
+        const element = this._content?.nativeElement;
+        if (!element || typeof ResizeObserver === 'undefined')
+            return;
+        this._zone.runOutsideAngular(() => {
+            this._resizeObserver = new ResizeObserver(() => this.refresh());
+            this.observeContent(element);
+            if (typeof MutationObserver === 'undefined')
+                return;
+            //Children come and go as the projected content renders, and adding or removing one changes the
+            //extent without resizing anything the ResizeObserver watches, so keep the watched set in sync
+            this._mutationObserver = new MutationObserver(() => {
+                if (this._isDestroyed)
+                    return;
+                this.observeContent(element);
+                this.refresh();
+            });
+            this._mutationObserver.observe(element, { childList: true });
+        });
     }
-    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);
+    //The content element gives the viewport size and its children give the extent - any of them can be
+    //the one which grows, so all of them are watched
+    observeContent(element) {
+        if (!this._resizeObserver)
+            return;
+        this._resizeObserver.disconnect();
+        this._resizeObserver.observe(element);
+        for (const child of Array.from(element.children))
+            this._resizeObserver.observe(child);
+    }
+    //Refreshes the cached metrics and renders just this view - the observers run outside the zone, so
+    //nothing else would pick the change up, and a scrollbar is not worth a global tick
+    refresh() {
+        if (this._isDestroyed)
+            return;
+        this.measure();
+        this._changeDetector.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonComponent, deps: [{ token: RadioButtonGroupComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: RadioButtonComponent, isStandalone: true, selector: "RadioButton", inputs: { IsEnabled: "IsEnabled", IsChecked: "IsChecked", Group: "Group", Value: "Value" }, outputs: { IsCheckedChange: "IsCheckedChange" }, usesInheritance: true, ngImport: i0, template: `<label class="container">
-    <input type="radio" [name]="Group" [value]="Value" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
-    <div class="radioButton">
-      <div class="circle"></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=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);place-items:center;transition:border-color var(--ControlFastAnimationDuration);transition:background-color var(--ControlFastAnimationDuration)}.circle{width:10px;height:10px;border-radius:5px;background-color:var(--TextOnAccentFillColorPrimary);transition:transform var(--ControlNormalAnimationDuration);transform:scale(0)}.content{align-self:center}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScrollViewerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], 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()" cdkScrollable><ng-content/></div>
+    <ScrollBar *ngIf="IsVerticalScrollBarVisible" HorizontalAlignment="Right" class="scrollbar" Orientation="Vertical" [ScrollSize]="ExtentHeight" [ViewportSize]="ViewportHeight" [(Value)]="VerticalOffset"/>
+    <ScrollBar *ngIf="IsHorizontalScrollBarVisible" VerticalAlignment="Bottom" class="scrollbar" Orientation="Horizontal" [ScrollSize]="ExtentWidth" [ViewportSize]="ViewportWidth" [(Value)]="HorizontalOffset"/>`, isInline: true, styles: [":host{display:grid;overflow:auto;touch-action:pan-x pan-y}:host>.content{touch-action:pan-x pan-y;overscroll-behavior:contain;overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;display:grid;grid-row-start:1;grid-column-start:1;justify-self:stretch;align-self:stretch}:host>.content::-webkit-scrollbar{display:none}:host>.scrollbar{display:grid;grid-row-start:1;grid-column-start:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ScrollBarComponent, selector: "ScrollBar", inputs: ["Orientation", "ViewportSize", "ScrollSize", "StepSize", "Value", "IsEnabled"], outputs: ["ValueChange"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScrollViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'RadioButton', 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>`, 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);place-items:center;transition:border-color var(--ControlFastAnimationDuration);transition:background-color var(--ControlFastAnimationDuration)}.circle{width:10px;height:10px;border-radius:5px;background-color:var(--TextOnAccentFillColorPrimary);transition:transform var(--ControlNormalAnimationDuration);transform:scale(0)}.content{align-self:center}\n"] }]
-        }], ctorParameters: () => [{ type: RadioButtonGroupComponent, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { IsEnabled: [{
-                type: Input
-            }], IsChecked: [{
-                type: Input
-            }], IsCheckedChange: [{
-                type: Output
-            }], Group: [{
+            args: [{ selector: 'ScrollViewer', imports: [CommonModule, ScrollBarComponent, CdkScrollable], template: `<div #content class="content" [ngStyle]="contentStyle" (scroll)="onScroll()" cdkScrollable><ng-content/></div>
+    <ScrollBar *ngIf="IsVerticalScrollBarVisible" HorizontalAlignment="Right" class="scrollbar" Orientation="Vertical" [ScrollSize]="ExtentHeight" [ViewportSize]="ViewportHeight" [(Value)]="VerticalOffset"/>
+    <ScrollBar *ngIf="IsHorizontalScrollBarVisible" VerticalAlignment="Bottom" class="scrollbar" Orientation="Horizontal" [ScrollSize]="ExtentWidth" [ViewportSize]="ViewportWidth" [(Value)]="HorizontalOffset"/>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:grid;overflow:auto;touch-action:pan-x pan-y}:host>.content{touch-action:pan-x pan-y;overscroll-behavior:contain;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 }, { type: i0.NgZone }], propDecorators: { HorizontalScrollMode: [{
                 type: Input
-            }], Value: [{
+            }], VerticalScrollMode: [{
                 type: Input
+            }], _content: [{
+                type: ViewChild,
+                args: ['content']
             }] } });
-class RadioButtonGroupComponent extends StackPanelComponent {
+
+class StackPanelComponent extends PanelComponent {
     constructor() {
         super(...arguments);
-        this.ValueChange = new EventEmitter();
-        this._children = [];
+        this.Orientation = 'Vertical';
     }
-    set Value(value) {
-        if (this._children) {
-            for (let item of this._children) {
-                item.IsChecked = item.Value === value;
-            }
-        }
-        if (this._value === value)
-            return;
-        this._value = value;
-        this.ValueChange.emit(value);
+    get gridAutoFlow() {
+        return this.Orientation === 'Horizontal' ? 'column' : 'row';
     }
-    get Value() {
-        return this._value;
+    get gridAutoRows() {
+        return this.Orientation === 'Vertical' ? 'auto' : undefined;
     }
-    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._children.push(child);
+    get gridAutoColumns() {
+        return this.Orientation === 'Horizontal' ? 'auto' : undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: RadioButtonGroupComponent, isStandalone: true, selector: "RadioButtonGroup", inputs: { Value: "Value" }, outputs: { ValueChange: "ValueChange" }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;position:relative}\n"] }); }
+    get alignContent() {
+        return this.Orientation === 'Vertical' ? 'start' : undefined;
+    }
+    get justifyContent() {
+        return this.Orientation === 'Horizontal' ? 'start' : undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: StackPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: StackPanelComponent, isStandalone: true, selector: "StackPanel", inputs: { Orientation: "Orientation", Spacing: "Spacing" }, host: { properties: { "style.gap": "this.Spacing", "style.grid-auto-flow": "this.gridAutoFlow", "style.grid-auto-rows": "this.gridAutoRows", "style.grid-auto-columns": "this.gridAutoColumns", "style.align-content": "this.alignContent", "style.justify-content": "this.justifyContent" } }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;position:relative}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: StackPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'RadioButtonGroup', template: `<ng-content/>`, styles: [":host{display:grid;position:relative}\n"] }]
-        }], propDecorators: { Value: [{
+            args: [{ selector: 'StackPanel', template: `<ng-content/>`, styles: [":host{display:grid;position:relative}\n"] }]
+        }], propDecorators: { Orientation: [{
                 type: Input
-            }], ValueChange: [{
-                type: Output
+            }], Spacing: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.gap']
+            }], gridAutoFlow: [{
+                type: HostBinding,
+                args: ['style.grid-auto-flow']
+            }], gridAutoRows: [{
+                type: HostBinding,
+                args: ['style.grid-auto-rows']
+            }], gridAutoColumns: [{
+                type: HostBinding,
+                args: ['style.grid-auto-columns']
+            }], alignContent: [{
+                type: HostBinding,
+                args: ['style.align-content']
+            }], justifyContent: [{
+                type: HostBinding,
+                args: ['style.justify-content']
             }] } });
 
-class RadioToggleButtonComponent extends RadioButtonComponent {
-    get checked() {
-        return this.IsChecked;
+class ItemContainerComponent {
+    constructor(Element, Injector) {
+        this.Element = Element;
+        this.Injector = Injector;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioToggleButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: RadioToggleButtonComponent, isStandalone: true, selector: "RadioToggleButton", host: { properties: { "class.checked": "this.checked" } }, usesInheritance: true, ngImport: i0, template: `<label>
-    <input type="radio" [name]="Group" [value]="Value" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
-    <ng-content/>
-  </label>`, isInline: true, styles: [":host{position:relative}:host{display:grid;padding:var(--ButtonPadding);border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;box-sizing:border-box;font-size:var(--SystemFontSize);font-family:var(--SystemFontFamily);background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle{border-style:none;border-width:0;background-color:transparent;color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.HyperlinkButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle:not(.disabled){cursor:pointer}:host.HyperlinkButtonStyle::ng-deep *{color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:not(.checked):active:not(.flyout-open):not(.disabled){color:var(--AccentFillColorSecondary)}:host.HyperlinkButtonStyle:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--AccentFillColorSecondary)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n", ":host{padding:0}input{display:none}label{padding:var(--ButtonPadding)}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ItemContainerComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ItemContainerComponent, isStandalone: true, selector: "ItemContainer", 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: RadioToggleButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ItemContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'RadioToggleButton', template: `<label>
-    <input type="radio" [name]="Group" [value]="Value" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
-    <ng-content/>
-  </label>`, styles: [":host{position:relative}:host{display:grid;padding:var(--ButtonPadding);border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;box-sizing:border-box;font-size:var(--SystemFontSize);font-family:var(--SystemFontFamily);background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle{border-style:none;border-width:0;background-color:transparent;color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.HyperlinkButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle:not(.disabled){cursor:pointer}:host.HyperlinkButtonStyle::ng-deep *{color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:not(.checked):active:not(.flyout-open):not(.disabled){color:var(--AccentFillColorSecondary)}:host.HyperlinkButtonStyle:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--AccentFillColorSecondary)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n", ":host{padding:0}input{display:none}label{padding:var(--ButtonPadding)}\n"] }]
-        }], propDecorators: { checked: [{
-                type: HostBinding,
-                args: ['class.checked']
-            }] } });
+            args: [{ selector: 'ItemContainer', template: `<ng-content/>`, styles: [":host{display:grid;position:relative}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Injector }] });
 
-class RepeatButtonComponent extends ButtonComponent {
-    constructor() {
-        super(...arguments);
-        this.Delay = 250;
-        this.Interval = 250;
-    }
-    onPointerDown(event) {
-        if (!this.IsEnabled)
-            return;
-        event.target.setPointerCapture(event.pointerId);
-        this.Click.emit();
-        this._delayTimer = setTimeout(() => {
-            this.Click.emit();
-            this._intervalTimer = setInterval(() => {
-                this.Click.emit();
-            }, this.Interval);
-        }, this.Delay);
-    }
-    onPointerUp(event) {
-        this.clearTimers();
-    }
-    clearTimers() {
-        if (this._delayTimer !== undefined)
-            clearTimeout(this._delayTimer);
-        if (this._intervalTimer !== undefined)
-            clearInterval(this._intervalTimer);
+class ListViewComponent extends SelectorComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ListViewComponent, isStandalone: true, selector: "ListView", usesInheritance: true, ngImport: i0, template: "<ScrollViewer>\n    <StackPanel Padding=\"2px 0\">\n      <ItemContainer #container *ngFor=\"let item of ItemSource; index as index; trackBy: getValue\" class=\"item\" [ngClass]=\"{'selected': index == SelectedIndex}\" (click)=\"onItemClick($event, index, item)\" [id]=\"'xaml-selector-'+_id+'-item-'+index\" @itemFading>\n        <div class=\"item-selector\"></div>\n        <div class=\"item-content\" [ngStyle]=\"{'align-content': alignContent, 'justify-content': justifyContent}\"><ng-container *ngIf=\"ItemTemplate\">\n    <ng-container [ngTemplateOutlet]=\"ItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutletInjector]=\"container.Injector\" />\n    </ng-container>\n  <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath && item !== null ? item[DisplayMemberPath] : item }}</ng-container></div>\n      </ItemContainer>\n    </StackPanel>\n  </ScrollViewer>", isInline: true, styles: [":host{position:relative}:host{display:grid}:host .item{display:grid;margin:2px 4px;border-radius:4px}:host .item>.item-selector,:host .item>.item-content{display:grid;grid-row-start:1;grid-column-start:1;justify-self:stretch}:host .item>.item-selector{justify-self:left;align-self:center;width:4px;height:12px;border-radius:2px;transition:height var(--ControlNormalAnimationDuration)}:host .item>.item-content{padding:8px 12px}:host .item.selected>.item-selector{height:18px}:host:not(.disabled) .item:not(:hover):not(:active):not(.selected){background-color:transparent;color:var(--TextFillColorPrimary)}:host:not(.disabled) .item:hover:not(.active):not(.selected){background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:active:not(.selected){background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:not(:hover):not(:active).selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:hover:not(:active).selected{background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:active.selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item.selected>.item-selector{background-color:var(--AccentFillColorDefault)}:host.disabled .item>.item-content{color:var(--TextFillColorDisabled)}:host.disabled .item:not(.selected){background-color:transparent}:host.disabled .item.selected{background-color:var(--SubtleFillColorSecondary)}:host.disabled .item.selected>.item-selector{background-color:var(--AccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ScrollViewerComponent, selector: "ScrollViewer", inputs: ["HorizontalScrollMode", "VerticalScrollMode"] }, { kind: "component", type: StackPanelComponent, selector: "StackPanel", inputs: ["Orientation", "Spacing"] }, { kind: "component", type: ItemContainerComponent, selector: "ItemContainer" }], animations: [
+            trigger('itemFading', [
+                transition(':enter', [animate('500ms ease-in', keyframes([
+                        style({ opacity: 0, height: 0 }),
+                        style({ opacity: 0, height: '*' }),
+                        style({ opacity: 1, height: '*' }),
+                    ]))]),
+                transition(':leave', [animate('500ms ease-out', keyframes([
+                        style({ opacity: 1, height: '*' }),
+                        style({ opacity: 0, height: '*' }),
+                        style({ opacity: 0, height: 0 }),
+                    ]))]),
+            ])
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ListView', imports: [CommonModule, ScrollViewerComponent, StackPanelComponent, ItemContainerComponent], template: `<ScrollViewer>
+    <StackPanel Padding="2px 0">
+      <ItemContainer #container *ngFor="let item of ItemSource; index as index; trackBy: getValue" class="item" [ngClass]="{'selected': index == SelectedIndex}" (click)="onItemClick($event, index, item)" [id]="'xaml-selector-'+_id+'-item-'+index" @itemFading>
+        <div class="item-selector"></div>
+        <div class="item-content" [ngStyle]="{'align-content': alignContent, 'justify-content': justifyContent}">${SelectorItemTemplate}</div>
+      </ItemContainer>
+    </StackPanel>
+  </ScrollViewer>`, animations: [
+                        trigger('itemFading', [
+                            transition(':enter', [animate('500ms ease-in', keyframes([
+                                    style({ opacity: 0, height: 0 }),
+                                    style({ opacity: 0, height: '*' }),
+                                    style({ opacity: 1, height: '*' }),
+                                ]))]),
+                            transition(':leave', [animate('500ms ease-out', keyframes([
+                                    style({ opacity: 1, height: '*' }),
+                                    style({ opacity: 0, height: '*' }),
+                                    style({ opacity: 0, height: 0 }),
+                                ]))]),
+                        ])
+                    ], styles: [":host{position:relative}:host{display:grid}:host .item{display:grid;margin:2px 4px;border-radius:4px}:host .item>.item-selector,:host .item>.item-content{display:grid;grid-row-start:1;grid-column-start:1;justify-self:stretch}:host .item>.item-selector{justify-self:left;align-self:center;width:4px;height:12px;border-radius:2px;transition:height var(--ControlNormalAnimationDuration)}:host .item>.item-content{padding:8px 12px}:host .item.selected>.item-selector{height:18px}:host:not(.disabled) .item:not(:hover):not(:active):not(.selected){background-color:transparent;color:var(--TextFillColorPrimary)}:host:not(.disabled) .item:hover:not(.active):not(.selected){background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:active:not(.selected){background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:not(:hover):not(:active).selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:hover:not(:active).selected{background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:active.selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item.selected>.item-selector{background-color:var(--AccentFillColorDefault)}:host.disabled .item>.item-content{color:var(--TextFillColorDisabled)}:host.disabled .item:not(.selected){background-color:transparent}:host.disabled .item.selected{background-color:var(--SubtleFillColorSecondary)}:host.disabled .item.selected>.item-selector{background-color:var(--AccentFillColorDisabled)}\n"] }]
+        }] });
+
+class DropDownButtonComponent extends ButtonComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DropDownButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: DropDownButtonComponent, isStandalone: true, selector: "DropDownButton", usesInheritance: true, ngImport: i0, template: `<div class="content"><TextBlock *ngIf="Content !== undefined" [Text]="Content"/><ng-content select=":not(Flyout):not(MenuFlyout)"/></div>
+  <div class="drop-down-glyph">&#xE70D;</div>
+  <ng-content select="Flyout, MenuFlyout"/>`, isInline: true, styles: [":host{position:relative}:host{display:grid;padding:var(--ButtonPadding);border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;box-sizing:border-box;font-size:var(--SystemFontSize);font-family:var(--SystemFontFamily);background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked).pressed:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked).pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked.pressed:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked.pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle{border-style:none;border-width:0;background-color:transparent;color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.HyperlinkButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle:not(.disabled){cursor:pointer}:host.HyperlinkButtonStyle::ng-deep *{color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:not(.checked).pressed:not(.flyout-open):not(.disabled){color:var(--AccentFillColorSecondary)}:host.HyperlinkButtonStyle:not(.checked).pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--AccentFillColorSecondary)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle.pressed:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n", ":host{grid-template-columns:1fr auto;align-items:center}.content{display:grid;justify-content:inherit;align-content:inherit;min-width:0}.content:not(:empty){margin-right:8px}.drop-down-glyph{display:grid;font-family:var(--SymbolFontFamily);font-size:8pt;width:12px;justify-content:center;align-content:center;grid-column:2;transition:transform var(--ControlNormalAnimationDuration)}:host.pressed:not(.flyout-open):not(.disabled) .drop-down-glyph{transform:translateY(3px)}\n"], dependencies: [{ kind: "component", type: TextBlockComponent, selector: "TextBlock", inputs: ["FontFamily", "Text", "FontSize", "FontStyle", "FontWeight", "Foreground", "TextAlignment", "IsTextSelectionEnabled", "TextDecorations", "TextTrimming", "TextWrapping"] }, { 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: DropDownButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'DropDownButton', imports: [TextBlockComponent, CommonModule], template: `<div class="content"><TextBlock *ngIf="Content !== undefined" [Text]="Content"/><ng-content select=":not(Flyout):not(MenuFlyout)"/></div>
+  <div class="drop-down-glyph">&#xE70D;</div>
+  <ng-content select="Flyout, MenuFlyout"/>`, styles: [":host{position:relative}:host{display:grid;padding:var(--ButtonPadding);border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;box-sizing:border-box;font-size:var(--SystemFontSize);font-family:var(--SystemFontFamily);background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked).pressed:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked).pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked.pressed:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked.pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle{border-style:none;border-width:0;background-color:transparent;color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.HyperlinkButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle:not(.disabled){cursor:pointer}:host.HyperlinkButtonStyle::ng-deep *{color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:not(.checked).pressed:not(.flyout-open):not(.disabled){color:var(--AccentFillColorSecondary)}:host.HyperlinkButtonStyle:not(.checked).pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--AccentFillColorSecondary)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle.pressed:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n", ":host{grid-template-columns:1fr auto;align-items:center}.content{display:grid;justify-content:inherit;align-content:inherit;min-width:0}.content:not(:empty){margin-right:8px}.drop-down-glyph{display:grid;font-family:var(--SymbolFontFamily);font-size:8pt;width:12px;justify-content:center;align-content:center;grid-column:2;transition:transform var(--ControlNormalAnimationDuration)}:host.pressed:not(.flyout-open):not(.disabled) .drop-down-glyph{transform:translateY(3px)}\n"] }]
+        }] });
+
+class FlyoutPresenter {
+    constructor() {
+        this.TransitionAnimation = 'Default';
+        this.IsVisible = false;
     }
-    onClick(event) {
-        //Disable pointer event handling on the base button
+    static { this.TransitionDuration = 250; }
+    get transitionClass() {
+        return 'transition-' + this.TransitionAnimation.toLowerCase();
     }
-    ngOnDestroy() {
-        this.clearTimers();
+    onContextMenu(event) {
+        event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RepeatButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: RepeatButtonComponent, isStandalone: true, selector: "RepeatButton", inputs: { Delay: "Delay", Interval: "Interval" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-content *ngIf=\"Content === undefined\"/>\n  <TextBlock *ngIf=\"Content !== undefined\">{{Content}}</TextBlock>", isInline: true, styles: [":host{position:relative}:host{display:grid;padding:var(--ButtonPadding);border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;box-sizing:border-box;font-size:var(--SystemFontSize);font-family:var(--SystemFontFamily);background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle{border-style:none;border-width:0;background-color:transparent;color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.HyperlinkButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle:not(.disabled){cursor:pointer}:host.HyperlinkButtonStyle::ng-deep *{color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:not(.checked):active:not(.flyout-open):not(.disabled){color:var(--AccentFillColorSecondary)}:host.HyperlinkButtonStyle:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--AccentFillColorSecondary)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextBlockComponent, selector: "TextBlock", inputs: ["FontFamily", "Text", "FontSize", "FontStyle", "FontWeight", "Foreground", "TextAlignment", "IsTextSelectionEnabled", "TextDecorations", "TextTrimming", "TextWrapping"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutPresenter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FlyoutPresenter, isStandalone: true, selector: "FlyoutPresenter", inputs: { TransitionAnimation: "TransitionAnimation", Padding: "Padding", IsVisible: "IsVisible" }, host: { listeners: { "contextmenu": "onContextMenu($event)" }, properties: { "style.padding": "this.Padding", "class.visible": "this.IsVisible", "class": "this.transitionClass" } }, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{--FlyoutSlideInLength: 10px;display:grid;overflow:hidden;-webkit-user-select:none;user-select:none;border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #00000080;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault);transition:opacity var(--ControlNormalAnimationDuration),transform var(--ControlNormalAnimationDuration);opacity:0;max-width:calc(100dvw - 32px);max-height:calc(100dvh - 32px)}:host.transition-slideup{transform:translateY(var(--FlyoutSlideInLength))}:host.transition-slidedown{transform:translateY(calc(-1 * var(--FlyoutSlideInLength)))}:host.transition-slideleft{transform:translate(var(--FlyoutSlideInLength))}:host.transition-slideright{transform:translate(calc(-1 * var(--FlyoutSlideInLength)))}:host.visible{opacity:1;transform:translate(0)}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RepeatButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutPresenter, decorators: [{
             type: Component,
-            args: [{ selector: 'RepeatButton', imports: [CommonModule, TextBlockComponent], template: ButtonTemplate, styles: [":host{position:relative}:host{display:grid;padding:var(--ButtonPadding);border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;box-sizing:border-box;font-size:var(--SystemFontSize);font-family:var(--SystemFontFamily);background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle{border-style:none;border-width:0;background-color:transparent;color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.HyperlinkButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle:not(.disabled){cursor:pointer}:host.HyperlinkButtonStyle::ng-deep *{color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:not(.checked):active:not(.flyout-open):not(.disabled){color:var(--AccentFillColorSecondary)}:host.HyperlinkButtonStyle:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--AccentFillColorSecondary)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"] }]
-        }], propDecorators: { Delay: [{
+            args: [{ selector: 'FlyoutPresenter', template: `<ng-content/>`, styles: [":host{--FlyoutSlideInLength: 10px;display:grid;overflow:hidden;-webkit-user-select:none;user-select:none;border-width:1px;border-style:solid;border-radius:var(--OverlayCornerRadius);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #00000080;border-color:var(--SurfaceStrokeColorFlyout);background-color:var(--AcrylicInAppFillColorDefault);transition:opacity var(--ControlNormalAnimationDuration),transform var(--ControlNormalAnimationDuration);opacity:0;max-width:calc(100dvw - 32px);max-height:calc(100dvh - 32px)}:host.transition-slideup{transform:translateY(var(--FlyoutSlideInLength))}:host.transition-slidedown{transform:translateY(calc(-1 * var(--FlyoutSlideInLength)))}:host.transition-slideleft{transform:translate(var(--FlyoutSlideInLength))}:host.transition-slideright{transform:translate(calc(-1 * var(--FlyoutSlideInLength)))}:host.visible{opacity:1;transform:translate(0)}\n"] }]
+        }], propDecorators: { TransitionAnimation: [{
                 type: Input
-            }], Interval: [{
+            }], Padding: [{
                 type: Input
-            }], onPointerDown: [{
+            }, {
+                type: HostBinding,
+                args: ['style.padding']
+            }], IsVisible: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.visible']
+            }], transitionClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], onContextMenu: [{
                 type: HostListener,
-                args: ['pointerdown', ['$event']]
-            }], onPointerUp: [{
+                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)" }, classAttribute: "xaml-themed" }, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: ["XamlRoot{all:initial;display:grid;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none;box-sizing:border-box;font-family:var(--SystemFontFamily);font-size:var(--SystemFontSize);color:var(--TextFillColorPrimary);background:var(--WindowFillColorDefault)}.xaml-themed{--AcrylicBlur: var(--XamlUiOverrideAcrylicBlur, blur(12px));--ControlBorderThickness: var(--XamlUiOverrideControlBorderThickness, 1px);--ControlCornerRadius: var(--XamlUiOverrideControlCornerRadius, 4px);--OverlayCornerRadius: var(--XamlUiOverrideOverlayCornerRadius, 8px);--ButtonVerticalPadding: var(--XamlUiOverrideButtonVerticalPadding, 5px);--ButtonHorizontalPadding: var(--XamlUiOverrideButtonHorizontalPadding, 11px);--ButtonPadding: var(--XamlUiOverrideButtonPadding, var(--ButtonVerticalPadding) var(--ButtonHorizontalPadding));--SystemFontSize: var(--XamlUiOverrideSystemFontSize, 10pt);--SystemFontFamily: var(--XamlUiOverrideSystemFontFamily, \"Segoe UI\", Arial, sans-serif);--SymbolFontSize: var(--XamlUiOverrideSymbolFontSize, 10pt);--SymbolFontFamily: var(--XamlUiOverrideSymbolFontFamily, \"Segoe Fluent Icons\", \"Segoe MDL2 Assets\");--SystemAccentColor: var(--XamlUiOverrideSystemAccentColor, #0078d4);--SmokeFillColorDefault: var(--XamlUiOverrideSmokeFillColorDefault, #0000004D);--ControlNormalAnimationDuration: var(--XamlUiOverrideControlNormalAnimationDuration, .25s);--ControlFastAnimationDuration: var(--XamlUiOverrideControlFastAnimationDuration, .167s);--ControlFasterAnimationDuration: var(--XamlUiOverrideControlFasterAnimationDuration, 83ms);--WindowFillColorDefault: var(--XamlUiOverrideWindowFillColorDefault, #202020FF);--ControlFillColorDefault: var(--XamlUiOverrideControlFillColorDefault, #FFFFFF0F);--ControlFillColorSecondary: var(--XamlUiOverrideControlFillColorSecondary, #FFFFFF15);--ControlFillColorTertiary: var(--XamlUiOverrideControlFillColorTertiary, #FFFFFF08);--ControlFillColorDisabled: var(--XamlUiOverrideControlFillColorDisabled, #FFFFFF0B);--ControlFillColorInputActive: var(--XamlUiOverrideControlFillColorInputActive, #1E1E1EB3);--ControlSolidFillColorDefault: var(--XamlUiOverrideControlSolidFillColorDefault, #454545FF);--ControlAltFillColorSecondary: var(--XamlUiOverrideControlAltFillColorSecondary, #00000019);--ControlAltFillColorTertiary: var(--XamlUiOverrideControlAltFillColorTertiary, #FFFFFF0B);--ControlAltFillColorQuarternary: var(--XamlUiOverrideControlAltFillColorQuarternary, #FFFFFF12);--ControlAltFillColorDisabled: var(--XamlUiOverrideControlAltFillColorDisabled, #FFFFFF00);--ControlStrongFillColorDefault: var(--XamlUiOverrideControlStrongFillColorDefault, #FFFFFF8B);--ControlStrongFillColorDisabled: var(--XamlUiOverrideControlStrongFillColorDisabled, #FFFFFF3F);--ControlFillColorTransparent: var(--XamlUiOverrideControlFillColorTransparent, #FFFFFF00);--SubtleFillColorTransparent: var(--XamlUiOverrideSubtleFillColorTransparent, #FFFFFF00);--SubtleFillColorSecondary: var(--XamlUiOverrideSubtleFillColorSecondary, #FFFFFF0F);--SubtleFillColorTertiary: var(--XamlUiOverrideSubtleFillColorTertiary, #FFFFFF0A);--AccentFillColorDefault: var(--XamlUiOverrideAccentFillColorDefault, #4CC2FFFF);--AccentFillColorSecondary: var(--XamlUiOverrideAccentFillColorSecondary, #4CC2FFE6);--AccentFillColorTertiary: var(--XamlUiOverrideAccentFillColorTertiary, #4CC2FFCC);--AccentFillColorDisabled: var(--XamlUiOverrideAccentFillColorDisabled, #FFFFFF28);--SystemControlHighlightListAccentLow: var(--XamlUiOverrideSystemControlHighlightListAccentLow, #0078D499);--SystemControlHighlightListAccentMedium: var(--XamlUiOverrideSystemControlHighlightListAccentMedium, #0078D4CC);--SystemControlHighlightListAccentHigh: var(--XamlUiOverrideSystemControlHighlightListAccentHigh, #0078D4E6);--ControlStrokeColorDefault: var(--XamlUiOverrideControlStrokeColorDefault, #FFFFFF12);--ControlStrongStrokeColorDefault: var(--XamlUiOverrideControlStrongStrokeColorDefault, #FFFFFF8B);--ControlStrongStrokeColorDisabled: var(--XamlUiOverrideControlStrongStrokeColorDisabled, #FFFFFF28);--ControlStrokeColorOnAccentDefault: var(--XamlUiOverrideControlStrokeColorOnAccentDefault, #FFFFFF14);--TextFillColorPrimary: var(--XamlUiOverrideTextFillColorPrimary, #FFFFFFFF);--TextFillColorSecondary: var(--XamlUiOverrideTextFillColorSecondary, #FFFFFFC5);--TextFillColorDisabled: var(--XamlUiOverrideTextFillColorDisabled, #FFFFFF5D);--TextOnAccentFillColorSelected: var(--XamlUiOverrideTextOnAccentFillColorSelected, #FFFFFFFF);--TextOnAccentFillColorPrimary: var(--XamlUiOverrideTextOnAccentFillColorPrimary, #000000);--TextOnAccentFillColorSecondary: var(--XamlUiOverrideTextOnAccentFillColorSecondary, #00000080);--TextOnAccentFillColorDisabled: var(--XamlUiOverrideTextOnAccentFillColorDisabled, #FFFFFF87);--SurfaceStrokeColorFlyout: var(--XamlUiOverrideSurfaceStrokeColorFlyout, #00000033);--AcrylicInAppFillColorDefault: var(--XamlUiOverrideAcrylicInAppFillColorDefault, #2C2C2C26);--SystemChromeMediumLowColor: var(--XamlUiOverrideSystemChromeMediumLowColor, #2B2B2BFF);--DividerStrokeColorDefault: var(--XamlUiOverrideDividerStrokeColorDefault, #FFFFFF15);--LayerFillColorAlt: var(--XamlUiOverrideLayerFillColorAlt, #FFFFFF0D);--SurfaceStrokeColorDefault: var(--XamlUiOverrideSurfaceStrokeColorDefault, #75757566);--TextControlPadding: var(--XamlUiOverrideTextControlPadding, 6px);--TextControlBorderThickness: var(--XamlUiOverrideTextControlBorderThickness, var(--ControlBorderThickness));--TextControlBorderThicknessFocused: var(--XamlUiOverrideTextControlBorderThicknessFocused, 2px);--TextControlBackgroundColor: var(--XamlUiOverrideTextControlBackgroundColor, var(--ControlFillColorDefault));--TextControlBackgroundColorPointerOver: var(--XamlUiOverrideTextControlBackgroundColorPointerOver, var(--ControlFillColorSecondary));--TextControlBackgroundColorFocused: var(--XamlUiOverrideTextControlBackgroundColorFocused, var(--ControlFillColorInputActive));--TextControlBackgroundColorDisabled: var(--XamlUiOverrideTextControlBackgroundColorDisabled, var(--ControlFillColorDisabled));--TextControlElevationBorderColor: var(--XamlUiOverrideTextControlElevationBorderColor, var(--ControlStrokeColorDefault));--TextControlElevationBorderColorStrong: var(--XamlUiOverrideTextControlElevationBorderColorStrong, var(--ControlStrongStrokeColorDefault));--TextControlElevationBorderColorFocused: var(--XamlUiOverrideTextControlElevationBorderColorFocused, var(--AccentFillColorDefault));--TextControlElevationBorderColorDisabled: var(--XamlUiOverrideTextControlElevationBorderColorDisabled, var(--ControlStrokeColorDefault));--SliderTrackFillColor: var(--XamlUiOverrideSliderTrackFillColor, var(--ControlStrongFillColorDefault));--AppBarButtonForegroundColor: var(--XamlUiOverrideAppBarButtonForegroundColor, var(--TextFillColorPrimary))}@media (prefers-color-scheme: light){.xaml-themed{--WindowFillColorDefault: var(--XamlUiOverrideWindowFillColorDefault, #F3F3F3FF);--ControlFillColorDefault: var(--XamlUiOverrideControlFillColorDefault, #FFFFFFB3);--ControlFillColorSecondary: var(--XamlUiOverrideControlFillColorSecondary, #F9F9F980);--ControlFillColorTertiary: var(--XamlUiOverrideControlFillColorTertiary, #F9F9F94D);--ControlFillColorDisabled: var(--XamlUiOverrideControlFillColorDisabled, #F9F9F94D);--ControlFillColorInputActive: var(--XamlUiOverrideControlFillColorInputActive, #FFFFFF);--ControlSolidFillColorDefault: var(--XamlUiOverrideControlSolidFillColorDefault, #FFFFFFFF);--ControlAltFillColorSecondary: var(--XamlUiOverrideControlAltFillColorSecondary, #00000006);--ControlAltFillColorTertiary: var(--XamlUiOverrideControlAltFillColorTertiary, #0000000F);--ControlAltFillColorQuarternary: var(--XamlUiOverrideControlAltFillColorQuarternary, #00000018);--ControlAltFillColorDisabled: var(--XamlUiOverrideControlAltFillColorDisabled, #FFFFFF00);--ControlStrongFillColorDefault: var(--XamlUiOverrideControlStrongFillColorDefault, #00000072);--ControlStrongFillColorDisabled: var(--XamlUiOverrideControlStrongFillColorDisabled, #00000051);--ControlFillColorTransparent: var(--XamlUiOverrideControlFillColorTransparent, #FFFFFF00);--SubtleFillColorTransparent: var(--XamlUiOverrideSubtleFillColorTransparent, #FFFFFF00);--SubtleFillColorSecondary: var(--XamlUiOverrideSubtleFillColorSecondary, #00000009);--SubtleFillColorTertiary: var(--XamlUiOverrideSubtleFillColorTertiary, #00000006);--AccentFillColorDefault: var(--XamlUiOverrideAccentFillColorDefault, #0067C0FF);--AccentFillColorSecondary: var(--XamlUiOverrideAccentFillColorSecondary, #0067C0E6);--AccentFillColorTertiary: var(--XamlUiOverrideAccentFillColorTertiary, #0067C0CC);--AccentFillColorDisabled: var(--XamlUiOverrideAccentFillColorDisabled, #FFFFFF37);--SystemControlHighlightListAccentLow: var(--XamlUiOverrideSystemControlHighlightListAccentLow, #0078D466);--SystemControlHighlightListAccentMedium: var(--XamlUiOverrideSystemControlHighlightListAccentMedium, #0078D499);--SystemControlHighlightListAccentHigh: var(--XamlUiOverrideSystemControlHighlightListAccentHigh, #0078D4B3);--ControlStrokeColorDefault: var(--XamlUiOverrideControlStrokeColorDefault, #0000000F);--ControlStrongStrokeColorDefault: var(--XamlUiOverrideControlStrongStrokeColorDefault, #00000072);--ControlStrongStrokeColorDisabled: var(--XamlUiOverrideControlStrongStrokeColorDisabled, #00000037);--ControlStrokeColorOnAccentDefault: var(--XamlUiOverrideControlStrokeColorOnAccentDefault, #FFFFFF14);--TextFillColorPrimary: var(--XamlUiOverrideTextFillColorPrimary, #000000E4);--TextFillColorSecondary: var(--XamlUiOverrideTextFillColorSecondary, #0000009E);--TextFillColorDisabled: var(--XamlUiOverrideTextFillColorDisabled, #0000005C);--TextOnAccentFillColorSelected: var(--XamlUiOverrideTextOnAccentFillColorSelected, #FFFFFFFF);--TextOnAccentFillColorPrimary: var(--XamlUiOverrideTextOnAccentFillColorPrimary, #FFFFFF);--TextOnAccentFillColorSecondary: var(--XamlUiOverrideTextOnAccentFillColorSecondary, #FFFFFFB3);--TextOnAccentFillColorDisabled: var(--XamlUiOverrideTextOnAccentFillColorDisabled, #FFFFFF);--SurfaceStrokeColorFlyout: var(--XamlUiOverrideSurfaceStrokeColorFlyout, #0000000F);--AcrylicInAppFillColorDefault: var(--XamlUiOverrideAcrylicInAppFillColorDefault, #FCFCFC26);--SystemChromeMediumLowColor: var(--XamlUiOverrideSystemChromeMediumLowColor, #F2F2F2FF);--DividerStrokeColorDefault: var(--XamlUiOverrideDividerStrokeColorDefault, #0000000F);--LayerFillColorAlt: var(--XamlUiOverrideLayerFillColorAlt, #FFFFFF);--SurfaceStrokeColorDefault: var(--XamlUiOverrideSurfaceStrokeColorDefault, #75757566)}}.xaml-flyout-overlay-backdrop{background:transparent}.xaml-dialog-overlay-backdrop{background:var(--SmokeFillColorDefault)}.cdk-overlay-pane.xaml-overlay-pane{display:grid!important}.cdk-overlay-pane.xaml-overlay-pane XamlRoot{overflow:visible;background:transparent}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: XamlRootComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'XamlRoot', template: `<ng-content/>`, encapsulation: ViewEncapsulation.None, host: {
+                        'class': 'xaml-themed'
+                    }, styles: ["XamlRoot{all:initial;display:grid;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none;box-sizing:border-box;font-family:var(--SystemFontFamily);font-size:var(--SystemFontSize);color:var(--TextFillColorPrimary);background:var(--WindowFillColorDefault)}.xaml-themed{--AcrylicBlur: var(--XamlUiOverrideAcrylicBlur, blur(12px));--ControlBorderThickness: var(--XamlUiOverrideControlBorderThickness, 1px);--ControlCornerRadius: var(--XamlUiOverrideControlCornerRadius, 4px);--OverlayCornerRadius: var(--XamlUiOverrideOverlayCornerRadius, 8px);--ButtonVerticalPadding: var(--XamlUiOverrideButtonVerticalPadding, 5px);--ButtonHorizontalPadding: var(--XamlUiOverrideButtonHorizontalPadding, 11px);--ButtonPadding: var(--XamlUiOverrideButtonPadding, var(--ButtonVerticalPadding) var(--ButtonHorizontalPadding));--SystemFontSize: var(--XamlUiOverrideSystemFontSize, 10pt);--SystemFontFamily: var(--XamlUiOverrideSystemFontFamily, \"Segoe UI\", Arial, sans-serif);--SymbolFontSize: var(--XamlUiOverrideSymbolFontSize, 10pt);--SymbolFontFamily: var(--XamlUiOverrideSymbolFontFamily, \"Segoe Fluent Icons\", \"Segoe MDL2 Assets\");--SystemAccentColor: var(--XamlUiOverrideSystemAccentColor, #0078d4);--SmokeFillColorDefault: var(--XamlUiOverrideSmokeFillColorDefault, #0000004D);--ControlNormalAnimationDuration: var(--XamlUiOverrideControlNormalAnimationDuration, .25s);--ControlFastAnimationDuration: var(--XamlUiOverrideControlFastAnimationDuration, .167s);--ControlFasterAnimationDuration: var(--XamlUiOverrideControlFasterAnimationDuration, 83ms);--WindowFillColorDefault: var(--XamlUiOverrideWindowFillColorDefault, #202020FF);--ControlFillColorDefault: var(--XamlUiOverrideControlFillColorDefault, #FFFFFF0F);--ControlFillColorSecondary: var(--XamlUiOverrideControlFillColorSecondary, #FFFFFF15);--ControlFillColorTertiary: var(--XamlUiOverrideControlFillColorTertiary, #FFFFFF08);--ControlFillColorDisabled: var(--XamlUiOverrideControlFillColorDisabled, #FFFFFF0B);--ControlFillColorInputActive: var(--XamlUiOverrideControlFillColorInputActive, #1E1E1EB3);--ControlSolidFillColorDefault: var(--XamlUiOverrideControlSolidFillColorDefault, #454545FF);--ControlAltFillColorSecondary: var(--XamlUiOverrideControlAltFillColorSecondary, #00000019);--ControlAltFillColorTertiary: var(--XamlUiOverrideControlAltFillColorTertiary, #FFFFFF0B);--ControlAltFillColorQuarternary: var(--XamlUiOverrideControlAltFillColorQuarternary, #FFFFFF12);--ControlAltFillColorDisabled: var(--XamlUiOverrideControlAltFillColorDisabled, #FFFFFF00);--ControlStrongFillColorDefault: var(--XamlUiOverrideControlStrongFillColorDefault, #FFFFFF8B);--ControlStrongFillColorDisabled: var(--XamlUiOverrideControlStrongFillColorDisabled, #FFFFFF3F);--ControlFillColorTransparent: var(--XamlUiOverrideControlFillColorTransparent, #FFFFFF00);--SubtleFillColorTransparent: var(--XamlUiOverrideSubtleFillColorTransparent, #FFFFFF00);--SubtleFillColorSecondary: var(--XamlUiOverrideSubtleFillColorSecondary, #FFFFFF0F);--SubtleFillColorTertiary: var(--XamlUiOverrideSubtleFillColorTertiary, #FFFFFF0A);--AccentFillColorDefault: var(--XamlUiOverrideAccentFillColorDefault, #4CC2FFFF);--AccentFillColorSecondary: var(--XamlUiOverrideAccentFillColorSecondary, #4CC2FFE6);--AccentFillColorTertiary: var(--XamlUiOverrideAccentFillColorTertiary, #4CC2FFCC);--AccentFillColorDisabled: var(--XamlUiOverrideAccentFillColorDisabled, #FFFFFF28);--SystemControlHighlightListAccentLow: var(--XamlUiOverrideSystemControlHighlightListAccentLow, #0078D499);--SystemControlHighlightListAccentMedium: var(--XamlUiOverrideSystemControlHighlightListAccentMedium, #0078D4CC);--SystemControlHighlightListAccentHigh: var(--XamlUiOverrideSystemControlHighlightListAccentHigh, #0078D4E6);--ControlStrokeColorDefault: var(--XamlUiOverrideControlStrokeColorDefault, #FFFFFF12);--ControlStrongStrokeColorDefault: var(--XamlUiOverrideControlStrongStrokeColorDefault, #FFFFFF8B);--ControlStrongStrokeColorDisabled: var(--XamlUiOverrideControlStrongStrokeColorDisabled, #FFFFFF28);--ControlStrokeColorOnAccentDefault: var(--XamlUiOverrideControlStrokeColorOnAccentDefault, #FFFFFF14);--TextFillColorPrimary: var(--XamlUiOverrideTextFillColorPrimary, #FFFFFFFF);--TextFillColorSecondary: var(--XamlUiOverrideTextFillColorSecondary, #FFFFFFC5);--TextFillColorDisabled: var(--XamlUiOverrideTextFillColorDisabled, #FFFFFF5D);--TextOnAccentFillColorSelected: var(--XamlUiOverrideTextOnAccentFillColorSelected, #FFFFFFFF);--TextOnAccentFillColorPrimary: var(--XamlUiOverrideTextOnAccentFillColorPrimary, #000000);--TextOnAccentFillColorSecondary: var(--XamlUiOverrideTextOnAccentFillColorSecondary, #00000080);--TextOnAccentFillColorDisabled: var(--XamlUiOverrideTextOnAccentFillColorDisabled, #FFFFFF87);--SurfaceStrokeColorFlyout: var(--XamlUiOverrideSurfaceStrokeColorFlyout, #00000033);--AcrylicInAppFillColorDefault: var(--XamlUiOverrideAcrylicInAppFillColorDefault, #2C2C2C26);--SystemChromeMediumLowColor: var(--XamlUiOverrideSystemChromeMediumLowColor, #2B2B2BFF);--DividerStrokeColorDefault: var(--XamlUiOverrideDividerStrokeColorDefault, #FFFFFF15);--LayerFillColorAlt: var(--XamlUiOverrideLayerFillColorAlt, #FFFFFF0D);--SurfaceStrokeColorDefault: var(--XamlUiOverrideSurfaceStrokeColorDefault, #75757566);--TextControlPadding: var(--XamlUiOverrideTextControlPadding, 6px);--TextControlBorderThickness: var(--XamlUiOverrideTextControlBorderThickness, var(--ControlBorderThickness));--TextControlBorderThicknessFocused: var(--XamlUiOverrideTextControlBorderThicknessFocused, 2px);--TextControlBackgroundColor: var(--XamlUiOverrideTextControlBackgroundColor, var(--ControlFillColorDefault));--TextControlBackgroundColorPointerOver: var(--XamlUiOverrideTextControlBackgroundColorPointerOver, var(--ControlFillColorSecondary));--TextControlBackgroundColorFocused: var(--XamlUiOverrideTextControlBackgroundColorFocused, var(--ControlFillColorInputActive));--TextControlBackgroundColorDisabled: var(--XamlUiOverrideTextControlBackgroundColorDisabled, var(--ControlFillColorDisabled));--TextControlElevationBorderColor: var(--XamlUiOverrideTextControlElevationBorderColor, var(--ControlStrokeColorDefault));--TextControlElevationBorderColorStrong: var(--XamlUiOverrideTextControlElevationBorderColorStrong, var(--ControlStrongStrokeColorDefault));--TextControlElevationBorderColorFocused: var(--XamlUiOverrideTextControlElevationBorderColorFocused, var(--AccentFillColorDefault));--TextControlElevationBorderColorDisabled: var(--XamlUiOverrideTextControlElevationBorderColorDisabled, var(--ControlStrokeColorDefault));--SliderTrackFillColor: var(--XamlUiOverrideSliderTrackFillColor, var(--ControlStrongFillColorDefault));--AppBarButtonForegroundColor: var(--XamlUiOverrideAppBarButtonForegroundColor, var(--TextFillColorPrimary))}@media (prefers-color-scheme: light){.xaml-themed{--WindowFillColorDefault: var(--XamlUiOverrideWindowFillColorDefault, #F3F3F3FF);--ControlFillColorDefault: var(--XamlUiOverrideControlFillColorDefault, #FFFFFFB3);--ControlFillColorSecondary: var(--XamlUiOverrideControlFillColorSecondary, #F9F9F980);--ControlFillColorTertiary: var(--XamlUiOverrideControlFillColorTertiary, #F9F9F94D);--ControlFillColorDisabled: var(--XamlUiOverrideControlFillColorDisabled, #F9F9F94D);--ControlFillColorInputActive: var(--XamlUiOverrideControlFillColorInputActive, #FFFFFF);--ControlSolidFillColorDefault: var(--XamlUiOverrideControlSolidFillColorDefault, #FFFFFFFF);--ControlAltFillColorSecondary: var(--XamlUiOverrideControlAltFillColorSecondary, #00000006);--ControlAltFillColorTertiary: var(--XamlUiOverrideControlAltFillColorTertiary, #0000000F);--ControlAltFillColorQuarternary: var(--XamlUiOverrideControlAltFillColorQuarternary, #00000018);--ControlAltFillColorDisabled: var(--XamlUiOverrideControlAltFillColorDisabled, #FFFFFF00);--ControlStrongFillColorDefault: var(--XamlUiOverrideControlStrongFillColorDefault, #00000072);--ControlStrongFillColorDisabled: var(--XamlUiOverrideControlStrongFillColorDisabled, #00000051);--ControlFillColorTransparent: var(--XamlUiOverrideControlFillColorTransparent, #FFFFFF00);--SubtleFillColorTransparent: var(--XamlUiOverrideSubtleFillColorTransparent, #FFFFFF00);--SubtleFillColorSecondary: var(--XamlUiOverrideSubtleFillColorSecondary, #00000009);--SubtleFillColorTertiary: var(--XamlUiOverrideSubtleFillColorTertiary, #00000006);--AccentFillColorDefault: var(--XamlUiOverrideAccentFillColorDefault, #0067C0FF);--AccentFillColorSecondary: var(--XamlUiOverrideAccentFillColorSecondary, #0067C0E6);--AccentFillColorTertiary: var(--XamlUiOverrideAccentFillColorTertiary, #0067C0CC);--AccentFillColorDisabled: var(--XamlUiOverrideAccentFillColorDisabled, #FFFFFF37);--SystemControlHighlightListAccentLow: var(--XamlUiOverrideSystemControlHighlightListAccentLow, #0078D466);--SystemControlHighlightListAccentMedium: var(--XamlUiOverrideSystemControlHighlightListAccentMedium, #0078D499);--SystemControlHighlightListAccentHigh: var(--XamlUiOverrideSystemControlHighlightListAccentHigh, #0078D4B3);--ControlStrokeColorDefault: var(--XamlUiOverrideControlStrokeColorDefault, #0000000F);--ControlStrongStrokeColorDefault: var(--XamlUiOverrideControlStrongStrokeColorDefault, #00000072);--ControlStrongStrokeColorDisabled: var(--XamlUiOverrideControlStrongStrokeColorDisabled, #00000037);--ControlStrokeColorOnAccentDefault: var(--XamlUiOverrideControlStrokeColorOnAccentDefault, #FFFFFF14);--TextFillColorPrimary: var(--XamlUiOverrideTextFillColorPrimary, #000000E4);--TextFillColorSecondary: var(--XamlUiOverrideTextFillColorSecondary, #0000009E);--TextFillColorDisabled: var(--XamlUiOverrideTextFillColorDisabled, #0000005C);--TextOnAccentFillColorSelected: var(--XamlUiOverrideTextOnAccentFillColorSelected, #FFFFFFFF);--TextOnAccentFillColorPrimary: var(--XamlUiOverrideTextOnAccentFillColorPrimary, #FFFFFF);--TextOnAccentFillColorSecondary: var(--XamlUiOverrideTextOnAccentFillColorSecondary, #FFFFFFB3);--TextOnAccentFillColorDisabled: var(--XamlUiOverrideTextOnAccentFillColorDisabled, #FFFFFF);--SurfaceStrokeColorFlyout: var(--XamlUiOverrideSurfaceStrokeColorFlyout, #0000000F);--AcrylicInAppFillColorDefault: var(--XamlUiOverrideAcrylicInAppFillColorDefault, #FCFCFC26);--SystemChromeMediumLowColor: var(--XamlUiOverrideSystemChromeMediumLowColor, #F2F2F2FF);--DividerStrokeColorDefault: var(--XamlUiOverrideDividerStrokeColorDefault, #0000000F);--LayerFillColorAlt: var(--XamlUiOverrideLayerFillColorAlt, #FFFFFF);--SurfaceStrokeColorDefault: var(--XamlUiOverrideSurfaceStrokeColorDefault, #75757566)}}.xaml-flyout-overlay-backdrop{background:transparent}.xaml-dialog-overlay-backdrop{background:var(--SmokeFillColorDefault)}.cdk-overlay-pane.xaml-overlay-pane{display:grid!important}.cdk-overlay-pane.xaml-overlay-pane XamlRoot{overflow:visible;background:transparent}\n"] }]
+        }], propDecorators: { onContextMenu: [{
                 type: HostListener,
-                args: ['pointerup', ['$event']]
+                args: ['contextmenu', ['$event']]
             }] } });
 
-class SliderComponent extends FrameworkElementComponent {
-    static { this._thumbRadius = 8; }
-    constructor(_renderer) {
-        super();
-        this._renderer = _renderer;
-        this.Minimum = 0.0;
-        this.Maximum = 1.0;
-        this.StepFrequency = 0;
-        this.Value = 0.0;
-        this.ValueChange = new EventEmitter();
-        this.IsEnabled = true;
-        this.Orientation = 'Horizontal';
+const PopupTemplate = `<ng-template #template><XamlRoot><FlyoutPresenter #presenter [IsVisible]="isVisible" [TransitionAnimation]="transitionAnimation" [Padding]="Padding"><ng-content/></FlyoutPresenter></XamlRoot></ng-template>`;
+class FlyoutBaseComponent {
+    get IsOpen() {
+        return this._isOpen;
     }
-    getStyle() {
-        let style = {};
-        let minimum = this.Minimum ?? 0;
-        let maximum = this.Maximum ?? 1;
-        let range = maximum - minimum;
-        let progress = range > 0 ? (this.Value - minimum) / range : 1;
-        progress = Math.min(Math.max(progress, 0), 1);
-        let progressText = (progress * 100).toFixed(4);
-        style['--progress-size'] = progressText + (this.Orientation == 'Horizontal' ? 'cqw' : 'cqh');
-        style['--progress-percent'] = progressText + '%';
-        return style;
+    set IsOpen(value) {
+        if (value === this._isOpen)
+            return;
+        this._isOpen = value;
+        if (value) {
+            this.showOverlay();
+        }
+        else {
+            this.hideOverlay();
+        }
+        this.IsOpenChange.emit(value);
     }
-    getClasses(value) {
-        var results = [value];
-        results.push(this.Orientation.toLowerCase());
-        if (this.IsEnabled !== true)
-            results.push('disabled');
-        return results;
+    updatePlacement() {
+        if (!this._overlayRef)
+            return;
+        let target = this.Target ?? this._hostElement;
+        let positionStrategy = this._overlay
+            .position()
+            .flexibleConnectedTo(target)
+            .withPositions([this.positioning])
+            .withGrowAfterOpen(true)
+            .withFlexibleDimensions(true)
+            .withPush(true);
+        this._overlayRef.updatePositionStrategy(positionStrategy);
+        if (this.Placement === 'Cover') {
+            this._overlayRef.updateSize(target);
+        }
     }
-    onThumbPointerDown(event) {
-        if (!this.IsEnabled)
+    async showOverlay() {
+        //Create overlay
+        let config = new OverlayConfig({
+            hasBackdrop: this.HasBackdrop,
+            panelClass: 'xaml-overlay-pane',
+            scrollStrategy: this._overlay.scrollStrategies.reposition(),
+            backdropClass: 'xaml-flyout-overlay-backdrop'
+        });
+        this._overlayRef = this._overlay.create(config);
+        this.OnOverlay(this._overlayRef);
+        //Configure overlay placement
+        this.updatePlacement();
+        //Display overlay
+        let templatePortal = new TemplatePortal(this._template, this._viewContainerRef);
+        this._overlayRef.attach(templatePortal);
+        //Ensure backdrop event handling
+        this._overlayRef.backdropClick().subscribe(() => this.Hide());
+        if (this.HasBackdrop)
+            this._backdropContextMenuSubscription = this._renderer.listen(this._overlayRef.backdropElement, 'contextmenu', p => { p.preventDefault(); this.Hide(); });
+        //Make content visible - after next layout
+        await resume_after(0);
+        this.isVisible = true;
+        this._changeDetector.markForCheck();
+    }
+    async hideOverlay() {
+        //Start hide animation
+        this.isVisible = false;
+        //Remove event handlers
+        if (this._backdropContextMenuSubscription)
+            this._backdropContextMenuSubscription();
+        //Dispose overlay after hidden
+        if (!this._overlayRef)
             return;
-        this._thumb.nativeElement.setPointerCapture(event.pointerId);
-        this._thumbPointerMoveEventSubscription = this._renderer.listen(this._track.nativeElement, 'pointermove', p => this.onThumbPointerMove(p));
-        this.onThumbPointerMove(event);
+        await resume_after(FlyoutPresenter.TransitionDuration);
+        this._overlayRef.detach();
+        this._overlayRef.dispose();
+        this._overlayRef = undefined;
     }
-    onThumbPointerMove(event) {
-        let trackRectangle = this._track.nativeElement.getBoundingClientRect();
-        let position;
-        switch (this.Orientation) {
-            case "Horizontal":
-                position = (event.clientX - trackRectangle.left - SliderComponent._thumbRadius) / (trackRectangle.width - 2 * SliderComponent._thumbRadius);
-                break;
-            case "Vertical":
-                position = 1 - (event.clientY - trackRectangle.top - SliderComponent._thumbRadius) / (trackRectangle.height - 2 * SliderComponent._thumbRadius);
-                break;
+    get Target() {
+        return this._target;
+    }
+    set Target(value) {
+        this._target = value;
+        this.updatePlacement();
+    }
+    get style() {
+        return {
+            'position': 'absolute',
+            'inset': 0,
+            'pointer-events': 'none'
+        };
+    }
+    get transitionAnimation() {
+        return 'Default';
+    }
+    get positioning() {
+        switch (this.Placement) {
+            case "Top":
+                return {
+                    originX: 'center', originY: 'top',
+                    overlayX: 'center', overlayY: 'bottom'
+                };
+            case "TopEdgeAlignedLeft":
+                return {
+                    originX: 'start', originY: 'top',
+                    overlayX: 'start', overlayY: 'bottom'
+                };
+            case "TopEdgeAlignedRight":
+                return {
+                    originX: 'end', originY: 'top',
+                    overlayX: 'end', overlayY: 'bottom'
+                };
+            case "Bottom":
+                return {
+                    originX: 'center', originY: 'bottom',
+                    overlayX: 'center', overlayY: 'top'
+                };
+            case "BottomEdgeAlignedLeft":
+                return {
+                    originX: 'start', originY: 'bottom',
+                    overlayX: 'start', overlayY: 'top'
+                };
+            case "BottomEdgeAlignedRight":
+                return {
+                    originX: 'end', originY: 'bottom',
+                    overlayX: 'end', overlayY: 'top'
+                };
+            case "Left":
+                return {
+                    originX: 'start', originY: 'center',
+                    overlayX: 'end', overlayY: 'center'
+                };
+            case "LeftEdgeAlignedTop":
+                return {
+                    originX: 'start', originY: 'top',
+                    overlayX: 'end', overlayY: 'top'
+                };
+            case "LeftEdgeAlignedBottom":
+                return {
+                    originX: 'start', originY: 'bottom',
+                    overlayX: 'end', overlayY: 'bottom'
+                };
+            case "Right":
+                return {
+                    originX: 'end', originY: 'center',
+                    overlayX: 'start', overlayY: 'center'
+                };
+            case "RightEdgeAlignedTop":
+                return {
+                    originX: 'end', originY: 'top',
+                    overlayX: 'start', overlayY: 'top'
+                };
+            case "RightEdgeAlignedBottom":
+                return {
+                    originX: 'end', originY: 'bottom',
+                    overlayX: 'start', overlayY: 'bottom'
+                };
+            case "Cover":
+                return {
+                    originX: 'start', originY: 'top',
+                    overlayX: 'start', overlayY: 'top'
+                };
         }
-        //Apply range
-        let value = position * (this.Maximum - this.Minimum) + this.Minimum;
-        //Apply step frequency
-        if (this.StepFrequency !== 0)
-            value = Math.trunc(value / this.StepFrequency) * this.StepFrequency;
-        //Apply min-max
-        value = Math.min(this.Maximum, Math.max(this.Minimum, value));
-        //Update value
-        this.Value = value;
-        this.ValueChange.emit(this.Value);
     }
-    onThumbPointerUp(event) {
-        this.onThumbPointerMove(event);
-        this._thumb.nativeElement.releasePointerCapture(event.pointerId);
-        if (this._thumbPointerMoveEventSubscription)
-            this._thumbPointerMoveEventSubscription();
+    ;
+    constructor(_viewContainerRef, _overlay, _hostElement, _changeDetector, _renderer) {
+        this._viewContainerRef = _viewContainerRef;
+        this._overlay = _overlay;
+        this._hostElement = _hostElement;
+        this._changeDetector = _changeDetector;
+        this._renderer = _renderer;
+        this.Placement = 'Top';
+        this.HasBackdrop = true;
+        this._isOpen = false;
+        this.IsOpenChange = new EventEmitter();
+        this.isVisible = false;
+        this._target = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SliderComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: SliderComponent, isStandalone: true, selector: "Slider", inputs: { Minimum: "Minimum", Maximum: "Maximum", StepFrequency: "StepFrequency", Value: "Value", IsEnabled: "IsEnabled", Orientation: "Orientation" }, outputs: { ValueChange: "ValueChange" }, host: { listeners: { "pointerdown": "onThumbPointerDown($event)", "pointerup": "onThumbPointerUp($event)" } }, viewQueries: [{ propertyName: "_track", first: true, predicate: ["track"], descendants: true }, { propertyName: "_thumb", first: true, predicate: ["thumb"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<div #track [ngClass]="getClasses('track')" [ngStyle]="getStyle()">
-    <div class="usable-range">
-      <div #thumb [ngClass]="getClasses('thumb')">
-        <div class="handle"></div>
-      </div>
-    </div>
-  </div>`, isInline: true, styles: [":host{position:relative}:host{display:grid}.track{display:grid;background-color:var(--ControlStrongFillColorDefault);border-radius:2px}.track>.usable-range{container-type:size}.track.horizontal{height:4px;margin:6px 0;background:linear-gradient(to right,var(--AccentFillColorDefault) 0 var(--progress-percent),var(--ControlStrongFillColorDefault) var(--progress-percent) 100%)}.track.horizontal>.usable-range{margin:0 8px}.track.vertical{width:4px;margin:0 6px;background:linear-gradient(to top,var(--AccentFillColorDefault) 0 var(--progress-percent),var(--ControlStrongFillColorDefault) var(--progress-percent) 100%)}.track.vertical>.usable-range{margin:8px 0}.track.disabled{background:var(--ControlStrongFillColorDisabled)}.thumb{display:grid;border-radius:50%;width:16px;height:16px;box-sizing:border-box;border:1px solid var(--ControlStrokeColorOnAccentDefaultDark);background-color:var(--ControlSolidFillColorDefault)}.thumb.horizontal{transform:translate(calc(var(--progress-size) - 8px),-6px)}.thumb.vertical{transform:translate(-6px,calc(100cqh - var(--progress-size) - 8px))}.thumb>.handle{place-self:center;background-color:var(--AccentFillColorDefault);width:8px;height:8px;border-radius:50%;transition:transform var(--ControlFastAnimationDuration),background-color var(--ControlFastAnimationDuration)}.thumb:not(.disabled):hover>.handle{transform:scale(125%);background-color:var(--AccentFillColorSecondary)}.thumb:not(.disabled):active>.handle{transform:scale(75%);background-color:var(--AccentFillColorTertiary)}.thumb.disabled>.handle{transform:scale(125%);background-color:var(--AccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    ngOnDestroy() {
+        this.hideOverlay();
+    }
+    OnOverlay(overlay) {
+    }
+    Show() {
+        this.IsOpen = true;
+    }
+    Hide() {
+        this.IsOpen = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutBaseComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$1.Overlay }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FlyoutBaseComponent, isStandalone: true, selector: "FlyoutBase", inputs: { Placement: "Placement", Padding: "Padding", HasBackdrop: "HasBackdrop", IsOpen: "IsOpen", Target: "Target" }, outputs: { IsOpenChange: "IsOpenChange" }, host: { properties: { "style": "this.style" } }, providers: [{ provide: 'xaml-flyout', useExisting: FlyoutBaseComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: ["template"], descendants: true }], ngImport: i0, template: "<ng-template #template><XamlRoot><FlyoutPresenter #presenter [IsVisible]=\"isVisible\" [TransitionAnimation]=\"transitionAnimation\" [Padding]=\"Padding\"><ng-content/></FlyoutPresenter></XamlRoot></ng-template>", isInline: true, dependencies: [{ kind: "component", type: FlyoutPresenter, selector: "FlyoutPresenter", inputs: ["TransitionAnimation", "Padding", "IsVisible"] }, { kind: "component", type: XamlRootComponent, selector: "XamlRoot" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutBaseComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'Slider', template: `<div #track [ngClass]="getClasses('track')" [ngStyle]="getStyle()">
-    <div class="usable-range">
-      <div #thumb [ngClass]="getClasses('thumb')">
-        <div class="handle"></div>
-      </div>
-    </div>
-  </div>`, imports: [CommonModule], styles: [":host{position:relative}:host{display:grid}.track{display:grid;background-color:var(--ControlStrongFillColorDefault);border-radius:2px}.track>.usable-range{container-type:size}.track.horizontal{height:4px;margin:6px 0;background:linear-gradient(to right,var(--AccentFillColorDefault) 0 var(--progress-percent),var(--ControlStrongFillColorDefault) var(--progress-percent) 100%)}.track.horizontal>.usable-range{margin:0 8px}.track.vertical{width:4px;margin:0 6px;background:linear-gradient(to top,var(--AccentFillColorDefault) 0 var(--progress-percent),var(--ControlStrongFillColorDefault) var(--progress-percent) 100%)}.track.vertical>.usable-range{margin:8px 0}.track.disabled{background:var(--ControlStrongFillColorDisabled)}.thumb{display:grid;border-radius:50%;width:16px;height:16px;box-sizing:border-box;border:1px solid var(--ControlStrokeColorOnAccentDefaultDark);background-color:var(--ControlSolidFillColorDefault)}.thumb.horizontal{transform:translate(calc(var(--progress-size) - 8px),-6px)}.thumb.vertical{transform:translate(-6px,calc(100cqh - var(--progress-size) - 8px))}.thumb>.handle{place-self:center;background-color:var(--AccentFillColorDefault);width:8px;height:8px;border-radius:50%;transition:transform var(--ControlFastAnimationDuration),background-color var(--ControlFastAnimationDuration)}.thumb:not(.disabled):hover>.handle{transform:scale(125%);background-color:var(--AccentFillColorSecondary)}.thumb:not(.disabled):active>.handle{transform:scale(75%);background-color:var(--AccentFillColorTertiary)}.thumb.disabled>.handle{transform:scale(125%);background-color:var(--AccentFillColorDisabled)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { Minimum: [{
+            args: [{
+                    imports: [FlyoutPresenter, XamlRootComponent],
+                    selector: 'FlyoutBase',
+                    template: PopupTemplate,
+                    providers: [{ provide: 'xaml-flyout', useExisting: FlyoutBaseComponent }]
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$1.Overlay }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { Placement: [{
                 type: Input
-            }], Maximum: [{
+            }], Padding: [{
                 type: Input
-            }], StepFrequency: [{
+            }], HasBackdrop: [{
                 type: Input
-            }], Value: [{
+            }], IsOpen: [{
                 type: Input
-            }], ValueChange: [{
+            }], IsOpenChange: [{
                 type: Output
-            }], IsEnabled: [{
-                type: Input
-            }], Orientation: [{
+            }], Target: [{
                 type: Input
-            }], _track: [{
-                type: ViewChild,
-                args: ['track']
-            }], _thumb: [{
+            }], _template: [{
                 type: ViewChild,
-                args: ['thumb']
-            }], onThumbPointerDown: [{
-                type: HostListener,
-                args: ['pointerdown', ['$event']]
-            }], onThumbPointerUp: [{
-                type: HostListener,
-                args: ['pointerup', ['$event']]
+                args: ['template']
+            }], style: [{
+                type: HostBinding,
+                args: ['style']
             }] } });
 
-class GridComponent extends PanelComponent {
-    constructor() {
-        super(...arguments);
-        this.Orientation = 'Horizontal';
+class FlyoutComponent extends FlyoutBaseComponent {
+    get transitionAnimation() {
+        switch (this.Placement) {
+            case "Top":
+            case "TopEdgeAlignedLeft":
+            case "TopEdgeAlignedRight":
+                return 'SlideUp';
+            case "Bottom":
+            case "BottomEdgeAlignedLeft":
+            case "BottomEdgeAlignedRight":
+                return 'SlideDown';
+            case "Left":
+            case "LeftEdgeAlignedTop":
+            case "LeftEdgeAlignedBottom":
+                return 'SlideLeft';
+            case "Right":
+            case "RightEdgeAlignedTop":
+            case "RightEdgeAlignedBottom":
+                return 'SlideRight';
+            default:
+                return 'Default';
+        }
     }
-    get gridAutoFlow() {
-        if (this.ColumnDefinitions == undefined && this.RowDefinitions == undefined) {
-            //Make it work like equal with stack panel
-            return this.Orientation === 'Horizontal' ? 'column' : 'row';
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FlyoutComponent, isStandalone: true, selector: "Flyout", providers: [{ provide: 'xaml-flyout', useExisting: FlyoutComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template #template><XamlRoot><FlyoutPresenter #presenter [IsVisible]=\"isVisible\" [TransitionAnimation]=\"transitionAnimation\" [Padding]=\"Padding\"><ng-content/></FlyoutPresenter></XamlRoot></ng-template>", isInline: true, styles: ["FlyoutPresenter{padding:16px}\n"], dependencies: [{ kind: "component", type: FlyoutPresenter, selector: "FlyoutPresenter", inputs: ["TransitionAnimation", "Padding", "IsVisible"] }, { kind: "component", type: XamlRootComponent, selector: "XamlRoot" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'Flyout', imports: [FlyoutPresenter, XamlRootComponent], template: PopupTemplate, providers: [{ provide: 'xaml-flyout', useExisting: FlyoutComponent }], styles: ["FlyoutPresenter{padding:16px}\n"] }]
+        }] });
+
+class ComboBoxComponent extends SelectorComponent {
+    get tabIndex() {
+        return this.IsEnabled ? '0' : null;
+    }
+    onKeyDown(event) {
+        if (!this.IsEnabled)
+            return;
+        //Type-ahead has already applied its match to the selection, so both keys
+        //just dismiss the open list.
+        if (event.key === 'Enter' || event.key === 'Escape') {
+            if (this._popup?.IsOpen) {
+                this._popup.IsOpen = false;
+                event.preventDefault();
+            }
+            return;
         }
-        else {
-            //Use proper flow logic
-            return this.Orientation === 'Horizontal' ? 'row' : 'column';
+        if (!this.IsTextSearchEnabled)
+            return;
+        //Only printable single characters contribute; ignore arrows, shortcuts, etc.
+        if (event.key.length !== 1 || event.ctrlKey || event.altKey || event.metaKey)
+            return;
+        //Append while typing is fast; a long-enough pause resets to a new search.
+        let now = Date.now();
+        if (now - this._lastSearchTime > this._textSearchTimeout)
+            this._searchText = '';
+        this._lastSearchTime = now;
+        this._searchText += event.key;
+        let query = this._searchText.toLowerCase();
+        let index = this.ItemSource.findIndex(item => this.getDisplayText(item).toLowerCase().includes(query));
+        if (index >= 0) {
+            this.SelectedIndex = index;
+            setTimeout(() => this._selector?.GetElement(index)?.scrollIntoView({ block: 'nearest' }));
+            event.preventDefault();
         }
     }
-    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", AutoColumnDefinition: "AutoColumnDefinition", AutoRowDefinition: "AutoRowDefinition", ColumnSpacing: "ColumnSpacing", RowSpacing: "RowSpacing", Orientation: "Orientation" }, host: { properties: { "style.grid-template-columns": "this.ColumnDefinitions", "style.grid-template-rows": "this.RowDefinitions", "style.grid-auto-columns": "this.AutoColumnDefinition", "style.grid-auto-rows": "this.AutoRowDefinition", "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"] }); }
+    getDisplayText(item) {
+        if (item == null)
+            return '';
+        let value = this.DisplayMemberPath ? item[this.DisplayMemberPath] : item;
+        return value == null ? '' : String(value);
+    }
+    get item() {
+        return this.SelectedItem;
+    }
+    get index() {
+        return this.SelectedIndex;
+    }
+    constructor(_changeDetector, _host) {
+        super();
+        this._changeDetector = _changeDetector;
+        this._host = _host;
+        this.IsTextSearchEnabled = true;
+        this._textSearchTimeout = 1000;
+        this._searchText = '';
+        this._lastSearchTime = 0;
+        this.target = null;
+    }
+    onIsOpenChanged(value) {
+        if (!value)
+            return;
+        let rect = this._host.nativeElement.getBoundingClientRect();
+        let popupOffset = -(this._selector?.GetElement(this.SelectedIndex)?.offsetTop ?? 0);
+        this.target = { x: rect.left + 3, y: rect.top + popupOffset - 4, width: rect.width };
+    }
+    ngAfterViewInit() {
+        //help the layout finish itself
+        this._changeDetector.detectChanges();
+    }
+    onItemClicked() {
+        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 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ComboBoxComponent, isStandalone: true, selector: "ComboBox", inputs: { IsTextSearchEnabled: "IsTextSearchEnabled" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.tabindex": "this.tabIndex" } }, viewQueries: [{ propertyName: "_selector", first: true, predicate: ListViewComponent, descendants: true }, { propertyName: "_popup", first: true, predicate: ["xaml-flyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<DropDownButton [Height]=\"Height\" [Width]=\"Width\" [HorizontalContentAlignment]=\"HorizontalContentAlignment\" [VerticalContentAlignment]=\"VerticalContentAlignment\" [IsEnabled]=\"IsEnabled\">\n    <ItemContainer #container><ng-container *ngIf=\"ItemTemplate\">\n    <ng-container [ngTemplateOutlet]=\"ItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutletInjector]=\"container.Injector\" />\n    </ng-container>\n  <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath && item !== null ? item[DisplayMemberPath] : item }}</ng-container></ItemContainer>\n    <Flyout Placement=\"Cover\" Padding=\"0\" [Target]=\"target\" (IsOpenChange)=\"onIsOpenChanged($event)\">\n      <ListView [ItemSource]=\"ItemSource\" [(SelectedIndex)]=\"SelectedIndex\" [HorizontalContentAlignment]=\"HorizontalContentAlignment\" [VerticalContentAlignment]=\"VerticalContentAlignment\"\n                [ItemTemplate]=\"ItemTemplate\" [DisplayMemberPath]=\"DisplayMemberPath\" [SelectedValuePath]=\"SelectedValuePath\" (ItemClick)=\"onItemClicked()\"/>\n    </Flyout>\n  </DropDownButton>", isInline: true, styles: [":host ::ng-deep .popup>.popup-container{left:0;right:0;top:0}:host ::ng-deep .popup>.popup-container>.popup-content{padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropDownButtonComponent, selector: "DropDownButton" }, { kind: "component", type: FlyoutComponent, selector: "Flyout" }, { kind: "component", type: ListViewComponent, selector: "ListView" }, { kind: "component", type: ItemContainerComponent, selector: "ItemContainer" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'Grid', template: `<ng-content/>`, standalone: false, styles: [":host{display:grid;position:relative}\n"] }]
-        }], propDecorators: { ColumnDefinitions: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.grid-template-columns']
-            }], RowDefinitions: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.grid-template-rows']
-            }], AutoColumnDefinition: [{
+            args: [{ selector: 'ComboBox', imports: [CommonModule, DropDownButtonComponent, FlyoutComponent, ListViewComponent, ItemContainerComponent], template: `<DropDownButton [Height]="Height" [Width]="Width" [HorizontalContentAlignment]="HorizontalContentAlignment" [VerticalContentAlignment]="VerticalContentAlignment" [IsEnabled]="IsEnabled">
+    <ItemContainer #container>${SelectorItemTemplate}</ItemContainer>
+    <Flyout Placement="Cover" Padding="0" [Target]="target" (IsOpenChange)="onIsOpenChanged($event)">
+      <ListView [ItemSource]="ItemSource" [(SelectedIndex)]="SelectedIndex" [HorizontalContentAlignment]="HorizontalContentAlignment" [VerticalContentAlignment]="VerticalContentAlignment"
+                [ItemTemplate]="ItemTemplate" [DisplayMemberPath]="DisplayMemberPath" [SelectedValuePath]="SelectedValuePath" (ItemClick)="onItemClicked()"/>
+    </Flyout>
+  </DropDownButton>`, styles: [":host ::ng-deep .popup>.popup-container{left:0;right:0;top:0}:host ::ng-deep .popup>.popup-container>.popup-content{padding:0!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { IsTextSearchEnabled: [{
                 type: Input
-            }, {
+            }], tabIndex: [{
                 type: HostBinding,
-                args: ['style.grid-auto-columns']
-            }], AutoRowDefinition: [{
+                args: ['attr.tabindex']
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], _selector: [{
+                type: ViewChild,
+                args: [ListViewComponent]
+            }], _popup: [{
+                type: ViewChild,
+                args: ['xaml-flyout']
+            }] } });
+
+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);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonComponent, deps: [{ token: RadioButtonGroupComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: RadioButtonComponent, isStandalone: true, selector: "RadioButton", inputs: { IsEnabled: "IsEnabled", IsChecked: "IsChecked", Group: "Group", Value: "Value" }, outputs: { IsCheckedChange: "IsCheckedChange" }, usesInheritance: true, ngImport: i0, template: `<label class="container">
+    <input type="radio" [name]="Group" [value]="Value" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
+    <div class="radioButton">
+      <div class="circle"></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=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);place-items:center;transition:border-color var(--ControlFastAnimationDuration);transition:background-color var(--ControlFastAnimationDuration)}.circle{width:10px;height:10px;border-radius:5px;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: RadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'RadioButton', 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>`, 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);place-items:center;transition:border-color var(--ControlFastAnimationDuration);transition:background-color var(--ControlFastAnimationDuration)}.circle{width:10px;height:10px;border-radius:5px;background-color:var(--TextOnAccentFillColorPrimary);transition:transform var(--ControlNormalAnimationDuration);transform:scale(0)}.content{align-self:center}\n"] }]
+        }], ctorParameters: () => [{ type: RadioButtonGroupComponent, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { IsEnabled: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.grid-auto-rows']
-            }], ColumnSpacing: [{
+            }], IsChecked: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.column-gap']
-            }], RowSpacing: [{
+            }], IsCheckedChange: [{
+                type: Output
+            }], Group: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.row-gap']
-            }], Orientation: [{
+            }], Value: [{
                 type: Input
-            }], gridAutoFlow: [{
-                type: HostBinding,
-                args: ['style.grid-auto-flow']
             }] } });
-class GridProperty {
-}
-class GridDirective {
+class RadioButtonGroupComponent extends StackPanelComponent {
     constructor() {
-        this.Grid = new GridProperty();
-    }
-    get gridColumnStart() {
-        return this.Grid.Column !== undefined ? this.Grid.Column + 1 : undefined;
+        super(...arguments);
+        this.ValueChange = new EventEmitter();
+        this._children = [];
     }
-    get gridRowStart() {
-        return this.Grid.Row !== undefined ? this.Grid.Row + 1 : undefined;
+    set Value(value) {
+        if (this._children) {
+            for (let item of this._children) {
+                item.IsChecked = item.Value === value;
+            }
+        }
+        if (this._value === value)
+            return;
+        this._value = value;
+        this.ValueChange.emit(value);
     }
-    get gridColumnEnd() {
-        return this.Grid.ColumnSpan !== undefined ? ('span ' + this.Grid.ColumnSpan) : undefined;
+    get Value() {
+        return this._value;
     }
-    get gridRowEnd() {
-        return this.Grid.RowSpan !== undefined ? ('span ' + this.Grid.RowSpan) : undefined;
+    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._children.push(child);
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: RadioButtonGroupComponent, isStandalone: true, selector: "RadioButtonGroup", inputs: { Value: "Value" }, outputs: { ValueChange: "ValueChange" }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;position:relative}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[Grid]',
-                    standalone: false
-                }]
-        }], propDecorators: { Grid: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'RadioButtonGroup', template: `<ng-content/>`, styles: [":host{display:grid;position:relative}\n"] }]
+        }], propDecorators: { Value: [{
                 type: Input
-            }], gridColumnStart: [{
-                type: HostBinding,
-                args: ['style.grid-column-start']
-            }], gridRowStart: [{
-                type: HostBinding,
-                args: ['style.grid-row-start']
-            }], gridColumnEnd: [{
-                type: HostBinding,
-                args: ['style.grid-column-end']
-            }], gridRowEnd: [{
-                type: HostBinding,
-                args: ['style.grid-row-end']
+            }], ValueChange: [{
+                type: Output
             }] } });
-class GridRowDirective {
-    get gridRowStart() {
-        return this.Row !== undefined ? parseInt(this.Row) + 1 : undefined;
+
+class RadioToggleButtonComponent extends RadioButtonComponent {
+    get checked() {
+        return this.IsChecked;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioToggleButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: RadioToggleButtonComponent, isStandalone: true, selector: "RadioToggleButton", host: { properties: { "class.checked": "this.checked" } }, usesInheritance: true, ngImport: i0, template: `<label>
+    <input type="radio" [name]="Group" [value]="Value" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
+    <ng-content/>
+  </label>`, isInline: true, styles: [":host{position:relative}:host{display:grid;padding:var(--ButtonPadding);border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;box-sizing:border-box;font-size:var(--SystemFontSize);font-family:var(--SystemFontFamily);background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked).pressed:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked).pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked.pressed:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked.pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle{border-style:none;border-width:0;background-color:transparent;color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.HyperlinkButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle:not(.disabled){cursor:pointer}:host.HyperlinkButtonStyle::ng-deep *{color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:not(.checked).pressed:not(.flyout-open):not(.disabled){color:var(--AccentFillColorSecondary)}:host.HyperlinkButtonStyle:not(.checked).pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--AccentFillColorSecondary)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle.pressed:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n", ":host{padding:0}input{display:none}label{padding:var(--ButtonPadding)}\n"] }); }
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioToggleButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'RadioToggleButton', template: `<label>
+    <input type="radio" [name]="Group" [value]="Value" [checked]="IsChecked" (change)="onChange($event)" [disabled]="!IsEnabled">
+    <ng-content/>
+  </label>`, styles: [":host{position:relative}:host{display:grid;padding:var(--ButtonPadding);border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;box-sizing:border-box;font-size:var(--SystemFontSize);font-family:var(--SystemFontFamily);background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked).pressed:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked).pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked.pressed:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked.pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle{border-style:none;border-width:0;background-color:transparent;color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.HyperlinkButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle:not(.disabled){cursor:pointer}:host.HyperlinkButtonStyle::ng-deep *{color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:not(.checked).pressed:not(.flyout-open):not(.disabled){color:var(--AccentFillColorSecondary)}:host.HyperlinkButtonStyle:not(.checked).pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--AccentFillColorSecondary)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle.pressed:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n", ":host{padding:0}input{display:none}label{padding:var(--ButtonPadding)}\n"] }]
+        }], propDecorators: { checked: [{
                 type: HostBinding,
-                args: ['style.grid-row-start']
+                args: ['class.checked']
             }] } });
-class GridColumnDirective {
-    get gridColumnStart() {
-        return this.Column !== undefined ? parseInt(this.Column) + 1 : undefined;
+
+class RepeatButtonComponent extends ButtonComponent {
+    constructor() {
+        super(...arguments);
+        this.Delay = 250;
+        this.Interval = 250;
     }
-    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;
+    onPointerDown(event) {
+        if (!this.IsEnabled)
+            return;
+        if (event.button !== 0)
+            return;
+        event.target.setPointerCapture(event.pointerId);
+        this.Click.emit();
+        this._delayTimer = setTimeout(() => {
+            this.Click.emit();
+            this._intervalTimer = setInterval(() => {
+                this.Click.emit();
+            }, this.Interval);
+        }, this.Delay);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridRowSpanDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: GridRowSpanDirective, isStandalone: false, selector: "[Grid-RowSpan]", inputs: { RowSpan: ["Grid-RowSpan", "RowSpan"] }, host: { properties: { "style.grid-row-end": "this.gridRowEnd" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridRowSpanDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[Grid-RowSpan]',
-                    standalone: false
-                }]
-        }], propDecorators: { RowSpan: [{
-                type: Input,
-                args: ['Grid-RowSpan']
-            }], gridRowEnd: [{
-                type: HostBinding,
-                args: ['style.grid-row-end']
-            }] } });
-class GridColumnSpanDirective {
-    get gridColumnEnd() {
-        return this.ColumnSpan !== undefined ? ('span ' + this.ColumnSpan) : undefined;
+    onPointerUp(event) {
+        if (event.button !== 0)
+            return;
+        this.clearTimers();
     }
-    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 }); }
+    clearTimers() {
+        if (this._delayTimer !== undefined)
+            clearTimeout(this._delayTimer);
+        if (this._intervalTimer !== undefined)
+            clearInterval(this._intervalTimer);
+    }
+    onClick(event) {
+        //Disable pointer event handling on the base button
+    }
+    ngOnDestroy() {
+        this.clearTimers();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RepeatButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: RepeatButtonComponent, isStandalone: true, selector: "RepeatButton", inputs: { Delay: "Delay", Interval: "Interval" }, usesInheritance: true, ngImport: i0, template: "<TextBlock *ngIf=\"Content !== undefined\" [Text]=\"Content\"/>\n  <ng-content/>", isInline: true, styles: [":host{position:relative}:host{display:grid;padding:var(--ButtonPadding);border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;box-sizing:border-box;font-size:var(--SystemFontSize);font-family:var(--SystemFontFamily);background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked).pressed:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked).pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked.pressed:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked.pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle{border-style:none;border-width:0;background-color:transparent;color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.HyperlinkButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle:not(.disabled){cursor:pointer}:host.HyperlinkButtonStyle::ng-deep *{color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:not(.checked).pressed:not(.flyout-open):not(.disabled){color:var(--AccentFillColorSecondary)}:host.HyperlinkButtonStyle:not(.checked).pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--AccentFillColorSecondary)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle.pressed:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextBlockComponent, selector: "TextBlock", inputs: ["FontFamily", "Text", "FontSize", "FontStyle", "FontWeight", "Foreground", "TextAlignment", "IsTextSelectionEnabled", "TextDecorations", "TextTrimming", "TextWrapping"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridColumnSpanDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[Grid-ColumnSpan]',
-                    standalone: false
-                }]
-        }], propDecorators: { ColumnSpan: [{
-                type: Input,
-                args: ['Grid-ColumnSpan']
-            }], gridColumnEnd: [{
-                type: HostBinding,
-                args: ['style.grid-column-end']
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RepeatButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'RepeatButton', imports: [CommonModule, TextBlockComponent], template: ButtonTemplate, styles: [":host{position:relative}:host{display:grid;padding:var(--ButtonPadding);border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;box-sizing:border-box;font-size:var(--SystemFontSize);font-family:var(--SystemFontFamily);background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked).pressed:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked).pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked.pressed:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked.pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle{border-style:none;border-width:0;background-color:transparent;color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.HyperlinkButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle:not(.disabled){cursor:pointer}:host.HyperlinkButtonStyle::ng-deep *{color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:not(.checked).pressed:not(.flyout-open):not(.disabled){color:var(--AccentFillColorSecondary)}:host.HyperlinkButtonStyle:not(.checked).pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--AccentFillColorSecondary)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle.pressed:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"] }]
+        }], propDecorators: { Delay: [{
+                type: Input
+            }], Interval: [{
+                type: Input
             }] } });
-const GridComponents = [
-    GridComponent,
-    GridDirective,
-    GridRowDirective,
-    GridRowSpanDirective,
-    GridColumnDirective,
-    GridColumnSpanDirective
-];
-class GridModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: GridModule, declarations: [GridComponent, GridDirective, GridRowDirective, GridRowSpanDirective, GridColumnDirective, GridColumnSpanDirective], exports: [GridComponent, GridDirective, GridRowDirective, GridRowSpanDirective, GridColumnDirective, GridColumnSpanDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: GridComponents,
-                    exports: GridComponents
-                }]
-        }] });
 
 class SplitButtonComponent extends FrameworkElementComponent {
     constructor() {
         super(...arguments);
         this.IsEnabled = true;
+        this.HorizontalContentAlignment = 'Center';
+        this.VerticalContentAlignment = 'Center';
         this.Click = new EventEmitter();
     }
     get buttonClass() {
@@ -1968,23 +2419,29 @@ class SplitButtonComponent extends FrameworkElementComponent {
         this._popup.IsOpen = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SplitButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: SplitButtonComponent, isStandalone: true, selector: "SplitButton", inputs: { IsEnabled: "IsEnabled" }, outputs: { Click: "Click" }, queries: [{ propertyName: "_popup", first: true, predicate: ["xaml-flyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<Grid ColumnDefinitions="1fr auto">
-    <Button CornerRadius="4px 0 0 4px" [IsEnabled]="IsEnabled" (Click)="onButtonClick()" [ngClass]="buttonClass"><ng-content/></Button>
-    <DropDownButton CornerRadius="0 4px 4px 0" Width="12px" (Click)="onDropDownClick()" [IsEnabled]="IsEnabled"/>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: SplitButtonComponent, isStandalone: true, selector: "SplitButton", inputs: { IsEnabled: "IsEnabled", HorizontalContentAlignment: "HorizontalContentAlignment", VerticalContentAlignment: "VerticalContentAlignment" }, outputs: { Click: "Click" }, queries: [{ propertyName: "_popup", first: true, predicate: ["xaml-flyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<Grid [Height]="Height" [Width]="Width" [MinWidth]="MinWidth" [MinHeight]="MinHeight" ColumnDefinitions="1fr auto">
+    <Button [Padding]="Padding" CornerRadius="4px 0 0 4px" [IsEnabled]="IsEnabled" (Click)="onButtonClick()" [ngClass]="buttonClass"
+            [HorizontalContentAlignment]="HorizontalContentAlignment" [VerticalContentAlignment]="VerticalContentAlignment"><ng-content/></Button>
+    <DropDownButton CornerRadius="0 4px 4px 0" (Click)="onDropDownClick()" [IsEnabled]="IsEnabled"/>
   </Grid>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "Button", inputs: ["IsEnabled", "Content", "HorizontalContentAlignment", "VerticalContentAlignment"], outputs: ["Click"] }, { kind: "component", type: DropDownButtonComponent, selector: "DropDownButton" }, { kind: "ngmodule", type: GridModule }, { kind: "component", type: GridComponent, selector: "Grid", inputs: ["ColumnDefinitions", "RowDefinitions", "AutoColumnDefinition", "AutoRowDefinition", "ColumnSpacing", "RowSpacing", "Orientation"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SplitButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'SplitButton',
-                    template: `<Grid ColumnDefinitions="1fr auto">
-    <Button CornerRadius="4px 0 0 4px" [IsEnabled]="IsEnabled" (Click)="onButtonClick()" [ngClass]="buttonClass"><ng-content/></Button>
-    <DropDownButton CornerRadius="0 4px 4px 0" Width="12px" (Click)="onDropDownClick()" [IsEnabled]="IsEnabled"/>
+                    template: `<Grid [Height]="Height" [Width]="Width" [MinWidth]="MinWidth" [MinHeight]="MinHeight" ColumnDefinitions="1fr auto">
+    <Button [Padding]="Padding" CornerRadius="4px 0 0 4px" [IsEnabled]="IsEnabled" (Click)="onButtonClick()" [ngClass]="buttonClass"
+            [HorizontalContentAlignment]="HorizontalContentAlignment" [VerticalContentAlignment]="VerticalContentAlignment"><ng-content/></Button>
+    <DropDownButton CornerRadius="0 4px 4px 0" (Click)="onDropDownClick()" [IsEnabled]="IsEnabled"/>
   </Grid>`,
                     imports: [CommonModule, ButtonComponent, DropDownButtonComponent, GridModule]
                 }]
         }], propDecorators: { IsEnabled: [{
                 type: Input
+            }], HorizontalContentAlignment: [{
+                type: Input
+            }], VerticalContentAlignment: [{
+                type: Input
             }], Click: [{
                 type: Output
             }], _popup: [{
@@ -2006,11 +2463,11 @@ class ToggleButtonComponent extends ButtonComponent {
         this.IsCheckedChange.emit(this.IsChecked);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ToggleButtonComponent, isStandalone: true, selector: "ToggleButton", inputs: { IsChecked: "IsChecked" }, outputs: { IsCheckedChange: "IsCheckedChange" }, host: { properties: { "class.checked": "this.IsChecked" } }, usesInheritance: true, ngImport: i0, template: "<ng-content *ngIf=\"Content === undefined\"/>\n  <TextBlock *ngIf=\"Content !== undefined\">{{Content}}</TextBlock>", isInline: true, styles: [":host{position:relative}:host{display:grid;padding:var(--ButtonPadding);border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;box-sizing:border-box;font-size:var(--SystemFontSize);font-family:var(--SystemFontFamily);background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle{border-style:none;border-width:0;background-color:transparent;color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.HyperlinkButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle:not(.disabled){cursor:pointer}:host.HyperlinkButtonStyle::ng-deep *{color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:not(.checked):active:not(.flyout-open):not(.disabled){color:var(--AccentFillColorSecondary)}:host.HyperlinkButtonStyle:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--AccentFillColorSecondary)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextBlockComponent, selector: "TextBlock", inputs: ["FontFamily", "Text", "FontSize", "FontStyle", "FontWeight", "Foreground", "TextAlignment", "IsTextSelectionEnabled", "TextDecorations", "TextTrimming", "TextWrapping"] }] }); }
+    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: { properties: { "class.checked": "this.IsChecked" } }, usesInheritance: true, ngImport: i0, template: "<TextBlock *ngIf=\"Content !== undefined\" [Text]=\"Content\"/>\n  <ng-content/>", isInline: true, styles: [":host{position:relative}:host{display:grid;padding:var(--ButtonPadding);border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;box-sizing:border-box;font-size:var(--SystemFontSize);font-family:var(--SystemFontFamily);background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked).pressed:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked).pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked.pressed:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked.pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle{border-style:none;border-width:0;background-color:transparent;color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.HyperlinkButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle:not(.disabled){cursor:pointer}:host.HyperlinkButtonStyle::ng-deep *{color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:not(.checked).pressed:not(.flyout-open):not(.disabled){color:var(--AccentFillColorSecondary)}:host.HyperlinkButtonStyle:not(.checked).pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--AccentFillColorSecondary)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle.pressed:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextBlockComponent, selector: "TextBlock", inputs: ["FontFamily", "Text", "FontSize", "FontStyle", "FontWeight", "Foreground", "TextAlignment", "IsTextSelectionEnabled", "TextDecorations", "TextTrimming", "TextWrapping"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ToggleButton', imports: [CommonModule, TextBlockComponent], template: ButtonTemplate, styles: [":host{position:relative}:host{display:grid;padding:var(--ButtonPadding);border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;box-sizing:border-box;font-size:var(--SystemFontSize);font-family:var(--SystemFontFamily);background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle{border-style:none;border-width:0;background-color:transparent;color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.HyperlinkButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle:active:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle:not(.disabled){cursor:pointer}:host.HyperlinkButtonStyle::ng-deep *{color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:not(.checked):active:not(.flyout-open):not(.disabled){color:var(--AccentFillColorSecondary)}:host.HyperlinkButtonStyle:not(.checked):active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--AccentFillColorSecondary)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle:active:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"] }]
+            args: [{ selector: 'ToggleButton', imports: [CommonModule, TextBlockComponent], template: ButtonTemplate, styles: [":host{position:relative}:host{display:grid;padding:var(--ButtonPadding);border-width:var(--ControlBorderThickness);border-style:solid;border-radius:var(--ControlCornerRadius);position:relative;box-sizing:border-box;font-size:var(--SystemFontSize);font-family:var(--SystemFontFamily);background:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);color:var(--TextFillColorPrimary);transition:all var(--ControlFastAnimationDuration)}:host::ng-deep *{color:var(--TextFillColorPrimary)}:host:not(.checked):hover:not(.flyout-open):not(.disabled){background:var(--ControlFillColorSecondary)}:host:not(.checked).pressed:not(.flyout-open):not(.disabled){background:var(--ControlFillColorTertiary);color:var(--TextFillColorSecondary)}:host:not(.checked).pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host:not(.checked).disabled{background:var(--ControlFillColorDisabled);color:var(--TextFillColorDisabled);pointer-events:none}:host:not(.checked).disabled::ng-deep *{color:var(--TextFillColorDisabled)}:host.checked:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.checked:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.checked:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.checked.pressed:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.checked.pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.checked.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.checked.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}:host.InlineButtonStyle{border-style:none;border-width:0;background-color:transparent}:host.InlineButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.InlineButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.InlineButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.InlineButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle{border-style:none;border-width:0;background-color:transparent;color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:hover:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorSecondary)}:host.HyperlinkButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled){background:var(--SubtleFillColorTertiary);color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.pressed:not(.checked):not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextFillColorSecondary)}:host.HyperlinkButtonStyle.disabled:not(.checked){background:var(--SubtleFillColorDisabled);color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle.disabled:not(.checked)::ng-deep *{color:var(--TextFillColorDisabled)}:host.HyperlinkButtonStyle:not(.disabled){cursor:pointer}:host.HyperlinkButtonStyle::ng-deep *{color:var(--AccentFillColorDefault)}:host.HyperlinkButtonStyle:not(.checked).pressed:not(.flyout-open):not(.disabled){color:var(--AccentFillColorSecondary)}:host.HyperlinkButtonStyle:not(.checked).pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--AccentFillColorSecondary)}:host.AccentButtonStyle:not(.disabled){background:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled){background:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary);color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle:hover:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorPrimary)}:host.AccentButtonStyle.pressed:not(.flyout-open):not(.disabled){background:var(--AccentFillColorTertiary);border-color:var(--ControlFillColorTransparent);color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.pressed:not(.flyout-open):not(.disabled)::ng-deep *{color:var(--TextOnAccentFillColorSecondary)}:host.AccentButtonStyle.disabled{background:var(--AccentFillColorDisabled);border-color:var(--AccentFillColorDisabled);color:var(--TextOnAccentFillColorDisabled)}:host.AccentButtonStyle.disabled::ng-deep *{color:var(--TextOnAccentFillColorDisabled)}\n"] }]
         }], propDecorators: { IsChecked: [{
                 type: Input
             }, {
@@ -2532,19 +2989,17 @@ class OpenFilePicker {
 class FontIconComponent extends FrameworkElementComponent {
     constructor() {
         super(...arguments);
-        this.FontFamily = 'var(--SymbolFontFamily)';
-        this.FontSize = 'var(--SymbolFontSize)';
         this.FontWeight = 'Normal';
     }
     get fontWeight() {
         return TextBlockComponent.ToFontWeight(this.FontWeight);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FontIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FontIconComponent, isStandalone: true, selector: "FontIcon", inputs: { FontFamily: "FontFamily", FontSize: "FontSize", FontStyle: "FontStyle", Foreground: "Foreground", FontWeight: "FontWeight", Glyph: "Glyph" }, host: { properties: { "style.font-family": "this.FontFamily", "style.font-size": "this.FontSize", "style.font-style": "this.FontStyle", "style.color": "this.Foreground", "style.font-weight": "this.fontWeight" } }, usesInheritance: true, ngImport: i0, template: `{{Glyph}}`, isInline: true, styles: [":host{align-content:center}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FontIconComponent, isStandalone: true, selector: "FontIcon", inputs: { FontFamily: "FontFamily", FontSize: "FontSize", FontStyle: "FontStyle", Foreground: "Foreground", FontWeight: "FontWeight", Glyph: "Glyph" }, host: { properties: { "style.font-family": "this.FontFamily", "style.font-size": "this.FontSize", "style.font-style": "this.FontStyle", "style.color": "this.Foreground", "style.font-weight": "this.fontWeight" } }, usesInheritance: true, ngImport: i0, template: `{{Glyph}}`, isInline: true, styles: [":host{align-content:center;font-size:var(--SymbolFontSize);font-family:var(--SymbolFontFamily)}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FontIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'FontIcon', template: `{{Glyph}}`, styles: [":host{align-content:center}\n"] }]
+            args: [{ selector: 'FontIcon', template: `{{Glyph}}`, styles: [":host{align-content:center;font-size:var(--SymbolFontSize);font-family:var(--SymbolFontFamily)}\n"] }]
         }], propDecorators: { FontFamily: [{
                 type: Input
             }, {
@@ -2602,11 +3057,11 @@ class ImageComponent extends FrameworkElementComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ImageComponent, isStandalone: true, selector: "Image", inputs: { Source: "Source", Stretch: "Stretch" }, usesInheritance: true, ngImport: i0, template: `<img [src]="Source" [class]="Stretch" [ngStyle]="imageStyle" [alt]="">`, isInline: true, styles: [":host{display:grid;overflow:hidden}img{place-self:stretch}img.None{object-fit:none}img.Fill{object-fit:fill}img.Uniform{object-fit:contain}img.UniformToFill{object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ImageComponent, isStandalone: true, selector: "Image", inputs: { Source: "Source", Stretch: "Stretch" }, usesInheritance: true, ngImport: i0, template: `<img [src]="Source" [class]="Stretch" [ngStyle]="imageStyle" [alt]="">`, isInline: true, styles: [":host{display:grid;overflow:hidden}img{place-self:stretch}img.None{object-fit:none}img.Fill{object-fit:fill}img.Uniform{object-fit:contain;place-self:center}img.UniformToFill{object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ImageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'Image', template: `<img [src]="Source" [class]="Stretch" [ngStyle]="imageStyle" [alt]="">`, imports: [CommonModule], styles: [":host{display:grid;overflow:hidden}img{place-self:stretch}img.None{object-fit:none}img.Fill{object-fit:fill}img.Uniform{object-fit:contain}img.UniformToFill{object-fit:cover}\n"] }]
+            args: [{ selector: 'Image', template: `<img [src]="Source" [class]="Stretch" [ngStyle]="imageStyle" [alt]="">`, imports: [CommonModule], styles: [":host{display:grid;overflow:hidden}img{place-self:stretch}img.None{object-fit:none}img.Fill{object-fit:fill}img.Uniform{object-fit:contain;place-self:center}img.UniformToFill{object-fit:cover}\n"] }]
         }], propDecorators: { Source: [{
                 type: Input
             }], Stretch: [{
@@ -2693,11 +3148,11 @@ class AppBarButtonComponent extends FrameworkElementComponent {
         this._flyout?.Show();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AppBarButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: AppBarButtonComponent, isStandalone: true, selector: "AppBarButton", inputs: { IsEnabled: "IsEnabled", Text: "Text", Icon: "Icon" }, outputs: { Click: "Click" }, host: { listeners: { "click": "onHostPointerEvent($event)" }, properties: { "class.disabled": "this.disabled" } }, queries: [{ propertyName: "_flyout", first: true, predicate: ["xaml-flyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<div class="icon">{{Icon}}<ng-content select="[Icon]"/></div><div class="text">{{Text}}</div><ng-content/>`, isInline: true, styles: [":host{position:relative}:host{display:flex;flex-direction:row;align-items:center;transition:background-color var(--ControlNormalAnimationDuration);border-radius:var(--ControlCornerRadius);gap:4px;padding:6px;background-color:var(--SubtleFillColorTransparent)}:host *{color:var(--TextFillColorPrimary)}:host:hover{background-color:var(--SubtleFillColorSecondary)}:host:hover *{color:var(--TextFillColorPrimary)}:host:active{background-color:var(--SubtleFillColorTertiary)}:host:active *{color:var(--TextFillColorSecondary)}:host.disabled{background-color:var(--SubtleFillColorDisabled)}:host.disabled *{color:var(--TextFillColorDisabled)}:host .icon{padding-top:2px;font-family:var(--SymbolFontFamily)}:host .text{white-space:nowrap}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: AppBarButtonComponent, isStandalone: true, selector: "AppBarButton", inputs: { IsEnabled: "IsEnabled", Text: "Text", Icon: "Icon" }, outputs: { Click: "Click" }, host: { listeners: { "click": "onHostPointerEvent($event)" }, properties: { "class.disabled": "this.disabled" } }, queries: [{ propertyName: "_flyout", first: true, predicate: ["xaml-flyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<div class="icon">{{Icon}}<ng-content select="[Icon]"/></div><div class="text">{{Text}}</div><ng-content/>`, isInline: true, styles: [":host{position:relative}:host{display:flex;flex-direction:row;align-items:center;transition:background-color var(--ControlNormalAnimationDuration);border-radius:var(--ControlCornerRadius);gap:4px;padding:6px;background-color:var(--SubtleFillColorTransparent)}:host *{color:var(--AppBarButtonForegroundColor)}:host:hover{background-color:var(--SubtleFillColorSecondary)}:host:hover *{color:var(--AppBarButtonForegroundColor)}:host:active{background-color:var(--SubtleFillColorTertiary)}:host:active *{color:var(--TextFillColorSecondary)}:host.disabled{background-color:var(--SubtleFillColorDisabled)}:host.disabled *{color:var(--TextFillColorDisabled)}:host .icon{padding-top:2px;font-family:var(--SymbolFontFamily)}:host .text{white-space:nowrap}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AppBarButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'AppBarButton', template: `<div class="icon">{{Icon}}<ng-content select="[Icon]"/></div><div class="text">{{Text}}</div><ng-content/>`, styles: [":host{position:relative}:host{display:flex;flex-direction:row;align-items:center;transition:background-color var(--ControlNormalAnimationDuration);border-radius:var(--ControlCornerRadius);gap:4px;padding:6px;background-color:var(--SubtleFillColorTransparent)}:host *{color:var(--TextFillColorPrimary)}:host:hover{background-color:var(--SubtleFillColorSecondary)}:host:hover *{color:var(--TextFillColorPrimary)}:host:active{background-color:var(--SubtleFillColorTertiary)}:host:active *{color:var(--TextFillColorSecondary)}:host.disabled{background-color:var(--SubtleFillColorDisabled)}:host.disabled *{color:var(--TextFillColorDisabled)}:host .icon{padding-top:2px;font-family:var(--SymbolFontFamily)}:host .text{white-space:nowrap}\n"] }]
+            args: [{ selector: 'AppBarButton', template: `<div class="icon">{{Icon}}<ng-content select="[Icon]"/></div><div class="text">{{Text}}</div><ng-content/>`, styles: [":host{position:relative}:host{display:flex;flex-direction:row;align-items:center;transition:background-color var(--ControlNormalAnimationDuration);border-radius:var(--ControlCornerRadius);gap:4px;padding:6px;background-color:var(--SubtleFillColorTransparent)}:host *{color:var(--AppBarButtonForegroundColor)}:host:hover{background-color:var(--SubtleFillColorSecondary)}:host:hover *{color:var(--AppBarButtonForegroundColor)}:host:active{background-color:var(--SubtleFillColorTertiary)}:host:active *{color:var(--TextFillColorSecondary)}:host.disabled{background-color:var(--SubtleFillColorDisabled)}:host.disabled *{color:var(--TextFillColorDisabled)}:host .icon{padding-top:2px;font-family:var(--SymbolFontFamily)}:host .text{white-space:nowrap}\n"] }]
         }], propDecorators: { IsEnabled: [{
                 type: Input
             }], Text: [{
@@ -2747,13 +3202,13 @@ class MenuFlyoutItemComponent extends MenuFlyoutItemBase {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MenuFlyoutItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MenuFlyoutItemComponent, isStandalone: true, selector: "MenuFlyoutItem", inputs: { IsEnabled: "IsEnabled", Text: "Text", Icon: "Icon" }, outputs: { Click: "Click" }, host: { listeners: { "click": "onClick()" }, properties: { "class.disabled": "this.disabled" } }, usesInheritance: true, ngImport: i0, template: `<div class="icon">{{Icon}}<ng-content select="[Icon]"/></div>
   <div class="text">{{Text}}</div>
-  <div class="submenu-indicator"></div>`, isInline: true, styles: [":host{position:relative}:host{display:table-row}:host:hover:not(.disabled)>*{background-color:var(--SubtleFillColorSecondary)}:host.disabled>*{color:var(--TextFillColorDisabled)}.icon{display:table-cell;padding:3px 6px;border-radius:var(--ControlCornerRadius) 0 0 var(--ControlCornerRadius);font-family:var(--SymbolFontFamily);vertical-align:middle}.text{display:table-cell;padding:3px;margin:6px 0;white-space:nowrap}.submenu-indicator{display:table-cell;padding:3px 6px;border-radius:0 var(--ControlCornerRadius) var(--ControlCornerRadius) 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+  <div class="submenu-indicator"></div>`, isInline: true, styles: [":host{position:relative}:host{display:table-row}:host:hover:not(.disabled)>*{background-color:var(--SubtleFillColorSecondary)}:host.disabled>*{color:var(--TextFillColorDisabled)}.icon{display:table-cell;padding-left:6px;padding-top:3px;padding-bottom:3px;border-radius:var(--ControlCornerRadius) 0 0 var(--ControlCornerRadius);font-family:var(--SymbolFontFamily);vertical-align:middle}.icon:not(:empty){padding-right:6px}.icon.hidden{color:transparent}.text{display:table-cell;padding-top:3px;padding-bottom:3px;white-space:nowrap}.submenu-indicator{display:table-cell;padding-right:6px;padding-top:3px;padding-bottom:3px;border-radius:0 var(--ControlCornerRadius) var(--ControlCornerRadius) 0}.submenu-indicator:not(:empty){padding-left:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MenuFlyoutItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'MenuFlyoutItem', imports: [CommonModule], template: `<div class="icon">{{Icon}}<ng-content select="[Icon]"/></div>
   <div class="text">{{Text}}</div>
-  <div class="submenu-indicator"></div>`, styles: [":host{position:relative}:host{display:table-row}:host:hover:not(.disabled)>*{background-color:var(--SubtleFillColorSecondary)}:host.disabled>*{color:var(--TextFillColorDisabled)}.icon{display:table-cell;padding:3px 6px;border-radius:var(--ControlCornerRadius) 0 0 var(--ControlCornerRadius);font-family:var(--SymbolFontFamily);vertical-align:middle}.text{display:table-cell;padding:3px;margin:6px 0;white-space:nowrap}.submenu-indicator{display:table-cell;padding:3px 6px;border-radius:0 var(--ControlCornerRadius) var(--ControlCornerRadius) 0}\n"] }]
+  <div class="submenu-indicator"></div>`, styles: [":host{position:relative}:host{display:table-row}:host:hover:not(.disabled)>*{background-color:var(--SubtleFillColorSecondary)}:host.disabled>*{color:var(--TextFillColorDisabled)}.icon{display:table-cell;padding-left:6px;padding-top:3px;padding-bottom:3px;border-radius:var(--ControlCornerRadius) 0 0 var(--ControlCornerRadius);font-family:var(--SymbolFontFamily);vertical-align:middle}.icon:not(:empty){padding-right:6px}.icon.hidden{color:transparent}.text{display:table-cell;padding-top:3px;padding-bottom:3px;white-space:nowrap}.submenu-indicator{display:table-cell;padding-right:6px;padding-top:3px;padding-bottom:3px;border-radius:0 var(--ControlCornerRadius) var(--ControlCornerRadius) 0}.submenu-indicator:not(:empty){padding-left:6px}\n"] }]
         }], propDecorators: { IsEnabled: [{
                 type: Input
             }], Text: [{
@@ -2784,17 +3239,21 @@ class ToggleMenuFlyoutItemComponent extends MenuFlyoutItemBase {
     onPointerUp(event) {
         if (!this.IsEnabled)
             return;
+        if (event.button !== 0)
+            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: ToggleMenuFlyoutItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ToggleMenuFlyoutItemComponent, isStandalone: true, selector: "ToggleMenuFlyoutItem", inputs: { IsEnabled: "IsEnabled", Text: "Text", IsChecked: "IsChecked" }, outputs: { IsCheckedChange: "IsCheckedChange" }, host: { listeners: { "pointerup": "onPointerUp($event)" }, properties: { "class.checked": "this.IsChecked", "class.disabled": "this.disabled" } }, usesInheritance: true, ngImport: i0, template: `<div class="icon">{{IsChecked ? '\uE73E' : '' }}</div>
-  <div class="text">{{Text}}</div>`, isInline: true, styles: [":host{position:relative}:host{display:table-row}:host:hover:not(.disabled)>*{background-color:var(--SubtleFillColorSecondary)}:host.disabled>*{color:var(--TextFillColorDisabled)}.icon{display:table-cell;padding:3px 6px;border-radius:var(--ControlCornerRadius) 0 0 var(--ControlCornerRadius);font-family:var(--SymbolFontFamily);vertical-align:middle}.text{display:table-cell;padding:3px;margin:6px 0;white-space:nowrap}.submenu-indicator{display:table-cell;padding:3px 6px;border-radius:0 var(--ControlCornerRadius) var(--ControlCornerRadius) 0}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ToggleMenuFlyoutItemComponent, isStandalone: true, selector: "ToggleMenuFlyoutItem", inputs: { IsEnabled: "IsEnabled", Text: "Text", IsChecked: "IsChecked" }, outputs: { IsCheckedChange: "IsCheckedChange" }, host: { listeners: { "pointerup": "onPointerUp($event)" }, properties: { "class.checked": "this.IsChecked", "class.disabled": "this.disabled" } }, usesInheritance: true, ngImport: i0, template: `<div class="icon" [class.hidden]="!IsChecked">\uE73E</div>
+  <div class="text">{{Text}}</div>
+  <div class="submenu-indicator"></div>`, isInline: true, styles: [":host{position:relative}:host{display:table-row}:host:hover:not(.disabled)>*{background-color:var(--SubtleFillColorSecondary)}:host.disabled>*{color:var(--TextFillColorDisabled)}.icon{display:table-cell;padding-left:6px;padding-top:3px;padding-bottom:3px;border-radius:var(--ControlCornerRadius) 0 0 var(--ControlCornerRadius);font-family:var(--SymbolFontFamily);vertical-align:middle}.icon:not(:empty){padding-right:6px}.icon.hidden{color:transparent}.text{display:table-cell;padding-top:3px;padding-bottom:3px;white-space:nowrap}.submenu-indicator{display:table-cell;padding-right:6px;padding-top:3px;padding-bottom:3px;border-radius:0 var(--ControlCornerRadius) var(--ControlCornerRadius) 0}.submenu-indicator:not(:empty){padding-left:6px}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleMenuFlyoutItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ToggleMenuFlyoutItem', template: `<div class="icon">{{IsChecked ? '\uE73E' : '' }}</div>
-  <div class="text">{{Text}}</div>`, styles: [":host{position:relative}:host{display:table-row}:host:hover:not(.disabled)>*{background-color:var(--SubtleFillColorSecondary)}:host.disabled>*{color:var(--TextFillColorDisabled)}.icon{display:table-cell;padding:3px 6px;border-radius:var(--ControlCornerRadius) 0 0 var(--ControlCornerRadius);font-family:var(--SymbolFontFamily);vertical-align:middle}.text{display:table-cell;padding:3px;margin:6px 0;white-space:nowrap}.submenu-indicator{display:table-cell;padding:3px 6px;border-radius:0 var(--ControlCornerRadius) var(--ControlCornerRadius) 0}\n"] }]
+            args: [{ selector: 'ToggleMenuFlyoutItem', template: `<div class="icon" [class.hidden]="!IsChecked">\uE73E</div>
+  <div class="text">{{Text}}</div>
+  <div class="submenu-indicator"></div>`, styles: [":host{position:relative}:host{display:table-row}:host:hover:not(.disabled)>*{background-color:var(--SubtleFillColorSecondary)}:host.disabled>*{color:var(--TextFillColorDisabled)}.icon{display:table-cell;padding-left:6px;padding-top:3px;padding-bottom:3px;border-radius:var(--ControlCornerRadius) 0 0 var(--ControlCornerRadius);font-family:var(--SymbolFontFamily);vertical-align:middle}.icon:not(:empty){padding-right:6px}.icon.hidden{color:transparent}.text{display:table-cell;padding-top:3px;padding-bottom:3px;white-space:nowrap}.submenu-indicator{display:table-cell;padding-right:6px;padding-top:3px;padding-bottom:3px;border-radius:0 var(--ControlCornerRadius) var(--ControlCornerRadius) 0}.submenu-indicator:not(:empty){padding-left:6px}\n"] }]
         }], propDecorators: { IsEnabled: [{
                 type: Input
             }], Text: [{
@@ -2847,22 +3306,227 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 args: ['style.border-width']
             }] } });
 
+/**
+ * Presenter for {@link ToolTipDirective}. Rendered inside a CDK overlay at body level, so it carries
+ * the `xaml-themed` class itself to pull in the theme tokens, and wraps its content in its own
+ * `XamlRoot` — like a flyout does — so the host app's cascade cannot reach the tip.
+ * Shows either plain {@link Content} text or, for rich tips, a projected {@link ContentTemplate}
+ * (mirrors `ToolTip.Content` accepting arbitrary content). The directive drives {@link IsVisible} for the
+ * fade reveal.
+ */
+class ToolTipComponent {
+    constructor() {
+        this.IsVisible = false;
+    }
+    //Matches the `--ControlFastAnimationDuration` fade in the styles (ms).
+    static { this.TransitionDuration = 167; }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToolTipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: ToolTipComponent, isStandalone: true, selector: "ToolTip", inputs: { Content: "Content", ContentTemplate: "ContentTemplate", IsVisible: "IsVisible" }, host: { attributes: { "role": "tooltip" }, properties: { "class.visible": "this.IsVisible" }, classAttribute: "xaml-themed" }, ngImport: i0, template: `<XamlRoot>@if (ContentTemplate) { <ng-container [ngTemplateOutlet]="ContentTemplate" /> } @else { {{ Content }} }</XamlRoot>`, isInline: true, styles: [":host{display:grid;-webkit-user-select:none;user-select:none;padding:5px 8px;max-width:320px;border:1px solid var(--SurfaceStrokeColorFlyout);border-radius:var(--OverlayCornerRadius);background-color:var(--AcrylicInAppFillColorDefault);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #00000080;color:var(--TextFillColorPrimary);font-family:var(--SystemFontFamily);font-size:var(--SystemFontSize);opacity:0;transition:opacity var(--ControlFastAnimationDuration) ease-out}:host.visible{opacity:1}:host XamlRoot{background:transparent;overflow:visible;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XamlRootComponent, selector: "XamlRoot" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToolTipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ToolTip', imports: [NgTemplateOutlet, XamlRootComponent], template: `<XamlRoot>@if (ContentTemplate) { <ng-container [ngTemplateOutlet]="ContentTemplate" /> } @else { {{ Content }} }</XamlRoot>`, host: { 'class': 'xaml-themed', 'role': 'tooltip' }, styles: [":host{display:grid;-webkit-user-select:none;user-select:none;padding:5px 8px;max-width:320px;border:1px solid var(--SurfaceStrokeColorFlyout);border-radius:var(--OverlayCornerRadius);background-color:var(--AcrylicInAppFillColorDefault);-webkit-backdrop-filter:var(--AcrylicBlur);backdrop-filter:var(--AcrylicBlur);box-shadow:0 0 15px #00000080;color:var(--TextFillColorPrimary);font-family:var(--SystemFontFamily);font-size:var(--SystemFontSize);opacity:0;transition:opacity var(--ControlFastAnimationDuration) ease-out}:host.visible{opacity:1}:host XamlRoot{background:transparent;overflow:visible;pointer-events:none}\n"] }]
+        }], propDecorators: { Content: [{
+                type: Input
+            }], ContentTemplate: [{
+                type: Input
+            }], IsVisible: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.visible']
+            }] } });
+
 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 }); }
+    static { this._nextToolTipId = 1; }
+    //Delay before a hovered/focused tip appears
+    static { this._revealDelay = 400; }
+    //Gap between the target and the tool tip
+    static { this._targetElementSpacing = 8; }
+    //Vertical clearance below the pointer for `Mouse` placement, so the tip clears the cursor glyph.
+    static { this._cursorSpacing = 20; }
+    constructor(_hostElement, _overlay, _changeDetector) {
+        this._hostElement = _hostElement;
+        this._overlay = _overlay;
+        this._changeDetector = _changeDetector;
+        this._id = `xaml-tooltip-${ToolTipDirective._nextToolTipId++}`;
+        this.Placement = 'Mouse';
+    }
+    //Tags this host as a tooltip owner so ancestors can detect that a nested tip should win (see below).
+    get marker() {
+        return this.ToolTip || this.ToolTipTemplate ? '' : null;
+    }
+    onFocusIn(event) {
+        this.scheduleShow(event);
+    }
+    onPointerOver(event) {
+        this.updatePointerPosition(event);
+        this.scheduleShow(event);
+    }
+    updatePointerPosition(event) {
+        if (!this._overlayRef) {
+            this._pointerPosition = { x: event.clientX, y: event.clientY };
+        }
+    }
+    scheduleShow(event) {
+        //If the tooltip is already open or scheduled to open, do nothing
+        if (this._overlayRef || this._revealTimer)
+            return;
+        //If we have no tooltip content, then nothing to show
+        if (!this.ToolTip && !this.ToolTipTemplate)
+            return;
+        //If this is not the top-most tool-tip, then return and let that show
+        const target = event.target;
+        if (target?.closest?.('[xaml-tooltip]') !== this._hostElement.nativeElement) {
+            this.hideOverlay();
+            return;
+        }
+        //Otherwise, schedule the tooltip to show after a delay
+        this._revealTimer = setTimeout(() => {
+            this._revealTimer = undefined;
+            this.showOverlay();
+        }, ToolTipDirective._revealDelay);
+    }
+    //Track the cursor until the tooltip opens
+    onPointerMove(event) {
+        this.updatePointerPosition(event);
+    }
+    onPointerDown() {
+        this.hideOverlay();
+    }
+    onPointerOut(event) {
+        //These events also fire when crossing between descendants — only dismiss on a real exit.
+        const related = event.relatedTarget;
+        if (related && this._hostElement.nativeElement.contains(related))
+            return;
+        this.hideOverlay();
+    }
+    async showOverlay() {
+        //If the tooltip is already open, or if there is no content, do nothing
+        if ((!this.ToolTip && !this.ToolTipTemplate) || this._overlayRef)
+            return;
+        //Define placement
+        const placement = this.Placement !== 'Mouse' || this._pointerPosition !== undefined ? this.Placement : 'Top';
+        this._overlayRef = this._overlay.create(new OverlayConfig({
+            positionStrategy: this._overlay.position()
+                .flexibleConnectedTo(placement === 'Mouse' ? this._pointerPosition : this._hostElement)
+                .withPositions(ToolTipDirective.getPositionCandidates(placement))
+                .withPush(true),
+            scrollStrategy: this._overlay.scrollStrategies.close()
+        }));
+        //The tip is presentation only — never let it capture the pointer or block what's beneath it.
+        this._overlayRef.overlayElement.style.pointerEvents = 'none';
+        //Show tooltip
+        this._toolTip = this._overlayRef.attach(new ComponentPortal(ToolTipComponent));
+        //Set content
+        const element = this._toolTip.location.nativeElement;
+        if (this.ToolTipTemplate) {
+            this._toolTip.setInput('ContentTemplate', this.ToolTipTemplate);
+        }
+        else {
+            this._toolTip.setInput('Content', this.ToolTip);
+        }
+        //Add accessibility info
+        element.id = this._id;
+        this._hostElement.nativeElement.setAttribute('aria-describedby', this._id);
+        //Make content visible - after next layout
+        await resume_after(0);
+        this._toolTip.setInput('IsVisible', true);
+        this._changeDetector.markForCheck();
+    }
+    async hideOverlay() {
+        //Cancel any pending show
+        if (this._revealTimer) {
+            clearTimeout(this._revealTimer);
+            this._revealTimer = undefined;
+        }
+        //Start hide animation
+        this._toolTip?.setInput('IsVisible', false);
+        //Dispose overlay after hidden
+        if (!this._overlayRef)
+            return;
+        await resume_after(ToolTipComponent.TransitionDuration);
+        this._hostElement.nativeElement.removeAttribute('aria-describedby');
+        this._toolTip = undefined;
+        this._overlayRef.detach();
+        this._overlayRef.dispose();
+        this._overlayRef = undefined;
+    }
+    static getPositionCandidates(placement) {
+        //Primary placement plus the opposite side as a fallback, so the tip flips when it would clip.
+        switch (placement) {
+            case 'Mouse':
+                return [
+                    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: ToolTipDirective._cursorSpacing },
+                    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -ToolTipDirective._targetElementSpacing }
+                ];
+            case 'Bottom':
+                return [
+                    { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: ToolTipDirective._targetElementSpacing },
+                    { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -ToolTipDirective._targetElementSpacing }
+                ];
+            case 'Left':
+                return [
+                    { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -ToolTipDirective._targetElementSpacing },
+                    { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: ToolTipDirective._targetElementSpacing }
+                ];
+            case 'Right':
+                return [
+                    { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: ToolTipDirective._targetElementSpacing },
+                    { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -ToolTipDirective._targetElementSpacing }
+                ];
+            case 'Top':
+            default:
+                return [
+                    { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -ToolTipDirective._targetElementSpacing },
+                    { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: ToolTipDirective._targetElementSpacing }
+                ];
+        }
+    }
+    ngOnDestroy() {
+        if (this._revealTimer)
+            clearTimeout(this._revealTimer);
+        this._overlayRef?.dispose();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToolTipDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.Overlay }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: ToolTipDirective, isStandalone: false, selector: "[ToolTipService-ToolTip], [ToolTipService-ToolTipTemplate]", inputs: { ToolTip: ["ToolTipService-ToolTip", "ToolTip"], ToolTipTemplate: ["ToolTipService-ToolTipTemplate", "ToolTipTemplate"], Placement: ["ToolTipService-Placement", "Placement"] }, host: { listeners: { "focusin": "onFocusIn($event)", "pointerover": "onPointerOver($event)", "pointermove": "onPointerMove($event)", "pointerdown": "onPointerDown()", "pointerout": "onPointerOut($event)", "focusout": "onPointerOut($event)" }, properties: { "attr.xaml-tooltip": "this.marker" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToolTipDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ToolTipService-ToolTip]',
+                    selector: '[ToolTipService-ToolTip], [ToolTipService-ToolTipTemplate]',
                     standalone: false
                 }]
-        }], propDecorators: { ToolTip: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.Overlay }, { type: i0.ChangeDetectorRef }], propDecorators: { ToolTip: [{
                 type: Input,
                 args: ['ToolTipService-ToolTip']
-            }, {
+            }], ToolTipTemplate: [{
+                type: Input,
+                args: ['ToolTipService-ToolTipTemplate']
+            }], Placement: [{
+                type: Input,
+                args: ['ToolTipService-Placement']
+            }], marker: [{
                 type: HostBinding,
-                args: ['attr.title']
+                args: ['attr.xaml-tooltip']
+            }], onFocusIn: [{
+                type: HostListener,
+                args: ['focusin', ['$event']]
+            }], onPointerOver: [{
+                type: HostListener,
+                args: ['pointerover', ['$event']]
+            }], onPointerMove: [{
+                type: HostListener,
+                args: ['pointermove', ['$event']]
+            }], onPointerDown: [{
+                type: HostListener,
+                args: ['pointerdown']
+            }], onPointerOut: [{
+                type: HostListener,
+                args: ['pointerout', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['focusout', ['$event']]
             }] } });
 class ToolTipServiceModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToolTipServiceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -3018,6 +3682,7 @@ class NumberBoxComponent extends FrameworkElementComponent {
         this.Maximum = Infinity;
         this.SmallChange = 1;
         this.LargeChange = 10;
+        this.SpinButtonPlacementMode = 'Compact';
         this.ValueChange = new EventEmitter();
         this._numberFormatter = (value) => value.toString();
         this._text = '';
@@ -3065,7 +3730,7 @@ class NumberBoxComponent extends FrameworkElementComponent {
     scheduleFlyoutDismiss() {
         this.cancelFlyoutDismiss();
         this._blurTimeout = setTimeout(() => {
-            this._flyout.Hide();
+            this._flyout?.Hide();
         }, 0);
     }
     onBlur() {
@@ -3101,7 +3766,7 @@ class NumberBoxComponent extends FrameworkElementComponent {
             this._input.nativeElement.value = this.PlaceholderText;
             this.onChange();
         }
-        this._flyout.Show();
+        this._flyout?.Show();
         this._input.nativeElement.select();
     }
     updateText() {
@@ -3114,27 +3779,27 @@ class NumberBoxComponent extends FrameworkElementComponent {
         return !this.IsEnabled;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NumberBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: NumberBoxComponent, isStandalone: true, selector: "NumberBox", inputs: { IsEnabled: "IsEnabled", PlaceholderText: "PlaceholderText", IsPlaceholderEditable: "IsPlaceholderEditable", TextAlignment: "TextAlignment", InputMode: "InputMode", Minimum: "Minimum", Maximum: "Maximum", SmallChange: "SmallChange", LargeChange: "LargeChange", Unit: "Unit", NumberFormatter: "NumberFormatter", Value: "Value" }, outputs: { ValueChange: "ValueChange" }, host: { listeners: { "click": "onClick()", "focusin": "onFocusIn()", "contextmenu": "onContextMenu($event)" }, properties: { "class.disabled": "this.disabled" } }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true }, { propertyName: "_flyout", first: true, predicate: ["flyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<label>
-    <div class="icon">&#xEC8F;</div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: NumberBoxComponent, isStandalone: true, selector: "NumberBox", inputs: { IsEnabled: "IsEnabled", PlaceholderText: "PlaceholderText", IsPlaceholderEditable: "IsPlaceholderEditable", TextAlignment: "TextAlignment", InputMode: "InputMode", Minimum: "Minimum", Maximum: "Maximum", SmallChange: "SmallChange", LargeChange: "LargeChange", Unit: "Unit", SpinButtonPlacementMode: "SpinButtonPlacementMode", NumberFormatter: "NumberFormatter", Value: "Value" }, outputs: { ValueChange: "ValueChange" }, host: { listeners: { "click": "onClick()", "focusin": "onFocusIn()", "contextmenu": "onContextMenu($event)" }, properties: { "class.disabled": "this.disabled" } }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true }, { propertyName: "_flyout", first: true, predicate: ["flyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<label>
+    <div *ngIf="SpinButtonPlacementMode !== 'None'" class="spin-button">&#xEC8F;</div>
     <input class="text-box" #input size="1" type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}" (blur)="onBlur()" (keydown)="onKeyDown($event)"/>
-    <Flyout #flyout Padding="2px" Placement="Left" [HasBackdrop]="false" [Target]="flyoutTarget">
+    <Flyout *ngIf="SpinButtonPlacementMode !== 'None'" #flyout Padding="2px" Placement="Left" [HasBackdrop]="false" [Target]="flyoutTarget">
       <RepeatButton Class="InlineButtonStyle" (Click)="onIncreaseClick()" [Delay]="500" [Interval]="50"  (pointerdown)="onButtonPress()" (pointerup)="onButtonPress()"><FontIcon Glyph="&#xE70E;"/></RepeatButton>
       <RepeatButton Class="InlineButtonStyle" (Click)="onDecreaseClick()" [Delay]="500" [Interval]="50"  (pointerdown)="onButtonPress()" (pointerup)="onButtonPress()"><FontIcon Glyph="&#xE70D;"/></RepeatButton>
     </Flyout>
-    <div class="unit" *ngIf="Unit !== undefined">{{Unit}}</div>    
-  </label>`, isInline: true, styles: [":host{position:relative}:host{display:grid;cursor:text;outline-style:none;border-style:solid;border-width:1px;border-radius:var(--ControlCornerRadius);padding:6px;background-color:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);border-bottom-color:var(--ControlStrongStrokeColorDefault)}:host:hover{background-color:var(--ControlFillColorSecondary)}:host:focus-within,:host:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}:host.disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault);pointer-events:none}textarea{resize:none}.text-box{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary);font-family:var(--SystemFontFamily);font-size:var(--SystemFontSize)}.text-box::placeholder{color:var(--TextFillColorSecondary)}.text-box:disabled{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor);color:var(--TextOnAccentFillColorSelected)}\n", "label{display:grid;position:relative;grid-template-columns:auto 1fr auto auto}.icon{align-self:center;font-family:var(--SymbolFontFamily);color:var(--TextFillColorSecondary);pointer-events:none}.unit{align-self:center;color:var(--TextFillColorSecondary);pointer-events:none}.InlineButtonStyle{padding:5px}input:focus+.popup,input:active+.popup{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RepeatButtonComponent, selector: "RepeatButton", inputs: ["Delay", "Interval"] }, { kind: "component", type: FontIconComponent, selector: "FontIcon", inputs: ["FontFamily", "FontSize", "FontStyle", "Foreground", "FontWeight", "Glyph"] }, { kind: "component", type: FlyoutComponent, selector: "Flyout" }] }); }
+    <div *ngIf="Unit !== undefined" class="unit">{{Unit}}</div>
+  </label>`, isInline: true, styles: [":host{position:relative}:host{display:grid;cursor:text;outline-style:none;border-style:solid;box-sizing:border-box;border-width:var(--TextControlBorderThickness);border-radius:var(--ControlCornerRadius);padding:var(--TextControlPadding);background-color:var(--TextControlBackgroundColor);border-color:var(--TextControlElevationBorderColor);border-bottom-color:var(--TextControlElevationBorderColorStrong)}:host:hover{background-color:var(--TextControlBackgroundColorPointerOver)}:host:focus-within{border-bottom-width:var(--TextControlBorderThicknessFocused);background-color:var(--TextControlBackgroundColorFocused);border-bottom-color:var(--TextControlElevationBorderColorFocused);padding-bottom:calc(var(--TextControlPadding) + var(--TextControlBorderThickness) - var(--TextControlBorderThicknessFocused))}:host.disabled{background-color:var(--TextControlBackgroundColorDisabled);border-bottom-color:var(--TextControlElevationBorderColorDisabled);pointer-events:none}textarea{resize:none}.text-box{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary);font-family:var(--SystemFontFamily);font-size:var(--SystemFontSize)}.text-box::placeholder{color:var(--TextFillColorSecondary)}.text-box:disabled{color:var(--TextFillColorDisabled)}.text-box:disabled::placeholder{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor);color:var(--TextOnAccentFillColorSelected)}\n", "label{display:grid;position:relative;grid-template-columns:auto 1fr auto auto}.spin-button{grid-column:1;align-self:center;font-family:var(--SymbolFontFamily);color:var(--TextFillColorSecondary);pointer-events:none}.unit{grid-column:4;align-self:center;pointer-events:none}Flyout{grid-column:3}.InlineButtonStyle{padding:5px}input{grid-column:2}input:focus+.popup,input:active+.popup{display:flex}input:disabled~.unit{color:var(--TextFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RepeatButtonComponent, selector: "RepeatButton", inputs: ["Delay", "Interval"] }, { kind: "component", type: FontIconComponent, selector: "FontIcon", inputs: ["FontFamily", "FontSize", "FontStyle", "Foreground", "FontWeight", "Glyph"] }, { kind: "component", type: FlyoutComponent, selector: "Flyout" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NumberBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'NumberBox', template: `<label>
-    <div class="icon">&#xEC8F;</div>
+    <div *ngIf="SpinButtonPlacementMode !== 'None'" class="spin-button">&#xEC8F;</div>
     <input class="text-box" #input size="1" type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}" (blur)="onBlur()" (keydown)="onKeyDown($event)"/>
-    <Flyout #flyout Padding="2px" Placement="Left" [HasBackdrop]="false" [Target]="flyoutTarget">
+    <Flyout *ngIf="SpinButtonPlacementMode !== 'None'" #flyout Padding="2px" Placement="Left" [HasBackdrop]="false" [Target]="flyoutTarget">
       <RepeatButton Class="InlineButtonStyle" (Click)="onIncreaseClick()" [Delay]="500" [Interval]="50"  (pointerdown)="onButtonPress()" (pointerup)="onButtonPress()"><FontIcon Glyph="&#xE70E;"/></RepeatButton>
       <RepeatButton Class="InlineButtonStyle" (Click)="onDecreaseClick()" [Delay]="500" [Interval]="50"  (pointerdown)="onButtonPress()" (pointerup)="onButtonPress()"><FontIcon Glyph="&#xE70D;"/></RepeatButton>
     </Flyout>
-    <div class="unit" *ngIf="Unit !== undefined">{{Unit}}</div>    
-  </label>`, imports: [CommonModule, RepeatButtonComponent, FontIconComponent, FlyoutComponent], styles: [":host{position:relative}:host{display:grid;cursor:text;outline-style:none;border-style:solid;border-width:1px;border-radius:var(--ControlCornerRadius);padding:6px;background-color:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);border-bottom-color:var(--ControlStrongStrokeColorDefault)}:host:hover{background-color:var(--ControlFillColorSecondary)}:host:focus-within,:host:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}:host.disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault);pointer-events:none}textarea{resize:none}.text-box{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary);font-family:var(--SystemFontFamily);font-size:var(--SystemFontSize)}.text-box::placeholder{color:var(--TextFillColorSecondary)}.text-box:disabled{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor);color:var(--TextOnAccentFillColorSelected)}\n", "label{display:grid;position:relative;grid-template-columns:auto 1fr auto auto}.icon{align-self:center;font-family:var(--SymbolFontFamily);color:var(--TextFillColorSecondary);pointer-events:none}.unit{align-self:center;color:var(--TextFillColorSecondary);pointer-events:none}.InlineButtonStyle{padding:5px}input:focus+.popup,input:active+.popup{display:flex}\n"] }]
+    <div *ngIf="Unit !== undefined" class="unit">{{Unit}}</div>
+  </label>`, imports: [CommonModule, RepeatButtonComponent, FontIconComponent, FlyoutComponent], styles: [":host{position:relative}:host{display:grid;cursor:text;outline-style:none;border-style:solid;box-sizing:border-box;border-width:var(--TextControlBorderThickness);border-radius:var(--ControlCornerRadius);padding:var(--TextControlPadding);background-color:var(--TextControlBackgroundColor);border-color:var(--TextControlElevationBorderColor);border-bottom-color:var(--TextControlElevationBorderColorStrong)}:host:hover{background-color:var(--TextControlBackgroundColorPointerOver)}:host:focus-within{border-bottom-width:var(--TextControlBorderThicknessFocused);background-color:var(--TextControlBackgroundColorFocused);border-bottom-color:var(--TextControlElevationBorderColorFocused);padding-bottom:calc(var(--TextControlPadding) + var(--TextControlBorderThickness) - var(--TextControlBorderThicknessFocused))}:host.disabled{background-color:var(--TextControlBackgroundColorDisabled);border-bottom-color:var(--TextControlElevationBorderColorDisabled);pointer-events:none}textarea{resize:none}.text-box{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary);font-family:var(--SystemFontFamily);font-size:var(--SystemFontSize)}.text-box::placeholder{color:var(--TextFillColorSecondary)}.text-box:disabled{color:var(--TextFillColorDisabled)}.text-box:disabled::placeholder{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor);color:var(--TextOnAccentFillColorSelected)}\n", "label{display:grid;position:relative;grid-template-columns:auto 1fr auto auto}.spin-button{grid-column:1;align-self:center;font-family:var(--SymbolFontFamily);color:var(--TextFillColorSecondary);pointer-events:none}.unit{grid-column:4;align-self:center;pointer-events:none}Flyout{grid-column:3}.InlineButtonStyle{padding:5px}input{grid-column:2}input:focus+.popup,input:active+.popup{display:flex}input:disabled~.unit{color:var(--TextFillColorDisabled)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { IsEnabled: [{
                 type: Input
             }], PlaceholderText: [{
@@ -3155,6 +3820,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }], Unit: [{
                 type: Input
+            }], SpinButtonPlacementMode: [{
+                type: Input
             }], ValueChange: [{
                 type: Output
             }], NumberFormatter: [{
@@ -3226,6 +3893,12 @@ class TextBoxComponent extends FrameworkElementComponent {
         if (this.UpdateTrigger == 'LostFocus')
             this.update();
     }
+    onReturn() {
+        //Enter commits the current value (like losing focus), regardless of UpdateTrigger — so e.g. a
+        //LostFocus field applies on Enter without having to blur first. Multiline (textarea) keeps Enter as
+        //a newline, so it isn't wired there.
+        this.update();
+    }
     update() {
         this.Text = this._input.nativeElement.value;
     }
@@ -3250,13 +3923,13 @@ class TextBoxComponent extends FrameworkElementComponent {
         }
     }
     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", IsPlaceholderEditable: "IsPlaceholderEditable", TextAlignment: "TextAlignment", TextWrapping: "TextWrapping", UpdateTrigger: "UpdateTrigger", Pattern: "Pattern", Text: "Text" }, outputs: { TextChange: "TextChange" }, host: { listeners: { "click": "onClick()", "contextmenu": "onContextMenu($event)", "focusin": "onFocusIn()" }, properties: { "class.disabled": "this.disabled" } }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<input class="text-box" #input *ngIf="TextWrapping === 'NoWrap'" type="text" size="1" [disabled]="!IsEnabled" [value]="Text" (input)="onInput()" (blur)="onBlur()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"/>
-  <textarea class="text-box" #input *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (input)="onInput()" (blur)="onBlur()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"></textarea>`, isInline: true, styles: [":host{position:relative}:host{display:grid;cursor:text;outline-style:none;border-style:solid;border-width:1px;border-radius:var(--ControlCornerRadius);padding:6px;background-color:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);border-bottom-color:var(--ControlStrongStrokeColorDefault)}:host:hover{background-color:var(--ControlFillColorSecondary)}:host:focus-within,:host:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}:host.disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault);pointer-events:none}textarea{resize:none}.text-box{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary);font-family:var(--SystemFontFamily);font-size:var(--SystemFontSize)}.text-box::placeholder{color:var(--TextFillColorSecondary)}.text-box:disabled{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor);color:var(--TextOnAccentFillColorSelected)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TextBoxComponent, isStandalone: true, selector: "TextBox", inputs: { IsEnabled: "IsEnabled", PlaceholderText: "PlaceholderText", IsPlaceholderEditable: "IsPlaceholderEditable", TextAlignment: "TextAlignment", TextWrapping: "TextWrapping", UpdateTrigger: "UpdateTrigger", Pattern: "Pattern", Text: "Text" }, outputs: { TextChange: "TextChange" }, host: { listeners: { "click": "onClick()", "contextmenu": "onContextMenu($event)", "focusin": "onFocusIn()" }, properties: { "class.disabled": "this.disabled" } }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<input class="text-box" #input *ngIf="TextWrapping === 'NoWrap'" type="text" size="1" [disabled]="!IsEnabled" [value]="Text" (input)="onInput()" (keydown.enter)="onReturn()" (blur)="onBlur()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"/>
+  <textarea class="text-box" #input *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (input)="onInput()" (blur)="onBlur()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"></textarea>`, isInline: true, styles: [":host{position:relative}:host{display:grid;cursor:text;outline-style:none;border-style:solid;box-sizing:border-box;border-width:var(--TextControlBorderThickness);border-radius:var(--ControlCornerRadius);padding:var(--TextControlPadding);background-color:var(--TextControlBackgroundColor);border-color:var(--TextControlElevationBorderColor);border-bottom-color:var(--TextControlElevationBorderColorStrong)}:host:hover{background-color:var(--TextControlBackgroundColorPointerOver)}:host:focus-within{border-bottom-width:var(--TextControlBorderThicknessFocused);background-color:var(--TextControlBackgroundColorFocused);border-bottom-color:var(--TextControlElevationBorderColorFocused);padding-bottom:calc(var(--TextControlPadding) + var(--TextControlBorderThickness) - var(--TextControlBorderThicknessFocused))}:host.disabled{background-color:var(--TextControlBackgroundColorDisabled);border-bottom-color:var(--TextControlElevationBorderColorDisabled);pointer-events:none}textarea{resize:none}.text-box{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary);font-family:var(--SystemFontFamily);font-size:var(--SystemFontSize)}.text-box::placeholder{color:var(--TextFillColorSecondary)}.text-box:disabled{color:var(--TextFillColorDisabled)}.text-box:disabled::placeholder{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor);color:var(--TextOnAccentFillColorSelected)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'TextBox', imports: [CommonModule], template: `<input class="text-box" #input *ngIf="TextWrapping === 'NoWrap'" type="text" size="1" [disabled]="!IsEnabled" [value]="Text" (input)="onInput()" (blur)="onBlur()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"/>
-  <textarea class="text-box" #input *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (input)="onInput()" (blur)="onBlur()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"></textarea>`, styles: [":host{position:relative}:host{display:grid;cursor:text;outline-style:none;border-style:solid;border-width:1px;border-radius:var(--ControlCornerRadius);padding:6px;background-color:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);border-bottom-color:var(--ControlStrongStrokeColorDefault)}:host:hover{background-color:var(--ControlFillColorSecondary)}:host:focus-within,:host:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}:host.disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault);pointer-events:none}textarea{resize:none}.text-box{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary);font-family:var(--SystemFontFamily);font-size:var(--SystemFontSize)}.text-box::placeholder{color:var(--TextFillColorSecondary)}.text-box:disabled{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor);color:var(--TextOnAccentFillColorSelected)}\n"] }]
+            args: [{ selector: 'TextBox', imports: [CommonModule], template: `<input class="text-box" #input *ngIf="TextWrapping === 'NoWrap'" type="text" size="1" [disabled]="!IsEnabled" [value]="Text" (input)="onInput()" (keydown.enter)="onReturn()" (blur)="onBlur()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"/>
+  <textarea class="text-box" #input *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (input)="onInput()" (blur)="onBlur()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"></textarea>`, styles: [":host{position:relative}:host{display:grid;cursor:text;outline-style:none;border-style:solid;box-sizing:border-box;border-width:var(--TextControlBorderThickness);border-radius:var(--ControlCornerRadius);padding:var(--TextControlPadding);background-color:var(--TextControlBackgroundColor);border-color:var(--TextControlElevationBorderColor);border-bottom-color:var(--TextControlElevationBorderColorStrong)}:host:hover{background-color:var(--TextControlBackgroundColorPointerOver)}:host:focus-within{border-bottom-width:var(--TextControlBorderThicknessFocused);background-color:var(--TextControlBackgroundColorFocused);border-bottom-color:var(--TextControlElevationBorderColorFocused);padding-bottom:calc(var(--TextControlPadding) + var(--TextControlBorderThickness) - var(--TextControlBorderThicknessFocused))}:host.disabled{background-color:var(--TextControlBackgroundColorDisabled);border-bottom-color:var(--TextControlElevationBorderColorDisabled);pointer-events:none}textarea{resize:none}.text-box{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary);font-family:var(--SystemFontFamily);font-size:var(--SystemFontSize)}.text-box::placeholder{color:var(--TextFillColorSecondary)}.text-box:disabled{color:var(--TextFillColorDisabled)}.text-box:disabled::placeholder{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor);color:var(--TextOnAccentFillColorSelected)}\n"] }]
         }], propDecorators: { IsEnabled: [{
                 type: Input
             }], PlaceholderText: [{
@@ -3301,5 +3974,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AppBarButtonComponent, BorderComponent, ButtonComponent, ButtonTemplate, CheckBoxComponent, ColorPickerComponent, ComboBoxComponent, CommandBarComponent, ContentDialog, ContentDialogButton, ContentDialogPresenter, ContentDialogResult, ContextFlyoutDirective, Dialog, DialogPresenter, DropDownButtonComponent, EllipseComponent, FlyoutBaseComponent, FlyoutComponent, FlyoutDirective, FlyoutPresenter, FontIconComponent, FrameworkElementComponent, GridColumnDirective, GridColumnSpanDirective, GridComponent, GridDirective, GridModule, GridProperty, GridRowDirective, GridRowSpanDirective, GridViewComponent, HyperlinkButtonComponent, ImageComponent, ItemFlyoutDirective, ListBoxComponent, ListViewComponent, MenuFlyoutComponent, MenuFlyoutItemBase, MenuFlyoutItemComponent, MenuFlyoutSeparator, NumberBoxComponent, OpenFilePicker, PanelComponent, PersonPictureComponent, PopupTemplate, ProgressBarComponent, ProgressRingComponent, RadioButtonComponent, RadioButtonGroupComponent, RadioToggleButtonComponent, RepeatButtonComponent, ScrollBarComponent, ScrollViewerComponent, SelectorComponent, SelectorItemTemplate, SeparatorComponent, SliderComponent, SplitButtonComponent, StackPanelComponent, TextBlockComponent, TextBoxComponent, ToggleButtonComponent, ToggleMenuFlyoutItemComponent, ToggleSwitchComponent, ToolTipDirective, ToolTipServiceModule, XamlRootComponent, colorToRgb, colorToString, resume_after, resume_on_event, rgbToHsl, stringToColor, toAlignment, toJustification };
+export { AppBarButtonComponent, BorderComponent, ButtonComponent, ButtonTemplate, CheckBoxComponent, ColorHsla, ColorHsva, ColorPickerComponent, ColorRgba, ColorSpectrumComponent, ComboBoxComponent, CommandBarComponent, ContentDialog, ContentDialogButton, ContentDialogPresenter, ContentDialogResult, ContextFlyoutDirective, Dialog, DialogPresenter, DropDownButtonComponent, EllipseComponent, FlyoutBaseComponent, FlyoutComponent, FlyoutDirective, FlyoutPresenter, FontIconComponent, FormatColor, FrameworkElementComponent, GridColumnDirective, GridColumnSpanDirective, GridComponent, GridDirective, GridModule, GridProperty, GridRowDirective, GridRowSpanDirective, GridViewComponent, HyperlinkButtonComponent, ImageComponent, ItemFlyoutDirective, ListBoxComponent, ListViewComponent, MenuFlyoutComponent, MenuFlyoutItemBase, MenuFlyoutItemComponent, MenuFlyoutSeparator, NumberBoxComponent, OpenFilePicker, PanelComponent, ParseColor, PersonPictureComponent, PopupTemplate, ProgressBarComponent, ProgressRingComponent, RadioButtonComponent, RadioButtonGroupComponent, RadioToggleButtonComponent, RepeatButtonComponent, ScrollBarComponent, ScrollViewerComponent, SelectorComponent, SelectorItemTemplate, SeparatorComponent, SliderComponent, SplitButtonComponent, StackPanelComponent, TextBlockComponent, TextBoxComponent, ToAlignment, ToJustification, ToggleButtonComponent, ToggleMenuFlyoutItemComponent, ToggleSwitchComponent, ToolTipComponent, ToolTipDirective, ToolTipServiceModule, XamlRootComponent, resume_after, resume_on_event };
 //# sourceMappingURL=xaml-ui.mjs.map