@nectary/components 0.45.2 → 0.46.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/badge/index.js +6 -2
  2. package/date-picker/index.js +18 -6
  3. package/logo/engage-icon/index.d.ts +11 -0
  4. package/logo/engage-icon/index.js +4 -0
  5. package/logo/engage-icon-wordmark/index.d.ts +11 -0
  6. package/logo/engage-icon-wordmark/index.js +4 -0
  7. package/package.json +1 -1
  8. package/tag/index.js +3 -1
  9. package/theme/button.css +2 -2
  10. package/utils/dom.js +3 -1
package/badge/index.js CHANGED
@@ -90,7 +90,9 @@ defineCustomElement('sinch-badge', class extends NectaryElement {
90
90
  }
91
91
  case 'mode':
92
92
  {
93
- assertMode(newVal);
93
+ if ('production' !== 'production') {
94
+ assertMode(newVal);
95
+ }
94
96
  this.#updatePosition();
95
97
  break;
96
98
  }
@@ -112,7 +114,9 @@ defineCustomElement('sinch-badge', class extends NectaryElement {
112
114
  }
113
115
  const colorName = this.color;
114
116
  if (colorName !== null && colorName.length > 0) {
115
- assertBadgeColor(this, colorName);
117
+ if ('production' !== 'production') {
118
+ assertBadgeColor(this, colorName);
119
+ }
116
120
  const bg = getBadgeColorBg(colorName);
117
121
  const fg = getBadgeColorFg(colorName);
118
122
  this.#$badge.style.setProperty('background-color', bg);
package/date-picker/index.js CHANGED
@@ -77,15 +77,21 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
77
77
  switch (name) {
78
78
  case 'value':
79
79
  {
80
- assertValue(newVal);
80
+ if ('production' !== 'production') {
81
+ assertValue(newVal);
82
+ }
81
83
  this.#onValueChange();
82
84
  break;
83
85
  }
84
86
  case 'min':
85
87
  {
86
- assertMinMax(newVal, name);
88
+ if ('production' !== 'production') {
89
+ assertMinMax(newVal, name);
90
+ }
87
91
  this.#minDate = isoToDate(newVal);
88
- assertDate(this.#minDate, name, newVal);
92
+ if ('production' !== 'production') {
93
+ assertDate(this.#minDate, name, newVal);
94
+ }
89
95
 
90
96
  if (this.#uiDate !== null) {
91
97
  clampMinDate(this.#uiDate, this.#minDate);
@@ -95,9 +101,13 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
95
101
  }
96
102
  case 'max':
97
103
  {
98
- assertMinMax(newVal, name);
104
+ if ('production' !== 'production') {
105
+ assertMinMax(newVal, name);
106
+ }
99
107
  this.#maxDate = isoToDate(newVal);
100
- assertDate(this.#maxDate, name, newVal);
108
+ if ('production' !== 'production') {
109
+ assertDate(this.#maxDate, name, newVal);
110
+ }
101
111
 
102
112
  if (this.#uiDate !== null) {
103
113
  clampMaxDate(this.#uiDate, this.#maxDate);
@@ -107,7 +117,9 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
107
117
  }
108
118
  case 'locale':
109
119
  {
110
- assertLocale(newVal);
120
+ if ('production' !== 'production') {
121
+ assertLocale(newVal);
122
+ }
111
123
  const names = getDayNames(newVal);
112
124
  this.#$weekDayNames.forEach(($day, i) => {
113
125
  $day.textContent = names[i];
package/logo/engage-icon/index.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import type { TSinchLogoElement, TSinchLogoReact } from '../types';
2
+ declare global {
3
+ namespace JSX {
4
+ interface IntrinsicElements {
5
+ 'sinch-logo-engage-icon': TSinchLogoReact;
6
+ }
7
+ }
8
+ interface HTMLElementTagNameMap {
9
+ 'sinch-logo-engage-icon': TSinchLogoElement;
10
+ }
11
+ }
package/logo/engage-icon/index.js ADDED
@@ -0,0 +1,4 @@
1
+ import { defineCustomElement } from '../../utils';
2
+ import { createLogoClass } from '../create-logo-class';
3
+ const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true"><path d="M46.398 19.2a17.48 17.48 0 0 1-5.155 12.443A17.488 17.488 0 0 1 28.8 36.798H24l4.8-4.8c7.057 0 12.799-5.741 12.799-12.798S35.857 6.402 28.8 6.402c-7.057 0-12.799 5.741-12.799 12.798v.25a15.66 15.66 0 0 0-2.801-.25h-.798c-.402 0-.803.014-1.2.046V19.2a17.48 17.48 0 0 1 5.155-12.443A17.488 17.488 0 0 1 28.8 1.602c4.698 0 9.12 1.832 12.443 5.155A17.488 17.488 0 0 1 46.398 19.2Z"/><path d="M24.046 46.398H12.8c-6.176 0-11.202-5.026-11.202-11.201 0-6.176 5.026-11.202 11.202-11.202 6.174 0 11.2 5.026 11.2 11.202v1.601h-4.8v-1.601c0-3.53-2.87-6.402-6.401-6.402a6.408 6.408 0 0 0-6.402 6.402c0 3.53 2.87 6.401 6.402 6.401h6.447l4.8 4.8Z"/></svg>';
4
+ defineCustomElement('sinch-logo-engage-icon', createLogoClass(templateHTML));
package/logo/engage-icon-wordmark/index.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import type { TSinchLogoElement, TSinchLogoReact } from '../types';
2
+ declare global {
3
+ namespace JSX {
4
+ interface IntrinsicElements {
5
+ 'sinch-logo-engage-icon-wordmark': TSinchLogoReact;
6
+ }
7
+ }
8
+ interface HTMLElementTagNameMap {
9
+ 'sinch-logo-engage-icon-wordmark': TSinchLogoElement;
10
+ }
11
+ }
package/logo/engage-icon-wordmark/index.js ADDED
@@ -0,0 +1,4 @@
1
+ import { defineCustomElement } from '../../utils';
2
+ import { createLogoClass } from '../create-logo-class';
3
+ const templateHTML = '<svg viewBox="0 0 159 48" aria-hidden="true"><path d="M53.94 40.214V16.722h15.338v3.456H58.236v6.444h10.035v3.356H58.236v6.78h11.042v3.456H53.94Zm17.62 0V23.568h3.792l.336 2.819a5.862 5.862 0 0 1 2.231-2.35c.974-.582 2.119-.872 3.44-.872 2.06 0 3.658.65 4.8 1.947 1.14 1.296 1.711 3.2 1.711 5.705v9.397h-4.296V31.22c0-1.43-.29-2.53-.872-3.29-.583-.758-1.49-1.14-2.719-1.14-1.229 0-2.198.423-2.97 1.275-.772.852-1.158 2.035-1.158 3.557v8.592H71.56Zm25.774-4.967a8.905 8.905 0 0 1-2.248-.269l-1.242 1.242c.382.202.893.37 1.544.504.65.134 1.699.268 3.154.402 2.215.202 3.826.726 4.833 1.578 1.007.851 1.51 2.026 1.51 3.524 0 .985-.268 1.917-.805 2.802s-1.364 1.598-2.484 2.148c-1.12.55-2.55.822-4.295.822-2.37 0-4.284-.44-5.74-1.326-1.455-.885-2.18-2.21-2.18-3.977 0-1.497.725-2.798 2.18-3.893a7.352 7.352 0 0 1-1.157-.637 6.089 6.089 0 0 1-.856-.705v-.772l2.92-3.087c-1.296-1.142-1.947-2.606-1.947-4.397 0-1.12.273-2.135.823-3.054.55-.919 1.325-1.644 2.332-2.181 1.007-.537 2.228-.806 3.658-.806.94 0 1.813.134 2.618.403h6.309v2.618l-2.852.201c.449.852.671 1.791.671 2.82 0 1.12-.269 2.134-.806 3.053s-1.313 1.645-2.332 2.181c-1.02.537-2.22.806-3.608.806Zm-4.027 7.014c0 .827.386 1.447 1.158 1.863.772.415 1.715.62 2.836.62 1.12 0 1.946-.218 2.617-.654.672-.436 1.007-1.023 1.007-1.762a1.97 1.97 0 0 0-.654-1.51c-.437-.403-1.305-.65-2.601-.738a26.661 26.661 0 0 1-2.55-.302c-.651.356-1.113.75-1.394 1.174-.28.424-.42.86-.42 1.31Zm4.027-10.303c.873 0 1.594-.235 2.165-.705.57-.47.856-1.14.856-2.013s-.286-1.544-.856-2.014c-.57-.47-1.292-.705-2.165-.705-.919 0-1.657.235-2.215.705-.558.47-.839 1.141-.839 2.014 0 .872.281 1.543.84 2.013.557.47 1.295.705 2.214.705Zm16.109 8.659c-1.43 0-2.605-.231-3.524-.688-.918-.458-1.598-1.07-2.047-1.83a4.851 4.851 0 0 1-.671-2.516c0-1.544.604-2.798 1.812-3.76 1.208-.96 3.021-1.442 5.437-1.442h4.229v-.403c0-1.141-.323-1.98-.973-2.517-.651-.537-1.456-.805-2.417-.805-.872 0-1.632.205-2.282.62-.65.416-1.053 1.024-1.208 1.83h-4.195c.113-1.209.52-2.262 1.225-3.155.705-.894 1.615-1.582 2.735-2.064 1.12-.483 2.37-.722 3.759-.722 2.37 0 4.241.592 5.604 1.779 1.364 1.187 2.048 2.865 2.048 5.034v10.236h-3.659l-.402-2.685a6.205 6.205 0 0 1-2.064 2.215c-.885.583-2.018.873-3.407.873Zm.974-3.356c1.229 0 2.185-.403 2.869-1.209.684-.805 1.112-1.8 1.292-2.986h-3.658c-1.141 0-1.959.205-2.45.62-.491.416-.738.923-.738 1.527 0 .65.247 1.154.738 1.51.491.357 1.141.538 1.947.538Zm18.022-2.014a8.905 8.905 0 0 1-2.249-.269l-1.242 1.242c.382.202.894.37 1.544.504s1.699.268 3.155.402c2.215.202 3.826.726 4.833 1.578 1.006.851 1.51 2.026 1.51 3.524 0 .985-.269 1.917-.806 2.802s-1.363 1.598-2.483 2.148-2.551.822-4.296.822c-2.37 0-4.283-.44-5.739-1.326-1.456-.885-2.181-2.21-2.181-3.977 0-1.497.725-2.798 2.181-3.893a7.349 7.349 0 0 1-1.158-.637 6.052 6.052 0 0 1-.855-.705v-.772l2.919-3.087c-1.296-1.142-1.946-2.606-1.946-4.397 0-1.12.272-2.135.822-3.054.55-.919 1.326-1.644 2.333-2.181 1.006-.537 2.227-.806 3.658-.806.939 0 1.812.134 2.617.403h6.31v2.618l-2.853.201c.449.852.671 1.791.671 2.82 0 1.12-.268 2.134-.805 3.053s-1.313 1.645-2.333 2.181c-1.019.537-2.219.806-3.607.806Zm-4.028 7.014c0 .827.386 1.447 1.158 1.863.772.415 1.716.62 2.836.62 1.12 0 1.947-.218 2.618-.654.671-.436 1.007-1.023 1.007-1.762 0-.604-.219-1.107-.655-1.51-.436-.403-1.304-.65-2.601-.738a26.617 26.617 0 0 1-2.55-.302c-.651.356-1.112.75-1.393 1.174-.281.424-.42.86-.42 1.31Zm4.028-10.303c.872 0 1.594-.235 2.164-.705.571-.47.856-1.14.856-2.013s-.285-1.544-.856-2.014c-.57-.47-1.292-.705-2.164-.705-.919 0-1.657.235-2.215.705-.558.47-.839 1.141-.839 2.014 0 .872.281 1.543.839 2.013.558.47 1.296.705 2.215.705Zm17.787 8.659c-1.678 0-3.168-.357-4.464-1.074a7.806 7.806 0 0 1-3.054-3.02c-.738-1.297-1.107-2.799-1.107-4.498 0-1.699.365-3.255 1.09-4.598a7.911 7.911 0 0 1 3.021-3.137c1.288-.751 2.802-1.125 4.547-1.125 1.632 0 3.075.357 4.33 1.074a7.715 7.715 0 0 1 2.936 2.937c.705 1.241 1.057 2.622 1.057 4.144 0 .248-.004.504-.016.772-.013.269-.03.55-.051.84h-12.652c.088 1.296.541 2.315 1.359 3.053.818.739 1.808 1.108 2.97 1.108.873 0 1.607-.197 2.198-.588a3.632 3.632 0 0 0 1.326-1.527h4.363a7.93 7.93 0 0 1-1.561 2.87 7.688 7.688 0 0 1-2.684 2.03c-1.062.491-2.266.739-3.608.739Zm.033-13.961c-1.053 0-1.98.297-2.785.889-.806.591-1.322 1.493-1.544 2.701h8.29c-.068-1.094-.47-1.967-1.209-2.617-.738-.65-1.657-.974-2.752-.974ZM56.944 11.742c-.604 0-1.137-.105-1.598-.31a2.524 2.524 0 0 1-1.091-.894c-.264-.386-.403-.86-.411-1.414h1.586c.016.386.155.71.415.97s.625.394 1.087.394c.398 0 .717-.097.952-.29a.944.944 0 0 0 .352-.768c0-.318-.105-.6-.31-.788-.206-.189-.483-.34-.827-.457l-1.103-.378c-.634-.218-1.12-.5-1.452-.847-.331-.344-.499-.802-.499-1.376-.008-.487.11-.902.348-1.25a2.37 2.37 0 0 1 .982-.81c.415-.193.894-.29 1.435-.29s1.032.097 1.451.294c.42.197.747.47.986.822.24.353.365.772.382 1.259h-1.611a1.109 1.109 0 0 0-.336-.768c-.214-.222-.516-.336-.897-.336-.328-.008-.604.072-.827.24-.222.167-.335.41-.335.734 0 .272.088.49.26.65.172.16.407.298.704.407.298.109.638.226 1.024.352.407.143.78.307 1.116.495.336.19.608.437.81.747.205.31.306.705.306 1.191 0 .433-.11.831-.327 1.2-.218.37-.546.663-.974.885-.432.223-.96.336-1.585.336h-.013Zm6.553-.138V3.38h1.502v8.223h-1.502Zm5.449 0V3.38h1.502l3.864 5.79V3.38h1.502v8.223h-1.502l-3.864-5.781v5.78h-1.502Zm14.544.138c-.83 0-1.543-.176-2.139-.533a3.565 3.565 0 0 1-1.376-1.493c-.323-.638-.482-1.376-.482-2.215 0-.84.159-1.578.482-2.22a3.56 3.56 0 0 1 1.376-1.501c.596-.361 1.309-.541 2.14-.541.985 0 1.795.243 2.424.734.63.49 1.024 1.174 1.18 2.06h-1.658a1.782 1.782 0 0 0-.65-1.053c-.332-.256-.772-.382-1.322-.382-.759 0-1.355.26-1.787.776-.432.516-.646 1.225-.646 2.127 0 .902.214 1.606.646 2.118.432.512 1.028.768 1.787.768.55 0 .99-.117 1.322-.357.331-.239.55-.57.65-.994h1.657c-.155.848-.55 1.506-1.179 1.984-.629.479-1.439.718-2.425.718v.004Zm7.283-.138V3.38h1.502V6.8h3.687V3.38h1.502v8.223h-1.502V8.02h-3.687v3.582h-1.502Zm-48.6 5.847c0 4.275-1.665 8.29-4.686 11.31a15.895 15.895 0 0 1-11.31 4.686h-4.363l4.363-4.363c6.415 0 11.633-5.218 11.633-11.633 0-6.414-5.218-11.632-11.633-11.632-6.414 0-11.633 5.218-11.633 11.633v.226a14.231 14.231 0 0 0-2.546-.227h-.726c-.365 0-.73.013-1.09.042v-.041c0-4.275 1.665-8.29 4.685-11.31a15.895 15.895 0 0 1 11.31-4.686c4.27 0 8.29 1.665 11.31 4.686a15.896 15.896 0 0 1 4.686 11.31Z"/><path d="M21.856 42.173H11.633c-5.613 0-10.181-4.568-10.181-10.181 0-5.613 4.568-10.182 10.181-10.182 5.613 0 10.181 4.569 10.181 10.182v1.455h-4.362v-1.455c0-3.21-2.61-5.819-5.819-5.819a5.824 5.824 0 0 0-5.819 5.819 5.824 5.824 0 0 0 5.819 5.818h5.86l4.363 4.363Z"/></svg>';
4
+ defineCustomElement('sinch-logo-engage-icon-wordmark', createLogoClass(templateHTML));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nectary/components",
3
- "version": "0.45.2",
3
+ "version": "0.46.0",
4
4
  "files": [
5
5
  "**/*/*.css",
6
6
  "**/*/*.json",
package/tag/index.js CHANGED
@@ -59,7 +59,9 @@ defineCustomElement('sinch-tag', class extends NectaryElement {
59
59
  }
60
60
  const colorName = this.color;
61
61
  if (colorName !== null && colorName.length > 0) {
62
- assertTagColor(this, colorName);
62
+ if ('production' !== 'production') {
63
+ assertTagColor(this, colorName);
64
+ }
63
65
  const bg = getTagColorBg(colorName);
64
66
  const fg = getTagColorFg(colorName);
65
67
  this.#$wrapper.style.setProperty('background-color', bg);
package/theme/button.css CHANGED
@@ -96,10 +96,10 @@
96
96
  --sinch-button-cta-secondary-mix-blend-mode: initial;
97
97
 
98
98
  /* Destructive */
99
- --sinch-button-destructive-color-background: transparent;
99
+ --sinch-button-destructive-color-background: var(--sinch-color-snow-100);
100
100
  --sinch-button-destructive-color-background-hover: var(--sinch-color-raspberry-100);
101
101
  --sinch-button-destructive-color-background-active: var(--sinch-color-raspberry-100);
102
- --sinch-button-destructive-color-background-disabled: transparent;
102
+ --sinch-button-destructive-color-background-disabled: var(--sinch-color-snow-100);
103
103
  --sinch-button-destructive-color-border: var(--sinch-color-raspberry-500);
104
104
  --sinch-button-destructive-color-border-hover: var(--sinch-color-raspberry-500);
105
105
  --sinch-button-destructive-color-border-active: var(--sinch-color-raspberry-500);
package/utils/dom.js CHANGED
@@ -44,7 +44,9 @@ export function getLiteralAttribute($element, literals, attrName, defaultValue)
44
44
  return attrValue;
45
45
  }
46
46
  if (typeof defaultValue === 'undefined') {
47
- throw new Error(`Invalid attribute value: ${attrName} = ${attrValue}`);
47
+ if ('production' !== 'production') {
48
+ throw new Error(`Invalid attribute value: ${attrName} = ${attrValue}`);
49
+ }
48
50
  }
49
51
  return defaultValue;
50
52
  }