@sbb-esta/lyne-elements-dev 5.1.0-dev.1782310350 → 5.1.0-dev.1782312497

package/clock.pure.js

@@ -3,7 +3,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isS
 `,u=`<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path d="M55.1,64.5h-5.2l0.8-58h3.6L55.1,64.5z"/></svg>
 `,d=`<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path d="M57.8,21.3c0-2.9-2.4-5.2-5.2-5.2s-5.3,2.3-5.3,5.2c0,2.7,2,4.8,4.5,5.2V69h1.5V26.5C55.8,26.2,57.8,24,57.8,21.3z"/></svg>
 `,f=`:host{aspect-ratio:1;contain:content;display:block;position:relative;overflow:hidden}.sbb-clock__face,.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds{transform-origin:50%;transform-style:preserve-3d;backface-visibility:hidden;position:absolute;inset:0;transform:rotate(0)}.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__face{fill:var(--sbb-clock-face-color)}.sbb-clock__hand-minutes{transition:transform var(--sbb-disable-animation-duration,.2s) cubic-bezier(.4, 2.08, .55, .44)}@supports not (aspect-ratio:1/1){.sbb-clock__hand-minutes{transform-origin:50% 49.625%}}.sbb-clock__hand-hours{animation-name:rotate;animation-duration:43200s;animation-timing-function:linear;animation-iteration-count:infinite;animation-play-state:var(--sbb-clock-animation-play-state,"paused")}.sbb-clock__hand-hours--initial-hour{animation-name:hand-hours-animation-initial-hour;animation-duration:var(--sbb-clock-hours-animation-duration,0s);animation-play-state:var(--sbb-clock-animation-play-state,"paused");animation-iteration-count:1}.sbb-clock__hand-minutes--no-transition{transition:none}.sbb-clock__hand-seconds{animation-name:hand-seconds-animation;animation-duration:60s;animation-timing-function:linear;animation-play-state:var(--sbb-clock-animation-play-state,"paused");fill:var(--sbb-clock-seconds-hand-color);animation-iteration-count:infinite}.sbb-clock__hand-seconds--initial-minute{animation-name:hand-seconds-animation-initial-minute;animation-duration:var(--sbb-clock-seconds-animation-duration,0s);animation-play-state:var(--sbb-clock-animation-play-state,"paused");animation-iteration-count:1}:host(:not(:is(:state(initialized),[state--initialized]))) :is(.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds){display:none}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes hand-hours-animation-initial-hour{0%{transform:rotateZ(var(--sbb-clock-hours-animation-start-angle,0deg))}to{transform:rotate(360deg)}}@keyframes hand-seconds-animation{0%{transform:rotate(0)}97.5%,to{transform:rotate(360deg)}}@keyframes hand-seconds-animation-initial-minute{0%{transform:rotateZ(var(--sbb-clock-seconds-animation-start-angle,0deg))}97.5%,to{transform:rotate(360deg)}}
-`;const p={once:!0,passive:!0};let m=(()=>{let m=s,h,g=[],_=[];return class extends m{constructor(){super(...arguments),this.#e=t(this,g,null),this._state=(t(this,_),`paused`),this._moveHoursHandFn=()=>this._moveHoursHand(),this._moveMinutesHandFn=()=>this._moveMinutesHand(),this._handlePageVisibilityChange=async()=>{this.now||(document.visibilityState===`hidden`?await this._stopClock():await this._startClock())}}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;h=[a()],e(this,null,h,{kind:`accessor`,name:`now`,static:!1,private:!1,access:{has:e=>`now`in e,get:e=>e.now,set:(e,t)=>{e.now=t}},metadata:t},g,_),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-clock`}static{this.styles=[i(f)]}#e;get now(){return this.#e}set now(e){this.#e=e}connectedCallback(){super.connectedCallback(),this._resetIntervalId=setInterval(()=>this._resetClock(),1800*1e3)}willUpdate(e){super.willUpdate(e),!r&&e.has(`now`)&&this._startOrConfigureClock()}firstUpdated(e){super.firstUpdated(e),r||(document.addEventListener(`visibilitychange`,this._handlePageVisibilityChange,!1),this._startOrConfigureClock())}disconnectedCallback(){super.disconnectedCallback(),this._removeEventListeners(),clearInterval(this._resetIntervalId)}async _startOrConfigureClock(){this.now?(await this._stopClock(),this._resetSecondsHandAnimation(),this._setHandsStartingPosition()):await this._startClock()}async _startClock(){this._clockHandHours?.addEventListener(`animationend`,this._moveHoursHandFn,p),this._clockHandSeconds?.addEventListener(`animationend`,this._moveMinutesHandFn,p),await new Promise(e=>setTimeout(()=>{this._setHandsStartingPosition(),this.style?.setProperty(`--sbb-clock-animation-play-state`,`running`),this._state=`running`,e()},50))}async _stopClock(){clearInterval(this._handMovement),this._removeSecondsAnimationStyles(),this._removeHoursAnimationStyles(),this._clockHandHours?.removeEventListener(`animationend`,this._moveHoursHandFn),this._clockHandSeconds?.removeEventListener(`animationend`,this._moveMinutesHandFn),this._clockHandMinutes?.classList.add(`sbb-clock__hand-minutes--no-transition`),this.style?.setProperty(`--sbb-clock-animation-play-state`,`paused`),this._state=`paused`}async _resetClock(){this._state===`running`&&(await this._stopClock(),await this._startClock())}_setHandsStartingPosition(){this._assignCurrentTime();let e=60-this._seconds,t=60-this._minutes,n=12-this._hours,r=0,i=0;e>0&&(r+=e,i=1),t>0&&(r+=(t-i)*60,i=1),n>0&&(r+=(n-i)*3600),this.style?.setProperty(`--sbb-clock-hours-animation-start-angle`,`${Math.ceil(this._hours*30+this._minutes/2)}deg`),this.style?.setProperty(`--sbb-clock-hours-animation-duration`,`${r}s`),this.style?.setProperty(`--sbb-clock-seconds-animation-start-angle`,`${Math.ceil(this._seconds*6.153846153846154)}deg`),this.style?.setProperty(`--sbb-clock-seconds-animation-duration`,`${e}s`),this._setMinutesHand(),this._clockHandSeconds?.classList.add(`sbb-clock__hand-seconds--initial-minute`),this._clockHandHours?.classList.add(`sbb-clock__hand-hours--initial-hour`),this.internals.states.add(`initialized`)}_assignCurrentTime(){let e=this.now?null:new Date,[t,n,r]=e?[e.getHours(),e.getMinutes(),e.getSeconds()]:this.now.split(`:`).map(e=>+e);this._hours=t%12,this._minutes=n,this._seconds=r}_setMinutesHand(){this._clockHandMinutes?.style.setProperty(`transform`,`rotateZ(${Math.ceil(this._minutes*6)}deg)`)}_moveHoursHand(){this._removeHoursAnimationStyles();let e=Math.ceil(this._hours*30+this._minutes/2);e>=360&&(e-=360),this._clockHandHours?.style.setProperty(`transform`,`rotateZ(${e}deg)`)}_moveMinutesHand(){this._clockHandSeconds?.removeEventListener(`animationend`,this._moveMinutesHandFn),this._removeSecondsAnimationStyles(),this._addMinutesAndSetHands(),this._handMovement=setInterval(()=>this._addMinutesAndSetHands(),60*1e3)}_addMinutesAndSetHands(){this._minutes++,this._setMinutesHand()}_resetSecondsHandAnimation(){this._clockHandSeconds&&(this._clockHandSeconds.style.animation=``,this._clockHandSeconds.offsetHeight,this._clockHandSeconds.style.removeProperty(`animation`))}_removeEventListeners(){document?.removeEventListener(`visibilitychange`,this._handlePageVisibilityChange),this._clockHandHours?.removeEventListener(`animationend`,this._moveHoursHandFn),this._clockHandSeconds?.removeEventListener(`animationend`,this._moveMinutesHandFn),clearInterval(this._handMovement)}_removeHoursAnimationStyles(){this._clockHandHours?.classList.remove(`sbb-clock__hand-hours--initial-hour`),this.style.removeProperty(`--sbb-clock-hours-animation-start-angle`),this.style.removeProperty(`--sbb-clock-hours-animation-duration`)}_removeSecondsAnimationStyles(){this._clockHandSeconds?.classList.remove(`sbb-clock__hand-seconds--initial-minute`),this._clockHandMinutes?.classList.remove(`sbb-clock__hand-minutes--no-transition`),this.style.removeProperty(`--sbb-clock-seconds-animation-start-angle`),this.style.removeProperty(`--sbb-clock-seconds-animation-duration`)}render(){return n`
+`;const p={once:!0,passive:!0};let m=(()=>{let m=s,h,g=[],_=[];return class extends m{constructor(){super(...arguments),this.#e=t(this,g,null),this._state=(t(this,_),`paused`),this._moveHoursHandFn=()=>this._moveHoursHand(),this._moveMinutesHandFn=()=>this._moveMinutesHand(),this._handlePageVisibilityChange=()=>{this.now||(document.visibilityState===`hidden`?this._stopClock():this._startClock())}}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;h=[a()],e(this,null,h,{kind:`accessor`,name:`now`,static:!1,private:!1,access:{has:e=>`now`in e,get:e=>e.now,set:(e,t)=>{e.now=t}},metadata:t},g,_),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-clock`}static{this.styles=[i(f)]}#e;get now(){return this.#e}set now(e){this.#e=e}connectedCallback(){super.connectedCallback(),this._resetIntervalId=setInterval(()=>this._resetClock(),1800*1e3)}willUpdate(e){super.willUpdate(e),!(r||!this.hasUpdated)&&e.has(`now`)&&this._startOrConfigureClock()}firstUpdated(e){super.firstUpdated(e),r||(document.addEventListener(`visibilitychange`,this._handlePageVisibilityChange,!1),this._startOrConfigureClock())}disconnectedCallback(){super.disconnectedCallback(),this._removeEventListeners(),clearInterval(this._resetIntervalId)}_startOrConfigureClock(){this.now?(this._stopClock(),this._resetSecondsHandAnimation(),this._setHandsStartingPosition()):this._startClock()}_startClock(){this._clockHandHours?.addEventListener(`animationend`,this._moveHoursHandFn,p),this._clockHandSeconds?.addEventListener(`animationend`,this._moveMinutesHandFn,p),this._setHandsStartingPosition(),this.style?.setProperty(`--sbb-clock-animation-play-state`,`running`),this._state=`running`}_stopClock(){clearInterval(this._handMovement),this._removeSecondsAnimationStyles(),this._removeHoursAnimationStyles(),this._clockHandHours?.removeEventListener(`animationend`,this._moveHoursHandFn),this._clockHandSeconds?.removeEventListener(`animationend`,this._moveMinutesHandFn),this._clockHandMinutes?.classList.add(`sbb-clock__hand-minutes--no-transition`),this.style?.setProperty(`--sbb-clock-animation-play-state`,`paused`),this._state=`paused`}async _resetClock(){this._state===`running`&&(this._stopClock(),setTimeout(()=>this._startClock(),50))}_setHandsStartingPosition(){this._assignCurrentTime();let e=60-this._seconds,t=60-this._minutes,n=12-this._hours,r=0,i=0;e>0&&(r+=e,i=1),t>0&&(r+=(t-i)*60,i=1),n>0&&(r+=(n-i)*3600),this.style?.setProperty(`--sbb-clock-hours-animation-start-angle`,`${Math.ceil(this._hours*30+this._minutes/2)}deg`),this.style?.setProperty(`--sbb-clock-hours-animation-duration`,`${r}s`),this.style?.setProperty(`--sbb-clock-seconds-animation-start-angle`,`${Math.ceil(this._seconds*6.153846153846154)}deg`),this.style?.setProperty(`--sbb-clock-seconds-animation-duration`,`${e}s`),this._setMinutesHand(),this._clockHandSeconds?.classList.add(`sbb-clock__hand-seconds--initial-minute`),this._clockHandHours?.classList.add(`sbb-clock__hand-hours--initial-hour`),this.internals.states.add(`initialized`)}_assignCurrentTime(){let e=this.now?null:new Date,[t,n,r]=e?[e.getHours(),e.getMinutes(),e.getSeconds()]:this.now.split(`:`).map(e=>+e);this._hours=t%12,this._minutes=n,this._seconds=r}_setMinutesHand(){this._clockHandMinutes?.style.setProperty(`transform`,`rotateZ(${Math.ceil(this._minutes*6)}deg)`)}_moveHoursHand(){this._removeHoursAnimationStyles();let e=Math.ceil(this._hours*30+this._minutes/2);e>=360&&(e-=360),this._clockHandHours?.style.setProperty(`transform`,`rotateZ(${e}deg)`)}_moveMinutesHand(){this._clockHandSeconds?.removeEventListener(`animationend`,this._moveMinutesHandFn),this._removeSecondsAnimationStyles(),this._addMinutesAndSetHands(),this._handMovement=setInterval(()=>this._addMinutesAndSetHands(),60*1e3)}_addMinutesAndSetHands(){this._minutes++,this._setMinutesHand()}_resetSecondsHandAnimation(){this._clockHandSeconds&&(this._clockHandSeconds.style.animation=``,this._clockHandSeconds.offsetHeight,this._clockHandSeconds.style.removeProperty(`animation`))}_removeEventListeners(){document?.removeEventListener(`visibilitychange`,this._handlePageVisibilityChange),this._clockHandHours?.removeEventListener(`animationend`,this._moveHoursHandFn),this._clockHandSeconds?.removeEventListener(`animationend`,this._moveMinutesHandFn),clearInterval(this._handMovement)}_removeHoursAnimationStyles(){this._clockHandHours?.classList.remove(`sbb-clock__hand-hours--initial-hour`),this.style.removeProperty(`--sbb-clock-hours-animation-start-angle`),this.style.removeProperty(`--sbb-clock-hours-animation-duration`)}_removeSecondsAnimationStyles(){this._clockHandSeconds?.classList.remove(`sbb-clock__hand-seconds--initial-minute`),this._clockHandMinutes?.classList.remove(`sbb-clock__hand-minutes--no-transition`),this.style.removeProperty(`--sbb-clock-seconds-animation-start-angle`),this.style.removeProperty(`--sbb-clock-seconds-animation-duration`)}render(){return n`
       <span class="sbb-clock__face" .innerHTML=${c}></span>
       <span
         class="sbb-clock__hand-hours"

package/custom-elements.json

@@ -88671,7 +88671,7 @@
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "Promise<void>"
+                  "text": "void"
                 }
               }
             },
@@ -88681,7 +88681,7 @@
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "Promise<void>"
+                  "text": "void"
                 }
               },
               "description": "Starts the clock by defining the hands starting position then starting the animations."
@@ -88692,7 +88692,7 @@
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "Promise<void>"
+                  "text": "void"
                 }
               },
               "description": "Stops the clock by removing all the animations."

package/development/clock.pure.js

@@ -69,10 +69,10 @@ let SbbClockElement = (() => {
 			this._moveHoursHandFn = () => this._moveHoursHand();
 			/** Callback function for minutes hand. */
 			this._moveMinutesHandFn = () => this._moveMinutesHand();
-			this._handlePageVisibilityChange = async () => {
+			this._handlePageVisibilityChange = () => {
 				if (this.now) return;
-				if (document.visibilityState === "hidden") await this._stopClock();
-				else await this._startClock();
+				if (document.visibilityState === "hidden") this._stopClock();
+				else this._startClock();
 			};
 		}
 		static {
@@ -122,7 +122,8 @@ let SbbClockElement = (() => {
 		}
 		willUpdate(changedProperties) {
 			super.willUpdate(changedProperties);
-			if (!isServer && changedProperties.has("now")) this._startOrConfigureClock();
+			if (isServer || !this.hasUpdated) return;
+			if (changedProperties.has("now")) this._startOrConfigureClock();
 		}
 		firstUpdated(changedProperties) {
 			super.firstUpdated(changedProperties);
@@ -136,26 +137,23 @@ let SbbClockElement = (() => {
 			this._removeEventListeners();
 			clearInterval(this._resetIntervalId);
 		}
-		async _startOrConfigureClock() {
+		_startOrConfigureClock() {
 			if (this.now) {
-				await this._stopClock();
+				this._stopClock();
 				this._resetSecondsHandAnimation();
 				this._setHandsStartingPosition();
-			} else await this._startClock();
+			} else this._startClock();
 		}
 		/** Starts the clock by defining the hands starting position then starting the animations. */
-		async _startClock() {
+		_startClock() {
 			this._clockHandHours?.addEventListener("animationend", this._moveHoursHandFn, ADD_EVENT_LISTENER_OPTIONS);
 			this._clockHandSeconds?.addEventListener("animationend", this._moveMinutesHandFn, ADD_EVENT_LISTENER_OPTIONS);
-			await new Promise((resolve) => setTimeout(() => {
-				this._setHandsStartingPosition();
-				this.style?.setProperty("--sbb-clock-animation-play-state", "running");
-				this._state = "running";
-				resolve();
-			}, INITIAL_TIMEOUT_DURATION));
+			this._setHandsStartingPosition();
+			this.style?.setProperty("--sbb-clock-animation-play-state", "running");
+			this._state = "running";
 		}
 		/** Stops the clock by removing all the animations. */
-		async _stopClock() {
+		_stopClock() {
 			clearInterval(this._handMovement);
 			this._removeSecondsAnimationStyles();
 			this._removeHoursAnimationStyles();
@@ -170,8 +168,8 @@ let SbbClockElement = (() => {
 		*/
 		async _resetClock() {
 			if (this._state !== "running") return;
-			await this._stopClock();
-			await this._startClock();
+			this._stopClock();
+			setTimeout(() => this._startClock(), INITIAL_TIMEOUT_DURATION);
 		}
 		/** Set the starting position for the three hands on the clock face. */
 		_setHandsStartingPosition() {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.1.0-dev.1782310350",
+  "version": "5.1.0-dev.1782312497",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/09415e80b45e3276693cf8f74cb6fc02dc2cdd53"
+    "https://github.com/sbb-design-systems/lyne-components/commit/d3381c22c3c03cbccf501b4791ce47da9ef6d405"
   ],
   "type": "module",
   "exports": {