From 8c1ddf0696917d103170828ba0eec6586775f226 Mon Sep 17 00:00:00 2001 From: Vitaliy Makogon Date: Fri, 26 Apr 2019 11:49:49 +0300 Subject: [PATCH] feat(popover): add adaptivePosition option to disable adaptive positioning --- .../adaptive-position/adaptive-position.html | 15 + .../adaptive-position/adaptive-position.ts | 7 + .../app/components/+popover/demos/index.ts | 40 +- .../+popover/popover-section.list.ts | 39 +- .../app/components/+tooltip/demos/index.ts | 28 +- .../+tooltip/tooltip-section.list.ts | 15 +- .../adaptive-position/adaptive-position.html | 2 +- demo/src/ng-api-doc.ts | 478 +++++++++--------- .../component-loader.class.ts | 16 +- src/popover/popover.config.ts | 2 + src/popover/popover.directive.ts | 15 +- src/positioning/models/index.ts | 3 + src/positioning/modifiers/preventOverflow.ts | 6 +- src/positioning/positioning.service.ts | 5 +- src/positioning/utils/setAllStyles.ts | 8 +- src/tooltip/tooltip.config.ts | 2 + src/tooltip/tooltip.directive.ts | 7 +- 17 files changed, 388 insertions(+), 300 deletions(-) create mode 100644 demo/src/app/components/+popover/demos/adaptive-position/adaptive-position.html create mode 100644 demo/src/app/components/+popover/demos/adaptive-position/adaptive-position.ts diff --git a/demo/src/app/components/+popover/demos/adaptive-position/adaptive-position.html b/demo/src/app/components/+popover/demos/adaptive-position/adaptive-position.html new file mode 100644 index 0000000000..b7f6e20a93 --- /dev/null +++ b/demo/src/app/components/+popover/demos/adaptive-position/adaptive-position.html @@ -0,0 +1,15 @@ + + + \ No newline at end of file diff --git a/demo/src/app/components/+popover/demos/adaptive-position/adaptive-position.ts b/demo/src/app/components/+popover/demos/adaptive-position/adaptive-position.ts new file mode 100644 index 0000000000..5024cb5467 --- /dev/null +++ b/demo/src/app/components/+popover/demos/adaptive-position/adaptive-position.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'demo-popover-adaptive-position', + templateUrl: './adaptive-position.html' +}) +export class DemoPopoverAdaptivePositionComponent {} diff --git a/demo/src/app/components/+popover/demos/index.ts b/demo/src/app/components/+popover/demos/index.ts index 055df889ba..304265f714 100644 --- a/demo/src/app/components/+popover/demos/index.ts +++ b/demo/src/app/components/+popover/demos/index.ts @@ -1,37 +1,39 @@ +import { DemoPopoverAdaptivePositionComponent } from './adaptive-position/adaptive-position'; import { DemoPopoverBasicComponent } from './basic/basic'; -import { DemoPopoverPlacementComponent } from './placement/placement'; +import { DemoPopoverByIsOpenPropComponent } from './trigger-by-isopen-property/trigger-by-isopen-property'; +import { DemoPopoverClassComponent } from './class/class'; +import { DemoPopoverConfigComponent } from './config/config'; +import { DemoPopoverContainerComponent } from './container/container'; +import { DemoPopoverContextComponent } from './popover-context/popover-context'; +import { DemoPopoverCustomContentComponent } from './custom-content/custom-content'; import { DemoPopoverDismissComponent } from './dismiss/dismiss'; import { DemoPopoverDynamicComponent } from './dynamic/dynamic'; -import { DemoPopoverCustomContentComponent } from './custom-content/custom-content'; import { DemoPopoverDynamicHtmlComponent } from './dynamic-html/dynamic-html'; -import { DemoPopoverContainerComponent } from './container/container'; -import { DemoPopoverConfigComponent } from './config/config'; +import { DemoPopoverEventsComponent } from './events/events'; +import { DemoPopoverOutsideClickComponent } from './outside-click/outside-click'; +import { DemoPopoverPlacementComponent } from './placement/placement'; import { DemoPopoverStylingGlobalComponent } from './styling-global/styling-global'; import { DemoPopoverStylingLocalComponent } from './styling-local/styling-local'; import { DemoPopoverTriggersCustomComponent } from './triggers-custom/triggers-custom'; import { DemoPopoverTriggersManualComponent } from './triggers-manual/triggers-manual'; -import { DemoPopoverByIsOpenPropComponent } from './trigger-by-isopen-property/trigger-by-isopen-property'; -import { DemoPopoverClassComponent } from './class/class'; -import { DemoPopoverOutsideClickComponent } from './outside-click/outside-click'; -import { DemoPopoverEventsComponent } from './events/events'; -import { DemoPopoverContextComponent } from './popover-context/popover-context'; export const DEMO_COMPONENTS = [ + DemoPopoverAdaptivePositionComponent, DemoPopoverBasicComponent, - DemoPopoverPlacementComponent, + DemoPopoverByIsOpenPropComponent, + DemoPopoverClassComponent, + DemoPopoverConfigComponent, + DemoPopoverContainerComponent, + DemoPopoverContextComponent, + DemoPopoverCustomContentComponent, DemoPopoverDismissComponent, DemoPopoverDynamicComponent, - DemoPopoverCustomContentComponent, DemoPopoverDynamicHtmlComponent, - DemoPopoverContainerComponent, - DemoPopoverConfigComponent, + DemoPopoverEventsComponent, + DemoPopoverOutsideClickComponent, + DemoPopoverPlacementComponent, DemoPopoverStylingGlobalComponent, DemoPopoverStylingLocalComponent, DemoPopoverTriggersCustomComponent, - DemoPopoverTriggersManualComponent, - DemoPopoverByIsOpenPropComponent, - DemoPopoverClassComponent, - DemoPopoverOutsideClickComponent, - DemoPopoverEventsComponent, - DemoPopoverContextComponent + DemoPopoverTriggersManualComponent ]; diff --git a/demo/src/app/components/+popover/popover-section.list.ts b/demo/src/app/components/+popover/popover-section.list.ts index da17c2e6a7..39874cb210 100644 --- a/demo/src/app/components/+popover/popover-section.list.ts +++ b/demo/src/app/components/+popover/popover-section.list.ts @@ -1,20 +1,20 @@ +import { DemoPopoverAdaptivePositionComponent } from './demos/adaptive-position/adaptive-position'; import { DemoPopoverBasicComponent } from './demos/basic/basic'; -import { DemoPopoverPlacementComponent } from './demos/placement/placement'; +import { DemoPopoverByIsOpenPropComponent } from './demos/trigger-by-isopen-property/trigger-by-isopen-property'; +import { DemoPopoverClassComponent } from './demos/class/class'; +import { DemoPopoverConfigComponent } from './demos/config/config'; +import { DemoPopoverContainerComponent } from './demos/container/container'; +import { DemoPopoverContextComponent } from './demos/popover-context/popover-context'; +import { DemoPopoverCustomContentComponent } from './demos/custom-content/custom-content'; import { DemoPopoverDismissComponent } from './demos/dismiss/dismiss'; import { DemoPopoverDynamicComponent } from './demos/dynamic/dynamic'; -import { DemoPopoverCustomContentComponent } from './demos/custom-content/custom-content'; import { DemoPopoverDynamicHtmlComponent } from './demos/dynamic-html/dynamic-html'; -import { DemoPopoverContainerComponent } from './demos/container/container'; -import { DemoPopoverConfigComponent } from './demos/config/config'; +import { DemoPopoverEventsComponent } from './demos/events/events'; import { DemoPopoverOutsideClickComponent } from './demos/outside-click/outside-click'; +import { DemoPopoverPlacementComponent } from './demos/placement/placement'; +import { DemoPopoverStylingLocalComponent } from './demos/styling-local/styling-local'; import { DemoPopoverTriggersCustomComponent } from './demos/triggers-custom/triggers-custom'; import { DemoPopoverTriggersManualComponent } from './demos/triggers-manual/triggers-manual'; -import { DemoPopoverByIsOpenPropComponent } from './demos/trigger-by-isopen-property/trigger-by-isopen-property'; -import { DemoPopoverStylingLocalComponent } from './demos/styling-local/styling-local'; -import { DemoPopoverClassComponent } from './demos/class/class'; -import { DemoPopoverContextComponent } from './demos/popover-context/popover-context'; -import { DemoPopoverStylingGlobalComponent } from './demos/styling-global/styling-global'; -import { DemoPopoverEventsComponent } from './demos/events/events'; import { ContentSection } from '../../docs/models/content-section.model'; import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section/index'; @@ -57,6 +57,16 @@ export const demoComponentContent: ContentSection[] = [ Besides that, auto option may be used to detect a position that fits the component on screen.

`, outlet: DemoPopoverPlacementComponent }, + { + title: 'Disable adaptive position', + anchor: 'adaptive-position', + description: ` +

You can disable adaptive position via adaptivePosition input or config option

+ `, + component: require('!!raw-loader?lang=typescript!./demos/adaptive-position/adaptive-position.ts'), + html: require('!!raw-loader?lang=markup!./demos/adaptive-position/adaptive-position.html'), + outlet: DemoPopoverAdaptivePositionComponent + }, { title: 'Dismiss on next click', anchor: 'popover-dismiss', @@ -167,14 +177,7 @@ export const demoComponentContent: ContentSection[] = [ component: require('!!raw-loader?lang=typescript!./demos/popover-context/popover-context.ts'), html: require('!!raw-loader?lang=markup!./demos/popover-context/popover-context.html'), outlet: DemoPopoverContextComponent - }/*, - { - title: 'Global styling', - anchor: 'styling-global', - component: require('!!raw-loader?lang=typescript!./demos/styling-global/styling-global.ts'), - html: require('!!raw-loader?lang=markup!./demos/styling-global/styling-global.html'), - outlet: DemoPopoverStylingGlobalComponent - }*/ + } ] }, { diff --git a/demo/src/app/components/+tooltip/demos/index.ts b/demo/src/app/components/+tooltip/demos/index.ts index b066405a7f..dccf1739d3 100644 --- a/demo/src/app/components/+tooltip/demos/index.ts +++ b/demo/src/app/components/+tooltip/demos/index.ts @@ -1,31 +1,31 @@ import { DemoTooltipBasicComponent } from './basic/basic'; -import { DemoTooltipPlacementComponent } from './placement/placement'; -import { DemoTooltipDismissComponent } from './dismiss/dismiss'; -import { DemoTooltipDynamicComponent } from './dynamic/dynamic'; +import { DemoTooltipClassComponent } from './class/class'; import { DemoTooltipConfigComponent } from './config/config'; import { DemoTooltipContainerComponent } from './container/container'; +import { DemoTooltipCustomContentComponent } from './custom-content/custom-content'; +import { DemoTooltipDelayComponent } from './delay/delay'; +import { DemoTooltipDismissComponent } from './dismiss/dismiss'; +import { DemoTooltipDynamicComponent } from './dynamic/dynamic'; +import { DemoTooltipDynamicHtmlComponent } from './dynamic-html/dynamic-html'; +import { DemoTooltipPlacementComponent } from './placement/placement'; import { DemoTooltipStylingGlobalComponent } from './styling-global/styling-global'; import { DemoTooltipStylingLocalComponent } from './styling-local/styling-local'; import { DemoTooltipTriggersCustomComponent } from './triggers-custom/triggers-custom'; import { DemoTooltipTriggersManualComponent } from './triggers-manual/triggers-manual'; -import { DemoTooltipDynamicHtmlComponent } from './dynamic-html/dynamic-html'; -import { DemoTooltipClassComponent } from './class/class'; -import { DemoTooltipDelayComponent } from './delay/delay'; -import { DemoTooltipCustomContentComponent } from './custom-content/custom-content'; export const DEMO_COMPONENTS = [ DemoTooltipBasicComponent, - DemoTooltipPlacementComponent, - DemoTooltipDismissComponent, + DemoTooltipClassComponent, + DemoTooltipConfigComponent, + DemoTooltipContainerComponent, DemoTooltipCustomContentComponent, + DemoTooltipDelayComponent, + DemoTooltipDismissComponent, DemoTooltipDynamicComponent, DemoTooltipDynamicHtmlComponent, - DemoTooltipContainerComponent, - DemoTooltipConfigComponent, + DemoTooltipPlacementComponent, DemoTooltipStylingGlobalComponent, DemoTooltipStylingLocalComponent, DemoTooltipTriggersCustomComponent, - DemoTooltipTriggersManualComponent, - DemoTooltipClassComponent, - DemoTooltipDelayComponent + DemoTooltipTriggersManualComponent ]; diff --git a/demo/src/app/components/+tooltip/tooltip-section.list.ts b/demo/src/app/components/+tooltip/tooltip-section.list.ts index 223bff5a38..46186c994f 100644 --- a/demo/src/app/components/+tooltip/tooltip-section.list.ts +++ b/demo/src/app/components/+tooltip/tooltip-section.list.ts @@ -1,15 +1,16 @@ import { DemoTooltipBasicComponent } from './demos/basic/basic'; -import { DemoTooltipPlacementComponent } from './demos/placement/placement'; +import { DemoTooltipClassComponent } from './demos/class/class'; +import { DemoTooltipConfigComponent } from './demos/config/config'; +import { DemoTooltipContainerComponent } from './demos/container/container'; +import { DemoTooltipCustomContentComponent } from './demos/custom-content/custom-content'; +import { DemoTooltipDelayComponent } from './demos/delay/delay'; import { DemoTooltipDismissComponent } from './demos/dismiss/dismiss'; import { DemoTooltipDynamicComponent } from './demos/dynamic/dynamic'; import { DemoTooltipDynamicHtmlComponent } from './demos/dynamic-html/dynamic-html'; -import { DemoTooltipContainerComponent } from './demos/container/container'; -import { DemoTooltipConfigComponent } from './demos/config/config'; +import { DemoTooltipPlacementComponent } from './demos/placement/placement'; +import { DemoTooltipStylingLocalComponent } from './demos/styling-local/styling-local'; import { DemoTooltipTriggersCustomComponent } from './demos/triggers-custom/triggers-custom'; import { DemoTooltipTriggersManualComponent } from './demos/triggers-manual/triggers-manual'; -import { DemoTooltipStylingLocalComponent } from './demos/styling-local/styling-local'; -import { DemoTooltipClassComponent } from './demos/class/class'; -import { DemoTooltipStylingGlobalComponent } from './demos/styling-global/styling-global'; import { ContentSection } from '../../docs/models/content-section.model'; import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section/index'; @@ -20,8 +21,6 @@ import { NgApiDocComponent, NgApiDocConfigComponent } from '../../docs/api-docs'; -import { DemoTooltipDelayComponent } from './demos/delay/delay'; -import { DemoTooltipCustomContentComponent } from './demos/custom-content/custom-content'; export const demoComponentContent: ContentSection[] = [ { diff --git a/demo/src/app/components/+typeahead/demos/adaptive-position/adaptive-position.html b/demo/src/app/components/+typeahead/demos/adaptive-position/adaptive-position.html index 4cc790c992..168adb1690 100644 --- a/demo/src/app/components/+typeahead/demos/adaptive-position/adaptive-position.html +++ b/demo/src/app/components/+typeahead/demos/adaptive-position/adaptive-position.html @@ -1,5 +1,5 @@ 
Model: {{selected | json}}
\ No newline at end of file diff --git a/demo/src/ng-api-doc.ts b/demo/src/ng-api-doc.ts index b0829ad275..c7291a0fa3 100644 --- a/demo/src/ng-api-doc.ts +++ b/demo/src/ng-api-doc.ts @@ -9,17 +9,17 @@ export const ngdoc: any = { { "name": "heading", "type": "string", - "description": "

Clickable text in accordion's group header, check accordion heading below for using html in header

\n" + "description": "

Clickable text in accordion's group header, check accordion heading below for using html in header

\n" }, { "name": "isDisabled", "type": "boolean", - "description": "

if true — disables accordion group

\n" + "description": "

if true — disables accordion group

\n" }, { "name": "isOpen", "type": "boolean", - "description": "

Is accordion group open or closed. This property supports two-way binding

\n" + "description": "

Is accordion group open or closed. This property supports two-way binding

\n" }, { "name": "panelClass", @@ -30,7 +30,7 @@ export const ngdoc: any = { "outputs": [ { "name": "isOpenChange", - "description": "

Emits when the opened state changes

\n" + "description": "

Emits when the opened state changes

\n" } ], "properties": [ @@ -38,7 +38,7 @@ export const ngdoc: any = { "name": "isAnimated", "defaultValue": "false", "type": "boolean", - "description": "

turn on/off animation

\n" + "description": "

turn on/off animation

\n" } ], "methods": [] @@ -46,19 +46,19 @@ export const ngdoc: any = { "AccordionComponent": { "fileName": "src/accordion/accordion.component.ts", "className": "AccordionComponent", - "description": "

Displays collapsible content panels for presenting information in a limited amount of space.

\n", + "description": "

Displays collapsible content panels for presenting information in a limited amount of space.

\n", "selector": "accordion", "inputs": [ { "name": "closeOthers", "type": "boolean", - "description": "

if true expanding one item will close all others

\n" + "description": "

if true expanding one item will close all others

\n" }, { "name": "isAnimated", "defaultValue": "false", "type": "boolean", - "description": "

turn on/off animation

\n" + "description": "

turn on/off animation

\n" } ], "outputs": [], @@ -75,13 +75,13 @@ export const ngdoc: any = { "name": "closeOthers", "defaultValue": "false", "type": "Boolean", - "description": "

Whether the other panels should be closed when a panel is opened

\n" + "description": "

Whether the other panels should be closed when a panel is opened

\n" }, { "name": "isAnimated", "defaultValue": "false", "type": "Boolean", - "description": "

turn on/off animation

\n" + "description": "

turn on/off animation

\n" } ] }, @@ -95,18 +95,18 @@ export const ngdoc: any = { "name": "dismissible", "defaultValue": "false", "type": "boolean", - "description": "

If set, displays an inline "Close" button

\n" + "description": "

If set, displays an inline "Close" button

\n" }, { "name": "dismissOnTimeout", "type": "string | number", - "description": "

Number in milliseconds, after which alert will be closed

\n" + "description": "

Number in milliseconds, after which alert will be closed

\n" }, { "name": "isOpen", "defaultValue": "true", "type": "boolean", - "description": "

Is alert visible

\n" + "description": "

Is alert visible

\n" }, { "name": "type", @@ -122,7 +122,7 @@ export const ngdoc: any = { }, { "name": "onClosed", - "description": "

This event fires when alert closed, $event is an instance of Alert component

\n" + "description": "

This event fires when alert closed, $event is an instance of Alert component

\n" } ], "properties": [], @@ -145,19 +145,19 @@ export const ngdoc: any = { "name": "dismissible", "defaultValue": "false", "type": "boolean", - "description": "

is alerts are dismissible by default

\n" + "description": "

is alerts are dismissible by default

\n" }, { "name": "dismissOnTimeout", "defaultValue": "undefined", "type": "number", - "description": "

default time before alert will dismiss

\n" + "description": "

default time before alert will dismiss

\n" }, { "name": "type", "defaultValue": "warning", "type": "string", - "description": "

default alert type

\n" + "description": "

default alert type

\n" } ] }, @@ -171,13 +171,13 @@ export const ngdoc: any = { "name": "btnCheckboxFalse", "defaultValue": "false", "type": "boolean", - "description": "

Falsy value, will be set to ngModel

\n" + "description": "

Falsy value, will be set to ngModel

\n" }, { "name": "btnCheckboxTrue", "defaultValue": "true", "type": "boolean", - "description": "

Truthy value, will be set to ngModel

\n" + "description": "

Truthy value, will be set to ngModel

\n" } ], "outputs": [], @@ -203,22 +203,22 @@ export const ngdoc: any = { { "name": "btnRadio", "type": "string", - "description": "

Radio button value, will be set to ngModel

\n" + "description": "

Radio button value, will be set to ngModel

\n" }, { "name": "disabled", "type": "boolean", - "description": "

If true — radio button is disabled

\n" + "description": "

If true — radio button is disabled

\n" }, { "name": "uncheckable", "type": "boolean", - "description": "

If true — radio button can be unchecked

\n" + "description": "

If true — radio button can be unchecked

\n" }, { "name": "value", "type": "string", - "description": "

Current value of radio component or group

\n" + "description": "

Current value of radio component or group

\n" } ], "outputs": [], @@ -234,7 +234,7 @@ export const ngdoc: any = { { "name": "activeSlide", "type": "number", - "description": "

Index of currently displayed slide(started for 0)

\n" + "description": "

Index of currently displayed slide(started for 0)

\n" }, { "name": "interval", @@ -278,18 +278,18 @@ export const ngdoc: any = { "outputs": [ { "name": "activeSlideChange", - "description": "

Will be emitted when active slide has been changed. Part of two-way-bindable [(activeSlide)] property

\n" + "description": "

Will be emitted when active slide has been changed. Part of two-way-bindable [(activeSlide)] property

\n" }, { "name": "slideRangeChange", - "description": "

Will be emitted when active slides has been changed in multilist mode

\n" + "description": "

Will be emitted when active slides has been changed in multilist mode

\n" } ], "properties": [ { "name": "activeSlide", "type": "number", - "description": "

Index of currently displayed slide(started for 0)

\n" + "description": "

Index of currently displayed slide(started for 0)

\n" } ], "methods": [ @@ -438,25 +438,25 @@ export const ngdoc: any = { "name": "interval", "defaultValue": "5000", "type": "number", - "description": "

Default interval of auto changing of slides

\n" + "description": "

Default interval of auto changing of slides

\n" }, { "name": "noPause", "defaultValue": "false", "type": "boolean", - "description": "

Is loop of auto changing of slides can be paused

\n" + "description": "

Is loop of auto changing of slides can be paused

\n" }, { "name": "noWrap", "defaultValue": "false", "type": "boolean", - "description": "

Is slides can wrap from the last to the first slide

\n" + "description": "

Is slides can wrap from the last to the first slide

\n" }, { "name": "showIndicators", "defaultValue": "true", "type": "boolean", - "description": "

Show carousel-indicators

\n" + "description": "

Show carousel-indicators

\n" } ] }, @@ -483,7 +483,7 @@ export const ngdoc: any = { { "name": "active", "type": "boolean", - "description": "

Is current slide active

\n" + "description": "

Is current slide active

\n" } ], "outputs": [], @@ -492,12 +492,12 @@ export const ngdoc: any = { "name": "addClass", "defaultValue": "true", "type": "boolean", - "description": "

Wraps element by appropriate CSS classes

\n" + "description": "

Wraps element by appropriate CSS classes

\n" }, { "name": "carousel", "type": "CarouselComponent", - "description": "

Link to Parent(container-collection) component

\n" + "description": "

Link to Parent(container-collection) component

\n" } ], "methods": [] @@ -511,82 +511,82 @@ export const ngdoc: any = { { "name": "_a", "type": "number[]", - "description": "

DateArray [year, month, date, .....]

\n" + "description": "

DateArray [year, month, date, .....]

\n" }, { "name": "_changeInProgress", "type": "boolean", - "description": "

used in set offset

\n" + "description": "

used in set offset

\n" }, { "name": "_d", "type": "Date", - "description": "

date value

\n" + "description": "

date value

\n" }, { "name": "_f", "type": "string | string[]", - "description": "

date format

\n" + "description": "

date format

\n" }, { "name": "_i", "type": "DateInput", - "description": "

input to parse: could be string, number[], number, Date, object

\n" + "description": "

input to parse: could be string, number[], number, Date, object

\n" }, { "name": "_isPm", "type": "boolean", - "description": "

is PM

\n" + "description": "

is PM

\n" }, { "name": "_isValid", "type": "boolean", - "description": "

is valid

\n" + "description": "

is valid

\n" }, { "name": "_l", "type": "string", - "description": "

locale key, 'en' by default

\n" + "description": "

locale key, 'en' by default

\n" }, { "name": "_locale", "type": "Locale", - "description": "

date locale obj

\n" + "description": "

date locale obj

\n" }, { "name": "_meridiem", "type": "string", - "description": "

date meridiem

\n" + "description": "

date meridiem

\n" }, { "name": "_nextDay", "type": "boolean", - "description": "

add one day to result at the end of parsing

\n" + "description": "

add one day to result at the end of parsing

\n" }, { "name": "_offset", "type": "number", - "description": "

utc time offset

\n" + "description": "

utc time offset

\n" }, { "name": "_pf", "type": "DateParsingFlags", - "description": "

date parsing flags

\n" + "description": "

date parsing flags

\n" }, { "name": "_strict", "type": "boolean", - "description": "

use strict parse format

\n" + "description": "

use strict parse format

\n" }, { "name": "_tzm", "type": "number", - "description": "

time zone

\n" + "description": "

time zone

\n" }, { "name": "_w", "type": "WeekParsing", - "description": "

date specific info \nweek

\n" + "description": "

date specific info\nweek

\n" } ] }, @@ -670,7 +670,7 @@ export const ngdoc: any = { { "name": "collapse", "type": "boolean", - "description": "

A flag indicating visibility of content (shown or hidden)

\n" + "description": "

A flag indicating visibility of content (shown or hidden)

\n" }, { "name": "display", @@ -681,50 +681,50 @@ export const ngdoc: any = { "name": "isAnimated", "defaultValue": "false", "type": "boolean", - "description": "

turn on/off animation

\n" + "description": "

turn on/off animation

\n" } ], "outputs": [ { "name": "collapsed", - "description": "

This event fires as soon as content collapses

\n" + "description": "

This event fires as soon as content collapses

\n" }, { "name": "collapses", - "description": "

This event fires when collapsing is started

\n" + "description": "

This event fires when collapsing is started

\n" }, { "name": "expanded", - "description": "

This event fires as soon as content becomes visible

\n" + "description": "

This event fires as soon as content becomes visible

\n" }, { "name": "expands", - "description": "

This event fires when expansion is started

\n" + "description": "

This event fires when expansion is started

\n" } ], "properties": [ { "name": "collapse", "type": "boolean", - "description": "

A flag indicating visibility of content (shown or hidden)

\n" + "description": "

A flag indicating visibility of content (shown or hidden)

\n" } ], "methods": [ { "name": "toggle", - "description": "

allows to manually toggle content visibility

\n", + "description": "

allows to manually toggle content visibility

\n", "args": [], "returnType": "void" }, { "name": "hide", - "description": "

allows to manually hide content

\n", + "description": "

allows to manually hide content

\n", "args": [], "returnType": "void" }, { "name": "show", - "description": "

allows to manually show collapsed content

\n", + "description": "

allows to manually show collapsed content

\n", "args": [], "returnType": "void" } @@ -950,7 +950,7 @@ export const ngdoc: any = { "name": "adaptivePosition", "defaultValue": "false", "type": "boolean", - "description": "

sets use adaptive position

\n" + "description": "

sets use adaptive position

\n" }, { "name": "containerClass", @@ -1299,125 +1299,125 @@ export const ngdoc: any = { { "name": "activeDate", "type": "Date", - "description": "

currently active date

\n" + "description": "

currently active date

\n" }, { "name": "customClass", "type": "{ date: Date; mode: string; clazz: string; }[]", - "description": "

array of custom css classes to be applied to targeted dates

\n" + "description": "

array of custom css classes to be applied to targeted dates

\n" }, { "name": "dateDisabled", "type": "{ date: Date; mode: string; }[]", - "description": "

array of disabled dates

\n" + "description": "

array of disabled dates

\n" }, { "name": "datepickerMode", "defaultValue": "day", "type": "string", - "description": "

sets datepicker mode, supports: day, month, year

\n" + "description": "

sets datepicker mode, supports: day, month, year

\n" }, { "name": "dayDisabled", "type": "number[]", - "description": "

disabled days of the week from 0-6 (0=Sunday, ..., 6=Saturday)

\n" + "description": "

disabled days of the week from 0-6 (0=Sunday, ..., 6=Saturday)

\n" }, { "name": "formatDay", "type": "string", - "description": "

format of day in month

\n" + "description": "

format of day in month

\n" }, { "name": "formatDayHeader", "type": "string", - "description": "

format of day in week header

\n" + "description": "

format of day in week header

\n" }, { "name": "formatDayTitle", "type": "string", - "description": "

format of title when selecting day

\n" + "description": "

format of title when selecting day

\n" }, { "name": "formatMonth", "type": "string", - "description": "

format of month in year

\n" + "description": "

format of month in year

\n" }, { "name": "formatMonthTitle", "type": "string", - "description": "

format of title when selecting month

\n" + "description": "

format of title when selecting month

\n" }, { "name": "formatYear", "type": "string", - "description": "

format of year in year range

\n" + "description": "

format of year in year range

\n" }, { "name": "initDate", "type": "Date", - "description": "

default date to show if ng-model value is not specified

\n" + "description": "

default date to show if ng-model value is not specified

\n" }, { "name": "maxDate", "type": "Date", - "description": "

latest selectable date

\n" + "description": "

latest selectable date

\n" }, { "name": "maxMode", "type": "string", - "description": "

sets upper datepicker mode, supports: day, month, year

\n" + "description": "

sets upper datepicker mode, supports: day, month, year

\n" }, { "name": "minDate", "type": "Date", - "description": "

oldest selectable date

\n" + "description": "

oldest selectable date

\n" }, { "name": "minMode", "type": "string", - "description": "

set lower datepicker mode, supports: day, month, year

\n" + "description": "

set lower datepicker mode, supports: day, month, year

\n" }, { "name": "monthColLimit", "type": "number", - "description": "

number of months displayed in a single row of month picker

\n" + "description": "

number of months displayed in a single row of month picker

\n" }, { "name": "onlyCurrentMonth", "type": "boolean", - "description": "

if true only dates from the currently displayed month will be shown

\n" + "description": "

if true only dates from the currently displayed month will be shown

\n" }, { "name": "shortcutPropagation", "type": "boolean", - "description": "

if true shortcut`s event propagation will be disabled

\n" + "description": "

if true shortcut`s event propagation will be disabled *

\n" }, { "name": "showWeeks", "defaultValue": "true", "type": "boolean", - "description": "

if false week numbers will be hidden

\n" + "description": "

if false week numbers will be hidden

\n" }, { "name": "startingDay", "type": "number", - "description": "

starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday)

\n" + "description": "

starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday)

\n" }, { "name": "yearColLimit", "type": "number", - "description": "

number of years displayed in a single row of year picker

\n" + "description": "

number of years displayed in a single row of year picker

\n" }, { "name": "yearRange", "type": "number", - "description": "

number of years displayed in year selection

\n" + "description": "

number of years displayed in year selection

\n" } ], "outputs": [ { "name": "activeDateChange", - "description": "

callback to invoke when the activeDate is changed.

\n" + "description": "

callback to invoke when the activeDate is changed.

\n" }, { "name": "selectionDone", @@ -1587,7 +1587,7 @@ export const ngdoc: any = { "methods": [ { "name": "setValue", - "description": "

setters

\n", + "description": "

setters

\n", "args": [ { "name": "value", @@ -1598,7 +1598,7 @@ export const ngdoc: any = { }, { "name": "setBindings", - "description": "

view to mode bindings

\n", + "description": "

view to mode bindings

\n", "args": [ { "name": "container", @@ -1609,7 +1609,7 @@ export const ngdoc: any = { }, { "name": "setEventHandlers", - "description": "

event handlers

\n", + "description": "

event handlers

\n", "args": [ { "name": "container", @@ -1930,20 +1930,20 @@ export const ngdoc: any = { "BsDropdownConfig": { "fileName": "src/dropdown/bs-dropdown.config.ts", "className": "BsDropdownConfig", - "description": "

Default dropdown configuration

\n", + "description": "

Default dropdown configuration

\n", "methods": [], "properties": [ { "name": "autoClose", "defaultValue": "true", "type": "boolean", - "description": "

default dropdown auto closing behavior

\n" + "description": "

default dropdown auto closing behavior

\n" }, { "name": "insideClick", "defaultValue": "false", "type": "boolean", - "description": "

default dropdown auto closing behavior

\n" + "description": "

default dropdown auto closing behavior

\n" } ] }, @@ -2060,7 +2060,7 @@ export const ngdoc: any = { "properties": [ { "name": "dropdownMenu", - "type": "Promise", + "type": "Promise>", "description": "

Content to be displayed as popover.

\n" } ] @@ -2104,7 +2104,7 @@ export const ngdoc: any = { "methods": [ { "name": "show", - "description": "

Shows a modal

\n", + "description": "

Shows a modal

\n", "args": [ { "name": "content", @@ -2119,7 +2119,7 @@ export const ngdoc: any = { }, { "name": "checkScrollbar", - "description": "

AFTER PR MERGE MODAL.COMPONENT WILL BE USING THIS CODE \nScroll bar tricks

\n", + "description": "

AFTER PR MERGE MODAL.COMPONENT WILL BE USING THIS CODE\nScroll bar tricks

\n", "args": [], "returnType": "void" } @@ -2129,7 +2129,7 @@ export const ngdoc: any = { "ModalBackdropComponent": { "fileName": "src/modal/modal-backdrop.component.ts", "className": "ModalBackdropComponent", - "description": "

This component will be added as background layout for modals if enabled

\n", + "description": "

This component will be added as background layout for modals if enabled

\n", "selector": "bs-modal-backdrop", "inputs": [], "outputs": [], @@ -2192,14 +2192,14 @@ export const ngdoc: any = { "ModalDirective": { "fileName": "src/modal/modal.directive.ts", "className": "ModalDirective", - "description": "

Mark any code with directive to show it's content in modal

\n", + "description": "

Mark any code with directive to show it's content in modal

\n", "selector": "[bsModal]", "exportAs": "bs-modal", "inputs": [ { "name": "config", "type": "ModalOptions", - "description": "

allows to set modal configuration via element property

\n" + "description": "

allows to set modal configuration via element property

\n" } ], "outputs": [ @@ -2213,7 +2213,7 @@ export const ngdoc: any = { }, { "name": "onShow", - "description": "

This event fires immediately when the show instance method is called.

\n" + "description": "

This event fires immediately when the show instance method is called.

\n" }, { "name": "onShown", @@ -2224,7 +2224,7 @@ export const ngdoc: any = { { "name": "config", "type": "ModalOptions", - "description": "

allows to set modal configuration via element property

\n" + "description": "

allows to set modal configuration via element property

\n" }, { "name": "dismissReason", @@ -2235,19 +2235,19 @@ export const ngdoc: any = { "methods": [ { "name": "toggle", - "description": "

Allows to manually toggle modal visibility

\n", + "description": "

Allows to manually toggle modal visibility

\n", "args": [], "returnType": "void" }, { "name": "show", - "description": "

Allows to manually open modal

\n", + "description": "

Allows to manually open modal

\n", "args": [], "returnType": "void" }, { "name": "hide", - "description": "

Allows to manually close modal

\n", + "description": "

Allows to manually close modal

\n", "args": [ { "name": "event", @@ -2264,13 +2264,13 @@ export const ngdoc: any = { }, { "name": "focusOtherModal", - "description": "

Events tricks

\n", + "description": "

Events tricks

\n", "args": [], "returnType": "void" }, { "name": "checkScrollbar", - "description": "

Scroll bar tricks

\n", + "description": "

Scroll bar tricks

\n", "args": [], "returnType": "void" } @@ -2334,73 +2334,73 @@ export const ngdoc: any = { { "name": "align", "type": "boolean", - "description": "

if true aligns each link to the sides of pager

\n" + "description": "

if true aligns each link to the sides of pager

\n" }, { "name": "boundaryLinks", "type": "boolean", - "description": "

if false first and last buttons will be hidden

\n" + "description": "

if false first and last buttons will be hidden

\n" }, { "name": "directionLinks", "type": "boolean", - "description": "

if false previous and next buttons will be hidden

\n" + "description": "

if false previous and next buttons will be hidden

\n" }, { "name": "disabled", "type": "boolean", - "description": "

if true pagination component will be disabled

\n" + "description": "

if true pagination component will be disabled

\n" }, { "name": "firstText", "type": "string", - "description": "

first button text

\n" + "description": "

first button text

\n" }, { "name": "itemsPerPage", "type": "number", - "description": "

maximum number of items per page. If value less than 1 will display all items on one page

\n" + "description": "

maximum number of items per page. If value less than 1 will display all items on one page

\n" }, { "name": "lastText", "type": "string", - "description": "

last button text

\n" + "description": "

last button text

\n" }, { "name": "maxSize", "type": "number", - "description": "

limit number for page links in pager

\n" + "description": "

limit number for page links in pager

\n" }, { "name": "nextText", "type": "string", - "description": "

next button text

\n" + "description": "

next button text

\n" }, { "name": "pageBtnClass", "type": "string", - "description": "

add class to <li>

\n" + "description": "

add class to <li>

\n" }, { "name": "previousText", "type": "string", - "description": "

previous button text

\n" + "description": "

previous button text

\n" }, { "name": "rotate", "type": "boolean", - "description": "

if true current page will in the middle of pages list

\n" + "description": "

if true current page will in the middle of pages list

\n" }, { "name": "totalItems", "type": "number", - "description": "

total number of items in all pages

\n" + "description": "

total number of items in all pages

\n" } ], "outputs": [ { "name": "numPages", - "description": "

fired when total pages count changes, $event:number equals to total pages count

\n" + "description": "

fired when total pages count changes, $event:number equals to total pages count

\n" }, { "name": "pageChanged", @@ -2426,73 +2426,73 @@ export const ngdoc: any = { { "name": "align", "type": "boolean", - "description": "

if true aligns each link to the sides of pager

\n" + "description": "

if true aligns each link to the sides of pager

\n" }, { "name": "boundaryLinks", "type": "boolean", - "description": "

if false first and last buttons will be hidden

\n" + "description": "

if false first and last buttons will be hidden

\n" }, { "name": "directionLinks", "type": "boolean", - "description": "

if false previous and next buttons will be hidden

\n" + "description": "

if false previous and next buttons will be hidden

\n" }, { "name": "disabled", "type": "boolean", - "description": "

if true pagination component will be disabled

\n" + "description": "

if true pagination component will be disabled

\n" }, { "name": "firstText", "type": "string", - "description": "

first button text

\n" + "description": "

first button text

\n" }, { "name": "itemsPerPage", "type": "number", - "description": "

maximum number of items per page. If value less than 1 will display all items on one page

\n" + "description": "

maximum number of items per page. If value less than 1 will display all items on one page

\n" }, { "name": "lastText", "type": "string", - "description": "

last button text

\n" + "description": "

last button text

\n" }, { "name": "maxSize", "type": "number", - "description": "

limit number for page links in pager

\n" + "description": "

limit number for page links in pager

\n" }, { "name": "nextText", "type": "string", - "description": "

next button text

\n" + "description": "

next button text

\n" }, { "name": "pageBtnClass", "type": "string", - "description": "

add class to <li>

\n" + "description": "

add class to <li>

\n" }, { "name": "previousText", "type": "string", - "description": "

previous button text

\n" + "description": "

previous button text

\n" }, { "name": "rotate", "type": "boolean", - "description": "

if true current page will in the middle of pages list

\n" + "description": "

if true current page will in the middle of pages list

\n" }, { "name": "totalItems", "type": "number", - "description": "

total number of items in all pages

\n" + "description": "

total number of items in all pages

\n" } ], "outputs": [ { "name": "numPages", - "description": "

fired when total pages count changes, $event:number equals to total pages count

\n" + "description": "

fired when total pages count changes, $event:number equals to total pages count

\n" }, { "name": "pageChanged", @@ -2505,7 +2505,7 @@ export const ngdoc: any = { "PaginationConfig": { "fileName": "src/pagination/pagination.config.ts", "className": "PaginationConfig", - "description": "

Provides default values for Pagination and pager components

\n", + "description": "

Provides default values for Pagination and pager components

\n", "methods": [], "properties": [] }, @@ -2536,6 +2536,12 @@ export const ngdoc: any = { "description": "

Configuration service for the Popover directive.\nYou can inject this service, typically in your root component, and customize\nthe values of its properties in order to provide default values for all the\npopovers used in the application.

\n", "methods": [], "properties": [ + { + "name": "adaptivePosition", + "defaultValue": "true", + "type": "boolean", + "description": "

sets disable adaptive position

\n" + }, { "name": "container", "type": "string", @@ -2562,6 +2568,11 @@ export const ngdoc: any = { "selector": "[popover]", "exportAs": "bs-popover", "inputs": [ + { + "name": "adaptivePosition", + "type": "boolean", + "description": "

sets disable adaptive position

\n" + }, { "name": "container", "type": "string", @@ -2671,7 +2682,7 @@ export const ngdoc: any = { { "name": "appendToBody", "type": "boolean", - "description": "

If true component will be attached to body

\n" + "description": "

If true component will be attached to body

\n" }, { "name": "attachment", @@ -2681,7 +2692,7 @@ export const ngdoc: any = { { "name": "element", "type": "string | HTMLElement | ElementRef", - "description": "

The DOM element, ElementRef, or a selector string of an element which will be moved

\n" + "description": "

The DOM element, ElementRef, or a selector string of an element which will be moved

\n" }, { "name": "offset", @@ -2691,7 +2702,7 @@ export const ngdoc: any = { { "name": "target", "type": "string | HTMLElement | ElementRef", - "description": "

The DOM element, ElementRef, or a selector string of an element which the element will be attached to

\n" + "description": "

The DOM element, ElementRef, or a selector string of an element which the element will be attached to

\n" }, { "name": "targetAttachment", @@ -2701,7 +2712,7 @@ export const ngdoc: any = { { "name": "targetOffset", "type": "string", - "description": "

A string similar to offset, but referring to the offset of the target

\n" + "description": "

A string similar to offset, but referring to the offset of the target

\n" } ] }, @@ -2721,12 +2732,12 @@ export const ngdoc: any = { { "name": "type", "type": "string", - "description": "

provide one of the four supported contextual classes: success, info, warning, danger

\n" + "description": "

provide one of the four supported contextual classes: success, info, warning, danger

\n" }, { "name": "value", "type": "number", - "description": "

current value of progress bar

\n" + "description": "

current value of progress bar

\n" } ], "outputs": [], @@ -2742,22 +2753,22 @@ export const ngdoc: any = { { "name": "animate", "type": "boolean", - "description": "

if true changing value of progress bar will be animated

\n" + "description": "

if true changing value of progress bar will be animated

\n" }, { "name": "max", "type": "number", - "description": "

maximum total value of progress element

\n" + "description": "

maximum total value of progress element

\n" }, { "name": "striped", "type": "boolean", - "description": "

If true, striped classes are applied

\n" + "description": "

If true, striped classes are applied

\n" }, { "name": "type", "type": "string", - "description": "

provide one of the four supported contextual classes: success, info, warning, danger

\n" + "description": "

provide one of the four supported contextual classes: success, info, warning, danger

\n" }, { "name": "value", @@ -2779,13 +2790,13 @@ export const ngdoc: any = { "name": "animate", "defaultValue": "false", "type": "Boolean", - "description": "

if true changing value of progress bar will be animated

\n" + "description": "

if true changing value of progress bar will be animated

\n" }, { "name": "max", "defaultValue": "100", "type": "number", - "description": "

maximum total value of progress element

\n" + "description": "

maximum total value of progress element

\n" } ] }, @@ -2812,33 +2823,33 @@ export const ngdoc: any = { { "name": "customTemplate", "type": "TemplateRef", - "description": "

custom template for icons

\n" + "description": "

custom template for icons

\n" }, { "name": "max", "defaultValue": "5", "type": "number", - "description": "

number of icons

\n" + "description": "

number of icons

\n" }, { "name": "readonly", "type": "boolean", - "description": "

if true will not react on any user events

\n" + "description": "

if true will not react on any user events

\n" }, { "name": "titles", "type": "string[]", - "description": "

array of icons titles, default: (["one", "two", "three", "four", "five"])

\n" + "description": "

array of icons titles, default: (["one", "two", "three", "four", "five"])

\n" } ], "outputs": [ { "name": "onHover", - "description": "

fired when icon selected, $event:number equals to selected rating

\n" + "description": "

fired when icon selected, $event:number equals to selected rating

\n" }, { "name": "onLeave", - "description": "

fired when icon selected, $event:number equals to previous rating value

\n" + "description": "

fired when icon selected, $event:number equals to previous rating value

\n" } ], "properties": [], @@ -2868,57 +2879,57 @@ export const ngdoc: any = { { "name": "fieldName", "type": "string", - "description": "

field name if input array consists of objects

\n" + "description": "

field name if input array consists of objects

\n" }, { "name": "itemActiveClass", "type": "string", - "description": "

class name for active item

\n" + "description": "

class name for active item

\n" }, { "name": "itemActiveStyle", "type": "{ [key: string]: string; }", - "description": "

style object for active item

\n" + "description": "

style object for active item

\n" }, { "name": "itemClass", "type": "string", - "description": "

class name for item

\n" + "description": "

class name for item

\n" }, { "name": "itemStyle", "type": "{ [key: string]: string; }", - "description": "

style object for item

\n" + "description": "

style object for item

\n" }, { "name": "itemTemplate", "type": "TemplateRef", - "description": "

used to specify a custom item template. Template variables: item and index;

\n" + "description": "

used to specify a custom item template. Template variables: item and index;

\n" }, { "name": "placeholderClass", "type": "string", - "description": "

class name for placeholder

\n" + "description": "

class name for placeholder

\n" }, { "name": "placeholderItem", "type": "string", - "description": "

placeholder item which will be shown if collection is empty

\n" + "description": "

placeholder item which will be shown if collection is empty

\n" }, { "name": "placeholderStyle", "type": "{ [key: string]: string; }", - "description": "

style object for placeholder

\n" + "description": "

style object for placeholder

\n" }, { "name": "wrapperClass", "type": "string", - "description": "

class name for items wrapper

\n" + "description": "

class name for items wrapper

\n" }, { "name": "wrapperStyle", "type": "{ [key: string]: string; }", - "description": "

style object for items wrapper

\n" + "description": "

style object for items wrapper

\n" } ], "outputs": [ @@ -2956,7 +2967,7 @@ export const ngdoc: any = { "TabHeadingDirective": { "fileName": "src/tabs/tab-heading.directive.ts", "className": "TabHeadingDirective", - "description": "

Should be used to mark element as a template for tab heading

\n", + "description": "

Should be used to mark element as a template for tab heading

\n", "selector": "[tabHeading]", "inputs": [], "outputs": [], @@ -2972,46 +2983,46 @@ export const ngdoc: any = { { "name": "active", "type": "boolean", - "description": "

tab active state toggle

\n" + "description": "

tab active state toggle

\n" }, { "name": "customClass", "type": "string", - "description": "

if set, will be added to the tab's class attribute. Multiple classes are supported.

\n" + "description": "

if set, will be added to the tab's class attribute. Multiple classes are supported.

\n" }, { "name": "disabled", "type": "boolean", - "description": "

if true tab can not be activated

\n" + "description": "

if true tab can not be activated

\n" }, { "name": "heading", "type": "string", - "description": "

tab header text

\n" + "description": "

tab header text

\n" }, { "name": "id", "type": "string", - "description": "

tab id. The same id with suffix '-link' will be added to the corresponding <li> element

\n" + "description": "

tab id. The same id with suffix '-link' will be added to the corresponding <li> element

\n" }, { "name": "removable", "type": "boolean", - "description": "

if true tab can be removable, additional button will appear

\n" + "description": "

if true tab can be removable, additional button will appear

\n" } ], "outputs": [ { "name": "deselect", - "description": "

fired when tab became inactive, $event:Tab equals to deselected instance of Tab component

\n" + "description": "

fired when tab became inactive, $event:Tab equals to deselected instance of Tab component

\n" }, { "name": "removed", - "description": "

fired before tab will be removed, $event:Tab equals to instance of removed tab

\n" + "description": "

fired before tab will be removed, $event:Tab equals to instance of removed tab

\n" }, { "name": "selectTab", - "description": "

fired when tab became active, $event:Tab equals to selected instance of Tab component

\n" + "description": "

fired when tab became active, $event:Tab equals to selected instance of Tab component

\n" } ], "properties": [], @@ -3026,17 +3037,17 @@ export const ngdoc: any = { { "name": "justified", "type": "boolean", - "description": "

if true tabs fill the container and have a consistent width

\n" + "description": "

if true tabs fill the container and have a consistent width

\n" }, { "name": "type", "type": "string", - "description": "

navigation context class: 'tabs' or 'pills'

\n" + "description": "

navigation context class: 'tabs' or 'pills'

\n" }, { "name": "vertical", "type": "boolean", - "description": "

if true tabs will be placed vertically

\n" + "description": "

if true tabs will be placed vertically

\n" } ], "outputs": [], @@ -3053,7 +3064,7 @@ export const ngdoc: any = { "name": "type", "defaultValue": "tabs", "type": "string", - "description": "

provides default navigation context class: 'tabs' or 'pills'

\n" + "description": "

provides default navigation context class: 'tabs' or 'pills'

\n" } ] }, @@ -3087,78 +3098,78 @@ export const ngdoc: any = { { "name": "arrowkeys", "type": "boolean", - "description": "

if true the values of hours and minutes can be changed using the up/down arrow keys on the keyboard

\n" + "description": "

if true the values of hours and minutes can be changed using the up/down arrow keys on the keyboard

\n" }, { "name": "disabled", "type": "boolean", - "description": "

if true hours and minutes fields will be disabled

\n" + "description": "

if true hours and minutes fields will be disabled

\n" }, { "name": "hourStep", "type": "number", - "description": "

hours change step

\n" + "description": "

hours change step

\n" }, { "name": "max", "type": "Date", - "description": "

maximum time user can select

\n" + "description": "

maximum time user can select

\n" }, { "name": "meridians", "type": "string[]", - "description": "

meridian labels based on locale

\n" + "description": "

meridian labels based on locale

\n" }, { "name": "min", "type": "Date", - "description": "

minimum time user can select

\n" + "description": "

minimum time user can select

\n" }, { "name": "minuteStep", "type": "number", - "description": "

hours change step

\n" + "description": "

hours change step

\n" }, { "name": "mousewheel", "type": "boolean", - "description": "

if true scroll inside hours and minutes inputs will change time

\n" + "description": "

if true scroll inside hours and minutes inputs will change time

\n" }, { "name": "readonlyInput", "type": "boolean", - "description": "

if true hours and minutes fields will be readonly

\n" + "description": "

if true hours and minutes fields will be readonly

\n" }, { "name": "secondsStep", "type": "number", - "description": "

seconds change step

\n" + "description": "

seconds change step

\n" }, { "name": "showMeridian", "type": "boolean", - "description": "

if true meridian button will be shown

\n" + "description": "

if true meridian button will be shown

\n" }, { "name": "showMinutes", "type": "boolean", - "description": "

show minutes in timepicker

\n" + "description": "

show minutes in timepicker

\n" }, { "name": "showSeconds", "type": "boolean", - "description": "

show seconds in timepicker

\n" + "description": "

show seconds in timepicker

\n" }, { "name": "showSpinners", "type": "boolean", - "description": "

if true spinner arrows above and below the inputs will be shown

\n" + "description": "

if true spinner arrows above and below the inputs will be shown

\n" } ], "outputs": [ { "name": "isValid", - "description": "

emits true if value is a valid date

\n" + "description": "

emits true if value is a valid date

\n" } ], "properties": [], @@ -3167,89 +3178,89 @@ export const ngdoc: any = { "TimepickerConfig": { "fileName": "src/timepicker/timepicker.config.ts", "className": "TimepickerConfig", - "description": "

Provides default configuration values for timepicker

\n", + "description": "

Provides default configuration values for timepicker

\n", "methods": [], "properties": [ { "name": "arrowkeys", "defaultValue": "true", "type": "boolean", - "description": "

if true the values of hours and minutes can be changed using the up/down arrow keys on the keyboard

\n" + "description": "

if true the values of hours and minutes can be changed using the up/down arrow keys on the keyboard

\n" }, { "name": "disabled", "defaultValue": "false", "type": "boolean", - "description": "

if true hours and minutes fields will be disabled

\n" + "description": "

if true hours and minutes fields will be disabled

\n" }, { "name": "hourStep", "defaultValue": "1", "type": "number", - "description": "

hours change step

\n" + "description": "

hours change step

\n" }, { "name": "max", "type": "Date", - "description": "

maximum time user can select

\n" + "description": "

maximum time user can select

\n" }, { "name": "meridians", "type": "string[]", - "description": "

meridian labels based on locale

\n" + "description": "

meridian labels based on locale

\n" }, { "name": "min", "type": "Date", - "description": "

minimum time user can select

\n" + "description": "

minimum time user can select

\n" }, { "name": "minuteStep", "defaultValue": "5", "type": "number", - "description": "

hours change step

\n" + "description": "

hours change step

\n" }, { "name": "mousewheel", "defaultValue": "true", "type": "boolean", - "description": "

if true scroll inside hours and minutes inputs will change time

\n" + "description": "

if true scroll inside hours and minutes inputs will change time

\n" }, { "name": "readonlyInput", "defaultValue": "false", "type": "boolean", - "description": "

if true hours and minutes fields will be readonly

\n" + "description": "

if true hours and minutes fields will be readonly

\n" }, { "name": "secondsStep", "defaultValue": "10", "type": "number", - "description": "

seconds changes step

\n" + "description": "

seconds changes step

\n" }, { "name": "showMeridian", "defaultValue": "true", "type": "boolean", - "description": "

if true works in 12H mode and displays AM/PM. If false works in 24H mode and hides AM/PM

\n" + "description": "

if true works in 12H mode and displays AM/PM. If false works in 24H mode and hides AM/PM

\n" }, { "name": "showMinutes", "defaultValue": "true", "type": "boolean", - "description": "

show minutes in timepicker

\n" + "description": "

show minutes in timepicker

\n" }, { "name": "showSeconds", "defaultValue": "false", "type": "boolean", - "description": "

show seconds in timepicker

\n" + "description": "

show seconds in timepicker

\n" }, { "name": "showSpinners", "defaultValue": "true", "type": "boolean", - "description": "

if true spinner arrows above and below the inputs will be shown

\n" + "description": "

if true spinner arrows above and below the inputs will be shown

\n" } ] }, @@ -3294,31 +3305,37 @@ export const ngdoc: any = { "TooltipConfig": { "fileName": "src/tooltip/tooltip.config.ts", "className": "TooltipConfig", - "description": "

Default values provider for tooltip

\n", + "description": "

Default values provider for tooltip

\n", "methods": [], "properties": [ + { + "name": "adaptivePosition", + "defaultValue": "true", + "type": "boolean", + "description": "

sets disable adaptive position

\n" + }, { "name": "container", "type": "string", - "description": "

a selector specifying the element the tooltip should be appended to.

\n" + "description": "

a selector specifying the element the tooltip should be appended to.

\n" }, { "name": "delay", "defaultValue": "0", "type": "number", - "description": "

delay before showing the tooltip

\n" + "description": "

delay before showing the tooltip

\n" }, { "name": "placement", "defaultValue": "top", "type": "string", - "description": "

tooltip placement, supported positions: 'top', 'bottom', 'left', 'right'

\n" + "description": "

tooltip placement, supported positions: 'top', 'bottom', 'left', 'right'

\n" }, { "name": "triggers", "defaultValue": "hover focus", "type": "string", - "description": "

array of event names which triggers tooltip opening

\n" + "description": "

array of event names which triggers tooltip opening

\n" } ] }, @@ -3329,6 +3346,11 @@ export const ngdoc: any = { "selector": "[tooltip], [tooltipHtml]", "exportAs": "bs-tooltip", "inputs": [ + { + "name": "adaptivePosition", + "type": "boolean", + "description": "

sets disable adaptive position

\n" + }, { "name": "container", "type": "string", @@ -3438,7 +3460,7 @@ export const ngdoc: any = { }, { "name": "tooltipChange", - "description": "

Fired when tooltip content changes

\n" + "description": "

Fired when tooltip content changes

\n" }, { "name": "tooltipStateChanged", @@ -3480,26 +3502,26 @@ export const ngdoc: any = { "TypeaheadConfig": { "fileName": "src/typeahead/typeahead.config.ts", "className": "TypeaheadConfig", - "description": "

Default values provider for typeahead

\n", + "description": "

Default values provider for typeahead

\n", "methods": [], "properties": [ { "name": "adaptivePosition", "defaultValue": "false", "type": "boolean", - "description": "

sets use adaptive position

\n" + "description": "

sets use adaptive position

\n" }, { "name": "hideResultsOnBlur", "defaultValue": "true", "type": "boolean", - "description": "

used to hide results on blur

\n" + "description": "

used to hide results on blur

\n" }, { "name": "isFirstItemActive", "defaultValue": "true", "type": "boolean", - "description": "

used to active/inactive the first item in typeahead container

\n" + "description": "

used to active/inactive the first item in typeahead container

\n" }, { "name": "minLength", @@ -3511,7 +3533,7 @@ export const ngdoc: any = { "name": "selectFirstItem", "defaultValue": "true", "type": "boolean", - "description": "

used to choose the first item in typeahead container

\n" + "description": "

used to choose the first item in typeahead container

\n" } ] }, @@ -3525,7 +3547,7 @@ export const ngdoc: any = { { "name": "adaptivePosition", "type": "boolean", - "description": "

sets use adaptive position

\n" + "description": "

sets use adaptive position

\n" }, { "name": "container", @@ -3536,7 +3558,7 @@ export const ngdoc: any = { "name": "dropup", "defaultValue": "false", "type": "boolean", - "description": "

This attribute indicates that the dropdown should be opened upwards

\n" + "description": "

This attribute indicates that the dropdown should be opened upwards

\n" }, { "name": "optionsListTemplate", @@ -3561,13 +3583,13 @@ export const ngdoc: any = { { "name": "typeaheadHideResultsOnBlur", "type": "boolean", - "description": "

used to hide result on blur

\n" + "description": "

used to hide result on blur

\n" }, { "name": "typeaheadIsFirstItemActive", "defaultValue": "true", "type": "boolean", - "description": "

makes active first item in a list

\n" + "description": "

makes active first item in a list

\n" }, { "name": "typeaheadItemTemplate", @@ -3594,12 +3616,12 @@ export const ngdoc: any = { "name": "typeaheadOptionsInScrollableView", "defaultValue": "5", "type": "number", - "description": "

specifies number of options to show in scroll view

\n" + "description": "

specifies number of options to show in scroll view

\n" }, { "name": "typeaheadOptionsLimit", "type": "number", - "description": "

maximum length of options items list. The default value is 20

\n" + "description": "

maximum length of options items list. The default value is 20

\n" }, { "name": "typeaheadPhraseDelimiters", @@ -3611,7 +3633,7 @@ export const ngdoc: any = { "name": "typeaheadScrollable", "defaultValue": "false", "type": "boolean", - "description": "

specifies if typeahead is scrollable

\n" + "description": "

specifies if typeahead is scrollable

\n" }, { "name": "typeaheadSelectFirstItem", @@ -3628,7 +3650,7 @@ export const ngdoc: any = { { "name": "typeaheadWaitMs", "type": "number", - "description": "

minimal wait time after last character typed before typeahead kicks-in

\n" + "description": "

minimal wait time after last character typed before typeahead kicks-in

\n" }, { "name": "typeaheadWordDelimiters", @@ -3648,18 +3670,18 @@ export const ngdoc: any = { }, { "name": "typeaheadOnBlur", - "description": "

fired when blur event occurs. returns the active item

\n" + "description": "

fired when blur event occurs. returns the active item

\n" }, { "name": "typeaheadOnSelect", - "description": "

fired when option was selected, return object with data of this option

\n" + "description": "

fired when option was selected, return object with data of this option

\n" } ], "properties": [ { "name": "_container", "type": "TypeaheadContainerComponent", - "description": "

if false restrict model values to the ones selected from the popup only will be provided \nif false the first match automatically will not be focused as you type \nformat the ng-model result after selection \nif true automatically select an item when there is one option that exactly matches the user input \nif true select the currently highlighted match on blur \nif false don't focus the input element the typeahead directive is associated with on selection

\n" + "description": "

if false restrict model values to the ones selected from the popup only will be provided\nif false the first match automatically will not be focused as you type\nformat the ng-model result after selection\nif true automatically select an item when there is one option that exactly matches the user input\nif true select the currently highlighted match on blur\nif false don't focus the input element the typeahead directive is associated with on selection

\n" } ], "methods": [] diff --git a/src/component-loader/component-loader.class.ts b/src/component-loader/component-loader.class.ts index c3cf0c2ea0..046fa10d0b 100644 --- a/src/component-loader/component-loader.class.ts +++ b/src/component-loader/component-loader.class.ts @@ -157,6 +157,14 @@ export class ComponentLoader { }); this._componentRef = this._componentFactory.create(injector, this._contentRef.nodes); + + this._posService.position({ + element: this._componentRef.location, + target: this._elementRef, + attachment: this.attachment, + appendToBody: this.container === 'body' + }); + this._applicationRef.attachView(this._componentRef.hostView); // this._componentRef = this._viewContainerRef // .createComponent(this._componentFactory, 0, injector, this._contentRef.nodes); @@ -344,12 +352,8 @@ export class ComponentLoader { if (!this._componentRef) { return; } - this._posService.position({ - element: this._componentRef.location, - target: this._elementRef, - attachment: this.attachment, - appendToBody: this.container === 'body' - }); + + this._posService.calcPosition(); }); } diff --git a/src/popover/popover.config.ts b/src/popover/popover.config.ts index 6b9d4a19c7..b6435e5c7e 100644 --- a/src/popover/popover.config.ts +++ b/src/popover/popover.config.ts @@ -8,6 +8,8 @@ import { Injectable } from '@angular/core'; */ @Injectable() export class PopoverConfig { + /** sets disable adaptive position */ + adaptivePosition = true; /** * Placement of a popover. Accepts: "top", "bottom", "left", "right", "auto" */ diff --git a/src/popover/popover.directive.ts b/src/popover/popover.directive.ts index 0d2362bd32..e5a5ca93f9 100644 --- a/src/popover/popover.directive.ts +++ b/src/popover/popover.directive.ts @@ -12,6 +12,8 @@ import { PositioningService } from 'ngx-bootstrap/positioning'; */ @Directive({selector: '[popover]', exportAs: 'bs-popover'}) export class PopoverDirective implements OnInit, OnDestroy { + /** sets disable adaptive position */ + @Input() adaptivePosition: boolean; /** * Content to be displayed as popover. */ @@ -94,7 +96,9 @@ export class PopoverDirective implements OnInit, OnDestroy { _renderer ) .provide({provide: PopoverConfig, useValue: _config}); + Object.assign(this, _config); + this.onShown = this._popover.onShown; this.onHidden = this._popover.onHidden; @@ -130,6 +134,12 @@ export class PopoverDirective implements OnInit, OnDestroy { title: this.popoverTitle, containerClass: this.containerClass }); + + if (!this.adaptivePosition) { + this._positionService.calcPosition(); + this._positionService.deletePositionElement(this._popover._componentRef.location); + } + this.isOpen = true; } @@ -168,7 +178,10 @@ export class PopoverDirective implements OnInit, OnDestroy { this._positionService.setOptions({ modifiers: { flip: { - enabled: true + enabled: this.adaptivePosition + }, + preventOverflow: { + enabled: this.adaptivePosition } } }); diff --git a/src/positioning/models/index.ts b/src/positioning/models/index.ts index 4315155a66..ee99ee84d9 100644 --- a/src/positioning/models/index.ts +++ b/src/positioning/models/index.ts @@ -32,5 +32,8 @@ export interface Options { flip?: { enabled: boolean; }; + preventOverflow?: { + enabled: boolean; + }; }; } diff --git a/src/positioning/modifiers/preventOverflow.ts b/src/positioning/modifiers/preventOverflow.ts index 25335bd553..88a851b216 100644 --- a/src/positioning/modifiers/preventOverflow.ts +++ b/src/positioning/modifiers/preventOverflow.ts @@ -1,8 +1,12 @@ -import { getBoundaries } from '../utils'; +import { getBoundaries, isModifierEnabled } from '../utils'; import { Data } from '../models'; export function preventOverflow(data: Data) { + if (!isModifierEnabled(data.options, 'preventOverflow')) { + return data; + } + // NOTE: DOM access here // resets the targetOffsets's position so that the document size can be calculated excluding // the size of the targetOffsets element itself diff --git a/src/positioning/positioning.service.ts b/src/positioning/positioning.service.ts index bf3780861b..4a9ef848fc 100644 --- a/src/positioning/positioning.service.ts +++ b/src/positioning/positioning.service.ts @@ -76,13 +76,16 @@ export class PositioningService { position(options: PositioningOptions): void { this.addPositionElement(options); - this.update$$.next(); } addPositionElement(options: PositioningOptions): void { this.positionElements.set(_getHtmlElement(options.element), options); } + calcPosition(): void { + this.update$$.next(); + } + deletePositionElement(elRef: ElementRef): void { this.positionElements.delete(_getHtmlElement(elRef)); } diff --git a/src/positioning/utils/setAllStyles.ts b/src/positioning/utils/setAllStyles.ts index 0b64733f35..e7e15b147d 100644 --- a/src/positioning/utils/setAllStyles.ts +++ b/src/positioning/utils/setAllStyles.ts @@ -60,8 +60,12 @@ export function setAllStyles(data: Data, renderer?: Renderer2): void { } if (renderer) { - renderer.setAttribute(target, 'class', target.className.replace(/left|right|top|bottom/g, `${data.placement}`)); + renderer.setAttribute( + target, + 'class', + target.className.replace(/left|right|top|bottom/g, `${data.placement.split(' ')[0]}`) + ); } else { - target.className = target.className.replace(/left|right|top|bottom/g, `${data.placement}`); + target.className = target.className.replace(/left|right|top|bottom/g, `${data.placement.split(' ')[0]}`); } } diff --git a/src/tooltip/tooltip.config.ts b/src/tooltip/tooltip.config.ts index 3a456745dd..02c4e993ed 100644 --- a/src/tooltip/tooltip.config.ts +++ b/src/tooltip/tooltip.config.ts @@ -3,6 +3,8 @@ import { Injectable } from '@angular/core'; /** Default values provider for tooltip */ @Injectable() export class TooltipConfig { + /** sets disable adaptive position */ + adaptivePosition = true; /** tooltip placement, supported positions: 'top', 'bottom', 'left', 'right' */ placement = 'top'; /** array of event names which triggers tooltip opening */ diff --git a/src/tooltip/tooltip.directive.ts b/src/tooltip/tooltip.directive.ts index db8ae51a8e..8b4a69b42d 100644 --- a/src/tooltip/tooltip.directive.ts +++ b/src/tooltip/tooltip.directive.ts @@ -30,6 +30,8 @@ let id = 0; }) export class TooltipDirective implements OnInit, OnDestroy { tooltipId = id++; + /** sets disable adaptive position */ + @Input() adaptivePosition: boolean; /** * Content to be displayed as tooltip. */ @@ -229,7 +231,10 @@ export class TooltipDirective implements OnInit, OnDestroy { this._positionService.setOptions({ modifiers: { flip: { - enabled: true + enabled: this.adaptivePosition + }, + preventOverflow: { + enabled: this.adaptivePosition } } });