* add new steps to reproduce section to github issue template to ask
issue filers to provide explicit steps to reproduce the issue so people
aren't left to guess or parse poorly written ones.
* feat(dropdown): make dropdown-append-to-body configurable
Make dropdown-append-to-body accept a value which will be evaluated to
determine if the menu should be appended to body. If no value is
specified, or a non-false value is specified then the menu will be
appended to body. If the value is `false` then the menu will not be
appended to body.
* feat(dropdown): append and remove menu when menu is opened or closed
Only append and remove append-to and append-to-body menus when the
menu is opened or closed. This allows for the values of append-to and
append-to-body to be evaluated when the menu is toggled open, and also
prevents littering of the DOM.
* fix(dropdown): don't remove the dropdown-menu on close
Instead of removing the dropdown-menu on close, append it back to the
original element.
- Trigger a test failure if resolved on rejected promise and rejected on resolved promise
- Trigger a test failure if neither resolved or rejected when expected resolved/rejected promise
Closes#6195
- Remove `replace: true` usage
BREAKING CHANGE: The template structure changed slightly due to the removal of `replace: true` - see documentation examples in action to see differences in practice.
Closes#5994
- Wait until animations are complete before removing window class
BREAKING CHANGE: This introduces a minor behavior change in when the class is removed
Closes#6056Fixes#6051
- Remove `replace: true` usage
BREAKING CHANGE: Due to the removal of `replace: true`, this results in a slight change to the HTML structure - see the documentation examples to see it in action.
Closes#5998
- Remove `replace: true` usage
BREAKING CHANGE: This removes `replace: true`, which changes the HTML structure slightly - see the documentation examples to see it in action.
Closes#5997
- Remove `replace: true` usage
BREAKING CHANGE: Due to the nature of `replace: true`, this has a slight structural HTML change in the popup as a result - see documentation examples for the change in action.
Closes#5993
- Remove `replace: true` usage
BREAKING CHANGE: Due to the removal of `replace: true`, this affects the HTML structure slightly - see documentation examples to see new usage.
Closes#5992
- Remove `replace: true usage
BREAKING CHANGE: This removes `replace: true` usage from the pager, which causes a slight usage change - see documentation examples for new usage.
Closes#5991
- Remove `replace: true` usage
BREAKING CHANGE: This removes `replace: true` usage, causing some structural changes to the HTML - the major part here is that there is no more backdrop template, and the top level elements for the window/backdrop elements lose a little flexibility. See documentation examples for new structure.
Closes#5989
- Remove `replace: true` usage
BREAKING CHANGE: As a result of removal of `replace: true`, there is the potential that this may break some CSS layout due to the slightly different HTML. Refer to the documentation examples to see the new structure.
Closes#5988
- Remove `replace: true` usage from the carousel and the slide
BREAKING CHANGE: Due to the removal of `replace: true`, this causes a slight HTML structure change to the carousel and the slide elements - see documentation demos to see how it changes. This also caused removal of the ngTouch built in support - if one is using ng-touch, one needs to add the `ng-swipe-left` and `ng-swipe-right` directives to the carousel element with relevant logic.
Closes#5987
- Remove `replace: true` usage
BREAKING CHANGE: This removes the `replace: true` usage, so this has an effect on how one uses the directive in the template - see documentation for reference
Closes#5986
- Remove usage of `replace: true`
- Remove unnecessary `panel-class` feature
BREAKING CHANGE: This removes usage of `replace: true` in the accordion group, which results in a template change where the template no longer needs to contain the panel itself, but its contents. The accordion group will add the `panel` class by default, so the user just needs to add the appropriate classes to the accordion group element. This allows the user to use ng-class as well to fully control the panel related classes, so `panel-class` now is unnecessary
Closes#5985
- Add expression support for tooltip-trigger
- Add support for object event bindings for showing/hiding tooltips
BREAKING CHANGE: This removes support for plain strings and interpolations in tooltip-trigger and popover-trigger - please change these appropriately. See test changes in this commit for reference
Closes#5221Closes#5938
* remove any duplicate `id` attribute on the typeahead hint element if used on
the original input element.
BREAKING CHANGE: This change removes the `id` attribute on the first `<input>`
element placed into the DOM when the `typeahead-show-hint` attribute is used
and there is an `id` attribute present on the original `uib-typeahead` element.
This could affect selectors if they are being used.
Closes#5936Fixes#5926
- Focus the toggle element when the click causes the dropdown menu to close
BREAKING CHANGE: This changes the focus behavior of the dropdown slightly, and potentially may break code built around current usage
Closes#5934Fixes#5782
- Adds support for ngModelOptions in the `datepicker-options` object
BREAKING CHANGE: This modifies the current behavior around the datepicker & popup's ngModelOptions, which may affect custom components that are built around both
Closes#5933Fixes#5825
- Change to select `.uib-typeahead-match` class instead of the `li` tag
BREAKING CHANGE: This changes the selector used so that it doesn't select for the `li` tag specifically, but the elements with the class `uib-typeahead-match` - if using a custom template, this class needs to be added to the `li` element in the typeahead popup template.
Closes#5922Fixes#5848
By default behaves as before. If specified, allows a custom function
to be defined to determine whether the keydown event should trigger
selection based on the `typeahead-should-select` attribute.
Closes#5671Closes#5794
* update the datepicker and datepicker popup docs to let user know
about using the `uibDateParser` service to convert a date string
into a `Date` object.
Closes#5880
- Add intermediary check for whether the date is valid due to an IE quirk of turning a valid date into an invalid date when using the date constructor
Closes#5872Fixes#5865
- Expose resolve in template as $resolve for those modals opened with a controller
BREAKING CHANGE: Since this adds support for $resolve being exposed on $scope, it could potentially overwrite any pre-existing usage of it - this is an unlikely scenario, but marked as a breaking change in case this key is being used
Closes#5808Closes#5857
Fixes#5778Closes#5787
BREAKING CHANGE: Stops propagation of keydown event when escape key is pressed. Removes keydown event from the document and moves it to the dropdown element.
Some users' adblock and virus protection is accidentally blocking third party `fastclick.js`.
Put a guard around the line that invokes the FastClick api
Closes#5756
* switch event handler call to look at `event.isDefaultPrevented()` instead of
`event.defaultPrevented` as angular has implemented that method on jqlite
events.
Fixes#5720Closes#5738
* add ability for user to prevent currently selected tab's deselection by
calling `$event.preventDefault()` in tab's `deselect` callback.
Fixes#5720
Addresses #2715, #4836, and #5716.
Closes#5723
- Implements TWBS body padding fix to keep content in an element
with a container class from shifting when the body overflow is
set to hidden with the modal-open class.
Fixes#2631Closes#5711
- When at bounds and noWrap is enabled, disable the prev and next arrows when appropriate
BREAKING CHANGE: This adds disabled CSS - there is a possibility this may break existing UI slightly for those adding custom CSS/making use of custom templates. Modify the template appropriately if necessary
Closes#5704Closes#5708
- Removes automatic padding when input is empty to allow ability to manipulate inputs on user's side
Closes#5293Closes#5299
BREAKING CHANGE: This removes automatic padding done by the timepicker
when the input is empty - if that behavior is desired, write a custom
directive implementing it
- Remove listener for $locationChangeSuccess event
BREAKING CHANGE: The dropdown no longer will remain open on $locationChangeSuccess with autoclose set to disabled. Implement this logic inside app along with usage of isOpen two-way binding if this functionality is desired.
Closes#5648Closes#5680
- Split off datepicker popup into new datepickerPopup module
BREAKING CHANGE: The datepicker popup is no longer a part of the
datepicker module, but now a part of the datepickerPopup module. Please
change code accordingly if including specific modules
Closes#5676
- Remove all deprecated attribute support
BREAKING CHANGE: This removes inline datepicker attribute support and
attribute pass-throughs in the popup
Closes#5660
* update tab documentation to clarify proper use and intended behavior of the
`active` attribute on both the `tabset` and `tab` directives.
* fix the tab select buttons in the tab demo.
Closes#5575Fixes#5551
- Move all inline styles supporting the auto position and
flicker suppression to a class.
- Refine how placement classes get applied to the tooltip
Closes#5535Fixes#5470
- Move arrow position style overrides to a class instead of inline
styles. This will allow for consumers to position the arrow to
suit their needs by setting margins on the arrow element.
- Optimize when the positionTooltip function calls the
positionArrow function. Now the arrow position will only be
recalced when the tooltip placement changes.
Fixes#5464Closes#5502
Added popup-placement attribute that implements the auto position
feature that exists in the tooltip directive. Accepts the same
placement options as the tooltip.
Closes#5444
- Change so active state is primarily on two-way bound variable
Closes#5353Closes#5432
BREAKING CHANGE: This changes the active state to be in line with
similar components centralizing the information. Please refer to the
carousel documentation for usage.
- Change to store active index on tabset controller
- Set index on tab by tab basis
Closes#5425
BREAKING CHANGE: The tab API is changed - please refer to the
documentation on new usage of tabs. Note that if you are using custom
templates, the templates will need to be changed slightly.
- Change to use `uibAccordionHeader` attribute for insertion point for header transclusion
Closes#5324Closes#5396
BREAKING CHANGE: This changes to use the `uibAccordionHeader` attribute instead of a `<span>` element for inserting the custom header HTML. If you use a custom template for the accordion group, please add this attribute to the appropriate location.
- Stop event bubbling from clicks in popup
Closes#5400Fixes#5347
BREAKING CHANGE: This requires $event to be passed in the second
argument of the select function and in the close argument for the popup
template
- Adjust the CSS for the datepicker header buttons to not have inconsistent spacing due to Chrome browser differences
Closes#5393Fixes#5392
BREAKING CHANGE: This adds extra CSS for the datepicker for the left and right header buttons - one can override this appropriately with any selector of class priority higher than 1
- Pass through options object wholesale from popup to inline datepicker
Closes#5355
BREAKING CHANGE: This breaks any snake-cased key usage, i.e.
`show-weeks`. Convert all keys used to camelCase.
* update popover readme indicating we will not support issues on mobile devices.
* update tooltip readme indicating we will not support issues on mobile devices.
Closes#5307
- Change back from div element to anchor element
BREAKING CHANGE: This changes the div element in the accordion-group
element back to an anchor element. If one wishes to use more complex
templates inside the accordion group heading, one must override the
template and add the `cursor: pointer` CSS targeting that element.
Closes#5263
- Reverts template change to tab
- Adds warning if one desires more complex HTML inside the tab
BREAKING CHANGE: This undoes the prior change to the template using div
elements. If one wishes to use div elements, one must override the
template in one's app and provide the necessary CSS
Closes#5262Fixes#5254
- The element selector was not limited to direct descendants so
nested tooltip/popover arrow elements were getting selected instead
of the direct descendant arrow element.
Closes#5246Fixes#5230
- The element selector was not limited to direct descendants so
nested tooltip/popover arrow elements were getting selected instead
of the direct descendant arrow element.
Closes#5246Fixes#5230
- With the addition of the header, the selector to scroll the dropdown
onto the correct element is incorrect - this fixes it to select all
list elements in the dropdown
Closes#5168Fixes#5167
- Add new class manipulation helper directive that uses 1 watcher as opposed to watchers for each element with ng-class
- Optimize disabled state
- Optimize class binding
Closes#2613Closes#3451Closes#3770Closes#5065
BREAKING CHANGE: For those using custom templates, the changes result in necessary changes being made to the templates to match the new class changing syntax
BREAKING CHANGE: yearRange is replaced by yearRows and yearColumns for manually specifying the dimensions of the yearpicker. If one wants the prior behavior with yearRange with a different number of rows, just set yearRows
Closes#3348Closes#4970
- Fixes issue where `$scope` provided does not have properties present
on controller instance due to $new resulting in the property on the
prototype of the $scope copied from, which causes it to not be
enumerable
Closes#5048Fixes#5039
- Defer selection of active slide until after transition has been reset
to avoid selection occuring before the transition finishes, preventing
a new slide from being chosen
- Buffer slides if transition is currently going on to navigate to last
slide selected after
Closes#4984Fixes#4361Fixes#4823Fixes#4969
BREAKING CHANGE: As part of the split of the pager component from the
pagination component, this changes the controllerAs use to `pager` from
`pagination`
Closes#4961
- Changes from ' to ` for template literals
- Adds documentation about template literals
BREAKING CHANGE: This changes template literals from the single quote
`'` to the backtick character `` ` `` for more natural usage with certain
strings such as `o'clock`.
Closes#4880Closes#4936Closes#4938
Closes#4891
BREAKING CHANGE: `keyboard-nav` for the dropdown is not longer a directive and to use it you have to use `keyboard-nav` instead of `uib-keyboard-nav`.
- Add `outsideClick` trigger support, which allows dismissal of the tooltip/popover on click of any element outside of the tooltip/popover
Closes#4419Closes#4871
- Change all virtual paths with built in templates to be prefixed by `uib/`
BREAKING CHANGE: All virtual templates in UI Bootstrap now are prefixed
with `uib/` - if one is overriding the templates via `$templateCache` path
or manually building the templates from the UI Bootstrap repository, one
needs to change the string used in the `$templateCache` representation
to have the new prefix
Closes#1205Closes#4839
- Change `formatCodeToRegex` into an array to avoid potential iteration bug where the order the keys are listed in the object matters in the iteration order
Closes#4810Fixes#4808
- Adds force-ellipsis option for adding ellipses to pagination
- Add boundary-link-numbers option for allowance of the first and last page numbers to always be shown
Closes#2924Closes#3064Closes#3565
- Change signature to `appendTo`, which takes a value that evaluates to a DOM node for API consistency
BREAKING CHANGE: Usage before
```html
<div id="typeahead-container"></div>
<input typeahead="state for state in states | filter: $viewValue | limitTo: 8" typeahead-append-to-element-id="typeahead-container">
```
After
```html
<div id="typeahead-container"></div>
<input typeahead="state for state in states | filter: $viewValue | limitTo: 8" typeahead-append-to="typeaheadContainer">
```
```js
$scope.typeaheadContainer = angular.element(document.querySelector('#typeaheadContainer'));
```
Closes#4797
- Change anchor tag to `div` to prevent unexpected routing being triggered by the browser on generation of anchor tags with nested clickable controls
BREAKING CHANGE: This causes the cursor style to be removed from the tab - implement CSS on the `.uib-tab > div` selector, or similar, accordingly
Closes#4793Fixes#3266
- Change anchor tag to `div` to prevent anchor tag from triggering route change
BREAKING CHANGE: This causes the cursor style to be removed from the heading - implement CSS on the `accordion-toggle` class accordingly
Closes#4792
- When `total-items` initializes as undefined, ignore value and do not update page information
- Remove extra watcher and call action manually
Closes#3786Closes#4783Fixes#2956
A race condition could occur when there is an open delay that
doesn't get cancelled after the transition delay resulting in
the position logic getting called. This will then try to set
the css of the tooltip after is has been destroyed in the
removeTooltip function.
Closes#4765Fixes#4757
The watch for the isOpen property from the model was not
checking to see if the internal tooltip scope was still
valid (null or undefined) before comparing the value to
the tooltip scope isOpen property.
Closes#4697Fixes#4683
The attribute for the close delay on the popover was incorrectly
documented as 'popover-close-popup-delay' and should be
'popover-popup-close-delay.
Closes#4698
Set class 'in' at the end of the animation to mimick the
behaviour of TWBS js. This removes scrollbars which are
otherwise visible during the animation in certain
configurations (most notably when used inside navbars).
The show and hide delay timeouts where not getting
cancelled correctly resulting in tooltips staying
open when both popup and popup-close delays were
in use.
Closes#4621Fixes#4618
When the tooltip is rendered for positioning scroll bars
may breifly appear depending on where the linked element
is positioned. This change adds a negative top and left
style to push the tooltip element out of view while it
is being measured and positioned.
Closes#4550Closes#4623Fixes#4458
Under PR #4455 the timeout for the popup close delay
was impacted by the evalAsync for setting the isOpen
value. Moved the popup close delay timeout to the
hideTooltipBind method so the hide method will now
get called after the close popup delay. This will
also ensure if the show method is called and the
close timeout is cancelled, the isOpen property
will not get toggled.
Closes#4597Fixes#4567
The tooltip was not being removed from the stackedMap
resulting in a memeory leak. Tooltip will now be
removed from the stackedMap in scope destroy
function.
Closes#4610Fixes#4604
In the tooltip $$postDigest function a check is done
on ttScope.isOpen but ttScope may have been set to null
in the scope.$on('$destroy'...) function. Added a
check to make sure ttScope is defined and not null.
Closes#4555Fixes#4552
- Ensure `dropdown-menu` class is present when using as an attribute
directive
- Refactor `DropdownController` to be more agnostic of directive
Closes#4523Fixes#4442
This is a rollup commit intended to address several
issues around the positioning and parsing of
attributes.
- Fixes issue introduced under PR #4311 where setting
height and width in tooltip position function
messed up arrow placement.
- Fixes issue introduced under PR #4363 where setting
visibility to hidden in tooltip position function
caused elements in popover to lose focus.
- Fixes issue #1780 where tooltip would render if
content was just whitespace.
- Fixes issue #3347 where tooltip isolate scope was
being accessed after it was set to null. Observers
will now be created/destroyed as tooltip opens/closes
which will also offer a performance improvement.
- Fixes issue #3557 by implementing evalAsync to set
tooltip scope isOpen property.
- Fixes issue #4335 where if model isOpen property is
undefined, tooltip would call show/hide toggle function.
- Closes PR #4429 where how the templated content
was being evaluated could cause an infinite digest loop.
Closes#4400Closes#4418Closes#4429Closes#4431Closes#4455Fixes#1780Fixes#3347Fixes#3557Fixes#4321Fixes#4335
- Added ability to add a class to the most recently opened modal window.
Note that even if different classes are specified, the class will
only be present if the modal is the most recently opened modal, i.e. if
modal1 was opened with a top class of `foo`, and modal2 is opened
afterwards with a top class of `bar`, modal2 will have the class `bar`
for the modal window, and modal1 will not have the class `foo`.
Closes#2524
* fix accordion demo for last panel
* last panel was previously the markup example so moving just the close toggle
was not sufficient and moving the markup as well would have rendered that
specific accordion example obsolete. so this restores the markup accordion
back to original and moves to the last accordion example.
Closes#4344
BREAKING CHANGE:
The `transition` module along with its `$transition` service are no longer
available. We're now using `$animate` service for animations and would
encourage users to do the same.
Closes#4359
Wrapped position logic in a timeout to ensure the
digest cycle always completes before positioning
the popup. Also optimized when the calls to
position the popup occur.
Closes#4328
- Switch to use `addEventListener` and `removeEventListener` to prevent
jqLite/jQuery bug where the events are swallowed on disabled elements
Closes#4322Fixes#4060
- Ensure that the original event target is not a child of the popup element to avoid edge case where the datepicker closes on any click
Closes#4316Fixes#4314
- Change to add `dropdown` class and open class to the `<body>` element
BREAKING CHANGE: This differs from the existing behavior in that it no longer will toggle based on the existing `dropdown` directive element, but on the `body` element instead
Closes#4305Fixes#4240
- Fix issue where select callback is fired twice due to compilation order when using dynamic tabs mixed with static tabs
Closes#3060Closes#4230Fixes#2883
- Switches to use `ng-bind-html` from `bind-html-unsafe`
BREAKING CHANGE: This modifies the typeahead to use the the `$sce` service instead when `ngSanitize` is present
Closes#3463Resolves#4073
When using a template with the tooltip/popover
the position funciton needs to be called at the
end of the $digest cycle to ensure correct
positioning in case the template content size
has changed
Closes: #4144Fixes: #4090
- Add support for `openedClass` to allow overriding the default modal class added & removed on the `body` element (`modal-open`)
Closes#2633Closes#4132
BREAKING CHANGE: Allow the user to hit `esc` inside an element in a modal and not exit the modal if the event has been `defaultPrevented`
Closes#3551Fixes#2544
- fix bug in directive whereby list item selector is not being initiated on
correct DOM element.
- fix bug in directive whereby invalid `keyCode` property of jQuery Event
object is being referenced instead of `which`.
- update functional test to trigger keydown event on correct DOM element
because otherwise the keydown handler in the directive is not getting
executed.
- remove invalid functional test because it is not possible to trigger a
keydown event on a hidden DOM element through normal UI interaction.
Closes#4110Fixes#4091
- Add type and validity check to ensure proper date object is created
- Make code style uniform in scripts
- Add warning if the string is not a valid date
Closes#3701Closes#3759Closes#3933Fixes#3609Fixes#3713Fixes#3736Fixes#3875Fixes#3937Fixes#3976
Moved the datepicker popup document click bind to
a timeout so having preventDefault and stopPropagation
on the element click event triggering the
popup to be open is no longer necessary.
Closes#3972Fixes#3705
- Adjust check due to change in Angular 1.4 where the presence of attribute gives key value of `undefined`, causing variable to contain incorrect truthiness
Closes#3864Closes#3890Fixes#3848
- Force the carousel indicator to not select the slide if the animation has not completed
- Factor out `goNext` function to not redefine on each execution of `select`
chore(carousel): move `$currentTransition` check to `select` method
Fixes#3729Closes#3757
Reducing the number of watches created for the
datepicker by implementing one time binding
on the datepicker templates. Removing aria-disabled
attribute as the ngAria module will add that
to the button with ng-disabled.
Closes#3443
The uninitialized $sniffer variable causes the
changeInputValueTo function to fail in Chrome.
Also fixed issue where an ng-change test was failing
as the date selected was the same as the initialized
scope date (today's date).
Closes#3630
Allows for trusted resource URLs through Strict Contextual Escaping ($sce).
If an interpolated expression is used instead, then the benefits of SCE is
lost.
Fixes#3558
Allows for trusted resource URLs through Strict Contextual Escaping ($sce).
If an interpolated expression is used instead, then the benefits of SCE is
lost.
Fixes#3558
- Add tooltip-class support to tooltip-template
- Remove observer for tooltip-class, it’s evaluated once on tooltip
preparation instead
- Remove interpolation on class attribute
Interpolation on the class attribute can have undesirable mangling
effects when use with a directive that has `replace: true`. It also
doesn’t work properly with ngAnimate.
Relates to #3126Closes#3510
If the title is blank, ngAnimate attempts to animate ngShow so positionTooltip
gets called when the title box is still visible, about to be animated to
hidden. Hence, the positionTooltip receives a taller height. Avoid this by
using ngIf instead.
Closes#3518
- Animations didn't work because the class attribute was mangled during
compilation due to the way class attributes are merged on directives with
`replace: true`
- Rename attribute to popup-class
- Refactor to rename variables named "class" as it's a keyword
and also looks weird in editors
Closes#3509Fixes#3375Fixes#3506
- Separate validation from parsing so that validation still runs on model
change
- Remove direct calls to $render
- Remove extra call to $render during intialization (only run when format is
changed)
- Save last date value in formatter
- Remove use of ngModel.$modelValue as users may add parsers to convert
$modelValue to other formats
Relates to #2069Fixes#3349
- Add support for `HH`, `H`, `mm`, `m`, `ss`, `s` formats from Angular's
`dateFilter`
- Add support for `:` character in format expression
- Fix typos
- Add regexp escaping of special characters
Fixes#2509Fixes#3159Closes#3417
- Moves render logic converting model values into date or null object into a formatter, which allows the render function to more correctly render using the viewValue
- remove parentheses as per CR
Relates to #2069Fixes#3160Closes#3427
Note: Move backdropClass logic into compile function because otherwise
modifying classes in the compile function is broken when using an interpolated
class attribute.
Fixes#1007Closes#2725
Upgrade configuration file. However, still use an old version of karma-jasmine
because upgrading to Jasmine 2.x requires a number of test code changes.
Note that firefox-launcher is used for travis CI builds.
Reposition on each digest, this ensures that the tooltip is always positioned
correctly no matter how its content changes.
Fixes#96Fixes#1109Closes#2816Closes#3435
The timepicker template has an ng-mousewheel
binding on the hours input element and the
TimepickerController also binds the elemeent
to mouse wheel events. Removed ng-mousewheel
binding from the template.
Closes#3442
When the calendar is in the maximum configured mode, clicking the title
button has no effect. To convey this to users, make the non-functional
button non-clickable, and take the button out of focus order, disable
the button when in the maximum mode.
Closes#3012
After I upgraded from 0.10.0 to 0.11.0 I needed to add the dropdown directive to my button dropdowns. This is not documented in the breakting changes.
The bootstrap documentation only mentions the dropdown class only in the [dropdowns section](http://getbootstrap.com/components/#dropdowns), but not in the [btn-dropdowns section](http://getbootstrap.com/components/#btn-dropdowns).
Optimized opening of modals by causing one digest loop less: The modalBackdrop directive now schedules switching its animate flag using a $timeout which does not cause a digest loop. If we assume modalBackdrop is always followed by a modalWindow directive, then we are guaranteed a digest loop by modalWindow's $timeout, which will happen after modalBackdrop's $timeout.
- Moved rounding logic into a formatter
- Checking for number instead of checking if undefined
- Using angular.isNumber for rounding logic
- Using bitwise instead of modulo to check for decimel
Fixes#3413Closes#3415
When typeahead-editable="false" and we select a perfect
match from the results list, the $parsers aren't called,
which results in the 'parse' error key not being reset.
As with the 'editable' key, we should reset this once
an item is selected because we know we have a valid
model matching the view value.
Closes#3166
- Animations are now opt-in, include ngAnimate to see collapse
animations
- ngAnimate handles initial state and doesn't animate if first
reflow hasn't occurred.
angular/angular.js@cc58460
- Tests may need more work. Right now they test for 'in' class.
Fixes#1774Fixes#2821Fixes#2836Closes#1274Closes#1444
Fix of the init-date attribute for the datepicker-popup. The init-date attribute, when set in a datepicker-popup element, is now added to the datepicker element and in the datepicker-popup scope, so the datepicker element can retrieve the attribute value.
- Fix scope.$apply call not working previously because scope was already
destroyed. Use $rootScope instead.
- Move $destroy call nearer to the dom removal.
- Remove fallback timer (emulateTime param)
Fixes#2585Fixes#2674Fixes#2536Fixes#2790Fixes#3182Closes#2724
With this commit, the validity of a typeahead model is set to true if
the model is set manually and the typehead directive is set to be
non-editable.
add test for setting model manually
Fixes#3318
Accept a number of milliseconds since 01.01.1970 as a valid value
for `ng-model`:
- change parseDate() to handle timestamp values
- add the test to `datepicker.spec.js`
Closes#2345
AngularJS 1.3 seems stricter with controller registration. Previously,
the controller were registered with undefined values but AngularJS 1.2
found them as they were window globals.
Looks like aa0b639 was incomplete. This should fix the rest of the demo app.
Fixes#3394
When nesting buttons in the header, and calling `$event.stopPropagation()` in their click handlers would cause a page refresh, because the default empty URL would be executed. By changing this into a noop, the page refresh is prevented. #3299
In reference to issue #3096
If the escape key should have other functionality in the context of a form (for
example, if datepicker is on a modal) it makes sense to prevent this from
happening if escape is used to close the dropdown. If the dropdown is closed,
however, the event should be allowed to propagate.
Fixes#3096Closes#3179
The $digest that was removed in 32c470 is actually necessary to get the
tooltip contents rendered. The rendered content is important when the
tooltip is on the right edge. See Plunker in #2995:
http://plnkr.co/edit/8GZ5F5zj3Xe6IinXQz74?p=preview
Reverts change in 32c470 (#2995) but fixes it in another way.
Fixes#2995Fixes#2992Fixes#2951Closes#2996
Use approach from Twitter Bootstrap. Most of the code is from their customizer.
- use modules in mappings file
- generate concatenated JS
- generate tpl and non-tpl file with banner
- generate zip file for custom builds
- add browser compatibility message
- speed up page by deferring loading of files
- only load the files when needed. Cache them after they're loaded.
Fixes#2960Fixes#2847Fixes#2625Fixes#2489Fixes#2357Fixes#2176Closes#2892
In Angular 1.3.1, when using tooltips with ngAnimate, this extra $digest
call seems to break ngClass. This is an extra call to ngAnimate and it
shouldn’t be called since the tooltip hasn’t been added to the DOM.
I was unable to create a test case to test compatibility with ngAnimate.
Fixes#2951Fixes#2959
Add typeahead-focus-first option to prevent first match from being
focused.
Currently, the first result is automatically focused as you type. Now, set
`typeahead-focus-first="false"` and the first result is *not*
automatically focused as you type.
Closes#908Closes#2916
I had a to tweak a bit two tests since $interval never throws an exception after flushing, hope I did it OK.
Ammend: addresses @chrisirhc critics
Fixes#1308Fixes#2454Closes#2776
tt_ scope variables are now in the ttScope which is specific to each
tooltip directive (multiple tooltip directives can now run on the same
element).
This allows tooltips to be used alongside any directive that may or
may not require different scope types.
Closes#1269Fixes#2320Fixes#2203
This wasn't working properly with the location change code
(lines 305-314) because the observe call happens asynchronously after
the linking function has completed.
Hence, the locationChangeSuccess wasn't being set up unless the global
tooltip option's appendToBody option was set to true.
Closes#2921
This change fixes the usage of the tooltip directive with AngularJS
1.3.1 when no trigger attribute is used.
BREAKING CHANGE: tooltip/popover trigger is no longer a watched
attribute.
This affects both popovers and tooltips. The triggers are now set up
once and can no longer be changed after initialization.
- Use $log instead of console as it's safer and always defined
- JSHint thinks usage of alert is possibly development code, so use
$window.alert instead
- Check for usage of undefined variables
- Add basic Jasmine globals so that spec files pass JSHint
- Ensure that angular variable can't be re-defined (set to false)
Closes#2861
when `appendToBody` option is set to true and then scope is destroyed,
DOM is still polluted with popup.
This fix removes `$popup` from DOM, thus cleaning it
If `.html` is removed from the end only to be added to the end, there's no reason to touch it. Also, `template` + `/` is the same as `template/`.
I haven't tested this, but I see absolutely no reason why this code isn't the same functionally.
Closes#2635
Auto-focusing of a freshly-opened modal element causes any child
elements with the autofocus attribute to loose focus. This is an issue
on touch based devices which will show and then hide the onscreen
keyboard. Attempts to refocus the autofocus element via JavaScript will
not reopen the onscreen keyboard. Fixed by updated the focusing logic to
only autofocus the modal element if the modal does not contain an
autofocus element.
Fixes#1696Closes#1892Closes#2273
Regression from #1745 as there's a double interpolation expected but
ngClass doesn't support that.
The attribute value of ngClass is only interpolated once and the
interpolated expression is watched.
Fixes#2145Closes#2146
$modalStack.openWindows.get(modalInstance) is undefined after the first dismiss and throws:
- TypeError: Cannot read property 'value' of undefined
Closes#1972
Add logic to handle cases where hide/show can be called multiple times
even before their timeouts complete.
This is more ugly logic to handle degenerate cases. Hopefully switching
over to ngAnimate and cleaning up the logic of tooltips will be better.
Fixes#1847Closes#1940
Allows use of the size modifier classes shipped with Bootstrap 3.1
onwards. Specify either 'sm' or 'lg' to get a small/large modal dialog.
Defaults to normal size dialog if not specified.
Closes#2084
* keyboard navigation
* WAI-ARIA roles
* popup will close on escape on input or calendar
* handle focus when closing popup
Closes#1922
BREAKING CHANGES: popup calendar does not open on input focus
Acts as a hybrid checkbox/radio-button, selecting exclusively among the button set, but also allowing the selected item to be unselected, leaving the button set without a selected item.
Closes#1760
* Add two-way binded `datepicker-mode`.
* Add optional `init-date` when no model value is specified.
* Add hint for current date.
* Use isolated scope for popup directive.
* Use optional binding for `isOpen`.
* Split each mode into it's own directive.
Closes#1599
BREAKING CHANGE:
`show-weeks` is no longer a watched attribute
`*-format` attributes have been renamed to `format-*`
`min` attribute has been renamed to `min-date`
`max` attribute has been renamed to `max-date`
* Add `aria-haspopup` and `and aria-expanded` attributes to dropdown toggle.
* Dynamically change `aria-expanded` when the dropdown closes or opens.
Closes#1733
Closes#1409
BREAKING CHANGE: Use interpolation for type attribute.
Before:
<tabset type="'pills'" ...></tabset >
or
<tabset type="navtype" ...></tabset>
After:
<tabset type="pills" ...></tabset>
or
<tabset type="{{navtype}}" ...></tabset>
Closes#1546
BREAKING CHANGE: `rating` is now integrated with `ngModelController`.
* `value` is replaced from `ng-model`.
Before:
<rating value="rate" ...></rating>
After:
<rating ng-model="rate" ...></rating>
Closes#1545
BREAKING CHANGE: Both `pagination` and `pager` are now integrated with `ngModelController`.
* `page` is replaced from `ng-model`.
* `on-select-page` is removed since `ng-change` can now be used.
Before:
<pagination page="current" on-select-page="changed(page)" ...></pagination>
After:
<pagination ng-model="current" ng-change="changed()" ...></pagination>
Tests now have to wait for animation before checking for open modals.
Tests should actually check for the 'in' class.
Setting up both the transition end handler and a timeout ensures that
the modal is always closed even if there was an issue with the
transition. This was the implementation used by Twitter Bootstrap modal
JS code.
Note that unbinding the transition end event within the event
handler isn't necessary, and, worse is currently buggy in jqLite (see
https://github.com/angular/angular.js/pull/5109 ).
Note that the scope is already destroyed when the dom is removed so the
$destroy call isn't needed.
Closes#1341
Tooltips were nested in anchor elements to get the hyperlink styling
from Bootstrap. This seems like an odd use of anchor elements and we
shouldn't encourage this. Instead, use anchors like actual links that
point to nowhere (#).
Closes#1507Closes#1509
Tests were compiling the element multiple times unnecessarily as it's
done in the root describe's beforeEach.
Introduce describe blocks with no name to encapsulate tests that need
the element to be compiled and separate them from tests that have their
own compilation.
Closes#1499
Isolate scope contents should be the same after hiding and showing the
tooltip. The isolate scope's parent should also always be set to the
directive's scope correctly.
fix(tooltip): link on demand
- Calling $digest is enough as we only need to digest the watchers in
this scope and its children. No need to call $apply.
- Set invokeApply to false on $timeout for popUpDelay
- No need to test for cached reference when tooltip isn't visible as
the tooltip has no scope.
Closes#1450Closes#1191Closes#1455
Knowing what exactly isn't being covered by the tests is more
important than knowing the statistics.
By default, this outputs full HTML reports with indicators of which
lines or branches haven't aren't covered.
As far as I understand, to test sizes like widths or height you need to append your element to the real document. But that `describe` is not running any test with that. My guess is that there was some in the past and that line was forgotten there.
Previously, there would be a case where the two transitions would run
as the cancel would asynchronously invoke the reject handler of the
transition which would set the currTransition to undefined even when
the currTransition has been replaced with a new transition.
This reverts commit 220e7b6012.
Revert the capability to set the tab direction. This is no longer a
feature in Bootstrap 3 and breaks nested tabs.
Closes#783
Relates to #659
* General refactor. Move logic to controller.
* Remove `onFull` & `onEmpty` handlers.
* Remove automatic types and stacked types.
* `progress` & `bar` transclude content to support text & extra elements.
BREAKING CHANGE: The onFull/onEmpty handlers & auto/stacked types have been removed.
To migrate your code change your markup like below.
Before:
<progress percent="var" class="progress-warning"></progress>
After:
<progressbar value="var" type="warning"></progressbar>
and for stacked instead of passing array/objects you can do:
<progress><bar ng-repeat="obj in objs" value="obj.var" type="{{obj.type}}"></bar></progress>
For unclear reasons the directive was watching DOM element's height
which incurs performance penalty. Normally this watching shouldn't be
necessery as collapsible elements should get height: auto;
Closes#1222
Attribute / option specifies where in the DOM to place the datepicker
popup elements.
If this option evaluates to 'true', the datepicker popup elements are
appended to 'body'. Otherwise, they follow the directive element.
Closes#834, Fixes#747
- Avoid re-initializing `tab.active`
- `setActive` only when all `tab.active` are set up (on the next
digest cycle)
Before I go to explain, there are up to two expressions that indicate
whether a tab is active:
1. `active` variable in the isolate scope of the tab directive
2. The expression from the active attribute (`attrs.active`) if it
is set, I'll call this `getActive`, as that's the variable that
refers to it.
During initial linking (adding of tabs), the `active` variable in the
tab's isolate scope tracks the active tab. When the first tab is
added, it's `active` is set to true since there's no way to know if
subsequent tabs are active since they haven't been added yet. As such,
at this point, it is not meaningful to set assign the `getActive`
with the value of `active`. At least not until all the tabs have been
added. Hence, a good time would be to wait until the next $digest
cycle.
A watcher is called asynchronously after initialization even if there
is no change on the expression's value.
As such, we can leave that to the watcher for the `active` expression
to initialize getActive by calling setActive during its initlization
cycle.
However, there is a chance (if the $digest cycles and planets
align...) that the `active` variable gets initialized a second time
using the `getActive` (in the watcher for `getActive`). Since we're
already setting `active` to `getActive`, and the `active` variable
should now be carrying the *truth*. Avoid this re-initialization.
This makes the highlighter behave more consistently like other filters.
It also makes it more useful as an empty query doesn't result in an
empty result.
Closes#820.
BREAKING CHANGE: API has undergone some changes in order to be easier to use.
* `current-page` is replaced from `page`.
* Number of pages is not defined by `num-pages`, but from `total-items` &
`items-per-page` instead. If `items-per-page` is missing, default is 10.
* `num-pages` still exists but is just readonly.
Before:
<pagination num-pages="10" ...></pagination>
After:
<pagination total-items="100" ...></pagination>
BREAKING CHANGE:
* `$dialog` service was refactored into `$modal`
* `modal` directive was removed - use the `$modal` service instead
Check the documentation for the `$modal` service to migrate from `$dialog`
This option represents class which is added to the body when the dialog is open.
It was present before in twitter bootstrap, then removed in 2.3.0,
but then recently reintroduced in 3.0
Closes#798
The element.focus() will throw an error since the object needs to be unwrapped first.
Should be: element[0].focus() at a minimum to unwrap the jqlite object since it doesn't expose focus().
Closes#758
If a user defines a tooltip-trigger attribute, this ensures the correct event handlers is used to hide the tooltip.
Fixes a bug where if a user sets both a default trigger using the tooltip provider, and then tries to override with an attribute, the wrong 'hide' event was being used.
Add the ability to set the direction of the tabs, the possible
values are 'right', 'left' and 'below'. If no direction is defined
the tabs are rendered on the top as they do now
Closes#659
* Before, tab content was being transcluded before the tab content area
was ready. This forced us to disconnect the tab contents from the DOM
temporarily, then reocnnect them later. This caused a lot of problems.
* Now, neither the tab content or header are transcluded until both
the heading and content areas are loaded. This is simpler and fixes
many weird compilation bugs.
Until now, the $tooltipProvider has been an undocumented feature, but as
there are now several options requested by the community at large, it is
finally included in the documentation.
The tooltip and popover directives (through the $tooltip service) now
support using an attribute in addition to the provider to set a
particular tooltip or popover to use $body as the container for the
popup element rather than the directive element's parent.
Closes#395.
Adds a mouse() method to the $position service API to return the current
mouse position. The $tooltip API has been changed to allow using this
value to set the position of the tooltip element. The top left corner of
the element will be at the cursor position.
Closes#535. Problem with IE10.
BREAKING CHANGE: The 'value' is replaced by 'percent'.
Before:
<progress value="..."></progress>
After:
<progress percent="..."></progress>
BREAKING CHANGE: The 'first-text', 'previous-text', 'next-text' and 'last-text'
attributes are now binded to parent scope.
To migrate your code, surround the text of these attributes with quotes.
Before:
<pagination first-text="<<" ...></pagination>
After:
<pagination first-text="'<<'" ...></pagination>
When an element on which the tooltip is applied is destroyed (along with
its scope), the tooltip popup will now be closed if it was open.
Also refactored the $locationChangeSuccess binding as well to not waste
a run of `hide()` unless the tooltip was already open, following the
same pattern used in this bug fix.
Closes#410.
* Rename 'tabs' directive to 'tabset', and 'pane' directive to 'tab'.
The new syntax is more intuitive; The word pane does not obviously
represent a subset of a tab group. (Closes#186)
* Add 'tab-heading' directive, which is a child of a 'tab'. Allows
HTML in tab headings. (Closes#124)
* Add option for a 'select' attribute callback when a tab is selected.
(Closes#141)
* Tabs transclude to title elements instead of content elements. Now the
ordering of tab titles is always correct. (Closes#153)
BREAKING CHANGE: The 'tabs' directive has been renamed to 'tabset', and
the 'pane' directive has been renamed to 'tab'.
To migrate your code, follow the example below.
Before:
<tabs>
<pane heading="one">
First Content
</pane>
<pane ng-repeat="apple in basket" heading="{{apple.heading}}">
{{apple.content}}
</pane>
</tabs>
After:
<tabset>
<tab heading="one">
First Content
</tab>
<tab ng-repeat="apple in basket" heading="{{apple.heading}}">
{{apple.content}}
</tab>
</tabset>
The `$tooltip` service now has two ways to customize the default triggers.
The `$tooltipProvider` takes a `trigger` option and the `*-trigger`
attribute can be applied to a single element.
The `$tooltipProvider`'s `trigger` option overwrites the default value
but the attribute will overwrite both.
A few logical default triggers are supported out of the box and have an
associated map to determine which hide trigger to use. `mouseenter` ->
`mouseleave`, `focus` -> `blur`, and `click` -> `click`. If any other
trigger is provided, it will be used to both show and hide the tooltip.
Custom hide triggers are not yet supported as they would require some
code trickery due to the way `$observe` works.
Closes#131
To calculate the relative position of the tooltip or popover, the
$tooltip service now uses the $position service, which resolves many
positioning bugs.
Closes#265, #115
* Move custom html2js task to grunt-html2js npmTask
* Move site task to simple grunt-contrib-copy and grunt.template.process
step
* Centralize module information into one config object
* Centralize demo assets into one folder
The directive displays the unsanitized HTML in the tooltip instead of
the escaped text.
The $tooltip service has been modified to allow a little more
flexibility in terms of the prefix used on the $observe'd attributes.
For example, the `tooltip-html-unsafe` directive needs to be called as
written, but it would be nonsensical to require all other attributes
(like animation or placement) to also use that verbose prefix as opposed
to the simpler and more familiar `tooltip-` prefix. The service now
allows independent specification of the name and its prefix.
Lastly, the docs for the tooltip and popover have been updated to show
their available optional attributes.
Closes#246
In IE10 msTransition exists but msTransitionEnd never fires. IE10 does however support standard transitionend.
Since IE<10 does not support transitions this line can be removed entirely.
This has already been done in Twitter Bootstrap. Reference here: https://github.com/twitter/bootstrap/pull/4166
Tooltips and popovers can now be appended to the body of the HTML
document instead of directly after the element on which the directive
was invoked, by setting `appendToBody` to true through
$tooltipProvider.options().
The tooltip specs were refactored slightly to bucket all
provider-related specs under a single `describe` for cleanliness.
Changes to the path API in nodeJS causes the build to fail with grunt 0.4.0. This patch fixes it in two ways:
- Update to grunt 0.4.1 - this version fixes the bug
- Add cwd option to build - this also fixes the issue but from our side and works with grunt 0.4.0
Popover and tooltip directive creation is now performed through the help
of the `$tooltip` service that manages all aspects of directive
creation and management based on only the name of the component and
their default triggers.
The tooltip and popover sub-directives and their templates were
refactored to use common scope variables that the new service can
provide, yielding even greater flexibility.
Animation is now enabled by default.
Lastly, the `$tooltipProvider` has been established to allow setting
default global options for the tooltip and popover, but these features
are not yet public as the API is sure to change drastically as we flesh
out which global options to allow. But the framework is in place as this
was a logical time to incorporate it.
Defines a new directive <accordion-heading> that can be used below <accordion-group> elements to provide HTML to be transcluded into the group's heading.
The transcluded headfng is compiled and linked to the same scope as the transcluded body - so it can contain AngularJS directives itself.
Changing the $dialog service to treat the 'resolve' property the same way as $routeProvider does. It means expecting a string or a factory function instead of a value.
Signed-off-by: thiagofelix <felixthi@gmail.com>
- make the type optional (in this case only a default alert class is applied)
- remove the 'alert-block' from a template - it can still be added on the alert element if needed
- add replace:true
- uncomment a test
The tooltip directive has been re-architected to use a new scope rather
than an isolate scope, but the templated tooltipPopup directive now has
an isolate scope to introduce a similar level of scope security. As the
isolate scope is gone, the transclusion logic has been removed. In
addition, tooltip attributes are $observed manually to assign the
necessary variables on the child scope needed by the tooltipPopup
directive.
Closes#78.
If number of pages is less than the max-size then only the number of pages that are available should be displayed, but this should not then update the max-size expression, since if the number of pages then increases we have lost the max-size value that the user set.
Add support for open and close CSS transitions.
Add support for optional is-open attribute on <accordion-group> directive
Remove isolate scope from <accordion> directive
A dynamic selector did not work as the contents of the directive element
were not transcluded. This fix adds transclusion through a new directive
controller method. It also includes a new test for this case (through an
ngRepeat) as well as a modified demo to show this use case.
Closes#69
As contributors and maintainers of this project, and in the interest of fostering an open and welcoming community, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, religion, or nationality.
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery
* Personal attacks
* Trolling or insulting/derogatory comments
* Public or private harassment
* Publishing other's private information, such as physical or electronic addresses, without explicit permission
* Other unethical or unprofessional conduct.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. By adopting this Code of Conduct, project maintainers commit themselves to fairly and consistently applying these principles to every aspect of managing this project. Project maintainers who do not follow or enforce the Code of Conduct may be permanently removed from the project team.
This code of conduct applies both within project spaces and in public spaces when an individual is representing the project or its community.
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.
This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.2.0, available at [http://contributor-covenant.org/version/1/2/0/](http://contributor-covenant.org/version/1/2/0/)
Firstly, please go over our FAQ: https://github.com/angular-ui/bootstrap/wiki/FAQ
Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on [StackOverflow](http://stackoverflow.com/questions/tagged/angular-ui-bootstrap) where maintainers are looking at questions tagged with `angular-ui-bootstrap`.
StackOverflow is a much better place to ask questions since:
* there are hundreds of people willing to help on StackOverflow
* questions and answers stay available for public viewing so your question / answer might help someone else
* SO voting system assures that the best answers are prominently visible.
To save your and our time we will be systematically closing all the issues that are requests for general support and redirecting people to StackOverflow.
## You think you've found a bug?
Oh, we are ashamed and want to fix it asap! But before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs we will systematically ask you to provide a _minimal_ reproduce scenario using http://plnkr.co/. Having a live reproduce scenario gives us wealth of important information without going back & forth to you with additional questions like:
* version of AngularJS used
* version of this library that you are using
* 3rd-party libraries used, if any
* and most importantly - a use-case that fails
A minimal reproduce scenario using http://plnkr.co/ allows us to quickly confirm a bug (or point out coding problem) as well as confirm that we are fixing the right problem.
We will be insisting on a minimal reproduce scenario in order to save maintainers time and ultimately be able to fix more bugs. Interestingly, from our experience users often find coding problems themselves while preparing a minimal plunk. We understand that sometimes it might be hard to extract essentials bits of code from a larger code-base but we really need to isolate the problem before we can fix it.
The best part is that you don't need to create plunks from scratch - you can use one from our [demo page](http://angular-ui.github.io/bootstrap/).
Unfortunately we are not able to investigate / fix bugs without a minimal reproduce scenario using http://plnkr.co/, so if we don't hear back from you we are going to close an issue that don't have enough info to be reproduced.
## You want to contribute some code?
We are always looking for the quality contributions and will be happy to accept your Pull Requests as long as those adhere to some basic rules:
* Please make sure that your contribution fits well in the project's context:
* we are aiming at rebuilding bootstrap directives in pure AngularJS, without any dependencies on any external JavaScript library;
* the only dependency should be bootstrap CSS and its markup structure;
* directives should be html-agnostic as much as possible which in practice means:
* templates should be referred to using the `templateUrl` property
* it should be easy to change a default template to a custom one
* directives shouldn't manipulate DOM structure directly (when possible)
* Please assure that you are submitting quality code, specifically make sure that:
* your directive has accompanying tests and all the tests are passing; don't hesitate to contact us (angular-ui@googlegroups.com) if you need any help with unit testing
* your PR doesn't break the build; check the Travis-CI build status after opening a PR and push corrective commits if anything goes wrong
* your commits conform to the conventions established [here](https://github.com/stevemao/conventional-changelog-angular/blob/master/convention.md)
- [Contributing to the project](#contributing-to-the-project)
- [Development, meeting minutes, roadmap and more.](#development-meeting-minutes-roadmap-and-more)
The bootstrap CSS can be referenced from a CDN: http://www.bootstrapcdn.com/
Then it is enough to include one of the build files described below.
# Demo
##Build files
Do you want to see directives in action? Visit https://angular-ui.github.io/bootstrap/!
In this repository one can find build files with the following names:
# Angular 2
* ui-bootstrap-[version].js
* ui-bootstrap-tpls-[version].js
* ui-bootstrap-[version].min.js
* ui-bootstrap-tpls-[version].min.js
Are you interested in Angular 2? We are on our way! Check out [ng-bootstrap](https://github.com/ui-bootstrap/core).
Files with the `min` suffix are minified versions to be used in production.
# Installation
Then we've got files with the `-tpls`. To explain the difference let's start by explaining that we want our directives to be highly customizable. To achieve this we are trying hard not to hard-code markup nor CSS inside JavaScript code. Instead most of the directives are coming with a dedicated template(s) so people can change them. We are providing default templates based on Twitter's markup and CSS but you should be able to prepare your own partials to change the look&feel of widgets from this repo.
Installation is easy as UI Bootstrap has minimal dependencies - only the AngularJS and Twitter Bootstrap's CSS are required.
*Notes:*
* Since version 0.13.0, UI Bootstrap depends on [ngAnimate](https://docs.angularjs.org/api/ngAnimate) for transitions and animations, such as the accordion, carousel, etc. Include `ngAnimate` in the module dependencies for your app in order to enable animation.
* UI Bootstrap depends on [ngTouch](https://docs.angularjs.org/api/ngTouch) for swipe actions. Include `ngTouch` in the module dependencies for your app in order to enable swiping.
Now it should be clear that files with the `-tpls` in their name have bootstrap-specific templates bundled with directives. For people who want to take all the directives and don't need to customize anything the solution is to grab a file named `ui-bootstrap-tpls-[version].min.js`. If, on the other hand default templates are not what you need you could take `ui-bootstrap-[version].min.js` and provide your own templates, taking the default ones (https://github.com/angular-ui/bootstrap/tree/master/template) as a starting point.
## Angular Requirements
* UI Bootstrap 1.0 and higher _requires_ Angular 1.4.x or higher and it has been tested with Angular 1.4.8.
* UI Bootstrap 0.14.3 is the _last_ version that supports Angular 1.3.x.
* UI Bootstrap 0.12.0 is the _last_ version that supports Angular 1.2.x.
## Bootstrap Requirements
* UI Bootstrap requires Bootstrap CSS version 3.x or higher and it has been tested with Bootstrap CSS 3.3.6.
* UI Bootstrap 0.8 is the _last_ version that supports Bootstrap CSS 2.3.x.
#### Install with NPM
```sh
$ npm install angular-ui-bootstrap
```
This will install AngularJS and Bootstrap NPM packages.
#### Install with Bower
```sh
$ bower install angular-bootstrap
```
Note: do not install 'angular-ui-bootstrap'. A separate repository - [bootstrap-bower](https://github.com/angular-ui/bootstrap-bower) - hosts the compiled javascript file and bower.json.
#### Install with NuGet
To install AngularJS UI Bootstrap, run the following command in the Package Manager Console
```sh
PM> Install-Package Angular.UI.Bootstrap
```
#### Custom build
Head over to https://angular-ui.github.io/bootstrap/ and hit the *Custom build* button to create your own custom UI Bootstrap build, just the way you like it.
#### Manual download
After downloading dependencies (or better yet, referencing them from your favorite CDN) you need to download build version of this project. All the files and their purposes are described here:
Don't worry, if you are not sure which file to take, opt for `ui-bootstrap-tpls-[version].min.js`.
### Adding dependency to your project
When you are done downloading all the dependencies and project files the only remaining part is to add dependencies on the `ui.bootstrap` AngularJS module:
```js
angular.module('myModule',['ui.bootstrap']);
```
# Webpack / JSPM
To use this project with webpack, follow the [NPM](#install-with-npm) instructions.
Now, if you want to use only the accordion, you can do:
This will load all the dependencies (if any) and also the templates (if any).
Be sure to have a loader able to process `css` files like `css-loader`.
If you would prefer not to load your css through your JavaScript file loader/bundler, you can choose to import the `index-nocss.js` file instead, which is available for the modules:
* carousel
* datepicker
* datepickerPopup
* dropdown
* modal
* popover
* position
* timepicker
* tooltip
* typeahead
The other modules, such as `accordion` in the example below, do not have CSS resources to load, so you should continue to import them as normal:
Pre-2.0.0 does not follow a particular versioning system. 2.0.0 and onwards follows [semantic versioning](http://semver.org/). All release changes can be viewed on our [changelog](CHANGELOG.md).
# Support
## FAQ
https://github.com/angular-ui/bootstrap/wiki/FAQ
# Code of Conduct
Take a moment to read our [Code of Conduct](CODE_OF_CONDUCT.md)
## PREFIX MIGRATION GUIDE
If you're updating your application to use prefixes, please check the [migration guide](https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes).
## Supported browsers
Directives from this repository are automatically tested with the following browsers:
* Chrome (stable and canary channel)
* Firefox
* IE 9 and 10
* Opera
* Safari
Modern mobile browsers should work without problems.
## Need help?
Need help using UI Bootstrap?
* Live help in the IRC (`#angularjs` channel at the `freenode` network). Use this [webchat](https://webchat.freenode.net/) or your own IRC client.
* Ask a question in [StackOverflow](http://stackoverflow.com/) under the [angular-ui-bootstrap](http://stackoverflow.com/questions/tagged/angular-ui-bootstrap) tag.
**Please do not create new issues in this repository to ask questions about using UI Bootstrap**
## Found a bug?
Please take a look at [CONTRIBUTING.md](CONTRIBUTING.md#you-think-youve-found-a-bug) and submit your issue [here](https://github.com/angular-ui/bootstrap/issues/new).
----
# Contributing to the project
We are always looking for the quality contributions! Please check the [CONTRIBUTING.md](CONTRIBUTING.md) for the contribution guidelines.
# Development, meeting minutes, roadmap and more.
Head over to the [Wiki](https://github.com/angular-ui/bootstrap/wiki) for notes on development for UI Bootstrap, meeting minutes from the UI Bootstrap team, roadmap plans, project philosophy and more.
This repository contains a set of <strong>native AngularJS directives</strong> based on
Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's
JavaScript is required. The <strong>only required dependencies</strong> are:
</p>
<ul>
<li><ahref="http://angularjs.org"target="_blank">AngularJS</a> (requires AngularJS 1.4.x or higher, tested with <%= ngversion %>).
0.14.3 is the last version of this library that supports AngularJS 1.3.x and
0.12.0 is the last version that supports AngularJS 1.2.x.</li>
<li><ahref="http://angularjs.org"target="_blank">Angular-animate</a> (the version should match with your angular's, tested with <%= ngversion %>) if you plan in using animations, you need to load angular-animate as well.</li>
<li><ahref="http://angularjs.org"target="_blank">Angular-touch</a> (the version should match with your angular's, tested with <%= ngversion %>) if you plan in using swipe actions, you need to load angular-touch as well.</li>
<li><ahref="http://getbootstrap.com"target="_blank">Bootstrap CSS</a> (tested with version <%= bsversion %>).
This version of the library (<%= pkg.version%>) works only with Bootstrap CSS in version 3.x.
0.8.0 is the last version of this library that supports Bootstrap CSS in version 2.3.x.
</li>
</ul>
<h3>Files to download</h3>
<p>
Build files for all directives are distributed in several flavours: minified for production usage, un-minified
for development, with or without templates. All the options are described and can be
<ahref="https://github.com/angular-ui/bootstrap/tree/gh-pages">downloaded from here</a>. It should be noted that the <code>-tpls</code> files contain the templates bundled in JavaScript, while the regular version does not contain the bundled templates. For more information, check out the FAQ <ahref="https://github.com/angular-ui/bootstrap/wiki/FAQ#full-explanation">here</a> and the README <ahref="https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files">here</a>.
</p>
<p>Alternativelly, if you are only interested in a subset of directives, you can
<ang-click="showBuildModal()">create your own build</a>.
</p>
<p>Whichever method you choose the good news that the overall size of a download is fairly small:
122K minified for all directives with templates and 98K without (~31kB with gzip
compression, with templates, and 28K gzipped without)</p>
<h3>Installation</h3>
<p>As soon as you've got all the files downloaded and included in your page you just need to declare
a dependency on the <code>ui.bootstrap</code><ahref="http://docs.angularjs.org/guide/module">module</a>:<br>
<p>If you are using UI Bootstrap in the CSP mode, e.g. in an extension, make sure you link to the <code>ui-bootstrap-csp.css</code> in your HTML manually.</p>
<p>You can fork one of the plunkers from this page to see a working example of what is described here.</p>
<h3>Migration to prefixes</h3>
<p>Since version 0.14.0 we started to prefix all our components. If you are upgrading from ui-bootstrap 0.13.4 or earlier,
<p>Original Bootstrap's CSS depends on empty <code>href</code> attributes to style cursors for several components (pagination, tabs etc.).
But in AngularJS adding empty <code>href</code> attributes to link tags will cause unwanted route changes. This is why we need to remove empty <code>href</code> attributes from directive templates and as a result styling is not applied correctly. The remedy is simple, just add the following styling to your application: <pre><code>.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }</code></pre>
</p>
<h3>FAQ</h3>
<p>Please check <ahref="https://github.com/angular-ui/bootstrap/wiki/FAQ"target="_blank">our FAQ section</a> for common problems / solutions.</p>
<h3>Reading the documentation</h3>
<p>
Each of the components provided in <code>ui-bootstrap</code> have documentation and interactive Plunker examples.
</p>
<p>
For the directives, we list the different attributes with their default values. In addition to this, some settings have a badge on it:
<ul>
<li><iclass="glyphicon glyphicon-eye-open"></i> - This setting has an angular $watch listener applied to it.</li>
<li><smallclass="badge">B</small> - This setting is a boolean. It doesn't need a parameter.</li>
<li><smallclass="badge">C</small> - This setting can be configured globally in a constant service*.</li>
<li><smallclass="badge">$</small> - This setting expects an angular expression instead of a literal string. If the expression support a boolean / integer, you can pass it directly.</li>
<li><smallclass="badge">readonly</small> - This setting is readonly.</li>
</ul>
</p>
<p>
For the services (you will recognize them with the <code>$</code> prefix), we list all the possible parameters you can pass to them and their default values if any.
</p>
<p>
* Some directives have a config service that follows the next pattern: <code>uibDirectiveConfig</code>. The service's settings use camel case. The services can be configured in a <code>.config</code> function for example.
The **accordion directive** builds on top of the collapse directive to provide a list of items, with collapsible bodies that are collapsed or expanded by clicking on the item's header.
The body of each accordion group is transcluded into the body of the collapsible element.
### uib-accordion settings
*`close-others`
<small class="badge">$</small>
<small class="badge">C</small>
_(Default: `true`)_ -
Control whether expanding an item will cause the other items to close.
Add the ability to override the template used on the component.
### Accordion heading
Instead of the `heading` attribute on the `uib-accordion-group`, you can use an `uib-accordion-heading` element inside a group that will be used as the group's header.
If you're using a custom template for the `uib-accordion-group`, you'll need to have an element for the heading to be transcluded into using `uib-accordion-header` (e.g. `<div uib-accordion-header></div>`).
### Known issues
To use clickable elements within the accordion, you have to override the accordion-group template to use div elements instead of anchor elements, and add `cursor: pointer` in your CSS. This is due to browsers interpreting anchor elements as the target of any click event, which triggers routing when certain elements such as buttons are nested inside the anchor element.
If custom classes on the accordion-group element are desired, one needs to either modify the template to remove the `ng-class` usage in the accordion-group template and use ng-class on the accordion-group element (not recommended), or use an interpolated expression in the class attribute, i.e. `<uib-accordion-group class="{{customClass()}}"></uib-accordion-group>`.
it('should have disabled styling when is-disabled is true',isDisabledStyleCheck);
});
describe('uib-accordion-heading, with repeating uib-accordion-groups',function(){
it('should clone the uib-accordion-heading for each group',function(){
element=$compile('<uib-accordion><div uib-accordion-group ng-repeat="x in [1,2,3]"><uib-accordion-heading>{{x}}</uib-accordion-heading></div></uib-accordion>')(scope);
scope.$digest();
groups=element.find('.panel');
expect(groups.length).toBe(3);
expect(findGroupLink(0).text()).toBe('1');
expect(findGroupLink(1).text()).toBe('2');
expect(findGroupLink(2).text()).toBe('3');
});
});
describe('uib-accordion-heading attribute, with repeating uib-accordion-groups',function(){
it('should clone the uib-accordion-heading for each group',function(){
element=$compile('<uib-accordion><div uib-accordion-group ng-repeat="x in [1,2,3]"><div uib-accordion-heading>{{x}}</div></div></uib-accordion>')(scope);
scope.$digest();
groups=element.find('.panel');
expect(groups.length).toBe(3);
expect(findGroupLink(0).text()).toBe('1');
expect(findGroupLink(1).text()).toBe('2');
expect(findGroupLink(2).text()).toBe('3');
});
});
describe('uib-accordion-heading attribute, with custom template',function(){
it('should transclude heading to a template using data-uib-accordion-header',inject(function($templateCache){
This directive can be used both to generate alerts from static and dynamic model data (using the `ng-repeat` directive).
### uib-alert settings
*`close()`
<small class="badge">$</small> -
A callback function that gets fired when an `alert` is closed. If the attribute exists, a close button is displayed as well.
*`dismiss-on-timeout`
_(Default: `none`)_ -
Takes the number of milliseconds that specify the timeout duration, after which the alert will be closed. This attribute requires the presence of the `close` attribute.
*`template-url`
_(Default: `uib/template/alert/alert.html`)_ -
Add the ability to override the template used in the component.
With the buttons directive, we can make a group of buttons behave like a set of checkboxes (`uib-btn-checkbox`) or behave like a set of radio buttons (`uib-btn-radio`).
### uib-btn-checkbox settings
*`btn-checkbox-false`
_(Default: `false`)_ -
Sets the value for the unchecked status.
*`btn-checkbox-true`
_(Default: `true`)_ -
Sets the value for the checked status.
*`ng-model`
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i> -
Model where we set the checkbox status. By default `true` or `false`.
### uib-btn-radio settings
*`ng-model`
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i> -
Model where we set the radio status. All radio buttons in a group should use the same `ng-model`.
*`uib-btn-radio` -
<small class="badge">$</small>
Value to assign to the `ng-model` if we check this radio button.
*`uib-uncheckable`
<small class="badge">$</small>
_(Default: `null`)_ -
An expression that evaluates to a truthy or falsy value that determines whether the `uncheckable` attribute is present.
*`uncheckable`
<small class="badge">B</small> -
Whether a radio button can be unchecked or not.
### Additional settings `uibButtonConfig`
*`activeClass`
_(Default: `active`)_ -
Class to apply to the checked buttons.
*`toggleEvent`
_(Default: `click`)_ -
Event used to toggle the buttons.
### Known issues
To use tooltips or popovers on elements within a `btn-group`, set the tooltip/popover `appendToBody` option to `true`. This is due to Bootstrap CSS styling. See [here](http://getbootstrap.com/components/#btn-groups) for more information.
Add the ability to override the template used on the component.
### uib-slide settings
*`actual`
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
_(Default: `none`)_ -
Use this attribute to bind the slide model (or any object of interest) onto the slide scope, which makes it available for customization in the carousel template.
*`index`
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
_(Default: `none`)_ -
The index of the slide. Must be unique.
*`template-url`
_(Default: `uib/template/carousel/slide.html`)_ -
Add the ability to override the template used on the component.
**uib-collapse** provides a simple way to hide and show an element with a css transition
### uib-collapse settings
*`collapsed()`
<small class="badge">$</small> -
An optional expression called after the element finished collapsing.
*`collapsing()`
<small class="badge">$</small> -
An optional expression called before the element begins collapsing.
If the expression returns a promise, animation won't start until the promise resolves.
If the returned promise is rejected, collapsing will be cancelled.
*`expanded()`
<small class="badge">$</small> -
An optional expression called after the element finished expanding.
*`expanding()`
<small class="badge">$</small> -
An optional expression called before the element begins expanding.
If the expression returns a promise, animation won't start until the promise resolves.
If the returned promise is rejected, expanding will be cancelled.
*`uib-collapse`
<small class="badge">$</small>
<i class="glyphicon glyphicon-eye-open"></i>
_(Default: `false`)_ -
Whether the element should be collapsed or not.
*`horizontal`
<small class="badge">$</small> -
An optional attribute that permit to collapse horizontally.
### Known Issues
When using the `horizontal` attribute with this directive, CSS can reflow as the collapse element goes from `0px` to its desired end width, which can result in height changes. This can cause animations to not appear to run. The best way around this is to set a fixed height via CSS on the horizontal collapse element so that this situation does not occur, and so the animation can run as expected.
The `uibDateParser` is what the `uib-datepicker` uses internally to parse the dates. You can use it standalone by injecting the `uibDateParser` service where you need it.
The public API for the dateParser is a single method called `parse`.
Certain format codes support i18n. Check this [guide](https://docs.angularjs.org/guide/i18n) for more information.
### uibDateParser's parse function
##### parameters
*`input`
_(Type: `string`, Example: `2004/Sep/4`)_ -
The input date to parse.
*`format`
_(Type: `string`, Example: `yyyy/MMM/d`)_ -
The format we want to use. Check all the supported formats below.
*`baseDate`
_(Type: `Date`, Example: `new Date()`)_ -
If you want to parse a date but maintain the timezone, you can pass an existing date here.
##### return
* If the specified input matches the format, a new date with the input will be returned, otherwise, it will return undefined.
### uibDateParser's format codes
*`yyyy`
_(Example: `2015`)_ -
Parses a 4 digits year.
*`yy`
_(Example: `15`)_ -
Parses a 2 digits year.
*`y`
_(Example: `15`)_ -
Parses a year with 1, 2, 3, or 4 digits.
*`MMMM`
_(Example: `February`, i18n support)_ -
Parses the full name of a month.
*`MMM`
_(Example: `Feb`, i18n support)_ -
Parses the short name of a month.
*`MM`
_(Example: `12`, Leading 0)_ -
Parses a numeric month.
*`M`
_(Example: `3`)_ -
Parses a numeric month.
*`M!`
_(Example: `3` or `03`)_ -
Parses a numeric month, but allowing an optional leading zero
*`LLLL`
_(Example: `February`, i18n support)_ - Stand-alone month in year (January-December). Requires Angular version 1.5.1 or higher.
*`dd`
_(Example: `05`, Leading 0)_ -
Parses a numeric day.
*`d`
_(Example: `5`)_ -
Parses a numeric day.
*`d!`
_(Example: `3` or `03`)_ -
Parses a numeric day, but allowing an optional leading zero
*`EEEE`
_(Example: `Sunday`, i18n support)_ -
Parses the full name of a day.
*`EEE`
_(Example: `Mon`, i18n support)_ -
Parses the short name of a day.
*`HH`
_(Example: `14`, Leading 0)_ -
Parses a 24 hours time.
*`H`
_(Example: `3`)_ -
Parses a 24 hours time.
*`hh`
_(Example: `11`, Leading 0)_ -
Parses a 12 hours time.
*`h`
_(Example: `3`)_ -
Parses a 12 hours time.
*`mm`
_(Example: `09`, Leading 0)_ -
Parses the minutes.
*`m`
_(Example: `3`)_ -
Parses the minutes.
*`sss`
_(Example: `094`, Leading 0)_ -
Parses the milliseconds.
*`ss`
_(Example: `08`, Leading 0)_ -
Parses the seconds.
*`s`
_(Example: `22`)_ -
Parses the seconds.
*`a`
_(Example: `10AM`)_ -
Parses a 12 hours time with AM/PM.
*`Z`
_(Example: `-0800`)_ -
Parses the timezone offset in a signed 4 digit representation
*`ww`
_(Example: `03`, Leading 0)_ -
Parses the week number
*`w`
_(Example: `03`)_ -
Parses the week number
*`G`, `GG`, `GGG`
_(Example: `AD`)_ -
Parses the era (`AD` or `BC`)
*`GGGG`
_(Example: `Anno Domini`)_ -
Parses the long form of the era (`Anno Domini` or `Before Christ`)
\* The ones marked with `Leading 0`, needs a leading 0 for values less than 10. Exception being milliseconds which needs it for values under 100.
\** It also supports `fullDate|longDate|medium|mediumDate|mediumTime|short|shortDate|shortTime` as the format for parsing.
\*** It supports template literals as a string between the single quote `'` character, i.e. `'The Date is' MM/DD/YYYY`. If one wants the literal single quote character, one must use `''''`.
Add the ability to override the template used on the component.
Apart from the previous settings, to configure the uib-datepicker you need to create an object in Javascript with all the options and use it on the `datepicker-options` attribute:
*`datepicker-options`
<small class="badge">$</small> -
An object to configure the datepicker in one place.
*`customClass ({date: date, mode: mode})` -
An optional expression to add classes based on passing an object with date and current mode properties.
*`dateDisabled ({date: date, mode: mode})` -
An optional expression to disable visible options based on passing an object with date and current mode properties.
*`datepickerMode`
<small class="badge">C</small>
<i class="glyphicon glyphicon-eye-open"></i>
_(Default: `day`)_ -
Current mode of the datepicker _(day|month|year)_. Can be used to initialize the datepicker in a specific mode.
*`formatDay`
<small class="badge">C</small>
_(Default: `dd`)_ -
Format of day in month.
*`formatMonth`
<small class="badge">C</small>
_(Default: `MMMM`)_ -
Format of month in year.
*`formatYear`
<small class="badge">C</small>
_(Default: `yyyy`)_ -
Format of year in year range.
*`formatDayHeader`
<small class="badge">C</small>
_(Default: `EEE`)_ -
Format of day in week header.
*`formatDayTitle`
<small class="badge">C</small>
_(Default: `MMMM yyyy`)_ -
Format of title when selecting day.
*`formatMonthTitle`
<small class="badge">C</small>
_(Default: `yyyy`)_ -
Format of title when selecting month.
*`initDate`
<i class="glyphicon glyphicon-eye-open"></i>
_(Default: `null`)_ -
The initial date view when no model value is specified.
*`maxDate`
<small class="badge">C</small>
<i class="glyphicon glyphicon-eye-open"></i>
_(Default: `null`)_ -
Defines the maximum available date. Requires a Javascript Date object.
*`maxMode`
<small class="badge">C</small>
<i class="glyphicon glyphicon-eye-open"></i>
_(Default: `year`)_ -
Sets an upper limit for mode.
*`minDate`
<small class="badge">C</small>
<i class="glyphicon glyphicon-eye-open"></i>
_(Default: `null`)_ -
Defines the minimum available date. Requires a Javascript Date object.
*`minMode`
<small class="badge">C</small>
<i class="glyphicon glyphicon-eye-open"></i>
_(Default: `day`)_ -
Sets a lower limit for mode.
*`monthColumns`
<small class="badge">C</small>
_(Default: `3`)_ -
Number of columns displayed in month selection.
*`ngModelOptions`
<small class="badge">C</small>
_(Default: `null`)_ -
Sets `ngModelOptions` for datepicker. This can be overridden through attribute usage
*`shortcutPropagation`
<small class="badge">C</small>
_(Default: `false`)_ -
An option to disable the propagation of the keydown event.
Starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday).
*`yearRows`
<small class="badge">C</small>
_(Default: `4`)_ -
Number of rows displayed in year selection.
*`yearColumns`
<small class="badge">C</small>
_(Default: `5`)_ -
Number of columns displayed in year selection.
### Keyboard support
Depending on datepicker's current mode, the date may refer either to day, month or year. Accordingly, the term view refers either to a month, year or year range.
*`Left`: Move focus to the previous date. Will move to the last date of the previous view, if the current date is the first date of a view.
*`Right`: Move focus to the next date. Will move to the first date of the following view, if the current date is the last date of a view.
*`Up`: Move focus to the same column of the previous row. Will wrap to the appropriate row in the previous view.
*`Down`: Move focus to the same column of the following row. Will wrap to the appropriate row in the following view.
*`PgUp`: Move focus to the same date of the previous view. If that date does not exist, focus is placed on the last date of the month.
*`PgDn`: Move focus to the same date of the following view. If that date does not exist, focus is placed on the last date of the month.
*`Home`: Move to the first date of the view.
*`End`: Move to the last date of the view.
*`Enter`/`Space`: Select date.
*`Ctrl`+`Up`: Move to an upper mode.
*`Ctrl`+`Down`: Move to a lower mode.
*`Esc`: Will close popup, and move focus to the input.
**Notes**
If the date a user enters falls outside of the min-/max-date range, a `dateDisabled` validation error will show on the form.
<label>Format: <spanclass="muted-text">(manual alternate <em>{{altInputFormats[0]}}</em>)</span></label><selectclass="form-control"ng-model="format"ng-options="f for f in formats"><option></option></select>
The datepicker popup is meant to be used with an input element. To understand usage of the datepicker, please refer to its documentation [here](https://angular-ui.github.io/bootstrap/#/datepicker).
### uib-datepicker-popup settings
The popup is a wrapper that you can use in an input to toggle a datepicker. To configure the datepicker, use `datepicker-options` as documented in the [inline datepicker](https://angular-ui.github.io/bootstrap/#/datepicker).
*`alt-input-formats`
<small class="badge">$</small>
<small class="badge">C</small>
_(Default: `[]`)_ -
A list of alternate formats acceptable for manual entry.
*`clear-text`
<small class="badge">C</small>
_(Default: `Clear`)_ -
The text to display for the clear button.
*`close-on-date-selection`
<small class="badge">$</small>
<small class="badge">C</small>
_(Default: `true`)_ -
Whether to close calendar when a date is chosen.
*`close-text`
<small class="badge">C</small>
_(Default: `Done`)_ -
The text to display for the close button.
*`current-text`
<small class="badge">C</small>
_(Default: `Today`)_ -
The text to display for the current day button.
*`datepicker-append-to-body`
<small class="badge">$</small>
<small class="badge">C</small>
_(Default: `false`, Config: `appendToBody`)_ -
Append the datepicker popup element to `body`, rather than inserting after `datepicker-popup`.
*`datepicker-options`
<small class="badge">$</small> -
An object with any combination of the datepicker settings (in camelCase) used to configure the wrapped datepicker.
Passing in 'auto' separated by a space before the placement will enable auto positioning, e.g: "auto bottom-left". The popup will attempt to position where it fits in the closest scrollable ancestor. Accepts:
*`top` - popup on top, horizontally centered on input element.
*`top-left` - popup on top, left edge aligned with input element left edge.
*`top-right` - popup on top, right edge aligned with input element right edge.
*`bottom` - popup on bottom, horizontally centered on input element.
*`bottom-left` - popup on bottom, left edge aligned with input element left edge.
*`bottom-right` - popup on bottom, right edge aligned with input element right edge.
*`left` - popup on left, vertically centered on input element.
*`left-top` - popup on left, top edge aligned with input element top edge.
*`left-bottom` - popup on left, bottom edge aligned with input element bottom edge.
*`right` - popup on right, vertically centered on input element.
*`right-top` - popup on right, top edge aligned with input element top edge.
*`right-bottom` - popup on right, bottom edge aligned with input element bottom edge.
Some files were not shown because too many files have changed in this diff
Show More
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.