@sbb-esta/lyne-elements-dev 0.0.0 → 4.5.1-dev.1771859294

package/core/styles/normalize.scss

@@ -0,0 +1,145 @@
+// modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize
+
+// Document
+// ========
+
+// 1. Correct the line height in all browsers. ///// Commented out since we define own line-height /////
+// 2. Prevent adjustments of font size after orientation changes in iOS.
+// 3. Use a more readable tab size (opinionated).
+html {
+  // line-height: 1.15; // 1
+  text-size-adjust: 100%; // 2
+  tab-size: 4; // 3
+}
+
+// Sections
+// ========
+body {
+  margin: 0; // Remove the margin in all browsers.
+}
+
+// Grouping content
+// ================
+
+// 1. Add the correct height in Firefox.
+// 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+hr {
+  height: 0; // 1
+  color: inherit; // 2
+}
+
+// Text-level semantics
+// ====================
+
+// Add the correct text decoration in Chrome, Edge, and Safari.
+abbr[title] {
+  text-decoration: underline dotted;
+}
+
+// Add the correct font weight in Edge and Safari.
+b,
+strong {
+  font-weight: bolder;
+}
+
+// 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+// 2. Correct the odd 'em' font sizing in all browsers.
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; // 1
+  font-size: 1em; // 2
+}
+
+// Add the correct font size in all browsers.
+small {
+  font-size: 80%;
+}
+
+// Tabular data
+// ============
+
+// 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+// 2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+table {
+  text-indent: 0; // 1
+  border-color: inherit; // 2
+}
+
+// Forms
+// =====
+
+// 1. Change the font styles in all browsers.
+// 2. Remove the margin in Firefox and Safari.
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; // 1
+  font-size: 100%; // 1
+  line-height: 1.15; // 1
+  margin: 0; // 2
+}
+
+// Remove the inheritance of text transform in Edge and Firefox.
+button,
+select {
+  text-transform: none;
+}
+
+// Correct the inability to style clickable types in iOS and Safari.
+button,
+:is(button, input):where([type='button'], [type='reset'], [type='submit']) {
+  appearance: auto;
+}
+
+// Remove the additional ':invalid' styles in Firefox.
+// See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+// Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+legend {
+  padding: 0;
+}
+
+// Add the correct vertical alignment in Chrome and Firefox.
+progress {
+  vertical-align: baseline;
+}
+
+// Correct the cursor style of increment and decrement buttons in Safari.
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+// 1. Correct the odd appearance in Chrome and Safari.
+// 2. Correct the outline style in Safari.
+[type='search'] {
+  appearance: textfield; // 1
+  outline-offset: -2px; // 2
+}
+
+// Remove the inner padding in Chrome and Safari on macOS.
+::-webkit-search-decoration {
+  appearance: none;
+}
+
+// 1. Correct the inability to style clickable types in iOS and Safari.
+// 2. Change font properties to 'inherit' in Safari.
+::-webkit-file-upload-button {
+  appearance: auto; // 1
+  font: inherit; // 2
+}
+
+// Interactive
+// ===========
+
+// Add the correct display in Chrome and Safari.
+summary {
+  display: list-item;
+}

package/core/styles/off-brand-theme.scss

@@ -0,0 +1,3 @@
+@use './theme' with (
+  $theme: 'off-brand'
+);

package/core/styles/safety-theme.scss

@@ -0,0 +1,3 @@
+@use './theme' with (
+  $theme: 'safety'
+);

package/core/styles/scrollbar.scss

@@ -0,0 +1,44 @@
+@use './mixins/scrollbar';
+
+.sbb-scrollbar,
+.sbb-scrollbar-negative,
+.sbb-scrollbar-thick,
+.sbb-scrollbar-thick-negative,
+.sbb-scrollbar-track-visible,
+.sbb-scrollbar-negative-track-visible,
+.sbb-scrollbar-thick-track-visible,
+.sbb-scrollbar-thick-negative-track-visible {
+  @include scrollbar.scrollbar-rules;
+}
+
+.sbb-scrollbar {
+  @include scrollbar.scrollbar-variables($size: thin, $negative: false, $track-visible: false);
+}
+
+.sbb-scrollbar-negative {
+  @include scrollbar.scrollbar-variables($size: thin, $negative: true, $track-visible: false);
+}
+
+.sbb-scrollbar-thick {
+  @include scrollbar.scrollbar-variables($size: thick, $negative: false, $track-visible: false);
+}
+
+.sbb-scrollbar-thick-negative {
+  @include scrollbar.scrollbar-variables($size: thick, $negative: true, $track-visible: false);
+}
+
+.sbb-scrollbar-track-visible {
+  @include scrollbar.scrollbar-variables($size: thin, $negative: false, $track-visible: true);
+}
+
+.sbb-scrollbar-negative-track-visible {
+  @include scrollbar.scrollbar-variables($size: thin, $negative: true, $track-visible: true);
+}
+
+.sbb-scrollbar-thick-track-visible {
+  @include scrollbar.scrollbar-variables($size: thick, $negative: false, $track-visible: true);
+}
+
+.sbb-scrollbar-thick-negative-track-visible {
+  @include scrollbar.scrollbar-variables($size: thick, $negative: true, $track-visible: true);
+}

package/core/styles/standard-theme.scss

@@ -0,0 +1,3 @@
+@use './theme' with (
+  $theme: 'standard'
+);

package/core/styles/table.scss

@@ -0,0 +1,122 @@
+@use './mixins/table';
+
+.sbb-table,
+.sbb-table-m,
+.sbb-table-s,
+.sbb-table-xs {
+  @include table.table;
+}
+
+.sbb-table-m {
+  @include table.table--m;
+}
+
+.sbb-table-s {
+  @include table.table--s;
+}
+
+.sbb-table-xs {
+  @include table.table--xs;
+}
+
+sbb-table-wrapper[negative] .sbb-table,
+.sbb-table--negative {
+  @include table.table--negative;
+}
+
+.sbb-table--striped {
+  @include table.table--striped;
+}
+
+.sbb-table--unstriped {
+  @include table.table--unstriped;
+}
+
+.sbb-table--theme-iron {
+  @include table.table--theme-iron;
+
+  &.sbb-table--negative {
+    @include table.table--theme-iron-negative;
+  }
+}
+
+.sbb-table-header-row {
+  @include table.table-header-row;
+}
+
+.sbb-table-header-cell {
+  @include table.table-header-cell;
+}
+
+.sbb-table-row--striped {
+  @include table.table-row--striped;
+}
+
+.sbb-table-data-cell {
+  @include table.table-data-cell;
+}
+
+.sbb-table-caption {
+  @include table.table-caption;
+}
+
+.sbb-table-filter {
+  @include table.table-filter;
+}
+
+.sbb-table-sticky {
+  // Note that the table can either set this class or an inline style to make something sticky.
+  // We set the style as `!important` so that we get an identical specificity in both cases
+  // and to avoid cases where user styles have a higher specificity.
+  position: sticky !important;
+}
+
+// The `sbb-table-sticky-*` css classes are used by the Angular wrapper and CDK.
+// Do not rename them, pls.
+:is(.sbb-table-sticky-border-elem-left, .sbb-table-sticky-border-elem-right)::after {
+  content: '';
+  transition: {
+    timing-function: var(--sbb-table-sticky-shadow-transition-easing);
+    duration: var(--sbb-table-sticky-shadow-transition-duration);
+    property: visibility, opacity;
+  }
+
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  width: var(--sbb-table-sticky-shadow-width);
+  inset: 0;
+}
+
+.sbb-table-sticky-border-elem-left {
+  :is(.sbb-table-wrapper-offset-left, .sbb-table-wrapper-offset-both) & {
+    border-inline-end: var(--sbb-table-border);
+
+    &::after {
+      visibility: visible;
+      opacity: 1;
+      background-image: linear-gradient(-270deg, rgb(0 0 0 / 10%) 0%, transparent 100%);
+      inset-inline-start: unset;
+      inset-inline-end: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
+    }
+  }
+}
+
+.sbb-table-sticky-border-elem-right {
+  :is(.sbb-table-wrapper-offset-right, .sbb-table-wrapper-offset-both) & {
+    border-inline-start: var(--sbb-table-border);
+
+    &::after {
+      visibility: visible;
+      opacity: 1;
+      background-image: linear-gradient(270deg, rgb(0 0 0 / 10%) 0%, transparent 100%);
+      inset-inline-start: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
+      inset-inline-end: unset;
+    }
+  }
+}
+
+// TODO: In future, move to the 'sbb-lean' theme
+html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
+  @include table.table--s;
+}

package/core/styles/theme.scss

@@ -0,0 +1,18 @@
+$theme: 'standard' !default;
+
+@use './_index' as sbb;
+
+@use './normalize';
+@use './core' with (
+  $theme: $theme
+);
+@use './typography';
+@use './a11y';
+@use './badge';
+@use './animation';
+@use './image';
+@use './layout';
+@use './lists';
+@use './scrollbar';
+@use './table';
+@use './timetable-form';

package/core/styles/timetable-form.scss

@@ -0,0 +1,27 @@
+@use './core/functions';
+@use './core/mediaqueries';
+@use './mixins/timetable-form' as mixin;
+
+.sbb-timetable-form {
+  @include mixin.sbb-timetable-form;
+}
+
+sbb-timetable-form {
+  sbb-date-input {
+    min-width: #{functions.px-to-rem-build(133)}; // From FIGMA spec
+  }
+
+  .sbb-timetable-form-block {
+    @include mixin.timetable-form-block;
+  }
+
+  @include mediaqueries.mq($to: small) {
+    .sbb-timetable-form-mobile-block {
+      @include mixin.timetable-form-block;
+    }
+
+    .sbb-timetable-form-mobile-hidden {
+      display: none;
+    }
+  }
+}

package/core/styles/typography.scss

@@ -0,0 +1,50 @@
+@use './mixins/typo';
+
+sub {
+  @include typo.sub;
+}
+
+sup {
+  @include typo.sup;
+}
+
+.sbb-text-xxs,
+.sbb-text-xs,
+.sbb-text-s,
+.sbb-text-m,
+.sbb-text-l,
+.sbb-text-xl {
+  @include typo.text;
+}
+
+.sbb-text-xxs {
+  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
+}
+
+.sbb-text-xs {
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
+}
+
+.sbb-text-s {
+  --sbb-text-font-size: var(--sbb-text-font-size-s);
+}
+
+.sbb-text-m {
+  --sbb-text-font-size: var(--sbb-text-font-size-m);
+}
+
+.sbb-text-l {
+  --sbb-text-font-size: var(--sbb-text-font-size-l);
+}
+
+.sbb-text-xl {
+  --sbb-text-font-size: var(--sbb-text-font-size-xl);
+}
+
+.sbb-text--bold {
+  @include typo.text--bold;
+}
+
+.sbb-legend {
+  @include typo.legend;
+}

package/core/styles.js

@@ -0,0 +1,5 @@
+import { css as o } from "lit";
+const r = o`*,:before,:after{box-sizing:border-box}`;
+export {
+  r as boxSizingStyles
+};

package/core/testing/event-spy.js

@@ -0,0 +1,51 @@
+class v {
+  get count() {
+    return this._count;
+  }
+  get events() {
+    return this._events;
+  }
+  get firstEvent() {
+    return this.events.length ? this.events[0] : null;
+  }
+  get lastEvent() {
+    return this.events.length ? this.events[this.events.length - 1] : null;
+  }
+  constructor(e, s = null, t = null) {
+    this._event = e, this._target = s, this._options = t, this._count = 0, this._events = [], this._promiseEventMap = /* @__PURE__ */ new Map(), this._target || (this._target = document), this._listenForEvent();
+  }
+  calledOnce(e) {
+    return this.calledTimes(1, e);
+  }
+  calledTimes(e, s = 2e3) {
+    if (this.count > e)
+      return Promise.reject(`Event '${this._event}' has been emitted more than expected (expected ${e}, actual ${this.count}`);
+    if (this.count === e)
+      return Promise.resolve(this.events[e - 1]);
+    if (this._promiseEventMap.has(e))
+      return this._promiseEventMap.get(e).promise;
+    {
+      let t, i;
+      const n = {
+        promise: new Promise((r, h) => {
+          t = r, i = h;
+        }),
+        resolve: t,
+        reject: i
+      };
+      return this._promiseEventMap.set(e, n), this._wrapPromiseWithTimeout(n, e, s);
+    }
+  }
+  _wrapPromiseWithTimeout(e, s, t) {
+    const i = setTimeout(() => e.reject(`awaiting calledTimes(${s}) for event '${this._event}' results in timeout`), t);
+    return e.promise.then(() => clearTimeout(i)), e.promise;
+  }
+  _listenForEvent() {
+    this._target?.addEventListener(this._event, (e) => {
+      this._events.push(e), this._count++, this._promiseEventMap.get(this.count)?.resolve(e);
+    }, this._options ?? void 0);
+  }
+}
+export {
+  v as EventSpy
+};

package/core/testing/mocha-extensions.js

@@ -0,0 +1,11 @@
+const c = (e, t, r) => {
+  if (e)
+    return Mocha.describe(t, r);
+}, s = (e, t, r) => {
+  if (e)
+    return Mocha.test(t, r);
+};
+export {
+  c as describeIf,
+  s as testIf
+};

package/core/testing/wait-for-condition.js

@@ -0,0 +1,13 @@
+async function m(t, r = 30, i = 2 * 1e3) {
+  const e = /* @__PURE__ */ new Date();
+  let n = 0;
+  function o() {
+    return n++, t();
+  }
+  for (; !await o() && e.getTime() + i >= (/* @__PURE__ */ new Date()).getTime(); )
+    await new Promise((a) => setTimeout(a, r));
+  return e.getTime() + i < (/* @__PURE__ */ new Date()).getTime() ? Promise.reject(`waitForCondition timeout: ${t.toString()}, attempts: ${n}, start: ${e.getTime()}, end: ${(/* @__PURE__ */ new Date()).getTime()}`) : Promise.resolve(!0);
+}
+export {
+  m as waitForCondition
+};

package/core/testing/wait-for-image-ready.js

@@ -0,0 +1,17 @@
+import { isSafari as r } from "../dom.js";
+async function d(o, m = 2 * 1e3) {
+  const e = o.localName === "sbb-image" ? o.shadowRoot?.querySelector(".sbb-image__img") ?? null : o;
+  if (!e)
+    throw new Error("img tag not found");
+  e.complete ? r && await e.decode() : await new Promise((i, t) => {
+    const a = setTimeout(() => t("image loading timeout"), m);
+    e.addEventListener("load", () => {
+      clearTimeout(a), !e.complete || r ? e.decode().then(() => i()) : i();
+    }), e.addEventListener("error", () => {
+      clearTimeout(a), t("image error");
+    });
+  });
+}
+export {
+  d as waitForImageReady
+};

package/core/testing/wait-for-render.js

@@ -0,0 +1,14 @@
+const l = (o) => !!o.updateComplete, a = Promise.resolve(), n = async (o) => {
+  const e = await o;
+  (e.parentElement ?? e).querySelectorAll?.("[defer-hydration]").forEach((t) => t.removeAttribute("defer-hydration"));
+  const r = [e, ...e.querySelectorAll("*")].filter(l).map((t) => [
+    t.updateComplete,
+    t.hydrationComplete ?? a,
+    n(t.renderRoot)
+  ]).flat(1 / 0);
+  return await Promise.all(r), e;
+};
+export {
+  l as isReactiveElement,
+  n as waitForLitRender
+};

package/core/testing.js

@@ -0,0 +1,14 @@
+import { EventSpy as r } from "./testing/event-spy.js";
+import { describeIf as i, testIf as f } from "./testing/mocha-extensions.js";
+import { waitForCondition as a } from "./testing/wait-for-condition.js";
+import { waitForImageReady as n } from "./testing/wait-for-image-ready.js";
+import { isReactiveElement as d, waitForLitRender as s } from "./testing/wait-for-render.js";
+export {
+  r as EventSpy,
+  i as describeIf,
+  d as isReactiveElement,
+  f as testIf,
+  a as waitForCondition,
+  n as waitForImageReady,
+  s as waitForLitRender
+};