@brightspace-ui/core 3.62.2 → 3.62.3

Sign up to get free protection for your applications and to get access to all the features.
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",