@brightspace-ui-labs/facet-filter-sort 5.3.0 → 5.4.0

package/README.md

@@ -31,7 +31,6 @@ npm install @brightspace-ui-labs/facet-filter-sort
 - [d2l-labs-search-facets](#d2l-labs-search-facets)
 - [d2l-labs-search-results-count](#d2l-labs-search-results-count)
 - [d2l-labs-sort-by-dropdown](#d2l-labs-sort-by-dropdown)
-- [d2l-labs-applied-core-filters](#d2l-labs-applied-core-filters)
 
 ### d2l-labs-search-facets
 
@@ -61,7 +60,6 @@ To Do
 
 - [d2l-labs-filter-dropdown](#d2l-labs-filter-dropdown)
 - [d2l-labs-applied-filters](#d2l-labs-applied-filters)
-- [d2l-labs-applied-core-filters](#d2l-labs-applied-core-filters)
 
 ### d2l-labs-filter-dropdown
 
@@ -157,7 +155,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. If you are using `d2l-filter` from `core`, see [d2l-labs-applied-core-filters](#d2l-labs-applied-core-filters).
+A multi-select-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
 
@@ -178,28 +176,6 @@ This also works if the `d2l-labs-filter-dropdown` is a child in the shadow-dom o
 <d2l-labs-filter-dropdown id="filter"> ... </d2l-labs-filter-dropdown>
 ```
 
-### d2l-labs-applied-core-filters
-
-**DEPRECATED: Use [`d2l-filter-tags`](https://github.com/BrightspaceUI/core/tree/main/components/filter#tags-for-applied-filters-d2l-filter-tags) in `BrightspaceUI/core`.**
-
-The same design as the deprecated `d2l-labs-applied-filters` above, but this version works with the `d2l-filter` component in `core`. It supports hooking up to multiple filters and will be migrated to `core` once designs are finalized.
-
-#### Attributes
-
-- `filter-ids`: Ids (space-delimited) of the filter components to subscribe to
-- `label-text` (optional): The text displayed in this component's label. Defaults to "Applied Filters:".
-
-#### Usage
-
-Set the `filter-ids` param to the ids of the `d2l-filter`s that you want to track.
-The `d2l-filter`s must be in the same DOM scope.
-
-```html
-<d2l-filter id="course"> ... </d2l-filter>
-<d2l-filter id="role"> ... </d2l-filter>
-<d2l-labs-applied-core-filters filter-ids="course role"></d2l-labs-applied-core-filters>
-```
-
 ## Developing
 
 After cloning the repo, run `npm install` to install dependencies.

package/custom-elements.json

@@ -1,39 +1,6 @@
 {
   "version": "experimental",
   "tags": [
-    {
-      "name": "d2l-labs-applied-core-filters",
-      "path": "./components/applied-filters/applied-core-filters.js",
-      "description": "A multi-select-list allowing the user to see (and remove) the currently applied filters, adjusted to work with the new core d2l-filter.",
-      "attributes": [
-        {
-          "name": "filter-ids",
-          "description": "Ids (space-delimited) of the filter components to subscribe to",
-          "type": "string"
-        },
-        {
-          "name": "label-text",
-          "description": "Optional: The text displayed in this component's label. Default: \"Applied Filters:\"",
-          "type": "string",
-          "default": "\"\""
-        }
-      ],
-      "properties": [
-        {
-          "name": "filterIds",
-          "attribute": "filter-ids",
-          "description": "Ids (space-delimited) of the filter components to subscribe to",
-          "type": "string"
-        },
-        {
-          "name": "labelText",
-          "attribute": "label-text",
-          "description": "Optional: The text displayed in this component's label. Default: \"Applied Filters:\"",
-          "type": "string",
-          "default": "\"\""
-        }
-      ]
-    },
     {
       "name": "d2l-labs-applied-filters",
       "path": "./components/applied-filters/applied-filters.js",
@@ -64,6 +31,10 @@
           "description": "Optional: The text displayed in this component's label. Default: \"Applied Filters:\"",
           "type": "string",
           "default": "\"\""
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
         }
       ]
     },
@@ -154,6 +125,10 @@
           "type": "number",
           "default": "0"
         },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
+        },
         {
           "name": "text",
           "attribute": "text",

package/package.json

@@ -44,7 +44,7 @@
     "sinon": "^13",
     "stylelint": "^14"
   },
-  "version": "5.3.0",
+  "version": "5.4.0",
   "dependencies": {
     "@brightspace-ui/core": "^2",
     "@brightspace-ui/localize-behavior": "^2",

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

@@ -1,154 +0,0 @@
-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-element';
-import { announce } from '@brightspace-ui/core/helpers/announce.js';
-import { bodyCompactStyles } from '@brightspace-ui/core/components/typography/styles.js';
-import { FilterLocalizeMixin } from '../localize-mixin.js';
-import { IdSubscriberController } from '@brightspace-ui/core/controllers/subscriber/subscriberControllers.js';
-import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.js';
-
-const CLEAR_FILTERS_THRESHOLD = 4;
-
-/**
- * A multi-select-list allowing the user to see (and remove) the currently applied filters, adjusted to work with the new core d2l-filter.
- */
-class D2lLabsAppliedCoreFilters extends RtlMixin(FilterLocalizeMixin(LitElement)) {
-	static get properties() {
-		return {
-			/**
-			 * Ids (space-delimited) of the filter components to subscribe to
-			 * @type {string}
-			 */
-			filterIds: { type: String, attribute: 'filter-ids' },
-			/**
-			 * Optional: The text displayed in this component's label. Default: "Applied Filters:"
-			 */
-			labelText: { type: String, attribute: 'label-text' }
-		};
-	}
-
-	static get styles() {
-		return [bodyCompactStyles, css`
-			:host {
-				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;
-			}
-
-			[hidden] {
-				display: none;
-			}
-		`];
-	}
-
-	constructor() {
-		super();
-		this.labelText = '';
-
-		this._allActiveFilters = new Map();
-		this._filters = new IdSubscriberController(this,
-			{ onUnsubscribe: this._removeLostFilter.bind(this) },
-			{ idPropertyName: 'filterIds' }
-		);
-	}
-
-	render() {
-		let numActiveFilters = 0;
-		const allActiveFilters = Array.from(this._allActiveFilters);
-		let filters = html`
-			<d2l-labs-multi-select-list
-				collapsable
-				aria-labelledby="d2l-labs-applied-filters-label">
-				${allActiveFilters.map(filter => filter[1].map((value, index) => { numActiveFilters++; return html`
-					<d2l-labs-multi-select-list-item
-						text="${value.text}"
-						deletable
-						data-filter-id="${filter[0]}"
-						data-index="${index}"
-						@d2l-labs-multi-select-list-item-deleted="${this._multiSelectItemDeleted}">
-					</d2l-labs-multi-select-list-item>
-				`;}))}
-			</d2l-labs-multi-select-list>
-		`;
-		if (numActiveFilters === 0) filters = html`<span class="d2l-labs-applied-filters-none-label d2l-body-compact">${this.localize('noActiveFilters')}</span>`;
-
-		return html`
-			<div class="d2l-labs-applied-filters-wrapper">
-				<span id="d2l-labs-applied-filters-label" class="d2l-labs-applied-filters-label d2l-body-compact">${this.labelText || this.localize('appliedFilters')}</span>
-				<div id="d2l-list-holder">
-					${filters}
-					<d2l-button-subtle id="d2l-clear-filters-button" text="${this.localize('clearFilters')}" ?hidden="${numActiveFilters < CLEAR_FILTERS_THRESHOLD}" @click="${this._clearFiltersClicked}"></d2l-button-subtle>
-				</div>
-			</div>
-		`;
-	}
-
-	updateActiveFilters(filterId, activeFilters) {
-		this._allActiveFilters.set(filterId, activeFilters);
-		this.requestUpdate();
-	}
-
-	_clearFiltersClicked() {
-		this._filters.registries.forEach((filter, index) => {
-			if (index === 0) filter.focus();
-			filter.requestFilterClearAll();
-		});
-	}
-
-	_multiSelectItemDeleted(e) {
-		const filterId = e.target.getAttribute('data-filter-id');
-		const filterValueIndex = e.target.getAttribute('data-index');
-		const filterValue = this._allActiveFilters.get(filterId)[filterValueIndex];
-		const filter = this._filters.registries.find(filter => filter.id === filterId);
-		filter.requestFilterValueClear(filterValue.keyObject);
-
-		announce(this.localize('filterRemoved', 'filterText', e.target.text));
-	}
-
-	_removeLostFilter(filterId) {
-		this._allActiveFilters.delete(filterId);
-		this.requestUpdate();
-	}
-
-}
-
-customElements.define('d2l-labs-applied-core-filters', D2lLabsAppliedCoreFilters);