🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Sign inDemoInstall
Socket

@spectrum-web-components/reactive-controllers

Package Overview
Dependencies
Maintainers
13
Versions
260
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@spectrum-web-components/reactive-controllers - npm Package Compare versions

Comparing version

to
0.0.0-20250327111926

src/ColorController.d.ts

13

package.json
{
"name": "@spectrum-web-components/reactive-controllers",
"version": "0.0.0-20250211061642",
"version": "0.0.0-20250327111926",
"publishConfig": {

@@ -28,5 +28,5 @@ "access": "public"

"./package.json": "./package.json",
"./src/Color.js": {
"development": "./src/Color.dev.js",
"default": "./src/Color.js"
"./src/ColorController.js": {
"development": "./src/ColorController.dev.js",
"default": "./src/ColorController.js"
},

@@ -88,4 +88,5 @@ "./src/DependencyManger.js": {

"dependencies": {
"@spectrum-web-components/progress-circle": "0.0.0-20250211061642",
"lit": "^3.1.3"
"@spectrum-web-components/progress-circle": "0.0.0-20250327111926",
"colorjs.io": "^0.5.2",
"lit": "^2.5.0 || ^3.1.3"
},

@@ -92,0 +93,0 @@ "types": "./src/index.d.ts",

@@ -7,3 +7,3 @@ ## Description

- ColorController
- [ColorController](../color-controller)
- [ElementResolutionController](../element-resolution)

@@ -10,0 +10,0 @@ - FocusGroupController

import type { ReactiveController, ReactiveElement } from 'lit';
type DirectionTypes = 'horizontal' | 'vertical' | 'both' | 'grid';
export type FocusGroupConfig<T> = {
hostDelegatesFocus?: boolean;
focusInIndex?: (_elements: T[]) => number;

@@ -21,2 +22,3 @@ direction?: DirectionTypes | (() => DirectionTypes);

directionLength: number;
hostDelegatesFocus: boolean;
elementEnterAction: (_el: T) => void;

@@ -37,5 +39,10 @@ get elements(): T[];

recentlyConnected: boolean;
constructor(host: ReactiveElement, { direction, elementEnterAction, elements, focusInIndex, isFocusableElement, listenerScope, }?: FocusGroupConfig<T>);
constructor(host: ReactiveElement, { hostDelegatesFocus, direction, elementEnterAction, elements, focusInIndex, isFocusableElement, listenerScope, }?: FocusGroupConfig<T>);
handleItemMutation(): void;
update({ elements }?: FocusGroupConfig<T>): void;
/**
* resets the focusedItem to initial item
*/
reset(): void;
focusOnItem(item?: T, options?: FocusOptions): void;
focus(options?: FocusOptions): void;

@@ -54,3 +61,3 @@ clearElementCache(offset?: number): void;

handleFocusout: (event: FocusEvent) => void;
acceptsEventCode(code: string): boolean;
acceptsEventKey(key: string): boolean;
handleKeydown: (event: KeyboardEvent) => void;

@@ -57,0 +64,0 @@ manage(): void;

@@ -12,2 +12,3 @@ "use strict";

constructor(host, {
hostDelegatesFocus,
direction,

@@ -24,2 +25,3 @@ elementEnterAction,

this.directionLength = 5;
this.hostDelegatesFocus = false;
this.elementEnterAction = (_el) => {

@@ -79,3 +81,3 @@ return;

this.handleKeydown = (event) => {
if (!this.acceptsEventCode(event.code) || event.defaultPrevented) {
if (!this.acceptsEventKey(event.key) || event.defaultPrevented) {
return;

@@ -85,3 +87,3 @@ }

this.prevIndex = this.currentIndex;
switch (event.code) {
switch (event.key) {
case "ArrowRight":

@@ -122,2 +124,3 @@ diff += 1;

});
this.hostDelegatesFocus = hostDelegatesFocus || false;
this.host = host;

@@ -202,2 +205,32 @@ this.host.addController(this);

}
/**
* resets the focusedItem to initial item
*/
reset() {
var _a;
const elements = this.elements;
if (!elements.length) return;
this.setCurrentIndexCircularly(this.focusInIndex - this.currentIndex);
let focusElement = elements[this.currentIndex];
if (this.currentIndex < 0) {
return;
}
if (!focusElement || !this.isFocusableElement(focusElement)) {
this.setCurrentIndexCircularly(1);
focusElement = elements[this.currentIndex];
}
if (focusElement && this.isFocusableElement(focusElement)) {
(_a = elements[this.prevIndex]) == null ? void 0 : _a.setAttribute("tabindex", "-1");
focusElement.setAttribute("tabindex", "0");
}
}
focusOnItem(item, options) {
var _a;
if (item && this.isFocusableElement(item) && this.elements.indexOf(item)) {
const diff = this.elements.indexOf(item) - this.currentIndex;
this.setCurrentIndexCircularly(diff);
(_a = this.elements[this.prevIndex]) == null ? void 0 : _a.setAttribute("tabindex", "-1");
}
this.focus(options);
}
focus(options) {

@@ -213,5 +246,10 @@ var _a;

if (focusElement && this.isFocusableElement(focusElement)) {
(_a = elements[this.prevIndex]) == null ? void 0 : _a.setAttribute("tabindex", "-1");
if (!this.hostDelegatesFocus || elements[this.prevIndex] !== focusElement) {
(_a = elements[this.prevIndex]) == null ? void 0 : _a.setAttribute("tabindex", "-1");
}
focusElement.tabIndex = 0;
focusElement.focus(options);
if (this.hostDelegatesFocus && !this.focused) {
this.hostContainsFocus();
}
}

@@ -266,4 +304,4 @@ }

}
acceptsEventCode(code) {
if (code === "End" || code === "Home") {
acceptsEventKey(key) {
if (key === "End" || key === "Home") {
return true;

@@ -273,8 +311,8 @@ }

case "horizontal":
return code === "ArrowLeft" || code === "ArrowRight";
return key === "ArrowLeft" || key === "ArrowRight";
case "vertical":
return code === "ArrowUp" || code === "ArrowDown";
return key === "ArrowUp" || key === "ArrowDown";
case "both":
case "grid":
return code.startsWith("Arrow");
return key.startsWith("Arrow");
}

@@ -281,0 +319,0 @@ }

@@ -1,2 +0,2 @@

"use strict";function o(i,e,t){return typeof i===e?()=>i:typeof i=="function"?i:t}export class FocusGroupController{constructor(e,{direction:t,elementEnterAction:n,elements:s,focusInIndex:r,isFocusableElement:h,listenerScope:c}={elements:()=>[]}){this._currentIndex=-1;this.prevIndex=-1;this._direction=()=>"both";this.directionLength=5;this.elementEnterAction=e=>{};this._focused=!1;this._focusInIndex=e=>0;this.isFocusableElement=e=>!0;this._listenerScope=()=>this.host;this.offset=0;this.recentlyConnected=!1;this.handleFocusin=e=>{if(!this.isEventWithinListenerScope(e))return;const t=e.composedPath();let n=-1;t.find(s=>(n=this.elements.indexOf(s),n!==-1)),this.prevIndex=this.currentIndex,this.currentIndex=n>-1?n:this.currentIndex,this.isRelatedTargetOrContainAnElement(e)&&this.hostContainsFocus()};this.handleClick=()=>{var n;const e=this.elements;if(!e.length)return;let t=e[this.currentIndex];this.currentIndex<0||((!t||!this.isFocusableElement(t))&&(this.setCurrentIndexCircularly(1),t=e[this.currentIndex]),t&&this.isFocusableElement(t)&&((n=e[this.prevIndex])==null||n.setAttribute("tabindex","-1"),t.setAttribute("tabindex","0")))};this.handleFocusout=e=>{this.isRelatedTargetOrContainAnElement(e)&&this.hostNoLongerContainsFocus()};this.handleKeydown=e=>{if(!this.acceptsEventCode(e.code)||e.defaultPrevented)return;let t=0;switch(this.prevIndex=this.currentIndex,e.code){case"ArrowRight":t+=1;break;case"ArrowDown":t+=this.direction==="grid"?this.directionLength:1;break;case"ArrowLeft":t-=1;break;case"ArrowUp":t-=this.direction==="grid"?this.directionLength:1;break;case"End":this.currentIndex=0,t-=1;break;case"Home":this.currentIndex=this.elements.length-1,t+=1;break}e.preventDefault(),this.direction==="grid"&&this.currentIndex+t<0?this.currentIndex=0:this.direction==="grid"&&this.currentIndex+t>this.elements.length-1?this.currentIndex=this.elements.length-1:this.setCurrentIndexCircularly(t),this.elementEnterAction(this.elements[this.currentIndex]),this.focus()};this.mutationObserver=new MutationObserver(()=>{this.handleItemMutation()}),this.host=e,this.host.addController(this),this._elements=s,this.isFocusableElement=h||this.isFocusableElement,this._direction=o(t,"string",this._direction),this.elementEnterAction=n||this.elementEnterAction,this._focusInIndex=o(r,"number",this._focusInIndex),this._listenerScope=o(c,"object",this._listenerScope)}get currentIndex(){return this._currentIndex===-1&&(this._currentIndex=this.focusInIndex),this._currentIndex-this.offset}set currentIndex(e){this._currentIndex=e+this.offset}get direction(){return this._direction()}get elements(){return this.cachedElements||(this.cachedElements=this._elements()),this.cachedElements}set focused(e){e!==this.focused&&(this._focused=e)}get focused(){return this._focused}get focusInElement(){return this.elements[this.focusInIndex]}get focusInIndex(){return this._focusInIndex(this.elements)}isEventWithinListenerScope(e){return this._listenerScope()===this.host?!0:e.composedPath().includes(this._listenerScope())}handleItemMutation(){if(this._currentIndex==-1||this.elements.length<=this._elements().length)return;const e=this.elements[this.currentIndex];if(this.clearElementCache(),this.elements.includes(e))return;const t=this.currentIndex!==this.elements.length,n=t?1:-1;t&&this.setCurrentIndexCircularly(-1),this.setCurrentIndexCircularly(n),this.focus()}update({elements:e}={elements:()=>[]}){this.unmanage(),this._elements=e,this.clearElementCache(),this.manage()}focus(e){var s;const t=this.elements;if(!t.length)return;let n=t[this.currentIndex];(!n||!this.isFocusableElement(n))&&(this.setCurrentIndexCircularly(1),n=t[this.currentIndex]),n&&this.isFocusableElement(n)&&((s=t[this.prevIndex])==null||s.setAttribute("tabindex","-1"),n.tabIndex=0,n.focus(e))}clearElementCache(e=0){this.mutationObserver.disconnect(),delete this.cachedElements,this.offset=e,requestAnimationFrame(()=>{this.elements.forEach(t=>{this.mutationObserver.observe(t,{attributes:!0})})})}setCurrentIndexCircularly(e){const{length:t}=this.elements;let n=t;this.prevIndex=this.currentIndex;let s=(t+this.currentIndex+e)%t;for(;n&&this.elements[s]&&!this.isFocusableElement(this.elements[s]);)s=(t+s+e)%t,n-=1;this.currentIndex=s}hostContainsFocus(){this.host.addEventListener("focusout",this.handleFocusout),this.host.addEventListener("keydown",this.handleKeydown),this.focused=!0}hostNoLongerContainsFocus(){this.host.addEventListener("focusin",this.handleFocusin),this.host.removeEventListener("focusout",this.handleFocusout),this.host.removeEventListener("keydown",this.handleKeydown),this.focused=!1}isRelatedTargetOrContainAnElement(e){const t=e.relatedTarget,n=this.elements.includes(t),s=this.elements.some(r=>r.contains(t));return!(n||s)}acceptsEventCode(e){if(e==="End"||e==="Home")return!0;switch(this.direction){case"horizontal":return e==="ArrowLeft"||e==="ArrowRight";case"vertical":return e==="ArrowUp"||e==="ArrowDown";case"both":case"grid":return e.startsWith("Arrow")}}manage(){this.addEventListeners()}unmanage(){this.removeEventListeners()}addEventListeners(){this.host.addEventListener("focusin",this.handleFocusin),this.host.addEventListener("click",this.handleClick)}removeEventListeners(){this.host.removeEventListener("focusin",this.handleFocusin),this.host.removeEventListener("focusout",this.handleFocusout),this.host.removeEventListener("keydown",this.handleKeydown),this.host.removeEventListener("click",this.handleClick)}hostConnected(){this.recentlyConnected=!0,this.addEventListeners()}hostDisconnected(){this.mutationObserver.disconnect(),this.removeEventListeners()}hostUpdated(){this.recentlyConnected&&(this.recentlyConnected=!1,this.elements.forEach(e=>{this.mutationObserver.observe(e,{attributes:!0})}))}}
"use strict";function o(i,e,t){return typeof i===e?()=>i:typeof i=="function"?i:t}export class FocusGroupController{constructor(e,{hostDelegatesFocus:t,direction:n,elementEnterAction:s,elements:r,focusInIndex:h,isFocusableElement:c,listenerScope:l}={elements:()=>[]}){this._currentIndex=-1;this.prevIndex=-1;this._direction=()=>"both";this.directionLength=5;this.hostDelegatesFocus=!1;this.elementEnterAction=e=>{};this._focused=!1;this._focusInIndex=e=>0;this.isFocusableElement=e=>!0;this._listenerScope=()=>this.host;this.offset=0;this.recentlyConnected=!1;this.handleFocusin=e=>{if(!this.isEventWithinListenerScope(e))return;const t=e.composedPath();let n=-1;t.find(s=>(n=this.elements.indexOf(s),n!==-1)),this.prevIndex=this.currentIndex,this.currentIndex=n>-1?n:this.currentIndex,this.isRelatedTargetOrContainAnElement(e)&&this.hostContainsFocus()};this.handleClick=()=>{var n;const e=this.elements;if(!e.length)return;let t=e[this.currentIndex];this.currentIndex<0||((!t||!this.isFocusableElement(t))&&(this.setCurrentIndexCircularly(1),t=e[this.currentIndex]),t&&this.isFocusableElement(t)&&((n=e[this.prevIndex])==null||n.setAttribute("tabindex","-1"),t.setAttribute("tabindex","0")))};this.handleFocusout=e=>{this.isRelatedTargetOrContainAnElement(e)&&this.hostNoLongerContainsFocus()};this.handleKeydown=e=>{if(!this.acceptsEventKey(e.key)||e.defaultPrevented)return;let t=0;switch(this.prevIndex=this.currentIndex,e.key){case"ArrowRight":t+=1;break;case"ArrowDown":t+=this.direction==="grid"?this.directionLength:1;break;case"ArrowLeft":t-=1;break;case"ArrowUp":t-=this.direction==="grid"?this.directionLength:1;break;case"End":this.currentIndex=0,t-=1;break;case"Home":this.currentIndex=this.elements.length-1,t+=1;break}e.preventDefault(),this.direction==="grid"&&this.currentIndex+t<0?this.currentIndex=0:this.direction==="grid"&&this.currentIndex+t>this.elements.length-1?this.currentIndex=this.elements.length-1:this.setCurrentIndexCircularly(t),this.elementEnterAction(this.elements[this.currentIndex]),this.focus()};this.mutationObserver=new MutationObserver(()=>{this.handleItemMutation()}),this.hostDelegatesFocus=t||!1,this.host=e,this.host.addController(this),this._elements=r,this.isFocusableElement=c||this.isFocusableElement,this._direction=o(n,"string",this._direction),this.elementEnterAction=s||this.elementEnterAction,this._focusInIndex=o(h,"number",this._focusInIndex),this._listenerScope=o(l,"object",this._listenerScope)}get currentIndex(){return this._currentIndex===-1&&(this._currentIndex=this.focusInIndex),this._currentIndex-this.offset}set currentIndex(e){this._currentIndex=e+this.offset}get direction(){return this._direction()}get elements(){return this.cachedElements||(this.cachedElements=this._elements()),this.cachedElements}set focused(e){e!==this.focused&&(this._focused=e)}get focused(){return this._focused}get focusInElement(){return this.elements[this.focusInIndex]}get focusInIndex(){return this._focusInIndex(this.elements)}isEventWithinListenerScope(e){return this._listenerScope()===this.host?!0:e.composedPath().includes(this._listenerScope())}handleItemMutation(){if(this._currentIndex==-1||this.elements.length<=this._elements().length)return;const e=this.elements[this.currentIndex];if(this.clearElementCache(),this.elements.includes(e))return;const t=this.currentIndex!==this.elements.length,n=t?1:-1;t&&this.setCurrentIndexCircularly(-1),this.setCurrentIndexCircularly(n),this.focus()}update({elements:e}={elements:()=>[]}){this.unmanage(),this._elements=e,this.clearElementCache(),this.manage()}reset(){var n;const e=this.elements;if(!e.length)return;this.setCurrentIndexCircularly(this.focusInIndex-this.currentIndex);let t=e[this.currentIndex];this.currentIndex<0||((!t||!this.isFocusableElement(t))&&(this.setCurrentIndexCircularly(1),t=e[this.currentIndex]),t&&this.isFocusableElement(t)&&((n=e[this.prevIndex])==null||n.setAttribute("tabindex","-1"),t.setAttribute("tabindex","0")))}focusOnItem(e,t){var n;if(e&&this.isFocusableElement(e)&&this.elements.indexOf(e)){const s=this.elements.indexOf(e)-this.currentIndex;this.setCurrentIndexCircularly(s),(n=this.elements[this.prevIndex])==null||n.setAttribute("tabindex","-1")}this.focus(t)}focus(e){var s;const t=this.elements;if(!t.length)return;let n=t[this.currentIndex];(!n||!this.isFocusableElement(n))&&(this.setCurrentIndexCircularly(1),n=t[this.currentIndex]),n&&this.isFocusableElement(n)&&((!this.hostDelegatesFocus||t[this.prevIndex]!==n)&&((s=t[this.prevIndex])==null||s.setAttribute("tabindex","-1")),n.tabIndex=0,n.focus(e),this.hostDelegatesFocus&&!this.focused&&this.hostContainsFocus())}clearElementCache(e=0){this.mutationObserver.disconnect(),delete this.cachedElements,this.offset=e,requestAnimationFrame(()=>{this.elements.forEach(t=>{this.mutationObserver.observe(t,{attributes:!0})})})}setCurrentIndexCircularly(e){const{length:t}=this.elements;let n=t;this.prevIndex=this.currentIndex;let s=(t+this.currentIndex+e)%t;for(;n&&this.elements[s]&&!this.isFocusableElement(this.elements[s]);)s=(t+s+e)%t,n-=1;this.currentIndex=s}hostContainsFocus(){this.host.addEventListener("focusout",this.handleFocusout),this.host.addEventListener("keydown",this.handleKeydown),this.focused=!0}hostNoLongerContainsFocus(){this.host.addEventListener("focusin",this.handleFocusin),this.host.removeEventListener("focusout",this.handleFocusout),this.host.removeEventListener("keydown",this.handleKeydown),this.focused=!1}isRelatedTargetOrContainAnElement(e){const t=e.relatedTarget,n=this.elements.includes(t),s=this.elements.some(r=>r.contains(t));return!(n||s)}acceptsEventKey(e){if(e==="End"||e==="Home")return!0;switch(this.direction){case"horizontal":return e==="ArrowLeft"||e==="ArrowRight";case"vertical":return e==="ArrowUp"||e==="ArrowDown";case"both":case"grid":return e.startsWith("Arrow")}}manage(){this.addEventListeners()}unmanage(){this.removeEventListeners()}addEventListeners(){this.host.addEventListener("focusin",this.handleFocusin),this.host.addEventListener("click",this.handleClick)}removeEventListeners(){this.host.removeEventListener("focusin",this.handleFocusin),this.host.removeEventListener("focusout",this.handleFocusout),this.host.removeEventListener("keydown",this.handleKeydown),this.host.removeEventListener("click",this.handleClick)}hostConnected(){this.recentlyConnected=!0,this.addEventListeners()}hostDisconnected(){this.mutationObserver.disconnect(),this.removeEventListeners()}hostUpdated(){this.recentlyConnected&&(this.recentlyConnected=!1,this.elements.forEach(e=>{this.mutationObserver.observe(e,{attributes:!0})}))}}
//# sourceMappingURL=FocusGroup.js.map

@@ -26,3 +26,3 @@ "use strict";

manageTabindexes() {
if (this.focused) {
if (this.focused && !this.hostDelegatesFocus) {
this.updateTabindexes(() => ({ tabIndex: -1 }));

@@ -51,3 +51,2 @@ } else {

}
el.removeAttribute("tabindex");
const updatable = el;

@@ -54,0 +53,0 @@ if (updatable.requestUpdate) updatable.requestUpdate();

@@ -1,2 +0,2 @@

"use strict";import{FocusGroupController as i}from"./FocusGroup.js";export class RovingTabindexController extends i{constructor(){super(...arguments);this.managed=!0;this.manageIndexesAnimationFrame=0}set focused(e){e!==this.focused&&(super.focused=e,this.manageTabindexes())}get focused(){return super.focused}clearElementCache(e=0){cancelAnimationFrame(this.manageIndexesAnimationFrame),super.clearElementCache(e),this.managed&&(this.manageIndexesAnimationFrame=requestAnimationFrame(()=>this.manageTabindexes()))}manageTabindexes(){this.focused?this.updateTabindexes(()=>({tabIndex:-1})):this.updateTabindexes(e=>({removeTabIndex:e.contains(this.focusInElement)&&e!==this.focusInElement,tabIndex:e===this.focusInElement?0:-1}))}updateTabindexes(e){this.elements.forEach(a=>{const{tabIndex:n,removeTabIndex:s}=e(a);if(!s){this.focused?a!==this.elements[this.currentIndex]&&(a.tabIndex=n):a.tabIndex=n;return}a.removeAttribute("tabindex");const t=a;t.requestUpdate&&t.requestUpdate()})}manage(){this.managed=!0,this.manageTabindexes(),super.manage()}unmanage(){this.managed=!1,this.updateTabindexes(()=>({tabIndex:0})),super.unmanage()}hostUpdated(){super.hostUpdated(),this.host.hasUpdated||this.manageTabindexes()}}
"use strict";import{FocusGroupController as i}from"./FocusGroup.js";export class RovingTabindexController extends i{constructor(){super(...arguments);this.managed=!0;this.manageIndexesAnimationFrame=0}set focused(e){e!==this.focused&&(super.focused=e,this.manageTabindexes())}get focused(){return super.focused}clearElementCache(e=0){cancelAnimationFrame(this.manageIndexesAnimationFrame),super.clearElementCache(e),this.managed&&(this.manageIndexesAnimationFrame=requestAnimationFrame(()=>this.manageTabindexes()))}manageTabindexes(){this.focused&&!this.hostDelegatesFocus?this.updateTabindexes(()=>({tabIndex:-1})):this.updateTabindexes(e=>({removeTabIndex:e.contains(this.focusInElement)&&e!==this.focusInElement,tabIndex:e===this.focusInElement?0:-1}))}updateTabindexes(e){this.elements.forEach(a=>{const{tabIndex:n,removeTabIndex:s}=e(a);if(!s){this.focused?a!==this.elements[this.currentIndex]&&(a.tabIndex=n):a.tabIndex=n;return}const t=a;t.requestUpdate&&t.requestUpdate()})}manage(){this.managed=!0,this.manageTabindexes(),super.manage()}unmanage(){this.managed=!1,this.updateTabindexes(()=>({tabIndex:0})),super.unmanage()}hostUpdated(){super.hostUpdated(),this.host.hasUpdated||this.manageTabindexes()}}
//# sourceMappingURL=RovingTabindex.js.map

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet