@brightspace-ui/core 2.122.2 → 2.123.0

package/components/filter/README.md

@@ -195,6 +195,7 @@ The `d2l-filter-dimension-set` component is the main dimension type that will wo
 | `loading` | Boolean | Whether the values for this dimension are still loading and a loading spinner should be displayed |
 | `search-type` | String, default: `automatic` | `automatic` provides basic case-insensitive text comparison searching, `none` disables the search input, and `manual` fires an event for the consumer to handle the search and pass the keys of the values to be displayed |
 | `select-all` | Boolean | Whether to show a select all checkbox and selection summary for this dimension  |
+| `selected-first` | Boolean | Whether to render the selected items at the top of the filter  |
 | `selection-single` | Boolean | Whether only one value can be selected at a time for this dimension  |
 | `text` | String, required | Text for the dimension in the menu |
 | `value-only-active-filter-text` | Boolean | Whether to hide the dimension in the text sent to active filter subscribers |

package/components/filter/demo/filter.html

@@ -57,11 +57,11 @@
 			</template>
 		</d2l-demo-snippet>
 
-		<h2>Single Set Dimension - Header Text</h2>
+		<h2>Single Set Dimension - Header Text and Selected First</h2>
 		<d2l-demo-snippet>
 			<template>
 				<d2l-filter id="filter-single">
-					<d2l-filter-dimension-set key="course" introductory-text="Filter content by courses. Start typing any course name to explore." header-text="Skills Promoted at Your Company" text="Course" select-all>
+					<d2l-filter-dimension-set key="course" introductory-text="Filter content by courses. Start typing any course name to explore." header-text="Skills Promoted at Your Company" text="Course" select-all selected-first>
 						<d2l-filter-dimension-set-value key="art" text="Art" count="12"></d2l-filter-dimension-set-value>
 						<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" count="2" selected></d2l-filter-dimension-set-value>
 						<d2l-filter-dimension-set-value key="biology" text="Biology" count="15"></d2l-filter-dimension-set-value>
@@ -94,7 +94,7 @@
 						<d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
 						<d2l-filter-dimension-set-empty-state slot="search-empty-state" description="Search returned no results." action-text="Do something" action-href="https://d2l.com/"></d2l-filter-dimension-set-empty-state>
 					</d2l-filter-dimension-set>
-					<d2l-filter-dimension-set key="role" text="Role">
+					<d2l-filter-dimension-set key="role" text="Role" selected-first>
 						<d2l-filter-dimension-set-value key="admin" text="Admin" count="0"></d2l-filter-dimension-set-value>
 						<d2l-filter-dimension-set-value key="instructor" text="Instructor" count="22"></d2l-filter-dimension-set-value>
 						<d2l-filter-dimension-set-value key="student" text="Student" count="50"></d2l-filter-dimension-set-value>

package/components/filter/filter-dimension-set.js

@@ -41,6 +41,11 @@ class FilterDimensionSet extends LitElement {
 			 * @type {boolean}
 			 */
 			selectAll: { type: Boolean, attribute: 'select-all' },
+			/**
+			 * Whether to render the selected items at the top of the filter
+			 * @type {boolean}
+			 */
+			selectedFirst: { type: Boolean, attribute: 'selected-first' },
 			/**
 			 * Whether only one value can be selected at a time for this dimension
 			 * @type {boolean}
@@ -66,6 +71,7 @@ class FilterDimensionSet extends LitElement {
 		this.loading = false;
 		this.searchType = 'automatic';
 		this.selectAll = false;
+		this.selectedFirst = false;
 		this.selectionSingle = false;
 		this.text = '';
 		this.valueOnlyActiveFilterText = false;

package/components/filter/filter.js

@@ -275,6 +275,18 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		`;
 	}
 
+	update(changedProperties) {
+		if (
+			changedProperties.has('opened')
+			&& this.opened
+			&& this._dimensions.length === 1
+			&& this._dimensions[0].selectedFirst
+		) {
+			this._updateDimensionShouldBubble(this._dimensions[0]);
+		}
+		super.update(changedProperties);
+	}
+
 	requestFilterClearAll() {
 		this._handleClearAll();
 	}
@@ -505,6 +517,17 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 			listLabel = dimension.headerText;
 		}
 
+		let selectedListItems = nothing;
+		let listItems = nothing;
+		if (dimension.selectedFirst) {
+			if (listLabel) listLabel = this.localize('components.filter.selectedFirstListLabel', { headerText: dimension.headerText });
+			selectedListItems = dimension.values.filter(item => item.shouldBubble).map(item => this._createSetDimensionItem(item));
+
+			listItems = dimension.values.filter(item => !item.shouldBubble).map(item => this._createSetDimensionItem(item));
+		} else {
+			listItems = dimension.values.map(item => this._createSetDimensionItem(item));
+		}
+
 		return html`
 			${searchResults}
 			<d2l-list
@@ -515,25 +538,30 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				label="${ifDefined(listLabel)}"
 				?selection-single="${dimension.selectionSingle}"
 				separators="between">
+				${selectedListItems}
 				${listHeader}
-				${dimension.values.map(item => html`
-					<d2l-list-item
-						?selection-disabled="${item.disabled}"
-						?hidden="${item.hidden}"
-						key="${item.key}"
-						label="${item.text}"
-						selectable
-						?selected="${item.selected}">
-						<div class="d2l-filter-dimension-set-value d2l-body-compact">
-							<div class="d2l-filter-dimension-set-value-text">${item.text}</div>
-							${item.count !== undefined ? html`<div class="d2l-body-small">(${formatNumber(item.count)})</div>` : nothing}
-						</div>
-					</d2l-list-item>
-				`)}
+				${listItems}
 			</d2l-list>
 		`;
 	}
 
+	_createSetDimensionItem(item) {
+		return html`
+			<d2l-list-item
+				?selection-disabled="${item.disabled}"
+				?hidden="${item.hidden}"
+				key="${item.key}"
+				label="${item.text}"
+				selectable
+				?selected="${item.selected}">
+				<div class="d2l-filter-dimension-set-value d2l-body-compact">
+					<div class="d2l-filter-dimension-set-value-text">${item.text}</div>
+					${item.count !== undefined ? html`<div class="d2l-body-small">(${formatNumber(item.count)})</div>` : nothing}
+				</div>
+			</d2l-list-item>
+		`;
+	}
+
 	_dispatchChangeEvent(dimension, change) {
 		this._setDimensionChangeEvent(dimension, change, false);
 
@@ -689,6 +717,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		this._activeDimensionKey = e.detail.sourceView.getAttribute('data-key');
 		const dimension = this._dimensions.find(dimension => dimension.key === this._activeDimensionKey);
 		if (dimension.introductoryText) announce(dimension.introductoryText);
+		if (dimension.selectedFirst) this._updateDimensionShouldBubble(dimension);
 		this._dispatchDimensionFirstOpenEvent(this._activeDimensionKey);
 	}
 
@@ -720,6 +749,10 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		const searchValue = e.detail.value.trim();
 		dimension.searchValue = searchValue;
 
+		if (dimension.selectedFirst) {
+			this._updateDimensionShouldBubble(dimension);
+		}
+
 		if (dimension.searchType === 'automatic' || searchValue === '') {
 			this._performDimensionSearch(dimension);
 		} else if (dimension.searchType === 'manual') {
@@ -763,6 +796,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 					info.introductoryText = dimension.introductoryText;
 					info.searchType = dimension.searchType;
 					info.searchValue = '';
+					info.selectedFirst = dimension.selectedFirst;
 					info.selectionSingle = dimension.selectionSingle;
 					if (dimension.selectAll && !dimension.selectionSingle) info.selectAllIdPrefix = SET_DIMENSION_ID_PREFIX;
 					info.searchEmptyState = dimension.getSearchEmptyState();
@@ -917,6 +951,12 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		subscribers.forEach(subscriber => subscriber.updateActiveFilters(this.id, this._activeFilters));
 	}
 
+	_updateDimensionShouldBubble(dimension) {
+		for (const value of dimension.values) {
+			value.shouldBubble = value.selected;
+		}
+	}
+
 }
 
 customElements.define('d2l-filter', Filter);

package/custom-elements.json

@@ -3796,6 +3796,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "selected-first",
+          "description": "Whether to render the selected items at the top of the filter",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selection-single",
           "description": "Whether only one value can be selected at a time for this dimension",
@@ -3857,6 +3863,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "selectedFirst",
+          "attribute": "selected-first",
+          "description": "Whether to render the selected items at the top of the filter",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionSingle",
           "attribute": "selection-single",

package/lang/ar.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "عوامل التصفية",
 	"components.filter.noFilters": "ما من عوامل تصفية متوفرة",
 	"components.filter.searchResults": "{number, plural, =0 {ما من نتائج بحث} one {{number} نتيجة بحث}‏ other {{number} من نتائج البحث}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "التصفية حسب: {filterName}",
 	"components.form-element.defaultError": "{label} غير صالحة.",
 	"components.form-element.defaultFieldLabel": "الحقل",

package/lang/cy.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "Hidlyddion",
 	"components.filter.noFilters": "Dim hidlyddion ar gael",
 	"components.filter.searchResults": "{number, plural, =0 {Dim canlyniadau chwilio} one {{number} canlyniad chwilio} other {{number} canlyniadau chwilio}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Hidlo yn ôl: {filterName}",
 	"components.form-element.defaultError": "Mae {label} yn annilys.",
 	"components.form-element.defaultFieldLabel": "Maes",

package/lang/da.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "Filtre",
 	"components.filter.noFilters": "Ingen tilgængelige filtre",
 	"components.filter.searchResults": "{number, plural, =0 {Ingen søgeresultater} one {{number} søgeresultat} other {{number} søgeresultater}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Filtrer efter: {filterName}",
 	"components.form-element.defaultError": "{label} er ugyldigt.",
 	"components.form-element.defaultFieldLabel": "Felt",

package/lang/de.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "Filter",
 	"components.filter.noFilters": "Keine verfügbaren Filter",
 	"components.filter.searchResults": "{number, plural, =0 {Kein Suchergebnis} one {{number} Suchergebnis} other {{number} Suchergebnisse}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Filtern nach: {filterName}",
 	"components.form-element.defaultError": "{label} ist ungültig.",
 	"components.form-element.defaultFieldLabel": "Feld",

package/lang/en-gb.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "Filters",
 	"components.filter.noFilters": "No available filters",
 	"components.filter.searchResults": "{number, plural, =0 {No search results} one {{number} search result} other {{number} search results}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Filter by: {filterName}",
 	"components.form-element.defaultError": "{label} is invalid.",
 	"components.form-element.defaultFieldLabel": "Field",

package/lang/en.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "Filters",
 	"components.filter.noFilters": "No available filters",
 	"components.filter.searchResults": "{number, plural, =0 {No search results} one {{number} search result} other {{number} search results}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Filter by: {filterName}",
 	"components.form-element.defaultError": "{label} is invalid.",
 	"components.form-element.defaultFieldLabel": "Field",

package/lang/es-es.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "Filtros",
 	"components.filter.noFilters": "No hay filtros disponibles",
 	"components.filter.searchResults": "{number, plural, =0 {No hay resultados de búsqueda} one {{number} resultado de búsqueda} other {{number} resultados de búsqueda}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Filtrar por: {filterName}",
 	"components.form-element.defaultError": "{label} no es válido.",
 	"components.form-element.defaultFieldLabel": "Campo",

package/lang/es.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "Filtros",
 	"components.filter.noFilters": "No hay filtros disponibles",
 	"components.filter.searchResults": "{number, plural, =0 {No se encontraron resultados de búsqueda} one {{number} resultado de búsqueda} other {{number} resultados de búsqueda}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Filtrar por: {filterName}",
 	"components.form-element.defaultError": "{label} no es válida.",
 	"components.form-element.defaultFieldLabel": "Campo",

package/lang/fr-fr.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "Filtres",
 	"components.filter.noFilters": "Aucun filtre disponible",
 	"components.filter.searchResults": "{number, plural, =0 {Aucun résultat de recherche} one {{number} résultat de recherche} other {{number} résultats de recherche}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Filtrer par : {filterName}",
 	"components.form-element.defaultError": "{label} n'est pas valide.",
 	"components.form-element.defaultFieldLabel": "Champ",

package/lang/fr.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "Filtres",
 	"components.filter.noFilters": "Aucun filtre disponible",
 	"components.filter.searchResults": "{number, plural, =0 {Aucun résultat de recherche} one {{number} résultat de recherche} other {{number} résultats de recherche}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Filtrer par : {filterName}",
 	"components.form-element.defaultError": "{label} n'est pas valide.",
 	"components.form-element.defaultFieldLabel": "Champ",

package/lang/hi.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "फ़िल्टर्स",
 	"components.filter.noFilters": "कोई उपलब्ध फ़िल्टर्स नहीं",
 	"components.filter.searchResults": "{number, plural, =0 {कोई खोज परिणाम नहीं} one {{number} खोज परिणाम} other {{number} खोज परिणाम}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "इसके अनुसार फ़िल्टर करें: {filterName}",
 	"components.form-element.defaultError": "{label} अमान्य है।",
 	"components.form-element.defaultFieldLabel": "फ़ील्ड",

package/lang/ja.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "フィルタ",
 	"components.filter.noFilters": "使用可能なフィルタはありません",
 	"components.filter.searchResults": "{number, plural, =0 {検索結果なし} other {{number} 件の検索結果}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "フィルタ条件: {filterName}",
 	"components.form-element.defaultError": "{label} は無効です。",
 	"components.form-element.defaultFieldLabel": "フィールド",

package/lang/ko.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "개 필터",
 	"components.filter.noFilters": "사용 가능한 필터가 없습니다",
 	"components.filter.searchResults": "{number, plural, =0 {검색 결과 없음} other {{number}개 검색 결과}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "필터 기준: {filterName}",
 	"components.form-element.defaultError": "{label}이(가) 잘못되었습니다.",
 	"components.form-element.defaultFieldLabel": "필드",

package/lang/nl.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "Filters", // mfv-translated
 	"components.filter.noFilters": "Geen beschikbare filters",
 	"components.filter.searchResults": "{number, plural, =0 {Geen zoekresultaten} one {{number} zoekresultaat} other {{number} zoekresultaten}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Filter op {filterName}",
 	"components.form-element.defaultError": "{label} is ongeldig.",
 	"components.form-element.defaultFieldLabel": "Veld",

package/lang/pt.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "Filtros",
 	"components.filter.noFilters": "Não há filtros disponíveis",
 	"components.filter.searchResults": "{number, plural, =0 {Sem resultados para a pesquisa} one {{number} resultado para a pesquisa} other {{number} resultados para a pesquisa}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Filtrar por: {filterName}",
 	"components.form-element.defaultError": "{label} é inválido.",
 	"components.form-element.defaultFieldLabel": "Campo",

package/lang/sv.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "Filter",
 	"components.filter.noFilters": "Inga tillgängliga filter",
 	"components.filter.searchResults": "{number, plural, =0 {Inga sökresultat} one {{number} sökresultat} other {{number} sökresultat}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Filtrera efter: {filterName}",
 	"components.form-element.defaultError": "{label} är ogiltig.",
 	"components.form-element.defaultFieldLabel": "Fält",

package/lang/tr.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "Filtre",
 	"components.filter.noFilters": "Uygun filtre yok",
 	"components.filter.searchResults": "{number, plural, =0 {Arama sonucu yok} one {{number} arama sonucu} other {{number} arama sonucu}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Filtreleme ölçütü: {filterName}",
 	"components.form-element.defaultError": "{label} geçersiz.",
 	"components.form-element.defaultFieldLabel": "Alan",

package/lang/zh-cn.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "个筛选条件",
 	"components.filter.noFilters": "无可用筛选器",
 	"components.filter.searchResults": "{number, plural, =0 {无搜索结果} other {{number} 个搜索结果}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "筛选依据：{filterName}",
 	"components.form-element.defaultError": "{label} 无效。",
 	"components.form-element.defaultFieldLabel": "字段",

package/lang/zh-tw.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "篩選器",
 	"components.filter.noFilters": "沒有可用的篩選條件",
 	"components.filter.searchResults": "{number, plural, =0 {無搜尋結果} other {{number} 個搜尋結果}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "按此條件篩選：{filterName}",
 	"components.form-element.defaultError": "{label} 無效。",
 	"components.form-element.defaultFieldLabel": "欄位",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.122.2",
+  "version": "2.123.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",