@sandlada/mdc/build/components/focus-ring/focus-ring.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

import{customElement as e}from"../../node_modules/@lit/reactive-element/decorators/custom-element.js";import{property as t}from"../../node_modules/@lit/reactive-element/decorators/property.js";import"../../node_modules/lit/decorators.js";import{LitElement as n}from"../../node_modules/lit-element/lit-element.js";import"../../node_modules/lit/index.js";import{ContextConsumer as r}from"../../node_modules/@lit/context/lib/controllers/context-consumer.js";import{GlobalMDCContext as i}from"../../context-provider.js";import a from"../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{AttachableController as o}from"../../utils/controller/attachable-controller.js";import{FocusRingStyle as s}from"./focus-ring.style.js";
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: Apache-2.0
*
* [Modified by Kai-Orion & Sandlada]
*/
var c;let l=class extends n{static{c=this}static{this.styles=s}get ignoreGlobalConfig(){return this._ignoreGlobalConfig}set ignoreGlobalConfig(e){let t=this._ignoreGlobalConfig;t!==e&&(this._ignoreGlobalConfig=e,this._configAttributeSyncSource=`property`,this.toggleAttribute(`ignore-global-config`,e),this._configAttributeSyncSource=null,this.requestUpdate(`ignoreGlobalConfig`,t))}get disabled(){return this.effectiveDisabled}set disabled(e){if(this._configAttributeSyncSource)return;let t=this._disabled,n=this._disabledConfigured;this._disabled=e,this._disabledConfigured=!0,this._configAttributeSyncSource=`property`,this.toggleAttribute(`disabled`,e),this._configAttributeSyncSource=null,(t!==e||!n)&&this.requestUpdate(`disabled`,t)}get focused(){return this.hasAttribute(`focused`)}set focused(e){if(e){if(this.disabled){this.clearTimer(),this.removeAttribute(`closing`),this.removeAttribute(`focused`);return}this.clearTimer(),this.removeAttribute(`closing`),this.setAttribute(`focused`,``);return}this.removeAttribute(`focused`),this.removeAttribute(`closing`),this.clearTimer()}constructor(){super(),this._ignoreGlobalConfig=!1,this._disabled=!1,this._disabledConfigured=!1,this._configAttributeSyncSource=null,this._lastEffectiveDisabled=!1,this.globalMDCContextConsumer=new r(this,{context:i,subscribe:!0}),this.inward=!1,this.shapeInherit=!0,this.animationDisabled=!1,this.attachableController=new o(this,this.onControlChange.bind(this)),this.boundHandleEvent=e=>this.handleEvent(e),this.timer=null,this.ariaHidden=`true`,this.role=`presentation`,this.tabIndex=-1}get effectiveDisabled(){return this._ignoreGlobalConfig||this._disabledConfigured?this._disabled:this.globalFocusRingConfig.disabled}get globalFocusRingConfig(){return{disabled:this.globalMDCContextConsumer.value?.focusRing?.disabled??!1}}syncDisabledAttribute(){let e=this.effectiveDisabled;this.hasAttribute(`disabled`)!==e&&(this._configAttributeSyncSource=`effective`,this.toggleAttribute(`disabled`,e),this._configAttributeSyncSource=null)}attributeChangedCallback(e,t,n){if(e===`disabled`){if(this._configAttributeSyncSource)return;let e=this._disabled;this._disabled=n!==null,this._disabledConfigured=!0,this.requestUpdate(`disabled`,e);return}if(e===`ignore-global-config`){if(this._configAttributeSyncSource)return;let e=this._ignoreGlobalConfig;this._ignoreGlobalConfig=n!==null,this.requestUpdate(`ignoreGlobalConfig`,e);return}super.attributeChangedCallback(e,t,n)}static{this.FocusRingEvents=[`focusin`,`focusout`,`pointerdown`]}onControlChange(e,t){for(let n of c.FocusRingEvents)e?.removeEventListener(n,this.boundHandleEvent),t?.addEventListener(n,this.boundHandleEvent)}clearTimer(){this.timer&&=(clearTimeout(this.timer),null)}handleEvent(e){if(this.disabled)return;let t=parseFloat(getComputedStyle(this).getPropertyValue(`--_duration`))||0;switch(this.clearTimer(),e.type){case`focusin`:(this.control?.matches(`:focus-visible`)??!1)&&(this.removeAttribute(`closing`),this.focused=!0);break;case`focusout`:case`pointerdown`:this.closeWithDuration(t)}}close(){if(this.disabled){this.focused=!1;return}let e=parseFloat(getComputedStyle(this).getPropertyValue(`--_duration`))||0;this.closeWithDuration(e)}closeWithDuration(e){this.hasAttribute(`focused`)&&(this.setAttribute(`closing`,``),this.clearTimer(),this.timer=setTimeout(()=>{this.focused=!1},e*.5))}updated(e){super.updated(e),this.syncDisabledAttribute();let t=this.effectiveDisabled;t!==this._lastEffectiveDisabled&&(t&&(this.focused=!1),this._lastEffectiveDisabled=t)}get htmlFor(){return this.attachableController.htmlFor}set htmlFor(e){this.attachableController.htmlFor=e}get control(){return this.attachableController.control}set control(e){this.attachableController.control=e}attach(e){this.attachableController.attach(e)}detach(){this.attachableController.detach()}};a([t({type:Boolean,reflect:!0})],l.prototype,`inward`,void 0),a([t({type:Boolean,reflect:!0,attribute:`shape-inherit`})],l.prototype,`shapeInherit`,void 0),a([t({type:Boolean,reflect:!0,attribute:`animation-disabled`})],l.prototype,`animationDisabled`,void 0),a([t({type:Boolean,attribute:`ignore-global-config`,reflect:!0,noAccessor:!0})],l.prototype,`ignoreGlobalConfig`,null),a([t({type:Boolean,attribute:`disabled`,noAccessor:!0})],l.prototype,`disabled`,null),a([t({type:Boolean,reflect:!1,noAccessor:!0})],l.prototype,`focused`,null),l=c=a([e(`mdc-focus-ring`)],l);export{l as MDCFocusRing};
//# sourceMappingURL=focus-ring.js.map