@nectary/components 0.18.0 → 0.19.0

package/chat/index.d.ts

@@ -0,0 +1,13 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchChatElement = HTMLElement & {};
+export declare type TSinchChatReact = TSinchElementReact<TSinchChatElement> & {};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-chat': TSinchChatReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-chat': TSinchChatElement;
+    }
+}

package/chat/index.js

@@ -0,0 +1,15 @@
+import { defineCustomElement } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;gap:32px;box-sizing:border-box;width:100%}</style><div id="wrapper"><slot></slot></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-chat', class extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({
+      mode: 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+});

package/chat-avatar/index.d.ts

@@ -0,0 +1,21 @@
+import '../avatar';
+import type { TSinchAvatarElement, TSinchAvatarReact } from '../avatar';
+import type { TSinchElementReact } from '../types';
+export declare type TSinchChatAvatarElement = HTMLElement & {
+    alt: TSinchAvatarElement['alt'];
+    src: TSinchAvatarElement['src'];
+};
+export declare type TSinchChatAvatarReact = TSinchElementReact<TSinchChatAvatarElement> & {
+    alt: TSinchAvatarReact['alt'];
+    src?: TSinchAvatarReact['src'];
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-chat-avatar': TSinchChatAvatarReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-chat-avatar': TSinchChatAvatarElement;
+    }
+}

package/chat-avatar/index.js

@@ -0,0 +1,69 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$avatar;
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+import '../avatar';
+import { defineCustomElement, getAttribute, updateAttribute } from '../utils';
+const templateHTML = '<style>:host{display:contents}</style><sinch-avatar background="blue" size="l"></sinch-avatar>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-chat-avatar', (_$avatar = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$avatar, {
+      writable: true,
+      value: void 0
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$avatar, shadowRoot.querySelector('sinch-avatar'));
+  }
+
+  static get observedAttributes() {
+    return ['src', 'alt'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'src':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$avatar), 'src', newVal);
+          break;
+        }
+
+      case 'alt':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$avatar), 'alt', newVal);
+          break;
+        }
+    }
+  }
+
+  get src() {
+    return getAttribute(this, 'src', null);
+  }
+
+  set src(value) {
+    updateAttribute(this, 'src', value);
+  }
+
+  get alt() {
+    return getAttribute(this, 'alt', '');
+  }
+
+  set alt(value) {
+    updateAttribute(this, 'alt', value);
+  }
+
+}));

package/chat-block/index.d.ts

@@ -0,0 +1,24 @@
+import type { TSinchChatBubbleType } from '../chat-bubble';
+import type { TSinchElementReact } from '../types';
+export declare type TSinchChatBlockElement = HTMLElement & {
+    type: TSinchChatBubbleType | null;
+    firstName: string | null;
+    lastName: string | null;
+    timestamp: string | null;
+};
+export declare type TSinchChatBlockReact = TSinchElementReact<TSinchChatBlockElement> & {
+    type: TSinchChatBubbleType;
+    firstName?: string;
+    lastName?: string;
+    timestamp?: string;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-chat-block': TSinchChatBlockReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-chat-block': TSinchChatBlockElement;
+    }
+}

package/chat-block/index.js

@@ -0,0 +1,148 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$firstName, _$lastName, _$timeStamp, _$bubbleSlot, _onBubbleSlotChange, _updateBubbleTypes;
+
+function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
+
+import { typeValues } from '../chat-bubble';
+import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:column;gap:4px;align-items:flex-end;padding-left:56px}#stamp{display:flex;gap:4px;margin:0;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-stormy-400)}#avatar{display:none;position:absolute;left:0;top:24px}:host([type=customer])>#wrapper{align-items:flex-start}:host([type=customer]) #avatar{display:block}</style><div id="wrapper"><div id="avatar"><slot name="avatar"></slot></div><p id="stamp"><span id="firstname"></span><span id="lastname"></span>&bull;<span id="time"></span></p><slot name="bubble"></slot></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-chat-block', (_$firstName = new WeakMap(), _$lastName = new WeakMap(), _$timeStamp = new WeakMap(), _$bubbleSlot = new WeakMap(), _onBubbleSlotChange = new WeakMap(), _updateBubbleTypes = new WeakSet(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateMethodInitSpec(this, _updateBubbleTypes);
+
+    _classPrivateFieldInitSpec(this, _$firstName, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$lastName, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$timeStamp, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$bubbleSlot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onBubbleSlotChange, {
+      writable: true,
+      value: () => {
+        _classPrivateMethodGet(this, _updateBubbleTypes, _updateBubbleTypes2).call(this);
+      }
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$firstName, shadowRoot.querySelector('#firstname'));
+
+    _classPrivateFieldSet(this, _$lastName, shadowRoot.querySelector('#lastname'));
+
+    _classPrivateFieldSet(this, _$timeStamp, shadowRoot.querySelector('#time'));
+
+    _classPrivateFieldSet(this, _$bubbleSlot, shadowRoot.querySelector('slot[name="bubble"]'));
+  }
+
+  connectedCallback() {
+    _classPrivateFieldGet(this, _$bubbleSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onBubbleSlotChange));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$bubbleSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onBubbleSlotChange));
+  }
+
+  static get observedAttributes() {
+    return ['firstname', 'lastname', 'timestamp', 'type'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'firstname':
+        {
+          _classPrivateFieldGet(this, _$firstName).textContent = newVal;
+          break;
+        }
+
+      case 'lastname':
+        {
+          _classPrivateFieldGet(this, _$lastName).textContent = newVal;
+          break;
+        }
+
+      case 'timestamp':
+        {
+          _classPrivateFieldGet(this, _$timeStamp).textContent = newVal;
+          break;
+        }
+
+      case 'type':
+        {
+          _classPrivateMethodGet(this, _updateBubbleTypes, _updateBubbleTypes2).call(this);
+
+          break;
+        }
+    }
+  }
+
+  set type(value) {
+    updateLiteralAttribute(this, typeValues, 'type', value);
+  }
+
+  get type() {
+    return getLiteralAttribute(this, typeValues, 'type', null);
+  }
+
+  set firstName(value) {
+    updateAttribute(this, 'firstname', value);
+  }
+
+  get firstName() {
+    return getAttribute(this, 'firstname', null);
+  }
+
+  set lastName(value) {
+    updateAttribute(this, 'lastname', value);
+  }
+
+  get lastName() {
+    return getAttribute(this, 'lastname', null);
+  }
+
+  set timestamp(value) {
+    updateAttribute(this, 'timestamp', value);
+  }
+
+  get timestamp() {
+    return getAttribute(this, 'timestamp', null);
+  }
+
+}));
+
+function _updateBubbleTypes2() {
+  const typeValue = getAttribute(this, 'type');
+
+  _classPrivateFieldGet(this, _$bubbleSlot).assignedElements().forEach(el => {
+    updateAttribute(el, 'data-type', typeValue);
+  });
+}

package/chat-bubble/index.d.ts

@@ -0,0 +1,20 @@
+import type { TSinchElementReact } from '../types';
+export declare const typeValues: readonly ["customer", "agent", "agent-prev"];
+export declare type TSinchChatBubbleType = typeof typeValues[number];
+export declare type TSinchChatBubbleElement = HTMLElement & {
+    readonly type: TSinchChatBubbleType | null;
+    text: string;
+};
+export declare type TSinchChatBubbleReact = TSinchElementReact<TSinchChatBubbleElement> & {
+    text: string;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-chat-bubble': TSinchChatBubbleReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-chat-bubble': TSinchChatBubbleElement;
+    }
+}

package/chat-bubble/index.js

@@ -0,0 +1,59 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$text;
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#text{padding:12px 16px;border-radius:16px;font:var(--sinch-font-body);color:var(--sinch-color-stormy-500);margin:0;max-width:595px;box-sizing:border-box}:host([data-type=customer])>#text{background-color:var(--sinch-color-snow-500);border-top-left-radius:0}:host([data-type=agent-prev])>#text{background-color:var(--sinch-color-snow-700);border-top-right-radius:0}:host([data-type=agent])>#text{background-color:var(--sinch-color-honey-200);border-top-right-radius:0}</style><p id="text"></p>';
+export const typeValues = ['customer', 'agent', 'agent-prev'];
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-chat-bubble', (_$text = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$text, {
+      writable: true,
+      value: void 0
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+  }
+
+  static get observedAttributes() {
+    return ['text'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          break;
+        }
+    }
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  get type() {
+    return getLiteralAttribute(this, typeValues, 'data-type', null);
+  }
+
+}));

package/dialog/index.js

@@ -78,7 +78,6 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
     _classPrivateFieldInitSpec(this, _onBackdropClick, {
       writable: true,
       value: e => {
-        e.stopPropagation();
         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;
 
@@ -187,7 +186,9 @@ function _dispatchCloseEvent2() {
 
 function _setOpen2(isOpen) {
   if (isOpen) {
-    _classPrivateFieldGet(this, _$dialog).showModal();
+    if (!getBooleanAttribute(_classPrivateFieldGet(this, _$dialog), 'open')) {
+      _classPrivateFieldGet(this, _$dialog).showModal();
+    }
   } else {
     _classPrivateFieldGet(this, _$dialog).close();
   }

package/dropdown/index.js

@@ -285,7 +285,9 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
 
 function _setOpen2(isOpen) {
   if (isOpen) {
-    _classPrivateFieldGet(this, _$listbox).showModal();
+    if (!getBooleanAttribute(_classPrivateFieldGet(this, _$listbox), 'open')) {
+      _classPrivateFieldGet(this, _$listbox).showModal();
+    }
   } else {
     _classPrivateFieldGet(this, _$listbox).close();
   }

package/index.d.ts

@@ -139,3 +139,7 @@ import './search-option';
 import './segment';
 import './segment-collapse';
 import './avatar';
+import './chat-avatar';
+import './chat-bubble';
+import './chat-block';
+import './chat';

package/index.js

@@ -138,4 +138,8 @@ import './search';
 import './search-option';
 import './segment';
 import './segment-collapse';
-import './avatar';
+import './avatar';
+import './chat-avatar';
+import './chat-bubble';
+import './chat-block';
+import './chat';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "files": [
     "theme.css",
     "**/*/*.js",