@aquera/nile-elements 0.1.32 → 0.1.33-beta-1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -2
- package/demo/index.html +262 -27
- package/demo/variables.css +17 -0
- package/demo/variables_v2.css +17 -0
- package/dist/{fixture-161dee0b.cjs.js → fixture-d5b55278.cjs.js} +3 -3
- package/dist/fixture-d5b55278.cjs.js.map +1 -0
- package/dist/{fixture-372df3b0.esm.js → fixture-df8b52d7.esm.js} +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/internal/animate.cjs.js +1 -1
- package/dist/internal/animate.cjs.js.map +1 -1
- package/dist/internal/animate.esm.js +1 -1
- package/dist/nile-accordion/nile-accordian.test.cjs.js +1 -1
- package/dist/nile-accordion/nile-accordian.test.esm.js +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.test.cjs.js +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.test.esm.js +1 -1
- package/dist/nile-avatar/nile-avatar.test.cjs.js +1 -1
- package/dist/nile-avatar/nile-avatar.test.esm.js +1 -1
- package/dist/nile-badge/nile-badge.test.cjs.js +1 -1
- package/dist/nile-badge/nile-badge.test.esm.js +1 -1
- package/dist/nile-button/nile-button.test.cjs.js +1 -1
- package/dist/nile-button/nile-button.test.esm.js +1 -1
- package/dist/nile-button-toggle-group/nile-button-toggle-group.test.cjs.js +1 -1
- package/dist/nile-button-toggle-group/nile-button-toggle-group.test.esm.js +1 -1
- package/dist/nile-calendar/nile-calendar.test.cjs.js +1 -1
- package/dist/nile-calendar/nile-calendar.test.esm.js +1 -1
- package/dist/nile-card/nile-card.test.cjs.js +1 -1
- package/dist/nile-card/nile-card.test.esm.js +1 -1
- package/dist/nile-checkbox/nile-checkbox.test.cjs.js +1 -1
- package/dist/nile-checkbox/nile-checkbox.test.esm.js +1 -1
- package/dist/nile-chip/nile-chip.test.cjs.js +1 -1
- package/dist/nile-chip/nile-chip.test.esm.js +1 -1
- package/dist/nile-dialog/nile-dialog.test.cjs.js +1 -1
- package/dist/nile-dialog/nile-dialog.test.esm.js +1 -1
- package/dist/nile-drawer/nile-drawer.test.cjs.js +1 -1
- package/dist/nile-drawer/nile-drawer.test.esm.js +1 -1
- package/dist/nile-dropdown/nile-dropdown.test.cjs.js +1 -1
- package/dist/nile-dropdown/nile-dropdown.test.esm.js +1 -1
- package/dist/nile-empty-state/nile-empty-state.test.cjs.js +1 -1
- package/dist/nile-empty-state/nile-empty-state.test.esm.js +1 -1
- package/dist/nile-error-message/nile-error-message.test.cjs.js +1 -1
- package/dist/nile-error-message/nile-error-message.test.esm.js +1 -1
- package/dist/nile-form-group/nile-form-group.test.cjs.js +1 -1
- package/dist/nile-form-group/nile-form-group.test.esm.js +1 -1
- package/dist/nile-form-help-text/nile-form-help-text.test.cjs.js +1 -1
- package/dist/nile-form-help-text/nile-form-help-text.test.esm.js +1 -1
- package/dist/nile-hero/nile-hero.test.cjs.js +1 -1
- package/dist/nile-hero/nile-hero.test.esm.js +1 -1
- package/dist/nile-icon/nile-icon.test.cjs.js +1 -1
- package/dist/nile-icon/nile-icon.test.esm.js +1 -1
- package/dist/nile-input/nile-input.css.cjs.js +1 -1
- package/dist/nile-input/nile-input.css.cjs.js.map +1 -1
- package/dist/nile-input/nile-input.css.esm.js +8 -0
- package/dist/nile-input/nile-input.test.cjs.js +1 -1
- package/dist/nile-input/nile-input.test.esm.js +1 -1
- package/dist/nile-link/nile-link.test.cjs.js +1 -1
- package/dist/nile-link/nile-link.test.esm.js +1 -1
- package/dist/nile-loader/nile-loader.test.cjs.js +1 -1
- package/dist/nile-loader/nile-loader.test.esm.js +1 -1
- package/dist/nile-menu/nile-menu.cjs.js +1 -1
- package/dist/nile-menu/nile-menu.cjs.js.map +1 -1
- package/dist/nile-menu/nile-menu.esm.js +2 -2
- package/dist/nile-popover/nile-popover.test.cjs.js +1 -1
- package/dist/nile-popover/nile-popover.test.esm.js +1 -1
- package/dist/nile-popup/nile-popup.test.cjs.js +1 -1
- package/dist/nile-popup/nile-popup.test.esm.js +1 -1
- package/dist/nile-progress-bar/nile-progress-bar.test.cjs.js +1 -1
- package/dist/nile-progress-bar/nile-progress-bar.test.esm.js +1 -1
- package/dist/nile-radio/nile-radio.test.cjs.js +1 -1
- package/dist/nile-radio/nile-radio.test.esm.js +1 -1
- package/dist/nile-radio-group/nile-radio-group.test.cjs.js +1 -1
- package/dist/nile-radio-group/nile-radio-group.test.esm.js +1 -1
- package/dist/nile-select/nile-select.test.cjs.js +1 -1
- package/dist/nile-select/nile-select.test.esm.js +1 -1
- package/dist/nile-slide-toggle/nile-slide-toggle.test.cjs.js +1 -1
- package/dist/nile-slide-toggle/nile-slide-toggle.test.esm.js +1 -1
- package/dist/nile-tab-group/nile-tab-group.test.cjs.js +1 -1
- package/dist/nile-tab-group/nile-tab-group.test.esm.js +1 -1
- package/dist/nile-table/nile-table.cjs.js.map +1 -1
- package/dist/nile-textarea/nile-textarea.test.cjs.js +1 -1
- package/dist/nile-textarea/nile-textarea.test.esm.js +1 -1
- package/dist/nile-tooltip/index.cjs.js +1 -1
- package/dist/nile-tooltip/index.esm.js +1 -1
- package/dist/nile-tooltip/nile-tooltip-utils.cjs.js +2 -0
- package/dist/nile-tooltip/nile-tooltip-utils.cjs.js.map +1 -0
- package/dist/nile-tooltip/nile-tooltip-utils.esm.js +1 -0
- package/dist/nile-tooltip/nile-tooltip.cjs.js +1 -1
- package/dist/nile-tooltip/nile-tooltip.cjs.js.map +1 -1
- package/dist/nile-tooltip/nile-tooltip.css.cjs.js +1 -1
- package/dist/nile-tooltip/nile-tooltip.css.cjs.js.map +1 -1
- package/dist/nile-tooltip/nile-tooltip.css.esm.js +59 -56
- package/dist/nile-tooltip/nile-tooltip.esm.js +23 -28
- package/dist/nile-tooltip/nile-tooltip.test.cjs.js +2 -0
- package/dist/nile-tooltip/nile-tooltip.test.cjs.js.map +1 -0
- package/dist/nile-tooltip/nile-tooltip.test.esm.js +51 -0
- package/dist/src/nile-input/nile-input.css.js +8 -0
- package/dist/src/nile-input/nile-input.css.js.map +1 -1
- package/dist/src/nile-menu/nile-menu.d.ts +1 -0
- package/dist/src/nile-menu/nile-menu.js +13 -16
- package/dist/src/nile-menu/nile-menu.js.map +1 -1
- package/dist/src/nile-table/nile-table.js.map +1 -1
- package/dist/src/nile-tooltip/nile-tooltip-utils.d.ts +18 -0
- package/dist/src/nile-tooltip/nile-tooltip-utils.js +151 -0
- package/dist/src/nile-tooltip/nile-tooltip-utils.js.map +1 -0
- package/dist/src/nile-tooltip/nile-tooltip.css.js +48 -45
- package/dist/src/nile-tooltip/nile-tooltip.css.js.map +1 -1
- package/dist/src/nile-tooltip/nile-tooltip.d.ts +23 -44
- package/dist/src/nile-tooltip/nile-tooltip.js +157 -227
- package/dist/src/nile-tooltip/nile-tooltip.js.map +1 -1
- package/dist/src/nile-tooltip/nile-tooltip.test.d.ts +1 -0
- package/dist/src/nile-tooltip/nile-tooltip.test.js +158 -0
- package/dist/src/nile-tooltip/nile-tooltip.test.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-input/nile-input.css.ts +8 -0
- package/src/nile-menu/nile-menu.ts +13 -20
- package/src/nile-table/nile-table.ts +2 -2
- package/src/nile-tooltip/nile-tooltip-utils.ts +190 -0
- package/src/nile-tooltip/nile-tooltip.css.ts +49 -46
- package/src/nile-tooltip/nile-tooltip.test.ts +178 -0
- package/src/nile-tooltip/nile-tooltip.ts +155 -237
- package/vscode-html-custom-data.json +87 -82
- package/dist/fixture-161dee0b.cjs.js.map +0 -1
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-tooltip.cjs.js","sources":["../../../src/nile-tooltip/nile-tooltip.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, CSSResultArray, TemplateResult } from 'lit';\nimport { styles } from './nile-tooltip.css';\nimport '../nile-popup/nile-popup';\nimport { animateTo, parseDuration, stopAnimations } from '../internal/animate';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport {\n getAnimation,\n setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { html } from 'lit';\n// import { LocalizeController } from '../utilities/localize';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\nimport type NilePopup from '../nile-popup/nile-popup';\n/**\n * Nile icon component.\n *\n * @tag nile-tooltip\n *\n */\n@customElement('nile-tooltip')\nexport class NileTooltip extends NileElement {\n /**\n * The styles for Tooltip\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n private hoverTimeout: number;\n // private readonly localize = new LocalizeController(this);\n\n @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n @query('.tooltip__body') body: HTMLElement;\n @query('nile-popup') popup: NilePopup;\n\n /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */\n @property({ type: String, reflect: true }) content = '';\n\n /** Size Property to decide the tool tip size */\n @property({ reflect: true }) size: 'small' | 'large' = 'small';\n\n /**\n * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n * inside of the viewport.\n */\n @property() placement:\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end' = 'top';\n\n /** Disables the tooltip so it won't show when triggered. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** The distance in pixels from which to offset the tooltip away from its target. */\n @property({ type: Number }) distance = 8;\n\n /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /** The distance in pixels from which to offset the tooltip along its target. */\n @property({ type: Number }) skidding = 0;\n\n /**\n * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n */\n @property() trigger = 'hover focus';\n\n /**\n * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\n * scenarios.\n */\n @property({ type: Boolean }) hoist = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.handleBlur = this.handleBlur.bind(this);\n this.handleClick = this.handleClick.bind(this);\n this.handleFocus = this.handleFocus.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.handleMouseOver = this.handleMouseOver.bind(this);\n this.handleMouseOut = this.handleMouseOut.bind(this);\n\n this.updateComplete.then(() => {\n this.addEventListener('blur', this.handleBlur, true);\n this.addEventListener('focus', this.handleFocus, true);\n this.addEventListener('click', this.handleClick);\n this.addEventListener('keydown', this.handleKeyDown);\n this.addEventListener('mouseover', this.handleMouseOver);\n this.addEventListener('mouseout', this.handleMouseOut);\n });\n }\n\n firstUpdated() {\n this.body.hidden = !this.open;\n\n // If the tooltip is visible on init, update its position\n if (this.open) {\n this.popup.active = true;\n this.popup.reposition();\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('blur', this.handleBlur, true);\n this.removeEventListener('focus', this.handleFocus, true);\n this.removeEventListener('click', this.handleClick);\n this.removeEventListener('keydown', this.handleKeyDown);\n this.removeEventListener('mouseover', this.handleMouseOver);\n this.removeEventListener('mouseout', this.handleMouseOut);\n }\n\n private handleBlur() {\n if (this.hasTrigger('focus')) {\n this.hide();\n }\n }\n\n private handleClick() {\n if (this.hasTrigger('click')) {\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n }\n }\n\n private handleFocus() {\n if (this.hasTrigger('focus')) {\n this.show();\n }\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n // Pressing escape when the target element has focus should dismiss the tooltip\n if (this.open && event.key === 'Escape') {\n event.stopPropagation();\n this.hide();\n }\n }\n\n private handleMouseOver() {\n if (this.hasTrigger('hover')) {\n const delay = parseDuration(\n getComputedStyle(this).getPropertyValue('--show-delay')\n );\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = window.setTimeout(() => this.show(), delay);\n }\n }\n\n private handleMouseOut() {\n if (this.hasTrigger('hover')) {\n const delay = parseDuration(\n getComputedStyle(this).getPropertyValue('--hide-delay')\n );\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = window.setTimeout(() => this.hide(), delay);\n }\n }\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n @watch('open', { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.open) {\n if (this.disabled) {\n return;\n }\n\n // Show\n this.emit('nile-show');\n\n await stopAnimations(this.body);\n this.body.hidden = false;\n this.popup.active = true;\n const { keyframes, options } = getAnimation(this, 'tooltip.show', {\n dir: '',\n });\n await animateTo(this.popup.popup, keyframes, options);\n\n this.emit('nile-after-show');\n } else {\n // Hide\n this.emit('nile-hide');\n\n await stopAnimations(this.body);\n const { keyframes, options } = getAnimation(this, 'tooltip.hide', {\n dir: '',\n });\n await animateTo(this.popup.popup, keyframes, options);\n this.popup.active = false;\n this.body.hidden = true;\n\n this.emit('nile-after-hide');\n }\n }\n\n @watch(['content', 'distance', 'hoist', 'placement', 'skidding'])\n async handleOptionsChange() {\n if (this.hasUpdated) {\n await this.updateComplete;\n this.popup.reposition();\n }\n }\n\n @watch('disabled')\n handleDisabledChange() {\n if (this.disabled && this.open) {\n this.hide();\n }\n }\n\n /** Shows the tooltip. */\n async show() {\n if (this.open || !this.content?.trim().length) {\n return undefined;\n }\n\n this.open = true;\n return waitForEvent(this, 'nile-after-show');\n }\n\n /** Hides the tooltip */\n async hide() {\n if (!this.open) {\n return undefined;\n }\n\n this.open = false;\n return waitForEvent(this, 'nile-after-hide');\n }\n\n render() {\n return html`\n <nile-popup\n part=\"base\"\n exportparts=\"\n popup:base__popup,\n arrow:base__arrow\n \"\n class=${classMap({\n tooltip: true,\n 'tooltip--open': this.open,\n })}\n placement=${this.placement}\n distance=${this.distance}\n skidding=${this.skidding}\n strategy=${this.hoist ? 'fixed' : 'absolute'}\n flip\n shift\n arrow\n >\n <slot slot=\"anchor\" aria-describedby=\"tooltip\"></slot>\n\n <slot\n name=\"content\"\n part=\"body\"\n id=\"tooltip\"\n class=${classMap({\n tooltip__body: true,\n 'tooltip__body--large': this.size === 'large',\n })}\n role=\"tooltip\"\n aria-live=${this.open ? 'polite' : 'off'}\n >\n ${this.content}\n </slot>\n </nile-popup>\n `;\n }\n}\n\nsetDefaultAnimation('tooltip.show', {\n keyframes: [\n { opacity: 0, scale: 0.8 },\n { opacity: 1, scale: 1 },\n ],\n options: { duration: 150, easing: 'ease' },\n});\n\nsetDefaultAnimation('tooltip.hide', {\n keyframes: [\n { opacity: 1, scale: 1 },\n { opacity: 0, scale: 0.8 },\n ],\n options: { duration: 150, easing: 'ease' },\n});\n\nexport default NileTooltip;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-tooltip': NileTooltip;\n }\n}\n"],"names":["NileTooltip","f","constructor","this","content","size","placement","disabled","distance","open","skidding","trigger","hoist","_this","_inherits","_m","_createClass","key","value","connectedCallback","super","handleBlur","bind","handleClick","handleFocus","handleKeyDown","handleMouseOver","handleMouseOut","updateComplete","then","addEventListener","firstUpdated","body","hidden","popup","active","reposition","disconnectedCallback","removeEventListener","hasTrigger","hide","show","event","stopPropagation","delay","parseDuration","getComputedStyle","getPropertyValue","clearTimeout","hoverTimeout","window","setTimeout","_this4","triggerType","split","includes","_handleOpenChange","_asyncToGenerator","_regeneratorRuntime","mark","_callee","_p","_t3","_i","_p2","_t4","_i2","wrap","_callee$","_context2","prev","next","emit","stopAnimations","getAnimation","dir","animateTo","keyframes","options","stop","handleOpenChange","_callee2","_callee2$","_context3","t0","hasUpdated","handleOptionsChange","handleDisabledChange","_show","_callee3","_this$content","_callee3$","_context4","trim","length","abrupt","waitForEvent","_callee4","_callee4$","_context5","render","html","_templateObject","_taggedTemplateLiteral","classMap","tooltip","tooltip__body","__decorate","get","styles","NileElement","query","prototype","property","type","String","reflect","Boolean","Number","watch","waitUntilFirstUpdate","customElement","setDefaultAnimation","opacity","scale","duration","easing"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"nile-tooltip.cjs.js","sources":["../../../src/nile-tooltip/nile-tooltip.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { LitElement, html, css, CSSResultArray } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-tooltip.css';\nimport NileElement from '../internal/nile-element';\nimport { isInViewport, getValidTooltipPosition, getCaretPosition } from './nile-tooltip-utils';\n/**\n * Nile icon component.\n *\n * @tag nile-tooltip\n *\n */\n\n@customElement('nile-tooltip')\nexport class NileTooltip extends NileElement {\n @property({ type: String }) content = '';\n @property({ reflect: true }) size: 'small' | 'large' = 'small';\n @property({ type: String })\n placement:\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end' = 'bottom';\n @property({ type: Boolean, reflect: true }) disabled = false;\n @property({ type: Boolean, reflect: true }) open = false;\n /**\n * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n */\n @property() trigger = 'hover focus'; \n @property({ type: Number }) distance = 8;\n private readonly SHIFT_OFFSET = 16;\n/** The distance in pixels from which to offset the tooltip along its target. */\n @property({ type: Number }) skidding = 0;\n @property({ type: Boolean, reflect: true }) hoist = false;\n\n @query('.tooltip') tooltip!: HTMLElement;\n @query('.trigger-container') triggerContainer!: HTMLElement;\n @query('.tooltip-caret') caret!: HTMLElement;\n @query('slot[name=\"content\"]') tooltipSlot!: HTMLSlotElement;\n\n private hasTooltipSlot = false;\n private hoverTimeout: number = 0;\n private caretSize = 6;\n private originalPlacement: string = this.placement;\n\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.originalPlacement = this.placement;\n window.addEventListener('resize', this.updateTooltipPosition);\n window.addEventListener('scroll', this.updateTooltipPosition, true);\n }\n\n updated(changedProps: Map<string, unknown>) {\n super.updated?.(changedProps);\n\n const validPlacements = [\n 'top', 'top-start', 'top-end',\n 'right', 'right-start', 'right-end',\n 'bottom', 'bottom-start', 'bottom-end',\n 'left', 'left-start', 'left-end'\n ];\n\n if (!validPlacements.includes(this.placement)) {\n console.warn(`[nile-tooltip] Invalid placement \"${this.placement}\", defaulting to \"bottom\".`);\n this.placement = 'bottom';\n }\n\n if (!validPlacements.includes(this.originalPlacement)) {\n this.originalPlacement = 'bottom';\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n window.removeEventListener('resize', this.updateTooltipPosition);\n window.removeEventListener('scroll', this.updateTooltipPosition, true);\n }\n\n private handleTooltipSlotChange() {\n const nodes = this.tooltipSlot.assignedNodes({ flatten: true });\n this.hasTooltipSlot = nodes.length > 0;\n this.requestUpdate();\n }\n\n private updateTooltipPosition = () => {\n if (!isInViewport(this.triggerContainer)) {\n this.open = false;\n return;\n }\n\n const triggerRect = this.triggerContainer.getBoundingClientRect();\n const tooltipRect = this.tooltip.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n\n const { top, left, placement } = getValidTooltipPosition(\n triggerRect,\n tooltipRect,\n this.originalPlacement,\n this.distance,\n this.skidding,\n this.caretSize,\n viewportWidth,\n viewportHeight\n );\n\n this.setAttribute('placement', placement);\n this.tooltip.style.top = `${top}px`;\n this.tooltip.style.left = `${left}px`;\n\n const { caretLeft, caretTop } = getCaretPosition({\n placement,\n tooltipRect,\n triggerRect,\n caretSize: this.caretSize,\n left,\n top\n });\n\n this.caret.style.left = `${caretLeft}px`;\n this.caret.style.top = `${caretTop}px`;\n };\n\n private showTooltip = () => {\n const trimmedContent = this.content.trim();\n if (!trimmedContent && !this.hasTooltipSlot) {\n return;\n }\n if (!this.disabled && isInViewport(this.triggerContainer)) {\n this.emit('nile-show');\n this.open = true;\n this.updateComplete.then(() => {\n this.updateTooltipPosition();\n this.emit('nile-after-show');\n });\n } else {\n this.open = false;\n }\n };\n\n private hideTooltip = () => {\n this.emit('nile-hide');\n this.open = false;\n setTimeout(() => {\n this.emit('nile-after-hide');\n }, 200);\n };\n\n private handleMouseOver = () => {\n if (this.trigger.includes('hover')) {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = window.setTimeout(() => this.showTooltip(), 150);\n }\n };\n\n private handleMouseOut = () => {\n if (this.trigger.includes('hover')) {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = window.setTimeout(() => this.hideTooltip(), 0);\n }\n };\n\n private handleClick = () => {\n if (this.trigger.includes('click')) {\n if (!this.open && isInViewport(this.triggerContainer)) {\n this.showTooltip();\n } else {\n this.hideTooltip();\n }\n }\n };\n\n private handleFocus = () => {\n if (this.trigger.includes('focus')) {\n this.showTooltip();\n }\n };\n\n private handleBlur = () => {\n if (this.trigger.includes('focus')) {\n this.hideTooltip();\n }\n };\n\n render() {\n return html`\n <div\n class=${classMap({\n tooltip: true,\n 'tooltip__body--large': this.size === 'large',\n })}\n id=\"tooltip\"\n >\n <div class=\"tooltip-content\" part=\"content\">\n <slot name=\"content\" @slotchange=${this.handleTooltipSlotChange}></slot>\n ${!this.hasTooltipSlot ? html`${this.content}` : null}\n </div>\n <div class=\"tooltip-caret\" style=\"--caret-size: ${this.caretSize}px;\"></div>\n </div>\n\n <div\n class=\"trigger-container\"\n tabindex=\"0\"\n @mouseover=${this.handleMouseOver}\n @mouseout=${this.handleMouseOut}\n @click=${this.handleClick}\n @focusin=${this.handleFocus}\n @focusout=${this.handleBlur}\n aria-describedby=\"tooltip\"\n >\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-tooltip': NileTooltip;\n }\n}\n\n"],"names":["NileTooltip","d","this","content","size","placement","disabled","open","trigger","distance","SHIFT_OFFSET","skidding","hoist","hasTooltipSlot","hoverTimeout","caretSize","originalPlacement","updateTooltipPosition","isInViewport","triggerContainer","triggerRect","getBoundingClientRect","tooltipRect","tooltip","viewportWidth","window","innerWidth","viewportHeight","innerHeight","top","getValidTooltipPosition","left","setAttribute","style","concat","_a","getCaretPosition","caretLeft","caretTop","caret","showTooltip","trim","emit","updateComplete","then","hideTooltip","setTimeout","handleMouseOver","includes","clearTimeout","handleMouseOut","handleClick","handleFocus","handleBlur","_this","_inherits","_r","_createClass","key","value","connectedCallback","super","addEventListener","updated","changedProps","validPlacements","console","warn","disconnectedCallback","removeEventListener","handleTooltipSlotChange","nodes","tooltipSlot","assignedNodes","flatten","length","requestUpdate","render","html","_templateObject","_taggedTemplateLiteral","classMap","_templateObject2","get","styles","NileElement","__decorate","property","type","String","prototype","reflect","Boolean","Number","query","_export","customElement"],"mappings":"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"}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
System.register(["lit"],function(_export,_context){"use strict";var
|
1
|
+
System.register(["lit"],function(_export,_context){"use strict";var i,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){i=_lit.css;}],execute:function execute(){_export("s",o=i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n\n\n:host {\n position: relative;\n display: inline-block;\n }\n .tooltip {\n position: fixed;\n z-index: 1000;\n background-color: var(--nile-tooltip-color-background, #333);\n color: var(--nile-colors-white-base, #fff);\n padding: 6px 10px;\n border-radius: 4px;\n font-size: var(--nile-tooltip-font-size-sm, 14px);\n line-height: var(--nile-tooltip-line-height-sm, 1.5);\n opacity: 0;\n transition: opacity 0.2s, transform 0.2s;\n pointer-events: none;\n white-space: normal;\n visibility: hidden;\n overflow: visible;\n \n }\n :host([open]) .tooltip {\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n }\n .tooltip__body--large {\n font-size: var(--nile-tooltip-font-size-lg, 16px);\n line-height: var(--nile-tooltip-line-height-lg, 1.75);\n }\n .tooltip-content {\n overflow: auto;\n max-width: 252px;\n max-height: 116px;\n }\n .tooltip-caret {\n position: absolute;\n width: calc(2 * var(--caret-size, 6px));\n height: calc(2 * var(--caret-size, 6px));\n background-color: inherit;\n transform: rotate(45deg);\n z-index: -1;\n }\n .trigger-container {\n display: inline-block;\n }\n \n\n\n\n\n\n\n\n \n"]))));}};});
|
2
2
|
//# sourceMappingURL=nile-tooltip.css.cjs.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-tooltip.css.cjs.js","sources":["../../../src/nile-tooltip/nile-tooltip.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Tooltip CSS\n */\nexport const styles = css`\n
|
1
|
+
{"version":3,"file":"nile-tooltip.css.cjs.js","sources":["../../../src/nile-tooltip/nile-tooltip.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Tooltip CSS\n */\nexport const styles = css`\n\n\n:host {\n position: relative;\n display: inline-block;\n }\n .tooltip {\n position: fixed;\n z-index: 1000;\n background-color: var(--nile-tooltip-color-background, #333);\n color: var(--nile-colors-white-base, #fff);\n padding: 6px 10px;\n border-radius: 4px;\n font-size: var(--nile-tooltip-font-size-sm, 14px);\n line-height: var(--nile-tooltip-line-height-sm, 1.5);\n opacity: 0;\n transition: opacity 0.2s, transform 0.2s;\n pointer-events: none;\n white-space: normal;\n visibility: hidden;\n overflow: visible;\n \n }\n :host([open]) .tooltip {\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n }\n .tooltip__body--large {\n font-size: var(--nile-tooltip-font-size-lg, 16px);\n line-height: var(--nile-tooltip-line-height-lg, 1.75);\n }\n .tooltip-content {\n overflow: auto;\n max-width: 252px;\n max-height: 116px;\n }\n .tooltip-caret {\n position: absolute;\n width: calc(2 * var(--caret-size, 6px));\n height: calc(2 * var(--caret-size, 6px));\n background-color: inherit;\n transform: rotate(45deg);\n z-index: -1;\n }\n .trigger-container {\n display: inline-block;\n }\n \n\n\n\n\n\n\n\n \n`;\n\nexport default [styles];"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
@@ -1,56 +1,59 @@
|
|
1
|
-
import{css as
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
1
|
+
import{css as i}from"lit";const o=i`
|
2
|
+
|
3
|
+
|
4
|
+
:host {
|
5
|
+
position: relative;
|
6
|
+
display: inline-block;
|
7
|
+
}
|
8
|
+
.tooltip {
|
9
|
+
position: fixed;
|
10
|
+
z-index: 1000;
|
11
|
+
background-color: var(--nile-tooltip-color-background, #333);
|
12
|
+
color: var(--nile-colors-white-base, #fff);
|
13
|
+
padding: 6px 10px;
|
14
|
+
border-radius: 4px;
|
15
|
+
font-size: var(--nile-tooltip-font-size-sm, 14px);
|
16
|
+
line-height: var(--nile-tooltip-line-height-sm, 1.5);
|
17
|
+
opacity: 0;
|
18
|
+
transition: opacity 0.2s, transform 0.2s;
|
19
|
+
pointer-events: none;
|
20
|
+
white-space: normal;
|
21
|
+
visibility: hidden;
|
22
|
+
overflow: visible;
|
23
|
+
|
24
|
+
}
|
25
|
+
:host([open]) .tooltip {
|
26
|
+
opacity: 1;
|
27
|
+
visibility: visible;
|
28
|
+
pointer-events: auto;
|
29
|
+
}
|
30
|
+
.tooltip__body--large {
|
31
|
+
font-size: var(--nile-tooltip-font-size-lg, 16px);
|
32
|
+
line-height: var(--nile-tooltip-line-height-lg, 1.75);
|
33
|
+
}
|
34
|
+
.tooltip-content {
|
35
|
+
overflow: auto;
|
36
|
+
max-width: 252px;
|
37
|
+
max-height: 116px;
|
38
|
+
}
|
39
|
+
.tooltip-caret {
|
40
|
+
position: absolute;
|
41
|
+
width: calc(2 * var(--caret-size, 6px));
|
42
|
+
height: calc(2 * var(--caret-size, 6px));
|
43
|
+
background-color: inherit;
|
44
|
+
transform: rotate(45deg);
|
45
|
+
z-index: -1;
|
46
|
+
}
|
47
|
+
.trigger-container {
|
48
|
+
display: inline-block;
|
49
|
+
}
|
50
|
+
|
51
|
+
|
52
|
+
|
53
|
+
|
54
|
+
|
55
|
+
|
56
|
+
|
57
|
+
|
58
|
+
|
59
|
+
`;export{o as s};
|
@@ -1,30 +1,25 @@
|
|
1
|
-
import{__decorate as t}from"tslib";import{
|
2
|
-
<
|
3
|
-
|
4
|
-
|
5
|
-
popup:base__popup,
|
6
|
-
arrow:base__arrow
|
7
|
-
"
|
8
|
-
class=${h({tooltip:!0,"tooltip--open":this.open})}
|
9
|
-
placement=${this.placement}
|
10
|
-
distance=${this.distance}
|
11
|
-
skidding=${this.skidding}
|
12
|
-
strategy=${this.hoist?"fixed":"absolute"}
|
13
|
-
flip
|
14
|
-
shift
|
15
|
-
arrow
|
1
|
+
import{__decorate as t}from"tslib";import{html as i}from"lit";import{property as s,query as o,customElement as e}from"lit/decorators.js";import{classMap as h}from"lit/directives/class-map.js";import{s as l}from"./nile-tooltip.css.esm.js";import{N as r}from"../internal/nile-element.esm.js";import{i as n,g as a,a as c}from"./nile-tooltip-utils.esm.js";let d=class extends r{constructor(){super(...arguments),this.content="",this.size="small",this.placement="bottom",this.disabled=!1,this.open=!1,this.trigger="hover focus",this.distance=8,this.SHIFT_OFFSET=16,this.skidding=0,this.hoist=!1,this.hasTooltipSlot=!1,this.hoverTimeout=0,this.caretSize=6,this.originalPlacement=this.placement,this.updateTooltipPosition=()=>{if(!n(this.triggerContainer))return void(this.open=!1);const t=this.triggerContainer.getBoundingClientRect(),i=this.tooltip.getBoundingClientRect(),s=window.innerWidth,o=window.innerHeight,{top:e,left:h,placement:l}=a(t,i,this.originalPlacement,this.distance,this.skidding,this.caretSize,s,o);this.setAttribute("placement",l),this.tooltip.style.top=`${e}px`,this.tooltip.style.left=`${h}px`;const{caretLeft:r,caretTop:d}=c({placement:l,tooltipRect:i,triggerRect:t,caretSize:this.caretSize,left:h,top:e});this.caret.style.left=`${r}px`,this.caret.style.top=`${d}px`},this.showTooltip=()=>{(this.content.trim()||this.hasTooltipSlot)&&(!this.disabled&&n(this.triggerContainer)?(this.emit("nile-show"),this.open=!0,this.updateComplete.then((()=>{this.updateTooltipPosition(),this.emit("nile-after-show")}))):this.open=!1)},this.hideTooltip=()=>{this.emit("nile-hide"),this.open=!1,setTimeout((()=>{this.emit("nile-after-hide")}),200)},this.handleMouseOver=()=>{this.trigger.includes("hover")&&(clearTimeout(this.hoverTimeout),this.hoverTimeout=window.setTimeout((()=>this.showTooltip()),150))},this.handleMouseOut=()=>{this.trigger.includes("hover")&&(clearTimeout(this.hoverTimeout),this.hoverTimeout=window.setTimeout((()=>this.hideTooltip()),0))},this.handleClick=()=>{this.trigger.includes("click")&&(!this.open&&n(this.triggerContainer)?this.showTooltip():this.hideTooltip())},this.handleFocus=()=>{this.trigger.includes("focus")&&this.showTooltip()},this.handleBlur=()=>{this.trigger.includes("focus")&&this.hideTooltip()}}static get styles(){return[l]}connectedCallback(){super.connectedCallback(),this.originalPlacement=this.placement,window.addEventListener("resize",this.updateTooltipPosition),window.addEventListener("scroll",this.updateTooltipPosition,!0)}updated(t){super.updated?.(t);const i=["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"];i.includes(this.placement)||(console.warn(`[nile-tooltip] Invalid placement "${this.placement}", defaulting to "bottom".`),this.placement="bottom"),i.includes(this.originalPlacement)||(this.originalPlacement="bottom")}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.updateTooltipPosition),window.removeEventListener("scroll",this.updateTooltipPosition,!0)}handleTooltipSlotChange(){const t=this.tooltipSlot.assignedNodes({flatten:!0});this.hasTooltipSlot=t.length>0,this.requestUpdate()}render(){return i`
|
2
|
+
<div
|
3
|
+
class=${h({tooltip:!0,"tooltip__body--large":"large"===this.size})}
|
4
|
+
id="tooltip"
|
16
5
|
>
|
17
|
-
<
|
6
|
+
<div class="tooltip-content" part="content">
|
7
|
+
<slot name="content" @slotchange=${this.handleTooltipSlotChange}></slot>
|
8
|
+
${this.hasTooltipSlot?null:i`${this.content}`}
|
9
|
+
</div>
|
10
|
+
<div class="tooltip-caret" style="--caret-size: ${this.caretSize}px;"></div>
|
11
|
+
</div>
|
18
12
|
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
13
|
+
<div
|
14
|
+
class="trigger-container"
|
15
|
+
tabindex="0"
|
16
|
+
@mouseover=${this.handleMouseOver}
|
17
|
+
@mouseout=${this.handleMouseOut}
|
18
|
+
@click=${this.handleClick}
|
19
|
+
@focusin=${this.handleFocus}
|
20
|
+
@focusout=${this.handleBlur}
|
21
|
+
aria-describedby="tooltip"
|
22
|
+
>
|
23
|
+
<slot></slot>
|
24
|
+
</div>
|
25
|
+
`}};t([s({type:String})],d.prototype,"content",void 0),t([s({reflect:!0})],d.prototype,"size",void 0),t([s({type:String})],d.prototype,"placement",void 0),t([s({type:Boolean,reflect:!0})],d.prototype,"disabled",void 0),t([s({type:Boolean,reflect:!0})],d.prototype,"open",void 0),t([s()],d.prototype,"trigger",void 0),t([s({type:Number})],d.prototype,"distance",void 0),t([s({type:Number})],d.prototype,"skidding",void 0),t([s({type:Boolean,reflect:!0})],d.prototype,"hoist",void 0),t([o(".tooltip")],d.prototype,"tooltip",void 0),t([o(".trigger-container")],d.prototype,"triggerContainer",void 0),t([o(".tooltip-caret")],d.prototype,"caret",void 0),t([o('slot[name="content"]')],d.prototype,"tooltipSlot",void 0),d=t([e("nile-tooltip")],d);export{d as N};
|
@@ -0,0 +1,2 @@
|
|
1
|
+
function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["../fixture-d5b55278.cjs.js","lit/static-html.js","lit/html.js","lit/directive-helpers.js","lit","lit/directives/unsafe-html.js","./nile-tooltip.cjs.js","tslib","lit/decorators.js","lit/directives/class-map.js","./nile-tooltip.css.cjs.js","../internal/nile-element.cjs.js","./nile-tooltip-utils.cjs.js"],function(_export,_context){"use strict";var t,o,i,e,n,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,_templateObject8,_templateObject9,_templateObject10,_templateObject11,_templateObject12,_templateObject13,_templateObject14;function _regeneratorRuntime(){"use strict";/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */_regeneratorRuntime=function _regeneratorRuntime(){return e;};var t,e={},r=Object.prototype,n=r.hasOwnProperty,o=Object.defineProperty||function(t,e,r){t[e]=r.value;},i="function"==typeof Symbol?Symbol:{},a=i.iterator||"@@iterator",c=i.asyncIterator||"@@asyncIterator",u=i.toStringTag||"@@toStringTag";function define(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e];}try{define({},"");}catch(t){define=function define(t,e,r){return t[e]=r;};}function wrap(t,e,r,n){var i=e&&e.prototype instanceof Generator?e:Generator,a=Object.create(i.prototype),c=new Context(n||[]);return o(a,"_invoke",{value:makeInvokeMethod(t,r,c)}),a;}function tryCatch(t,e,r){try{return{type:"normal",arg:t.call(e,r)};}catch(t){return{type:"throw",arg:t};}}e.wrap=wrap;var h="suspendedStart",l="suspendedYield",f="executing",s="completed",y={};function Generator(){}function GeneratorFunction(){}function GeneratorFunctionPrototype(){}var p={};define(p,a,function(){return this;});var d=Object.getPrototypeOf,v=d&&d(d(values([])));v&&v!==r&&n.call(v,a)&&(p=v);var g=GeneratorFunctionPrototype.prototype=Generator.prototype=Object.create(p);function defineIteratorMethods(t){["next","throw","return"].forEach(function(e){define(t,e,function(t){return this._invoke(e,t);});});}function AsyncIterator(t,e){function invoke(r,o,i,a){var c=tryCatch(t[r],t,o);if("throw"!==c.type){var u=c.arg,h=u.value;return h&&"object"==_typeof(h)&&n.call(h,"__await")?e.resolve(h.__await).then(function(t){invoke("next",t,i,a);},function(t){invoke("throw",t,i,a);}):e.resolve(h).then(function(t){u.value=t,i(u);},function(t){return invoke("throw",t,i,a);});}a(c.arg);}var r;o(this,"_invoke",{value:function value(t,n){function callInvokeWithMethodAndArg(){return new e(function(e,r){invoke(t,n,e,r);});}return r=r?r.then(callInvokeWithMethodAndArg,callInvokeWithMethodAndArg):callInvokeWithMethodAndArg();}});}function makeInvokeMethod(e,r,n){var o=h;return function(i,a){if(o===f)throw Error("Generator is already running");if(o===s){if("throw"===i)throw a;return{value:t,done:!0};}for(n.method=i,n.arg=a;;){var c=n.delegate;if(c){var u=maybeInvokeDelegate(c,n);if(u){if(u===y)continue;return u;}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(o===h)throw o=s,n.arg;n.dispatchException(n.arg);}else"return"===n.method&&n.abrupt("return",n.arg);o=f;var p=tryCatch(e,r,n);if("normal"===p.type){if(o=n.done?s:l,p.arg===y)continue;return{value:p.arg,done:n.done};}"throw"===p.type&&(o=s,n.method="throw",n.arg=p.arg);}};}function maybeInvokeDelegate(e,r){var n=r.method,o=e.iterator[n];if(o===t)return r.delegate=null,"throw"===n&&e.iterator["return"]&&(r.method="return",r.arg=t,maybeInvokeDelegate(e,r),"throw"===r.method)||"return"!==n&&(r.method="throw",r.arg=new TypeError("The iterator does not provide a '"+n+"' method")),y;var i=tryCatch(o,e.iterator,r.arg);if("throw"===i.type)return r.method="throw",r.arg=i.arg,r.delegate=null,y;var a=i.arg;return a?a.done?(r[e.resultName]=a.value,r.next=e.nextLoc,"return"!==r.method&&(r.method="next",r.arg=t),r.delegate=null,y):a:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,y);}function pushTryEntry(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e);}function resetTryEntry(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e;}function Context(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(pushTryEntry,this),this.reset(!0);}function values(e){if(e||""===e){var r=e[a];if(r)return r.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var o=-1,i=function next(){for(;++o<e.length;)if(n.call(e,o))return next.value=e[o],next.done=!1,next;return next.value=t,next.done=!0,next;};return i.next=i;}}throw new TypeError(_typeof(e)+" is not iterable");}return GeneratorFunction.prototype=GeneratorFunctionPrototype,o(g,"constructor",{value:GeneratorFunctionPrototype,configurable:!0}),o(GeneratorFunctionPrototype,"constructor",{value:GeneratorFunction,configurable:!0}),GeneratorFunction.displayName=define(GeneratorFunctionPrototype,u,"GeneratorFunction"),e.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===GeneratorFunction||"GeneratorFunction"===(e.displayName||e.name));},e.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,GeneratorFunctionPrototype):(t.__proto__=GeneratorFunctionPrototype,define(t,u,"GeneratorFunction")),t.prototype=Object.create(g),t;},e.awrap=function(t){return{__await:t};},defineIteratorMethods(AsyncIterator.prototype),define(AsyncIterator.prototype,c,function(){return this;}),e.AsyncIterator=AsyncIterator,e.async=function(t,r,n,o,i){void 0===i&&(i=Promise);var a=new AsyncIterator(wrap(t,r,n,o),i);return e.isGeneratorFunction(r)?a:a.next().then(function(t){return t.done?t.value:a.next();});},defineIteratorMethods(g),define(g,u,"Generator"),define(g,a,function(){return this;}),define(g,"toString",function(){return"[object Generator]";}),e.keys=function(t){var e=Object(t),r=[];for(var n in e)r.push(n);return r.reverse(),function next(){for(;r.length;){var t=r.pop();if(t in e)return next.value=t,next.done=!1,next;}return next.done=!0,next;};},e.values=values,Context.prototype={constructor:Context,reset:function reset(e){if(this.prev=0,this.next=0,this.sent=this._sent=t,this.done=!1,this.delegate=null,this.method="next",this.arg=t,this.tryEntries.forEach(resetTryEntry),!e)for(var r in this)"t"===r.charAt(0)&&n.call(this,r)&&!isNaN(+r.slice(1))&&(this[r]=t);},stop:function stop(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval;},dispatchException:function dispatchException(e){if(this.done)throw e;var r=this;function handle(n,o){return a.type="throw",a.arg=e,r.next=n,o&&(r.method="next",r.arg=t),!!o;}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],a=i.completion;if("root"===i.tryLoc)return handle("end");if(i.tryLoc<=this.prev){var c=n.call(i,"catchLoc"),u=n.call(i,"finallyLoc");if(c&&u){if(this.prev<i.catchLoc)return handle(i.catchLoc,!0);if(this.prev<i.finallyLoc)return handle(i.finallyLoc);}else if(c){if(this.prev<i.catchLoc)return handle(i.catchLoc,!0);}else{if(!u)throw Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return handle(i.finallyLoc);}}}},abrupt:function abrupt(t,e){for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break;}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,y):this.complete(a);},complete:function complete(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),y;},finish:function finish(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),resetTryEntry(r),y;}},"catch":function _catch(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;resetTryEntry(r);}return o;}}throw Error("illegal catch attempt");},delegateYield:function delegateYield(e,r,n){return this.delegate={iterator:values(e),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=t),y;}},e;}function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function asyncGeneratorStep(n,t,e,r,o,a,c){try{var i=n[a](c),u=i.value;}catch(n){return void e(n);}i.done?t(u):Promise.resolve(u).then(r,o);}function _asyncToGenerator(n){return function(){var t=this,e=arguments;return new Promise(function(r,o){var a=n.apply(t,e);function _next(n){asyncGeneratorStep(a,r,o,_next,_throw,"next",n);}function _throw(n){asyncGeneratorStep(a,r,o,_next,_throw,"throw",n);}_next(void 0);});};}return{setters:[function(_fixture001CjsJs){t=_fixture001CjsJs.f;o=_fixture001CjsJs.h;i=_fixture001CjsJs.w;e=_fixture001CjsJs.o;},function(_litStaticHtmlJs){n=_litStaticHtmlJs.html;},function(_litHtmlJs){},function(_litDirectiveHelpersJs){},function(_lit){},function(_litDirectivesUnsafeHtmlJs){},function(_nileTooltipCjsJs){},function(_tslib){},function(_litDecoratorsJs){},function(_litDirectivesClassMapJs){},function(_nileTooltipCssCjsJs){},function(_internalNileElementCjsJs){},function(_nileTooltipUtilsCjsJs){}],execute:function execute(){describe("NileTooltip",function(){it("renders with default properties",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(){var i;return _regeneratorRuntime().wrap(function _callee$(_context2){while(1)switch(_context2.prev=_context2.next){case 0:_context2.next=2;return t(n(_templateObject||(_templateObject=_taggedTemplateLiteral(["<nile-tooltip content=\"Hello\"><button>Hover me</button></nile-tooltip>"]))));case 2:i=_context2.sent;o.equal(i.content,"Hello"),o.equal(i.placement,"bottom"),o.equal(i.size,"small"),o.equal(i.disabled,!1),o.equal(i.open,!1);case 4:case"end":return _context2.stop();}},_callee);}))),it("renders text content when no slot is used",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(){var i;return _regeneratorRuntime().wrap(function _callee2$(_context3){while(1)switch(_context3.prev=_context3.next){case 0:_context3.next=2;return t(n(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["<nile-tooltip content=\"Fallback\"><button>Trigger</button></nile-tooltip>"]))));case 2:i=_context3.sent.shadowRoot.querySelector(".tooltip-content");o.include(i.textContent,"Fallback");case 4:case"end":return _context3.stop();}},_callee2);}))),it("uses slotted content when provided",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3(){var _i$0$textContent;var i;return _regeneratorRuntime().wrap(function _callee3$(_context4){while(1)switch(_context4.prev=_context4.next){case 0:_context4.next=2;return t(n(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n <nile-tooltip>\n <div slot=\"content\">Slot Content</div>\n <button>Trigger</button>\n </nile-tooltip>\n "]))));case 2:i=_context4.sent.shadowRoot.querySelector('slot[name="content"]').assignedNodes({flatten:!0});o.isAbove(i.length,0),o.include((_i$0$textContent=i[0].textContent)!==null&&_i$0$textContent!==void 0?_i$0$textContent:"","Slot Content");case 4:case"end":return _context4.stop();}},_callee3);}))),it('shows tooltip on hover when trigger includes "hover"',/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4(){var e;return _regeneratorRuntime().wrap(function _callee4$(_context5){while(1)switch(_context5.prev=_context5.next){case 0:_context5.next=2;return t(n(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n <nile-tooltip content=\"Tooltip\" trigger=\"hover\">\n <button>Hover me</button>\n </nile-tooltip>\n "]))));case 2:e=_context5.sent;e.shadowRoot.querySelector(".trigger-container").dispatchEvent(new Event("mouseover",{bubbles:!0}));_context5.next=6;return i(function(){return!0===e.open;});case 6:o.isTrue(e.open);case 7:case"end":return _context5.stop();}},_callee4);}))),it('hides tooltip on mouseout when trigger includes "hover"',/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5(){var o,e;return _regeneratorRuntime().wrap(function _callee5$(_context6){while(1)switch(_context6.prev=_context6.next){case 0:_context6.next=2;return t(n(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n <nile-tooltip content=\"Tooltip\" trigger=\"hover\">\n <button>Hover me</button>\n </nile-tooltip>\n "]))));case 2:o=_context6.sent;e=o.shadowRoot.querySelector(".trigger-container");e.dispatchEvent(new Event("mouseover",{bubbles:!0}));_context6.next=7;return i(function(){return!0===o.open;});case 7:e.dispatchEvent(new Event("mouseout",{bubbles:!0}));_context6.next=10;return i(function(){return!1===o.open;});case 10:case"end":return _context6.stop();}},_callee5);}))),it('toggles tooltip on click when trigger includes "click"',/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6(){var o,e;return _regeneratorRuntime().wrap(function _callee6$(_context7){while(1)switch(_context7.prev=_context7.next){case 0:_context7.next=2;return t(n(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["\n <nile-tooltip content=\"Click me\" trigger=\"click\">\n <button>Click</button>\n </nile-tooltip>\n "]))));case 2:o=_context7.sent;e=o.shadowRoot.querySelector(".trigger-container");e.click();_context7.next=7;return i(function(){return!0===o.open;});case 7:e.click();_context7.next=10;return i(function(){return!1===o.open;});case 10:case"end":return _context7.stop();}},_callee6);}))),it('shows and hides tooltip on focus/blur when trigger includes "focus"',/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee7(){var o,e;return _regeneratorRuntime().wrap(function _callee7$(_context8){while(1)switch(_context8.prev=_context8.next){case 0:_context8.next=2;return t(n(_templateObject7||(_templateObject7=_taggedTemplateLiteral(["\n <nile-tooltip content=\"Focus\" trigger=\"focus\">\n <button>Focus</button>\n </nile-tooltip>\n "]))));case 2:o=_context8.sent;e=o.shadowRoot.querySelector(".trigger-container");e.dispatchEvent(new Event("focusin"));_context8.next=7;return i(function(){return!0===o.open;});case 7:e.dispatchEvent(new Event("focusout"));_context8.next=10;return i(function(){return!1===o.open;});case 10:case"end":return _context8.stop();}},_callee7);}))),it("does not show tooltip when disabled",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee8(){var i;return _regeneratorRuntime().wrap(function _callee8$(_context9){while(1)switch(_context9.prev=_context9.next){case 0:_context9.next=2;return t(n(_templateObject8||(_templateObject8=_taggedTemplateLiteral(["\n <nile-tooltip content=\"Disabled\" disabled trigger=\"hover\">\n <button>Hover me</button>\n </nile-tooltip>\n "]))));case 2:i=_context9.sent;i.shadowRoot.querySelector(".trigger-container").dispatchEvent(new Event("mouseover"));_context9.next=6;return new Promise(function(t){return setTimeout(t,200);});case 6:o.isFalse(i.open);case 7:case"end":return _context9.stop();}},_callee8);}))),it("applies size class correctly",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee9(){var i;return _regeneratorRuntime().wrap(function _callee9$(_context10){while(1)switch(_context10.prev=_context10.next){case 0:_context10.next=2;return t(n(_templateObject9||(_templateObject9=_taggedTemplateLiteral(["\n <nile-tooltip content=\"Tooltip\" size=\"large\">\n <button>Trigger</button>\n </nile-tooltip>\n "]))));case 2:i=_context10.sent.shadowRoot.querySelector(".tooltip");o.isTrue(i.classList.contains("tooltip__body--large"));case 4:case"end":return _context10.stop();}},_callee9);}))),it("emits nile-show and nile-after-show events",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee10(){var i,l,s,a;return _regeneratorRuntime().wrap(function _callee10$(_context11){while(1)switch(_context11.prev=_context11.next){case 0:_context11.next=2;return t(n(_templateObject10||(_templateObject10=_taggedTemplateLiteral(["\n <nile-tooltip content=\"Event test\" trigger=\"click\">\n <button>Click</button>\n </nile-tooltip>\n "]))));case 2:i=_context11.sent;l=i.shadowRoot.querySelector(".trigger-container");setTimeout(function(){return l.click();});_context11.next=7;return e(i,"nile-show");case 7:s=_context11.sent;o.ok(s);_context11.next=11;return e(i,"nile-after-show");case 11:a=_context11.sent;o.ok(a);case 13:case"end":return _context11.stop();}},_callee10);}))),it("emits nile-hide and nile-after-hide events",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee11(){var l,s,a,c;return _regeneratorRuntime().wrap(function _callee11$(_context12){while(1)switch(_context12.prev=_context12.next){case 0:_context12.next=2;return t(n(_templateObject11||(_templateObject11=_taggedTemplateLiteral(["\n <nile-tooltip content=\"Event test\" trigger=\"click\">\n <button>Click</button>\n </nile-tooltip>\n "]))));case 2:l=_context12.sent;s=l.shadowRoot.querySelector(".trigger-container");s.click();_context12.next=7;return i(function(){return!0===l.open;});case 7:setTimeout(function(){return s.click();});_context12.next=10;return e(l,"nile-hide");case 10:a=_context12.sent;o.ok(a);_context12.next=14;return e(l,"nile-after-hide");case 14:c=_context12.sent;o.ok(c);case 16:case"end":return _context12.stop();}},_callee11);}))),it('defaults to "bottom" placement when given invalid value',/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee12(){var i;return _regeneratorRuntime().wrap(function _callee12$(_context13){while(1)switch(_context13.prev=_context13.next){case 0:_context13.next=2;return t(n(_templateObject12||(_templateObject12=_taggedTemplateLiteral(["\n <nile-tooltip content=\"Fallback\" placement="," >\n <button>Trigger</button>\n </nile-tooltip>\n "])),"invalid"));case 2:i=_context13.sent;_context13.next=5;return i.updateComplete;case 5:o.equal(i.placement,"bottom");case 6:case"end":return _context13.stop();}},_callee12);}))),it("updates hasTooltipSlot on slot change",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee13(){var i,e,l;return _regeneratorRuntime().wrap(function _callee13$(_context14){while(1)switch(_context14.prev=_context14.next){case 0:_context14.next=2;return t(n(_templateObject13||(_templateObject13=_taggedTemplateLiteral(["\n <nile-tooltip>\n <div slot=\"content\">Initial slot</div>\n <button>Trigger</button>\n </nile-tooltip>\n "]))));case 2:i=_context14.sent;e=i.shadowRoot.querySelector('slot[name="content"]');l=document.createElement("div");l.slot="content";l.textContent="Updated slot";i.appendChild(l);e.dispatchEvent(new Event("slotchange"));_context14.next=11;return i.updateComplete;case 11:o.isTrue(i.hasTooltipSlot);case 12:case"end":return _context14.stop();}},_callee13);}))),it("respects hoist attribute",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee14(){var i;return _regeneratorRuntime().wrap(function _callee14$(_context15){while(1)switch(_context15.prev=_context15.next){case 0:_context15.next=2;return t(n(_templateObject14||(_templateObject14=_taggedTemplateLiteral(["\n <nile-tooltip hoist content=\"Hoisted\">\n <button>Hoist</button>\n </nile-tooltip>\n "]))));case 2:i=_context15.sent;o.isTrue(i.hoist);case 4:case"end":return _context15.stop();}},_callee14);})));});}};});
|
2
|
+
//# sourceMappingURL=nile-tooltip.test.cjs.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"nile-tooltip.test.cjs.js","sources":["../../../src/nile-tooltip/nile-tooltip.test.ts"],"sourcesContent":["import { fixture, html, assert, oneEvent, waitUntil } from '@open-wc/testing';\nimport './nile-tooltip';\nimport { NileTooltip } from './nile-tooltip';\n\ndescribe('NileTooltip', () => {\n\n it('renders with default properties', async () => {\n const el = await fixture<NileTooltip>(html`<nile-tooltip content=\"Hello\"><button>Hover me</button></nile-tooltip>`);\n assert.equal(el.content, 'Hello');\n assert.equal(el.placement, 'bottom');\n assert.equal(el.size, 'small');\n assert.equal(el.disabled, false);\n assert.equal(el.open, false);\n });\n\n it('renders text content when no slot is used', async () => {\n const el = await fixture<NileTooltip>(html`<nile-tooltip content=\"Fallback\"><button>Trigger</button></nile-tooltip>`);\n const content = el.shadowRoot!.querySelector('.tooltip-content')!;\n assert.include(content.textContent!, 'Fallback');\n });\n\n it('uses slotted content when provided', async () => {\n const el = await fixture<NileTooltip>(html`\n <nile-tooltip>\n <div slot=\"content\">Slot Content</div>\n <button>Trigger</button>\n </nile-tooltip>\n `);\n\n const slot = el.shadowRoot!.querySelector('slot[name=\"content\"]') as HTMLSlotElement;\n const assigned = slot.assignedNodes({ flatten: true });\n assert.isAbove(assigned.length, 0);\n assert.include(assigned[0].textContent ?? '', 'Slot Content');\n });\n\n it('shows tooltip on hover when trigger includes \"hover\"', async () => {\n const el = await fixture<NileTooltip>(html`\n <nile-tooltip content=\"Tooltip\" trigger=\"hover\">\n <button>Hover me</button>\n </nile-tooltip>\n `);\n const trigger = el.shadowRoot!.querySelector('.trigger-container')!;\n trigger.dispatchEvent(new Event('mouseover', { bubbles: true }));\n await waitUntil(() => el.open === true);\n assert.isTrue(el.open);\n });\n\n it('hides tooltip on mouseout when trigger includes \"hover\"', async () => {\n const el = await fixture<NileTooltip>(html`\n <nile-tooltip content=\"Tooltip\" trigger=\"hover\">\n <button>Hover me</button>\n </nile-tooltip>\n `);\n const trigger = el.shadowRoot!.querySelector('.trigger-container')!;\n trigger.dispatchEvent(new Event('mouseover', { bubbles: true }));\n await waitUntil(() => el.open === true);\n trigger.dispatchEvent(new Event('mouseout', { bubbles: true }));\n await waitUntil(() => el.open === false);\n });\n\n it('toggles tooltip on click when trigger includes \"click\"', async () => {\n const el = await fixture<NileTooltip>(html`\n <nile-tooltip content=\"Click me\" trigger=\"click\">\n <button>Click</button>\n </nile-tooltip>\n `);\n const trigger = el.shadowRoot!.querySelector('.trigger-container') as HTMLElement;\n trigger.click();\n await waitUntil(() => el.open === true);\n trigger.click();\n await waitUntil(() => el.open === false);\n });\n\n it('shows and hides tooltip on focus/blur when trigger includes \"focus\"', async () => {\n const el = await fixture<NileTooltip>(html`\n <nile-tooltip content=\"Focus\" trigger=\"focus\">\n <button>Focus</button>\n </nile-tooltip>\n `);\n const trigger = el.shadowRoot!.querySelector('.trigger-container')!;\n trigger.dispatchEvent(new Event('focusin'));\n await waitUntil(() => el.open === true);\n trigger.dispatchEvent(new Event('focusout'));\n await waitUntil(() => el.open === false);\n });\n\n it('does not show tooltip when disabled', async () => {\n const el = await fixture<NileTooltip>(html`\n <nile-tooltip content=\"Disabled\" disabled trigger=\"hover\">\n <button>Hover me</button>\n </nile-tooltip>\n `);\n const trigger = el.shadowRoot!.querySelector('.trigger-container')!;\n trigger.dispatchEvent(new Event('mouseover'));\n await new Promise(resolve => setTimeout(resolve, 200));\n assert.isFalse(el.open);\n });\n\n it('applies size class correctly', async () => {\n const el = await fixture<NileTooltip>(html`\n <nile-tooltip content=\"Tooltip\" size=\"large\">\n <button>Trigger</button>\n </nile-tooltip>\n `);\n const tooltip = el.shadowRoot!.querySelector('.tooltip')!;\n assert.isTrue(tooltip.classList.contains('tooltip__body--large'));\n });\n\n it('emits nile-show and nile-after-show events', async () => {\n const el = await fixture<NileTooltip>(html`\n <nile-tooltip content=\"Event test\" trigger=\"click\">\n <button>Click</button>\n </nile-tooltip>\n `);\n const trigger = el.shadowRoot!.querySelector('.trigger-container') as HTMLElement;\n setTimeout(() => trigger.click());\n const showEvent = await oneEvent(el, 'nile-show');\n assert.ok(showEvent);\n const afterShow = await oneEvent(el, 'nile-after-show');\n assert.ok(afterShow);\n });\n\n it('emits nile-hide and nile-after-hide events', async () => {\n const el = await fixture<NileTooltip>(html`\n <nile-tooltip content=\"Event test\" trigger=\"click\">\n <button>Click</button>\n </nile-tooltip>\n `);\n const trigger = el.shadowRoot!.querySelector('.trigger-container') as HTMLElement;\n trigger.click();\n await waitUntil(() => el.open === true);\n setTimeout(() => trigger.click());\n const hideEvent = await oneEvent(el, 'nile-hide');\n assert.ok(hideEvent);\n const afterHide = await oneEvent(el, 'nile-after-hide');\n assert.ok(afterHide);\n });\n\n it('defaults to \"bottom\" placement when given invalid value', async () => {\n const el = await fixture<NileTooltip>(html`\n <nile-tooltip content=\"Fallback\" placement=${'invalid' as unknown as NileTooltip['placement']} >\n <button>Trigger</button>\n </nile-tooltip>\n `);\n await el.updateComplete;\n assert.equal(el.placement, 'bottom');\n });\n\n\n it('updates hasTooltipSlot on slot change', async () => {\n const el = await fixture<NileTooltip>(html`\n <nile-tooltip>\n <div slot=\"content\">Initial slot</div>\n <button>Trigger</button>\n </nile-tooltip>\n `);\n\n const slot = el.shadowRoot!.querySelector('slot[name=\"content\"]') as HTMLSlotElement;\n const newSlotNode = document.createElement('div');\n newSlotNode.slot = 'content';\n newSlotNode.textContent = 'Updated slot';\n el.appendChild(newSlotNode);\n\n slot.dispatchEvent(new Event('slotchange'));\n await el.updateComplete;\n\n assert.isTrue((el as any).hasTooltipSlot);\n });\n\n it('respects hoist attribute', async () => {\n const el = await fixture<NileTooltip>(html`\n <nile-tooltip hoist content=\"Hoisted\">\n <button>Hoist</button>\n </nile-tooltip>\n `);\n assert.isTrue(el.hoist);\n });\n});\n"],"names":["describe","it","async","fixture","html","_templateObject","_taggedTemplateLiteral","el","assert","equal","content","placement","size","disabled","open","_context2","stop","_callee","_templateObject2","shadowRoot","querySelector","include","textContent","_context3","_callee2","_asyncToGenerator","_regeneratorRuntime","mark","_templateObject3","assigned","assignedNodes","flatten","isAbove","length","_i$0$textContent","_context4","_callee3","_templateObject4","dispatchEvent","Event","bubbles","waitUntil","isTrue","_context5","_callee4","_templateObject5","trigger","_context6","next","_callee5","_templateObject6","click","_context7","_callee6","_templateObject7","_context8","_callee7","_templateObject8","_context9","Promise","resolve","setTimeout","isFalse","_callee8","_templateObject9","tooltip","classList","contains","_context10","_callee9","_templateObject10","_context11","oneEvent","showEvent","ok","afterShow","_callee10","_templateObject11","_context12","hideEvent","afterHide","_callee11","_templateObject12","updateComplete","_context13","_callee12","_templateObject13","slot","newSlotNode","document","createElement","appendChild","_context14","hasTooltipSlot","_callee13","_templateObject14","hoist","_context15","_callee14"],"mappings":"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"}
|
@@ -0,0 +1,51 @@
|
|
1
|
+
import{f as t,h as o,w as i,o as e}from"../fixture-df8b52d7.esm.js";import{html as n}from"lit/static-html.js";import"lit/html.js";import"lit/directive-helpers.js";import"lit";import"lit/directives/unsafe-html.js";import"./nile-tooltip.esm.js";import"tslib";import"lit/decorators.js";import"lit/directives/class-map.js";import"./nile-tooltip.css.esm.js";import"../internal/nile-element.esm.js";import"./nile-tooltip-utils.esm.js";describe("NileTooltip",(()=>{it("renders with default properties",(async()=>{const i=await t(n`<nile-tooltip content="Hello"><button>Hover me</button></nile-tooltip>`);o.equal(i.content,"Hello"),o.equal(i.placement,"bottom"),o.equal(i.size,"small"),o.equal(i.disabled,!1),o.equal(i.open,!1)})),it("renders text content when no slot is used",(async()=>{const i=(await t(n`<nile-tooltip content="Fallback"><button>Trigger</button></nile-tooltip>`)).shadowRoot.querySelector(".tooltip-content");o.include(i.textContent,"Fallback")})),it("uses slotted content when provided",(async()=>{const i=(await t(n`
|
2
|
+
<nile-tooltip>
|
3
|
+
<div slot="content">Slot Content</div>
|
4
|
+
<button>Trigger</button>
|
5
|
+
</nile-tooltip>
|
6
|
+
`)).shadowRoot.querySelector('slot[name="content"]').assignedNodes({flatten:!0});o.isAbove(i.length,0),o.include(i[0].textContent??"","Slot Content")})),it('shows tooltip on hover when trigger includes "hover"',(async()=>{const e=await t(n`
|
7
|
+
<nile-tooltip content="Tooltip" trigger="hover">
|
8
|
+
<button>Hover me</button>
|
9
|
+
</nile-tooltip>
|
10
|
+
`);e.shadowRoot.querySelector(".trigger-container").dispatchEvent(new Event("mouseover",{bubbles:!0})),await i((()=>!0===e.open)),o.isTrue(e.open)})),it('hides tooltip on mouseout when trigger includes "hover"',(async()=>{const o=await t(n`
|
11
|
+
<nile-tooltip content="Tooltip" trigger="hover">
|
12
|
+
<button>Hover me</button>
|
13
|
+
</nile-tooltip>
|
14
|
+
`),e=o.shadowRoot.querySelector(".trigger-container");e.dispatchEvent(new Event("mouseover",{bubbles:!0})),await i((()=>!0===o.open)),e.dispatchEvent(new Event("mouseout",{bubbles:!0})),await i((()=>!1===o.open))})),it('toggles tooltip on click when trigger includes "click"',(async()=>{const o=await t(n`
|
15
|
+
<nile-tooltip content="Click me" trigger="click">
|
16
|
+
<button>Click</button>
|
17
|
+
</nile-tooltip>
|
18
|
+
`),e=o.shadowRoot.querySelector(".trigger-container");e.click(),await i((()=>!0===o.open)),e.click(),await i((()=>!1===o.open))})),it('shows and hides tooltip on focus/blur when trigger includes "focus"',(async()=>{const o=await t(n`
|
19
|
+
<nile-tooltip content="Focus" trigger="focus">
|
20
|
+
<button>Focus</button>
|
21
|
+
</nile-tooltip>
|
22
|
+
`),e=o.shadowRoot.querySelector(".trigger-container");e.dispatchEvent(new Event("focusin")),await i((()=>!0===o.open)),e.dispatchEvent(new Event("focusout")),await i((()=>!1===o.open))})),it("does not show tooltip when disabled",(async()=>{const i=await t(n`
|
23
|
+
<nile-tooltip content="Disabled" disabled trigger="hover">
|
24
|
+
<button>Hover me</button>
|
25
|
+
</nile-tooltip>
|
26
|
+
`);i.shadowRoot.querySelector(".trigger-container").dispatchEvent(new Event("mouseover")),await new Promise((t=>setTimeout(t,200))),o.isFalse(i.open)})),it("applies size class correctly",(async()=>{const i=(await t(n`
|
27
|
+
<nile-tooltip content="Tooltip" size="large">
|
28
|
+
<button>Trigger</button>
|
29
|
+
</nile-tooltip>
|
30
|
+
`)).shadowRoot.querySelector(".tooltip");o.isTrue(i.classList.contains("tooltip__body--large"))})),it("emits nile-show and nile-after-show events",(async()=>{const i=await t(n`
|
31
|
+
<nile-tooltip content="Event test" trigger="click">
|
32
|
+
<button>Click</button>
|
33
|
+
</nile-tooltip>
|
34
|
+
`),l=i.shadowRoot.querySelector(".trigger-container");setTimeout((()=>l.click()));const s=await e(i,"nile-show");o.ok(s);const a=await e(i,"nile-after-show");o.ok(a)})),it("emits nile-hide and nile-after-hide events",(async()=>{const l=await t(n`
|
35
|
+
<nile-tooltip content="Event test" trigger="click">
|
36
|
+
<button>Click</button>
|
37
|
+
</nile-tooltip>
|
38
|
+
`),s=l.shadowRoot.querySelector(".trigger-container");s.click(),await i((()=>!0===l.open)),setTimeout((()=>s.click()));const a=await e(l,"nile-hide");o.ok(a);const r=await e(l,"nile-after-hide");o.ok(r)})),it('defaults to "bottom" placement when given invalid value',(async()=>{const i=await t(n`
|
39
|
+
<nile-tooltip content="Fallback" placement=${"invalid"} >
|
40
|
+
<button>Trigger</button>
|
41
|
+
</nile-tooltip>
|
42
|
+
`);await i.updateComplete,o.equal(i.placement,"bottom")})),it("updates hasTooltipSlot on slot change",(async()=>{const i=await t(n`
|
43
|
+
<nile-tooltip>
|
44
|
+
<div slot="content">Initial slot</div>
|
45
|
+
<button>Trigger</button>
|
46
|
+
</nile-tooltip>
|
47
|
+
`),e=i.shadowRoot.querySelector('slot[name="content"]'),l=document.createElement("div");l.slot="content",l.textContent="Updated slot",i.appendChild(l),e.dispatchEvent(new Event("slotchange")),await i.updateComplete,o.isTrue(i.hasTooltipSlot)})),it("respects hoist attribute",(async()=>{const i=await t(n`
|
48
|
+
<nile-tooltip hoist content="Hoisted">
|
49
|
+
<button>Hoist</button>
|
50
|
+
</nile-tooltip>
|
51
|
+
`);o.isTrue(i.hoist)}))}));
|
@@ -13,6 +13,14 @@ export const styles = css `
|
|
13
13
|
display: block;
|
14
14
|
}
|
15
15
|
|
16
|
+
/* To Hide Safari's AutoFill icon */
|
17
|
+
input::-webkit-contacts-auto-fill-button {
|
18
|
+
visibility: hidden;
|
19
|
+
width: 0;
|
20
|
+
margin: 0;
|
21
|
+
padding: 0;
|
22
|
+
}
|
23
|
+
|
16
24
|
.form-control .form-control__label {
|
17
25
|
display: none;
|
18
26
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAifxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Input CSS\n */\nexport const styles = css`\n :host {\n display: block;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n color: inherit;\n margin-bottom: 6px;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: var(--nile-colors-red-700);\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: var(--nile-colors-dark-500);\n margin-top: 6px;\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: var(--nile-colors-red-700);\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 10.24px;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\n }\n\n .input {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-weight: 400;\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n box-sizing: border-box;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n /* Standard inputs */\n .input--standard {\n background-color: var(--nile-input-standard-background-color);\n border: solid 1px var(--nile-input-standard-border-color);\n box-shadow: var(--nile-input-shadow-standard);\n }\n\n .input--standard:hover:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: var(--nile-colors-dark-900);\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: var(--nile-colors-primary-500);\n box-shadow: var(--nile-input-shadow-standard-focused-not-disabled);\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--standard.input--disabled {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-neutral-500);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: hsl(240 5.9% 10%);\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: var(--nile-input-standard-disabled-placeholder-font-color);\n }\n\n .input--standard.input--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .input--standard.input--error {\n border-color: var(--nile-colors-red-500);\n }\n\n .input--standard.input--success {\n border-color: var(--nile-colors-green-500);\n }\n\n .input--standard.input--destructive {\n border-color: var(--nile-colors-red-400);\n }\n\n .input--standard.input--focused.input--destructive:not(.input--disabled) {\n border: 1px solid var(--nile-colors-red-400);\n box-shadow: var(--nile-input-shadow-destructive-active);\n }\n\n .input--destructive:active {\n border: 1px solid var(--nile-colors-red-400);\n box-shadow: var(--nile-input-shadow-destructive-active);\n }\n\n /* Filled inputs */\n .input--filled {\n border: none;\n background-color: var(--nile-colors-dark-100);\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled:hover:not(.input--disabled) {\n background-color: var(--nile-colors-dark-100);\n }\n\n .input--filled.input--focused:not(.input--disabled) {\n background-color: var(--nile-colors-dark-100);\n outline: solid 3px hsl(200.4 98% 39.4%);\n outline-offset: 1px;\n }\n\n .input--filled.input--disabled {\n background-color: var(--nile-colors-dark-100);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n min-width: 0;\n height: 100%;\n border: none;\n background: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-sans-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px;\n letter-spacing: 0.2px;\n }\n\n .input__control::-webkit-search-decoration,\n .input__control::-webkit-search-cancel-button,\n .input__control::-webkit-search-results-button,\n .input__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input__control::placeholder {\n color: var(--nile-colors-neutral-700);\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: var(--nile-colors-dark-900);\n }\n\n .input__control:focus {\n outline: none;\n }\n\n .input__prefix,\n .input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n }\n\n .input__prefix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input__suffix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input--standard:focus {\n border-radius: 4px;\n border: 1px solid var(--nile-colors-primary-500);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n /*\n * Size modifiers\n */\n\n .input--small {\n border-radius: 0.25rem;\n font-size: var(--nile-input-font-size-small);\n height: 1.875rem;\n }\n\n .input--small .input__control {\n height: calc(1.875rem);\n padding: 0 0.75rem;\n }\n\n .input--small .input__clear {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__password-toggle {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__prefix::slotted(*) {\n margin-inline-start: 0.75rem;\n }\n\n .input--small .input__suffix::slotted(*) {\n margin-inline-end: 0.75rem;\n }\n\n .input--medium {\n border-radius: 0.25rem;\n font-size: var(--nile-input-font-size-medium);\n height: 40px;\n }\n\n .input--medium .input__control {\n height: 14px;\n padding: 12px;\n }\n\n .input--medium .input__clear {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__password-toggle {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__prefix::slotted(*) {\n margin-inline-start: 12px;\n }\n\n .input--medium .input__suffix::slotted(*) {\n margin-inline-end: 12px;\n }\n\n .input--large {\n border-radius: 0.25rem;\n font-size: 1.25rem;\n height: 3.125rem;\n }\n\n .input--large .input__control {\n height: calc(3.125rem - 1px * 2);\n padding: 0 1.25rem;\n }\n\n .input--large .input__clear {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__password-toggle {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__prefix::slotted(*) {\n margin-inline-start: 1.25rem;\n }\n\n .input--large .input__suffix::slotted(*) {\n margin-inline-end: 1.25rem;\n }\n\n /*\n * Pill modifier\n */\n\n .input--pill.input--small {\n border-radius: 1.875rem;\n }\n\n .input--pill.input--medium {\n border-radius: 2.5rem;\n }\n\n .input--pill.input--large {\n border-radius: 3.125rem;\n }\n\n /*\n * Clearable + Password Toggle\n */\n\n .input__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__password-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__clear:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__password-toggle:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__clear:focus,\n .input__password-toggle:focus {\n outline: none;\n }\n\n .input--empty .input__clear {\n visibility: hidden;\n }\n\n /* Don't show the browser's password toggle in Edge */\n ::-ms-reveal {\n display: none;\n }\n\n /* Hide the built-in number spinner */\n .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n\n .input--no-spin-buttons input[type='number'] {\n -moz-appearance: textfield;\n }\n\n :host([no-border]) .input--standard {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard:hover:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n .input__password {\n font-family: 'disc';\n letter-spacing: 2px;\n }\n\n .input__non-printable {\n border-radius: 4px;\n max-width: 400px;\n background-color: var(--nile-colors-white-base);\n border: 1px solid var(--nile-colors-red-500);\n color: var(--nile-colors-red-500);\n padding: 10px;\n font-size: 12px;\n max-height: 300px;\n overflow-y: scroll;\n line-height: 16px;\n }\n\n .input__remove-non-printable {\n color: var(--nile-colors-red-500);\n margin-left: 10px;\n font-size: 14px;\n color: var(--nile-colors-dark-900);\n cursor: pointer;\n }\n\n .input__srtiked-text-container {\n margin-top: 4px;\n color: var(--nile-colors-dark-900);\n word-break: break-all;\n line-height: 16px;\n }\n\n .input__srtiked-text {\n text-decoration: line-through;\n text-decoration-color: var(--nile-colors-white-base);\n color: var(--nile-colors-white-base);\n background-color: var(--nile-colors-red-500);\n }\n`;\n\nexport default [styles];\n"]}
|
1
|
+
{"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyfxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Input CSS\n */\nexport const styles = css`\n :host {\n display: block;\n }\n\n /* To Hide Safari's AutoFill icon */\n input::-webkit-contacts-auto-fill-button {\n visibility: hidden;\n width: 0;\n margin: 0;\n padding: 0;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n color: inherit;\n margin-bottom: 6px;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: var(--nile-colors-red-700);\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: var(--nile-colors-dark-500);\n margin-top: 6px;\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: var(--nile-colors-red-700);\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 10.24px;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\n }\n\n .input {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-weight: 400;\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n box-sizing: border-box;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n /* Standard inputs */\n .input--standard {\n background-color: var(--nile-input-standard-background-color);\n border: solid 1px var(--nile-input-standard-border-color);\n box-shadow: var(--nile-input-shadow-standard);\n }\n\n .input--standard:hover:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: var(--nile-colors-dark-900);\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: var(--nile-colors-primary-500);\n box-shadow: var(--nile-input-shadow-standard-focused-not-disabled);\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--standard.input--disabled {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-neutral-500);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: hsl(240 5.9% 10%);\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: var(--nile-input-standard-disabled-placeholder-font-color);\n }\n\n .input--standard.input--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .input--standard.input--error {\n border-color: var(--nile-colors-red-500);\n }\n\n .input--standard.input--success {\n border-color: var(--nile-colors-green-500);\n }\n\n .input--standard.input--destructive {\n border-color: var(--nile-colors-red-400);\n }\n\n .input--standard.input--focused.input--destructive:not(.input--disabled) {\n border: 1px solid var(--nile-colors-red-400);\n box-shadow: var(--nile-input-shadow-destructive-active);\n }\n\n .input--destructive:active {\n border: 1px solid var(--nile-colors-red-400);\n box-shadow: var(--nile-input-shadow-destructive-active);\n }\n\n /* Filled inputs */\n .input--filled {\n border: none;\n background-color: var(--nile-colors-dark-100);\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled:hover:not(.input--disabled) {\n background-color: var(--nile-colors-dark-100);\n }\n\n .input--filled.input--focused:not(.input--disabled) {\n background-color: var(--nile-colors-dark-100);\n outline: solid 3px hsl(200.4 98% 39.4%);\n outline-offset: 1px;\n }\n\n .input--filled.input--disabled {\n background-color: var(--nile-colors-dark-100);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n min-width: 0;\n height: 100%;\n border: none;\n background: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-sans-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px;\n letter-spacing: 0.2px;\n }\n\n .input__control::-webkit-search-decoration,\n .input__control::-webkit-search-cancel-button,\n .input__control::-webkit-search-results-button,\n .input__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input__control::placeholder {\n color: var(--nile-colors-neutral-700);\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: var(--nile-colors-dark-900);\n }\n\n .input__control:focus {\n outline: none;\n }\n\n .input__prefix,\n .input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n }\n\n .input__prefix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input__suffix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input--standard:focus {\n border-radius: 4px;\n border: 1px solid var(--nile-colors-primary-500);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n /*\n * Size modifiers\n */\n\n .input--small {\n border-radius: 0.25rem;\n font-size: var(--nile-input-font-size-small);\n height: 1.875rem;\n }\n\n .input--small .input__control {\n height: calc(1.875rem);\n padding: 0 0.75rem;\n }\n\n .input--small .input__clear {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__password-toggle {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__prefix::slotted(*) {\n margin-inline-start: 0.75rem;\n }\n\n .input--small .input__suffix::slotted(*) {\n margin-inline-end: 0.75rem;\n }\n\n .input--medium {\n border-radius: 0.25rem;\n font-size: var(--nile-input-font-size-medium);\n height: 40px;\n }\n\n .input--medium .input__control {\n height: 14px;\n padding: 12px;\n }\n\n .input--medium .input__clear {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__password-toggle {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__prefix::slotted(*) {\n margin-inline-start: 12px;\n }\n\n .input--medium .input__suffix::slotted(*) {\n margin-inline-end: 12px;\n }\n\n .input--large {\n border-radius: 0.25rem;\n font-size: 1.25rem;\n height: 3.125rem;\n }\n\n .input--large .input__control {\n height: calc(3.125rem - 1px * 2);\n padding: 0 1.25rem;\n }\n\n .input--large .input__clear {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__password-toggle {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__prefix::slotted(*) {\n margin-inline-start: 1.25rem;\n }\n\n .input--large .input__suffix::slotted(*) {\n margin-inline-end: 1.25rem;\n }\n\n /*\n * Pill modifier\n */\n\n .input--pill.input--small {\n border-radius: 1.875rem;\n }\n\n .input--pill.input--medium {\n border-radius: 2.5rem;\n }\n\n .input--pill.input--large {\n border-radius: 3.125rem;\n }\n\n /*\n * Clearable + Password Toggle\n */\n\n .input__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__password-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__clear:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__password-toggle:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__clear:focus,\n .input__password-toggle:focus {\n outline: none;\n }\n\n .input--empty .input__clear {\n visibility: hidden;\n }\n\n /* Don't show the browser's password toggle in Edge */\n ::-ms-reveal {\n display: none;\n }\n\n /* Hide the built-in number spinner */\n .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n\n .input--no-spin-buttons input[type='number'] {\n -moz-appearance: textfield;\n }\n\n :host([no-border]) .input--standard {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard:hover:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n .input__password {\n font-family: 'disc';\n letter-spacing: 2px;\n }\n\n .input__non-printable {\n border-radius: 4px;\n max-width: 400px;\n background-color: var(--nile-colors-white-base);\n border: 1px solid var(--nile-colors-red-500);\n color: var(--nile-colors-red-500);\n padding: 10px;\n font-size: 12px;\n max-height: 300px;\n overflow-y: scroll;\n line-height: 16px;\n }\n\n .input__remove-non-printable {\n color: var(--nile-colors-red-500);\n margin-left: 10px;\n font-size: 14px;\n color: var(--nile-colors-dark-900);\n cursor: pointer;\n }\n\n .input__srtiked-text-container {\n margin-top: 4px;\n color: var(--nile-colors-dark-900);\n word-break: break-all;\n line-height: 16px;\n }\n\n .input__srtiked-text {\n text-decoration: line-through;\n text-decoration-color: var(--nile-colors-white-base);\n color: var(--nile-colors-white-base);\n background-color: var(--nile-colors-red-500);\n }\n`;\n\nexport default [styles];\n"]}
|