xaml-ui 1.0.10 → 1.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/fesm2022/xaml-ui.mjs
CHANGED
|
@@ -425,8 +425,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
425
425
|
}] } });
|
|
426
426
|
|
|
427
427
|
const SelectorItemTemplate = `<ng-container *ngIf="ItemTemplate">
|
|
428
|
-
<ng-container
|
|
429
|
-
|
|
428
|
+
<ng-container [ngTemplateOutlet]="ItemTemplate" [ngTemplateOutletContext]="{ $implicit: item }" [ngTemplateOutletInjector]="container.Injector" />
|
|
429
|
+
</ng-container>
|
|
430
430
|
<ng-container *ngIf="!ItemTemplate">{{ DisplayMemberPath ? item[DisplayMemberPath] : item }}</ng-container>`;
|
|
431
431
|
class SelectorComponent extends FrameworkElementComponent {
|
|
432
432
|
get alignContent() {
|
|
@@ -874,9 +874,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
874
874
|
args: ['style.grid-auto-columns']
|
|
875
875
|
}] } });
|
|
876
876
|
|
|
877
|
+
class ItemContainerComponent {
|
|
878
|
+
constructor(Element, Injector) {
|
|
879
|
+
this.Element = Element;
|
|
880
|
+
this.Injector = Injector;
|
|
881
|
+
}
|
|
882
|
+
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 }); }
|
|
883
|
+
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"] }); }
|
|
884
|
+
}
|
|
885
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ItemContainerComponent, decorators: [{
|
|
886
|
+
type: Component,
|
|
887
|
+
args: [{ selector: 'ItemContainer', template: `<ng-content/>`, styles: [":host{display:grid;position:relative}\n"] }]
|
|
888
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Injector }] });
|
|
889
|
+
|
|
877
890
|
class ListViewComponent extends SelectorComponent {
|
|
878
891
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
879
|
-
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 <
|
|
892
|
+
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: [
|
|
880
893
|
trigger('itemFading', [
|
|
881
894
|
transition(':enter', [animate('500ms ease-in', keyframes([
|
|
882
895
|
style({ opacity: 0, height: 0 }),
|
|
@@ -893,12 +906,12 @@ class ListViewComponent extends SelectorComponent {
|
|
|
893
906
|
}
|
|
894
907
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListViewComponent, decorators: [{
|
|
895
908
|
type: Component,
|
|
896
|
-
args: [{ selector: 'ListView', imports: [CommonModule, ScrollViewerComponent, StackPanelComponent], template: `<ScrollViewer>
|
|
909
|
+
args: [{ selector: 'ListView', imports: [CommonModule, ScrollViewerComponent, StackPanelComponent, ItemContainerComponent], template: `<ScrollViewer>
|
|
897
910
|
<StackPanel Padding="2px 0">
|
|
898
|
-
<
|
|
911
|
+
<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>
|
|
899
912
|
<div class="item-selector"></div>
|
|
900
913
|
<div class="item-content" [ngStyle]="{'align-content': alignContent, 'justify-content': justifyContent}">${SelectorItemTemplate}</div>
|
|
901
|
-
</
|
|
914
|
+
</ItemContainer>
|
|
902
915
|
</StackPanel>
|
|
903
916
|
</ScrollViewer>`, animations: [
|
|
904
917
|
trigger('itemFading', [
|
|
@@ -1237,12 +1250,12 @@ class ComboBoxComponent extends SelectorComponent {
|
|
|
1237
1250
|
this._popup.IsOpen = false;
|
|
1238
1251
|
}
|
|
1239
1252
|
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 }); }
|
|
1240
|
-
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
|
|
1253
|
+
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" }] }); }
|
|
1241
1254
|
}
|
|
1242
1255
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ComboBoxComponent, decorators: [{
|
|
1243
1256
|
type: Component,
|
|
1244
|
-
args: [{ selector: 'ComboBox', imports: [CommonModule, DropDownButtonComponent, FlyoutComponent, ListViewComponent], template: `<DropDownButton [HorizontalContentAlignment]="HorizontalContentAlignment" [VerticalContentAlignment]="VerticalContentAlignment" [IsEnabled]="IsEnabled">
|
|
1245
|
-
|
|
1257
|
+
args: [{ selector: 'ComboBox', imports: [CommonModule, DropDownButtonComponent, FlyoutComponent, ListViewComponent, ItemContainerComponent], template: `<DropDownButton [HorizontalContentAlignment]="HorizontalContentAlignment" [VerticalContentAlignment]="VerticalContentAlignment" [IsEnabled]="IsEnabled">
|
|
1258
|
+
<ItemContainer #container>${SelectorItemTemplate}</ItemContainer>
|
|
1246
1259
|
<Flyout Placement="Cover" Padding="0" [Target]="target" (IsOpenChange)="onIsOpenChanged($event)">
|
|
1247
1260
|
<ListView [ItemSource]="ItemSource" [(SelectedIndex)]="SelectedIndex" [HorizontalContentAlignment]="HorizontalContentAlignment" [VerticalContentAlignment]="VerticalContentAlignment"/>
|
|
1248
1261
|
</Flyout>
|
|
@@ -1486,7 +1499,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
1486
1499
|
class GridComponent extends PanelComponent {
|
|
1487
1500
|
constructor() {
|
|
1488
1501
|
super(...arguments);
|
|
1489
|
-
this.Orientation = '
|
|
1502
|
+
this.Orientation = 'Vertical';
|
|
1490
1503
|
}
|
|
1491
1504
|
get gridAutoFlow() {
|
|
1492
1505
|
return this.Orientation === 'Horizontal' ? 'column' : 'row';
|
|
@@ -1773,13 +1786,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
1773
1786
|
|
|
1774
1787
|
class ListBoxComponent extends SelectorComponent {
|
|
1775
1788
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1776
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ListBoxComponent, isStandalone: true, selector: "ListBox", usesInheritance: true, ngImport: i0, template: "<
|
|
1789
|
+
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" }] }); }
|
|
1777
1790
|
}
|
|
1778
1791
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ListBoxComponent, decorators: [{
|
|
1779
1792
|
type: Component,
|
|
1780
|
-
args: [{ selector: 'ListBox', imports: [CommonModule], template: `<
|
|
1793
|
+
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}">
|
|
1781
1794
|
${SelectorItemTemplate}
|
|
1782
|
-
|
|
1795
|
+
</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"] }]
|
|
1783
1796
|
}] });
|
|
1784
1797
|
|
|
1785
1798
|
class XamlRootComponent {
|
|
@@ -2042,20 +2055,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
2042
2055
|
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"] }]
|
|
2043
2056
|
}] });
|
|
2044
2057
|
|
|
2045
|
-
class
|
|
2046
|
-
constructor(
|
|
2047
|
-
this._hostComponent = _hostComponent;
|
|
2058
|
+
class FlyoutDirective {
|
|
2059
|
+
constructor(_viewContainer) {
|
|
2048
2060
|
this._viewContainer = _viewContainer;
|
|
2049
2061
|
}
|
|
2050
2062
|
ngAfterViewInit() {
|
|
2051
|
-
|
|
2052
|
-
this._viewContainer.injector.get(
|
|
2063
|
+
for (let type of [FlyoutComponent, MenuFlyoutComponent]) {
|
|
2064
|
+
this._flyout = this._viewContainer.injector.get(type, null, { self: true });
|
|
2065
|
+
if (this._flyout)
|
|
2066
|
+
break;
|
|
2067
|
+
}
|
|
2053
2068
|
if (this._flyout) {
|
|
2054
2069
|
this._flyout.Placement = 'BottomEdgeAlignedLeft';
|
|
2055
2070
|
}
|
|
2056
|
-
let
|
|
2057
|
-
if (
|
|
2058
|
-
|
|
2071
|
+
let hostElement = this.HostElement;
|
|
2072
|
+
if (hostElement) {
|
|
2073
|
+
hostElement.oncontextmenu = p => this.onContextMenu(p);
|
|
2059
2074
|
}
|
|
2060
2075
|
}
|
|
2061
2076
|
onContextMenu(event) {
|
|
@@ -2071,8 +2086,22 @@ class ContextFlyoutDirective {
|
|
|
2071
2086
|
event.preventDefault();
|
|
2072
2087
|
event.stopPropagation();
|
|
2073
2088
|
}
|
|
2089
|
+
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 }); }
|
|
2090
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: FlyoutDirective, isStandalone: true, ngImport: i0 }); }
|
|
2091
|
+
}
|
|
2092
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FlyoutDirective, decorators: [{
|
|
2093
|
+
type: Directive
|
|
2094
|
+
}], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
|
|
2095
|
+
class ContextFlyoutDirective extends FlyoutDirective {
|
|
2096
|
+
constructor(_hostComponent, viewContainer) {
|
|
2097
|
+
super(viewContainer);
|
|
2098
|
+
this._hostComponent = _hostComponent;
|
|
2099
|
+
}
|
|
2100
|
+
get HostElement() {
|
|
2101
|
+
return this._hostComponent.nativeElement.parentElement;
|
|
2102
|
+
}
|
|
2074
2103
|
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 }); }
|
|
2075
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: ContextFlyoutDirective, isStandalone: true, selector: "[ContextFlyout]", ngImport: i0 }); }
|
|
2104
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: ContextFlyoutDirective, isStandalone: true, selector: "[ContextFlyout]", usesInheritance: true, ngImport: i0 }); }
|
|
2076
2105
|
}
|
|
2077
2106
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ContextFlyoutDirective, decorators: [{
|
|
2078
2107
|
type: Directive,
|
|
@@ -2080,6 +2109,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
2080
2109
|
selector: '[ContextFlyout]'
|
|
2081
2110
|
}]
|
|
2082
2111
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }] });
|
|
2112
|
+
class ItemFlyoutDirective extends FlyoutDirective {
|
|
2113
|
+
constructor(_hostComponent, viewContainer) {
|
|
2114
|
+
super(viewContainer);
|
|
2115
|
+
this._hostComponent = _hostComponent;
|
|
2116
|
+
}
|
|
2117
|
+
get HostElement() {
|
|
2118
|
+
return this._hostComponent.Element.nativeElement;
|
|
2119
|
+
}
|
|
2120
|
+
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 }); }
|
|
2121
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: ItemFlyoutDirective, isStandalone: true, selector: "[ItemFlyout]", usesInheritance: true, ngImport: i0 }); }
|
|
2122
|
+
}
|
|
2123
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ItemFlyoutDirective, decorators: [{
|
|
2124
|
+
type: Directive,
|
|
2125
|
+
args: [{
|
|
2126
|
+
selector: '[ItemFlyout]'
|
|
2127
|
+
}]
|
|
2128
|
+
}], ctorParameters: () => [{ type: ItemContainerComponent }, { type: i0.ViewContainerRef }] });
|
|
2083
2129
|
|
|
2084
2130
|
class TextBlockComponent extends FrameworkElementComponent {
|
|
2085
2131
|
constructor() {
|
|
@@ -2309,11 +2355,11 @@ class AppBarButtonComponent extends FrameworkElementComponent {
|
|
|
2309
2355
|
this._flyout?.Show();
|
|
2310
2356
|
}
|
|
2311
2357
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AppBarButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2312
|
-
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"] }); }
|
|
2358
|
+
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"] }); }
|
|
2313
2359
|
}
|
|
2314
2360
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AppBarButtonComponent, decorators: [{
|
|
2315
2361
|
type: Component,
|
|
2316
|
-
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"] }]
|
|
2362
|
+
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"] }]
|
|
2317
2363
|
}], propDecorators: { IsEnabled: [{
|
|
2318
2364
|
type: Input
|
|
2319
2365
|
}], Text: [{
|
|
@@ -2691,5 +2737,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
2691
2737
|
* Generated bundle index. Do not edit.
|
|
2692
2738
|
*/
|
|
2693
2739
|
|
|
2694
|
-
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 };
|
|
2740
|
+
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 };
|
|
2695
2741
|
//# sourceMappingURL=xaml-ui.mjs.map
|