@brightspace-ui/core 3.171.3 → 3.172.0

package/components/button/README.md

@@ -313,6 +313,30 @@ Use the Add button when users need to quickly insert new items at specific locat
 | `mode` | String | Display mode of the component. Defaults to "icon" (plus icon is always visible). Other options are "icon-and-text" (plus icon and text are always visible), and "icon-when-interacted" (plus icon is only visible when hover or focus). |
 <!-- docs: end hidden content -->
 
+## Copy Button [d2l-button-copy]
+
+Use the Copy button to enable users to copy a text value to the clipboard. The `d2l-button-copy`'s `click` event provides the `writeTextToClipboard` method for writing the text to the clipboard.
+
+<!-- docs: demo code properties name:d2l-button-copy sandboxTitle:'Copy Button' display:block autoSize:false size:xsmall -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/button/button-copy.js';
+  document.querySelector('d2l-button-copy').addEventListener('click', e => {
+    e.detail.writeTextToClipboard(document.querySelector('#to-copy').textContent);
+  });
+</script>
+<span id="to-copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
+<d2l-button-copy></d2l-button-copy>
+```
+
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|--|--|--|
+| `disabled` | Boolean | Disables the button |
+<!-- docs: end hidden content -->
+
 ## Floating Buttons [d2l-floating-buttons]
 
 Floating workflow buttons `<d2l-floating-buttons>` cause buttons to float or 'dock' to the bottom of the viewport when they would otherwise be below the bottom of the viewport. When their normal position becomes visible, they will undock.

package/components/button/button-copy.js

@@ -0,0 +1,91 @@
+import '../alert/alert-toast.js';
+import './button-icon.js';
+import { css, html, LitElement } from 'lit';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
+import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+
+/**
+ * A button component that copies to the clipboard.
+ */
+class ButtonCopy extends FocusMixin(LocalizeCoreElement(LitElement)) {
+
+	static get properties() {
+		return {
+			/**
+			 * Disables the button
+			 * @type {boolean}
+			 */
+			disabled: { type: Boolean, reflect: true },
+			_iconCheckTimeoutId: { state: true },
+			_toastState: { state: true }
+		};
+	}
+
+	static get styles() {
+		return css`
+			:host {
+				display: inline-block;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+		`;
+	}
+
+	constructor() {
+		super();
+		this.disabled = false;
+	}
+
+	static get focusElementSelector() {
+		return 'd2l-button-icon';
+	}
+
+	render() {
+		return html`
+			<d2l-button-icon ?disabled="${this.disabled}" icon="${this._iconCheckTimeoutId ? 'tier1:check' : 'tier1:copy'}" text="${this.localize('intl-common:actions:copy')}" @click="${this.#handleClick}"></d2l-button-icon>
+			<d2l-alert-toast
+				@d2l-alert-toast-close="${this.#handleToastClose}"
+				?open="${this._toastState}"
+				type="${this._toastState === 'error' ? 'critical' : 'default'}">
+					${this._toastState === 'error' ? this.localize('components.button-copy.error') : this.localize('components.button-copy.copied')}
+			</d2l-alert-toast>
+		`;
+	}
+
+	async #handleClick(e) {
+		e.stopPropagation();
+		if (this.disabled) return;
+
+		clearTimeout(this._iconCheckTimeoutId);
+
+		/** Dispatched when button is clicked. Use the event detail's `writeTextToClipboard` to write to the clipboard. */
+		this.dispatchEvent(new CustomEvent('click', {
+			detail: {
+				writeTextToClipboard: async(text) => {
+					text = text?.trim?.();
+					if (!text) return false;
+					try {
+						// writeText can throw NotAllowedError (ex. iframe without allow="clipboard-write" in Chrome)
+						await navigator.clipboard.writeText(text);
+						this._toastState = 'copied';
+						this._iconCheckTimeoutId = setTimeout(() => this._iconCheckTimeoutId = null, 2000);
+						return true;
+					} catch {
+						this._toastState = 'error';
+						return false;
+					}
+				}
+			},
+			bubbles: false
+		}));
+
+	}
+
+	#handleToastClose() {
+		this._toastState = null;
+	}
+
+}
+
+customElements.define('d2l-button-copy', ButtonCopy);

package/components/button/demo/button-copy.html

@@ -0,0 +1,60 @@
+<!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 '../../icons/icon-custom.js';
+			import '../../inputs/input-text.js';
+			import '../button-icon.js';
+			import '../button-copy.js';
+		</script>
+		<style>
+			d2l-button-copy[slot="after"] {
+				margin-inline-start: 0.3rem;
+			}
+		</style>
+	</head>
+	<body unresolved>
+
+		<d2l-demo-page page-title="d2l-button-copy">
+
+			<h2>With d2l-input-text</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-input-text label="Name">
+						<d2l-button-copy slot="after"></d2l-button-copy>
+					</d2l-input-text>
+					<script>
+						(demo => {
+							demo.querySelector('d2l-button-copy').addEventListener('click', async(e) => {
+								console.log('Copied', await e.detail.writeTextToClipboard(demo.querySelector('d2l-input-text').value));
+							});
+						})(document.currentScript.parentNode);
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Disabled</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<span>Donuts are yummmmmy!</span>
+					<d2l-button-copy disabled></d2l-button-copy>
+					<script>
+						(demo => {
+							demo.querySelector('d2l-button-copy').addEventListener('click', async(e) => {
+								console.log('Copied', await e.detail.writeTextToClipboard(demo.querySelector('span').textContent));
+							});
+						})(document.currentScript.parentNode);
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
+		</d2l-demo-page>
+
+	</body>
+</html>

package/custom-elements.json

@@ -395,6 +395,34 @@
         }
       ]
     },
+    {
+      "name": "d2l-button-copy",
+      "path": "./components/button/button-copy.js",
+      "description": "A button component that copies to the clipboard.",
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Disables the button",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the button",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "click",
+          "description": "Dispatched when button is clicked. Use the event detail's `writeTextToClipboard` to write to the clipboard."
+        }
+      ]
+    },
     {
       "name": "d2l-button-icon",
       "path": "./components/button/button-icon.js",

package/helpers/localize-core-element.js

@@ -4,7 +4,8 @@ export const LocalizeCoreElement = superclass => class extends LocalizeMixin(sup
 
 	static get localizeConfig() {
 		return {
-			importFunc: async lang => (await import(`../lang/${lang}.js`)).default
+			importFunc: async lang => (await import(`../lang/${lang}.js`)).default,
+			loadCommon: true
 		};
 	}
 

package/lang/ar.js

@@ -2,6 +2,8 @@ export default {
 	"components.alert.close": "إغلاق التنبيه",
 	"components.breadcrumbs.breadcrumb": "شريط التنقل",
 	"components.button-add.addItem": "إضافة عنصر",
+	"components.button-copy.copied": "تم النسخ!",
+	"components.button-copy.error": "Copy failed. Try again, or try copying manually.",
 	"components.button-split.otherOptions": "خيارات أخرى",
 	"components.calendar.hasEvents": "يحتوي على أحداث.",
 	"components.calendar.notSelected": "لم يتم التحديد.",

package/lang/cy.js

@@ -2,6 +2,8 @@ export default {
 	"components.alert.close": "Cau Hysbysiad",
 	"components.breadcrumbs.breadcrumb": "Briwsionyn Bara",
 	"components.button-add.addItem": "Ychwanegu Eitem",
+	"components.button-copy.copied": "Wedi’i gopïo!",
+	"components.button-copy.error": "Copy failed. Try again, or try copying manually.",
 	"components.button-split.otherOptions": "Opsiynau Eraill",
 	"components.calendar.hasEvents": "Yn Cynnwys Digwyddiadau.",
 	"components.calendar.notSelected": "Heb ei Ddewis.",

package/lang/da.js

@@ -2,6 +2,8 @@ export default {
 	"components.alert.close": "Luk besked",
 	"components.breadcrumbs.breadcrumb": "Brødkrumme",
 	"components.button-add.addItem": "Tilføj element",
+	"components.button-copy.copied": "Kopieret!",
+	"components.button-copy.error": "Copy failed. Try again, or try copying manually.",
 	"components.button-split.otherOptions": "Andre indstillinger",
 	"components.calendar.hasEvents": "Har begivenheder.",
 	"components.calendar.notSelected": "Ikke valgt.",

package/lang/de.js

@@ -2,6 +2,8 @@ export default {
 	"components.alert.close": "Benachrichtigung schließen",
 	"components.breadcrumbs.breadcrumb": "Brotkrümelnavigation",
 	"components.button-add.addItem": "Element hinzufügen",
+	"components.button-copy.copied": "Kopiert.",
+	"components.button-copy.error": "Copy failed. Try again, or try copying manually.",
 	"components.button-split.otherOptions": "Sonstige Optionen",
 	"components.calendar.hasEvents": "Hat Ereignisse.",
 	"components.calendar.notSelected": "Nicht ausgewählt.",

package/lang/en-gb.js

@@ -2,6 +2,8 @@ export default {
 	"components.alert.close": "Close Alert",
 	"components.breadcrumbs.breadcrumb": "Breadcrumb",
 	"components.button-add.addItem": "Add Item",
+	"components.button-copy.copied": "Copied!",
+	"components.button-copy.error": "Copy failed. Try again, or try copying manually.",
 	"components.button-split.otherOptions": "Other Options",
 	"components.calendar.hasEvents": "Has Events.",
 	"components.calendar.notSelected": "Not Selected.",

package/lang/en.js

@@ -2,6 +2,8 @@ export default {
 	"components.alert.close": "Close Alert",
 	"components.breadcrumbs.breadcrumb": "Breadcrumb",
 	"components.button-add.addItem": "Add Item",
+	"components.button-copy.copied": "Copied!",
+	"components.button-copy.error": "Copy failed. Try again, or try copying manually.",
 	"components.button-split.otherOptions": "Other Options",
 	"components.calendar.hasEvents": "Has Events.",
 	"components.calendar.notSelected": "Not Selected.",

package/lang/es-es.js

@@ -2,6 +2,8 @@ export default {
 	"components.alert.close": "Cerrar alerta",
 	"components.breadcrumbs.breadcrumb": "Ruta de navegación",
 	"components.button-add.addItem": "Agregar elemento",
+	"components.button-copy.copied": "Copiado.",
+	"components.button-copy.error": "Copy failed. Try again, or try copying manually.",
 	"components.button-split.otherOptions": "Otras opciones",
 	"components.calendar.hasEvents": "Tiene eventos.",
 	"components.calendar.notSelected": "No seleccionado.",

package/lang/es.js

@@ -2,6 +2,8 @@ export default {
 	"components.alert.close": "Cerrar alerta",
 	"components.breadcrumbs.breadcrumb": "Ruta de navegación",
 	"components.button-add.addItem": "Agregar elemento",
+	"components.button-copy.copied": "Copiado.",
+	"components.button-copy.error": "Copy failed. Try again, or try copying manually.",
 	"components.button-split.otherOptions": "Otras opciones",
 	"components.calendar.hasEvents": "Tiene eventos.",
 	"components.calendar.notSelected": "No seleccionado.",

package/lang/fr-fr.js

@@ -2,6 +2,8 @@ export default {
 	"components.alert.close": "Fermer l’alerte",
 	"components.breadcrumbs.breadcrumb": "Chemin de navigation",
 	"components.button-add.addItem": "Ajouter un élément",
+	"components.button-copy.copied": "Copié !",
+	"components.button-copy.error": "Copy failed. Try again, or try copying manually.",
 	"components.button-split.otherOptions": "Autres options",
 	"components.calendar.hasEvents": "A des événements.",
 	"components.calendar.notSelected": "Non sélectionné.",

package/lang/fr.js

@@ -2,6 +2,8 @@ export default {
 	"components.alert.close": "Fermer l’alerte",
 	"components.breadcrumbs.breadcrumb": "Chemin de navigation",
 	"components.button-add.addItem": "Ajouter un élément",
+	"components.button-copy.copied": "Copié !",
+	"components.button-copy.error": "Copy failed. Try again, or try copying manually.",
 	"components.button-split.otherOptions": "Autres options",
 	"components.calendar.hasEvents": "Comprend des événements.",
 	"components.calendar.notSelected": "Non sélectionné(e)",

package/lang/haw.js

@@ -2,6 +2,8 @@ export default {
 	"components.alert.close": "Pani i ka makaʻala",
 	"components.breadcrumbs.breadcrumb": "Palapalapala",
 	"components.button-add.addItem": "Pākuʻi Mea",
+	"components.button-copy.copied": "Kope ʻia!",
+	"components.button-copy.error": "Copy failed. Try again, or try copying manually.",
 	"components.button-split.otherOptions": "Nā Koho ʻē aʻe",
 	"components.calendar.hasEvents": "Loaʻa nā hanana.",
 	"components.calendar.notSelected": "ʻAʻole i koho ʻia.",

package/lang/hi.js

@@ -2,6 +2,8 @@ export default {
 	"components.alert.close": "अलर्ट बंद करें",
 	"components.breadcrumbs.breadcrumb": "ब्रेडक्रंब",
 	"components.button-add.addItem": "आइटम जोड़ें",
+	"components.button-copy.copied": "कॉपी किया गया!",
+	"components.button-copy.error": "Copy failed. Try again, or try copying manually.",
 	"components.button-split.otherOptions": "अन्य विकल्प",
 	"components.calendar.hasEvents": "ईवेंट हैं।",
 	"components.calendar.notSelected": "चयनित नहीं।",

package/lang/ja.js

@@ -2,6 +2,8 @@ export default {
 	"components.alert.close": "アラートを閉じる",
 	"components.breadcrumbs.breadcrumb": "階層",
 	"components.button-add.addItem": "項目の追加",
+	"components.button-copy.copied": "コピーできました。",
+	"components.button-copy.error": "Copy failed. Try again, or try copying manually.",
 	"components.button-split.otherOptions": "その他のオプション",
 	"components.calendar.hasEvents": "イベントがあります。",
 	"components.calendar.notSelected": "選択されていません。",

package/lang/ko.js

@@ -2,6 +2,8 @@ export default {
 	"components.alert.close": "경보 닫기",
 	"components.breadcrumbs.breadcrumb": "이동 경로",
 	"components.button-add.addItem": "항목 추가",
+	"components.button-copy.copied": "복사 완료!",
+	"components.button-copy.error": "Copy failed. Try again, or try copying manually.",
 	"components.button-split.otherOptions": "기타 옵션",
 	"components.calendar.hasEvents": "이벤트가 있습니다.",
 	"components.calendar.notSelected": "선택되지 않음.",

package/lang/mi.js

@@ -2,6 +2,8 @@ export default {
 	"components.alert.close": "Kati Matohi",
 	"components.breadcrumbs.breadcrumb": "Pānui",
 	"components.button-add.addItem": "Tāpiri Tūemi",
+	"components.button-copy.copied": "Kua tāruatia!",
+	"components.button-copy.error": "Copy failed. Try again, or try copying manually.",
 	"components.button-split.otherOptions": "Ētahi atu kōwhiringa",
 	"components.calendar.hasEvents": "He takatu ēnei.",
 	"components.calendar.notSelected": "Kāore i tīpakona.",

package/lang/nl.js

@@ -2,6 +2,8 @@ export default {
 	"components.alert.close": "Waarschuwing sluiten",
 	"components.breadcrumbs.breadcrumb": "Kruimelpad",
 	"components.button-add.addItem": "Item toevoegen",
+	"components.button-copy.copied": "Gekopieerd!",
+	"components.button-copy.error": "Copy failed. Try again, or try copying manually.",
 	"components.button-split.otherOptions": "Overige opties",
 	"components.calendar.hasEvents": "Bevat gebeurtenissen.",
 	"components.calendar.notSelected": "Niet geselecteerd.",

package/lang/pt.js

@@ -2,6 +2,8 @@ export default {
 	"components.alert.close": "Fechar alerta",
 	"components.breadcrumbs.breadcrumb": "Auxiliar de navegação",
 	"components.button-add.addItem": "Adicionar item",
+	"components.button-copy.copied": "Copiado!",
+	"components.button-copy.error": "Copy failed. Try again, or try copying manually.",
 	"components.button-split.otherOptions": "Outras Opções",
 	"components.calendar.hasEvents": "Tem eventos.",
 	"components.calendar.notSelected": "Não selecionado.",

package/lang/sv.js

@@ -2,6 +2,8 @@ export default {
 	"components.alert.close": "Stängningsvarning",
 	"components.breadcrumbs.breadcrumb": "Sökväg",
 	"components.button-add.addItem": "Lägg till objekt",
+	"components.button-copy.copied": "Kopierat!",
+	"components.button-copy.error": "Copy failed. Try again, or try copying manually.",
 	"components.button-split.otherOptions": "Andra alternativ",
 	"components.calendar.hasEvents": "Har händelser.",
 	"components.calendar.notSelected": "Inte vald.",

package/lang/th.js

@@ -2,6 +2,8 @@ export default {
 	"components.alert.close": "ปิดการแจ้งเตือน",
 	"components.breadcrumbs.breadcrumb": "แถบนำทาง",
 	"components.button-add.addItem": "เพิ่มรายการ",
+	"components.button-copy.copied": "คัดลอกแล้ว!",
+	"components.button-copy.error": "Copy failed. Try again, or try copying manually.",
 	"components.button-split.otherOptions": "ตัวเลือกอื่น",
 	"components.calendar.hasEvents": "มีกิจกรรม",
 	"components.calendar.notSelected": "ยังไม่ได้เลือก",

package/lang/tr.js

@@ -2,6 +2,8 @@ export default {
 	"components.alert.close": "Kapatma Uyarısı",
 	"components.breadcrumbs.breadcrumb": "İçerik Haritası",
 	"components.button-add.addItem": "Öğe Ekle",
+	"components.button-copy.copied": "Kopyalandı!",
+	"components.button-copy.error": "Copy failed. Try again, or try copying manually.",
 	"components.button-split.otherOptions": "Diğer Seçenekler",
 	"components.calendar.hasEvents": "Olayları Var.",
 	"components.calendar.notSelected": "Seçili Değil.",

package/lang/vi.js

@@ -2,6 +2,8 @@ export default {
 	"components.alert.close": "Đóng Cảnh Báo",
 	"components.breadcrumbs.breadcrumb": "Breadcrumb",
 	"components.button-add.addItem": "Thêm mục",
+	"components.button-copy.copied": "Đã sao chép!",
+	"components.button-copy.error": "Copy failed. Try again, or try copying manually.",
 	"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.",

package/lang/zh-cn.js

@@ -2,6 +2,8 @@ export default {
 	"components.alert.close": "关闭提醒",
 	"components.breadcrumbs.breadcrumb": "痕迹导航",
 	"components.button-add.addItem": "添加项目",
+	"components.button-copy.copied": "已复制！",
+	"components.button-copy.error": "Copy failed. Try again, or try copying manually.",
 	"components.button-split.otherOptions": "其他选项",
 	"components.calendar.hasEvents": "有事件。",
 	"components.calendar.notSelected": "未选择。",

package/lang/zh-tw.js

@@ -2,6 +2,8 @@ export default {
 	"components.alert.close": "關閉警示",
 	"components.breadcrumbs.breadcrumb": "導覽路徑",
 	"components.button-add.addItem": "新增項目",
+	"components.button-copy.copied": "複製成功！",
+	"components.button-copy.error": "Copy failed. Try again, or try copying manually.",
 	"components.button-split.otherOptions": "其他選項",
 	"components.calendar.hasEvents": "有事件。",
 	"components.calendar.notSelected": "未選取。",

package/package.json

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