@brightspace-ui/core 2.32.3 → 2.34.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/backdrop/backdrop.js +5 -3
- package/components/list/README.md +7 -1
- package/components/list/demo/demo-list.js +233 -0
- package/components/list/demo/list.html +4 -167
- package/components/list/list-item-generic-layout.js +1 -0
- package/components/list/list.js +76 -4
- package/components/paging/README.md +55 -0
- package/components/paging/demo/pager-load-more.html +86 -0
- package/components/paging/pageable-mixin.js +35 -0
- package/components/paging/pager-load-more.js +146 -0
- package/components/tag-list/tag-list.js +3 -1
- package/custom-elements.json +82 -0
- package/lang/ar.js +3 -0
- package/lang/cy.js +4 -1
- package/lang/da.js +3 -0
- package/lang/de.js +4 -1
- package/lang/en.js +3 -0
- package/lang/es-es.js +3 -0
- package/lang/es.js +3 -0
- package/lang/fr-fr.js +3 -0
- package/lang/fr.js +3 -0
- package/lang/hi.js +4 -1
- package/lang/ja.js +3 -0
- package/lang/ko.js +3 -0
- package/lang/nl.js +4 -1
- package/lang/pt.js +4 -1
- package/lang/sv.js +3 -0
- package/lang/tr.js +3 -0
- package/lang/zh-cn.js +3 -0
- package/lang/zh-tw.js +3 -0
- package/package.json +1 -1
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
# Paging
|
|
2
|
+
|
|
3
|
+
The paging components and mixins can be used to provide consistent paging functionality.
|
|
4
|
+
|
|
5
|
+
<!-- docs: demo -->
|
|
6
|
+
```html
|
|
7
|
+
<script type="module">
|
|
8
|
+
import '@brightspace-ui/core/components/paging/pager-load-more.js';
|
|
9
|
+
</script>
|
|
10
|
+
<d2l-pager-load-more has-more page-size="3" item-count="15"></d2l-pager-load-more>
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Best Practices
|
|
14
|
+
<!-- docs: start best practices -->
|
|
15
|
+
<!-- docs: start dos -->
|
|
16
|
+
* Consider the performance impact of acquiring the optional total `item-count`. The `item-count` provides useful context for the user, but counting large numbers of rows can be detrimental to performance. As a very general guide, when the total number of rows that needs to be counted is < 50,000, it's not a performance concern.
|
|
17
|
+
<!-- docs: end dos -->
|
|
18
|
+
|
|
19
|
+
## Load More Paging [d2l-pager-load-more]
|
|
20
|
+
|
|
21
|
+
The `d2l-pager-load-more` component can be used in conjunction with pageable components such as `d2l-list` to provide load-more paging functionality. The pager will dispatch the `d2l-pager-load-more` when clicked, and then the consumer handles the event by loading more items, updating the pager state, and signalling completion by calling `complete()` on the event detail. Focus will be automatically moved on the first new item once complete.
|
|
22
|
+
|
|
23
|
+
See [Pageable Lists](../../components/list/#pageable-lists).
|
|
24
|
+
|
|
25
|
+
```html
|
|
26
|
+
<d2l-list>
|
|
27
|
+
<d2l-list-item ...></d2l-list-item>
|
|
28
|
+
<d2l-list-item ...></d2l-list-item>
|
|
29
|
+
<d2l-pager-load-more slot="pager" has-more page-size="10" item-count="85"></d2l-pager-load-more>
|
|
30
|
+
</d2l-list>
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
```javascript
|
|
34
|
+
pager.addEventListener('d2l-pager-load-more', e => {
|
|
35
|
+
// load more items
|
|
36
|
+
...
|
|
37
|
+
|
|
38
|
+
e.detail.complete();
|
|
39
|
+
});
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
<!-- docs: start hidden content -->
|
|
43
|
+
### Properties
|
|
44
|
+
| Property | Type | Description |
|
|
45
|
+
|---|---|---|
|
|
46
|
+
| `has-more` | Boolean, default: `false` | Whether there are more items that can be loaded. |
|
|
47
|
+
| `item-count` | Number | Total number of items. If not specified, neither it nor the count of items showing will be displayed. |
|
|
48
|
+
| `page-size` | Number, default: 50 | The number of additional items to load. |
|
|
49
|
+
|
|
50
|
+
### Events
|
|
51
|
+
|
|
52
|
+
| Event | Description |
|
|
53
|
+
|---|---|
|
|
54
|
+
| `d2l-pager-load-more` | Dispatched when the user clicks the Load More button. The `pageSize` can be accessed from the event `target`. The consumer must call the `complete()` method on the event detail to signal completion after the new items have been loaded. |
|
|
55
|
+
<!-- docs: end hidden content -->
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
|
|
7
|
+
<script type="module">
|
|
8
|
+
import '../../demo/demo-page.js';
|
|
9
|
+
import '../test/pageable-component.js';
|
|
10
|
+
import '../pager-load-more.js';
|
|
11
|
+
</script>
|
|
12
|
+
<style>
|
|
13
|
+
a {
|
|
14
|
+
outline: none;
|
|
15
|
+
text-decoration: none;
|
|
16
|
+
}
|
|
17
|
+
a:focus {
|
|
18
|
+
text-decoration: underline;
|
|
19
|
+
}
|
|
20
|
+
</style>
|
|
21
|
+
</head>
|
|
22
|
+
<body unresolved>
|
|
23
|
+
|
|
24
|
+
<d2l-demo-page page-title="Paging Components">
|
|
25
|
+
|
|
26
|
+
<h2>Load More Pager</h2>
|
|
27
|
+
|
|
28
|
+
<d2l-demo-snippet>
|
|
29
|
+
<template>
|
|
30
|
+
<d2l-test-pageable>
|
|
31
|
+
<ul>
|
|
32
|
+
<li><a href="https://some-website">item 1</a></li>
|
|
33
|
+
<li><a href="https://some-website">item 2</a></li>
|
|
34
|
+
</ul>
|
|
35
|
+
<d2l-pager-load-more id="pager1" slot="pager" has-more page-size="3" item-count="12"></d2l-pager-load-more>
|
|
36
|
+
</d2l-test-pageable>
|
|
37
|
+
<script>
|
|
38
|
+
document.querySelector('#pager1').addEventListener('d2l-pager-load-more', window.handleLoadMore);
|
|
39
|
+
</script>
|
|
40
|
+
</template>
|
|
41
|
+
</d2l-demo-snippet>
|
|
42
|
+
|
|
43
|
+
<h2>Load More Pager (no item count)</h2>
|
|
44
|
+
|
|
45
|
+
<d2l-demo-snippet>
|
|
46
|
+
<template>
|
|
47
|
+
<d2l-test-pageable>
|
|
48
|
+
<ul>
|
|
49
|
+
<li><a href="https://some-website">item 1</a></li>
|
|
50
|
+
<li><a href="https://some-website">item 2</a></li>
|
|
51
|
+
</ul>
|
|
52
|
+
<d2l-pager-load-more id="pager2" slot="pager" has-more page-size="3"></d2l-pager-load-more>
|
|
53
|
+
</d2l-test-pageable>
|
|
54
|
+
<script>
|
|
55
|
+
document.querySelector('#pager2').addEventListener('d2l-pager-load-more', window.handleLoadMore);
|
|
56
|
+
</script>
|
|
57
|
+
</template>
|
|
58
|
+
</d2l-demo-snippet>
|
|
59
|
+
|
|
60
|
+
</d2l-demo-page>
|
|
61
|
+
|
|
62
|
+
<script>
|
|
63
|
+
const ITEM_COUNT = 12;
|
|
64
|
+
window.handleLoadMore = e => {
|
|
65
|
+
// fake delay
|
|
66
|
+
setTimeout(() => {
|
|
67
|
+
const list = e.target.parentNode.querySelector('ul');
|
|
68
|
+
let remainingCount = ITEM_COUNT - list.children.length;
|
|
69
|
+
const numberToLoad = remainingCount < e.target.pageSize ? remainingCount : e.target.pageSize;
|
|
70
|
+
for (let i = 0; i < numberToLoad; i++) {
|
|
71
|
+
const newItem = list.lastElementChild.cloneNode(true);
|
|
72
|
+
newItem.querySelector('a').textContent = `item ${list.children.length + 1}`;
|
|
73
|
+
list.appendChild(newItem);
|
|
74
|
+
}
|
|
75
|
+
if (list.children.length === ITEM_COUNT) {
|
|
76
|
+
e.target.hasMore = false;
|
|
77
|
+
} else {
|
|
78
|
+
remainingCount = ITEM_COUNT - list.children.length;
|
|
79
|
+
if (remainingCount < e.target.pageSize) e.target.pageSize = remainingCount;
|
|
80
|
+
}
|
|
81
|
+
e.detail.complete();
|
|
82
|
+
}, 1000);
|
|
83
|
+
};
|
|
84
|
+
</script>
|
|
85
|
+
</body>
|
|
86
|
+
</html>
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
|
|
3
|
+
export const PageableMixin = superclass => class extends superclass {
|
|
4
|
+
|
|
5
|
+
constructor() {
|
|
6
|
+
super();
|
|
7
|
+
this._pageable = true;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
/* must be implemented by consumer */
|
|
11
|
+
_getItemByIndex(index) { } // eslint-disable-line no-unused-vars
|
|
12
|
+
|
|
13
|
+
/* must be implemented by consumer */
|
|
14
|
+
async _getItemsShowingCount() { }
|
|
15
|
+
|
|
16
|
+
/* must be implemented by consumer */
|
|
17
|
+
_getLastItemIndex() { }
|
|
18
|
+
|
|
19
|
+
async _handlePagerSlotChange(e) {
|
|
20
|
+
this._updatePagerCount(await this._getItemsShowingCount(), e.target);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
_renderPagerContainer() {
|
|
24
|
+
return html`<slot name="pager" @slotchange="${this._handlePagerSlotChange}"></slot>`;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
_updatePagerCount(count, slot) {
|
|
28
|
+
if (!slot) slot = this.shadowRoot.querySelector('slot[name="pager"]');
|
|
29
|
+
const elements = slot.assignedElements({ flatten: true });
|
|
30
|
+
if (elements.length > 0) {
|
|
31
|
+
elements[0].itemShowingCount = count;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
};
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
import '../colors/colors.js';
|
|
2
|
+
import '../loading-spinner/loading-spinner.js';
|
|
3
|
+
import { css, html, LitElement, nothing } from 'lit';
|
|
4
|
+
import { buttonStyles } from '../button/button-styles.js';
|
|
5
|
+
import { findComposedAncestor } from '../../helpers/dom.js';
|
|
6
|
+
import { FocusMixin } from '../../mixins/focus-mixin.js';
|
|
7
|
+
import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-mixin.js';
|
|
8
|
+
import { getFirstFocusableDescendant } from '../../helpers/focus.js';
|
|
9
|
+
import { getSeparator } from '@brightspace-ui/intl/lib/list.js';
|
|
10
|
+
import { labelStyles } from '../typography/styles.js';
|
|
11
|
+
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
|
12
|
+
import { offscreenStyles } from '../offscreen/offscreen.js';
|
|
13
|
+
|
|
14
|
+
const nativeFocus = document.createElement('div').focus;
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* A pager component for load-more paging.
|
|
18
|
+
* @fires d2l-pager-load-more - Dispatched when the user clicks the load-more button. Consumers must call the provided "complete" method once items have been loaded.
|
|
19
|
+
*/
|
|
20
|
+
class LoadMore extends FocusMixin(FocusVisiblePolyfillMixin(LocalizeCoreElement(LitElement))) {
|
|
21
|
+
|
|
22
|
+
static get properties() {
|
|
23
|
+
return {
|
|
24
|
+
/**
|
|
25
|
+
* Whether there are more items that can be loaded.
|
|
26
|
+
* @type {boolean}
|
|
27
|
+
*/
|
|
28
|
+
hasMore: { type: Boolean, attribute: 'has-more', reflect: true },
|
|
29
|
+
/**
|
|
30
|
+
* Total number of items. If not specified, neither it nor the count of items showing will be displayed.
|
|
31
|
+
* @type {number}
|
|
32
|
+
*/
|
|
33
|
+
itemCount: { type: Number, attribute: 'item-count', reflect: true },
|
|
34
|
+
/**
|
|
35
|
+
* The number of additional items to load.
|
|
36
|
+
* @type {number}
|
|
37
|
+
*/
|
|
38
|
+
pageSize: { type: Number, attribute: 'page-size', reflect: true },
|
|
39
|
+
/**
|
|
40
|
+
* The number of items showing. Assigned by PageableMixin.
|
|
41
|
+
* @ignore
|
|
42
|
+
*/
|
|
43
|
+
itemShowingCount: { attribute: false, type: Number },
|
|
44
|
+
_loading: { state: true }
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
static get styles() {
|
|
49
|
+
return [ buttonStyles, labelStyles, offscreenStyles, css`
|
|
50
|
+
:host {
|
|
51
|
+
display: block;
|
|
52
|
+
}
|
|
53
|
+
:host(:not([has-more])),
|
|
54
|
+
:host([hidden]) {
|
|
55
|
+
display: none;
|
|
56
|
+
}
|
|
57
|
+
button {
|
|
58
|
+
align-items: center;
|
|
59
|
+
background-color: var(--d2l-color-regolith);
|
|
60
|
+
border: 1px solid var(--d2l-color-sylvite);
|
|
61
|
+
display: flex;
|
|
62
|
+
gap: 0.5rem;
|
|
63
|
+
justify-content: center;
|
|
64
|
+
width: 100%;
|
|
65
|
+
}
|
|
66
|
+
button:hover {
|
|
67
|
+
background-color: var(--d2l-color-sylvite);
|
|
68
|
+
border-color: var(--d2l-color-gypsum);
|
|
69
|
+
}
|
|
70
|
+
.action {
|
|
71
|
+
color: var(--d2l-color-celestine);
|
|
72
|
+
}
|
|
73
|
+
.separator {
|
|
74
|
+
border-right: 1px solid var(--d2l-color-mica);
|
|
75
|
+
height: 0.8rem;
|
|
76
|
+
}
|
|
77
|
+
.info {
|
|
78
|
+
color: var(--d2l-color-galena);
|
|
79
|
+
font-weight: 400;
|
|
80
|
+
}
|
|
81
|
+
`];
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
constructor() {
|
|
85
|
+
super();
|
|
86
|
+
this.hasMore = false;
|
|
87
|
+
this.itemCount = -1;
|
|
88
|
+
/** @ignore */
|
|
89
|
+
this.itemShowingCount = 0;
|
|
90
|
+
this.pageSize = 50;
|
|
91
|
+
this._loading = false;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
static get focusElementSelector() {
|
|
95
|
+
return 'button';
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
render() {
|
|
99
|
+
if (!this.hasMore) return;
|
|
100
|
+
return html`<button ?disabled="${this._loading}" class="d2l-label-text" @click="${this._handleClick}" type="button">
|
|
101
|
+
${this._loading ? html`
|
|
102
|
+
<span class="d2l-offscreen" role="alert">${this.localize('components.pager-load-more.status-loading')}</span>
|
|
103
|
+
<d2l-loading-spinner size="24"></d2l-loading-spinner>
|
|
104
|
+
` : html`
|
|
105
|
+
<span class="action">${this.localize('components.pager-load-more.action', { count: this.pageSize })}</span>
|
|
106
|
+
${this.itemCount > -1 ? html`
|
|
107
|
+
<span class="d2l-offscreen">${getSeparator({ nonBreaking: true })}</span>
|
|
108
|
+
<span class="separator"></span>
|
|
109
|
+
<span class="info">${this.localize('components.pager-load-more.info', { showingCount: this.itemShowingCount, totalCount: this.itemCount })}</span>
|
|
110
|
+
` : nothing}
|
|
111
|
+
`}
|
|
112
|
+
</button>
|
|
113
|
+
`;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
async _handleClick() {
|
|
117
|
+
const pageable = findComposedAncestor(this, node => node._pageable);
|
|
118
|
+
if (!pageable) return;
|
|
119
|
+
const lastItemIndex = pageable._getLastItemIndex();
|
|
120
|
+
|
|
121
|
+
await new Promise(resolve => {
|
|
122
|
+
this._loading = true;
|
|
123
|
+
this.dispatchEvent(new CustomEvent('d2l-pager-load-more', {
|
|
124
|
+
bubbles: false,
|
|
125
|
+
composed: false,
|
|
126
|
+
detail: { complete: resolve }
|
|
127
|
+
}));
|
|
128
|
+
});
|
|
129
|
+
this._loading = false;
|
|
130
|
+
|
|
131
|
+
const item = pageable._getItemByIndex(lastItemIndex + 1);
|
|
132
|
+
|
|
133
|
+
if (!item) return;
|
|
134
|
+
if (item.updateComplete) await item.updateComplete;
|
|
135
|
+
|
|
136
|
+
if (item.focus !== nativeFocus) {
|
|
137
|
+
requestAnimationFrame(() => item.focus());
|
|
138
|
+
} else {
|
|
139
|
+
const firstFocusable = getFirstFocusableDescendant(item);
|
|
140
|
+
if (firstFocusable) firstFocusable.focus();
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
customElements.define('d2l-pager-load-more', LoadMore);
|
|
@@ -2,6 +2,7 @@ import '../button/button-subtle.js';
|
|
|
2
2
|
import { css, html, LitElement } from 'lit';
|
|
3
3
|
import { announce } from '../../helpers/announce.js';
|
|
4
4
|
import { ArrowKeysMixin } from '../../mixins/arrow-keys-mixin.js';
|
|
5
|
+
import { BACKDROP_ROLE } from '../backdrop/backdrop.js';
|
|
5
6
|
import { classMap } from 'lit/directives/class-map.js';
|
|
6
7
|
import { getOffsetParent } from '../../helpers/dom.js';
|
|
7
8
|
import { InteractiveMixin } from '../../mixins/interactive-mixin.js';
|
|
@@ -312,7 +313,8 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
|
|
|
312
313
|
await node.updateComplete;
|
|
313
314
|
|
|
314
315
|
const role = node.getAttribute('role');
|
|
315
|
-
|
|
316
|
+
const backdropRole = node.getAttribute(BACKDROP_ROLE);
|
|
317
|
+
if (role !== 'listitem' && backdropRole !== 'listitem') return false;
|
|
316
318
|
|
|
317
319
|
if (this.clearable) node.setAttribute('clearable', 'clearable');
|
|
318
320
|
node.removeAttribute('data-is-chomped');
|
package/custom-elements.json
CHANGED
|
@@ -6533,6 +6533,26 @@
|
|
|
6533
6533
|
}
|
|
6534
6534
|
]
|
|
6535
6535
|
},
|
|
6536
|
+
{
|
|
6537
|
+
"name": "d2l-demo-list",
|
|
6538
|
+
"path": "./components/list/demo/demo-list.js",
|
|
6539
|
+
"attributes": [
|
|
6540
|
+
{
|
|
6541
|
+
"name": "grid",
|
|
6542
|
+
"type": "boolean"
|
|
6543
|
+
}
|
|
6544
|
+
],
|
|
6545
|
+
"properties": [
|
|
6546
|
+
{
|
|
6547
|
+
"name": "grid",
|
|
6548
|
+
"attribute": "grid",
|
|
6549
|
+
"type": "boolean"
|
|
6550
|
+
},
|
|
6551
|
+
{
|
|
6552
|
+
"name": "items"
|
|
6553
|
+
}
|
|
6554
|
+
]
|
|
6555
|
+
},
|
|
6536
6556
|
{
|
|
6537
6557
|
"name": "d2l-demo-list-drag-and-drop-position",
|
|
6538
6558
|
"path": "./components/list/demo/list-drag-and-drop-position.js",
|
|
@@ -7633,6 +7653,10 @@
|
|
|
7633
7653
|
{
|
|
7634
7654
|
"name": "header",
|
|
7635
7655
|
"description": "Slot for `d2l-list-header` to be rendered above the list"
|
|
7656
|
+
},
|
|
7657
|
+
{
|
|
7658
|
+
"name": "pager",
|
|
7659
|
+
"description": "Slot for `d2l-pager-load-more` to be rendered below the list"
|
|
7636
7660
|
}
|
|
7637
7661
|
]
|
|
7638
7662
|
},
|
|
@@ -8637,6 +8661,64 @@
|
|
|
8637
8661
|
}
|
|
8638
8662
|
]
|
|
8639
8663
|
},
|
|
8664
|
+
{
|
|
8665
|
+
"name": "d2l-pager-load-more",
|
|
8666
|
+
"path": "./components/paging/pager-load-more.js",
|
|
8667
|
+
"description": "A pager component for load-more paging.",
|
|
8668
|
+
"attributes": [
|
|
8669
|
+
{
|
|
8670
|
+
"name": "has-more",
|
|
8671
|
+
"description": "Whether there are more items that can be loaded.",
|
|
8672
|
+
"type": "boolean",
|
|
8673
|
+
"default": "false"
|
|
8674
|
+
},
|
|
8675
|
+
{
|
|
8676
|
+
"name": "item-count",
|
|
8677
|
+
"description": "Total number of items. If not specified, neither it nor the count of items showing will be displayed.",
|
|
8678
|
+
"type": "number",
|
|
8679
|
+
"default": "-1"
|
|
8680
|
+
},
|
|
8681
|
+
{
|
|
8682
|
+
"name": "page-size",
|
|
8683
|
+
"description": "The number of additional items to load.",
|
|
8684
|
+
"type": "number",
|
|
8685
|
+
"default": "50"
|
|
8686
|
+
}
|
|
8687
|
+
],
|
|
8688
|
+
"properties": [
|
|
8689
|
+
{
|
|
8690
|
+
"name": "hasMore",
|
|
8691
|
+
"attribute": "has-more",
|
|
8692
|
+
"description": "Whether there are more items that can be loaded.",
|
|
8693
|
+
"type": "boolean",
|
|
8694
|
+
"default": "false"
|
|
8695
|
+
},
|
|
8696
|
+
{
|
|
8697
|
+
"name": "itemCount",
|
|
8698
|
+
"attribute": "item-count",
|
|
8699
|
+
"description": "Total number of items. If not specified, neither it nor the count of items showing will be displayed.",
|
|
8700
|
+
"type": "number",
|
|
8701
|
+
"default": "-1"
|
|
8702
|
+
},
|
|
8703
|
+
{
|
|
8704
|
+
"name": "pageSize",
|
|
8705
|
+
"attribute": "page-size",
|
|
8706
|
+
"description": "The number of additional items to load.",
|
|
8707
|
+
"type": "number",
|
|
8708
|
+
"default": "50"
|
|
8709
|
+
}
|
|
8710
|
+
],
|
|
8711
|
+
"events": [
|
|
8712
|
+
{
|
|
8713
|
+
"name": "d2l-pager-load-more",
|
|
8714
|
+
"description": "Dispatched when the user clicks the load-more button. Consumers must call the provided \"complete\" method once items have been loaded."
|
|
8715
|
+
}
|
|
8716
|
+
]
|
|
8717
|
+
},
|
|
8718
|
+
{
|
|
8719
|
+
"name": "d2l-test-pageable",
|
|
8720
|
+
"path": "./components/paging/test/pageable-component.js"
|
|
8721
|
+
},
|
|
8640
8722
|
{
|
|
8641
8723
|
"name": "d2l-test-scroll-wrapper",
|
|
8642
8724
|
"path": "./components/scroll-wrapper/demo/scroll-wrapper-test.js",
|
package/lang/ar.js
CHANGED
|
@@ -91,6 +91,9 @@ export default {
|
|
|
91
91
|
"components.more-less.less": "أقل",
|
|
92
92
|
"components.more-less.more": "المزيد",
|
|
93
93
|
"components.overflow-group.moreActions": "مزيد من الإجراءات",
|
|
94
|
+
"components.pager-load-more.action": "Load {count} More",
|
|
95
|
+
"components.pager-load-more.info": "{showingCount} of {totalCount} items",
|
|
96
|
+
"components.pager-load-more.status-loading": "Loading more items",
|
|
94
97
|
"components.selection.action-hint": "حدد مادة لتنفيذ هذا الإجراء.",
|
|
95
98
|
"components.selection.select-all": "تحديد الكل",
|
|
96
99
|
"components.selection.select-all-items": "تحديد كل المواد الـ {count}.",
|
package/lang/cy.js
CHANGED
|
@@ -28,7 +28,7 @@ export default {
|
|
|
28
28
|
"components.form-element.defaultError": "Mae {label} yn annilys.",
|
|
29
29
|
"components.form-element.defaultFieldLabel": "Maes",
|
|
30
30
|
"components.form-element.input.email.typeMismatch": "Nid yw'r e-bost yn ddilys",
|
|
31
|
-
"components.form-element.input.number.rangeError": "{minExclusive, select, true {{maxExclusive, select, true {
|
|
31
|
+
"components.form-element.input.number.rangeError": "{minExclusive, select, true {{maxExclusive, select, true {Rhaid i'r nifer fod yn fwy na {min} a llai na {max}.} other {Rhaid i'r nifer fod yn fwy na {min} a llai na neu'n hafal i {max}.}}} other {{maxExclusive, select, true {Rhaid i'r nifer fod yn fwy na neu'n hafal i {min} a llai na {max}.} other {Rhaid i'r nifer fod yn fwy na neu'n hafal i {min} a llai na neu'n hafal i {max}.}}}}",
|
|
32
32
|
"components.form-element.input.number.rangeOverflow": "{maxExclusive, select, true {Rhaid i'r nifer fod yn llai na {max}.} other {Rhaid i'r nifer fod yn llai na neu’n hafal i {max}.}}",
|
|
33
33
|
"components.form-element.input.number.rangeUnderflow": "{minExclusive, select, true {Rhaid i'r nifer fod yn fwy na {min}.} other {Rhaid i'r nifer fod yn fwy na neu'n hafal i {min}.}}",
|
|
34
34
|
"components.form-element.input.text.tooShort": "Rhaid i {label} fod o leiaf {minlength} nod",
|
|
@@ -91,6 +91,9 @@ export default {
|
|
|
91
91
|
"components.more-less.less": "llai",
|
|
92
92
|
"components.more-less.more": "mwy",
|
|
93
93
|
"components.overflow-group.moreActions": "Rhagor o Gamau Gweithredu",
|
|
94
|
+
"components.pager-load-more.action": "Load {count} More",
|
|
95
|
+
"components.pager-load-more.info": "{showingCount} of {totalCount} items",
|
|
96
|
+
"components.pager-load-more.status-loading": "Loading more items",
|
|
94
97
|
"components.selection.action-hint": "Dewiswch eitem i gyflawni'r weithred hon.",
|
|
95
98
|
"components.selection.select-all": "Dewis y Cyfan",
|
|
96
99
|
"components.selection.select-all-items": "Dewis Pob {count} Eitem",
|
package/lang/da.js
CHANGED
|
@@ -91,6 +91,9 @@ export default {
|
|
|
91
91
|
"components.more-less.less": "færre",
|
|
92
92
|
"components.more-less.more": "flere",
|
|
93
93
|
"components.overflow-group.moreActions": "Flere handlinger",
|
|
94
|
+
"components.pager-load-more.action": "Load {count} More",
|
|
95
|
+
"components.pager-load-more.info": "{showingCount} of {totalCount} items",
|
|
96
|
+
"components.pager-load-more.status-loading": "Loading more items",
|
|
94
97
|
"components.selection.action-hint": "Vælg et element for at udføre denne handling.",
|
|
95
98
|
"components.selection.select-all": "Vælg alle",
|
|
96
99
|
"components.selection.select-all-items": "Vælg alle {count} elementer",
|
package/lang/de.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
export default {
|
|
4
4
|
"components.alert.close": "Benachrichtigung schließen",
|
|
5
|
-
"components.breadcrumbs.breadcrumb": "
|
|
5
|
+
"components.breadcrumbs.breadcrumb": "Brotkrümelnavigation",
|
|
6
6
|
"components.calendar.notSelected": "Nicht ausgewählt.",
|
|
7
7
|
"components.calendar.selected": "Ausgewählt.",
|
|
8
8
|
"components.calendar.show": "{month} anzeigen",
|
|
@@ -91,6 +91,9 @@ export default {
|
|
|
91
91
|
"components.more-less.less": "Weniger",
|
|
92
92
|
"components.more-less.more": "mehr",
|
|
93
93
|
"components.overflow-group.moreActions": "Weitere Aktionen",
|
|
94
|
+
"components.pager-load-more.action": "Load {count} More",
|
|
95
|
+
"components.pager-load-more.info": "{showingCount} of {totalCount} items",
|
|
96
|
+
"components.pager-load-more.status-loading": "Loading more items",
|
|
94
97
|
"components.selection.action-hint": "Wählen Sie ein Element aus, um diese Aktion auszuführen.",
|
|
95
98
|
"components.selection.select-all": "Alle auswählen",
|
|
96
99
|
"components.selection.select-all-items": "Alle {count} Elemente auswählen",
|
package/lang/en.js
CHANGED
|
@@ -91,6 +91,9 @@ export default {
|
|
|
91
91
|
"components.more-less.less": "less",
|
|
92
92
|
"components.more-less.more": "more",
|
|
93
93
|
"components.overflow-group.moreActions": "More Actions",
|
|
94
|
+
"components.pager-load-more.action": "Load {count} More",
|
|
95
|
+
"components.pager-load-more.info": "{showingCount} of {totalCount} items",
|
|
96
|
+
"components.pager-load-more.status-loading": "Loading more items",
|
|
94
97
|
"components.selection.action-hint": "Select an item to perform this action.",
|
|
95
98
|
"components.selection.select-all": "Select All",
|
|
96
99
|
"components.selection.select-all-items": "Select All {count} Items",
|
package/lang/es-es.js
CHANGED
|
@@ -91,6 +91,9 @@ export default {
|
|
|
91
91
|
"components.more-less.less": "menos",
|
|
92
92
|
"components.more-less.more": "más",
|
|
93
93
|
"components.overflow-group.moreActions": "Más acciones",
|
|
94
|
+
"components.pager-load-more.action": "Load {count} More",
|
|
95
|
+
"components.pager-load-more.info": "{showingCount} of {totalCount} items",
|
|
96
|
+
"components.pager-load-more.status-loading": "Loading more items",
|
|
94
97
|
"components.selection.action-hint": "Seleccione un elemento para realizar esta acción.",
|
|
95
98
|
"components.selection.select-all": "Seleccionar todo",
|
|
96
99
|
"components.selection.select-all-items": "Seleccione los {count} elementos",
|
package/lang/es.js
CHANGED
|
@@ -91,6 +91,9 @@ export default {
|
|
|
91
91
|
"components.more-less.less": "menos",
|
|
92
92
|
"components.more-less.more": "más",
|
|
93
93
|
"components.overflow-group.moreActions": "Más acciones",
|
|
94
|
+
"components.pager-load-more.action": "Load {count} More",
|
|
95
|
+
"components.pager-load-more.info": "{showingCount} of {totalCount} items",
|
|
96
|
+
"components.pager-load-more.status-loading": "Loading more items",
|
|
94
97
|
"components.selection.action-hint": "Seleccione un elemento para realizar esta acción.",
|
|
95
98
|
"components.selection.select-all": "Seleccionar todo",
|
|
96
99
|
"components.selection.select-all-items": "Seleccione todos los {count} elementos",
|
package/lang/fr-fr.js
CHANGED
|
@@ -91,6 +91,9 @@ export default {
|
|
|
91
91
|
"components.more-less.less": "moins",
|
|
92
92
|
"components.more-less.more": "plus",
|
|
93
93
|
"components.overflow-group.moreActions": "Plus d'actions",
|
|
94
|
+
"components.pager-load-more.action": "Load {count} More",
|
|
95
|
+
"components.pager-load-more.info": "{showingCount} of {totalCount} items",
|
|
96
|
+
"components.pager-load-more.status-loading": "Loading more items",
|
|
94
97
|
"components.selection.action-hint": "Sélectionnez un élément pour exécuter cette action.",
|
|
95
98
|
"components.selection.select-all": "Tout sélectionner",
|
|
96
99
|
"components.selection.select-all-items": "Sélectionner tous les {count} éléments",
|
package/lang/fr.js
CHANGED
|
@@ -91,6 +91,9 @@ export default {
|
|
|
91
91
|
"components.more-less.less": "moins",
|
|
92
92
|
"components.more-less.more": "plus",
|
|
93
93
|
"components.overflow-group.moreActions": "Plus d'actions",
|
|
94
|
+
"components.pager-load-more.action": "Load {count} More",
|
|
95
|
+
"components.pager-load-more.info": "{showingCount} of {totalCount} items",
|
|
96
|
+
"components.pager-load-more.status-loading": "Loading more items",
|
|
94
97
|
"components.selection.action-hint": "Sélectionner un élément pour exécuter cette action.",
|
|
95
98
|
"components.selection.select-all": "Tout sélectionner",
|
|
96
99
|
"components.selection.select-all-items": "Sélectionner tous les {count} éléments",
|
package/lang/hi.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
export default {
|
|
4
4
|
"components.alert.close": "अलर्ट बंद करें",
|
|
5
|
-
"components.breadcrumbs.breadcrumb": "
|
|
5
|
+
"components.breadcrumbs.breadcrumb": "ब्रेडक्रंब",
|
|
6
6
|
"components.calendar.notSelected": "चयनित नहीं।",
|
|
7
7
|
"components.calendar.selected": "चयनित।",
|
|
8
8
|
"components.calendar.show": "{month} दिखाएँ",
|
|
@@ -91,6 +91,9 @@ export default {
|
|
|
91
91
|
"components.more-less.less": "कम",
|
|
92
92
|
"components.more-less.more": "अधिक",
|
|
93
93
|
"components.overflow-group.moreActions": "अधिक क्रियाएँ",
|
|
94
|
+
"components.pager-load-more.action": "Load {count} More",
|
|
95
|
+
"components.pager-load-more.info": "{showingCount} of {totalCount} items",
|
|
96
|
+
"components.pager-load-more.status-loading": "Loading more items",
|
|
94
97
|
"components.selection.action-hint": "यह कार्रवाई निष्पादित करने के लिए कोई आइटम का चयन करें।",
|
|
95
98
|
"components.selection.select-all": "सभी का चयन करें",
|
|
96
99
|
"components.selection.select-all-items": "सभी {count} आइटम चुनें।",
|
package/lang/ja.js
CHANGED
|
@@ -91,6 +91,9 @@ export default {
|
|
|
91
91
|
"components.more-less.less": "減らす",
|
|
92
92
|
"components.more-less.more": "増やす",
|
|
93
93
|
"components.overflow-group.moreActions": "その他のアクション",
|
|
94
|
+
"components.pager-load-more.action": "Load {count} More",
|
|
95
|
+
"components.pager-load-more.info": "{showingCount} of {totalCount} items",
|
|
96
|
+
"components.pager-load-more.status-loading": "Loading more items",
|
|
94
97
|
"components.selection.action-hint": "このアクションを実行するための項目を選択します。",
|
|
95
98
|
"components.selection.select-all": "すべて選択",
|
|
96
99
|
"components.selection.select-all-items": "{count} 個の項目をすべて選択",
|
package/lang/ko.js
CHANGED
|
@@ -91,6 +91,9 @@ export default {
|
|
|
91
91
|
"components.more-less.less": "축소",
|
|
92
92
|
"components.more-less.more": "더 보기",
|
|
93
93
|
"components.overflow-group.moreActions": "추가 작업",
|
|
94
|
+
"components.pager-load-more.action": "Load {count} More",
|
|
95
|
+
"components.pager-load-more.info": "{showingCount} of {totalCount} items",
|
|
96
|
+
"components.pager-load-more.status-loading": "Loading more items",
|
|
94
97
|
"components.selection.action-hint": "이 작업을 수행할 항목을 선택하십시오.",
|
|
95
98
|
"components.selection.select-all": "모두 선택",
|
|
96
99
|
"components.selection.select-all-items": "{count}개 항목을 모두 선택하십시오.",
|
package/lang/nl.js
CHANGED
|
@@ -91,6 +91,9 @@ export default {
|
|
|
91
91
|
"components.more-less.less": "minder",
|
|
92
92
|
"components.more-less.more": "meer",
|
|
93
93
|
"components.overflow-group.moreActions": "Meer acties",
|
|
94
|
+
"components.pager-load-more.action": "Load {count} More",
|
|
95
|
+
"components.pager-load-more.info": "{showingCount} of {totalCount} items",
|
|
96
|
+
"components.pager-load-more.status-loading": "Loading more items",
|
|
94
97
|
"components.selection.action-hint": "Selecteer een item om deze actie uit te voeren.",
|
|
95
98
|
"components.selection.select-all": "Alles selecteren",
|
|
96
99
|
"components.selection.select-all-items": "Alle {count} records selecteren",
|
|
@@ -108,7 +111,7 @@ export default {
|
|
|
108
111
|
"components.tag-list.show-more-description": "Selecteer deze optie om verborgen items op labellijsten weer te geven",
|
|
109
112
|
"components.tag-list-item.tooltip-arrow-keys": "Pijltoetsen",
|
|
110
113
|
"components.tag-list-item.tooltip-arrow-keys-desc": "Schakelen tussen tags",
|
|
111
|
-
"components.tag-list-item.tooltip-delete-key": "Backspace/
|
|
114
|
+
"components.tag-list-item.tooltip-delete-key": "Backspace/Verwijderen",
|
|
112
115
|
"components.tag-list-item.tooltip-delete-key-desc": "Verwijder de gerichte tag",
|
|
113
116
|
"components.tag-list-item.tooltip-title": "Bedieningselementen op het toetsenbord",
|
|
114
117
|
"templates.primary-secondary.adjustableSplitView": "Instelbare gesplitste weergave",
|
package/lang/pt.js
CHANGED
|
@@ -91,6 +91,9 @@ export default {
|
|
|
91
91
|
"components.more-less.less": "menos",
|
|
92
92
|
"components.more-less.more": "mais",
|
|
93
93
|
"components.overflow-group.moreActions": "Mais ações",
|
|
94
|
+
"components.pager-load-more.action": "Load {count} More",
|
|
95
|
+
"components.pager-load-more.info": "{showingCount} of {totalCount} items",
|
|
96
|
+
"components.pager-load-more.status-loading": "Loading more items",
|
|
94
97
|
"components.selection.action-hint": "Selecione um item para realizar esta ação.",
|
|
95
98
|
"components.selection.select-all": "Selecionar tudo",
|
|
96
99
|
"components.selection.select-all-items": "Selecione todos os {count} itens",
|
|
@@ -108,7 +111,7 @@ export default {
|
|
|
108
111
|
"components.tag-list.show-more-description": "Selecione para mostrar itens ocultos da lista de marcas",
|
|
109
112
|
"components.tag-list-item.tooltip-arrow-keys": "Teclas de seta",
|
|
110
113
|
"components.tag-list-item.tooltip-arrow-keys-desc": "Mover entre marcas",
|
|
111
|
-
"components.tag-list-item.tooltip-delete-key": "
|
|
114
|
+
"components.tag-list-item.tooltip-delete-key": "Retroceder/Excluir",
|
|
112
115
|
"components.tag-list-item.tooltip-delete-key-desc": "Excluir a marca de foco",
|
|
113
116
|
"components.tag-list-item.tooltip-title": "Controles do teclado",
|
|
114
117
|
"templates.primary-secondary.adjustableSplitView": "Exibição dividida ajustável",
|
package/lang/sv.js
CHANGED
|
@@ -91,6 +91,9 @@ export default {
|
|
|
91
91
|
"components.more-less.less": "mindre",
|
|
92
92
|
"components.more-less.more": "mer",
|
|
93
93
|
"components.overflow-group.moreActions": "Fler åtgärder",
|
|
94
|
+
"components.pager-load-more.action": "Load {count} More",
|
|
95
|
+
"components.pager-load-more.info": "{showingCount} of {totalCount} items",
|
|
96
|
+
"components.pager-load-more.status-loading": "Loading more items",
|
|
94
97
|
"components.selection.action-hint": "Välj ett objekt för att utföra åtgärden.",
|
|
95
98
|
"components.selection.select-all": "Välj alla",
|
|
96
99
|
"components.selection.select-all-items": "Välj alla {count} objekt",
|