xaml-ui 1.0.9 → 1.0.11

package/fesm2022/xaml-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Input, Component, EventEmitter, HostListener, ContentChild, Output, ViewChild, TemplateRef, Optional, Directive, NgModule, ViewContainerRef } from '@angular/core';
+import { HostBinding, Input, Component, EventEmitter, HostListener, ContentChild, Output, ViewChild, TemplateRef, Optional, Directive, NgModule, ViewContainerRef, Renderer2 } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { CdkScrollable } from '@angular/cdk/scrolling';
@@ -425,8 +425,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }] } });
 
 const SelectorItemTemplate = `<ng-container *ngIf="ItemTemplate">
-    <ng-container *ngTemplateOutlet="ItemTemplate; context: { $implicit: item }"/>
-  </ng-container>
+    <ng-container [ngTemplateOutlet]="ItemTemplate" [ngTemplateOutletContext]="{ $implicit: item }" [ngTemplateOutletInjector]="container.Injector" />
+    </ng-container>
   <ng-container *ngIf="!ItemTemplate">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container>`;
 class SelectorComponent extends FrameworkElementComponent {
     get alignContent() {
@@ -874,9 +874,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 args: ['style.grid-auto-columns']
             }] } });
 
+class ItemContainerComponent {
+    constructor(Element, Injector) {
+        this.Element = Element;
+        this.Injector = Injector;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ItemContainerComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ItemContainerComponent, isStandalone: true, selector: "ItemContainer", ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;position:relative}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ItemContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ItemContainer', template: `<ng-content/>`, styles: [":host{display:grid;position:relative}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Injector }] });
+
 class ListViewComponent extends SelectorComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ListViewComponent, isStandalone: true, selector: "ListView", usesInheritance: true, ngImport: i0, template: "<ScrollViewer>\n    <StackPanel Padding=\"2px 0\">\n      <div *ngFor=\"let item of ItemSource; index as index; trackBy: getValue\" class=\"item\" [ngClass]=\"{'selected': index == SelectedIndex}\" (click)=\"onItemClick($event, index, item)\" [id]=\"'xaml-selector-'+_id+'-item-'+index\" @itemFading>\n        <div class=\"item-selector\"></div>\n        <div class=\"item-content\" [ngStyle]=\"{'align-content': alignContent, 'justify-content': justifyContent}\"><ng-container *ngIf=\"ItemTemplate\">\n    <ng-container *ngTemplateOutlet=\"ItemTemplate; context: { $implicit: item }\"/>\n  </ng-container>\n  <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container></div>\n      </div>\n    </StackPanel>\n  </ScrollViewer>", isInline: true, styles: [":host{position:relative}:host{display:grid}:host .item{display:grid;margin:2px 4px;border-radius:4px}:host .item>.item-selector,:host .item>.item-content{display:grid;grid-row-start:1;grid-column-start:1;justify-self:stretch}:host .item>.item-selector{justify-self:left;align-self:center;width:4px;height:12px;border-radius:2px;transition:height var(--ControlNormalAnimationDuration)}:host .item>.item-content{padding:8px 12px}:host .item.selected>.item-selector{height:18px}:host:not(.disabled) .item:not(:hover):not(:active):not(.selected){background-color:transparent;color:var(--TextFillColorPrimary)}:host:not(.disabled) .item:hover:not(.active):not(.selected){background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:active:not(.selected){background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:not(:hover):not(:active).selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:hover:not(:active).selected{background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:active.selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item.selected>.item-selector{background-color:var(--AccentFillColorDefault)}:host.disabled .item>.item-content{color:var(--TextFillColorDisabled)}:host.disabled .item:not(.selected){background-color:transparent}:host.disabled .item.selected{background-color:var(--SubtleFillColorSecondary)}:host.disabled .item.selected>.item-selector{background-color:var(--AccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ScrollViewerComponent, selector: "ScrollViewer", inputs: ["HorizontalScrollMode", "VerticalScrollMode"] }, { kind: "component", type: StackPanelComponent, selector: "StackPanel", inputs: ["Orientation", "Spacing"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ListViewComponent, isStandalone: true, selector: "ListView", usesInheritance: true, ngImport: i0, template: "<ScrollViewer>\n    <StackPanel Padding=\"2px 0\">\n      <ItemContainer #container *ngFor=\"let item of ItemSource; index as index; trackBy: getValue\" class=\"item\" [ngClass]=\"{'selected': index == SelectedIndex}\" (click)=\"onItemClick($event, index, item)\" [id]=\"'xaml-selector-'+_id+'-item-'+index\" @itemFading>\n        <div class=\"item-selector\"></div>\n        <div class=\"item-content\" [ngStyle]=\"{'align-content': alignContent, 'justify-content': justifyContent}\"><ng-container *ngIf=\"ItemTemplate\">\n    <ng-container [ngTemplateOutlet]=\"ItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutletInjector]=\"container.Injector\" />\n    </ng-container>\n  <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container></div>\n      </ItemContainer>\n    </StackPanel>\n  </ScrollViewer>", isInline: true, styles: [":host{position:relative}:host{display:grid}:host .item{display:grid;margin:2px 4px;border-radius:4px}:host .item>.item-selector,:host .item>.item-content{display:grid;grid-row-start:1;grid-column-start:1;justify-self:stretch}:host .item>.item-selector{justify-self:left;align-self:center;width:4px;height:12px;border-radius:2px;transition:height var(--ControlNormalAnimationDuration)}:host .item>.item-content{padding:8px 12px}:host .item.selected>.item-selector{height:18px}:host:not(.disabled) .item:not(:hover):not(:active):not(.selected){background-color:transparent;color:var(--TextFillColorPrimary)}:host:not(.disabled) .item:hover:not(.active):not(.selected){background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:active:not(.selected){background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:not(:hover):not(:active).selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:hover:not(:active).selected{background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:active.selected{background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item.selected>.item-selector{background-color:var(--AccentFillColorDefault)}:host.disabled .item>.item-content{color:var(--TextFillColorDisabled)}:host.disabled .item:not(.selected){background-color:transparent}:host.disabled .item.selected{background-color:var(--SubtleFillColorSecondary)}:host.disabled .item.selected>.item-selector{background-color:var(--AccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ScrollViewerComponent, selector: "ScrollViewer", inputs: ["HorizontalScrollMode", "VerticalScrollMode"] }, { kind: "component", type: StackPanelComponent, selector: "StackPanel", inputs: ["Orientation", "Spacing"] }, { kind: "component", type: ItemContainerComponent, selector: "ItemContainer" }], animations: [
             trigger('itemFading', [
                 transition(':enter', [animate('500ms ease-in', keyframes([
                         style({ opacity: 0, height: 0 }),
@@ -893,12 +906,12 @@ class ListViewComponent extends SelectorComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ListView', imports: [CommonModule, ScrollViewerComponent, StackPanelComponent], template: `<ScrollViewer>
+            args: [{ selector: 'ListView', imports: [CommonModule, ScrollViewerComponent, StackPanelComponent, ItemContainerComponent], template: `<ScrollViewer>
     <StackPanel Padding="2px 0">
-      <div *ngFor="let item of ItemSource; index as index; trackBy: getValue" class="item" [ngClass]="{'selected': index == SelectedIndex}" (click)="onItemClick($event, index, item)" [id]="'xaml-selector-'+_id+'-item-'+index" @itemFading>
+      <ItemContainer #container *ngFor="let item of ItemSource; index as index; trackBy: getValue" class="item" [ngClass]="{'selected': index == SelectedIndex}" (click)="onItemClick($event, index, item)" [id]="'xaml-selector-'+_id+'-item-'+index" @itemFading>
         <div class="item-selector"></div>
         <div class="item-content" [ngStyle]="{'align-content': alignContent, 'justify-content': justifyContent}">${SelectorItemTemplate}</div>
-      </div>
+      </ItemContainer>
     </StackPanel>
   </ScrollViewer>`, animations: [
                         trigger('itemFading', [
@@ -1003,7 +1016,8 @@ class FlyoutBaseComponent {
         //Create overlay
         let config = new OverlayConfig({
             hasBackdrop: this.HasBackdrop,
-            scrollStrategy: this._overlay.scrollStrategies.reposition()
+            scrollStrategy: this._overlay.scrollStrategies.reposition(),
+            backdropClass: 'xaml-flyout-overlay-backdrop'
         });
         this._overlayRef = this._overlay.create(config);
         this.OnOverlay(this._overlayRef);
@@ -1236,12 +1250,12 @@ class ComboBoxComponent extends SelectorComponent {
             this._popup.IsOpen = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ComboBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ComboBoxComponent, isStandalone: true, selector: "ComboBox", viewQueries: [{ propertyName: "_selector", first: true, predicate: ListViewComponent, descendants: true }, { propertyName: "_popup", first: true, predicate: ["xaml-flyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<DropDownButton [HorizontalContentAlignment]=\"HorizontalContentAlignment\" [VerticalContentAlignment]=\"VerticalContentAlignment\" [IsEnabled]=\"IsEnabled\">\n    <ng-container *ngIf=\"ItemTemplate\">\n    <ng-container *ngTemplateOutlet=\"ItemTemplate; context: { $implicit: item }\"/>\n  </ng-container>\n  <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container>\n    <Flyout Placement=\"Cover\" Padding=\"0\" [Target]=\"target\" (IsOpenChange)=\"onIsOpenChanged($event)\">\n      <ListView [ItemSource]=\"ItemSource\" [(SelectedIndex)]=\"SelectedIndex\"  [HorizontalContentAlignment]=\"HorizontalContentAlignment\" [VerticalContentAlignment]=\"VerticalContentAlignment\"/>\n    </Flyout>\n  </DropDownButton>", isInline: true, styles: [":host ::ng-deep .popup>.popup-container{left:0;right:0;top:0}:host ::ng-deep .popup>.popup-container>.popup-content{padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropDownButtonComponent, selector: "DropDownButton" }, { kind: "component", type: FlyoutComponent, selector: "Flyout" }, { kind: "component", type: ListViewComponent, selector: "ListView" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ComboBoxComponent, isStandalone: true, selector: "ComboBox", viewQueries: [{ propertyName: "_selector", first: true, predicate: ListViewComponent, descendants: true }, { propertyName: "_popup", first: true, predicate: ["xaml-flyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<DropDownButton [HorizontalContentAlignment]=\"HorizontalContentAlignment\" [VerticalContentAlignment]=\"VerticalContentAlignment\" [IsEnabled]=\"IsEnabled\">\n    <ItemContainer #container><ng-container *ngIf=\"ItemTemplate\">\n    <ng-container [ngTemplateOutlet]=\"ItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutletInjector]=\"container.Injector\" />\n    </ng-container>\n  <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container></ItemContainer>\n    <Flyout Placement=\"Cover\" Padding=\"0\" [Target]=\"target\" (IsOpenChange)=\"onIsOpenChanged($event)\">\n      <ListView [ItemSource]=\"ItemSource\" [(SelectedIndex)]=\"SelectedIndex\"  [HorizontalContentAlignment]=\"HorizontalContentAlignment\" [VerticalContentAlignment]=\"VerticalContentAlignment\"/>\n    </Flyout>\n  </DropDownButton>", isInline: true, styles: [":host ::ng-deep .popup>.popup-container{left:0;right:0;top:0}:host ::ng-deep .popup>.popup-container>.popup-content{padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropDownButtonComponent, selector: "DropDownButton" }, { kind: "component", type: FlyoutComponent, selector: "Flyout" }, { kind: "component", type: ListViewComponent, selector: "ListView" }, { kind: "component", type: ItemContainerComponent, selector: "ItemContainer" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ComboBox', imports: [CommonModule, DropDownButtonComponent, FlyoutComponent, ListViewComponent], template: `<DropDownButton [HorizontalContentAlignment]="HorizontalContentAlignment" [VerticalContentAlignment]="VerticalContentAlignment" [IsEnabled]="IsEnabled">
-    ${SelectorItemTemplate}
+            args: [{ selector: 'ComboBox', imports: [CommonModule, DropDownButtonComponent, FlyoutComponent, ListViewComponent, ItemContainerComponent], template: `<DropDownButton [HorizontalContentAlignment]="HorizontalContentAlignment" [VerticalContentAlignment]="VerticalContentAlignment" [IsEnabled]="IsEnabled">
+    <ItemContainer #container>${SelectorItemTemplate}</ItemContainer>
     <Flyout Placement="Cover" Padding="0" [Target]="target" (IsOpenChange)="onIsOpenChanged($event)">
       <ListView [ItemSource]="ItemSource" [(SelectedIndex)]="SelectedIndex"  [HorizontalContentAlignment]="HorizontalContentAlignment" [VerticalContentAlignment]="VerticalContentAlignment"/>
     </Flyout>
@@ -1485,7 +1499,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
 class GridComponent extends PanelComponent {
     constructor() {
         super(...arguments);
-        this.Orientation = 'Horizontal';
+        this.Orientation = 'Vertical';
     }
     get gridAutoFlow() {
         return this.Orientation === 'Horizontal' ? 'column' : 'row';
@@ -1772,13 +1786,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
 
 class ListBoxComponent extends SelectorComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ListBoxComponent, isStandalone: true, selector: "ListBox", usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let item of ItemSource; index as index; trackBy: getValue\" class=\"item\" [ngClass]=\"{'selected': index == SelectedIndex}\" (click)=\"onItemClick($event, index, item)\" [id]=\"'xaml-selector-'+_id+'-item-'+index\" [ngStyle]=\"{'align-content': alignContent, 'justify-content': justifyContent}\">\n    <ng-container *ngIf=\"ItemTemplate\">\n    <ng-container *ngTemplateOutlet=\"ItemTemplate; context: { $implicit: item }\"/>\n  </ng-container>\n  <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container>\n  </div>", isInline: true, styles: [":host{position:relative}:host{display:flex;flex-direction:column;background-color:var(--SystemChromeMediumLowColor)}:host .item{display:grid;padding:12px;margin:0}:host:not(.disabled) .item:not(:hover):not(:active):not(.selected){color:var(--TextFillColorPrimary)}:host:not(.disabled) .item:hover:not(.active):not(.selected){background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:active:not(.selected){background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:not(:hover):not(:active).selected{background-color:var(--SystemControlHighlightListAccentLow)}:host:not(.disabled) .item:hover:not(:active).selected{background-color:var(--SystemControlHighlightListAccentMedium)}:host:not(.disabled) .item:active.selected{background-color:var(--SystemControlHighlightListAccentHigh)}:host.disabled .item:not(.selected){color:var(--TextFillColorDisabled)}:host.disabled .item.selected{background-color:var(--SubtleFillColorSecondary);color:var(--AccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ListBoxComponent, isStandalone: true, selector: "ListBox", usesInheritance: true, ngImport: i0, template: "<ItemContainer #container *ngFor=\"let item of ItemSource; index as index; trackBy: getValue\" class=\"item\" [ngClass]=\"{'selected': index == SelectedIndex}\" (click)=\"onItemClick($event, index, item)\" [id]=\"'xaml-selector-'+_id+'-item-'+index\" [ngStyle]=\"{'align-content': alignContent, 'justify-content': justifyContent}\">\n    <ng-container *ngIf=\"ItemTemplate\">\n    <ng-container [ngTemplateOutlet]=\"ItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutletInjector]=\"container.Injector\" />\n    </ng-container>\n  <ng-container *ngIf=\"!ItemTemplate\">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container>\n</ItemContainer>", isInline: true, styles: [":host{position:relative}:host{display:flex;flex-direction:column;background-color:var(--SystemChromeMediumLowColor)}:host .item{display:grid;padding:12px;margin:0}:host:not(.disabled) .item:not(:hover):not(:active):not(.selected){color:var(--TextFillColorPrimary)}:host:not(.disabled) .item:hover:not(.active):not(.selected){background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:active:not(.selected){background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:not(:hover):not(:active).selected{background-color:var(--SystemControlHighlightListAccentLow)}:host:not(.disabled) .item:hover:not(:active).selected{background-color:var(--SystemControlHighlightListAccentMedium)}:host:not(.disabled) .item:active.selected{background-color:var(--SystemControlHighlightListAccentHigh)}:host.disabled .item:not(.selected){color:var(--TextFillColorDisabled)}:host.disabled .item.selected{background-color:var(--SubtleFillColorSecondary);color:var(--AccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ItemContainerComponent, selector: "ItemContainer" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ListBox', imports: [CommonModule], template: `<div *ngFor="let item of ItemSource; index as index; trackBy: getValue" class="item" [ngClass]="{'selected': index == SelectedIndex}" (click)="onItemClick($event, index, item)" [id]="'xaml-selector-'+_id+'-item-'+index" [ngStyle]="{'align-content': alignContent, 'justify-content': justifyContent}">
+            args: [{ selector: 'ListBox', imports: [CommonModule, ItemContainerComponent], template: `<ItemContainer #container *ngFor="let item of ItemSource; index as index; trackBy: getValue" class="item" [ngClass]="{'selected': index == SelectedIndex}" (click)="onItemClick($event, index, item)" [id]="'xaml-selector-'+_id+'-item-'+index" [ngStyle]="{'align-content': alignContent, 'justify-content': justifyContent}">
     ${SelectorItemTemplate}
-  </div>`, styles: [":host{position:relative}:host{display:flex;flex-direction:column;background-color:var(--SystemChromeMediumLowColor)}:host .item{display:grid;padding:12px;margin:0}:host:not(.disabled) .item:not(:hover):not(:active):not(.selected){color:var(--TextFillColorPrimary)}:host:not(.disabled) .item:hover:not(.active):not(.selected){background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:active:not(.selected){background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:not(:hover):not(:active).selected{background-color:var(--SystemControlHighlightListAccentLow)}:host:not(.disabled) .item:hover:not(:active).selected{background-color:var(--SystemControlHighlightListAccentMedium)}:host:not(.disabled) .item:active.selected{background-color:var(--SystemControlHighlightListAccentHigh)}:host.disabled .item:not(.selected){color:var(--TextFillColorDisabled)}:host.disabled .item.selected{background-color:var(--SubtleFillColorSecondary);color:var(--AccentFillColorDisabled)}\n"] }]
+</ItemContainer>`, styles: [":host{position:relative}:host{display:flex;flex-direction:column;background-color:var(--SystemChromeMediumLowColor)}:host .item{display:grid;padding:12px;margin:0}:host:not(.disabled) .item:not(:hover):not(:active):not(.selected){color:var(--TextFillColorPrimary)}:host:not(.disabled) .item:hover:not(.active):not(.selected){background-color:var(--SubtleFillColorSecondary)}:host:not(.disabled) .item:active:not(.selected){background-color:var(--SubtleFillColorTertiary)}:host:not(.disabled) .item:not(:hover):not(:active).selected{background-color:var(--SystemControlHighlightListAccentLow)}:host:not(.disabled) .item:hover:not(:active).selected{background-color:var(--SystemControlHighlightListAccentMedium)}:host:not(.disabled) .item:active.selected{background-color:var(--SystemControlHighlightListAccentHigh)}:host.disabled .item:not(.selected){color:var(--TextFillColorDisabled)}:host.disabled .item.selected{background-color:var(--SubtleFillColorSecondary);color:var(--AccentFillColorDisabled)}\n"] }]
         }] });
 
 class XamlRootComponent {
@@ -1797,6 +1811,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }] } });
 
 class DialogPresenter extends XamlRootComponent {
+    constructor() {
+        super(...arguments);
+        this.IsVisible = false;
+    }
+    static { this.TransitionDuration = 250; }
+    get visible() {
+        return this.IsVisible;
+    }
     get isHeaderVisible() {
         return this._header?.nativeElement.children.length ?? 0 > 0;
     }
@@ -1804,26 +1826,32 @@ class DialogPresenter extends XamlRootComponent {
         return this._footer?.nativeElement.children.length ?? 0 > 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DialogPresenter, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: DialogPresenter, isStandalone: true, selector: "DialogPresenter", viewQueries: [{ propertyName: "_header", first: true, predicate: ["header"], descendants: true }, { propertyName: "_footer", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<div #header class="header" [ngStyle]="{'display': isHeaderVisible ? 'grid' : 'none'}"><ng-content select="[Header]"/></div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: DialogPresenter, isStandalone: true, selector: "DialogPresenter", inputs: { IsVisible: "IsVisible" }, host: { properties: { "class.visible": "this.visible" } }, providers: [{ provide: 'xaml-dialog-presenter', useExisting: DialogPresenter }], viewQueries: [{ propertyName: "_header", first: true, predicate: ["header"], descendants: true }, { propertyName: "_footer", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<div #header class="header" [ngStyle]="{'display': isHeaderVisible ? 'grid' : 'none'}"><ng-content select="[Header]"/></div>
   <div class="body"><ng-content/></div>
-  <div #footer class="footer" [ngStyle]="{'display': isFooterVisible ? 'grid' : 'none'}"><ng-content select="[Footer]"/></div>`, isInline: true, styles: [":host{display:grid;overflow:hidden;-webkit-user-select:none;user-select:none;background-color:#f3f3f3;touch-action:none}:host::ng-deep *{-webkit-user-select:none;user-select:none;touch-action:none}@media (prefers-color-scheme: dark){:host{background-color:#202020}}\n", ":host{border-radius:var(--OverlayCornerRadius);border-color:var(--SurfaceStrokeColorDefault);border-style:solid;border-width:1px;box-shadow:0 0 15px #00000080}.header{font-size:20pt;padding:24px 24px 0}.body,.footer{padding:24px}.header,.body{background:var(--LayerFillColorAlt)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+  <div #footer class="footer" [ngStyle]="{'display': isFooterVisible ? 'grid' : 'none'}"><ng-content select="[Footer]"/></div>`, isInline: true, styles: [":host{display:grid;overflow:hidden;-webkit-user-select:none;user-select:none;background-color:#f3f3f3;touch-action:none}:host::ng-deep *{-webkit-user-select:none;user-select:none;touch-action:none}@media (prefers-color-scheme: dark){:host{background-color:#202020}}\n", ":host{border-radius:var(--OverlayCornerRadius);border-color:var(--SurfaceStrokeColorDefault);border-style:solid;border-width:1px;box-shadow:0 0 15px #00000080;opacity:0;transform:scale(1.1);transition:transform var(--ControlNormalAnimationDuration),opacity var(--ControlNormalAnimationDuration)}:host.visible{opacity:1;transform:scale(1)}.header{font-size:20pt;padding:24px 24px 0}.body,.footer{padding:24px}.header,.body{background:var(--LayerFillColorAlt)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DialogPresenter, decorators: [{
             type: Component,
             args: [{ selector: 'DialogPresenter', template: `<div #header class="header" [ngStyle]="{'display': isHeaderVisible ? 'grid' : 'none'}"><ng-content select="[Header]"/></div>
   <div class="body"><ng-content/></div>
-  <div #footer class="footer" [ngStyle]="{'display': isFooterVisible ? 'grid' : 'none'}"><ng-content select="[Footer]"/></div>`, imports: [CommonModule], styles: [":host{display:grid;overflow:hidden;-webkit-user-select:none;user-select:none;background-color:#f3f3f3;touch-action:none}:host::ng-deep *{-webkit-user-select:none;user-select:none;touch-action:none}@media (prefers-color-scheme: dark){:host{background-color:#202020}}\n", ":host{border-radius:var(--OverlayCornerRadius);border-color:var(--SurfaceStrokeColorDefault);border-style:solid;border-width:1px;box-shadow:0 0 15px #00000080}.header{font-size:20pt;padding:24px 24px 0}.body,.footer{padding:24px}.header,.body{background:var(--LayerFillColorAlt)}\n"] }]
+  <div #footer class="footer" [ngStyle]="{'display': isFooterVisible ? 'grid' : 'none'}"><ng-content select="[Footer]"/></div>`, imports: [CommonModule], providers: [{ provide: 'xaml-dialog-presenter', useExisting: DialogPresenter }], styles: [":host{display:grid;overflow:hidden;-webkit-user-select:none;user-select:none;background-color:#f3f3f3;touch-action:none}:host::ng-deep *{-webkit-user-select:none;user-select:none;touch-action:none}@media (prefers-color-scheme: dark){:host{background-color:#202020}}\n", ":host{border-radius:var(--OverlayCornerRadius);border-color:var(--SurfaceStrokeColorDefault);border-style:solid;border-width:1px;box-shadow:0 0 15px #00000080;opacity:0;transform:scale(1.1);transition:transform var(--ControlNormalAnimationDuration),opacity var(--ControlNormalAnimationDuration)}:host.visible{opacity:1;transform:scale(1)}.header{font-size:20pt;padding:24px 24px 0}.body,.footer{padding:24px}.header,.body{background:var(--LayerFillColorAlt)}\n"] }]
         }], propDecorators: { _header: [{
                 type: ViewChild,
                 args: ['header']
             }], _footer: [{
                 type: ViewChild,
                 args: ['footer']
+            }], IsVisible: [{
+                type: Input
+            }], visible: [{
+                type: HostBinding,
+                args: ['class.visible']
             }] } });
 
 class Dialog {
     constructor() {
         this.Closed = new EventEmitter();
+        this.IsBackdropDismissEnabled = false;
     }
     static Create(type, container) {
         let component = container.createComponent(type);
@@ -1843,21 +1871,40 @@ class Dialog {
             .centerVertically();
         let config = new OverlayConfig({
             hasBackdrop: true,
-            positionStrategy: positionStrategy
+            positionStrategy: positionStrategy,
+            backdropClass: 'xaml-dialog-overlay-backdrop'
         });
         let overlayRef = this._overlay.create(config);
         //Attach template
         let templatePortal = new TemplatePortal(this._template, this._viewContainerRef);
         overlayRef.attach(templatePortal);
+        //Wait for UI to instantiate
+        await resume_after(0);
+        //Disable backdrop menu
+        let renderer = this._viewContainerRef.injector.get(Renderer2);
+        let backdropContextMenuSubscription = renderer.listen(overlayRef.backdropElement, 'contextmenu', p => p.preventDefault());
+        //Backdrop dismiss
+        if (this.IsBackdropDismissEnabled)
+            overlayRef.backdropClick().subscribe(() => this.Hide());
+        //Fade-in
+        if (this._dialogPresenter)
+            this._dialogPresenter.IsVisible = true;
         //Wait for close
         await resume_on_event(this.Closed);
+        //Fade-out
+        if (this._dialogPresenter) {
+            this._dialogPresenter.IsVisible = false;
+            await resume_after(DialogPresenter.TransitionDuration);
+        }
+        //Cleanup
+        backdropContextMenuSubscription();
         overlayRef.detach();
     }
     Hide() {
         this.Closed.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Dialog, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: Dialog, isStandalone: true, selector: "ng-component", outputs: { Closed: "Closed" }, viewQueries: [{ propertyName: "_template", first: true, predicate: ["template"], descendants: true }], ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: Dialog, isStandalone: true, selector: "ng-component", outputs: { Closed: "Closed" }, viewQueries: [{ propertyName: "_template", first: true, predicate: ["template"], descendants: true }, { propertyName: "_dialogPresenter", first: true, predicate: ["xaml-dialog-presenter"], descendants: true }], ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Dialog, decorators: [{
             type: Component,
@@ -1869,6 +1916,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }], _template: [{
                 type: ViewChild,
                 args: ['template']
+            }], _dialogPresenter: [{
+                type: ViewChild,
+                args: ['xaml-dialog-presenter']
             }] } });
 
 var ContentDialogResult;
@@ -1939,7 +1989,7 @@ 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" }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ContentDialog, decorators: [{
             type: Component,
@@ -2005,20 +2055,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             args: [{ selector: 'MenuFlyout', imports: [CommonModule, FlyoutPresenter], template: PopupTemplate, providers: [{ provide: 'xaml-flyout', useExisting: MenuFlyoutComponent }], styles: [".popup-container{left:0;right:0;top:0}.popup-container>.popup-content{padding:2px}.popup-container>.popup-content>.menu-container{margin:-3px 0;display:table;border-spacing:0 3px}FlyoutPresenter{padding:0 2px;display:table;border-spacing:0 3px}\n"] }]
         }] });
 
-class ContextFlyoutDirective {
-    constructor(_hostComponent, _viewContainer) {
-        this._hostComponent = _hostComponent;
+class FlyoutDirective {
+    constructor(_viewContainer) {
         this._viewContainer = _viewContainer;
     }
     ngAfterViewInit() {
-        this._flyout = this._viewContainer.injector.get(FlyoutComponent, null) ||
-            this._viewContainer.injector.get(MenuFlyoutComponent, null);
+        for (let type of [FlyoutComponent, MenuFlyoutComponent]) {
+            this._flyout = this._viewContainer.injector.get(type, null, { self: true });
+            if (this._flyout)
+                break;
+        }
         if (this._flyout) {
             this._flyout.Placement = 'BottomEdgeAlignedLeft';
         }
-        let parentElement = this._hostComponent.nativeElement.parentElement;
-        if (parentElement) {
-            parentElement.oncontextmenu = p => this.onContextMenu(p);
+        let hostElement = this.HostElement;
+        if (hostElement) {
+            hostElement.oncontextmenu = p => this.onContextMenu(p);
         }
     }
     onContextMenu(event) {
@@ -2034,8 +2086,22 @@ class ContextFlyoutDirective {
         event.preventDefault();
         event.stopPropagation();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: FlyoutDirective, isStandalone: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
+class ContextFlyoutDirective extends FlyoutDirective {
+    constructor(_hostComponent, viewContainer) {
+        super(viewContainer);
+        this._hostComponent = _hostComponent;
+    }
+    get HostElement() {
+        return this._hostComponent.nativeElement.parentElement;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ContextFlyoutDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: ContextFlyoutDirective, isStandalone: true, selector: "[ContextFlyout]", ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: ContextFlyoutDirective, isStandalone: true, selector: "[ContextFlyout]", usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ContextFlyoutDirective, decorators: [{
             type: Directive,
@@ -2043,6 +2109,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                     selector: '[ContextFlyout]'
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }] });
+class ItemFlyoutDirective extends FlyoutDirective {
+    constructor(_hostComponent, viewContainer) {
+        super(viewContainer);
+        this._hostComponent = _hostComponent;
+    }
+    get HostElement() {
+        return this._hostComponent.Element.nativeElement;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ItemFlyoutDirective, deps: [{ token: ItemContainerComponent }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: ItemFlyoutDirective, isStandalone: true, selector: "[ItemFlyout]", usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ItemFlyoutDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ItemFlyout]'
+                }]
+        }], ctorParameters: () => [{ type: ItemContainerComponent }, { type: i0.ViewContainerRef }] });
 
 class TextBlockComponent extends FrameworkElementComponent {
     constructor() {
@@ -2272,11 +2355,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)}\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}}</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)}\n"] }]
+            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"] }]
         }], propDecorators: { IsEnabled: [{
                 type: Input
             }], Text: [{
@@ -2654,5 +2737,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, FlyoutPresenter, FontIconComponent, FrameworkElementComponent, GridColumnDirective, GridColumnSpanDirective, GridComponent, GridDirective, GridModule, GridProperty, GridRowDirective, GridRowSpanDirective, ImageComponent, 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, ToggleSwitchComponent, ToolTipDirective, ToolTipServiceModule, XamlRootComponent, colorToRgb, colorToString, resume_after, resume_on_event, rgbToHsl, stringToColor, toAlignment, toJustification };
 //# sourceMappingURL=xaml-ui.mjs.map