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

package/README.md

@@ -197,45 +197,46 @@ 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>
 ```
 
-## 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

@@ -1,13 +1,14 @@
-/* eslint sort-imports: ["error", {"allowSeparatedGroups": true}] */
+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 { LitElement, css, html } from 'lit-element';
+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 { 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';
 
+// 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';
@@ -61,22 +62,22 @@ class D2lLabsAppliedCoreFilters 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 {
@@ -98,6 +99,17 @@ class D2lLabsAppliedCoreFilters extends RtlMixin(LocalizeStaticMixin(LitElement)
 		`];
 	}
 
+	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,
@@ -120,17 +132,6 @@ class D2lLabsAppliedCoreFilters extends RtlMixin(LocalizeStaticMixin(LitElement)
 		};
 	}
 
-	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();

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';
 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 { getComposedChildren } from '@brightspace-ui/core/helpers/dom.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';
@@ -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();
 	}
@@ -157,11 +158,10 @@ class D2lLabsAppliedFilters extends RtlMixin(LocalizeStaticMixin(LitElement)) {
 					</d2l-labs-multi-select-list-item>
 				`)}
 			</d2l-labs-multi-select-list>`
-			: html`<span class="d2l-labs-applied-filters-none-label d2l-body-compact">${this.localize('noActiveFilters')}</span>`;
+			: null;
 
 		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="${this._selectedEntries.length < CLEAR_FILTERS_THRESHOLD}" @click="${this._clearFiltersClicked}"></d2l-button-subtle>

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

@@ -1,7 +1,7 @@
 import '@brightspace-ui/core/components/colors/colors.js';
 import '@brightspace-ui/core/components/inputs/input-search.js';
 import '@brightspace-ui/core/components/menu/menu.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit-element';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { LocalizeStaticMixin } from '@brightspace-ui/core/mixins/localize-static-mixin.js';
 import { TabPanelMixin } from '@brightspace-ui/core/components/tabs/tab-panel-mixin.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/components/filter-dropdown/filter-dropdown-option.js

@@ -1,5 +1,5 @@
 import '@brightspace-ui/core/components/icons/icon.js';
-import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { css, html, LitElement } from 'lit-element';
 import { MenuItemSelectableMixin } from '@brightspace-ui/core/components/menu/menu-item-selectable-mixin.js';
 import { menuItemSelectableStyles } from '@brightspace-ui/core/components/menu/menu-item-selectable-styles.js';
 import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.js';

package/components/sort-by-dropdown/sort-by-dropdown-option.js

@@ -1,5 +1,5 @@
 import '@brightspace-ui/core/components/icons/icon.js';
-import { html, LitElement } from 'lit-element/lit-element.js';
+import { html, LitElement } from 'lit-element';
 import { MenuItemRadioMixin } from '@brightspace-ui/core/components/menu/menu-item-radio-mixin.js';
 import { menuItemSelectableStyles } from '@brightspace-ui/core/components/menu/menu-item-selectable-styles.js';
 import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.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,35 +14,45 @@
     "/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 --app-index demo/index.html",
+    "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": "^13",
+    "stylelint": "^14"
   },
-  "version": "4.2.0",
+  "version": "4.2.4",
   "dependencies": {
     "@brightspace-ui/core": "^1",
     "d2l-localize-behavior": "BrightspaceUI/localize-behavior#semver:^2",
     "@brightspace-ui-labs/multi-select": "^5",
-    "d2l-polymer-behaviors": "Brightspace/d2l-polymer-behaviors-ui#semver:^2",
     "d2l-typography": "BrightspaceUI/typography#semver:^7",
     "lit-element": "^2",
+    "lit-html": "^1",
     "@polymer/polymer": "^3"
   }
 }