@nectary/components 0.11.2 → 0.12.0

package/card-link/index.d.ts

@@ -1,4 +1,4 @@
-import '../icon/cancel';
+import '../icon/arrow-forward';
 import type { TSinchElementReact } from '../types';
 import type { FocusEvent, MouseEvent } from 'react';
 export declare const isSinchCardLinkElement: (el: Element) => el is TSinchCardLinkElement;

package/card-link/index.js

@@ -7,7 +7,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
-import '../icon/cancel';
+import '../icon/arrow-forward';
 import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute } from '../utils';
 const templateHTML = '<style>:host{display:inline;outline:0}a{display:flex;flex-direction:row;gap:8px;font:var(--sinch-font-emphasized-body);color:var(--sinch-color-tropical-500);text-decoration:none;outline:0;--sinch-color-icon:var(--sinch-color-tropical-500)}a:hover{color:var(--sinch-color-tropical-600);fill:var(--sinch-color-tropical-600)}:host([disabled]:not([disabled=false])) a{color:var(--sinch-color-tropical-300);pointer-events:none;cursor:initial;--sinch-color-icon:var(--sinch-color-tropical-300)}span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex-shrink:1}</style><a><span></span><sinch-icon-arrow-forward size="24"></sinch-icon-arrow-forward></a>';
 export const isSinchCardLinkElement = el => {

package/grid/index.d.ts

@@ -0,0 +1,14 @@
+import type { TSinchElementReact } from '../types';
+import '../grid-item';
+export declare type TSinchGridElement = HTMLElement;
+export declare type TSinchGridReact = TSinchElementReact<TSinchGridElement>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-grid': TSinchGridReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-grid': TSinchGridElement;
+    }
+}

package/grid/index.js

@@ -0,0 +1,15 @@
+import { defineCustomElement } from '../utils';
+const templateHTML = '<style>:host{--sinch-grid-gutter:24px;--sinch-grid-margin:32px;--sinch-grid-num-columns:12;display:grid;grid-template-columns:repeat(var(--sinch-grid-num-columns),minmax(0,1fr));grid-column-gap:var(--sinch-grid-gutter);grid-row-gap:var(--sinch-grid-gutter);padding:var(--sinch-grid-margin)}@media only screen and (max-width:1439px){:host{--sinch-grid-gutter:24px;--sinch-grid-margin:24px;--sinch-grid-num-columns:12}}@media only screen and (max-width:1023px){:host{--sinch-grid-gutter:24px;--sinch-grid-margin:24px;--sinch-grid-num-columns:8}}@media only screen and (max-width:767px){:host{--sinch-grid-gutter:16px;--sinch-grid-margin:16px;--sinch-grid-num-columns:4}}</style><slot name="item"></slot>';
+import '../grid-item';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-grid', class extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({
+      mode: 'closed'
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+});

package/grid-item/index.d.ts

@@ -0,0 +1,23 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchGridElement = HTMLElement & {
+    xl: number | null;
+    l: number | null;
+    m: number | null;
+    s: number | null;
+};
+export declare type TSinchGridReact = TSinchElementReact<TSinchGridElement> & {
+    xl?: number;
+    l?: number;
+    m?: number;
+    s?: number;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-grid-item': TSinchGridReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-grid-item': TSinchGridElement;
+    }
+}

package/grid-item/index.js

@@ -0,0 +1,46 @@
+import { defineCustomElement, getIntegerAttribute, updateIntegerAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;grid-column:span 12}:host([xl="2"]){grid-column:span 2}:host([xl="3"]){grid-column:span 3}:host([xl="4"]){grid-column:span 4}:host([xl="5"]){grid-column:span 5}:host([xl="6"]){grid-column:span 6}:host([xl="7"]){grid-column:span 7}:host([xl="8"]){grid-column:span 8}:host([xl="9"]){grid-column:span 9}:host([xl="10"]){grid-column:span 10}:host([xl="11"]){grid-column:span 11}:host([xl="12"]){grid-column:span 12}@media only screen and (max-width:1439px){:host{grid-column:span 12}:host([l="2"]){grid-column:span 2}:host([l="3"]){grid-column:span 3}:host([l="4"]){grid-column:span 4}:host([l="5"]){grid-column:span 5}:host([l="6"]){grid-column:span 6}:host([l="7"]){grid-column:span 7}:host([l="8"]){grid-column:span 8}:host([l="9"]){grid-column:span 9}:host([l="10"]){grid-column:span 10}:host([l="11"]){grid-column:span 11}:host([l="12"]){grid-column:span 12}}@media only screen and (max-width:1023px){:host{grid-column:span 8}:host([m="2"]){grid-column:span 2}:host([m="3"]){grid-column:span 3}:host([m="4"]){grid-column:span 4}:host([m="5"]){grid-column:span 5}:host([m="6"]){grid-column:span 6}:host([m="7"]){grid-column:span 7}:host([m="8"]){grid-column:span 8}}@media only screen and (max-width:767px){:host{grid-column:span 4}:host([s="2"]){grid-column:span 2}:host([s="3"]){grid-column:span 3}:host([s="4"]){grid-column:span 4}}</style><slot name="content"></slot>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-grid-item', class extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({
+      mode: 'closed'
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  get s() {
+    return getIntegerAttribute(this, 's', null);
+  }
+
+  set s(value) {
+    updateIntegerAttribute(this, 's', value);
+  }
+
+  get m() {
+    return getIntegerAttribute(this, 'm', null);
+  }
+
+  set m(value) {
+    updateIntegerAttribute(this, 'm', value);
+  }
+
+  get l() {
+    return getIntegerAttribute(this, 'l', null);
+  }
+
+  set l(value) {
+    updateIntegerAttribute(this, 'l', value);
+  }
+
+  get xl() {
+    return getIntegerAttribute(this, 'xl', null);
+  }
+
+  set xl(value) {
+    updateIntegerAttribute(this, 'xl', value);
+  }
+
+});

package/illustration/create-illustration-class.js

@@ -1,5 +1,5 @@
 import { getIntegerAttribute, updateAttribute, updateIntegerAttribute } from '../utils';
-const illustrationStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block}</style>';
+const illustrationStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block;pointer-events:none}</style>';
 const DEFAULT_SIZE = 256;
 const MIN_SIZE = 16;
 const MAX_SIZE = 2048;

package/index.d.ts

@@ -76,3 +76,5 @@ import './icon-branded/settings';
 import './icon-branded/user';
 import './icon-branded/users';
 import './dialog';
+import './grid';
+import './grid-item';

package/index.js

@@ -75,4 +75,6 @@ import './icon-branded/rocket';
 import './icon-branded/settings';
 import './icon-branded/user';
 import './icon-branded/users';
-import './dialog';
+import './dialog';
+import './grid';
+import './grid-item';

package/package.json

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

package/select/index.d.ts

@@ -1,4 +1,5 @@
 import '../select-option';
+import '../dropdown';
 import type { TRect, TSinchElementReact } from '../types';
 import type { FocusEvent, SyntheticEvent } from 'react';
 export declare type TSinchSelectElement = HTMLElement & {

package/select/index.js

@@ -13,6 +13,7 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
 
 import { isDropdownOptionElement } from '../dropdown-option';
 import '../select-option';
+import '../dropdown';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{position:relative}sinch-dropdown{display:block}#button{all:initial;display:flex;align-items:center;gap:8px;border:1px solid var(--sinch-color-stormy-200);border-radius:4px;box-sizing:border-box;width:100%;height:48px;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);cursor:pointer}#button:focus{border-color:var(--sinch-color-stormy-600)}#dropdown-icon{fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button[data-unselected]{color:var(--sinch-color-text-muted)}#button:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100);cursor:initial}#button:disabled #dropdown-icon{fill:var(--sinch-color-stormy-100)}:host([invalidtext]:not([invalidtext=""])) #button:not(:disabled){border-color:var(--sinch-color-text-invalid)}#content{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-4);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}#listbox{position:absolute;left:0;top:0;padding-top:74px;width:100%;display:none;list-style:none;outline:0;z-index:1}#listbox-body{font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);border:1px solid var(--sinch-color-stormy-500);border-top-width:0;border-bottom-left-radius:2px;border-bottom-right-radius:2px;width:100%;box-sizing:border-box;box-shadow:1px 2px 4px rgb(0 0 0 / 15%);overflow-y:auto}#button[aria-expanded=true]~#listbox{display:block}</style><div id="wrapper"><div id="top"><label id="label" for="dropdown"></label><slot name="tooltip"></slot><span id="optional"></span></div><sinch-dropdown id="dropdown"><button slot="target" id="button"><span id="content"></span> <svg id="dropdown-icon" width="12" height="8" aria-hidden="true"><path d="M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2 1.41.59Z"/></svg></button><slot name="option" slot="option"></slot></sinch-dropdown><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
 const template = document.createElement('template');

package/tabs-option/index.js

@@ -7,7 +7,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
 import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}*{pointer-events:none}#wrapper{display:flex;flex-direction:row;align-items:center;gap:12px;position:relative;width:100%;height:42px;padding:8px 20px;box-sizing:border-box;box-shadow:0 1px 0 0 var(--sinch-color-stormy-100);font:var(--sinch-font-body);color:var(--sinch-color-text-default)}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([checked]) #wrapper{box-shadow:0 2px 0 0 var(--sinch-color-stormy-500);font:var(--sinch-font-emphasized-body)}input{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer}:host([disabled]:not([disabled=false])) #wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}input:disabled{cursor:unset}</style><div id="wrapper"><slot name="icon"></slot><label for="input" id="content" aria-hidden="true"></label> <input id="input" type="radio" aria-hidden="true"/></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}*{pointer-events:none}#wrapper{display:flex;flex-direction:row;align-items:center;gap:12px;position:relative;width:100%;height:42px;padding:8px 20px;box-sizing:border-box;box-shadow:0 1px 0 0 var(--sinch-color-stormy-100);color:var(--sinch-color-stormy-500);--sinch-color-icon:var(--sinch-color-stormy-500)}#content{font:var(--sinch-font-title-4);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([checked]) #wrapper{box-shadow:0 2px 0 0 var(--sinch-color-stormy-500)}input{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer}:host([disabled]:not([disabled=false])) #wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}input:disabled{cursor:unset}</style><div id="wrapper"><slot name="icon"></slot><label for="input" id="content" aria-hidden="true"></label> <input id="input" type="radio" aria-hidden="true"/></div>';
 export const isTabsOptionElement = element => {
   return element instanceof Element && element.tagName === 'SINCH-TABS-OPTION';
 };