@nectary/components 4.6.6 → 4.6.8

package/avatar/colors.d.ts

@@ -0,0 +1 @@
+export type TSinchAvatarColor = 'blue' | 'dark-blue' | 'dark-gray' | 'dark-green' | 'dark-orange' | 'dark-pink' | 'dark-red' | 'dark-violet' | 'dark-yellow' | 'default' | 'gray' | 'green' | 'light-blue' | 'light-gray' | 'light-green' | 'light-orange' | 'light-pink' | 'light-red' | 'light-violet' | 'light-yellow' | 'orange' | 'pink' | 'red' | 'violet' | 'yellow' | 'away-default' | 'busy-default' | 'offline-default' | 'online-default';

package/avatar/colors.js

@@ -0,0 +1 @@
+export {};

package/avatar/types.d.ts

@@ -1,3 +1,4 @@
+import type { TSinchAvatarColor } from './colors';
 import type { TSinchElementReact } from '../types';
 import type { TSinchSize } from '../utils/size';
 export type TSinchAvatarStatus = 'online' | 'busy' | 'away' | 'offline';
@@ -7,7 +8,7 @@ export type TSinchAvatarElement = HTMLElement & {
     /** Alt text */
     alt: string;
     /** Background color */
-    color: string | null;
+    color: TSinchAvatarColor | null;
     /** Status */
     status: TSinchAvatarStatus | null;
     /** Size, `m` by default */
@@ -29,7 +30,7 @@ export type TSinchAvatarReact = TSinchElementReact<TSinchAvatarElement> & {
     /** Alt text */
     alt?: string;
     /** Background color */
-    color?: string;
+    color?: TSinchAvatarColor;
     /** Size, `m` by default */
     size?: TSinchSize;
     /** Status */

package/chip/colors.d.ts

@@ -0,0 +1 @@
+export type TSinchChipColor = 'blue-default' | 'blue' | 'danger-default' | 'danger' | 'dark-blue-default' | 'dark-blue' | 'dark-gray-default' | 'dark-gray' | 'dark-green-default' | 'dark-green' | 'dark-orange-default' | 'dark-orange' | 'dark-pink-default' | 'dark-pink' | 'dark-red-default' | 'dark-red' | 'dark-violet-default' | 'dark-violet' | 'dark-yellow-default' | 'dark-yellow' | 'gray-default' | 'gray' | 'green-default' | 'green' | 'info-default' | 'info' | 'light-blue-default' | 'light-blue' | 'light-gray-default' | 'light-gray' | 'light-green-default' | 'light-green' | 'light-orange-default' | 'light-orange' | 'light-pink-default' | 'light-pink' | 'light-red-default' | 'light-red' | 'light-violet-default' | 'light-violet' | 'light-yellow-default' | 'light-yellow' | 'neutral-default' | 'neutral' | 'orange-default' | 'orange' | 'pink-default' | 'pink' | 'red-default' | 'red' | 'success-default' | 'success' | 'violet-default' | 'violet' | 'warning-default' | 'warning' | 'yellow-default' | 'yellow';

package/chip/colors.js

@@ -0,0 +1 @@
+export {};

package/chip/types.d.ts

@@ -1,9 +1,10 @@
+import type { TSinchChipColor } from './colors';
 import type { TSinchElementReact } from '../types';
 export type TSinchChipElement = HTMLElement & {
     /** Text */
     text: string;
     /** Color, gray by default */
-    color: string | null;
+    color: TSinchChipColor | null;
     /** Small */
     small: boolean;
     /** Click event */
@@ -23,7 +24,7 @@ export type TSinchChipReact = TSinchElementReact<TSinchChipElement> & {
     /** Text */
     text: string;
     /** Color, gray by default */
-    color?: string;
+    color?: TSinchChipColor;
     /** Small */
     small?: boolean;
     /** Click event handler */

package/link/index.js

@@ -1,6 +1,6 @@
 import '../icon';
 import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue, getReactEventHandler, isAttrEqual } from '../utils';
-const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([standalone]){display:block}:host([standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host([external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host([standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([standalone]) #icon-prefix{display:inline}:host([standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}</style><a referrerpolicy="no-referer" aria-hidden="true"><span id="content"></span><span id="icon-prefix">&nbsp;</span><sinch-icon icons-version="2" name="fa-arrow-up-right-from-square" id="external-icon"></sinch-icon><sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon></a>';
+const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([standalone]){display:block}:host([standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host([external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host([standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([standalone]) #icon-prefix{display:inline}:host([standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}</style><a referrerpolicy="no-referer" aria-hidden="true"><span id="content"></span><span id="icon-prefix">&nbsp;</span><sinch-icon icons-version="2" name="fa-arrow-up-right" id="external-icon"></sinch-icon><sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon></a>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-link', class extends NectaryElement {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "4.6.6",
+  "version": "4.6.8",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@nectary/assets": "2.2.0"
+    "@nectary/assets": "2.2.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.15",

package/tag/colors.d.ts

@@ -0,0 +1 @@
+export type TSinchTagColor = 'blue' | 'danger' | 'dark-blue' | 'dark-gray' | 'dark-green' | 'dark-orange' | 'dark-pink' | 'dark-red' | 'dark-violet' | 'dark-yellow' | 'default' | 'gray' | 'green' | 'info' | 'light-blue' | 'light-gray' | 'light-green' | 'light-orange' | 'light-pink' | 'light-red' | 'light-violet' | 'light-yellow' | 'orange' | 'pink' | 'red' | 'success' | 'violet' | 'warning' | 'yellow';

package/tag/colors.js

@@ -0,0 +1 @@
+export {};

package/tag/types.d.ts

@@ -1,9 +1,10 @@
+import type { TSinchTagColor } from './colors';
 import type { TSinchElementReact } from '../types';
 export type TSinchTagElement = HTMLElement & {
     /** Text */
     text: string;
     /** Color, gray by default */
-    color: string | null;
+    color: TSinchTagColor | null;
     /** Small */
     small: boolean;
     /** Text */
@@ -17,7 +18,7 @@ export type TSinchTagReact = TSinchElementReact<TSinchTagElement> & {
     /** Text */
     text: string;
     /** Color, gray by default */
-    color?: string;
+    color?: TSinchTagColor;
     /** Small */
     small?: boolean;
 } & {

package/utils/countries.d.ts

@@ -3,4 +3,11 @@ export type TSinchCountry = {
     phoneCode: string;
     phoneMask: string | null;
 };
+/**
+ * @deprecated -
+ * not up to date:
+ * - for a general list of country, https://www.npmjs.com/package/countries-list is a better choice
+ * - for validating phone numbers, we recommend https://www.npmjs.com/package/google-libphonenumber or https://www.npmjs.com/package/awesome-phonenumber
+ * - for the phone masks, we used the `countries-phone-masks` (https://www.npmjs.com/package/countries-phone-masks) in the example, but how well maintained it is is unknown.
+ **/
 export declare const countries: Record<string, TSinchCountry>;