@ng-matero/extensions 16.3.1 → 17.0.0

package/grid/grid.scss

@@ -14,6 +14,8 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
 
     border: 1px solid var($border-color);
 
+    @include token-utils.create-token-slot(border-radius, container-shape);
+
     .mat-mdc-table {
       &.mat-table-striped .mat-row-odd {
         @include token-utils.create-token-slot(background-color, table-row-striped-background-color);
@@ -52,7 +54,9 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
     .mat-mdc-footer-cell,
     .mat-mdc-cell {
       &:not(.mtx-grid-checkbox-cell) {
-        min-width: 80px;
+        @include token-utils.use-tokens($_tokens...) {
+          @include token-utils.create-token-slot(min-width, table-cell-min-width);
+        }
       }
     }
   }
@@ -75,41 +79,6 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
     }
   }
 
-  .mat-mdc-header-cell,
-  .mat-mdc-footer-cell,
-  .mat-mdc-cell {
-    padding: 4px 10px;
-    box-sizing: border-box;
-
-    &:first-of-type:not(:only-of-type) {
-      padding-left: 24px;
-
-      &.mtx-grid-checkbox-cell {
-        padding-left: 10px;
-        padding-right: 10px;
-      }
-
-      [dir='rtl'] & {
-        padding-left: 10px;
-        padding-right: 24px;
-
-        &.mtx-grid-checkbox-cell {
-          padding-left: 10px;
-          padding-right: 10px;
-        }
-      }
-    }
-
-    &:last-of-type:not(:only-of-type) {
-      padding-right: 24px;
-
-      [dir='rtl'] & {
-        padding-left: 24px;
-        padding-right: 10px;
-      }
-    }
-  }
-
   .mat-mdc-footer-cell {
     border-top: 1px solid var(--mat-table-row-item-outline-color);
 
@@ -118,22 +87,16 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
     }
   }
 
-  .mat-mdc-row {
-    &.mtx-grid-expansion {
-      height: 0;
-      overflow: hidden;
+  .mat-mdc-row.mtx-grid-expansion {
+    height: 0;
+    overflow: hidden;
 
-      .mat-mdc-cell {
-        padding-top: 0;
-        padding-bottom: 0;
-      }
-
-      &.collapsed .mat-mdc-cell {
-        border-bottom-width: 0;
-      }
+    .mat-mdc-cell {
+      padding-top: 0;
+      padding-bottom: 0;
     }
 
-    &:last-of-type .mat-cell {
+    &.collapsed .mat-mdc-cell {
       border-bottom-width: 0;
     }
   }
@@ -145,6 +108,7 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
   .mat-header-cell-inner {
     display: inline-flex;
     align-items: center;
+    vertical-align: middle;
   }
 
   .mat-mdc-paginator {
@@ -152,12 +116,21 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
       $border-color: token-utils.get-token-variable(outline-color);
 
       border-top: 1px solid var($border-color);
+
+      @include token-utils.create-token-slot(border-bottom-left-radius, container-shape);
+      @include token-utils.create-token-slot(border-bottom-right-radius, container-shape);
     }
   }
 
   .mat-paginator-hidden {
     display: none;
   }
+
+  .mtx-grid-checkbox-cell {
+    width: 60px;
+    min-width: 60px;
+    padding: 0 calc((60px - var(--mdc-checkbox-state-layer-size)) / 2);
+  }
 }
 
 .mtx-grid-progress {
@@ -182,6 +155,12 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
   }
 }
 
+.mtx-grid-toolbar-content {
+  flex: 1;
+  width: 0;
+  padding: 0 8px;
+}
+
 .mtx-grid-layout {
   display: flex;
   flex: 1 1 auto;
@@ -236,52 +215,30 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
 
 .mtx-grid-expansion-placeholder {
   display: inline-block;
-  width: 40px;
-  height: 40px;
   vertical-align: middle;
+
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(width, row-expand-button-size);
+    @include token-utils.create-token-slot(height, row-expand-button-size);
+  }
 }
 
 .mtx-grid-expansion-detail {
   display: flex;
   align-items: center;
-  min-height: 48px;
+  min-height: var(--mat-table-row-item-container-height);
   overflow: hidden;
 }
 
-.mtx-grid-checkbox-cell {
-  flex: none;
-  justify-content: center;
-  width: 60px;
-  min-width: 60px;
-
-  .mat-checkbox {
-    display: flex; // Fix checkbox height
-    margin: 0 10px;
-  }
-
-  .mat-checkbox-inner-container {
-    margin-left: 0; // Fix checkbox margin with RTL
-  }
-}
-
-.mtx-grid-row-expand-button.mat-mdc-icon-button {
-  width: 40px;
-  height: 40px;
-  padding: 8px;
-  vertical-align: middle;
-
+.mtx-grid-row-expand-button {
   &.expanded .mtx-grid-row-expand-icon {
     transform: rotate(90deg);
   }
 
+  &.mat-mdc-icon-button,
   +mtx-grid-cell {
     vertical-align: middle;
   }
-
-  .mat-mdc-button-touch-target {
-    width: 100%;
-    height: 100%;
-  }
 }
 
 .mtx-grid-icon {
@@ -289,32 +246,3 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
   height: 20px;
   font-size: 20px;
 }
-
-.mtx-grid-column-menu-item {
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(color, column-menu-text-color);
-  }
-}
-
-.mtx-grid-column-menu-header,
-.mtx-grid-column-menu-footer {
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(color, column-menu-text-color);
-  }
-}
-
-.mtx-grid-column-menu-header {
-  @include token-utils.use-tokens($_tokens...) {
-    $border-color: token-utils.get-token-variable(column-menu-divider-color);
-
-    border-bottom: 1px solid var($border-color);
-  }
-}
-
-.mtx-grid-column-menu-footer {
-  @include token-utils.use-tokens($_tokens...) {
-    $border-color: token-utils.get-token-variable(column-menu-divider-color);
-
-    border-top: 1px solid var($border-color);
-  }
-}

package/loader/_loader-theme.scss

@@ -1,36 +1,69 @@
-@use '../core/theming/theming';
+@use '@angular/material' as mat;
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mtx/loader' as tokens-mtx-loader;
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mtx-loader.$prefix,
-      tokens-mtx-loader.get-color-tokens($config));
+@mixin base($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, base));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mtx-loader.$prefix,
+        tokens-mtx-loader.get-unthemable-tokens());
+    }
   }
 }
 
-@mixin typography($config-or-theme) {}
+@mixin color($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, color));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mtx-loader.$prefix,
+        tokens-mtx-loader.get-color-tokens($theme));
+    }
+  }
+}
 
-@mixin density($config-or-theme) {}
+@mixin typography($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, typography));
+  }
+  @else {}
+}
 
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mtx-loader') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+@mixin density($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, density));
+  }
+  @else {}
+}
 
-    @if $color != null {
-      @include color($color);
-    }
-    @if $density != null {
-      @include density($density);
+@mixin theme($theme) {
+  @include mat.private-check-duplicate-theme-styles($theme, 'mtx-loader') {
+    @if mat.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(mat.get-theme-tokens($theme));
     }
-    @if $typography != null {
-      @include typography($typography);
+    @else {
+      @include base($theme);
+      @if mat.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if mat.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if mat.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include token-utils.create-token-values(tokens-mtx-loader.$prefix,
+      map.get($tokens, tokens-mtx-loader.$prefix));
+  }
+}

package/loader/loader.d.ts

@@ -1,5 +1,4 @@
 import { ChangeDetectorRef } from '@angular/core';
-import { BooleanInput } from '@angular/cdk/coercion';
 import { ThemePalette } from '@angular/material/core';
 import { ProgressBarMode } from '@angular/material/progress-bar';
 import { ProgressSpinnerMode } from '@angular/material/progress-spinner';
@@ -22,16 +21,12 @@ export declare class MtxLoader {
     /** Value of the progress circle or the progress bar. */
     value: number;
     /** Whether the loader is loading. */
-    get loading(): boolean;
-    set loading(value: boolean);
-    private _loading;
+    loading: boolean;
     /** Whether the loader has a backdrop. */
-    get hasBackdrop(): boolean;
-    set hasBackdrop(value: boolean);
-    private _hasBackdrop;
+    hasBackdrop: boolean;
     constructor(_changeDetectorRef: ChangeDetectorRef);
-    static ngAcceptInputType_loading: BooleanInput;
-    static ngAcceptInputType_hasBackdrop: BooleanInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxLoader, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MtxLoader, "mtx-loader", ["mtxLoader"], { "type": { "alias": "type"; "required": false; }; "color": { "alias": "color"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; }; "diameter": { "alias": "diameter"; "required": false; }; "bufferValue": { "alias": "bufferValue"; "required": false; }; "value": { "alias": "value"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ngAcceptInputType_loading: unknown;
+    static ngAcceptInputType_hasBackdrop: unknown;
 }

package/loader/loader.scss

@@ -32,11 +32,11 @@
 }
 
 .mtx-loader-backdrop {
-  display: block;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
+  display: block;
   width: 100%;
   height: 100%;
   content: '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-matero/extensions",
-  "version": "16.3.1",
+  "version": "17.0.0",
   "description": "Angular Material Extensions",
   "publishConfig": {
     "access": "public"
@@ -42,12 +42,6 @@
       "esm": "./esm2022/ng-matero-extensions.mjs",
       "default": "./fesm2022/ng-matero-extensions.mjs"
     },
-    "./theming": {
-      "sass": "./_theming.scss"
-    },
-    "./_theming": {
-      "sass": "./_theming.scss"
-    },
     "./prebuilt-themes/indigo-pink.css": {
       "style": "./prebuilt-themes/indigo-pink.css"
     },
@@ -96,18 +90,18 @@
       "esm": "./esm2022/core/mtxCore.mjs",
       "default": "./fesm2022/mtxCore.mjs"
     },
-    "./datetimepicker": {
-      "types": "./datetimepicker/index.d.ts",
-      "esm2022": "./esm2022/datetimepicker/mtxDatetimepicker.mjs",
-      "esm": "./esm2022/datetimepicker/mtxDatetimepicker.mjs",
-      "default": "./fesm2022/mtxDatetimepicker.mjs"
-    },
     "./column-resize": {
       "types": "./column-resize/index.d.ts",
       "esm2022": "./esm2022/column-resize/mtxColumnResize.mjs",
       "esm": "./esm2022/column-resize/mtxColumnResize.mjs",
       "default": "./fesm2022/mtxColumnResize.mjs"
     },
+    "./datetimepicker": {
+      "types": "./datetimepicker/index.d.ts",
+      "esm2022": "./esm2022/datetimepicker/mtxDatetimepicker.mjs",
+      "esm": "./esm2022/datetimepicker/mtxDatetimepicker.mjs",
+      "default": "./fesm2022/mtxDatetimepicker.mjs"
+    },
     "./dialog": {
       "types": "./dialog/index.d.ts",
       "esm2022": "./esm2022/dialog/mtxDialog.mjs",
@@ -170,17 +164,17 @@
     }
   },
   "dependencies": {
-    "@ng-select/ng-select": "^11.0.0",
+    "@ng-select/ng-select": "^12.0.0",
     "ngx-color": "^9.0.0",
     "photoviewer": "^3.9.0",
     "tslib": "^2.4.0"
   },
   "peerDependencies": {
-    "@angular/animations": ">=16.0.0",
-    "@angular/cdk": ">=16.0.0",
-    "@angular/common": ">=16.0.0",
-    "@angular/core": ">=16.0.0",
-    "@angular/material": ">=16.0.0"
+    "@angular/animations": ">=17.0.0",
+    "@angular/cdk": ">=17.0.0",
+    "@angular/common": ">=17.0.0",
+    "@angular/core": ">=17.0.0",
+    "@angular/material": ">=17.0.0"
   },
   "sideEffects": false,
   "module": "fesm2022/ng-matero-extensions.mjs",

package/photoviewer/photoviewer.d.ts

@@ -14,4 +14,5 @@ export declare class MtxPhotoviewer implements OnInit, OnDestroy {
     initPhotoViewer(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxPhotoviewer, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MtxPhotoviewer, "[mtxPhotoviewer]", ["mtxPhotoviewer"], { "images": { "alias": "mtxPhotoviewerItems"; "required": false; }; "options": { "alias": "mtxPhotoviewerOptions"; "required": false; }; "embed": { "alias": "mtxPhotoviewerEmbed"; "required": false; }; }, {}, never, never, false, never>;
+    static ngAcceptInputType_embed: unknown;
 }

package/popover/_popover-theme.scss

@@ -1,36 +1,69 @@
-@use '../core/theming/theming';
+@use '@angular/material' as mat;
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mtx/popover' as tokens-mtx-popover;
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mtx-popover.$prefix,
-      tokens-mtx-popover.get-color-tokens($config));
+@mixin base($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, base));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mtx-popover.$prefix,
+        tokens-mtx-popover.get-unthemable-tokens());
+    }
   }
 }
 
-@mixin typography($config-or-theme) {}
+@mixin color($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, color));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mtx-popover.$prefix,
+        tokens-mtx-popover.get-color-tokens($theme));
+    }
+  }
+}
 
-@mixin density($config-or-theme) {}
+@mixin typography($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, typography));
+  }
+  @else {}
+}
 
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mtx-popover') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+@mixin density($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, density));
+  }
+  @else {}
+}
 
-    @if $color != null {
-      @include color($color);
-    }
-    @if $density != null {
-      @include density($density);
+@mixin theme($theme) {
+  @include mat.private-check-duplicate-theme-styles($theme, 'mtx-popover') {
+    @if mat.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(mat.get-theme-tokens($theme));
     }
-    @if $typography != null {
-      @include typography($typography);
+    @else {
+      @include base($theme);
+      @if mat.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if mat.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if mat.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include token-utils.create-token-values(tokens-mtx-popover.$prefix,
+      map.get($tokens, tokens-mtx-popover.$prefix));
+  }
+}

package/popover/popover.d.ts

@@ -1,6 +1,5 @@
 import { AnimationEvent } from '@angular/animations';
 import { Direction } from '@angular/cdk/bidi';
-import { BooleanInput } from '@angular/cdk/coercion';
 import { ElementRef, EventEmitter, InjectionToken, NgZone, OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { Subject } from 'rxjs';
 import { MtxPopoverContent } from './popover-content';
@@ -15,23 +14,6 @@ export declare class MtxPopover implements MtxPopoverPanel, OnInit, OnDestroy {
     private _elementRef;
     private _ngZone;
     private _defaultOptions;
-    private _triggerEvent;
-    private _enterDelay;
-    private _leaveDelay;
-    private _position;
-    private _panelOffsetX;
-    private _panelOffsetY;
-    private _arrowWidth;
-    private _arrowHeight;
-    private _arrowOffsetX;
-    private _arrowOffsetY;
-    private _hideArrow;
-    private _closeOnPanelClick;
-    private _closeOnBackdropClick;
-    private _focusTrapEnabled;
-    private _focusTrapAutoCaptureEnabled;
-    private _hasBackdrop;
-    private _elevation;
     private _previousElevation?;
     private _elevationPrefix;
     /** Config object to be passed into the popover's ngClass. */
@@ -61,56 +43,43 @@ export declare class MtxPopover implements MtxPopoverPanel, OnInit, OnDestroy {
     /** aria-describedby for the popover panel. */
     ariaDescribedby?: string;
     /** Popover's trigger event. */
-    get triggerEvent(): MtxPopoverTriggerEvent;
-    set triggerEvent(value: MtxPopoverTriggerEvent);
+    triggerEvent: MtxPopoverTriggerEvent;
     /** Popover's enter delay. */
-    get enterDelay(): number;
-    set enterDelay(value: number);
+    enterDelay: number;
     /** Popover's leave delay. */
-    get leaveDelay(): number;
-    set leaveDelay(value: number);
+    leaveDelay: number;
     /** Popover's position. */
     get position(): MtxPopoverPosition;
     set position(value: MtxPopoverPosition);
+    private _position;
     /** Popover-panel's X offset. */
-    get xOffset(): number;
-    set xOffset(value: number);
+    xOffset: number;
     /** Popover-panel's Y offset. */
-    get yOffset(): number;
-    set yOffset(value: number);
+    yOffset: number;
     /** Popover-arrow's width. */
-    get arrowWidth(): number;
-    set arrowWidth(value: number);
+    arrowWidth: number;
     /** Popover-arrow's height. */
-    get arrowHeight(): number;
-    set arrowHeight(value: number);
+    arrowHeight: number;
     /** Popover-arrow's X offset. */
-    get arrowOffsetX(): number;
-    set arrowOffsetX(value: number);
+    arrowOffsetX: number;
     /** Popover-arrow's Y offset. */
-    get arrowOffsetY(): number;
-    set arrowOffsetY(value: number);
+    arrowOffsetY: number;
     /** Whether the popover arrow should be hidden. */
-    get hideArrow(): boolean;
-    set hideArrow(value: boolean);
+    hideArrow: boolean;
     /** Whether popover can be closed when click the popover-panel. */
-    get closeOnPanelClick(): boolean;
-    set closeOnPanelClick(value: boolean);
+    closeOnPanelClick: boolean;
     /** Whether popover can be closed when click the backdrop. */
-    get closeOnBackdropClick(): boolean;
-    set closeOnBackdropClick(value: boolean);
+    closeOnBackdropClick: boolean;
     /** Whether enable focus trap using `cdkTrapFocus`. */
-    get focusTrapEnabled(): boolean;
-    set focusTrapEnabled(value: boolean);
+    focusTrapEnabled: boolean;
     /** Whether enable focus trap auto capture using `cdkTrapFocusAutoCapture`. */
-    get focusTrapAutoCaptureEnabled(): boolean;
-    set focusTrapAutoCaptureEnabled(value: boolean);
+    focusTrapAutoCaptureEnabled: boolean;
     /** Whether the popover has a backdrop. It will always be false if the trigger event is hover. */
-    get hasBackdrop(): boolean | undefined;
-    set hasBackdrop(value: boolean | undefined);
+    hasBackdrop: boolean | undefined;
     /** Popover-panel's elevation (0~24). */
     get elevation(): number;
     set elevation(value: number);
+    private _elevation;
     /**
      * This method takes classes set on the host md-popover element and applies them on the
      * popover template that displays in the overlay container. Otherwise, it's difficult
@@ -164,12 +133,12 @@ export declare class MtxPopover implements MtxPopoverPanel, OnInit, OnDestroy {
     /** Callback that is invoked when the panel animation completes. */
     _onAnimationDone(event: AnimationEvent): void;
     _onAnimationStart(event: AnimationEvent): void;
-    static ngAcceptInputType_closeOnPanelClick: BooleanInput;
-    static ngAcceptInputType_closeOnBackdropClick: BooleanInput;
-    static ngAcceptInputType_focusTrapEnabled: BooleanInput;
-    static ngAcceptInputType_focusTrapAutoCaptureEnabled: BooleanInput;
-    static ngAcceptInputType_hasBackdrop: BooleanInput;
-    static ngAcceptInputType_hideArrow: BooleanInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxPopover, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MtxPopover, "mtx-popover", ["mtxPopover"], { "backdropClass": { "alias": "backdropClass"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "triggerEvent": { "alias": "triggerEvent"; "required": false; }; "enterDelay": { "alias": "enterDelay"; "required": false; }; "leaveDelay": { "alias": "leaveDelay"; "required": false; }; "position": { "alias": "position"; "required": false; }; "xOffset": { "alias": "xOffset"; "required": false; }; "yOffset": { "alias": "yOffset"; "required": false; }; "arrowWidth": { "alias": "arrowWidth"; "required": false; }; "arrowHeight": { "alias": "arrowHeight"; "required": false; }; "arrowOffsetX": { "alias": "arrowOffsetX"; "required": false; }; "arrowOffsetY": { "alias": "arrowOffsetY"; "required": false; }; "hideArrow": { "alias": "hideArrow"; "required": false; }; "closeOnPanelClick": { "alias": "closeOnPanelClick"; "required": false; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; }; "focusTrapEnabled": { "alias": "focusTrapEnabled"; "required": false; }; "focusTrapAutoCaptureEnabled": { "alias": "focusTrapAutoCaptureEnabled"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "elevation": { "alias": "elevation"; "required": false; }; "panelClass": { "alias": "class"; "required": false; }; "classList": { "alias": "classList"; "required": false; }; }, { "closed": "closed"; }, ["lazyContent"], ["*"], false, never>;
+    static ngAcceptInputType_hideArrow: unknown;
+    static ngAcceptInputType_closeOnPanelClick: unknown;
+    static ngAcceptInputType_closeOnBackdropClick: unknown;
+    static ngAcceptInputType_focusTrapEnabled: unknown;
+    static ngAcceptInputType_focusTrapAutoCaptureEnabled: unknown;
+    static ngAcceptInputType_hasBackdrop: unknown;
 }

package/popover/popover.scss

@@ -9,11 +9,11 @@ $_tokens: tokens-mtx-popover.$prefix, tokens-mtx-popover.get-token-slots();
   position: relative;
   max-height: calc(100vh - 48px);
   padding: 8px;
-  border-radius: 4px;
-  font-size: 16px; // It can change the arrow size
+  font-size: inherit; // It can change the arrow size
   outline: 0;
 
   @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(border-radius, container-shape);
     @include token-utils.create-token-slot(background-color, background-color);
     @include token-utils.create-token-slot(color, text-color);
   }