xaml-ui 1.0.34 → 1.0.35

package/fesm2022/xaml-ui.mjs

@@ -57,14 +57,6 @@ class FrameworkElementComponent {
     get alignSelf() {
         return ToAlignment(this.VerticalAlignment);
     }
-    //True on Safari and on the other WebKit based browsers of Apple platforms, which share its layout
-    //engine. Evaluated once, as host bindings are re-read on every change detection pass.
-    static get IsSafari() {
-        if (this._isSafari === undefined) {
-            this._isSafari = typeof navigator !== 'undefined' && /apple/i.test(navigator.vendor ?? '');
-        }
-        return this._isSafari;
-    }
     static { this._nextId = 1; }
     static { this.DefaultStyles = `:host {
     display: grid;
@@ -201,6 +193,9 @@ class TextBlockComponent extends FrameworkElementComponent {
             return this.MinWidth;
         return this.MaxWidth === undefined && this.HorizontalAlignment === 'Stretch' && this.TextTrimming === 'None' ? 'min-content' : undefined;
     }
+    get overflow() {
+        return this.TextTrimming !== 'None' ? 'hidden' : undefined;
+    }
     get fontWeight() {
         return TextBlockComponent.ToFontWeight(this.FontWeight);
     }
@@ -1398,24 +1393,13 @@ class ScrollBarComponent extends FrameworkElementComponent {
         return this.Orientation === 'Vertical' ? event.clientY : event.clientX;
     }
     get thumbStyle() {
-        if (!this._track)
-            return {};
-        let trackLength = this.getElementSize(this._track.nativeElement);
-        let scrollPosition = this.Value / (this.ScrollSize - this.ViewportSize);
-        let size = trackLength * (this.ViewportSize / this.ScrollSize);
-        let position = scrollPosition * (trackLength - size);
-        switch (this.Orientation) {
-            case 'Vertical':
-                return {
-                    'height': size + 'px',
-                    'top': position + 'px'
-                };
-            case 'Horizontal':
-                return {
-                    'width': size + 'px',
-                    'left': position + 'px'
-                };
-        }
+        let scrollRange = this.ScrollSize - this.ViewportSize;
+        let size = this.ScrollSize > 0 ? Math.min(this.ViewportSize / this.ScrollSize, 1) : 1;
+        let position = scrollRange > 0 ? Math.min(Math.max(this.Value / scrollRange, 0), 1) : 0;
+        return {
+            '--thumb-size': size * 100 + '%',
+            '--thumb-position': position
+        };
     }
     onButtonDown(event, direction) {
         event.target.setPointerCapture(event.pointerId);
@@ -1492,7 +1476,7 @@ class ScrollBarComponent extends FrameworkElementComponent {
     <div #track class="track" (pointerdown)="onTrackDown($event)" (pointerup)="onTrackUp($event)">
       <div #thumb class="thumb" [ngStyle]="thumbStyle" (pointerdown)="onPointerDown($event)" (pointermove)="onPointerMove($event)" (pointerup)="onPointerUp($event)"></div>
     </div>
-    <div class="buttons" (pointerdown)="onButtonDown($event, true)" (pointerup)="onButtonUp($event)">{{increaseGlyph}}</div>`, isInline: true, styles: [":host{position:relative}:host{display:grid;background-color:var(--SubtleFillColorTransparent)}:host.horizontal{grid-template-columns:auto 1fr auto}:host.horizontal>.buttons{align-self:center}:host.horizontal>.track{transform:translateY(-.75px);align-self:center;margin:0 -2px 0 -3px}:host.horizontal>.track>.thumb{transform:translateY(3px)}:host.vertical{grid-template-rows:auto 1fr auto}:host.vertical>.buttons{justify-self:center}:host.vertical>.track{transform:translate(-.75px);justify-self:center;margin:-3px 0 -2px}:host.vertical>.track>.thumb{transform:translate(3px)}:host:hover>.buttons{display:grid;opacity:1}:host:hover>.track>.thumb{min-width:10px;min-height:10px;transform:translate(0)}:host>.buttons{display:hidden;font-family:var(--SymbolFontFamily);font-size:8pt;min-width:12px;min-height:12px;margin:4px;transform-origin:center;opacity:0;transition:opacity var(--ControlNormalAnimationDuration);color:var(--ControlStrongFillColorDefault)}:host>.buttons:hover{color:var(--TextFillColorSecondary)}:host>.buttons:active{color:var(--TextFillColorSecondary);transform:scale(.875)}:host>.track{display:grid;position:relative}:host>.track>.thumb{background-color:var(--ControlStrongFillColorDefault);position:relative;border-radius:3px;transition:transform var(--ControlNormalAnimationDuration),min-width var(--ControlNormalAnimationDuration),min-height var(--ControlNormalAnimationDuration);min-width:2px;min-height:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    <div class="buttons" (pointerdown)="onButtonDown($event, true)" (pointerup)="onButtonUp($event)">{{increaseGlyph}}</div>`, isInline: true, styles: [":host{position:relative}:host{display:grid;background-color:var(--SubtleFillColorTransparent)}:host.horizontal{grid-template-columns:auto 1fr auto}:host.horizontal>.buttons{align-self:center}:host.horizontal>.track{transform:translateY(-.75px);align-self:center;margin:0 -2px 0 -3px}:host.horizontal>.track>.thumb{transform:translateY(3px);width:var(--thumb-size);left:calc((100% - max(var(--thumb-size),var(--thumb-min-size))) * var(--thumb-position))}:host.vertical{grid-template-rows:auto 1fr auto}:host.vertical>.buttons{justify-self:center}:host.vertical>.track{transform:translate(-.75px);justify-self:center;margin:-3px 0 -2px}:host.vertical>.track>.thumb{transform:translate(3px);height:var(--thumb-size);top:calc((100% - max(var(--thumb-size),var(--thumb-min-size))) * var(--thumb-position))}:host:hover>.buttons{display:grid;opacity:1}:host:hover>.track>.thumb{--thumb-min-size: 10px;transform:translate(0)}:host>.buttons{display:hidden;font-family:var(--SymbolFontFamily);font-size:8pt;min-width:12px;min-height:12px;margin:4px;transform-origin:center;opacity:0;transition:opacity var(--ControlNormalAnimationDuration);color:var(--ControlStrongFillColorDefault)}:host>.buttons:hover{color:var(--TextFillColorSecondary)}:host>.buttons:active{color:var(--TextFillColorSecondary);transform:scale(.875)}:host>.track{display:grid;position:relative}:host>.track>.thumb{background-color:var(--ControlStrongFillColorDefault);position:relative;border-radius:3px;transition:transform var(--ControlNormalAnimationDuration),min-width var(--ControlNormalAnimationDuration),min-height var(--ControlNormalAnimationDuration);--thumb-min-size: 2px;min-width:var(--thumb-min-size);min-height:var(--thumb-min-size)}\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: ScrollBarComponent, decorators: [{
             type: Component,
@@ -1500,7 +1484,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
     <div #track class="track" (pointerdown)="onTrackDown($event)" (pointerup)="onTrackUp($event)">
       <div #thumb class="thumb" [ngStyle]="thumbStyle" (pointerdown)="onPointerDown($event)" (pointermove)="onPointerMove($event)" (pointerup)="onPointerUp($event)"></div>
     </div>
-    <div class="buttons" (pointerdown)="onButtonDown($event, true)" (pointerup)="onButtonUp($event)">{{increaseGlyph}}</div>`, styles: [":host{position:relative}:host{display:grid;background-color:var(--SubtleFillColorTransparent)}:host.horizontal{grid-template-columns:auto 1fr auto}:host.horizontal>.buttons{align-self:center}:host.horizontal>.track{transform:translateY(-.75px);align-self:center;margin:0 -2px 0 -3px}:host.horizontal>.track>.thumb{transform:translateY(3px)}:host.vertical{grid-template-rows:auto 1fr auto}:host.vertical>.buttons{justify-self:center}:host.vertical>.track{transform:translate(-.75px);justify-self:center;margin:-3px 0 -2px}:host.vertical>.track>.thumb{transform:translate(3px)}:host:hover>.buttons{display:grid;opacity:1}:host:hover>.track>.thumb{min-width:10px;min-height:10px;transform:translate(0)}:host>.buttons{display:hidden;font-family:var(--SymbolFontFamily);font-size:8pt;min-width:12px;min-height:12px;margin:4px;transform-origin:center;opacity:0;transition:opacity var(--ControlNormalAnimationDuration);color:var(--ControlStrongFillColorDefault)}:host>.buttons:hover{color:var(--TextFillColorSecondary)}:host>.buttons:active{color:var(--TextFillColorSecondary);transform:scale(.875)}:host>.track{display:grid;position:relative}:host>.track>.thumb{background-color:var(--ControlStrongFillColorDefault);position:relative;border-radius:3px;transition:transform var(--ControlNormalAnimationDuration),min-width var(--ControlNormalAnimationDuration),min-height var(--ControlNormalAnimationDuration);min-width:2px;min-height:2px}\n"] }]
+    <div class="buttons" (pointerdown)="onButtonDown($event, true)" (pointerup)="onButtonUp($event)">{{increaseGlyph}}</div>`, styles: [":host{position:relative}:host{display:grid;background-color:var(--SubtleFillColorTransparent)}:host.horizontal{grid-template-columns:auto 1fr auto}:host.horizontal>.buttons{align-self:center}:host.horizontal>.track{transform:translateY(-.75px);align-self:center;margin:0 -2px 0 -3px}:host.horizontal>.track>.thumb{transform:translateY(3px);width:var(--thumb-size);left:calc((100% - max(var(--thumb-size),var(--thumb-min-size))) * var(--thumb-position))}:host.vertical{grid-template-rows:auto 1fr auto}:host.vertical>.buttons{justify-self:center}:host.vertical>.track{transform:translate(-.75px);justify-self:center;margin:-3px 0 -2px}:host.vertical>.track>.thumb{transform:translate(3px);height:var(--thumb-size);top:calc((100% - max(var(--thumb-size),var(--thumb-min-size))) * var(--thumb-position))}:host:hover>.buttons{display:grid;opacity:1}:host:hover>.track>.thumb{--thumb-min-size: 10px;transform:translate(0)}:host>.buttons{display:hidden;font-family:var(--SymbolFontFamily);font-size:8pt;min-width:12px;min-height:12px;margin:4px;transform-origin:center;opacity:0;transition:opacity var(--ControlNormalAnimationDuration);color:var(--ControlStrongFillColorDefault)}:host>.buttons:hover{color:var(--TextFillColorSecondary)}:host>.buttons:active{color:var(--TextFillColorSecondary);transform:scale(.875)}:host>.track{display:grid;position:relative}:host>.track>.thumb{background-color:var(--ControlStrongFillColorDefault);position:relative;border-radius:3px;transition:transform var(--ControlNormalAnimationDuration),min-width var(--ControlNormalAnimationDuration),min-height var(--ControlNormalAnimationDuration);--thumb-min-size: 2px;min-width:var(--thumb-min-size);min-height:var(--thumb-min-size)}\n"] }]
         }], propDecorators: { Orientation: [{
                 type: Input
             }], ViewportSize: [{
@@ -1951,15 +1935,18 @@ class FlyoutBaseComponent {
         //Start hide animation
         this.isVisible = false;
         //Remove event handlers
-        if (this._backdropContextMenuSubscription)
+        if (this._backdropContextMenuSubscription) {
             this._backdropContextMenuSubscription();
+            this._backdropContextMenuSubscription = undefined;
+        }
         //Dispose overlay after hidden
-        if (!this._overlayRef)
+        const overlayRef = this._overlayRef;
+        if (!overlayRef)
             return;
-        await resume_after(FlyoutPresenter.TransitionDuration);
-        this._overlayRef.detach();
-        this._overlayRef.dispose();
         this._overlayRef = undefined;
+        await resume_after(FlyoutPresenter.TransitionDuration);
+        overlayRef.detach();
+        overlayRef.dispose();
     }
     get Target() {
         return this._target;
@@ -3443,14 +3430,15 @@ class ToolTipDirective {
         //Start hide animation
         this._toolTip?.setInput('IsVisible', false);
         //Dispose overlay after hidden
-        if (!this._overlayRef)
+        const overlayRef = this._overlayRef;
+        if (!overlayRef)
             return;
-        await resume_after(ToolTipComponent.TransitionDuration);
         this._hostElement.nativeElement.removeAttribute('aria-describedby');
         this._toolTip = undefined;
-        this._overlayRef.detach();
-        this._overlayRef.dispose();
         this._overlayRef = undefined;
+        await resume_after(ToolTipComponent.TransitionDuration);
+        overlayRef.detach();
+        overlayRef.dispose();
     }
     static getPositionCandidates(placement) {
         //Primary placement plus the opposite side as a fallback, so the tip flips when it would clip.