@nectary/components 0.9.0 → 0.10.0

package/tooltip/index.js

@@ -1,5 +1,5 @@
-import { attrValueToPixels, defineCustomElement, getBooleanAttribute, getIntegerAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{position:relative;display:block}#tooltip{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:0%;transition:opacity .2s linear .2s}@media (prefers-reduced-motion){#tooltip{transition:none}}:host(:hover) #tooltip{opacity:100%}#text{position:absolute;padding:2px 6px;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-600);width:max-content;border-radius:2px;top:-8px;left:50%;transform:translateX(-50%) translateY(-100%)}#arrow{position:absolute;top:-8px;left:50%;transform:translateX(-50%);fill:var(--sinch-color-snow-600)}:host([orientation=top-left]) #text{transform:translateX(-80%) translateY(-100%)}:host([orientation=top-right]) #text{transform:translateX(-20%) translateY(-100%)}:host([orientation=bottom-right]) #text{top:calc(100% + 8px);transform:translateX(-20%)}:host([orientation=bottom-left]) #text{top:calc(100% + 8px);transform:translateX(-80%)}:host([orientation=bottom]) #text{top:calc(100% + 8px);transform:translateX(-50%)}:host([orientation^=bottom]) #arrow{top:calc(100% + 4px);transform:translateX(-50%) rotate(180deg)}:host([orientation=left]) #text{left:unset;right:calc(100% + 8px);top:50%;transform:translateY(-50%)}:host([orientation=left]) #arrow{left:-11px;top:50%;transform:translateY(-50%) rotate(270deg)}:host([orientation=right]) #text{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}:host([orientation=right]) #arrow{top:50%;left:calc(100% + 2px);transform:translateY(-50%) rotate(90deg)}:host([inverted]:not([inverted=false])) #text{color:var(--sinch-color-text-inverted);background-color:var(--sinch-color-stormy-500)}:host([inverted]:not([inverted=false])) #arrow{fill:var(--sinch-color-stormy-500)}::slotted(*){display:block}</style><div id="wrapper"><slot></slot><div id="tooltip"><div id="text"></div><svg id="arrow" width="9" height="4"><path d="m4.5 4 4-4h-8l4 4Z"/></svg></div></div>';
+import { attrValueToPixels, defineCustomElement, getBooleanAttribute, getIntegerAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, getRect } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{position:relative;display:block}#tooltip{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:0%;transition:opacity .2s linear .2s}@media (prefers-reduced-motion){#tooltip{transition:none}}:host(:hover) #tooltip{opacity:100%}#text{position:absolute;padding:2px 6px;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-600);width:max-content;border-radius:2px;top:-8px;left:50%;transform:translateX(-50%) translateY(-100%)}#arrow{position:absolute;top:-8px;left:50%;transform:translateX(-50%);fill:var(--sinch-color-snow-600)}:host([orientation=top-left]) #text{transform:translateX(-80%) translateY(-100%)}:host([orientation=top-right]) #text{transform:translateX(-20%) translateY(-100%)}:host([orientation=bottom-right]) #text{top:calc(100% + 8px);transform:translateX(-20%)}:host([orientation=bottom-left]) #text{top:calc(100% + 8px);transform:translateX(-80%)}:host([orientation=bottom]) #text{top:calc(100% + 8px);transform:translateX(-50%)}:host([orientation^=bottom]) #arrow{top:calc(100% + 4px);transform:translateX(-50%) rotate(180deg)}:host([orientation=left]) #text{left:unset;right:calc(100% + 8px);top:50%;transform:translateY(-50%)}:host([orientation=left]) #arrow{left:-11px;top:50%;transform:translateY(-50%) rotate(270deg)}:host([orientation=right]) #text{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}:host([orientation=right]) #arrow{top:50%;left:calc(100% + 2px);transform:translateY(-50%) rotate(90deg)}:host([inverted]:not([inverted=false])) #text{color:var(--sinch-color-text-inverted);background-color:var(--sinch-color-stormy-500)}:host([inverted]:not([inverted=false])) #arrow{fill:var(--sinch-color-stormy-500)}::slotted(*){display:block}</style><div id="wrapper"><slot></slot><div id="tooltip"><div id="text"></div><svg id="arrow" width="9" height="4" aria-hidden="true"><path d="m4.5 4 4-4h-8l4 4Z"/></svg></div></div>';
 const orientationValues = ['top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'];
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -7,7 +7,7 @@ defineCustomElement('sinch-tooltip', class extends HTMLElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed'
+      mode: 'closed'
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.$tooltipText = shadowRoot.querySelector('#text');
@@ -49,6 +49,10 @@ defineCustomElement('sinch-tooltip', class extends HTMLElement {
     updateLiteralAttribute(this, orientationValues, 'orientation', value);
   }
 
+  get tooltipRect() {
+    return getRect(this.$tooltipText);
+  }
+
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'text':

package/types.d.ts

@@ -1,3 +1,10 @@
 import type { ClassAttributes, HTMLAttributes } from 'react'
 
 export type TSinchElementReact<TElementProperties> = Pick<HTMLAttributes<HTMLElement>, 'id' | 'className' | 'style' | 'slot' | 'children'> & ClassAttributes<TElementProperties> & { class?: string }
+
+export type TRect = {
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+}

package/utils.d.ts

@@ -1,3 +1,4 @@
+import type { TRect } from './types';
 export declare const defineCustomElement: (name: string, constructor: CustomElementConstructor) => void;
 export declare const defineNectaryElements: (registry: CustomElementRegistry) => void;
 export declare type TEventHandler = (arg?: any) => void;
@@ -28,4 +29,6 @@ export declare function getIntegerAttribute($element: Element, attrName: string,
 export declare const updateCSV: (acc: string, value: string, setActive: boolean) => string;
 export declare const getCSVSet: (acc: string) => Set<string>;
 export declare const getFirstCSValue: (acc: string) => string;
+export declare const getRect: (el: Element) => TRect;
+export declare const setClass: (elem: Element, name: string, isSet: boolean) => void;
 export {};

package/utils.js

@@ -143,4 +143,21 @@ export const getCSVSet = acc => {
 };
 export const getFirstCSValue = acc => {
   return acc.split(',')[0];
+};
+export const getRect = el => {
+  const {
+    x,
+    y,
+    width,
+    height
+  } = el.getBoundingClientRect();
+  return {
+    x,
+    y,
+    width,
+    height
+  };
+};
+export const setClass = (elem, name, isSet) => {
+  isSet ? elem.classList.add(name) : elem.classList.remove(name);
 };