@brightspace-ui/core 1.180.2 → 1.182.0

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 (122) hide show
  1. package/components/alert/demo/alert-toast.html +0 -2
  2. package/components/alert/demo/alert.html +0 -2
  3. package/components/backdrop/demo/backdrop.html +0 -2
  4. package/components/breadcrumbs/demo/breadcrumbs.html +0 -2
  5. package/components/button/demo/button-icon.html +0 -2
  6. package/components/button/demo/button-subtle.html +0 -2
  7. package/components/button/demo/button.html +0 -2
  8. package/components/button/demo/floating-buttons-in-frame.html +0 -2
  9. package/components/button/demo/floating-buttons-in-tabs.html +0 -2
  10. package/components/button/demo/floating-buttons-page.html +0 -2
  11. package/components/button/demo/floating-buttons.html +0 -2
  12. package/components/calendar/demo/calendar.html +0 -2
  13. package/components/card/demo/card.html +0 -2
  14. package/components/colors/demo/colors.html +0 -2
  15. package/components/count-badge/count-badge.js +4 -2
  16. package/components/count-badge/demo/count-badge.html +0 -2
  17. package/components/demo/demo/demo-snippet.html +0 -2
  18. package/components/dialog/demo/dialog-confirm.html +0 -2
  19. package/components/dialog/demo/dialog-fullscreen.html +0 -2
  20. package/components/dialog/demo/dialog-nested.html +0 -2
  21. package/components/dialog/demo/dialog.html +0 -2
  22. package/components/dropdown/demo/dropdown-button.html +0 -2
  23. package/components/dropdown/demo/dropdown-context-menu.html +0 -2
  24. package/components/dropdown/demo/dropdown-menu.html +0 -2
  25. package/components/dropdown/demo/dropdown-more.html +0 -2
  26. package/components/dropdown/demo/dropdown-tabs.html +0 -2
  27. package/components/dropdown/demo/dropdown.html +0 -2
  28. package/components/expand-collapse/demo/expand-collapse-content.html +0 -2
  29. package/components/filter/README.md +6 -3
  30. package/components/filter/demo/filter-search-demo.js +13 -10
  31. package/components/filter/demo/filter.html +17 -13
  32. package/components/filter/filter.js +57 -9
  33. package/components/focus-trap/demo/focus-trap.html +0 -2
  34. package/components/form/demo/form-native.html +0 -2
  35. package/components/form/demo/form.html +0 -2
  36. package/components/hierarchical-view/demo/hierarchical-view.html +0 -2
  37. package/components/html-block/README.md +116 -21
  38. package/components/html-block/demo/html-block.html +0 -2
  39. package/components/html-block/html-block.js +1 -0
  40. package/components/icons/demo/icon-custom.html +0 -2
  41. package/components/icons/demo/icon.html +0 -2
  42. package/components/inputs/demo/input-checkbox.html +0 -2
  43. package/components/inputs/demo/input-date-range.html +0 -2
  44. package/components/inputs/demo/input-date-time-range.html +0 -2
  45. package/components/inputs/demo/input-date-time.html +0 -2
  46. package/components/inputs/demo/input-date.html +0 -2
  47. package/components/inputs/demo/input-number.html +0 -2
  48. package/components/inputs/demo/input-percent.html +0 -2
  49. package/components/inputs/demo/input-radio.html +0 -2
  50. package/components/inputs/demo/input-search.html +0 -2
  51. package/components/inputs/demo/input-select.html +0 -2
  52. package/components/inputs/demo/input-text.html +0 -2
  53. package/components/inputs/demo/input-textarea.html +0 -2
  54. package/components/inputs/demo/input-time-range.html +0 -2
  55. package/components/inputs/demo/input-time.html +0 -2
  56. package/components/link/demo/link.html +0 -2
  57. package/components/list/README.md +359 -177
  58. package/components/list/demo/list-drag-and-drop.html +0 -2
  59. package/components/list/demo/list-item-actions.html +0 -2
  60. package/components/list/demo/list-item-layouts.html +0 -2
  61. package/components/list/demo/list.html +0 -2
  62. package/components/list/list-header.js +2 -1
  63. package/components/list/list-item-button.js +2 -1
  64. package/components/list/list-item-checkbox-mixin.js +12 -4
  65. package/components/list/list-item-drag-drop-mixin.js +17 -1
  66. package/components/list/list-item-drag-handle.js +18 -1
  67. package/components/list/list-item-generic-layout.js +1 -0
  68. package/components/list/list-item-link-mixin.js +1 -0
  69. package/components/list/list-item-mixin.js +2 -0
  70. package/components/list/list-item.js +3 -0
  71. package/components/list/list.js +2 -2
  72. package/components/loading-spinner/demo/loading-spinner.html +0 -2
  73. package/components/menu/demo/checkbox-menu.html +0 -2
  74. package/components/menu/demo/menu.html +0 -2
  75. package/components/menu/demo/radio-menu.html +0 -2
  76. package/components/meter/demo/meter.html +0 -2
  77. package/components/more-less/demo/more-less.html +0 -2
  78. package/components/offscreen/demo/offscreen.html +0 -2
  79. package/components/overflow-group/demo/overflow-group.html +0 -2
  80. package/components/scroll-wrapper/README.md +27 -9
  81. package/components/scroll-wrapper/demo/scroll-wrapper.html +0 -2
  82. package/components/scroll-wrapper/scroll-wrapper.js +2 -1
  83. package/components/selection/demo/selection.html +0 -2
  84. package/components/skeleton/demo/skeleton-mixin.html +0 -2
  85. package/components/status-indicator/demo/status-indicator.html +0 -2
  86. package/components/switch/demo/switch.html +0 -2
  87. package/components/table/demo/table.html +0 -2
  88. package/components/tabs/demo/tabs.html +0 -2
  89. package/components/tooltip/demo/tooltip.html +0 -2
  90. package/components/typography/demo/typography.html +0 -2
  91. package/custom-elements.json +70 -60
  92. package/directives/animate/demo/index.html +0 -2
  93. package/helpers/demo/announce.html +0 -2
  94. package/helpers/demo/dismissible.html +0 -2
  95. package/helpers/demo/gestures.html +0 -2
  96. package/helpers/framed.js +41 -0
  97. package/lang/ar.js +6 -0
  98. package/lang/cy.js +6 -0
  99. package/lang/da.js +6 -0
  100. package/lang/de.js +6 -0
  101. package/lang/en.js +6 -0
  102. package/lang/es-es.js +6 -0
  103. package/lang/es.js +6 -0
  104. package/lang/fr-fr.js +6 -0
  105. package/lang/fr.js +6 -0
  106. package/lang/ja.js +6 -0
  107. package/lang/ko.js +6 -0
  108. package/lang/nl.js +6 -0
  109. package/lang/pt.js +6 -0
  110. package/lang/sv.js +6 -0
  111. package/lang/tr.js +6 -0
  112. package/lang/zh-tw.js +6 -0
  113. package/lang/zh.js +6 -0
  114. package/mixins/async-container/demo/async-container.html +0 -2
  115. package/mixins/demo/arrow-keys-mixin.html +0 -2
  116. package/mixins/demo/labelled-mixin.html +0 -2
  117. package/mixins/demo/localize-mixin.html +0 -2
  118. package/mixins/labelled-mixin.js +8 -0
  119. package/package.json +1 -2
  120. package/templates/primary-secondary/demo/index.html +0 -2
  121. package/templates/primary-secondary/demo/overflow-hidden.html +0 -2
  122. package/templates/primary-secondary/demo/width-type-normal.html +0 -2
package/components/alert/demo/alert-toast.html CHANGED
@@ -3,10 +3,8 @@
3
3
 
4
4
  <head>
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
6
  <meta charset="UTF-8">
8
7
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
9
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
10
8
  <script type="module">
11
9
  import '../../button/button.js';
12
10
  import '../../demo/demo-page.js';
package/components/alert/demo/alert.html CHANGED
@@ -3,10 +3,8 @@
3
3
 
4
4
  <head>
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
6
  <meta charset="UTF-8">
8
7
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
9
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
10
8
  <script type="module">
11
9
  import '../../demo/demo-page.js';
12
10
  import '../alert.js';
package/components/backdrop/demo/backdrop.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import '../backdrop.js';
package/components/breadcrumbs/demo/breadcrumbs.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import '../breadcrumb.js';
package/components/button/demo/button-icon.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import '../button-icon.js';
package/components/button/demo/button-subtle.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import '../button-subtle.js';
package/components/button/demo/button.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import '../button.js';
package/components/button/demo/floating-buttons-in-frame.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  </script>
package/components/button/demo/floating-buttons-in-tabs.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import '../button.js';
package/components/button/demo/floating-buttons-page.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import '../button.js';
package/components/button/demo/floating-buttons.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import '../button.js';
package/components/calendar/demo/calendar.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import '../calendar.js';
package/components/card/demo/card.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import '../../button/button.js';
package/components/colors/demo/colors.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import './color-swatch.js';
package/components/count-badge/count-badge.js CHANGED
@@ -3,10 +3,11 @@ import '../tooltip/tooltip.js';
3
3
  import { css, html, LitElement } from 'lit-element/lit-element.js';
4
4
  import { getUniqueId } from '../../helpers/uniqueId.js';
5
5
  import { ifDefined } from 'lit-html/directives/if-defined.js';
6
+ import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
6
7
  import { offscreenStyles } from '../offscreen/offscreen.js';
7
8
  import { RtlMixin } from '../../mixins/rtl-mixin.js';
8
9
 
9
- class CountBadge extends RtlMixin(LitElement) {
10
+ class CountBadge extends LocalizeCoreElement(RtlMixin(LitElement)) {
10
11
 
11
12
  static get properties() {
12
13
  return {
@@ -170,7 +171,8 @@ class CountBadge extends RtlMixin(LitElement) {
170
171
  numberString = '';
171
172
  }
172
173
  if (this.maxDigits && this.number.toString().length > this.maxDigits) {
173
- numberString = `${'9'.repeat(this.maxDigits)}+`;
174
+ numberString = `${'9'.repeat(this.maxDigits)}`;
175
+ numberString = this.localize('components.count-badge.plus', { number: numberString });
174
176
  }
175
177
  return html`
176
178
  <div
package/components/count-badge/demo/count-badge.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import '../count-badge.js';
package/components/demo/demo/demo-snippet.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../demo-page.js';
11
9
  import '../../button/button-icon.js';
package/components/dialog/demo/dialog-confirm.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script>
10
8
  //window.D2L = { DialogMixin: { preferNative: false } };
11
9
  </script>
package/components/dialog/demo/dialog-fullscreen.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script>
10
8
  //window.D2L = { DialogMixin: { preferNative: false } };
11
9
  </script>
package/components/dialog/demo/dialog-nested.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script>
10
8
  //window.D2L = { DialogMixin: { preferNative: false } };
11
9
  </script>
package/components/dialog/demo/dialog.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script>
10
8
  //window.D2L = { DialogMixin: { preferNative: false } };
11
9
  </script>
package/components/dropdown/demo/dropdown-button.html CHANGED
@@ -3,10 +3,8 @@
3
3
 
4
4
  <head>
5
5
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
6
  <meta charset="UTF-8">
8
7
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
9
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
10
8
  <script type="module">
11
9
  import '../../demo/demo-page.js';
12
10
  import '../dropdown-button.js';
package/components/dropdown/demo/dropdown-context-menu.html CHANGED
@@ -3,10 +3,8 @@
3
3
 
4
4
  <head>
5
5
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
6
  <meta charset="UTF-8">
8
7
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
9
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
10
8
  <script type="module">
11
9
  import '../../demo/demo-page.js';
12
10
  import '../dropdown-context-menu.js';
package/components/dropdown/demo/dropdown-menu.html CHANGED
@@ -3,10 +3,8 @@
3
3
 
4
4
  <head>
5
5
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
6
  <meta charset="UTF-8">
8
7
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
9
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
10
8
  <script type="module">
11
9
  import '../../demo/demo-page.js';
12
10
  import '../../menu/menu.js';
package/components/dropdown/demo/dropdown-more.html CHANGED
@@ -3,10 +3,8 @@
3
3
 
4
4
  <head>
5
5
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
6
  <meta charset="UTF-8">
8
7
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
9
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
10
8
  <script type="module">
11
9
  import '../../demo/demo-page.js';
12
10
  import '../../menu/menu.js';
package/components/dropdown/demo/dropdown-tabs.html CHANGED
@@ -3,10 +3,8 @@
3
3
 
4
4
  <head>
5
5
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
6
  <meta charset="UTF-8">
8
7
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
9
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
10
8
  <script type="module">
11
9
  import '../../demo/demo-page.js';
12
10
  import '../../tabs/tabs.js';
package/components/dropdown/demo/dropdown.html CHANGED
@@ -3,10 +3,8 @@
3
3
 
4
4
  <head>
5
5
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
6
  <meta charset="UTF-8">
8
7
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
9
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
10
8
  <script type="module">
11
9
  import '../../demo/demo-page.js';
12
10
  import '../../button/button.js';
package/components/expand-collapse/demo/expand-collapse-content.html CHANGED
@@ -3,10 +3,8 @@
3
3
 
4
4
  <head>
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
6
  <meta charset="UTF-8">
8
7
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
9
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
10
8
  <script type="module">
11
9
  import '../../button/button.js';
12
10
  import '../../demo/demo-page.js';
package/components/filter/README.md CHANGED
@@ -19,7 +19,7 @@ The `d2l-filter` component allows a user to filter on one or more dimensions of
19
19
  </d2l-filter>
20
20
  ```
21
21
 
22
- **Properties:**
22
+ **Properties**
23
23
 
24
24
  | Property | Type | Description |
25
25
  |--|--|--|
@@ -30,6 +30,9 @@ The `d2l-filter` component allows a user to filter on one or more dimensions of
30
30
  * `d2l-filter-dimension-first-open`: dispatched when a dimension is opened for the first time (if there is only one dimension, this will be dispatched when the dropdown is first opened)
31
31
  * `d2l-filter-dimension-search`: dispatched when a dimension that supports searching and has the "manual" search-type is searched
32
32
 
33
+ **Accessibility**
34
+ The filter will announce changes to filter selections, search results, and when filters are being cleared. It is up to the consumer to then announce when these changes have propogated and resulted in new/loaded/updated data on the page. This is very important for screenreader users who are not able to visually see the page changing behind the filter control as selections are made.
35
+
33
36
  ## Filter Dimension Types
34
37
 
35
38
  ### d2l-filter-dimension-set and d2l-filter-dimension-set-value
@@ -56,7 +59,7 @@ The `d2l-filter-dimension-set` component is the main dimension type that will wo
56
59
 
57
60
  #### d2l-filter-dimension-set
58
61
 
59
- **Properties:**
62
+ **Properties**
60
63
 
61
64
  | Property | Type | Description |
62
65
  |--|--|--|
@@ -69,7 +72,7 @@ The `d2l-filter-dimension-set` component is the main dimension type that will wo
69
72
 
70
73
  #### d2l-filter-dimension-set-value
71
74
 
72
- **Properties:**
75
+ **Properties**
73
76
 
74
77
  | Property | Type | Description |
75
78
  |--|--|--|
package/components/filter/demo/filter-search-demo.js CHANGED
@@ -50,19 +50,22 @@ class FilterSearchDemo extends LitElement {
50
50
  }
51
51
 
52
52
  _handleFilterChange(e) {
53
- (e.detail.dimensions.length === 1) ?
54
- console.log(`Filter selection changed for dimension "${e.detail.dimensions[0].dimensionKey}":`, e.detail.dimensions[0].changes) : // eslint-disable-line no-console
55
- console.log('Batch filter selection changed:', e.detail.dimensions); // eslint-disable-line no-console
53
+ if (e.detail.dimensions.length === 1) {
54
+ console.log(`Filter selection(s) changed for dimension "${e.detail.dimensions[0].dimensionKey}":`, e.detail.dimensions[0].changes); // eslint-disable-line no-console
55
+ if (e.detail.dimensions[0].cleared) console.log(`(Dimension "${e.detail.dimensions[0].dimensionKey}" cleared)`); // eslint-disable-line no-console
56
+ } else {
57
+ console.log('Multiple dimension selections changed:', e.detail.dimensions); // eslint-disable-line no-console
58
+ }
56
59
 
57
60
  e.detail.dimensions.forEach(dimension => {
58
61
  if (!dimension.dimensionKey.includes('event')) return;
59
- dimension.changes.forEach(change => {
60
- if (dimension.dimensionKey === 'event') {
61
- this._fullData.find(value => value.key === change.valueKey).selected = change.selected;
62
- } else if (change.dimension === 'event-single') {
63
- this._fullDataSingle.find(value => value.key === change.valueKey).selected = change.selected;
64
- }
65
- });
62
+
63
+ const dataToUpdate = dimension.dimensionKey === 'event-single' ? this._fullDataSingle : this._fullData;
64
+ if (dimension.cleared) {
65
+ dataToUpdate.forEach(value => value.selected = false);
66
+ } else {
67
+ dimension.changes.forEach(change => { dataToUpdate.find(value => value.key === change.valueKey).selected = change.selected; });
68
+ }
66
69
  });
67
70
  }
68
71
 
package/components/filter/demo/filter.html CHANGED
@@ -3,7 +3,6 @@
3
3
 
4
4
  <head>
5
5
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
6
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
7
6
  <script type="module">
8
7
  import '../../demo/demo-page.js';
9
8
  import '../../button/button.js';
@@ -112,24 +111,29 @@
112
111
 
113
112
  <script type="module">
114
113
  document.addEventListener('d2l-filter-change', e => {
115
- (e.detail.dimensions.length === 1) ?
116
- console.log(`Filter selection changed for dimension "${e.detail.dimensions[0].dimensionKey}":`, e.detail.dimensions[0].changes) : // eslint-disable-line no-console
117
- console.log('Batch filter selection changed:', e.detail.dimensions); // eslint-disable-line no-console
114
+ if (e.detail.dimensions.length === 1) {
115
+ console.log(`Filter selection(s) changed for dimension "${e.detail.dimensions[0].dimensionKey}":`, e.detail.dimensions[0].changes); // eslint-disable-line no-console
116
+ if (e.detail.dimensions[0].cleared) console.log(`(Dimension "${e.detail.dimensions[0].dimensionKey}" cleared)`); // eslint-disable-line no-console
117
+ } else {
118
+ console.log('Multiple dimension selections changed:', e.detail.dimensions); // eslint-disable-line no-console
119
+ }
118
120
  });
119
121
 
120
122
  document.addEventListener('d2l-filter-dimension-first-open', e => {
121
123
  console.log(`Filter dimension opened for the first time: ${e.detail.key}`);
122
124
  });
123
125
 
124
- document.getElementById('finish-loading').addEventListener('click', e => {
125
- e.target.disabled = true;
126
- setTimeout(() => {
127
- const loadingFilters = document.querySelectorAll('d2l-filter-dimension-set[loading]');
128
- loadingFilters.forEach(filter => {
129
- filter.loading = false;
130
- });
131
- e.target.textContent = 'Done Loading';
132
- }, 5000);
126
+ requestAnimationFrame(() => {
127
+ document.getElementById('finish-loading').addEventListener('click', e => {
128
+ e.target.disabled = true;
129
+ setTimeout(() => {
130
+ const loadingFilters = document.querySelectorAll('d2l-filter-dimension-set[loading]');
131
+ loadingFilters.forEach(filter => {
132
+ filter.loading = false;
133
+ });
134
+ e.target.textContent = 'Done Loading';
135
+ }, 5000);
136
+ });
133
137
  });
134
138
  </script>
135
139
 
package/components/filter/filter.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import '../colors/colors.js';
2
2
  import '../count-badge/count-badge.js';
3
3
  import '../button/button-icon.js';
4
+ import '../button/button-subtle.js';
4
5
  import '../dropdown/dropdown-button-subtle.js';
5
6
  import '../dropdown/dropdown-content.js';
6
7
  import '../dropdown/dropdown-menu.js';
@@ -16,6 +17,7 @@ import '../selection/selection-summary.js';
16
17
 
17
18
  import { bodyCompactStyles, bodySmallStyles, bodyStandardStyles } from '../typography/styles.js';
18
19
  import { css, html, LitElement } from 'lit-element/lit-element.js';
20
+ import { announce } from '../../helpers/announce.js';
19
21
  import { classMap } from 'lit-html/directives/class-map.js';
20
22
  import { ifDefined } from 'lit-html/directives/if-defined.js';
21
23
  import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
@@ -227,7 +229,16 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
227
229
  _buildHeader(singleDimension) {
228
230
  if (!this._activeDimensionKey && !singleDimension) return null;
229
231
 
230
- const dimension = singleDimension ? this._dimensions[0] : this._dimensions.find(dimension => dimension.key === this._activeDimensionKey);
232
+ const dimension = this._getActiveDimension();
233
+
234
+ const clear = html`
235
+ <d2l-button-subtle
236
+ @click="${this._handleClear}"
237
+ ?disabled="${dimension.loading || dimension.appliedCount === 0}"
238
+ description="${singleDimension ? this.localize('components.filter.clearDescriptionSingle') : this.localize('components.filter.clearDescription', { filterName: dimension.text })}"
239
+ text="${this.localize('components.filter.clear')}">
240
+ </d2l-button-subtle>
241
+ `;
231
242
 
232
243
  const search = dimension.searchType === 'none' ? null : html`
233
244
  <d2l-input-search
@@ -253,6 +264,7 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
253
264
 
254
265
  const actions = html`
255
266
  <div class="d2l-filter-dimension-header-actions">
267
+ ${clear}
256
268
  ${search}
257
269
  ${selectAll}
258
270
  </div>
@@ -334,7 +346,7 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
334
346
  }
335
347
 
336
348
  _dispatchChangeEvent(dimension, change) {
337
- this._setDimensionChangeEvent(dimension, change);
349
+ this._setDimensionChangeEvent(dimension, change, false);
338
350
 
339
351
  if (!this._changeEventTimeout) {
340
352
  this._changeEventTimeout = setTimeout(() => {
@@ -371,6 +383,10 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
371
383
  else return `${count}`;
372
384
  }
373
385
 
386
+ _getActiveDimension() {
387
+ return !this._activeDimensionKey ? this._dimensions[0] : this._dimensions.find(dimension => dimension.key === this._activeDimensionKey);
388
+ }
389
+
374
390
  _getSlottedNodes(slot) {
375
391
  const dimensionTypes = ['d2l-filter-dimension-set'];
376
392
  const nodes = slot.assignedNodes({ flatten: true });
@@ -397,6 +413,20 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
397
413
  this._dispatchChangeEvent(dimension, { valueKey: valueKey, selected: selected });
398
414
  }
399
415
 
416
+ _handleClear() {
417
+ const dimension = this._getActiveDimension();
418
+
419
+ this._performDimensionClear(dimension);
420
+ this._dispatchChangeEventNow();
421
+ this.requestUpdate();
422
+
423
+ if (!this._activeDimensionKey) {
424
+ announce(this.localize('components.filter.clearAnnounceSingle'));
425
+ } else {
426
+ announce(this.localize('components.filter.clearAnnounce', { filterName: dimension.text }));
427
+ }
428
+ }
429
+
400
430
  _handleDimensionDataChange(e) {
401
431
  const changes = e.detail.changes;
402
432
  const dimension = this._dimensions.find(dimension => dimension.key === e.detail.dimensionKey);
@@ -428,7 +458,7 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
428
458
  }
429
459
  });
430
460
 
431
- if (shouldSearch) this._searchDimension(dimension);
461
+ if (shouldSearch) this._performDimensionSearch(dimension);
432
462
  if (shouldRecount) this._setFilterCounts(dimension);
433
463
  if (shouldUpdate) this.requestUpdate();
434
464
  }
@@ -461,12 +491,12 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
461
491
  }
462
492
 
463
493
  _handleSearch(e) {
464
- const dimension = !this._activeDimensionKey ? this._dimensions[0] : this._dimensions.find(dimension => dimension.key === this._activeDimensionKey);
494
+ const dimension = this._getActiveDimension();
465
495
  const searchValue = e.detail.value.trim();
466
496
  dimension.searchValue = searchValue;
467
497
 
468
498
  if (dimension.searchType === 'automatic' || searchValue === '') {
469
- this._searchDimension(dimension);
499
+ this._performDimensionSearch(dimension);
470
500
  } else if (dimension.searchType === 'manual') {
471
501
  dimension.loading = true;
472
502
  this.requestUpdate();
@@ -480,7 +510,7 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
480
510
  searchCompleteCallback: function(keysToDisplay) {
481
511
  requestAnimationFrame(() => {
482
512
  dimension.searchKeysToDisplay = keysToDisplay;
483
- this._searchDimension(dimension);
513
+ this._performDimensionSearch(dimension);
484
514
  dimension.loading = false;
485
515
  this.requestUpdate();
486
516
  });
@@ -528,7 +558,24 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
528
558
  return false;
529
559
  }
530
560
 
531
- _searchDimension(dimension) {
561
+ _performDimensionClear(dimension) {
562
+ this._totalAppliedCount = this._totalAppliedCount - dimension.appliedCount;
563
+ dimension.appliedCount = 0;
564
+
565
+ switch (dimension.type) {
566
+ case 'd2l-filter-dimension-set': {
567
+ dimension.values.forEach(value => {
568
+ if (value.selected) {
569
+ value.selected = false;
570
+ this._setDimensionChangeEvent(dimension, { valueKey: value.key, selected: false }, true);
571
+ }
572
+ });
573
+ break;
574
+ }
575
+ }
576
+ }
577
+
578
+ _performDimensionSearch(dimension) {
532
579
  switch (dimension.type) {
533
580
  case 'd2l-filter-dimension-set':
534
581
  dimension.values.forEach(value => {
@@ -547,11 +594,12 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
547
594
  this.requestUpdate();
548
595
  }
549
596
 
550
- _setDimensionChangeEvent(dimension, change) {
597
+ _setDimensionChangeEvent(dimension, change, dimensionCleared) {
551
598
  if (!this._changeEventsToDispatch.has(dimension.key)) {
552
- this._changeEventsToDispatch.set(dimension.key, { dimensionKey: dimension.key, changes: new Map() });
599
+ this._changeEventsToDispatch.set(dimension.key, { dimensionKey: dimension.key, cleared: false, changes: new Map() });
553
600
  }
554
601
  const dimensionChanges = this._changeEventsToDispatch.get(dimension.key);
602
+ dimensionChanges.cleared = dimensionCleared;
555
603
 
556
604
  switch (dimension.type) {
557
605
  case 'd2l-filter-dimension-set':