sc-toggle.cjs.entry.js
| 1 | 'use strict'; |
| 2 | |
| 3 | Object.defineProperty(exports, '__esModule', { value: true }); |
| 4 | |
| 5 | const index = require('./index-be4abba1.js'); |
| 6 | const animationRegistry = require('./animation-registry-b597d2f4.js'); |
| 7 | const pageAlign = require('./page-align-5a2ab493.js'); |
| 8 | const index$1 = require('./index-fb76df07.js'); |
| 9 | |
| 10 | 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))}"; |
| 11 | const ScToggleStyle0 = scToggleCss; |
| 12 | |
| 13 | const ScToggle = class { |
| 14 | constructor(hostRef) { |
| 15 | index.registerInstance(this, hostRef); |
| 16 | this.scShow = index.createEvent(this, "scShow", 7); |
| 17 | this.scHide = index.createEvent(this, "scHide", 7); |
| 18 | this.open = false; |
| 19 | this.summary = undefined; |
| 20 | this.disabled = false; |
| 21 | this.borderless = false; |
| 22 | this.shady = false; |
| 23 | this.showControl = false; |
| 24 | this.showIcon = true; |
| 25 | this.collapsible = true; |
| 26 | } |
| 27 | componentDidLoad() { |
| 28 | this.body.hidden = !this.open; |
| 29 | this.body.style.height = this.open ? 'auto' : '0'; |
| 30 | } |
| 31 | /** Shows the details. */ |
| 32 | async show() { |
| 33 | if (this.open || this.disabled) { |
| 34 | return undefined; |
| 35 | } |
| 36 | this.open = true; |
| 37 | index$1.speak(wp.i18n.__('Summary Shown', 'surecart')); |
| 38 | } |
| 39 | /** Hides the details */ |
| 40 | async hide() { |
| 41 | if (!this.open || this.disabled || !this.collapsible) { |
| 42 | return undefined; |
| 43 | } |
| 44 | this.open = false; |
| 45 | index$1.speak(wp.i18n.__('Summary Hidden', 'surecart')); |
| 46 | } |
| 47 | handleSummaryClick() { |
| 48 | if (!this.disabled) { |
| 49 | if (this.open) { |
| 50 | this.hide(); |
| 51 | } |
| 52 | else { |
| 53 | this.show(); |
| 54 | } |
| 55 | this.header.focus(); |
| 56 | } |
| 57 | } |
| 58 | handleSummaryKeyDown(event) { |
| 59 | if (event.key === 'Enter' || event.key === ' ') { |
| 60 | event.preventDefault(); |
| 61 | if (this.open) { |
| 62 | this.hide(); |
| 63 | } |
| 64 | else { |
| 65 | this.show(); |
| 66 | } |
| 67 | } |
| 68 | if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') { |
| 69 | event.preventDefault(); |
| 70 | this.hide(); |
| 71 | } |
| 72 | if (event.key === 'ArrowDown' || event.key === 'ArrowRight') { |
| 73 | event.preventDefault(); |
| 74 | this.show(); |
| 75 | } |
| 76 | } |
| 77 | async handleOpenChange() { |
| 78 | if (this.open) { |
| 79 | this.scShow.emit(); |
| 80 | await animationRegistry.stopAnimations(this.body); |
| 81 | this.body.hidden = false; |
| 82 | this.body.style.overflow = 'hidden'; |
| 83 | const { keyframes, options } = animationRegistry.getAnimation(this.el, 'details.show'); |
| 84 | await animationRegistry.animateTo(this.body, animationRegistry.shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options); |
| 85 | this.body.style.height = 'auto'; |
| 86 | this.body.style.overflow = 'visible'; |
| 87 | } |
| 88 | else { |
| 89 | this.scHide.emit(); |
| 90 | await animationRegistry.stopAnimations(this.body); |
| 91 | this.body.style.overflow = 'hidden'; |
| 92 | const { keyframes, options } = animationRegistry.getAnimation(this.el, 'details.hide'); |
| 93 | await animationRegistry.animateTo(this.body, animationRegistry.shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options); |
| 94 | this.body.hidden = true; |
| 95 | this.body.style.height = 'auto'; |
| 96 | this.body.style.overflow = 'visible'; |
| 97 | } |
| 98 | } |
| 99 | render() { |
| 100 | return (index.h("div", { key: '572c6569e886d47dd1c299953071c262e0c8f84b', part: "base", class: { |
| 101 | 'details': true, |
| 102 | 'details--open': this.open, |
| 103 | 'details--disabled': this.disabled, |
| 104 | 'details--borderless': this.borderless, |
| 105 | 'details--shady': this.shady, |
| 106 | 'details--is-rtl': pageAlign.isRtl(), |
| 107 | } }, index.h("header", { key: 'ec3f3d7b55784d1e6c78900ed4d50be57bb63e89', ref: el => (this.header = el), 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 && (index.h("span", { key: '528ce38fcceeb7bac5c12fd9cc9f33d1eb90e61b', part: "radio", class: "details__radio" }, index.h("svg", { key: '0ff0fca866c65c37de527bca25b9520cd97e4f5a', viewBox: "0 0 16 16" }, index.h("g", { key: '5bd0d49bc64dba4e5362a1ef6e53448538e96279', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, index.h("g", { key: '8c9b34754812707a52d26192aa51531c8fda1724', fill: "currentColor" }, index.h("circle", { key: '71ed37a7484920e3a0e38cb009ec4d9796300eaf', cx: "8", cy: "8", r: "3.42857143" })))))), index.h("div", { key: '28e307fb03e52aaf5f08443d99cb024abac94e76', part: "summary", class: "details__summary" }, index.h("slot", { key: '14a69dad4fff594620e4ed423ae1c29b90d04573', name: "summary" }, this.summary)), this.showIcon && (index.h("span", { key: '2621ca4a5a6fa4a22b3acd7bec70c2d131c06204', part: "summary-icon", class: "details__summary-icon" }, index.h("slot", { key: '59624b987337542610cc10e579153e487361b302', name: "icon" }, index.h("sc-icon", { key: '1aedc490861e8ec47399dfaf18749a68adbf4fa2', name: "chevron-right" }))))), index.h("div", { key: 'c38cf5bdacf472d21ec0b28c0cdd7e5e29ec47ff', class: "details__body", ref: el => (this.body = el), part: "body" }, index.h("div", { key: '327135155637bc95777aed8c575ef5d288bcbaab', part: "content", id: "content", class: "details__content", role: "region", "aria-labelledby": "header" }, index.h("slot", { key: 'c603777e89f40104fa87286b8954326b5f3623d3' }))))); |
| 108 | } |
| 109 | get el() { return index.getElement(this); } |
| 110 | static get watchers() { return { |
| 111 | "open": ["handleOpenChange"] |
| 112 | }; } |
| 113 | }; |
| 114 | animationRegistry.setDefaultAnimation('details.show', { |
| 115 | keyframes: [ |
| 116 | { height: '0', opacity: '0' }, |
| 117 | { height: 'auto', opacity: '1' }, |
| 118 | ], |
| 119 | options: { duration: 250, easing: 'ease' }, |
| 120 | }); |
| 121 | animationRegistry.setDefaultAnimation('details.hide', { |
| 122 | keyframes: [ |
| 123 | { height: 'auto', opacity: '1' }, |
| 124 | { height: '0', opacity: '0' }, |
| 125 | ], |
| 126 | options: { duration: 250, easing: 'ease' }, |
| 127 | }); |
| 128 | ScToggle.style = ScToggleStyle0; |
| 129 | |
| 130 | exports.sc_toggle = ScToggle; |
| 131 | |
| 132 | //# sourceMappingURL=sc-toggle.cjs.entry.js.map |