Progressively enhance leave calendar link clipboard copy

src/assets/customElements/clipboardButton.js

@@ -1,35 +1,31 @@
 // @ts-check
 
-export default class extends HTMLButtonElement {
-  /** @type {HTMLInputElement} */
-  #sourceEl;
-
+export default class extends HTMLElement {
   connectedCallback() {
-    const sourceSelector = this.dataset.clipboardButtonSource;
+    const selector = this.dataset.source;
 
-    if (!sourceSelector) {
-      throw new Error('data-clipboard-button-source is missing');
+    if (!selector) {
+      return;
     }
 
-    const sourceEl = /** @type {HTMLInputElement|null} */ (document.querySelector(
-      sourceSelector
+    const input = /** @type {HTMLInputElement|null} */ (document.querySelector(
+      selector
     ));
 
-    if (!sourceEl) {
-      throw new Error(`element '${sourceSelector}' was not found`);
+    if (!input) {
+      throw new Error(`input at '${selector}' was not found`);
     }
 
-    this.#sourceEl = sourceEl;
-
-    this.addEventListener('click', this.#handleClick);
-  }
+    const template = /** @type {HTMLTemplateElement} */ (this.querySelector(
+      'template'
+    ));
+    this.appendChild(document.importNode(template.content, true));
 
-  #handleClick = () => {
-    this.#sourceEl.select(); // Visual feedback
-    navigator.clipboard.writeText(this.#sourceEl.value);
-  };
+    const btn = /** @type {HTMLButtonElement} */ (this.querySelector('button'));
 
-  disconnectedCallback() {
-    this.removeEventListener('click', this.#handleClick);
+    btn.addEventListener('click', () => {
+      input.select(); // Visual feedback
+      navigator.clipboard.writeText(input.value);
+    });
   }
 }

src/assets/customElements/index.js

@@ -7,9 +7,7 @@ import navMenuButton from './navMenuButton';
 import themeToggler from './themeToggler';
 
 customElements.define('pc-auto-form', autoForm);
-customElements.define('pc-clipboard-button', clipboardButton, {
-  extends: 'button'
-});
+customElements.define('pc-clipboard-button', clipboardButton);
 customElements.define('pc-event-form', eventForm, { extends: 'form' });
 customElements.define('pc-faircalendar-filters-form', fairCalendarFiltersForm);
 customElements.define('pc-nav-menu-button', navMenuButton, {

src/templates/pages/leaves/list.njk

@@ -21,14 +21,14 @@
 
     <div class="pc-cluster pc-gap" style="--cluster-align: center">
         <label for="calendarUrl">{{ 'leaves-calendar-url-title'|trans }}</label>
-        <div>
-            <input id="calendarUrl" class="pc-input" type="text" readonly value="{{ url('people_leaves_calendar') }}?token={{ calendarToken }}">
-        </div>
-        <div>
-            <button is="pc-clipboard-button" class="pc-btn pc-btn--muted" data-clipboard-button-source="#calendarUrl" title="{{ 'clipboard-copy'|trans }}">
-                {{ icons.clipboard() }}
-            </button>
-        </div>
+        <input id="calendarUrl" class="pc-input" style="--input-width: fit-content" type="text" readonly value="{{ url('people_leaves_calendar') }}?token={{ calendarToken }}">
+        <pc-clipboard-button data-source="#calendarUrl">
+            <template>
+                <button class="pc-btn pc-btn--muted" title="{{ 'clipboard-copy'|trans }}">
+                    {{ icons.clipboard() }}
+                </button>
+            </template>
+        </pc-clipboard-button>
     </div>
 
     {% table table %}