@brightspace-ui/core 3.206.3 → 3.207.1

package/components/list/demo/demo-list-nested.js

@@ -34,6 +34,7 @@ class ListDemoNested extends LitElement {
 			showLoadMore: { type: Boolean, attribute: 'show-load-more' },
 			noPrimaryAction: { type: Boolean, attribute: 'no-primary-action' },
 			disableListGrid: { type: Boolean, attribute: 'disable-list-grid' },
+			dragHandleShowAlways: { type: Boolean, attribute: 'drag-handle-show-always' },
 			_items: { state: true },
 			_loadedItems: { state: true },
 			_remainingItemCount: { state: true },
@@ -176,6 +177,7 @@ class ListDemoNested extends LitElement {
 			<d2l-list
 				?grid="${!this.disableListGrid}"
 				drag-multiple
+				?drag-handle-show-always="${this.dragHandleShowAlways}"
 				?drop-nested-only="${this.dropNestedOnly}"
 				slot="${ifDefined(nested ? 'nested' : undefined)}"
 				item-count="${this._items.length}"

package/components/list/demo/list-drag-and-drop.html

@@ -62,6 +62,13 @@
 			</template>
 		</d2l-demo-snippet>
 
+		<h2>Always Show Handle</h2>
+
+		<d2l-demo-snippet>
+			<template>
+				<d2l-demo-list-nested demo-item-key="imgPrimaryAndSupporting" is-draggable selectable drag-handle-show-always></d2l-demo-list-nested>
+			</template>
+		</d2l-demo-snippet>
 
 	</d2l-demo-page>
 

package/components/list/list-item-drag-drop-mixin.js

@@ -268,23 +268,24 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 			/**
 			 * **Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.
 			 * @type {string}
-			 */
+			*/
 			dragHandleText: { type: String, attribute: 'drag-handle-text' },
 			/**
 			 * **Drag & drop:** Whether nested items can be dropped on this item
 			 * @type {boolean}
-			 */
+			*/
 			dropNested: { type: Boolean, attribute: 'drop-nested' },
 			/**
 			 * **Drag & drop:** Text to drag and drop
 			 * @type {string}
-			 */
+			*/
 			dropText: { type: String, attribute: 'drop-text' },
 			/**
 			 * Value to identify item if selectable
 			 * @type {string}
-			 */
+			*/
 			key: { type: String, reflect: true },
+			_dragHandleShowAlways: { type: Boolean, attribute: '_drag-handle-show-always', reflect: true },
 			_draggingOver: { type: Boolean },
 			_dropLocation: { type: Number, reflect: true, attribute: '_drop-location' },
 			_focusingDragHandle: { type: Boolean },
@@ -345,6 +346,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 				}
 				:host([selected]) d2l-list-item-drag-handle,
 				:host([current]) d2l-list-item-drag-handle,
+				:host([_drag-handle-show-always]) d2l-list-item-drag-handle,
 				:host([_focusing]) d2l-list-item-drag-handle,
 				d2l-list-item-drag-handle:hover,
 				d2l-list-item-drag-handle.d2l-hovering,
@@ -379,6 +381,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		const list = this.getRootList();
 		this._dragMultiple = list?.hasAttribute('drag-multiple');
 		this._dropNestedOnly = list?.hasAttribute('drop-nested-only');
+		this._dragHandleShowAlways = list?.dragHandleShowAlways;
 	}
 
 	firstUpdated(changedProperties) {

package/components/list/list.js

@@ -53,6 +53,11 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 			 * @type {array}
 			 */
 			breakpoints: { type: Array },
+			/**
+			 * Always show drag handle
+			 * @type {boolean}
+			 */
+			dragHandleShowAlways: { type: Boolean, attribute: 'drag-handle-show-always' },
 			/**
 			 * Whether the user can drag multiple items
 			 * @type {boolean}
@@ -264,6 +269,9 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		if (changedProperties.has('layout') && changedProperties.get('layout') !== undefined && this.layout) {
 			this._updateItemLayouts();
 		}
+		if (changedProperties.has('dragHandleShowAlways')) {
+			this._updateItemDragHandleShowAlways();
+		}
 	}
 
 	getItems(slot) {
@@ -500,6 +508,7 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		});
 
 		this._updateItemLayouts(items);
+		this._updateItemDragHandleShowAlways(items);
 
 		/** @ignore */
 		this.dispatchEvent(new CustomEvent('d2l-list-item-showing-count-change', {
@@ -522,11 +531,15 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		});
 	}
 
+	_updateItemDragHandleShowAlways(items) {
+		if (!items) items = this.getItems();
+		items.forEach(item => item._dragHandleShowAlways = this.dragHandleShowAlways);
+	}
+
 	_updateItemLayouts(items) {
 		if (!items) items = this.getItems();
 		items.forEach(item => item.layout = (this.layout === listLayouts.tiles ? 'tile' : 'normal'));
 	}
-
 }
 
 customElements.define('d2l-list', List);

package/custom-elements.json

@@ -8759,6 +8759,10 @@
         {
           "name": "disable-list-grid",
           "type": "boolean"
+        },
+        {
+          "name": "drag-handle-show-always",
+          "type": "boolean"
         }
       ],
       "properties": [
@@ -8836,6 +8840,11 @@
           "name": "disableListGrid",
           "attribute": "disable-list-grid",
           "type": "boolean"
+        },
+        {
+          "name": "dragHandleShowAlways",
+          "attribute": "drag-handle-show-always",
+          "type": "boolean"
         }
       ]
     },
@@ -10589,6 +10598,11 @@
           "description": "Text to show in label tooltip on inline add button. Defaults to \"Add Item\".",
           "type": "string"
         },
+        {
+          "name": "drag-handle-show-always",
+          "description": "Always show drag handle",
+          "type": "boolean"
+        },
         {
           "name": "drop-nested-only",
           "description": "Disable ability to drop items above or below this item",
@@ -10660,6 +10674,12 @@
           "description": "Text to show in label tooltip on inline add button. Defaults to \"Add Item\".",
           "type": "string"
         },
+        {
+          "name": "dragHandleShowAlways",
+          "attribute": "drag-handle-show-always",
+          "description": "Always show drag handle",
+          "type": "boolean"
+        },
         {
           "name": "dropNestedOnly",
           "attribute": "drop-nested-only",

package/lang/fr-fr.js

@@ -174,7 +174,6 @@ export default {
 	"components.selection.select-all": "Tout sélectionner",
 	"components.selection.select-all-items":
 		`{count, plural,
-			=1 {Sélectionner 1 élément}
 			one {Sélectionner {countFormatted} élément}
 			other {Sélectionner {countFormatted} éléments}
 		}`,

package/lang/vi.js

@@ -1,20 +1,20 @@
 export default {
 	"components.alert.close": "Đóng Cảnh Báo",
-	"components.breadcrumbs.breadcrumb": "Breadcrumb",
+	"components.breadcrumbs.breadcrumb": "Đường dẫn",
 	"components.button-add.addItem": "Thêm mục",
 	"components.button-copy.copied": "Đã sao chép!",
-	"components.button-copy.error": "Sao chép không thành công. Hãy thử lại hoặc thử sao chép thủ công.",
+	"components.button-copy.error": "Sao chép không thành công. Hãy thử lại, hoặc thử sao chép thủ công.",
 	"components.button-split.otherOptions": "Các lựa chọn khác",
 	"components.calendar.hasEvents": "Có các sự kiện.",
 	"components.calendar.notSelected": "Không được chọn.",
 	"components.calendar.selected": "Được chọn.",
 	"components.calendar.show": "Hiển thị {month}",
 	"components.count-badge.plus": "{number}+",
-	"components.dialog.close": "Đóng hộp thoại",
-	"components.dialog.critical": "Nghiêm trọng!",
+	"components.dialog.close": "Đóng hộp thoại này",
+	"components.dialog.critical": "Rất quan trọng!",
 	"components.dropdown.close": "Đóng",
-	"components.filter.activeFilters": "Các bộ lọc hoạt động:",
-	"components.filter.additionalContentTooltip": "Sử dụng <b>các phím mũi tên trái/phải</b> để di chuyển tiêu điểm trong mục danh sách này",
+	"components.filter.activeFilters": "Các bộ lọc Hoạt động:",
+	"components.filter.additionalContentTooltip": "Sử dụng <b>các phím mũi tên trái/phải</b> để di chuyển trọng tâm bên trong mục danh sách này",
 	"components.filter.clear": "Xóa",
 	"components.filter.clearAll": "Xóa tất cả",
 	"components.filter.clearAllAnnounce": "Xóa tất cả các bộ lọc",
@@ -30,17 +30,16 @@ export default {
 		}`,
 	"components.filter.filters": "Bộ lọc",
 	"components.filter.loading": "Đang tải các bộ lọc",
-	"components.filter.noFilters": "Không có bộ lọc nào khả dụng",
+	"components.filter.noFilters": "Không có bộ lọc nào tính khả dụng",
 	"components.filter.searchResults":
 		`{number, plural,
-			=0 {Không có kết quả tìm kiếm}
-			other {{number} kết quả tìm kiếm}
+			other {{number} Không có kết quả tìm kiếm nào}
 		}`,
 	"components.filter.selectedFirstListLabel": "{headerText}. Các bộ lọc được chọn xuất hiện đầu tiên.",
 	"components.filter.singleDimensionDescription": "Lọc theo: {filterName}",
 	"components.filter-dimension-set-date-text-value.textDays":
 		`{num, plural,
-			=0 {hôm nay}
+			=0 {Hôm nay}
 			other {{num} ngày trước}
 		}`,
 	"components.filter-dimension-set-date-text-value.textHours":
@@ -48,12 +47,12 @@ export default {
 			=1 {Giờ trước}
 			other {{num} giờ trước}
 		}`,
-	"components.filter-dimension-set-date-text-value.textMonths": "{num} tháng trước",
+	"components.filter-dimension-set-date-text-value.textMonths": "{num} tháng qua",
 	"components.filter-dimension-set-date-time-range-value.label": "{text}, mở rộng để chọn ngày",
 	"components.filter-dimension-set-date-time-range-value.text": "Phạm vi ngày tùy chỉnh",
-	"components.filter-dimension-set-date-time-range-value.valueTextRange": "{startValue} đến {endValue}",
-	"components.filter-dimension-set-date-time-range-value.valueTextRangeEndOnly": "Trước {endValue}",
-	"components.filter-dimension-set-date-time-range-value.valueTextRangeStartOnly": "Sau {startValue}",
+	"components.filter-dimension-set-date-time-range-value.valueTextRange": "{startValue} tới {endValue}",
+	"components.filter-dimension-set-date-time-range-value.valueTextRangeEndOnly": "Trước khi {endValue}",
+	"components.filter-dimension-set-date-time-range-value.valueTextRangeStartOnly": "Sau khi {startValue}",
 	"components.form-element.defaultError": "{label} không hợp lệ",
 	"components.form-element.defaultFieldLabel": "Trường",
 	"components.form-element.input.email.typeMismatch": "Email không hợp lệ",
@@ -85,7 +84,7 @@ export default {
 		`{count, plural,
 			other {Có {count} lỗi được tìm thấy trong thông tin bạn đã gửi}
 		}`,
-	"components.form-error-summary.text": "Chuyển đổi chi tiết lỗi",
+	"components.form-error-summary.text": "Chuyển đổi các chi tiết lỗi",
 	"components.input-color.backgroundColor": "Màu nền",
 	"components.input-color.foregroundColor": "Màu tiền cảnh",
 	"components.input-color.none": "Không",
@@ -94,14 +93,14 @@ export default {
 	"components.input-date.errorMinDateOnly": "Ngày phải nằm trong hoặc sau {minDate}",
 	"components.input-date.errorOutsideRange": "Ngày phải nằm trong khoảng giữa {minDate} và {maxDate}",
 	"components.input-date.now": "Bây giờ",
-	"components.input-date.openInstructions": "Sử dụng định dạng ngày {format}. Nhấn phím mũi tên xuống hoặc phím Enter để truy cập lịch nhỏ.",
+	"components.input-date.openInstructions": "Sử dụng định dạng ngày {format}. Nhấn phím mũi tên xuống hoặc nhấn Enter để truy cập lịch nhỏ.",
 	"components.input-date.revert": "{label} được trả về giá trị trước đó.",
-	"components.input-date.today": "Ngày nay",
+	"components.input-date.today": "Hôm nay",
 	"components.input-date.useDateFormat": "Sử dụng định dạng ngày {format}.",
 	"components.input-date-range.endDate": "Ngày Kết thúc",
 	"components.input-date-range.errorBadInput": "{startLabel} phải nằm trước {endLabel}",
-	"components.input-date-range.interactive-label": "Phạm vi ngày",
-	"components.input-date-range.startDate": "Ngày bắt đầu",
+	"components.input-date-range.interactive-label": "Trường nhập phạm vi ngày",
+	"components.input-date-range.startDate": "Ngày Bắt đầu",
 	"components.input-date-time.date": "Ngày tháng",
 	"components.input-date-time.errorMaxDateOnly": "Ngày phải là ngày trước hoặc vào {maxDate}",
 	"components.input-date-time.errorMinDateOnly": "Ngày phải nằm trong hoặc sau {minDate}",
@@ -110,7 +109,7 @@ export default {
 	"components.input-date-time-range.endDate": "Ngày Kết thúc",
 	"components.input-date-time-range.errorBadInput": "{startLabel} phải nằm trước {endLabel}",
 	"components.input-date-time-range.interactive-label": "Nhập phạm vi ngày và thời gian",
-	"components.input-date-time-range.startDate": "Ngày bắt đầu",
+	"components.input-date-time-range.startDate": "Ngày Bắt đầu",
 	"components.input-date-time-range-to.to": "đến",
 	"components.input-number.hintDecimalDuplicate": "Đã có một dấu thập phân trong số này",
 	"components.input-number.hintDecimalIncorrectComma": "Để thêm một dấu thập phân, hãy sử dụng ký tự dấu phẩy “,”",
@@ -120,31 +119,31 @@ export default {
 	"components.input-search.defaultPlaceholder": "Tìm kiếm...",
 	"components.input-search.search": "Tìm kiếm",
 	"components.input-time-range.endTime": "Thời gian Kết thúc",
-	"components.input-time-range.errorBadInput": "{startLabel} phải nằm trước {endLabel}",
-	"components.input-time-range.startTime": "Thời gian bắt đầu",
+	"components.input-time-range.errorBadInput": "{startLabel} phải trước {endLabel}",
+	"components.input-time-range.startTime": "Thời gian Bắt đầu",
 	"components.interactive.instructions": "Nhấn phím Enter để tương tác, Nhấn Escape để thoát",
-	"components.link.open-in-new-window": "Mở trong một cửa sổ mới được mở.",
-	"components.list.keyboard": "Sử dụng <b>các phím mũi tên</b> để di chuyển tiêu điểm trong danh sách này hoặc <b>trang lên/xuống</b> để di chuyển lên hoặc xuống 5 mục",
-	"components.list-controls.label": "Các hành động cho danh sách.",
+	"components.link.open-in-new-window": "Mở trong một cửa sổ mới.",
+	"components.list.keyboard": "Sử dụng <b>phím mũi tên</b> để di chuyển trọng tâm bên trong danh sách này hoặc <b>page up/down</b> để di chuyển lên hoặc xuống 5",
+	"components.list-controls.label": "Các hành động cho danh sách",
 	"components.list-item.addItem": "Thêm mục",
-	"components.list-item-drag-handle.default": "Sắp xếp lại hành động mục cho {name}",
+	"components.list-item-drag-handle.default": "Sắp xếp lại mục hành động cho {name}",
 	"components.list-item-drag-handle.keyboard": "Sắp xếp lại mục, vị trí hiện tại là {currentPosition} trong tổng số {size}. Để di chuyển mục này, nhấn phím mũi tên lên hoặc xuống.",
 	"components.list-item-drag-handle-tooltip.enter-desc": "Bật chế độ sắp xếp lại bằng bàn phím.",
 	"components.list-item-drag-handle-tooltip.enter-key": "Phím Enter.",
 	"components.list-item-drag-handle-tooltip.left-right-desc": "Thay đổi cấp độ lồng ghép.",
 	"components.list-item-drag-handle-tooltip.left-right-key": "Trái/Phải",
-	"components.list-item-drag-handle-tooltip.title": "Các điều khiển bàn phím để sắp xếp lại:",
+	"components.list-item-drag-handle-tooltip.title": "Các điều khiển Bàn phím để Sắp xếp lại:",
 	"components.list-item-drag-handle-tooltip.up-down-desc": "Di chuyển mục lên hoặc xuống trong danh sách.",
 	"components.list-item-drag-handle-tooltip.up-down-key": "Lên/Xuống",
-	"components.menu-item-return.return": "Quay lại menu trước đó.",
-	"components.menu-item-return.returnCurrentlyShowing": "Quay lại menu trước đó. Bạn đang xem {menuTitle}.",
+	"components.menu-item-return.return": "Quay lại tới menu trước.",
+	"components.menu-item-return.returnCurrentlyShowing": "Quay lại tới menu trước. Bạn đang xem {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}⁄{y}",
 	"components.meter-mixin.fractionAria": "{x} trên tổng số {y}",
 	"components.meter-mixin.progressIndicator": "Chỉ báo tiến trình",
-	"components.more-less.less": "ít",
+	"components.more-less.less": "ít hơn",
 	"components.more-less.more": "thêm",
-	"components.object-property-list.item-placeholder-text": "Mục giữ chỗ",
+	"components.object-property-list.item-placeholder-text": "Mục Giữ chỗ",
 	"components.overflow-group.moreActions": "Thêm các Tác vụ",
 	"components.pageable.info":
 		`{count, plural,
@@ -167,7 +166,6 @@ export default {
 	"components.selection.select-all": "Chọn Tất cả",
 	"components.selection.select-all-items":
 		`{count, plural,
-			=1 {Chọn mục}
 			other {Chọn tất cả {countFormatted} mục}
 		}`,
 	"components.selection.selected": "{count} mục được chọn",
@@ -175,7 +173,7 @@ export default {
 	"components.selection-controls.label": "Các thao tác để chọn",
 	"components.sort.label": "Sắp xếp",
 	"components.sort.text": "Sắp xếp: {selectedItemText}",
-	"components.switch.conditions": "Phải đáp ứng các điều kiện",
+	"components.switch.conditions": "Các điều kiện phải được đáp ứng",
 	"components.switch.hidden": "Bị ẩn",
 	"components.switch.visible": "Nhìn thấy được",
 	"components.switch.visibleWithPeriod": "Hiển thị.",
@@ -204,11 +202,11 @@ export default {
 	"components.table-controls.label": "Các tác vụ cho bảng",
 	"components.tabs.next": "Cuộn tới",
 	"components.tabs.previous": "Cuộn ngược",
-	"components.tag-list.clear": "Bấm, nhấn phím xoá lùi hoặc nhấn phím xoá để xoá mục {value}",
+	"components.tag-list.clear": "Nhấp, nhấn phím xoá lùi hoặc nhấn phím xoá để xoá mục {value}",
 	"components.tag-list.clear-all": "Xóa tất cả",
-	"components.tag-list.cleared-all": "Xóa tất cả các mục danh sách thẻ",
-	"components.tag-list.cleared-item": "Xóa mục danh sách thẻ {value}",
-	"components.tag-list.interactive-label": "Danh sách thẻ, {count} mục",
+	"components.tag-list.cleared-all": "Đã xóa tất cả các mục danh sách thẻ",
+	"components.tag-list.cleared-item": "Đã xóa mục danh sách thẻ {value}",
+	"components.tag-list.interactive-label": "Danh sách Thẻ, {count} mục",
 	"components.tag-list.num-hidden": "+ {count} mục nữa",
 	"components.tag-list.role-description":
 		`{count, plural,
@@ -218,11 +216,11 @@ export default {
 	"components.tag-list.show-less": "Ẩn bớt",
 	"components.tag-list.show-more-description": "Chọn để hiển thị các mục danh sách thẻ ẩn",
 	"components.tag-list-item.role-description": "Thẻ",
-	"components.tag-list-item.tooltip-arrow-keys": "Các phím mũi tên",
+	"components.tag-list-item.tooltip-arrow-keys": "Phím mũi tên",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "Di chuyển giữa các thẻ",
 	"components.tag-list-item.tooltip-delete-key": "Phím lùi/Xóa",
 	"components.tag-list-item.tooltip-delete-key-desc": "Xóa thẻ được chọn",
-	"components.tag-list-item.tooltip-title": "Các điều khiển bàn phím",
+	"components.tag-list-item.tooltip-title": "Điều khiển Bàn phím",
 	"components.view-switcher.role-description":
 		`{count, plural,
 			=0 {Xem Trình chuyển đổi với 0 mục}

package/package.json

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