fix: (Core) Remove popper.js dependency (#4814)

apps/docs/src/app/core/component-docs/popover/popover-docs.component.html

@@ -45,7 +45,7 @@
     Popover Placement
 </fd-docs-section-title>
 <description>
-    Popper.js offers a variety of placements for users to choose from. These can be any of 'top', 'bottom', 'right',
+    Popover offers a variety of placements for users to choose from. These can be any of 'top', 'bottom', 'right',
     'left', and then can be suffixed with '-start' or '-end'.
 </description>
 <component-example>
@@ -74,8 +74,7 @@
     Popovers in Dialogs
 </fd-docs-section-title>
 <description>
-    Popovers are functional inside dialogs. The default behaviour is to overflow the dialog, though that can be changed
-    with the <code>options</code> input, which accepts Popper.js settings.
+    Popovers are functional inside dialogs.
 </description>
 <component-example>
     <fd-popover-dialog-example></fd-popover-dialog-example>

apps/docs/src/app/documentation/core-helpers/stackblitz/stackblitz-dependencies.ts

@@ -18,7 +18,6 @@ export class StackblitzDependencies {
         'core-js',
         'fundamental-styles',
         'moment',
-        'popper.js',
         'hammerjs',
         'tslib',
         'typescript'

ci-scripts/sync-version.sh

@@ -12,7 +12,6 @@ echo "Updating packages.json under dist/libs with version ${NEW_VERSION}"
 ANGULAR_VERSION=$(node -p "require('./package.json').dependencies['@angular/core']")
 RXJS_VERSION=$(node -p "require('./package.json').dependencies['rxjs']")
 CDK_VERSION=$(node -p "require('./package.json').dependencies['@angular/cdk']")
-POPPER_VERSION=$(node -p "require('./package.json').dependencies['popper.js']")
 FDSTYLES_VERSION=$(node -p "require('./package.json').dependencies['fundamental-styles']")
 FOCUSTRAP_VERSION=$(node -p "require('./package.json').dependencies['focus-trap']")
 HAMMERJS_VERSION=$(node -p "require('./package.json').dependencies['hammerjs']")
@@ -24,7 +23,6 @@ grep -rl 'VERSION_PLACEHOLDER' . | xargs  perl -X -p -i -e "s/VERSION_PLACEHOLDE
 grep -rl 'ANGULAR_VER_PLACEHOLDER' . | xargs  perl -X -p -i -e "s/ANGULAR_VER_PLACEHOLDER/${ANGULAR_VERSION}/g"
 grep -rl 'RXJS_VER_PLACEHOLDER' . | xargs  perl -X -p -i -e "s/RXJS_VER_PLACEHOLDER/${RXJS_VERSION}/g"
 grep -rl 'CDK_VER_PLACEHOLDER' . | xargs  perl -X -p -i -e "s/CDK_VER_PLACEHOLDER/${CDK_VERSION}/g"
-grep -rl 'POPPER_VER_PLACEHOLDER' . | xargs  perl -X -p -i -e "s/POPPER_VER_PLACEHOLDER/${POPPER_VERSION}/g"
 grep -rl 'FDSTYLES_VER_PLACEHOLDER' . | xargs  perl -X -p -i -e "s/FDSTYLES_VER_PLACEHOLDER/${FDSTYLES_VERSION}/g"
 grep -rl 'FOCUSTRAP_VER_PLACEHOLDER' . | xargs  perl -X -p -i -e "s/FOCUSTRAP_VER_PLACEHOLDER/${FOCUSTRAP_VERSION}/g"
 grep -rl 'THEMING_VER_PLACEHOLDER' . | xargs  perl -X -p -i -e "s/THEMING_VER_PLACEHOLDER/${THEMING_VERSION}/g"

libs/core/ng-package.json

@@ -8,7 +8,6 @@
     "whitelistedNonPeerDependencies": [
         "@angular/cdk",
         "focus-trap",
-        "popper.js",
         "fundamental-styles",
         "@sap-theming/theming-base-content",
         "hammerjs"

libs/core/package.json

@@ -25,7 +25,6 @@
     "@sap-theming/theming-base-content": "THEMING_VER_PLACEHOLDER",
     "focus-trap": "FOCUSTRAP_VER_PLACEHOLDER",
     "fundamental-styles": "FDSTYLES_VER_PLACEHOLDER",
-    "popper.js": "POPPER_VER_PLACEHOLDER",
     "hammerjs": "HAMMERJS_VER_PLACEHOLDER"
   }
 }

libs/core/src/lib/breadcrumb/breadcrumb.component.ts

@@ -19,7 +19,7 @@ import { RtlService } from '../utils/services/rtl.service';
 import { BehaviorSubject } from 'rxjs';
 import { KeyUtil } from '../utils/functions';
 import { MenuComponent } from '../menu/menu.component';
-import { Placement } from 'popper.js';
+import { Placement } from '../popover/popover-position/popover-position';
 import { ENTER, SPACE } from '@angular/cdk/keycodes';
 
 /**

libs/core/src/lib/datetime-picker/datetime-picker.component.ts

@@ -18,7 +18,7 @@ import {
 import { AbstractControl, ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { Placement } from 'popper.js';
+import { Placement } from '../popover/popover-position/popover-position';
 
 import { DatetimeAdapter } from '../datetime/datetime-adapter';
 import { DateTimeFormats, DATE_TIME_FORMATS } from '../datetime/datetime-formats';

libs/core/src/lib/form/form-input-message-group/form-input-message-group.component.ts

@@ -6,8 +6,8 @@ import {
     Output,
     ViewEncapsulation
 } from '@angular/core';
-import { PopoverFillMode } from '../../popover/popover-position/popover-position';
-import { Placement } from 'popper.js';
+import { Placement, PopoverFillMode } from '../../popover/popover-position/popover-position';
+
 
 @Component({
     selector: 'fd-form-input-message-group',

libs/core/src/lib/product-switch/product-switch/product-switch.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import {Placement} from 'popper.js';
+import { Placement } from '../../popover/popover-position/popover-position';
 import { BasePopoverClass } from '../../popover/base/base-popover.class';
 
 @Component({

libs/core/src/lib/shellbar/product-menu/product-menu.component.ts

@@ -1,8 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input, ViewChild, ViewEncapsulation } from '@angular/core';
 import { MenuComponent } from '../../menu/menu.component';
 import { ShellbarMenuItem } from '../model/shellbar-menu-item';
-import { Placement } from 'popper.js';
-import { PopoverFillMode } from '../../popover/popover-position/popover-position';
+import { Placement, PopoverFillMode } from '../../popover/popover-position/popover-position';
 
 /**
  * The component that represents a product menu.

libs/core/src/lib/shellbar/user-menu/shellbar-user-menu.component.html

@@ -23,7 +23,6 @@
         </button>
         <fd-menu
             #menu
-            [options]="options"
             [compact]="compact"
             [triggers]="triggers"
             [placement]="placement"

libs/core/src/lib/shellbar/user-menu/shellbar-user-menu.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewCh
 import { ShellbarUser } from '../model/shellbar-user';
 import { ShellbarUserMenu } from '../model/shellbar-user-menu';
 import { MenuComponent } from '../../menu/menu.component';
-import { Placement, PopperOptions } from 'popper.js';
+import { Placement } from '../../popover/popover-position/popover-position';
 import { PopoverFillMode } from '../../popover/popover-position/popover-position';
 
 /**
@@ -58,20 +58,6 @@ export class ShellbarUserMenuComponent {
     @Input()
     disabled = false;
 
-    /** The Popper.js options to attach to this popover.
-     * See the [Popper.js Documentation](https://popper.js.org/popper-documentation.html) for details. */
-    @Input()
-    options: PopperOptions = {
-        placement: 'bottom-start',
-        modifiers: {
-            preventOverflow: {
-                enabled: true,
-                escapeWithReference: true,
-                boundariesElement: 'scrollParent'
-            }
-        }
-    };
-
     /** Whether or not to show the popover arrow */
     @Input()
     noArrow = false;

libs/core/src/lib/time-picker/time-picker.component.ts

@@ -21,7 +21,7 @@ import {
 import { AbstractControl, ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { Placement } from 'popper.js';
+import { Placement } from '../popover/popover-position/popover-position';
 
 import { DATE_TIME_FORMATS, DateTimeFormats } from '../datetime/datetime-formats';
 import { DatetimeAdapter } from '../datetime/datetime-adapter';

libs/platform/src/lib/components/form/date-picker/date-picker.component.ts

@@ -26,9 +26,9 @@ import {
     DateRange,
     DaysOfWeek,
     FdCalendarView,
+    Placement,
     SpecialDayRule
 } from '@fundamental-ngx/core';
-import { Placement } from 'popper.js';
 import { FormFieldControl, Status } from '../form-control';
 import { BaseInput } from '../base.input';
 import { FormField } from '../form-field';

libs/platform/src/lib/components/form/datetime-picker/datetime-picker.component.ts

@@ -22,9 +22,9 @@ import {
     DATE_TIME_FORMATS,
     DaysOfWeek,
     FdCalendarView,
+    Placement,
     SpecialDayRule
 } from '@fundamental-ngx/core';
-import { Placement } from 'popper.js';
 
 import { BaseInput } from '../base.input';
 import { FormField } from '../form-field';

libs/platform/src/lib/components/form/time-picker/time-picker.component.ts

@@ -9,10 +9,9 @@ import {
     Output,
     ViewChild
 } from '@angular/core';
-import { Placement } from 'popper.js';
 
 import { BaseInput } from '../base.input';
-import { TimePickerComponent } from '@fundamental-ngx/core';
+import { Placement, TimePickerComponent } from '@fundamental-ngx/core';
 import { FormFieldControl, Status } from '../form-control';
 
 @Component({

package.json

@@ -120,7 +120,6 @@
     "moment": "2.29.1",
     "ngx-markdown": "10.1.1",
     "npm": "7.5.4",
-    "popper.js": "1.16.1",
     "raw-loader": "4.0.2",
     "rxjs": "6.6.6",
     "sauce-connect-launcher": "1.3.2",