JezK

Edit File: sc-cc-logo_2.cjs.entry.js.map

{"file":"sc-cc-logo.sc-tooltip.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/ui/cc-logo/sc-cc-logo.css?tag=sc-cc-logo&encapsulation=shadow","src/components/ui/cc-logo/sc-cc-logo.tsx","src/components/ui/tooltip/sc-tooltip.scss?tag=sc-tooltip&encapsulation=shadow","src/components/ui/tooltip/sc-tooltip.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.cc-logo {\n border-radius: var(--sc-cc-border-radius, 4px);\n line-height: 0;\n overflow:hidden;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @part base - The elements base wrapper.\n */\n\n@Component({\n tag: 'sc-cc-logo',\n styleUrl: 'sc-cc-logo.css',\n shadow: true,\n})\nexport class ScCcLogo {\n @Prop() brand: string;\n renderLogo() {\n if (['visa', 'mastercard', 'amex', 'discover', 'diners', 'jcb', 'unionpay'].includes(this.brand)) {\n return <sc-icon name={this.brand} style={{ '--height': '0.63em' }}></sc-icon>;\n }\n return <sc-icon name=\"creditcard\" style={{ '--height': '0.63em' }}></sc-icon>;\n }\n render() {\n return (\n <div class=\"cc-logo\" part=\"base\">\n {this.renderLogo()}\n </div>\n );\n }\n}\n",".tooltip {\n position: relative;\n\n &--has-width .tooltip-text {\n white-space: normal;\n min-width: var(--sc-tooltip-width);\n max-width: var(--sc-tooltip-width);\n }\n}\n\n.tooltip-text {\n position: fixed;\n background: var(--sc-color-gray-900);\n border-radius: var(--sc-border-radius-small);\n padding: var(--sc-spacing-small);\n font-family: var(--sc-input-font-family);\n font-size: var(--sc-input-font-size-small);\n white-space: nowrap;\n line-height: 1.2;\n color: var(--sc-color-white);\n z-index: 99999;\n\n // Base arrow — a CSS triangle whose direction is set by `border-*-color`\n // on the modifier classes below. (4×7px transparent borders; the placement\n // class fills in exactly one side.)\n &:after {\n content: '';\n position: absolute;\n height: 0;\n width: 0;\n border: 7px solid transparent;\n }\n}\n\n// =============================================================================\n// Placement — controls where the arrow sits + which way it points. Using\n// modifier classes on `.tooltip` (instead of `:host([placement])`) keeps the\n// selector simple and reliably more specific than the typed-color rules\n// below, regardless of source order.\n// =============================================================================\n\n.tooltip--top .tooltip-text:after {\n top: calc(100% - 1px);\n left: 50%;\n transform: translateX(-50%);\n border-top-color: var(--sc-color-gray-900);\n}\n\n.tooltip--bottom .tooltip-text:after {\n bottom: calc(100% - 1px);\n left: 50%;\n transform: translateX(-50%);\n border-bottom-color: var(--sc-color-gray-900);\n}\n\n.tooltip--left .tooltip-text:after {\n left: calc(100% - 1px);\n top: 50%;\n transform: translateY(-50%);\n border-left-color: var(--sc-color-gray-900);\n}\n\n.tooltip--right .tooltip-text:after {\n right: calc(100% - 1px);\n top: 50%;\n transform: translateY(-50%);\n border-right-color: var(--sc-color-gray-900);\n}\n\n// =============================================================================\n// Typed variants — accent the bubble background AND the matching arrow side\n// per placement. A mixin keeps every type × placement pairing in one block,\n// so adding a new placement (or new type) is a one-line change.\n// =============================================================================\n\n@mixin typed($type-class, $color-var) {\n .#{$type-class} .tooltip-text {\n background: $color-var;\n }\n .#{$type-class}.tooltip--top .tooltip-text:after { border-top-color: $color-var; }\n .#{$type-class}.tooltip--bottom .tooltip-text:after { border-bottom-color: $color-var; }\n .#{$type-class}.tooltip--left .tooltip-text:after { border-left-color: $color-var; }\n .#{$type-class}.tooltip--right .tooltip-text:after { border-right-color: $color-var; }\n}\n\n@include typed('tooltip--primary', var(--sc-color-primary-500));\n@include typed('tooltip--success', var(--sc-color-success-500));\n@include typed('tooltip--info', var(--sc-color-info-500));\n@include typed('tooltip--warning', var(--sc-color-warning-500));\n@include typed('tooltip--danger', var(--sc-color-danger-500));\n\n// =============================================================================\n// `dark` — the WordPress admin tooltip look. Flat near-black background,\n// white text, no arrow. Same surface as the WP \"View options\" / icon-button\n// tooltip so it sits naturally next to native WP UI.\n// =============================================================================\n\n.tooltip--dark .tooltip-text {\n background: #1e1e1e;\n color: #ffffff;\n padding: 4px 8px;\n font-size: 12px;\n border-radius: 2px;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);\n\n // No arrow — WP's tooltip is a plain pill. Hide the pseudo entirely\n // so callers don't have to remember to set `--no-arrow`.\n &:after {\n display: none;\n }\n}\n","import { Component, h, Prop, State, Element, Listen } from '@stencil/core';\n\n/**\n * @part base - The elements base wrapper.\n * @part text - The tooltip text.\n */\n@Component({\n tag: 'sc-tooltip',\n styleUrl: 'sc-tooltip.scss',\n shadow: true,\n})\nexport class ScTooltip {\n @Element() el: HTMLScTooltipElement;\n private tooltip: HTMLDivElement;\n\n /** Open or not */\n @Prop({ mutable: true }) open: boolean;\n\n /** Tooltip fixed width */\n @Prop() width: string;\n\n /** Tooltip text */\n @Prop() text: string;\n\n /** Freeze open or closed. */\n @Prop() freeze: boolean;\n\n /** The tooltip's padding. */\n @Prop() padding: number = 5;\n\n /**\n * The tooltip's type.\n *\n * - `info` (default) — current SureCart blue/info style with a colored arrow.\n * - `primary`/`success`/`warning`/`danger` — accent-colored variants.\n * - `text` — legacy passthrough used by long-form tooltips.\n * - `dark` — flat black background with white text, matching the\n * WordPress admin button tooltip (\"View options\"-style). No colored\n * accent, no arrow, no padding flourish — just the WP look.\n */\n @Prop({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' | 'dark' = 'info';\n\n /** The tooltip's placement relative to the trigger. */\n @Prop({ reflect: true }) placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\n\n @State() top: number = -10000;\n @State() left: number = -10000;\n\n // Reposition after render, once the bubble ref exists — a post-watch\n // setTimeout raced the first render and could leave the bubble parked.\n componentDidRender() {\n this.handleWindowScroll();\n }\n\n @Listen('scroll', { target: 'window' })\n @Listen('resize', { target: 'window' })\n handleWindowScroll() {\n if (!this.open) return;\n if (!this.tooltip) return;\n\n const tooltipRect = this.tooltip.getBoundingClientRect();\n const triggerRect = this.el.getBoundingClientRect();\n\n let top: number;\n let left: number;\n\n if (this.placement === 'bottom') {\n top = triggerRect.bottom + this.padding;\n left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;\n } else if (this.placement === 'left') {\n top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;\n left = triggerRect.left - tooltipRect.width - this.padding;\n } else if (this.placement === 'right') {\n top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;\n left = triggerRect.right + this.padding;\n } else {\n // 'top' — original behavior, preserved as the default.\n top = triggerRect.top - (tooltipRect.height + this.padding);\n left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2 + this.padding;\n }\n\n // clientWidth, not innerWidth: the bubble must not sit under the scrollbar.\n // Overflowing top/bottom bubbles align to the trigger's edge — pinning\n // them to the viewport edge reads as clipped.\n const edgeMargin = 8;\n const maxLeft = document.documentElement.clientWidth - tooltipRect.width - edgeMargin;\n if (this.placement === 'top' || this.placement === 'bottom') {\n if (left > maxLeft) {\n left = triggerRect.right - tooltipRect.width;\n } else if (left < edgeMargin) {\n left = triggerRect.left;\n }\n }\n this.top = top;\n this.left = Math.min(Math.max(left, edgeMargin), Math.max(maxLeft, edgeMargin));\n }\n\n handleBlur() {\n if (this.freeze) return;\n this.open = false;\n }\n handleClick() {\n if (this.freeze) return;\n this.open = true;\n }\n handleFocus() {\n if (this.freeze) return;\n this.open = true;\n }\n handleMouseOver() {\n if (this.freeze) return;\n this.open = true;\n }\n handleMouseOut() {\n if (this.freeze) return;\n this.open = false;\n }\n\n render() {\n if (!this.text) {\n return <slot />;\n }\n\n return (\n <span\n part=\"base\"\n class={{\n 'tooltip': true,\n // Types\n 'tooltip--primary': this.type === 'primary',\n 'tooltip--success': this.type === 'success',\n 'tooltip--info': this.type === 'info',\n 'tooltip--warning': this.type === 'warning',\n 'tooltip--danger': this.type === 'danger',\n 'tooltip--dark': this.type === 'dark',\n 'tooltip--top': this.placement === 'top',\n 'tooltip--bottom': this.placement === 'bottom',\n 'tooltip--left': this.placement === 'left',\n 'tooltip--right': this.placement === 'right',\n 'tooltip--has-width': !!this.width,\n }}\n onClick={() => this.handleClick()}\n onBlur={() => this.handleBlur()}\n onFocus={() => this.handleFocus()}\n onMouseOver={() => this.handleMouseOver()}\n onMouseOut={() => this.handleMouseOut()}\n >\n <slot></slot>\n {!!this.open && (\n <div\n part=\"text\"\n ref={el => (this.tooltip = el as HTMLDivElement)}\n class=\"tooltip-text\"\n style={{\n top: `${this.top}px`,\n left: `${this.left}px`,\n ...(this.width ? { '--sc-tooltip-width': this.width } : {}),\n }}\n >\n {this.text}\n </div>\n )}\n </span>\n );\n }\n}\n"],"version":3}