@brightspace-ui/core 2.4.0 → 2.5.0

package/components/tag-list/tag-list.js

@@ -1,7 +1,22 @@
+import '../button/button-subtle.js';
 import { css, html, LitElement } from 'lit';
 import { ArrowKeysMixin } from '../../mixins/arrow-keys-mixin.js';
+import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
-class TagList extends ArrowKeysMixin(LitElement) {
+const PAGE_SIZE = {
+	medium: 600,
+	large: 970
+};
+const PAGE_SIZE_LINES = {
+	large: 1,
+	medium: 2,
+	small: 3
+};
+const MARGIN_TOP_HEIGHT = 6;
+
+class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 
 	static get properties() {
 		return {
@@ -9,7 +24,9 @@ class TagList extends ArrowKeysMixin(LitElement) {
 			 * REQUIRED: A description of the tag list for additional accessibility context
 			 * @type {string}
 			 */
-			description: { type: String }
+			description: { type: String },
+			_chompIndex: { type: Number },
+			_showHiddenTags: { type: Boolean }
 		};
 	}
 
@@ -28,9 +45,17 @@ class TagList extends ArrowKeysMixin(LitElement) {
 				padding: 0;
 				position: relative;
 			}
-			::slotted(*) {
+			::slotted(*),
+			d2l-button-subtle {
 				margin: 6px 6px 0 0;
 			}
+			::slotted([data-is-chomped]) {
+				display: none !important;
+			}
+			.d2l-tag-list-hidden-button {
+				position: absolute;
+				visibility: hidden;
+			}
 		`;
 	}
 
@@ -38,28 +63,71 @@ class TagList extends ArrowKeysMixin(LitElement) {
 		super();
 		/** @ignore */
 		this.arrowKeysDirection = 'leftrightupdown';
+		this._chompIndex = 10000;
 		this._items = [];
+		this._resizeObserver = null;
+		this._showHiddenTags = false;
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this._resizeObserver) this._resizeObserver.disconnect();
 	}
 
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 
-		requestAnimationFrame(() => {
-			this._items = this._getTagListItems();
-			this._items.forEach((item, index) => {
-				item.setAttribute('tabIndex', index === 0 ? 0 : -1);
-			});
-		});
+		const container = this.shadowRoot.querySelector('.tag-list-outer-container');
+		this._resizeObserver = new ResizeObserver((e) => requestAnimationFrame(() => this._handleResize(e)));
+		this._resizeObserver.observe(container);
 	}
 
 	render() {
+		let hiddenCount = 0;
+		let hasHiddenTags = false;
+		this._items.forEach((element, index) => {
+			if (index >= this._chompIndex) hasHiddenTags = true;
+			if (!this._showHiddenTags && index >= this._chompIndex) {
+				hiddenCount++;
+				element.setAttribute('data-is-chomped', '');
+			} else {
+				element.removeAttribute('data-is-chomped');
+			}
+		});
+
+		let button = null;
+		if (hasHiddenTags) {
+			button = this._showHiddenTags ? html`
+				<d2l-button-subtle
+					class="d2l-tag-list-button"
+					@click="${this._toggleHiddenTagVisibility}"
+					slim
+					text="${this.localize('components.tag-list.show-less')}">
+				</d2l-button-subtle>
+			` : html`
+				<d2l-button-subtle
+					class="d2l-tag-list-button"
+					@click="${this._toggleHiddenTagVisibility}"
+					slim
+					text="${this.localize('components.tag-list.num-hidden', { count: hiddenCount })}">
+				</d2l-button-subtle>
+			`;
+		}
+
 		const list = html`
 			<div role="list" class="tag-list-container" aria-describedby="d2l-tag-list-description">
-				<slot></slot>
+				<slot @slotchange="${this._handleSlotChange}"></slot>
+				${button}
 			</div>
 		`;
+
+		const outerContainerStyles = {
+			maxHeight: this._showHiddenTags ? undefined : `${(this._itemHeight + MARGIN_TOP_HEIGHT) * this._lines}px`
+		};
+
 		return html`
-			<div role="application">
+			<div role="application" class="tag-list-outer-container" style="${styleMap(outerContainerStyles)}">
+				<d2l-button-subtle aria-hidden="true" slim text="${this.localize('components.tag-list.num-hidden', { count: '##' })}" class="d2l-tag-list-hidden-button"></d2l-button-subtle>
 				${this.arrowKeysContainer(list)}
 				<div id="d2l-tag-list-description" hidden>${this.description}</div>
 			</div>
@@ -67,13 +135,87 @@ class TagList extends ArrowKeysMixin(LitElement) {
 	}
 
 	async arrowKeysFocusablesProvider() {
-		return this._items;
+		return this._showHiddenTags ? this._items : this._items.slice(0, this._chompIndex);
 	}
 
 	focus() {
 		if (this._items.length > 0) this._items[0].focus();
 	}
 
+	_chomp() {
+		if (!this.shadowRoot || !this._lines || !this._itemLayouts) return;
+
+		const subtleButton  = this.shadowRoot.querySelector('.d2l-tag-list-hidden-button');
+		const subtleButtonWidth = Math.ceil(parseFloat(getComputedStyle(subtleButton).getPropertyValue('width')));
+
+		const showing = {
+			count: 0,
+			width: 0
+		};
+
+		/**
+		 * _lines is determined by page width in _handleResize function
+		 * For each line we calculate the max items that can fit in that width, then go to the next line
+		 * If on the last line there is/are item(s) that won't fit in the width, we mark them as soft-hide and set isOverflowing
+		 */
+		let isOverflowing = false;
+		let overflowingIndex = 0;
+		for (let k = 1; k <= this._lines; k++) {
+			showing.width = 0;
+
+			for (let i = overflowingIndex; i < this._itemLayouts.length; i++) {
+				const itemLayout = this._itemLayouts[i];
+
+				if (!isOverflowing && showing.width + itemLayout.width < this._availableWidth) {
+					showing.width += itemLayout.width;
+					showing.count += 1;
+					itemLayout.trigger = 'soft-show';
+				} else if (k < this._lines) {
+					overflowingIndex = i;
+					break;
+				} else {
+					isOverflowing = true;
+					itemLayout.trigger = 'soft-hide';
+				}
+			}
+
+		}
+
+		if (!isOverflowing) {
+			this._chompIndex = showing.count;
+			return;
+		}
+
+		// calculate if additional item(s) should be hidden due to subtle button needing space
+		for (let j = this._itemLayouts.length; j--;) {
+			if ((showing.width + subtleButtonWidth) < this._availableWidth) {
+				break;
+			}
+			const itemLayoutOverflowing = this._itemLayouts[j];
+			if (itemLayoutOverflowing.trigger !== 'soft-show') {
+				continue;
+			}
+			showing.width -= itemLayoutOverflowing.width;
+			showing.count -= 1;
+		}
+		this._chompIndex = showing.count;
+	}
+
+	_getItemLayouts(filteredNodes) {
+		const items = filteredNodes.map((node) => {
+			const computedStyles = window.getComputedStyle(node);
+
+			return {
+				isHidden: computedStyles.display === 'none',
+				width: Math.ceil(parseFloat(computedStyles.width) || 0)
+					+ parseInt(computedStyles.marginRight) || 0
+					+ parseInt(computedStyles.marginLeft) || 0
+			};
+		});
+
+		return items.filter(({ isHidden }) => !isHidden);
+	}
+
 	_getTagListItems() {
 		const slot = this.shadowRoot && this.shadowRoot.querySelector('slot');
 		if (!slot) return;
@@ -84,6 +226,38 @@ class TagList extends ArrowKeysMixin(LitElement) {
 		});
 	}
 
+	_handleResize(entries) {
+		this._availableWidth = Math.ceil(entries[0].contentRect.width);
+		if (this._availableWidth >= PAGE_SIZE.large) this._lines = PAGE_SIZE_LINES.large;
+		else if (this._availableWidth < PAGE_SIZE.large && this._availableWidth >= PAGE_SIZE.medium) this._lines = PAGE_SIZE_LINES.medium;
+		else this._lines = PAGE_SIZE_LINES.small;
+		this._chomp();
+	}
+
+	_handleSlotChange() {
+		requestAnimationFrame(() => {
+			this._items = this._getTagListItems();
+			this._itemLayouts = this._getItemLayouts(this._items);
+
+			if (this._items.length === 0) return;
+			this._itemHeight = this._items[0].offsetHeight;
+			this._items.forEach((item, index) => {
+				item.setAttribute('tabIndex', index === 0 ? 0 : -1);
+			});
+			this._chomp();
+		});
+	}
+
+	async _toggleHiddenTagVisibility() {
+		this._showHiddenTags = !this._showHiddenTags;
+
+		if (!this.shadowRoot) return;
+
+		await this.updateComplete;
+		const button = this.shadowRoot.querySelector('.d2l-tag-list-button');
+		if (button) button.focus();
+	}
+
 }
 
 customElements.define('d2l-tag-list', TagList);

package/lang/ar.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "إمكانية الرؤية",
 	"components.tabs.next": "التمرير إلى الأمام",
 	"components.tabs.previous": "التمرير إلى الخلف",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "تقسيم العرض القابل للضبط",
 	"templates.primary-secondary.keyboardHorizontal": "السهم المتّجه إلى اليسار أو إلى اليمين لضبط حجم لوحات العرض",
 	"templates.primary-secondary.keyboardVertical": "السهم المتّجه إلى الأعلى أو إلى الأسفل لضبط حجم لوحات العرض"

package/lang/cy.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "Gwelededd",
 	"components.tabs.next": "Sgrolio Ymlaen",
 	"components.tabs.previous": "Sgrolio Yn Ôl",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Gwedd Hollt Addasadwy",
 	"templates.primary-secondary.keyboardHorizontal": "Saeth i'r chwith neu'r dde i addasu maint y paneli gweld",
 	"templates.primary-secondary.keyboardVertical": "Saeth i fyny neu i lawr i addasu maint y paneli gweld"

package/lang/da.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "Synlighed",
 	"components.tabs.next": "Rul frem",
 	"components.tabs.previous": "Rul tilbage",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Justerbar delt visning",
 	"templates.primary-secondary.keyboardHorizontal": "Pil til venstre eller højre for at justere størrelsen på visningspaneler",
 	"templates.primary-secondary.keyboardVertical": "Pil op eller ned for at justere størrelsen på visningspaneler"

package/lang/de.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "Sichtbarkeit",
 	"components.tabs.next": "Weiterblättern",
 	"components.tabs.previous": "Zurückblättern",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Anpassbare geteilte Ansicht",
 	"templates.primary-secondary.keyboardHorizontal": "Pfeil nach links oder rechts, um die Größe der Ansichtsbereiche anzupassen",
 	"templates.primary-secondary.keyboardVertical": "Pfeil nach oben oder unten, um die Größe der Ansichtsbereiche anzupassen"

package/lang/en.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "Visibility",
 	"components.tabs.next": "Scroll Forward",
 	"components.tabs.previous": "Scroll Backward",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Adjustable Split View",
 	"templates.primary-secondary.keyboardHorizontal": "Arrow left or right to adjust the size of the view panels",
 	"templates.primary-secondary.keyboardVertical": "Arrow up or down to adjust the size of the view panels"

package/lang/es-es.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "Visibilidad",
 	"components.tabs.next": "Desplazarse hacia delante",
 	"components.tabs.previous": "Desplazarse hacia atrás",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Vista dividida ajustable",
 	"templates.primary-secondary.keyboardHorizontal": "Flecha hacia la izquierda o la derecha para ajustar el tamaño de los paneles de visualización",
 	"templates.primary-secondary.keyboardVertical": "Flecha hacia arriba o abajo para ajustar el tamaño de los paneles de visualización"

package/lang/es.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "Visibilidad",
 	"components.tabs.next": "Desplazarse hacia adelante",
 	"components.tabs.previous": "Desplazarse hacia atrás",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Pantalla dividida ajustable",
 	"templates.primary-secondary.keyboardHorizontal": "Utilice la flecha izquierda o derecha para ajustar el tamaño de los paneles de visualización",
 	"templates.primary-secondary.keyboardVertical": "Utilice la flecha hacia arriba o hacia abajo para ajustar el tamaño de los paneles de visualización"

package/lang/fr-fr.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "Visibilité",
 	"components.tabs.next": "Faire défiler vers l'avant",
 	"components.tabs.previous": "Faire défiler vers l'arrière",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Vue fractionnée réglable",
 	"templates.primary-secondary.keyboardHorizontal": "Flèche vers la gauche ou vers la droite pour régler la taille des panneaux d’affichage",
 	"templates.primary-secondary.keyboardVertical": "Flèche vers le haut ou vers le bas pour régler la taille des panneaux d’affichage"

package/lang/fr.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "Visibilité",
 	"components.tabs.next": "Défilement avant",
 	"components.tabs.previous": "Défilement arrière",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Vue partagée réglable",
 	"templates.primary-secondary.keyboardHorizontal": "Utiliser la flèche vers la gauche ou vers la droite pour régler la taille des volets d'affichage",
 	"templates.primary-secondary.keyboardVertical": "Flèche vers le haut ou vers le bas pour régler la taille des volets d'affichage"

package/lang/hi.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "दृश्यता",
 	"components.tabs.next": "आगे स्क्रॉल करें",
 	"components.tabs.previous": "पीछे स्क्रॉल करें",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "समायोजन योग्य विभाजन दृश्य",
 	"templates.primary-secondary.keyboardHorizontal": "दृश्य पैनल्स का आकार समायोजित करने के लिए तीर बाएँ या दाएँ करें",
 	"templates.primary-secondary.keyboardVertical": "दृश्य पैनल्स का आकार समायोजित करने के लिए तीर ऊपर या नीचे करें"

package/lang/ja.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "表示",
 	"components.tabs.next": "前方にスクロール",
 	"components.tabs.previous": "後方にスクロール",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "調整可能な分割ビュー",
 	"templates.primary-secondary.keyboardHorizontal": "左矢印または右矢印を使用して、ビューパネルのサイズを調整します",
 	"templates.primary-secondary.keyboardVertical": "上矢印または下矢印を使用して、ビューパネルのサイズを調整します"

package/lang/ko.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "표시여부",
 	"components.tabs.next": "앞으로 스크롤",
 	"components.tabs.previous": "뒤로 스크롤",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "조정 가능한 분할 보기",
 	"templates.primary-secondary.keyboardHorizontal": "왼쪽 또는 오른쪽 화살표로 보기 패널의 크기 조정",
 	"templates.primary-secondary.keyboardVertical": "위 또는 아래 화살표로 보기 패널의 크기 조정"

package/lang/nl.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "Zichtbaarheid",
 	"components.tabs.next": "Naar voren scrollen",
 	"components.tabs.previous": "Naar achteren scrollen",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Instelbare gesplitste weergave",
 	"templates.primary-secondary.keyboardHorizontal": "Pijl naar links of rechts om de grootte van de weergavevensters aan te passen",
 	"templates.primary-secondary.keyboardVertical": "Pijl omhoog of omlaag om de grootte van de weergavevensters aan te passen"

package/lang/pt.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "Visibilidade",
 	"components.tabs.next": "Ir para frente",
 	"components.tabs.previous": "Ir para trás",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Exibição dividida ajustável",
 	"templates.primary-secondary.keyboardHorizontal": "Use a seta para a esquerda ou para a direita para ajustar o tamanho dos painéis de exibição",
 	"templates.primary-secondary.keyboardVertical": "Use a seta para cima ou para baixo para ajustar o tamanho dos painéis de exibição"

package/lang/sv.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "Synlighet",
 	"components.tabs.next": "Bläddra framåt",
 	"components.tabs.previous": "Bläddra bakåt",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Justerbar delad vy",
 	"templates.primary-secondary.keyboardHorizontal": "Pil vänster eller höger för att justera storleken på vypaneler",
 	"templates.primary-secondary.keyboardVertical": "Pil upp eller ned för att justera storleken på vypaneler"

package/lang/tr.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "Görünürlük",
 	"components.tabs.next": "İleri Kaydır",
 	"components.tabs.previous": "Geri Kaydır",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "Ayarlanabilir Bölünmüş Görüntü",
 	"templates.primary-secondary.keyboardHorizontal": "Görüntü panellerinin boyutunu ayarlamak için sol veya sağ okları kullanın",
 	"templates.primary-secondary.keyboardVertical": "Görüntü panellerinin boyutunu ayarlamak için yukarı veya aşağı okları kullanın"

package/lang/zh-cn.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "可见性",
 	"components.tabs.next": "向前滚动",
 	"components.tabs.previous": "向后滚动",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "可调分屏视图",
 	"templates.primary-secondary.keyboardHorizontal": "向左或向右箭头可调整视图面板的大小",
 	"templates.primary-secondary.keyboardVertical": "向上或向下箭头可调整视图面板的大小"

package/lang/zh-tw.js

@@ -95,6 +95,8 @@ export default {
 	"components.switch.visibility": "能見度",
 	"components.tabs.next": "向前捲動",
 	"components.tabs.previous": "向後捲動",
+	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.show-less": "Show Less",
 	"templates.primary-secondary.adjustableSplitView": "可調整的分割檢視",
 	"templates.primary-secondary.keyboardHorizontal": "向左或向右箭頭可調整檢視面板的大小",
 	"templates.primary-secondary.keyboardVertical": "向上或向下箭頭可調整檢視面板的大小"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",