@nectary/components 0.34.0 → 0.35.0

package/time-picker/types.d.ts

@@ -11,7 +11,7 @@ export declare type TSinchTimePickerElement = HTMLElement & {
     hourDigitRect(hour: number): TRect | null;
     minuteDigitRect(minute: number): TRect | null;
     /** Change value handler, return time in ISO 8601 format */
-    addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
+    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
     /** Time value in ISO 8601 format */
     setAttribute(name: 'value', value: string): void;
     /** AM/PM 12-hour clock system, `false` by default */
@@ -27,5 +27,7 @@ export declare type TSinchTimePickerReact = TSinchElementReact<TSinchTimePickerE
     /** Submit button label that is used for a11y */
     'submit-aria-label': string;
     /** Change value handler, return time in ISO 8601 format */
-    onChange: (e: SyntheticEvent<TSinchTimePickerElement, CustomEvent<string>>) => void;
+    onChange?: (e: SyntheticEvent<TSinchTimePickerElement, CustomEvent<string>>) => void;
+    /** Change value handler, return time in ISO 8601 format */
+    'on-change'?: (e: CustomEvent<string>) => void;
 };

package/toggle/index.js

@@ -1,17 +1,17 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$input, _$label, _onInput;
+var _$input, _$label, _onInput, _onCheckboxFocus, _onCheckboxBlur, _onChangeReactHandler, _onFocusReactHandler, _onBlurReactHandler;
 
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
-import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;height:32px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);text-align:initial}:host([small]:not([small=false])) #wrapper{font:var(--sinch-font-small-text)}#checkbox{all:initial;display:block;position:absolute;left:0;top:0;width:40px;height:20px;cursor:pointer;pointer-events:initial}#checkbox:disabled{cursor:initial}#knob-container{position:relative;box-sizing:border-box;align-self:center;width:40px;height:20px;border-radius:10px;pointer-events:none;padding:2px;background-color:var(--sinch-color-stormy-100);box-shadow:var(--sinch-elevation-level-1);overflow:hidden}:host([checked]:not([checked=false])) #knob-container{background-color:var(--sinch-color-tropical-500)}:host([small]:not([small=false])) #knob-container{width:32px;height:16px;border-radius:8px}#knob{position:relative;box-sizing:border-box;width:16px;height:16px;border-radius:50%;background-color:var(--sinch-color-snow-100);transform:translateX(0);transition:transform .1s ease-in-out}:host([checked]:not([checked=false])) #knob{transform:translateX(20px)}:host([small]:not([small=false])) #knob{width:12px;height:12px}:host([small]:not([small=false])[checked]:not([checked=false])) #knob{transform:translateX(16px)}#knob::after,#knob::before{color:var(--sinch-color-snow-100);text-transform:uppercase;font-size:8px;line-height:16px;display:none;position:absolute;top:0;padding:0 3px}#knob::before{content:"on";right:100%}#knob::after{content:"off";left:100%}:host([labeled]:not([labeled=false]):is(:not([small]),[small=false])) #knob::after,:host([labeled]:not([labeled=false]):is(:not([small]),[small=false])) #knob::before{display:block}@media (prefers-reduced-motion){#knob{transition:none}}#label{display:none;flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px}:host([text]:not([text=""])) #label{display:block}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-stormy-200)}:host([disabled]:not([disabled=false])) #knob-container{background-color:var(--sinch-color-snow-700)}:host([checked]:not([checked=false])[disabled]:not([disabled=false])) #knob-container{background-color:var(--sinch-color-tropical-100)}</style><div id="wrapper"><div id="knob-container"><div id="knob"></div><input id="checkbox" type="checkbox"></div><label for="checkbox" id="label"></label></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-toggle', (_$input = new WeakMap(), _$label = new WeakMap(), _onInput = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-toggle', (_$input = new WeakMap(), _$label = new WeakMap(), _onInput = new WeakMap(), _onCheckboxFocus = new WeakMap(), _onCheckboxBlur = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -37,6 +37,44 @@ defineCustomElement('sinch-toggle', (_$input = new WeakMap(), _$label = new Weak
           detail: isChecked,
           bubbles: true
         }));
+        this.dispatchEvent(new CustomEvent('-change', {
+          detail: isChecked
+        }));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onCheckboxFocus, {
+      writable: true,
+      value: () => {
+        this.dispatchEvent(new CustomEvent('-focus'));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onCheckboxBlur, {
+      writable: true,
+      value: () => {
+        this.dispatchEvent(new CustomEvent('-blur'));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-change')?.(e);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onFocusReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-focus')?.(e);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onBlurReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-blur')?.(e);
       }
     });
 
@@ -46,13 +84,33 @@ defineCustomElement('sinch-toggle', (_$input = new WeakMap(), _$label = new Weak
     _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('input'));
 
     _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('label'));
-
-    _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
   }
 
   connectedCallback() {
     this.setAttribute('role', 'checkbox');
     this.setAttribute('aria-label', 'toggle');
+
+    _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
+
+    _classPrivateFieldGet(this, _$input).addEventListener('focus', _classPrivateFieldGet(this, _onCheckboxFocus));
+
+    _classPrivateFieldGet(this, _$input).addEventListener('blur', _classPrivateFieldGet(this, _onCheckboxBlur));
+
+    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.addEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
+    this.addEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$input).removeEventListener('input', _classPrivateFieldGet(this, _onInput));
+
+    _classPrivateFieldGet(this, _$input).removeEventListener('focus', _classPrivateFieldGet(this, _onCheckboxFocus));
+
+    _classPrivateFieldGet(this, _$input).removeEventListener('blur', _classPrivateFieldGet(this, _onCheckboxBlur));
+
+    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.removeEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
+    this.removeEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
   }
 
   static get observedAttributes() {

package/toggle/types.d.ts

@@ -7,6 +7,7 @@ export declare type TSinchToggleElement = HTMLElement & {
     disabled: boolean;
     text: string | null;
     addEventListener(type: 'change', listener: (e: CustomEvent<boolean>) => void): void;
+    addEventListener(type: '-change', listener: (e: CustomEvent<boolean>) => void): void;
     setAttribute(name: 'checked', value: ''): void;
     setAttribute(name: 'small', value: ''): void;
     setAttribute(name: 'labeled', value: ''): void;
@@ -20,5 +21,6 @@ export declare type TSinchToggleReact = TSinchElementReact<TSinchToggleElement>
     disabled?: boolean;
     text?: string;
     'aria-label': string;
-    onChange: (e: SyntheticEvent<TSinchToggleElement, CustomEvent<boolean>>) => void;
+    onChange?: (e: SyntheticEvent<TSinchToggleElement, CustomEvent<boolean>>) => void;
+    'on-change'?: (e: CustomEvent<boolean>) => void;
 };