@sbb-esta/lyne-elements-dev 5.8.0-dev.1789021633 → 5.8.0-dev.1789045220
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.
|
@@ -6,7 +6,7 @@ import { SbbAccentButtonElement } from "./button.pure.js";
|
|
|
6
6
|
import { SbbElement, SbbLanguageController, forceType, forwardEvent, i18nMapContainerButtonLabel, scrollbarStyles } from "./core.js";
|
|
7
7
|
|
|
8
8
|
//#region src/elements/map-container/map-container.scss?inline
|
|
9
|
-
var map_container_default = ":host {\n --sbb-map-container-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-4x)\n );\n --_sbb-map-container-map-height: calc(\n var(--sbb-map-container-map-height-zero) + var(--sbb-map-container-border-radius)\n );\n display: grid;\n grid-template-rows: auto auto;\n}\n@media (min-width: calc(37.5rem)) {\n :host {\n --_sbb-map-container-map-height: calc(\n var(--sbb-map-container-map-height-small) + var(--sbb-map-container-border-radius)\n );\n }\n}\n@media (min-width: calc(64rem)) {\n :host {\n grid-template-columns: max(var(--sbb-map-container-sidebar-width)) calc(100% - var(--sbb-map-container-sidebar-width));\n position: fixed;\n inset: var(--sbb-map-container-margin-start, var(--sbb-header-vertical-spacing)) 0 0 0;\n }\n}\n\n.sbb-map-container__sidebar-button {\n position: fixed;\n left: 50%;\n inset-block-end: var(--sbb-spacing-fixed-5x);\n visibility: hidden;\n opacity: 0;\n transform: translateX(-50%) translateY(calc(100% + var(--sbb-spacing-fixed-5x)));\n transition: opacity var(--sbb-map-container-animation-duration) var(--sbb-animation-easing), visibility var(--sbb-map-container-animation-duration) var(--sbb-animation-easing) var(--sbb-map-container-animation-duration), transform var(--sbb-map-container-animation-duration) var(--sbb-animation-easing);\n}\n:host(:is(:state(scroll-up-button-visible),[state--scroll-up-button-visible])) .sbb-map-container__sidebar-button {\n transition: visibility var(--sbb-map-container-animation-duration) var(--sbb-animation-easing), opacity var(--sbb-map-container-animation-duration) var(--sbb-animation-easing), transform var(--sbb-map-container-animation-duration) ease-out;\n visibility: visible;\n opacity: 1;\n transform: translateX(-50%) translateY(0);\n}\n@media (min-width: calc(64rem)) {\n .sbb-map-container__sidebar-button {\n display: none;\n }\n}\n\n.sbb-map-container__sidebar {\n grid-column: 1/3;\n grid-row: 2/3;\n width: 100%;\n overflow: hidden auto;\n position: relative;\n border-start-end-radius: var(--sbb-map-container-border-radius);\n border-start-start-radius: var(--sbb-map-container-border-radius);\n margin-block-start: calc(var(--sbb-map-container-border-radius) * -1);\n background-color: var(--sbb-map-container-sidebar-background-color);\n}\n@media (min-width: calc(64rem)) {\n .sbb-map-container__sidebar {\n grid-column: 1/2;\n grid-row: 1/3;\n border-radius: 0;\n margin-block-start: 0;\n border-block-start: var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);\n }\n}\n\n.sbb-map-container__map {\n position: sticky;\n inset-block-start: 0;\n inset-inline: 0;\n grid-row: 1/2;\n grid-column: 1/3;\n}\n@media (max-width: calc(63.9375rem)) {\n .sbb-map-container__map {\n inset-block-start: var(--sbb-map-container-mobile-sticky-block-start, 0);\n height: var(--_sbb-map-container-map-height);\n }\n}\n@media (min-width: calc(64rem)) {\n .sbb-map-container__map {\n grid-row: 1/3;\n grid-column: 2/3;\n position: relative;\n }\n}\n";
|
|
9
|
+
var map_container_default = ":host {\n --sbb-map-container-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-4x)\n );\n --_sbb-map-container-map-height: calc(\n var(--sbb-map-container-map-height-zero) + var(--sbb-map-container-border-radius)\n );\n display: grid;\n grid-template-rows: auto auto;\n}\n@media (min-width: calc(37.5rem)) {\n :host {\n --_sbb-map-container-map-height: calc(\n var(--sbb-map-container-map-height-small) + var(--sbb-map-container-border-radius)\n );\n }\n}\n@media (min-width: calc(64rem)) {\n :host {\n grid-template-columns: max(var(--sbb-map-container-sidebar-width)) calc(100% - var(--sbb-map-container-sidebar-width));\n position: fixed;\n inset: var(--sbb-map-container-margin-start, var(--sbb-header-vertical-spacing)) 0 0 0;\n }\n}\n\n.sbb-map-container__sidebar-button {\n position: fixed;\n left: 50%;\n inset-block-end: var(--sbb-spacing-fixed-5x);\n visibility: hidden;\n opacity: 0;\n transform: translateX(-50%) translateY(calc(100% + var(--sbb-spacing-fixed-5x)));\n transition: opacity var(--sbb-map-container-animation-duration) var(--sbb-animation-easing), visibility var(--sbb-map-container-animation-duration) var(--sbb-animation-easing) var(--sbb-map-container-animation-duration), transform var(--sbb-map-container-animation-duration) var(--sbb-animation-easing);\n}\n:host(:is(:state(scroll-up-button-visible),[state--scroll-up-button-visible])) .sbb-map-container__sidebar-button {\n transition: visibility var(--sbb-map-container-animation-duration) var(--sbb-animation-easing), opacity var(--sbb-map-container-animation-duration) var(--sbb-animation-easing), transform var(--sbb-map-container-animation-duration) ease-out;\n visibility: visible;\n opacity: 1;\n transform: translateX(-50%) translateY(0);\n}\n@media (min-width: calc(64rem)) {\n .sbb-map-container__sidebar-button {\n display: none;\n }\n}\n\n.sbb-map-container__sidebar {\n grid-column: 1/3;\n grid-row: 2/3;\n width: 100%;\n overflow: hidden auto;\n position: relative;\n border-start-end-radius: var(--sbb-map-container-border-radius);\n border-start-start-radius: var(--sbb-map-container-border-radius);\n margin-block-start: calc(var(--sbb-map-container-border-radius) * -1);\n background-color: var(--sbb-map-container-sidebar-background-color);\n z-index: 1;\n}\n@media (min-width: calc(64rem)) {\n .sbb-map-container__sidebar {\n grid-column: 1/2;\n grid-row: 1/3;\n border-radius: 0;\n margin-block-start: 0;\n border-block-start: var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);\n }\n}\n\n.sbb-map-container__map {\n position: sticky;\n inset-block-start: 0;\n inset-inline: 0;\n grid-row: 1/2;\n grid-column: 1/3;\n}\n@media (max-width: calc(63.9375rem)) {\n .sbb-map-container__map {\n inset-block-start: var(--sbb-map-container-mobile-sticky-block-start, 0);\n height: var(--_sbb-map-container-map-height);\n }\n}\n@media (min-width: calc(64rem)) {\n .sbb-map-container__map {\n grid-row: 1/3;\n grid-column: 2/3;\n position: relative;\n }\n}\n";
|
|
10
10
|
|
|
11
11
|
//#endregion
|
|
12
12
|
//#region src/elements/map-container/map-container.component.ts
|
|
@@ -147,9 +147,6 @@ let SbbMapContainerElement = (() => {
|
|
|
147
147
|
}
|
|
148
148
|
render() {
|
|
149
149
|
return html`
|
|
150
|
-
<div class="sbb-map-container__map">
|
|
151
|
-
<slot name="map"></slot>
|
|
152
|
-
</div>
|
|
153
150
|
<div
|
|
154
151
|
class="sbb-map-container__sidebar sbb-scrollbar-thick-track-visible"
|
|
155
152
|
@scroll=${(e) => forwardEvent(e, document)}
|
|
@@ -168,6 +165,9 @@ let SbbMapContainerElement = (() => {
|
|
|
168
165
|
${i18nMapContainerButtonLabel[this._language.current]}
|
|
169
166
|
</sbb-accent-button>` : nothing}
|
|
170
167
|
</div>
|
|
168
|
+
<div class="sbb-map-container__map">
|
|
169
|
+
<slot name="map"></slot>
|
|
170
|
+
</div>
|
|
171
171
|
`;
|
|
172
172
|
}
|
|
173
173
|
};
|
package/map-container.pure.js
CHANGED
|
@@ -1,8 +1,5 @@
|
|
|
1
|
-
import{__esDecorate as e,__runInitializers as t}from"tslib";import{IntersectionController as n}from"@lit-labs/observers/intersection-controller.js";import{html as r,nothing as i,unsafeCSS as a}from"lit";import{property as o,state as s}from"lit/decorators.js";import{SbbAccentButtonElement as c}from"./button.pure.js";import{SbbElement as l,SbbLanguageController as u,forceType as d,forwardEvent as f,i18nMapContainerButtonLabel as p,scrollbarStyles as m}from"./core.js";var h=`:host{--sbb-map-container-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--_sbb-map-container-map-height:calc(var(--sbb-map-container-map-height-zero) + var(--sbb-map-container-border-radius));grid-template-rows:auto auto;display:grid}@media (width>=37.5rem){:host{--_sbb-map-container-map-height:calc(var(--sbb-map-container-map-height-small) + var(--sbb-map-container-border-radius))}}@media (width>=64rem){:host{grid-template-columns:max(var(--sbb-map-container-sidebar-width)) calc(100% - var(--sbb-map-container-sidebar-width));inset:var(--sbb-map-container-margin-start,var(--sbb-header-vertical-spacing)) 0 0 0;position:fixed}}.sbb-map-container__sidebar-button{left:50%;visibility:hidden;opacity:0;transform:translateX(-50%) translateY(calc(100% + var(--sbb-spacing-fixed-5x)));transition:opacity var(--sbb-map-container-animation-duration) var(--sbb-animation-easing), visibility var(--sbb-map-container-animation-duration) var(--sbb-animation-easing) var(--sbb-map-container-animation-duration), transform var(--sbb-map-container-animation-duration) var(--sbb-animation-easing);position:fixed;inset-block-end:var(--sbb-spacing-fixed-5x)}:host(:is(:state(scroll-up-button-visible),[state--scroll-up-button-visible])) .sbb-map-container__sidebar-button{transition:visibility var(--sbb-map-container-animation-duration) var(--sbb-animation-easing), opacity var(--sbb-map-container-animation-duration) var(--sbb-animation-easing), transform var(--sbb-map-container-animation-duration) ease-out;visibility:visible;opacity:1;transform:translate(-50%)translateY(0)}@media (width>=64rem){.sbb-map-container__sidebar-button{display:none}}.sbb-map-container__sidebar{width:100%;background-color:var(--sbb-map-container-sidebar-background-color);border-start-start-radius:var(--sbb-map-container-border-radius);border-start-end-radius:var(--sbb-map-container-border-radius);grid-area:2/1/3/3;margin-block-start:calc(var(--sbb-map-container-border-radius) * -1);position:relative;overflow:hidden auto}@media (width>=64rem){.sbb-map-container__sidebar{border-block-start:var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);border-radius:0;grid-area:1/1/3/2;margin-block-start:0}}.sbb-map-container__map{grid-area:1/1/2/3;position:sticky;inset-block-start:0;inset-inline:0}@media (width<=63.9375rem){.sbb-map-container__map{height:var(--_sbb-map-container-map-height);inset-block-start:var(--sbb-map-container-mobile-sticky-block-start,0)}}@media (width>=64rem){.sbb-map-container__map{grid-area:1/2/3/3;position:relative}}
|
|
1
|
+
import{__esDecorate as e,__runInitializers as t}from"tslib";import{IntersectionController as n}from"@lit-labs/observers/intersection-controller.js";import{html as r,nothing as i,unsafeCSS as a}from"lit";import{property as o,state as s}from"lit/decorators.js";import{SbbAccentButtonElement as c}from"./button.pure.js";import{SbbElement as l,SbbLanguageController as u,forceType as d,forwardEvent as f,i18nMapContainerButtonLabel as p,scrollbarStyles as m}from"./core.js";var h=`:host{--sbb-map-container-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--_sbb-map-container-map-height:calc(var(--sbb-map-container-map-height-zero) + var(--sbb-map-container-border-radius));grid-template-rows:auto auto;display:grid}@media (width>=37.5rem){:host{--_sbb-map-container-map-height:calc(var(--sbb-map-container-map-height-small) + var(--sbb-map-container-border-radius))}}@media (width>=64rem){:host{grid-template-columns:max(var(--sbb-map-container-sidebar-width)) calc(100% - var(--sbb-map-container-sidebar-width));inset:var(--sbb-map-container-margin-start,var(--sbb-header-vertical-spacing)) 0 0 0;position:fixed}}.sbb-map-container__sidebar-button{left:50%;visibility:hidden;opacity:0;transform:translateX(-50%) translateY(calc(100% + var(--sbb-spacing-fixed-5x)));transition:opacity var(--sbb-map-container-animation-duration) var(--sbb-animation-easing), visibility var(--sbb-map-container-animation-duration) var(--sbb-animation-easing) var(--sbb-map-container-animation-duration), transform var(--sbb-map-container-animation-duration) var(--sbb-animation-easing);position:fixed;inset-block-end:var(--sbb-spacing-fixed-5x)}:host(:is(:state(scroll-up-button-visible),[state--scroll-up-button-visible])) .sbb-map-container__sidebar-button{transition:visibility var(--sbb-map-container-animation-duration) var(--sbb-animation-easing), opacity var(--sbb-map-container-animation-duration) var(--sbb-animation-easing), transform var(--sbb-map-container-animation-duration) ease-out;visibility:visible;opacity:1;transform:translate(-50%)translateY(0)}@media (width>=64rem){.sbb-map-container__sidebar-button{display:none}}.sbb-map-container__sidebar{width:100%;background-color:var(--sbb-map-container-sidebar-background-color);z-index:1;border-start-start-radius:var(--sbb-map-container-border-radius);border-start-end-radius:var(--sbb-map-container-border-radius);grid-area:2/1/3/3;margin-block-start:calc(var(--sbb-map-container-border-radius) * -1);position:relative;overflow:hidden auto}@media (width>=64rem){.sbb-map-container__sidebar{border-block-start:var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);border-radius:0;grid-area:1/1/3/2;margin-block-start:0}}.sbb-map-container__map{grid-area:1/1/2/3;position:sticky;inset-block-start:0;inset-inline:0}@media (width<=63.9375rem){.sbb-map-container__map{height:var(--_sbb-map-container-map-height);inset-block-start:var(--sbb-map-container-mobile-sticky-block-start,0)}}@media (width>=64rem){.sbb-map-container__map{grid-area:1/2/3/3;position:relative}}
|
|
2
2
|
`;let g=(()=>{let g=l,_,v=[],y=[],b,x=[],S=[];return class extends g{constructor(){super(...arguments),this.#e=t(this,v,!1),this.#t=(t(this,y),t(this,x,!1)),this._language=(t(this,S),new u(this)),this._observer=new n(this,{target:null,callback:e=>this._toggleButtonVisibilityOnIntersect(e)})}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(g[Symbol.metadata]??null):void 0;_=[d(),o({attribute:`hide-scroll-up-button`,reflect:!0,type:Boolean})],b=[s()],e(this,null,_,{kind:`accessor`,name:`hideScrollUpButton`,static:!1,private:!1,access:{has:e=>`hideScrollUpButton`in e,get:e=>e.hideScrollUpButton,set:(e,t)=>{e.hideScrollUpButton=t}},metadata:t},v,y),e(this,null,b,{kind:`accessor`,name:`_scrollUpButtonVisible`,static:!1,private:!1,access:{has:e=>`_scrollUpButtonVisible`in e,get:e=>e._scrollUpButtonVisible,set:(e,t)=>{e._scrollUpButtonVisible=t}},metadata:t},x,S),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-map-container`}static{this.elementDependencies=[c]}static{this.styles=[m,a(h)]}#e;get hideScrollUpButton(){return this.#e}set hideScrollUpButton(e){this.#e=e}#t;get _scrollUpButtonVisible(){return this.#t}set _scrollUpButtonVisible(e){this.#t=e}willUpdate(e){if(super.willUpdate(e),e.has(`hideScrollUpButton`)){let e=this._intersector();!this.hideScrollUpButton&&e?this._observer.observe(e):e&&this._observer.unobserve(e)}}firstUpdated(e){super.firstUpdated(e),this.hideScrollUpButton||this._observer.observe(this._intersector())}_intersector(){return this.shadowRoot?.querySelector(`#intersector`)??null}_onScrollButtonClick(){this.scrollIntoView({behavior:`smooth`})}_toggleButtonVisibilityOnIntersect(e){e.forEach(e=>{let t=!e.isIntersecting;this.toggleState(`scroll-up-button-visible`,t),this._scrollUpButtonVisible=t})}render(){return r`
|
|
3
|
-
<div class="sbb-map-container__map">
|
|
4
|
-
<slot name="map"></slot>
|
|
5
|
-
</div>
|
|
6
3
|
<div
|
|
7
4
|
class="sbb-map-container__sidebar sbb-scrollbar-thick-track-visible"
|
|
8
5
|
@scroll=${e=>f(e,document)}
|
|
@@ -21,4 +18,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{IntersectionC
|
|
|
21
18
|
${p[this._language.current]}
|
|
22
19
|
</sbb-accent-button>`}
|
|
23
20
|
</div>
|
|
21
|
+
<div class="sbb-map-container__map">
|
|
22
|
+
<slot name="map"></slot>
|
|
23
|
+
</div>
|
|
24
24
|
`}}})();export{g as SbbMapContainerElement};
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "5.8.0-dev.
|
|
3
|
+
"version": "5.8.0-dev.1789045220",
|
|
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/a0bd9587aca150091ab7d8d9e3f6afbf47955f9c"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|