xaml-ui 1.0.11 → 1.0.13

package/fesm2022/xaml-ui.mjs

@@ -1921,6 +1921,157 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 args: ['xaml-dialog-presenter']
             }] } });
 
+class TextBlockComponent extends FrameworkElementComponent {
+    constructor() {
+        super(...arguments);
+        this.FontWeight = 'Normal';
+        this.TextAlignment = 'Left';
+        this.TextTrimming = 'None';
+        this.TextWrapping = 'NoWrap';
+    }
+    get width() {
+        if (this.Width !== undefined)
+            return this.Width;
+        return this.HorizontalAlignment === 'Stretch' || this.TextTrimming !== 'None' ? undefined : 'min-content';
+    }
+    get minWidth() {
+        if (this.MinWidth !== undefined)
+            return this.MinWidth;
+        return this.MaxWidth === undefined && this.HorizontalAlignment === 'Stretch' && this.TextTrimming === 'None' ? 'min-content' : undefined;
+    }
+    get fontWeight() {
+        return TextBlockComponent.ToFontWeight(this.FontWeight);
+    }
+    static ToFontWeight(value) {
+        switch (value) {
+            case 'Black':
+                return 900;
+            case 'Bold':
+                return 700;
+            case 'ExtraBlack':
+                return 950;
+            case 'ExtraBold':
+                return 800;
+            case 'ExtraLight':
+                return 200;
+            case 'Light':
+                return 300;
+            case 'Medium':
+                return 500;
+            case 'Normal':
+                return 400;
+            case 'SemiBold':
+                return 600;
+            case 'SemiLight':
+                return 350;
+            case 'Thin':
+                return 100;
+        }
+    }
+    get userSelect() {
+        return this.IsTextSelectionEnabled === 'True' ? 'text' : 'none';
+    }
+    get textDecorationLine() {
+        switch (this.TextDecorations) {
+            case 'None':
+                return 'none';
+            case 'Strikethrough':
+                return 'line-through';
+            case 'Underline':
+                return 'underline';
+            default:
+                return undefined;
+        }
+    }
+    get textOverflow() {
+        switch (this.TextTrimming) {
+            case 'None':
+            case 'Clip':
+                return 'clip';
+            case 'CharacterEllipsis':
+                return 'Ellipsis';
+            default:
+                return undefined;
+        }
+    }
+    get whiteSpace() {
+        switch (this.TextWrapping) {
+            case 'NoWrap':
+                return 'nowrap';
+            case 'Wrap':
+                return 'pre-line';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBlockComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TextBlockComponent, isStandalone: true, selector: "TextBlock", inputs: { FontFamily: "FontFamily", Text: "Text", FontSize: "FontSize", FontStyle: "FontStyle", FontWeight: "FontWeight", Foreground: "Foreground", TextAlignment: "TextAlignment", IsTextSelectionEnabled: "IsTextSelectionEnabled", TextDecorations: "TextDecorations", TextTrimming: "TextTrimming", TextWrapping: "TextWrapping" }, host: { properties: { "style.font-family": "this.FontFamily", "style.font-size": "this.FontSize", "style.font-style": "this.FontStyle", "style.color": "this.Foreground", "style.text-align": "this.TextAlignment", "style.font-weight": "this.fontWeight", "style.user-select": "this.userSelect", "style.text-decoration-line": "this.textDecorationLine", "style.text-overflow": "this.textOverflow", "style.white-space": "this.whiteSpace" } }, usesInheritance: true, ngImport: i0, template: `<ng-container>
+    <ng-content *ngIf="Text === undefined"/>
+    <ng-container *ngIf="Text !== undefined">{{Text}}</ng-container>
+  </ng-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBlockComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'TextBlock',
+                    imports: [CommonModule],
+                    template: `<ng-container>
+    <ng-content *ngIf="Text === undefined"/>
+    <ng-container *ngIf="Text !== undefined">{{Text}}</ng-container>
+  </ng-container>`
+                }]
+        }], propDecorators: { FontFamily: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.font-family']
+            }], Text: [{
+                type: Input
+            }], FontSize: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.font-size']
+            }], FontStyle: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.font-style']
+            }], FontWeight: [{
+                type: Input
+            }], Foreground: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.color']
+            }], TextAlignment: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.text-align']
+            }], IsTextSelectionEnabled: [{
+                type: Input
+            }], TextDecorations: [{
+                type: Input
+            }], TextTrimming: [{
+                type: Input
+            }], TextWrapping: [{
+                type: Input
+            }], fontWeight: [{
+                type: HostBinding,
+                args: ['style.font-weight']
+            }], userSelect: [{
+                type: HostBinding,
+                args: ['style.user-select']
+            }], textDecorationLine: [{
+                type: HostBinding,
+                args: ['style.text-decoration-line']
+            }], textOverflow: [{
+                type: HostBinding,
+                args: ['style.text-overflow']
+            }], whiteSpace: [{
+                type: HostBinding,
+                args: ['style.white-space']
+            }] } });
+
 var ContentDialogResult;
 (function (ContentDialogResult) {
     ContentDialogResult[ContentDialogResult["None"] = 0] = "None";
@@ -1981,7 +2132,7 @@ class ContentDialog extends Dialog {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ContentDialog, isStandalone: true, selector: "ContentDialog", inputs: { Title: "Title", PrimaryButtonText: "PrimaryButtonText", IsPrimaryButtonEnabled: "IsPrimaryButtonEnabled", SecondaryButtonText: "SecondaryButtonText", IsSecondaryButtonEnabled: "IsSecondaryButtonEnabled", CloseButtonText: "CloseButtonText", Content: "Content", DefaultButton: "DefaultButton" }, outputs: { PrimaryButtonClicked: "PrimaryButtonClicked", SecondaryButtonClicked: "SecondaryButtonClicked", CloseButtonClicked: "CloseButtonClicked" }, usesInheritance: true, ngImport: i0, template: `<ng-template #template>
     <DialogPresenter>
       <div Header>{{Title}}</div>
-      {{Content}}
+      <TextBlock TextWrapping="Wrap">{{Content}}</TextBlock>
       <ng-content/>
       <Grid RowDefinitions="auto" Orientation="Horizontal" ColumnSpacing="6px" AutoColumnDefinition="minmax(0, 1fr)" Footer>
         <Button *ngIf="PrimaryButtonText !== undefined" [IsEnabled]="IsPrimaryButtonEnabled" (Click)="onPrimaryButtonClicked()" [class.AccentButtonStyle]="isPrimaryButtonDefault">{{PrimaryButtonText}}</Button>
@@ -1989,14 +2140,14 @@ class ContentDialog extends Dialog {
         <Button *ngIf="CloseButtonText !== undefined" (Click)="onCloseButtonClicked()" [class.AccentButtonStyle]="isCloseButtonDefault">{{CloseButtonText}}</Button>
       </Grid>
     </DialogPresenter>
-  </ng-template>`, isInline: true, styles: [""], dependencies: [{ kind: "component", type: DialogPresenter, selector: "DialogPresenter", inputs: ["IsVisible"] }, { kind: "ngmodule", type: GridModule }, { kind: "component", type: GridComponent, selector: "Grid", inputs: ["ColumnDefinitions", "RowDefinitions", "AutoColumnDefinition", "AutoRowDefinition", "ColumnSpacing", "RowSpacing", "Orientation"] }, { kind: "component", type: ButtonComponent, selector: "Button", inputs: ["IsEnabled", "HorizontalContentAlignment", "VerticalContentAlignment"], outputs: ["Click"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+  </ng-template>`, isInline: true, styles: [""], dependencies: [{ kind: "component", type: DialogPresenter, selector: "DialogPresenter", inputs: ["IsVisible"] }, { kind: "ngmodule", type: GridModule }, { kind: "component", type: GridComponent, selector: "Grid", inputs: ["ColumnDefinitions", "RowDefinitions", "AutoColumnDefinition", "AutoRowDefinition", "ColumnSpacing", "RowSpacing", "Orientation"] }, { kind: "component", type: ButtonComponent, selector: "Button", inputs: ["IsEnabled", "HorizontalContentAlignment", "VerticalContentAlignment"], outputs: ["Click"] }, { 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: ContentDialog, decorators: [{
             type: Component,
             args: [{ selector: 'ContentDialog', template: `<ng-template #template>
     <DialogPresenter>
       <div Header>{{Title}}</div>
-      {{Content}}
+      <TextBlock TextWrapping="Wrap">{{Content}}</TextBlock>
       <ng-content/>
       <Grid RowDefinitions="auto" Orientation="Horizontal" ColumnSpacing="6px" AutoColumnDefinition="minmax(0, 1fr)" Footer>
         <Button *ngIf="PrimaryButtonText !== undefined" [IsEnabled]="IsPrimaryButtonEnabled" (Click)="onPrimaryButtonClicked()" [class.AccentButtonStyle]="isPrimaryButtonDefault">{{PrimaryButtonText}}</Button>
@@ -2004,7 +2155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
         <Button *ngIf="CloseButtonText !== undefined" (Click)="onCloseButtonClicked()" [class.AccentButtonStyle]="isCloseButtonDefault">{{CloseButtonText}}</Button>
       </Grid>
     </DialogPresenter>
-  </ng-template>`, imports: [DialogPresenter, GridModule, ButtonComponent, CommonModule] }]
+  </ng-template>`, imports: [DialogPresenter, GridModule, ButtonComponent, CommonModule, TextBlockComponent] }]
         }], propDecorators: { Title: [{
                 type: Input
             }], PrimaryButtonText: [{
@@ -2127,110 +2278,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 }]
         }], ctorParameters: () => [{ type: ItemContainerComponent }, { type: i0.ViewContainerRef }] });
 
-class TextBlockComponent extends FrameworkElementComponent {
+class FontIconComponent extends FrameworkElementComponent {
     constructor() {
         super(...arguments);
         this.FontWeight = 'Normal';
-        this.TextAlignment = 'Left';
-        this.TextTrimming = 'None';
-        this.TextWrapping = 'NoWrap';
-    }
-    get width() {
-        if (this.Width !== undefined)
-            return this.Width;
-        return this.HorizontalAlignment === 'Stretch' || this.TextTrimming !== 'None' ? undefined : 'min-content';
-    }
-    get minWidth() {
-        if (this.MinWidth !== undefined)
-            return this.MinWidth;
-        return this.MaxWidth === undefined && this.HorizontalAlignment === 'Stretch' && this.TextTrimming === 'None' ? 'min-content' : undefined;
     }
     get fontWeight() {
         return TextBlockComponent.ToFontWeight(this.FontWeight);
     }
-    static ToFontWeight(value) {
-        switch (value) {
-            case 'Black':
-                return 900;
-            case 'Bold':
-                return 700;
-            case 'ExtraBlack':
-                return 950;
-            case 'ExtraBold':
-                return 800;
-            case 'ExtraLight':
-                return 200;
-            case 'Light':
-                return 300;
-            case 'Medium':
-                return 500;
-            case 'Normal':
-                return 400;
-            case 'SemiBold':
-                return 600;
-            case 'SemiLight':
-                return 350;
-            case 'Thin':
-                return 100;
-        }
-    }
-    get userSelect() {
-        return this.IsTextSelectionEnabled === 'True' ? 'text' : 'none';
-    }
-    get textDecorationLine() {
-        switch (this.TextDecorations) {
-            case 'None':
-                return 'none';
-            case 'Strikethrough':
-                return 'line-through';
-            case 'Underline':
-                return 'underline';
-            default:
-                return undefined;
-        }
-    }
-    get textOverflow() {
-        switch (this.TextTrimming) {
-            case 'None':
-            case 'Clip':
-                return 'clip';
-            case 'CharacterEllipsis':
-                return 'Ellipsis';
-            default:
-                return undefined;
-        }
-    }
-    get whiteSpace() {
-        switch (this.TextWrapping) {
-            case 'NoWrap':
-                return 'nowrap';
-            case 'Wrap':
-                return 'normal';
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBlockComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TextBlockComponent, isStandalone: true, selector: "TextBlock", inputs: { FontFamily: "FontFamily", Text: "Text", FontSize: "FontSize", FontStyle: "FontStyle", FontWeight: "FontWeight", Foreground: "Foreground", TextAlignment: "TextAlignment", IsTextSelectionEnabled: "IsTextSelectionEnabled", TextDecorations: "TextDecorations", TextTrimming: "TextTrimming", TextWrapping: "TextWrapping" }, host: { properties: { "style.font-family": "this.FontFamily", "style.font-size": "this.FontSize", "style.font-style": "this.FontStyle", "style.color": "this.Foreground", "style.text-align": "this.TextAlignment", "style.font-weight": "this.fontWeight", "style.user-select": "this.userSelect", "style.text-decoration-line": "this.textDecorationLine", "style.text-overflow": "this.textOverflow", "style.white-space": "this.whiteSpace" } }, usesInheritance: true, ngImport: i0, template: `<ng-container>
-    <ng-content *ngIf="Text === undefined"/>
-    <ng-container *ngIf="Text !== undefined">{{Text}}</ng-container>
-  </ng-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    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{font-family:Segoe Fluent Icons,Segoe MDL2 Assets}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextBlockComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FontIconComponent, 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>`
-                }]
+            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']
-            }], Text: [{
-                type: Input
             }], FontSize: [{
                 type: Input
             }, {
@@ -2241,72 +2307,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }, {
                 type: HostBinding,
                 args: ['style.font-style']
-            }], FontWeight: [{
-                type: Input
             }], Foreground: [{
                 type: Input
             }, {
                 type: HostBinding,
                 args: ['style.color']
-            }], TextAlignment: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.text-align']
-            }], IsTextSelectionEnabled: [{
-                type: Input
-            }], TextDecorations: [{
-                type: Input
-            }], TextTrimming: [{
-                type: Input
-            }], TextWrapping: [{
-                type: Input
-            }], fontWeight: [{
-                type: HostBinding,
-                args: ['style.font-weight']
-            }], userSelect: [{
-                type: HostBinding,
-                args: ['style.user-select']
-            }], textDecorationLine: [{
-                type: HostBinding,
-                args: ['style.text-decoration-line']
-            }], textOverflow: [{
-                type: HostBinding,
-                args: ['style.text-overflow']
-            }], whiteSpace: [{
-                type: HostBinding,
-                args: ['style.white-space']
-            }] } });
-
-class FontIconComponent extends FrameworkElementComponent {
-    constructor() {
-        super(...arguments);
-        this.FontWeight = 'Normal';
-    }
-    get fontWeight() {
-        return TextBlockComponent.ToFontWeight(this.FontWeight);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FontIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FontIconComponent, isStandalone: true, selector: "FontIcon", inputs: { FontFamily: "FontFamily", FontSize: "FontSize", FontStyle: "FontStyle", FontWeight: "FontWeight", Glyph: "Glyph" }, host: { properties: { "style.font-family": "this.FontFamily", "style.font-size": "this.FontSize", "style.font-style": "this.FontStyle", "style.font-weight": "this.fontWeight" } }, usesInheritance: true, ngImport: i0, template: `{{Glyph}}`, isInline: true, styles: [":host{font-family:Segoe Fluent Icons,Segoe MDL2 Assets}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FontIconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'FontIcon', template: `{{Glyph}}`, styles: [":host{font-family:Segoe Fluent Icons,Segoe MDL2 Assets}\n"] }]
-        }], propDecorators: { FontFamily: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.font-family']
-            }], FontSize: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.font-size']
-            }], FontStyle: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.font-style']
             }], FontWeight: [{
                 type: Input
             }], Glyph: [{
@@ -2355,11 +2360,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}}</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(--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"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AppBarButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'AppBarButton', template: `<div class="icon">{{Icon}}</div><div class="text">{{Text}}</div><ng-content/>`, styles: [":host{position:relative}:host{display:flex;flex-direction:row;align-items:center;transition:background-color var(--ControlNormalAnimationDuration);border-radius:var(--ControlCornerRadius);gap:4px;padding:6px;background-color:var(--SubtleFillColorTransparent)}:host *{color:var(--TextFillColorPrimary)}:host:hover{background-color:var(--SubtleFillColorSecondary)}:host:hover *{color:var(--TextFillColorPrimary)}:host:active{background-color:var(--SubtleFillColorTertiary)}:host:active *{color:var(--TextFillColorSecondary)}:host.disabled{background-color:var(--SubtleFillColorDisabled)}:host.disabled *{color:var(--TextFillColorDisabled)}:host .icon{padding-top:2px;font-family:var(--SymbolFontFamily)}: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(--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"] }]
         }], propDecorators: { IsEnabled: [{
                 type: Input
             }], Text: [{
@@ -2402,18 +2407,20 @@ class MenuFlyoutItemComponent extends MenuFlyoutItemBase {
         return !this.IsEnabled;
     }
     onClick() {
+        if (!this.IsEnabled)
+            return;
         this.Click.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MenuFlyoutItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MenuFlyoutItemComponent, isStandalone: true, selector: "MenuFlyoutItem", inputs: { IsEnabled: "IsEnabled", Text: "Text", Icon: "Icon" }, outputs: { Click: "Click" }, host: { listeners: { "click": "onClick()" }, properties: { "class.disabled": "this.disabled" } }, usesInheritance: true, ngImport: i0, template: `<div class="icon">{{Icon}}</div>
+    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)}.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: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 }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MenuFlyoutItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'MenuFlyoutItem', imports: [CommonModule], template: `<div class="icon">{{Icon}}</div>
+            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)}.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: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"] }]
         }], propDecorators: { IsEnabled: [{
                 type: Input
             }], Text: [{
@@ -2430,6 +2437,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 args: ['click', []]
             }] } });
 
+class ToggleMenuFlyoutItemComponent extends MenuFlyoutItemBase {
+    constructor() {
+        super(...arguments);
+        this.IsEnabled = true;
+        this.Text = '';
+        this.IsChecked = false;
+        this.IsCheckedChange = new EventEmitter();
+    }
+    get disabled() {
+        return !this.IsEnabled;
+    }
+    onPointerUp(event) {
+        if (!this.IsEnabled)
+            return;
+        this.IsChecked = !this.IsChecked;
+        this.IsCheckedChange.emit(this.IsChecked);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: 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"] }); }
+}
+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"] }]
+        }], propDecorators: { IsEnabled: [{
+                type: Input
+            }], Text: [{
+                type: Input
+            }], IsChecked: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.checked']
+            }], IsCheckedChange: [{
+                type: Output
+            }], disabled: [{
+                type: HostBinding,
+                args: ['class.disabled']
+            }], onPointerUp: [{
+                type: HostListener,
+                args: ['pointerup', ['$event']]
+            }] } });
+
 class MenuFlyoutSeparator extends MenuFlyoutItemBase {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MenuFlyoutSeparator, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MenuFlyoutSeparator, isStandalone: true, selector: "MenuFlyoutSeparator", usesInheritance: true, ngImport: i0, template: `<div class="separator"></div>`, isInline: true, styles: [":host{position:relative}:host{display:table-row;position:relative}:host>.separator{position:absolute;display:block;inset:-.5px -2px;background-color:var(--DividerStrokeColorDefault)}\n"] }); }
@@ -2602,7 +2653,7 @@ class NumberBoxComponent extends FrameworkElementComponent {
       <RepeatButton Class="InlineButtonStyle" (Click)="onDecreaseClick()" [Delay]="500" [Interval]="50"  (pointerdown)="onButtonPress()" (pointerup)="onButtonPress()"><FontIcon Glyph="&#xE70D;"/></RepeatButton>
     </Flyout>
     <div class="unit" *ngIf="Unit !== undefined">{{Unit}}</div>    
-  </label>`, isInline: true, styles: [":host{position:relative}:host{display:grid;cursor:text;outline-style:none;border-style:solid;border-width:1px;border-radius:var(--ControlCornerRadius);padding:6px;background-color:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);border-bottom-color:var(--ControlStrongStrokeColorDefault)}:host:hover{background-color:var(--ControlFillColorSecondary)}:host:focus-within,:host:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}:host.disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault)}textarea{resize:none}input,textarea{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary)}input::placeholder,textarea::placeholder{color:var(--TextFillColorSecondary)}input:disabled,textarea:disabled{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor)}\n", "label{display:grid;position:relative;grid-template-columns:auto 1fr auto auto}.icon{align-self:center;font-family:var(--SymbolFontFamily);color:var(--TextFillColorSecondary);pointer-events:none}.unit{align-self:center;color:var(--TextFillColorSecondary);pointer-events:none}.InlineButtonStyle{padding:5px}input:focus+.popup,input:active+.popup{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RepeatButtonComponent, selector: "RepeatButton", inputs: ["Delay", "Interval"] }, { kind: "component", type: FontIconComponent, selector: "FontIcon", inputs: ["FontFamily", "FontSize", "FontStyle", "FontWeight", "Glyph"] }, { kind: "component", type: FlyoutComponent, selector: "Flyout" }] }); }
+  </label>`, isInline: true, styles: [":host{position:relative}:host{display:grid;cursor:text;outline-style:none;border-style:solid;border-width:1px;border-radius:var(--ControlCornerRadius);padding:6px;background-color:var(--ControlFillColorDefault);border-color:var(--ControlStrokeColorDefault);border-bottom-color:var(--ControlStrongStrokeColorDefault)}:host:hover{background-color:var(--ControlFillColorSecondary)}:host:focus-within,:host:active{background-color:var(--ControlFillColorInputActive);border-bottom-color:var(--AccentFillColorDefault)}:host.disabled{background-color:var(--ControlFillColorDisabled);border-bottom-color:var(--ControlStrokeColorDefault)}textarea{resize:none}input,textarea{background-color:transparent;border:0 none transparent;outline:0 none transparent;color:var(--TextFillColorPrimary)}input::placeholder,textarea::placeholder{color:var(--TextFillColorSecondary)}input:disabled,textarea:disabled{color:var(--TextFillColorDisabled)}::selection{background-color:var(--SystemAccentColor)}\n", "label{display:grid;position:relative;grid-template-columns:auto 1fr auto auto}.icon{align-self:center;font-family:var(--SymbolFontFamily);color:var(--TextFillColorSecondary);pointer-events:none}.unit{align-self:center;color:var(--TextFillColorSecondary);pointer-events:none}.InlineButtonStyle{padding:5px}input:focus+.popup,input:active+.popup{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RepeatButtonComponent, selector: "RepeatButton", inputs: ["Delay", "Interval"] }, { kind: "component", type: FontIconComponent, selector: "FontIcon", inputs: ["FontFamily", "FontSize", "FontStyle", "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,
@@ -2737,5 +2788,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AppBarButtonComponent, BorderComponent, ButtonComponent, CheckBoxComponent, ColorPickerComponent, ComboBoxComponent, CommandBarComponent, ContentDialog, ContentDialogButton, ContentDialogResult, ContextFlyoutDirective, Dialog, DialogPresenter, DropDownButtonComponent, FlyoutBaseComponent, FlyoutComponent, FlyoutDirective, FlyoutPresenter, FontIconComponent, FrameworkElementComponent, GridColumnDirective, GridColumnSpanDirective, GridComponent, GridDirective, GridModule, GridProperty, GridRowDirective, GridRowSpanDirective, ImageComponent, ItemFlyoutDirective, ListBoxComponent, ListViewComponent, MenuFlyoutComponent, MenuFlyoutItemBase, MenuFlyoutItemComponent, MenuFlyoutSeparator, NumberBoxComponent, PanelComponent, PopupTemplate, RadioButtonComponent, RadioButtonGroupComponent, RadioToggleButtonComponent, RepeatButtonComponent, ScrollBarComponent, ScrollViewerComponent, SelectorComponent, SelectorItemTemplate, SliderComponent, SplitButtonComponent, StackPanelComponent, TextBlockComponent, TextBoxComponent, ToggleButtonComponent, ToggleSwitchComponent, ToolTipDirective, ToolTipServiceModule, XamlRootComponent, colorToRgb, colorToString, resume_after, resume_on_event, rgbToHsl, stringToColor, toAlignment, toJustification };
+export { AppBarButtonComponent, BorderComponent, ButtonComponent, CheckBoxComponent, ColorPickerComponent, ComboBoxComponent, CommandBarComponent, ContentDialog, ContentDialogButton, ContentDialogResult, ContextFlyoutDirective, Dialog, DialogPresenter, DropDownButtonComponent, FlyoutBaseComponent, FlyoutComponent, FlyoutDirective, FlyoutPresenter, FontIconComponent, FrameworkElementComponent, GridColumnDirective, GridColumnSpanDirective, GridComponent, GridDirective, GridModule, GridProperty, GridRowDirective, GridRowSpanDirective, ImageComponent, ItemFlyoutDirective, ListBoxComponent, ListViewComponent, MenuFlyoutComponent, MenuFlyoutItemBase, MenuFlyoutItemComponent, MenuFlyoutSeparator, NumberBoxComponent, PanelComponent, PopupTemplate, RadioButtonComponent, RadioButtonGroupComponent, RadioToggleButtonComponent, RepeatButtonComponent, ScrollBarComponent, ScrollViewerComponent, SelectorComponent, SelectorItemTemplate, SliderComponent, SplitButtonComponent, StackPanelComponent, TextBlockComponent, TextBoxComponent, ToggleButtonComponent, ToggleMenuFlyoutItemComponent, ToggleSwitchComponent, ToolTipDirective, ToolTipServiceModule, XamlRootComponent, colorToRgb, colorToString, resume_after, resume_on_event, rgbToHsl, stringToColor, toAlignment, toJustification };
 //# sourceMappingURL=xaml-ui.mjs.map