@sbb-esta/lyne-elements-experimental 5.0.1 → 5.1.0

package/development/pearl-chain.pure.js

@@ -1,2 +1,619 @@
-import { t as SbbPearlChainElement } from "./pearl-chain.component-10OsJZIX.js";
-export { SbbPearlChainElement };
+import { __esDecorate, __runInitializers } from "tslib";
+import { SbbElement, defaultDateAdapter, forceType, screenReaderOnlyStyles } from "@sbb-esta/lyne-elements/core.js";
+import { html, nothing, unsafeCSS } from "lit";
+import { property } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { isRideLeg, removeTimezoneFromISOTimeString } from "./core.js";
+
+//#region node_modules/date-fns/constants.js
+/**
+* @constant
+* @name daysInYear
+* @summary Days in 1 year.
+*
+* @description
+* How many days in a year.
+*
+* One years equals 365.2425 days according to the formula:
+*
+* > Leap year occurs every 4 years, except for years that are divisible by 100 and not divisible by 400.
+* > 1 mean year = (365+1/4-1/100+1/400) days = 365.2425 days
+*/
+const daysInYear = 365.2425;
+/**
+* @constant
+* @name maxTime
+* @summary Maximum allowed time.
+*
+* @example
+* import { maxTime } from "./constants/date-fns/constants";
+*
+* const isValid = 8640000000000001 <= maxTime;
+* //=> false
+*
+* new Date(8640000000000001);
+* //=> Invalid Date
+*/
+const maxTime = Math.pow(10, 8) * 24 * 60 * 60 * 1e3;
+/**
+* @constant
+* @name minTime
+* @summary Minimum allowed time.
+*
+* @example
+* import { minTime } from "./constants/date-fns/constants";
+*
+* const isValid = -8640000000000001 >= minTime;
+* //=> false
+*
+* new Date(-8640000000000001)
+* //=> Invalid Date
+*/
+const minTime = -maxTime;
+/**
+* @constant
+* @name millisecondsInMinute
+* @summary Milliseconds in 1 minute
+*/
+const millisecondsInMinute = 6e4;
+/**
+* @constant
+* @name secondsInHour
+* @summary Seconds in 1 hour.
+*/
+const secondsInHour = 3600;
+/**
+* @constant
+* @name secondsInDay
+* @summary Seconds in 1 day.
+*/
+const secondsInDay = secondsInHour * 24;
+/**
+* @constant
+* @name secondsInWeek
+* @summary Seconds in 1 week.
+*/
+const secondsInWeek = secondsInDay * 7;
+/**
+* @constant
+* @name secondsInYear
+* @summary Seconds in 1 year.
+*/
+const secondsInYear = secondsInDay * daysInYear;
+/**
+* @constant
+* @name secondsInMonth
+* @summary Seconds in 1 month
+*/
+const secondsInMonth = secondsInYear / 12;
+/**
+* @constant
+* @name secondsInQuarter
+* @summary Seconds in 1 quarter.
+*/
+const secondsInQuarter = secondsInMonth * 3;
+/**
+* @constant
+* @name constructFromSymbol
+* @summary Symbol enabling Date extensions to inherit properties from the reference date.
+*
+* The symbol is used to enable the `constructFrom` function to construct a date
+* using a reference date and a value. It allows to transfer extra properties
+* from the reference date to the new date. It's useful for extensions like
+* [`TZDate`](https://github.com/date-fns/tz) that accept a time zone as
+* a constructor argument.
+*/
+const constructFromSymbol = Symbol.for("constructDateFrom");
+
+//#endregion
+//#region node_modules/date-fns/constructFrom.js
+/**
+* @name constructFrom
+* @category Generic Helpers
+* @summary Constructs a date using the reference date and the value
+*
+* @description
+* The function constructs a new date using the constructor from the reference
+* date and the given value. It helps to build generic functions that accept
+* date extensions.
+*
+* It defaults to `Date` if the passed reference date is a number or a string.
+*
+* Starting from v3.7.0, it allows to construct a date using `[Symbol.for("constructDateFrom")]`
+* enabling to transfer extra properties from the reference date to the new date.
+* It's useful for extensions like [`TZDate`](https://github.com/date-fns/tz)
+* that accept a time zone as a constructor argument.
+*
+* @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+*
+* @param date - The reference date to take constructor from
+* @param value - The value to create the date
+*
+* @returns Date initialized using the given date and value
+*
+* @example
+* import { constructFrom } from "./constructFrom/date-fns";
+*
+* // A function that clones a date preserving the original type
+* function cloneDate<DateType extends Date>(date: DateType): DateType {
+*   return constructFrom(
+*     date, // Use constructor from the given date
+*     date.getTime() // Use the date value to create a new date
+*   );
+* }
+*/
+function constructFrom(date, value) {
+	if (typeof date === "function") return date(value);
+	if (date && typeof date === "object" && constructFromSymbol in date) return date[constructFromSymbol](value);
+	if (date instanceof Date) return new date.constructor(value);
+	return new Date(value);
+}
+
+//#endregion
+//#region node_modules/date-fns/toDate.js
+/**
+* @name toDate
+* @category Common Helpers
+* @summary Convert the given argument to an instance of Date.
+*
+* @description
+* Convert the given argument to an instance of Date.
+*
+* If the argument is an instance of Date, the function returns its clone.
+*
+* If the argument is a number, it is treated as a timestamp.
+*
+* If the argument is none of the above, the function returns Invalid Date.
+*
+* Starting from v3.7.0, it clones a date using `[Symbol.for("constructDateFrom")]`
+* enabling to transfer extra properties from the reference date to the new date.
+* It's useful for extensions like [`TZDate`](https://github.com/date-fns/tz)
+* that accept a time zone as a constructor argument.
+*
+* **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.
+*
+* @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+* @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
+*
+* @param argument - The value to convert
+*
+* @returns The parsed date in the local time zone
+*
+* @example
+* // Clone the date:
+* const result = toDate(new Date(2014, 1, 11, 11, 30, 30))
+* //=> Tue Feb 11 2014 11:30:30
+*
+* @example
+* // Convert the timestamp to date:
+* const result = toDate(1392098430000)
+* //=> Tue Feb 11 2014 11:30:30
+*/
+function toDate(argument, context) {
+	return constructFrom(context || argument, argument);
+}
+
+//#endregion
+//#region node_modules/date-fns/addMinutes.js
+/**
+* The {@link addMinutes} function options.
+*/
+/**
+* @name addMinutes
+* @category Minute Helpers
+* @summary Add the specified number of minutes to the given date.
+*
+* @description
+* Add the specified number of minutes to the given date.
+*
+* @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+* @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
+*
+* @param date - The date to be changed
+* @param amount - The amount of minutes to be added.
+* @param options - An object with options
+*
+* @returns The new date with the minutes added
+*
+* @example
+* // Add 30 minutes to 10 July 2014 12:00:00:
+* const result = addMinutes(new Date(2014, 6, 10, 12, 0), 30)
+* //=> Thu Jul 10 2014 12:30:00
+*/
+function addMinutes(date, amount, options) {
+	const _date = toDate(date, options?.in);
+	_date.setTime(_date.getTime() + amount * millisecondsInMinute);
+	return _date;
+}
+
+//#endregion
+//#region node_modules/date-fns/differenceInMilliseconds.js
+/**
+* @name differenceInMilliseconds
+* @category Millisecond Helpers
+* @summary Get the number of milliseconds between the given dates.
+*
+* @description
+* Get the number of milliseconds between the given dates.
+*
+* @param laterDate - The later date
+* @param earlierDate - The earlier date
+*
+* @returns The number of milliseconds
+*
+* @example
+* // How many milliseconds are between
+* // 2 July 2014 12:30:20.600 and 2 July 2014 12:30:21.700?
+* const result = differenceInMilliseconds(
+*   new Date(2014, 6, 2, 12, 30, 21, 700),
+*   new Date(2014, 6, 2, 12, 30, 20, 600)
+* )
+* //=> 1100
+*/
+function differenceInMilliseconds(laterDate, earlierDate) {
+	return +toDate(laterDate) - +toDate(earlierDate);
+}
+
+//#endregion
+//#region node_modules/date-fns/_lib/getRoundingMethod.js
+function getRoundingMethod(method) {
+	return (number) => {
+		const result = (method ? Math[method] : Math.trunc)(number);
+		return result === 0 ? 0 : result;
+	};
+}
+
+//#endregion
+//#region node_modules/date-fns/differenceInMinutes.js
+/**
+* The {@link differenceInMinutes} function options.
+*/
+/**
+* @name differenceInMinutes
+* @category Minute Helpers
+* @summary Get the number of minutes between the given dates.
+*
+* @description
+* Get the signed number of full (rounded towards 0) minutes between the given dates.
+*
+* @param dateLeft - The later date
+* @param dateRight - The earlier date
+* @param options - An object with options.
+*
+* @returns The number of minutes
+*
+* @example
+* // How many minutes are between 2 July 2014 12:07:59 and 2 July 2014 12:20:00?
+* const result = differenceInMinutes(
+*   new Date(2014, 6, 2, 12, 20, 0),
+*   new Date(2014, 6, 2, 12, 7, 59)
+* )
+* //=> 12
+*
+* @example
+* // How many minutes are between 10:01:59 and 10:00:00
+* const result = differenceInMinutes(
+*   new Date(2000, 0, 1, 10, 0, 0),
+*   new Date(2000, 0, 1, 10, 1, 59)
+* )
+* //=> -1
+*/
+function differenceInMinutes(dateLeft, dateRight, options) {
+	const diff = differenceInMilliseconds(dateLeft, dateRight) / millisecondsInMinute;
+	return getRoundingMethod(options?.roundingMethod)(diff);
+}
+
+//#endregion
+//#region node_modules/date-fns/isAfter.js
+/**
+* @name isAfter
+* @category Common Helpers
+* @summary Is the first date after the second one?
+*
+* @description
+* Is the first date after the second one?
+*
+* @param date - The date that should be after the other one to return true
+* @param dateToCompare - The date to compare with
+*
+* @returns The first date is after the second date
+*
+* @example
+* // Is 10 July 1989 after 11 February 1987?
+* const result = isAfter(new Date(1989, 6, 10), new Date(1987, 1, 11))
+* //=> true
+*/
+function isAfter(date, dateToCompare) {
+	return +toDate(date) > +toDate(dateToCompare);
+}
+
+//#endregion
+//#region node_modules/date-fns/isBefore.js
+/**
+* @name isBefore
+* @category Common Helpers
+* @summary Is the first date before the second one?
+*
+* @description
+* Is the first date before the second one?
+*
+* @param date - The date that should be before the other one to return true
+* @param dateToCompare - The date to compare with
+*
+* @returns The first date is before the second date
+*
+* @example
+* // Is 10 July 1989 before 11 February 1987?
+* const result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11))
+* //=> false
+*/
+function isBefore(date, dateToCompare) {
+	return +toDate(date) < +toDate(dateToCompare);
+}
+
+//#endregion
+//#region src/elements-experimental/pearl-chain/pearl-chain.scss?inline
+var pearl_chain_default = ":host {\n  --sbb-pearl-chain-height: var(--sbb-border-width-2x);\n  --sbb-pearl-chain-spacing-small: 0.125rem;\n  --sbb-pearl-chain-color: var(--sbb-pearl-chain-bullet-color);\n  --sbb-pearl-chain-color-disruption: var(--sbb-pearl-chain-bullet-color-disruption);\n  --sbb-pearl-chain-color-past: var(--sbb-pearl-chain-bullet-color-past);\n  --sbb-pearl-chain-leg-width: 100%;\n  display: block;\n  --sbb-pearl-chain-position-color: var(--sbb-color-primary);\n  --sbb-pearl-chain-bullet-size-start-end: 0.625rem;\n  --sbb-pearl-chain-bullet-size-stop: 0.5rem;\n  --sbb-pearl-chain-bullet-color: var(--sbb-background-color-3-inverted);\n  --sbb-pearl-chain-bullet-color-past: var(--sbb-color-metal);\n  --sbb-pearl-chain-bullet-color-past: light-dark(var(--sbb-color-metal), var(--sbb-color-granite));\n  --sbb-pearl-chain-bullet-color-irrelevant: var(--sbb-color-metal);\n  --sbb-pearl-chain-bullet-color-irrelevant: light-dark(\n    var(--sbb-color-metal),\n    var(--sbb-color-granite)\n  );\n  --sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-error);\n  --sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-2x);\n  --sbb-pearl-chain-bullet-animation-duration: 1920ms;\n  --sbb-pearl-chain-bullet-animation-easing: ease-out;\n  --sbb-pearl-chain-bullet-crossed-width: 0.88375rem;\n  --sbb-pearl-chain-bullet-crossed-height: 0.21875rem;\n  --sbb-pearl-chain-bullet-crossed-border-width: 0.09375rem;\n}\n\n.sbb-pearl-chain {\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  flex-wrap: nowrap;\n  color: var(--sbb-pearl-chain-color);\n  width: 100%;\n  padding-block: calc((var(--sbb-pearl-chain-bullet-size-start-end) - var(--sbb-pearl-chain-height)) / 2);\n  padding-inline-end: var(--sbb-pearl-chain-bullet-size-start-end);\n}\n\n.sbb-pearl-chain__bullet {\n  min-height: var(--sbb-pearl-chain-bullet-size-start-end);\n  min-width: var(--sbb-pearl-chain-bullet-size-start-end);\n  height: var(--sbb-pearl-chain-bullet-size-start-end);\n  width: var(--sbb-pearl-chain-bullet-size-start-end);\n  background: var(--sbb-pearl-chain-bullet-color);\n  color: var(--sbb-pearl-chain-bullet-color);\n  border-color: var(--sbb-pearl-chain-bullet-color);\n  border-radius: 100%;\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain__bullet {\n    --sbb-pearl-chain-bullet-color: CanvasText;\n  }\n}\n.sbb-pearl-chain__bullet {\n  content: \"\";\n  position: absolute;\n  background-color: currentcolor;\n  inset-block-start: 0;\n  z-index: 3;\n}\n\n.sbb-pearl-chain__bullet:first-of-type {\n  inset-inline-start: 0;\n}\n\n.sbb-pearl-chain__bullet:last-of-type {\n  inset-inline-end: 0;\n}\n\n.sbb-pearl-chain__leg {\n  flex-shrink: 0;\n  flex-grow: 0;\n  position: relative;\n  height: var(--sbb-pearl-chain-height);\n  border-inline-end: var(--sbb-pearl-chain-spacing-small) solid Canvas;\n  background-color: currentcolor;\n  width: var(--sbb-pearl-chain-leg-width);\n  display: flex;\n  align-items: center;\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain__leg {\n    background-color: CanvasText;\n  }\n  .sbb-pearl-chain--past .sbb-pearl-chain__leg {\n    background-color: GrayText;\n  }\n}\n\n.sbb-pearl-chain__leg:last-of-type {\n  border: none;\n}\n\n.sbb-pearl-chain__stop {\n  position: relative;\n  z-index: 2;\n  background: var(--sbb-pearl-chain-bullet-color);\n  color: var(--sbb-pearl-chain-bullet-color);\n  border-color: var(--sbb-pearl-chain-bullet-color);\n  border-radius: 100%;\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain__stop {\n    --sbb-pearl-chain-bullet-color: CanvasText;\n  }\n}\n.sbb-pearl-chain__stop {\n  min-height: var(--sbb-pearl-chain-bullet-size-stop);\n  min-width: var(--sbb-pearl-chain-bullet-size-stop);\n  height: var(--sbb-pearl-chain-bullet-size-stop);\n  width: var(--sbb-pearl-chain-bullet-size-stop);\n  border: var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;\n  background: Canvas;\n}\n\n.sbb-pearl-chain__bullet--future {\n  background: var(--sbb-pearl-chain-bullet-color);\n  color: var(--sbb-pearl-chain-bullet-color);\n  border-color: var(--sbb-pearl-chain-bullet-color);\n  border-radius: 100%;\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain__bullet--future {\n    --sbb-pearl-chain-bullet-color: CanvasText;\n  }\n}\n\n.sbb-pearl-chain__leg--past,\n.sbb-pearl-chain--past,\n.sbb-pearl-chain__leg--past::after,\n.sbb-pearl-chain__leg--progress::after,\n.sbb-pearl-chain__leg--progress .sbb-pearl-chain__stop,\n.sbb-pearl-chain--progress,\n.sbb-pearl-chain__bullet--past {\n  color: var(--sbb-pearl-chain-color-past);\n  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-past);\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain__leg--past,\n  .sbb-pearl-chain--past,\n  .sbb-pearl-chain__leg--past::after,\n  .sbb-pearl-chain__leg--progress::after,\n  .sbb-pearl-chain__leg--progress .sbb-pearl-chain__stop,\n  .sbb-pearl-chain--progress,\n  .sbb-pearl-chain__bullet--past {\n    --sbb-pearl-chain-bullet-color: GrayText !important;\n  }\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain__leg--past,\n  .sbb-pearl-chain--past,\n  .sbb-pearl-chain__leg--past::after,\n  .sbb-pearl-chain__leg--progress::after,\n  .sbb-pearl-chain__leg--progress .sbb-pearl-chain__stop,\n  .sbb-pearl-chain--progress,\n  .sbb-pearl-chain__bullet--past {\n    background-color: GrayText !important;\n  }\n}\n\n.sbb-pearl-chain__bullet--progress {\n  background: var(--sbb-pearl-chain-bullet-color);\n  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-past);\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain__bullet--progress {\n    --sbb-pearl-chain-bullet-color: GrayText !important;\n  }\n}\n\n.sbb-pearl-chain__bullet--departure-disruption,\n.sbb-pearl-chain--arrival-disruption,\n.sbb-pearl-chain--departure-disruption,\n.sbb-pearl-chain__leg--disruption {\n  color: var(--sbb-pearl-chain-color-disruption);\n  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption);\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain__bullet--departure-disruption,\n  .sbb-pearl-chain--arrival-disruption,\n  .sbb-pearl-chain--departure-disruption,\n  .sbb-pearl-chain__leg--disruption {\n    --sbb-pearl-chain-bullet-color: Highlight;\n  }\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain__bullet--departure-disruption,\n  .sbb-pearl-chain--arrival-disruption,\n  .sbb-pearl-chain--departure-disruption,\n  .sbb-pearl-chain__leg--disruption {\n    color: Highlight;\n    background: Highlight;\n  }\n}\n\n.sbb-pearl-chain__leg--disruption .sbb-pearl-chain__stop {\n  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption);\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain__leg--disruption .sbb-pearl-chain__stop {\n    --sbb-pearl-chain-bullet-color: Highlight;\n  }\n}\n\n.sbb-pearl-chain__leg--past .sbb-pearl-chain__stop {\n  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-past);\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain__leg--past .sbb-pearl-chain__stop {\n    --sbb-pearl-chain-bullet-color: GrayText !important;\n  }\n}\n\n.sbb-pearl-chain__leg--cancelled-expected::after {\n  background-color: unset;\n  background-image: linear-gradient(to right, currentcolor 0%, currentcolor 50%, Canvas 50%);\n  background-repeat: repeat-x;\n  background-size: calc(2 * var(--sbb-pearl-chain-spacing-small)) var(--sbb-pearl-chain-height);\n  inset-inline-end: var(--sbb-pearl-chain-height);\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain__leg--cancelled-expected::after {\n    background: unset;\n    border-block-start: 0.0625rem dashed Highlight;\n    transform: translateY(0.0625rem);\n  }\n}\n\n.sbb-pearl-chain__leg--disruption::after {\n  background-color: unset;\n  background-image: linear-gradient(to right, currentcolor 0%, currentcolor 50%, Canvas 50%);\n  background-repeat: repeat-x;\n  background-size: calc(2 * var(--sbb-pearl-chain-spacing-small)) var(--sbb-pearl-chain-height);\n  inset-inline-end: var(--sbb-pearl-chain-height);\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain__leg--disruption::after {\n    background: unset;\n    border-block-start: 0.0625rem dashed Highlight;\n    transform: translateY(0.0625rem);\n  }\n}\n\n.sbb-pearl-chain__leg--skipped {\n  color: var(--sbb-pearl-chain-color-disruption);\n}\n.sbb-pearl-chain__leg--skipped::after {\n  background-color: unset;\n  background-image: linear-gradient(to right, currentcolor 0%, currentcolor 50%, Canvas 50%);\n  background-repeat: repeat-x;\n  background-size: calc(2 * var(--sbb-pearl-chain-spacing-small)) var(--sbb-pearl-chain-height);\n  inset-inline-end: var(--sbb-pearl-chain-height);\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain__leg--skipped::after {\n    background: unset;\n    border-block-start: 0.0625rem dashed Highlight;\n    transform: translateY(0.0625rem);\n  }\n}\n\n.sbb-pearl-chain__stop--departure-skipped {\n  min-height: var(--sbb-pearl-chain-bullet-size-stop);\n  min-width: var(--sbb-pearl-chain-bullet-size-stop);\n  height: var(--sbb-pearl-chain-bullet-size-stop);\n  width: var(--sbb-pearl-chain-bullet-size-stop);\n  border: var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;\n  background: Canvas;\n  border: var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;\n  background: Canvas;\n}\n.sbb-pearl-chain__stop--departure-skipped::before {\n  content: \"\";\n  position: absolute;\n  inset-block-start: 50%;\n  inset-inline-start: 50%;\n  transform: translate(-50%, -50%) rotate(45deg);\n  border-block-start: var(--sbb-pearl-chain-bullet-crossed-border-width) solid canvas;\n  background: var(--sbb-pearl-chain-bullet-color-disruption);\n  height: var(--sbb-pearl-chain-bullet-crossed-height);\n  width: var(--sbb-pearl-chain-bullet-crossed-width);\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain__stop--departure-skipped::before {\n    background: Highlight;\n  }\n}\n\n.sbb-pearl-chain--arrival-skipped,\n.sbb-pearl-chain--departure-skipped {\n  min-height: var(--sbb-pearl-chain-bullet-size-start-end);\n  min-width: var(--sbb-pearl-chain-bullet-size-start-end);\n  height: var(--sbb-pearl-chain-bullet-size-start-end);\n  width: var(--sbb-pearl-chain-bullet-size-start-end);\n  border: var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;\n  background: Canvas;\n}\n.sbb-pearl-chain--arrival-skipped::before,\n.sbb-pearl-chain--departure-skipped::before {\n  content: \"\";\n  position: absolute;\n  inset-block-start: 50%;\n  inset-inline-start: 50%;\n  transform: translate(-50%, -50%) rotate(45deg);\n  border-block-start: var(--sbb-pearl-chain-bullet-crossed-border-width) solid canvas;\n  background: var(--sbb-pearl-chain-bullet-color-disruption);\n  height: var(--sbb-pearl-chain-bullet-crossed-height);\n  width: var(--sbb-pearl-chain-bullet-crossed-width);\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain--arrival-skipped::before,\n  .sbb-pearl-chain--departure-skipped::before {\n    background: Highlight;\n  }\n}\n\n.sbb-pearl-chain__leg::after {\n  content: \"\";\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: 0;\n  background-color: currentcolor;\n  border-radius: var(--sbb-pearl-chain-height);\n  z-index: 1;\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain__leg::after {\n    background-color: CanvasText;\n  }\n  .sbb-pearl-chain--past .sbb-pearl-chain__leg::after {\n    background-color: GrayText;\n  }\n}\n\n.sbb-pearl-chain__leg:last-of-type::after {\n  inset-inline-end: calc(-1 * var(--sbb-pearl-chain-height));\n}\n\n.sbb-pearl-chain__leg--progress::after {\n  background-color: var(--sbb-pearl-chain-color-past);\n  width: var(--sbb-pearl-chain-leg-status);\n}\n\n.sbb-pearl-chain__position {\n  min-height: var(--sbb-pearl-chain-bullet-size-start-end);\n  min-width: var(--sbb-pearl-chain-bullet-size-start-end);\n  height: var(--sbb-pearl-chain-bullet-size-start-end);\n  width: var(--sbb-pearl-chain-bullet-size-start-end);\n  background: var(--sbb-pearl-chain-bullet-color);\n  color: var(--sbb-pearl-chain-bullet-color);\n  border-color: var(--sbb-pearl-chain-bullet-color);\n  border-radius: 100%;\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain__position {\n    --sbb-pearl-chain-bullet-color: CanvasText;\n  }\n}\n.sbb-pearl-chain__position {\n  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-position-color);\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain__position {\n    --sbb-pearl-chain-position-color: Highlight;\n  }\n}\n@keyframes pearl-chain-bullet-position-pulse {\n  0% {\n    box-shadow: 0 0 0 0 var(--sbb-pearl-chain-position-color);\n  }\n  25% {\n    box-shadow: 0 0 0 0 var(--sbb-pearl-chain-position-color);\n  }\n  50% {\n    box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--sbb-pearl-chain-position-color) 20%, transparent);\n  }\n  100% {\n    box-shadow: 0 0 0 0 var(--sbb-pearl-chain-position-color);\n  }\n}\n.sbb-pearl-chain__position {\n  animation: pearl-chain-bullet-position-pulse var(--sbb-pearl-chain-bullet-animation-duration) var(--sbb-pearl-chain-bullet-animation-easing) infinite;\n  position: absolute;\n  inset-block-start: -200%;\n  z-index: 4;\n  inset-inline-start: var(--sbb-pearl-chain-status-position);\n}\n\n.sbb-pearl-chain__position--no-animation {\n  animation: unset;\n}\n";
+
+//#endregion
+//#region src/elements-experimental/pearl-chain/pearl-chain.component.ts
+/**
+* It visually displays journey information.
+*/
+let SbbPearlChainElement = (() => {
+	let _classSuper = SbbElement;
+	let _instanceExtraInitializers = [];
+	let _legs_decorators;
+	let _legs_initializers = [];
+	let _legs_extraInitializers = [];
+	let _disableAnimation_decorators;
+	let _disableAnimation_initializers = [];
+	let _disableAnimation_extraInitializers = [];
+	let _set_now_decorators;
+	return class SbbPearlChainElement extends _classSuper {
+		constructor() {
+			super(...arguments);
+			this.#legs_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _legs_initializers, []));
+			this.#disableAnimation_accessor_storage = (__runInitializers(this, _legs_extraInitializers), __runInitializers(this, _disableAnimation_initializers, false));
+			this._now = (__runInitializers(this, _disableAnimation_extraInitializers), null);
+		}
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_legs_decorators = [property({ type: Array })];
+			_disableAnimation_decorators = [forceType(), property({
+				attribute: "disable-animation",
+				type: Boolean
+			})];
+			_set_now_decorators = [property()];
+			__esDecorate(this, null, _legs_decorators, {
+				kind: "accessor",
+				name: "legs",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "legs" in obj,
+					get: (obj) => obj.legs,
+					set: (obj, value) => {
+						obj.legs = value;
+					}
+				},
+				metadata: _metadata
+			}, _legs_initializers, _legs_extraInitializers);
+			__esDecorate(this, null, _disableAnimation_decorators, {
+				kind: "accessor",
+				name: "disableAnimation",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "disableAnimation" in obj,
+					get: (obj) => obj.disableAnimation,
+					set: (obj, value) => {
+						obj.disableAnimation = value;
+					}
+				},
+				metadata: _metadata
+			}, _disableAnimation_initializers, _disableAnimation_extraInitializers);
+			__esDecorate(this, null, _set_now_decorators, {
+				kind: "setter",
+				name: "now",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "now" in obj,
+					set: (obj, value) => {
+						obj.now = value;
+					}
+				},
+				metadata: _metadata
+			}, null, _instanceExtraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-pearl-chain";
+		}
+		static {
+			this.styles = [screenReaderOnlyStyles, unsafeCSS(pearl_chain_default)];
+		}
+		#legs_accessor_storage;
+		/**
+		* Define the legs of the pearl-chain.
+		* Format:
+		* `{"legs": [{"duration": 25}, ...]}`
+		* `duration` in minutes. Duration of the leg is relative
+		* to the total travel time. Example: departure 16:30, change at 16:40,
+		* arrival at 17:00. So the change should have a duration of 33.33%.
+		*/
+		get legs() {
+			return this.#legs_accessor_storage;
+		}
+		set legs(value) {
+			this.#legs_accessor_storage = value;
+		}
+		#disableAnimation_accessor_storage;
+		/**
+		* Per default, the current location has a pulsating animation. You can
+		* disable the animation with this property.
+		*/
+		get disableAnimation() {
+			return this.#disableAnimation_accessor_storage;
+		}
+		set disableAnimation(value) {
+			this.#disableAnimation_accessor_storage = value;
+		}
+		/**
+		* A configured date which acts as the current date instead of the real current date.
+		* Only recommended for testing purposes.
+		*/
+		set now(value) {
+			this._now = defaultDateAdapter.getValidDateOrNull(defaultDateAdapter.deserialize(value));
+		}
+		get now() {
+			return this._now;
+		}
+		_getAllDuration(legs) {
+			return legs?.reduce((sum, leg) => {
+				const arrivalNoTz = removeTimezoneFromISOTimeString(leg.arrival?.time);
+				const departureNoTz = removeTimezoneFromISOTimeString(leg.departure?.time);
+				if (arrivalNoTz && departureNoTz) return sum + differenceInMinutes(removeTimezoneFromISOTimeString(leg.arrival.time), removeTimezoneFromISOTimeString(leg.departure.time));
+				return sum;
+			}, 0);
+		}
+		_isAllCancelled(legs) {
+			return legs?.every((leg) => leg?.serviceJourney?.serviceAlteration?.cancelled);
+		}
+		_getRelativeDuration(legs, leg) {
+			const arrivalNoTz = removeTimezoneFromISOTimeString(leg.arrival?.time);
+			const departureNoTz = removeTimezoneFromISOTimeString(leg.departure?.time);
+			if (arrivalNoTz && departureNoTz) {
+				const duration = differenceInMinutes(removeTimezoneFromISOTimeString(leg.arrival.time), removeTimezoneFromISOTimeString(leg.departure.time));
+				const allDurations = this._getAllDuration(legs);
+				if (allDurations === 0) return 100;
+				return duration / allDurations * 100;
+			}
+			return 0;
+		}
+		_getProgress(now, start, end) {
+			if (!start?.time || !end?.time) return 0;
+			const startWithDelay = addMinutes(start.time, start.delay ?? 0);
+			const total = differenceInMinutes(addMinutes(end.time, end.delay ?? 0), startWithDelay);
+			const progress = differenceInMinutes(now, startWithDelay);
+			return total && progress / total * 100;
+		}
+		_getStatus(now, start, end) {
+			const startWithDelay = start && start.time && addMinutes(start.time, start.delay ?? 0);
+			const endWithDelay = end && end.time && addMinutes(end.time, end.delay ?? 0);
+			if (startWithDelay && isBefore(startWithDelay, now) && endWithDelay && isAfter(endWithDelay, now)) return "progress";
+			else if (endWithDelay && isBefore(endWithDelay, now)) return "past";
+			return "future";
+		}
+		_renderPosition(now, start, end) {
+			const currentPosition = this._getProgress(now, start, end);
+			if (currentPosition < 0 && currentPosition > 100) return;
+			const statusStyle = () => {
+				return {
+					"--sbb-pearl-chain-status-position": `${currentPosition}%`,
+					...currentPosition >= 50 ? { transform: `translateX(-100%)` } : {}
+				};
+			};
+			const animation = this.disableAnimation ? "sbb-pearl-chain__position--no-animation" : "";
+			return html`<span
+      style=${styleMap(statusStyle())}
+      class="sbb-pearl-chain__position ${animation}"
+    ></span>`;
+		}
+		render() {
+			const now = this.now ?? /* @__PURE__ */ new Date();
+			const rideLegs = this.legs?.filter((leg) => isRideLeg(leg));
+			const departureTime = rideLegs?.length && removeTimezoneFromISOTimeString(rideLegs[0]?.departure?.time);
+			const departureWithDelay = departureTime && {
+				time: departureTime,
+				delay: rideLegs[0].departure.delay ?? 0
+			};
+			const arrivalTime = rideLegs?.length && removeTimezoneFromISOTimeString(rideLegs[rideLegs.length - 1].arrival?.time);
+			const arrivalTimeDelay = arrivalTime && {
+				time: arrivalTime,
+				delay: rideLegs[rideLegs.length - 1]?.arrival.delay ?? 0
+			};
+			const departureNotServiced = (() => {
+				return rideLegs && rideLegs[0]?.serviceJourney?.stopPoints && rideLegs[0]?.serviceJourney?.stopPoints[0].stopStatus === "NOT_SERVICED" ? "sbb-pearl-chain--departure-skipped" : "";
+			})();
+			const arrivalNotServiced = (() => {
+				const lastLeg = rideLegs && rideLegs[rideLegs.length - 1];
+				const stops = lastLeg && lastLeg.serviceJourney?.stopPoints;
+				return stops && stops[stops.length - 1].stopStatus === "NOT_SERVICED" ? "sbb-pearl-chain--arrival-skipped" : "";
+			})();
+			const departureCancelClass = (() => {
+				return rideLegs && rideLegs[0]?.serviceJourney?.serviceAlteration?.cancelled ? "sbb-pearl-chain--departure-disruption" : "";
+			})();
+			const arrivalCancelClass = (() => {
+				return rideLegs && rideLegs[rideLegs.length - 1]?.serviceJourney?.serviceAlteration?.cancelled ? "sbb-pearl-chain--arrival-disruption" : "";
+			})();
+			const status = departureWithDelay && arrivalTimeDelay && this._getStatus(now, departureWithDelay, arrivalTimeDelay);
+			const statusClassDeparture = rideLegs && status && !departureCancelClass ? "sbb-pearl-chain__bullet--" + status : "";
+			const statusClassArrival = rideLegs && status && !arrivalCancelClass ? "sbb-pearl-chain__bullet--" + this._getStatus(now, void 0, arrivalTimeDelay) : "";
+			if (this._isAllCancelled(rideLegs)) return html`
+        <div class="sbb-pearl-chain">
+          <span class="sbb-pearl-chain__bullet sbb-pearl-chain--departure-disruption"></span>
+          <div class="sbb-pearl-chain__leg sbb-pearl-chain__leg--disruption"></div>
+          <span class="sbb-pearl-chain__bullet sbb-pearl-chain--departure-disruption"></span>
+        </div>
+      `;
+			return html`
+      <div class="sbb-pearl-chain">
+        <span
+          class="sbb-pearl-chain__bullet ${statusClassDeparture} ${departureNotServiced} ${departureCancelClass}"
+        ></span>
+        ${rideLegs?.map((leg, index) => {
+				const { stopPoints, serviceAlteration } = leg?.serviceJourney || {};
+				const duration = this._getRelativeDuration(rideLegs, leg);
+				const departure = removeTimezoneFromISOTimeString(leg.departure?.time);
+				const arrival = removeTimezoneFromISOTimeString(leg.arrival?.time);
+				const isArrivalNotServiced = stopPoints && stopPoints[stopPoints.length - 1]?.stopStatus === "NOT_SERVICED";
+				const isArrivalPlanned = stopPoints && stopPoints[stopPoints.length - 1]?.stopStatus === "PLANNED";
+				const isDepartureNotServiced = stopPoints && stopPoints[0]?.stopStatus === "NOT_SERVICED";
+				const stopPointsBefore = index > 0 && rideLegs[index - 1].serviceJourney.stopPoints;
+				const isBeforeLegArrivalNotServiced = stopPointsBefore && stopPointsBefore[stopPointsBefore.length - 1]?.stopStatus === "NOT_SERVICED";
+				const skippedLeg = isArrivalNotServiced || isDepartureNotServiced && isArrivalPlanned ? "sbb-pearl-chain__leg--skipped" : "";
+				const departureSkippedBullet = isDepartureNotServiced || isBeforeLegArrivalNotServiced ? "sbb-pearl-chain__stop--departure-skipped" : "";
+				const cancelled = serviceAlteration?.cancelled || serviceAlteration?.partiallyCancelled ? "sbb-pearl-chain__leg--disruption" : "";
+				const cancelledExpected = leg.serviceJourney?.serviceAlteration?.cancelledExpected ? "sbb-pearl-chain__leg--cancelled-expected" : "";
+				const legDepartureWithDelay = {
+					time: departure,
+					delay: leg.departure?.delay ?? 0
+				};
+				const legArrivalWithDelay = {
+					time: arrival,
+					delay: leg.arrival?.delay ?? 0
+				};
+				const status = this._getStatus(now, legDepartureWithDelay, legArrivalWithDelay);
+				const legStatus = !cancelled && !skippedLeg && "sbb-pearl-chain__leg--" + status;
+				const legStyle = () => {
+					return {
+						"--sbb-pearl-chain-leg-width": `${duration}%`,
+						...status === "progress" && !cancelled && !skippedLeg && !cancelledExpected ? { "--sbb-pearl-chain-leg-status": `${this._getProgress(now, legDepartureWithDelay, legArrivalWithDelay)}%` } : {}
+					};
+				};
+				return html` <div
+            class="sbb-pearl-chain__leg ${legStatus || ""} ${cancelled} ${skippedLeg} ${cancelledExpected}"
+            style=${styleMap(legStyle())}
+          >
+            ${index > 0 && index < rideLegs.length ? html`<span class="sbb-pearl-chain__stop ${departureSkippedBullet}"></span>` : nothing}
+            ${status === "progress" && !cancelled && !skippedLeg ? this._renderPosition(now, legDepartureWithDelay, legArrivalWithDelay) : nothing}
+          </div>`;
+			})}
+        <span
+          class="sbb-pearl-chain__bullet ${statusClassArrival} ${arrivalNotServiced} ${arrivalCancelClass}"
+        ></span>
+      </div>
+    `;
+		}
+	};
+})();
+
+//#endregion
+export { SbbPearlChainElement };

package/development/seat-reservation/common/mapper/icon-mapper.d.ts

@@ -103,4 +103,3 @@ export declare const mapIconToSvg: Record<string, SeatReservationIcon>;
  *         - TROLLEY_ICON
  *         - WHEELCHAIR_ICON
  */
-//# sourceMappingURL=icon-mapper.d.ts.map

package/development/seat-reservation/common/mapper/mapper.d.ts

@@ -1,4 +1,4 @@
-import { CoachDeckLevel, CoachItem, CoachNumberOfFreePlaces, Place, PlaceSelection, SeatReservation, SeatReservationPlaceSelection, SeatReservationSelectedCoach, VehicleType } from '../types.ts';
+import type { CoachDeckLevel, CoachItem, CoachNumberOfFreePlaces, Place, PlaceSelection, SeatReservation, SeatReservationPlaceSelection, SeatReservationSelectedCoach, VehicleType } from '../types.ts';
 /**
  * Map function that converts the RAW OSDM mock data into SeatReservation
  */
@@ -31,4 +31,3 @@ export declare const mapPlaceAndCoachToSeatReservationPlaceSelection: (place: Pl
  * @returns PlaceSelection
  */
 export declare const mapCoachInfosToCoachSelection: (coachIndex: number, coach: CoachItem, coachNumberOfFreePlaces: CoachNumberOfFreePlaces) => SeatReservationSelectedCoach;
-//# sourceMappingURL=mapper.d.ts.map