@nectary/components 4.6.5 → 4.6.7

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "4.6.5",
+  "version": "4.6.7",
   "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",
@@ -32,5 +32,8 @@
     "@types/react": "^18.2.21",
     "babel-plugin-html-inline-minifier": "workspace:*",
     "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "@nectary/theme-base": "1.4.0"
   }
 }

package/popover/index.js

@@ -1,6 +1,6 @@
 import '../pop';
 import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, updateBooleanAttribute, NectaryElement, updateAttribute, getReactEventHandler, isAttrTrue, setClass, rectOverlap, subscribeContext, isAttrEqual } from '../utils';
-const templateHTML = '<style>:host{display:contents}#content-wrapper{position:relative;padding-top:4px}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-comp-popover-shadow))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}#content{background-color:var(--sinch-comp-popover-color-default-background-initial);border:1px solid var(--sinch-comp-popover-color-default-border-initial);border-radius:var(--sinch-comp-popover-shape-radius);box-shadow:var(--sinch-comp-popover-shadow);overflow:hidden}:host([tip]) #content{box-shadow:none}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-comp-popover-color-default-background-initial);stroke:var(--sinch-comp-popover-color-default-border-initial);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([tip]) #tip:not(.hidden){display:block}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
+const templateHTML = '<style>:host{display:contents}#content-wrapper{position:relative;padding-top:4px;width:fit-content;min-width:100%}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-comp-popover-shadow))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}#content{background-color:var(--sinch-comp-popover-color-default-background-initial);border:1px solid var(--sinch-comp-popover-color-default-border-initial);border-radius:var(--sinch-comp-popover-shape-radius);box-shadow:var(--sinch-comp-popover-shadow);overflow:hidden}:host([tip]) #content{box-shadow:none}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-comp-popover-color-default-background-initial);stroke:var(--sinch-comp-popover-color-default-border-initial);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([tip]) #tip:not(.hidden){display:block}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
 import { getPopOrientation, orientationValues } from './utils';
 const TIP_SIZE = 16;
 const template = document.createElement('template');
@@ -10,6 +10,7 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
   #$content;
   #$tip;
   #controller = null;
+  #resizeObserver = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -31,10 +32,18 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
     });
     subscribeContext(this.#$content, 'visibility', this.#onContextVisibility, signal);
     updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
+    this.#resizeObserver = new ResizeObserver(() => {
+      if (this.#$pop.open) {
+        this.#updateContentMaxWidth();
+      }
+    });
+    this.#resizeObserver.observe(document.body);
   }
   disconnectedCallback() {
     this.#controller.abort();
     this.#controller = null;
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = null;
   }
   static get observedAttributes() {
     return ['orientation', 'open', 'modal', 'tip', 'aria-label', 'aria-description'];
@@ -119,6 +128,7 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
   #onContextVisibility = e => {
     if (e.detail) {
       this.#updateTipOrientation();
+      this.#updateContentMaxWidth();
     } else {
       this.#resetTipOrientation();
     }
@@ -143,4 +153,9 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
     this.#$tip.style.left = `${xPos}px`;
     setClass(this.#$tip, 'hidden', rectOverlap(targetRect, contentRect));
   };
+  #updateContentMaxWidth = () => {
+    const contentRect = this.#$content.getBoundingClientRect();
+    const availableSpace = window.innerWidth - contentRect.left - 16;
+    this.#$content.style.maxWidth = `${availableSpace}px`;
+  };
 });

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>;