@brightspace-ui/core 3.268.0 → 3.268.2

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.
Files changed (108) hide show
  1. package/components/collapsible-panel/README.md +11 -15
  2. package/components/demo/code-view.js +6 -10
  3. package/components/demo/demo-page-settings.js +25 -29
  4. package/components/demo/demo-page.js +32 -36
  5. package/components/demo/demo-snippet.js +95 -99
  6. package/components/description-list/README.md +25 -33
  7. package/components/description-list/demo/description-list-test.js +36 -39
  8. package/components/dialog/README.md +3 -5
  9. package/components/form/docs/form-element-mixin.md +11 -14
  10. package/components/form/docs/form-element-nesting.md +4 -6
  11. package/components/form/docs/form-element-wrapping.md +1 -3
  12. package/components/hierarchical-view/README.md +8 -11
  13. package/components/inputs/docs/input-select-styles.md +4 -9
  14. package/components/inputs/docs/styling-native-inputs.md +11 -25
  15. package/components/link/README.md +1 -1
  16. package/components/list/README.md +8 -16
  17. package/components/menu/menu-item-checkbox.js +1 -3
  18. package/components/menu/menu-item-link.js +27 -33
  19. package/components/menu/menu-item-mixin.js +52 -54
  20. package/components/menu/menu-item-radio.js +1 -3
  21. package/components/menu/menu-item-return.js +18 -22
  22. package/components/menu/menu-item-selectable-mixin.js +12 -14
  23. package/components/menu/menu-item-separator.js +9 -11
  24. package/components/menu/menu-item.js +11 -15
  25. package/components/menu/menu.js +50 -54
  26. package/components/meter/meter-circle.js +3 -4
  27. package/components/meter/meter-linear.js +86 -88
  28. package/components/meter/meter-mixin.js +34 -36
  29. package/components/meter/meter-radial.js +3 -4
  30. package/components/more-less/more-less.js +57 -61
  31. package/components/object-property-list/object-property-list-item-link.js +18 -19
  32. package/components/object-property-list/object-property-list-item-tooltip-help.js +8 -9
  33. package/components/object-property-list/object-property-list-item.js +52 -55
  34. package/components/object-property-list/object-property-list.js +24 -27
  35. package/components/offscreen/README.md +1 -1
  36. package/components/offscreen/offscreen.js +13 -15
  37. package/components/offscreen/screen-reader-pause.js +1 -3
  38. package/components/overflow-group/README.md +1 -3
  39. package/components/overflow-group/overflow-group-mixin.js +55 -59
  40. package/components/overflow-group/overflow-group.js +38 -42
  41. package/components/page/page-header-button.js +41 -45
  42. package/components/page/page-header-custom.js +108 -112
  43. package/components/page/page-header-immersive.js +65 -69
  44. package/components/page/page-header-separator.js +12 -14
  45. package/components/paging/pageable-mixin.js +3 -5
  46. package/components/paging/pageable-subscriber-mixin.js +8 -10
  47. package/components/paging/pager-load-more.js +47 -51
  48. package/components/popover/popover-mixin.js +186 -190
  49. package/components/progress/progress.js +160 -164
  50. package/components/scroll-wrapper/scroll-wrapper.js +109 -113
  51. package/components/selection/README.md +5 -7
  52. package/components/selection/demo/demo-selection.js +5 -7
  53. package/components/selection/selection-action-dropdown.js +9 -13
  54. package/components/selection/selection-action-menu-item.js +11 -15
  55. package/components/selection/selection-action.js +20 -24
  56. package/components/selection/selection-controls.js +92 -96
  57. package/components/selection/selection-input.js +40 -44
  58. package/components/selection/selection-mixin.js +11 -13
  59. package/components/selection/selection-observer-mixin.js +14 -16
  60. package/components/selection/selection-select-all-pages.js +8 -10
  61. package/components/selection/selection-select-all.js +16 -20
  62. package/components/selection/selection-summary.js +18 -22
  63. package/components/skeleton/README.md +2 -6
  64. package/components/skeleton/skeleton-group-mixin.js +3 -5
  65. package/components/skeleton/skeleton-mixin.js +7 -9
  66. package/components/skip-nav/skip-nav-custom.js +33 -37
  67. package/components/sorting/sort.js +11 -13
  68. package/components/status-indicator/status-indicator.js +75 -79
  69. package/components/switch/switch-mixin.js +145 -149
  70. package/components/switch/switch-visibility.js +11 -15
  71. package/components/switch/switch.js +5 -7
  72. package/components/table/README.md +19 -37
  73. package/components/table/demo/table-test.js +27 -31
  74. package/components/table/table-col-sort-button-item.js +1 -3
  75. package/components/table/table-col-sort-button.js +105 -109
  76. package/components/table/table-controls.js +18 -21
  77. package/components/table/table-wrapper.js +124 -128
  78. package/components/tabs/tab-internal.js +72 -76
  79. package/components/tabs/tab-mixin.js +22 -24
  80. package/components/tabs/tab-panel-mixin.js +47 -51
  81. package/components/tabs/tab.js +7 -9
  82. package/components/tabs/tabs.js +171 -175
  83. package/components/tag-list/tag-list-item-mixin.js +103 -107
  84. package/components/tag-list/tag-list-item.js +13 -15
  85. package/components/tag-list/tag-list.js +54 -58
  86. package/components/tooltip/tooltip-help.js +67 -71
  87. package/components/tooltip/tooltip.js +103 -107
  88. package/components/typography/README.md +5 -7
  89. package/components/validation/validation-custom-mixin.js +4 -6
  90. package/components/view-switcher/view-switcher-button.js +42 -46
  91. package/components/view-switcher/view-switcher.js +26 -29
  92. package/controllers/subscriber/README.md +7 -11
  93. package/custom-elements.json +1026 -3850
  94. package/helpers/flags.js +7 -1
  95. package/mixins/arrow-keys/arrow-keys-mixin.js +10 -12
  96. package/mixins/async-container/async-container-mixin.js +10 -12
  97. package/mixins/collection/collection-mixin.js +7 -9
  98. package/mixins/interactive/interactive-mixin.js +10 -14
  99. package/mixins/labelled/README.md +3 -5
  100. package/mixins/labelled/labelled-mixin.js +26 -30
  101. package/mixins/provider/README.md +5 -7
  102. package/mixins/rtl/README.md +5 -7
  103. package/mixins/rtl/rtl-mixin.js +7 -9
  104. package/mixins/theme/theme-mixin.js +6 -8
  105. package/mixins/visible-on-ancestor/README.md +1 -3
  106. package/mixins/visible-on-ancestor/visible-on-ancestor-mixin.js +11 -13
  107. package/package.json +1 -1
  108. package/templates/primary-secondary/primary-secondary.js +373 -377
package/helpers/flags.js CHANGED
@@ -1,6 +1,10 @@
1
1
  const knownFlags = new Map();
2
2
  const flagOverrides = new Map();
3
3
 
4
+ export function getWarnMessage(key) {
5
+ return `mockFlag called after getFlag for '${key}'. This is likely to result in unexpected behaviour.`;
6
+ }
7
+
4
8
  export function getFlag(key, defaultValue) {
5
9
  let value;
6
10
  if (flagOverrides.has(key)) {
@@ -21,7 +25,9 @@ export function getKnownFlags() {
21
25
  }
22
26
 
23
27
  export function mockFlag(key, value) {
24
- if (knownFlags.has(key)) console.warn(`mockFlag called after getFlag for '${key}'. This is likely to result in unexpected behaviour.`);
28
+ if (!globalThis.isD2LTestPage && knownFlags.has(key)) {
29
+ console.warn(getWarnMessage(key));
30
+ }
25
31
  flagOverrides.set(key, value);
26
32
  }
27
33
 
@@ -11,18 +11,16 @@ const keyCodes = Object.freeze({
11
11
 
12
12
  export const ArrowKeysMixin = superclass => class extends superclass {
13
13
 
14
- static get properties() {
15
- return {
16
- /**
17
- * @ignore
18
- */
19
- arrowKeysDirection: { type: String, attribute: 'arrow-keys-direction' },
20
- /**
21
- * @ignore
22
- */
23
- arrowKeysNoWrap: { type: Boolean, attribute: 'arrow-keys-no-wrap' }
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 get properties() {
11
- return {
12
- /**
13
- * @ignore
14
- */
15
- asyncPendingDelay: { type: Number, attribute: 'async-pending-delay' },
16
- /**
17
- * @ignore
18
- */
19
- asyncState: { type: String }
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 get properties() {
4
- return {
5
- /**
6
- * Total number of items. If not specified, features like select-all-pages will be disabled.
7
- * @type {number}
8
- */
9
- itemCount: { type: Number, attribute: 'item-count', reflect: true },
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 get properties() {
20
- return {
21
- _focusingToggle: { state: true },
22
- _hasInteractiveAncestor: { state: true },
23
- _interactive: { state: true }
24
- };
25
- }
26
-
27
- static get styles() {
28
- return [offscreenStyles, getFocusRingStyles(
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 get properties() {
30
- return {
31
- text: { type: String }
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 get properties() {
52
- return {
53
- _label: { type: String, reflect: true }
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 get properties() {
81
- return {
82
- /**
83
- * ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.
84
- * @type {string}
85
- */
86
- labelledBy: { type: String, reflect: true, attribute: 'labelled-by' },
87
- /**
88
- * ACCESSIBILITY: REQUIRED: Explicitly defined label for the element
89
- * @type {string}
90
- */
91
- label: {
92
- type: String,
93
- required: {
94
- message: (_value, elem, defaultMessage) => {
95
- if (!elem.labelledBy) return defaultMessage;
96
- return `LabelledMixin: "${elem.tagName.toLowerCase()}" is labelled-by="${elem.labelledBy}", but its label is empty`;
97
- },
98
- validator: (_value, elem, hasValue) => {
99
- if (!elem.labelRequired || hasValue) return true;
100
- if (!elem.labelledBy) return false;
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 get properties() {
34
- return {
35
- _factString: { type: String },
36
- _factObjectString: { type: String },
37
- _factFunctionString: { type: String }
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`
@@ -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 get styles() {
15
- return css`
16
- :host([dir="rtl"]) .some-elem {
17
- /* some RTL styles */
18
- }
19
- `;
20
- }
14
+ static styles = css`
15
+ :host([dir="rtl"]) .some-elem {
16
+ /* some RTL styles */
17
+ }
18
+ `;
21
19
  }
22
20
  ```
@@ -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 get properties() {
7
- return {
8
- /**
9
- * @ignore
10
- */
11
- // eslint-disable-next-line lit/no-native-attributes
12
- dir: { type: String, reflect: true }
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 get properties() {
11
- return {
12
- /**
13
- * @ignore
14
- */
15
- theme: { reflect: true, type: String }
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 get styles() {
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 get properties() {
45
- return {
46
- /**
47
- * @ignore
48
- */
49
- animationType: { type: String, reflect: true, attribute: 'animation-type' },
50
- /**
51
- * @ignore
52
- */
53
- visibleOnAncestor: { type: Boolean, reflect: true, attribute: 'visible-on-ancestor' },
54
- __voaState: { type: String, reflect: true, attribute: '__voa-state' }
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.0",
3
+ "version": "3.268.2",
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",