xaml-ui 1.0.1

package/fesm2022/xaml-ui.mjs

@@ -0,0 +1,927 @@
+import * as i0 from '@angular/core';
+import { HostBinding, Input, Component, HostListener, ContentChildren, EventEmitter, Output, TemplateRef, ContentChild, Directive, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class FrameworkElement {
+    constructor() {
+        this.HorizontalAlignment = 'Stretch';
+        this.VerticalAlignment = 'Stretch';
+    }
+    get justifySelf() {
+        return this.HorizontalAlignment.toLowerCase();
+    }
+    get alignSelf() {
+        switch (this.VerticalAlignment) {
+            case 'Top':
+                return 'flex-start';
+            case 'Center':
+                return 'center';
+            case 'Bottom':
+                return 'flex-end';
+            case 'Stretch':
+                return 'stretch';
+        }
+    }
+    get overflow() {
+        return 'clip';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FrameworkElement, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FrameworkElement, isStandalone: true, selector: "FrameworkElement", inputs: { Width: "Width", Height: "Height", HorizontalAlignment: "HorizontalAlignment", VerticalAlignment: "VerticalAlignment", Margin: "Margin", Padding: "Padding" }, host: { properties: { "style.width": "this.Width", "style.height": "this.Height", "style.margin": "this.Margin", "style.padding": "this.Padding", "style.justify-self": "this.justifySelf", "style.align-self": "this.alignSelf", "style.overflow": "this.overflow" } }, ngImport: i0, template: `<ng-container/>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FrameworkElement, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'FrameworkElement',
+                    template: `<ng-container/>`
+                }]
+        }], propDecorators: { Width: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.width']
+            }], Height: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.height']
+            }], HorizontalAlignment: [{
+                type: Input
+            }], VerticalAlignment: [{
+                type: Input
+            }], Margin: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.margin']
+            }], Padding: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.padding']
+            }], justifySelf: [{
+                type: HostBinding,
+                args: ['style.justify-self']
+            }], alignSelf: [{
+                type: HostBinding,
+                args: ['style.align-self']
+            }], overflow: [{
+                type: HostBinding,
+                args: ['style.overflow']
+            }] } });
+
+class TextBlock extends FrameworkElement {
+    constructor() {
+        super(...arguments);
+        this.FontWeight = 'Normal';
+        this.TextAlignment = 'Left';
+        this.TextWrapping = 'NoWrap';
+    }
+    get fontWeight() {
+        return TextBlock.ToFontWeight(this.FontWeight);
+    }
+    static ToFontWeight(value) {
+        switch (value) {
+            case 'Black':
+                return 900;
+            case 'Bold':
+                return 700;
+            case 'ExtraBlack':
+                return 950;
+            case 'ExtraBold':
+                return 800;
+            case 'ExtraLight':
+                return 200;
+            case 'Light':
+                return 300;
+            case 'Medium':
+                return 500;
+            case 'Normal':
+                return 400;
+            case 'SemiBold':
+                return 600;
+            case 'SemiLight':
+                return 350;
+            case 'Thin':
+                return 100;
+        }
+    }
+    get userSelect() {
+        return this.IsTextSelectionEnabled === 'True' ? 'text' : 'none';
+    }
+    get textDecorationLine() {
+        switch (this.TextDecorations) {
+            case 'None':
+                return 'none';
+            case 'Strikethrough':
+                return 'line-through';
+            case 'Underline':
+                return 'underline';
+            default:
+                return undefined;
+        }
+    }
+    get textOverflow() {
+        switch (this.TextTrimming) {
+            case 'None':
+            case 'Clip':
+                return 'clip';
+            case 'CharacterEllipsis':
+                return 'Ellipsis';
+            default:
+                return undefined;
+        }
+    }
+    get whiteSpace() {
+        switch (this.TextWrapping) {
+            case 'NoWrap':
+                return 'nowrap';
+            case 'Wrap':
+                return 'normal';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBlock, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TextBlock, isStandalone: true, selector: "TextBlock", inputs: { FontFamily: "FontFamily", Text: "Text", FontSize: "FontSize", FontStyle: "FontStyle", FontWeight: "FontWeight", Foreground: "Foreground", TextAlignment: "TextAlignment", IsTextSelectionEnabled: "IsTextSelectionEnabled", TextDecorations: "TextDecorations", TextTrimming: "TextTrimming", TextWrapping: "TextWrapping" }, host: { properties: { "style.font-family": "this.FontFamily", "style.font-size": "this.FontSize", "style.font-style": "this.FontStyle", "style.color": "this.Foreground", "style.text-align": "this.TextAlignment", "style.font-weight": "this.fontWeight", "style.user-select": "this.userSelect", "style.text-decoration-line": "this.textDecorationLine", "style.text-overflow": "this.textOverflow", "style.white-space": "this.whiteSpace" } }, usesInheritance: true, ngImport: i0, template: `<ng-container>
+    <ng-content *ngIf="Text === undefined"/>
+    <ng-container *ngIf="Text !== undefined">{{Text}}</ng-container>
+  </ng-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBlock, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'TextBlock',
+                    imports: [CommonModule],
+                    template: `<ng-container>
+    <ng-content *ngIf="Text === undefined"/>
+    <ng-container *ngIf="Text !== undefined">{{Text}}</ng-container>
+  </ng-container>`
+                }]
+        }], propDecorators: { FontFamily: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.font-family']
+            }], Text: [{
+                type: Input
+            }], FontSize: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.font-size']
+            }], FontStyle: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.font-style']
+            }], FontWeight: [{
+                type: Input
+            }], Foreground: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.color']
+            }], TextAlignment: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.text-align']
+            }], IsTextSelectionEnabled: [{
+                type: Input
+            }], TextDecorations: [{
+                type: Input
+            }], TextTrimming: [{
+                type: Input
+            }], TextWrapping: [{
+                type: Input
+            }], fontWeight: [{
+                type: HostBinding,
+                args: ['style.font-weight']
+            }], userSelect: [{
+                type: HostBinding,
+                args: ['style.user-select']
+            }], textDecorationLine: [{
+                type: HostBinding,
+                args: ['style.text-decoration-line']
+            }], textOverflow: [{
+                type: HostBinding,
+                args: ['style.text-overflow']
+            }], whiteSpace: [{
+                type: HostBinding,
+                args: ['style.white-space']
+            }] } });
+
+class FontIcon extends FrameworkElement {
+    constructor() {
+        super(...arguments);
+        this.FontWeight = 'Normal';
+    }
+    get fontWeight() {
+        return TextBlock.ToFontWeight(this.FontWeight);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FontIcon, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FontIcon, isStandalone: true, selector: "FontIcon", inputs: { FontFamily: "FontFamily", FontSize: "FontSize", FontStyle: "FontStyle", FontWeight: "FontWeight", Glyph: "Glyph" }, host: { properties: { "style.font-family": "this.FontFamily", "style.font-size": "this.FontSize", "style.font-style": "this.FontStyle", "style.font-weight": "this.fontWeight" } }, usesInheritance: true, ngImport: i0, template: `{{Glyph}}`, isInline: true, styles: [":host{font-family:Segoe Fluent Icons,Segoe MDL2 Assets}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FontIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'FontIcon', template: `{{Glyph}}`, styles: [":host{font-family:Segoe Fluent Icons,Segoe MDL2 Assets}\n"] }]
+        }], propDecorators: { FontFamily: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.font-family']
+            }], FontSize: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.font-size']
+            }], FontStyle: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.font-style']
+            }], FontWeight: [{
+                type: Input
+            }], Glyph: [{
+                type: Input
+            }], fontWeight: [{
+                type: HostBinding,
+                args: ['style.font-weight']
+            }] } });
+
+class Border extends FrameworkElement {
+    get borderStyle() {
+        return this.BorderThickness !== undefined ? 'solid' : undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Border, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: Border, isStandalone: true, selector: "Border", inputs: { Background: "Background", CornerRadius: "CornerRadius", BorderThickness: "BorderThickness", BorderBrush: "BorderBrush" }, host: { properties: { "style.background": "this.Background", "style.border-radius": "this.CornerRadius", "style.border-width": "this.BorderThickness", "style.border-color": "this.BorderBrush", "style.border-style": "this.borderStyle" } }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Border, decorators: [{
+            type: Component,
+            args: [{ selector: 'Border', imports: [CommonModule], template: `<ng-content/>`, styles: [":host{display:grid}\n"] }]
+        }], propDecorators: { Background: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.background']
+            }], CornerRadius: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.border-radius']
+            }], BorderThickness: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.border-width']
+            }], BorderBrush: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.border-color']
+            }], borderStyle: [{
+                type: HostBinding,
+                args: ['style.border-style']
+            }] } });
+
+class Flyout {
+    constructor() {
+        this.PlacementMode = 'Top';
+        this.Id = 'xaml-flyout-' + Flyout._nextId++;
+        this._popover = '';
+    }
+    static { this._nextId = 1; }
+    get styles() {
+        let anchor = `--${this.Id}-host`;
+        let top;
+        let left;
+        let right;
+        let bottom;
+        let alignSelf;
+        let justifySelf;
+        let margin;
+        switch (this.PlacementMode) {
+            case 'Top':
+            case 'TopEdgeAlignedLeft':
+            case 'TopEdgeAlignedRight':
+                bottom = `anchor(${anchor} top)`;
+                left = `anchor(${anchor} left)`;
+                right = `anchor(${anchor} right)`;
+                alignSelf = 'flex-end';
+                break;
+            case 'Bottom':
+            case 'BottomEdgeAlignedLeft':
+            case 'BottomEdgeAlignedRight':
+                top = `anchor(${anchor} bottom)`;
+                left = `anchor(${anchor} left)`;
+                right = `anchor(${anchor} right)`;
+                alignSelf = 'flex-start';
+                break;
+            case 'Left':
+            case 'LeftEdgeAlignedBottom':
+            case 'LeftEdgeAlignedTop':
+                right = `anchor(${anchor} left)`;
+                top = `anchor(${anchor} top)`;
+                bottom = `anchor(${anchor} bottom)`;
+                justifySelf = 'right';
+                break;
+            case 'Right':
+            case 'RightEdgeAlignedBottom':
+            case 'RightEdgeAlignedTop':
+                left = `anchor(${anchor} right)`;
+                top = `anchor(${anchor} top)`;
+                bottom = `anchor(${anchor} bottom)`;
+                justifySelf = 'left';
+                break;
+        }
+        switch (this.PlacementMode) {
+            case 'Top':
+            case 'Bottom':
+                justifySelf = 'center';
+                margin = '0 -100% 0 -100%';
+                break;
+            case 'TopEdgeAlignedLeft':
+            case 'BottomEdgeAlignedLeft':
+                justifySelf = 'left';
+                margin = '0 -100% 0 0';
+                break;
+            case 'TopEdgeAlignedRight':
+            case 'BottomEdgeAlignedRight':
+                justifySelf = 'right';
+                margin = '0 0 0 -100%';
+                break;
+            case 'Left':
+            case 'Right':
+                alignSelf = 'center';
+                margin = '-100% 0 -100% 0';
+                break;
+            case 'LeftEdgeAlignedTop':
+            case 'RightEdgeAlignedTop':
+                alignSelf = 'flex-start';
+                break;
+            case 'LeftEdgeAlignedBottom':
+            case 'RightEdgeAlignedBottom':
+                alignSelf = 'flex-end';
+                break;
+        }
+        return {
+            'position-anchor': anchor,
+            'top': top,
+            'left': left,
+            'right': right,
+            'bottom': bottom,
+            'align-self': alignSelf,
+            'justify-self': justifySelf,
+            'margin': margin
+        };
+    }
+    get class() {
+        switch (this.PlacementMode) {
+            case 'Top':
+            case 'TopEdgeAlignedLeft':
+            case 'TopEdgeAlignedRight':
+                return "roll-up";
+            case 'Bottom':
+            case 'BottomEdgeAlignedLeft':
+            case 'BottomEdgeAlignedRight':
+                return "roll-down";
+            case 'Left':
+            case 'LeftEdgeAlignedBottom':
+            case 'LeftEdgeAlignedTop':
+                return "roll-left";
+            case 'Right':
+            case 'RightEdgeAlignedBottom':
+            case 'RightEdgeAlignedTop':
+                return "roll-right";
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Flyout, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: Flyout, isStandalone: true, selector: "Flyout", inputs: { PlacementMode: "PlacementMode" }, host: { properties: { "attr.id": "this.Id", "attr.popover": "this._popover", "style": "this.styles", "class": "this.class" } }, ngImport: i0, template: `<div class="content"><ng-content/></div>`, isInline: true, styles: [":host{background-color:transparent;display:grid;padding:0;margin:0;border:0;overflow:hidden;pointer-events:none}:host>.content{display:grid;padding:16px;border-width:1px;border-style:solid;border-radius:8px;opacity:0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .25s,opacity .25s;border-color:#0000000f;background-color:#fcfcfc26}@media (prefers-color-scheme: dark){:host>.content{border-color:#0003;background-color:#2c2c2c26}}:host.roll-up>.content{transform:translateY(25%)}:host.roll-down>.content{transform:translateY(-25%)}:host.roll-left>.content{transform:translate(25%)}:host.roll-right>.content{transform:translate(-25%)}:host:popover-open{pointer-events:all}:host:popover-open>.content{transform:translate(0);opacity:1}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Flyout, decorators: [{
+            type: Component,
+            args: [{ selector: 'Flyout', template: `<div class="content"><ng-content/></div>`, styles: [":host{background-color:transparent;display:grid;padding:0;margin:0;border:0;overflow:hidden;pointer-events:none}:host>.content{display:grid;padding:16px;border-width:1px;border-style:solid;border-radius:8px;opacity:0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .25s,opacity .25s;border-color:#0000000f;background-color:#fcfcfc26}@media (prefers-color-scheme: dark){:host>.content{border-color:#0003;background-color:#2c2c2c26}}:host.roll-up>.content{transform:translateY(25%)}:host.roll-down>.content{transform:translateY(-25%)}:host.roll-left>.content{transform:translate(25%)}:host.roll-right>.content{transform:translate(-25%)}:host:popover-open{pointer-events:all}:host:popover-open>.content{transform:translate(0);opacity:1}\n"] }]
+        }], propDecorators: { PlacementMode: [{
+                type: Input
+            }], Id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], _popover: [{
+                type: HostBinding,
+                args: ['attr.popover']
+            }], styles: [{
+                type: HostBinding,
+                args: ['style']
+            }], class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class Button extends Border {
+    constructor() {
+        super(...arguments);
+        this.IsEnabled = true;
+        this.type = 'button';
+        this._popover = null;
+        this._flyoutOpen = false;
+    }
+    get disabled() {
+        return this.IsEnabled ? undefined : true;
+    }
+    ngAfterContentInit() {
+        if (this._children.length === 0)
+            return;
+        this._popoverTarget = this._children.first.Id;
+    }
+    ngAfterViewInit() {
+        this._popover = document.querySelector('#' + this._popoverTarget);
+    }
+    onHostPointerEvent(event) {
+        this._flyoutOpen = this._popover?.matches(':popover-open') ?? false;
+    }
+    get anchorName() {
+        return this._popoverTarget ? `--${this._popoverTarget}-host` : undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Button, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: Button, isStandalone: true, selector: "Button", inputs: { IsEnabled: "IsEnabled" }, host: { listeners: { "pointerdown": "onHostPointerEvent($event)", "pointerenter": "onHostPointerEvent($event)", "pointerup": "onHostPointerEvent($event)" }, properties: { "attr.type": "this.type", "attr.disabled": "this.disabled", "attr.popovertarget": "this._popoverTarget", "class.flyout-open": "this._flyoutOpen", "style.anchor-name": "this.anchorName" } }, queries: [{ propertyName: "_children", predicate: Flyout }], usesInheritance: true, ngImport: i0, template: `<ng-content/><ng-content select="flyout"/>`, isInline: true, styles: [":host{display:grid;align-content:center;justify-content:center;padding:5px 11px;border-width:1px;border-style:solid;border-radius:4px;background:#ffffffb3;border-color:#0000000f;color:#000000e4;transition:all .167s}:host::ng-deep *{color:#000000e4}@media (prefers-color-scheme: dark){:host{background:#ffffff0f;border-color:#ffffff12;color:#fff}:host::ng-deep *{color:#fff}}:host:hover:not(.checked):not(.flyout-open){background:#f9f9f980}@media (prefers-color-scheme: dark){:host:hover:not(.checked):not(.flyout-open){background:#ffffff15}}:host:active:not(.checked):not(.flyout-open){background:#f9f9f94d;color:#0000009e}:host:active:not(.checked):not(.flyout-open)::ng-deep *{color:#0000009e}@media (prefers-color-scheme: dark){:host:active:not(.checked):not(.flyout-open){background:#ffffff08;color:#ffffffc5}:host:active:not(.checked):not(.flyout-open)::ng-deep *{color:#ffffffc5}}:host:disabled:not(.checked){background:#f9f9f94d;color:#0000005c}:host:disabled:not(.checked)::ng-deep *{color:#0000005c}@media (prefers-color-scheme: dark){:host:disabled:not(.checked){background:#ffffff0b;color:#ffffff5d}:host:disabled:not(.checked)::ng-deep *{color:#ffffff5d}}:host.checked{background:#0067c0;border-color:#0067c0;color:#fff}:host.checked::ng-deep *{color:#fff}@media (prefers-color-scheme: dark){:host.checked{background:#4cc2ff;border-color:#4cc2ff;color:#000}:host.checked::ng-deep *{color:#000}}:host:hover.checked:not(.flyout-open){background:#0067c0e6;border-color:#0067c0e6;color:#fff}:host:hover.checked:not(.flyout-open)::ng-deep *{color:#fff}@media (prefers-color-scheme: dark){:host:hover.checked:not(.flyout-open){background:#4cc2ffe6;border-color:#4cc2ffe6;color:#000}:host:hover.checked:not(.flyout-open)::ng-deep *{color:#000}}:host:active.checked:not(.flyout-open){background:#0067c0cc;border-color:#fff0;color:#ffffffb3}:host:active.checked:not(.flyout-open)::ng-deep *{color:#ffffffb3}@media (prefers-color-scheme: dark){:host:active.checked:not(.flyout-open){background:#4cc2ffcc;border-color:#fff0;color:#00000080}:host:active.checked:not(.flyout-open)::ng-deep *{color:#00000080}}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Button, decorators: [{
+            type: Component,
+            args: [{ selector: 'Button', template: `<ng-content/><ng-content select="flyout"/>`, styles: [":host{display:grid;align-content:center;justify-content:center;padding:5px 11px;border-width:1px;border-style:solid;border-radius:4px;background:#ffffffb3;border-color:#0000000f;color:#000000e4;transition:all .167s}:host::ng-deep *{color:#000000e4}@media (prefers-color-scheme: dark){:host{background:#ffffff0f;border-color:#ffffff12;color:#fff}:host::ng-deep *{color:#fff}}:host:hover:not(.checked):not(.flyout-open){background:#f9f9f980}@media (prefers-color-scheme: dark){:host:hover:not(.checked):not(.flyout-open){background:#ffffff15}}:host:active:not(.checked):not(.flyout-open){background:#f9f9f94d;color:#0000009e}:host:active:not(.checked):not(.flyout-open)::ng-deep *{color:#0000009e}@media (prefers-color-scheme: dark){:host:active:not(.checked):not(.flyout-open){background:#ffffff08;color:#ffffffc5}:host:active:not(.checked):not(.flyout-open)::ng-deep *{color:#ffffffc5}}:host:disabled:not(.checked){background:#f9f9f94d;color:#0000005c}:host:disabled:not(.checked)::ng-deep *{color:#0000005c}@media (prefers-color-scheme: dark){:host:disabled:not(.checked){background:#ffffff0b;color:#ffffff5d}:host:disabled:not(.checked)::ng-deep *{color:#ffffff5d}}:host.checked{background:#0067c0;border-color:#0067c0;color:#fff}:host.checked::ng-deep *{color:#fff}@media (prefers-color-scheme: dark){:host.checked{background:#4cc2ff;border-color:#4cc2ff;color:#000}:host.checked::ng-deep *{color:#000}}:host:hover.checked:not(.flyout-open){background:#0067c0e6;border-color:#0067c0e6;color:#fff}:host:hover.checked:not(.flyout-open)::ng-deep *{color:#fff}@media (prefers-color-scheme: dark){:host:hover.checked:not(.flyout-open){background:#4cc2ffe6;border-color:#4cc2ffe6;color:#000}:host:hover.checked:not(.flyout-open)::ng-deep *{color:#000}}:host:active.checked:not(.flyout-open){background:#0067c0cc;border-color:#fff0;color:#ffffffb3}:host:active.checked:not(.flyout-open)::ng-deep *{color:#ffffffb3}@media (prefers-color-scheme: dark){:host:active.checked:not(.flyout-open){background:#4cc2ffcc;border-color:#fff0;color:#00000080}:host:active.checked:not(.flyout-open)::ng-deep *{color:#00000080}}\n"] }]
+        }], propDecorators: { IsEnabled: [{
+                type: Input
+            }], type: [{
+                type: HostBinding,
+                args: ['attr.type']
+            }], disabled: [{
+                type: HostBinding,
+                args: ['attr.disabled']
+            }], _popoverTarget: [{
+                type: HostBinding,
+                args: ['attr.popovertarget']
+            }], _flyoutOpen: [{
+                type: HostBinding,
+                args: ['class.flyout-open']
+            }], _children: [{
+                type: ContentChildren,
+                args: [Flyout]
+            }], onHostPointerEvent: [{
+                type: HostListener,
+                args: ['pointerdown', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['pointerenter', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['pointerup', ['$event']]
+            }], anchorName: [{
+                type: HostBinding,
+                args: ['style.anchor-name']
+            }] } });
+
+class CheckBox extends Border {
+    constructor() {
+        super(...arguments);
+        this.IsEnabled = true;
+        this.IsChecked = false;
+        this.IsCheckedChange = new EventEmitter();
+    }
+    onIsCheckedChange(event) {
+        this.IsChecked = (event.target).checked;
+        this.IsCheckedChange.emit(this.IsChecked);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CheckBox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: CheckBox, isStandalone: true, selector: "CheckBox", inputs: { IsEnabled: "IsEnabled", IsChecked: "IsChecked" }, outputs: { IsCheckedChange: "IsCheckedChange" }, usesInheritance: true, ngImport: i0, template: `<label class="container">
+    <input type="checkbox" [checked]="IsChecked" (change)="onIsCheckedChange($event)" [disabled]="!IsEnabled">
+    <div class="checkBox">
+      <div class="checkMark">&#xE73E;</div>
+    </div>
+    <div class="content">
+      <ng-content/>
+    </div>
+  </label>`, isInline: true, styles: [".container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input[type=checkbox]:checked+.checkBox>.checkMark{display:grid}input[type=checkbox]:not(:checked):not(:hover):not(:active):not(:disabled)+.checkBox{background-color:#00000006;border-color:#00000072}@media (prefers-color-scheme: dark){input[type=checkbox]:not(:checked):not(:hover):not(:active):not(:disabled)+.checkBox{background-color:#00000019;border-color:#ffffff8b}}input[type=checkbox]:not(:checked):hover:not(:active):not(:disabled)+.checkBox{background-color:#0000000f;border-color:#00000072}@media (prefers-color-scheme: dark){input[type=checkbox]:not(:checked):hover:not(:active):not(:disabled)+.checkBox{background-color:#ffffff0b;border-color:#ffffff8b}}input[type=checkbox]:not(:checked):active+.checkBox{background-color:#fff0;border-color:#00000037}@media (prefers-color-scheme: dark){input[type=checkbox]:not(:checked):active+.checkBox{background-color:#fff0;border-color:#ffffff28}}input[type=checkbox]:checked:not(:hover):not(:disabled)+.checkBox{background-color:#0067c0;border-color:#0067c0}@media (prefers-color-scheme: dark){input[type=checkbox]:checked:not(:hover):not(:disabled)+.checkBox{background-color:#4cc2ff;border-color:#4cc2ff}}input[type=checkbox]:checked:hover:not(:disabled)+.checkBox{background-color:#0067c0e6;border-color:#0067c0e6}@media (prefers-color-scheme: dark){input[type=checkbox]:checked:hover:not(:disabled)+.checkBox{background-color:#4cc2ffe6;border-color:#4cc2ffe6}}input[type=checkbox]:checked:active:not(:disabled)+.checkBox{background-color:#0067c0cc;border-color:#0067c0cc}input[type=checkbox]:checked:active:not(:disabled)+.checkBox>.checkMark{color:#ffffffb3}@media (prefers-color-scheme: dark){input[type=checkbox]:checked:active:not(:disabled)+.checkBox{background-color:#4cc2ffcc;border-color:#4cc2ffcc}input[type=checkbox]:checked:active:not(:disabled)+.checkBox>.checkMark{color:#00000080}}input[type=checkbox]:not(:checked):disabled+.checkBox{background-color:#fff0;border-color:#00000037}@media (prefers-color-scheme: dark){input[type=checkbox]:not(:checked):disabled+.checkBox{background-color:#fff0;border-color:#ffffff28}}input[type=checkbox]:checked:disabled+.checkBox{background-color:#ffffff37;border-color:#00000037}input[type=checkbox]:checked:disabled+.checkBox>.checkMark{color:#fff}@media (prefers-color-scheme: dark){input[type=checkbox]:checked:disabled+.checkBox{background-color:#ffffff28;border-color:#ffffff28}input[type=checkbox]:checked:disabled+.checkBox>.checkMark{color:#ffffff87}}.checkBox{display:grid;width:20px;height:20px;border-radius:4px;border-style:solid;border-width:1px}.checkMark{display:none;font-family:Segoe Fluent Icons,Segoe MDL2 Assets;font-size:12pt;align-self:center;justify-self:center;color:#fff}@media (prefers-color-scheme: dark){.checkMark{color:#000}}.content{align-self:center}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CheckBox, decorators: [{
+            type: Component,
+            args: [{ selector: 'CheckBox', template: `<label class="container">
+    <input type="checkbox" [checked]="IsChecked" (change)="onIsCheckedChange($event)" [disabled]="!IsEnabled">
+    <div class="checkBox">
+      <div class="checkMark">&#xE73E;</div>
+    </div>
+    <div class="content">
+      <ng-content/>
+    </div>
+  </label>`, styles: [".container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input[type=checkbox]:checked+.checkBox>.checkMark{display:grid}input[type=checkbox]:not(:checked):not(:hover):not(:active):not(:disabled)+.checkBox{background-color:#00000006;border-color:#00000072}@media (prefers-color-scheme: dark){input[type=checkbox]:not(:checked):not(:hover):not(:active):not(:disabled)+.checkBox{background-color:#00000019;border-color:#ffffff8b}}input[type=checkbox]:not(:checked):hover:not(:active):not(:disabled)+.checkBox{background-color:#0000000f;border-color:#00000072}@media (prefers-color-scheme: dark){input[type=checkbox]:not(:checked):hover:not(:active):not(:disabled)+.checkBox{background-color:#ffffff0b;border-color:#ffffff8b}}input[type=checkbox]:not(:checked):active+.checkBox{background-color:#fff0;border-color:#00000037}@media (prefers-color-scheme: dark){input[type=checkbox]:not(:checked):active+.checkBox{background-color:#fff0;border-color:#ffffff28}}input[type=checkbox]:checked:not(:hover):not(:disabled)+.checkBox{background-color:#0067c0;border-color:#0067c0}@media (prefers-color-scheme: dark){input[type=checkbox]:checked:not(:hover):not(:disabled)+.checkBox{background-color:#4cc2ff;border-color:#4cc2ff}}input[type=checkbox]:checked:hover:not(:disabled)+.checkBox{background-color:#0067c0e6;border-color:#0067c0e6}@media (prefers-color-scheme: dark){input[type=checkbox]:checked:hover:not(:disabled)+.checkBox{background-color:#4cc2ffe6;border-color:#4cc2ffe6}}input[type=checkbox]:checked:active:not(:disabled)+.checkBox{background-color:#0067c0cc;border-color:#0067c0cc}input[type=checkbox]:checked:active:not(:disabled)+.checkBox>.checkMark{color:#ffffffb3}@media (prefers-color-scheme: dark){input[type=checkbox]:checked:active:not(:disabled)+.checkBox{background-color:#4cc2ffcc;border-color:#4cc2ffcc}input[type=checkbox]:checked:active:not(:disabled)+.checkBox>.checkMark{color:#00000080}}input[type=checkbox]:not(:checked):disabled+.checkBox{background-color:#fff0;border-color:#00000037}@media (prefers-color-scheme: dark){input[type=checkbox]:not(:checked):disabled+.checkBox{background-color:#fff0;border-color:#ffffff28}}input[type=checkbox]:checked:disabled+.checkBox{background-color:#ffffff37;border-color:#00000037}input[type=checkbox]:checked:disabled+.checkBox>.checkMark{color:#fff}@media (prefers-color-scheme: dark){input[type=checkbox]:checked:disabled+.checkBox{background-color:#ffffff28;border-color:#ffffff28}input[type=checkbox]:checked:disabled+.checkBox>.checkMark{color:#ffffff87}}.checkBox{display:grid;width:20px;height:20px;border-radius:4px;border-style:solid;border-width:1px}.checkMark{display:none;font-family:Segoe Fluent Icons,Segoe MDL2 Assets;font-size:12pt;align-self:center;justify-self:center;color:#fff}@media (prefers-color-scheme: dark){.checkMark{color:#000}}.content{align-self:center}\n"] }]
+        }], propDecorators: { IsEnabled: [{
+                type: Input
+            }], IsChecked: [{
+                type: Input
+            }], IsCheckedChange: [{
+                type: Output
+            }] } });
+
+class ListBox extends FrameworkElement {
+    constructor() {
+        super(...arguments);
+        this.SelectedIndex = -1;
+        this.SelectedIndexChange = new EventEmitter();
+        this.SelectedValue = null;
+        this.SelectedValueChange = new EventEmitter();
+    }
+    getValue(index, item) {
+        return this.SelectedValuePath ? item[this.SelectedValuePath] : item;
+    }
+    onItemClick(index, item) {
+        this.SelectedIndex = index;
+        this.SelectedIndexChange.emit(index);
+        this.SelectedValue = this.getValue(index, item);
+        this.SelectedValueChange.emit(index);
+    }
+    get overflow() {
+        return 'auto';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListBox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ListBox, isStandalone: true, selector: "ListBox", inputs: { ItemSource: "ItemSource", SelectedIndex: "SelectedIndex", SelectedValue: "SelectedValue", DisplayMemberPath: "DisplayMemberPath", SelectedValuePath: "SelectedValuePath" }, outputs: { SelectedIndexChange: "SelectedIndexChange", SelectedValueChange: "SelectedValueChange" }, queries: [{ propertyName: "ItemTemplate", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: `<div *ngFor="let item of ItemSource; index as index; trackBy: getValue" class="item" [ngClass]="{'selected': index == SelectedIndex}" (click)="onItemClick(index, item)">
+    <ng-container *ngIf="ItemTemplate">
+      <ng-container *ngTemplateOutlet="ItemTemplate; context: { $implicit: item }"/>
+    </ng-container>
+    <ng-container *ngIf="!ItemTemplate">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container>
+  </div>`, isInline: true, styles: [":host{display:flex;flex-direction:column;background-color:#f2f2f2}@media (prefers-color-scheme: dark){:host{background-color:#2b2b2b}}.item{display:grid;padding:12px;margin:0}.item:not(:hover):not(:active):not(.selected){background-color:transparent;color:#000000e4}@media (prefers-color-scheme: dark){.item:not(:hover):not(:active):not(.selected){color:#fff}}.item:hover:not(.active):not(.selected){background-color:#00000009}@media (prefers-color-scheme: dark){.item:hover:not(.active):not(.selected){background-color:#ffffff0f}}.item:active:not(.selected){background-color:#00000006}@media (prefers-color-scheme: dark){.item:active:not(.selected){background-color:#ffffff0a}}.item:not(:hover):not(:active).selected{background-color:#0078d466}@media (prefers-color-scheme: dark){.item:not(:hover):not(:active).selected{background-color:#0078d499}}.item:hover:not(:active).selected{background-color:#0078d499}@media (prefers-color-scheme: dark){.item:hover:not(:active).selected{background-color:#0078d4cc}}.item:active.selected{background-color:#0078d4b3}@media (prefers-color-scheme: dark){.item:active.selected{background-color:#0078d4e6}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListBox, decorators: [{
+            type: Component,
+            args: [{ selector: 'ListBox', imports: [CommonModule], template: `<div *ngFor="let item of ItemSource; index as index; trackBy: getValue" class="item" [ngClass]="{'selected': index == SelectedIndex}" (click)="onItemClick(index, item)">
+    <ng-container *ngIf="ItemTemplate">
+      <ng-container *ngTemplateOutlet="ItemTemplate; context: { $implicit: item }"/>
+    </ng-container>
+    <ng-container *ngIf="!ItemTemplate">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container>
+  </div>`, styles: [":host{display:flex;flex-direction:column;background-color:#f2f2f2}@media (prefers-color-scheme: dark){:host{background-color:#2b2b2b}}.item{display:grid;padding:12px;margin:0}.item:not(:hover):not(:active):not(.selected){background-color:transparent;color:#000000e4}@media (prefers-color-scheme: dark){.item:not(:hover):not(:active):not(.selected){color:#fff}}.item:hover:not(.active):not(.selected){background-color:#00000009}@media (prefers-color-scheme: dark){.item:hover:not(.active):not(.selected){background-color:#ffffff0f}}.item:active:not(.selected){background-color:#00000006}@media (prefers-color-scheme: dark){.item:active:not(.selected){background-color:#ffffff0a}}.item:not(:hover):not(:active).selected{background-color:#0078d466}@media (prefers-color-scheme: dark){.item:not(:hover):not(:active).selected{background-color:#0078d499}}.item:hover:not(:active).selected{background-color:#0078d499}@media (prefers-color-scheme: dark){.item:hover:not(:active).selected{background-color:#0078d4cc}}.item:active.selected{background-color:#0078d4b3}@media (prefers-color-scheme: dark){.item:active.selected{background-color:#0078d4e6}}\n"] }]
+        }], propDecorators: { ItemSource: [{
+                type: Input
+            }], ItemTemplate: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }], SelectedIndex: [{
+                type: Input
+            }], SelectedIndexChange: [{
+                type: Output
+            }], SelectedValue: [{
+                type: Input
+            }], SelectedValueChange: [{
+                type: Output
+            }], DisplayMemberPath: [{
+                type: Input
+            }], SelectedValuePath: [{
+                type: Input
+            }] } });
+
+class StackPanel extends Border {
+    constructor() {
+        super(...arguments);
+        this.Orientation = 'Vertical';
+        this.Spacing = 0;
+    }
+    get flexDirection() {
+        return this.Orientation === 'Horizontal' ? 'row' : 'column';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: StackPanel, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: StackPanel, isStandalone: true, selector: "StackPanel", inputs: { Orientation: "Orientation", Spacing: "Spacing" }, host: { properties: { "style.gap": "this.Spacing", "style.flex-direction": "this.flexDirection" } }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:flex}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: StackPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'StackPanel', template: `<ng-content/>`, styles: [":host{display:flex}\n"] }]
+        }], propDecorators: { Orientation: [{
+                type: Input
+            }], Spacing: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.gap']
+            }], flexDirection: [{
+                type: HostBinding,
+                args: ['style.flex-direction']
+            }] } });
+
+class RadioButton extends Border {
+    constructor() {
+        super(...arguments);
+        this.IsEnabled = true;
+        this.IsChecked = false;
+        this.IsCheckedChange = new EventEmitter();
+        this.Group = "";
+    }
+    onIsCheckedChange(event) {
+        this.IsChecked = (event.target).checked;
+        this.IsCheckedChange.emit(this.IsChecked);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButton, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: RadioButton, isStandalone: true, selector: "RadioButton", inputs: { IsEnabled: "IsEnabled", IsChecked: "IsChecked", Group: "Group", Value: "Value" }, outputs: { IsCheckedChange: "IsCheckedChange" }, usesInheritance: true, ngImport: i0, template: `<label class="container">
+    <input type="radio" [name]="Group" [value]="Value" [checked]="IsChecked" (change)="onIsCheckedChange($event)" [disabled]="!IsEnabled">
+    <div class="radioButton">
+      <div class="circle"></div>
+    </div>
+    <div class="content">
+      <ng-content/>
+    </div>
+  </label>`, isInline: true, styles: [".container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input[type=radio]:checked+.radioButton>.circle{display:grid}input[type=radio]:not(:checked):not(:hover):not(:active):not(:disabled)+.radioButton{background-color:#00000006;border-color:#00000072}@media (prefers-color-scheme: dark){input[type=radio]:not(:checked):not(:hover):not(:active):not(:disabled)+.radioButton{background-color:#00000019;border-color:#ffffff8b}}input[type=radio]:not(:checked):hover:not(:active):not(:disabled)+.radioButton{background-color:#0000000f;border-color:#00000072}@media (prefers-color-scheme: dark){input[type=radio]:not(:checked):hover:not(:active):not(:disabled)+.radioButton{background-color:#ffffff0b;border-color:#ffffff8b}}input[type=radio]:not(:checked):active:not(:disabled)+.radioButton{background-color:#fff0;border-color:#00000037}@media (prefers-color-scheme: dark){input[type=radio]:not(:checked):active:not(:disabled)+.radioButton{background-color:#fff0;border-color:#ffffff28}}input[type=radio]:not(:checked):active:not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton{background-color:#0067c0;border-color:#0067c0}@media (prefers-color-scheme: dark){input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton{background-color:#4cc2ff;border-color:#4cc2ff}}input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton{background-color:#0067c0e6;border-color:#0067c0e6}@media (prefers-color-scheme: dark){input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton{background-color:#4cc2ffe6;border-color:#4cc2ffe6}}input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton>.circle{transform:scale(1.2)}input[type=radio]:checked:active:not(:disabled)+.radioButton{background-color:#0067c0cc;border-color:#0067c0cc}input[type=radio]:checked:active:not(:disabled)+.radioButton>.circle{transform:scale(1)}@media (prefers-color-scheme: dark){input[type=radio]:checked:active:not(:disabled)+.radioButton{background-color:#4cc2ffcc;border-color:#4cc2ffcc}}input[type=radio]:not(:checked):disabled+.radioButton{background-color:#fff0;border-color:#00000037}@media (prefers-color-scheme: dark){input[type=radio]:not(:checked):disabled+.radioButton{background-color:#fff0;border-color:#ffffff28}}input[type=radio]:checked:disabled+.radioButton{background-color:#ffffff37;border-color:#00000037}@media (prefers-color-scheme: dark){input[type=radio]:checked:disabled+.radioButton{background-color:#ffffff28;border-color:#ffffff28}}.radioButton{display:grid;width:20px;height:20px;border-radius:11px;border-style:solid;border-width:1px;transition:border-color .167s;transition:background-color .167s}.circle{width:11px;height:11px;border-radius:6.5px;align-self:center;justify-self:center;background-color:#fff;transition:transform .25s;transform:scale(0)}@media (prefers-color-scheme: dark){.circle{background-color:#000}}.content{align-self:center}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'RadioButton', template: `<label class="container">
+    <input type="radio" [name]="Group" [value]="Value" [checked]="IsChecked" (change)="onIsCheckedChange($event)" [disabled]="!IsEnabled">
+    <div class="radioButton">
+      <div class="circle"></div>
+    </div>
+    <div class="content">
+      <ng-content/>
+    </div>
+  </label>`, styles: [".container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input[type=radio]:checked+.radioButton>.circle{display:grid}input[type=radio]:not(:checked):not(:hover):not(:active):not(:disabled)+.radioButton{background-color:#00000006;border-color:#00000072}@media (prefers-color-scheme: dark){input[type=radio]:not(:checked):not(:hover):not(:active):not(:disabled)+.radioButton{background-color:#00000019;border-color:#ffffff8b}}input[type=radio]:not(:checked):hover:not(:active):not(:disabled)+.radioButton{background-color:#0000000f;border-color:#00000072}@media (prefers-color-scheme: dark){input[type=radio]:not(:checked):hover:not(:active):not(:disabled)+.radioButton{background-color:#ffffff0b;border-color:#ffffff8b}}input[type=radio]:not(:checked):active:not(:disabled)+.radioButton{background-color:#fff0;border-color:#00000037}@media (prefers-color-scheme: dark){input[type=radio]:not(:checked):active:not(:disabled)+.radioButton{background-color:#fff0;border-color:#ffffff28}}input[type=radio]:not(:checked):active:not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton{background-color:#0067c0;border-color:#0067c0}@media (prefers-color-scheme: dark){input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton{background-color:#4cc2ff;border-color:#4cc2ff}}input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton{background-color:#0067c0e6;border-color:#0067c0e6}@media (prefers-color-scheme: dark){input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton{background-color:#4cc2ffe6;border-color:#4cc2ffe6}}input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton>.circle{transform:scale(1.2)}input[type=radio]:checked:active:not(:disabled)+.radioButton{background-color:#0067c0cc;border-color:#0067c0cc}input[type=radio]:checked:active:not(:disabled)+.radioButton>.circle{transform:scale(1)}@media (prefers-color-scheme: dark){input[type=radio]:checked:active:not(:disabled)+.radioButton{background-color:#4cc2ffcc;border-color:#4cc2ffcc}}input[type=radio]:not(:checked):disabled+.radioButton{background-color:#fff0;border-color:#00000037}@media (prefers-color-scheme: dark){input[type=radio]:not(:checked):disabled+.radioButton{background-color:#fff0;border-color:#ffffff28}}input[type=radio]:checked:disabled+.radioButton{background-color:#ffffff37;border-color:#00000037}@media (prefers-color-scheme: dark){input[type=radio]:checked:disabled+.radioButton{background-color:#ffffff28;border-color:#ffffff28}}.radioButton{display:grid;width:20px;height:20px;border-radius:11px;border-style:solid;border-width:1px;transition:border-color .167s;transition:background-color .167s}.circle{width:11px;height:11px;border-radius:6.5px;align-self:center;justify-self:center;background-color:#fff;transition:transform .25s;transform:scale(0)}@media (prefers-color-scheme: dark){.circle{background-color:#000}}.content{align-self:center}\n"] }]
+        }], propDecorators: { IsEnabled: [{
+                type: Input
+            }], IsChecked: [{
+                type: Input
+            }], IsCheckedChange: [{
+                type: Output
+            }], Group: [{
+                type: Input
+            }], Value: [{
+                type: Input
+            }] } });
+class RadioButtonGroup extends StackPanel {
+    constructor() {
+        super(...arguments);
+        this.ValueChange = new EventEmitter();
+        this._id = RadioButtonGroup._nextId++;
+    }
+    set Value(value) {
+        if (this._children) {
+            for (let item of this._children) {
+                if (item.Value = value) {
+                    item.IsChecked = true;
+                    break;
+                }
+            }
+        }
+        else {
+            this._value = value;
+        }
+    }
+    get Value() {
+        return this._value;
+    }
+    static { this._nextId = 1; }
+    ngAfterContentInit() {
+        let index = 0;
+        for (let item of this._children) {
+            item.Group = 'xaml-radio-button-group-' + this._id;
+            if (item.Value === undefined)
+                item.Value = index++;
+            if (item.Value === this.Value)
+                item.IsChecked = true;
+            item.IsCheckedChange.subscribe(p => {
+                this.Value = item.Value;
+                this.ValueChange.emit(item.Value);
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonGroup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: RadioButtonGroup, isStandalone: true, selector: "RadioButtonGroup", inputs: { Value: "Value" }, outputs: { ValueChange: "ValueChange" }, queries: [{ propertyName: "_children", predicate: RadioButton }], usesInheritance: true, ngImport: i0, template: `<ng-container><ng-content/></ng-container>`, isInline: true, styles: [":host{display:flex}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'RadioButtonGroup', template: `<ng-container><ng-content/></ng-container>`, styles: [":host{display:flex}\n"] }]
+        }], propDecorators: { Value: [{
+                type: Input
+            }], ValueChange: [{
+                type: Output
+            }], _children: [{
+                type: ContentChildren,
+                args: [RadioButton]
+            }] } });
+
+class Slider extends FrameworkElement {
+    constructor() {
+        super(...arguments);
+        this.Minimum = 0.0;
+        this.Maximum = 1.0;
+        this.StepFrequency = 0.01;
+        this.Value = 0.0;
+        this.ValueChange = new EventEmitter();
+        this.IsEnabled = true;
+        this.Orientation = 'Horizontal';
+    }
+    onValueChange(event) {
+        this.Value = parseFloat(event.target.value);
+        this.ValueChange.emit(this.Value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Slider, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: Slider, isStandalone: true, selector: "Slider", inputs: { Minimum: "Minimum", Maximum: "Maximum", StepFrequency: "StepFrequency", Value: "Value", IsEnabled: "IsEnabled", Orientation: "Orientation" }, outputs: { ValueChange: "ValueChange" }, usesInheritance: true, ngImport: i0, template: `<input type="range" 
+    [min]="Minimum" 
+    [max]="Maximum" 
+    [value]="Value" 
+    [step]="StepFrequency" 
+    (change)="onValueChange($event)" 
+    [disabled]="!IsEnabled"
+    [className]="Orientation.toLowerCase()">`, isInline: true, styles: [":host{display:grid}input{display:grid;-webkit-appearance:none;appearance:none;background-color:#00000072;border-radius:2px;outline:none}input.horizontal{height:4px;margin:7px 0}input.vertical{width:4px;margin:0 7px;writing-mode:vertical-lr;direction:rtl;vertical-align:middle}@media (prefers-color-scheme: dark){input{background-color:#ffffff8b}}input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:50%;width:16px;height:16px;border-style:solid;border-width:4px;outline:1px solid rgba(255,255,255,.0784313725);border-color:#fff;background-color:#0067c0;transition:border-width .167s}@media (prefers-color-scheme: dark){input::-webkit-slider-thumb{border-color:#454545;background-color:#4cc2ff}}input::-moz-range-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:50%;width:16px;height:16px;border-style:solid;border-width:4px;outline:1px solid rgba(255,255,255,.0784313725);border-color:#fff;background-color:#0067c0;transition:border-width .167s}@media (prefers-color-scheme: dark){input::-moz-range-thumb{border-color:#454545;background-color:#4cc2ff}}input:not(:disabled)::-webkit-slider-thumb:hover{border-width:3px;background-color:#0067c0e6}@media (prefers-color-scheme: dark){input:not(:disabled)::-webkit-slider-thumb:hover{background-color:#4cc2ffe6}}input:not(:disabled)::-webkit-slider-thumb:active{border-width:5px;background-color:#0067c0cc}@media (prefers-color-scheme: dark){input:not(:disabled)::-webkit-slider-thumb:active{background-color:#4cc2ffcc}}input:not(:disabled)::-moz-range-thumb:hover{border-width:3px;background-color:#0067c0e6}@media (prefers-color-scheme: dark){input:not(:disabled)::-moz-range-thumb:hover{background-color:#4cc2ffe6}}input:not(:disabled)::-moz-range-thumb:active{border-width:5px;background-color:#0067c0cc}@media (prefers-color-scheme: dark){input:not(:disabled)::-moz-range-thumb:active{background-color:#4cc2ffcc}}input:disabled{background-color:#00000051}@media (prefers-color-scheme: dark){input:disabled{background-color:#ffffff3f}}input:disabled::-webkit-slider-thumb{border-width:2px;background-color:#ffffff37}@media (prefers-color-scheme: dark){input:disabled::-webkit-slider-thumb{background-color:#ffffff28}}input:disabled::-moz-range-thumb{border-width:2px;background-color:#ffffff37}@media (prefers-color-scheme: dark){input:disabled::-moz-range-thumb{background-color:#ffffff28}}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Slider, decorators: [{
+            type: Component,
+            args: [{ selector: 'Slider', template: `<input type="range" 
+    [min]="Minimum" 
+    [max]="Maximum" 
+    [value]="Value" 
+    [step]="StepFrequency" 
+    (change)="onValueChange($event)" 
+    [disabled]="!IsEnabled"
+    [className]="Orientation.toLowerCase()">`, styles: [":host{display:grid}input{display:grid;-webkit-appearance:none;appearance:none;background-color:#00000072;border-radius:2px;outline:none}input.horizontal{height:4px;margin:7px 0}input.vertical{width:4px;margin:0 7px;writing-mode:vertical-lr;direction:rtl;vertical-align:middle}@media (prefers-color-scheme: dark){input{background-color:#ffffff8b}}input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:50%;width:16px;height:16px;border-style:solid;border-width:4px;outline:1px solid rgba(255,255,255,.0784313725);border-color:#fff;background-color:#0067c0;transition:border-width .167s}@media (prefers-color-scheme: dark){input::-webkit-slider-thumb{border-color:#454545;background-color:#4cc2ff}}input::-moz-range-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:50%;width:16px;height:16px;border-style:solid;border-width:4px;outline:1px solid rgba(255,255,255,.0784313725);border-color:#fff;background-color:#0067c0;transition:border-width .167s}@media (prefers-color-scheme: dark){input::-moz-range-thumb{border-color:#454545;background-color:#4cc2ff}}input:not(:disabled)::-webkit-slider-thumb:hover{border-width:3px;background-color:#0067c0e6}@media (prefers-color-scheme: dark){input:not(:disabled)::-webkit-slider-thumb:hover{background-color:#4cc2ffe6}}input:not(:disabled)::-webkit-slider-thumb:active{border-width:5px;background-color:#0067c0cc}@media (prefers-color-scheme: dark){input:not(:disabled)::-webkit-slider-thumb:active{background-color:#4cc2ffcc}}input:not(:disabled)::-moz-range-thumb:hover{border-width:3px;background-color:#0067c0e6}@media (prefers-color-scheme: dark){input:not(:disabled)::-moz-range-thumb:hover{background-color:#4cc2ffe6}}input:not(:disabled)::-moz-range-thumb:active{border-width:5px;background-color:#0067c0cc}@media (prefers-color-scheme: dark){input:not(:disabled)::-moz-range-thumb:active{background-color:#4cc2ffcc}}input:disabled{background-color:#00000051}@media (prefers-color-scheme: dark){input:disabled{background-color:#ffffff3f}}input:disabled::-webkit-slider-thumb{border-width:2px;background-color:#ffffff37}@media (prefers-color-scheme: dark){input:disabled::-webkit-slider-thumb{background-color:#ffffff28}}input:disabled::-moz-range-thumb{border-width:2px;background-color:#ffffff37}@media (prefers-color-scheme: dark){input:disabled::-moz-range-thumb{background-color:#ffffff28}}\n"] }]
+        }], propDecorators: { Minimum: [{
+                type: Input
+            }], Maximum: [{
+                type: Input
+            }], StepFrequency: [{
+                type: Input
+            }], Value: [{
+                type: Input
+            }], ValueChange: [{
+                type: Output
+            }], IsEnabled: [{
+                type: Input
+            }], Orientation: [{
+                type: Input
+            }] } });
+
+class TextBox extends FrameworkElement {
+    constructor() {
+        super(...arguments);
+        this.IsEnabled = true;
+        this.PlaceholderText = '';
+        this.Text = '';
+        this.TextChange = new EventEmitter();
+        this.TextAlignment = 'Left';
+        this.TextWrapping = 'NoWrap';
+    }
+    onChange(event) {
+        this.Text = (event.target).value;
+        this.TextChange.emit(this.Text);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TextBox, isStandalone: true, selector: "TextBox", inputs: { IsEnabled: "IsEnabled", PlaceholderText: "PlaceholderText", Text: "Text", TextAlignment: "TextAlignment", TextWrapping: "TextWrapping" }, outputs: { TextChange: "TextChange" }, usesInheritance: true, ngImport: i0, template: `
+  <input *ngIf="TextWrapping === 'NoWrap'" type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"/>
+  <textarea *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (change)="onChange($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"></textarea>`, isInline: true, styles: [":host{display:grid}textarea{resize:none}input,textarea{outline-style:none;border-style:solid;border-width:1px;border-radius:4px;padding:6px;background-color:#ffffffb3;border-color:#0000000f;border-bottom-color:#00000072;color:#000000e4}@media (prefers-color-scheme: dark){input,textarea{background-color:#ffffff0f;border-color:#ffffff12;border-bottom-color:#ffffff8b;color:#fff}}input::placeholder,textarea::placeholder{color:#0000009e;opacity:1}@media (prefers-color-scheme: dark){input::placeholder,textarea::placeholder{color:#ffffffc5}}input:hover,textarea:hover{background-color:#f9f9f980}@media (prefers-color-scheme: dark){input:hover,textarea:hover{background-color:#ffffff15}}input:focus,textarea:focus{background-color:#fff;border-bottom-color:#0067c0}@media (prefers-color-scheme: dark){input:focus,textarea:focus{background-color:#1e1e1eb3;border-bottom-color:#4cc2ff}}input:disabled,textarea:disabled{background-color:#f9f9f94d;border-bottom-color:#0000000f;color:#0000005c}@media (prefers-color-scheme: dark){input:disabled,textarea:disabled{background-color:#ffffff0b;border-bottom-color:#ffffff12;color:#ffffff5d}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBox, decorators: [{
+            type: Component,
+            args: [{ selector: 'TextBox', imports: [CommonModule], template: `
+  <input *ngIf="TextWrapping === 'NoWrap'" type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"/>
+  <textarea *ngIf="TextWrapping === 'Wrap'" [disabled]="!IsEnabled" [value]="Text" (change)="onChange($event)" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}"></textarea>`, styles: [":host{display:grid}textarea{resize:none}input,textarea{outline-style:none;border-style:solid;border-width:1px;border-radius:4px;padding:6px;background-color:#ffffffb3;border-color:#0000000f;border-bottom-color:#00000072;color:#000000e4}@media (prefers-color-scheme: dark){input,textarea{background-color:#ffffff0f;border-color:#ffffff12;border-bottom-color:#ffffff8b;color:#fff}}input::placeholder,textarea::placeholder{color:#0000009e;opacity:1}@media (prefers-color-scheme: dark){input::placeholder,textarea::placeholder{color:#ffffffc5}}input:hover,textarea:hover{background-color:#f9f9f980}@media (prefers-color-scheme: dark){input:hover,textarea:hover{background-color:#ffffff15}}input:focus,textarea:focus{background-color:#fff;border-bottom-color:#0067c0}@media (prefers-color-scheme: dark){input:focus,textarea:focus{background-color:#1e1e1eb3;border-bottom-color:#4cc2ff}}input:disabled,textarea:disabled{background-color:#f9f9f94d;border-bottom-color:#0000000f;color:#0000005c}@media (prefers-color-scheme: dark){input:disabled,textarea:disabled{background-color:#ffffff0b;border-bottom-color:#ffffff12;color:#ffffff5d}}\n"] }]
+        }], propDecorators: { IsEnabled: [{
+                type: Input
+            }], PlaceholderText: [{
+                type: Input
+            }], Text: [{
+                type: Input
+            }], TextChange: [{
+                type: Output
+            }], TextAlignment: [{
+                type: Input
+            }], TextWrapping: [{
+                type: Input
+            }] } });
+
+class ToggleButton extends Button {
+    constructor() {
+        super(...arguments);
+        this.IsChecked = false;
+        this.IsCheckedChange = new EventEmitter();
+    }
+    onPointerUp(event) {
+        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: ToggleButton, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ToggleButton, isStandalone: true, selector: "ToggleButton", inputs: { IsChecked: "IsChecked" }, outputs: { IsCheckedChange: "IsCheckedChange" }, host: { listeners: { "pointerup": "onPointerUp($event)" }, properties: { "class.checked": "this.IsChecked" } }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;align-content:center;justify-content:center;padding:5px 11px;border-width:1px;border-style:solid;border-radius:4px;background:#ffffffb3;border-color:#0000000f;color:#000000e4;transition:all .167s}:host::ng-deep *{color:#000000e4}@media (prefers-color-scheme: dark){:host{background:#ffffff0f;border-color:#ffffff12;color:#fff}:host::ng-deep *{color:#fff}}:host:hover:not(.checked):not(.flyout-open){background:#f9f9f980}@media (prefers-color-scheme: dark){:host:hover:not(.checked):not(.flyout-open){background:#ffffff15}}:host:active:not(.checked):not(.flyout-open){background:#f9f9f94d;color:#0000009e}:host:active:not(.checked):not(.flyout-open)::ng-deep *{color:#0000009e}@media (prefers-color-scheme: dark){:host:active:not(.checked):not(.flyout-open){background:#ffffff08;color:#ffffffc5}:host:active:not(.checked):not(.flyout-open)::ng-deep *{color:#ffffffc5}}:host:disabled:not(.checked){background:#f9f9f94d;color:#0000005c}:host:disabled:not(.checked)::ng-deep *{color:#0000005c}@media (prefers-color-scheme: dark){:host:disabled:not(.checked){background:#ffffff0b;color:#ffffff5d}:host:disabled:not(.checked)::ng-deep *{color:#ffffff5d}}:host.checked{background:#0067c0;border-color:#0067c0;color:#fff}:host.checked::ng-deep *{color:#fff}@media (prefers-color-scheme: dark){:host.checked{background:#4cc2ff;border-color:#4cc2ff;color:#000}:host.checked::ng-deep *{color:#000}}:host:hover.checked:not(.flyout-open){background:#0067c0e6;border-color:#0067c0e6;color:#fff}:host:hover.checked:not(.flyout-open)::ng-deep *{color:#fff}@media (prefers-color-scheme: dark){:host:hover.checked:not(.flyout-open){background:#4cc2ffe6;border-color:#4cc2ffe6;color:#000}:host:hover.checked:not(.flyout-open)::ng-deep *{color:#000}}:host:active.checked:not(.flyout-open){background:#0067c0cc;border-color:#fff0;color:#ffffffb3}:host:active.checked:not(.flyout-open)::ng-deep *{color:#ffffffb3}@media (prefers-color-scheme: dark){:host:active.checked:not(.flyout-open){background:#4cc2ffcc;border-color:#fff0;color:#00000080}:host:active.checked:not(.flyout-open)::ng-deep *{color:#00000080}}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'ToggleButton', template: `<ng-content/>`, styles: [":host{display:grid;align-content:center;justify-content:center;padding:5px 11px;border-width:1px;border-style:solid;border-radius:4px;background:#ffffffb3;border-color:#0000000f;color:#000000e4;transition:all .167s}:host::ng-deep *{color:#000000e4}@media (prefers-color-scheme: dark){:host{background:#ffffff0f;border-color:#ffffff12;color:#fff}:host::ng-deep *{color:#fff}}:host:hover:not(.checked):not(.flyout-open){background:#f9f9f980}@media (prefers-color-scheme: dark){:host:hover:not(.checked):not(.flyout-open){background:#ffffff15}}:host:active:not(.checked):not(.flyout-open){background:#f9f9f94d;color:#0000009e}:host:active:not(.checked):not(.flyout-open)::ng-deep *{color:#0000009e}@media (prefers-color-scheme: dark){:host:active:not(.checked):not(.flyout-open){background:#ffffff08;color:#ffffffc5}:host:active:not(.checked):not(.flyout-open)::ng-deep *{color:#ffffffc5}}:host:disabled:not(.checked){background:#f9f9f94d;color:#0000005c}:host:disabled:not(.checked)::ng-deep *{color:#0000005c}@media (prefers-color-scheme: dark){:host:disabled:not(.checked){background:#ffffff0b;color:#ffffff5d}:host:disabled:not(.checked)::ng-deep *{color:#ffffff5d}}:host.checked{background:#0067c0;border-color:#0067c0;color:#fff}:host.checked::ng-deep *{color:#fff}@media (prefers-color-scheme: dark){:host.checked{background:#4cc2ff;border-color:#4cc2ff;color:#000}:host.checked::ng-deep *{color:#000}}:host:hover.checked:not(.flyout-open){background:#0067c0e6;border-color:#0067c0e6;color:#fff}:host:hover.checked:not(.flyout-open)::ng-deep *{color:#fff}@media (prefers-color-scheme: dark){:host:hover.checked:not(.flyout-open){background:#4cc2ffe6;border-color:#4cc2ffe6;color:#000}:host:hover.checked:not(.flyout-open)::ng-deep *{color:#000}}:host:active.checked:not(.flyout-open){background:#0067c0cc;border-color:#fff0;color:#ffffffb3}:host:active.checked:not(.flyout-open)::ng-deep *{color:#ffffffb3}@media (prefers-color-scheme: dark){:host:active.checked:not(.flyout-open){background:#4cc2ffcc;border-color:#fff0;color:#00000080}:host:active.checked:not(.flyout-open)::ng-deep *{color:#00000080}}\n"] }]
+        }], propDecorators: { IsChecked: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.checked']
+            }], IsCheckedChange: [{
+                type: Output
+            }], onPointerUp: [{
+                type: HostListener,
+                args: ['pointerup', ['$event']]
+            }] } });
+
+class ToggleSwitch extends CheckBox {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleSwitch, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ToggleSwitch, isStandalone: true, selector: "ToggleSwitch", usesInheritance: true, ngImport: i0, template: `<label class="container">
+    <input type="checkbox" [checked]="IsChecked" (change)="onIsCheckedChange($event)" [disabled]="!IsEnabled">
+    <div class="slider">
+      <div class="thumb"></div>
+    </div>
+    <div class="content"><ng-content/></div>
+  </label>`, isInline: true, styles: [".container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input:not(:checked):not(:active):not(:disabled)+.slider:not(:hover){background-color:#00000006;border-color:#00000072}@media (prefers-color-scheme: dark){input:not(:checked):not(:active):not(:disabled)+.slider:not(:hover){background-color:#00000019;border-color:#ffffff8b}}input:not(:checked):not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:#0000009e}@media (prefers-color-scheme: dark){input:not(:checked):not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:#ffffffc5}}input:not(:checked):not(:active):not(:disabled)+.slider:hover{background-color:#0000000f;border-color:#00000072}@media (prefers-color-scheme: dark){input:not(:checked):not(:active):not(:disabled)+.slider:hover{background-color:#ffffff0b;border-color:#ffffff8b}}input:not(:checked):not(:active):not(:disabled)+.slider:hover>.thumb{background-color:#0000009e}@media (prefers-color-scheme: dark){input:not(:checked):not(:active):not(:disabled)+.slider:hover>.thumb{background-color:#ffffffc5}}input:not(:checked):active:not(:disabled)+.slider{background-color:#00000018;border-color:#00000072}@media (prefers-color-scheme: dark){input:not(:checked):active:not(:disabled)+.slider{background-color:#ffffff12;border-color:#ffffff8b}}input:not(:checked):active:not(:disabled)+.slider>.thumb{background-color:#0000009e}@media (prefers-color-scheme: dark){input:not(:checked):active:not(:disabled)+.slider>.thumb{background-color:#ffffffc5}}input:not(:checked):disabled+.slider{background-color:#fff0;border-color:#00000037}@media (prefers-color-scheme: dark){input:not(:checked):disabled+.slider{background-color:#fff0;border-color:#ffffff28}}input:not(:checked):disabled+.slider>.thumb{background-color:#0000005c}@media (prefers-color-scheme: dark){input:not(:checked):disabled+.slider>.thumb{background-color:#ffffff5d}}input:checked:not(:active):not(:disabled)+.slider:not(:hover){background-color:#0067c0;border-color:#0067c0}@media (prefers-color-scheme: dark){input:checked:not(:active):not(:disabled)+.slider:not(:hover){background-color:#4cc2ff;border-color:#4cc2ff}}input:checked:not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:#fff}@media (prefers-color-scheme: dark){input:checked:not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:#000}}input:checked:not(:active):not(:disabled)+.slider:hover{background-color:#0067c0e6;border-color:#0067c0e6}@media (prefers-color-scheme: dark){input:checked:not(:active):not(:disabled)+.slider:hover{background-color:#4cc2ffe6;border-color:#4cc2ffe6}}input:checked:not(:active):not(:disabled)+.slider:hover>.thumb{background-color:#fff}@media (prefers-color-scheme: dark){input:checked:not(:active):not(:disabled)+.slider:hover>.thumb{background-color:#000}}input:checked:active:not(:disabled)+.slider{background-color:#0067c0cc;border-color:#0067c0cc}@media (prefers-color-scheme: dark){input:checked:active:not(:disabled)+.slider{background-color:#4cc2ffcc;border-color:#4cc2ffcc}}input:checked:active:not(:disabled)+.slider>.thumb{background-color:#fff}@media (prefers-color-scheme: dark){input:checked:active:not(:disabled)+.slider>.thumb{background-color:#000}}input:checked:disabled+.slider{background-color:#ffffff37;border-color:#ffffff37}@media (prefers-color-scheme: dark){input:checked:disabled+.slider{background-color:#ffffff28;border-color:#ffffff28}}input:checked:disabled+.slider>.thumb{background-color:#fff}@media (prefers-color-scheme: dark){input:checked:disabled+.slider>.thumb{background-color:#ffffff87}}input:checked+.slider>.thumb{transform:translate(22px)}input:not(:disabled):active+.slider>.thumb{width:17px;height:14px;transform:translate(-1px)}input:not(:disabled):not(:active):hover+.slider>.thumb{width:14px;height:14px;transform:translate(-1px)}input:not(:disabled):not(:active):checked:hover+.slider>.thumb{transform:translate(21px)}input:not(:disabled):checked:active+.slider>.thumb{transform:translate(18px);width:17px;height:14px}.slider{display:grid;width:40px;height:18px;border-radius:10px;border-style:solid;border-width:1.5px;transition:background-color .25s;background-color:#00000006}@media (prefers-color-scheme: dark){.slider{background-color:#00000019}}.thumb{display:grid;width:12px;height:12px;border-radius:7px;align-self:center;margin:0 3px;transition:transform .25s;transition:width .167s;transition:margin-left .167s}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleSwitch, decorators: [{
+            type: Component,
+            args: [{ selector: 'ToggleSwitch', template: `<label class="container">
+    <input type="checkbox" [checked]="IsChecked" (change)="onIsCheckedChange($event)" [disabled]="!IsEnabled">
+    <div class="slider">
+      <div class="thumb"></div>
+    </div>
+    <div class="content"><ng-content/></div>
+  </label>`, styles: [".container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input:not(:checked):not(:active):not(:disabled)+.slider:not(:hover){background-color:#00000006;border-color:#00000072}@media (prefers-color-scheme: dark){input:not(:checked):not(:active):not(:disabled)+.slider:not(:hover){background-color:#00000019;border-color:#ffffff8b}}input:not(:checked):not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:#0000009e}@media (prefers-color-scheme: dark){input:not(:checked):not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:#ffffffc5}}input:not(:checked):not(:active):not(:disabled)+.slider:hover{background-color:#0000000f;border-color:#00000072}@media (prefers-color-scheme: dark){input:not(:checked):not(:active):not(:disabled)+.slider:hover{background-color:#ffffff0b;border-color:#ffffff8b}}input:not(:checked):not(:active):not(:disabled)+.slider:hover>.thumb{background-color:#0000009e}@media (prefers-color-scheme: dark){input:not(:checked):not(:active):not(:disabled)+.slider:hover>.thumb{background-color:#ffffffc5}}input:not(:checked):active:not(:disabled)+.slider{background-color:#00000018;border-color:#00000072}@media (prefers-color-scheme: dark){input:not(:checked):active:not(:disabled)+.slider{background-color:#ffffff12;border-color:#ffffff8b}}input:not(:checked):active:not(:disabled)+.slider>.thumb{background-color:#0000009e}@media (prefers-color-scheme: dark){input:not(:checked):active:not(:disabled)+.slider>.thumb{background-color:#ffffffc5}}input:not(:checked):disabled+.slider{background-color:#fff0;border-color:#00000037}@media (prefers-color-scheme: dark){input:not(:checked):disabled+.slider{background-color:#fff0;border-color:#ffffff28}}input:not(:checked):disabled+.slider>.thumb{background-color:#0000005c}@media (prefers-color-scheme: dark){input:not(:checked):disabled+.slider>.thumb{background-color:#ffffff5d}}input:checked:not(:active):not(:disabled)+.slider:not(:hover){background-color:#0067c0;border-color:#0067c0}@media (prefers-color-scheme: dark){input:checked:not(:active):not(:disabled)+.slider:not(:hover){background-color:#4cc2ff;border-color:#4cc2ff}}input:checked:not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:#fff}@media (prefers-color-scheme: dark){input:checked:not(:active):not(:disabled)+.slider:not(:hover)>.thumb{background-color:#000}}input:checked:not(:active):not(:disabled)+.slider:hover{background-color:#0067c0e6;border-color:#0067c0e6}@media (prefers-color-scheme: dark){input:checked:not(:active):not(:disabled)+.slider:hover{background-color:#4cc2ffe6;border-color:#4cc2ffe6}}input:checked:not(:active):not(:disabled)+.slider:hover>.thumb{background-color:#fff}@media (prefers-color-scheme: dark){input:checked:not(:active):not(:disabled)+.slider:hover>.thumb{background-color:#000}}input:checked:active:not(:disabled)+.slider{background-color:#0067c0cc;border-color:#0067c0cc}@media (prefers-color-scheme: dark){input:checked:active:not(:disabled)+.slider{background-color:#4cc2ffcc;border-color:#4cc2ffcc}}input:checked:active:not(:disabled)+.slider>.thumb{background-color:#fff}@media (prefers-color-scheme: dark){input:checked:active:not(:disabled)+.slider>.thumb{background-color:#000}}input:checked:disabled+.slider{background-color:#ffffff37;border-color:#ffffff37}@media (prefers-color-scheme: dark){input:checked:disabled+.slider{background-color:#ffffff28;border-color:#ffffff28}}input:checked:disabled+.slider>.thumb{background-color:#fff}@media (prefers-color-scheme: dark){input:checked:disabled+.slider>.thumb{background-color:#ffffff87}}input:checked+.slider>.thumb{transform:translate(22px)}input:not(:disabled):active+.slider>.thumb{width:17px;height:14px;transform:translate(-1px)}input:not(:disabled):not(:active):hover+.slider>.thumb{width:14px;height:14px;transform:translate(-1px)}input:not(:disabled):not(:active):checked:hover+.slider>.thumb{transform:translate(21px)}input:not(:disabled):checked:active+.slider>.thumb{transform:translate(18px);width:17px;height:14px}.slider{display:grid;width:40px;height:18px;border-radius:10px;border-style:solid;border-width:1.5px;transition:background-color .25s;background-color:#00000006}@media (prefers-color-scheme: dark){.slider{background-color:#00000019}}.thumb{display:grid;width:12px;height:12px;border-radius:7px;align-self:center;margin:0 3px;transition:transform .25s;transition:width .167s;transition:margin-left .167s}\n"] }]
+        }] });
+
+class ScrollViewer extends FrameworkElement {
+    constructor() {
+        super(...arguments);
+        this.HorizontalScrollMode = 'Enabled';
+        this.VerticalScrollMode = 'Enabled';
+    }
+    static toOverflow(value) {
+        switch (value) {
+            case 'Disabled':
+                return 'hidden';
+            case 'Enabled':
+                return 'scroll';
+            case 'Auto':
+                return 'auto';
+        }
+    }
+    get overflowX() {
+        return ScrollViewer.toOverflow(this.HorizontalScrollMode);
+    }
+    get overflowY() {
+        return ScrollViewer.toOverflow(this.VerticalScrollMode);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScrollViewer, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ScrollViewer, isStandalone: true, selector: "ScrollViewer", inputs: { HorizontalScrollMode: "HorizontalScrollMode", VerticalScrollMode: "VerticalScrollMode" }, host: { properties: { "style.overflow-x": "this.overflowX", "style.overflow-y": "this.overflowY" } }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScrollViewer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ScrollViewer', template: `<ng-content/>`, styles: [":host{display:grid}\n"] }]
+        }], propDecorators: { HorizontalScrollMode: [{
+                type: Input
+            }], VerticalScrollMode: [{
+                type: Input
+            }], overflowX: [{
+                type: HostBinding,
+                args: ['style.overflow-x']
+            }], overflowY: [{
+                type: HostBinding,
+                args: ['style.overflow-y']
+            }] } });
+
+class ToolTipProperty {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToolTipProperty, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: ToolTipProperty, isStandalone: false, selector: "[ToolTipService-ToolTip]", inputs: { ToolTip: ["ToolTipService-ToolTip", "ToolTip"] }, host: { properties: { "attr.title": "this.ToolTip" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToolTipProperty, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ToolTipService-ToolTip]',
+                    standalone: false
+                }]
+        }], propDecorators: { ToolTip: [{
+                type: Input,
+                args: ['ToolTipService-ToolTip']
+            }, {
+                type: HostBinding,
+                args: ['attr.title']
+            }] } });
+class ToolTipService {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToolTipService, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: ToolTipService, declarations: [ToolTipProperty], exports: [ToolTipProperty] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToolTipService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToolTipService, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ToolTipProperty],
+                    exports: [ToolTipProperty]
+                }]
+        }] });
+
+class XamlRoot {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: XamlRoot, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: XamlRoot, isStandalone: true, selector: "XamlRoot", ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;background-color:#f3f3f3}:host::ng-deep *{font-family:Segoe UI,Arial,sans-serif;font-size:10pt;color:#000}@media (prefers-color-scheme: dark){:host{background-color:#202020}:host::ng-deep *{color:#fff}}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: XamlRoot, decorators: [{
+            type: Component,
+            args: [{ selector: 'XamlRoot', template: `<ng-content/>`, styles: [":host{display:grid;background-color:#f3f3f3}:host::ng-deep *{font-family:Segoe UI,Arial,sans-serif;font-size:10pt;color:#000}@media (prefers-color-scheme: dark){:host{background-color:#202020}:host::ng-deep *{color:#fff}}\n"] }]
+        }] });
+
+/*
+ * Public API Surface of xaml-ui
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Border, Button, CheckBox, Flyout, FontIcon, FrameworkElement, ListBox, RadioButton, RadioButtonGroup, ScrollViewer, Slider, StackPanel, TextBlock, TextBox, ToggleButton, ToggleSwitch, ToolTipProperty, ToolTipService, XamlRoot };
+//# sourceMappingURL=xaml-ui.mjs.map