@nectary/components 2.7.0 → 2.8.0

package/link/index.js

@@ -31,7 +31,7 @@ defineCustomElement('sinch-link', class extends NectaryElement {
     this.removeEventListener('-blur', this.#onBlurReactHandler);
   }
   static get observedAttributes() {
-    return ['text', 'href', 'external', 'standalone', 'disabled'];
+    return ['text', 'href', 'use-history', 'external', 'standalone', 'disabled'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (isAttrEqual(oldVal, newVal)) {
@@ -48,6 +48,15 @@ defineCustomElement('sinch-link', class extends NectaryElement {
           updateAttribute(this.#$anchor, 'href', newVal);
           break;
         }
+      case 'use-history':
+        {
+          const shouldUseHistory = isAttrTrue(newVal);
+          if (shouldUseHistory) {
+            updateBooleanAttribute(this, 'preventdefault', true);
+          }
+          updateBooleanAttribute(this, name, shouldUseHistory);
+          break;
+        }
       case 'standalone':
       case 'disabled':
         {
@@ -75,6 +84,12 @@ defineCustomElement('sinch-link', class extends NectaryElement {
   set href(value) {
     updateAttribute(this, 'href', value);
   }
+  set 'use-history'(value) {
+    updateBooleanAttribute(this, 'use-history', value);
+  }
+  get 'use-history'() {
+    return getBooleanAttribute(this, 'use-history');
+  }
   set disabled(isDisabled) {
     updateBooleanAttribute(this, 'disabled', isDisabled);
   }
@@ -111,6 +126,9 @@ defineCustomElement('sinch-link', class extends NectaryElement {
   #onAnchorClick = e => {
     if (this.preventDefault) {
       e.preventDefault();
+      if (this['use-history']) {
+        history.pushState({}, '', this.href);
+      }
     }
     this.dispatchEvent(new CustomEvent('-click'));
   };

package/link/types.d.ts

@@ -6,6 +6,8 @@ export type TSinchLinkElement = HTMLElement & {
     href: string;
     /** Disabled */
     disabled: boolean;
+    /** Replaces the anchor tag behaviour to use history instead */
+    'use-history': boolean;
     /** Sets `target="_blank" and a special external icon on the left side */
     external: boolean;
     /** Special standalone (`display: block`) mode with an arrow icon on the right side */
@@ -36,6 +38,8 @@ export type TSinchLinkReact = TSinchElementReact<TSinchLinkElement> & {
     text: string;
     /** URL that hyperlink point to */
     href: string;
+    /** Replaces the anchor tag behaviour to use history instead */
+    'use-history'?: boolean;
     /** Disabled */
     disabled?: boolean;
     /** Sets `target="_blank" and a special external icon on the left side */

package/package.json

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

package/radio-option/types.d.ts

@@ -11,6 +11,7 @@ export type TSinchRadioOptionElement = HTMLElement & {
 };
 export type TSinchRadioOptionReact = TSinchElementReact<TSinchRadioOptionElement> & {
     value: string;
+    checked?: boolean;
     disabled?: boolean;
     text: string;
     'aria-label': string;

package/readme.md

@@ -8,12 +8,6 @@ Design System's framework-agnostic Component Library implementation.
 
 ## Install
 
-Add the following line to `.npmrc` in the project root:
-
-```
-//registry.npmjs.org/:_authToken=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
-```
-
 Add the component library dependency to `package.json`:
 
 ```

package/rich-text/utils.js

@@ -47,10 +47,21 @@ export const createParseVisitor = doc => {
           const $br = doc.createElement('br');
           $p.appendChild($br);
         },
-        link(text, href) {
+        link(text, href, attributes) {
           const $link = doc.createElement('sinch-link');
           $link.text = text;
           $link.href = href;
+          if (attributes != null) {
+            attributes.forEach(attr => {
+              switch (attr) {
+                case 'use-history':
+                  $link['use-history'] = true;
+                  break;
+                default:
+                  break;
+              }
+            });
+          }
           $p.appendChild($link);
         },
         list(isOrdered) {

package/tile-control/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateIntegerAttribute, isAttrTrue, isAttrEqual } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0;--sinch-grid-num-columns:1}#wrapper{display:grid;grid-template-columns:repeat(var(--sinch-grid-num-columns),auto);gap:16px;width:fit-content}:host([small]) #wrapper{gap:8px}:host([cols="2"]){--sinch-grid-num-columns:2}:host([cols="3"]){--sinch-grid-num-columns:3}:host([cols="4"]){--sinch-grid-num-columns:4}:host([cols="5"]){--sinch-grid-num-columns:5}:host([cols="6"]){--sinch-grid-num-columns:6}:host([cols="7"]){--sinch-grid-num-columns:7}:host([cols="8"]){--sinch-grid-num-columns:8}</style><div id="wrapper"><slot></slot></div>';
+const templateHTML = '<style>:host{display:block;outline:0;--sinch-grid-num-columns:1}#wrapper{display:grid;grid-template-columns:repeat(var(--sinch-grid-num-columns),auto);gap:16px;width:fit-content}:host([small]) #wrapper{gap:8px}:host([cols="2"]){--sinch-grid-num-columns:2}:host([cols="3"]){--sinch-grid-num-columns:3}:host([cols="4"]){--sinch-grid-num-columns:4}:host([cols="5"]){--sinch-grid-num-columns:5}:host([cols="6"]){--sinch-grid-num-columns:6}:host([cols="7"]){--sinch-grid-num-columns:7}:host([cols="8"]){--sinch-grid-num-columns:8}:host([cols="9"]){--sinch-grid-num-columns:9}:host([cols="10"]){--sinch-grid-num-columns:10}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tile-control', class extends NectaryElement {

package/tile-control/types.d.ts

@@ -1,4 +1,6 @@
 import type { TSinchElementReact } from '../types';
+/** Number of coumns from 1 to 10 */
+export type TSinchTileControlColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | number;
 export type TSinchTileControlElement = HTMLElement & {
     /** Value */
     value: string;
@@ -6,8 +8,8 @@ export type TSinchTileControlElement = HTMLElement & {
     small: boolean;
     /** Multiple */
     multiple: boolean;
-    /** Number of columns from 1 to 8 */
-    cols: number;
+    /** Number of columns from 1 to 10 */
+    cols: TSinchTileControlColumns;
     /** Change value event */
     addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
     /** Value */
@@ -16,7 +18,7 @@ export type TSinchTileControlElement = HTMLElement & {
     setAttribute(name: 'small', value: ''): void;
     /** Multiple */
     setAttribute(name: 'multiple', value: ''): void;
-    /** Number of columns from 1 to 8 */
+    /** Number of columns from 1 to 10 */
     setAttribute(name: 'cols', value: string): void;
 };
 export type TSinchTileControlReact = TSinchElementReact<TSinchTileControlElement> & {
@@ -26,8 +28,8 @@ export type TSinchTileControlReact = TSinchElementReact<TSinchTileControlElement
     multiple?: boolean;
     /** Small */
     small?: boolean;
-    /** Number of columns from 1 to 8 */
-    cols: number;
+    /** Number of columns from 1 to 10 */
+    cols: TSinchTileControlColumns;
     /** Label that is used for a11y */
     'aria-label': string;
     /** Change value handler */

package/utils/markdown.d.ts

@@ -4,7 +4,7 @@ export type TMarkdownInlineParams = {
     isStrikethrough?: boolean;
 };
 export type TMarkdownParseVisitor = {
-    link(text: string, href: string): void;
+    link(text: string, href: string, attributes?: string[]): void;
     emoji(emojiChar: string): void;
     codetag(text: string): void;
     inline(text: string, params: TMarkdownInlineParams): void;

package/utils/markdown.js

@@ -8,7 +8,7 @@ const regEm2Underscore = /__(?<em2>.+?)__/;
 const regEm1Underscore = /_(?<em1>.+?)_/;
 const regCodeTag = /`(?<code>.+?)`/;
 const regStrikethrough = /~~(?<strike>.+?)~~/;
-const regLink = /!?\[(?<linktext>[^\]]*?)\]\((?<linkhref>[^)]+?)\)/;
+const regLink = /!?\[(?<linktext>[^\]]*?)\]\((?<linkhref>[^)]+?)\)(\{(?<linkattrs>[^)]+?)\})?/;
 const regEmoji = /(?<emoji>(?![0-9*#])\p{Emoji})/u;
 const regUList = /^(?<indent>[\t ]*?)[*+-][\t ]+(?<ultext>.*?)[\t ]*?$/;
 const regOList = /^(?<indent>[\t ]*?)\d+\.[\t ]+(?<oltext>.*?)[\t ]*?$/;
@@ -47,35 +47,35 @@ const createLineParser = visitor => function parseLine(regs, md) {
       visitor.inline(line.substring(0, match.index), context);
     }
     line = line.substring(match.index + matchedStr.length);
-    if (groups.linkhref != null) {
-      visitor.link(groups.linktext, groups.linkhref);
+    if (groups?.linkhref != null) {
+      visitor.link(groups.linktext, groups.linkhref, groups.linkattrs?.split(' '));
     }
-    if (groups.code != null) {
+    if (groups?.code != null) {
       visitor.codetag(groups.code);
     }
-    if (groups.emoji != null) {
+    if (groups?.emoji != null) {
       visitor.emoji(groups.emoji);
     }
-    if (groups.em1 != null) {
+    if (groups?.em1 != null) {
       parseLine(excludeRegs(regs, regEm1Star, regEm1Underscore), groups.em1, {
         ...context,
         isItalic: true
       });
     }
-    if (groups.em2 != null) {
+    if (groups?.em2 != null) {
       parseLine(excludeRegs(regs, regEm2Star, regEm2Underscore), groups.em2, {
         ...context,
         isBold: true
       });
     }
-    if (groups.em3 != null) {
+    if (groups?.em3 != null) {
       parseLine(excludeRegs(regs, regEm3Star, regEm3Underscore, regEm2Star, regEm2Underscore, regEm1Star, regEm1Underscore), groups.em3, {
         ...context,
         isBold: true,
         isItalic: true
       });
     }
-    if (groups.strike != null) {
+    if (groups?.strike != null) {
       parseLine(excludeRegs(regs, regStrikethrough), groups.strike, {
         ...context,
         isStrikethrough: true