@nectary/components 0.41.0 → 0.42.0

package/toggle/index.js

@@ -5,7 +5,6 @@ template.innerHTML = templateHTML;
 defineCustomElement('sinch-toggle', class extends NectaryElement {
   #$input;
   #$label;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -13,7 +12,6 @@ defineCustomElement('sinch-toggle', class extends NectaryElement {
     this.#$input = shadowRoot.querySelector('#input');
     this.#$label = shadowRoot.querySelector('#label');
   }
-
   connectedCallback() {
     this.setAttribute('role', 'checkbox');
     this.#$input.addEventListener('input', this.#onInput);
@@ -23,7 +21,6 @@ defineCustomElement('sinch-toggle', class extends NectaryElement {
     this.addEventListener('-focus', this.#onFocusReactHandler);
     this.addEventListener('-blur', this.#onBlurReactHandler);
   }
-
   disconnectedCallback() {
     this.#$input.removeEventListener('input', this.#onInput);
     this.#$input.removeEventListener('focus', this.#onCheckboxFocus);
@@ -32,59 +29,45 @@ defineCustomElement('sinch-toggle', class extends NectaryElement {
     this.removeEventListener('-focus', this.#onFocusReactHandler);
     this.removeEventListener('-blur', this.#onBlurReactHandler);
   }
-
   static get observedAttributes() {
     return ['checked', 'disabled', 'text'];
   }
-
   get type() {
     return 'text';
   }
-
   get nodeName() {
     return 'input';
   }
-
   set checked(isChecked) {
     updateBooleanAttribute(this, 'checked', isChecked);
   }
-
   get checked() {
     return getBooleanAttribute(this, 'checked');
   }
-
   set small(isSmall) {
     updateBooleanAttribute(this, 'small', isSmall);
   }
-
   get small() {
     return getBooleanAttribute(this, 'small');
   }
-
   set labeled(isLabeled) {
     updateBooleanAttribute(this, 'labeled', isLabeled);
   }
-
   get labeled() {
     return getBooleanAttribute(this, 'labeled');
   }
-
   set disabled(isDisabled) {
     updateBooleanAttribute(this, 'disabled', isDisabled);
   }
-
   get disabled() {
     return getBooleanAttribute(this, 'disabled');
   }
-
   set text(value) {
     updateAttribute(this, 'text', value);
   }
-
   get text() {
     return getAttribute(this, 'text');
   }
-
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'text':
@@ -92,7 +75,6 @@ defineCustomElement('sinch-toggle', class extends NectaryElement {
           this.#$label.textContent = newVal;
           break;
         }
-
       case 'checked':
         {
           const isChecked = isAttrTrue(newVal);
@@ -100,7 +82,6 @@ defineCustomElement('sinch-toggle', class extends NectaryElement {
           updateExplicitBooleanAttribute(this, 'aria-checked', isChecked);
           break;
         }
-
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
@@ -110,19 +91,15 @@ defineCustomElement('sinch-toggle', class extends NectaryElement {
         }
     }
   }
-
   get focusable() {
     return true;
   }
-
   focus() {
     this.#$input.focus();
   }
-
   blur() {
     this.#$input.blur();
   }
-
   #onInput = e => {
     e.stopPropagation();
     const isChecked = this.#$input.checked;

package/tooltip/index.js

@@ -21,7 +21,6 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
   #tooltipState;
   #animation = null;
   #shouldReduceMotion = false;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -42,7 +41,6 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
       onHideEnd: this.#onHideEnd
     });
   }
-
   connectedCallback() {
     this.#controller = new AbortController();
     const {
@@ -68,48 +66,37 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     });
     updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
   }
-
   disconnectedCallback() {
     this.#controller.abort();
     this.#tooltipState.destroy();
   }
-
   static get observedAttributes() {
     return ['text', 'orientation'];
   }
-
   get text() {
     return getAttribute(this, 'text', '');
   }
-
   set text(value) {
     updateAttribute(this, 'text', value);
   }
-
   get inverted() {
     return getBooleanAttribute(this, 'inverted');
   }
-
   set inverted(isInverted) {
     updateBooleanAttribute(this, 'inverted', isInverted);
   }
-
   get orientation() {
     return getLiteralAttribute(this, orientationValues, 'orientation', 'top');
   }
-
   set orientation(value) {
     updateLiteralAttribute(this, orientationValues, 'orientation', value);
   }
-
   get footprintRect() {
     return this.#$pop.footprintRect;
   }
-
   get tooltipRect() {
     return this.#$pop.popoverRect;
   }
-
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'text':
@@ -117,22 +104,18 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
           this.#$tooltipText.textContent = newVal;
           break;
         }
-
       case 'orientation':
         {
           assertOrientation(newVal);
           updateAttribute(this.#$pop, 'orientation', getPopOrientation(newVal));
-
           if (this.#isOpen()) {
             this.#resetTipOrientation();
             this.#updateTipOrientation();
           }
-
           break;
         }
     }
   }
-
   #onMouseDown = () => {
     this.#tooltipState.interrupt();
   };
@@ -150,7 +133,6 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
   #onShow = () => {
     updateBooleanAttribute(this.#$pop, 'open', true);
     requestAnimationFrame(this.#updateTipOrientation);
-
     if (this.#animation !== null) {
       this.#animation.updatePlaybackRate(1);
       this.#animation.play();
@@ -173,41 +155,32 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     this.#resetTipOrientation();
     updateBooleanAttribute(this.#$pop, 'open', false);
   };
-
   #resetTipOrientation() {
     this.#$tip.style.top = '';
     this.#$tip.style.left = '';
   }
-
   #updateTipOrientation = () => {
     const orient = this.orientation;
     const targetRect = this.#$pop.footprintRect;
     const contentRect = this.#$content.getBoundingClientRect();
     const diffX = targetRect.x - contentRect.x;
     const diffY = targetRect.y - contentRect.y;
-
     if (orient === 'left' || orient === 'right') {
       const yPos = Math.max(TIP_SIZE, Math.min(diffY + targetRect.height / 2, contentRect.height - TIP_SIZE));
       this.#$tip.style.top = `${yPos}px`;
     } else {
       let xPos = Math.max(TIP_SIZE, Math.min(diffX + targetRect.width / 2, contentRect.width - TIP_SIZE));
-
       if (orient === 'bottom-left' || orient === 'top-left') {
         xPos = Math.max(xPos, contentRect.width * 0.75);
       }
-
       if (orient === 'bottom-right' || orient === 'top-right') {
         xPos = Math.min(xPos, contentRect.width * 0.25);
       }
-
       this.#$tip.style.left = `${xPos}px`;
     }
-
     setClass(this.#$tip, 'hidden', rectOverlap(targetRect, contentRect));
   };
-
   #isOpen() {
     return this.#$pop.hasAttribute('open');
   }
-
 });

package/tooltip/utils.js

@@ -3,19 +3,15 @@ export const getPopOrientation = orientation => {
   if (orientation === 'top') {
     return 'top-center';
   }
-
   if (orientation === 'bottom') {
     return 'bottom-center';
   }
-
   if (orientation === 'left') {
     return 'center-left';
   }
-
   if (orientation === 'right') {
     return 'center-right';
   }
-
   return orientation;
 };
 export const assertOrientation = value => {

package/utils/animation.js

@@ -2,11 +2,9 @@ export class TooltipState {
   #timerId = null;
   #state = 'initial';
   #options;
-
   constructor(options) {
     this.#options = options;
   }
-
   show() {
     switch (this.#state) {
       case 'initial':
@@ -14,13 +12,11 @@ export class TooltipState {
           this.#delayShow();
           break;
         }
-
       case 'hide-delay':
         {
           this.#cancelStateChange('show');
           break;
         }
-
       case 'hide':
         {
           this.#cancelStateChange();
@@ -29,7 +25,6 @@ export class TooltipState {
         }
     }
   }
-
   hide() {
     switch (this.#state) {
       case 'show-delay':
@@ -37,7 +32,6 @@ export class TooltipState {
           this.#cancelStateChange('initial');
           break;
         }
-
       case 'show':
         {
           this.#delayHide();
@@ -45,7 +39,6 @@ export class TooltipState {
         }
     }
   }
-
   interrupt() {
     switch (this.#state) {
       case 'show-delay':
@@ -53,13 +46,11 @@ export class TooltipState {
           this.#cancelStateChange('initial');
           break;
         }
-
       case 'show':
         {
           this.#onHideStart();
           break;
         }
-
       case 'hide-delay':
         {
           this.#cancelStateChange();
@@ -68,7 +59,6 @@ export class TooltipState {
         }
     }
   }
-
   destroy() {
     switch (this.#state) {
       case 'show-delay':
@@ -76,20 +66,17 @@ export class TooltipState {
           this.#cancelStateChange('initial');
           break;
         }
-
       case 'show':
         {
           this.#onHideStart(true);
           break;
         }
-
       case 'hide-delay':
         {
           this.#cancelStateChange();
           this.#onHideStart(true);
           break;
         }
-
       case 'hide':
         {
           this.#cancelStateChange();
@@ -98,17 +85,14 @@ export class TooltipState {
         }
     }
   }
-
   #delayShow() {
     this.#state = 'show-delay';
     this.#timerId = window.setTimeout(this.#onShow, this.#options.showDelay);
   }
-
   #delayHide() {
     this.#state = 'hide-delay';
     this.#timerId = window.setTimeout(this.#onHideStart, this.#options.hideDelay);
   }
-
   #onShow = () => {
     this.#state = 'show';
     this.#options.onShow();
@@ -116,7 +100,6 @@ export class TooltipState {
   #onHideStart = isImmediate => {
     this.#state = 'hide';
     this.#options.onHideStart();
-
     if (isImmediate === true || this.#options.hideAnimationDuration === 0) {
       this.#onHideEnd();
     } else {
@@ -127,16 +110,13 @@ export class TooltipState {
     this.#state = 'initial';
     this.#options.onHideEnd();
   };
-
   #cancelStateChange(nextState) {
     if (nextState != null) {
       this.#state = nextState;
     }
-
     if (this.#timerId !== null) {
       clearTimeout(this.#timerId);
       this.#timerId = null;
     }
   }
-
 }

package/utils/context.js

@@ -3,33 +3,27 @@ export class Context {
   #listeners = new Set();
   #name;
   #isSubscribed = false;
-
   constructor($element, name) {
     this.#$root = $element;
     this.#name = name;
   }
-
   get elements() {
     return this.#listeners;
   }
-
   subscribe() {
     if (this.#isSubscribed) {
       return;
     }
-
     this.#$root.addEventListener(`-context-connect-${this.#name}`, this.#onConnect);
     this.#$root.addEventListener(`-context-disconnect-${this.#name}`, this.#onDisconnect);
     this.#isSubscribed = true;
   }
-
   unsubscribe() {
     this.#listeners.clear();
     this.#$root.removeEventListener(`-context-connect-${this.#name}`, this.#onConnect);
     this.#$root.removeEventListener(`-context-disconnect-${this.#name}`, this.#onDisconnect);
     this.#isSubscribed = false;
   }
-
   #onConnect = e => {
     e.stopPropagation();
     this.#listeners.add(e.detail);

package/utils/index.d.ts

@@ -53,4 +53,5 @@ export declare const getFirstFocusableElement: (root: Element) => NectaryElement
 export declare const cloneNode: (el: Element, deep: boolean) => Element;
 export declare const isElementFocused: ($el: Element | null) => boolean;
 export declare const rectOverlap: (targetRect: TRect, contentRect: TRect) => boolean;
+export declare const getTargetRect: (slot: HTMLSlotElement) => TRect | null;
 export {};