FileMaster

Edit File: sc-toggle.js

import{h}from"@stencil/core";import{getAnimation,setDefaultAnimation}from"../../../functions/animation-registry";import{animateTo,shimKeyframesHeightAuto,stopAnimations}from"../../../functions/animate";import{isRtl}from"../../../functions/page-align";import{speak}from"@wordpress/a11y";import{__}from"@wordpress/i18n";export class ScToggle{constructor(){this.open=!1,this.summary=void 0,this.disabled=!1,this.borderless=!1,this.shady=!1,this.showControl=!1,this.showIcon=!0,this.collapsible=!0}componentDidLoad(){this.body.hidden=!this.open,this.body.style.height=this.open?"auto":"0"}async show(){this.open||this.disabled||(this.open=!0,speak(__("Summary Shown","surecart")))}async hide(){this.open&&!this.disabled&&this.collapsible&&(this.open=!1,speak(__("Summary Hidden","surecart")))}handleSummaryClick(){this.disabled||(this.open?this.hide():this.show(),this.header.focus())}handleSummaryKeyDown(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.open?this.hide():this.show()),"ArrowUp"!==e.key&&"ArrowLeft"!==e.key||(e.preventDefault(),this.hide()),"ArrowDown"!==e.key&&"ArrowRight"!==e.key||(e.preventDefault(),this.show())}async handleOpenChange(){if(this.open){this.scShow.emit(),await stopAnimations(this.body),this.body.hidden=!1,this.body.style.overflow="hidden";const{keyframes:e,options:t}=getAnimation(this.el,"details.show");await animateTo(this.body,shimKeyframesHeightAuto(e,this.body.scrollHeight),t),this.body.style.height="auto",this.body.style.overflow="visible"}else{this.scHide.emit(),await stopAnimations(this.body),this.body.style.overflow="hidden";const{keyframes:e,options:t}=getAnimation(this.el,"details.hide");await animateTo(this.body,shimKeyframesHeightAuto(e,this.body.scrollHeight),t),this.body.hidden=!0,this.body.style.height="auto",this.body.style.overflow="visible"}}render(){return h("div",{key:"6b8cee63da7271b88acf61acd4cbf52e9ae27170",part:"base",class:{details:!0,"details--open":this.open,"details--disabled":this.disabled,"details--borderless":this.borderless,"details--shady":this.shady,"details--is-rtl":isRtl()}},h("header",{key:"cbd92c91453d2591d739737a19e7ad785dd75355",ref:e=>this.header=e,part:"header",id:"header",class:"details__header",role:"button","aria-expanded":this.open?"true":"false","aria-controls":"content","aria-disabled":this.disabled?"true":"false",tabindex:this.disabled?"-1":"0",onClick:()=>this.handleSummaryClick(),onKeyDown:e=>this.handleSummaryKeyDown(e)},this.showControl&&h("span",{key:"15e3866f27132cd199786cdc1ea55cc22e439584",part:"radio",class:"details__radio"},h("svg",{key:"76048f363412063f4382374198df53ea9bc829ef",viewBox:"0 0 16 16"},h("g",{key:"7d35f9ed3ed8802a5b652973b589c6d3648f8b48",stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},h("g",{key:"dade30f712cff6809c65e9bb065f45fa55dbf259",fill:"currentColor"},h("circle",{key:"8b26c1016eab68c45476f943e8694ce0d7fcf8fd",cx:"8",cy:"8",r:"3.42857143"}))))),h("div",{key:"283973f95d179ae62589a599886fa991de83ee58",part:"summary",class:"details__summary"},h("slot",{key:"4bd06b0fec270ad2d1f3d5164b0590cd97ce70ea",name:"summary"},this.summary)),this.showIcon&&h("span",{key:"16dbb4320e66c3e627aabd109e062d7d2e215af3",part:"summary-icon",class:"details__summary-icon"},h("slot",{key:"c6eb55da07698da902976c6b33ed3b7f5c43a991",name:"icon"},h("sc-icon",{key:"4fc447be65a932455b85400601b4424b70acedc6",name:"chevron-right"})))),h("div",{key:"7868949412abd50db33cb5dd22f1550da0819d61",class:"details__body",ref:e=>this.body=e,part:"body"},h("div",{key:"13987f7ac5a32113bd74389209d0c7bc94794821",part:"content",id:"content",class:"details__content",role:"region","aria-labelledby":"header"},h("slot",{key:"3c04b9e903d5ea368d183e27df64aa0496a20e85"}))))}static get is(){return"sc-toggle"}static get encapsulation(){return"shadow"}static get originalStyleUrls(){return{$:["sc-toggle.scss"]}}static get styleUrls(){return{$:["sc-toggle.css"]}}static get properties(){return{open:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Indicates whether or not the details is open. You can use this in lieu of the show/hide methods."},attribute:"open",reflect:!0,defaultValue:"false"},summary:{type:"string",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!1,docs:{tags:[],text:"The summary to show in the details header. If you need to display HTML, use the `summary` slot instead."},attribute:"summary",reflect:!1},disabled:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Disables the details so it can't be toggled."},attribute:"disabled",reflect:!0,defaultValue:"false"},borderless:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Is this a borderless toggle?"},attribute:"borderless",reflect:!0,defaultValue:"false"},shady:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Is this a shady"},attribute:"shady",reflect:!0,defaultValue:"false"},showControl:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Should we show a radio control?"},attribute:"show-control",reflect:!1,defaultValue:"false"},showIcon:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Should we show the arrow icon?"},attribute:"show-icon",reflect:!1,defaultValue:"true"},collapsible:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Are these collapsible?"},attribute:"collapsible",reflect:!1,defaultValue:"true"}}}static get events(){return[{method:"scShow",name:"scShow",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:"Show the toggle"},complexType:{original:"void",resolved:"void",references:{}}},{method:"scHide",name:"scHide",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:"Show the toggle"},complexType:{original:"void",resolved:"void",references:{}}}]}static get elementRef(){return"el"}static get watchers(){return[{propName:"open",methodName:"handleOpenChange"}]}}setDefaultAnimation("details.show",{keyframes:[{height:"0",opacity:"0"},{height:"auto",opacity:"1"}],options:{duration:250,easing:"ease"}}),setDefaultAnimation("details.hide",{keyframes:[{height:"auto",opacity:"1"},{height:"0",opacity:"0"}],options:{duration:250,easing:"ease"}});

Back