@sbb-esta/lyne-elements-dev 5.1.0-dev.1782379755 → 5.1.0-dev.1782428163
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/development/tooltip.pure.js +4 -2
- package/package.json +2 -2
- package/tooltip.pure.js +3 -3
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
2
|
import { html, isServer, unsafeCSS } from "lit";
|
|
3
3
|
import { property } from "lit/decorators.js";
|
|
4
|
-
import { SbbDisabledMixin, SbbEscapableOverlayController, SbbOpenCloseBaseElement, SbbOverlayPositionController, appendAriaElements, idReference, isAndroid, isIOS, isZeroAnimationDuration, popoverResetStyles, queueDomContentLoaded, readConfig, removeAriaElements, sbbOverlayOutsidePointerEventListener } from "./core.js";
|
|
4
|
+
import { SbbDisabledMixin, SbbEscapableOverlayController, SbbOpenCloseBaseElement, SbbOverlayPositionController, appendAriaElements, idReference, isAndroid, isIOS, isZeroAnimationDuration, popoverResetStyles, queueDomContentLoaded, readConfig, removeAriaElements, sbbInputModalityDetector, sbbOverlayOutsidePointerEventListener } from "./core.js";
|
|
5
5
|
|
|
6
6
|
//#region src/elements/tooltip/tooltip.scss?inline
|
|
7
7
|
var tooltip_default = ":host {\n --sbb-tooltip-max-width: min(\n 25rem,\n calc(100vw - var(--sbb-spacing-fixed-2x))\n );\n --sbb-tooltip-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-4x)\n );\n position-area: var(--sbb-overlay-position-area);\n position-try-fallbacks: var(--sbb-overlay-position-try-fallbacks);\n display: none;\n position: fixed;\n pointer-events: var(--sbb-tooltip-pointer-events, all);\n z-index: var(--sbb-tooltip-z-index, var(--sbb-overlay-default-z-index));\n animation-name: var(--sbb-tooltip-animation-name);\n animation-duration: var(--sbb-tooltip-animation-duration);\n animation-timing-function: var(--sbb-tooltip-animation-easing);\n font-size: var(--sbb-tooltip-font-size);\n letter-spacing: var(--sbb-typo-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n --sbb-tooltip-animation-name: open;\n display: block;\n}\n\n:host(:is(:state(state-closing),[state--state-closing])) {\n --sbb-tooltip-animation-name: close;\n --sbb-tooltip-pointer-events: none;\n}\n\n:host(:is([data-position~=block-end], [data-position~=bottom], [data-position^=end])) {\n padding-block-start: var(--sbb-tooltip-gap);\n}\n\n:host(:is([data-position~=block-start], [data-position~=top], [data-position^=start])) {\n padding-block-end: var(--sbb-tooltip-gap);\n}\n\n:host(:is([data-position~=inline-start],\n[data-position~=inline-end],\n[data-position~=left],\n[data-position~=right],\n[data-position$=\" start\"],\n[data-position$=\" end\"])) {\n padding-inline: var(--sbb-tooltip-gap);\n}\n\n.sbb-tooltip {\n box-shadow: var(--sbb-box-shadow-level-5-soft);\n border: var(--sbb-border-width-1x) solid var(--sbb-tooltip-border-color);\n border-radius: var(--sbb-tooltip-border-radius);\n padding: var(--sbb-tooltip-padding);\n color: var(--sbb-tooltip-color);\n background-color: var(--sbb-tooltip-background-color);\n min-width: var(--sbb-tooltip-min-width);\n max-width: var(--sbb-tooltip-max-width);\n}\n\n@keyframes open {\n from {\n opacity: 0;\n translate: var(--sbb-tooltip-animation-translate);\n }\n to {\n opacity: 1;\n translate: 0;\n }\n}\n@keyframes close {\n from {\n opacity: 1;\n translate: 0;\n }\n to {\n opacity: 0;\n translate: var(--sbb-tooltip-animation-translate);\n }\n}\n";
|
|
@@ -334,7 +334,9 @@ let SbbTooltipElement = (() => {
|
|
|
334
334
|
if (!newTarget || newTarget !== this) this._delayedClose();
|
|
335
335
|
}, options);
|
|
336
336
|
trigger.addEventListener("blur", () => this.close(), options);
|
|
337
|
-
trigger.addEventListener("focus", () =>
|
|
337
|
+
trigger.addEventListener("focus", () => {
|
|
338
|
+
if (sbbInputModalityDetector.mostRecentModality === "keyboard") this._delayedOpen();
|
|
339
|
+
}, options);
|
|
338
340
|
}
|
|
339
341
|
trigger.addEventListener("touchstart", () => {
|
|
340
342
|
clearTimeout(this._longPressOpenTimeout);
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "5.1.0-dev.
|
|
3
|
+
"version": "5.1.0-dev.1782428163",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
7
7
|
"web components",
|
|
8
8
|
"lit",
|
|
9
|
-
"https://github.com/sbb-design-systems/lyne-components/commit/
|
|
9
|
+
"https://github.com/sbb-design-systems/lyne-components/commit/bd2087359b75935f4a4a341d32ec7708b64b9caa"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|
package/tooltip.pure.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isServer as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{SbbDisabledMixin as o,SbbEscapableOverlayController as s,SbbOpenCloseBaseElement as c,SbbOverlayPositionController as l,appendAriaElements as u,idReference as d,isAndroid as f,isIOS as p,isZeroAnimationDuration as m,popoverResetStyles as h,queueDomContentLoaded as g,readConfig as _,removeAriaElements as v,sbbOverlayOutsidePointerEventListener as
|
|
2
|
-
`;const
|
|
1
|
+
import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isServer as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{SbbDisabledMixin as o,SbbEscapableOverlayController as s,SbbOpenCloseBaseElement as c,SbbOverlayPositionController as l,appendAriaElements as u,idReference as d,isAndroid as f,isIOS as p,isZeroAnimationDuration as m,popoverResetStyles as h,queueDomContentLoaded as g,readConfig as _,removeAriaElements as v,sbbInputModalityDetector as y,sbbOverlayOutsidePointerEventListener as b}from"./core.js";var x=`:host{--sbb-tooltip-max-width:min(25rem, calc(100vw - var(--sbb-spacing-fixed-2x)));--sbb-tooltip-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));position-area:var(--sbb-overlay-position-area);position-try-fallbacks:var(--sbb-overlay-position-try-fallbacks);pointer-events:var(--sbb-tooltip-pointer-events,all);z-index:var(--sbb-tooltip-z-index,var(--sbb-overlay-default-z-index));animation-name:var(--sbb-tooltip-animation-name);animation-duration:var(--sbb-tooltip-animation-duration);animation-timing-function:var(--sbb-tooltip-animation-easing);font-size:var(--sbb-tooltip-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:none;position:fixed}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-tooltip-animation-name:open;display:block}:host(:is(:state(state-closing),[state--state-closing])){--sbb-tooltip-animation-name:close;--sbb-tooltip-pointer-events:none}:host(:is([data-position~=block-end],[data-position~=bottom],[data-position^=end])){padding-block-start:var(--sbb-tooltip-gap)}:host(:is([data-position~=block-start],[data-position~=top],[data-position^=start])){padding-block-end:var(--sbb-tooltip-gap)}:host(:is([data-position~=inline-start],[data-position~=inline-end],[data-position~=left],[data-position~=right],[data-position$=\\ start],[data-position$=\\ end])){padding-inline:var(--sbb-tooltip-gap)}.sbb-tooltip{box-shadow:var(--sbb-box-shadow-level-5-soft);border:var(--sbb-border-width-1x) solid var(--sbb-tooltip-border-color);border-radius:var(--sbb-tooltip-border-radius);padding:var(--sbb-tooltip-padding);color:var(--sbb-tooltip-color);background-color:var(--sbb-tooltip-background-color);min-width:var(--sbb-tooltip-min-width);max-width:var(--sbb-tooltip-max-width)}@keyframes open{0%{opacity:0;translate:var(--sbb-tooltip-animation-translate)}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{opacity:0;translate:var(--sbb-tooltip-animation-translate)}}
|
|
2
|
+
`;const S=f||p,C=new WeakMap;let w=(()=>{let f=o(c),p=[],w,T=[],E=[],D,O,k;return class extends f{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(f[Symbol.metadata]??null):void 0;w=[d(),a()],D=[a({attribute:`open-delay`,type:Number})],O=[a({attribute:`close-delay`,type:Number})],k=[a({attribute:`long-press-close-delay`,type:Number})],e(this,null,w,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:t},T,E),e(this,null,D,{kind:`setter`,name:`openDelay`,static:!1,private:!1,access:{has:e=>`openDelay`in e,set:(e,t)=>{e.openDelay=t}},metadata:t},null,p),e(this,null,O,{kind:`setter`,name:`closeDelay`,static:!1,private:!1,access:{has:e=>`closeDelay`in e,set:(e,t)=>{e.closeDelay=t}},metadata:t},null,p),e(this,null,k,{kind:`setter`,name:`longPressCloseDelay`,static:!1,private:!1,access:{has:e=>`longPressCloseDelay`in e,set:(e,t)=>{e.longPressCloseDelay=t}},metadata:t},null,p),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-tooltip`}static{this.role=`tooltip`}static{this.styles=[h,i(x)]}static{r||g(()=>this._initializeTooltipOutlet())}#e;get trigger(){return this.#e}set trigger(e){this.#e=e}set openDelay(e){this._openDelay=e}get openDelay(){return this._openDelay??_().tooltip?.openDelay??0}set closeDelay(e){this._closeDelay=e}get closeDelay(){return this._closeDelay??_().tooltip?.closeDelay??0}set longPressCloseDelay(e){this._longPressCloseDelay=+e}get longPressCloseDelay(){return this._longPressCloseDelay??_().tooltip?.longPressCloseDelay??1500}constructor(){super(),this.#e=(t(this,p),t(this,T,null)),this._openDelay=(t(this,E),null),this._closeDelay=null,this._triggerElement=null,this._escapableOverlayController=new s(this),this._overlayController=new l(this),this.addEventListener(`mouseleave`,e=>{(this.state===`opened`||this.state===`opening`)&&(!e.relatedTarget||!this._triggerElement?.contains(e.relatedTarget))&&this._delayedClose()},{passive:!0}),this.addEventListener(`overlayOutsidePointer`,()=>this.close(),{passive:!0}),this.addEventListener(`animationend`,e=>this._onTooltipAnimationEnd(e),{passive:!0})}static _initializeTooltipOutlet(){this._tooltipOutlet=document.createElement(`div`),this._tooltipOutlet.classList.add(`sbb-overlay-outlet`),document.body.appendChild(this._tooltipOutlet),new MutationObserver(e=>{for(let t of e)if(t.type===`attributes`)this._handleTooltipTrigger(t.target);else if(t.type===`childList`)for(let e of[...t.addedNodes,...t.removedNodes].filter(e=>e.nodeType===e.ELEMENT_NODE))this._handleTooltipTrigger(e),this._findAndHandleTooltipTriggers(e)}).observe(document.documentElement,{attributeFilter:[`sbb-tooltip`,`sbb-tooltip-open-delay`,`sbb-tooltip-close-delay`,`sbb-tooltip-position`],childList:!0,subtree:!0}),this._findAndHandleTooltipTriggers(document.body)}static _findAndHandleTooltipTriggers(e){e.querySelectorAll(`[sbb-tooltip]`).forEach(e=>this._handleTooltipTrigger(e))}static _handleTooltipTrigger(e){let t=e.getAttribute(`sbb-tooltip`),n=C.get(e);if(t&&e.isConnected){n||(n=document.createElement(`sbb-tooltip`),C.set(e,n),this._tooltipOutlet.appendChild(n),n.trigger=e),n.textContent=t,n.openDelay=e.hasAttribute(`sbb-tooltip-open-delay`)?+e.getAttribute(`sbb-tooltip-open-delay`):null,n.closeDelay=e.hasAttribute(`sbb-tooltip-close-delay`)?+e.getAttribute(`sbb-tooltip-close-delay`):null;let r=e.hasAttribute(`sbb-tooltip-position`)?e.getAttribute(`sbb-tooltip-position`).split(`,`).map(e=>e.trim()):e.tooltipPositions;r&&r.length>0?(n.style.setProperty(`--sbb-overlay-position-area`,r[0]),n.style.setProperty(`--sbb-overlay-position-try-fallbacks`,r.slice(1).join(`, `))):(n.style.removeProperty(`--sbb-overlay-position-area`),n.style.removeProperty(`--sbb-overlay-position-try-fallbacks`))}else n&&(C.delete(e),n._destroy?.())}connectedCallback(){super.connectedCallback(),this.popover=`manual`,this.state=`closed`,b.connect(this),this.hasUpdated&&this.trigger&&this._attach(this.trigger)}disconnectedCallback(){super.disconnectedCallback(),b.disconnect(this),this._detach()}requestUpdate(e,t,n){super.requestUpdate(e,t,n),!r&&(!e||e===`trigger`)&&this.hasUpdated&&this._attach(this.trigger)}firstUpdated(e){super.firstUpdated(e),this._attach(this.trigger)}open(){this._resetOpenCloseTimeout(),!(this.state!==`closed`&&this.state!==`closing`||this.disabled||!this.trigger||!this.dispatchBeforeOpenEvent())&&(this.showPopover?.(),this.state=`opening`,this._overlayController.connect(this.trigger),this._isZeroAnimationDuration()&&this._handleOpening())}close(){this._resetOpenCloseTimeout(),!(this.state!==`opened`&&this.state!==`opening`)&&(this.dispatchBeforeCloseEvent(),this.state=`closing`,this._isZeroAnimationDuration()&&this._handleClosing())}_delayedOpen(){this._resetOpenCloseTimeout(),this._openTimeout=setTimeout(()=>this.open(),this.openDelay)}_handleOpening(){this.state=`opened`,this._escapableOverlayController.connect(),this.dispatchOpenEvent()}_delayedClose(){this._resetOpenCloseTimeout(),this._closeTimeout=setTimeout(()=>this.close(),this.closeDelay)}_handleClosing(){this.state=`closed`,this.hidePopover?.(),this._overlayController.disconnect(),this._escapableOverlayController.disconnect(),this.dispatchCloseEvent(),this._openStateController?.abort()}_onTooltipAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_attach(e){this._triggerElement&&this._detach(),this._triggerElement=e,this._triggerElement&&(this._triggerElement.ariaDescribedByElements=u(this._triggerElement.ariaDescribedByElements,this),this._addTriggerEventHandlers())}_detach(){this._triggerAbortController?.abort(),this._openStateController?.abort(),this._resetOpenCloseTimeout(),clearTimeout(this._longPressOpenTimeout),clearTimeout(this._longPressCloseTimeout),this._triggerElement&&=(this._triggerElement.ariaDescribedByElements=v(this._triggerElement.ariaDescribedByElements,this),null)}_destroy(){this._detach(),this.remove()}_addTriggerEventHandlers(){let e=this._triggerElement;if(!e)return;this._triggerAbortController?.abort(),this._triggerAbortController=new AbortController;let t={signal:this._triggerAbortController.signal,passive:!0};S||(e.addEventListener(`mouseenter`,()=>this._delayedOpen(),t),e.addEventListener(`mouseleave`,e=>{let t=e.relatedTarget;(!t||t!==this)&&this._delayedClose()},t),e.addEventListener(`blur`,()=>this.close(),t),e.addEventListener(`focus`,()=>{y.mostRecentModality===`keyboard`&&this._delayedOpen()},t)),e.addEventListener(`touchstart`,()=>{clearTimeout(this._longPressOpenTimeout),clearTimeout(this._longPressCloseTimeout),this._longPressOpenTimeout=setTimeout(()=>this.open(),500)},t),e.addEventListener(`touchend`,()=>{clearTimeout(this._longPressOpenTimeout),this._longPressCloseTimeout=setTimeout(()=>this.close(),this.longPressCloseDelay)},t),e.addEventListener(`touchcancel`,()=>{clearTimeout(this._longPressOpenTimeout)},t)}_isZeroAnimationDuration(){return m(this,`--sbb-tooltip-animation-duration`)}_resetOpenCloseTimeout(){clearTimeout(this._openTimeout),clearTimeout(this._closeTimeout)}render(){return n`
|
|
3
3
|
<div class="sbb-tooltip">
|
|
4
4
|
<slot></slot>
|
|
5
5
|
</div>
|
|
6
|
-
`}}})();export{
|
|
6
|
+
`}}})();export{w as SbbTooltipElement};
|