FileMaster

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:"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"}))))}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};

Back