xaml-ui 1.0.17 → 1.0.18
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
|
@@ -172,11 +172,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
172
172
|
|
|
173
173
|
class BorderComponent extends PanelComponent {
|
|
174
174
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BorderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
175
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: BorderComponent, isStandalone: true, selector: "Border", usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;position:relative}\n"] }); }
|
|
175
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: BorderComponent, isStandalone: true, selector: "Border", usesInheritance: true, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;position:relative;grid-template-areas:\"children\"}:host::ng-deep>*{grid-area:children}\n"] }); }
|
|
176
176
|
}
|
|
177
177
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BorderComponent, decorators: [{
|
|
178
178
|
type: Component,
|
|
179
|
-
args: [{ selector: 'Border', template: `<ng-content/>`, styles: [":host{display:grid;position:relative}\n"] }]
|
|
179
|
+
args: [{ selector: 'Border', template: `<ng-content/>`, styles: [":host{display:grid;position:relative;grid-template-areas:\"children\"}:host::ng-deep>*{grid-area:children}\n"] }]
|
|
180
180
|
}] });
|
|
181
181
|
|
|
182
182
|
class ButtonComponent extends BorderComponent {
|
|
@@ -1439,59 +1439,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
1439
1439
|
}] } });
|
|
1440
1440
|
|
|
1441
1441
|
class SliderComponent extends FrameworkElementComponent {
|
|
1442
|
-
|
|
1443
|
-
|
|
1442
|
+
static { this._thumbRadius = 8; }
|
|
1443
|
+
constructor(_renderer) {
|
|
1444
|
+
super();
|
|
1445
|
+
this._renderer = _renderer;
|
|
1444
1446
|
this.Minimum = 0.0;
|
|
1445
1447
|
this.Maximum = 1.0;
|
|
1446
|
-
this.StepFrequency = 0
|
|
1448
|
+
this.StepFrequency = 0;
|
|
1447
1449
|
this.Value = 0.0;
|
|
1448
1450
|
this.ValueChange = new EventEmitter();
|
|
1449
1451
|
this.IsEnabled = true;
|
|
1450
1452
|
this.Orientation = 'Horizontal';
|
|
1451
1453
|
}
|
|
1452
|
-
|
|
1453
|
-
this.Value = parseFloat(event.target.value);
|
|
1454
|
-
this.ValueChange.emit(this.Value);
|
|
1455
|
-
}
|
|
1456
|
-
get inputStyle() {
|
|
1454
|
+
getStyle() {
|
|
1457
1455
|
let style = {};
|
|
1458
|
-
if (this.Orientation === 'Horizontal' && this.Width !== undefined) {
|
|
1459
|
-
style['width'] = this.Width;
|
|
1460
|
-
}
|
|
1461
|
-
if (this.Orientation === 'Vertical' && this.Height !== undefined) {
|
|
1462
|
-
style['height'] = this.Height;
|
|
1463
|
-
}
|
|
1464
1456
|
let minimum = this.Minimum ?? 0;
|
|
1465
1457
|
let maximum = this.Maximum ?? 1;
|
|
1466
1458
|
let range = maximum - minimum;
|
|
1467
1459
|
let progress = range > 0 ? (this.Value - minimum) / range : 1;
|
|
1468
1460
|
progress = Math.min(Math.max(progress, 0), 1);
|
|
1469
|
-
|
|
1461
|
+
let progressText = (progress * 100).toFixed(4);
|
|
1462
|
+
style['--progress-size'] = progressText + (this.Orientation == 'Horizontal' ? 'cqw' : 'cqh');
|
|
1463
|
+
style['--progress-percent'] = progressText + '%';
|
|
1470
1464
|
return style;
|
|
1471
1465
|
}
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1466
|
+
getClasses(value) {
|
|
1467
|
+
var results = [value];
|
|
1468
|
+
results.push(this.Orientation.toLowerCase());
|
|
1469
|
+
if (this.IsEnabled !== true)
|
|
1470
|
+
results.push('disabled');
|
|
1471
|
+
return results;
|
|
1472
|
+
}
|
|
1473
|
+
onThumbPointerDown(event) {
|
|
1474
|
+
if (!this.IsEnabled)
|
|
1475
|
+
return;
|
|
1476
|
+
this._thumb.nativeElement.setPointerCapture(event.pointerId);
|
|
1477
|
+
this._thumbPointerMoveEventSubscription = this._renderer.listen(this._track.nativeElement, 'pointermove', p => this.onThumbPointerMove(p));
|
|
1478
|
+
this.onThumbPointerMove(event);
|
|
1479
|
+
}
|
|
1480
|
+
onThumbPointerMove(event) {
|
|
1481
|
+
let trackRectangle = this._track.nativeElement.getBoundingClientRect();
|
|
1482
|
+
let position;
|
|
1483
|
+
switch (this.Orientation) {
|
|
1484
|
+
case "Horizontal":
|
|
1485
|
+
position = (event.clientX - trackRectangle.left - SliderComponent._thumbRadius) / (trackRectangle.width - 2 * SliderComponent._thumbRadius);
|
|
1486
|
+
break;
|
|
1487
|
+
case "Vertical":
|
|
1488
|
+
position = 1 - (event.clientY - trackRectangle.top - SliderComponent._thumbRadius) / (trackRectangle.height - 2 * SliderComponent._thumbRadius);
|
|
1489
|
+
break;
|
|
1490
|
+
}
|
|
1491
|
+
//Apply range
|
|
1492
|
+
let value = position * (this.Maximum - this.Minimum) + this.Minimum;
|
|
1493
|
+
//Apply step frequency
|
|
1494
|
+
if (this.StepFrequency !== 0)
|
|
1495
|
+
value = Math.trunc(value / this.StepFrequency) * this.StepFrequency;
|
|
1496
|
+
//Apply min-max
|
|
1497
|
+
value = Math.min(this.Maximum, Math.max(this.Minimum, value));
|
|
1498
|
+
//Update value
|
|
1499
|
+
this.Value = value;
|
|
1500
|
+
}
|
|
1501
|
+
onThumbPointerUp(event) {
|
|
1502
|
+
this.onThumbPointerMove(event);
|
|
1503
|
+
this._thumb.nativeElement.releasePointerCapture(event.pointerId);
|
|
1504
|
+
if (this._thumbPointerMoveEventSubscription)
|
|
1505
|
+
this._thumbPointerMoveEventSubscription();
|
|
1506
|
+
}
|
|
1507
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SliderComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1508
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: SliderComponent, isStandalone: true, selector: "Slider", inputs: { Minimum: "Minimum", Maximum: "Maximum", StepFrequency: "StepFrequency", Value: "Value", IsEnabled: "IsEnabled", Orientation: "Orientation" }, outputs: { ValueChange: "ValueChange" }, host: { listeners: { "pointerdown": "onThumbPointerDown($event)", "pointerup": "onThumbPointerUp($event)" } }, viewQueries: [{ propertyName: "_track", first: true, predicate: ["track"], descendants: true }, { propertyName: "_thumb", first: true, predicate: ["thumb"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<div #track [ngClass]="getClasses('track')" [ngStyle]="getStyle()">
|
|
1509
|
+
<div class="usable-range">
|
|
1510
|
+
<div #thumb [ngClass]="getClasses('thumb')">
|
|
1511
|
+
<div class="handle"></div>
|
|
1512
|
+
</div>
|
|
1513
|
+
</div>
|
|
1514
|
+
</div>`, isInline: true, styles: [":host{position:relative}:host{display:grid}.track{display:grid;background-color:var(--ControlStrongFillColorDefault);border-radius:2px}.track>.usable-range{container-type:size}.track.horizontal{height:4px;margin:6px 0;background:linear-gradient(to right,var(--AccentFillColorDefault) 0 var(--progress-percent),var(--ControlStrongFillColorDefault) var(--progress-percent) 100%)}.track.horizontal>.usable-range{margin:0 8px}.track.vertical{width:4px;margin:0 6px;background:linear-gradient(to top,var(--AccentFillColorDefault) 0 var(--progress-percent),var(--ControlStrongFillColorDefault) var(--progress-percent) 100%)}.track.vertical>.usable-range{margin:8px 0}.track.disabled{background:var(--ControlStrongFillColorDisabled)}.thumb{display:grid;border-radius:50%;width:16px;height:16px;box-sizing:border-box;border:1px solid var(--ControlStrokeColorOnAccentDefaultDark);background-color:var(--ControlSolidFillColorDefault)}.thumb.horizontal{transform:translate(calc(var(--progress-size) - 8px),-6px)}.thumb.vertical{transform:translate(-6px,calc(100cqh - var(--progress-size) - 8px))}.thumb>.handle{place-self:center;background-color:var(--AccentFillColorDefault);width:8px;height:8px;border-radius:50%;transition:transform var(--ControlFastAnimationDuration),background-color var(--ControlFastAnimationDuration)}.thumb:not(.disabled):hover>.handle{transform:scale(125%);background-color:var(--AccentFillColorSecondary)}.thumb:not(.disabled):active>.handle{transform:scale(75%);background-color:var(--AccentFillColorTertiary)}.thumb.disabled>.handle{transform:scale(125%);background-color:var(--AccentFillColorDisabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
1482
1515
|
}
|
|
1483
1516
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SliderComponent, decorators: [{
|
|
1484
1517
|
type: Component,
|
|
1485
|
-
args: [{ selector: 'Slider', template: `<
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
[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"] }]
|
|
1494
|
-
}], propDecorators: { Minimum: [{
|
|
1518
|
+
args: [{ selector: 'Slider', template: `<div #track [ngClass]="getClasses('track')" [ngStyle]="getStyle()">
|
|
1519
|
+
<div class="usable-range">
|
|
1520
|
+
<div #thumb [ngClass]="getClasses('thumb')">
|
|
1521
|
+
<div class="handle"></div>
|
|
1522
|
+
</div>
|
|
1523
|
+
</div>
|
|
1524
|
+
</div>`, imports: [CommonModule], styles: [":host{position:relative}:host{display:grid}.track{display:grid;background-color:var(--ControlStrongFillColorDefault);border-radius:2px}.track>.usable-range{container-type:size}.track.horizontal{height:4px;margin:6px 0;background:linear-gradient(to right,var(--AccentFillColorDefault) 0 var(--progress-percent),var(--ControlStrongFillColorDefault) var(--progress-percent) 100%)}.track.horizontal>.usable-range{margin:0 8px}.track.vertical{width:4px;margin:0 6px;background:linear-gradient(to top,var(--AccentFillColorDefault) 0 var(--progress-percent),var(--ControlStrongFillColorDefault) var(--progress-percent) 100%)}.track.vertical>.usable-range{margin:8px 0}.track.disabled{background:var(--ControlStrongFillColorDisabled)}.thumb{display:grid;border-radius:50%;width:16px;height:16px;box-sizing:border-box;border:1px solid var(--ControlStrokeColorOnAccentDefaultDark);background-color:var(--ControlSolidFillColorDefault)}.thumb.horizontal{transform:translate(calc(var(--progress-size) - 8px),-6px)}.thumb.vertical{transform:translate(-6px,calc(100cqh - var(--progress-size) - 8px))}.thumb>.handle{place-self:center;background-color:var(--AccentFillColorDefault);width:8px;height:8px;border-radius:50%;transition:transform var(--ControlFastAnimationDuration),background-color var(--ControlFastAnimationDuration)}.thumb:not(.disabled):hover>.handle{transform:scale(125%);background-color:var(--AccentFillColorSecondary)}.thumb:not(.disabled):active>.handle{transform:scale(75%);background-color:var(--AccentFillColorTertiary)}.thumb.disabled>.handle{transform:scale(125%);background-color:var(--AccentFillColorDisabled)}\n"] }]
|
|
1525
|
+
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { Minimum: [{
|
|
1495
1526
|
type: Input
|
|
1496
1527
|
}], Maximum: [{
|
|
1497
1528
|
type: Input
|
|
@@ -1505,12 +1536,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
1505
1536
|
type: Input
|
|
1506
1537
|
}], Orientation: [{
|
|
1507
1538
|
type: Input
|
|
1539
|
+
}], _track: [{
|
|
1540
|
+
type: ViewChild,
|
|
1541
|
+
args: ['track']
|
|
1542
|
+
}], _thumb: [{
|
|
1543
|
+
type: ViewChild,
|
|
1544
|
+
args: ['thumb']
|
|
1545
|
+
}], onThumbPointerDown: [{
|
|
1546
|
+
type: HostListener,
|
|
1547
|
+
args: ['pointerdown', ['$event']]
|
|
1548
|
+
}], onThumbPointerUp: [{
|
|
1549
|
+
type: HostListener,
|
|
1550
|
+
args: ['pointerup', ['$event']]
|
|
1508
1551
|
}] } });
|
|
1509
1552
|
|
|
1510
1553
|
class GridComponent extends PanelComponent {
|
|
1511
1554
|
constructor() {
|
|
1512
1555
|
super(...arguments);
|
|
1513
|
-
this.Orientation = '
|
|
1556
|
+
this.Orientation = 'Horizontal';
|
|
1514
1557
|
}
|
|
1515
1558
|
get gridAutoFlow() {
|
|
1516
1559
|
if (this.ColumnDefinitions == undefined && this.RowDefinitions == undefined) {
|
|
@@ -2362,11 +2405,11 @@ class FontIconComponent extends FrameworkElementComponent {
|
|
|
2362
2405
|
return TextBlockComponent.ToFontWeight(this.FontWeight);
|
|
2363
2406
|
}
|
|
2364
2407
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FontIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2365
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FontIconComponent, isStandalone: true, selector: "FontIcon", inputs: { FontFamily: "FontFamily", FontSize: "FontSize", FontStyle: "FontStyle", Foreground: "Foreground", FontWeight: "FontWeight", Glyph: "Glyph" }, host: { properties: { "style.font-family": "this.FontFamily", "style.font-size": "this.FontSize", "style.font-style": "this.FontStyle", "style.color": "this.Foreground", "style.font-weight": "this.fontWeight" } }, usesInheritance: true, ngImport: i0, template: `{{Glyph}}`, isInline: true, styles: [":host{font-family:Segoe Fluent Icons,Segoe MDL2 Assets}\n"] }); }
|
|
2408
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FontIconComponent, isStandalone: true, selector: "FontIcon", inputs: { FontFamily: "FontFamily", FontSize: "FontSize", FontStyle: "FontStyle", Foreground: "Foreground", FontWeight: "FontWeight", Glyph: "Glyph" }, host: { properties: { "style.font-family": "this.FontFamily", "style.font-size": "this.FontSize", "style.font-style": "this.FontStyle", "style.color": "this.Foreground", "style.font-weight": "this.fontWeight" } }, usesInheritance: true, ngImport: i0, template: `{{Glyph}}`, isInline: true, styles: [":host{font-family:Segoe Fluent Icons,Segoe MDL2 Assets;align-content:center}\n"] }); }
|
|
2366
2409
|
}
|
|
2367
2410
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FontIconComponent, decorators: [{
|
|
2368
2411
|
type: Component,
|
|
2369
|
-
args: [{ selector: 'FontIcon', template: `{{Glyph}}`, styles: [":host{font-family:Segoe Fluent Icons,Segoe MDL2 Assets}\n"] }]
|
|
2412
|
+
args: [{ selector: 'FontIcon', template: `{{Glyph}}`, styles: [":host{font-family:Segoe Fluent Icons,Segoe MDL2 Assets;align-content:center}\n"] }]
|
|
2370
2413
|
}], propDecorators: { FontFamily: [{
|
|
2371
2414
|
type: Input
|
|
2372
2415
|
}, {
|
|
@@ -2432,7 +2475,7 @@ class PersonPictureComponent extends FrameworkElementComponent {
|
|
|
2432
2475
|
return '?';
|
|
2433
2476
|
}
|
|
2434
2477
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PersonPictureComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2435
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: PersonPictureComponent, isStandalone: true, selector: "PersonPicture", inputs: { DisplayName: "DisplayName", ProfilePicture: "ProfilePicture", Initials: "Initials", BadgeText: "BadgeText", BadgeGlyph: "BadgeGlyph", BadgeImageSource: "BadgeImageSource" }, usesInheritance: true, ngImport: i0, template: `<div class="avatar">
|
|
2478
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: PersonPictureComponent, isStandalone: true, selector: "PersonPicture", inputs: { Foreground: "Foreground", Background: "Background", DisplayName: "DisplayName", ProfilePicture: "ProfilePicture", Initials: "Initials", BadgeText: "BadgeText", BadgeGlyph: "BadgeGlyph", BadgeImageSource: "BadgeImageSource" }, host: { properties: { "style.color": "this.Foreground", "style.background-color": "this.Background" } }, usesInheritance: true, ngImport: i0, template: `<div class="avatar">
|
|
2436
2479
|
<img *ngIf="ProfilePicture; else initialsTemplate"
|
|
2437
2480
|
[src]="ProfilePicture" alt="{{ DisplayName || Initials }}" />
|
|
2438
2481
|
<ng-template #initialsTemplate>
|
|
@@ -2459,7 +2502,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
2459
2502
|
<span *ngIf="BadgeText">{{ BadgeText }}</span>
|
|
2460
2503
|
<span *ngIf="BadgeGlyph" class="glyph">{{ BadgeGlyph }}</span>
|
|
2461
2504
|
</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"] }]
|
|
2462
|
-
}], propDecorators: {
|
|
2505
|
+
}], propDecorators: { Foreground: [{
|
|
2506
|
+
type: Input
|
|
2507
|
+
}, {
|
|
2508
|
+
type: HostBinding,
|
|
2509
|
+
args: ['style.color']
|
|
2510
|
+
}], Background: [{
|
|
2511
|
+
type: Input
|
|
2512
|
+
}, {
|
|
2513
|
+
type: HostBinding,
|
|
2514
|
+
args: ['style.background-color']
|
|
2515
|
+
}], DisplayName: [{
|
|
2463
2516
|
type: Input
|
|
2464
2517
|
}], ProfilePicture: [{
|
|
2465
2518
|
type: Input
|