@ptsecurity/mosaic 12.2.2 → 12.3.0

package/_theming.scss

@@ -1,4 +1,6 @@
 // Import all the theming
+@use '../../../node_modules/@angular/cdk/overlay/index' as overlay;
+
 @keyframes mc-progress {
     from {
         background-position: 0 0;
@@ -2218,149 +2220,6 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
     }
 }
 
-// We want overlays to always appear over user content, so set a baseline
-// very high z-index for the overlay container, which is where we create the new
-// stacking context for all overlays.
-$overlay-container-z-index: 1000 !default;
-$overlay-z-index: 1000 !default;
-$overlay-backdrop-z-index: 1000 !default;
-
-// Background color for all of the backdrops
-$overlay-backdrop-color: rgba(0, 0, 0, 0.32) !default;
-
-// Default backdrop animation is based on the Material Design swift-ease-out.
-$backdrop-animation-duration: 400ms !default;
-$backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
-
-/// Emits structural styles required for cdk/overlay to function.
-@mixin overlay() {
-  .cdk-overlay-container, .cdk-global-overlay-wrapper {
-    // Disable events from being captured on the overlay container.
-    pointer-events: none;
-
-    // The container should be the size of the viewport.
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-  }
-
-  // The overlay-container is an invisible element which contains all individual overlays.
-  .cdk-overlay-container {
-    position: fixed;
-    z-index: $overlay-container-z-index;
-
-    &:empty {
-      // Hide the element when it doesn't have any child nodes. This doesn't
-      // include overlays that have been detached, rather than disposed.
-      display: none;
-    }
-  }
-
-  // We use an extra wrapper element in order to use make the overlay itself a flex item.
-  // This makes centering the overlay easy without running into the subpixel rendering
-  // problems tied to using `transform` and without interfering with the other position
-  // strategies.
-  .cdk-global-overlay-wrapper {
-    display: flex;
-    position: absolute;
-    z-index: $overlay-z-index;
-  }
-
-  // A single overlay pane.
-  .cdk-overlay-pane {
-    // Note: it's important for this one to start off `absolute`,
-    // in order for us to be able to measure it correctly.
-    position: absolute;
-    pointer-events: auto;
-    box-sizing: border-box;
-    z-index: $overlay-z-index;
-
-    // For connected-position overlays, we set `display: flex` in
-    // order to force `max-width` and `max-height` to take effect.
-    display: flex;
-    max-width: 100%;
-    max-height: 100%;
-  }
-
-  .cdk-overlay-backdrop {
-    // TODO(jelbourn): reuse sidenav fullscreen mixin.
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-
-    z-index: $overlay-backdrop-z-index;
-    pointer-events: auto;
-    -webkit-tap-highlight-color: transparent;
-    transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function;
-    opacity: 0;
-
-    &.cdk-overlay-backdrop-showing {
-      opacity: 1;
-
-      // Note that we can't import and use the `high-contrast` mixin from `_a11y.scss`, because
-      // this file will be copied to the top-level `cdk` package when putting together the files
-      // for npm. Any relative import paths we use here will become invalid once the file is copied.
-      .cdk-high-contrast-active & {
-        // In high contrast mode the rgba background will become solid
-        // so we need to fall back to making it opaque using `opacity`.
-        opacity: 0.6;
-      }
-    }
-  }
-
-  .cdk-overlay-dark-backdrop {
-    background: $overlay-backdrop-color;
-  }
-
-  .cdk-overlay-transparent-backdrop {
-    // Note: as of Firefox 57, having the backdrop be `background: none` will prevent it from
-    // capturing the user's mouse scroll events. Since we also can't use something like
-    // `rgba(0, 0, 0, 0)`, we work around the inconsistency by not setting the background at
-    // all and using `opacity` to make the element transparent.
-    &, &.cdk-overlay-backdrop-showing {
-      opacity: 0;
-    }
-  }
-
-  // Overlay parent element used with the connected position strategy. Used to constrain the
-  // overlay element's size to fit within the viewport.
-  .cdk-overlay-connected-position-bounding-box {
-    position: absolute;
-    z-index: $overlay-z-index;
-
-    // We use `display: flex` on this element exclusively for centering connected overlays.
-    // When *not* centering, a top/left/bottom/right will be set which overrides the normal
-    // flex layout.
-    display: flex;
-
-    // We use the `column` direction here to avoid some flexbox issues in Edge
-    // when using the "grow after open" options.
-    flex-direction: column;
-
-    // Add some dimensions so the element has an `innerText` which some people depend on in tests.
-    min-width: 1px;
-    min-height: 1px;
-  }
-
-  // Used when disabling global scrolling.
-  .cdk-global-scrollblock {
-    position: fixed;
-
-    // Necessary for the content not to lose its width. Note that we're using 100%, instead of
-    // 100vw, because 100vw includes the width plus the scrollbar, whereas 100% is the width
-    // that the element had before we made it `fixed`.
-    width: 100%;
-
-    // Note: this will always add a scrollbar to whatever element it is on, which can
-    // potentially result in double scrollbars. It shouldn't be an issue, because we won't
-    // block scrolling on a page that doesn't have a scrollbar in the first place.
-    overflow-y: scroll;
-  }
-}
-
 
 
 
@@ -6054,7 +5913,7 @@ $mc-datepicker-today-fade-amount: 0.2;
 @mixin mc-core($typography-config: null) {
     @include mosaic-typography($typography-config);
     @include cdk-a11y();
-    @include cdk-overlay();
+    @include overlay.overlay();
 }
 
 // Mixin that renders all of the core styles that depend on the theme.
@@ -6338,6 +6197,10 @@ $mc-datepicker-today-fade-amount: 0.2;
             cursor: default;
         }
     }
+
+    .mc-gutter-ghost {
+        background: mc-color($background, overlay-disabled);
+    }
 }
 
 
@@ -6354,12 +6217,12 @@ $mc-datepicker-today-fade-amount: 0.2;
             & > td {
                 padding: {
                     top: var(--mc-table-size-row-padding-vertical, $table-size-row-padding-vertical);
-                    right: (var(--mc-table-size-row-padding-horizontal, $table-size-row-padding-horizontal) / 2);
+                    right: calc((var(--mc-table-size-row-padding-horizontal, $table-size-row-padding-horizontal) / 2));
                     bottom: (
-                        var(--mc-table-size-row-padding-vertical, $table-size-row-padding-vertical) -
-                        var(--mc-table-size-border-width, $table-size-border-width)
+                        calc(var(--mc-table-size-row-padding-vertical, $table-size-row-padding-vertical) -
+                        var(--mc-table-size-border-width, $table-size-border-width))
                     );
-                    left: (var(--mc-table-size-row-padding-horizontal, $table-size-row-padding-horizontal) / 2)
+                    left: calc((var(--mc-table-size-row-padding-horizontal, $table-size-row-padding-horizontal) / 2))
                 };
 
                 vertical-align: baseline;
@@ -6384,8 +6247,8 @@ $mc-datepicker-today-fade-amount: 0.2;
             padding: {
                 top: var(--mc-table-size-row-padding-vertical, $table-size-row-padding-vertical);
                 bottom: (
-                    var(--mc-table-size-row-padding-vertical, $table-size-row-padding-vertical) -
-                    var(--mc-table-size-border-width, $table-size-border-width)
+                    calc(var(--mc-table-size-row-padding-vertical, $table-size-row-padding-vertical) -
+                    var(--mc-table-size-border-width, $table-size-border-width))
                 );
             }
 
@@ -6399,6 +6262,7 @@ $mc-datepicker-today-fade-amount: 0.2;
             border-bottom: var(--mc-table-size-border-width, $table-size-border-width) solid transparent;
         }
     }
+
     /* stylelint-enable no-descending-specificity */
 }
 

package/bundles/ptsecurity-mosaic-button.umd.js

@@ -430,7 +430,7 @@
         return McButton;
     }(McButtonMixinBase));
     /** @nocollapse */ McButton.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: McButton, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace.FocusMonitor }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ McButton.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: McButton, selector: "button[mc-button]", inputs: { disabled: "disabled", color: "color" }, host: { properties: { "attr.disabled": "disabled || null" } }, usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"mc-button-wrapper\">\n    <ng-content></ng-content>\n</div>\n<div class=\"mc-button-overlay\"></div>\n", styles: [".mc-icon-button,.mc-light-button,.mc-button{-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;position:relative;box-sizing:border-box;display:inline-block;white-space:nowrap;text-decoration:none;text-align:center;vertical-align:baseline;border:1px solid transparent;border:var(--mc-button-size-border-width, 1px) solid transparent;border-radius:3px;border-radius:var(--mc-button-size-border-radius, 3px)}.mc-icon-button::-moz-focus-inner,.mc-light-button::-moz-focus-inner,.mc-button::-moz-focus-inner{border:0}.mc-icon-button:focus,.mc-light-button:focus,.mc-button:focus{outline:none}[disabled].mc-icon-button,[disabled].mc-light-button,[disabled].mc-button{pointer-events:none;cursor:default}.cdk-focused.mc-icon-button,.cdk-focused.mc-light-button,.cdk-focused.mc-button{z-index:1}.mc-button{padding:calc(6px - 1px) calc(16px - 1px);padding:calc(var(--mc-button-size-vertical-padding, 6px) - var(--mc-button-size-border-width, 1px)) calc(var(--mc-button-size-horizontal-padding, 16px) - var(--mc-button-size-border-width, 1px))}.mc-icon-button{padding:calc(6px - 1px) calc(8px - 1px);padding:calc(var(--mc-icon-button-size-vertical-padding, 6px) - var(--mc-button-size-border-width, 1px)) calc(var(--mc-icon-button-size-horizontal-padding, 8px) - var(--mc-button-size-border-width, 1px))}.mc-icon-button.mc-icon-button_left{padding-right:calc(16px - 1px);padding-right:calc(var(--mc-icon-button-size-icon-horizontal-padding, 16px) - var(--mc-button-size-border-width, 1px))}.mc-icon-button.mc-icon-button_right{padding-left:calc(16px - 1px);padding-left:calc(var(--mc-icon-button-size-icon-horizontal-padding, 16px) - var(--mc-button-size-border-width, 1px))}.mc-icon-button .mc-button-wrapper{display:flex}.mc-icon-button .mc-button-wrapper .mc-icon{margin:auto;line-height:20px}.mc-icon-button .mc-button-wrapper .mc-icon_left{margin-right:8px;margin-right:var(--mc-icon-button-size-icon-padding, 8px)}.mc-icon-button .mc-button-wrapper .mc-icon_right{margin-left:8px;margin-left:var(--mc-icon-button-size-icon-padding, 8px)}.mc-button-overlay{position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;pointer-events:none;border-radius:inherit}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    /** @nocollapse */ McButton.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: McButton, selector: "button[mc-button]", inputs: { disabled: "disabled", color: "color" }, host: { properties: { "attr.disabled": "disabled || null" } }, usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"mc-button-wrapper\">\n    <ng-content></ng-content>\n</div>\n<div class=\"mc-button-overlay\"></div>\n", styles: [".mc-icon-button,.mc-light-button,.mc-button{-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;position:relative;box-sizing:border-box;display:inline-block;margin:0;white-space:nowrap;text-decoration:none;text-align:center;vertical-align:baseline;border:1px solid transparent;border:var(--mc-button-size-border-width, 1px) solid transparent;border-radius:3px;border-radius:var(--mc-button-size-border-radius, 3px)}.mc-icon-button::-moz-focus-inner,.mc-light-button::-moz-focus-inner,.mc-button::-moz-focus-inner{border:0}.mc-icon-button:focus,.mc-light-button:focus,.mc-button:focus{outline:none}[disabled].mc-icon-button,[disabled].mc-light-button,[disabled].mc-button{pointer-events:none;cursor:default}.cdk-focused.mc-icon-button,.cdk-focused.mc-light-button,.cdk-focused.mc-button{z-index:1}.mc-button{padding:calc(6px - 1px) calc(16px - 1px);padding:calc(var(--mc-button-size-vertical-padding, 6px) - var(--mc-button-size-border-width, 1px)) calc(var(--mc-button-size-horizontal-padding, 16px) - var(--mc-button-size-border-width, 1px))}.mc-icon-button{padding:calc(6px - 1px) calc(8px - 1px);padding:calc(var(--mc-icon-button-size-vertical-padding, 6px) - var(--mc-button-size-border-width, 1px)) calc(var(--mc-icon-button-size-horizontal-padding, 8px) - var(--mc-button-size-border-width, 1px))}.mc-icon-button.mc-icon-button_left{padding-right:calc(16px - 1px);padding-right:calc(var(--mc-icon-button-size-icon-horizontal-padding, 16px) - var(--mc-button-size-border-width, 1px))}.mc-icon-button.mc-icon-button_right{padding-left:calc(16px - 1px);padding-left:calc(var(--mc-icon-button-size-icon-horizontal-padding, 16px) - var(--mc-button-size-border-width, 1px))}.mc-icon-button .mc-button-wrapper{display:flex}.mc-icon-button .mc-button-wrapper .mc-icon{margin:auto;line-height:20px}.mc-icon-button .mc-button-wrapper .mc-icon_left{margin-right:8px;margin-right:var(--mc-icon-button-size-icon-padding, 8px)}.mc-icon-button .mc-button-wrapper .mc-icon_right{margin-left:8px;margin-left:var(--mc-icon-button-size-icon-padding, 8px)}.mc-button-overlay{position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;pointer-events:none;border-radius:inherit}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: McButton, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -459,7 +459,7 @@
         return McAnchor;
     }(McButton));
     /** @nocollapse */ McAnchor.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: McAnchor, deps: [{ token: i1__namespace.FocusMonitor }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ McAnchor.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: McAnchor, selector: "a[mc-button]", inputs: { disabled: "disabled", color: "color", tabIndex: "tabIndex" }, host: { listeners: { "click": "haltDisabledEvents($event)" }, properties: { "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null" } }, usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"mc-button-wrapper\">\n    <ng-content></ng-content>\n</div>\n<div class=\"mc-button-overlay\"></div>\n", styles: [".mc-icon-button,.mc-light-button,.mc-button{-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;position:relative;box-sizing:border-box;display:inline-block;white-space:nowrap;text-decoration:none;text-align:center;vertical-align:baseline;border:1px solid transparent;border:var(--mc-button-size-border-width, 1px) solid transparent;border-radius:3px;border-radius:var(--mc-button-size-border-radius, 3px)}.mc-icon-button::-moz-focus-inner,.mc-light-button::-moz-focus-inner,.mc-button::-moz-focus-inner{border:0}.mc-icon-button:focus,.mc-light-button:focus,.mc-button:focus{outline:none}[disabled].mc-icon-button,[disabled].mc-light-button,[disabled].mc-button{pointer-events:none;cursor:default}.cdk-focused.mc-icon-button,.cdk-focused.mc-light-button,.cdk-focused.mc-button{z-index:1}.mc-button{padding:calc(6px - 1px) calc(16px - 1px);padding:calc(var(--mc-button-size-vertical-padding, 6px) - var(--mc-button-size-border-width, 1px)) calc(var(--mc-button-size-horizontal-padding, 16px) - var(--mc-button-size-border-width, 1px))}.mc-icon-button{padding:calc(6px - 1px) calc(8px - 1px);padding:calc(var(--mc-icon-button-size-vertical-padding, 6px) - var(--mc-button-size-border-width, 1px)) calc(var(--mc-icon-button-size-horizontal-padding, 8px) - var(--mc-button-size-border-width, 1px))}.mc-icon-button.mc-icon-button_left{padding-right:calc(16px - 1px);padding-right:calc(var(--mc-icon-button-size-icon-horizontal-padding, 16px) - var(--mc-button-size-border-width, 1px))}.mc-icon-button.mc-icon-button_right{padding-left:calc(16px - 1px);padding-left:calc(var(--mc-icon-button-size-icon-horizontal-padding, 16px) - var(--mc-button-size-border-width, 1px))}.mc-icon-button .mc-button-wrapper{display:flex}.mc-icon-button .mc-button-wrapper .mc-icon{margin:auto;line-height:20px}.mc-icon-button .mc-button-wrapper .mc-icon_left{margin-right:8px;margin-right:var(--mc-icon-button-size-icon-padding, 8px)}.mc-icon-button .mc-button-wrapper .mc-icon_right{margin-left:8px;margin-left:var(--mc-icon-button-size-icon-padding, 8px)}.mc-button-overlay{position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;pointer-events:none;border-radius:inherit}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    /** @nocollapse */ McAnchor.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: McAnchor, selector: "a[mc-button]", inputs: { disabled: "disabled", color: "color", tabIndex: "tabIndex" }, host: { listeners: { "click": "haltDisabledEvents($event)" }, properties: { "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null" } }, usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"mc-button-wrapper\">\n    <ng-content></ng-content>\n</div>\n<div class=\"mc-button-overlay\"></div>\n", styles: [".mc-icon-button,.mc-light-button,.mc-button{-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;position:relative;box-sizing:border-box;display:inline-block;margin:0;white-space:nowrap;text-decoration:none;text-align:center;vertical-align:baseline;border:1px solid transparent;border:var(--mc-button-size-border-width, 1px) solid transparent;border-radius:3px;border-radius:var(--mc-button-size-border-radius, 3px)}.mc-icon-button::-moz-focus-inner,.mc-light-button::-moz-focus-inner,.mc-button::-moz-focus-inner{border:0}.mc-icon-button:focus,.mc-light-button:focus,.mc-button:focus{outline:none}[disabled].mc-icon-button,[disabled].mc-light-button,[disabled].mc-button{pointer-events:none;cursor:default}.cdk-focused.mc-icon-button,.cdk-focused.mc-light-button,.cdk-focused.mc-button{z-index:1}.mc-button{padding:calc(6px - 1px) calc(16px - 1px);padding:calc(var(--mc-button-size-vertical-padding, 6px) - var(--mc-button-size-border-width, 1px)) calc(var(--mc-button-size-horizontal-padding, 16px) - var(--mc-button-size-border-width, 1px))}.mc-icon-button{padding:calc(6px - 1px) calc(8px - 1px);padding:calc(var(--mc-icon-button-size-vertical-padding, 6px) - var(--mc-button-size-border-width, 1px)) calc(var(--mc-icon-button-size-horizontal-padding, 8px) - var(--mc-button-size-border-width, 1px))}.mc-icon-button.mc-icon-button_left{padding-right:calc(16px - 1px);padding-right:calc(var(--mc-icon-button-size-icon-horizontal-padding, 16px) - var(--mc-button-size-border-width, 1px))}.mc-icon-button.mc-icon-button_right{padding-left:calc(16px - 1px);padding-left:calc(var(--mc-icon-button-size-icon-horizontal-padding, 16px) - var(--mc-button-size-border-width, 1px))}.mc-icon-button .mc-button-wrapper{display:flex}.mc-icon-button .mc-button-wrapper .mc-icon{margin:auto;line-height:20px}.mc-icon-button .mc-button-wrapper .mc-icon_left{margin-right:8px;margin-right:var(--mc-icon-button-size-icon-padding, 8px)}.mc-icon-button .mc-button-wrapper .mc-icon_right{margin-left:8px;margin-left:var(--mc-icon-button-size-icon-padding, 8px)}.mc-button-overlay{position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;pointer-events:none;border-radius:inherit}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: McAnchor, decorators: [{
                 type: i0.Component,
                 args: [{

package/bundles/ptsecurity-mosaic-core.umd.js

@@ -2517,7 +2517,6 @@
                 type: i0.Directive
             }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; } });
 
-    var VIEWPORT_MARGIN = 8;
     // tslint:disable-next-line:naming-convention
     var McPopUpTrigger = /** @class */ (function () {
         function McPopUpTrigger(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction) {
@@ -2670,7 +2669,6 @@
                 .flexibleConnectedTo(this.elementRef)
                 .withTransformOriginOn(this.originSelector)
                 .withFlexibleDimensions(false)
-                .withViewportMargin(VIEWPORT_MARGIN)
                 .withPositions(__spreadArray([], __read(EXTENDED_OVERLAY_POSITIONS)))
                 .withScrollableContainers(this.scrollDispatcher.getAncestorScrollContainers(this.elementRef));
             strategy.positionChanges