@brightspace-ui-labs/facet-filter-sort 6.1.3 → 6.2.0

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

@@ -3,9 +3,12 @@ import '@brightspace-ui/core/components/inputs/input-search.js';
 import '@brightspace-ui/core/components/menu/menu.js';
 import { css, html, LitElement } from 'lit';
 import { FilterLocalizeMixin } from '../localize-mixin.js';
+import { getFlag } from '@brightspace-ui/core/helpers/flags.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { TabPanelMixin } from '@brightspace-ui/core/components/tabs/tab-panel-mixin.js';
 
+const useTabsNewStructure = getFlag('GAUD-7146-tabs-new-structure', false);
+
 /**
  * A component wrapping grouped filters
  * @slot - Contains the filters (e.g., d2l-labs-filter-dropdown-option) that are in the category
@@ -102,9 +105,12 @@ class LabsFilterDropdownCategory extends FilterLocalizeMixin(TabPanelMixin(LitEl
 			this.selected = !this.selected;
 			this.__onSelect(e);
 		});
-		this.addEventListener('d2l-tab-panel-selected', () => {
-			this._dispatchSelected();
-		});
+
+		if (!useTabsNewStructure) {
+			this.addEventListener('d2l-tab-panel-selected', () => {
+				this._dispatchSelected();
+			});
+		}
 	}
 
 	render() {

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

@@ -3,10 +3,14 @@ import '@brightspace-ui/core/components/colors/colors.js';
 import '@brightspace-ui/core/components/dropdown/dropdown-button-subtle.js';
 import '@brightspace-ui/core/components/dropdown/dropdown-tabs.js';
 import '@brightspace-ui/core/components/tabs/tabs.js';
+import '@brightspace-ui/core/components/tabs/tab.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { getFlag } from '@brightspace-ui/core/helpers/flags.js';
 import { LocalizeBehavior } from '../localize-behavior.js';
 import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
 
+const useTabsNewStructure = getFlag('GAUD-7146-tabs-new-structure', false);
+
 /**
  * A component containing filter options and emitting selection events
  * @slot - Contents of the dropdown, including filter categories and options
@@ -87,6 +91,14 @@ class D2LLabsFilterDropdown extends mixinBehaviors([LocalizeBehavior], PolymerEl
 			noPaddingFooter: {
 				type: Boolean,
 				value: false
+			},
+			_useNewStructure: {
+				type: Boolean,
+				value: useTabsNewStructure
+			},
+			_tabInfos: {
+				type: Array,
+				value: () => []
 			}
 		};
 	}
@@ -127,7 +139,15 @@ class D2LLabsFilterDropdown extends mixinBehaviors([LocalizeBehavior], PolymerEl
 						<d2l-button-subtle text="[[localize('clear')]]" hidden$="[[!totalSelectedOptionCount]]" on-click="clearFilters"></d2l-button-subtle>
 					</div>
 					<d2l-tabs>
-						<slot></slot>
+						<template is="dom-if" if="[[!_useNewStructure]]">
+							<slot></slot>
+						</template>
+						<template is="dom-if" if="[[_useNewStructure]]">
+							<template is="dom-repeat" items="[[_tabInfos]]" as="tab">
+								<d2l-tab id="[[tab.key]]" text="[[tab.text]]" slot="tabs" selected$="[[tab.selected]]"></d2l-tab>
+							</template>
+							<slot on-slotchange="_handleCategoriesSlotChange" slot="panels"></slot>
+						</template>
 					</d2l-tabs>
 					<slot name="footer" slot="[[_getFooterSlotValue(_hasFooter)]]" on-slotchange="_handleFooterSlotChange"></slot>
 				</d2l-dropdown-tabs>
@@ -137,7 +157,12 @@ class D2LLabsFilterDropdown extends mixinBehaviors([LocalizeBehavior], PolymerEl
 
 	attached() {
 		this.addEventListener('d2l-dropdown-close', this._handleDropdownClose);
-		this.addEventListener('d2l-tab-panel-selected', this._stopTabPanelSelectedEvent);
+
+		if (this._useNewStructure) {
+			this.addEventListener('d2l-tab-selected', this._handleTabSelected);
+		} else {
+			this.addEventListener('d2l-tab-panel-selected', this._stopTabPanelSelectedEvent);
+		}
 	}
 
 	clearFilters() {
@@ -158,7 +183,19 @@ class D2LLabsFilterDropdown extends mixinBehaviors([LocalizeBehavior], PolymerEl
 
 	detached() {
 		this.removeEventListener('d2l-dropdown-close', this._handleDropdownClose);
-		this.removeEventListener('d2l-tab-panel-selected', this._stopTabPanelSelectedEvent);
+
+		if (this._useNewStructure) {
+			this.removeEventListener('d2l-tab-selected', this._handleTabSelected);
+			const categories = this.querySelectorAll('d2l-labs-filter-dropdown-category');
+			categories.forEach(cat => {
+				if (cat.__tabInfoObserver) {
+					cat.__tabInfoObserver.disconnect();
+					delete cat.__tabInfoObserver;
+				}
+			});
+		} else {
+			this.removeEventListener('d2l-tab-panel-selected', this._stopTabPanelSelectedEvent);
+		}
 	}
 
 	focus() {
@@ -181,6 +218,41 @@ class D2LLabsFilterDropdown extends mixinBehaviors([LocalizeBehavior], PolymerEl
 		return this._localizeOrAlt(openerTextMultiple, 'filterMultiple', 'numOptions', totalSelectedOptionCount);
 	}
 
+	async _handleCategoriesSlotChange() {
+		if (!this._useNewStructure) return;
+
+		const tabsContainer = this.shadowRoot.querySelector('d2l-tabs');
+		const categories = this.querySelectorAll('d2l-labs-filter-dropdown-category');
+
+		if (!tabsContainer || !categories || categories.length === 0) return;
+
+		// Build tabInfos which is used to render d2l-tab components
+		const tabInfos = [];
+		categories.forEach((category, index) => {
+			const key = category.getAttribute('key') || `category-${index}`;
+			const text = category.getAttribute('text');
+			const isSelected = category.hasAttribute('selected');
+
+			category.setAttribute('labelled-by', key);
+			tabInfos.push({ key, text, selected: isSelected });
+
+			if (!category.__tabInfoObserver) {
+				category.__tabInfoObserver = new MutationObserver(() => {
+					const newText = category.getAttribute('text');
+					const newSelected = category.hasAttribute('selected');
+					this._tabInfos = this._tabInfos.map(info => {
+						return info.key === key
+							? { ...info, text: newText, selected: newSelected }
+							: info;
+					});
+				});
+				category.__tabInfoObserver.observe(category, { attributes: true, attributeFilter: ['text', 'selected'] });
+			}
+		});
+
+		this._tabInfos = tabInfos;
+	}
+
 	_handleDropdownClose(e) {
 		e.stopPropagation();
 		this.dispatchEvent(
@@ -198,6 +270,19 @@ class D2LLabsFilterDropdown extends mixinBehaviors([LocalizeBehavior], PolymerEl
 		this._hasFooter = e.target.assignedNodes().length !== 0;
 	}
 
+	_handleTabSelected(e) {
+		e.stopPropagation();
+		if (!this._useNewStructure) return;
+
+		// Find the corresponding category and dispatch the selection event
+		const tabId = e.target.id;
+		const category = this.querySelector(`d2l-labs-filter-dropdown-category[key="${tabId}"]`);
+
+		if (category) {
+			category._dispatchSelected();
+		}
+	}
+
 	_localizeOrAlt(altText, ...args) {
 		if (!this.localize || !this.resources) return;
 		return altText ? altText : this.localize(...args);

package/package.json

@@ -37,7 +37,7 @@
     "lit-analyzer": "^1",
     "stylelint": "^15"
   },
-  "version": "6.1.3",
+  "version": "6.2.0",
   "dependencies": {
     "@brightspace-ui/core": "^3",
     "@brightspace-ui/localize-behavior": "^2",