@sbb-esta/lyne-elements-dev 5.7.0-dev.1788332117 → 5.7.0-dev.1788397756
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/custom-elements.json
CHANGED
|
@@ -96254,6 +96254,22 @@
|
|
|
96254
96254
|
"module": "popover/popover-base/popover-base.js"
|
|
96255
96255
|
}
|
|
96256
96256
|
},
|
|
96257
|
+
{
|
|
96258
|
+
"kind": "field",
|
|
96259
|
+
"name": "negative",
|
|
96260
|
+
"type": {
|
|
96261
|
+
"text": "boolean"
|
|
96262
|
+
},
|
|
96263
|
+
"privacy": "public",
|
|
96264
|
+
"default": "false",
|
|
96265
|
+
"description": "Negative coloring variant flag.",
|
|
96266
|
+
"attribute": "negative",
|
|
96267
|
+
"reflects": true,
|
|
96268
|
+
"inheritedFrom": {
|
|
96269
|
+
"name": "SbbNegativeMixin",
|
|
96270
|
+
"module": "core/mixins/negative-mixin.js"
|
|
96271
|
+
}
|
|
96272
|
+
},
|
|
96257
96273
|
{
|
|
96258
96274
|
"kind": "field",
|
|
96259
96275
|
"name": "trigger",
|
|
@@ -97039,6 +97055,19 @@
|
|
|
97039
97055
|
},
|
|
97040
97056
|
"fieldName": "closeDelay"
|
|
97041
97057
|
},
|
|
97058
|
+
{
|
|
97059
|
+
"name": "negative",
|
|
97060
|
+
"type": {
|
|
97061
|
+
"text": "boolean"
|
|
97062
|
+
},
|
|
97063
|
+
"default": "false",
|
|
97064
|
+
"description": "Negative coloring variant flag.",
|
|
97065
|
+
"fieldName": "negative",
|
|
97066
|
+
"inheritedFrom": {
|
|
97067
|
+
"name": "SbbNegativeMixin",
|
|
97068
|
+
"module": "core/mixins/negative-mixin.js"
|
|
97069
|
+
}
|
|
97070
|
+
},
|
|
97042
97071
|
{
|
|
97043
97072
|
"name": "trigger",
|
|
97044
97073
|
"type": {
|
|
@@ -97053,6 +97082,12 @@
|
|
|
97053
97082
|
}
|
|
97054
97083
|
}
|
|
97055
97084
|
],
|
|
97085
|
+
"mixins": [
|
|
97086
|
+
{
|
|
97087
|
+
"name": "SbbNegativeMixin",
|
|
97088
|
+
"module": "core.js"
|
|
97089
|
+
}
|
|
97090
|
+
],
|
|
97056
97091
|
"superclass": {
|
|
97057
97092
|
"name": "SbbPopoverBaseElement",
|
|
97058
97093
|
"module": "popover/popover-base/popover-base.js"
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
|
|
2
2
|
import { SbbPopoverBaseElement } from '../popover-base/popover-base.ts';
|
|
3
|
+
declare const SbbPopoverElement_base: import("../../core.ts").AbstractConstructor<import("../../core.ts").SbbNegativeMixinType> & typeof SbbPopoverBaseElement;
|
|
3
4
|
/**
|
|
4
5
|
* It displays contextual information within a popover.
|
|
5
6
|
*
|
|
@@ -8,7 +9,7 @@ import { SbbPopoverBaseElement } from '../popover-base/popover-base.ts';
|
|
|
8
9
|
* the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
|
|
9
10
|
* component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
|
|
10
11
|
*/
|
|
11
|
-
export declare class SbbPopoverElement extends
|
|
12
|
+
export declare class SbbPopoverElement extends SbbPopoverElement_base {
|
|
12
13
|
static readonly elementName: string;
|
|
13
14
|
static styles: CSSResultGroup;
|
|
14
15
|
/** Whether the popover should be triggered on hover. */
|
|
@@ -51,3 +52,4 @@ declare global {
|
|
|
51
52
|
'sbb-popover': SbbPopoverElement;
|
|
52
53
|
}
|
|
53
54
|
}
|
|
55
|
+
export {};
|
|
@@ -3,7 +3,7 @@ import { ResizeController } from "@lit-labs/observers/resize-controller.js";
|
|
|
3
3
|
import { html, isServer, unsafeCSS } from "lit";
|
|
4
4
|
import { property, state } from "lit/decorators.js";
|
|
5
5
|
import { ref } from "lit/directives/ref.js";
|
|
6
|
-
import { IS_FOCUSABLE_QUERY, SbbEscapableOverlayController, SbbFocusTrapController, SbbLanguageController, SbbMediaQueryPointerCoarse, SbbOpenCloseBaseElement, forceType, getElementPosition, i18nClosePopover, idReference, isEventOnElement, isFakeMousedownFromScreenReader, isZeroAnimationDuration, popoverResetStyles, readConfig, removeAriaOverlayTriggerProperties, sbbInputModalityDetector, scrollbarStyles, setAriaOverlayTriggerProperties, ɵstateController } from "./core.js";
|
|
6
|
+
import { IS_FOCUSABLE_QUERY, SbbEscapableOverlayController, SbbFocusTrapController, SbbLanguageController, SbbMediaQueryPointerCoarse, SbbNegativeMixin, SbbOpenCloseBaseElement, SbbPropertyWatcherController, forceType, getElementPosition, i18nClosePopover, idReference, isEventOnElement, isFakeMousedownFromScreenReader, isZeroAnimationDuration, popoverResetStyles, readConfig, removeAriaOverlayTriggerProperties, sbbInputModalityDetector, scrollbarStyles, setAriaOverlayTriggerProperties, ɵstateController } from "./core.js";
|
|
7
7
|
import { SbbSecondaryButtonElement } from "./button.pure.js";
|
|
8
8
|
|
|
9
9
|
//#region src/elements/popover/popover-base/popover-base.scss?inline
|
|
@@ -296,7 +296,7 @@ let SbbPopoverBaseElement = (() => {
|
|
|
296
296
|
|
|
297
297
|
//#endregion
|
|
298
298
|
//#region src/elements/popover/popover/popover.scss?inline
|
|
299
|
-
var popover_default = ":host {\n --_sbb-popover-half-padding: calc(0.5 * var(--sbb-popover-padding));\n position: relative;\n}\n\n:host(:is(:state(has-close-button),[state--has-close-button])) {\n --_sbb-popover-close-button-min-height: calc(\n var(--sbb-button-min-height-size-s) + 2 * var(--sbb-popover-padding)\n );\n --_sbb-popover-close-button-min-width: calc(\n var(--_sbb-popover-close-button-min-height) - var(--_sbb-popover-half-padding)\n );\n}\n\n.sbb-popover__content {\n padding-block: var(--_sbb-popover-half-padding);\n padding-inline: var(--_sbb-popover-half-padding) var(--_sbb-popover-close-button-min-width, var(--_sbb-popover-half-padding));\n min-height: var(--_sbb-popover-close-button-min-height);\n}\n\n.sbb-popover__scrollable-content {\n display: block;\n padding-inline: var(--_sbb-popover-half-padding);\n padding-block: var(--_sbb-popover-half-padding);\n max-height: calc(var(--_sbb-popover-max-height) - var(--sbb-spacing-fixed-1x));\n overflow: auto;\n}\n\n::slotted(sbb-popover-close-button) {\n position: absolute;\n inset: var(--sbb-popover-padding) var(--sbb-popover-padding) auto auto;\n}\n";
|
|
299
|
+
var popover_default = ":host {\n --_sbb-popover-half-padding: calc(0.5 * var(--sbb-popover-padding));\n position: relative;\n}\n\n:host(:is(:state(has-close-button),[state--has-close-button])) {\n --_sbb-popover-close-button-min-height: calc(\n var(--sbb-button-min-height-size-s) + 2 * var(--sbb-popover-padding)\n );\n --_sbb-popover-close-button-min-width: calc(\n var(--_sbb-popover-close-button-min-height) - var(--_sbb-popover-half-padding)\n );\n}\n\n:host([negative]) {\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n --sbb-popover-background: var(--sbb-background-color-2-negative);\n --sbb-popover-color: var(--sbb-color-2-negative);\n}\n\n.sbb-popover__content {\n padding-block: var(--_sbb-popover-half-padding);\n padding-inline: var(--_sbb-popover-half-padding) var(--_sbb-popover-close-button-min-width, var(--_sbb-popover-half-padding));\n min-height: var(--_sbb-popover-close-button-min-height);\n color: var(--sbb-popover-color);\n}\n\n.sbb-popover__scrollable-content {\n display: block;\n padding-inline: var(--_sbb-popover-half-padding);\n padding-block: var(--_sbb-popover-half-padding);\n max-height: calc(var(--_sbb-popover-max-height) - var(--sbb-spacing-fixed-1x));\n overflow: auto;\n}\n\n::slotted(sbb-popover-close-button) {\n position: absolute;\n inset: var(--sbb-popover-padding) var(--sbb-popover-padding) auto auto;\n}\n";
|
|
300
300
|
|
|
301
301
|
//#endregion
|
|
302
302
|
//#region src/elements/popover/popover/popover.component.ts
|
|
@@ -310,7 +310,7 @@ const pointerCoarse = isServer ? false : matchMedia(SbbMediaQueryPointerCoarse).
|
|
|
310
310
|
* component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
|
|
311
311
|
*/
|
|
312
312
|
let SbbPopoverElement = (() => {
|
|
313
|
-
let _classSuper = SbbPopoverBaseElement;
|
|
313
|
+
let _classSuper = SbbNegativeMixin(SbbPopoverBaseElement);
|
|
314
314
|
let _instanceExtraInitializers = [];
|
|
315
315
|
let _hoverTrigger_decorators;
|
|
316
316
|
let _hoverTrigger_initializers = [];
|
|
@@ -537,6 +537,7 @@ var SbbPopoverCloseButtonElement = class extends SbbSecondaryButtonElement {
|
|
|
537
537
|
super();
|
|
538
538
|
this._languageController = new SbbLanguageController(this).withHandler(() => this.internals.ariaLabel = i18nClosePopover[this._languageController.current]);
|
|
539
539
|
this.size = "s";
|
|
540
|
+
this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-popover"), { negative: (p) => this.negative = p.negative }));
|
|
540
541
|
}
|
|
541
542
|
renderTemplate() {
|
|
542
543
|
return super.renderIconSlot();
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "5.7.0-dev.
|
|
3
|
+
"version": "5.7.0-dev.1788397756",
|
|
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/54a680b0612e1d0785499597f428b78bd9771519"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|
package/popover.pure.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeController as n}from"@lit-labs/observers/resize-controller.js";import{html as r,isServer as i,unsafeCSS as a}from"lit";import{property as o,state as s}from"lit/decorators.js";import{ref as c}from"lit/directives/ref.js";import{IS_FOCUSABLE_QUERY as l,SbbEscapableOverlayController as u,SbbFocusTrapController as d,SbbLanguageController as f,SbbMediaQueryPointerCoarse as p,
|
|
2
|
-
`;const
|
|
1
|
+
import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeController as n}from"@lit-labs/observers/resize-controller.js";import{html as r,isServer as i,unsafeCSS as a}from"lit";import{property as o,state as s}from"lit/decorators.js";import{ref as c}from"lit/directives/ref.js";import{IS_FOCUSABLE_QUERY as l,SbbEscapableOverlayController as u,SbbFocusTrapController as d,SbbLanguageController as f,SbbMediaQueryPointerCoarse as p,SbbNegativeMixin as m,SbbOpenCloseBaseElement as h,SbbPropertyWatcherController as g,forceType as _,getElementPosition as v,i18nClosePopover as y,idReference as b,isEventOnElement as x,isFakeMousedownFromScreenReader as S,isZeroAnimationDuration as C,popoverResetStyles as w,readConfig as T,removeAriaOverlayTriggerProperties as E,sbbInputModalityDetector as D,scrollbarStyles as O,setAriaOverlayTriggerProperties as k,ɵstateController as A}from"./core.js";import{SbbSecondaryButtonElement as j}from"./button.pure.js";var M=`:host{--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));--sbb-popover-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--_sbb-popover-inset:0 auto auto 0;--_sbb-popover-translate:0 var(--sbb-spacing-fixed-2x);--_sbb-popover-box-shadow:var(--sbb-box-shadow-level-9-hard);display:none;outline:none!important}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--_sbb-popover-inset:0;display:block}:host(:is(:state(position-above),[state--position-above])){--_sbb-popover-translate:0 calc(var(--sbb-spacing-fixed-2x) * -1)}.sbb-popover:after,.sbb-popover__content:before{content:"";width:var(--sbb-popover-arrow-size);height:var(--sbb-popover-arrow-size);left:var(--_sbb-popover-arrow-position-x,0);bottom:calc(100% - var(--sbb-popover-arrow-size) / 2);background-color:var(--sbb-popover-background);border-radius:var(--sbb-border-radius-2x) 0;display:block;position:absolute;rotate:45deg}.sbb-popover__container{inset:var(--_sbb-popover-inset);pointer-events:none;z-index:var(--sbb-popover-z-index,var(--sbb-overlay-default-z-index));position:fixed}.sbb-popover{position:var(--sbb-popover-position,absolute);top:var(--_sbb-popover-position-y,0);bottom:unset;left:var(--_sbb-popover-position-x,0);right:unset;background-color:var(--sbb-popover-background);max-width:var(--sbb-popover-max-width);width:max-content;box-shadow:var(--_sbb-popover-box-shadow);border-radius:var(--sbb-popover-border-radius);pointer-events:all;border:none;outline:none;padding:0;display:none}:host(:focus-visible) .sbb-popover{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-popover{animation-name:open;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing);display:block}:host(:is(:state(state-closing),[state--state-closing])) .sbb-popover{pointer-events:none;animation-name:close;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}.sbb-popover:after{z-index:-1;box-shadow:var(--_sbb-popover-box-shadow)}@media (forced-colors:active){.sbb-popover:after{outline:var(--sbb-border-width-1x) solid CanvasText}}:host(:is(:state(position-above),[state--position-above])) .sbb-popover:after{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@media (forced-colors:active){.sbb-popover{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-popover:before{content:"";z-index:-1;background-color:#0000;display:block;position:absolute;inset:0}:host(:is(:state(position-below),[state--position-below])) .sbb-popover:before{inset-block-start:calc(-1 * var(--sbb-spacing-fixed-6x))}:host(:is(:state(position-above),[state--position-above])) .sbb-popover:before{inset-block-end:calc(-1 * var(--sbb-spacing-fixed-6x))}.sbb-popover__content{border-radius:var(--sbb-popover-border-radius);padding:var(--sbb-popover-padding);background-color:var(--sbb-popover-background);outline:none}.sbb-popover__content:before{clip-path:polygon(100% 0,0% 0%,0% 100%)}:host(:is(:state(position-above),[state--position-above])) .sbb-popover__content:before{top:calc(100% - var(--sbb-popover-arrow-size) / 2);clip-path:polygon(100% 0,100% 100%,0% 100%)}@keyframes open{0%{opacity:0;translate:var(--_sbb-popover-translate)}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{opacity:0;translate:var(--_sbb-popover-translate)}}
|
|
2
|
+
`;const N=new Set;var P=class extends Event{get closeTarget(){return this._closeTarget}constructor(e,{closeTarget:t,cancelable:n}){super(e,{cancelable:n}),this._closeTarget=t}};let F=(()=>{let s=h,f,p=[],m=[];return class extends s{constructor(){super(...arguments),this.#e=t(this,p,null),this._nextFocusedElement=t(this,m),this._skipCloseFocus=!1,this._resizeController=new n(this,{target:null,callback:()=>this._setPopoverPosition()}),this._escapableOverlayController=new u(this),this._focusTrapController=new d(this),this._blurTimeout=null,this._pointerDownListener=e=>{this._isPointerDownEventOnPopover=x(this.overlay,e)},this._closeOnBackdropClick=e=>{let t=e.composedPath();!this._isPointerDownEventOnPopover&&!x(this.overlay,e)&&(!this.trigger||!t.includes(this.trigger))&&(this._nextFocusedElement=t.filter(e=>e instanceof window.HTMLElement).find(e=>e.matches(l)),clearTimeout(this.closeTimeout),this.close())}}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(s[Symbol.metadata]??null):void 0;f=[b(),o()],e(this,null,f,{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},p,m),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[w,a(M)]}#e;get trigger(){return this.#e}set trigger(e){this.#e=e}open(){if(!(this.state!==`closed`&&this.state!==`closing`||!this.overlay||!this.dispatchBeforeOpenEvent())){for(let e of N)(e.state===`opened`||e.state===`opening`)&&e.close();this.showPopover?.(),this.state=`opening`,this.inert=!0,this._setPopoverPosition(),this._attachWindowEvents(),this._escapableOverlayController.connect(),this._nextFocusedElement=void 0,this._skipCloseFocus=!1,this._triggerElement&&(this._triggerElement.ariaExpanded=`true`),this._isZeroAnimationDuration()&&this._handleOpening()}}close(e){(this.state===`opened`||this.state===`opening`)&&(this._popoverCloseElement=e,this.dispatchBeforeCloseEvent({closeTarget:e??null})&&(this.state=`closing`,this.inert=!0,this._triggerElement&&(this._triggerElement.ariaExpanded=`false`),this._isZeroAnimationDuration()&&this._handleClosing()))}_isZeroAnimationDuration(){return C(this,`--sbb-popover-animation-duration`)}_handleClosing(){this.state=`closed`,this.hidePopover?.(),this.overlay&&(this._resizeController.unobserve(this.overlay),this.overlay.firstElementChild?.scrollTo(0,0)),this.removeAttribute(`tabindex`),this._skipCloseFocus||(this._nextFocusedElement||this._triggerElement)?.focus(),this._escapableOverlayController.disconnect(),this._openStateController?.abort(),this._focusTrapController.enabled=!1,this.dispatchCloseEvent({closeTarget:this._popoverCloseElement??null})}_handleOpening(){this.state=`opened`,this.inert=!1,this._setPopoverFocus(),this._focusTrapController.enabled=!0,this.overlay&&this._resizeController.observe(this.overlay),this.dispatchOpenEvent()}connectedCallback(){this.popover=`manual`,super.connectedCallback(),this.state=`closed`,N.add(this),this.hasUpdated&&this._configureTrigger()}requestUpdate(e,t,n){super.requestUpdate(e,t,n),!i&&(!e||e===`trigger`||e===`hoverTrigger`)&&this.hasUpdated&&this._configureTrigger()}firstUpdated(e){super.firstUpdated(e),this._configureTrigger()}disconnectedCallback(){super.disconnectedCallback(),this._triggerElement=null,this._triggerAbortController?.abort(),this._openStateController?.abort(),N.delete(this),this._blurTimeout&&clearTimeout(this._blurTimeout)}_configureTrigger(){if(!i){if(this.hydrationRequired){this.hydrationComplete.then(()=>this._configureTrigger());return}this.configureTrigger(this._triggerElement??null)}}configureTrigger(e){this._triggerAbortController?.abort(),E(this._triggerElement),this._triggerElement=this.trigger,this._triggerElement&&(k(this,this._triggerElement,`dialog`,this.state),this._triggerAbortController=new AbortController,this.registerTriggerListeners(this._triggerAbortController.signal))}registerTriggerListeners(e){this._triggerElement.addEventListener(`click`,()=>this.open(),{signal:e})}_attachWindowEvents(){this._openStateController=new AbortController,document.addEventListener(`scroll`,()=>this._setPopoverPosition(),{passive:!0,signal:this._openStateController.signal,capture:!0}),window.addEventListener(`resize`,()=>this._setPopoverPosition(),{passive:!0,signal:this._openStateController.signal}),window.addEventListener(`pointerdown`,this._pointerDownListener,{signal:this._openStateController.signal}),window.addEventListener(`pointerup`,this._closeOnBackdropClick,{signal:this._openStateController.signal})}_closeOnSbbPopoverCloseClick(e){let t=e.composedPath().find((e,t,n)=>e instanceof HTMLElement&&t<n.indexOf(this)&&(e.hasAttribute(`sbb-popover-close`)||e.localName===`sbb-popover-close-button`)&&!e.hasAttribute(`disabled`));t&&(clearTimeout(this.closeTimeout),this.close(t))}_onPopoverAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_setPopoverFocus(){!this._focusTrapController.focusInitialElement()&&this._openStateController&&(this.setAttribute(`tabindex`,`0`),this.focus({preventScroll:!0}),this.addEventListener(`blur`,e=>{this._blurTimeout=setTimeout(()=>{if(document.visibilityState!==`hidden`){if(this.removeAttribute(`tabindex`),this.contains(e.relatedTarget)||e.relatedTarget===this.trigger)return;(this.state===`opened`||this.state===`opening`)&&(this._skipCloseFocus=!0),this.close()}})},{signal:this._openStateController.signal}))}_setPopoverPosition(){if(!this.overlay||!this._triggerElement)return;let e=v(this.overlay,this._triggerElement,this.shadowRoot.querySelector(`.sbb-popover__container`),{verticalOffset:16,horizontalOffset:32,centered:!0,responsiveHeight:!0}),t=e.alignment.vertical;for(let e of[`above`,`below`])this.toggleState(`position-${e}`,e===t);let n=this.overlay.offsetWidth,r=document.documentElement.clientWidth,i=Math.max(2,Math.min(e.left,r-n-2)),a=this._triggerElement.getBoundingClientRect(),o=parseFloat(getComputedStyle(this.overlay).borderTopLeftRadius)||0,s=a.left-i+a.width/2-8,c=Math.max(o,Math.min(s,n-o-16));this.style.setProperty(`--_sbb-popover-position-x`,`${i}px`),this.style.setProperty(`--_sbb-popover-position-y`,`${e.top}px`),this.style.setProperty(`--_sbb-popover-arrow-position-x`,`${c}px`),this.style.setProperty(`--_sbb-popover-max-height`,e.maxHeight)}dispatchBeforeCloseEvent(e){let t=e?.closeTarget??null;return this.dispatchEvent(new P(`beforeclose`,{closeTarget:t,cancelable:!0}))}dispatchCloseEvent(e){let t=e?.closeTarget??null;return this.dispatchEvent(new P(`close`,{closeTarget:t,cancelable:!1}))}render(){return r`
|
|
3
3
|
<div class="sbb-popover__container">
|
|
4
4
|
<div
|
|
5
5
|
@animationend=${this._onPopoverAnimationEnd}
|
|
@@ -15,11 +15,11 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeControl
|
|
|
15
15
|
</div>
|
|
16
16
|
</div>
|
|
17
17
|
</div>
|
|
18
|
-
`}}})();var
|
|
19
|
-
`;const
|
|
18
|
+
`}}})();var I=`:host{--_sbb-popover-half-padding:calc(.5 * var(--sbb-popover-padding));position:relative}:host(:is(:state(has-close-button),[state--has-close-button])){--_sbb-popover-close-button-min-height:calc(var(--sbb-button-min-height-size-s) + 2 * var(--sbb-popover-padding));--_sbb-popover-close-button-min-width:calc(var(--_sbb-popover-close-button-min-height) - var(--_sbb-popover-half-padding))}:host([negative]){--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);--sbb-popover-background:var(--sbb-background-color-2-negative);--sbb-popover-color:var(--sbb-color-2-negative)}.sbb-popover__content{padding-block:var(--_sbb-popover-half-padding);padding-inline:var(--_sbb-popover-half-padding) var(--_sbb-popover-close-button-min-width,var(--_sbb-popover-half-padding));min-height:var(--_sbb-popover-close-button-min-height);color:var(--sbb-popover-color)}.sbb-popover__scrollable-content{padding-inline:var(--_sbb-popover-half-padding);padding-block:var(--_sbb-popover-half-padding);max-height:calc(var(--_sbb-popover-max-height) - var(--sbb-spacing-fixed-1x));display:block;overflow:auto}::slotted(sbb-popover-close-button){inset:var(--sbb-popover-padding) var(--sbb-popover-padding) auto auto;position:absolute}
|
|
19
|
+
`;const L=!i&&matchMedia(p).matches;let R=(()=>{let n=m(F),i=[],c,l=[],u=[],d,f,p,h=[],g=[];return class extends n{constructor(){super(...arguments),this.#e=(t(this,i),t(this,l,!1)),this._openDelay=t(this,u),this.#t=t(this,h,!1),this._openTimeout=t(this,g),this._overlayAbortController=null,this._onTriggerMouseEnter=()=>{this.state===`closed`||this.state===`closing`?this._openTimeout=setTimeout(()=>{D.reset(),this.open()},this.openDelay):clearTimeout(this.closeTimeout)},this._onTriggerMouseLeave=()=>{this.state===`opened`||this.state===`opening`?this.closeTimeout=setTimeout(()=>this.close(),this.closeDelay):clearTimeout(this._openTimeout)},this._onOverlayMouseEnter=()=>{this.state!==`opening`&&clearTimeout(this.closeTimeout)},this._onOverlayMouseLeave=()=>{this.state!==`opening`&&(this.closeTimeout=setTimeout(()=>this.close(),this.closeDelay))}}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(n[Symbol.metadata]??null):void 0;c=[_(),o({attribute:`hover-trigger`,type:Boolean})],d=[o({attribute:`open-delay`,type:Number})],f=[o({attribute:`close-delay`,type:Number})],p=[s()],e(this,null,c,{kind:`accessor`,name:`hoverTrigger`,static:!1,private:!1,access:{has:e=>`hoverTrigger`in e,get:e=>e.hoverTrigger,set:(e,t)=>{e.hoverTrigger=t}},metadata:t},l,u),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,i),e(this,null,f,{kind:`setter`,name:`closeDelay`,static:!1,private:!1,access:{has:e=>`closeDelay`in e,set:(e,t)=>{e.closeDelay=t}},metadata:t},null,i),e(this,null,p,{kind:`accessor`,name:`_hoverTrigger`,static:!1,private:!1,access:{has:e=>`_hoverTrigger`in e,get:e=>e._hoverTrigger,set:(e,t)=>{e._hoverTrigger=t}},metadata:t},h,g),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-popover`}static{this.styles=[O,a(I)]}#e;get hoverTrigger(){return this.#e}set hoverTrigger(e){this.#e=e}set openDelay(e){this._openDelay=+e}get openDelay(){return this._openDelay??T().popover?.openDelay??0}set closeDelay(e){this._closeDelay=+e}get closeDelay(){return this._closeDelay??T().popover?.closeDelay??0}#t;get _hoverTrigger(){return this.#t}set _hoverTrigger(e){this.#t=e}configureTrigger(e){let t=this.hoverTrigger&&!L;(this.trigger!==e||t!==this._hoverTrigger)&&(this._hoverTrigger!==t&&(this._hoverTrigger=t,this.toggleState(`hover-trigger`,this._hoverTrigger),this._registerOverlayListeners()),super.configureTrigger(e))}_registerOverlayListeners(){this._overlayAbortController?.abort(),this._hoverTrigger&&(this._overlayAbortController=new AbortController,this.overlay?.addEventListener(`mouseenter`,()=>this._onOverlayMouseEnter(),{signal:this._overlayAbortController.signal}),this.overlay?.addEventListener(`mouseleave`,()=>this._onOverlayMouseLeave(),{signal:this._overlayAbortController.signal}))}registerTriggerListeners(e){this._hoverTrigger&&this.trigger?(this.trigger.addEventListener(`mouseenter`,this._onTriggerMouseEnter,{signal:e}),this.trigger.addEventListener(`mouseleave`,this._onTriggerMouseLeave,{signal:e}),this.trigger.addEventListener(`keydown`,e=>{(e.code===`Space`||e.code===`Enter`)&&this.open()},{signal:e}),this.trigger.addEventListener(`mousedown`,e=>{S(e)&&this.open()},{signal:e})):super.registerTriggerListeners(e)}firstUpdated(e){super.firstUpdated(e),this._registerOverlayListeners()}open(){super.open(),this.hoverTrigger&&this.trigger&&A(this.trigger).add(`force-hover`)}close(){super.close(),A(this.trigger)?.delete(`force-hover`)}renderContent(){return r`
|
|
20
20
|
<span class="sbb-popover__scrollable-content sbb-scrollbar">
|
|
21
21
|
<slot
|
|
22
22
|
@slotchange=${()=>this.toggleState(`has-close-button`,!!this.querySelector(`sbb-popover-close-button`))}
|
|
23
23
|
></slot>
|
|
24
24
|
</span>
|
|
25
|
-
`}}})();var
|
|
25
|
+
`}}})();var z=class extends j{static{this.elementName=`sbb-popover-close-button`}constructor(){super(),this._languageController=new f(this).withHandler(()=>this.internals.ariaLabel=y[this._languageController.current]),this.size=`s`,this.addController(new g(this,()=>this.closest(`sbb-popover`),{negative:e=>this.negative=e.negative}))}renderTemplate(){return super.renderIconSlot()}renderIconName(){return super.renderIconName()||`cross-small`}};export{F as SbbPopoverBaseElement,z as SbbPopoverCloseButtonElement,P as SbbPopoverCloseEvent,R as SbbPopoverElement};
|