JezK

Edit File: sc-toggle2.js

import{proxyCustomElement,HTMLElement,createEvent,h}from"@stencil/core/internal/client";import{s as setDefaultAnimation,b as stopAnimations,g as getAnimation,a as animateTo,c as shimKeyframesHeightAuto}from"./animation-registry.js";import{i as isRtl}from"./page-align.js";import{s as speak}from"./index2.js";import{d as defineCustomElement$1}from"./sc-icon2.js";const scToggleCss=":host{display:block;font-family:var(--sc-font-sans);--sc-toggle-padding:var(--sc-spacing-medium)}::slotted([slot=summary]){display:flex;align-items:center;flex-direction:flex-start;gap:var(--sc-spacing-x-small)}.details{border-radius:var(--sc-border-radius-medium);background-color:var(--sc-toggle-background-color, var(--sc-color-white));overflow-anchor:none}.details__radio{flex:0 0 auto;position:relative;display:inline-flex;align-items:center;justify-content:center;background-color:var(--sc-input-background-color);color:transparent;border-radius:50%;border:solid var(--sc-toggle-border-width, var(--sc-input-border-width)) var(--sc-toggle-border-color, var(--sc-input-border-color));background-color:var(--sc-input-background-color);display:inline-flex;color:transparent;width:var(--sc-toggle-radio-size, var(--sc-radio-size));height:var(--sc-toggle-radio-size, var(--sc-radio-size));transition:var(--sc-input-transition, var(--sc-transition-medium)) border-color, var(--sc-input-transition, var(--sc-transition-medium)) background-color, var(--sc-input-transition, var(--sc-transition-medium)) color, var(--sc-input-transition, var(--sc-transition-medium)) box-shadow}.details__radio svg{width:100%;height:100%}.details--open .details__radio{color:var(--sc-color-white);border-color:var(--sc-color-primary-500);background-color:var(--sc-color-primary-500)}.details:not(.details--borderless){border:solid 1px var(--sc-toggle-border-color, var(--sc-color-gray-200))}.details--disabled{opacity:0.5}.details__header{display:flex;align-items:center;border-radius:inherit;padding:var(--sc-toggle-header-padding, var(--sc-toggle-padding));user-select:none;cursor:pointer;color:var(--sc-toggle-header-color, var(--sc-input-label-color));gap:0.75em}.details__header:focus{box-shadow:var(--sc-focus-ring)}.details__header:focus-visible{box-shadow:var(--sc-focus-ring)}.details--disabled .details__header{cursor:not-allowed}.details--disabled .details__header:focus-visible{outline:none;box-shadow:none}.details__summary{flex:1 1 auto;display:flex;align-items:center}.details__summary-icon{flex:0 0 auto;display:flex;align-items:center;transition:var(--sc-transition-medium) transform ease}.details--open .details__summary-icon{transform:rotate(90deg)}.details__content{padding:var(--sc-toggle-content-padding, var(--sc-toggle-padding));padding-top:calc(var(--sc-toggle-content-padding, var(--sc-toggle-padding)) / 4)}.details--shady .details__body{border-top:solid var(--sc-input-border-width) var(--sc-input-border-color);background:var(--sc-toggle-shady-color, var(--sc-color-gray-50))}.details--shady .details__content{padding-top:var(--sc-toggle-content-padding, var(--sc-toggle-padding))}",ScToggleStyle0=scToggleCss,ScToggle=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.scShow=createEvent(this,"scShow",7),this.scHide=createEvent(this,"scHide",7),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(wp.i18n.__("Summary Shown","surecart")))}async hide(){this.open&&!this.disabled&&this.collapsible&&(this.open=!1,speak(wp.i18n.__("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:s}=getAnimation(this.el,"details.show");await animateTo(this.body,shimKeyframesHeightAuto(e,this.body.scrollHeight),s),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:s}=getAnimation(this.el,"details.hide");await animateTo(this.body,shimKeyframesHeightAuto(e,this.body.scrollHeight),s),this.body.hidden=!0,this.body.style.height="auto",this.body.style.overflow="visible"}}render(){return h("div",{key:"572c6569e886d47dd1c299953071c262e0c8f84b",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:"ec3f3d7b55784d1e6c78900ed4d50be57bb63e89",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:"528ce38fcceeb7bac5c12fd9cc9f33d1eb90e61b",part:"radio",class:"details__radio"},h("svg",{key:"0ff0fca866c65c37de527bca25b9520cd97e4f5a",viewBox:"0 0 16 16"},h("g",{key:"5bd0d49bc64dba4e5362a1ef6e53448538e96279",stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},h("g",{key:"8c9b34754812707a52d26192aa51531c8fda1724",fill:"currentColor"},h("circle",{key:"71ed37a7484920e3a0e38cb009ec4d9796300eaf",cx:"8",cy:"8",r:"3.42857143"}))))),h("div",{key:"28e307fb03e52aaf5f08443d99cb024abac94e76",part:"summary",class:"details__summary"},h("slot",{key:"14a69dad4fff594620e4ed423ae1c29b90d04573",name:"summary"},this.summary)),this.showIcon&&h("span",{key:"2621ca4a5a6fa4a22b3acd7bec70c2d131c06204",part:"summary-icon",class:"details__summary-icon"},h("slot",{key:"59624b987337542610cc10e579153e487361b302",name:"icon"},h("sc-icon",{key:"1aedc490861e8ec47399dfaf18749a68adbf4fa2",name:"chevron-right"})))),h("div",{key:"c38cf5bdacf472d21ec0b28c0cdd7e5e29ec47ff",class:"details__body",ref:e=>this.body=e,part:"body"},h("div",{key:"327135155637bc95777aed8c575ef5d288bcbaab",part:"content",id:"content",class:"details__content",role:"region","aria-labelledby":"header"},h("slot",{key:"c603777e89f40104fa87286b8954326b5f3623d3"}))))}get el(){return this}static get watchers(){return{open:["handleOpenChange"]}}static get style(){return ScToggleStyle0}},[1,"sc-toggle",{open:[516],summary:[1],disabled:[516],borderless:[516],shady:[516],showControl:[4,"show-control"],showIcon:[4,"show-icon"],collapsible:[4]},void 0,{open:["handleOpenChange"]}]);function defineCustomElement(){"undefined"!=typeof customElements&&["sc-toggle","sc-icon"].forEach((e=>{switch(e){case"sc-toggle":customElements.get(e)||customElements.define(e,ScToggle);break;case"sc-icon":customElements.get(e)||defineCustomElement$1()}}))}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"}});export{ScToggle as S,defineCustomElement as d};