@kyndryl-design-system/shidoka-applications 1.34.2 → 1.34.3
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.
|
@@ -24,5 +24,5 @@ import{__decorate as t}from'./../../../external/tslib/tslib.es6.js';import'./../
|
|
|
24
24
|
<slot></slot>
|
|
25
25
|
</div>
|
|
26
26
|
</div>
|
|
27
|
-
`}_positionTooltip(){const t=this._anchorEl.getBoundingClientRect().top,e=this._anchorEl.getBoundingClientRect().top+this._anchorEl.getBoundingClientRect().height/2,o=this._anchorEl.getBoundingClientRect().top+this._anchorEl.getBoundingClientRect().height,i=this._anchorEl.getBoundingClientRect().left,n=this._anchorEl.getBoundingClientRect().left+this._anchorEl.getBoundingClientRect().width/2,s=this._anchorEl.getBoundingClientRect().left+this._anchorEl.getBoundingClientRect().width,l=window.innerHeight,h=window.innerWidth;let r="down",c="right";t>.67*l?r="up":t>.33*l&&(r="middle"),i>.67*h?c="left":i>.33*h&&(c="center"),"down"===r?"right"===c?h<672?(this._direction="bottom",this._anchorPosition="start",this._contentEl.style.top=o+"px",this._contentEl.style.left=n+"px"):(this._direction="right",this._anchorPosition="start",this._contentEl.style.top=e+"px",this._contentEl.style.left=s+"px"):"center"===c?(this._direction="bottom",this._anchorPosition="center",this._contentEl.style.top=o+"px",this._contentEl.style.left=n+"px"):h<672?(this._direction="bottom",this._anchorPosition="end",this._contentEl.style.top=o+"px",this._contentEl.style.left=n+"px"):(this._direction="left",this._anchorPosition="start",this._contentEl.style.top=e+"px",this._contentEl.style.left=i+"px"):"middle"===r?"right"===c?h<672?(this._direction="top",this._anchorPosition="start",this._contentEl.style.top=t+"px",this._contentEl.style.left=n+"px"):(this._direction="right",this._anchorPosition="center",this._contentEl.style.top=e+"px",this._contentEl.style.left=s+"px"):"center"===c?(this._direction="top",this._anchorPosition="center",this._contentEl.style.top=t+"px",this._contentEl.style.left=n+"px"):h<672?(this._direction="top",this._anchorPosition="end",this._contentEl.style.top=t+"px",this._contentEl.style.left=n+"px"):(this._direction="left",this._anchorPosition="center",this._contentEl.style.top=e+"px",this._contentEl.style.left=i+"px"):"right"===c?h<672?(this._direction="top",this._anchorPosition="start",this._contentEl.style.top=t+"px",this._contentEl.style.left=n+"px"):(this._direction="right",this._anchorPosition="end",this._contentEl.style.top=e+"px",this._contentEl.style.left=s+"px"):"center"===c?(this._direction="top",this._anchorPosition="center",this._contentEl.style.top=t+"px",this._contentEl.style.left=n+"px"):h<672?(this._direction="top",this._anchorPosition="end",this._contentEl.style.top=t+"px",this._contentEl.style.left=n+"px"):(this._direction="left",this._anchorPosition="end",this._contentEl.style.top=e+"px",this._contentEl.style.left=i+"px")}_handleOpen(){clearTimeout(this._timer),this._positionTooltip(),setTimeout((()=>{this._open=!0}),100)}_handleClose(){this._open=!1}_handleMouseLeave(){this._timer=setTimeout((()=>{this._open=!1,clearTimeout(this._timer)}),500)}_handleEsc(t){this._open&&"Escape"===t.key&&(this._open=!1)}_emitToggle(){const t=new CustomEvent("on-tooltip-toggle",{detail:{open:this._open}});this.dispatchEvent(t)}updated(t){t.has("
|
|
27
|
+
`}_positionTooltip(){const t=this._anchorEl.getBoundingClientRect().top,e=this._anchorEl.getBoundingClientRect().top+this._anchorEl.getBoundingClientRect().height/2,o=this._anchorEl.getBoundingClientRect().top+this._anchorEl.getBoundingClientRect().height,i=this._anchorEl.getBoundingClientRect().left,n=this._anchorEl.getBoundingClientRect().left+this._anchorEl.getBoundingClientRect().width/2,s=this._anchorEl.getBoundingClientRect().left+this._anchorEl.getBoundingClientRect().width,l=window.innerHeight,h=window.innerWidth;let r="down",c="right";t>.67*l?r="up":t>.33*l&&(r="middle"),i>.67*h?c="left":i>.33*h&&(c="center"),"down"===r?"right"===c?h<672?(this._direction="bottom",this._anchorPosition="start",this._contentEl.style.top=o+"px",this._contentEl.style.left=n+"px"):(this._direction="right",this._anchorPosition="start",this._contentEl.style.top=e+"px",this._contentEl.style.left=s+"px"):"center"===c?(this._direction="bottom",this._anchorPosition="center",this._contentEl.style.top=o+"px",this._contentEl.style.left=n+"px"):h<672?(this._direction="bottom",this._anchorPosition="end",this._contentEl.style.top=o+"px",this._contentEl.style.left=n+"px"):(this._direction="left",this._anchorPosition="start",this._contentEl.style.top=e+"px",this._contentEl.style.left=i+"px"):"middle"===r?"right"===c?h<672?(this._direction="top",this._anchorPosition="start",this._contentEl.style.top=t+"px",this._contentEl.style.left=n+"px"):(this._direction="right",this._anchorPosition="center",this._contentEl.style.top=e+"px",this._contentEl.style.left=s+"px"):"center"===c?(this._direction="top",this._anchorPosition="center",this._contentEl.style.top=t+"px",this._contentEl.style.left=n+"px"):h<672?(this._direction="top",this._anchorPosition="end",this._contentEl.style.top=t+"px",this._contentEl.style.left=n+"px"):(this._direction="left",this._anchorPosition="center",this._contentEl.style.top=e+"px",this._contentEl.style.left=i+"px"):"right"===c?h<672?(this._direction="top",this._anchorPosition="start",this._contentEl.style.top=t+"px",this._contentEl.style.left=n+"px"):(this._direction="right",this._anchorPosition="end",this._contentEl.style.top=e+"px",this._contentEl.style.left=s+"px"):"center"===c?(this._direction="top",this._anchorPosition="center",this._contentEl.style.top=t+"px",this._contentEl.style.left=n+"px"):h<672?(this._direction="top",this._anchorPosition="end",this._contentEl.style.top=t+"px",this._contentEl.style.left=n+"px"):(this._direction="left",this._anchorPosition="end",this._contentEl.style.top=e+"px",this._contentEl.style.left=i+"px")}_handleOpen(){clearTimeout(this._timer),this._positionTooltip(),setTimeout((()=>{this._open=!0}),100)}_handleClose(){this._open=!1}_handleMouseLeave(){this._timer=setTimeout((()=>{this._open=!1,clearTimeout(this._timer)}),500)}_handleEsc(t){this._open&&"Escape"===t.key&&(this._open=!1)}_emitToggle(){const t=new CustomEvent("on-tooltip-toggle",{detail:{open:this._open}});this.dispatchEvent(t)}updated(t){t.has("_open")&&void 0!==t.get("_open")&&this._emitToggle()}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",(t=>this._handleEsc(t)))}disconnectedCallback(){document.removeEventListener("keydown",(t=>this._handleEsc(t))),super.disconnectedCallback()}};d.styles=r,t([n({type:String})],d.prototype,"assistiveText",void 0),t([s()],d.prototype,"_open",void 0),t([s()],d.prototype,"_anchorPosition",void 0),t([s()],d.prototype,"_direction",void 0),t([s()],d.prototype,"_timer",void 0),t([l(".anchor")],d.prototype,"_anchorEl",void 0),t([l(".content")],d.prototype,"_contentEl",void 0),d=t([i("kyn-tooltip")],d);export{d as Tooltip};
|
|
28
28
|
//# sourceMappingURL=tooltip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","sources":["../../../../src/components/reusable/tooltip/tooltip.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TooltipScss from './tooltip.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport infoIcon from '@carbon/icons/es/information/20';\n\n/**\n * Tooltip.\n * @fires on-tooltip-toggle - Emits the open state of the tooltip on open/close.\n * @slot unnamed - Slot for tooltip content.\n * @slot anchor - Slot for custom anchor button content.\n */\n@customElement('kyn-tooltip')\nexport class Tooltip extends LitElement {\n static override styles = TooltipScss;\n\n /** Assistive text for anchor button. */\n @property({ type: String })\n assistiveText = 'Toggle Tooltip';\n\n /** Tooltip open state.\n * @internal\n */\n @state()\n _open = false;\n\n /** Tooltip anchor position. `'start'`, `'end'`, or `'center'`.\n * @internal\n */\n @state()\n _anchorPosition = 'center';\n\n /** Tooltip direction. `'top'`, `'bottom'`, `'left'`, or `'right'`.\n * @internal\n */\n @state()\n _direction = 'top';\n\n /** Timeout function to delay modal close.\n * @internal\n */\n @state()\n _timer: any;\n\n /** Anchor element\n * @internal\n */\n @query('.anchor')\n _anchorEl!: any;\n\n /** Content element\n * @internal\n */\n @query('.content')\n _contentEl!: any;\n\n override render() {\n const classes = {\n content: true,\n open: this._open,\n 'anchor--start': this._anchorPosition === 'start',\n 'anchor--end': this._anchorPosition === 'end',\n 'anchor--center': this._anchorPosition === 'center',\n 'direction--top': this._direction === 'top',\n 'direction--bottom': this._direction === 'bottom',\n 'direction--left': this._direction === 'left',\n 'direction--right': this._direction === 'right',\n };\n\n return html`\n <div class=\"tooltip\">\n <button\n class=\"anchor\"\n aria-label=${this.assistiveText}\n title=${this.assistiveText}\n aria-describedby=\"tooltip\"\n @mouseenter=${this._handleOpen}\n @mouseleave=${this._handleMouseLeave}\n @focus=${this._handleOpen}\n @blur=${this._handleClose}\n >\n <slot name=\"anchor\"><kd-icon .icon=${infoIcon}></kd-icon></slot>\n </button>\n\n <div\n id=\"tooltip\"\n aria-hidden=${!this._open}\n role=\"tooltip\"\n class=${classMap(classes)}\n @mouseenter=${this._handleOpen}\n @mouseleave=${this._handleMouseLeave}\n >\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n private _positionTooltip() {\n const AnchorTop = this._anchorEl.getBoundingClientRect().top;\n const AnchorMiddle =\n this._anchorEl.getBoundingClientRect().top +\n this._anchorEl.getBoundingClientRect().height / 2;\n const AnchorBottom =\n this._anchorEl.getBoundingClientRect().top +\n this._anchorEl.getBoundingClientRect().height;\n const AnchorLeft = this._anchorEl.getBoundingClientRect().left;\n const AnchorCenter =\n this._anchorEl.getBoundingClientRect().left +\n this._anchorEl.getBoundingClientRect().width / 2;\n const AnchorRight =\n this._anchorEl.getBoundingClientRect().left +\n this._anchorEl.getBoundingClientRect().width;\n const ViewportHeight = window.innerHeight;\n const ViewportWidth = window.innerWidth;\n\n let vertical = 'down';\n let horizontal = 'right';\n\n if (AnchorTop > ViewportHeight * 0.67) {\n vertical = 'up';\n } else if (AnchorTop > ViewportHeight * 0.33) {\n vertical = 'middle';\n }\n\n if (AnchorLeft > ViewportWidth * 0.67) {\n horizontal = 'left';\n } else if (AnchorLeft > ViewportWidth * 0.33) {\n horizontal = 'center';\n }\n\n if (vertical === 'down') {\n if (horizontal === 'right') {\n if (ViewportWidth < 672) {\n this._direction = 'bottom';\n this._anchorPosition = 'start';\n\n this._contentEl.style.top = AnchorBottom + 'px';\n this._contentEl.style.left = AnchorCenter + 'px';\n } else {\n this._direction = 'right';\n this._anchorPosition = 'start';\n\n this._contentEl.style.top = AnchorMiddle + 'px';\n this._contentEl.style.left = AnchorRight + 'px';\n }\n } else if (horizontal === 'center') {\n this._direction = 'bottom';\n this._anchorPosition = 'center';\n\n this._contentEl.style.top = AnchorBottom + 'px';\n this._contentEl.style.left = AnchorCenter + 'px';\n } else {\n if (ViewportWidth < 672) {\n this._direction = 'bottom';\n this._anchorPosition = 'end';\n\n this._contentEl.style.top = AnchorBottom + 'px';\n this._contentEl.style.left = AnchorCenter + 'px';\n } else {\n this._direction = 'left';\n this._anchorPosition = 'start';\n\n this._contentEl.style.top = AnchorMiddle + 'px';\n this._contentEl.style.left = AnchorLeft + 'px';\n }\n }\n } else if (vertical === 'middle') {\n if (horizontal === 'right') {\n if (ViewportWidth < 672) {\n this._direction = 'top';\n this._anchorPosition = 'start';\n\n this._contentEl.style.top = AnchorTop + 'px';\n this._contentEl.style.left = AnchorCenter + 'px';\n } else {\n this._direction = 'right';\n this._anchorPosition = 'center';\n\n this._contentEl.style.top = AnchorMiddle + 'px';\n this._contentEl.style.left = AnchorRight + 'px';\n }\n } else if (horizontal === 'center') {\n this._direction = 'top';\n this._anchorPosition = 'center';\n\n this._contentEl.style.top = AnchorTop + 'px';\n this._contentEl.style.left = AnchorCenter + 'px';\n } else {\n if (ViewportWidth < 672) {\n this._direction = 'top';\n this._anchorPosition = 'end';\n\n this._contentEl.style.top = AnchorTop + 'px';\n this._contentEl.style.left = AnchorCenter + 'px';\n } else {\n this._direction = 'left';\n this._anchorPosition = 'center';\n\n this._contentEl.style.top = AnchorMiddle + 'px';\n this._contentEl.style.left = AnchorLeft + 'px';\n }\n }\n } else {\n if (horizontal === 'right') {\n if (ViewportWidth < 672) {\n this._direction = 'top';\n this._anchorPosition = 'start';\n\n this._contentEl.style.top = AnchorTop + 'px';\n this._contentEl.style.left = AnchorCenter + 'px';\n } else {\n this._direction = 'right';\n this._anchorPosition = 'end';\n\n this._contentEl.style.top = AnchorMiddle + 'px';\n this._contentEl.style.left = AnchorRight + 'px';\n }\n } else if (horizontal === 'center') {\n this._direction = 'top';\n this._anchorPosition = 'center';\n\n this._contentEl.style.top = AnchorTop + 'px';\n this._contentEl.style.left = AnchorCenter + 'px';\n } else {\n if (ViewportWidth < 672) {\n this._direction = 'top';\n this._anchorPosition = 'end';\n\n this._contentEl.style.top = AnchorTop + 'px';\n this._contentEl.style.left = AnchorCenter + 'px';\n } else {\n this._direction = 'left';\n this._anchorPosition = 'end';\n\n this._contentEl.style.top = AnchorMiddle + 'px';\n this._contentEl.style.left = AnchorLeft + 'px';\n }\n }\n }\n }\n\n private _handleOpen() {\n clearTimeout(this._timer);\n this._positionTooltip();\n\n setTimeout(() => {\n this._open = true;\n }, 100);\n }\n\n private _handleClose() {\n this._open = false;\n }\n\n private _handleMouseLeave() {\n this._timer = setTimeout(() => {\n this._open = false;\n clearTimeout(this._timer);\n }, 500);\n }\n\n private _handleEsc(e: KeyboardEvent) {\n if (this._open && e.key === 'Escape') {\n this._open = false;\n }\n }\n\n private _emitToggle() {\n const event = new CustomEvent('on-tooltip-toggle', {\n detail: { open: this._open },\n });\n this.dispatchEvent(event);\n }\n\n override updated(changedProps: any) {\n if (changedProps.has('open') && changedProps.get('open') !== undefined) {\n this._emitToggle();\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n document.addEventListener('keydown', (e) => this._handleEsc(e));\n }\n\n override disconnectedCallback() {\n document.removeEventListener('keydown', (e) => this._handleEsc(e));\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-tooltip': Tooltip;\n }\n}\n"],"names":["Tooltip","LitElement","constructor","this","assistiveText","_open","_anchorPosition","_direction","render","classes","content","open","html","_handleOpen","_handleMouseLeave","_handleClose","infoIcon","classMap","_positionTooltip","AnchorTop","_anchorEl","getBoundingClientRect","top","AnchorMiddle","height","AnchorBottom","AnchorLeft","left","AnchorCenter","width","AnchorRight","ViewportHeight","window","innerHeight","ViewportWidth","innerWidth","vertical","horizontal","_contentEl","style","clearTimeout","_timer","setTimeout","_handleEsc","e","key","_emitToggle","event","CustomEvent","detail","dispatchEvent","updated","changedProps","has","undefined","get","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","TooltipScss","__decorate","property","type","String","prototype","state","query","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tooltip.js","sources":["../../../../src/components/reusable/tooltip/tooltip.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TooltipScss from './tooltip.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport infoIcon from '@carbon/icons/es/information/20';\n\n/**\n * Tooltip.\n * @fires on-tooltip-toggle - Emits the open state of the tooltip on open/close.\n * @slot unnamed - Slot for tooltip content.\n * @slot anchor - Slot for custom anchor button content.\n */\n@customElement('kyn-tooltip')\nexport class Tooltip extends LitElement {\n static override styles = TooltipScss;\n\n /** Assistive text for anchor button. */\n @property({ type: String })\n assistiveText = 'Toggle Tooltip';\n\n /** Tooltip open state.\n * @internal\n */\n @state()\n _open = false;\n\n /** Tooltip anchor position. `'start'`, `'end'`, or `'center'`.\n * @internal\n */\n @state()\n _anchorPosition = 'center';\n\n /** Tooltip direction. `'top'`, `'bottom'`, `'left'`, or `'right'`.\n * @internal\n */\n @state()\n _direction = 'top';\n\n /** Timeout function to delay modal close.\n * @internal\n */\n @state()\n _timer: any;\n\n /** Anchor element\n * @internal\n */\n @query('.anchor')\n _anchorEl!: any;\n\n /** Content element\n * @internal\n */\n @query('.content')\n _contentEl!: any;\n\n override render() {\n const classes = {\n content: true,\n open: this._open,\n 'anchor--start': this._anchorPosition === 'start',\n 'anchor--end': this._anchorPosition === 'end',\n 'anchor--center': this._anchorPosition === 'center',\n 'direction--top': this._direction === 'top',\n 'direction--bottom': this._direction === 'bottom',\n 'direction--left': this._direction === 'left',\n 'direction--right': this._direction === 'right',\n };\n\n return html`\n <div class=\"tooltip\">\n <button\n class=\"anchor\"\n aria-label=${this.assistiveText}\n title=${this.assistiveText}\n aria-describedby=\"tooltip\"\n @mouseenter=${this._handleOpen}\n @mouseleave=${this._handleMouseLeave}\n @focus=${this._handleOpen}\n @blur=${this._handleClose}\n >\n <slot name=\"anchor\"><kd-icon .icon=${infoIcon}></kd-icon></slot>\n </button>\n\n <div\n id=\"tooltip\"\n aria-hidden=${!this._open}\n role=\"tooltip\"\n class=${classMap(classes)}\n @mouseenter=${this._handleOpen}\n @mouseleave=${this._handleMouseLeave}\n >\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n private _positionTooltip() {\n const AnchorTop = this._anchorEl.getBoundingClientRect().top;\n const AnchorMiddle =\n this._anchorEl.getBoundingClientRect().top +\n this._anchorEl.getBoundingClientRect().height / 2;\n const AnchorBottom =\n this._anchorEl.getBoundingClientRect().top +\n this._anchorEl.getBoundingClientRect().height;\n const AnchorLeft = this._anchorEl.getBoundingClientRect().left;\n const AnchorCenter =\n this._anchorEl.getBoundingClientRect().left +\n this._anchorEl.getBoundingClientRect().width / 2;\n const AnchorRight =\n this._anchorEl.getBoundingClientRect().left +\n this._anchorEl.getBoundingClientRect().width;\n const ViewportHeight = window.innerHeight;\n const ViewportWidth = window.innerWidth;\n\n let vertical = 'down';\n let horizontal = 'right';\n\n if (AnchorTop > ViewportHeight * 0.67) {\n vertical = 'up';\n } else if (AnchorTop > ViewportHeight * 0.33) {\n vertical = 'middle';\n }\n\n if (AnchorLeft > ViewportWidth * 0.67) {\n horizontal = 'left';\n } else if (AnchorLeft > ViewportWidth * 0.33) {\n horizontal = 'center';\n }\n\n if (vertical === 'down') {\n if (horizontal === 'right') {\n if (ViewportWidth < 672) {\n this._direction = 'bottom';\n this._anchorPosition = 'start';\n\n this._contentEl.style.top = AnchorBottom + 'px';\n this._contentEl.style.left = AnchorCenter + 'px';\n } else {\n this._direction = 'right';\n this._anchorPosition = 'start';\n\n this._contentEl.style.top = AnchorMiddle + 'px';\n this._contentEl.style.left = AnchorRight + 'px';\n }\n } else if (horizontal === 'center') {\n this._direction = 'bottom';\n this._anchorPosition = 'center';\n\n this._contentEl.style.top = AnchorBottom + 'px';\n this._contentEl.style.left = AnchorCenter + 'px';\n } else {\n if (ViewportWidth < 672) {\n this._direction = 'bottom';\n this._anchorPosition = 'end';\n\n this._contentEl.style.top = AnchorBottom + 'px';\n this._contentEl.style.left = AnchorCenter + 'px';\n } else {\n this._direction = 'left';\n this._anchorPosition = 'start';\n\n this._contentEl.style.top = AnchorMiddle + 'px';\n this._contentEl.style.left = AnchorLeft + 'px';\n }\n }\n } else if (vertical === 'middle') {\n if (horizontal === 'right') {\n if (ViewportWidth < 672) {\n this._direction = 'top';\n this._anchorPosition = 'start';\n\n this._contentEl.style.top = AnchorTop + 'px';\n this._contentEl.style.left = AnchorCenter + 'px';\n } else {\n this._direction = 'right';\n this._anchorPosition = 'center';\n\n this._contentEl.style.top = AnchorMiddle + 'px';\n this._contentEl.style.left = AnchorRight + 'px';\n }\n } else if (horizontal === 'center') {\n this._direction = 'top';\n this._anchorPosition = 'center';\n\n this._contentEl.style.top = AnchorTop + 'px';\n this._contentEl.style.left = AnchorCenter + 'px';\n } else {\n if (ViewportWidth < 672) {\n this._direction = 'top';\n this._anchorPosition = 'end';\n\n this._contentEl.style.top = AnchorTop + 'px';\n this._contentEl.style.left = AnchorCenter + 'px';\n } else {\n this._direction = 'left';\n this._anchorPosition = 'center';\n\n this._contentEl.style.top = AnchorMiddle + 'px';\n this._contentEl.style.left = AnchorLeft + 'px';\n }\n }\n } else {\n if (horizontal === 'right') {\n if (ViewportWidth < 672) {\n this._direction = 'top';\n this._anchorPosition = 'start';\n\n this._contentEl.style.top = AnchorTop + 'px';\n this._contentEl.style.left = AnchorCenter + 'px';\n } else {\n this._direction = 'right';\n this._anchorPosition = 'end';\n\n this._contentEl.style.top = AnchorMiddle + 'px';\n this._contentEl.style.left = AnchorRight + 'px';\n }\n } else if (horizontal === 'center') {\n this._direction = 'top';\n this._anchorPosition = 'center';\n\n this._contentEl.style.top = AnchorTop + 'px';\n this._contentEl.style.left = AnchorCenter + 'px';\n } else {\n if (ViewportWidth < 672) {\n this._direction = 'top';\n this._anchorPosition = 'end';\n\n this._contentEl.style.top = AnchorTop + 'px';\n this._contentEl.style.left = AnchorCenter + 'px';\n } else {\n this._direction = 'left';\n this._anchorPosition = 'end';\n\n this._contentEl.style.top = AnchorMiddle + 'px';\n this._contentEl.style.left = AnchorLeft + 'px';\n }\n }\n }\n }\n\n private _handleOpen() {\n clearTimeout(this._timer);\n this._positionTooltip();\n\n setTimeout(() => {\n this._open = true;\n }, 100);\n }\n\n private _handleClose() {\n this._open = false;\n }\n\n private _handleMouseLeave() {\n this._timer = setTimeout(() => {\n this._open = false;\n clearTimeout(this._timer);\n }, 500);\n }\n\n private _handleEsc(e: KeyboardEvent) {\n if (this._open && e.key === 'Escape') {\n this._open = false;\n }\n }\n\n private _emitToggle() {\n const event = new CustomEvent('on-tooltip-toggle', {\n detail: { open: this._open },\n });\n this.dispatchEvent(event);\n }\n\n override updated(changedProps: any) {\n if (changedProps.has('_open') && changedProps.get('_open') !== undefined) {\n this._emitToggle();\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n document.addEventListener('keydown', (e) => this._handleEsc(e));\n }\n\n override disconnectedCallback() {\n document.removeEventListener('keydown', (e) => this._handleEsc(e));\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-tooltip': Tooltip;\n }\n}\n"],"names":["Tooltip","LitElement","constructor","this","assistiveText","_open","_anchorPosition","_direction","render","classes","content","open","html","_handleOpen","_handleMouseLeave","_handleClose","infoIcon","classMap","_positionTooltip","AnchorTop","_anchorEl","getBoundingClientRect","top","AnchorMiddle","height","AnchorBottom","AnchorLeft","left","AnchorCenter","width","AnchorRight","ViewportHeight","window","innerHeight","ViewportWidth","innerWidth","vertical","horizontal","_contentEl","style","clearTimeout","_timer","setTimeout","_handleEsc","e","key","_emitToggle","event","CustomEvent","detail","dispatchEvent","updated","changedProps","has","undefined","get","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","TooltipScss","__decorate","property","type","String","prototype","state","query","customElement"],"mappings":"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"}
|