@brightspace-ui/core 3.227.3 → 3.227.5

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

@@ -1,380 +0,0 @@
-export const listDemos = {
-	imgPrimaryAndSupporting: [{
-		key: '1',
-		primaryText: 'Introductory Earth Sciences',
-		supportingText: 'This course explores the geological processes of the Earth\'s interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering.',
-		imgSrc: 'https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg',
-		dropNested: true,
-		items: [{
-			key: '1-1',
-			primaryText: 'Glaciation',
-			supportingText: 'Nesting Allowed',
-			imgSrc: 'https://s.brightspace.com/course-images/images/bf648978-6637-4fdc-815b-81572c436c0e/tile-high-density-max-size.jpg',
-			dropNested: true,
-			items: []
-		}, {
-			key: '1-2',
-			primaryText: 'Weathering',
-			supportingText: 'Nesting Allowed',
-			imgSrc: 'https://s.brightspace.com/course-images/images/50f91ba6-7c25-482a-bd71-1c4b7c8d2154/tile-high-density-min-size.jpg',
-			dropNested: true,
-			items: []
-		}, {
-			key: '1-3',
-			primaryText: 'Volcanism',
-			supportingText: 'Nesting Allowed',
-			imgSrc: 'https://s.brightspace.com/course-images/images/5eb2371d-6099-4c8d-8aad-075f357012a2/tile-high-density-min-size.jpg',
-			dropNested: true,
-			items: []
-		}]
-	}, {
-		key: '2',
-		primaryText: 'Applied Wetland Science',
-		supportingText: 'Advanced concepts on wetland ecosystems in the context of regional and global earth systems processes such as carbon and nitrogen cycling and climate change, applications of wetland paleoecology, use of isotopes and other geochemical tools in wetland science, and wetland engineering in landscape rehabilitation and ecotechnology.',
-		imgSrc: 'https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg',
-		items: [{
-			key: '-1',
-			primaryText: 'Carbon & Nitrogen Cycling',
-			supportingText: 'Nesting Allowed',
-			imgSrc: 'https://s.brightspace.com/course-images/images/623b420b-a305-4762-8af8-598f0e72e956/tile-high-density-min-size.jpg',
-			dropNested: true,
-			items: []
-		}, {
-			key: '2-2',
-			primaryText: 'Wetland Engineering',
-			supportingText: 'Nesting Allowed',
-			imgSrc: 'https://s.brightspace.com/course-images/images/26102577-8f2a-4e24-84b5-19d76decbc7a/tile-high-density-min-size.jpg',
-			dropNested: true,
-			items: []
-		}]
-	}],
-	primaryAndSupportingText: [{
-		key: '1',
-		primaryText: 'Introductory Earth Sciences',
-		supportingText: 'This course explores the geological processes of the Earth\'s interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering.',
-		dropNested: true,
-		items: [{
-			key: '1-1',
-			primaryText: 'Glaciation',
-			supportingText: 'Nesting Allowed',
-			dropNested: true,
-			items: []
-		}, {
-			key: '1-2',
-			primaryText: 'Weathering',
-			supportingText: 'Nesting Allowed',
-			dropNested: true,
-			items: []
-		}, {
-			key: '1-3',
-			primaryText: 'Volcanism',
-			supportingText: 'Nesting Allowed',
-			dropNested: true,
-			items: []
-		}]
-	}, {
-		key: '2',
-		primaryText: 'Applied Wetland Science',
-		supportingText: 'Advanced concepts on wetland ecosystems in the context of regional and global earth systems processes such as carbon and nitrogen cycling and climate change, applications of wetland paleoecology, use of isotopes and other geochemical tools in wetland science, and wetland engineering in landscape rehabilitation and ecotechnology.',
-		items: [{
-			key: '2-1',
-			primaryText: 'Carbon & Nitrogen Cycling',
-			supportingText: 'Nesting Allowed',
-			dropNested: true,
-			items: []
-		}, {
-			key: '2-2',
-			primaryText: 'Wetland Engineering',
-			supportingText: 'Nesting Allowed',
-			dropNested: true,
-			items: []
-		}]
-	}],
-	primaryTextOnly: [{
-		key: '1',
-		primaryText: 'Introductory Earth Sciences',
-		dropNested: true,
-		items: [{
-			key: '1-1',
-			primaryText: 'Glaciation',
-			dropNested: true,
-			items: []
-		}, {
-			key: '1-2',
-			primaryText: 'Weathering',
-			dropNested: true,
-			items: []
-		}, {
-			key: '1-3',
-			primaryText: 'Volcanism',
-			dropNested: true,
-			items: []
-		}]
-	}, {
-		key: '2',
-		primaryText: 'Applied Wetland Science',
-		items: [{
-			key: '2-1',
-			primaryText: 'Carbon & Nitrogen Cycling',
-			dropNested: true,
-			items: []
-		}, {
-			key: '2-2',
-			primaryText: 'Wetland Engineering',
-			dropNested: true,
-			items: []
-		}]
-	}],
-	primaryTextOnlyDeepNesting: [{
-		key: '1',
-		primaryText: 'Item 1 - Deeply Nested',
-		dropNested: true,
-		items: [{
-			key: '1-1',
-			primaryText: 'Glaciation',
-			dropNested: true,
-			items: [{
-				key: '1-1-1',
-				primaryText: 'Ice',
-				dropNested: true,
-				items: [{
-					key: '1-1-1-1',
-					primaryText: 'Cold',
-					dropNested: true,
-					items: [{
-						key: '1-1-1-1-1',
-						primaryText: 'Winter',
-						dropNested: true,
-						items: [{
-							key: '1-1-1-1-1-1',
-							primaryText: 'Canada',
-							dropNested: true,
-							items: [{
-								key: '1-1-1-1-1-1-1',
-								primaryText: 'Moose',
-								dropNested: true,
-								items: []
-							}]
-						}]
-					}]
-				}]
-			}, {
-				key: '1-1-2',
-				primaryText: 'Snow',
-				dropNested: true,
-				items: []
-			}]
-		}, {
-			key: '1-2',
-			primaryText: 'Weathering',
-			dropNested: true,
-			items: []
-		}, {
-			key: '1-3',
-			primaryText: 'Volcanism',
-			dropNested: true,
-			items: []
-		}]
-	}, {
-		key: '2',
-		primaryText: 'Item 2',
-		items: [{
-			key: '2-1',
-			primaryText: '2-1',
-			dropNested: true,
-			items: []
-		}, {
-			key: '2-2',
-			primaryText: '2-2',
-			dropNested: true,
-			items: []
-		}]
-	}, {
-		key: '3',
-		primaryText: 'Item 3',
-		items: [{
-			key: '3-1',
-			primaryText: '3-1',
-			dropNested: true,
-			items: []
-		}, {
-			key: '3-2',
-			primaryText: '3-2',
-			dropNested: true,
-			items: []
-		}]
-	}, {
-		key: '4',
-		primaryText: 'Item 4',
-		items: [{
-			key: '4-1',
-			primaryText: '4-1',
-			dropNested: true,
-			items: []
-		}, {
-			key: '4-2',
-			primaryText: '4-2',
-			dropNested: true,
-			items: []
-		}]
-	}, {
-		key: '5',
-		primaryText: 'Item 5',
-		items: [{
-			key: '5-1',
-			primaryText: '5-1',
-			dropNested: true,
-			items: []
-		}, {
-			key: '5-2',
-			primaryText: '5-2',
-			dropNested: true,
-			items: []
-		}]
-	}, {
-		key: '6',
-		primaryText: 'Item 6',
-		items:[{
-			key: '6-1',
-			primaryText: '6-1',
-			dropNested: true,
-			items: []
-		}, {
-			key: '6-2',
-			primaryText: '6-2',
-			dropNested: true,
-			items: []
-		}]
-	}, {
-		key: '7',
-		primaryText: 'Item 7',
-		items: [{
-			key: '7-1',
-			primaryText: '7-1',
-			dropNested: true,
-			items: []
-		}, {
-			key: '7-2',
-			primaryText: '7-2',
-			dropNested: true,
-			items: []
-		}]
-	}, {
-		key: '8',
-		primaryText: 'Item 8',
-		items: [{
-			key: '8-1',
-			primaryText: '8-1',
-			dropNested: true,
-			items: []
-		}, {
-			key: '8-2',
-			primaryText: '8-2',
-			dropNested: true,
-			items: []
-		}]
-	}, {
-		key: '9',
-		primaryText: 'Item 9',
-		items: [{
-			key: '9-1',
-			primaryText: '9-1',
-			dropNested: true,
-			items: []
-		}, {
-			key: '9-2',
-			primaryText: '9-2',
-			dropNested: true,
-			items: []
-		}]
-	}, {
-		key: '10',
-		primaryText: 'Item 10',
-		items: [{
-			key: '10-1',
-			primaryText: '10-1',
-			dropNested: true,
-			items: []
-		}, {
-			key: '10-2',
-			primaryText: '10-2',
-			dropNested: true,
-			items: []
-		}]
-	}],
-	oneChild: [{
-		key: '1',
-		primaryText: 'Introductory Earth Sciences',
-		dropNested: true,
-		items: [{
-			key: '1-1',
-			primaryText: 'Glaciation',
-			dropNested: true,
-			items: []
-		}]
-	}, {
-		key: '2',
-		primaryText: 'Applied Wetland Science',
-		dropNested: true,
-		items: []
-	}],
-	nav: [{
-		key: '1',
-		primaryText: 'Introductory Earth Sciences',
-		dropNested: true,
-		color: '#006fbf',
-		items: [{
-			key: '1-1',
-			primaryText: 'Glaciation',
-			dropNested: true,
-			items: [],
-			tooltipText: 'Starts: 2023-09-01, Ends: 2023-12-01',
-			tooltipOpenerText: 'Due: 2023-10-10',
-			hasIcon: true
-		}, {
-			key: '1-2',
-			primaryText: 'Weathering',
-			dropNested: true,
-			items: [],
-			tooltipText: 'Starts: 2023-10-01, Ends: 2023-12-01',
-			tooltipOpenerText: 'Due: 2023-11-10',
-			hasIcon: true
-		}, {
-			key: '1-3',
-			primaryText: 'Volcanism',
-			dropNested: true,
-			items: [],
-			hasIcon: true
-		}]
-	}, {
-		key: '2',
-		primaryText: 'Applied Wetland Science',
-		color: '#990006',
-		items: [{
-			key: '2-1',
-			primaryText: 'Carbon & Nitrogen Cycling',
-			dropNested: true,
-			items: [],
-			hasIcon: true
-		}, {
-			key: '2-2',
-			primaryText: 'Wetland Engineering',
-			dropNested: true,
-			color: '#cd2026',
-			items: [{
-				key: '2-2-1',
-				primaryText: 'Wetland Engineering #1',
-				dropNested: true,
-				items: [],
-				hasIcon: true
-			}, {
-				key: '2-2-2',
-				primaryText: 'Wetland Engineering #2',
-				dropNested: true,
-				items: [],
-				hasIcon: true
-			}],
-			hasIcon: true
-		}]
-	}],
-};

package/components/list/demo/list-drag-and-drop-position.js

@@ -1,102 +0,0 @@
-import '../list-item-content.js';
-import '../list-item.js';
-import '../list.js';
-import { html, LitElement } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { repeat } from 'lit/directives/repeat.js';
-
-class ListDemoDragAndDropPosition extends LitElement {
-
-	static get properties() {
-		return {
-			addButton: { type: Boolean, attribute: 'add-button' },
-			list: { type: Array },
-			// below are for demonstration only
-			grid: { type: Boolean },
-			hrefs: { type: Boolean },
-			selectable: { type: Boolean }
-		};
-	}
-
-	constructor() {
-		super();
-		this.list = [
-			{
-				key: '1',
-				name: 'Geomorphology and GIS',
-				secondary: 'This course explores the geological processes of the Earth\'s interior and surface. These include volcanism, earthquakes, mountain...',
-				img: 'https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg',
-				href: 'https://d2l.com'
-			},
-			{
-				key: '2',
-				name: 'Engineering Materials for Energy Systems',
-				secondary: 'This course explores the geological processes of the Earth\'s interior and surface. These include volcanism, earthquakes, mountain...',
-				img: 'https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg',
-				href: 'https://d2l.com'
-			},
-			{
-				key: '3',
-				name: 'Introductory Earth Sciences',
-				secondary: 'This course explores the geological process of the Earth\'s interior and surface. These include volcanism, earthquakes, mountains...',
-				img: 'https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg',
-				href: 'https://d2l.com'
-			},
-			{
-				key: '4',
-				name: 'Applied Complex Analysis',
-				secondary: 'This course explores the geological process of the Earth\'s interior and surface. These include volcanism, earthquakes, mountains...',
-				img: 'https://s.brightspace.com/course-images/images/c63e7407-c3ba-4fa0-8383-08a8f4fa468b/tile-high-density-max-size.jpg',
-				href: 'https://d2l.com'
-			},
-			{
-				key: '5',
-				name: 'Basic French',
-				secondary: 'This course explores the geological process of the Earth\'s interior and surface. These include volcanism, earthquakes, mountains...',
-				img: 'https://s.brightspace.com/course-images/images/9e319eb4-31af-4912-889d-92d9f2d82884/tile-high-density-max-size.jpg',
-				href: 'https://d2l.com'
-			},
-			{
-				key: '6',
-				name: 'Algebraic Number Theory',
-				secondary: 'This course explores the geological process of the Earth\'s interior and surface. These include volcanism, earthquakes, mountains...',
-				img: 'https://s.brightspace.com/course-images/images/36c5813d-2ac3-4a73-8f39-3d6e1b381fe3/tile-high-density-max-size.jpg',
-				href: 'https://d2l.com'
-			}
-		];
-	}
-
-	render() {
-		const addButtonText = this.addButton ? 'Add New Item' : undefined;
-		return html`
-			<d2l-list
-				?grid="${this.grid}"
-				@d2l-list-item-position-change="${this._moveItems}"
-				?add-button="${this.addButton}"
-				add-button-text="${ifDefined(addButtonText)}">
-				${repeat(this.list, (item) => item.key, (item) => html`
-					<d2l-list-item
-						key="${ifDefined(item.key)}"
-						draggable
-						?selectable="${this.selectable}"
-						drag-handle-text="${item.name}"
-						href="${ifDefined(this.hrefs ? item.href : undefined)}"
-						label="${item.name}">
-						<img slot="illustration" src="${item.img}">
-						<d2l-list-item-content>
-							<div>${item.name}</div>
-							<div slot="secondary">${item.secondary}</div>
-						</d2l-list-item-content>
-					</d2l-list-item>
-				`)}
-			</d2l-list>
-		`;
-	}
-
-	_moveItems(e) {
-		e.detail.reorder(this.list, { keyFn: (item) => item.key });
-		this.requestUpdate('list', []);
-	}
-}
-
-customElements.define('d2l-demo-list-drag-and-drop-position', ListDemoDragAndDropPosition);

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

@@ -1,82 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<meta charset="UTF-8">
-	<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
-	<script type="module">
-		import '../../demo/demo-page.js';
-		import './list-drag-and-drop-position.js';
-		import './demo-list-nested.js';
-	</script>
-</head>
-<body unresolved>
-
-	<d2l-demo-page page-title="d2l-list (with drag & drop)">
-
-		<h2>Position Change Event</h2>
-
-		<d2l-demo-snippet>
-			<template>
-				<d2l-demo-list-drag-and-drop-position grid selectable hrefs></d2l-demo-list-drag-and-drop-position>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>Add Button</h2>
-
-		<d2l-demo-snippet>
-			<template>
-				<d2l-demo-list-drag-and-drop-position add-button selectable></d2l-demo-list-drag-and-drop-position>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>Move Event</h2>
-
-		<d2l-demo-snippet>
-			<template>
-				<d2l-demo-list-nested demo-item-key="imgPrimaryAndSupporting" is-draggable selectable disable-expand-feature></d2l-demo-list-nested>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>Add Button</h2>
-
-		<d2l-demo-snippet>
-			<template>
-				<d2l-demo-list-nested add-button demo-item-key="imgPrimaryAndSupporting" is-draggable selectable></d2l-demo-list-nested>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>Drop Nested Only</h2>
-
-		<d2l-demo-snippet>
-			<template>
-				<d2l-demo-list-nested drop-nested-only demo-item-key="imgPrimaryAndSupporting" is-draggable selectable></d2l-demo-list-nested>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>Disable Keyboard Drag</h2>
-
-		<d2l-demo-snippet>
-			<template>
-				<d2l-demo-list-nested demo-item-key="imgPrimaryAndSupporting" is-draggable selectable keyboard-drag-disabled></d2l-demo-list-nested>
-			</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>
-
-	<script>
-		document.body.addEventListener('d2l-list-items-move', e => {
-			console.log('d2l-list-items-move', e.detail);
-		});
-	</script>
-
-</body>
-</html>

package/components/list/demo/list-expand-collapse.html

@@ -1,136 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<meta charset="UTF-8">
-	<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
-	<script type="module">
-		import '../../demo/demo-page.js';
-		import './demo-list-nested.js';
-		import './demo-list-nested-lazy-load.js';
-	</script>
-</head>
-<body unresolved>
-
-	<d2l-demo-page page-title="d2l-list (with expand/collapse)">
-		<h2>Draggable & Selectable (with grid)</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-demo-list-nested
-					demo-item-key="imgPrimaryAndSupporting"
-					add-button
-					is-draggable
-					selectable
-					expandable
-					expanded
-					include-action-href
-					include-secondary-actions
-					include-list-controls></d2l-demo-list-nested>
-			</template>
-		</d2l-demo-snippet>
-
-		<d2l-demo-snippet>
-			<template>
-				<d2l-demo-list-nested demo-item-key="primaryAndSupportingText" is-draggable selectable expandable></d2l-demo-list-nested>
-			</template>
-		</d2l-demo-snippet>
-
-		<d2l-demo-snippet>
-			<template>
-				<d2l-demo-list-nested demo-item-key="primaryTextOnly" is-draggable selectable expandable></d2l-demo-list-nested>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>Draggable & Selectable (without grid)</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-demo-list-nested
-					demo-item-key="imgPrimaryAndSupporting"
-					add-button
-					is-draggable
-					selectable
-					expandable
-					expanded
-					include-secondary-actions
-					include-list-controls
-					disable-list-grid></d2l-demo-list-nested>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>Selectable</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-demo-list-nested demo-item-key="primaryAndSupportingText" selectable expandable expanded></d2l-demo-list-nested>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>Draggable</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-demo-list-nested demo-item-key="primaryAndSupportingText" is-draggable expandable></d2l-demo-list-nested>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>Expandable</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-demo-list-nested demo-item-key="primaryTextOnlyDeepNesting" expandable></d2l-demo-list-nested>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>Button list item</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-demo-list-nested
-					demo-item-key="imgPrimaryAndSupporting"
-					is-draggable
-					selectable
-					expandable
-					include-secondary-actions
-					include-list-controls
-					use-button-item></d2l-demo-list-nested>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>Load More</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-demo-list-nested demo-item-key="primaryTextOnlyDeepNesting" expandable expanded show-load-more></d2l-demo-list-nested>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>One Child</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-demo-list-nested demo-item-key="oneChild" expandable include-action-href></d2l-demo-list-nested>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>No Primary Action</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-demo-list-nested
-					demo-item-key="imgPrimaryAndSupporting"
-					is-draggable
-					selectable
-					expandable
-					no-primary-action></d2l-demo-list-nested>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>Lazy Loaded Children</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-demo-list-nested-lazy-load></d2l-demo-list-nested-lazy-load>
-			</template>
-		</d2l-demo-snippet>
-	</d2l-demo-page>
-
-	<script>
-		document.body.addEventListener('d2l-list-items-move', e => {
-			console.log('d2l-list-items-move', e.detail);
-		});
-	</script>
-
-</body>
-</html>