@brightspace-ui-labs/facet-filter-sort 5.2.1 → 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
 
@@ -57,26 +56,6 @@ To Do
 
 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)
@@ -176,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
 

package/components/localize-behavior.js

@@ -1,4 +1,4 @@
-import 'd2l-localize-behavior/d2l-localize-behavior.js';
+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';

package/components/search-facets/search-facets-grouping.js

@@ -1,6 +1,6 @@
 import '@brightspace-ui/core/components/colors/colors.js';
 import '@brightspace-ui/core/components/inputs/input-checkbox-spacer.js';
-import 'd2l-typography/d2l-typography-shared-styles.js';
+import '@brightspace-ui/typography/d2l-typography-shared-styles.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { LocalizeBehavior } from '../localize-behavior.js';

package/components/search-facets/search-facets-option.js

@@ -1,5 +1,5 @@
 import '@brightspace-ui/core/components/inputs/input-checkbox.js';
-import 'd2l-localize-behavior/d2l-localize-behavior.js';
+import '@brightspace-ui/localize-behavior/d2l-localize-behavior.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
 

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()\""
         }
       ]
     },
@@ -100,6 +71,23 @@
           "description": "The number of selected filter options for that filter category.  When options are selected and de-selected, the consumer is responsible for updating this number after updating its own data store.",
           "type": "number",
           "default": "0"
+        },
+        {
+          "name": "text",
+          "description": "REQUIRED: The text used for the tab, as well as labelling the panel",
+          "type": "string"
+        },
+        {
+          "name": "no-padding",
+          "description": "Opt out of default padding/whitespace around the panel",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selected",
+          "description": "Use to select the tab",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "properties": [
@@ -136,6 +124,30 @@
           "description": "The number of selected filter options for that filter category.  When options are selected and de-selected, the consumer is responsible for updating this number after updating its own data store.",
           "type": "number",
           "default": "0"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
+        },
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "REQUIRED: The text used for the tab, as well as labelling the panel",
+          "type": "string"
+        },
+        {
+          "name": "noPadding",
+          "attribute": "no-padding",
+          "description": "Opt out of default padding/whitespace around the panel",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selected",
+          "attribute": "selected",
+          "description": "Use to select the tab",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "events": [
@@ -154,6 +166,14 @@
         {
           "name": "d2l-labs-filter-dropdown-option-change",
           "description": "Dispatched when a filter option is selected"
+        },
+        {
+          "name": "d2l-tab-panel-selected",
+          "description": "Dispatched when a tab is selected"
+        },
+        {
+          "name": "d2l-tab-panel-text-changed",
+          "description": "Dispatched when the text attribute is changed"
         }
       ],
       "slots": [
@@ -167,16 +187,86 @@
       "name": "d2l-labs-filter-dropdown-option",
       "path": "./components/filter-dropdown/filter-dropdown-option.js",
       "description": "A filter menu item component.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "REQUIRED: The selectable item's value",
+          "type": "string"
+        },
+        {
+          "name": "selected",
+          "description": "This will set the item to be selected by default",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "text",
+          "description": "REQUIRED: Text displayed by the menu item",
+          "type": "string"
+        },
+        {
+          "name": "description",
+          "description": "Provide a description for the menu item that will be used by screen readers",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the menu item",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
       "properties": [
         {
           "name": "role",
           "type": "string",
           "default": "\"menuitemcheckbox\""
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "REQUIRED: The selectable item's value",
+          "type": "string"
+        },
+        {
+          "name": "selected",
+          "attribute": "selected",
+          "description": "This will set the item to be selected by default",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "REQUIRED: Text displayed by the menu item",
+          "type": "string"
+        },
+        {
+          "name": "description",
+          "attribute": "description",
+          "description": "Provide a description for the menu item that will be used by screen readers",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the menu item",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "events": [
         {
-          "name": "d2l-menu-item-select"
+          "name": "d2l-menu-item-select",
+          "description": "Dispatched when the menu item is selected"
+        },
+        {
+          "name": "d2l-menu-item-change",
+          "description": "Dispatched when the selected menu item changes"
+        },
+        {
+          "name": "d2l-menu-item-visibility-change",
+          "description": "Dispatched when the visibility of the menu item changes"
         }
       ]
     },
@@ -314,6 +404,25 @@
           "attribute": "no-padding-footer",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "rootPath",
+          "type": "string"
+        },
+        {
+          "name": "importPath",
+          "type": "string"
+        },
+        {
+          "name": "root",
+          "type": "HTMLElement | StampedTemplate | ShadowRoot | null"
+        },
+        {
+          "name": "$",
+          "type": "{ [key: string]: Element; }"
+        },
+        {
+          "name": "PROPERTY_EFFECT_TYPES"
         }
       ],
       "events": [
@@ -382,6 +491,25 @@
           "description": "The value of the grouping name",
           "type": "string",
           "default": "\"\""
+        },
+        {
+          "name": "rootPath",
+          "type": "string"
+        },
+        {
+          "name": "importPath",
+          "type": "string"
+        },
+        {
+          "name": "root",
+          "type": "HTMLElement | StampedTemplate | ShadowRoot | null"
+        },
+        {
+          "name": "$",
+          "type": "{ [key: string]: Element; }"
+        },
+        {
+          "name": "PROPERTY_EFFECT_TYPES"
         }
       ],
       "events": [
@@ -468,6 +596,25 @@
           "description": "The value of this option",
           "type": "string",
           "default": "\"\""
+        },
+        {
+          "name": "rootPath",
+          "type": "string"
+        },
+        {
+          "name": "importPath",
+          "type": "string"
+        },
+        {
+          "name": "root",
+          "type": "HTMLElement | StampedTemplate | ShadowRoot | null"
+        },
+        {
+          "name": "$",
+          "type": "{ [key: string]: Element; }"
+        },
+        {
+          "name": "PROPERTY_EFFECT_TYPES"
         }
       ],
       "events": [
@@ -481,6 +628,27 @@
       "name": "d2l-labs-search-facets",
       "path": "./components/search-facets/search-facets.js",
       "description": "Polymer-based web component for D2L search facets.",
+      "properties": [
+        {
+          "name": "rootPath",
+          "type": "string"
+        },
+        {
+          "name": "importPath",
+          "type": "string"
+        },
+        {
+          "name": "root",
+          "type": "HTMLElement | StampedTemplate | ShadowRoot | null"
+        },
+        {
+          "name": "$",
+          "type": "{ [key: string]: Element; }"
+        },
+        {
+          "name": "PROPERTY_EFFECT_TYPES"
+        }
+      ],
       "events": [
         {
           "name": "d2l-labs-search-facets-change",
@@ -542,13 +710,109 @@
           "description": "Search query",
           "type": "string",
           "default": "\"\""
+        },
+        {
+          "name": "rootPath",
+          "type": "string"
+        },
+        {
+          "name": "importPath",
+          "type": "string"
+        },
+        {
+          "name": "root",
+          "type": "HTMLElement | StampedTemplate | ShadowRoot | null"
+        },
+        {
+          "name": "$",
+          "type": "{ [key: string]: Element; }"
+        },
+        {
+          "name": "PROPERTY_EFFECT_TYPES"
         }
       ]
     },
     {
       "name": "d2l-labs-sort-by-dropdown-option",
       "path": "./components/sort-by-dropdown/sort-by-dropdown-option.js",
-      "description": "A dropdown option menu item component."
+      "description": "A dropdown option menu item component.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "REQUIRED: The selectable item's value",
+          "type": "string"
+        },
+        {
+          "name": "selected",
+          "description": "This will set the item to be selected by default",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "text",
+          "description": "REQUIRED: Text displayed by the menu item",
+          "type": "string"
+        },
+        {
+          "name": "description",
+          "description": "Provide a description for the menu item that will be used by screen readers",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the menu item",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "REQUIRED: The selectable item's value",
+          "type": "string"
+        },
+        {
+          "name": "selected",
+          "attribute": "selected",
+          "description": "This will set the item to be selected by default",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "REQUIRED: Text displayed by the menu item",
+          "type": "string"
+        },
+        {
+          "name": "description",
+          "attribute": "description",
+          "description": "Provide a description for the menu item that will be used by screen readers",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the menu item",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-menu-item-change",
+          "description": "Dispatched when the selected menu item changes"
+        },
+        {
+          "name": "d2l-menu-item-select",
+          "description": "Dispatched when the menu item is selected"
+        },
+        {
+          "name": "d2l-menu-item-visibility-change",
+          "description": "Dispatched when the visibility of the menu item changes"
+        }
+      ]
     },
     {
       "name": "d2l-labs-sort-by-dropdown",
@@ -619,6 +883,25 @@
           "attribute": "value",
           "description": "The value of the currently selected option",
           "type": "string"
+        },
+        {
+          "name": "rootPath",
+          "type": "string"
+        },
+        {
+          "name": "importPath",
+          "type": "string"
+        },
+        {
+          "name": "root",
+          "type": "HTMLElement | StampedTemplate | ShadowRoot | null"
+        },
+        {
+          "name": "$",
+          "type": "{ [key: string]: Element; }"
+        },
+        {
+          "name": "PROPERTY_EFFECT_TYPES"
         }
       ],
       "events": [

package/package.json

@@ -44,12 +44,12 @@
     "sinon": "^13",
     "stylelint": "^14"
   },
-  "version": "5.2.1",
+  "version": "5.4.0",
   "dependencies": {
     "@brightspace-ui/core": "^2",
-    "d2l-localize-behavior": "BrightspaceUI/localize-behavior#semver:^2",
+    "@brightspace-ui/localize-behavior": "^2",
+    "@brightspace-ui/typography": "^8",
     "@brightspace-ui-labs/multi-select": "^6",
-    "d2l-typography": "BrightspaceUI/typography#semver:^8",
     "lit-element": "^3",
     "lit-html": "^2",
     "@polymer/polymer": "^3"

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);