@brightspace-ui/core 3.62.2 → 3.62.3

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 (4) hide show
  1. package/components/meter/meter-circle.js +2 -1
  2. package/components/table/demo/table-test.js +37 -20
  3. package/components/table/table-wrapper.js +3 -4
  4. package/package.json +1 -1
package/components/meter/meter-circle.js CHANGED
@@ -23,7 +23,7 @@ class MeterCircle extends MeterMixin(RtlMixin(LitElement)) {
23
23
  .d2l-meter-full-bar {
24
24
  fill: var(--d2l-meter-circle-fill, none);
25
25
  }
26
- .d2l-meter-text {
26
+ .d2l-meter-circle-text {
27
27
  font-size: 0.55rem;
28
28
  }
29
29
  ` ];
@@ -47,6 +47,7 @@ class MeterCircle extends MeterMixin(RtlMixin(LitElement)) {
47
47
  const textClasses = {
48
48
  'd2l-meter-text-ltr': !this.percent,
49
49
  'd2l-body-standard': true,
50
+ 'd2l-meter-circle-text': true,
50
51
  'd2l-meter-text': true
51
52
  };
52
53
 
package/components/table/demo/table-test.js CHANGED
@@ -22,16 +22,16 @@ import { ifDefined } from 'lit/directives/if-defined.js';
22
22
  import { RtlMixin } from '../../../mixins/rtl/rtl-mixin.js';
23
23
 
24
24
  const columns = ['Population', 'Size', 'Elevation'];
25
- const thText = ['Additional', 'Placeholder', 'Header', 'Row'];
25
+ const thText = ['Additional', 'Placeholder', 'Header', 'Row', 'Cells'];
26
26
 
27
27
  const data = () => [
28
- { name: 'Ottawa, Canada', data: { 'city': 'Ottawa', 'country': 'Canada', 'population': 994837, 'size': 2790, 'elevation': 70 }, selected: true },
29
- { name: 'Toronto, Canada', data: { 'city': 'Toronto', 'country': 'Canada', 'population': 2930000, 'size': 630, 'elevation': 76 }, selected: true },
30
- { name: 'Sydney, Australia', data: { 'city': 'Sydney', 'country': 'Australia', 'population': 5312000, 'size': 12368, 'elevation': 3 }, selected: false },
31
- { name: 'Cairo, Egypt', data: { 'city': 'Cairo', 'country': 'Egypt', 'population': 9540000, 'size': 3085, 'elevation': 23 }, selected: false },
32
- { name: 'Moscow, Russia', data: { 'city': 'Moscow', 'country': 'Russia', 'population': 12712305, 'size': 2511, 'elevation': 124 }, selected: false },
33
- { name: 'London, England', data: { 'city': 'London', 'country': 'England', 'population': 8982000, 'size': 1572, 'elevation': 11 }, selected: false },
34
- { name: 'Tokyo, Japan', data: { 'city': 'Tokyo', 'country': 'Japan', 'population': 13960000, 'size': 2194, 'elevation': 40 }, selected: false }
28
+ { name: 'Ottawa, Canada', data: { 'city': 'Ottawa', 'country': 'Canada', 'population': 994837, 'size': 2790, 'elevation': 70, 'latitude': 45.32, 'longitude': -75.71 }, selected: true },
29
+ { name: 'Toronto, Canada', data: { 'city': 'Toronto', 'country': 'Canada', 'population': 2930000, 'size': 630, 'elevation': 76, 'latitude': 43.69, 'longitude': -79.41 }, selected: true },
30
+ { name: 'Sydney, Australia', data: { 'city': 'Sydney', 'country': 'Australia', 'population': 5312000, 'size': 12368, 'elevation': 3, 'latitude': -33.86, 'longitude': 151.13 }, selected: false },
31
+ { name: 'Cairo, Egypt', data: { 'city': 'Cairo', 'country': 'Egypt', 'population': 9540000, 'size': 3085, 'elevation': 23, 'latitude': 30.05, 'longitude': 31.25 }, selected: false },
32
+ { name: 'Moscow, Russia', data: { 'city': 'Moscow', 'country': 'Russia', 'population': 12712305, 'size': 2511, 'elevation': 124, 'latitude': 55.70, 'longitude': 35.59 }, selected: false },
33
+ { name: 'London, England', data: { 'city': 'London', 'country': 'England', 'population': 8982000, 'size': 1572, 'elevation': 11, 'latitude': 51.49, 'longitude': -0.12 }, selected: false },
34
+ { name: 'Tokyo, Japan', data: { 'city': 'Tokyo', 'country': 'Japan', 'population': 13960000, 'size': 2194, 'elevation': 40, 'latitude': 35.68, 'longitude': 139.74 }, selected: false }
35
35
  ];
36
36
 
37
37
  const formatter = new Intl.NumberFormat('en-US');
@@ -104,20 +104,22 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
104
104
  ${this.multiLine ? html`
105
105
  <tr>
106
106
  <th scope="col" sticky><d2l-selection-select-all></d2l-selection-select-all></th>
107
- ${this._renderDoubleSortButton('Location')}
108
- <th scope="col" colspan="${columns.length}" sticky>
107
+ ${this._renderDoubleSortButton('City', 'Country')}
108
+ <th scope="col" colspan="${columns.length + 1}" sticky>
109
109
  Metrics
110
110
  </th>
111
111
  </tr>
112
112
  <tr>
113
113
  <th scope="col" sticky></th>
114
114
  ${columns.map(columnHeading => this._renderSortButton(columnHeading))}
115
+ ${this._renderMenuSortButton('Coordinates', ['Latitude', 'Longitude'])}
115
116
  </tr>
116
117
  ` : html`
117
118
  <tr>
118
119
  <th scope="col" sticky><d2l-selection-select-all></d2l-selection-select-all></th>
119
- ${this._renderDoubleSortButton('Location')}
120
+ ${this._renderDoubleSortButton('City', 'Country')}
120
121
  ${columns.map(columnHeading => this._renderSortButton(columnHeading))}
122
+ ${this._renderMenuSortButton('Coordinates', ['Latitude', 'Longitude'])}
121
123
  </tr>
122
124
  `}
123
125
  </thead>
@@ -145,7 +147,8 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
145
147
  </d2l-selection-input>
146
148
  </th>
147
149
  <th scope="row">${row.name}</th>
148
- ${columns.map(columnHeading => html`<td>${formatter.format(row.data[columnHeading.toLowerCase()])}</td>`)}
150
+ ${columns.map(columnHeading => { const val = row.data[columnHeading.toLowerCase()]; return val ? html`<td>${formatter.format(val)}</td>` : null; }) }
151
+ <td>${[formatter.format(row.data.latitude), formatter.format(row.data.longitude)].join(', ')}</td>
149
152
  </tr>
150
153
  `)}
151
154
  </tbody>
@@ -162,7 +165,7 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
162
165
  _handlePagerLoadMore(e) {
163
166
  const startIndex = this._data.length + 1;
164
167
  for (let i = 0; i < e.target.pageSize; i++) {
165
- this._data.push({ name: `City ${startIndex + i}, Country ${startIndex + i}`, data: { 'city': `City ${startIndex + i}`, 'country': `Country ${startIndex + i}`, 'population': 26320000, 'size': 6340, 'elevation': 4 }, selected: false });
168
+ this._data.push({ name: `City ${startIndex + i}, Country ${startIndex + i}`, data: { 'city': `City ${startIndex + i}`, 'country': `Country ${startIndex + i}`, 'population': 26320000, 'size': 6340, 'elevation': 4, 'latitude': 3, 'longitude': 3 }, selected: false });
166
169
  }
167
170
  this.requestUpdate();
168
171
  e.detail.complete();
@@ -195,17 +198,31 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
195
198
  });
196
199
  }
197
200
 
198
- _renderDoubleSortButton(name) {
199
- const noSort = this._sortField?.toLowerCase() !== 'city' && this._sortField?.toLowerCase() !== 'country';
201
+ _renderDoubleSortButton(item1, item2) {
200
202
  return html`
201
203
  <th rowspan="${this.multiLine ? 2 : 1}" scope="col">
204
+ <d2l-table-col-sort-button
205
+ @click="${this._handleSort}"
206
+ ?desc="${this._sortDesc}"
207
+ ?nosort="${this._sortField !== item1.toLowerCase()}">${item1}</d2l-table-col-sort-button>
208
+ <d2l-table-col-sort-button
209
+ @click="${this._handleSort}"
210
+ ?desc="${this._sortDesc}"
211
+ ?nosort="${this._sortField !== item2.toLowerCase()}">${item2}</d2l-table-col-sort-button>
212
+ </th>
213
+ `;
214
+ }
215
+
216
+ _renderMenuSortButton(name, items) {
217
+ const noSort = !items.map(i => i.toLowerCase()).includes(this._sortField?.toLowerCase());
218
+ return html`
219
+ <th scope="col">
202
220
  <d2l-table-col-sort-button
203
221
  ?desc="${this._sortDesc}"
204
- ?nosort="${noSort}">${name}
205
- <d2l-table-col-sort-button-item slot="items" text="City, A to Z" data-field="city" @d2l-table-col-sort-button-item-change="${this._handleSortComplex}" value="1"></d2l-table-col-sort-button-item>
206
- <d2l-table-col-sort-button-item slot="items" text="City, Z to A" data-field="city" data-desc @d2l-table-col-sort-button-item-change="${this._handleSortComplex}" value="2"></d2l-table-col-sort-button-item>
207
- <d2l-table-col-sort-button-item slot="items" text="Country, A to Z" data-field="country" @d2l-table-col-sort-button-item-change="${this._handleSortComplex}" value="3"></d2l-table-col-sort-button-item>
208
- <d2l-table-col-sort-button-item slot="items" text="Country, Z to A" data-field="country" data-desc @d2l-table-col-sort-button-item-change="${this._handleSortComplex}" value="4"></d2l-table-col-sort-button-item>
222
+ ?nosort="${noSort}">
223
+ <span>${name}</span>${items.map((item, idx) => html`
224
+ <d2l-table-col-sort-button-item slot="items" text="${item}, ascending" data-field="${item.toLowerCase()}" @d2l-table-col-sort-button-item-change="${this._handleSortComplex}" value="${idx * 2 + 1}"></d2l-table-col-sort-button-item>
225
+ <d2l-table-col-sort-button-item slot="items" text="${item}, descending" data-field="${item.toLowerCase()}" data-desc @d2l-table-col-sort-button-item-change="${this._handleSortComplex}" value="${idx * 2 + 2}"></d2l-table-col-sort-button-item>`)}
209
226
  </d2l-table-col-sort-button>
210
227
  </th>
211
228
  `;
package/components/table/table-wrapper.js CHANGED
@@ -111,9 +111,7 @@ export const tableStyles = css`
111
111
  .d2l-table th.d2l-table-header-col-sortable-siblings d2l-table-col-sort-button {
112
112
  --d2l-table-col-sort-button-width: unset;
113
113
  }
114
- .d2l-table-header-col-sortable-no-sorted.d2l-table-header-col-sortable-siblings :last-child {
115
- padding-inline-end: calc(0.6rem + 18px);
116
- }
114
+
117
115
  @supports selector(:has(a, b)) {
118
116
  .d2l-table > * > tr > th:has(d2l-table-col-sort-button) {
119
117
  height: calc(var(--d2l-table-cell-overall-height) - var(--d2l-table-cell-col-sort-button-size-offset));
@@ -129,7 +127,8 @@ export const tableStyles = css`
129
127
  .d2l-table th d2l-table-col-sort-button[nosort] ~ :last-child {
130
128
  padding-inline-end: calc(0.6rem + 18px);
131
129
  }
132
- .d2l-table th d2l-table-col-sort-button:not([nosort]) ~ :last-child {
130
+ .d2l-table th d2l-table-col-sort-button:not([nosort]) ~ :last-child,
131
+ .d2l-table th d2l-table-col-sort-button:last-child:not([nosort]) {
133
132
  padding-inline-end: unset;
134
133
  }
135
134
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.62.2",
3
+ "version": "3.62.3",
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",