@nectary/components 1.1.2 → 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

@@ -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/package.json

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