@brightspace-ui-labs/facet-filter-sort 5.5.0 → 5.5.2

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

@@ -1,7 +1,7 @@
 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 { css, html, LitElement } from 'lit';
 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';

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

@@ -1,9 +1,9 @@
 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';
+import { css, html, LitElement } from 'lit';
 import { FilterLocalizeMixin } from '../localize-mixin.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { TabPanelMixin } from '@brightspace-ui/core/components/tabs/tab-panel-mixin.js';
 
 /**

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';
+import { css, html, LitElement } from 'lit';
 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/filter-dropdown/filter-dropdown.js

@@ -114,7 +114,7 @@ class D2LLabsFilterDropdown extends mixinBehaviors([LocalizeBehavior], PolymerEl
 				}
 			</style>
 			<d2l-dropdown-button-subtle
-				text="[[_getOpenerText(totalSelectedOptionCount, disableOpenerTextVariation, openerText, openerTextSingle, openerTextMultiple)]]"
+				text="[[_getOpenerText(totalSelectedOptionCount, disableOpenerTextVariation, openerText, openerTextSingle, openerTextMultiple, localize, resources)]]"
 				disabled="[[disabled]]">
 				<d2l-dropdown-tabs
 					min-width="[[minWidth]]"
@@ -123,7 +123,7 @@ class D2LLabsFilterDropdown extends mixinBehaviors([LocalizeBehavior], PolymerEl
 					no-padding-footer$="[[noPaddingFooter]]"
 					render-content>
 					<div class="d2l-labs-filter-dropdown-content-header">
-						<span>[[_localizeOrAlt(headerText, 'filterBy')]]</span>
+						<span>[[_localizeOrAlt(headerText, 'filterBy', localize, resources)]]</span>
 						<d2l-button-subtle text="[[localize('clear')]]" hidden$="[[!totalSelectedOptionCount]]" on-click="clearFilters"></d2l-button-subtle>
 					</div>
 					<d2l-tabs>
@@ -135,7 +135,7 @@ class D2LLabsFilterDropdown extends mixinBehaviors([LocalizeBehavior], PolymerEl
 		`;
 	}
 
-	attached()  {
+	attached() {
 		this.addEventListener('d2l-dropdown-close', this._handleDropdownClose);
 		this.addEventListener('d2l-tab-panel-selected', this._stopTabPanelSelectedEvent);
 	}
@@ -170,6 +170,8 @@ class D2LLabsFilterDropdown extends mixinBehaviors([LocalizeBehavior], PolymerEl
 	}
 
 	_getOpenerText(totalSelectedOptionCount, disableOpenerTextVariation, openerText, openerTextSingle, openerTextMultiple) {
+		if (!this.localize || !this.resources) return;
+
 		if (totalSelectedOptionCount === 0 || disableOpenerTextVariation) {
 			return this._localizeOrAlt(openerText, 'filter');
 		}
@@ -197,6 +199,7 @@ class D2LLabsFilterDropdown extends mixinBehaviors([LocalizeBehavior], PolymerEl
 	}
 
 	_localizeOrAlt(altText, ...args) {
+		if (!this.localize || !this.resources) return;
 		return altText ? altText : this.localize(...args);
 	}
 

package/components/localize-behavior.js

@@ -1,49 +1,8 @@
 import '@brightspace-ui/localize-behavior/d2l-localize-behavior.js';
-import ar from '../lang/ar.js';
-import cy from '../lang/cy.js';
-import da from '../lang/da.js';
-import de from '../lang/de.js';
-import en from '../lang/en.js';
-import es from '../lang/es.js';
-import eses from '../lang/es-es.js';
-import fr from '../lang/fr.js';
-import frfr from '../lang/fr-fr.js';
-import hi from '../lang/hi.js';
-import ja from '../lang/ja.js';
-import ko from '../lang/ko.js';
-import nl from '../lang/nl.js';
-import pt from '../lang/pt.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 LocalizeBehaviorImpl = {
-	properties: {
-		resources: {
-			value: function() {
-				return {
-					'ar': ar,
-					'cy': cy,
-					'da': da,
-					'de': de,
-					'en': en,
-					'es': es,
-					'es-es': eses,
-					'fr': fr,
-					'fr-fr': frfr,
-					'hi': hi,
-					'ja': ja,
-					'ko': ko,
-					'nl': nl,
-					'pt': pt,
-					'sv': sv,
-					'tr': tr,
-					'zh-cn': zhcn,
-					'zh-tw': zhtw
-				};
-			}
-		}
+	localizeConfig: {
+		importFunc: async lang => (await import(`../lang/${lang}.js`)).default
 	}
 };
 

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';
+import { html, LitElement } from 'lit';
 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/components/sort-by-dropdown/sort-by-dropdown.js

@@ -36,18 +36,14 @@ class LabsSortByDropdown extends mixinBehaviors(
 			*/
 			_selectedOptionText: {
 				type: String,
+				computed: '_computeSelectedOptionText(_text, localize, resources)'
 			},
 			/**
 			* The text of the currently selected option
 			*/
 			_text: {
 				type: String,
-				value: '',
-				observer: function(selection) {
-					this._selectedOptionText = this.compact
-						? this.localize('sort')
-						: this.localize('sortWithOption', 'option', selection);
-				}
+				value: ''
 			},
 
 			/**
@@ -143,6 +139,13 @@ class LabsSortByDropdown extends mixinBehaviors(
 			this._boundListeners._onItemSelect);
 	}
 
+	_computeSelectedOptionText(selection, localize, resources) {
+		if (!selection || !localize || !resources) return;
+		return this.compact
+			? this.localize('sort')
+			: this.localize('sortWithOption', 'option', selection);
+	}
+
 	_onItemSelect(e) {
 		this._text = e.target.text;
 		this.value = e.detail.value;

package/package.json

@@ -22,35 +22,27 @@
     "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"
+    "test:headless": "d2l-test-runner"
   },
   "author": "D2L Corporation",
   "license": "Apache-2.0",
   "devDependencies": {
     "@babel/core": "^7",
     "@babel/eslint-parser": "^7",
-    "@brightspace-ui/stylelint-config": "^0.3",
-    "@open-wc/testing": "^3",
-    "@web/dev-server": "^0.1",
-    "@web/test-runner": "^0.13",
+    "@brightspace-ui/stylelint-config": "^0.8",
+    "@brightspace-ui/testing": "^1",
+    "@web/dev-server": "^0.3",
     "eslint": "^8",
-    "eslint-config-brightspace": "^0.16",
-    "eslint-plugin-html": "^6",
-    "eslint-plugin-import": "^2",
-    "eslint-plugin-lit": "^1",
-    "eslint-plugin-sort-class-members": "^1",
+    "eslint-config-brightspace": "^0.25",
     "lit-analyzer": "^1",
-    "sinon": "^13",
-    "stylelint": "^14"
+    "stylelint": "^15"
   },
-  "version": "5.5.0",
+  "version": "5.5.2",
   "dependencies": {
+    "@brightspace-ui-labs/multi-select": "^6",
     "@brightspace-ui/core": "^2",
     "@brightspace-ui/localize-behavior": "^2",
-    "@brightspace-ui-labs/multi-select": "^6",
-    "lit-element": "^3",
-    "lit-html": "^2",
-    "@polymer/polymer": "^3"
+    "@polymer/polymer": "^3",
+    "lit": "^2"
   }
 }