JezK

Edit File: sc-button_6.entry.js.map

{"file":"sc-button.sc-icon.sc-product-line-item.sc-product-line-item-note.sc-quantity-select.sc-spinner.entry.js","mappings":"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","names":[],"sources":["src/components/ui/button/sc-button.scss?tag=sc-button&encapsulation=shadow","src/components/ui/button/sc-button.tsx","src/components/ui/icon/request.ts","src/components/ui/icon/sc-icon.css?tag=sc-icon&encapsulation=shadow","src/components/ui/icon/sc-icon.tsx","src/components/ui/product-line-item/sc-product-line-item.scss?tag=sc-product-line-item&encapsulation=shadow","src/components/ui/product-line-item/sc-product-line-item.tsx","src/components/ui/product-line-item-note/sc-product-line-item-note.scss?tag=sc-product-line-item-note&encapsulation=shadow","src/components/ui/product-line-item-note/sc-product-line-item-note.tsx","src/components/ui/quantity-select/sc-quantity-select.scss?tag=sc-quantity-select&encapsulation=shadow","src/components/ui/quantity-select/sc-quantity-select.tsx","src/components/ui/spinner/sc-spinner.scss?tag=sc-spinner&encapsulation=shadow","src/components/ui/spinner/sc-spinner.tsx"],"sourcesContent":[":host {\n display: inline-block;\n width: auto;\n cursor: pointer;\n --primary-color: var(--sc-color-primary-text);\n --primary-background: var(--sc-color-primary-500);\n}\n:host([full]) {\n display: block;\n}\n\n// This is necessary to make sure clicks happen on button component, not children.\n// Without this, forms may not submit.\n::slotted(*) {\n pointer-events: none;\n}\n\n.button {\n box-sizing: border-box;\n z-index: 10;\n display: inline-flex;\n align-items: stretch;\n justify-content: center;\n width: 100%;\n border-style: solid;\n border-width: var(--sc-input-border-width);\n font-family: var(--sc-input-font-family);\n font-weight: var(--sc-font-weight-semibold);\n text-decoration: none;\n user-select: none;\n white-space: nowrap;\n vertical-align: middle;\n padding: 0;\n transition: var(--sc-input-transition, var(--sc-transition-medium)) background-color, var(--sc-input-transition, var(--sc-transition-medium)) color,\n var(--sc-input-transition, var(--sc-transition-medium)) border, var(--sc-input-transition, var(--sc-transition-medium)) box-shadow,\n var(--sc-input-transition, var(--sc-transition-medium)) opacity;\n cursor: inherit;\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);\n }\n\n &.button--disabled {\n cursor: not-allowed;\n\n // When disabled, prevent mouse events from bubbling up\n * {\n pointer-events: none;\n }\n\n .button__label,\n .button__suffix,\n .button__prefix {\n opacity: 0.5;\n }\n }\n\n // Clicks on icons shouldn't prevent the button from gaining focus\n ::slotted(.sc--icon) {\n pointer-events: none;\n }\n}\n\n.button__prefix,\n.button__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n}\n\n.button__label {\n display: flex;\n align-items: center;\n\n ::slotted(sc-icon) {\n vertical-align: -2px;\n }\n}\n\n.button {\n &:not(.button--text):not(.button--link) {\n box-shadow: var(--sc-shadow-small);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Standard buttons\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button.button--standard {\n &.button--default {\n background-color: var(--sc-button-default-background-color, var(--sc-color-white));\n border-color: var(--sc-button-default-border-color, var(--sc-color-gray-300));\n color: var(--sc-button-default-color, var(--sc-color-gray-600));\n\n &:hover:not(.button--disabled) {\n background-color: var(--sc-button-default-hover-background-color, var(--sc-color-white));\n border-color: var(--sc-button-default-focus-border-color, var(--primary-background));\n color: var(--primary-background);\n }\n\n &:focus:not(.button--disabled) {\n background-color: var(--sc-button-default-focus-background-color, var(--sc-color-white));\n border-color: var(--sc-button-default-focus-border-color, var(--sc-color-white));\n color: var(--primary-background);\n box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--sc-button-default-active-background-color, var(--sc-color-white));\n border-color: var(--sc-button-default-active-border-color, var(--sc-color-white));\n color: var(--primary-background);\n }\n }\n\n &.button--primary {\n background-color: var(--primary-background);\n border-color: var(--primary-background);\n color: var(--primary-color);\n\n &:hover:not(.button--disabled) {\n opacity: 0.8;\n }\n\n &:focus:not(.button--disabled) {\n opacity: 0.8;\n color: var(--primary-color);\n border-color: var(--sc-color-white);\n box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--primary-background);\n border-color: var(--sc-color-white);\n color: var(--primary-color);\n }\n }\n\n &.button--success {\n background-color: var(--sc-color-success-500);\n border-color: var(--sc-color-success-500);\n color: var(--sc-color-success-text);\n\n &:hover:not(.button--disabled) {\n background-color: var(--sc-color-success-400);\n border-color: var(--sc-color-success-400);\n color: var(--sc-color-success-text);\n }\n\n &:focus:not(.button--disabled) {\n background-color: var(--sc-color-success-400);\n border-color: var(--sc-color-success-400);\n color: var(--sc-color-success-text);\n box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-success);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--sc-color-success-500);\n border-color: var(--sc-color-success-500);\n color: var(--sc-color-success-text);\n }\n }\n\n &.button--info {\n background-color: var(--sc-color-info-500);\n border-color: var(--sc-color-info-500);\n color: var(--sc-color-info-text);\n\n &:hover:not(.button--disabled) {\n background-color: var(--sc-color-info-400);\n border-color: var(--sc-color-info-400);\n color: var(--sc-color-info-text);\n }\n\n &:focus:not(.button--disabled) {\n background-color: var(--sc-color-info-400);\n border-color: var(--sc-color-info-400);\n color: var(--sc-color-info-text);\n box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-info);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--sc-color-info-500);\n border-color: var(--sc-color-info-500);\n color: var(--sc-color-info-text);\n }\n }\n\n &.button--warning {\n background-color: var(--sc-color-warning-500);\n border-color: var(--sc-color-warning-500);\n color: var(--sc-color-warning-text);\n\n &:hover:not(.button--disabled) {\n background-color: var(--sc-color-warning-400);\n border-color: var(--sc-color-warning-400);\n color: var(--sc-color-warning-text);\n }\n\n &:focus:not(.button--disabled) {\n background-color: var(--sc-color-warning-400);\n border-color: var(--sc-color-warning-400);\n color: var(--sc-color-warning-text);\n box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-warning);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--sc-color-warning-500);\n border-color: var(--sc-color-warning-500);\n color: var(--sc-color-warning-text);\n }\n }\n\n &.button--danger {\n background-color: var(--sc-color-danger-500);\n border-color: var(--sc-color-danger-500);\n color: var(--sc-color-danger-text);\n\n &:hover:not(.button--disabled) {\n background-color: var(--sc-color-danger-400);\n border-color: var(--sc-color-danger-400);\n color: var(--sc-color-danger-text);\n }\n\n &:focus:not(.button--disabled) {\n background-color: var(--sc-color-danger-400);\n border-color: var(--sc-color-danger-400);\n color: var(--sc-color-danger-text);\n box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-danger);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--sc-color-danger-500);\n border-color: var(--sc-color-danger-500);\n color: var(--sc-color-danger-text);\n }\n }\n}\n\n/*\n* Outline buttons\n*/\n.button--outline {\n background: none;\n border: solid 1px;\n}\n\n/* Default */\n.button--outline.button--default {\n border-color: var(--sc-color-gray-300);\n color: var(--sc-color-gray-700);\n}\n.button--outline.button--default:hover:not(.button--disabled) {\n border-color: var(--primary-background);\n background-color: var(--primary-background);\n color: var(--sc-color-white);\n}\n.button--outline.button--default:focus:not(.button--disabled) {\n border-color: var(--primary-background);\n box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--primary-background) / var(--sc-focus-ring-alpha);\n}\n.button--outline.button--default:active:not(.button--disabled) {\n opacity: 0.8;\n color: var(--sc-color-white);\n}\n/* Primary */\n.button--outline.button--primary {\n border-color: var(--primary-background);\n color: var(--primary-background);\n}\n.button--outline.button--primary:hover:not(.button--disabled) {\n background-color: var(--primary-background);\n opacity: 0.8;\n color: var(--sc-color-white);\n}\n.button--outline.button--primary:focus:not(.button--disabled) {\n border-color: var(--primary-background);\n box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--primary-background) / var(--sc-focus-ring-alpha);\n}\n.button--outline.button--primary:active:not(.button--disabled) {\n border-color: var(--primary-background);\n background-color: var(--primary-background);\n opacity: 0.9;\n color: var(--sc-color-white);\n}\n/* Success */\n.button--outline.button--success {\n border-color: var(--sc-color-success-500);\n color: var(--sc-color-success-500);\n}\n.button--outline.button--success:hover:not(.button--disabled) {\n background-color: var(--sc-color-success-500);\n color: var(--sc-color-white);\n}\n.button--outline.button--success:focus:not(.button--disabled) {\n border-color: var(--sc-color-success-500);\n box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-color-success-500) / var(--sc-focus-ring-alpha);\n}\n.button--outline.button--success:active:not(.button--disabled) {\n border-color: var(--sc-color-success-700);\n background-color: var(--sc-color-success-700);\n color: var(--sc-color-white);\n}\n/* Info */\n.button--outline.button--info {\n border-color: var(--sc-color-gray-500);\n color: var(--sc-color-gray-500);\n}\n.button--outline.button--info:hover:not(.button--disabled) {\n background-color: var(--sc-color-gray-500);\n color: var(--sc-color-white);\n}\n.button--outline.button--info:focus:not(.button--disabled) {\n border-color: var(--sc-color-gray-500);\n box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-color-gray-500) / var(--sc-focus-ring-alpha);\n}\n.button--outline.button--info:active:not(.button--disabled) {\n border-color: var(--sc-color-gray-700);\n background-color: var(--sc-color-gray-700);\n color: var(--sc-color-white);\n}\n/* Warning */\n.button--outline.button--warning {\n border-color: var(--sc-color-warning-500);\n color: var(--sc-color-warning-500);\n}\n.button--outline.button--warning:hover:not(.button--disabled) {\n background-color: var(--sc-color-warning-500);\n color: var(--sc-color-white);\n}\n.button--outline.button--warning:focus:not(.button--disabled) {\n border-color: var(--sc-color-warning-500);\n box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-color-warning-500) / var(--sc-focus-ring-alpha);\n}\n.button--outline.button--warning:active:not(.button--disabled) {\n border-color: var(--sc-color-warning-700);\n background-color: var(--sc-color-warning-700);\n color: var(--sc-color-white);\n}\n/* Danger */\n.button--outline.button--danger {\n border-color: var(--sc-color-danger-500);\n color: var(--sc-color-danger-500);\n}\n.button--outline.button--danger:hover:not(.button--disabled) {\n background-color: var(--sc-color-danger-500);\n color: var(--sc-color-white);\n}\n.button--outline.button--danger:focus:not(.button--disabled) {\n border-color: var(--sc-color-danger-500);\n box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-color-danger-500) / var(--sc-focus-ring-alpha);\n}\n.button--outline.button--danger:active:not(.button--disabled) {\n border-color: var(--sc-color-danger-700);\n background-color: var(--sc-color-danger-700);\n color: var(--sc-color-white);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Text buttons\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--text {\n background-color: transparent;\n border-color: transparent;\n color: inherit;\n\n &:hover:not(.button--disabled) {\n background-color: transparent;\n border-color: transparent;\n color: var(--sc-color-gray-600);\n }\n\n &:focus:not(.button--disabled) {\n background-color: transparent;\n border-color: transparent;\n box-shadow: 0; //0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);\n }\n\n &:active:not(.button--disabled) {\n background-color: transparent;\n border-color: transparent;\n box-shadow: 0; // 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);\n }\n\n &.button--caret.button--has-label {\n padding-right: var(--sc-spacing-xx-small);\n .button__label {\n padding: 0 var(--sc-spacing-xx-small) !important;\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Link buttons\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n.button--link {\n background-color: transparent;\n border-color: transparent;\n box-shadow: none;\n color: var(--sc-button-link-color, var(--primary-background));\n transition: opacity var(--sc-input-transition, var(--sc-transition-medium)) ease;\n text-decoration: var(--sc-button-link-text-decoration, none);\n\n &.button--has-label {\n &.button--small,\n &.button--medium,\n &.button--large {\n .button__label {\n padding: 0;\n }\n }\n }\n\n &:hover:not(.button--disabled) {\n background-color: transparent;\n border-color: transparent;\n opacity: 0.75;\n }\n\n &:focus:not(.button--disabled) {\n background-color: transparent;\n border-color: transparent;\n }\n\n &:active:not(.button--disabled) {\n background-color: transparent;\n border-color: transparent;\n }\n\n &.button--has-prefix:not(.button--text) {\n &.button--small,\n &.button--medium,\n &.button--large {\n padding-left: 0;\n .button__label {\n padding-left: var(--sc-spacing-xx-small);\n }\n }\n }\n &.button--has-suffix:not(.button--text) {\n &.button--small,\n &.button--medium,\n &.button--large {\n padding-right: 0;\n .button__label {\n padding-right: var(--sc-spacing-xx-small);\n }\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--small {\n font-size: var(--sc-button-font-size-small);\n height: var(--sc-input-height-small);\n line-height: calc(var(--sc-input-height-small) - var(--sc-input-border-width) * 2);\n border-radius: var(--button-border-radius, var(--sc-input-border-radius-small));\n}\n\n.button--medium {\n font-size: var(--sc-button-font-size-medium);\n height: var(--sc-input-height-medium);\n line-height: calc(var(--sc-input-height-medium) - var(--sc-input-border-width) * 2);\n border-radius: var(--button-border-radius, var(--sc-input-border-radius-medium));\n}\n\n.button--large {\n font-size: var(--sc-button-font-size-large);\n height: var(--sc-input-height-large);\n line-height: calc(var(--sc-input-height-large) - var(--sc-input-border-width) * 2);\n border-radius: var(--button-border-radius, var(--sc-input-border-radius-large));\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Full modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n.button--full {\n display: block;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--pill {\n &.button--small {\n border-radius: var(--sc-input-height-small);\n }\n\n &.button--medium {\n border-radius: var(--sc-input-height-medium);\n }\n\n &.button--large {\n border-radius: var(--sc-input-height-large);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Circle modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--circle {\n padding-left: 0;\n padding-right: 0;\n\n &.button--small {\n width: var(--sc-input-height-small);\n border-radius: 50%;\n }\n\n &.button--medium {\n width: var(--sc-input-height-medium);\n border-radius: 50%;\n }\n\n &.button--large {\n width: var(--sc-input-height-large);\n border-radius: 50%;\n }\n\n .button__prefix,\n .button__suffix,\n .button__caret {\n display: none;\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Caret modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--caret {\n .button__suffix {\n display: none;\n }\n\n .button__caret {\n display: flex;\n align-items: center;\n\n svg {\n width: 1em;\n height: 1em;\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Busy modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n.button--busy {\n position: relative;\n cursor: wait;\n\n .button__prefix,\n .button__label,\n .button__suffix,\n .button__caret {\n visibility: hidden;\n }\n\n // When disabled, prevent mouse events from bubbling up\n * {\n pointer-events: none;\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Loading modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n.button--loading {\n position: relative;\n cursor: wait;\n\n .button__prefix,\n .button__label,\n .button__suffix,\n .button__caret {\n visibility: hidden;\n }\n}\n\nsc-spinner::part(base) {\n --indicator-color: currentColor;\n --spinner-size: 12px;\n position: absolute;\n top: calc(50% - var(--spinner-size) + (var(--spinner-size) / 4));\n left: calc(50% - var(--spinner-size) + (var(--spinner-size) / 4));\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Badges\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button ::slotted(sc-badge) {\n position: absolute;\n top: 0;\n right: 0;\n transform: translateY(-50%) translateX(50%);\n pointer-events: none;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Button spacing\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--has-label {\n &.button--small .button__label {\n padding: 0 var(--sc-spacing-small);\n }\n\n &.button--medium .button__label {\n padding: 0 var(--sc-spacing-medium);\n }\n\n &.button--large .button__label {\n padding: 0 var(--sc-spacing-large);\n }\n}\n\n.button--has-prefix:not(.button--text) {\n &.button--small {\n padding-left: var(--sc-spacing-x-small);\n\n .button__label {\n padding-left: var(--sc-spacing-x-small);\n }\n }\n\n &.button--medium {\n padding-left: var(--sc-spacing-small);\n\n .button__label {\n padding-left: var(--sc-spacing-small);\n }\n }\n\n &.button--large {\n padding-left: var(--sc-spacing-small);\n\n .button__label {\n padding-left: var(--sc-spacing-small);\n }\n }\n}\n\n.button--has-suffix,\n.button--caret {\n &.button--small {\n padding-right: var(--sc-spacing-x-small);\n\n .button__label {\n padding-right: var(--sc-spacing-x-small);\n }\n }\n\n &.button--medium {\n padding-right: var(--sc-spacing-small);\n\n .button__label {\n padding-right: var(--sc-spacing-small);\n }\n }\n\n &.button--large {\n padding-right: var(--sc-spacing-small);\n\n .button__label {\n padding-right: var(--sc-spacing-small);\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.).\n// This means buttons aren't always direct descendants of the button group, thus we can't target them with the ::slotted\n// selector. To work around this, the button group component does some magic to add these special classes to buttons and\n// we style them here instead.\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n:host(.sc-button-group__button--first) .button {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n:host(.sc-button-group__button--inner) .button {\n border-radius: 0;\n}\n\n:host(.sc-button-group__button--last) .button {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n// All except the first\n:host(.sc-button-group__button:not(.sc-button-group__button--first)) {\n margin-left: calc(-1 * var(--sc-input-border-width));\n}\n\n// Add a visual separator between solid buttons\n:host(.sc-button-group__button:not(.sc-button-group__button--focus, .sc-button-group__button--first, [type='default']):not(:hover, :active, :focus)) .button:after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n border-left: solid 1px #fff4;\n mix-blend-mode: lighten;\n}\n\n// Bump focused buttons up so their focus ring isn't clipped\n:host(.sc-button-group__button--hover) {\n z-index: 1;\n}\n\n:host(.sc-button-group__button--focus) {\n z-index: 2;\n}\n\n@keyframes busy-animation {\n 0% {\n background-position: 200px 0;\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// RTL support\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n.button--is-rtl {\n &.button--has-prefix {\n &.button--small,\n &.button--medium,\n &.button--large {\n padding-left: 0;\n .button__label {\n padding-left: 0;\n padding-right: var(--sc-spacing-xx-small);\n }\n }\n }\n &.button--has-suffix {\n &.button--small,\n &.button--medium,\n &.button--large {\n padding-right: 0;\n .button__label {\n padding-right: 0;\n padding-left: var(--sc-spacing-xx-small);\n }\n }\n }\n}\n","import { Component, Prop, Event, EventEmitter, State, Element, Fragment, h } from '@stencil/core';\nimport { isRtl } from '../../../functions/page-align';\n\n/**\n * @part base - The elements base wrapper.\n * @part label - The button label.\n * @part prefix - The button prefix.\n * @part suffix - The button suffix.\n * @part caret - The button caret.\n * @part spinner - The button spinner.\n */\n@Component({\n tag: 'sc-button',\n styleUrl: 'sc-button.scss',\n shadow: true,\n})\nexport class ScButton {\n @Element() button: HTMLElement | HTMLAnchorElement;\n\n @State() private hasFocus = false;\n @State() private hasLabel = false;\n @State() private hasPrefix = false;\n @State() private hasSuffix = false;\n\n /** The button's type. */\n @Prop({ reflect: true }) type: 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' | 'link' = 'default';\n\n /** The button's size. */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** Draws the button with a caret for use with dropdowns, popovers, etc. */\n @Prop({ reflect: true }) caret?: boolean = false;\n\n /** Draws the button full-width. */\n @Prop({ reflect: true }) full?: boolean = false;\n\n /** Disables the button. */\n @Prop({ reflect: true }) disabled?: boolean = false;\n\n /** Draws the button in a loading state. */\n @Prop({ reflect: true }) loading?: boolean = false;\n\n /** Draws an outlined button. */\n @Prop({ reflect: true }) outline?: boolean = false;\n\n /** Draws the button in a busy state. */\n @Prop({ reflect: true }) busy?: boolean = false;\n\n /** Draws a pill-style button with rounded edges. */\n @Prop({ reflect: true }) pill?: boolean = false;\n\n /** Draws a circle button. */\n @Prop({ reflect: true }) circle?: boolean = false;\n\n /** Indicates if activating the button should submit the form. Ignored when `href` is set. */\n @Prop({ reflect: true }) submit?: boolean = false;\n\n /** An optional name for the button. Ignored when `href` is set. */\n @Prop() name: string;\n\n /** An optional value for the button. Ignored when `href` is set. */\n @Prop() value: string;\n\n /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n @Prop({ reflect: true }) href: string;\n\n /** Tells the browser where to open the link. Only used when `href` is set. */\n @Prop() target: '_blank' | '_parent' | '_self' | '_top';\n\n /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n @Prop() download: string;\n\n /** Tells the browser to autofocus. */\n @Prop() autofocus: boolean;\n\n /** Emitted when the button loses focus. */\n @Event() scBlur: EventEmitter<void>;\n\n /** Emitted when the button gains focus. */\n @Event() scFocus: EventEmitter<void>;\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n /** Simulates a click on the button. */\n click() {\n this.button.click();\n }\n\n /** Sets focus on the button. */\n focus(options?: FocusOptions) {\n this.button.focus(options);\n }\n\n /** Removes focus from the button. */\n blur() {\n this.button.blur();\n }\n\n handleSlotChange() {\n this.hasLabel = !!this.button.children;\n this.hasPrefix = !!this.button.querySelector('[slot=\"prefix\"]');\n this.hasSuffix = !!this.button.querySelector('[slot=\"suffix\"]');\n }\n\n handleBlur() {\n this.hasFocus = false;\n this.scBlur.emit();\n }\n\n handleFocus() {\n this.hasFocus = true;\n this.scFocus.emit();\n }\n\n handleClick(event: MouseEvent) {\n if (this.disabled || this.loading || this.busy) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n if (this.submit) {\n this.submitForm();\n }\n }\n\n submitForm() {\n const form = this.button.closest('sc-form')?.shadowRoot?.querySelector('form') || this.button.closest('form');\n // Calling form.submit() seems to bypass the submit event and constraint validation. Instead, we can inject a\n // native submit button into the form, click it, then remove it to simulate a standard form submission.\n const button = document.createElement('button');\n if (form) {\n button.type = 'submit';\n button.style.position = 'absolute';\n button.style.width = '0';\n button.style.height = '0';\n button.style.clip = 'rect(0 0 0 0)';\n button.style.clipPath = 'inset(50%)';\n button.style.overflow = 'hidden';\n button.style.whiteSpace = 'nowrap';\n form.append(button);\n button.click();\n button.remove();\n }\n }\n\n render() {\n const Tag = this.href ? 'a' : 'button';\n\n const interior = (\n <Fragment>\n <span part=\"prefix\" class=\"button__prefix\">\n <slot onSlotchange={() => this.handleSlotChange()} name=\"prefix\"></slot>\n </span>\n <span part=\"label\" class=\"button__label\">\n <slot onSlotchange={() => this.handleSlotChange()}></slot>\n </span>\n <span part=\"suffix\" class=\"button__suffix\">\n <slot onSlotchange={() => this.handleSlotChange()} name=\"suffix\"></slot>\n </span>\n {this.caret ? (\n <span part=\"caret\" class=\"button__caret\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n </svg>\n </span>\n ) : (\n ''\n )}\n {this.loading || this.busy ? <sc-spinner exportparts=\"base:spinner\"></sc-spinner> : ''}\n </Fragment>\n );\n\n return (\n <Tag\n part=\"base\"\n class={{\n 'button': true,\n [`button--${this.type}`]: !!this.type,\n [`button--${this.size}`]: true,\n 'button--caret': this.caret,\n 'button--circle': this.circle,\n 'button--disabled': this.disabled,\n 'button--focused': this.hasFocus,\n 'button--loading': this.loading,\n 'button--busy': this.busy,\n 'button--pill': this.pill,\n 'button--standard': !this.outline,\n 'button--outline': this.outline,\n 'button--has-label': this.hasLabel,\n 'button--has-prefix': this.hasPrefix,\n 'button--has-suffix': this.hasSuffix,\n 'button--is-rtl': isRtl(),\n }}\n href={this.href}\n target={this.target}\n download={this.download}\n autoFocus={this.autofocus}\n rel={this.target ? 'noreferrer noopener' : undefined}\n role=\"button\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-busy={this.busy || this.loading ? 'true' : 'false'}\n tabindex={this.disabled ? '-1' : '0'}\n disabled={this.disabled || this.busy}\n type={this.submit ? 'submit' : 'button'}\n name={this.name}\n value={this.value}\n onBlur={() => this.handleBlur()}\n onFocus={() => this.handleFocus()}\n onClick={e => this.handleClick(e)}\n >\n {interior}\n </Tag>\n );\n }\n}\n","interface IconFile {\n ok: boolean;\n status: number;\n svg: string;\n}\n\nconst iconFiles = new Map<string, Promise<IconFile>>();\n\nexport const requestIcon = (url: string) => {\n if (iconFiles.has(url)) {\n return iconFiles.get(url);\n } else {\n const request = fetch(url).then(async response => {\n if (response.ok) {\n const div = document.createElement('div');\n div.innerHTML = await response.text();\n const svg = div.firstElementChild;\n\n return {\n ok: response.ok,\n status: response.status,\n svg: svg && svg.tagName.toLowerCase() === 'svg' ? svg.outerHTML : '',\n };\n } else {\n return {\n ok: response.ok,\n status: response.status,\n svg: null,\n };\n }\n }) as Promise<IconFile>;\n\n iconFiles.set(url, request);\n return request;\n }\n};\n",":host {\n --width: 1em;\n --height: 1em;\n display: inline-block;\n width: var(--width);\n height: var(--height);\n contain: strict;\n box-sizing: content-box !important;\n}\n.icon,\nsvg {\n display: block;\n height: 100%;\n width: 100%;\n stroke-width: var(--sc-icon-stroke-width, 2px);\n}\n","import { Component, Watch, h, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport { getIconLibrary, watchIcon, unwatchIcon } from './library';\nimport { requestIcon } from './request';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * The icon's label used for accessibility.\n */\nconst LABEL_MAPPINGS = {\n 'chevron-down': __('Open', 'surecart'),\n 'chevron-up': __('Close', 'surecart'),\n 'chevron-right': __('Next', 'surecart'),\n 'chevron-left': __('Previous', 'surecart'),\n 'arrow-right': __('Next', 'surecart'),\n 'arrow-left': __('Previous', 'surecart'),\n 'arrow-down': __('Down', 'surecart'),\n 'arrow-up': __('Up', 'surecart'),\n 'alert-circle': __('Alert', 'surecart'),\n};\n\nconst parser = new DOMParser();\n\n@Component({\n tag: 'sc-icon',\n styleUrl: 'sc-icon.css',\n assetsDirs: ['icon-assets'],\n shadow: true,\n})\nexport class ScIcon {\n @State() private svg = '';\n\n /** The name of the icon to draw. */\n @Prop({ reflect: true }) name: string;\n\n /** An external URL of an SVG file. */\n @Prop() src: string;\n\n /** An alternative description to use for accessibility. If omitted, the name or src will be used to generate it. */\n @Prop() label: string;\n\n /** The name of a registered custom icon library. */\n @Prop() library = 'default';\n\n /** Mutate the icon */\n @Prop() mutate = true;\n\n /** Emitted when the icon has loaded. */\n @Event() scLoad: EventEmitter<void>;\n\n /** @internal Fetches the icon and redraws it. Used to handle library registrations. */\n redraw() {\n this.setIcon();\n }\n\n componentWillLoad() {\n // Get redrawn if our library is registered after we mount.\n watchIcon(this);\n this.setIcon();\n }\n\n disconnectedCallback() {\n unwatchIcon(this);\n }\n\n getLabel() {\n let label = '';\n if (this.label) {\n label = LABEL_MAPPINGS?.[this.label] || this.label;\n } else if (this.name) {\n label = (LABEL_MAPPINGS?.[this.name] || this.name).replace(/-/g, ' ');\n } else if (this.src) {\n label = this.src.replace(/.*\\//, '').replace(/-/g, ' ').replace(/\\.svg/i, '');\n }\n\n return label;\n }\n\n @Watch('name')\n @Watch('src')\n @Watch('library')\n async setIcon() {\n const library = getIconLibrary(this.library);\n const url = this.getUrl();\n if (url) {\n try {\n const file = await requestIcon(url)!;\n if (url !== this.getUrl()) {\n // If the url has changed while fetching the icon, ignore this request\n return;\n } else if (file.ok) {\n const doc = parser.parseFromString(file.svg, 'text/html');\n const svgEl = doc.body.querySelector('svg');\n\n if (svgEl) {\n if (library && library.mutator && this.mutate) {\n library.mutator(svgEl);\n }\n\n this.svg = svgEl.outerHTML;\n // add part attribute to the svg element.\n this.svg = this.svg.replace('<svg', '<svg part=\"svg\" ');\n this.scLoad.emit();\n } else {\n this.svg = '';\n console.error({ status: file?.status });\n }\n } else {\n this.svg = '';\n console.error({ status: file?.status });\n }\n } catch {\n console.error({ status: -1 });\n }\n } else if (this.svg) {\n // If we can't resolve a URL and an icon was previously set, remove it\n this.svg = '';\n }\n }\n\n private getUrl(): string {\n const library = getIconLibrary(this.library);\n if (this.name && library) {\n return library.resolver(this.name);\n } else {\n return this.src;\n }\n }\n\n render() {\n return <div part=\"base\" class=\"icon\" role=\"img\" aria-label={this.getLabel()} innerHTML={this.svg}></div>;\n }\n}\n",":host {\n display: block;\n font-family: var(--sc-font-sans);\n}\n\n.item {\n box-sizing: border-box;\n margin: 0px;\n min-width: 0px;\n display: flex;\n gap: var(--sc-spacing-large);\n justify-content: space-between;\n align-items: stretch;\n width: 100%;\n border-bottom: none;\n container-type: inline-size;\n\n &__text-container {\n box-sizing: border-box;\n margin: 0px;\n min-width: 0px;\n display: flex;\n flex-direction: column;\n gap: var(--sc-product-line-item-line-gap, 6px);\n justify-content: space-between;\n align-items: stretch;\n width: 100%;\n border-bottom: none;\n }\n\n &__row {\n display: flex;\n gap: 18px;\n justify-content: space-between;\n align-items: stretch;\n width: 100%;\n\n &.stick-bottom {\n margin-top: auto;\n }\n }\n\n &__scratch-price {\n text-decoration: line-through;\n font-size: var(--sc-font-size-small);\n line-height: 1;\n color: var(--sc-input-help-text-color);\n white-space: nowrap;\n }\n\n &__remove-container {\n display: flex;\n gap: 6px;\n align-items: center;\n line-height: 1;\n cursor: pointer;\n color: var(--sc-input-help-text-color);\n font-size: var(--sc-input-help-text-font-size-medium);\n }\n\n &__add-review {\n sc-button {\n --sc-input-border-radius-small: var(--sc-input-border-radius-medium);\n }\n }\n\n &--has-review {\n border-bottom: solid 1px var(--sc-input-border-color, var(--sc-input-border));\n padding-top: var(--sc-spacing-small);\n padding-bottom: var(--sc-spacing-large);\n\n :host(:first-of-type) & {\n padding-top: 0;\n }\n }\n}\n\n.item__text {\n box-sizing: border-box;\n margin: 0px;\n min-width: 0px;\n display: flex;\n gap: 6px;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n flex: 1 1 0%;\n}\n\n.item__text-details {\n display: grid;\n gap: var(--sc-product-line-item-line-gap, 6px);\n}\n\n.item__title {\n box-sizing: border-box;\n min-width: 0px;\n margin: 0;\n color: var(--sc-line-item-title-color, var(--sc-input-label-color));\n font-size: var(--sc-font-size-medium);\n font-weight: var(--sc-font-weight-semibold);\n line-height: 1;\n cursor: pointer;\n display: -webkit-box;\n display: -moz-box;\n -webkit-box-orient: vertical;\n -moz-box-orient: vertical;\n -webkit-line-clamp: 3;\n -moz-box-lines: 3;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.item__suffix {\n flex: 1;\n box-sizing: border-box;\n margin: 0px;\n min-width: 0px;\n display: flex;\n flex-direction: column;\n -webkit-box-pack: start;\n justify-content: space-between;\n align-items: flex-end;\n min-width: 100px;\n margin-left: auto;\n align-self: center;\n}\n\n.product-line-item__removable .item__suffix {\n align-self: flex-start;\n}\n.product-line-item__editable .item__suffix {\n align-self: flex-start;\n}\n\n.product-line-item__purchasable-status {\n font-size: var(--sc-font-size-x-small);\n color: var(--sc-input-error-text-color);\n}\n\n.item__price {\n text-align: right;\n max-width: 100%;\n display: grid;\n gap: var(--sc-product-line-item-line-gap, 6px);\n}\n\n.item__description {\n color: var(--sc-price-label-color, var(--sc-input-help-text-color));\n font-size: var(--sc-price-label-font-size, var(--sc-input-help-text-font-size-medium));\n line-height: 1;\n display: flex;\n flex-wrap: wrap;\n flex-direction: column;\n gap: var(--sc-product-line-item-line-gap, 6px);\n text-wrap: pretty;\n\n &:last-child {\n align-items: flex-end;\n text-align: right;\n }\n}\n\n.item__image-placeholder {\n width: var(--sc-product-line-item-image-size, 65px);\n height: var(--sc-product-line-item-image-size, 65px);\n background-color: var(--sc-input-border-color, var(--sc-input-border));\n border-radius: 4px;\n flex: 0 0 var(--sc-product-line-item-image-size, 65px);\n}\n\n.item__image,\n.attachment-thumbnail {\n width: var(--sc-product-line-item-image-size, 65px);\n height: var(--sc-product-line-item-image-size, 65px);\n object-fit: cover;\n border-radius: 4px;\n border: solid 1px var(--sc-input-border-color, var(--sc-input-border));\n display: block;\n box-shadow: var(--sc-input-box-shadow);\n align-self: flex-start;\n}\n\n@container (max-width: 380px) {\n .item__image,\n .item__image-placeholder {\n display: var(--sc-product-line-item-mobile-image-display, none);\n }\n}\n\n.product__description {\n display: flex;\n gap: 0.5em;\n align-items: center;\n}\n\n.price {\n font-size: var(--sc-font-size-medium);\n font-weight: var(--sc-font-weight-semibold);\n color: var(--sc-input-label-color);\n line-height: 1;\n white-space: nowrap;\n display: flex;\n gap: 4px;\n align-items: baseline;\n}\n\n.price__description {\n font-size: var(--sc-font-size-small);\n line-height: 1;\n color: var(--sc-input-help-text-color);\n text-align: right;\n white-space: nowrap;\n}\n\n.item--is-rtl {\n &.price {\n text-align: right;\n }\n .item__price {\n text-align: left;\n }\n}\n\n.base {\n display: grid;\n gap: var(--sc-spacing-x-small);\n}\n\n.fee__description {\n color: var(--sc-input-help-text-color);\n}\n\nsc-quantity-select::part(base) {\n box-shadow: none;\n background-color: transparent;\n}\n\nsc-quantity-select::part(base):not(:focus-within) {\n border-color: transparent;\n}\n\nsc-quantity-select::part(input),\nsc-quantity-select::part(plus),\nsc-quantity-select::part(minus) {\n background-color: transparent;\n}\n\n// Line item details — collapsible region shared by bundle components and the note.\n.line-item-details {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n align-self: flex-start;\n gap: 0.25em;\n margin-top: var(--sc-spacing-xx-small);\n color: var(--sc-input-label-color);\n font-size: var(--sc-font-size-small);\n line-height: 1.4;\n background: transparent;\n outline: none;\n\n &:hover,\n &:focus,\n &:focus-visible {\n background: transparent;\n }\n\n &--clickable {\n cursor: pointer;\n }\n\n &__content {\n flex: 0 1 auto;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n\n // Collapsed: clamp to N lines (default 2) plus the 2px row gaps — `1lh` where supported, `1.4em` fallback.\n &:not(.line-item-details--is-expanded) &__content {\n max-height: calc(var(--sc-line-item-details-collapse-lines, 2) * 1.4em + (var(--sc-line-item-details-collapse-lines, 2) - 1) * 2px);\n max-height: calc(var(--sc-line-item-details-collapse-lines, 2) * 1lh + (var(--sc-line-item-details-collapse-lines, 2) - 1) * 2px);\n overflow: hidden;\n }\n\n &--is-expanded &__content {\n max-height: none;\n overflow: visible;\n }\n\n // Inline text flow (not flex) so a long name wraps like a paragraph instead of orphaning the \"N ×\" prefix on its own line.\n &__row {\n &:empty {\n display: none;\n }\n }\n\n // Quantity prefix (\"2 ×\") — only rendered when > 1, same color as the name.\n &__qty {\n margin-inline-end: 0.35em;\n }\n\n // Variant options (\"· Red · Large\") — muted, after the name.\n &__variant {\n margin-inline-start: 0.35em;\n color: var(--sc-color-gray-500, var(--sc-input-help-text-color));\n }\n\n &__note {\n color: var(--sc-color-gray-500, var(--sc-input-help-text-color));\n word-wrap: break-word;\n white-space: normal;\n max-width: 100%;\n }\n\n &__toggle {\n background: transparent;\n border: 0;\n padding: 0;\n align-self: flex-start;\n display: inline-flex;\n align-items: center;\n color: var(--sc-color-gray-500, var(--sc-input-help-text-color));\n cursor: pointer;\n border-radius: var(--sc-border-radius-small);\n transition: color 0.2s ease;\n appearance: none;\n -webkit-appearance: none;\n box-shadow: none;\n\n &:hover,\n &:focus,\n &:active {\n background: transparent;\n box-shadow: none;\n color: var(--sc-color-gray-700, var(--sc-input-label-color));\n }\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: 2px solid var(--sc-color-primary-500);\n outline-offset: 2px;\n }\n }\n\n // Match the design's text-sm (14px / 20px). Don't use --sc-font-size-small\n // here: it's 0.875em and compounds against the container, rendering the\n // label far too small (~11px).\n &__toggle-label {\n font-size: 14px;\n line-height: 20px;\n }\n\n // Don't override sc-icon's host display — it breaks its --width/--height sizing.\n &__toggle-icon {\n transition: transform 0.2s ease;\n will-change: transform;\n }\n\n &--is-expanded &__toggle-icon {\n transform: rotate(180deg);\n }\n}\n\n// Bundle product count next to the name — inherits the title's color/size (Figma).\n.item__title-count {\n margin-inline-start: 0.25em;\n}\n\n// Screen-reader-only text (shadow DOM can't reach the global helper class).\n.visually-hidden {\n position: absolute !important;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n","import { Component, h, Prop, State, Event, EventEmitter, Element } from '@stencil/core';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { isRtl } from '../../../functions/page-align';\nimport { getBundleComponentRowsFromLineItems } from '../../../functions/line-items';\nimport { Fee, ImageAttributes, LineItem } from '../../../types';\n\n/** Number of detail rows shown before the region collapses (matches the cart block default). */\nconst COLLAPSE_AFTER = 2;\n\n/**\n * @part base - The component base\n * @part product-line-item - The product line item\n * @part image - The product image\n * @part text - The product text\n * @part title - The product title\n * @part suffix - The product suffix\n * @part price - The product price\n * @part price__amount - The product price amount\n * @part price__description - The product price description\n * @part price__scratch - The product price scratch\n * @part static-quantity - The product static quantity\n * @part remove-icon__base - The product remove icon\n * @part quantity - The product quantity\n * @part quantity__minus - The product quantity minus\n * @part quantity__minus-icon - The product quantity minus icon\n * @part quantity__plus - The product quantity plus\n * @part quantity__plus-icon - The product quantity plus icon\n * @part quantity__input - The product quantity input\n * @part line-item__price-description - The line item price description\n * @part details - The collapsible details region (bundle components + note)\n * @part details__toggle - The details expand/collapse toggle button\n * @part details__component - A single bundle component row\n * @part details__variant - The variant options within a bundle component row\n * @part note - The line item note\n */\n@Component({\n tag: 'sc-product-line-item',\n styleUrl: 'sc-product-line-item.scss',\n shadow: true,\n})\nexport class ScProductLineItem {\n @Element() el: HTMLScProductLineItemElement;\n\n /** Image attributes. */\n @Prop() image: ImageAttributes;\n\n /** Product name */\n @Prop() name: string;\n\n /** Product monetary amount */\n @Prop() amount: string;\n\n /** The line item scratch amount */\n @Prop() scratch: string;\n\n /** Product display amount */\n @Prop() displayAmount: string;\n\n /** Product scratch display amount */\n @Prop() scratchDisplayAmount: string;\n\n /** Product line item fees. */\n @Prop() fees: Fee[];\n\n /** Price name */\n @Prop() price?: string;\n\n /** Product variant label */\n @Prop() variant: string = '';\n\n /** Quantity */\n @Prop() quantity: number;\n\n /** Recurring interval (i.e. monthly, once, etc.) */\n @Prop() interval: string;\n\n /** Trial text */\n @Prop() trial: string;\n\n /** Is the line item removable */\n @Prop() removable: boolean;\n\n /** Can we select the quantity */\n @Prop() editable: boolean = true;\n\n /** The max allowed. */\n @Prop() max: number;\n\n /** The SKU. */\n @Prop() sku: string = '';\n\n /** The purchasable status display */\n @Prop() purchasableStatus: string;\n\n /** The line item note */\n @Prop() note: string;\n\n /** The review button link. If set, a review button will be shown linking to this URL. */\n @Prop() reviewButtonLink: string = '';\n\n /**\n * Bundle component line items, rendered as a read-only nested list under\n * the main row when this line item is a bundle parent.\n */\n @Prop() bundleComponents: LineItem[] = [];\n\n /**\n * Show every bundle component (default), or only those with a selected\n * variant when set to `false`.\n */\n @Prop() showAllBundleItems: boolean = true;\n\n /** Separator between a bundle component's name and its variant options. */\n @Prop() separator: string = '·';\n\n /** Emitted when the quantity changes. */\n @Event({ bubbles: false }) scUpdateQuantity: EventEmitter<number>;\n\n /** Emitted when the quantity changes. */\n @Event({ bubbles: false }) scRemove: EventEmitter<void>;\n\n /** Collapse the bundle-items details region to the first two lines by default (matches the cart block). */\n @State() detailsExpanded = false;\n\n toggleDetails() {\n this.detailsExpanded = !this.detailsExpanded;\n }\n\n /**\n * Bundle items render in a single collapsible region. Collapsed, only the\n * first `COLLAPSE_AFTER` rows show; bundle components render one row each, so\n * the hidden count is exact (\"+N more\").\n */\n renderDetails() {\n const sep = (this.separator || '·').trim() || '·';\n const rows = getBundleComponentRowsFromLineItems(this.bundleComponents, this.quantity, this.showAllBundleItems, sep);\n if (!rows.length) return null;\n\n const bundleHidden = rows.length > COLLAPSE_AFTER ? rows.length - COLLAPSE_AFTER : 0;\n // Row count is authoritative for bundles (avoids a wrapped row falsely\n // triggering a toggle).\n const collapsible = this.detailsExpanded || bundleHidden > 0;\n\n const toggleLabel = this.detailsExpanded\n ? __('Show less', 'surecart')\n : bundleHidden > 0\n ? sprintf(/* translators: %d: number of hidden bundle items */ __('+%d more', 'surecart'), bundleHidden)\n : __('Show more', 'surecart');\n\n return (\n <div\n class={{\n 'line-item-details': true,\n 'line-item-details--clickable': collapsible,\n 'line-item-details--is-expanded': this.detailsExpanded,\n }}\n part=\"details\"\n onClick={() => collapsible && this.toggleDetails()}\n >\n <div class=\"line-item-details__content\">\n {rows.map(row => (\n <div class=\"line-item-details__row\" part=\"details__component\" key={row.id}>\n {row.qty > 1 && <span class=\"line-item-details__qty\">{row.qty} ×</span>}\n <span class=\"line-item-details__name\">{row.name}</span>\n {!!row.variants && (\n <span class=\"line-item-details__variant\" part=\"details__variant\">\n {sep} {row.variants}\n </span>\n )}\n </div>\n ))}\n </div>\n\n {collapsible && (\n <button\n class=\"line-item-details__toggle\"\n type=\"button\"\n part=\"details__toggle\"\n aria-expanded={this.detailsExpanded ? 'true' : 'false'}\n onClick={e => {\n e.stopPropagation();\n this.toggleDetails();\n }}\n >\n <span class=\"line-item-details__toggle-label\">{toggleLabel}</span>\n <sc-icon class=\"line-item-details__toggle-icon\" name=\"chevron-down\" aria-hidden=\"true\" style={{ width: '16px', height: '16px' }}></sc-icon>\n </button>\n )}\n </div>\n );\n }\n\n render() {\n const isImageFallback = this.image?.type === 'fallback';\n // Number of products a bundle contains — shown as \"(N)\" next to the name.\n const bundleCount = this.bundleComponents?.length || 0;\n const hasDescriptionDetails = !!this.variant || !!this.price || !!this.sku || !!this.purchasableStatus;\n const hasTrialFeesDetails = !!this.trial || (this.fees || []).some(fee => fee?.display_amount || fee?.description);\n const hasMetaRow = hasDescriptionDetails || hasTrialFeesDetails;\n\n return (\n <div class=\"base\" part=\"base\">\n <div\n part=\"product-line-item\"\n class={{\n 'item': true,\n 'item--has-image': !!this.image?.src,\n 'item--has-review': !!this.reviewButtonLink,\n 'item--is-rtl': isRtl(),\n 'product-line-item__editable': this.editable,\n 'product-line-item__removable': this.removable,\n }}\n >\n {!!this.image?.src ? (\n <img {...(this.image as any)} part={isImageFallback ? 'placeholder__image' : 'image'} class={isImageFallback ? 'item__image-placeholder' : 'item__image'} />\n ) : (\n <div class=\"item__image-placeholder\" part=\"placeholder__image\"></div>\n )}\n <div class=\"item__text-container\">\n <div class=\"item__row\">\n <div class=\"item__title\" part=\"title\">\n <slot name=\"title\">{this.name}</slot>\n {bundleCount > 0 && (\n <span class=\"item__title-count\" aria-hidden=\"true\">\n ({bundleCount})\n </span>\n )}\n {bundleCount > 0 && <span class=\"visually-hidden\">{sprintf(_n('Includes %d item', 'Includes %d items', bundleCount, 'surecart'), bundleCount)}</span>}\n </div>\n <div class=\"price\" part=\"price__amount\">\n {!!this.scratch && this.scratch !== this.amount && <span class=\"item__scratch-price\">{this.scratch}</span>}\n {this.amount}\n <div class=\"price__description\" part=\"price__description\">\n {this.interval}\n </div>\n </div>\n </div>\n\n {hasMetaRow && (\n <div class=\"item__row\">\n <div class=\"item__description\" part=\"description\">\n {this.variant && <div>{this.variant}</div>}\n {this.price && <div>{this.price}</div>}\n {this.sku && (\n <div>\n {__('SKU:', 'surecart')} {this.sku}\n </div>\n )}\n {!!this.purchasableStatus && <div>{this.purchasableStatus}</div>}\n </div>\n\n <div class=\"item__description\" part=\"trial-fees\">\n {!!this.trial && <div>{this.trial}</div>}\n {(this.fees || []).map(fee => {\n return (\n <div>\n {fee?.display_amount} {fee?.description}\n </div>\n );\n })}\n </div>\n </div>\n )}\n\n {this.renderDetails()}\n\n {/* Below the details region to match the cart's order: variant/bundle details first, note last. */}\n {!!this.note && (\n <div class=\"item__description\">\n <sc-product-line-item-note note={this.note} exportparts=\"base:note\" />\n </div>\n )}\n\n <div class=\"item__row stick-bottom\">\n {this.editable ? (\n <sc-quantity-select\n max={this.max || Infinity}\n exportparts=\"base:quantity, minus:quantity__minus, minus-icon:quantity__minus-icon, plus:quantity__plus, plus-icon:quantity__plus-icon, input:quantity__input\"\n clickEl={this.el}\n quantity={this.quantity}\n size=\"small\"\n onScChange={e => e.detail && this.scUpdateQuantity.emit(e.detail)}\n aria-label={\n /** translators: %1$s: product name, %2$s: product price name */\n sprintf(__('Change Quantity - %1$s %2$s', 'surecart'), this.name, this.price)\n }\n productName={this.name}\n ></sc-quantity-select>\n ) : (\n <span class=\"item__description\" part=\"static-quantity\">\n {__('Qty:', 'surecart')} {this.quantity}\n </span>\n )}\n {!!this.reviewButtonLink && (\n <div class=\"item__add-review\">\n <sc-button size=\"small\" href={this.reviewButtonLink} target=\"_blank\">\n {__('Review Product', 'surecart')}\n </sc-button>\n </div>\n )}\n {!!this.removable && (\n <div\n class=\"item__remove-container\"\n onClick={() => this.scRemove.emit()}\n onKeyDown={e => {\n if (e.key === 'Enter') {\n this.scRemove.emit();\n }\n }}\n // translators: Remove Item - Product Name Product Price Name\n aria-label={sprintf(__('Remove Item - %1$s %2$s', 'surecart'), this.name, this.amount)}\n tabIndex={0}\n >\n <sc-icon exportparts=\"base:remove-icon__base\" class=\"item__remove\" name=\"x\" />\n <span class=\"item__remove-text\">{__('Remove', 'surecart')}</span>\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n );\n }\n}\n",".line-item-note {\n display: flex;\n align-items: flex-start;\n gap: 0.25em;\n min-height: 1.5em;\n\n &--clickable {\n cursor: pointer;\n }\n\n &__text {\n line-height: 1.4;\n flex: 1;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n line-clamp: 1;\n -webkit-line-clamp: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n transition: all 0.2s;\n }\n\n &--is-expanded .line-item-note__text {\n display: block;\n line-clamp: unset;\n -webkit-line-clamp: unset;\n overflow: visible;\n text-overflow: unset;\n }\n\n &__toggle {\n background: none;\n border: none;\n color: var(--sc-color-gray-500);\n cursor: pointer;\n padding: 0;\n align-self: flex-start;\n transition: opacity 0.2s ease;\n border-radius: var(--sc-border-radius-small);\n\n &:hover {\n opacity: 0.8;\n }\n\n &:focus-visible {\n outline: 2px solid var(--sc-color-primary-500);\n outline-offset: 2px;\n }\n\n &:focus {\n outline: 2px solid var(--sc-color-primary-500);\n outline-offset: 2px;\n }\n }\n}\n","import { Component, h, Prop, State, Element } from '@stencil/core';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * @part base - The note container\n */\n@Component({\n tag: 'sc-product-line-item-note',\n styleUrl: 'sc-product-line-item-note.scss',\n shadow: true,\n})\nexport class ScProductLineItemNote {\n @Element() el: HTMLElement;\n @Prop() note: string;\n @State() expanded = false;\n @State() isOverflowing = false;\n\n private noteEl?: HTMLDivElement;\n private resizeObserver?: ResizeObserver;\n private mutationObserver?: MutationObserver;\n\n componentDidLoad() {\n this.setupObservers();\n this.checkOverflow();\n }\n\n disconnectedCallback() {\n this.cleanupObservers();\n }\n\n setupObservers() {\n if (!this.noteEl) return;\n\n // ResizeObserver for container size changes\n if (typeof ResizeObserver !== 'undefined') {\n this.resizeObserver = new ResizeObserver(() => {\n this.checkOverflow();\n });\n this.resizeObserver.observe(this.noteEl);\n }\n\n // MutationObserver for content changes\n if (typeof MutationObserver !== 'undefined') {\n this.mutationObserver = new MutationObserver(() => {\n this.checkOverflow();\n });\n this.mutationObserver.observe(this.noteEl, {\n characterData: true,\n subtree: true,\n childList: true,\n });\n }\n }\n\n cleanupObservers() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n this.resizeObserver = undefined;\n }\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = undefined;\n }\n }\n\n checkOverflow() {\n if (!this.noteEl) return;\n this.isOverflowing = this.noteEl.scrollHeight > this.noteEl.clientHeight;\n }\n\n toggle() {\n this.expanded = !this.expanded;\n }\n\n render() {\n if (!this.note) return null;\n\n return (\n <div class=\"base\" part=\"base\">\n <div\n class={{\n 'line-item-note': true,\n 'line-item-note--is-expanded': this.expanded,\n 'line-item-note--clickable': this.isOverflowing || this.expanded,\n }}\n tabIndex={this.isOverflowing || this.expanded ? 0 : undefined}\n onClick={() => (this.isOverflowing || this.expanded) && this.toggle()}\n >\n <div ref={el => (this.noteEl = el as HTMLDivElement)} class=\"line-item-note__text\">\n {this.note}\n </div>\n\n {(this.isOverflowing || this.expanded) && (\n <button\n class=\"line-item-note__toggle\"\n type=\"button\"\n onClick={e => {\n e.stopPropagation();\n this.toggle();\n }}\n title={this.expanded ? __('Collapse note', 'surecart') : __('Expand note', 'surecart')}\n >\n <slot name=\"icon\">\n <sc-icon name={this.expanded ? 'chevron-up' : 'chevron-down'} style={{ width: '16px', height: '16px' }}></sc-icon>\n </slot>\n </button>\n )}\n </div>\n </div>\n );\n }\n}\n",":host {\n --focus-ring: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);\n --border-radius: var(--sc-quantity-border-radius, var(--sc-input-border-radius-small));\n display: inline-block;\n}\n\n.input__control {\n text-align: center;\n line-height: 1;\n border: none;\n flex: 1;\n max-width: var(--sc-quantity-input-max-width, 35px);\n background-color: var(--sc-input-control-background-color, var(--sc-color-white));\n color: var(--sc-input-control-color, var(--sc-color-black));\n -moz-appearance: textfield;\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active {\n box-shadow: 0 0 0 var(--sc-input-height-large) var(--sc-input-background-color-hover) inset !important;\n -webkit-text-fill-color: var(--sc-input-color);\n }\n\n &::placeholder {\n color: var(--sc-input-placeholder-color);\n user-select: none;\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.quantity--trigger {\n cursor: pointer;\n white-space: nowrap;\n}\n\n.quantity {\n position: relative;\n display: inline-block;\n width: var(--sc-quantity-select-width, 100px);\n height: var(--sc-quantity-control-height, var(--sc-input-height-small));\n display: flex;\n align-items: stretch;\n font-family: var(--sc-input-font-family);\n font-weight: var(--sc-input-font-weight);\n letter-spacing: var(--sc-input-letter-spacing);\n background-color: var(--sc-input-background-color);\n border: var(--sc-input-border);\n border-radius: var(--border-radius);\n vertical-align: middle;\n box-shadow: var(--sc-input-box-shadow);\n transition: var(--sc-input-transition, var(--sc-transition-medium)) color, var(--sc-input-transition, var(--sc-transition-medium)) border,\n var(--sc-input-transition, var(--sc-transition-medium)) box-shadow;\n\n &:hover:not(.quantity--disabled) {\n background-color: var(--sc-input-background-color-hover);\n border-color: var(--sc-input-border-color-hover);\n\n .quantity__control {\n color: var(--sc-input-color-hover);\n }\n }\n\n &.quantity--focused:not(.quantity--disabled) {\n background-color: var(--sc-input-background-color-focus);\n border-color: var(--sc-input-border-color-focus);\n box-shadow: var(--focus-ring);\n\n .quantity__control {\n color: var(--sc-input-color-focus);\n }\n }\n\n &.quantity--disabled {\n background-color: var(--sc-input-background-color-disabled);\n border-color: var(--sc-input-border-color-disabled);\n opacity: 0.5;\n cursor: not-allowed;\n\n .input__control {\n color: var(--sc-input-color-disabled);\n\n &::placeholder {\n color: var(--sc-input-placeholder-color-disabled);\n }\n }\n }\n}\n\n.button__decrease,\n.button__increase {\n display: inline-block;\n text-align: center;\n vertical-align: middle;\n line-height: 0;\n height: auto;\n top: 1px;\n bottom: 1px;\n width: 32px;\n background: var(--sc-input-background-color);\n color: var(--sc-input-help-text-color);\n cursor: pointer;\n font-size: 13px;\n user-select: none;\n border-width: 0;\n padding: 0;\n\n &:hover:not(.button--disabled) {\n .quantity__control {\n color: var(--sc-input-color-hover);\n }\n }\n\n &.button--disabled {\n background-color: var(--sc-input-background-color-disabled);\n border-color: var(--sc-input-border-color-disabled);\n opacity: 0.5;\n cursor: not-allowed;\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Small\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n.quantity--small {\n width: var(--sc-quantity-select-width-small, 76px);\n height: var(--sc-quantity-control-height-small, 26px);\n\n .button__decrease,\n .button__increase {\n width: 24px;\n border: none;\n }\n .input__control {\n max-width: 24px;\n }\n}\n\n.button__decrease {\n left: 1px;\n border-radius: var(--border-radius) 0 0 var(--border-radius);\n border-right: var(--sc-input-border);\n}\n.button__increase {\n right: 1px;\n border-radius: 0 var(--border-radius) var(--border-radius) 0;\n border-left: var(--sc-input-border);\n}\n\n.quantity--is-rtl {\n .button__decrease {\n right: 1px;\n border-left: var(--sc-input-border);\n border-right: 0;\n }\n .button__increase {\n left: 1px;\n border-right: var(--sc-input-border);\n border-left: 0;\n }\n}\n","import { Component, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { speak } from '@wordpress/a11y';\nimport { isRtl } from '../../../functions/page-align';\n\n/**\n * @part base - The elements base wrapper.\n * @part input - The input control.\n * @part minus - The minus control.\n * @part minus-icon - The minus icon.\n * @part plus - The plus control.\n * @part plus-icon - The plus icon.\n */\n@Component({\n tag: 'sc-quantity-select',\n styleUrl: 'sc-quantity-select.scss',\n shadow: true,\n})\nexport class ScQuantitySelect {\n @Element() el: HTMLScQuantitySelectElement;\n private input: HTMLInputElement;\n\n @Prop() clickEl?: HTMLElement;\n\n @Prop() disabled: boolean;\n @Prop() max: number = Infinity;\n @Prop() min: number = 1;\n @Prop({ mutable: true, reflect: true }) quantity: number = 0;\n @Prop() productName: string = 'Product';\n\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** Inputs focus */\n @Prop({ mutable: true, reflect: true }) hasFocus: boolean;\n\n @Event({ cancelable: true }) scChange: EventEmitter<number>;\n\n /** Emitted when the control receives input. */\n @Event({ cancelable: true }) scInput: EventEmitter<number>;\n\n /** Emitted when the control gains focus. */\n @Event() scFocus: EventEmitter<void>;\n\n /** Emitted when the control loses focus. */\n @Event() scBlur: EventEmitter<void>;\n\n decrease() {\n if (this.disabled) return;\n this.quantity = Math.max(this.quantity - 1, this.min);\n // translators: %1$s is the product name\n speak(sprintf(__('Decreased %1$s quantity by one', 'surecart'), this.productName), 'assertive');\n this.scChange.emit(this.quantity);\n this.scInput.emit(this.quantity);\n }\n\n increase() {\n if (this.disabled) return;\n this.quantity = Math.min(this.quantity + 1, this.max);\n // translators: %1$s is the product name\n speak(sprintf(__('Increased %1$s quantity by one', 'surecart'), this.productName), 'assertive');\n this.scChange.emit(this.quantity);\n this.scInput.emit(this.quantity);\n }\n\n handleBlur() {\n this.hasFocus = false;\n this.scBlur.emit();\n }\n\n handleFocus() {\n this.hasFocus = true;\n this.scFocus.emit();\n }\n\n handleChange() {\n this.quantity = parseInt(this.input.value) > this.max ? this.max : parseInt(this.input.value);\n // translators: %1$s is the product name, %2$s is the quantity\n speak(sprintf(__('Quantity of %1$s changed to %2$s', 'surecart'), this.productName, this.quantity), 'assertive');\n this.scChange.emit(this.quantity);\n }\n\n handleInput() {\n this.quantity = parseInt(this.input.value);\n this.scInput.emit(this.quantity);\n }\n\n render() {\n return (\n <div\n part=\"base\"\n class={{\n 'quantity': true,\n // States\n 'quantity--focused': this.hasFocus,\n 'quantity--disabled': this.disabled,\n 'quantity--is-rtl': isRtl(),\n 'quantity--small': this.size === 'small',\n }}\n >\n <button\n part=\"minus\"\n aria-label={\n /** translators: %1$s: product name */\n sprintf(__('Decrease %1$s quantity by one', 'surecart'), this.productName)\n }\n aria-disabled={this.disabled || (this.quantity <= this.min && this.min > 1)}\n class={{ 'button__decrease': true, 'button--disabled': this.quantity <= this.min && this.min > 1 }}\n onClick={() => this.quantity > this.min && this.decrease()}\n disabled={this.disabled || (this.quantity <= this.min && this.min > 1)}\n >\n <sc-icon name=\"minus\" exportparts=\"base:minus__icon\"></sc-icon>\n </button>\n\n <input\n part=\"input\"\n class=\"input__control\"\n ref={el => (this.input = el as HTMLInputElement)}\n step=\"1\"\n type=\"number\"\n max={this.max}\n min={this.min}\n value={this.quantity}\n disabled={this.disabled}\n autocomplete=\"off\"\n role=\"spinbutton\"\n aria-valuemax={this.max}\n aria-valuemin={this.min}\n aria-valuenow={this.quantity}\n aria-disabled={this.disabled}\n onChange={() => this.handleChange()}\n onInput={() => this.handleInput()}\n onFocus={() => this.handleFocus()}\n onBlur={() => this.handleBlur()}\n aria-label={\n /** translators: %1$s: product name */\n sprintf(__('Quantity input for %1$s product', 'surecart'), this.productName)\n }\n />\n\n <button\n part=\"plus\"\n aria-label={\n /** translators: %1$s: product name */\n sprintf(__('Increase %1$s quantity by one', 'surecart'), this.productName)\n }\n class={{ 'button__increase': true, 'button--disabled': this.quantity >= this.max }}\n onClick={() => this.quantity < this.max && this.increase()}\n aria-disabled={this.disabled || this.quantity >= this.max}\n disabled={this.disabled || this.quantity >= this.max}\n >\n <sc-icon name=\"plus\" exportparts=\"base:plus__icon\"></sc-icon>\n </button>\n </div>\n );\n }\n}\n","/**\n * @prop --track-color: The color of the spinner's track.\n * @prop --indicator-color: The color of the spinner's indicator.\n * @prop --stroke-width: The width of the indicator.\n */\n:host {\n --track-color: #0d131e20;\n --indicator-color: var(--sc-color-primary-500);\n --stroke-width: 2px;\n --spinner-size: 1em;\n\n display: inline-block;\n}\n\n.spinner {\n display: inline-block;\n width: var(--spinner-size);\n height: var(--spinner-size);\n border-radius: 50%;\n border: solid var(--stroke-width) var(--track-color);\n border-top-color: var(--indicator-color);\n border-right-color: var(--indicator-color);\n animation: 1s linear infinite spin;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'sc-spinner',\n styleUrl: 'sc-spinner.scss',\n shadow: true,\n})\nexport class ScSpinner {\n render() {\n return <span part=\"base\" class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\"></span>;\n }\n}\n"],"version":3}