@brightspace-ui/core 3.268.0 → 3.268.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/collapsible-panel/README.md +11 -15
- package/components/demo/code-view.js +6 -10
- package/components/demo/demo-page-settings.js +25 -29
- package/components/demo/demo-page.js +32 -36
- package/components/demo/demo-snippet.js +95 -99
- package/components/description-list/README.md +25 -33
- package/components/description-list/demo/description-list-test.js +36 -39
- package/components/dialog/README.md +3 -5
- package/components/form/docs/form-element-mixin.md +11 -14
- package/components/form/docs/form-element-nesting.md +4 -6
- package/components/form/docs/form-element-wrapping.md +1 -3
- package/components/hierarchical-view/README.md +8 -11
- package/components/inputs/docs/input-select-styles.md +4 -9
- package/components/inputs/docs/styling-native-inputs.md +11 -25
- package/components/link/README.md +1 -1
- package/components/list/README.md +8 -16
- package/components/menu/menu-item-checkbox.js +1 -3
- package/components/menu/menu-item-link.js +27 -33
- package/components/menu/menu-item-mixin.js +52 -54
- package/components/menu/menu-item-radio.js +1 -3
- package/components/menu/menu-item-return.js +18 -22
- package/components/menu/menu-item-selectable-mixin.js +12 -14
- package/components/menu/menu-item-separator.js +9 -11
- package/components/menu/menu-item.js +11 -15
- package/components/menu/menu.js +50 -54
- package/components/meter/meter-circle.js +3 -4
- package/components/meter/meter-linear.js +86 -88
- package/components/meter/meter-mixin.js +34 -36
- package/components/meter/meter-radial.js +3 -4
- package/components/more-less/more-less.js +57 -61
- package/components/object-property-list/object-property-list-item-link.js +18 -19
- package/components/object-property-list/object-property-list-item-tooltip-help.js +8 -9
- package/components/object-property-list/object-property-list-item.js +52 -55
- package/components/object-property-list/object-property-list.js +24 -27
- package/components/offscreen/README.md +1 -1
- package/components/offscreen/offscreen.js +13 -15
- package/components/offscreen/screen-reader-pause.js +1 -3
- package/components/overflow-group/README.md +1 -3
- package/components/overflow-group/overflow-group-mixin.js +55 -59
- package/components/overflow-group/overflow-group.js +38 -42
- package/components/page/page-header-button.js +41 -45
- package/components/page/page-header-custom.js +108 -112
- package/components/page/page-header-immersive.js +65 -69
- package/components/page/page-header-separator.js +12 -14
- package/components/paging/pageable-mixin.js +3 -5
- package/components/paging/pageable-subscriber-mixin.js +8 -10
- package/components/paging/pager-load-more.js +47 -51
- package/components/popover/popover-mixin.js +186 -190
- package/components/progress/progress.js +160 -164
- package/components/scroll-wrapper/scroll-wrapper.js +109 -113
- package/components/selection/README.md +5 -7
- package/components/selection/demo/demo-selection.js +5 -7
- package/components/selection/selection-action-dropdown.js +9 -13
- package/components/selection/selection-action-menu-item.js +11 -15
- package/components/selection/selection-action.js +20 -24
- package/components/selection/selection-controls.js +92 -96
- package/components/selection/selection-input.js +40 -44
- package/components/selection/selection-mixin.js +11 -13
- package/components/selection/selection-observer-mixin.js +14 -16
- package/components/selection/selection-select-all-pages.js +8 -10
- package/components/selection/selection-select-all.js +16 -20
- package/components/selection/selection-summary.js +18 -22
- package/components/skeleton/README.md +2 -6
- package/components/skeleton/skeleton-group-mixin.js +3 -5
- package/components/skeleton/skeleton-mixin.js +7 -9
- package/components/skip-nav/skip-nav-custom.js +33 -37
- package/components/sorting/sort.js +11 -13
- package/components/status-indicator/status-indicator.js +75 -79
- package/components/switch/switch-mixin.js +145 -149
- package/components/switch/switch-visibility.js +11 -15
- package/components/switch/switch.js +5 -7
- package/components/table/README.md +19 -37
- package/components/table/demo/table-test.js +27 -31
- package/components/table/table-col-sort-button-item.js +1 -3
- package/components/table/table-col-sort-button.js +105 -109
- package/components/table/table-controls.js +18 -21
- package/components/table/table-wrapper.js +124 -128
- package/components/tabs/tab-internal.js +72 -76
- package/components/tabs/tab-mixin.js +22 -24
- package/components/tabs/tab-panel-mixin.js +47 -51
- package/components/tabs/tab.js +7 -9
- package/components/tabs/tabs.js +171 -175
- package/components/tag-list/tag-list-item-mixin.js +103 -107
- package/components/tag-list/tag-list-item.js +13 -15
- package/components/tag-list/tag-list.js +54 -58
- package/components/tooltip/tooltip-help.js +67 -71
- package/components/tooltip/tooltip.js +103 -107
- package/components/typography/README.md +5 -7
- package/components/validation/validation-custom-mixin.js +4 -6
- package/components/view-switcher/view-switcher-button.js +42 -46
- package/components/view-switcher/view-switcher.js +26 -29
- package/controllers/subscriber/README.md +7 -11
- package/custom-elements.json +1026 -3850
- package/mixins/arrow-keys/arrow-keys-mixin.js +10 -12
- package/mixins/async-container/async-container-mixin.js +10 -12
- package/mixins/collection/collection-mixin.js +7 -9
- package/mixins/interactive/interactive-mixin.js +10 -14
- package/mixins/labelled/README.md +3 -5
- package/mixins/labelled/labelled-mixin.js +26 -30
- package/mixins/provider/README.md +5 -7
- package/mixins/rtl/README.md +5 -7
- package/mixins/rtl/rtl-mixin.js +7 -9
- package/mixins/theme/theme-mixin.js +6 -8
- package/mixins/visible-on-ancestor/README.md +1 -3
- package/mixins/visible-on-ancestor/visible-on-ancestor-mixin.js +11 -13
- package/package.json +1 -1
- package/templates/primary-secondary/primary-secondary.js +373 -377
|
@@ -11,18 +11,16 @@ const keyCodes = Object.freeze({
|
|
|
11
11
|
|
|
12
12
|
export const ArrowKeysMixin = superclass => class extends superclass {
|
|
13
13
|
|
|
14
|
-
static
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
};
|
|
25
|
-
}
|
|
14
|
+
static properties = {
|
|
15
|
+
/**
|
|
16
|
+
* @ignore
|
|
17
|
+
*/
|
|
18
|
+
arrowKeysDirection: { type: String, attribute: 'arrow-keys-direction' },
|
|
19
|
+
/**
|
|
20
|
+
* @ignore
|
|
21
|
+
*/
|
|
22
|
+
arrowKeysNoWrap: { type: Boolean, attribute: 'arrow-keys-no-wrap' }
|
|
23
|
+
};
|
|
26
24
|
|
|
27
25
|
constructor() {
|
|
28
26
|
super();
|
|
@@ -7,18 +7,16 @@ export const asyncStates = {
|
|
|
7
7
|
|
|
8
8
|
export const AsyncContainerMixin = superclass => class extends superclass {
|
|
9
9
|
|
|
10
|
-
static
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
};
|
|
21
|
-
}
|
|
10
|
+
static properties = {
|
|
11
|
+
/**
|
|
12
|
+
* @ignore
|
|
13
|
+
*/
|
|
14
|
+
asyncPendingDelay: { type: Number, attribute: 'async-pending-delay' },
|
|
15
|
+
/**
|
|
16
|
+
* @ignore
|
|
17
|
+
*/
|
|
18
|
+
asyncState: { type: String }
|
|
19
|
+
};
|
|
22
20
|
|
|
23
21
|
constructor() {
|
|
24
22
|
super();
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
export const CollectionMixin = superclass => class extends superclass {
|
|
2
2
|
|
|
3
|
-
static
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
};
|
|
11
|
-
}
|
|
3
|
+
static properties = {
|
|
4
|
+
/**
|
|
5
|
+
* Total number of items. If not specified, features like select-all-pages will be disabled.
|
|
6
|
+
* @type {number}
|
|
7
|
+
*/
|
|
8
|
+
itemCount: { type: Number, attribute: 'item-count', reflect: true },
|
|
9
|
+
};
|
|
12
10
|
|
|
13
11
|
constructor() {
|
|
14
12
|
super();
|
|
@@ -16,20 +16,16 @@ export function isInteractiveDescendant(node) {
|
|
|
16
16
|
|
|
17
17
|
export const InteractiveMixin = superclass => class extends LocalizeCoreElement(superclass) {
|
|
18
18
|
|
|
19
|
-
static
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
() => '.interactive-focusing-toggle',
|
|
30
|
-
{ extraStyles: css`border-radius: 6px;` }
|
|
31
|
-
)];
|
|
32
|
-
}
|
|
19
|
+
static properties = {
|
|
20
|
+
_focusingToggle: { state: true },
|
|
21
|
+
_hasInteractiveAncestor: { state: true },
|
|
22
|
+
_interactive: { state: true }
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
static styles = [offscreenStyles, getFocusRingStyles(
|
|
26
|
+
() => '.interactive-focusing-toggle',
|
|
27
|
+
{ extraStyles: css`border-radius: 6px;` }
|
|
28
|
+
)];
|
|
33
29
|
|
|
34
30
|
constructor() {
|
|
35
31
|
super();
|
|
@@ -26,11 +26,9 @@ Optionally, to enable custom elements to act as labels, extend the `LabelMixin`
|
|
|
26
26
|
import { LabelMixin } from '@brightspace-ui/core/mixins/labelled/labelled-mixin.js';
|
|
27
27
|
|
|
28
28
|
class CustomLabel extends LabelMixin(LitElement) {
|
|
29
|
-
static
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
};
|
|
33
|
-
}
|
|
29
|
+
static properties = {
|
|
30
|
+
text: { type: String }
|
|
31
|
+
};
|
|
34
32
|
render() {
|
|
35
33
|
return html`
|
|
36
34
|
<span>${this.text}</span>
|
|
@@ -48,11 +48,9 @@ const waitForElement = async(contextElement, selector, timeout) => {
|
|
|
48
48
|
|
|
49
49
|
export const LabelMixin = superclass => class extends superclass {
|
|
50
50
|
|
|
51
|
-
static
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
};
|
|
55
|
-
}
|
|
51
|
+
static properties = {
|
|
52
|
+
_label: { type: String, reflect: true }
|
|
53
|
+
};
|
|
56
54
|
|
|
57
55
|
connectedCallback() {
|
|
58
56
|
super.connectedCallback();
|
|
@@ -77,33 +75,31 @@ export const LabelMixin = superclass => class extends superclass {
|
|
|
77
75
|
|
|
78
76
|
export const LabelledMixin = superclass => class extends PropertyRequiredMixin(superclass) {
|
|
79
77
|
|
|
80
|
-
static
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
return elem._labelElem !== null;
|
|
102
|
-
}
|
|
78
|
+
static properties = {
|
|
79
|
+
/**
|
|
80
|
+
* ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.
|
|
81
|
+
* @type {string}
|
|
82
|
+
*/
|
|
83
|
+
labelledBy: { type: String, reflect: true, attribute: 'labelled-by' },
|
|
84
|
+
/**
|
|
85
|
+
* ACCESSIBILITY: REQUIRED: Explicitly defined label for the element
|
|
86
|
+
* @type {string}
|
|
87
|
+
*/
|
|
88
|
+
label: {
|
|
89
|
+
type: String,
|
|
90
|
+
required: {
|
|
91
|
+
message: (_value, elem, defaultMessage) => {
|
|
92
|
+
if (!elem.labelledBy) return defaultMessage;
|
|
93
|
+
return `LabelledMixin: "${elem.tagName.toLowerCase()}" is labelled-by="${elem.labelledBy}", but its label is empty`;
|
|
94
|
+
},
|
|
95
|
+
validator: (_value, elem, hasValue) => {
|
|
96
|
+
if (!elem.labelRequired || hasValue) return true;
|
|
97
|
+
if (!elem.labelledBy) return false;
|
|
98
|
+
return elem._labelElem !== null;
|
|
103
99
|
}
|
|
104
100
|
}
|
|
105
|
-
}
|
|
106
|
-
}
|
|
101
|
+
}
|
|
102
|
+
};
|
|
107
103
|
|
|
108
104
|
constructor() {
|
|
109
105
|
super();
|
|
@@ -30,13 +30,11 @@ NB: due to its reliance on DOM events, `requestInstance()` needs to be called af
|
|
|
30
30
|
import { RequesterMixin } from '@brightspace-ui/core/mixins/provider/provider-mixin.js'
|
|
31
31
|
|
|
32
32
|
class InterestingFactUI extends RequesterMixin(LitElement) {
|
|
33
|
-
static
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
};
|
|
39
|
-
}
|
|
33
|
+
static properties = {
|
|
34
|
+
_factString: { type: String },
|
|
35
|
+
_factObjectString: { type: String },
|
|
36
|
+
_factFunctionString: { type: String }
|
|
37
|
+
};
|
|
40
38
|
|
|
41
39
|
render() {
|
|
42
40
|
return html`
|
package/mixins/rtl/README.md
CHANGED
|
@@ -11,12 +11,10 @@ Apply the mixin and define RTL styles.
|
|
|
11
11
|
```js
|
|
12
12
|
import { RtlMixin } from '@brightspace-ui/core/mixins/rtl/rtl-mixin.js';
|
|
13
13
|
class MyComponent extends RtlMixin(LitElement) {
|
|
14
|
-
static
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
`;
|
|
20
|
-
}
|
|
14
|
+
static styles = css`
|
|
15
|
+
:host([dir="rtl"]) .some-elem {
|
|
16
|
+
/* some RTL styles */
|
|
17
|
+
}
|
|
18
|
+
`;
|
|
21
19
|
}
|
|
22
20
|
```
|
package/mixins/rtl/rtl-mixin.js
CHANGED
|
@@ -3,15 +3,13 @@ import { getDocumentLocaleSettings } from '@brightspace-ui/intl/lib/common.js';
|
|
|
3
3
|
|
|
4
4
|
export const RtlMixin = dedupeMixin(superclass => class extends superclass {
|
|
5
5
|
|
|
6
|
-
static
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
};
|
|
14
|
-
}
|
|
6
|
+
static properties = {
|
|
7
|
+
/**
|
|
8
|
+
* @ignore
|
|
9
|
+
*/
|
|
10
|
+
// eslint-disable-next-line lit/no-native-attributes
|
|
11
|
+
dir: { type: String, reflect: true }
|
|
12
|
+
};
|
|
15
13
|
|
|
16
14
|
constructor() {
|
|
17
15
|
super();
|
|
@@ -7,13 +7,11 @@
|
|
|
7
7
|
*/
|
|
8
8
|
export const ThemeMixin = superclass => class extends superclass {
|
|
9
9
|
|
|
10
|
-
static
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
};
|
|
17
|
-
}
|
|
10
|
+
static properties = {
|
|
11
|
+
/**
|
|
12
|
+
* @ignore
|
|
13
|
+
*/
|
|
14
|
+
theme: { reflect: true, type: String }
|
|
15
|
+
};
|
|
18
16
|
|
|
19
17
|
};
|
|
@@ -9,9 +9,7 @@ Apply the mixin and include the required `visibleOnAncestorStyles`.
|
|
|
9
9
|
```js
|
|
10
10
|
import { VisibleOnAncestorMixin, visibleOnAncestorStyles } from '@brightspace-ui/core/mixins/visible-on-ancestor/visible-on-ancestor-mixin.js';
|
|
11
11
|
class MyComponent extends VisibleOnAncestorMixin(LitElement) {
|
|
12
|
-
static
|
|
13
|
-
return [ visibleOnAncestorStyles, css`/* MyComponent styles */` ];
|
|
14
|
-
}
|
|
12
|
+
static styles = [ visibleOnAncestorStyles, css`/* MyComponent styles */` ];
|
|
15
13
|
}
|
|
16
14
|
```
|
|
17
15
|
|
|
@@ -41,19 +41,17 @@ export const visibleOnAncestorStyles = css`
|
|
|
41
41
|
|
|
42
42
|
export const VisibleOnAncestorMixin = superclass => class extends superclass {
|
|
43
43
|
|
|
44
|
-
static
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
};
|
|
56
|
-
}
|
|
44
|
+
static properties = {
|
|
45
|
+
/**
|
|
46
|
+
* @ignore
|
|
47
|
+
*/
|
|
48
|
+
animationType: { type: String, reflect: true, attribute: 'animation-type' },
|
|
49
|
+
/**
|
|
50
|
+
* @ignore
|
|
51
|
+
*/
|
|
52
|
+
visibleOnAncestor: { type: Boolean, reflect: true, attribute: 'visible-on-ancestor' },
|
|
53
|
+
__voaState: { type: String, reflect: true, attribute: '__voa-state' }
|
|
54
|
+
};
|
|
57
55
|
|
|
58
56
|
constructor() {
|
|
59
57
|
super();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.268.
|
|
3
|
+
"version": "3.268.1",
|
|
4
4
|
"description": "A collection of accessible, free, open-source web components for building Brightspace applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": "https://github.com/BrightspaceUI/core.git",
|