@nectary/components 2.0.0 → 2.1.0

package/title/utils.js

@@ -1,15 +1,4 @@
 export const typeValues = ['xl', 'l', 'm', 's', 'xs'];
-export const levelValues = ['1', '2', '3', '4', '5', '6'];
-export const assertLevel = value => {
-  if (value === null || !levelValues.includes(value)) {
-    throw new Error(`sinch-title: invalid level attribute: ${value}`);
-  }
-};
-export const assertType = value => {
-  if (value === null || !typeValues.includes(value)) {
-    throw new Error(`sinch-title: invalid type attribute: ${value}`);
-  }
-};
 export const getTitleLevelFromType = type => {
   switch (type) {
     case 'xl':
@@ -23,23 +12,6 @@ export const getTitleLevelFromType = type => {
     case 'xs':
       return '5';
     default:
-      throw new Error(`sinch-title: invalid type value: ${type}`);
-  }
-};
-export const getTitleTypeFromLevel = level => {
-  switch (level) {
-    case '1':
-      return 'xl';
-    case '2':
-      return 'l';
-    case '3':
-      return 'm';
-    case '4':
-      return 's';
-    case '5':
-    case '6':
-      return 'xs';
-    default:
-      throw new Error(`sinch-title: invalid level value: ${level}`);
+      return '';
   }
 };

package/toast/index.js

@@ -3,7 +3,7 @@ import '../title';
 import '../text';
 import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, getReactEventHandler, getBooleanAttribute, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;width:328px;padding:8px 16px;box-sizing:border-box;border-radius:var(--sinch-comp-toast-shape-radius);box-shadow:var(--sinch-comp-toast-shadow)}:host([type=success]) #wrapper{background-color:var(--sinch-comp-toast-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-toast-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-toast-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-toast-color-info-default-background)}#text{padding:4px 0 4px 4px;flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-toast-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-info-default-text)}#icon{align-self:flex-start;margin:4px 0}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-toast-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-toast-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-toast-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-toast-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}</style><div id="wrapper"><sinch-icon id="icon-info" name="info"></sinch-icon><sinch-icon id="icon-success" name="check_circle"></sinch-icon><sinch-icon id="icon-warn" name="report_problem"></sinch-icon><sinch-icon id="icon-error" name="report"></sinch-icon><sinch-text id="text" type="m"></sinch-text><slot name="action"></slot><slot name="close"></slot></div>';
-import { assertType, typeValues } from './utils';
+import { typeValues } from './utils';
 const TIMEOUT = 5000;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -29,20 +29,13 @@ defineCustomElement('sinch-toast', class extends NectaryElement {
     this.#clearTimeout();
   }
   static get observedAttributes() {
-    return ['text', 'type', 'persistent'];
+    return ['text', 'persistent'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
     }
     switch (name) {
-      case 'type':
-        {
-          if ('production' !== 'production') {
-            assertType(newVal);
-          }
-          break;
-        }
       case 'text':
         {
           this.#$text.textContent = newVal;

package/toast/utils.d.ts

@@ -1,5 +1,2 @@
 import type { TSinchToastType } from './types';
 export declare const typeValues: readonly TSinchToastType[];
-type TAssertType = (value: string | null) => asserts value is TSinchToastType;
-export declare const assertType: TAssertType;
-export {};

package/toast/utils.js

@@ -1,6 +1 @@
-export const typeValues = ['info', 'success', 'warn', 'error'];
-export const assertType = value => {
-  if (value === null || !typeValues.includes(value)) {
-    throw new Error(`sinch-toast: invalid type attribute: ${value}`);
-  }
-};
+export const typeValues = ['info', 'success', 'warn', 'error'];

package/tooltip/index.js

@@ -3,7 +3,7 @@ import '../pop';
 import { defineCustomElement, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass, rectOverlap, getReactEventHandler, shouldReduceMotion } from '../utils';
 const templateHTML = '<style>:host{display:contents}#content-wrapper{padding-bottom:8px;filter:drop-shadow(var(--sinch-comp-tooltip-shadow))}:host([orientation=left]) #content-wrapper{padding-bottom:0;padding-right:8px}:host([orientation=right]) #content-wrapper{padding-bottom:0;padding-left:8px}:host([orientation^=bottom]) #content-wrapper{padding-bottom:0;padding-top:8px}#content{position:relative;display:block;max-width:300px;padding:2px 6px;box-sizing:border-box;background-color:var(--sinch-local-color-background);border-radius:var(--sinch-comp-tooltip-shape-radius);pointer-events:none;opacity:0;--sinch-local-color-background:var(--sinch-comp-tooltip-color-background);--sinch-global-color-text:var(--sinch-comp-tooltip-color-text)}#text{word-break:break-word;pointer-events:none;--sinch-comp-text-font:var(--sinch-comp-tooltip-font-body)}#tip{position:absolute;left:50%;top:100%;transform:translateX(-50%) rotate(0);transform-origin:top center;fill:var(--sinch-local-color-background);pointer-events:none}#tip.hidden{display:none}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(270deg);top:50%;left:100%}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:50%;left:0}:host([orientation^=bottom]) #tip{transform:translateX(-50%) rotate(180deg);top:0}</style><sinch-pop id="pop"><slot id="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><sinch-text id="text" type="s"></sinch-text><svg id="tip" width="8" height="4" aria-hidden="true"><path d="m4 4 4-4h-8l4 4Z"/></svg></div></div></sinch-pop>';
 import { TooltipState } from './tooltip-state';
-import { assertOrientation, assertType, getPopOrientation, orientationValues, typeValues } from './utils';
+import { getPopOrientation, orientationValues, typeValues } from './utils';
 const TIP_SIZE = 8;
 const SHOW_DELAY_SLOW = 1000;
 const SHOW_DELAY_FAST = 250;
@@ -73,9 +73,6 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
         }
       case 'orientation':
         {
-          if ('production' !== 'production') {
-            assertOrientation(newVal);
-          }
           updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
           if (this.#isOpen()) {
             this.#resetTipOrientation();
@@ -85,9 +82,6 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
         }
       case 'type':
         {
-          if ('production' !== 'production') {
-            assertType(newVal);
-          }
           this.#tooltipState.updateOptions({
             showDelay: newVal === 'fast' ? SHOW_DELAY_FAST : SHOW_DELAY_SLOW
           });

package/tooltip/utils.d.ts

@@ -3,8 +3,3 @@ import type { TSinchPopOrientation } from '../pop/types';
 export declare const typeValues: readonly TSinchTooltipType[];
 export declare const orientationValues: readonly TSinchTooltipOrientation[];
 export declare const getPopOrientation: (orientation: TSinchTooltipOrientation) => TSinchPopOrientation;
-type TAssertOrientation = (value: string | null) => asserts value is TSinchTooltipOrientation;
-export declare const assertOrientation: TAssertOrientation;
-type TAssertType = (value: string | null) => asserts value is TSinchTooltipType;
-export declare const assertType: TAssertType;
-export {};

package/tooltip/utils.js

@@ -14,14 +14,4 @@ export const getPopOrientation = orientation => {
     return 'center-right';
   }
   return orientation;
-};
-export const assertOrientation = value => {
-  if (value !== null && !orientationValues.includes(value)) {
-    throw new Error(`sinch-tooltip: invalid orientation attribute: ${value}`);
-  }
-};
-export const assertType = value => {
-  if (value !== null && !typeValues.includes(value)) {
-    throw new Error(`sinch-tooltip: invalid type attribute: ${value}`);
-  }
 };

package/utils/dom.js

@@ -43,11 +43,6 @@ export function getLiteralAttribute($element, literals, attrName, defaultValue)
   if (isLiteralValue(literals, attrValue)) {
     return attrValue;
   }
-  if (typeof defaultValue === 'undefined') {
-    if ('production' !== 'production') {
-      throw new Error(`Invalid attribute value: ${attrName} = ${attrValue}`);
-    }
-  }
   return defaultValue;
 }
 export const clampNumber = (value, min, max) => {

package/utils/element.js

@@ -25,8 +25,8 @@ export const setNectaryRegistry = registry => {
 export class NectaryElement extends HTMLElement {
   attachShadow(options) {
     return super.attachShadow({
-      mode: 'closed',
-      delegatesFocus: false,
+      mode: 'open',
+      delegatesFocus: true,
       customElements: nectaryRegistry,
       ...options
     });

package/utils/size.d.ts

@@ -3,8 +3,3 @@ export type TSinchSizeEx = TSinchSize | 'xs';
 export declare const DEFAULT_SIZE: TSinchSize;
 export declare const sizeValues: readonly TSinchSize[];
 export declare const sizeExValues: readonly TSinchSizeEx[];
-type TAssertSize = (value: string | null, name: string) => asserts value is TSinchSize;
-export declare const assertSize: TAssertSize;
-type TAssertSizeEx = (value: string | null, name: string) => asserts value is TSinchSizeEx;
-export declare const assertSizeEx: TAssertSizeEx;
-export {};

package/utils/size.js

@@ -1,19 +1,3 @@
 export const DEFAULT_SIZE = 'm';
 export const sizeValues = ['l', 'm', 's'];
-export const sizeExValues = [...sizeValues, 'xs'];
-export const assertSize = (value, name) => {
-  if (value === null || value.length === 0) {
-    return;
-  }
-  if (!sizeValues.includes(value)) {
-    throw new Error(`Invalid size attribute for ${name}: ${value}`);
-  }
-};
-export const assertSizeEx = (value, name) => {
-  if (value === null || value.length === 0) {
-    return;
-  }
-  if (!sizeExValues.includes(value)) {
-    throw new Error(`Invalid size attribute for ${name}: ${value}`);
-  }
-};
+export const sizeExValues = [...sizeValues, 'xs'];