@albi_scando/as-design-system-lib 1.3.0 → 1.4.0

package/dist/as-design-system-lib.es.js

@@ -471,7 +471,7 @@ class nt extends s {
 const ot = "next-button", at = "base-dialog", q = `<dialog part="dialog">
   <slot></slot>
 </dialog>
-`, B = "dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-xl);padding:var(--spacing-4);max-width:90vw;max-height:90vh;font-family:var(--font-family-base);line-height:var(--line-height-normal);font-size:var(--font-size-sm);box-shadow:var(--shadow-2xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:slideIn var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog.closing{animation:slideOut var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog::backdrop{background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn var(--transition-base) ease-out forwards}dialog.closing::backdrop{animation:fadeOut var(--transition-base) ease-out forwards}@keyframes slideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-20px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}", E = new CSSStyleSheet();
+`, B = "dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-xl);padding:var(--spacing-4);max-width:90vw;max-height:90vh;font-family:var(--font-family-base);line-height:var(--line-height-normal);font-size:var(--font-size-sm);box-shadow:var(--shadow-2xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:slideIn var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog.closing{animation:slideOut var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog::backdrop{background:var(--window-backdrop);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn var(--transition-base) ease-out forwards}dialog.closing::backdrop{animation:fadeOut var(--transition-base) ease-out forwards}@keyframes slideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-20px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}", E = new CSSStyleSheet();
 E.replaceSync(B);
 class d extends HTMLElement {
   /**
@@ -766,7 +766,7 @@ const dt = "header-body-footer-dialog", j = `<div class="bar-menu-container">
 
   <next-button class="nav-next" part="nav-next-button"></next-button>
 </div>
-`, X = '@charset "UTF-8";:host{display:block;width:100%}@media(max-width:600px){:host{--game-menu-width: 90%}}@media(min-width:601px)and (max-width:1200px){:host{--game-menu-width: calc(90% - (40%*(100vw - 601px)/599px)) }}@media(min-width:1201px){:host{--game-menu-width: 50%}}.bar-menu-container{display:flex;align-items:center;justify-content:space-between;width:var(--game-menu-width, 90%);max-width:900px;height:100%;gap:var(--gap-sm);padding:var(--spacing-1);background:var(--color-bg-primary);border-radius:var(--border-radius-full);border:var(--border-width-2) solid var(--color-bg-primary);box-shadow:var(--shadow-sm);margin:0 auto}.bar-menu-container previous-button,.bar-menu-container next-button{flex-shrink:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.bar-menu-container previous-button.visible,.bar-menu-container next-button.visible{opacity:1;visibility:visible;pointer-events:auto}.bar-menu-container previous-button::part(button),.bar-menu-container next-button::part(button){background-color:transparent;box-shadow:none}.bar-menu-container .buttons-wrapper{display:grid;grid-template-columns:repeat(var(--game-menu-visible-count, 3),1fr);grid-auto-rows:max-content;align-items:center;justify-items:center;gap:var(--gap-sm);overflow:hidden;position:relative;width:auto}::slotted(*){display:none;flex-shrink:0;will-change:opacity,transform;contain:layout style paint;opacity:0;transform:scale(.8)}::slotted(.animating){transition:opacity .4s cubic-bezier(.34,1.56,.64,1),transform .4s cubic-bezier(.34,1.56,.64,1)}::slotted(.visible-button){display:inline-flex!important;pointer-events:auto;opacity:1;transform:scale(1)}', R = new CSSStyleSheet();
+`, X = '@charset "UTF-8";:host{display:block;width:100%}@media(max-width:600px){:host{--game-menu-width: 90%}}@media(min-width:601px)and (max-width:1200px){:host{--game-menu-width: calc(90% - (40%*(100vw - 601px)/599px)) }}@media(min-width:1201px){:host{--game-menu-width: 50%}}.bar-menu-container{display:flex;align-items:center;justify-content:space-between;width:var(--game-menu-width, 90%);max-width:900px;height:100%;gap:var(--gap-sm);padding:var(--spacing-1);background:var(--color-bg-primary);border-radius:var(--border-radius-full);border:var(--border-width-2) solid var(--color-border-secondary);box-shadow:var(--shadow-sm);margin:0 auto}.bar-menu-container previous-button,.bar-menu-container next-button{flex-shrink:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.bar-menu-container previous-button.visible,.bar-menu-container next-button.visible{opacity:1;visibility:visible;pointer-events:auto}.bar-menu-container previous-button::part(button),.bar-menu-container next-button::part(button){background-color:transparent;box-shadow:none}.bar-menu-container .buttons-wrapper{display:grid;grid-template-columns:repeat(var(--game-menu-visible-count, 3),1fr);grid-auto-rows:max-content;align-items:center;justify-items:center;gap:var(--gap-sm);overflow:hidden;position:relative;width:auto}::slotted(*){display:none;flex-shrink:0;will-change:opacity,transform;contain:layout style paint;opacity:0;transform:scale(.8)}::slotted(.animating){transition:opacity .4s cubic-bezier(.34,1.56,.64,1),transform .4s cubic-bezier(.34,1.56,.64,1)}::slotted(.visible-button){display:inline-flex!important;pointer-events:auto;opacity:1;transform:scale(1)}', R = new CSSStyleSheet();
 R.replaceSync(X);
 class v extends HTMLElement {
   static _visibleCountAttribute = "visible-count";

package/dist/as-design-system-lib.umd.js

@@ -26,7 +26,7 @@
 `,X="button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",k=new CSSStyleSheet;k.replaceSync(X);class G extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(k),this.command=c.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,r){super.attributeChangedCallback(t,e,r),t==="disabled"&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=F,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");this.disabled?t.removeAttribute("title"):t.setAttribute("title","Next")}}const J="next-button",Q="base-dialog",Z=`<dialog part="dialog">
   <slot></slot>
 </dialog>
-`,tt="dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-xl);padding:var(--spacing-4);max-width:90vw;max-height:90vh;font-family:var(--font-family-base);line-height:var(--line-height-normal);font-size:var(--font-size-sm);box-shadow:var(--shadow-2xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:slideIn var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog.closing{animation:slideOut var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog::backdrop{background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn var(--transition-base) ease-out forwards}dialog.closing::backdrop{animation:fadeOut var(--transition-base) ease-out forwards}@keyframes slideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-20px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}",C=new CSSStyleSheet;C.replaceSync(tt);class d extends HTMLElement{static closedByAttribute="closedby";_closedBy=A.ANY;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(C)}static get observedAttributes(){return[d.closedByAttribute]}get dialogElement(){return this.shadowRoot?.querySelector("dialog")}get command(){return this.getAttribute(d.closedByAttribute)??A.ANY}get closedBy(){return this._closedBy}set closedBy(t){this._closedBy=t,this.setAttribute(d.closedByAttribute,t)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,r){const u=this.dialogElement;u!=null&&r!==e&&this._syncAttribute(t)}_addEventListeners(){}_removeEventListeners(){}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Z,this._syncAttributes())}_syncAttribute(t){const e=this.dialogElement;e!=null&&(this.hasAttribute(t)===!0?e.setAttribute(t,this.getAttribute(t)??n):e.removeAttribute(t))}_syncAttributes(){d.observedAttributes.forEach(t=>{this._syncAttribute(t)})}show(){this.dialogElement.show()}showModal(){this.dialogElement.showModal()}close(t){const e=this.dialogElement;e.classList.add("closing"),setTimeout(()=>{e.close(t),e.classList.remove("closing")},300)}}const et="confirmation-dialog",it=`<dialog part="dialog">
+`,tt="dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-xl);padding:var(--spacing-4);max-width:90vw;max-height:90vh;font-family:var(--font-family-base);line-height:var(--line-height-normal);font-size:var(--font-size-sm);box-shadow:var(--shadow-2xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:slideIn var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog.closing{animation:slideOut var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog::backdrop{background:var(--window-backdrop);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn var(--transition-base) ease-out forwards}dialog.closing::backdrop{animation:fadeOut var(--transition-base) ease-out forwards}@keyframes slideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-20px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}",C=new CSSStyleSheet;C.replaceSync(tt);class d extends HTMLElement{static closedByAttribute="closedby";_closedBy=A.ANY;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(C)}static get observedAttributes(){return[d.closedByAttribute]}get dialogElement(){return this.shadowRoot?.querySelector("dialog")}get command(){return this.getAttribute(d.closedByAttribute)??A.ANY}get closedBy(){return this._closedBy}set closedBy(t){this._closedBy=t,this.setAttribute(d.closedByAttribute,t)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,r){const u=this.dialogElement;u!=null&&r!==e&&this._syncAttribute(t)}_addEventListeners(){}_removeEventListeners(){}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Z,this._syncAttributes())}_syncAttribute(t){const e=this.dialogElement;e!=null&&(this.hasAttribute(t)===!0?e.setAttribute(t,this.getAttribute(t)??n):e.removeAttribute(t))}_syncAttributes(){d.observedAttributes.forEach(t=>{this._syncAttribute(t)})}show(){this.dialogElement.show()}showModal(){this.dialogElement.showModal()}close(t){const e=this.dialogElement;e.classList.add("closing"),setTimeout(()=>{e.close(t),e.classList.remove("closing")},300)}}const et="confirmation-dialog",it=`<dialog part="dialog">
   <header part="header">
     <h2></h2>
   </header>
@@ -58,4 +58,4 @@
 
   <next-button class="nav-next" part="nav-next-button"></next-button>
 </div>
-`,lt='@charset "UTF-8";:host{display:block;width:100%}@media(max-width:600px){:host{--game-menu-width: 90%}}@media(min-width:601px)and (max-width:1200px){:host{--game-menu-width: calc(90% - (40%*(100vw - 601px)/599px)) }}@media(min-width:1201px){:host{--game-menu-width: 50%}}.bar-menu-container{display:flex;align-items:center;justify-content:space-between;width:var(--game-menu-width, 90%);max-width:900px;height:100%;gap:var(--gap-sm);padding:var(--spacing-1);background:var(--color-bg-primary);border-radius:var(--border-radius-full);border:var(--border-width-2) solid var(--color-bg-primary);box-shadow:var(--shadow-sm);margin:0 auto}.bar-menu-container previous-button,.bar-menu-container next-button{flex-shrink:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.bar-menu-container previous-button.visible,.bar-menu-container next-button.visible{opacity:1;visibility:visible;pointer-events:auto}.bar-menu-container previous-button::part(button),.bar-menu-container next-button::part(button){background-color:transparent;box-shadow:none}.bar-menu-container .buttons-wrapper{display:grid;grid-template-columns:repeat(var(--game-menu-visible-count, 3),1fr);grid-auto-rows:max-content;align-items:center;justify-items:center;gap:var(--gap-sm);overflow:hidden;position:relative;width:auto}::slotted(*){display:none;flex-shrink:0;will-change:opacity,transform;contain:layout style paint;opacity:0;transform:scale(.8)}::slotted(.animating){transition:opacity .4s cubic-bezier(.34,1.56,.64,1),transform .4s cubic-bezier(.34,1.56,.64,1)}::slotted(.visible-button){display:inline-flex!important;pointer-events:auto;opacity:1;transform:scale(1)}',M=new CSSStyleSheet;M.replaceSync(lt);class b extends HTMLElement{static _visibleCountAttribute="visible-count";_currentIndex=0;_visibleCount=3;_MIN_VISIBLE=3;_MAX_VISIBLE=5;_slotElement=null;_navPrevButton=null;_navNextButton=null;_buttonsWrapper=null;_slotChangeListener=null;_keyDownListener=null;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(M)}static get observedAttributes(){return[b._visibleCountAttribute]}get visibleButtons(){const t=this.getAttribute(b._visibleCountAttribute);if(t!==null&&t!==n){const e=parseInt(t,10);return Math.max(this._MIN_VISIBLE,Math.min(this._MAX_VISIBLE,e))}return this._visibleCount}set visibleButtons(t){const e=Math.max(this._MIN_VISIBLE,Math.min(this._MAX_VISIBLE,t));this.setAttribute(b._visibleCountAttribute,String(e))}connectedCallback(){this._render(),this._cacheElements(),this._setupSlotListener(),this._setupKeyboardListener(),this._updateButtonVisibility()}disconnectedCallback(){this._removeSlotListener(),this._removeKeyboardListener()}attributeChangedCallback(t,e,r){t===b._visibleCountAttribute&&(this._visibleCount=this.visibleButtons,this._buttonsWrapper!==null&&this._buttonsWrapper.style.setProperty("--bar-menu-visible-count",String(this.visibleButtons)),this._updateButtonVisibility())}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=at)}_cacheElements(){this._slotElement=this.shadowRoot?.querySelector("slot")??null,this._navPrevButton=this.shadowRoot?.querySelector(".nav-prev")??null,this._navNextButton=this.shadowRoot?.querySelector(".nav-next")??null,this._buttonsWrapper=this.shadowRoot?.querySelector(".buttons-wrapper")??null,this._buttonsWrapper!==null&&this._buttonsWrapper.style.setProperty("--bar-menu-visible-count",String(this.visibleButtons)),this._navPrevButton!==null&&(this._navPrevButton.setAttribute("aria-label","Previous"),this._navPrevButton.addEventListener(g.CLICK,()=>{this._scrollPrevious()})),this._navNextButton!==null&&(this._navNextButton.setAttribute("aria-label","Next"),this._navNextButton.addEventListener(g.CLICK,()=>{this._scrollNext()}))}_setupSlotListener(){this._slotElement!==null&&(this._slotChangeListener=()=>{this._currentIndex=0,this._updateButtonVisibility()},this._slotElement.addEventListener("slotchange",this._slotChangeListener))}_removeSlotListener(){this._slotElement!==null&&this._slotChangeListener!==null&&this._slotElement.removeEventListener("slotchange",this._slotChangeListener)}_setupKeyboardListener(){this._keyDownListener=t=>{t.key==="ArrowLeft"?(t.preventDefault(),this._scrollPrevious()):t.key==="ArrowRight"&&(t.preventDefault(),this._scrollNext())},this.addEventListener(w.KEY_DOWN,this._keyDownListener)}_removeKeyboardListener(){this._keyDownListener!==null&&this.removeEventListener(w.KEY_DOWN,this._keyDownListener)}_getSlottedButtons(){return this._slotElement===null?[]:this._slotElement.assignedElements()}_updateButtonVisibility(t){const e=this._getSlottedButtons(),r=e.length,u=this.visibleButtons,v=this._currentIndex,f=Math.min(v+u,r);e.forEach((o,a)=>{const y=a>=v&&a<f,h=o;y||(o.classList.remove("visible-button"),o.classList.remove("animating"),h.style.display="none")}),t!==void 0?(e[0]?.offsetHeight,e.forEach((o,a)=>{if(a>=v&&a<f){const h=o;h.style.display="inline-flex",o.classList.add("animating");const ut=a%this.visibleButtons*50;h.style.transitionDelay=`${ut}ms`}}),e[0]?.offsetHeight,e.forEach((o,a)=>{a>=v&&a<f&&o.classList.add("visible-button")}),setTimeout(()=>{e.forEach(o=>{o.classList.remove("animating"),o.style.transitionDelay=n})},400)):e.forEach((o,a)=>{const y=a>=v&&a<f,h=o;y&&(h.style.display="inline-flex",o.classList.add("visible-button"))}),this._updateNavigationButtons(r,u)}_updateNavigationButtons(t,e){const r=t>e,u=this._currentIndex+e<t;this._navPrevButton!==null&&(r?(this._navPrevButton.classList.add("visible"),this._navPrevButton.disabled=this._currentIndex===0):this._navPrevButton.classList.remove("visible")),this._navNextButton!==null&&(r?(this._navNextButton.classList.add("visible"),this._navNextButton.disabled=!u):this._navNextButton.classList.remove("visible"))}_scrollPrevious(){this._currentIndex>0&&(this._currentIndex=Math.max(0,this._currentIndex-this.visibleButtons),this._updateButtonVisibility("previous"))}_scrollNext(){const t=this._getSlottedButtons().length,e=this.visibleButtons,r=this._currentIndex+e;r<t&&(this._currentIndex=r,this._updateButtonVisibility("next"))}scrollToButton(t){const e=this._getSlottedButtons().length,r=this.visibleButtons;t>=0&&t<e&&(this._currentIndex=Math.max(0,Math.min(t,e-r)),this._updateButtonVisibility())}getVisibleButtons(){return this._getSlottedButtons().filter(t=>t.classList.contains("visible-button"))}getAllButtons(){return this._getSlottedButtons()}getCurrentIndex(){return this._currentIndex}}const dt="bar-menu";s.APPLICATION_NAME=p,s.BarMenuComponent=b,s.BaseButtonComponent=i,s.BaseDialogComponent=d,s.ConfirmButtonComponent=D,s.ConfirmationDialogComponent=l,s.HeaderBodyFooterDialogComponent=_,s.NextButtonComponent=G,s.PreviousButtonComponent=U,s.UndoButtonComponent=V,s.WebComponentsRegistry=T,s.barMenuWebComponentSelector=dt,s.baseButtonWebComponentSelector=N,s.baseDialogWebComponentSelector=Q,s.confirmButtonWebComponentSelector=K,s.confirmationDialogWebComponentSelector=et,s.headerBodyFooterDialogWebComponentSelector=ot,s.nextButtonWebComponentSelector=J,s.previousButtonWebComponentSelector=j,s.undoButtonWebComponentSelector=O,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));
+`,lt='@charset "UTF-8";:host{display:block;width:100%}@media(max-width:600px){:host{--game-menu-width: 90%}}@media(min-width:601px)and (max-width:1200px){:host{--game-menu-width: calc(90% - (40%*(100vw - 601px)/599px)) }}@media(min-width:1201px){:host{--game-menu-width: 50%}}.bar-menu-container{display:flex;align-items:center;justify-content:space-between;width:var(--game-menu-width, 90%);max-width:900px;height:100%;gap:var(--gap-sm);padding:var(--spacing-1);background:var(--color-bg-primary);border-radius:var(--border-radius-full);border:var(--border-width-2) solid var(--color-border-secondary);box-shadow:var(--shadow-sm);margin:0 auto}.bar-menu-container previous-button,.bar-menu-container next-button{flex-shrink:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.bar-menu-container previous-button.visible,.bar-menu-container next-button.visible{opacity:1;visibility:visible;pointer-events:auto}.bar-menu-container previous-button::part(button),.bar-menu-container next-button::part(button){background-color:transparent;box-shadow:none}.bar-menu-container .buttons-wrapper{display:grid;grid-template-columns:repeat(var(--game-menu-visible-count, 3),1fr);grid-auto-rows:max-content;align-items:center;justify-items:center;gap:var(--gap-sm);overflow:hidden;position:relative;width:auto}::slotted(*){display:none;flex-shrink:0;will-change:opacity,transform;contain:layout style paint;opacity:0;transform:scale(.8)}::slotted(.animating){transition:opacity .4s cubic-bezier(.34,1.56,.64,1),transform .4s cubic-bezier(.34,1.56,.64,1)}::slotted(.visible-button){display:inline-flex!important;pointer-events:auto;opacity:1;transform:scale(1)}',M=new CSSStyleSheet;M.replaceSync(lt);class b extends HTMLElement{static _visibleCountAttribute="visible-count";_currentIndex=0;_visibleCount=3;_MIN_VISIBLE=3;_MAX_VISIBLE=5;_slotElement=null;_navPrevButton=null;_navNextButton=null;_buttonsWrapper=null;_slotChangeListener=null;_keyDownListener=null;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(M)}static get observedAttributes(){return[b._visibleCountAttribute]}get visibleButtons(){const t=this.getAttribute(b._visibleCountAttribute);if(t!==null&&t!==n){const e=parseInt(t,10);return Math.max(this._MIN_VISIBLE,Math.min(this._MAX_VISIBLE,e))}return this._visibleCount}set visibleButtons(t){const e=Math.max(this._MIN_VISIBLE,Math.min(this._MAX_VISIBLE,t));this.setAttribute(b._visibleCountAttribute,String(e))}connectedCallback(){this._render(),this._cacheElements(),this._setupSlotListener(),this._setupKeyboardListener(),this._updateButtonVisibility()}disconnectedCallback(){this._removeSlotListener(),this._removeKeyboardListener()}attributeChangedCallback(t,e,r){t===b._visibleCountAttribute&&(this._visibleCount=this.visibleButtons,this._buttonsWrapper!==null&&this._buttonsWrapper.style.setProperty("--bar-menu-visible-count",String(this.visibleButtons)),this._updateButtonVisibility())}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=at)}_cacheElements(){this._slotElement=this.shadowRoot?.querySelector("slot")??null,this._navPrevButton=this.shadowRoot?.querySelector(".nav-prev")??null,this._navNextButton=this.shadowRoot?.querySelector(".nav-next")??null,this._buttonsWrapper=this.shadowRoot?.querySelector(".buttons-wrapper")??null,this._buttonsWrapper!==null&&this._buttonsWrapper.style.setProperty("--bar-menu-visible-count",String(this.visibleButtons)),this._navPrevButton!==null&&(this._navPrevButton.setAttribute("aria-label","Previous"),this._navPrevButton.addEventListener(g.CLICK,()=>{this._scrollPrevious()})),this._navNextButton!==null&&(this._navNextButton.setAttribute("aria-label","Next"),this._navNextButton.addEventListener(g.CLICK,()=>{this._scrollNext()}))}_setupSlotListener(){this._slotElement!==null&&(this._slotChangeListener=()=>{this._currentIndex=0,this._updateButtonVisibility()},this._slotElement.addEventListener("slotchange",this._slotChangeListener))}_removeSlotListener(){this._slotElement!==null&&this._slotChangeListener!==null&&this._slotElement.removeEventListener("slotchange",this._slotChangeListener)}_setupKeyboardListener(){this._keyDownListener=t=>{t.key==="ArrowLeft"?(t.preventDefault(),this._scrollPrevious()):t.key==="ArrowRight"&&(t.preventDefault(),this._scrollNext())},this.addEventListener(w.KEY_DOWN,this._keyDownListener)}_removeKeyboardListener(){this._keyDownListener!==null&&this.removeEventListener(w.KEY_DOWN,this._keyDownListener)}_getSlottedButtons(){return this._slotElement===null?[]:this._slotElement.assignedElements()}_updateButtonVisibility(t){const e=this._getSlottedButtons(),r=e.length,u=this.visibleButtons,m=this._currentIndex,f=Math.min(m+u,r);e.forEach((o,a)=>{const y=a>=m&&a<f,h=o;y||(o.classList.remove("visible-button"),o.classList.remove("animating"),h.style.display="none")}),t!==void 0?(e[0]?.offsetHeight,e.forEach((o,a)=>{if(a>=m&&a<f){const h=o;h.style.display="inline-flex",o.classList.add("animating");const ut=a%this.visibleButtons*50;h.style.transitionDelay=`${ut}ms`}}),e[0]?.offsetHeight,e.forEach((o,a)=>{a>=m&&a<f&&o.classList.add("visible-button")}),setTimeout(()=>{e.forEach(o=>{o.classList.remove("animating"),o.style.transitionDelay=n})},400)):e.forEach((o,a)=>{const y=a>=m&&a<f,h=o;y&&(h.style.display="inline-flex",o.classList.add("visible-button"))}),this._updateNavigationButtons(r,u)}_updateNavigationButtons(t,e){const r=t>e,u=this._currentIndex+e<t;this._navPrevButton!==null&&(r?(this._navPrevButton.classList.add("visible"),this._navPrevButton.disabled=this._currentIndex===0):this._navPrevButton.classList.remove("visible")),this._navNextButton!==null&&(r?(this._navNextButton.classList.add("visible"),this._navNextButton.disabled=!u):this._navNextButton.classList.remove("visible"))}_scrollPrevious(){this._currentIndex>0&&(this._currentIndex=Math.max(0,this._currentIndex-this.visibleButtons),this._updateButtonVisibility("previous"))}_scrollNext(){const t=this._getSlottedButtons().length,e=this.visibleButtons,r=this._currentIndex+e;r<t&&(this._currentIndex=r,this._updateButtonVisibility("next"))}scrollToButton(t){const e=this._getSlottedButtons().length,r=this.visibleButtons;t>=0&&t<e&&(this._currentIndex=Math.max(0,Math.min(t,e-r)),this._updateButtonVisibility())}getVisibleButtons(){return this._getSlottedButtons().filter(t=>t.classList.contains("visible-button"))}getAllButtons(){return this._getSlottedButtons()}getCurrentIndex(){return this._currentIndex}}const dt="bar-menu";s.APPLICATION_NAME=p,s.BarMenuComponent=b,s.BaseButtonComponent=i,s.BaseDialogComponent=d,s.ConfirmButtonComponent=D,s.ConfirmationDialogComponent=l,s.HeaderBodyFooterDialogComponent=_,s.NextButtonComponent=G,s.PreviousButtonComponent=U,s.UndoButtonComponent=V,s.WebComponentsRegistry=T,s.barMenuWebComponentSelector=dt,s.baseButtonWebComponentSelector=N,s.baseDialogWebComponentSelector=Q,s.confirmButtonWebComponentSelector=K,s.confirmationDialogWebComponentSelector=et,s.headerBodyFooterDialogWebComponentSelector=ot,s.nextButtonWebComponentSelector=J,s.previousButtonWebComponentSelector=j,s.undoButtonWebComponentSelector=O,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@albi_scando/as-design-system-lib",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "A library of reusable, strongly typed Web Components built with TypeScript, designed for creating consistent and maintainable user interfaces.",
   "type": "module",
   "files": [
@@ -80,7 +80,7 @@
     "vitest": "^4.0.18"
   },
   "peerDependencies": {
-    "@albi_scando/as-const-lib": "^1.5.2",
+    "@albi_scando/as-const-lib": "^1.6.0",
     "@albi_scando/as-mixins-lib": "^1.1.0",
     "@fontsource/material-symbols-outlined": "^5.2.36"
   },