@nectary/components 1.1.1 → 1.2.0

package/card/index.js

@@ -1,15 +1,21 @@
 import '../title';
 import '../text';
-import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, setClass, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{border-radius:var(--sinch-shape-radius-l);border:1px solid var(--sinch-color-snow-700);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-0);overflow:hidden}:host(:hover) #wrapper{box-shadow:var(--sinch-elevation-level-1)}#card-body{padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px}#illustration-wrapper{display:none;overflow:hidden;height:240px}#illustration-wrapper.active{display:block}#label{color:var(--sinch-color-stormy-300)}#label:empty{display:none}#header{display:flex;flex-direction:row;align-items:center;gap:8px;--sinch-size-icon:48px}#caption{color:var(--sinch-color-stormy-500);flex:1;min-width:0}#description{color:var(--sinch-color-stormy-500);flex:1;min-height:0;max-height:120px;overflow-y:auto}#description:empty{display:none}:host([disabled]:not([disabled=false])) :is(#illustration-wrapper,#description,#header,#label){opacity:.6}slot[name=action]::slotted(*){margin-top:20px;align-self:flex-start;max-width:100%}</style><div id="wrapper"><div id="illustration-wrapper"><slot name="illustration"></slot></div><div id="card-body"><sinch-text id="label" type="s" emphasized ellipsis></sinch-text><div id="header"><slot name="icon"></slot><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title></div><sinch-text id="description" type="m"></sinch-text><slot name="action"></slot></div></div>';
+import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, setClass, NectaryElement, isAttrTrue, getRect } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{border-radius:var(--sinch-shape-radius-l);border:1px solid var(--sinch-color-snow-700);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-0);overflow:hidden}:host(:hover) #wrapper{box-shadow:var(--sinch-elevation-level-1)}#card-body{padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px}#illustration-wrapper{display:none;overflow:hidden;height:240px}#illustration-wrapper.active{display:block}#label{color:var(--sinch-color-stormy-300)}#label:empty{display:none}#header{display:flex;flex-direction:row;align-items:center;gap:8px;--sinch-size-icon:48px}#caption{color:var(--sinch-color-stormy-500);flex:1;min-width:0}#description{color:var(--sinch-color-stormy-500);flex:1;min-height:0;max-height:120px;overflow-y:auto}#description:empty{display:none}:host([disabled]:not([disabled=false])) :is(#illustration-wrapper,#description,#header,#label){opacity:.6}slot[name=action]::slotted(*){margin-top:20px;align-self:flex-start;max-width:100%}:host([draggable=true]) #header{cursor:grab}</style><div id="wrapper"><div id="illustration-wrapper"><slot name="illustration"></slot></div><div id="card-body"><sinch-text id="label" type="s" emphasized ellipsis></sinch-text><div id="header"><slot name="icon"></slot><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title></div><sinch-text id="description" type="m"></sinch-text><slot name="action"></slot></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-card', class extends NectaryElement {
   #$text;
   #$label;
   #$caption;
+  #$header;
+  #$cardBody;
+  #$iconSlot;
   #$illustrationSlot;
   #$illustrationSlotWrapper;
+  #isDraggingCorrectHandle = false;
+  #isDraggingSubscribed = false;
+  #controller = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -17,20 +23,36 @@ defineCustomElement('sinch-card', class extends NectaryElement {
     this.#$text = shadowRoot.querySelector('#description');
     this.#$label = shadowRoot.querySelector('#label');
     this.#$caption = shadowRoot.querySelector('#caption');
+    this.#$header = shadowRoot.querySelector('#header');
+    this.#$cardBody = shadowRoot.querySelector('#wrapper');
+    this.#$iconSlot = shadowRoot.querySelector('slot[name="icon"]');
     this.#$illustrationSlot = shadowRoot.querySelector('slot[name="illustration"]');
     this.#$illustrationSlotWrapper = shadowRoot.querySelector('#illustration-wrapper');
   }
   connectedCallback() {
-    this.#$illustrationSlot.addEventListener('slotchange', this.#onIllustrationSlotChange);
+    super.connectedCallback();
+    this.#controller = new AbortController();
+    const options = {
+      signal: this.#controller.signal
+    };
+    this.#$illustrationSlot.addEventListener('slotchange', this.#onIllustrationSlotChange, options);
     this.#onIllustrationSlotChange();
+    if (getBooleanAttribute(this, 'draggable')) {
+      this.#enableDraggable();
+    }
   }
   disconnectedCallback() {
-    this.#$illustrationSlot.removeEventListener('slotchange', this.#onIllustrationSlotChange);
+    super.disconnectedCallback();
+    this.#disableDragging();
+    this.#controller.abort();
   }
   static get observedAttributes() {
-    return ['text', 'label', 'caption', 'disabled'];
+    return ['text', 'label', 'caption', 'disabled', 'draggable'];
   }
-  attributeChangedCallback(name, _, newVal) {
+  attributeChangedCallback(name, prevVal, newVal) {
+    if (prevVal === newVal) {
+      return;
+    }
     switch (name) {
       case 'text':
         {
@@ -47,6 +69,22 @@ defineCustomElement('sinch-card', class extends NectaryElement {
           updateAttribute(this.#$caption, 'text', newVal);
           break;
         }
+      case 'disabled':
+        {
+          updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
+          break;
+        }
+      case 'draggable':
+        {
+          const isDraggingEnabled = isAttrTrue(newVal);
+          if (isDraggingEnabled) {
+            this.#enableDraggable();
+          } else {
+            this.#disableDragging();
+            this.removeAttribute('draggable');
+          }
+          break;
+        }
     }
   }
   set text(value) {
@@ -73,7 +111,33 @@ defineCustomElement('sinch-card', class extends NectaryElement {
   get disabled() {
     return getBooleanAttribute(this, 'disabled');
   }
+  get dragRect() {
+    return this.#isDraggingSubscribed ? getRect(this.#$header) : null;
+  }
   #onIllustrationSlotChange = () => {
     setClass(this.#$illustrationSlotWrapper, 'active', this.#$illustrationSlot.assignedElements().length > 0);
   };
+  #enableDraggable() {
+    if (this.isConnected && !this.#isDraggingSubscribed) {
+      this.addEventListener('dragstart', this.#onDragStart);
+      this.#$cardBody.addEventListener('mousedown', this.#onDraggableMouseDown);
+      this.#isDraggingSubscribed = true;
+    }
+  }
+  #disableDragging() {
+    if (this.#isDraggingSubscribed) {
+      this.removeEventListener('dragstart', this.#onDragStart);
+      this.#$cardBody.removeEventListener('mousedown', this.#onDraggableMouseDown);
+      this.#isDraggingSubscribed = false;
+    }
+  }
+  #onDraggableMouseDown = e => {
+    this.#isDraggingCorrectHandle = this.#$header.contains(e.target) || this.#$iconSlot.assignedElements().includes(e.target);
+  };
+  #onDragStart = e => {
+    if (!this.#isDraggingCorrectHandle) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
 });

package/card/types.d.ts

@@ -1,4 +1,4 @@
-import type { TSinchElementReact } from '../types';
+import type { TRect, TSinchElementReact } from '../types';
 export type TSinchCardElement = HTMLElement & {
     /** Text */
     text: string;
@@ -8,6 +8,7 @@ export type TSinchCardElement = HTMLElement & {
     label: string | null;
     /** Disabled */
     disabled: boolean;
+    readonly dragRect: TRect | null;
     /** Text */
     setAttribute(name: 'text', value: string): void;
     /** Caption */
@@ -16,6 +17,8 @@ export type TSinchCardElement = HTMLElement & {
     setAttribute(name: 'label', value: string): void;
     /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
+    /** Draggable */
+    setAttribute(name: 'draggable', value: ''): void;
 };
 export type TSinchCardReact = TSinchElementReact<TSinchCardElement> & {
     /** Text */
@@ -26,4 +29,6 @@ export type TSinchCardReact = TSinchElementReact<TSinchCardElement> & {
     label?: string;
     /** Disabled */
     disabled?: boolean;
+    /** Draggable */
+    draggable?: boolean;
 };

package/date-picker/index.js

@@ -1,7 +1,7 @@
 import '../icon-button';
 import '../icon';
 import '../text';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getCssVars, getReactEventHandler, getRect, isAttrTrue, NectaryElement, packCsv, setClass, unpackCsv, updateAttribute, updateBooleanAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getCssVars, getReactEventHandler, getRect, getTargetAttribute, isAttrTrue, NectaryElement, packCsv, setClass, unpackCsv, updateAttribute, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-font-text-xs);color:var(--sinch-color-text-default);text-align:center;border-radius:var(--sinch-shape-radius-s);width:24px;height:24px;line-height:22px;cursor:pointer;border:1px solid transparent;background-color:transparent;box-sizing:border-box;user-select:none}.day.today{border:1px solid var(--sinch-color-tropical-500)}.day:disabled{cursor:initial;color:var(--sinch-color-snow-700)}.day:focus-visible{outline:1px solid var(--sinch-color-border-focus);outline-offset:1px}.day.range{background-color:var(--sinch-color-tropical-100)}.day.selected{background-color:var(--sinch-color-tropical-500);color:var(--sinch-color-snow-100)}.day:hover:enabled:not(.selected){background-color:var(--sinch-color-tropical-200)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-font-text-xs);font-weight:var(--sinch-font-weight-emphasized);color:var(--sinch-color-text-default);text-align:center;width:24px;height:24px;line-height:24px;user-select:none;text-transform:uppercase}#content-header{display:flex;flex-direction:row;height:32px;align-items:center}#date{flex:1;text-align:center;text-transform:capitalize}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content"><div id="content-header"><sinch-icon-button id="prev-year" size="s"><sinch-icon id="icon-prev-year" slot="icon"></sinch-icon></sinch-icon-button><sinch-icon-button id="prev-month" size="s"><sinch-icon id="icon-prev-month" slot="icon"></sinch-icon></sinch-icon-button><sinch-text id="date" type="m" emphasized aria-live="polite"></sinch-text><sinch-icon-button id="next-month" size="s"><sinch-icon id="icon-next-month" slot="icon"></sinch-icon></sinch-icon-button><sinch-icon-button id="next-year" size="s"><sinch-icon id="icon-next-year" slot="icon"></sinch-icon></sinch-icon-button></div><div id="week-day-names"><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div></div><div id="month"><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div></div></div>';
 import { areDatesEqual, assertDate, assertLocale, assertMinMax, assertValue, canGoNextMonth, canGoNextYear, canGoPrevMonth, canGoPrevYear, clampMaxDate, clampMinDate, cloneDate, dateToIso, decMonth, decYear, getCalendarMonth, getDayNames, getMonthNames, incMonth, incYear, isDateBetween, isoToDate, isValidDate, sortDates, today } from './utils';
 const template = document.createElement('template');
@@ -257,7 +257,7 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
   };
   #onDateMouseEnter = e => {
     if (this.#date1 !== null && this.#date2 === null) {
-      const hoverDateIso = e.target.getAttribute('data-date');
+      const hoverDateIso = getTargetAttribute(e, 'data-date');
       if (hoverDateIso === null) {
         return;
       }
@@ -276,7 +276,7 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
   };
   #onDateClick = e => {
     e.stopPropagation();
-    const dateIso = e.target.getAttribute('data-date');
+    const dateIso = getTargetAttribute(e, 'data-date');
     if (dateIso === null || dateIso.length === 0) {
       return;
     }
@@ -365,7 +365,7 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
     updateBooleanAttribute(this.#$nextMonth, 'disabled', canGoNextMonth(this.#uiDate, this.#maxDate) === false);
     updateBooleanAttribute(this.#$prevYear, 'disabled', canGoPrevYear(this.#uiDate, this.#minDate) === false);
     updateBooleanAttribute(this.#$nextYear, 'disabled', canGoNextYear(this.#uiDate, this.#maxDate) === false);
-    this.#$date.textContent = `${this.#monthNames[this.#uiDate.getMonth()]} ${this.#uiDate.getFullYear()}`;
+    this.#$date.textContent = `${this.#monthNames[this.#uiDate.getUTCMonth()]} ${this.#uiDate.getUTCFullYear()}`;
     for (let wi = 0; wi < this.#$days.length; wi++) {
       const $week = this.#$days[wi];
       let isEmptyWeek = true;
@@ -383,7 +383,7 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
           $day.setAttribute('aria-hidden', 'true');
         } else {
           const dayIso = dateToIso(day);
-          $day.textContent = day.getDate().toString();
+          $day.textContent = day.getUTCDate().toString();
           $day.setAttribute('data-date', dayIso);
           if (isDateBetween(day, this.#minDate, this.#maxDate)) {
             $day.removeAttribute('disabled');

package/date-picker/utils.js

@@ -9,11 +9,11 @@ export const getCalendarMonth = (date, options) => {
     firstDayOfWeek: 1,
     ...options
   };
-  const firstDateOfMonth = new Date(date.getFullYear(), date.getMonth(), 1);
-  const lastDateOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0);
-  const firstWeekdayOfMonth = firstDateOfMonth.getDay();
-  const lastWeekdayOfMonth = lastDateOfMonth.getDay();
-  const daysInMonth = lastDateOfMonth.getDate();
+  const firstDateOfMonth = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1));
+  const lastDateOfMonth = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 0));
+  const firstWeekdayOfMonth = firstDateOfMonth.getUTCDay();
+  const lastWeekdayOfMonth = lastDateOfMonth.getUTCDay();
+  const daysInMonth = lastDateOfMonth.getUTCDate();
   const daysToPrepend = (firstWeekdayOfMonth - firstDayOfWeek + DAYS_IN_WEEK) % DAYS_IN_WEEK;
   const daysToAppend = (DAYS_IN_WEEK - 1 - lastWeekdayOfMonth + firstDayOfWeek) % DAYS_IN_WEEK;
   const month = [];
@@ -23,7 +23,7 @@ export const getCalendarMonth = (date, options) => {
       week.push(null);
     } else {
       const result = new Date(date);
-      result.setDate(i);
+      result.setUTCDate(i);
       week.push(result);
     }
     if (week.length === 7) {
@@ -34,13 +34,14 @@ export const getCalendarMonth = (date, options) => {
   return month;
 };
 export const dateToIso = date => {
-  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+  return `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(date.getUTCDate())}`;
 };
 export const isoToDate = value => {
-  return new Date(`${value.substring(0, 10)}T00:00:00`);
+  return new Date(`${value.substring(0, 10)}T00:00:00Z`);
 };
 export const today = () => {
-  return isoToDate(dateToIso(new Date()));
+  const today = new Date();
+  return new Date(Date.UTC(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate()));
 };
 export const getDayNames = locale => {
   const formatter = new Intl.DateTimeFormat(locale, {
@@ -99,35 +100,35 @@ export const clampMaxDate = (date, max) => {
   }
 };
 export const incMonth = (date, max) => {
-  date.setMonth(date.getMonth() + 1);
+  date.setUTCMonth(date.getUTCMonth() + 1);
   clampMaxDate(date, max);
 };
 export const decMonth = (date, min) => {
-  date.setMonth(date.getMonth() - 1);
+  date.setUTCMonth(date.getUTCMonth() - 1);
   clampMinDate(date, min);
 };
 export const incYear = (date, max) => {
-  date.setFullYear(date.getFullYear() + 1);
+  date.setUTCFullYear(date.getUTCFullYear() + 1);
   clampMaxDate(date, max);
 };
 export const decYear = (date, min) => {
-  date.setFullYear(date.getFullYear() - 1);
+  date.setUTCFullYear(date.getUTCFullYear() - 1);
   clampMinDate(date, min);
 };
 export const canGoPrevMonth = (date, min) => {
-  const prevMonth = new Date(Date.UTC(date.getFullYear(), date.getMonth(), 0));
+  const prevMonth = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 0));
   return compareDates(prevMonth, min) >= 0;
 };
 export const canGoNextMonth = (date, max) => {
-  const nextMonth = new Date(Date.UTC(date.getFullYear(), date.getMonth() + 1, 1));
+  const nextMonth = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 1));
   return compareDates(max, nextMonth) >= 0;
 };
 export const canGoNextYear = (date, max) => {
-  const nextYear = new Date(Date.UTC(date.getFullYear() + 1, 0, 1));
+  const nextYear = new Date(Date.UTC(date.getUTCFullYear() + 1, 0, 1));
   return compareDates(max, nextYear) >= 0;
 };
 export const canGoPrevYear = (date, min) => {
-  const prevYear = new Date(Date.UTC(date.getFullYear(), 0, 0));
+  const prevYear = new Date(Date.UTC(date.getUTCFullYear(), 0, 0));
   return compareDates(prevYear, min) >= 0;
 };
 export const isDateBetween = (date, min, max) => {

package/dialog/index.js

@@ -3,8 +3,8 @@ import '../icon';
 import '../stop-events';
 import '../title';
 import { disableScroll, enableScroll } from '../pop/utils';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute, getCssVar, setClass } from '../utils';
-const templateHTML = '<style>:host{display:contents}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-text-m);border:none;box-shadow:var(--sinch-elevation-level-3)}#dialog:not([open]){display:none}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding:0 24px}#caption{color:var(--sinch-color-text-default)}#content{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh);padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#action.empty{display:none}#close{transform:translate(4px,-4px)}</style><dialog id="dialog"><div id="header"><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title><sinch-icon-button id="close" size="s" tabindex="0"><sinch-icon id="icon-close" slot="icon"></sinch-icon></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="action"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute, getCssVar, setClass, isTargetEqual } from '../utils';
+const templateHTML = '<style>:host{display:contents}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-text-m);border:none;box-shadow:var(--sinch-elevation-level-3)}#dialog:not([open]){display:none}dialog::backdrop{background-color:#000;opacity:.55}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding:0 24px}#caption{color:var(--sinch-color-text-default)}#content{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh);padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#action.empty{display:none}#close{transform:translate(4px,-4px)}</style><dialog id="dialog"><div id="header"><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title><sinch-icon-button id="close" size="s" tabindex="0"><sinch-icon id="icon-close" slot="icon"></sinch-icon></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="action"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-dialog', class extends NectaryElement {
@@ -100,8 +100,7 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
     this.#dispatchCloseEvent('close');
   };
   #onBackdropMouseDown = e => {
-    const tgt = e.originalTarget ?? e.target;
-    if (tgt === this.#$dialog) {
+    if (isTargetEqual(e, this.#$dialog)) {
       const rect = this.dialogRect;
       const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
       if (!isInside) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/pagination/index.js

@@ -1,5 +1,5 @@
 import '../icon';
-import { defineCustomElement, updateAttribute, getIntegerAttribute, setClass, NectaryElement, getRect, getReactEventHandler, getCssVars } from '../utils';
+import { defineCustomElement, updateAttribute, getIntegerAttribute, setClass, NectaryElement, getRect, getReactEventHandler, getCssVars, isTargetEqual, getTargetIndexInParent } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;box-sizing:border-box}button{all:initial;width:28px;height:28px;box-sizing:border-box;cursor:pointer;text-align:center;contain:strict;--sinch-color-icon:var(--sinch-color-stormy-500)}button:disabled{--sinch-color-icon:var(--sinch-color-stormy-100);cursor:initial}button>*{pointer-events:none}.page{border-radius:50%;font:var(--sinch-font-text-m);color:var(--sinch-color-stormy-500)}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font-weight:var(--sinch-font-weight-emphasized);background-color:var(--sinch-color-snow-600);pointer-events:none;cursor:initial}.page.hidden{display:none}#left,#right{display:flex;padding:2px;--sinch-icon-size:24px}</style><div id="wrapper"><button id="left"><sinch-icon id="icon-left"></sinch-icon></button><button class="page"><span>1</span></button><button class="page active"><span>2</span></button><button class="page"><span>3</span></button><button class="page"><span>4</span></button><button class="page"><span>5</span></button><button class="page dots"><span>6</span></button><button class="page"><span>20</span></button><button id="right"><sinch-icon id="icon-right"></sinch-icon></button></div>';
 const NUM_BUTTONS = 7;
 const MIDDLE_BTN_INDEX = Math.floor(NUM_BUTTONS / 2);
@@ -99,13 +99,13 @@ defineCustomElement('sinch-pagination', class extends NectaryElement {
     e.stopPropagation();
     const value = getIntegerAttribute(this, 'value', 0) - 1;
     const max = Math.max(0, getIntegerAttribute(this, 'max', 0));
-    if (e.target === this.#$left) {
+    if (isTargetEqual(e, this.#$left)) {
       return this.#dispatchChangeEvent(value - 1);
     }
-    if (e.target === this.#$right) {
+    if (isTargetEqual(e, this.#$right)) {
       return this.#dispatchChangeEvent(value + 1);
     }
-    const btnIndex = Array.prototype.indexOf.call(this.#$wrapper.children, e.target) - 1;
+    const btnIndex = getTargetIndexInParent(e, this.#$wrapper) - 1;
     if (btnIndex >= 0 && btnIndex < this.#$buttons.length) {
       if (btnIndex === FIRST_BTN_INDEX) {
         return this.#dispatchChangeEvent(0);

package/pop/index.js

@@ -1,5 +1,5 @@
-import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, throttleAnimationFrame, isElementFocused, updateIntegerAttribute, getIntegerAttribute, getFirstFocusableElement, getFirstSlotElement, Context, subscribeContext } from '../utils';
-const templateHTML = '<style>:host{display:contents;position:relative}dialog{position:fixed;left:0;top:0;margin:0;outline:0;padding:0;border:none;box-sizing:border-box;max-width:unset;max-height:unset;z-index:1;background:0 0;overflow:visible}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}#content{position:relative;z-index:1}#target-open{display:flex;flex-direction:column;position:absolute;left:0;top:0}#focus{display:none;position:absolute;width:0;height:0}</style><slot id="target" name="target" aria-haspopup="dialog" aria-expanded="false"></slot><div id="focus" tabindex="-1"></div><dialog id="dialog"><div id="content"><slot name="content"></slot></div><div id="target-open"><slot name="target-open"></slot></div></dialog>';
+import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, throttleAnimationFrame, isElementFocused, updateIntegerAttribute, getIntegerAttribute, getFirstFocusableElement, getFirstSlotElement, Context, subscribeContext, isTargetEqual } from '../utils';
+const templateHTML = '<style>:host{display:contents;position:relative}dialog{position:fixed;left:0;top:0;margin:0;outline:0;padding:0;border:none;box-sizing:border-box;max-width:unset;max-height:unset;z-index:1;background:0 0;overflow:visible}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}#content{position:relative;z-index:1}#target-open{display:flex;flex-direction:column;position:absolute;left:0;top:0}#focus{display:none;position:absolute;width:0;height:0}</style><slot id="target" name="target" aria-haspopup="dialog" aria-expanded="false"></slot><div id="focus" tabindex="-1"></div><dialog id="dialog"><div id="content"><slot name="content"></slot></div><div id="target-open"><slot name="target-open"></slot></div></dialog>';
 import { assertOrientation, disableScroll, enableScroll, orientationValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -195,6 +195,11 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     }
     disableScroll();
     window.addEventListener('resize', this.#onResize);
+    requestAnimationFrame(() => {
+      if (this.#isOpen()) {
+        this.#$contentSlot.addEventListener('slotchange', this.#onContentSlotChange);
+      }
+    });
     this.#dispatchContentVisibility(true);
   }
   #onCollapse() {
@@ -244,6 +249,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     enableScroll();
     this.#resizeThrottle.cancel();
     window.removeEventListener('resize', this.#onResize);
+    this.#$contentSlot.removeEventListener('slotchange', this.#onContentSlotChange);
   }
   #isOpen() {
     return getBooleanAttribute(this.#$dialog, 'open');
@@ -299,8 +305,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     }
   };
   #onBackdropMouseDown = e => {
-    const tgt = e.originalTarget ?? e.target;
-    if (tgt === this.#$dialog) {
+    if (isTargetEqual(e, this.#$dialog)) {
       const rect = this.popoverRect;
       const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
       if (!isInside) {
@@ -347,4 +352,10 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
       this.#dispatchCloseEvent();
     }
   };
+  #onContentSlotChange = e => {
+    e.stopPropagation();
+    if (this.#isOpen()) {
+      this.#updateOrientation();
+    }
+  };
 });

package/utils/event-target.d.ts

@@ -0,0 +1,3 @@
+export declare const isTargetEqual: (e: Event, $elem: HTMLElement) => boolean;
+export declare const getTargetAttribute: (e: Event, attr: string) => string | null;
+export declare const getTargetIndexInParent: (e: Event, parent: Element) => number;

package/utils/event-target.js

@@ -0,0 +1,17 @@
+export const isTargetEqual = (e, $elem) => {
+  return e.target === $elem || e.originalTarget === $elem;
+};
+export const getTargetAttribute = (e, attr) => {
+  return e.target.getAttribute(attr) ?? e.originalTarget?.getAttribute(attr) ?? null;
+};
+export const getTargetIndexInParent = (e, parent) => {
+  const indexOf = Array.prototype.indexOf.call(parent.children, e.target);
+  if (indexOf >= 0) {
+    return indexOf;
+  }
+  const origTgt = e.originalTarget;
+  if (origTgt != null) {
+    return Array.prototype.indexOf.call(parent.children, origTgt);
+  }
+  return -1;
+};

package/utils/index.d.ts

@@ -8,3 +8,4 @@ export * from './throttle';
 export * from './debounce';
 export * from './get-react-event-handler';
 export * from './markdown';
+export * from './event-target';

package/utils/index.js

@@ -7,4 +7,5 @@ export * from './slot';
 export * from './throttle';
 export * from './debounce';
 export * from './get-react-event-handler';
-export * from './markdown';
+export * from './markdown';
+export * from './event-target';