ncstate-sat / popover Goto Github PK

Some options:

• satDisablePopoverToggle 👍
• satDisablePopoverToggleOnClick
• satDisableToggle
• satDisableClickToToggle
• satPopoverDisableClick
• satPopoverDisableToggle

I don't know if this is a bug or a design choice, but it would be nice if I could have more than one trigger firing the same popover. Currently, the popover is attached to just one of them (the last one to be rendered in the page)

In the image above I expected the popover to be next to each word "Legenda"

Can use --outDir and --target instead for ngc to do the overrides.

Blocked on angular v5 support

See https://stackblitz.com/edit/sat-popover-issue-zuwgze?file=app%2Fapp.component.html

Add option to show backdrop:

Or the option to have no backdrop at all

• Should popovers with no focusable elements steal the focus anyway? Or should cdkFocusInitial just be documented?
• Should users be able to disallow focus trapping? Maybe a tooltip-like popover has a focusable field but shouldn't be autofocused? Maybe a popover has some inputs but it's auxiliary and shouldn't steal focus from the page?

• component factory service
• passing template ref

I've seen we can change transition speed an easing with...

openTransition="10ms ease-out" closeTransition="10ms ease-out".

Is there a way to change the animation itself? I.e. having it fade in alone rather than scaling to normal size and fading in.

Great work BTW. Very useful.

I have used pop over inside mat-table for inline edit and its working fine in application if I try to use the table component which I created inside any other application I'm getting below error .

ERROR TypeError: Cannot read property 'template' of undefined
at eval (webpack-internal:///../../../cdk/esm5/table.es5.js:985)
at Array.forEach ()
at MatTable.CdkTable._insertRow (webpack-internal:///../../../cdk/esm5/table.es5.js:982)
at eval (webpack-internal:///../../../cdk/esm5/table.es5.js:663)
at DefaultIterableDiffer.forEachOperation (webpack-internal:///../../../core/esm5/core.js:7608)
at MatTable.CdkTable.renderRows (webpack-internal:///../../../cdk/esm5/table.es5.js:661)
at SafeSubscriber.eval [as _next] (webpack-internal:///../../../cdk/esm5/table.es5.js:893)
at SafeSubscriber.__tryOrSetError (webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:254)
at SafeSubscriber.next (webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:194)
at Subscriber._next (webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:133)

If I remove my sat-popover code snippet from table component before packaging its working fine.

Reproduce-able at https://ncstate-sat.github.io/popover/ on an iOS device or using Simulator on a Mac.

This issue revolves around how iOS Safari has a dynamic bottom sheet within the mobile browser that hides when scrolling a page. It seems this event is not handled by the positioning service for the sat-popover, resulting in the overlay being positioned/anchored incorrectly and inconsistently if scrolling while popover is open.

Working:

Broken:

Ref: angular/components#9153

https://stackblitz.com/edit/sat-popover-speed-dial-rphzd3?file=app%2Fapp.component.html

Only occurs on first open

I am trying to use this library but I get this error and do not want to mess with the library code so I hope I can get some help here and get it working.

I actually compile the whole application without any problem, but when I call the reference to call popover, It breaks and I get the following stack on my console:

ERROR TypeError: this._overlayRef.keydownEvents is not a function
at SatPopoverAnchor.webpackJsonp.../../../../@ncstate/sat-popover/@ncstate/sat-popover.es5.js.SatPopoverAnchor._subscribeToEscape (sat-popover.es5.js:1042)
at SatPopoverAnchor.webpackJsonp.../../../../@ncstate/sat-popover/@ncstate/sat-popover.es5.js.SatPopoverAnchor.openPopover (sat-popover.es5.js:899)
at SafeSubscriber._next (sat-popover.es5.js:997)
at SafeSubscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:239)
at SafeSubscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.SafeSubscriber.next (Subscriber.js:186)
at Subscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.Subscriber._next (Subscriber.js:127)
at Subscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.Subscriber.next (Subscriber.js:91)
at TakeUntilSubscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.Subscriber._next (Subscriber.js:127)
at TakeUntilSubscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.Subscriber.next (Subscriber.js:91)
at Subject.webpackJsonp.../../../../rxjs/_esm5/Subject.js.Subject.next (Subject.js:56)

The error points to the file popover/src/lib/popover/popover-anchor.directive.ts in line 209:

  /** Close popover when escape keydown event occurs. */
  private _subscribeToEscape(): void {
    this._overlayRef
      .keydownEvents()

Here is my package.json in case it helps:

{
  "name": "liquidaciones",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "5.1.1",
    "@angular/cdk": "2.0.0-beta.12",
    "@angular/common": "5.1.1",
    "@angular/compiler": "5.1.1",
    "@angular/core": "5.1.1",
    "@angular/forms": "5.1.1",
    "@angular/http": "5.1.1",
    "@angular/material": "2.0.0-beta.12",
    "@angular/platform-browser": "5.1.1",
    "@angular/platform-browser-dynamic": "5.1.1",
    "@angular/router": "5.1.1",
    "@ncstate/sat-popover": "^1.0.0-beta.4",
    "@ngrx/core": "^1.2.0",
    "@ngrx/store": "^4.0.3",
    "core-js": "^2.5.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.5.2",
    "typescript": "^2.4.2",
    "zone.js": "^0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "1.6.1",
    "@angular/compiler-cli": "^5.1.1",
    "@angular/language-service": "^5.1.1",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

If you need more info please let me know! Hope someone can help mates!

If you do something like this,

<sat-popover [openTransition]="o">...</sat-popover>

class MyComponent {
  o: string;
}

Opening/closing will throw an error because undefined is not parseable as a transition value. There should be some way to fallback to the default value when !openTransition. Even better would be to fallback to the default value and log a warning when the transition value cannot be parsed, e.g. openTransition="500ms KendrickLamar".

First of all, thank you for your great work on this component, it's exactly what we've needed for a while now.

Right now if a popover is opened near the edge of the viewport, it opens without taking that into account.

It seems to prioritize opening over the anchor rather than ensure it's always visible.

I understand there are inputs to control the positioning manually, but in a dynamically generated list, there is the potential for an item to be on multiple sides of the viewport.

MatMenu seems to handle this, not sure if it's part of CDK, or custom code for Material: https://material.angular.io/components/menu/overview

This method should wait until animation is complete instead of destroying on detachment

Depends on #15

Update: At first glance of solving this, there is another issue that arises when you close and quickly repoen... the afterClose event never fires.

Click "more info" here

https://stackblitz.com/edit/sat-popover-examples

• Looks like I need to inline stylesheets/template before ngc
• Also make sure inlining of template placing on a single line. That doesn't appear to be happening

Is this popover works with Angular 6 ?

It should switch the transform origins

Would it be possible to add class that would reflect popover's position relative to trigger element? Whether it's above, below, to the right or left.

Thanks 🙂

Hi,

Great work!

I suggest that you move to the new CLI as your build and management tool.

I'v dont that on several libraries I have and it works great, very mature.

It will improve your build output and will make you future safe for any changes.

Here is an example:
https://github.com/shlomiassaf/ngx-modialog

That project works with library publishing, demo app and publishing the demo app to GH pages.

If you want help and/or guidance Im here.

Thanks.

As I understood from README, by default, when popover is visible and you scroll the background, it should stay attached to the anchor, repositioning itself. It worked just fine when I tested it in stackblitz.

In one page I used it, for some reason it didn't stay attached to the anchor. It seems to be attatched to mouse position as I scrooll the background using the mouse wheel. I couldn't isolate the cause yet nor reproduce it in stackblitz.

If I have any progress with reproducing it, I'll let you know.

Options:

• <sat-anchored-overlay>: @sat/anchored-overlay
• <sat-overlay>: @sat/overlay
• <sat-popup>: @sat/popup
• <sat-popover>: @sat/popover 👍
• <sat-connected-overlay>: @sat/connected-overlay

As noted in #58, the SatPopoverAnchor only seems to inject the Directionality provider and skips all lower Dir providers. I've been unable to replicate in a unit test, but it was exhibited in both the demo-app and a sample test application.

If anybody ever needs this, ping me.

Hi,

It would be great to setup a delay so when hovering above multiple items with a popover not every popover is shown.

Nice work so far!

Some api notes

1. enable/disable
2. snap back to anchor with/without animation
3. Probably relies on #9 since dragging is sort of predicated on the idea of interacting with content behind it (completed)

As stated in #68 (comment), using x and y in the name of @Input properties, although technically understandable, may require some previous knowledge on geometry from the user (cartesian axis).

As a suggestion:

• xPropertyName => horizontalPropertyName
• yPropertyName => verticalPropertyName

Do you have any strong opinion about align vs pos vs position?

No. I just think using x and y isn't so natural for some app developers as horizontal and vertical. But I'd go with align.

I'd also be interested in adding aliases to keep the api tighter, if it isn't too confusing.

Well... thinking of saving bytes in the final bundle, maybe shorter names are better. I'm not sure about how efficient is the minifying process concerning the @Input variables. Yes, it can be a little bit confusing having two @Input properties to do the same thing (at first), but I also think that it can be easely explained in docs.

Hello there.

I have the following popover:

        <sat-popover #subscriberPopover horizontalAlign="center" verticalAlign="below">
            <div class="subscriber-popover" [appTooltipTimeout]="subscriberPopover" type="slave">
                <app-consumer-tooltip class="tooltip" [consumer]="row.subscriber"></app-consumer-tooltip>
            </div>
        </sat-popover>

I also have a anchor with events to show the popover. My component inside has a 'indication arrow' pointed to this bottom, aligned below the box:

The problem here is, if I scroll the page below the 'limit' for my component to get outside the viewport, it goes up, ignoring the verticalAlign property. This is a default behavior for Angular Material Menu and other components.

It is possible to 'force' the align, even if the component gets outside the viewport?

This is dependent on the resolution of issue in #52 and potentially an upgraded CDK dependency.

It will be important to ensure that the isOpen() and isPopoverOpen() methods return correctly after a popover has been closed via scrolling. That probably will require subscribing to detachments instead of imperatively setting the properties.

Also update the api.

I only get the transparent backdrop.

Below is what my code looks like.

.html file
...
<sat-popover #dial hasBackdrop backdropClass="fab-backdrop" verticalAlign="above">
...

.scss file

.fab-backdrop {
background-color: red;
}

Not sure what I am missing. Any suggestions would be appreciated.

Current Functionality:

The tooltips appear for an action during the mouseenter event and disappear during the mouseleave event.

Suggested Feature:

A configuration that would allow all of the tooltips to display when the fab is toggled open.

Example:

The Inbox app by Google.

https://github.com/angular-buch/angular-cli-ghpages

Another option may be to keep the demo-app for debugging and instead deploy a docs-app that's more polished.

It looks like a couple files reference 'rxjs/operators/...' (with an 's'). At least with the newer version or rxjs has items in 'rxjs/operator/..." (no 's' in 'operator').

@willshowell, I tried out the popover. I want to fire it on hover event.

Basically, I encapsulated it in a component like this:

<div class="full-width" [satPopoverAnchorFor]="tutoriaPopover" satDisableClick
 (mouseenter)="openpopover()" (mouseleave)="closepopover()">
  {{message}}
</div>
<sat-popover #tutoriaPopover xPosition="after" [overlapAnchor]="false">
  <div class="popover-class">
      <ng-container *ngFor="let num of [1,2,3,4,5,6]">
        <br *ngIf="i > 0">
        <strong>
          item {{num}}
        </strong>
      </ng-container>
  </div>
</sat-popover>

and then, in <md-select>

<md-option>
   <app-popover></app-popover>
</md-option>

I'm not sure, but I have a feeling that the flickering effect is caused by (mouseenter)/(mouseleave) events that are being fired by many transitions between md-option/app-popover. Any ideas on how to avoid it?

Currently, PopoverAnchoringService is not exposed by the library.

The only way to show a popup is using [satPopoverAnchorFor]

This means that programmatic popup's is not something that can be done directly.

For example, to automate a confirm (yes/no) popup across the application I would want to expose a directive that will automatically do all that.

<button (clickConfirm)="doSomethingOnlyIfConfirmed()"></button>

This directive ([clickConfirm]) will encapsulate the whole process of rendering the popup and internally it will also have the popup to use when clicked.

I don't need an anchor directive now, my clickConfirm directive is the anchor...
Because I can't access the anchor service it's hard to do this.

I have workaround's but they require access to private members.

Can you please expose the service?

Thanks.

When the popup closes, a method is executed that ensures that the last focused element is focused again. But I show the popup when you drag over an input field. When I use the input field while the popup is still visible, I do not want the previously selected input-field to be focused when the popup closes.

I think it should be possible to disable the restoreFocus() functionality. (or manual update the last focused element)

Thanks you!

hi, I would like to display the popover beneath the element, right now the xPosition only support three options ('before', 'center', 'after') which doesn't cover my use-case.

• passing invalid popover throws error
• SatPopoverAnchor#open/close/toggle
• SatPopover#open/close/toggle
• positioning + classes
• changes in position while open
• backdrop clicks
• escape keydown
• focus trap

Hey!

I've noticed that if you have a component as your sat-popover content, that the component is actually initialized, even though the popover isn't opened yet.

At first I thought this was a regression based on this comment you made from a previous conversation we had, but I was playing around on StackBlitz and rolled back a few versions and saw the same behaviour regardless.

Demo of issue:
https://stackblitz.com/edit/sat-popover-issues-vicsu1

You can see that the ngOnInit of the popover-content component is called even before the button is clicked to display it.

This is an issue for us because our popover content component makes an http request. So the request is being made even before the user has shown any interest in viewing that content.

We can easily work around it by using the isOpen() method combined with *ngIf, but I thought I'd mention the issue since it seems like from your previous comment this behaviour may not be intended.

• beforeOpen
• beforeClose
• afterOpen
• afterClose

This should also include a refactor to the animation triggers.

Also favicon

• Provide a stream of backdropClicks for consumer
• Optionally provide a keydown stream, if necessary

I'm trying to use the autoFocus ability, specifically disable it, but AFAIK it came in just after the last release.

Will there be a new release anytime soon, or should I just use the master branch from github?

There should be a way to display popovers at a specific coordinate on the screen. This would enable a variety of use cases:

• right-click context menus
• persistent notifications and reminders
• FB messenger-like dialogs

I expect this would exist as a separate component that is capable of opening and closing itself

<sat-global-popover #gp top="20px" right="20px">
  <app-notification>You have a message from {{ user }}.</app-notification>
</sat-global-popover>

Backdrop and animation inputs would be common between this and the original popover, so it'll probably be best to use a mixin for those.

It's important that any behavior in #22 is also available.

Look at what I got:

As you can notice from the gif above,:

1. The flickering issue was solved by using the @Input() disableBackdrop
2. The content of the popover is different for each option in select

The second observation has an hidden implication: as I need one anchor to each sat-popover, I was forced to encapsulate every option content in a component - see the code bellow. The mat-option content is the anchor for the sat-popover - ideally, the anchor would be the mat-option itself not its content - but I'll talk about this later in this issue.

Sorry about the awkward example (bellow) to show my point, but I tried to reproduce approximately what I have in above gif [edited => the code bellow is in stackblitz.com].

<div class="full-width" [satPopoverAnchorFor]="popover" satDisableClick 
    (mouseenter)="openpopover()" (mouseleave)="closepopover()">
  {{message}}
</div>
<sat-popover #popover xPosition="after" [overlapAnchor]="false" [disableBackdrop]="true">
  <div class="popover-class">
      <ng-container *ngFor="let t of myArray; let i=index">
        <br *ngIf="i > 0">
        <strong>
          {{t}}
        </strong>
      </ng-container>
  </div>
</sat-popover>

and in the class:

  /** 
   * I could use the SatPopover here, as it now has the open() and close() properties
   *   but it doesn't solve the problem I'll describe bellow   
   */
  @ViewChild(SatPopoverAnchor) anchor: SatPopoverAnchor;

  @Input() message: string;
  @Input() myArray: any[];

  openpopover() {
    this.anchor.openPopover();
  }

  closepopover() {
    this.anchor.closePopover();
  }

Then I can use this component like this (mat-form-field's width is important to show my point):

<mat-form-field style="width: 400px">
    <mat-select placeholder="Select an option">
        <mat-option *ngFor="let oneArray of arrayOfArrays; let i = index" [value]="oneArray">
            <app-popover [message]="i" [myArray]="oneArray"></app-popover>
       </mat-option>
    </mat-select>
</mat-form-field>

arrayOfArrays = [
  [a,b,c],
  [d,f],
  [g,h,i]
]

As I need an unique anchor for each popover, I made this custom component to encapsulate each of the popover and it's anchor.

As I said earlier, ideally, the anchor should be the mat-option element, but I couldn't figure out how to put it in the custom component. I tried ngProjectAs="mat-option", but apparently mat-option is not a ng-content element:

<mat-select placeholder="Turma">
    <app-popover *ngFor="let oneArray of arrayOfArrays; let i = index" [message]="i" 
         [myArray]="oneArray" ngProjectAs="mat-option"></app-popover>
</mat-select>

As it didn't work, what I managed to do is encapsulating mat-option content along with sat-popover instead of mat-option itself. So I'm using a div inside the custom component to hold the option content and be the anchor for the popover.

This have a side effect: I had to override the mat-option-text class so it takes 100% of the available mat-option width, otherwise the popover would apear in the middle of the mat-option instead of by its side. Even overriding the mat-option-text class, if you look carefully, you can see in the gif that the popover overlapped the mat-select pannel a little bit.

The overlapping is acceptably small, but if I had to make it goes completely outside the panel, I don't kwow what I could do without hacking the component.

The summary of the problem: When I have an undetermined number of dynamically fed sat-popover in a component, I'm not able (at least I couldn't figure out how) to put an anchor in a component directly, without encapsulating the popover, what may have side effects in some specific situations like what is discribed in this issue. This would happen also if I was using another component with a separate trigger element, like mat-menu. The problem is to put the anchor in the correct element, once it is buried inside another custom component.

1. Is it possible to use another aproach to do what I'm trying to?
2. Is this a limitation of sat-popover? Or a limitation of mat-option?
3. Is there any possible workaround?

@willshowell