xaml-ui 1.0.14 → 1.0.16

package/fesm2022/xaml-ui.mjs

@@ -67,7 +67,7 @@ class FrameworkElementComponent {
     }
     static { this._nextId = 1; }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FrameworkElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FrameworkElementComponent, isStandalone: true, selector: "FrameworkElement", inputs: { Width: "Width", MinWidth: "MinWidth", MaxWidth: "MaxWidth", Height: "Height", MinHeight: "MinHeight", MaxHeight: "MaxHeight", HorizontalAlignment: "HorizontalAlignment", VerticalAlignment: "VerticalAlignment", Margin: "Margin", Padding: "Padding" }, host: { properties: { "style.max-width": "this.MaxWidth", "style.max-height": "this.MaxHeight", "style.margin": "this.Margin", "style.padding": "this.Padding", "style.overflow": "this.overflow", "style.min-width": "this.minWidth", "style.min-height": "this.minHeight", "style.width": "this.width", "style.height": "this.height", "style.justify-self": "this.justifySelf", "style.align-self": "this.alignSelf" } }, ngImport: i0, template: `<ng-container/>`, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FrameworkElementComponent, isStandalone: true, selector: "FrameworkElement", inputs: { Width: "Width", MinWidth: "MinWidth", MaxWidth: "MaxWidth", Height: "Height", MinHeight: "MinHeight", MaxHeight: "MaxHeight", HorizontalAlignment: "HorizontalAlignment", VerticalAlignment: "VerticalAlignment", Margin: "Margin", Padding: "Padding", Opacity: "Opacity" }, host: { properties: { "style.max-width": "this.MaxWidth", "style.max-height": "this.MaxHeight", "style.margin": "this.Margin", "style.padding": "this.Padding", "style.opacity": "this.Opacity", "style.overflow": "this.overflow", "style.min-width": "this.minWidth", "style.min-height": "this.minHeight", "style.width": "this.width", "style.height": "this.height", "style.justify-self": "this.justifySelf", "style.align-self": "this.alignSelf" } }, ngImport: i0, template: `<ng-container/>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FrameworkElementComponent, decorators: [{
             type: Component,
@@ -107,6 +107,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }, {
                 type: HostBinding,
                 args: ['style.padding']
+            }], Opacity: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.opacity']
             }], overflow: [{
                 type: HostBinding,
                 args: ['style.overflow']
@@ -261,7 +266,7 @@ class CheckBoxComponent extends BorderComponent {
     <div class="content">
       <ng-content/>
     </div>
-  </label>`, isInline: true, styles: [":host{position:relative}.container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input[type=checkbox]:checked+.checkBox>.checkMark{display:grid;color:var(--TextOnAccentFillColorPrimary);animation:fade-in-animation var(--ControlNormalAnimationDuration) ease-out forwards}@keyframes fade-in-animation{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}input[type=checkbox]:not(:checked):not(:hover):not(:active):not(:disabled)+.checkBox{background-color:var(--ControlAltFillColorSecondary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=checkbox]:not(:checked):hover:not(:active):not(:disabled)+.checkBox{background-color:var(--ControlAltFillColorTertiary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=checkbox]:not(:checked):active+.checkBox{background-color:var(--SubtleFillColorTransparent);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=checkbox]:checked:not(:hover):not(:disabled)+.checkBox{background-color:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault)}input[type=checkbox]:checked:hover:not(:disabled)+.checkBox{background-color:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary)}input[type=checkbox]:checked:active:not(:disabled)+.checkBox{background-color:var(--AccentFillColorTertiary);border-color:var(--AccentFillColorTertiary)}input[type=checkbox]:checked:active:not(:disabled)+.checkBox>.checkMark{color:var(--TextOnAccentFillColorSecondary)}input[type=checkbox]:not(:checked):disabled+.checkBox{background-color:var(--ControlAltFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=checkbox]:checked:disabled+.checkBox{background-color:var(--AccentFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=checkbox]:checked:disabled+.checkBox>.checkMark{color:var(--TextOnAccentFillColorDisabled)}.checkBox{display:grid;width:20px;height:20px;border-radius:var(--ControlCornerRadius);border-style:solid;border-width:var(--ControlBorderThickness)}.checkMark{display:none;font-family:var(--SymbolFontFamily);font-size:12pt;align-self:center;justify-self:center;color:var(--TextOnAccentFillColorPrimary)}@media (prefers-color-scheme: dark){.checkMark{color:var(--TextOnAccentFillColorPrimaryDark)}}.content{align-self:center}\n"] }); }
+  </label>`, isInline: true, styles: [":host{position:relative}.container{display:grid;grid-template-columns:auto 1fr;column-gap:6px;align-items:center}input{display:none}input[type=checkbox]:checked+.checkBox>.checkMark{display:grid;color:var(--TextOnAccentFillColorPrimary);animation:fade-in-animation var(--ControlNormalAnimationDuration) ease-out forwards}@keyframes fade-in-animation{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}input[type=checkbox]:not(:checked):not(:hover):not(:active):not(:disabled)+.checkBox{background-color:var(--ControlAltFillColorSecondary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=checkbox]:not(:checked):hover:not(:active):not(:disabled)+.checkBox{background-color:var(--ControlAltFillColorTertiary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=checkbox]:not(:checked):active+.checkBox{background-color:var(--SubtleFillColorTransparent);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=checkbox]:checked:not(:hover):not(:disabled)+.checkBox{background-color:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault)}input[type=checkbox]:checked:hover:not(:disabled)+.checkBox{background-color:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary)}input[type=checkbox]:checked:active:not(:disabled)+.checkBox{background-color:var(--AccentFillColorTertiary);border-color:var(--AccentFillColorTertiary)}input[type=checkbox]:checked:active:not(:disabled)+.checkBox>.checkMark{color:var(--TextOnAccentFillColorSecondary)}input[type=checkbox]:not(:checked):disabled+.checkBox{background-color:var(--ControlAltFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=checkbox]:checked:disabled+.checkBox{background-color:var(--AccentFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=checkbox]:checked:disabled+.checkBox>.checkMark{color:var(--TextOnAccentFillColorDisabled)}.checkBox{display:grid;width:20px;height:20px;border-radius:var(--ControlCornerRadius);border-style:solid;border-width:var(--ControlBorderThickness);align-self:center}.checkMark{display:none;font-family:var(--SymbolFontFamily);font-size:12pt;align-self:center;justify-self:center;color:var(--TextOnAccentFillColorPrimary)}@media (prefers-color-scheme: dark){.checkMark{color:var(--TextOnAccentFillColorPrimaryDark)}}.content{align-self:center}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CheckBoxComponent, decorators: [{
             type: Component,
@@ -273,7 +278,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
     <div class="content">
       <ng-content/>
     </div>
-  </label>`, styles: [":host{position:relative}.container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input[type=checkbox]:checked+.checkBox>.checkMark{display:grid;color:var(--TextOnAccentFillColorPrimary);animation:fade-in-animation var(--ControlNormalAnimationDuration) ease-out forwards}@keyframes fade-in-animation{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}input[type=checkbox]:not(:checked):not(:hover):not(:active):not(:disabled)+.checkBox{background-color:var(--ControlAltFillColorSecondary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=checkbox]:not(:checked):hover:not(:active):not(:disabled)+.checkBox{background-color:var(--ControlAltFillColorTertiary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=checkbox]:not(:checked):active+.checkBox{background-color:var(--SubtleFillColorTransparent);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=checkbox]:checked:not(:hover):not(:disabled)+.checkBox{background-color:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault)}input[type=checkbox]:checked:hover:not(:disabled)+.checkBox{background-color:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary)}input[type=checkbox]:checked:active:not(:disabled)+.checkBox{background-color:var(--AccentFillColorTertiary);border-color:var(--AccentFillColorTertiary)}input[type=checkbox]:checked:active:not(:disabled)+.checkBox>.checkMark{color:var(--TextOnAccentFillColorSecondary)}input[type=checkbox]:not(:checked):disabled+.checkBox{background-color:var(--ControlAltFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=checkbox]:checked:disabled+.checkBox{background-color:var(--AccentFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=checkbox]:checked:disabled+.checkBox>.checkMark{color:var(--TextOnAccentFillColorDisabled)}.checkBox{display:grid;width:20px;height:20px;border-radius:var(--ControlCornerRadius);border-style:solid;border-width:var(--ControlBorderThickness)}.checkMark{display:none;font-family:var(--SymbolFontFamily);font-size:12pt;align-self:center;justify-self:center;color:var(--TextOnAccentFillColorPrimary)}@media (prefers-color-scheme: dark){.checkMark{color:var(--TextOnAccentFillColorPrimaryDark)}}.content{align-self:center}\n"] }]
+  </label>`, styles: [":host{position:relative}.container{display:grid;grid-template-columns:auto 1fr;column-gap:6px;align-items:center}input{display:none}input[type=checkbox]:checked+.checkBox>.checkMark{display:grid;color:var(--TextOnAccentFillColorPrimary);animation:fade-in-animation var(--ControlNormalAnimationDuration) ease-out forwards}@keyframes fade-in-animation{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}input[type=checkbox]:not(:checked):not(:hover):not(:active):not(:disabled)+.checkBox{background-color:var(--ControlAltFillColorSecondary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=checkbox]:not(:checked):hover:not(:active):not(:disabled)+.checkBox{background-color:var(--ControlAltFillColorTertiary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=checkbox]:not(:checked):active+.checkBox{background-color:var(--SubtleFillColorTransparent);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=checkbox]:checked:not(:hover):not(:disabled)+.checkBox{background-color:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault)}input[type=checkbox]:checked:hover:not(:disabled)+.checkBox{background-color:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary)}input[type=checkbox]:checked:active:not(:disabled)+.checkBox{background-color:var(--AccentFillColorTertiary);border-color:var(--AccentFillColorTertiary)}input[type=checkbox]:checked:active:not(:disabled)+.checkBox>.checkMark{color:var(--TextOnAccentFillColorSecondary)}input[type=checkbox]:not(:checked):disabled+.checkBox{background-color:var(--ControlAltFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=checkbox]:checked:disabled+.checkBox{background-color:var(--AccentFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=checkbox]:checked:disabled+.checkBox>.checkMark{color:var(--TextOnAccentFillColorDisabled)}.checkBox{display:grid;width:20px;height:20px;border-radius:var(--ControlCornerRadius);border-style:solid;border-width:var(--ControlBorderThickness);align-self:center}.checkMark{display:none;font-family:var(--SymbolFontFamily);font-size:12pt;align-self:center;justify-self:center;color:var(--TextOnAccentFillColorPrimary)}@media (prefers-color-scheme: dark){.checkMark{color:var(--TextOnAccentFillColorPrimaryDark)}}.content{align-self:center}\n"] }]
         }], propDecorators: { IsEnabled: [{
                 type: Input
             }], IsChecked: [{
@@ -1292,7 +1297,7 @@ class RadioButtonComponent extends BorderComponent {
     <div class="content">
       <ng-content/>
     </div>
-  </label>`, isInline: true, styles: [":host{position:relative}.container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input[type=radio]:checked+.radioButton>.circle{display:grid}input[type=radio]:not(:checked):not(:hover):not(:active):not(:disabled)+.radioButton{background-color:var(--ControlAltFillColorSecondary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=radio]:not(:checked):hover:not(:active):not(:disabled)+.radioButton{background-color:var(--ControlAltFillColorTertiary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=radio]:not(:checked):active:not(:disabled)+.radioButton{background-color:var(--SubtleFillColorTransparent);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=radio]:not(:checked):active:not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton{background-color:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault)}input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton{background-color:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary)}input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton>.circle{transform:scale(1.2)}input[type=radio]:checked:active:not(:disabled)+.radioButton{background-color:var(--AccentFillColorTertiary);border-color:var(--AccentFillColorTertiary)}input[type=radio]:checked:active:not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:not(:checked):disabled+.radioButton{background-color:var(--ControlAltFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=radio]:checked:disabled+.radioButton{background-color:var(--AccentFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}.radioButton{display:grid;width:20px;height:20px;border-radius:11px;border-style:solid;border-width:var(--ControlBorderThickness);transition:border-color var(--ControlFastAnimationDuration);transition:background-color var(--ControlFastAnimationDuration)}.circle{width:11px;height:11px;border-radius:6.5px;align-self:center;justify-self:center;background-color:var(--TextOnAccentFillColorPrimary);transition:transform var(--ControlNormalAnimationDuration);transform:scale(0)}.content{align-self:center}\n"] }); }
+  </label>`, isInline: true, styles: [":host{position:relative}.container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input[type=radio]:checked+.radioButton>.circle{display:grid}input[type=radio]:not(:checked):not(:hover):not(:active):not(:disabled)+.radioButton{background-color:var(--ControlAltFillColorSecondary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=radio]:not(:checked):hover:not(:active):not(:disabled)+.radioButton{background-color:var(--ControlAltFillColorTertiary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=radio]:not(:checked):active:not(:disabled)+.radioButton{background-color:var(--SubtleFillColorTransparent);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=radio]:not(:checked):active:not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton{background-color:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault)}input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton{background-color:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary)}input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton>.circle{transform:scale(1.2)}input[type=radio]:checked:active:not(:disabled)+.radioButton{background-color:var(--AccentFillColorTertiary);border-color:var(--AccentFillColorTertiary)}input[type=radio]:checked:active:not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:not(:checked):disabled+.radioButton{background-color:var(--ControlAltFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=radio]:checked:disabled+.radioButton{background-color:var(--AccentFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}.radioButton{display:grid;width:20px;height:20px;border-radius:11px;border-style:solid;border-width:var(--ControlBorderThickness);place-items:center;transition:border-color var(--ControlFastAnimationDuration);transition:background-color var(--ControlFastAnimationDuration)}.circle{width:10px;height:10px;border-radius:5px;background-color:var(--TextOnAccentFillColorPrimary);transition:transform var(--ControlNormalAnimationDuration);transform:scale(0)}.content{align-self:center}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
@@ -1304,7 +1309,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
     <div class="content">
       <ng-content/>
     </div>
-  </label>`, styles: [":host{position:relative}.container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input[type=radio]:checked+.radioButton>.circle{display:grid}input[type=radio]:not(:checked):not(:hover):not(:active):not(:disabled)+.radioButton{background-color:var(--ControlAltFillColorSecondary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=radio]:not(:checked):hover:not(:active):not(:disabled)+.radioButton{background-color:var(--ControlAltFillColorTertiary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=radio]:not(:checked):active:not(:disabled)+.radioButton{background-color:var(--SubtleFillColorTransparent);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=radio]:not(:checked):active:not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton{background-color:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault)}input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton{background-color:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary)}input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton>.circle{transform:scale(1.2)}input[type=radio]:checked:active:not(:disabled)+.radioButton{background-color:var(--AccentFillColorTertiary);border-color:var(--AccentFillColorTertiary)}input[type=radio]:checked:active:not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:not(:checked):disabled+.radioButton{background-color:var(--ControlAltFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=radio]:checked:disabled+.radioButton{background-color:var(--AccentFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}.radioButton{display:grid;width:20px;height:20px;border-radius:11px;border-style:solid;border-width:var(--ControlBorderThickness);transition:border-color var(--ControlFastAnimationDuration);transition:background-color var(--ControlFastAnimationDuration)}.circle{width:11px;height:11px;border-radius:6.5px;align-self:center;justify-self:center;background-color:var(--TextOnAccentFillColorPrimary);transition:transform var(--ControlNormalAnimationDuration);transform:scale(0)}.content{align-self:center}\n"] }]
+  </label>`, styles: [":host{position:relative}.container{display:grid;grid-template-columns:auto 1fr;column-gap:6px}input{display:none}input[type=radio]:checked+.radioButton>.circle{display:grid}input[type=radio]:not(:checked):not(:hover):not(:active):not(:disabled)+.radioButton{background-color:var(--ControlAltFillColorSecondary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=radio]:not(:checked):hover:not(:active):not(:disabled)+.radioButton{background-color:var(--ControlAltFillColorTertiary);border-color:var(--ControlStrongStrokeColorDefault)}input[type=radio]:not(:checked):active:not(:disabled)+.radioButton{background-color:var(--SubtleFillColorTransparent);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=radio]:not(:checked):active:not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton{background-color:var(--AccentFillColorDefault);border-color:var(--AccentFillColorDefault)}input[type=radio]:checked:not(:hover):not(:active):not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton{background-color:var(--AccentFillColorSecondary);border-color:var(--AccentFillColorSecondary)}input[type=radio]:checked:hover:not(:active):not(:disabled)+.radioButton>.circle{transform:scale(1.2)}input[type=radio]:checked:active:not(:disabled)+.radioButton{background-color:var(--AccentFillColorTertiary);border-color:var(--AccentFillColorTertiary)}input[type=radio]:checked:active:not(:disabled)+.radioButton>.circle{transform:scale(1)}input[type=radio]:not(:checked):disabled+.radioButton{background-color:var(--ControlAltFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}input[type=radio]:checked:disabled+.radioButton{background-color:var(--AccentFillColorDisabled);border-color:var(--ControlStrongStrokeColorDisabled)}.radioButton{display:grid;width:20px;height:20px;border-radius:11px;border-style:solid;border-width:var(--ControlBorderThickness);place-items:center;transition:border-color var(--ControlFastAnimationDuration);transition:background-color var(--ControlFastAnimationDuration)}.circle{width:10px;height:10px;border-radius:5px;background-color:var(--TextOnAccentFillColorPrimary);transition:transform var(--ControlNormalAnimationDuration);transform:scale(0)}.content{align-self:center}\n"] }]
         }], ctorParameters: () => [{ type: RadioButtonGroupComponent, decorators: [{
                     type: Optional
                 }] }], propDecorators: { IsEnabled: [{
@@ -1456,6 +1461,12 @@ class SliderComponent extends FrameworkElementComponent {
         if (this.Orientation === 'Vertical' && this.Height !== undefined) {
             style['height'] = this.Height;
         }
+        let minimum = this.Minimum ?? 0;
+        let maximum = this.Maximum ?? 1;
+        let range = maximum - minimum;
+        let progress = range > 0 ? (this.Value - minimum) / range : 1;
+        progress = Math.min(Math.max(progress, 0), 1);
+        style['--progress'] = (progress * 100).toFixed(4) + '%';
         return style;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -1467,7 +1478,7 @@ class SliderComponent extends FrameworkElementComponent {
     (input)="onInput($event)" 
     [disabled]="!IsEnabled"
     [className]="Orientation.toLowerCase()"
-    [ngStyle]="inputStyle">`, isInline: true, styles: [":host{position:relative}:host{display:grid}input{display:grid;-webkit-appearance:none;appearance:none;background-color:var(--ControlStrongFillColorDefault);border-radius:2px;outline:none}input.horizontal{height:4px;margin:7px 0}input.vertical{width:4px;margin:0 7px;writing-mode:vertical-lr;direction:rtl;vertical-align:middle}input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:50%;width:16px;height:16px;border-style:solid;border-width:4px;box-shadow:none;outline:1px solid var(--ControlStrokeColorOnAccentDefaultDark);border-color:var(--ControlSolidFillColorDefault);background-color:var(--AccentFillColorDefault);transition:border-width var(--ControlFastAnimationDuration)}input::-moz-range-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:50%;width:16px;height:16px;border-style:solid;border-width:4px;box-shadow:none;outline:1px solid var(--ControlStrokeColorOnAccentDefaultDark);border-color:var(--ControlSolidFillColorDefault);background-color:var(--AccentFillColorDefault);transition:border-width var(--ControlFastAnimationDuration)}input:not(:disabled)::-webkit-slider-thumb:hover{border-width:3px;background-color:var(--AccentFillColorSecondary)}input:not(:disabled)::-webkit-slider-thumb:active{border-width:5px;background-color:var(--AccentFillColorTertiary)}input:not(:disabled)::-moz-range-thumb:hover{border-width:3px;background-color:var(--AccentFillColorSecondary)}input:not(:disabled)::-moz-range-thumb:active{border-width:5px;background-color:var(--AccentFillColorTertiary)}input:disabled{background-color:var(--ControlStrongFillColorDisabled)}input:disabled::-webkit-slider-thumb{border-width:2px;background-color:var(--AccentFillColorDisabled)}input:disabled::-moz-range-thumb{border-width:2px;background-color:var(--AccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    [ngStyle]="inputStyle">`, isInline: true, styles: [":host{position:relative}:host{display:grid}input{display:grid;-webkit-appearance:none;appearance:none;background-color:var(--ControlStrongFillColorDefault);border-radius:2px;outline:none}input.horizontal{height:4px;margin:7px 0}input.horizontal::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--AccentFillColorDefault) 0 var(--progress),var(--ControlStrongFillColorDefault) var(--progress) 100%)}input.horizontal::-moz-range-track,input.horizontal::-moz-range-progress{height:4px}input.vertical{width:4px;margin:0 7px;writing-mode:vertical-lr;direction:rtl;vertical-align:middle}input.vertical::-webkit-slider-runnable-track{width:4px;border-radius:2px;background:linear-gradient(to top,var(--AccentFillColorDefault) 0 var(--progress),var(--ControlStrongFillColorDefault) var(--progress) 100%)}input.vertical::-moz-range-track,input.vertical::-moz-range-progress{width:4px}input::-moz-range-track,input::-moz-range-progress{border-radius:2px}input::-moz-range-track{background:var(--ControlStrongFillColorDefault)}input::-moz-range-progress{background:var(--AccentFillColorDefault)}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;box-shadow:none;outline:1px solid var(--ControlStrokeColorOnAccentDefaultDark);border-color:var(--ControlSolidFillColorDefault);background-color:var(--AccentFillColorDefault);transition:border-width var(--ControlFastAnimationDuration)}input::-moz-range-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:50%;width:16px;height:16px;border-style:solid;border-width:4px;box-shadow:none;outline:1px solid var(--ControlStrokeColorOnAccentDefaultDark);border-color:var(--ControlSolidFillColorDefault);background-color:var(--AccentFillColorDefault);transition:border-width var(--ControlFastAnimationDuration)}input.horizontal::-webkit-slider-thumb{transform:translateY(-6px)}input.vertical::-webkit-slider-thumb{transform:translate(-6px)}input:not(:disabled)::-webkit-slider-thumb:hover{border-width:3px;background-color:var(--AccentFillColorSecondary)}input:not(:disabled)::-webkit-slider-thumb:active{border-width:5px;background-color:var(--AccentFillColorTertiary)}input:not(:disabled)::-moz-range-thumb:hover{border-width:3px;background-color:var(--AccentFillColorSecondary)}input:not(:disabled)::-moz-range-thumb:active{border-width:5px;background-color:var(--AccentFillColorTertiary)}input:disabled::-webkit-slider-runnable-track,input:disabled::-moz-range-track{background:var(--ControlStrongFillColorDisabled)}input:disabled::-moz-range-progress{background:var(--AccentFillColorDisabled)}input:disabled::-webkit-slider-thumb{border-width:2px;background-color:var(--AccentFillColorDisabled)}input:disabled::-moz-range-thumb{border-width:2px;background-color:var(--AccentFillColorDisabled)}\n"], 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: SliderComponent, decorators: [{
             type: Component,
@@ -1479,7 +1490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
     (input)="onInput($event)" 
     [disabled]="!IsEnabled"
     [className]="Orientation.toLowerCase()"
-    [ngStyle]="inputStyle">`, imports: [CommonModule], styles: [":host{position:relative}:host{display:grid}input{display:grid;-webkit-appearance:none;appearance:none;background-color:var(--ControlStrongFillColorDefault);border-radius:2px;outline:none}input.horizontal{height:4px;margin:7px 0}input.vertical{width:4px;margin:0 7px;writing-mode:vertical-lr;direction:rtl;vertical-align:middle}input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:50%;width:16px;height:16px;border-style:solid;border-width:4px;box-shadow:none;outline:1px solid var(--ControlStrokeColorOnAccentDefaultDark);border-color:var(--ControlSolidFillColorDefault);background-color:var(--AccentFillColorDefault);transition:border-width var(--ControlFastAnimationDuration)}input::-moz-range-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:50%;width:16px;height:16px;border-style:solid;border-width:4px;box-shadow:none;outline:1px solid var(--ControlStrokeColorOnAccentDefaultDark);border-color:var(--ControlSolidFillColorDefault);background-color:var(--AccentFillColorDefault);transition:border-width var(--ControlFastAnimationDuration)}input:not(:disabled)::-webkit-slider-thumb:hover{border-width:3px;background-color:var(--AccentFillColorSecondary)}input:not(:disabled)::-webkit-slider-thumb:active{border-width:5px;background-color:var(--AccentFillColorTertiary)}input:not(:disabled)::-moz-range-thumb:hover{border-width:3px;background-color:var(--AccentFillColorSecondary)}input:not(:disabled)::-moz-range-thumb:active{border-width:5px;background-color:var(--AccentFillColorTertiary)}input:disabled{background-color:var(--ControlStrongFillColorDisabled)}input:disabled::-webkit-slider-thumb{border-width:2px;background-color:var(--AccentFillColorDisabled)}input:disabled::-moz-range-thumb{border-width:2px;background-color:var(--AccentFillColorDisabled)}\n"] }]
+    [ngStyle]="inputStyle">`, imports: [CommonModule], styles: [":host{position:relative}:host{display:grid}input{display:grid;-webkit-appearance:none;appearance:none;background-color:var(--ControlStrongFillColorDefault);border-radius:2px;outline:none}input.horizontal{height:4px;margin:7px 0}input.horizontal::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--AccentFillColorDefault) 0 var(--progress),var(--ControlStrongFillColorDefault) var(--progress) 100%)}input.horizontal::-moz-range-track,input.horizontal::-moz-range-progress{height:4px}input.vertical{width:4px;margin:0 7px;writing-mode:vertical-lr;direction:rtl;vertical-align:middle}input.vertical::-webkit-slider-runnable-track{width:4px;border-radius:2px;background:linear-gradient(to top,var(--AccentFillColorDefault) 0 var(--progress),var(--ControlStrongFillColorDefault) var(--progress) 100%)}input.vertical::-moz-range-track,input.vertical::-moz-range-progress{width:4px}input::-moz-range-track,input::-moz-range-progress{border-radius:2px}input::-moz-range-track{background:var(--ControlStrongFillColorDefault)}input::-moz-range-progress{background:var(--AccentFillColorDefault)}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;box-shadow:none;outline:1px solid var(--ControlStrokeColorOnAccentDefaultDark);border-color:var(--ControlSolidFillColorDefault);background-color:var(--AccentFillColorDefault);transition:border-width var(--ControlFastAnimationDuration)}input::-moz-range-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:50%;width:16px;height:16px;border-style:solid;border-width:4px;box-shadow:none;outline:1px solid var(--ControlStrokeColorOnAccentDefaultDark);border-color:var(--ControlSolidFillColorDefault);background-color:var(--AccentFillColorDefault);transition:border-width var(--ControlFastAnimationDuration)}input.horizontal::-webkit-slider-thumb{transform:translateY(-6px)}input.vertical::-webkit-slider-thumb{transform:translate(-6px)}input:not(:disabled)::-webkit-slider-thumb:hover{border-width:3px;background-color:var(--AccentFillColorSecondary)}input:not(:disabled)::-webkit-slider-thumb:active{border-width:5px;background-color:var(--AccentFillColorTertiary)}input:not(:disabled)::-moz-range-thumb:hover{border-width:3px;background-color:var(--AccentFillColorSecondary)}input:not(:disabled)::-moz-range-thumb:active{border-width:5px;background-color:var(--AccentFillColorTertiary)}input:disabled::-webkit-slider-runnable-track,input:disabled::-moz-range-track{background:var(--ControlStrongFillColorDisabled)}input:disabled::-moz-range-progress{background:var(--AccentFillColorDisabled)}input:disabled::-webkit-slider-thumb{border-width:2px;background-color:var(--AccentFillColorDisabled)}input:disabled::-moz-range-thumb{border-width:2px;background-color:var(--AccentFillColorDisabled)}\n"] }]
         }], propDecorators: { Minimum: [{
                 type: Input
             }], Maximum: [{
@@ -1502,7 +1513,14 @@ class GridComponent extends PanelComponent {
         this.Orientation = 'Vertical';
     }
     get gridAutoFlow() {
-        return this.Orientation === 'Horizontal' ? 'column' : 'row';
+        if (this.ColumnDefinitions == undefined && this.RowDefinitions == undefined) {
+            //Make it work like equal with stack panel
+            return this.Orientation === 'Horizontal' ? 'column' : 'row';
+        }
+        else {
+            //Use proper flow logic
+            return this.Orientation === 'Horizontal' ? 'row' : 'column';
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: GridComponent, isStandalone: false, selector: "Grid", inputs: { ColumnDefinitions: "ColumnDefinitions", RowDefinitions: "RowDefinitions", AutoColumnDefinition: "AutoColumnDefinition", AutoRowDefinition: "AutoRowDefinition", ColumnSpacing: "ColumnSpacing", RowSpacing: "RowSpacing", Orientation: "Orientation" }, host: { properties: { "style.grid-template-columns": "this.ColumnDefinitions", "style.grid-template-rows": "this.RowDefinitions", "style.grid-auto-columns": "this.AutoColumnDefinition", "style.grid-auto-rows": "this.AutoRowDefinition", "style.column-gap": "this.ColumnSpacing", "style.row-gap": "this.RowSpacing", "style.grid-auto-flow": "this.gridAutoFlow" } }, usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;position:relative}\n"] }); }
@@ -1795,6 +1813,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
 </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 GridViewComponent extends SelectorComponent {
+    constructor() {
+        super(...arguments);
+        this.MaximumRowsOrColumns = 2;
+        this.Orientation = "Horizontal";
+    }
+    get columnDefinitions() {
+        return this.Orientation == "Horizontal" ? `repeat(${this.MaximumRowsOrColumns}, 1fr)` : undefined;
+    }
+    get rowDefinitions() {
+        return this.Orientation == "Vertical" ? `repeat(${this.MaximumRowsOrColumns}, 1fr)` : undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: GridViewComponent, isStandalone: true, selector: "GridView", inputs: { MaximumRowsOrColumns: "MaximumRowsOrColumns", Orientation: "Orientation" }, usesInheritance: true, ngImport: i0, template: "<ScrollViewer>\n    <Grid [Orientation]=\"Orientation\" [ColumnDefinitions]=\"columnDefinitions\" [RowDefinitions]=\"rowDefinitions\" RowSpacing=\"3px\" ColumnSpacing=\"3px\">\n      <ItemContainer #container *ngFor=\"let item of ItemSource; index as index; trackBy: getValue\" class=\"item\" (click)=\"onItemClick($event, index, item)\" [ngClass]=\"{'selected': index == SelectedIndex}\" [id]=\"'xaml-selector-'+_id+'-item-'+index\" @itemFading>\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        <div class=\"selection-indicator\" *ngIf=\"index == SelectedIndex\"></div>\n      </ItemContainer>\n    </Grid>\n  </ScrollViewer>", isInline: true, styles: [":host{position:relative}:host{display:grid}:host .item{border-radius:var(--ControlCornerRadius)}:host .item>.item-content{display:grid;grid-row:1;grid-column:1;padding:8px 12px}:host .item>.selection-indicator{border-radius:var(--ControlCornerRadius);border-style:solid;border-color:var(--AccentFillColorDefault);grid-row:1;grid-column:1}: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: "ngmodule", type: GridModule }, { kind: "component", type: GridComponent, selector: "Grid", inputs: ["ColumnDefinitions", "RowDefinitions", "AutoColumnDefinition", "AutoRowDefinition", "ColumnSpacing", "RowSpacing", "Orientation"] }, { kind: "component", type: ItemContainerComponent, selector: "ItemContainer" }], animations: [
+            trigger('itemFading', [
+                transition(':enter', [animate('500ms ease-in', keyframes([
+                        style({ opacity: 0, height: 0 }),
+                        style({ opacity: 0, height: '*' }),
+                        style({ opacity: 1, height: '*' }),
+                    ]))]),
+                transition(':leave', [animate('500ms ease-out', keyframes([
+                        style({ opacity: 1, height: '*' }),
+                        style({ opacity: 0, height: '*' }),
+                        style({ opacity: 0, height: 0 }),
+                    ]))]),
+            ])
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GridViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'GridView', imports: [CommonModule, ScrollViewerComponent, GridModule, ItemContainerComponent], template: `<ScrollViewer>
+    <Grid [Orientation]="Orientation" [ColumnDefinitions]="columnDefinitions" [RowDefinitions]="rowDefinitions" RowSpacing="3px" ColumnSpacing="3px">
+      <ItemContainer #container *ngFor="let item of ItemSource; index as index; trackBy: getValue" class="item" (click)="onItemClick($event, index, item)" [ngClass]="{'selected': index == SelectedIndex}" [id]="'xaml-selector-'+_id+'-item-'+index" @itemFading>
+        <div class="item-content" [ngStyle]="{'align-content': alignContent, 'justify-content': justifyContent}">${SelectorItemTemplate}</div>
+        <div class="selection-indicator" *ngIf="index == SelectedIndex"></div>
+      </ItemContainer>
+    </Grid>
+  </ScrollViewer>`, animations: [
+                        trigger('itemFading', [
+                            transition(':enter', [animate('500ms ease-in', keyframes([
+                                    style({ opacity: 0, height: 0 }),
+                                    style({ opacity: 0, height: '*' }),
+                                    style({ opacity: 1, height: '*' }),
+                                ]))]),
+                            transition(':leave', [animate('500ms ease-out', keyframes([
+                                    style({ opacity: 1, height: '*' }),
+                                    style({ opacity: 0, height: '*' }),
+                                    style({ opacity: 0, height: 0 }),
+                                ]))]),
+                        ])
+                    ], styles: [":host{position:relative}:host{display:grid}:host .item{border-radius:var(--ControlCornerRadius)}:host .item>.item-content{display:grid;grid-row:1;grid-column:1;padding:8px 12px}:host .item>.selection-indicator{border-radius:var(--ControlCornerRadius);border-style:solid;border-color:var(--AccentFillColorDefault);grid-row:1;grid-column:1}: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"] }]
+        }], propDecorators: { MaximumRowsOrColumns: [{
+                type: Input
+            }], Orientation: [{
+                type: Input
+            }] } });
+
 class XamlRootComponent {
     onContextMenu(event) {
         event.preventDefault();
@@ -2344,6 +2419,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }] } });
 
+class PersonPictureComponent extends FrameworkElementComponent {
+    get fallbackInitials() {
+        if (this.DisplayName) {
+            return this.DisplayName
+                .split(' ')
+                .map(n => n[0])
+                .join('')
+                .substring(0, 2)
+                .toUpperCase();
+        }
+        return '?';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PersonPictureComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: PersonPictureComponent, isStandalone: true, selector: "PersonPicture2", inputs: { DisplayName: "DisplayName", ProfilePicture: "ProfilePicture", Initials: "Initials", BadgeText: "BadgeText", BadgeGlyph: "BadgeGlyph", BadgeImageSource: "BadgeImageSource" }, usesInheritance: true, ngImport: i0, template: `<div class="avatar">
+    <img *ngIf="ProfilePicture; else initialsTemplate"
+         [src]="ProfilePicture" alt="{{ DisplayName || Initials }}" />
+    <ng-template #initialsTemplate>
+      <span class="initials">{{ Initials || fallbackInitials }}</span>
+    </ng-template>
+  </div>
+  <div *ngIf="BadgeText || BadgeGlyph || BadgeImageSource" class="badge">
+    <img *ngIf="BadgeImageSource" [src]="BadgeImageSource" />
+    <span *ngIf="BadgeText">{{ BadgeText }}</span>
+    <span *ngIf="BadgeGlyph" class="glyph">{{ BadgeGlyph }}</span>
+  </div>`, isInline: true, styles: [":host{width:96px;height:96px;place-self:stretch;overflow:hidden;position:relative;container-type:inline-size}.avatar{position:absolute;width:100%;height:100%;background-color:var(--ControlAltFillColorQuarternary);border-color:var(--ControlAltFillColorSecondary);border-style:solid;border-width:1px;border-radius:50%;box-sizing:border-box;overflow:hidden;display:grid}.avatar>img{place-self:stretch;width:100%;height:100%;object-fit:cover}.avatar>.initials{place-self:center;text-align:center;text-overflow:clip;font-size:40cqw}.badge{position:absolute;min-width:30cqw;height:30cqw;top:0;right:0;background:var(--AccentFillColorDefault);border-radius:50%;overflow:hidden;display:grid;place-self:flex-start right}.badge>img{place-self:center;width:30cqw;height:30cqw;object-fit:cover}.badge>span{place-self:center;font-size:20cqw;text-align:center;color:var(--TextOnAccentFillColorPrimary)}.badge>span.glyph{font-family:Segoe MDL2 Assets}\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: PersonPictureComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'PersonPicture2', template: `<div class="avatar">
+    <img *ngIf="ProfilePicture; else initialsTemplate"
+         [src]="ProfilePicture" alt="{{ DisplayName || Initials }}" />
+    <ng-template #initialsTemplate>
+      <span class="initials">{{ Initials || fallbackInitials }}</span>
+    </ng-template>
+  </div>
+  <div *ngIf="BadgeText || BadgeGlyph || BadgeImageSource" class="badge">
+    <img *ngIf="BadgeImageSource" [src]="BadgeImageSource" />
+    <span *ngIf="BadgeText">{{ BadgeText }}</span>
+    <span *ngIf="BadgeGlyph" class="glyph">{{ BadgeGlyph }}</span>
+  </div>`, imports: [CommonModule], styles: [":host{width:96px;height:96px;place-self:stretch;overflow:hidden;position:relative;container-type:inline-size}.avatar{position:absolute;width:100%;height:100%;background-color:var(--ControlAltFillColorQuarternary);border-color:var(--ControlAltFillColorSecondary);border-style:solid;border-width:1px;border-radius:50%;box-sizing:border-box;overflow:hidden;display:grid}.avatar>img{place-self:stretch;width:100%;height:100%;object-fit:cover}.avatar>.initials{place-self:center;text-align:center;text-overflow:clip;font-size:40cqw}.badge{position:absolute;min-width:30cqw;height:30cqw;top:0;right:0;background:var(--AccentFillColorDefault);border-radius:50%;overflow:hidden;display:grid;place-self:flex-start right}.badge>img{place-self:center;width:30cqw;height:30cqw;object-fit:cover}.badge>span{place-self:center;font-size:20cqw;text-align:center;color:var(--TextOnAccentFillColorPrimary)}.badge>span.glyph{font-family:Segoe MDL2 Assets}\n"] }]
+        }], propDecorators: { DisplayName: [{
+                type: Input
+            }], ProfilePicture: [{
+                type: Input
+            }], Initials: [{
+                type: Input
+            }], BadgeText: [{
+                type: Input
+            }], BadgeGlyph: [{
+                type: Input
+            }], BadgeImageSource: [{
+                type: Input
+            }] } });
+
 class AppBarButtonComponent extends FrameworkElementComponent {
     constructor() {
         super(...arguments);
@@ -2490,6 +2619,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             args: [{ selector: 'MenuFlyoutSeparator', template: `<div class="separator"></div>`, styles: [":host{position:relative}:host{display:table-row;position:relative}:host>.separator{position:absolute;display:block;inset:-.5px -2px;background-color:var(--DividerStrokeColorDefault)}\n"] }]
         }] });
 
+class EllipseComponent extends FrameworkElementComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: EllipseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: EllipseComponent, isStandalone: true, selector: "Ellipse", inputs: { Fill: "Fill", Stroke: "Stroke", StrokeThickness: "StrokeThickness" }, host: { properties: { "style.background": "this.Fill", "style.border-color": "this.Stroke", "style.border-width": "this.StrokeThickness" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:grid;box-sizing:border-box;border-style:solid;border-radius:50%}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: EllipseComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'Ellipse', template: '', styles: [":host{display:grid;box-sizing:border-box;border-style:solid;border-radius:50%}\n"] }]
+        }], propDecorators: { Fill: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.background']
+            }], Stroke: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.border-color']
+            }], StrokeThickness: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.border-width']
+            }] } });
+
 class ToolTipDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToolTipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: ToolTipDirective, isStandalone: false, selector: "[ToolTipService-ToolTip]", inputs: { ToolTip: ["ToolTipService-ToolTip", "ToolTip"] }, host: { properties: { "attr.title": "this.ToolTip" } }, ngImport: i0 }); }
@@ -2749,7 +2902,7 @@ class NumberBoxComponent extends FrameworkElementComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NumberBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: NumberBoxComponent, isStandalone: true, selector: "NumberBox", inputs: { IsEnabled: "IsEnabled", PlaceholderText: "PlaceholderText", IsPlaceholderEditable: "IsPlaceholderEditable", TextAlignment: "TextAlignment", InputMode: "InputMode", Minimum: "Minimum", Maximum: "Maximum", SmallChange: "SmallChange", LargeChange: "LargeChange", NumberFormatter: "NumberFormatter", Unit: "Unit", Value: "Value" }, outputs: { ValueChange: "ValueChange" }, host: { listeners: { "click": "onClick()", "focusin": "onFocusIn()", "contextmenu": "onContextMenu($event)" } }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true }, { propertyName: "_flyout", first: true, predicate: ["flyout"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<label>
     <div class="icon">&#xEC8F;</div>
-    <input #input type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}" (blur)="onBlur()" (keydown)="onKeyDown($event)"/>
+    <input class="text-box" #input type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}" (blur)="onBlur()" (keydown)="onKeyDown($event)"/>
     <Flyout #flyout Padding="2px" Placement="Left" [HasBackdrop]="false" [Target]="flyoutTarget">
       <RepeatButton Class="InlineButtonStyle" (Click)="onIncreaseClick()" [Delay]="500" [Interval]="50"  (pointerdown)="onButtonPress()" (pointerup)="onButtonPress()"><FontIcon Glyph="&#xE70E;"/></RepeatButton>
       <RepeatButton Class="InlineButtonStyle" (Click)="onDecreaseClick()" [Delay]="500" [Interval]="50"  (pointerdown)="onButtonPress()" (pointerup)="onButtonPress()"><FontIcon Glyph="&#xE70D;"/></RepeatButton>
@@ -2761,7 +2914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             type: Component,
             args: [{ selector: 'NumberBox', template: `<label>
     <div class="icon">&#xEC8F;</div>
-    <input #input type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}" (blur)="onBlur()" (keydown)="onKeyDown($event)"/>
+    <input class="text-box" #input type="text" [disabled]="!IsEnabled" [value]="Text" (change)="onChange()" [placeholder]="PlaceholderText" [style]="{'text-align': TextAlignment}" (blur)="onBlur()" (keydown)="onKeyDown($event)"/>
     <Flyout #flyout Padding="2px" Placement="Left" [HasBackdrop]="false" [Target]="flyoutTarget">
       <RepeatButton Class="InlineButtonStyle" (Click)="onIncreaseClick()" [Delay]="500" [Interval]="50"  (pointerdown)="onButtonPress()" (pointerup)="onButtonPress()"><FontIcon Glyph="&#xE70E;"/></RepeatButton>
       <RepeatButton Class="InlineButtonStyle" (Click)="onDecreaseClick()" [Delay]="500" [Interval]="50"  (pointerdown)="onButtonPress()" (pointerup)="onButtonPress()"><FontIcon Glyph="&#xE70D;"/></RepeatButton>
@@ -2901,5 +3054,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, ProgressBarComponent, ProgressRingComponent, 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 };
+export { AppBarButtonComponent, BorderComponent, ButtonComponent, CheckBoxComponent, ColorPickerComponent, ComboBoxComponent, CommandBarComponent, ContentDialog, ContentDialogButton, ContentDialogResult, ContextFlyoutDirective, Dialog, DialogPresenter, DropDownButtonComponent, EllipseComponent, FlyoutBaseComponent, FlyoutComponent, FlyoutDirective, FlyoutPresenter, FontIconComponent, FrameworkElementComponent, GridColumnDirective, GridColumnSpanDirective, GridComponent, GridDirective, GridModule, GridProperty, GridRowDirective, GridRowSpanDirective, GridViewComponent, ImageComponent, ItemFlyoutDirective, ListBoxComponent, ListViewComponent, MenuFlyoutComponent, MenuFlyoutItemBase, MenuFlyoutItemComponent, MenuFlyoutSeparator, NumberBoxComponent, PanelComponent, PersonPictureComponent, PopupTemplate, ProgressBarComponent, ProgressRingComponent, 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