whoami7 - Manager
:
/
home
/
dataiclx
/
vielorbe.com
/
wp-content
/
plugins
/
surecart
/
dist
/
components
/
esm
/
Upload File:
files >> //home/dataiclx/vielorbe.com/wp-content/plugins/surecart/dist/components/esm/sc-toggle.entry.js.map
{"file":"sc-toggle.entry.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,ooFAAooF,CAAC;AACzpF,uBAAe,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;cCwDhB,UAAE;;;;;;;;cASF,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyHZ;;;;;;;AAQA;;;;;;;;;;;","names":[],"sources":["src/components/ui/sc-toggle/sc-toggle.scss?tag=sc-toggle&encapsulation=shadow","src/components/ui/sc-toggle/sc-toggle.tsx"],"sourcesContent":[":host {\n display: block;\n font-family: var(--sc-font-sans);\n --sc-toggle-padding: var(--sc-spacing-medium);\n}\n\n::slotted([slot='summary']) {\n display: flex;\n align-items: center;\n flex-direction: flex-start;\n gap: var(--sc-spacing-x-small);\n}\n\n.details {\n border-radius: var(--sc-border-radius-medium);\n background-color: var(--sc-toggle-background-color, var(--sc-color-white));\n overflow-anchor: none;\n\n &__radio {\n flex: 0 0 auto;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background-color: var(--sc-input-background-color);\n color: transparent;\n border-radius: 50%;\n border: solid var(--sc-toggle-border-width, var(--sc-input-border-width)) var(--sc-toggle-border-color, var(--sc-input-border-color));\n background-color: var(--sc-input-background-color);\n display: inline-flex;\n color: transparent;\n width: var(--sc-toggle-radio-size, var(--sc-radio-size));\n height: var(--sc-toggle-radio-size, var(--sc-radio-size));\n transition: var(--sc-input-transition, var(--sc-transition-medium)) border-color, var(--sc-input-transition, var(--sc-transition-medium)) background-color,\n var(--sc-input-transition, var(--sc-transition-medium)) color, var(--sc-input-transition, var(--sc-transition-medium)) box-shadow;\n\n svg {\n width: 100%;\n height: 100%;\n }\n }\n}\n.details--open .details__radio {\n color: var(--sc-color-white);\n border-color: var(--sc-color-primary-500);\n background-color: var(--sc-color-primary-500);\n}\n\n.details:not(.details--borderless) {\n border: solid 1px var(--sc-toggle-border-color, var(--sc-color-gray-200));\n}\n.details--disabled {\n opacity: 0.5;\n}\n.details__header {\n display: flex;\n align-items: center;\n border-radius: inherit;\n padding: var(--sc-toggle-header-padding, var(--sc-toggle-padding));\n user-select: none;\n cursor: pointer;\n color: var(--sc-toggle-header-color, var(--sc-input-label-color));\n gap: 0.75em;\n}\n.details__header:focus {\n box-shadow: var(--sc-focus-ring);\n}\n.details__header:focus-visible {\n box-shadow: var(--sc-focus-ring);\n}\n.details--disabled .details__header {\n cursor: not-allowed;\n}\n.details--disabled .details__header:focus-visible {\n outline: none;\n box-shadow: none;\n}\n.details__summary {\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n}\n.details__summary-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n transition: var(--sc-transition-medium) transform ease;\n}\n.details--open {\n .details__summary-icon {\n transform: rotate(90deg);\n }\n}\n.details__content {\n padding: var(--sc-toggle-content-padding, var(--sc-toggle-padding));\n padding-top: calc(var(--sc-toggle-content-padding, var(--sc-toggle-padding)) / 4);\n}\n.details--shady {\n .details__body {\n border-top: solid var(--sc-input-border-width) var(--sc-input-border-color);\n background: var(--sc-toggle-shady-color, var(--sc-color-gray-50));\n }\n .details__content {\n padding-top: var(--sc-toggle-content-padding, var(--sc-toggle-padding));\n }\n}\n","import { Component, Prop, h, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { getAnimation, setDefaultAnimation } from '../../../functions/animation-registry';\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../../../functions/animate';\nimport { isRtl } from '../../../functions/page-align';\nimport { speak } from '@wordpress/a11y';\nimport { __ } from '@wordpress/i18n';\n@Component({\n tag: 'sc-toggle',\n styleUrl: 'sc-toggle.scss',\n shadow: true,\n})\nexport class ScToggle {\n @Element() el: HTMLScToggleElement;\n private header: HTMLElement;\n private body: HTMLElement;\n\n /** Indicates whether or not the details is open. You can use this in lieu of the show/hide methods. */\n @Prop({ reflect: true }) open: boolean = false;\n\n /** The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. */\n @Prop() summary: string;\n\n /** Disables the details so it can't be toggled. */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Is this a borderless toggle? */\n @Prop({ reflect: true }) borderless: boolean = false;\n\n /** Is this a shady */\n @Prop({ reflect: true }) shady: boolean = false;\n\n /** Should we show a radio control? */\n @Prop() showControl: boolean = false;\n\n /** Should we show the arrow icon? */\n @Prop() showIcon: boolean = true;\n\n /** Are these collapsible? */\n @Prop() collapsible: boolean = true;\n\n /** Show the toggle */\n @Event() scShow: EventEmitter<void>;\n\n /** Show the toggle */\n @Event() scHide: EventEmitter<void>;\n\n componentDidLoad() {\n this.body.hidden = !this.open;\n this.body.style.height = this.open ? 'auto' : '0';\n }\n\n /** Shows the details. */\n async show() {\n if (this.open || this.disabled) {\n return undefined;\n }\n this.open = true;\n speak(__('Summary Shown', 'surecart'));\n }\n\n /** Hides the details */\n async hide() {\n if (!this.open || this.disabled || !this.collapsible) {\n return undefined;\n }\n this.open = false;\n speak(__('Summary Hidden', 'surecart'));\n }\n\n handleSummaryClick() {\n if (!this.disabled) {\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n\n this.header.focus();\n }\n }\n\n handleSummaryKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n event.preventDefault();\n this.hide();\n }\n\n if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n event.preventDefault();\n this.show();\n }\n }\n\n @Watch('open')\n async handleOpenChange() {\n if (this.open) {\n this.scShow.emit();\n await stopAnimations(this.body);\n this.body.hidden = false;\n this.body.style.overflow = 'hidden';\n const { keyframes, options } = getAnimation(this.el, 'details.show');\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.body.style.height = 'auto';\n this.body.style.overflow = 'visible';\n } else {\n this.scHide.emit();\n await stopAnimations(this.body);\n this.body.style.overflow = 'hidden';\n const { keyframes, options } = getAnimation(this.el, 'details.hide');\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.body.hidden = true;\n this.body.style.height = 'auto';\n this.body.style.overflow = 'visible';\n }\n }\n\n render() {\n return (\n <div\n part=\"base\"\n class={{\n 'details': true,\n 'details--open': this.open,\n 'details--disabled': this.disabled,\n 'details--borderless': this.borderless,\n 'details--shady': this.shady,\n 'details--is-rtl': isRtl(),\n }}\n >\n <header\n ref={el => (this.header = el as HTMLElement)}\n part=\"header\"\n id=\"header\"\n class=\"details__header\"\n role=\"button\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-controls=\"content\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n tabindex={this.disabled ? '-1' : '0'}\n onClick={() => this.handleSummaryClick()}\n onKeyDown={e => this.handleSummaryKeyDown(e)}\n >\n {this.showControl && (\n <span part=\"radio\" class=\"details__radio\">\n <svg viewBox=\"0 0 16 16\">\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g fill=\"currentColor\">\n <circle cx=\"8\" cy=\"8\" r=\"3.42857143\"></circle>\n </g>\n </g>\n </svg>\n </span>\n )}\n\n <div part=\"summary\" class=\"details__summary\">\n <slot name=\"summary\">{this.summary}</slot>\n </div>\n\n {this.showIcon && (\n <span part=\"summary-icon\" class=\"details__summary-icon\">\n <slot name=\"icon\">\n <sc-icon name=\"chevron-right\"></sc-icon>\n </slot>\n </span>\n )}\n </header>\n\n <div class=\"details__body\" ref={el => (this.body = el as HTMLElement)} part=\"body\">\n <div part=\"content\" id=\"content\" class=\"details__content\" role=\"region\" aria-labelledby=\"header\">\n <slot></slot>\n </div>\n </div>\n </div>\n );\n }\n}\n\nsetDefaultAnimation('details.show', {\n keyframes: [\n { height: '0', opacity: '0' },\n { height: 'auto', opacity: '1' },\n ],\n options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('details.hide', {\n keyframes: [\n { height: 'auto', opacity: '1' },\n { height: '0', opacity: '0' },\n ],\n options: { duration: 250, easing: 'ease' },\n});\n"],"version":3}
Copyright ©2021 || Defacer Indonesia