@sbb-esta/lyne-elements-dev 0.0.0 → 4.0.0-dev.1775550881

package/core/overlay/overlay-outside-pointer-event-listener.js

@@ -0,0 +1,34 @@
+import { containsPierceShadowDom as e, isAndroid as t, isIOS as n } from "../dom.js";
+//#region src/elements/core/overlay/overlay-outside-pointer-event-listener.ts
+var r = class {
+	constructor() {
+		this._overlays = /* @__PURE__ */ new Set(), this._pointerDownListener = (e) => {
+			this._pointerDownEventTarget = e.composedPath()[0];
+		}, this._clickListener = (t) => {
+			let n = t.composedPath()[0], r = t.type === "click" && this._pointerDownEventTarget ? this._pointerDownEventTarget : n;
+			this._pointerDownEventTarget = void 0;
+			for (let t of Array.from(this._overlays).reverse()) {
+				if (e(t, n) || e(t, r)) break;
+				t.dispatchEvent(new CustomEvent("overlayOutsidePointer"));
+			}
+		};
+	}
+	connect(e) {
+		this._overlays.size || (this._addGlobalEventListeners(), n && (this._cursorOriginalValue = document.body.style.cursor, document.body.style.cursor = "pointer")), this._overlays.add(e);
+	}
+	disconnect(e) {
+		this._overlays.delete(e), this._overlays.size || (this._abortController?.abort(), this._abortController = void 0, n && (document.body.style.cursor = this._cursorOriginalValue));
+	}
+	_addGlobalEventListeners() {
+		let e = document.body;
+		this._abortController = new AbortController();
+		let r = {
+			capture: !0,
+			passive: !0,
+			signal: this._abortController.signal
+		};
+		e.addEventListener("click", this._clickListener, r), !t && !n && (e.addEventListener("pointerdown", this._pointerDownListener, r), e.addEventListener("auxclick", this._clickListener, r), e.addEventListener("contextmenu", this._clickListener, r));
+	}
+}, i = new r();
+//#endregion
+export { r as SbbOverlayOutsidePointerEventListener, i as sbbOverlayOutsidePointerEventListener };

package/core/overlay/overlay-trigger-attributes.js

@@ -0,0 +1,15 @@
+//#region src/elements/core/overlay/overlay-trigger-attributes.ts
+function e(e, t, n, r) {
+	e && (e.setAttribute("aria-haspopup", t), e.setAttribute("aria-controls", n), e.setAttribute("aria-expanded", `${r === "opening" || r === "opened"}`));
+}
+function t(e) {
+	e && (e.removeAttribute("aria-haspopup"), e.removeAttribute("aria-controls"), e.removeAttribute("aria-expanded"));
+}
+function n(e, t, n, r = "listbox") {
+	e && (e.setAttribute("autocomplete", "off"), e.setAttribute("role", "combobox"), e.setAttribute("aria-autocomplete", "list"), e.setAttribute("aria-haspopup", r), e.setAttribute("aria-controls", t), e.setAttribute("aria-owns", t), e.setAttribute("aria-expanded", `${n}`));
+}
+function r(e) {
+	e && (e.removeAttribute("autocomplete"), e.removeAttribute("role"), e.removeAttribute("aria-autocomplete"), e.removeAttribute("aria-haspopup"), e.removeAttribute("aria-controls"), e.removeAttribute("aria-owns"), e.removeAttribute("aria-expanded"));
+}
+//#endregion
+export { r as removeAriaComboBoxAttributes, t as removeAriaOverlayTriggerAttributes, n as setAriaComboBoxAttributes, e as setAriaOverlayTriggerAttributes };

package/core/overlay/overlay.js

@@ -0,0 +1,14 @@
+import { html as e } from "lit";
+//#region src/elements/core/overlay/overlay.ts
+function t() {
+	return e`
+    <div class="sbb-gap-fix-wrapper">
+      <div class="sbb-gap-fix-corner" id="left"></div>
+    </div>
+    <div class="sbb-gap-fix-wrapper">
+      <div class="sbb-gap-fix-corner" id="right"></div>
+    </div>
+  `;
+}
+//#endregion
+export { t as overlayGapFixCorners };

package/core/overlay/position.js

@@ -0,0 +1,57 @@
+//#region src/elements/core/overlay/position.ts
+function e(e) {
+	let t = window.getComputedStyle(e), n = t.display, r = parseInt(t.maxHeight, 10).toString();
+	if (n !== "none" && r !== "0") return {
+		scrollHeight: e.scrollHeight,
+		clientHeight: e.clientHeight,
+		offsetHeight: e.offsetHeight,
+		scrollWidth: e.scrollWidth,
+		clientWidth: e.clientWidth,
+		offsetWidth: e.offsetWidth
+	};
+	e.style.position = "absolute", e.style.visibility = "hidden", e.style.display = "block";
+	let i = e.scrollHeight, a = e.clientHeight, o = e.offsetHeight, s = e.scrollWidth, c = e.clientWidth, l = e.offsetWidth;
+	return e.style.display = "", e.style.position = "", e.style.visibility = "", {
+		scrollHeight: i,
+		clientHeight: a,
+		offsetHeight: o,
+		scrollWidth: s,
+		clientWidth: c,
+		offsetWidth: l
+	};
+}
+function t(e, t) {
+	if (!e || !t) return !1;
+	let n = e.getBoundingClientRect();
+	return n.top <= t.clientY && t.clientY <= n.top + n.height && n.left <= t.clientX && t.clientX <= n.left + n.width;
+}
+function n(t, n, r, i) {
+	let a = i?.verticalOffset || 0, o = i?.horizontalOffset || 0, s = i?.responsiveHeight || !1, c = n.getBoundingClientRect(), l = e(t), u = c.left, d = c.top, f = document.documentElement.clientWidth - (u + c.width), p = d - a, m = document.documentElement.clientHeight - (d + c.height + a), h = u, g = d + c.height + a, _ = l.offsetWidth - c.width, v = {
+		horizontal: "start",
+		vertical: "below"
+	}, y = `${m - a}px`;
+	i?.centered && u - 16 + c.width / 2 > l.offsetWidth / 2 && f - 16 > _ / 2 && (h -= _ /= 2, v.horizontal = "center"), f < _ && u > _ && (h -= _, v.horizontal = "end"), o && v.horizontal !== "center" && c.width / 2 < o && (h += o * (v.horizontal === "start" ? -1 : 1)), (u < _ && f < _ || document.documentElement.clientWidth < l.offsetWidth) && (h = document.documentElement.clientWidth / 2 - l.offsetWidth / 2);
+	let b = m - a < l.scrollHeight && p - a > (s ? l.clientHeight : l.scrollHeight) || p > m && m - a < l.clientHeight && !s;
+	!i?.forceBelow && (i?.forceAbove || b) && (g = p < l.scrollHeight ? g - c.height - p - a : d - l.clientHeight - a, y = `${p - a}px`, v.vertical = "above");
+	let x = r.getBoundingClientRect();
+	return x.left < 0 && (h -= x.left), x.top < 0 && (g -= x.top), {
+		top: g,
+		left: h,
+		maxHeight: y,
+		alignment: v
+	};
+}
+function r(t, n, r, i) {
+	let a = i?.verticalOffset || 0, o = i?.horizontalOffset || 0, s = n.getBoundingClientRect(), c = e(t), l = n.parentElement.shadowRoot.querySelector(i?.contentSelector ?? `.${t.className}`).getBoundingClientRect(), u = r.getBoundingClientRect(), d = document.documentElement.clientWidth - l.right, f = document.documentElement.clientHeight - (s.top - a), p = document.documentElement.clientHeight, m = `${p - 32}px`, h = {
+		horizontal: "end",
+		vertical: "above"
+	}, g = c.offsetWidth + o, _ = l.right, v = s.top + a;
+	return d < g && s.left > g && (_ = _ - l.width - c.offsetWidth, h.horizontal = "start"), o && h.horizontal !== "center" && (_ += o * (h.horizontal === "start" ? -1 : 1)), f < c.scrollHeight && (v = p - c.clientHeight - 16), u.left < 0 && (_ -= u.left), u.top < 0 && (v -= u.top), {
+		top: v,
+		left: _,
+		maxHeight: m,
+		alignment: h
+	};
+}
+//#endregion
+export { n as getElementPosition, r as getElementPositionHorizontal, e as getElementRectangle, t as isEventOnElement };

package/core/overlay.js

@@ -0,0 +1,6 @@
+import { overlayGapFixCorners as e } from "./overlay/overlay.js";
+import { getElementPosition as t, getElementPositionHorizontal as n, getElementRectangle as r, isEventOnElement as i } from "./overlay/position.js";
+import { setOverlayPosition as a } from "./overlay/overlay-option-panel.js";
+import { SbbOverlayOutsidePointerEventListener as o, sbbOverlayOutsidePointerEventListener as s } from "./overlay/overlay-outside-pointer-event-listener.js";
+import { removeAriaComboBoxAttributes as c, removeAriaOverlayTriggerAttributes as l, setAriaComboBoxAttributes as u, setAriaOverlayTriggerAttributes as d } from "./overlay/overlay-trigger-attributes.js";
+export { o as SbbOverlayOutsidePointerEventListener, t as getElementPosition, n as getElementPositionHorizontal, r as getElementRectangle, i as isEventOnElement, e as overlayGapFixCorners, c as removeAriaComboBoxAttributes, l as removeAriaOverlayTriggerAttributes, s as sbbOverlayOutsidePointerEventListener, u as setAriaComboBoxAttributes, d as setAriaOverlayTriggerAttributes, a as setOverlayPosition };

package/core/styles/_index.scss

@@ -0,0 +1,26 @@
+@forward './core/functions';
+@forward './core/mediaqueries';
+
+@forward './mixins/a11y';
+@forward './mixins/animation';
+@forward './mixins/badge';
+@forward './mixins/buttons';
+@forward './mixins/card';
+@forward './mixins/chip';
+@forward './mixins/font-face';
+@forward './mixins/helpers';
+@forward './mixins/image';
+@forward './mixins/inputs';
+@forward './mixins/layout';
+@forward './mixins/link';
+@forward './mixins/lists';
+@forward './mixins/overlay';
+@forward './mixins/panel';
+@forward './mixins/pearl-chain-bullet';
+@forward './mixins/popover';
+@forward './mixins/scrollbar';
+@forward './mixins/table';
+@forward './mixins/typo';
+
+// Internals
+@forward './mixins/dev_and_debug';

package/core/styles/a11y.scss

@@ -0,0 +1,15 @@
+@use './mixins/a11y';
+
+.sbb-screen-reader-only {
+  @include a11y.screen-reader-only;
+}
+
+.sbb-focus-outline:focus-visible {
+  @include a11y.focus-outline;
+}
+
+.sbb-focus-outline-dark:focus-visible {
+  @include a11y.focus-outline;
+
+  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
+}

package/core/styles/animation.scss

@@ -0,0 +1,17 @@
+@use './mixins/animation';
+
+.sbb-disable-animation {
+  @include animation.disable-animation;
+}
+
+.sbb-disable-animation-locally {
+  @include animation.disable-animation;
+
+  & > * {
+    @include animation.enable-animation;
+  }
+}
+
+.sbb-enable-animation {
+  @include animation.enable-animation;
+}

package/core/styles/badge.scss

@@ -0,0 +1,3 @@
+@use './mixins/badge';
+
+@include badge.badge-attribute;

package/core/styles/box-sizing.scss

@@ -0,0 +1,3 @@
+@use './mixins/helpers';
+
+@include helpers.box-sizing;

package/core/styles/core/functions.scss

@@ -0,0 +1,26 @@
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:string';
+@use 'sass:list';
+
+@function px-to-rem-build($size) {
+  // size: value in px (no unit)
+  @return ((math.div($size, 16)) * 1rem);
+}
+
+@function theme-select($theme-values, $theme) {
+  @if map.has-key($theme-values, $theme) {
+    @return map.get($theme-values, $theme);
+  } @else {
+    @return map.get($theme-values, 'standard');
+  }
+}
+
+@function theme-pattern-select($theme-values, $theme) {
+  @each $sub-theme, $value in $theme-values {
+    @if string.index($theme, $sub-theme) {
+      @return $value;
+    }
+  }
+  @return list.nth(map.values($theme-values), 1);
+}

package/core/styles/core/mediaqueries.scss

@@ -0,0 +1,98 @@
+// Inspired by: https://github.com/sass-mq/sass-mq
+
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use 'sass:string';
+@use './node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss' as sbb-tokens;
+
+$mq-breakpoints: (
+  // 0
+  zero: sbb-tokens.$sbb-breakpoint-zero-min,
+  // 600
+  small: sbb-tokens.$sbb-breakpoint-small-min,
+  // 1024
+  large: sbb-tokens.$sbb-breakpoint-large-min,
+  // 1440
+  ultra: sbb-tokens.$sbb-breakpoint-ultra-min,
+  ultra--max-content: (
+    sbb-tokens.$sbb-breakpoint-ultra-min + (2 * sbb-tokens.$sbb-spacing-fixed-18x)
+  )
+) !default;
+$mq-media-type: all !default;
+
+@function mq-px2rem($rem, $modifier) {
+  @return calc(#{$rem + (math.div($modifier, 16) * 1rem)});
+}
+
+@function mq-get-breakpoint-width($name, $breakpoints: $mq-breakpoints) {
+  @if map.has-key($breakpoints, $name) {
+    @return map.get($breakpoints, $name);
+  } @else {
+    @warn "Breakpoint #{$name} wasn't found in $breakpoints.";
+  }
+}
+
+@mixin mq(
+  $from: false,
+  $to: false,
+  $and: false,
+  $media-type: $mq-media-type,
+  $breakpoints: $mq-breakpoints
+) {
+  $min-width: 0;
+  $max-width: 0;
+  $media-query: '';
+
+  // From: this breakpoint (inclusive)
+  @if $from {
+    @if meta.type-of($from) == number {
+      $min-width: mq-px2rem($from);
+    } @else {
+      $min-width: mq-px2rem(mq-get-breakpoint-width($from, $breakpoints), 0);
+    }
+  }
+
+  // Until: that breakpoint (exclusive)
+  @if $to {
+    @if meta.type-of($to) == number {
+      $max-width: mq-px2rem($to);
+    } @else {
+      $max-width: mq-px2rem(mq-get-breakpoint-width($to, $breakpoints), -1);
+    }
+  }
+
+  @if $min-width != 0 {
+    $media-query: '#{$media-query} and (min-width: #{$min-width})';
+  }
+  @if $max-width != 0 {
+    $media-query: '#{$media-query} and (max-width: #{$max-width})';
+  }
+  @if $and {
+    $media-query: '#{$media-query} and #{$and}';
+  }
+
+  // Remove unnecessary media query prefix 'all and '
+  @if $media-type == 'all' and $media-query != '' {
+    $media-type: '';
+    $media-query: string.slice(string.unquote($media-query), 6);
+  }
+
+  @media #{$media-type + $media-query} {
+    @content;
+  }
+}
+
+@mixin hover-mq($hover: true) {
+  $media-query: '';
+
+  @if $hover == true {
+    $media-query: '(any-hover: hover)';
+  } @else if $hover == false {
+    $media-query: '(hover: none)';
+  }
+
+  @media #{$media-query} {
+    @content;
+  }
+}