@albi_scando/as-design-system-lib 1.1.3 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/as-design-system-lib.es.js +452 -134
- package/dist/as-design-system-lib.umd.js +23 -8
- package/dist/types/main.d.ts +3 -0
- package/dist/types/web-components/buttons/next-button/component.d.ts +35 -0
- package/dist/types/web-components/buttons/next-button/main.d.ts +2 -0
- package/dist/types/web-components/buttons/next-button/selector.d.ts +4 -0
- package/dist/types/web-components/buttons/previous-button/component.d.ts +35 -0
- package/dist/types/web-components/buttons/previous-button/main.d.ts +2 -0
- package/dist/types/web-components/buttons/previous-button/selector.d.ts +4 -0
- package/dist/types/web-components/menus/bar-menu/component.d.ts +114 -0
- package/dist/types/web-components/menus/bar-menu/main.d.ts +2 -0
- package/dist/types/web-components/menus/bar-menu/selector.d.ts +4 -0
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(s,p){typeof exports=="object"&&typeof module<"u"?p(exports):typeof define=="function"&&define.amd?define(["exports"],p):(s=typeof globalThis<"u"?globalThis:s||self,p(s["as-design-system-lib"]={}))})(this,(function(s){"use strict";const p="as-design-system-lib";class T{constructor(t=new Map){this.registerAllComponents(t)}registerAllComponents(t){Array.from(t.entries()).forEach(([e,o])=>{this.registerComponent(e,o)})}registerComponent(t,e){customElements.get(t)===void 0?(customElements.define(t,e),console.log(`Registered Web Component: ${t}`)):console.warn(`Web Component "${t}" is already registered.`)}}const N="base-button",r="",c={SHOW_MODAL:"show-modal",CLOSE:"close"};`${btoa({CUSTOM_CROSSHAIR:`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
|
2
2
|
<!-- White border (underneath) -->
|
|
3
3
|
<line x1="16" y1="2" x2="16" y2="30" stroke="white" stroke-width="5"/>
|
|
4
4
|
<line x1="2" y1="16" x2="30" y2="16" stroke="white" stroke-width="5"/>
|
|
@@ -6,21 +6,27 @@
|
|
|
6
6
|
<!-- Black crosshair lines (on top) -->
|
|
7
7
|
<line x1="16" y1="2" x2="16" y2="30" stroke="black" stroke-width="2"/>
|
|
8
8
|
<line x1="2" y1="16" x2="30" y2="16" stroke="black" stroke-width="2"/>
|
|
9
|
-
</svg>`}.CUSTOM_CROSSHAIR)}`;const
|
|
9
|
+
</svg>`}.CUSTOM_CROSSHAIR)}`;const w={ANY:"any",NONE:"none"},_={KEY_DOWN:"keydown"},y={CLICK:"click"},$=`<button part="button">
|
|
10
10
|
<slot></slot>
|
|
11
11
|
</button>
|
|
12
|
-
`,
|
|
12
|
+
`,H=":where(button,input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{cursor:pointer;touch-action:manipulation;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:var(--font-family-base);letter-spacing:var(--letter-spacing-normal);line-height:var(--line-height-normal);background:var(--color-primary);color:var(--color-text-primary);border:var(--border-width-0) solid transparent;border-radius:var(--border-radius-lg);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:var(--gap-sm);box-shadow:var(--shadow-md);transition:all var(--transition-base);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}:where(button,input[type=button],input[type=submit],input[type=reset])>:where(svg,[data-icon]){block-size:var(--font-size-md);inline-size:var(--font-size-md);stroke:var(--icon-color, currentColor);flex-shrink:0;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--transition-fast)}:where(button,input[type=button],input[type=submit],input[type=reset])>.material-symbols-outlined{font-size:var(--font-size-xl);font-family:Material Symbols Outlined;font-weight:400;font-style:normal;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;fill:currentColor;stroke:none}:where(button,input):where(:not(:active)):focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:active):hover){background:var(--color-primary-light);box-shadow:var(--shadow-lg);transform:translateY(-1px)}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:active){background:var(--color-primary-dark);box-shadow:var(--shadow-md);transform:translateY(0)}:where(button,input[type=button],input[type=submit],input[type=reset])[disabled]{opacity:.6;box-shadow:var(--shadow-none);opacity:.3;cursor:not-allowed;box-shadow:var(--_shadow-1)}:where([type=reset]):focus-visible{outline-color:currentColor}:where(input[type=file]){inline-size:100%;max-inline-size:max-content;background-color:var(--color-bg-secondary)}:where(input[type=button]),:where(input[type=file])::file-selector-button{appearance:none}:where(input[type=file])::file-selector-button{margin-inline-end:var(--button-padding-inline-md)}",x=new CSSStyleSheet;x.replaceSync(H);class i extends HTMLElement{static autofocusAttribute="autofocus";static commandAttribute="command";static commandforAttribute="commandfor";static disabledAttribute="disabled";static nameAttribute="name";static titleAttribute="title";static typeAttribute="type";static valueAttribute="value";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(x)}static get observedAttributes(){return[i.autofocusAttribute,i.commandAttribute,i.commandforAttribute,i.disabledAttribute,i.nameAttribute,i.titleAttribute,i.typeAttribute,i.valueAttribute]}get buttonElement(){return this.shadowRoot?.querySelector("button")}get autofocus(){return this.hasAttribute(i.autofocusAttribute)}set autofocus(t){t?this.setAttribute(i.autofocusAttribute,r):this.removeAttribute(i.autofocusAttribute)}get command(){return this.getAttribute(i.commandAttribute)??r}set command(t){this.setAttribute(i.commandAttribute,t)}get commandfor(){return this.getAttribute(i.commandforAttribute)??r}set commandfor(t){t!==r?this.setAttribute(i.commandforAttribute,t):this.removeAttribute(i.commandforAttribute)}get disabled(){return this.hasAttribute(i.disabledAttribute)}set disabled(t){t?this.setAttribute(i.disabledAttribute,r):this.removeAttribute(i.disabledAttribute)}get name(){return this.getAttribute(i.nameAttribute)??r}set name(t){t!==r?this.setAttribute(i.nameAttribute,t):this.removeAttribute(i.nameAttribute)}get headline(){return this.getAttribute(i.titleAttribute)??r}set headline(t){t!==r?this.setAttribute(i.titleAttribute,t):this.removeAttribute(i.titleAttribute)}get type(){return this.getAttribute(i.typeAttribute)??"button"}set type(t){t!==r?this.setAttribute(i.typeAttribute,t):this.removeAttribute(i.typeAttribute)}get value(){return this.getAttribute(i.valueAttribute)??"button"}set value(t){t!==r?this.setAttribute(i.valueAttribute,t):this.removeAttribute(i.valueAttribute)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,o){o!==e&&this._syncAttribute(t)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=$,this._syncAttributes())}_addEventListeners(){this.addEventListener(y.CLICK,this._handleClick)}_removeEventListeners(){this.removeEventListener(y.CLICK,this._handleClick)}_handleClick=()=>{if(this.command===r||this.commandfor===r)return;const t=document.getElementById(this.commandfor);if(t===null)return;const e=t;switch(this.command){case c.SHOW_MODAL:e.showModal?.();break;case c.CLOSE:e.close?.();break}};_syncAttribute(t){const e=this.buttonElement;this.hasAttribute(t)?e.setAttribute(t,this.getAttribute(t)??r):e.removeAttribute(t)}_syncAttributes(){i.observedAttributes.forEach(t=>{this._syncAttribute(t)})}}const O="undo-button",W=`<button title="Undo" part="button">
|
|
13
13
|
<span class="material-symbols-outlined">undo</span>
|
|
14
14
|
<span>Undo</span>
|
|
15
15
|
</button>
|
|
16
|
-
`,
|
|
16
|
+
`,P=":host{display:inline-block}button[part=button]{background:var(--color-warning);color:#fff;font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{background:linear-gradient(135deg,var(--color-warning),var(--color-warning));opacity:.9;box-shadow:var(--shadow-lg);transform:translateY(-2px)}button[part=button]:active{transform:translateY(0);box-shadow:var(--shadow-sm)}button[part=button]:focus-visible{outline:2px solid var(--color-warning);outline-offset:2px}button[part=button]:disabled{opacity:.5;cursor:not-allowed;transform:none}",S=new CSSStyleSheet;S.replaceSync(P);class V extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(S),this.command=c.CLOSE,this.title="Undo"}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=W,this._syncAttributes())}_setCommandForAttribute(){let t=this.getRootNode();"host"in t&&t.host!==null&&t.host!==void 0&&(t=t.host);const e=t instanceof Element?t.closest("base-dialog")??t.closest("confirmation-dialog"):null;e!==null&&(this.commandfor=e.id)}}const z=`<button title="Confirm" part="button">
|
|
17
17
|
<span class="material-symbols-outlined">check</span>
|
|
18
18
|
<span>Confirm</span>
|
|
19
19
|
</button>
|
|
20
|
-
`,
|
|
20
|
+
`,B=":host{display:inline-block}button[part=button]{background:var(--color-success);color:#fff;font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{background:linear-gradient(135deg,var(--color-success),var(--color-success));opacity:.9;box-shadow:var(--shadow-lg);transform:translateY(-2px)}button[part=button]:active{transform:translateY(0);box-shadow:var(--shadow-sm)}button[part=button]:focus-visible{outline:2px solid var(--color-success);outline-offset:2px}button[part=button]:disabled{opacity:.5;cursor:not-allowed;transform:none}",k=new CSSStyleSheet;k.replaceSync(B);class Y extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(k),this.command=c.CLOSE,this.title="Confirm"}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=z,this._syncAttributes())}_setCommandForAttribute(){let t=this.getRootNode();"host"in t&&t.host!==null&&t.host!==void 0&&(t=t.host);const e=t instanceof Element?t.closest("base-dialog")??t.closest("confirmation-dialog"):null;e!==null&&(this.commandfor=e.id)}}const D="confirm-button",F=`<button part="button">
|
|
21
|
+
<span class="material-symbols-outlined">chevron_left</span>
|
|
22
|
+
</button>
|
|
23
|
+
`,K="",L=new CSSStyleSheet;L.replaceSync(K);class j extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(L),this.command=c.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,o){super.attributeChangedCallback(t,e,o),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","Previous")}}const q="previous-button",U=`<button part="button">
|
|
24
|
+
<span class="material-symbols-outlined">chevron_right</span>
|
|
25
|
+
</button>
|
|
26
|
+
`,X="",E=new CSSStyleSheet;E.replaceSync(X);class G extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(E),this.command=c.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,o){super.attributeChangedCallback(t,e,o),t==="disabled"&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=U,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">
|
|
21
27
|
<slot></slot>
|
|
22
28
|
</dialog>
|
|
23
|
-
`,
|
|
29
|
+
`,tt="dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-0) solid transparent;border-radius:var(--border-radius-2xl);padding:var(--spacing-8);max-width:90vw;max-height:90vh;font-size:var(--font-size-md);font-family:var(--font-family-base);line-height:var(--line-height-normal);box-shadow:var(--shadow-2xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:dialogSlideIn var(--transition-base) ease-out}dialog::backdrop{background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:backdropFadeIn var(--transition-base) ease-out}@keyframes dialogSlideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}",C=new CSSStyleSheet;C.replaceSync(tt);class d extends HTMLElement{static closedByAttribute="closedby";_closedBy=w.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)??w.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,o){const u=this.dialogElement;u!=null&&o!==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)??r):e.removeAttribute(t))}_syncAttributes(){d.observedAttributes.forEach(t=>{this._syncAttribute(t)})}show(){this.dialogElement.show()}showModal(){this.dialogElement.showModal()}close(t){this.dialogElement.close(t)}}const et="confirmation-dialog",it=`<dialog part="dialog">
|
|
24
30
|
<header part="header">
|
|
25
31
|
<h2></h2>
|
|
26
32
|
</header>
|
|
@@ -32,7 +38,7 @@
|
|
|
32
38
|
<undo-button></undo-button>
|
|
33
39
|
</footer>
|
|
34
40
|
</dialog>
|
|
35
|
-
`,
|
|
41
|
+
`,st="section.header{display:flex;flex-direction:column;gap:var(--gap-md);padding-bottom:var(--spacing-4);border-bottom:var(--border-width-1) solid var(--color-border-tertiary)}section.footer{display:flex;gap:var(--gap-md);justify-content:flex-end;padding-top:var(--spacing-6);border-top:var(--border-width-1) solid var(--color-border-tertiary)}h2{margin:0;font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);letter-spacing:var(--letter-spacing-normal);line-height:var(--line-height-tight)}p{margin:0;font-size:var(--font-size-md);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);letter-spacing:var(--letter-spacing-normal)}",rt=`<dialog part="dialog">
|
|
36
42
|
<header part="header">
|
|
37
43
|
<slot name="header"></slot>
|
|
38
44
|
</header>
|
|
@@ -43,4 +49,13 @@
|
|
|
43
49
|
<slot name="footer"></slot>
|
|
44
50
|
</footer>
|
|
45
51
|
</dialog>
|
|
46
|
-
`,
|
|
52
|
+
`,ot="dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-0) solid transparent;border-radius:var(--border-radius-2xl);padding:0;max-width:90vw;max-height:90vh;font-size:var(--font-size-md);font-family:var(--font-family-base);line-height:var(--line-height-normal);box-shadow:var(--shadow-2xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:dialogSlideIn var(--transition-base) ease-out}dialog[part=dialog] header[part=header],dialog[part=dialog] div[part=body],dialog[part=dialog] footer[part=footer]{padding:var(--spacing-8)}dialog[part=dialog] header[part=header]{border-bottom:var(--border-width-1) solid var(--color-border-tertiary);padding-bottom:var(--spacing-6)}dialog[part=dialog] footer[part=footer]{border-top:var(--border-width-1) solid var(--color-border-tertiary);padding-top:var(--spacing-6);display:flex;gap:var(--gap-lg);justify-content:flex-end}dialog::backdrop{background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:backdropFadeIn var(--transition-base) ease-out}@keyframes dialogSlideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}",I=new CSSStyleSheet;I.replaceSync(ot);class A extends d{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(I)}static get observedAttributes(){return d.observedAttributes}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=rt,this._syncAttributes())}}const R=new CSSStyleSheet;R.replaceSync(st);class l extends A{_text=r;_headline=r;static textAttribute="text";static headlineAttribute="headline";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(R)}static get observedAttributes(){return[...A.observedAttributes,l.textAttribute,l.headlineAttribute]}get headline(){return this._headline}set headline(t){this._headline=t,this.setAttribute(l.headlineAttribute,t)}get text(){return this._text}set text(t){this._text=t,this.setAttribute(l.textAttribute,t)}connectedCallback(){this._render(),this._addEventListeners(),this.closedBy=w.NONE}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=it,this._syncAttributes())}_syncAttribute(t){if(l.observedAttributes.includes(t))switch(t){case l.headlineAttribute:{this._headline=this.getAttribute(t)??r;const e=this.shadowRoot?.querySelector("h2");e!=null&&(e.textContent=this._headline);break}case l.textAttribute:{this._text=this.getAttribute(t)??r;const e=this.shadowRoot?.querySelector("p");e!=null&&(e.textContent=this._text);break}default:super._syncAttribute(t)}else super._syncAttribute(t)}_syncAttributes(){super._syncAttributes(),l.observedAttributes.forEach(t=>{this._syncAttribute(t)})}}const nt="header-body-footer-dialog",at=`<div class="bar-menu-container">
|
|
53
|
+
<previous-button class="nav-prev" part="nav-prev-button"></previous-button>
|
|
54
|
+
|
|
55
|
+
<div class="buttons-wrapper" part="buttons-wrapper">
|
|
56
|
+
<slot></slot>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
<next-button class="nav-next" part="nav-next-button"></next-button>
|
|
60
|
+
</div>
|
|
61
|
+
`,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-secondary);border-radius:var(--border-radius-full);border:var(--border-width-2) solid rgb(189,0,132);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!==r){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,o){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(y.CLICK,()=>{this._scrollPrevious()})),this._navNextButton!==null&&(this._navNextButton.setAttribute("aria-label","Next"),this._navNextButton.addEventListener(y.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(_.KEY_DOWN,this._keyDownListener)}_removeKeyboardListener(){this._keyDownListener!==null&&this.removeEventListener(_.KEY_DOWN,this._keyDownListener)}_getSlottedButtons(){if(this._slotElement===null)return[];const t=this._slotElement.assignedElements();return Array.from(t).filter(e=>e instanceof HTMLElement&&(e.tagName==="BUTTON"||e.getAttribute("role")==="button"))}_updateButtonVisibility(t){const e=this._getSlottedButtons(),o=e.length,u=this.visibleButtons,m=this._currentIndex,f=Math.min(m+u,o);e.forEach((n,a)=>{const g=a>=m&&a<f,h=n;g||(n.classList.remove("visible-button"),n.classList.remove("animating"),h.style.display="none")}),t!==void 0?(e[0]?.offsetHeight,e.forEach((n,a)=>{if(a>=m&&a<f){const h=n;h.style.display="inline-flex",n.classList.add("animating");const ut=a%this.visibleButtons*50;h.style.transitionDelay=`${ut}ms`}}),e[0]?.offsetHeight,e.forEach((n,a)=>{a>=m&&a<f&&n.classList.add("visible-button")}),setTimeout(()=>{e.forEach(n=>{n.classList.remove("animating"),n.style.transitionDelay=r})},400)):e.forEach((n,a)=>{const g=a>=m&&a<f,h=n;g&&(h.style.display="inline-flex",n.classList.add("visible-button"))}),this._updateNavigationButtons(o,u)}_updateNavigationButtons(t,e){const o=t>e,u=this._currentIndex+e<t;this._navPrevButton!==null&&(o?(this._navPrevButton.classList.add("visible"),this._navPrevButton.disabled=this._currentIndex===0):this._navPrevButton.classList.remove("visible")),this._navNextButton!==null&&(o?(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,o=this._currentIndex+e;o<t&&(this._currentIndex=o,this._updateButtonVisibility("next"))}scrollToButton(t){const e=this._getSlottedButtons().length,o=this.visibleButtons;t>=0&&t<e&&(this._currentIndex=Math.max(0,Math.min(t,e-o)),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=Y,s.ConfirmationDialogComponent=l,s.HeaderBodyFooterDialogComponent=A,s.NextButtonComponent=G,s.PreviousButtonComponent=j,s.UndoButtonComponent=V,s.WebComponentsRegistry=T,s.barMenuWebComponentSelector=dt,s.baseButtonWebComponentSelector=N,s.baseDialogWebComponentSelector=Q,s.confirmButtonWebComponentSelector=D,s.confirmationDialogWebComponentSelector=et,s.headerBodyFooterDialogWebComponentSelector=nt,s.nextButtonWebComponentSelector=J,s.previousButtonWebComponentSelector=q,s.undoButtonWebComponentSelector=O,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));
|
package/dist/types/main.d.ts
CHANGED
|
@@ -4,6 +4,9 @@ export { WebComponentsRegistry } from './web-components/registry.ts';
|
|
|
4
4
|
export * from './web-components/buttons/base-button/main.ts';
|
|
5
5
|
export * from './web-components/buttons/undo-button/main.ts';
|
|
6
6
|
export * from './web-components/buttons/confirm-button/main.ts';
|
|
7
|
+
export * from './web-components/buttons/previous-button/main.ts';
|
|
8
|
+
export * from './web-components/buttons/next-button/main.ts';
|
|
7
9
|
export * from './web-components/dialogs/base-dialog/main.ts';
|
|
8
10
|
export * from './web-components/dialogs/confirmation-dialog/main.ts';
|
|
9
11
|
export * from './web-components/dialogs/header-body-footer-dialog/main.ts';
|
|
12
|
+
export * from './web-components/menus/bar-menu/main.ts';
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { BaseButtonComponent } from '../base-button/component';
|
|
2
|
+
/**
|
|
3
|
+
* NextButtonComponent extends BaseButtonComponent with a next/forward navigation button.
|
|
4
|
+
* Displays a right chevron icon with "Next" tooltip (hidden when disabled).
|
|
5
|
+
* Used for navigating to next elements in a list or carousel.
|
|
6
|
+
*/
|
|
7
|
+
export declare class NextButtonComponent extends BaseButtonComponent {
|
|
8
|
+
/**
|
|
9
|
+
* @constructor
|
|
10
|
+
* @ignore
|
|
11
|
+
*/
|
|
12
|
+
constructor();
|
|
13
|
+
/**
|
|
14
|
+
* Specifies which attributes should be observed for changes.
|
|
15
|
+
*/
|
|
16
|
+
static get observedAttributes(): string[];
|
|
17
|
+
/**
|
|
18
|
+
* Lifecycle hook invoked when the component is inserted into the DOM.
|
|
19
|
+
*/
|
|
20
|
+
connectedCallback(): void;
|
|
21
|
+
/**
|
|
22
|
+
* Lifecycle hook invoked whenever an observed attribute changes.
|
|
23
|
+
* Updates the title visibility based on disabled state.
|
|
24
|
+
*/
|
|
25
|
+
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
26
|
+
/**
|
|
27
|
+
* Renders the component's HTML structure.
|
|
28
|
+
*/
|
|
29
|
+
protected _render(): void;
|
|
30
|
+
/**
|
|
31
|
+
* Updates the title attribute based on disabled state.
|
|
32
|
+
* Shows title only when button is enabled.
|
|
33
|
+
*/
|
|
34
|
+
private _updateTitle;
|
|
35
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { BaseButtonComponent } from '../base-button/component';
|
|
2
|
+
/**
|
|
3
|
+
* PreviousButtonComponent extends BaseButtonComponent with a previous/back navigation button.
|
|
4
|
+
* Displays a left chevron icon with "Previous" tooltip (hidden when disabled).
|
|
5
|
+
* Used for navigating to previous elements in a list or carousel.
|
|
6
|
+
*/
|
|
7
|
+
export declare class PreviousButtonComponent extends BaseButtonComponent {
|
|
8
|
+
/**
|
|
9
|
+
* @constructor
|
|
10
|
+
* @ignore
|
|
11
|
+
*/
|
|
12
|
+
constructor();
|
|
13
|
+
/**
|
|
14
|
+
* Specifies which attributes should be observed for changes.
|
|
15
|
+
*/
|
|
16
|
+
static get observedAttributes(): string[];
|
|
17
|
+
/**
|
|
18
|
+
* Lifecycle hook invoked when the component is inserted into the DOM.
|
|
19
|
+
*/
|
|
20
|
+
connectedCallback(): void;
|
|
21
|
+
/**
|
|
22
|
+
* Lifecycle hook invoked whenever an observed attribute changes.
|
|
23
|
+
* Updates the title visibility based on disabled state.
|
|
24
|
+
*/
|
|
25
|
+
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
26
|
+
/**
|
|
27
|
+
* Renders the component's HTML structure.
|
|
28
|
+
*/
|
|
29
|
+
protected _render(): void;
|
|
30
|
+
/**
|
|
31
|
+
* Updates the title attribute based on disabled state.
|
|
32
|
+
* Shows title only when button is enabled.
|
|
33
|
+
*/
|
|
34
|
+
private _updateTitle;
|
|
35
|
+
}
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A responsive bar menu web component with paginated button navigation.
|
|
3
|
+
*
|
|
4
|
+
* Renders a row of slotted buttons with optional prev/next arrow navigation,
|
|
5
|
+
* appearing automatically when the total button count exceeds `visible-count`.
|
|
6
|
+
*
|
|
7
|
+
* @attr {number} visible-count - Number of buttons visible at a time (3–5, default 3).
|
|
8
|
+
*
|
|
9
|
+
* @slot - Accepts `<button>` elements or elements with `role="button"`.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* <bar-menu visible-count="4">
|
|
13
|
+
* <button>Play</button>
|
|
14
|
+
* <button>Settings</button>
|
|
15
|
+
* <button>Leaderboard</button>
|
|
16
|
+
* <button>Shop</button>
|
|
17
|
+
* <button>Quit</button>
|
|
18
|
+
* </bar-menu>
|
|
19
|
+
*/
|
|
20
|
+
export declare class BarMenuComponent extends HTMLElement {
|
|
21
|
+
private static readonly _visibleCountAttribute;
|
|
22
|
+
private _currentIndex;
|
|
23
|
+
private _visibleCount;
|
|
24
|
+
private readonly _MIN_VISIBLE;
|
|
25
|
+
private readonly _MAX_VISIBLE;
|
|
26
|
+
private _slotElement;
|
|
27
|
+
private _navPrevButton;
|
|
28
|
+
private _navNextButton;
|
|
29
|
+
private _buttonsWrapper;
|
|
30
|
+
private _slotChangeListener;
|
|
31
|
+
private _keyDownListener;
|
|
32
|
+
/**
|
|
33
|
+
* @constructor
|
|
34
|
+
*/
|
|
35
|
+
constructor();
|
|
36
|
+
/**
|
|
37
|
+
* Specifies which attributes should be observed for changes.
|
|
38
|
+
*/
|
|
39
|
+
static get observedAttributes(): string[];
|
|
40
|
+
get visibleButtons(): number;
|
|
41
|
+
set visibleButtons(value: number);
|
|
42
|
+
/**
|
|
43
|
+
* Lifecycle hook: component inserted into DOM
|
|
44
|
+
*/
|
|
45
|
+
connectedCallback(): void;
|
|
46
|
+
/**
|
|
47
|
+
* Lifecycle hook: component removed from DOM
|
|
48
|
+
*/
|
|
49
|
+
disconnectedCallback(): void;
|
|
50
|
+
/**
|
|
51
|
+
* Lifecycle hook: observed attribute changed
|
|
52
|
+
*/
|
|
53
|
+
attributeChangedCallback(name: string, _oldValue: string | null, _newValue: string | null): void;
|
|
54
|
+
/**
|
|
55
|
+
* Render the component's Shadow DOM structure
|
|
56
|
+
*/
|
|
57
|
+
private _render;
|
|
58
|
+
/**
|
|
59
|
+
* Cache Shadow DOM elements for performance
|
|
60
|
+
*/
|
|
61
|
+
private _cacheElements;
|
|
62
|
+
/**
|
|
63
|
+
* Setup listener for slot content changes
|
|
64
|
+
*/
|
|
65
|
+
private _setupSlotListener;
|
|
66
|
+
/**
|
|
67
|
+
* Remove slot listener
|
|
68
|
+
*/
|
|
69
|
+
private _removeSlotListener;
|
|
70
|
+
/**
|
|
71
|
+
* Setup keyboard navigation listener
|
|
72
|
+
*/
|
|
73
|
+
private _setupKeyboardListener;
|
|
74
|
+
/**
|
|
75
|
+
* Remove keyboard listener
|
|
76
|
+
*/
|
|
77
|
+
private _removeKeyboardListener;
|
|
78
|
+
/**
|
|
79
|
+
* Get all slotted button elements
|
|
80
|
+
*/
|
|
81
|
+
private _getSlottedButtons;
|
|
82
|
+
/**
|
|
83
|
+
* Update button visibility by showing/hiding rows with fade
|
|
84
|
+
*/
|
|
85
|
+
private _updateButtonVisibility;
|
|
86
|
+
/**
|
|
87
|
+
* Update navigation buttons visibility and disabled state
|
|
88
|
+
*/
|
|
89
|
+
private _updateNavigationButtons;
|
|
90
|
+
/**
|
|
91
|
+
* Navigate to previous page (scrolls by visibleCount buttons)
|
|
92
|
+
*/
|
|
93
|
+
private _scrollPrevious;
|
|
94
|
+
/**
|
|
95
|
+
* Navigate to next page (scrolls by visibleCount buttons)
|
|
96
|
+
*/
|
|
97
|
+
private _scrollNext;
|
|
98
|
+
/**
|
|
99
|
+
* Public API: scroll to specific button by index
|
|
100
|
+
*/
|
|
101
|
+
scrollToButton(index: number): void;
|
|
102
|
+
/**
|
|
103
|
+
* Public API: get currently visible buttons
|
|
104
|
+
*/
|
|
105
|
+
getVisibleButtons(): Element[];
|
|
106
|
+
/**
|
|
107
|
+
* Public API: get all buttons
|
|
108
|
+
*/
|
|
109
|
+
getAllButtons(): Element[];
|
|
110
|
+
/**
|
|
111
|
+
* Public API: get current scroll index
|
|
112
|
+
*/
|
|
113
|
+
getCurrentIndex(): number;
|
|
114
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@albi_scando/as-design-system-lib",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"description": "A library of reusable, strongly typed Web Components built with TypeScript, designed for creating consistent and maintainable user interfaces.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|