@brightspace-ui-labs/facet-filter-sort 4.1.5 → 4.2.0

package/README.md

@@ -28,14 +28,64 @@ npm install @brightspace-ui-labs/facet-filter-sort
 
 ## Components
 
-- [d2l-labs-filter-dropdown](#d2l-labs-filter-dropdown)
 - [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
+
+<img src="/images/d2l-labs-search-facets.png?raw=true" width="450">
+
+#### Usage
+
+To Do
+
+### d2l-labs-search-results-count
+
+<img src="/images/d2l-labs-search-results-count.png?raw=true" width="450">
+
+#### Usage
+
+To Do
+
+### d2l-labs-sort-by-dropdown
+
+<img src="/images/d2l-labs-sort-by-dropdown.png?raw=true" width="450">
+
+#### Usage
+
+To Do
+
+### d2l-labs-applied-core-filters
+
+The same design as the deprecated `d2l-labs-applied-filters` below, 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>
+```
+
+## Deprecated Components
+
+- [d2l-labs-filter-dropdown](#d2l-labs-filter-dropdown)
 - [d2l-labs-applied-filters](#d2l-labs-applied-filters)
 
 ### d2l-labs-filter-dropdown
 
+**DEPRECATED: Use [`d2l-filter`](https://github.com/BrightspaceUI/core/tree/main/components/filter) in `BrightspaceUI/core`.**
+
 <img src="/images/d2l-labs-filter-dropdown.png?raw=true" width="450">
 
 #### Usage
@@ -124,33 +174,9 @@ Note that for the header and opener text overrides, if the terms are to reflect
 - `d2l-labs-filter-dropdown-category-searched`: Fired when a filter category is searched.
 - `d2l-labs-filter-dropdown-option-change`: Fired when a filter option is selected.
 
-### d2l-labs-search-facets
-
-<img src="/images/d2l-labs-search-facets.png?raw=true" width="450">
-
-#### Usage
-
-To Do
-
-### d2l-labs-search-results-count
-
-<img src="/images/d2l-labs-search-results-count.png?raw=true" width="450">
-
-#### Usage
-
-To Do
-
-### d2l-labs-sort-by-dropdown
-
-<img src="/images/d2l-labs-sort-by-dropdown.png?raw=true" width="450">
-
-#### Usage
-
-To Do
-
 ### d2l-labs-applied-filters
 
-A multi-select-list allowing the user to see (and remove) the currently 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).
 
 NOTE: This component uses the `slotchange` event and so will not work if you require IE support
 
@@ -166,7 +192,6 @@ NOTE: This component uses the `slotchange` event and so will not work if you req
 Set the `for` param to be the id of the `d2l-labs-filter-dropdown` that you want to track.
 This also works if the `d2l-labs-filter-dropdown` is a child in the shadow-dom of the element referenced by the id.
 
-
 ```html
 <d2l-labs-applied-filters for="filter"></d2l-labs-applied-filters>
 <d2l-labs-filter-dropdown id="filter"> ... </d2l-labs-filter-dropdown>

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

@@ -0,0 +1,204 @@
+/* eslint sort-imports: ["error", {"allowSeparatedGroups": true}] */
+import '@brightspace-ui-labs/multi-select/multi-select-list.js';
+import '@brightspace-ui-labs/multi-select/multi-select-list-item.js';
+import { LitElement, css, html } from 'lit-element';
+import { IdSubscriberController } from '@brightspace-ui/core/controllers/subscriber/subscriberControllers.js';
+import { LocalizeStaticMixin } from '@brightspace-ui/core/mixins/localize-static-mixin.js';
+import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.js';
+import { announce } from '@brightspace-ui/core/helpers/announce.js';
+import { bodyCompactStyles } from '@brightspace-ui/core/components/typography/styles.js';
+
+import ar from './lang/ar-sa.js';
+import de from './lang/de.js';
+import en from './lang/en.js';
+import es from './lang/es.js';
+import esMx from './lang/es-mx.js';
+import fi from './lang/fi.js';
+import fr from './lang/fr.js';
+import frCa from './lang/fr-ca.js';
+import ja from './lang/ja.js';
+import ko from './lang/ko.js';
+import nb from './lang/nb.js';
+import nl from './lang/nl.js';
+import pt from './lang/pt-br.js';
+import sv from './lang/sv.js';
+import tr from './lang/tr.js';
+import zhCn from  './lang/zh-cn.js';
+import zhTw from './lang/zh-tw.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(LocalizeStaticMixin(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 {
+				margin-right: 0.25rem;
+				display: inline-block;
+				padding-top: 0.3rem;
+				font-weight: bold;
+			}
+
+			:host([dir="rtl"]) .d2l-labs-applied-filters-label {
+				margin-right: 0;
+				margin-left: 0.25rem;
+			}
+
+			.d2l-labs-applied-filters-none-label {
+				display: inline-block;
+				padding-top: 0.3rem;
+				font-style: italic;
+				color: var(--d2l-color-corundum);
+			}
+
+			#d2l-clear-filters-button {
+				margin-left: 3px;
+				margin-right: 3px;
+			}
+
+			#d2l-list-holder {
+				flex: 1;
+			}
+
+			:host([hidden]) {
+				display: none;
+			}
+
+			[hidden] {
+				display: none;
+			}
+		`];
+	}
+
+	static get resources() {
+		return {
+			'ar': ar,
+			'de': de,
+			'en': en,
+			'es': es,
+			'es-mx': esMx,
+			'fi': fi,
+			'fr': fr,
+			'fr-ca': frCa,
+			'ja': ja,
+			'ko': ko,
+			'nb': nb,
+			'nl': nl,
+			'pt': pt,
+			'sv': sv,
+			'tr': tr,
+			'zh-cn': zhCn,
+			'zh-tw': zhTw,
+		};
+	}
+
+	constructor() {
+		super();
+		this.labelText = '';
+
+		this._allActiveFilters = new Map();
+		this._filters = new IdSubscriberController(this,
+			{ onUnsubscribe: this._removeLostFilter.bind(this) },
+			{ idPropertyName: 'filterIds' }
+		);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._filters.hostDisconnected();
+	}
+
+	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>
+		`;
+	}
+
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		this._filters.hostUpdated(changedProperties);
+	}
+
+	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);

package/custom-elements.json

@@ -1,6 +1,39 @@
 {
   "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",

package/package.json

@@ -34,7 +34,7 @@
     "polymer-cli": "^1",
     "wct-browser-legacy": "^1"
   },
-  "version": "4.1.5",
+  "version": "4.2.0",
   "dependencies": {
     "@brightspace-ui/core": "^1",
     "d2l-localize-behavior": "BrightspaceUI/localize-behavior#semver:^2",