@brightspace-ui-labs/facet-filter-sort 4.1.4 → 4.2.2

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,51 +192,51 @@ 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>
 ```
 
-## Developing, Testing and Contributing
+## Developing
 
 After cloning the repo, run `npm install` to install dependencies.
 
-If you don't have it already, install the [Polymer CLI](https://www.polymer-project.org/3.0/docs/tools/polymer-cli) globally:
+### Running the demos
 
-```shell
-npm install -g polymer-cli
-```
-
-To start a [local web server](https://www.polymer-project.org/3.0/docs/tools/polymer-cli-commands#serve) that hosts the demo page and tests:
+To start a [@web/dev-server](https://modern-web.dev/docs/dev-server/overview/) that hosts the demo page and tests:
 
 ```shell
-polymer serve
+npm start
 ```
 
-To lint ([eslint](http://eslint.org/) and [Polymer lint](https://www.polymer-project.org/3.0/docs/tools/polymer-cli-commands#lint)):
+### Linting
 
 ```shell
+# eslint, lit-analyzer, polymer lint and style linting
 npm run lint
-```
 
-To run unit tests locally using [Polymer test](https://www.polymer-project.org/3.0/docs/tools/polymer-cli-commands#tests):
-
-```shell
-npm run test:polymer:local
+# eslint only
+npm run lint:eslint
 ```
 
-To lint AND run local unit tests:
+### Testing
 
 ```shell
+# lint & run headless unit tests
 npm test
+
+# unit tests only
+npm run test:headless
+
+# debug or run a subset of local unit tests
+npm run test:headless:watch
 ```
 
 ## Versioning & Releasing
 
-> TL;DR: Commits prefixed with `fix:` and `feat:` will trigger patch and minor releases when merged to `master`. Read on for more details...
+> TL;DR: Commits prefixed with `fix:` and `feat:` will trigger patch and minor releases when merged to `main`. Read on for more details...
 
-The [sematic-release GitHub Action](https://github.com/BrightspaceUI/actions/tree/master/semantic-release) is called from the `release.yml` GitHub Action workflow to handle version changes and releasing.
+The [semantic-release GitHub Action](https://github.com/BrightspaceUI/actions/tree/main/semantic-release) is called from the `release.yml` GitHub Action workflow to handle version changes and releasing.
 
 ### Version Changes
 

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

@@ -0,0 +1,205 @@
+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/lit-element.js';
+import { announce } from '@brightspace-ui/core/helpers/announce.js';
+import { bodyCompactStyles } from '@brightspace-ui/core/components/typography/styles.js';
+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';
+
+// eslint-disable-next-line sort-imports
+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 {
+				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' }
+		);
+	}
+
+	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,
+		};
+	}
+
+	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/components/applied-filters/applied-filters.js

@@ -1,13 +1,14 @@
-/* eslint sort-imports: ["error", {"allowSeparatedGroups": true}] */
-import '@brightspace-ui-labs/multi-select/multi-select-list';
-import '@brightspace-ui-labs/multi-select/multi-select-list-item';
-import { LitElement, css, html } from 'lit-element';
-import { LocalizeStaticMixin } from '@brightspace-ui/core/mixins/localize-static-mixin.js';
-import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.js';
+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/lit-element.js';
 import { announce } from '@brightspace-ui/core/helpers/announce.js';
 import { bodyCompactStyles } from '@brightspace-ui/core/components/typography/styles.js';
 import { getComposedChildren } from '@brightspace-ui/core/helpers/dom';
+import { LocalizeStaticMixin } from '@brightspace-ui/core/mixins/localize-static-mixin.js';
+import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.js';
 
+// eslint-disable-next-line sort-imports
 import ar from './lang/ar-sa.js';
 import de from './lang/de.js';
 import en from './lang/en.js';
@@ -66,22 +67,22 @@ class D2lLabsAppliedFilters extends RtlMixin(LocalizeStaticMixin(LitElement)) {
 			}
 
 			.d2l-labs-applied-filters-label {
-				margin-right: 0.25rem;
 				display: inline-block;
-				padding-top: 0.3rem;
 				font-weight: bold;
+				margin-right: 0.25rem;
+				padding-top: 0.3rem;
 			}
 
 			:host([dir="rtl"]) .d2l-labs-applied-filters-label {
-				margin-right: 0;
 				margin-left: 0.25rem;
+				margin-right: 0;
 			}
 
 			.d2l-labs-applied-filters-none-label {
+				color: var(--d2l-color-corundum);
 				display: inline-block;
-				padding-top: 0.3rem;
 				font-style: italic;
-				color: var(--d2l-color-corundum);
+				padding-top: 0.3rem;
 			}
 
 			#d2l-clear-filters-button {
@@ -103,6 +104,18 @@ class D2lLabsAppliedFilters extends RtlMixin(LocalizeStaticMixin(LitElement)) {
 		`];
 	}
 
+	constructor() {
+		super();
+		this.labelText = '';
+
+		this._clearFiltersClicked = this._clearFiltersClicked.bind(this);
+		this._clearSelected = this._clearSelected.bind(this);
+		this._setSelectedOptions = this._setSelectedOptions.bind(this);
+		this._update = this._update.bind(this);
+
+		this._setSelectedOptions();
+	}
+
 	static get resources() {
 		return {
 			'ar': ar,
@@ -125,18 +138,6 @@ class D2lLabsAppliedFilters extends RtlMixin(LocalizeStaticMixin(LitElement)) {
 		};
 	}
 
-	constructor() {
-		super();
-		this.labelText = '';
-
-		this._clearFiltersClicked = this._clearFiltersClicked.bind(this);
-		this._clearSelected = this._clearSelected.bind(this);
-		this._setSelectedOptions = this._setSelectedOptions.bind(this);
-		this._update = this._update.bind(this);
-
-		this._setSelectedOptions();
-	}
-
 	firstUpdated() {
 		this._update();
 	}

package/components/filter-dropdown/filter-dropdown-category.js

@@ -44,8 +44,8 @@ class LabsFilterDropdownCategory extends LocalizeStaticMixin(TabPanelMixin(LitEl
 	static get styles() {
 		return [super.styles, css`
 			:host {
-				margin: -1px -1rem 0 -1rem;
 				border-top: 1px solid var(--d2l-color-gypsum);
+				margin: -1px -1rem 0 -1rem;
 				padding: 1.2rem 1rem 0 1rem;
 			}
 			.d2l-labs-filter-dropdown-page-search {
@@ -58,6 +58,44 @@ class LabsFilterDropdownCategory extends LocalizeStaticMixin(TabPanelMixin(LitEl
 		`];
 	}
 
+	constructor() {
+		super();
+		this.categoryText = '';
+		this.disableSearch = false;
+		this.key = '';
+		this.selectedOptionCount = 0;
+	}
+
+	get categoryText() {
+		return this._categoryText;
+	}
+
+	set categoryText(val) {
+		const oldVal = this._categoryText;
+		if (oldVal !== val) {
+			this._categoryText = val;
+			this.requestUpdate();
+			this.updateComplete.then(() => {
+				this._updateTabText(this._categoryText, this.selectedOptionCount);
+			});
+		}
+	}
+
+	get selectedOptionCount() {
+		return this._selectedOptionCount;
+	}
+
+	set selectedOptionCount(val) {
+		const oldVal = this._selectedOptionCount;
+		if (oldVal !== val) {
+			this._selectedOptionCount = val;
+			this.requestUpdate();
+			this.updateComplete.then(() => {
+				this._updateTabText(this.categoryText, this._selectedOptionCount);
+			});
+		}
+	}
+
 	static get resources() {
 		return {
 			'ar': {
@@ -139,44 +177,6 @@ class LabsFilterDropdownCategory extends LocalizeStaticMixin(TabPanelMixin(LitEl
 		};
 	}
 
-	constructor() {
-		super();
-		this.categoryText = '';
-		this.disableSearch = false;
-		this.key = '';
-		this.selectedOptionCount = 0;
-	}
-
-	get categoryText() {
-		return this._categoryText;
-	}
-
-	set categoryText(val) {
-		const oldVal = this._categoryText;
-		if (oldVal !== val) {
-			this._categoryText = val;
-			this.requestUpdate();
-			this.updateComplete.then(() => {
-				this._updateTabText(this._categoryText, this.selectedOptionCount);
-			});
-		}
-	}
-
-	get selectedOptionCount() {
-		return this._selectedOptionCount;
-	}
-
-	set selectedOptionCount(val) {
-		const oldVal = this._selectedOptionCount;
-		if (oldVal !== val) {
-			this._selectedOptionCount = val;
-			this.requestUpdate();
-			this.updateComplete.then(() => {
-				this._updateTabText(this.categoryText, this._selectedOptionCount);
-			});
-		}
-	}
-
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 		this.addEventListener('d2l-menu-item-select', (e) => {

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

@@ -1,5 +1,6 @@
 {
   "description": "Collection of (search) facet, filter and sort elements",
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "https://github.com/BrightspaceUILabs/facet-filter-sort.git"
@@ -13,33 +14,42 @@
     "/components"
   ],
   "scripts": {
-    "lint": "npm run lint:wc && npm run lint:js",
-    "lint:js": "eslint . --ext .js,.html test/**/*.js test/**/*.html demo/**/*.js demo/**/*.html",
-    "lint:wc": "polymer lint -i \"./*\" \"test\" \"demo\" \"components\"",
-    "test:polymer:local": "polymer test --skip-plugin sauce",
-    "test:polymer:sauce": "polymer test --skip-plugin local",
-    "test": "npm run lint && npm run test:polymer:local"
+    "lint": "npm run lint:eslint && npm run lint:lit && npm run lint:polymer && npm run lint:style",
+    "lint:eslint": "eslint . --ext .js,.html",
+    "lint:lit": "lit-analyzer \"{components, test, demo}/**/*.js\" --strict --rules.no-unknown-tag-name off",
+    "lint:polymer": "polymer lint -i \"test/**/*.js\" \"demo/**/*.js\" \"components/**/*.js\"",
+    "lint:style": "stylelint \"**/*.{js,html}\"",
+    "start": "web-dev-server --node-resolve --watch --open",
+    "test": "npm run lint && npm run test:headless",
+    "test:headless": "web-test-runner --group default",
+    "test:headless:watch": "web-test-runner --group default --watch"
   },
   "author": "D2L Corporation",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@polymer/iron-test-helpers": "^3",
-    "@webcomponents/webcomponentsjs": "^2",
-    "babel-eslint": "^10",
-    "eslint": "^7",
-    "eslint-config-brightspace": "^0.10",
+    "@babel/core": "^7",
+    "@babel/eslint-parser": "^7",
+    "@brightspace-ui/stylelint-config": "^0.3",
+    "@open-wc/testing": "^2",
+    "@web/dev-server": "^0.1",
+    "@web/test-runner": "^0.13",
+    "@web/test-runner-saucelabs": "^0.6",
+    "eslint": "^8",
+    "eslint-config-brightspace": "^0.16",
     "eslint-plugin-html": "^6",
-    "eslint-plugin-lit": "~1.4.0",
+    "eslint-plugin-import": "^2",
+    "eslint-plugin-lit": "^1",
     "eslint-plugin-sort-class-members": "^1",
+    "lit-analyzer": "^1",
     "polymer-cli": "^1",
-    "wct-browser-legacy": "^1"
+    "sinon": "^12",
+    "stylelint": "^14"
   },
-  "version": "4.1.4",
+  "version": "4.2.2",
   "dependencies": {
     "@brightspace-ui/core": "^1",
     "d2l-localize-behavior": "BrightspaceUI/localize-behavior#semver:^2",
-    "@brightspace-ui-labs/multi-select": "^4",
-    "d2l-polymer-behaviors": "Brightspace/d2l-polymer-behaviors-ui#semver:^2",
+    "@brightspace-ui-labs/multi-select": "^5",
     "d2l-typography": "BrightspaceUI/typography#semver:^7",
     "lit-element": "^2",
     "@polymer/polymer": "^3"