Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(Popover): renaming popover attribute due to new HTML spec attribute - do not merge #1438

Closed
wants to merge 4 commits into from
Closed

fix(Popover): renaming popover attribute due to new HTML spec attribute - do not merge #1438

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fdfe061
fix(Popover): renaming popover attribute due to new HTML spec attribute
dvoegelin Jun 29, 2023
2d14fa0
reverting field interaction api change
dvoegelin Jun 29, 2023
2eeb734
maintaining backwards compatability
dvoegelin Jun 29, 2023
38b8e78
added comment
dvoegelin Jun 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 19 additions & 19 deletions projects/novo-elements/src/elements/form/ControlTemplates.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import { NovoTemplate } from '../common/novo-template/novo-template.directive';
[tooltipPreline]="control?.tooltipPreline"
[removeTooltipArrow]="control?.removeTooltipArrow"
[tooltipAutoPosition]="control?.tooltipAutoPosition"
[popover]="control.popoverContent"
[novoPopover]="control.popoverContent"
[popoverHtmlContent]="control.popoverHtmlContent"
[popoverTitle]="control.popoverTitle"
[popoverPlacement]="control.popoverPlacement"
Expand Down Expand Up @@ -103,7 +103,7 @@ import { NovoTemplate } from '../common/novo-template/novo-template.directive';
[tooltipPreline]="control?.tooltipPreline"
[removeTooltipArrow]="control?.removeTooltipArrow"
[tooltipAutoPosition]="control?.tooltipAutoPosition"
[popover]="control.popoverContent"
[novoPopover]="control.popoverContent"
[popoverHtmlContent]="control.popoverHtmlContent"
[popoverTitle]="control.popoverTitle"
[popoverPlacement]="control.popoverPlacement"
Expand Down Expand Up @@ -168,7 +168,7 @@ import { NovoTemplate } from '../common/novo-template/novo-template.directive';
[tooltipPreline]="control?.tooltipPreline"
[removeTooltipArrow]="control?.removeTooltipArrow"
[tooltipAutoPosition]="control?.tooltipAutoPosition"
[popover]="control.popoverContent"
[novoPopover]="control.popoverContent"
[popoverHtmlContent]="control.popoverHtmlContent"
[popoverTitle]="control.popoverTitle"
[popoverPlacement]="control.popoverPlacement"
Expand Down Expand Up @@ -201,7 +201,7 @@ import { NovoTemplate } from '../common/novo-template/novo-template.directive';
[tooltipPreline]="control?.tooltipPreline"
[removeTooltipArrow]="control?.removeTooltipArrow"
[tooltipAutoPosition]="control?.tooltipAutoPosition"
[popover]="control.popoverContent"
[novoPopover]="control.popoverContent"
[popoverHtmlContent]="control.popoverHtmlContent"
[popoverTitle]="control.popoverTitle"
[popoverPlacement]="control.popoverPlacement"
Expand Down Expand Up @@ -231,7 +231,7 @@ import { NovoTemplate } from '../common/novo-template/novo-template.directive';
[tooltipPreline]="control?.tooltipPreline"
[removeTooltipArrow]="control?.removeTooltipArrow"
[tooltipAutoPosition]="control?.tooltipAutoPosition"
[popover]="control.popoverContent"
[novoPopover]="control.popoverContent"
[popoverHtmlContent]="control.popoverHtmlContent"
[popoverTitle]="control.popoverTitle"
[popoverPlacement]="control.popoverPlacement"
Expand Down Expand Up @@ -265,7 +265,7 @@ import { NovoTemplate } from '../common/novo-template/novo-template.directive';
[tooltipPreline]="control?.tooltipPreline"
[removeTooltipArrow]="control?.removeTooltipArrow"
[tooltipAutoPosition]="control?.tooltipAutoPosition"
[popover]="control.popoverContent"
[novoPopover]="control.popoverContent"
[popoverHtmlContent]="control.popoverHtmlContent"
[popoverTitle]="control.popoverTitle"
[popoverPlacement]="control.popoverPlacement"
Expand Down Expand Up @@ -293,7 +293,7 @@ import { NovoTemplate } from '../common/novo-template/novo-template.directive';
[tooltipPreline]="control?.tooltipPreline"
[removeTooltipArrow]="control?.removeTooltipArrow"
[tooltipAutoPosition]="control?.tooltipAutoPosition"
[popover]="control.popoverContent"
[novoPopover]="control.popoverContent"
[popoverHtmlContent]="control.popoverHtmlContent"
[popoverTitle]="control.popoverTitle"
[popoverPlacement]="control.popoverPlacement"
Expand Down Expand Up @@ -321,7 +321,7 @@ import { NovoTemplate } from '../common/novo-template/novo-template.directive';
[tooltipPreline]="control?.tooltipPreline"
[removeTooltipArrow]="control?.removeTooltipArrow"
[tooltipAutoPosition]="control?.tooltipAutoPosition"
[popover]="control.popoverContent"
[novoPopover]="control.popoverContent"
[popoverHtmlContent]="control.popoverHtmlContent"
[popoverTitle]="control.popoverTitle"
[popoverPlacement]="control.popoverPlacement"
Expand All @@ -348,7 +348,7 @@ import { NovoTemplate } from '../common/novo-template/novo-template.directive';
[tooltipPreline]="control?.tooltipPreline"
[removeTooltipArrow]="control?.removeTooltipArrow"
[tooltipAutoPosition]="control?.tooltipAutoPosition"
[popover]="control.popoverContent"
[novoPopover]="control.popoverContent"
[popoverHtmlContent]="control.popoverHtmlContent"
[popoverTitle]="control.popoverTitle"
[popoverPlacement]="control.popoverPlacement"
Expand Down Expand Up @@ -376,7 +376,7 @@ import { NovoTemplate } from '../common/novo-template/novo-template.directive';
[tooltipPreline]="control?.tooltipPreline"
[removeTooltipArrow]="control?.removeTooltipArrow"
[tooltipAutoPosition]="control?.tooltipAutoPosition"
[popover]="control.popoverContent"
[novoPopover]="control.popoverContent"
[popoverHtmlContent]="control.popoverHtmlContent"
[popoverTitle]="control.popoverTitle"
[popoverPlacement]="control.popoverPlacement"
Expand Down Expand Up @@ -409,7 +409,7 @@ import { NovoTemplate } from '../common/novo-template/novo-template.directive';
[tooltipPreline]="control?.tooltipPreline"
[removeTooltipArrow]="control?.removeTooltipArrow"
[tooltipAutoPosition]="control?.tooltipAutoPosition"
[popover]="control.popoverContent"
[novoPopover]="control.popoverContent"
[popoverHtmlContent]="control.popoverHtmlContent"
[popoverTitle]="control.popoverTitle"
[popoverPlacement]="control.popoverPlacement"
Expand Down Expand Up @@ -439,7 +439,7 @@ import { NovoTemplate } from '../common/novo-template/novo-template.directive';
[tooltipPreline]="control?.tooltipPreline"
[removeTooltipArrow]="control?.removeTooltipArrow"
[tooltipAutoPosition]="control?.tooltipAutoPosition"
[popover]="control.popoverContent"
[novoPopover]="control.popoverContent"
[popoverHtmlContent]="control.popoverHtmlContent"
[popoverTitle]="control.popoverTitle"
[popoverPlacement]="control.popoverPlacement"
Expand Down Expand Up @@ -470,7 +470,7 @@ import { NovoTemplate } from '../common/novo-template/novo-template.directive';
[tooltipPreline]="control?.tooltipPreline"
[removeTooltipArrow]="control?.removeTooltipArrow"
[tooltipAutoPosition]="control?.tooltipAutoPosition"
[popover]="control.popoverContent"
[novoPopover]="control.popoverContent"
[popoverHtmlContent]="control.popoverHtmlContent"
[popoverTitle]="control.popoverTitle"
[popoverPlacement]="control.popoverPlacement"
Expand Down Expand Up @@ -503,7 +503,7 @@ import { NovoTemplate } from '../common/novo-template/novo-template.directive';
[tooltipPreline]="control?.tooltipPreline"
[removeTooltipArrow]="control?.removeTooltipArrow"
[tooltipAutoPosition]="control?.tooltipAutoPosition"
[popover]="control.popoverContent"
[novoPopover]="control.popoverContent"
[popoverHtmlContent]="control.popoverHtmlContent"
[popoverTitle]="control.popoverTitle"
[popoverPlacement]="control.popoverPlacement"
Expand Down Expand Up @@ -543,7 +543,7 @@ import { NovoTemplate } from '../common/novo-template/novo-template.directive';
[tooltipPreline]="control?.tooltipPreline"
[removeTooltipArrow]="control?.removeTooltipArrow"
[tooltipAutoPosition]="control?.tooltipAutoPosition"
[popover]="control.popoverContent"
[novoPopover]="control.popoverContent"
[popoverHtmlContent]="control.popoverHtmlContent"
[popoverTitle]="control.popoverTitle"
[popoverPlacement]="control.popoverPlacement"
Expand Down Expand Up @@ -597,7 +597,7 @@ import { NovoTemplate } from '../common/novo-template/novo-template.directive';
[tooltipPreline]="control?.tooltipPreline"
[removeTooltipArrow]="control?.removeTooltipArrow"
[tooltipAutoPosition]="control?.tooltipAutoPosition"
[popover]="control.popoverContent"
[novoPopover]="control.popoverContent"
[popoverHtmlContent]="control.popoverHtmlContent"
[popoverTitle]="control.popoverTitle"
[popoverPlacement]="control.popoverPlacement"
Expand All @@ -622,7 +622,7 @@ import { NovoTemplate } from '../common/novo-template/novo-template.directive';
[tooltipPreline]="control?.tooltipPreline"
[removeTooltipArrow]="control?.removeTooltipArrow"
[tooltipAutoPosition]="control?.tooltipAutoPosition"
[popover]="control.popoverContent"
[novoPopover]="control.popoverContent"
[popoverHtmlContent]="control.popoverHtmlContent"
[popoverTitle]="control.popoverTitle"
[popoverPlacement]="control.popoverPlacement"
Expand All @@ -648,7 +648,7 @@ import { NovoTemplate } from '../common/novo-template/novo-template.directive';
[tooltipPreline]="control?.tooltipPreline"
[removeTooltipArrow]="control?.removeTooltipArrow"
[tooltipAutoPosition]="control?.tooltipAutoPosition"
[popover]="control.popoverContent"
[novoPopover]="control.popoverContent"
[popoverHtmlContent]="control.popoverHtmlContent"
[popoverTitle]="control.popoverTitle"
[popoverPlacement]="control.popoverPlacement"
Expand Down Expand Up @@ -677,7 +677,7 @@ import { NovoTemplate } from '../common/novo-template/novo-template.directive';
[tooltipPreline]="control?.tooltipPreline"
[removeTooltipArrow]="control?.removeTooltipArrow"
[tooltipAutoPosition]="control?.tooltipAutoPosition"
[popover]="control.popoverContent"
[novoPopover]="control.popoverContent"
[popoverHtmlContent]="control.popoverHtmlContent"
[popoverTitle]="control.popoverTitle"
[popoverPlacement]="control.popoverPlacement"
Expand Down
2 changes: 1 addition & 1 deletion projects/novo-elements/src/elements/popover/PopOver.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { PopOverDirective } from './PopOver';

@Component({
selector: 'test-component',
template: ` <div popover=""></div> `,
template: ` <div novoPopover=""></div> `,
})
class TestComponent {}

Expand Down
10 changes: 9 additions & 1 deletion projects/novo-elements/src/elements/popover/PopOver.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,11 @@ import {
import { PopOverContent } from './PopOverContent';

@Directive({
selector: '[popover]',
/**
* [popover] selector retained for backwards compatability, but should be avoived as
* it interferes with the newly added (2023) HTML standard spec popover attribute.
*/
selector: '[popover], [novoPopover]',
})
export class PopOverDirective implements OnChanges {
protected PopoverComponent = PopOverContent;
Expand All @@ -25,6 +29,10 @@ export class PopOverDirective implements OnChanges {

@Input('popover')
content: string | PopOverContent;
@Input('novoPopover')
set novoPopover(content: string | PopOverContent) {
this.content = content;
}
@Input()
popoverHtmlContent: string;
@Input()
Expand Down
4 changes: 2 additions & 2 deletions ...ples/src/components/pop-over/pop-over-auto-placement/pop-over-auto-placement-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<span popover="If the placement of the PopOver will make it appear off-screen, then it will be automatically adjusted to appear on the opposite side. For example: this PopOver should appear below the element.&#13;&#10; &#13;&#10; &#13;&#10;Need to make extra space so this PopOver would actually appear below the screen."
<span novoPopover="If the placement of the PopOver will make it appear off-screen, then it will be automatically adjusted to appear on the opposite side. For example: this PopOver should appear below the element.&#13;&#10; &#13;&#10; &#13;&#10;Need to make extra space so this PopOver would actually appear below the screen."
popoverTitle="PopOver Moves to Top if near Bottom of Screen"
popoverPlacement="bottom"
[popoverOnHover]="true">
Hover Me
</span>
<span popover="Too small to drop below screen."
<span novoPopover="Too small to drop below screen."
popoverTitle="PopOver Won't Change"
popoverPlacement="bottom"
[popoverOnHover]="true">
Expand Down
8 changes: 4 additions & 4 deletions .../novo-examples/src/components/pop-over/pop-over-behaviors/pop-over-behaviors-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
<span class="popover-element"
popover="PopOver appears when hovering over the element. When the mouse is no longer over the element or the PopOver, then it will be dismissed."
novoPopover="PopOver appears when hovering over the element. When the mouse is no longer over the element or the PopOver, then it will be dismissed."
popoverTitle="ON HOVER"
popoverPlacement="right"
[popoverOnHover]="true">
ON HOVER
</span>

<span class="popover-element"
popover="PopOver appears when clicking on the element. Dismiss it by clicking the element again."
novoPopover="PopOver appears when clicking on the element. Dismiss it by clicking the element again."
popoverTitle="ON CLICK"
popoverPlacement="right">
ON CLICK
</span>

<span class="popover-element"
popover="This PopOver has a 2000 ms or 2 second timeout on it. Dismiss it by clicking on the element or waiting for the timeout."
novoPopover="This PopOver has a 2000 ms or 2 second timeout on it. Dismiss it by clicking on the element or waiting for the timeout."
popoverTitle="ON CLICK WITH TIMEOUT"
popoverPlacement="right"
[popoverDismissTimeout]="2000">
ON CLICK WITH TIMEOUT
</span>

<span class="popover-element"
popover="This PopOver will never appear when clicking on the element or when hovering over the element."
novoPopover="This PopOver will never appear when clicking on the element or when hovering over the element."
popoverTitle="popoverDisabled"
popoverPlacement="right"
[popoverDisabled]="true">
Expand Down
2 changes: 1 addition & 1 deletion ...ects/novo-examples/src/components/pop-over/pop-over-dynamic/pop-over-dynamic-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,4 @@
onHidden or onShown events to perform additional tasks.
</popover-content>

<span [popover]="dynamicHtmlPopOver">Click to see a popover with dynamic html</span>
<span [novoPopover]="dynamicHtmlPopOver">Click to see a popover with dynamic html</span>
4 changes: 2 additions & 2 deletions ...ovo-examples/src/components/pop-over/pop-over-horizontal/pop-over-horizontal-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<span popover="Popover is on the top side and to the right of the element. Can also apply 'left' to 'top' placement PopOvers."
<span novoPopover="Popover is on the top side and to the right of the element. Can also apply 'left' to 'top' placement PopOvers."
popoverTitle="Top-Right PopOver"
popoverPlacement="top-right"
[popoverOnHover]="true">
TOP-RIGHT
</span>
<span popover="Popover is on the bottom side and to the left of the element. Can also apply 'right' to 'bottom' placement PopOvers."
<span novoPopover="Popover is on the bottom side and to the left of the element. Can also apply 'right' to 'bottom' placement PopOvers."
popoverTitle="Bottom-Left PopOver"
popoverPlacement="bottom-left"
[popoverOnHover]="true">
Expand Down
8 changes: 4 additions & 4 deletions .../novo-examples/src/components/pop-over/pop-over-placement/pop-over-placement-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<span popover="Popover is to left of element" popoverTitle="Left PopOver" popoverPlacement="left" [popoverOnHover]="true">LEFT</span>
<span popover="Popover is to right of element" popoverTitle="Right PopOver" popoverPlacement="right" [popoverOnHover]="true">RIGHT</span>
<span popover="Popover is above the element" popoverTitle="Top PopOver" popoverPlacement="top" [popoverOnHover]="true">TOP</span>
<span popover="Popover is below the element" popoverTitle="Bottom PopOver" popoverPlacement="bottom" [popoverOnHover]="true">BOTTOM</span>
<span novoPopover="Popover is to left of element" popoverTitle="Left PopOver" popoverPlacement="left" [popoverOnHover]="true">LEFT</span>
<span novoPopover="Popover is to right of element" popoverTitle="Right PopOver" popoverPlacement="right" [popoverOnHover]="true">RIGHT</span>
<span novoPopover="Popover is above the element" popoverTitle="Top PopOver" popoverPlacement="top" [popoverOnHover]="true">TOP</span>
<span novoPopover="Popover is below the element" popoverTitle="Bottom PopOver" popoverPlacement="bottom" [popoverOnHover]="true">BOTTOM</span>
4 changes: 2 additions & 2 deletions ...ts/novo-examples/src/components/pop-over/pop-over-vertical/pop-over-vertical-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<span popover="Popover is on the right side and below the element. Can also apply 'top' to 'right' placement PopOvers."
<span novoPopover="Popover is on the right side and below the element. Can also apply 'top' to 'right' placement PopOvers."
popoverTitle="Right-Bottom PopOver"
popoverPlacement="right-bottom"
[popoverOnHover]="true">
RIGHT-BOTTOM
</span>
<span popover="Popover is on the left side and above the element. Can also apply 'bottom' to 'left' placement PopOvers."
<span novoPopover="Popover is on the left side and above the element. Can also apply 'bottom' to 'left' placement PopOvers."
popoverTitle="Left-Top PopOver"
popoverPlacement="left-top"
[popoverOnHover]="true">
Expand Down