@kyndryl-design-system/shidoka-applications 2.70.4 → 2.70.6
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.
|
@@ -103,7 +103,7 @@ dialog:has(> *:hover) {
|
|
|
103
103
|
border-color: var(--kd-color-border-ui-hover);
|
|
104
104
|
}
|
|
105
105
|
dialog::backdrop {
|
|
106
|
-
background-color: var(--kd-color-background-
|
|
106
|
+
background-color: var(--kd-color-background-opacity-inverse-backdrop);
|
|
107
107
|
}
|
|
108
108
|
dialog.size--md {
|
|
109
109
|
width: 384px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tooltip/tooltip.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAOlD;;;;;GAKG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,0BAA0B;IAEhD,wCAAwC;IAExC,QAAQ,CAAC,aAAa,SAAa;IAEnC;;OAEG;IAEH,QAAQ,CAAC,KAAK,UAAS;IAEvB;;OAEG;IAEH,QAAQ,CAAC,eAAe,SAAY;IAEpC;;OAEG;IAEH,QAAQ,CAAC,UAAU,SAAS;IAE5B;;OAEG;IAEH,QAAQ,CAAC,MAAM,EAAE,GAAG,CAAC;IAErB;;OAEG;IAEH,QAAQ,CAAC,SAAS,EAAG,GAAG,CAAC;IAEzB;;OAEG;IAEH,QAAQ,CAAC,UAAU,EAAG,GAAG,CAAC;IAEjB,MAAM;IA4Cf,OAAO,CAAC,gBAAgB;
|
|
1
|
+
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tooltip/tooltip.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAOlD;;;;;GAKG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,0BAA0B;IAEhD,wCAAwC;IAExC,QAAQ,CAAC,aAAa,SAAa;IAEnC;;OAEG;IAEH,QAAQ,CAAC,KAAK,UAAS;IAEvB;;OAEG;IAEH,QAAQ,CAAC,eAAe,SAAY;IAEpC;;OAEG;IAEH,QAAQ,CAAC,UAAU,SAAS;IAE5B;;OAEG;IAEH,QAAQ,CAAC,MAAM,EAAE,GAAG,CAAC;IAErB;;OAEG;IAEH,QAAQ,CAAC,SAAS,EAAG,GAAG,CAAC;IAEzB;;OAEG;IAEH,QAAQ,CAAC,UAAU,EAAG,GAAG,CAAC;IAEjB,MAAM;IA4Cf,OAAO,CAAC,gBAAgB;IAyKxB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,WAAW;IAOV,OAAO,CAAC,YAAY,EAAE,GAAG;IAMzB,iBAAiB;IAKjB,oBAAoB;CAI9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,OAAO,CAAC;KACxB;CACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__setFunctionName as t,__esDecorate as e,__runInitializers as n,__classPrivateFieldGet as o,__classPrivateFieldSet as i}from"tslib";import{unsafeSVG as r}from"lit-html/directives/unsafe-svg.js";import{css as s,LitElement as a,unsafeCSS as c,html as l}from"lit";import{customElement as
|
|
1
|
+
import{__setFunctionName as t,__esDecorate as e,__runInitializers as n,__classPrivateFieldGet as o,__classPrivateFieldSet as i}from"tslib";import{unsafeSVG as r}from"lit-html/directives/unsafe-svg.js";import{css as s,LitElement as a,unsafeCSS as c,html as l}from"lit";import{customElement as h,property as d,state as p,query as m}from"lit/decorators.js";import{classMap as f}from"lit/directives/class-map.js";import{z as _}from"../../../vendor/@kyndryl-design-system/shidoka-icons-oqOblwTK.js";var g=s`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
@@ -246,7 +246,7 @@ slot[name=anchor]::slotted(svg) {
|
|
|
246
246
|
.content.direction--right.anchor--end::before {
|
|
247
247
|
top: auto;
|
|
248
248
|
bottom: 8px;
|
|
249
|
-
}`;let x=(()=>{var s,x,b,u,v,k,y;let E,w,P,T,
|
|
249
|
+
}`;let x=(()=>{var s,x,b,u,v,k,y;let E,w,P,C,T,z,$,B,R,M=[h("kyn-tooltip")],W=[],j=a,O=[],S=[],L=[],H=[],q=[],A=[],D=[],F=[],G=[],I=[],J=[],K=[],N=[],Q=[];return w=class extends j{get assistiveText(){return o(this,s,"f")}set assistiveText(t){i(this,s,t,"f")}get _open(){return o(this,x,"f")}set _open(t){i(this,x,t,"f")}get _anchorPosition(){return o(this,b,"f")}set _anchorPosition(t){i(this,b,t,"f")}get _direction(){return o(this,u,"f")}set _direction(t){i(this,u,t,"f")}get _timer(){return o(this,v,"f")}set _timer(t){i(this,v,t,"f")}get _anchorEl(){return o(this,k,"f")}set _anchorEl(t){i(this,k,t,"f")}get _contentEl(){return o(this,y,"f")}set _contentEl(t){i(this,y,t,"f")}render(){const t={content:!0,open:this._open,"anchor--start":"start"===this._anchorPosition,"anchor--end":"end"===this._anchorPosition,"anchor--center":"center"===this._anchorPosition,"direction--top":"top"===this._direction,"direction--bottom":"bottom"===this._direction,"direction--left":"left"===this._direction,"direction--right":"right"===this._direction};return l`
|
|
250
250
|
<div class="tooltip">
|
|
251
251
|
<button
|
|
252
252
|
class="anchor"
|
|
@@ -274,5 +274,5 @@ slot[name=anchor]::slotted(svg) {
|
|
|
274
274
|
<slot></slot>
|
|
275
275
|
</div>
|
|
276
276
|
</div>
|
|
277
|
-
`}_positionTooltip(){const t=this._anchorEl.getBoundingClientRect().top,e=this._anchorEl.getBoundingClientRect().top+this._anchorEl.getBoundingClientRect().height/2,n=this._anchorEl.getBoundingClientRect().top+this._anchorEl.getBoundingClientRect().height,o=this._anchorEl.getBoundingClientRect().left,i=this._anchorEl.getBoundingClientRect().left+this._anchorEl.getBoundingClientRect().width/2,r=this._anchorEl.getBoundingClientRect().left+this._anchorEl.getBoundingClientRect().width,s=window.innerHeight,a=window.innerWidth;let
|
|
277
|
+
`}_positionTooltip(){const t=this._anchorEl.getBoundingClientRect().top,e=this._anchorEl.getBoundingClientRect().top+this._anchorEl.getBoundingClientRect().height/2,n=this._anchorEl.getBoundingClientRect().top+this._anchorEl.getBoundingClientRect().height,o=this._anchorEl.getBoundingClientRect().left,i=this._anchorEl.getBoundingClientRect().left+this._anchorEl.getBoundingClientRect().width/2,r=this._anchorEl.getBoundingClientRect().left+this._anchorEl.getBoundingClientRect().width,s=window.innerHeight,a=window.innerWidth,c=document.querySelector("kyn-header"),l=null==c?void 0:c.getBoundingClientRect(),h=this._contentEl.offsetHeight||60;if(l&&t-h<l.bottom){this._direction="bottom";const t=o+this._anchorEl.offsetWidth/2;return this._anchorPosition=t<.33*a?"start":t<.66*a?"center":"end",this._contentEl.style.top=`${n}px`,void(this._contentEl.style.left=`${t}px`)}let d="down",p="right";t>.67*s?d="up":t>.33*s&&(d="middle"),o>.67*a?p="left":o>.33*a&&(p="center"),"down"===d?"right"===p?a<672?(this._direction="bottom",this._anchorPosition="start",this._contentEl.style.top=n+"px",this._contentEl.style.left=i+"px"):(this._direction="right",this._anchorPosition="start",this._contentEl.style.top=e+"px",this._contentEl.style.left=r+"px"):"center"===p?(this._direction="bottom",this._anchorPosition="center",this._contentEl.style.top=n+"px",this._contentEl.style.left=i+"px"):a<672?(this._direction="bottom",this._anchorPosition="end",this._contentEl.style.top=n+"px",this._contentEl.style.left=i+"px"):(this._direction="left",this._anchorPosition="start",this._contentEl.style.top=e+"px",this._contentEl.style.left=o+"px"):"middle"===d?"right"===p?a<672?(this._direction="top",this._anchorPosition="start",this._contentEl.style.top=t+"px",this._contentEl.style.left=i+"px"):(this._direction="right",this._anchorPosition="center",this._contentEl.style.top=e+"px",this._contentEl.style.left=r+"px"):"center"===p?(this._direction="top",this._anchorPosition="center",this._contentEl.style.top=t+"px",this._contentEl.style.left=i+"px"):a<672?(this._direction="top",this._anchorPosition="end",this._contentEl.style.top=t+"px",this._contentEl.style.left=i+"px"):(this._direction="left",this._anchorPosition="center",this._contentEl.style.top=e+"px",this._contentEl.style.left=o+"px"):"right"===p?a<672?(this._direction="top",this._anchorPosition="start",this._contentEl.style.top=t+"px",this._contentEl.style.left=i+"px"):(this._direction="right",this._anchorPosition="end",this._contentEl.style.top=e+"px",this._contentEl.style.left=r+"px"):"center"===p?(this._direction="top",this._anchorPosition="center",this._contentEl.style.top=t+"px",this._contentEl.style.left=i+"px"):a<672?(this._direction="top",this._anchorPosition="end",this._contentEl.style.top=t+"px",this._contentEl.style.left=i+"px"):(this._direction="left",this._anchorPosition="end",this._contentEl.style.top=e+"px",this._contentEl.style.left=o+"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()}constructor(){super(...arguments),s.set(this,n(this,O,"Tooltip")),x.set(this,(n(this,S),n(this,L,!1))),b.set(this,(n(this,H),n(this,q,"center"))),u.set(this,(n(this,A),n(this,D,"top"))),v.set(this,(n(this,F),n(this,G,void 0))),k.set(this,(n(this,I),n(this,J,void 0))),y.set(this,(n(this,K),n(this,N,void 0))),n(this,Q)}},s=new WeakMap,x=new WeakMap,b=new WeakMap,u=new WeakMap,v=new WeakMap,k=new WeakMap,y=new WeakMap,t(w,"Tooltip"),(()=>{var t;const n="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(t=j[Symbol.metadata])&&void 0!==t?t:null):void 0;P=[d({type:String})],C=[p()],T=[p()],z=[p()],$=[p()],B=[m(".anchor")],R=[m(".content")],e(w,null,P,{kind:"accessor",name:"assistiveText",static:!1,private:!1,access:{has:t=>"assistiveText"in t,get:t=>t.assistiveText,set:(t,e)=>{t.assistiveText=e}},metadata:n},O,S),e(w,null,C,{kind:"accessor",name:"_open",static:!1,private:!1,access:{has:t=>"_open"in t,get:t=>t._open,set:(t,e)=>{t._open=e}},metadata:n},L,H),e(w,null,T,{kind:"accessor",name:"_anchorPosition",static:!1,private:!1,access:{has:t=>"_anchorPosition"in t,get:t=>t._anchorPosition,set:(t,e)=>{t._anchorPosition=e}},metadata:n},q,A),e(w,null,z,{kind:"accessor",name:"_direction",static:!1,private:!1,access:{has:t=>"_direction"in t,get:t=>t._direction,set:(t,e)=>{t._direction=e}},metadata:n},D,F),e(w,null,$,{kind:"accessor",name:"_timer",static:!1,private:!1,access:{has:t=>"_timer"in t,get:t=>t._timer,set:(t,e)=>{t._timer=e}},metadata:n},G,I),e(w,null,B,{kind:"accessor",name:"_anchorEl",static:!1,private:!1,access:{has:t=>"_anchorEl"in t,get:t=>t._anchorEl,set:(t,e)=>{t._anchorEl=e}},metadata:n},J,K),e(w,null,R,{kind:"accessor",name:"_contentEl",static:!1,private:!1,access:{has:t=>"_contentEl"in t,get:t=>t._contentEl,set:(t,e)=>{t._contentEl=e}},metadata:n},N,Q),e(null,E={value:w},M,{kind:"class",name:w.name,metadata:n},null,W),w=E.value,n&&Object.defineProperty(w,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:n})})(),w.styles=c(g),n(w,W),w})();export{x as Tooltip};
|
|
278
278
|
//# sourceMappingURL=tooltip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","sources":["../../../../src/components/reusable/tooltip/tooltip.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, unsafeCSS } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TooltipScss from './tooltip.scss?inline';\n\nimport infoIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/information.svg';\n\n/**\n * Tooltip.\n * @fires on-tooltip-toggle - Emits the open state of the tooltip on open/close. `detail:{ open: boolean }`\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 = unsafeCSS(TooltipScss);\n\n /** Assistive text for anchor button. */\n @property({ type: String })\n accessor assistiveText = 'Tooltip';\n\n /** Tooltip open state.\n * @internal\n */\n @state()\n accessor _open = false;\n\n /** Tooltip anchor position. `'start'`, `'end'`, or `'center'`.\n * @internal\n */\n @state()\n accessor _anchorPosition = 'center';\n\n /** Tooltip direction. `'top'`, `'bottom'`, `'left'`, or `'right'`.\n * @internal\n */\n @state()\n accessor _direction = 'top';\n\n /** Timeout function to delay modal close.\n * @internal\n */\n @state()\n accessor _timer: any;\n\n /** Anchor element\n * @internal\n */\n @query('.anchor')\n accessor _anchorEl!: any;\n\n /** Content element\n * @internal\n */\n @query('.content')\n accessor _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\"\n ><span class=\"info-icon\">${unsafeSVG(infoIcon)}</span></slot\n >\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","customElement","LitElement","_classThis","_classSuper","assistiveText","__classPrivateFieldGet","this","_Tooltip_assistiveText_accessor_storage","value","__classPrivateFieldSet","_open","_Tooltip__open_accessor_storage","_anchorPosition","_Tooltip__anchorPosition_accessor_storage","_direction","_Tooltip__direction_accessor_storage","_timer","_Tooltip__timer_accessor_storage","_anchorEl","_Tooltip__anchorEl_accessor_storage","_contentEl","_Tooltip__contentEl_accessor_storage","render","classes","content","open","html","_handleOpen","_handleMouseLeave","_handleClose","unsafeSVG","infoIcon","classMap","_positionTooltip","AnchorTop","getBoundingClientRect","top","AnchorMiddle","height","AnchorBottom","AnchorLeft","left","AnchorCenter","width","AnchorRight","ViewportHeight","window","innerHeight","ViewportWidth","innerWidth","vertical","horizontal","style","clearTimeout","setTimeout","_handleEsc","e","key","_emitToggle","event","CustomEvent","detail","dispatchEvent","updated","changedProps","has","undefined","get","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","set","__runInitializers","_assistiveText_initializers","_assistiveText_extraInitializers","__open_initializers","__open_extraInitializers","__anchorPosition_initializers","__anchorPosition_extraInitializers","__direction_initializers","__direction_extraInitializers","__timer_initializers","__timer_extraInitializers","__anchorEl_initializers","__anchorEl_extraInitializers","__contentEl_initializers","_assistiveText_decorators","property","type","String","__open_decorators","state","__anchorPosition_decorators","__direction_decorators","__timer_decorators","query","__esDecorate","kind","name","static","private","access","obj","metadata","_metadata","__anchorEl_decorators","__contentEl_decorators","__contentEl_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","TooltipScss"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tooltip.js","sources":["../../../../src/components/reusable/tooltip/tooltip.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, unsafeCSS } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TooltipScss from './tooltip.scss?inline';\n\nimport infoIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/information.svg';\n\n/**\n * Tooltip.\n * @fires on-tooltip-toggle - Emits the open state of the tooltip on open/close. `detail:{ open: boolean }`\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 = unsafeCSS(TooltipScss);\n\n /** Assistive text for anchor button. */\n @property({ type: String })\n accessor assistiveText = 'Tooltip';\n\n /** Tooltip open state.\n * @internal\n */\n @state()\n accessor _open = false;\n\n /** Tooltip anchor position. `'start'`, `'end'`, or `'center'`.\n * @internal\n */\n @state()\n accessor _anchorPosition = 'center';\n\n /** Tooltip direction. `'top'`, `'bottom'`, `'left'`, or `'right'`.\n * @internal\n */\n @state()\n accessor _direction = 'top';\n\n /** Timeout function to delay modal close.\n * @internal\n */\n @state()\n accessor _timer: any;\n\n /** Anchor element\n * @internal\n */\n @query('.anchor')\n accessor _anchorEl!: any;\n\n /** Content element\n * @internal\n */\n @query('.content')\n accessor _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\"\n ><span class=\"info-icon\">${unsafeSVG(infoIcon)}</span></slot\n >\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 // Edge case handling: When tooltip collide with kyn-header, force the tooltip to render downwards.\n const header = document.querySelector('kyn-header');\n const headerRect = header?.getBoundingClientRect();\n const tooltipHeight = this._contentEl.offsetHeight || 60;\n\n const isOverlappingHeader =\n headerRect && AnchorTop - tooltipHeight < headerRect.bottom;\n\n if (isOverlappingHeader) {\n this._direction = 'bottom';\n const center = AnchorLeft + this._anchorEl.offsetWidth / 2;\n\n if (center < ViewportWidth * 0.33) {\n this._anchorPosition = 'start';\n } else if (center < ViewportWidth * 0.66) {\n this._anchorPosition = 'center';\n } else {\n this._anchorPosition = 'end';\n }\n\n this._contentEl.style.top = `${AnchorBottom}px`;\n this._contentEl.style.left = `${center}px`;\n return;\n }\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","customElement","LitElement","_classThis","_classSuper","assistiveText","__classPrivateFieldGet","this","_Tooltip_assistiveText_accessor_storage","value","__classPrivateFieldSet","_open","_Tooltip__open_accessor_storage","_anchorPosition","_Tooltip__anchorPosition_accessor_storage","_direction","_Tooltip__direction_accessor_storage","_timer","_Tooltip__timer_accessor_storage","_anchorEl","_Tooltip__anchorEl_accessor_storage","_contentEl","_Tooltip__contentEl_accessor_storage","render","classes","content","open","html","_handleOpen","_handleMouseLeave","_handleClose","unsafeSVG","infoIcon","classMap","_positionTooltip","AnchorTop","getBoundingClientRect","top","AnchorMiddle","height","AnchorBottom","AnchorLeft","left","AnchorCenter","width","AnchorRight","ViewportHeight","window","innerHeight","ViewportWidth","innerWidth","header","document","querySelector","headerRect","tooltipHeight","offsetHeight","bottom","center","offsetWidth","style","vertical","horizontal","clearTimeout","setTimeout","_handleEsc","e","key","_emitToggle","event","CustomEvent","detail","dispatchEvent","updated","changedProps","has","undefined","get","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","set","__runInitializers","_assistiveText_initializers","_assistiveText_extraInitializers","__open_initializers","__open_extraInitializers","__anchorPosition_initializers","__anchorPosition_extraInitializers","__direction_initializers","__direction_extraInitializers","__timer_initializers","__timer_extraInitializers","__anchorEl_initializers","__anchorEl_extraInitializers","__contentEl_initializers","_assistiveText_decorators","property","type","String","__open_decorators","state","__anchorPosition_decorators","__direction_decorators","__timer_decorators","query","__esDecorate","kind","name","static","private","access","obj","metadata","_metadata","__anchorEl_decorators","__contentEl_decorators","__contentEl_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","TooltipScss"],"mappings":"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"}
|