@brightspace-ui-labs/facet-filter-sort 6.0.0 → 6.1.0

package/README.md

@@ -135,7 +135,7 @@ Note that for the header and opener text overrides, if the terms are to reflect
 
 ### d2l-labs-applied-filters
 
-A multi-select-list allowing the user to see (and remove) the currently applied filters.  Works with the `d2l-labs-filter-dropdown` above.
+A tag-list allowing the user to see (and remove) the currently applied filters.  Works with the `d2l-labs-filter-dropdown` above.
 
 NOTE: This component uses the `slotchange` event and so will not work if you require IE support
 

package/components/applied-filters/applied-filters.js

@@ -1,22 +1,17 @@
-import '@brightspace-ui/core/components/button/button-subtle.js';
-import '@brightspace-ui-labs/multi-select/multi-select-list.js';
-import '@brightspace-ui-labs/multi-select/multi-select-list-item.js';
-import { css, html, LitElement } from 'lit';
-import { announce } from '@brightspace-ui/core/helpers/announce.js';
+import '@brightspace-ui/core/components/tag-list/tag-list.js';
+import '@brightspace-ui/core/components/tag-list/tag-list-item.js';
+import { css, html, LitElement, nothing } from 'lit';
 import { bodyCompactStyles } from '@brightspace-ui/core/components/typography/styles.js';
-import { FilterLocalizeMixin } from '../localize-mixin.js';
 import { getComposedChildren } from '@brightspace-ui/core/helpers/dom.js';
-import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.js';
 
 const DROPDOWN_NAME = 'D2L-LABS-FILTER-DROPDOWN';
 const DROPDOWN_CATEGORY_NAME = 'D2L-LABS-FILTER-DROPDOWN-CATEGORY';
 const DROPDOWN_OPTION_NAME = 'D2L-LABS-FILTER-DROPDOWN-OPTION';
-const CLEAR_FILTERS_THRESHOLD = 4;
 
 /**
- * A multi-select-list allowing the user to see (and remove) the currently applied filters.
+ * A tag-list allowing the user to see (and remove) the currently applied filters.
  */
-class D2lLabsAppliedFilters extends RtlMixin(FilterLocalizeMixin(LitElement)) {
+class D2lLabsAppliedFilters extends LitElement {
 	static get properties() {
 		return {
 			/**
@@ -39,42 +34,6 @@ class D2lLabsAppliedFilters extends RtlMixin(FilterLocalizeMixin(LitElement)) {
 				display: block;
 			}
 
-			d2l-labs-multi-select-list {
-				flex: 1;
-			}
-
-			.d2l-labs-applied-filters-wrapper {
-				display: flex;
-			}
-
-			.d2l-labs-applied-filters-label {
-				display: inline-block;
-				font-weight: bold;
-				margin-right: 0.25rem;
-				padding-top: 0.3rem;
-			}
-
-			:host([dir="rtl"]) .d2l-labs-applied-filters-label {
-				margin-left: 0.25rem;
-				margin-right: 0;
-			}
-
-			.d2l-labs-applied-filters-none-label {
-				color: var(--d2l-color-corundum);
-				display: inline-block;
-				font-style: italic;
-				padding-top: 0.3rem;
-			}
-
-			#d2l-clear-filters-button {
-				margin-left: 3px;
-				margin-right: 3px;
-			}
-
-			#d2l-list-holder {
-				flex: 1;
-			}
-
 			:host([hidden]) {
 				display: none;
 			}
@@ -102,31 +61,21 @@ class D2lLabsAppliedFilters extends RtlMixin(FilterLocalizeMixin(LitElement)) {
 	}
 
 	render() {
-		const filters = this._selectedEntries && this._selectedEntries.length > 0 ?
-			html`<d2l-labs-multi-select-list
-				collapsable
-				aria-labelledby="d2l-labs-applied-filters-label"
-			>
-				${(this._selectedEntries || []).map((x, index) => html`
-					<d2l-labs-multi-select-list-item
-						text="${x.text}"
-						deletable
-						index="${index}"
-						@d2l-labs-multi-select-list-item-deleted="${this._multiSelectItemDeleted}"
-					>
-					</d2l-labs-multi-select-list-item>
-				`)}
-			</d2l-labs-multi-select-list>`
-			: null;
-
-		return html`
-			<div class="d2l-labs-applied-filters-wrapper">
-				<div id="d2l-list-holder">
-					${filters}
-					<d2l-button-subtle id="d2l-clear-filters-button" text="${this.localize('clearFilters')}" ?hidden="${this._selectedEntries.length < CLEAR_FILTERS_THRESHOLD}" @click="${this._clearFiltersClicked}"></d2l-button-subtle>
-				</div>
-			</div>
-		`;
+		if (!(this._selectedEntries.length)) return nothing;
+
+		return html`<d2l-tag-list
+			clearable
+			description="${this.labelText}"
+			@d2l-tag-list-clear="${this._clearFiltersClicked}">
+			${(this._selectedEntries || []).map((x, index) => html`
+				<d2l-tag-list-item
+					text="${x.text}"
+					key="${index}"
+					@d2l-tag-list-item-clear="${this._multiSelectItemDeleted}"
+				>
+				</d2l-tag-list-item>
+			`)}
+		</d2l-tag-list>`;
 	}
 
 	updated(changedProperties) {
@@ -140,8 +89,6 @@ class D2lLabsAppliedFilters extends RtlMixin(FilterLocalizeMixin(LitElement)) {
 		if (!dropdown) { return; }
 		dropdown.clearFilters();
 		dropdown.focus();
-
-		announce(this.localize('allFiltersRemoved'));
 	}
 
 	_clearSelected() {
@@ -192,8 +139,7 @@ class D2lLabsAppliedFilters extends RtlMixin(FilterLocalizeMixin(LitElement)) {
 	}
 
 	_multiSelectItemDeleted(e) {
-		announce(this.localize('filterRemoved', 'filterText', e.target.text));
-		this._selectedEntries[e.target.getAttribute('index')].deselect();
+		this._selectedEntries[e.target.getAttribute('key')].deselect();
 	}
 
 	_setFilter() {

package/custom-elements.json

@@ -4,7 +4,7 @@
     {
       "name": "d2l-labs-applied-filters",
       "path": "./components/applied-filters/applied-filters.js",
-      "description": "A multi-select-list allowing the user to see (and remove) the currently applied filters.",
+      "description": "A tag-list allowing the user to see (and remove) the currently applied filters.",
       "attributes": [
         {
           "name": "for",
@@ -31,10 +31,6 @@
           "description": "Optional: The text displayed in this component's label. Default: \"Applied Filters:\"",
           "type": "string",
           "default": "\"\""
-        },
-        {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
         }
       ]
     },
@@ -72,9 +68,14 @@
           "type": "number",
           "default": "0"
         },
+        {
+          "name": "labelledBy",
+          "description": "Id of the tab that labels this panel",
+          "type": "string"
+        },
         {
           "name": "text",
-          "description": "REQUIRED: The text used for the tab, as well as labelling the panel",
+          "description": "ACCESSIBILITY: REQUIRED: The text used for the tab, as well as labelling the panel",
           "type": "string"
         },
         {
@@ -126,13 +127,15 @@
           "default": "0"
         },
         {
-          "name": "documentLocaleSettings",
-          "default": "\"getDocumentLocaleSettings()\""
+          "name": "labelledBy",
+          "attribute": "labelledBy",
+          "description": "Id of the tab that labels this panel",
+          "type": "string"
         },
         {
           "name": "text",
           "attribute": "text",
-          "description": "REQUIRED: The text used for the tab, as well as labelling the panel",
+          "description": "ACCESSIBILITY: REQUIRED: The text used for the tab, as well as labelling the panel",
           "type": "string"
         },
         {
@@ -206,7 +209,7 @@
         },
         {
           "name": "description",
-          "description": "Provide a description for the menu item that will be used by screen readers",
+          "description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
           "type": "string"
         },
         {
@@ -244,7 +247,7 @@
         {
           "name": "description",
           "attribute": "description",
-          "description": "Provide a description for the menu item that will be used by screen readers",
+          "description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
           "type": "string"
         },
         {
@@ -469,7 +472,7 @@
         },
         {
           "name": "description",
-          "description": "Provide a description for the menu item that will be used by screen readers",
+          "description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
           "type": "string"
         },
         {
@@ -502,7 +505,7 @@
         {
           "name": "description",
           "attribute": "description",
-          "description": "Provide a description for the menu item that will be used by screen readers",
+          "description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
           "type": "string"
         },
         {

package/lang/ar.js

@@ -3,9 +3,7 @@
 export default {
 	"appliedFilters": "عوامل التصفية المطبقة:",
 	"noActiveFilters": "لا توجد عوامل تصفية نشطة",
-	"filterRemoved": "تمت إزالة عامل التصفية {filterText}",
 	"clearFilters": "مسح عوامل التصفية",
-	"allFiltersRemoved": "تمت إزالة كل عوامل التصفية",
 	"categoryTitleMultiple": "{title} ({numSelected})",
 	"searchBy": "بحث حسب {category}",
 	"clear": "مسح",

package/lang/cy.js

@@ -3,9 +3,7 @@
 export default {
 	"appliedFilters": "Hidlyddion wedi’u Gosod:",
 	"noActiveFilters": "Dim hidlwyr gweithredol",
-	"filterRemoved": "Tynnwyd hidlydd {filterText}",
 	"clearFilters": "Clirio hidlwyr",
-	"allFiltersRemoved": "Tynnwyd yr holl hidlyddion",
 	"categoryTitleMultiple": "{title} ({numSelected})",
 	"searchBy": "Chwilio yn ôl {category}",
 	"clear": "Clirio",

package/lang/da.js

@@ -3,9 +3,7 @@
 export default {
 	"appliedFilters": "Anvende filtre:",
 	"noActiveFilters": "Ingen aktive filtre",
-	"filterRemoved": "Filter {filterText} fjernet",
 	"clearFilters": "Ryd filtre",
-	"allFiltersRemoved": "Alle filtre fjernet",
 	"categoryTitleMultiple": "{title} ({numSelected})",
 	"searchBy": "Søg efter {category}",
 	"clear": "Ryd",

package/lang/de.js

@@ -3,9 +3,7 @@
 export default {
 	"appliedFilters": "Angewendete Filter:",
 	"noActiveFilters": "Keine Filter aktiv",
-	"filterRemoved": "Filter {filterText} entfernt",
 	"clearFilters": "Filter löschen",
-	"allFiltersRemoved": "Alle Filter wurden entfernt",
 	"categoryTitleMultiple": "{title} ({numSelected})",
 	"searchBy": "Nach {category} suchen",
 	"clear": "Löschen",

package/lang/en-gb.js

@@ -3,9 +3,7 @@
 export default {
 	"appliedFilters": "Applied Filters:",
 	"noActiveFilters": "No active filters",
-	"filterRemoved": "Filter {filterText} removed",
 	"clearFilters": "Clear filters",
-	"allFiltersRemoved": "All filters removed",
 	"categoryTitleMultiple": "{title} ({numSelected})",
 	"searchBy": "Search by {category}",
 	"clear": "Clear",

package/lang/en.js

@@ -3,9 +3,7 @@
 export default {
 	"appliedFilters": "Applied Filters:",
 	"noActiveFilters": "No active filters",
-	"filterRemoved": "Filter {filterText} removed",
 	"clearFilters": "Clear filters",
-	"allFiltersRemoved": "All filters removed",
 	"categoryTitleMultiple": "{title} ({numSelected})",
 	"searchBy": "Search by {category}",
 	"clear": "Clear",

package/lang/es-es.js

@@ -3,9 +3,7 @@
 export default {
 	"appliedFilters": "Filtros aplicados:",
 	"noActiveFilters": "No hay filtros activos",
-	"filterRemoved": "Filtro {filterText} eliminado",
 	"clearFilters": "Borrar filtros",
-	"allFiltersRemoved": "Se han eliminado todos los filtros",
 	"categoryTitleMultiple": "{title} ({numSelected})",
 	"searchBy": "Buscar por {category}",
 	"clear": "Borrar",

package/lang/es.js

@@ -3,9 +3,7 @@
 export default {
 	"appliedFilters": "Filtros aplicados:",
 	"noActiveFilters": "No hay filtros activos",
-	"filterRemoved": "Filtro {filterText} eliminado",
 	"clearFilters": "Borrar filtros",
-	"allFiltersRemoved": "Todos los filtros eliminados",
 	"categoryTitleMultiple": "{title} ({numSelected})",
 	"searchBy": "Buscar por {category}",
 	"clear": "Borrar",

package/lang/fr-fr.js

@@ -3,9 +3,7 @@
 export default {
 	"appliedFilters": "Filtres appliqués :",
 	"noActiveFilters": "Aucun filtre actif",
-	"filterRemoved": "Filtre {filterText} supprimé",
 	"clearFilters": "Supprimer les filtres",
-	"allFiltersRemoved": "Tous les filtres ont été supprimés",
 	"categoryTitleMultiple": "{title} ({numSelected})",
 	"searchBy": "Rechercher par {category}",
 	"clear": "Effacer",

package/lang/fr.js

@@ -3,9 +3,7 @@
 export default {
 	"appliedFilters": "Filtres appliqués :",
 	"noActiveFilters": "Aucun filtre actif",
-	"filterRemoved": "Filtre {filterText} retiré",
 	"clearFilters": "Effacer les filtres",
-	"allFiltersRemoved": "Tous les filtres sont retirés",
 	"categoryTitleMultiple": "{title} ({numSelected})",
 	"searchBy": "Rechercher par {category}",
 	"clear": "Effacer",

package/lang/haw.js

@@ -0,0 +1,16 @@
+/* eslint quotes: 0 */
+
+export default {
+	"appliedFilters": "Nā kānana i hoʻohana ʻia:",
+	"noActiveFilters": "ʻAʻohe kānana hana",
+	"clearFilters": "Holoi i nā kānana",
+	"categoryTitleMultiple": "{title} ({numSelected})",
+	"searchBy": "Huli ma {category}",
+	"clear": "Akaka",
+	"filter": "Kānana",
+	"filterBy": "kānana e",
+	"filterMultiple": "Kānana: {numOptions} kānana",
+	"filterSingle": "Kānana: 1 kānana",
+	"sort": "ʻano ʻano",
+	"sortWithOption": "Hoʻokaʻawale: {option}"
+};

package/lang/hi.js

@@ -3,9 +3,7 @@
 export default {
 	"appliedFilters": "लगाए गए फ़िल्टर:",
 	"noActiveFilters": "कोई सक्रिय फ़िल्टर नहीं हैं",
-	"filterRemoved": "फ़िल्टर {filterText} निकाला गया",
 	"clearFilters": "फ़िल्टर साफ़ करें",
-	"allFiltersRemoved": "सभी फ़िल्टर निकाले गए",
 	"categoryTitleMultiple": "{title} ({numSelected})",
 	"searchBy": "{category} के अनुसार खोजें",
 	"clear": "साफ़ करें",

package/lang/ja.js

@@ -3,9 +3,7 @@
 export default {
 	"appliedFilters": "適用されるフィルタ:",
 	"noActiveFilters": "アクティブフィルタなし",
-	"filterRemoved": "フィルタ {filterText} が削除されました",
 	"clearFilters": "フィルタのクリア",
-	"allFiltersRemoved": "削除されたすべてのフィルタ",
 	"categoryTitleMultiple": "{title}（{numSelected}）",
 	"searchBy": "{category} で検索",
 	"clear": "クリア",

package/lang/ko.js

@@ -3,9 +3,7 @@
 export default {
 	"appliedFilters": "적용된 필터:",
 	"noActiveFilters": "활성 필터가 없음",
-	"filterRemoved": "필터 {filterText} 제거됨",
 	"clearFilters": "필터 지우기",
-	"allFiltersRemoved": "모든 필터가 제거되었습니다.",
 	"categoryTitleMultiple": "{title} ({numSelected})",
 	"searchBy": "{category}별 검색",
 	"clear": "지우기",

package/lang/nl.js

@@ -3,9 +3,7 @@
 export default {
 	"appliedFilters": "Toegepaste filters:",
 	"noActiveFilters": "Geen actieve filters",
-	"filterRemoved": "Filter {filterText} verwijderd",
 	"clearFilters": "Filters wissen",
-	"allFiltersRemoved": "Alle filters verwijderd",
 	"categoryTitleMultiple": "{title} ({numSelected})",
 	"searchBy": "Zoeken op {category}",
 	"clear": "Wissen",

package/lang/pt.js

@@ -3,9 +3,7 @@
 export default {
 	"appliedFilters": "Filtros aplicados:",
 	"noActiveFilters": "Nenhum filtro ativo",
-	"filterRemoved": "Filtro {filterText} removido",
 	"clearFilters": "Limpar filtros",
-	"allFiltersRemoved": "Todos os filtros foram removidos",
 	"categoryTitleMultiple": "{title} ({numSelected})",
 	"searchBy": "Pesquisar por {category}",
 	"clear": "Limpar",

package/lang/sv.js

@@ -3,9 +3,7 @@
 export default {
 	"appliedFilters": "Tillämpade filter:",
 	"noActiveFilters": "Inga aktiva filter",
-	"filterRemoved": "Filtret {filterText} har tagits bort",
 	"clearFilters": "Rensa filter",
-	"allFiltersRemoved": "Alla filter har tagits bort",
 	"categoryTitleMultiple": "{title} ({numSelected})",
 	"searchBy": "Sök efter {category}",
 	"clear": "Rensa",

package/lang/tr.js

@@ -3,9 +3,7 @@
 export default {
 	"appliedFilters": "Uygulanan Filtreler:",
 	"noActiveFilters": "Etkin filtre yok",
-	"filterRemoved": "{filterText} filtresi kaldırıldı",
 	"clearFilters": "Filtreleri temizle",
-	"allFiltersRemoved": "Tüm filtreler kaldırıldı",
 	"categoryTitleMultiple": "{title} ({numSelected})",
 	"searchBy": "{category} kategorisine göre ara",
 	"clear": "Temizle",

package/lang/zh-cn.js

@@ -3,9 +3,7 @@
 export default {
 	"appliedFilters": "已应用筛选器：",
 	"noActiveFilters": "没有活动的筛选器",
-	"filterRemoved": "已移除筛选条件 {filterText}",
 	"clearFilters": "清除筛选",
-	"allFiltersRemoved": "所有筛选器均已移除",
 	"categoryTitleMultiple": "{title} ({numSelected})",
 	"searchBy": "按 {category} 搜索",
 	"clear": "清除",

package/lang/zh-tw.js

@@ -3,9 +3,7 @@
 export default {
 	"appliedFilters": "套用篩選器：",
 	"noActiveFilters": "沒有啟用中的篩選器",
-	"filterRemoved": "已移除篩選器 {filterText}",
 	"clearFilters": "清除篩選器",
-	"allFiltersRemoved": "已移除所有篩選器",
 	"categoryTitleMultiple": "{title} ({numSelected})",
 	"searchBy": "依 {category} 搜尋",
 	"clear": "清除",

package/package.json

@@ -37,9 +37,8 @@
     "lit-analyzer": "^1",
     "stylelint": "^15"
   },
-  "version": "6.0.0",
+  "version": "6.1.0",
   "dependencies": {
-    "@brightspace-ui-labs/multi-select": "^7",
     "@brightspace-ui/core": "^3",
     "@brightspace-ui/localize-behavior": "^2",
     "@polymer/polymer": "^3",