@albi_scando/as-design-system-lib 1.8.1 → 1.9.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 +282 -232
- package/dist/as-design-system-lib.umd.js +26 -22
- package/dist/styles/index.css +379 -197
- package/dist/styles/index.css.map +1 -1
- package/dist/types/main.d.ts +1 -0
- package/dist/types/web-components/buttons/close-button/component.d.ts +32 -0
- package/dist/types/web-components/buttons/close-button/main.d.ts +2 -0
- package/dist/types/web-components/buttons/close-button/selector.d.ts +4 -0
- package/package.json +5 -5
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(a,
|
|
1
|
+
(function(a,T){typeof exports=="object"&&typeof module<"u"?T(exports):typeof define=="function"&&define.amd?define(["exports"],T):(a=typeof globalThis<"u"?globalThis:a||self,T(a["as-design-system-lib"]={}))})(this,(function(a){"use strict";const T="as-design-system-lib";class ht{constructor(t=new Map){this.registerAllComponents(t)}registerAllComponents(t){Array.from(t.entries()).forEach(([e,r])=>{this.registerComponent(e,r)})}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 H={CONFIRMATION_DIALOG_CONFIRM:"confirmation-dialog-confirm",CONFIRMATION_DIALOG_UNDO:"confirmation-dialog-undo"},S={COSMO:"Cosmo theme with a futuristic and space-inspired design.",DARK:"Dark theme with a sleek and modern look.",DARK_PURPLE:"Dark Purple theme with a luxurious and elegant feel.",FERRARI:"Ferrari theme inspired by the iconic red color of Ferrari cars.",FIRE:"Fire theme with vibrant and energetic colors.",FOREST:"Forest theme with natural and earthy tones.",LIGHT:"Light theme with a clean and minimalistic design.",LIGHT_BLUE:"Light Blue theme with a refreshing and calm appearance.",WATER:"Water theme with a serene and tranquil feel."},E={COSMO:"🚀",DARK:"🌙",DARK_PURPLE:"🟣",FERRARI:"🏎️",FIRE:"🔥",FOREST:"🌿",LIGHT:"☀️",LIGHT_BLUE:"🫧",WATER:"💧"},k={COSMO:"Cosmo",DARK:"Dark",DARK_PURPLE:"Dark Purple",FERRARI:"Ferrari",FIRE:"Fire",FOREST:"Forest",LIGHT:"Light",LIGHT_BLUE:"Light Blue",WATER:"Water"},L={COSMO:"cosmo",DARK:"dark",DARK_PURPLE:"dark-purple",FERRARI:"ferrari",FIRE:"fire",FOREST:"forest",LIGHT:"light",LIGHT_BLUE:"light-blue",WATER:"water"},h={COSMO:"cosmo",DARK:"dark",DARK_PURPLE:"dark-purple",FERRARI:"ferrari",FIRE:"fire",FOREST:"forest",LIGHT:"light",LIGHT_BLUE:"light-blue",WATER:"water"},bt=new Map([[h.COSMO,{description:S.COSMO,icon:E.COSMO,id:h.COSMO,name:k.COSMO,value:L.COSMO}],[h.DARK,{description:S.DARK,icon:E.DARK,id:h.DARK,name:k.DARK,value:L.DARK}],[h.DARK_PURPLE,{description:S.DARK_PURPLE,icon:E.DARK_PURPLE,id:h.DARK_PURPLE,name:k.DARK_PURPLE,value:L.DARK_PURPLE}],[h.FERRARI,{description:S.FERRARI,icon:E.FERRARI,id:h.FERRARI,name:k.FERRARI,value:L.FERRARI}],[h.FIRE,{description:S.FIRE,icon:E.FIRE,id:h.FIRE,name:k.FIRE,value:L.FIRE}],[h.FOREST,{description:S.FOREST,icon:E.FOREST,id:h.FOREST,name:k.FOREST,value:L.FOREST}],[h.LIGHT,{description:S.LIGHT,icon:E.LIGHT,id:h.LIGHT,name:k.LIGHT,value:L.LIGHT}],[h.LIGHT_BLUE,{description:S.LIGHT_BLUE,icon:E.LIGHT_BLUE,id:h.LIGHT_BLUE,name:k.LIGHT_BLUE,value:L.LIGHT_BLUE}],[h.WATER,{description:S.WATER,icon:E.WATER,id:h.WATER,name:k.WATER,value:L.WATER}]]),vt=$=>{K();const t=bt.get($)?.value;t!==void 0&&document.body.classList.add(t)},K=()=>{document.body.classList.remove(...Object.values(h))},gt="base-button",d="",O={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,27 +6,31 @@
|
|
|
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 q={ANY:"any",NONE:"none"},
|
|
9
|
+
</svg>`}.CUSTOM_CROSSHAIR)}`;const q={ANY:"any",NONE:"none"},C={KEY_DOWN:"keydown"},z={CLICK:"click"},pt=`<button part="button">
|
|
10
10
|
<slot></slot>
|
|
11
11
|
</button>
|
|
12
|
-
`,
|
|
12
|
+
`,ft="*{box-sizing:border-box}:where(button,input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);font-family:var(--font-family-base);letter-spacing:var(--letter-spacing-wide);line-height:var(--line-height-normal);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);background:var(--color-bg-secondary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-sm);transition:background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast),filter 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;line-height:1}:where(button,input[type=button],input[type=submit],input[type=reset])[disabled]{opacity:.35;cursor:not-allowed;box-shadow:none}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):hover){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary);box-shadow:var(--shadow-md)}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):active){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary);box-shadow:var(--shadow-sm)}:where(button,input[type=button],input[type=submit],input[type=reset]):focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}:where(input[type=file]){inline-size:100%;max-inline-size:max-content;background-color:var(--color-bg-secondary)}",G=new CSSStyleSheet;G.replaceSync(ft);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(G)}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,d):this.removeAttribute(i.autofocusAttribute)}get command(){return this.getAttribute(i.commandAttribute)??d}set command(t){this.setAttribute(i.commandAttribute,t)}get commandfor(){return this.getAttribute(i.commandforAttribute)??d}set commandfor(t){t!==d?this.setAttribute(i.commandforAttribute,t):this.removeAttribute(i.commandforAttribute)}get disabled(){return this.hasAttribute(i.disabledAttribute)}set disabled(t){t?this.setAttribute(i.disabledAttribute,d):this.removeAttribute(i.disabledAttribute)}get name(){return this.getAttribute(i.nameAttribute)??d}set name(t){t!==d?this.setAttribute(i.nameAttribute,t):this.removeAttribute(i.nameAttribute)}get headline(){return this.getAttribute(i.titleAttribute)??d}set headline(t){t!==d?this.setAttribute(i.titleAttribute,t):this.removeAttribute(i.titleAttribute)}get type(){return this.getAttribute(i.typeAttribute)??"button"}set type(t){t!==d?this.setAttribute(i.typeAttribute,t):this.removeAttribute(i.typeAttribute)}get value(){return this.getAttribute(i.valueAttribute)??"button"}set value(t){t!==d?this.setAttribute(i.valueAttribute,t):this.removeAttribute(i.valueAttribute)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,r){r!==e&&this._syncAttribute(t)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=pt,this._syncAttributes())}_addEventListeners(){this.buttonElement.addEventListener(z.CLICK,this._handleClick)}_removeEventListeners(){this.buttonElement.addEventListener(z.CLICK,this._handleClick)}_handleClick=()=>{if(this.command===d||this.commandfor===d)return;let t=document.getElementById(this.commandfor);if(t??=this._findElementInShadowDOM(this.commandfor),t===null)return;const e=t;switch(this.command){case O.SHOW_MODAL:e.showModal?.();break;case O.CLOSE:e.close?.();break}};_findElementInShadowDOM(t){const r=`#${CSS.escape(t)}`;let s=this.querySelector(r);if(s!==null||(s=this._searchInShadowRootsOfChildren(this,r),s!==null))return s;let n=this.parentElement;for(;n!==null;){if(s=n.querySelector(r),s!==null||(s=this._searchInShadowRootsOfChildren(n,r),s!==null))return s;const g=n.parentElement;if(g!==null)n=g;else{const u=n.getRootNode();if(u instanceof ShadowRoot&&u.host!==null)n=u.host;else break}}return null}_searchInShadowRootsOfChildren(t,e){const r=t.children;for(const s of r){if(s.shadowRoot!==null){const g=s.shadowRoot.querySelector(e);if(g!==null)return g;const u=this._searchInShadowRootsOfChildren(s.shadowRoot,e);if(u!==null)return u}const n=this._searchInShadowRootsOfChildren(s,e);if(n!==null)return n}return null}_syncAttribute(t){const e=this.buttonElement;e!==null&&(this.hasAttribute(t)?e.setAttribute(t,this.getAttribute(t)??d):e.removeAttribute(t))}_syncAttributes(){i.observedAttributes.forEach(t=>{this._syncAttribute(t)})}}const mt=Object.freeze(Object.defineProperty({__proto__:null,BaseButtonComponent:i,selector:gt},Symbol.toStringTag,{value:"Module"})),yt=`<button title="Undo" part="button">
|
|
13
13
|
<span class="material-symbols-outlined">undo</span>
|
|
14
14
|
<span>Undo</span>
|
|
15
15
|
</button>
|
|
16
|
-
`,
|
|
16
|
+
`,At="*{box-sizing:border-box}button[part=button]{background:var(--color-warning);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{filter:brightness(1.2)}",W=new CSSStyleSheet;W.replaceSync(At);class _t extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(W),this.command=O.CLOSE,this.title="Undo"}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=yt,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 P="undo-button",wt=Object.freeze(Object.defineProperty({__proto__:null,UndoButtonComponent:_t,selector:P},Symbol.toStringTag,{value:"Module"})),St=`<div class="tooltip">Close</div>
|
|
17
|
+
<button part="button" title="Close">
|
|
18
|
+
<span class="material-symbols-outlined">close</span>
|
|
19
|
+
</button>
|
|
20
|
+
`,Et="*{box-sizing:border-box}:host{position:relative;display:inline-flex}.tooltip{position:absolute;top:auto;bottom:calc(100% + .5rem);left:50%;right:auto;transform:translate(-50%);width:max-content;height:auto;padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-bg-tertiary, #1e1e2e);color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-xs);border-radius:var(--border-radius-md);box-shadow:var(--shadow-lg);white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity var(--transition-fast),visibility var(--transition-fast);z-index:10000;margin:0}button[part=button]{background:var(--color-error);border:none;border-radius:var(--border-radius-md);padding:var(--spacing-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;aspect-ratio:1;transition:all var(--transition-base);box-shadow:var(--shadow-md);position:relative}button[part=button]:hover{filter:brightness(1.2)}:host(:hover) .tooltip{opacity:1;visibility:visible}",Y=new CSSStyleSheet;Y.replaceSync(Et);class kt extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(Y),this.command=O.CLOSE,this.title="Close"}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=St,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 Lt=Object.freeze(Object.defineProperty({__proto__:null,CloseButtonComponent:kt,selector:"close-button"},Symbol.toStringTag,{value:"Module"})),xt=`<button title="Confirm" part="button">
|
|
17
21
|
<span class="material-symbols-outlined">check</span>
|
|
18
22
|
<span>Confirm</span>
|
|
19
23
|
</button>
|
|
20
|
-
`,
|
|
24
|
+
`,Rt="*{box-sizing:border-box}button[part=button]{background:var(--color-success);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{filter:brightness(1.2)}",V=new CSSStyleSheet;V.replaceSync(Rt);class zt extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(V),this.command=O.CLOSE,this.title="Confirm"}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=xt,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",Mt=Object.freeze(Object.defineProperty({__proto__:null,ConfirmButtonComponent:zt,selector:D},Symbol.toStringTag,{value:"Module"})),Ot=`<button part="button">
|
|
21
25
|
<span class="material-symbols-outlined">chevron_left</span>
|
|
22
26
|
</button>
|
|
23
|
-
|
|
27
|
+
`,$t="*{box-sizing:border-box}button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",B=new CSSStyleSheet;B.replaceSync($t);class N extends i{static _disabledAttribute="disabled";static _titleAttribute="title";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(B),this.command=O.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,r){super.attributeChangedCallback(t,e,r),t===N._disabledAttribute&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Ot,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");t!==null&&(this.disabled?t.removeAttribute(N._titleAttribute):t.setAttribute(N._titleAttribute,"Previous"))}}const It=Object.freeze(Object.defineProperty({__proto__:null,PreviousButtonComponent:N,selector:"previous-button"},Symbol.toStringTag,{value:"Module"})),Tt=`<button part="button">
|
|
24
28
|
<span class="material-symbols-outlined">chevron_right</span>
|
|
25
29
|
</button>
|
|
26
|
-
`,
|
|
30
|
+
`,Ht="*{box-sizing:border-box}button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",X=new CSSStyleSheet;X.replaceSync(Ht);class j extends i{static _disabledAttribute="disabled";static _titleAttribute="title";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(X),this.command=O.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,r){super.attributeChangedCallback(t,e,r),t===j._disabledAttribute&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Tt,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");t!==null&&(this.disabled?t.removeAttribute(j._titleAttribute):t.setAttribute(j._titleAttribute,"Next"))}}const Nt=Object.freeze(Object.defineProperty({__proto__:null,NextButtonComponent:j,selector:"next-button"},Symbol.toStringTag,{value:"Module"})),jt=`<dialog part="dialog">
|
|
27
31
|
<slot></slot>
|
|
28
32
|
</dialog>
|
|
29
|
-
`,
|
|
33
|
+
`,Ft="*{box-sizing:border-box}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);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}}",J=new CSSStyleSheet;J.replaceSync(Ft);class M extends HTMLElement{static closedByAttribute="closedby";_closedBy=q.ANY;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(J)}static get observedAttributes(){return[M.closedByAttribute]}get dialogElement(){return this.shadowRoot?.querySelector("dialog")}get command(){return this.getAttribute(M.closedByAttribute)??q.ANY}get closedBy(){return this._closedBy}set closedBy(t){this._closedBy=t,this.setAttribute(M.closedByAttribute,t)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,r){const s=this.dialogElement;s!=null&&r!==e&&this._syncAttribute(t)}_addEventListeners(){}_removeEventListeners(){}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=jt,this._syncAttributes())}_syncAttribute(t){const e=this.dialogElement;e!=null&&(this.hasAttribute(t)===!0?e.setAttribute(t,this.getAttribute(t)??d):e.removeAttribute(t))}_syncAttributes(){M.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 qt=Object.freeze(Object.defineProperty({__proto__:null,BaseDialogComponent:M,selector:"base-dialog"},Symbol.toStringTag,{value:"Module"})),Pt=`<dialog part="dialog">
|
|
30
34
|
<header part="header">
|
|
31
35
|
<h2></h2>
|
|
32
36
|
</header>
|
|
@@ -38,7 +42,7 @@
|
|
|
38
42
|
<undo-button></undo-button>
|
|
39
43
|
</footer>
|
|
40
44
|
</dialog>
|
|
41
|
-
`,
|
|
45
|
+
`,Dt="*{box-sizing:border-box}dialog header[part=header] h2{margin:0;padding:0}dialog div[part=body] p{margin:0;padding:0}dialog footer[part=footer]{display:flex;gap:var(--gap-md);justify-content:flex-end}",Ut=`<dialog part="dialog">
|
|
42
46
|
<header part="header">
|
|
43
47
|
<slot name="header"></slot>
|
|
44
48
|
</header>
|
|
@@ -49,7 +53,7 @@
|
|
|
49
53
|
<slot name="footer"></slot>
|
|
50
54
|
</footer>
|
|
51
55
|
</dialog>
|
|
52
|
-
`,
|
|
56
|
+
`,Kt='*{box-sizing:border-box}dialog[open]{max-width:100%;max-height:100%;display:flex;flex-direction:column;gap:var(--spacing-4)}dialog>[part]{position:relative}dialog>[part][hidden]{display:none}dialog>[part][data-divider=true]:after{content:"";position:absolute;left:0;right:0;bottom:0;border-bottom:var(--border-width-1) solid var(--color-neutral-600)}dialog>[part][data-divider=true]{padding-bottom:var(--spacing-4)}dialog div[part=body]{flex:1;min-height:0;overflow-y:auto}',Q=new CSSStyleSheet;Q.replaceSync(Kt);class U extends M{_sectionNames=["header","body","footer"];_handleSlotChange=()=>{this._updateSectionState()};constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(Q)}static get observedAttributes(){return M.observedAttributes}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Ut,this._syncAttributes())}_addEventListeners(){super._addEventListeners(),this.shadowRoot!==null&&(this.shadowRoot.querySelectorAll("slot").forEach(t=>{t.addEventListener("slotchange",this._handleSlotChange)}),this._updateSectionState())}_removeEventListeners(){super._removeEventListeners(),this.shadowRoot!==null&&this.shadowRoot.querySelectorAll("slot").forEach(t=>{t.removeEventListener("slotchange",this._handleSlotChange)})}_updateSectionState(){if(this.shadowRoot===null)return;const t=[];this._sectionNames.forEach(e=>{const r=this.shadowRoot?.querySelector(`[part='${e}']`),s=this.shadowRoot?.querySelector(`slot[name='${e}']`);if(r===null||s===null)return;const n=s.assignedNodes({flatten:!0}).some(g=>g.nodeType===Node.TEXT_NODE?g.textContent?.trim().length!==0:g.nodeType===Node.ELEMENT_NODE);r.toggleAttribute("hidden",n===!1),r.dataset.filled=String(n),r.removeAttribute("data-divider"),n===!0&&t.push(r)}),t.slice(0,-1).forEach(e=>{e.dataset.divider="true"})}}const Z=new CSSStyleSheet;Z.replaceSync(Dt);class p extends U{_headline=d;_text=d;_value=void 0;static textAttribute="text";static headlineAttribute="headline";static valueAttribute="value";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(Z)}static get observedAttributes(){return[...U.observedAttributes,p.textAttribute,p.headlineAttribute,p.valueAttribute]}get headline(){return this._headline}set headline(t){this._headline=t,this.setAttribute(p.headlineAttribute,t)}get text(){return this._text}set text(t){this._text=t,this.setAttribute(p.textAttribute,t)}get value(){return this._value}set value(t){this._value=t}connectedCallback(){this._render(),this._addEventListeners(),this.closedBy=q.NONE}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Pt,this._syncAttributes())}_syncAttribute(t){if(p.observedAttributes.includes(t))switch(t){case p.headlineAttribute:{this._headline=this.getAttribute(t)??d;const e=this.shadowRoot?.querySelector("h2");e!=null&&(e.textContent=this._headline);break}case p.textAttribute:{this._text=this.getAttribute(t)??d;const e=this.shadowRoot?.querySelector("p");e!=null&&(e.textContent=this._text);break}case p.valueAttribute:{this._value=this.getAttribute(t);break}default:super._syncAttribute(t)}else super._syncAttribute(t)}_syncAttributes(){super._syncAttributes(),p.observedAttributes.forEach(t=>{this._syncAttribute(t)})}_addEventListeners(){super._addEventListeners(),this.shadowRoot?.querySelector(D)?.addEventListener(z.CLICK,this._handleConfirm),this.shadowRoot?.querySelector(P)?.addEventListener(z.CLICK,this._handleUndo)}_removeEventListeners(){super._removeEventListeners(),this.shadowRoot?.querySelector(D)?.removeEventListener(z.CLICK,this._handleConfirm),this.shadowRoot?.querySelector(P)?.removeEventListener(z.CLICK,this._handleUndo)}_handleConfirm=()=>{const t=new CustomEvent(H.CONFIRMATION_DIALOG_CONFIRM,{bubbles:!0,composed:!0,detail:{value:this._value}});this.dispatchEvent(t)};_handleUndo=()=>{const t=new CustomEvent(H.CONFIRMATION_DIALOG_UNDO,{bubbles:!0,composed:!0,detail:{value:this._value}});this.dispatchEvent(t),this._value=void 0}}const Ct="confirmation-dialog",Gt={CONFIRMATION_DIALOG_CONFIRM:H.CONFIRMATION_DIALOG_CONFIRM,CONFIRMATION_DIALOG_UNDO:H.CONFIRMATION_DIALOG_UNDO},Wt=Object.freeze(Object.defineProperty({__proto__:null,COMPONENT_CUSTOM_MESSAGES:Gt,ConfirmationDialogComponent:p,selector:Ct},Symbol.toStringTag,{value:"Module"})),Yt=Object.freeze(Object.defineProperty({__proto__:null,HeaderBodyFooterDialogComponent:U,selector:"header-body-footer-dialog"},Symbol.toStringTag,{value:"Module"})),Vt=`<div class="bar-menu-container">
|
|
53
57
|
<previous-button class="nav-prev" part="nav-prev-button"></previous-button>
|
|
54
58
|
|
|
55
59
|
<div class="buttons-wrapper" part="buttons-wrapper">
|
|
@@ -58,10 +62,10 @@
|
|
|
58
62
|
|
|
59
63
|
<next-button class="nav-next" part="nav-next-button"></next-button>
|
|
60
64
|
</div>
|
|
61
|
-
`,
|
|
65
|
+
`,Bt="*{box-sizing:border-box}:host{display:block;width:100%}.bar-menu-container{display:flex;align-items:center;justify-content:space-between;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 .nav-prev,.bar-menu-container .nav-next{flex-shrink:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.bar-menu-container .nav-prev.visible,.bar-menu-container .nav-next.visible{opacity:1;visibility:visible;pointer-events:auto}.bar-menu-container .nav-prev::part(button),.bar-menu-container .nav-next::part(button){background-color:transparent;box-shadow:none}.bar-menu-container .buttons-wrapper{display:grid;grid-template-columns:repeat(var(--bar-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)}",tt=new CSSStyleSheet;tt.replaceSync(Bt);class A extends HTMLElement{static _visibleCountAttribute="visible-count";static _cyclicalNavigationAttribute="cyclical-navigation";_currentIndex=0;_visibleCount=3;_cyclicalNavigation=!1;_MIN_VISIBLE=1;_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(tt)}static get observedAttributes(){return[A._visibleCountAttribute,A._cyclicalNavigationAttribute]}get visibleButtons(){const t=this.getAttribute(A._visibleCountAttribute);if(t!==null&&t!==d){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(A._visibleCountAttribute,String(e))}get cyclicalNavigation(){return this.hasAttribute(A._cyclicalNavigationAttribute)}set cyclicalNavigation(t){t?this.setAttribute(A._cyclicalNavigationAttribute,d):this.removeAttribute(A._cyclicalNavigationAttribute)}connectedCallback(){this._render(),this._cacheElements(),this._setupSlotListener(),this._setupKeyboardListener(),this._updateButtonVisibility()}disconnectedCallback(){this._removeSlotListener(),this._removeKeyboardListener()}attributeChangedCallback(t,e,r){t===A._visibleCountAttribute?(this._visibleCount=this.visibleButtons,this._buttonsWrapper!==null&&this._buttonsWrapper.style.setProperty("--bar-menu-visible-count",String(this.visibleButtons)),this._updateButtonVisibility()):t===A._cyclicalNavigationAttribute&&(this._cyclicalNavigation=this.cyclicalNavigation,this._updateButtonVisibility())}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Vt)}_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(z.CLICK,()=>{this._scrollPrevious()})),this._navNextButton!==null&&(this._navNextButton.setAttribute("aria-label","Next"),this._navNextButton.addEventListener(z.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(C.KEY_DOWN,this._keyDownListener)}_removeKeyboardListener(){this._keyDownListener!==null&&this.removeEventListener(C.KEY_DOWN,this._keyDownListener)}_getSlottedButtons(){return this._slotElement===null?[]:this._slotElement.assignedElements()}_updateButtonVisibility(t){const e=this._getSlottedButtons(),r=e.length,s=this.visibleButtons,n=this._currentIndex,g=Math.min(n+s,r);e.forEach((u,y)=>{const F=y>=n&&y<g,I=u;F||(u.classList.remove("visible-button"),u.classList.remove("animating"),I.style.display="none")}),t!==void 0?(e[0]?.offsetHeight,e.forEach((u,y)=>{if(y>=n&&y<g){const I=u;I.style.display="inline-flex",u.classList.add("animating");const De=y%this.visibleButtons*50;I.style.transitionDelay=`${De}ms`}}),e[0]?.offsetHeight,e.forEach((u,y)=>{y>=n&&y<g&&u.classList.add("visible-button")}),setTimeout(()=>{e.forEach(u=>{u.classList.remove("animating"),u.style.transitionDelay=d})},400)):e.forEach((u,y)=>{const F=y>=n&&y<g,I=u;F&&(I.style.display="inline-flex",u.classList.add("visible-button"))}),this._updateNavigationButtons(r,s)}_updateNavigationButtons(t,e){const r=t>e,s=this._currentIndex+e<t,n=this._currentIndex===0,g=!s;this._navPrevButton!==null&&(r?(this._navPrevButton.classList.add("visible"),this._navPrevButton.disabled=!this._cyclicalNavigation&&n):this._navPrevButton.classList.remove("visible")),this._navNextButton!==null&&(r?(this._navNextButton.classList.add("visible"),this._navNextButton.disabled=!this._cyclicalNavigation&&g):this._navNextButton.classList.remove("visible"))}_scrollPrevious(){const t=this._getSlottedButtons().length,e=this.visibleButtons;this._currentIndex>0?(this._currentIndex=Math.max(0,this._currentIndex-e),this._updateButtonVisibility("previous")):this._cyclicalNavigation&&t>e&&(this._currentIndex=Math.max(0,t-e),this._updateButtonVisibility("previous"))}_scrollNext(){const t=this._getSlottedButtons().length,e=this.visibleButtons,r=this._currentIndex+e;r<t?(this._currentIndex=r,this._updateButtonVisibility("next")):this._cyclicalNavigation&&t>e&&(this._currentIndex=0,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 Xt=Object.freeze(Object.defineProperty({__proto__:null,BarMenuComponent:A,selector:"bar-menu"},Symbol.toStringTag,{value:"Module"})),Jt="ds-spinner",Qt=`<div part="spinner" class="spinner" role="status" aria-label="Loading">
|
|
62
66
|
<div class="spinner-ring"></div>
|
|
63
67
|
</div>
|
|
64
|
-
`,
|
|
68
|
+
`,Zt="*{box-sizing:border-box}:host{display:inline-flex;align-items:center;justify-content:center}.spinner{display:inline-flex;align-items:center;justify-content:center}.spinner-ring{width:var(--spinner-size, 2rem);height:var(--spinner-size, 2rem);border:3px solid var(--color-border-primary);border-top-color:var(--color-primary);border-radius:var(--border-radius-full);animation:spin var(--transition-slow) linear infinite}:host([size=sm]) .spinner-ring{width:1rem;height:1rem;border-width:2px}:host([size=md]) .spinner-ring{width:2rem;height:2rem;border-width:3px}:host([size=lg]) .spinner-ring{width:3rem;height:3rem;border-width:4px}:host([variant=primary]) .spinner-ring{border-top-color:var(--color-primary)}:host([variant=success]) .spinner-ring{border-top-color:var(--color-success)}:host([variant=warning]) .spinner-ring{border-top-color:var(--color-warning)}:host([variant=error]) .spinner-ring{border-top-color:var(--color-error)}@keyframes spin{to{transform:rotate(360deg)}}",et=new CSSStyleSheet;et.replaceSync(Zt);class f extends HTMLElement{static _sizeAttribute="size";static _variantAttribute="variant";static _labelAttribute="label";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(et)}static get observedAttributes(){return[f._sizeAttribute,f._variantAttribute,f._labelAttribute]}get size(){return this.getAttribute(f._sizeAttribute)??"md"}set size(t){this.setAttribute(f._sizeAttribute,t)}get variant(){return this.getAttribute(f._variantAttribute)??"primary"}set variant(t){this.setAttribute(f._variantAttribute,t)}get label(){return this.getAttribute(f._labelAttribute)??"Loading"}set label(t){this.setAttribute(f._labelAttribute,t)}connectedCallback(){this._render()}attributeChangedCallback(t,e,r){r!==e&&t===f._labelAttribute&&this.shadowRoot?.querySelector(".spinner")?.setAttribute("aria-label",r??"Loading")}_render(){if(this.shadowRoot===null)return;this.shadowRoot.innerHTML=Qt,this.shadowRoot.querySelector(".spinner")?.setAttribute("aria-label",this.label)}}const te=Object.freeze(Object.defineProperty({__proto__:null,SpinnerComponent:f,selector:Jt},Symbol.toStringTag,{value:"Module"})),ee="ds-progress-bar",re=`<div
|
|
65
69
|
part="container"
|
|
66
70
|
class="progress-container"
|
|
67
71
|
role="progressbar"
|
|
@@ -73,18 +77,18 @@
|
|
|
73
77
|
</div>
|
|
74
78
|
<span class="progress-label"></span>
|
|
75
79
|
</div>
|
|
76
|
-
`,
|
|
77
|
-
`,
|
|
80
|
+
`,ie="*{box-sizing:border-box}:host{display:block;width:100%}.progress-container{display:flex;flex-direction:column;gap:var(--gap-xs)}.progress-track{width:100%;height:.5rem;background-color:var(--color-bg-secondary);border-radius:var(--border-radius-full);overflow:hidden;border:1px solid var(--color-border-primary)}:host([size=sm]) .progress-track{height:.25rem}:host([size=md]) .progress-track{height:.5rem}:host([size=lg]) .progress-track{height:1rem}.progress-fill{height:100%;width:0%;background:var(--color-primary);border-radius:var(--border-radius-full);transition:width var(--transition-base) ease}:host([variant=success]) .progress-fill{background:var(--color-success)}:host([variant=warning]) .progress-fill{background:var(--color-warning)}:host([variant=error]) .progress-fill{background:var(--color-error)}:host([variant=info]) .progress-fill{background:var(--color-info)}:host([indeterminate]) .progress-fill{width:40%!important;animation:indeterminate var(--transition-slow) ease-in-out infinite}.progress-label{font-family:var(--font-family-base);font-size:var(--font-size-xs);color:var(--color-text-secondary);align-self:flex-end}:host(:not([show-label])) .progress-label{display:none}@keyframes indeterminate{0%{transform:translate(-100%)}to{transform:translate(350%)}}",rt=new CSSStyleSheet;rt.replaceSync(ie);class b extends HTMLElement{static _valueAttribute="value";static _variantAttribute="variant";static _sizeAttribute="size";static _indeterminateAttribute="indeterminate";static _showLabelAttribute="show-label";static _labelAttribute="label";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(rt)}static get observedAttributes(){return[b._valueAttribute,b._variantAttribute,b._sizeAttribute,b._indeterminateAttribute,b._showLabelAttribute,b._labelAttribute]}get value(){const t=this.getAttribute(b._valueAttribute),e=parseFloat(t??"0");return isNaN(e)?0:Math.max(0,Math.min(100,e))}set value(t){this.setAttribute(b._valueAttribute,String(Math.max(0,Math.min(100,t))))}get variant(){return this.getAttribute(b._variantAttribute)??"primary"}set variant(t){this.setAttribute(b._variantAttribute,t)}get indeterminate(){return this.hasAttribute(b._indeterminateAttribute)}set indeterminate(t){t?this.setAttribute(b._indeterminateAttribute,""):this.removeAttribute(b._indeterminateAttribute)}get showLabel(){return this.hasAttribute(b._showLabelAttribute)}connectedCallback(){this._render()}attributeChangedCallback(t,e,r){r!==e&&this._update()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=re,this._update())}_update(){const t=this.shadowRoot?.querySelector(".progress-fill"),e=this.shadowRoot?.querySelector(".progress-container"),r=this.shadowRoot?.querySelector(".progress-label");t!=null&&(t.style.width=this.indeterminate?"40%":`${this.value}%`),e!=null&&(e.setAttribute("aria-valuenow",String(this.value)),this.getAttribute(b._labelAttribute)!==null&&this.getAttribute(b._labelAttribute)!==""&&e.setAttribute("aria-label",this.getAttribute(b._labelAttribute)??"")),r!=null&&(r.textContent=this.indeterminate?"":`${this.value}%`)}}const se=Object.freeze(Object.defineProperty({__proto__:null,ProgressBarComponent:b,selector:ee},Symbol.toStringTag,{value:"Module"})),oe="ds-skeleton",ae=`<div part="skeleton" class="skeleton" aria-hidden="true"></div>
|
|
81
|
+
`,ne="*{box-sizing:border-box}:host{display:block;width:100%}.skeleton{background:linear-gradient(90deg,var(--color-bg-secondary) 25%,var(--color-bg-tertiary) 50%,var(--color-bg-secondary) 75%);background-size:200% 100%;border-radius:var(--border-radius-md);animation:shimmer 1.5s infinite;min-height:1rem;width:100%}:host([shape=circle]) .skeleton{border-radius:var(--border-radius-full);width:var(--skeleton-size, 3rem);height:var(--skeleton-size, 3rem)}:host([shape=text]) .skeleton{border-radius:var(--border-radius-sm);height:1em}:host([shape=rect]) .skeleton{border-radius:var(--border-radius-md)}:host([width=full]){width:100%}:host([width=half]){width:50%}:host([width=quarter]){width:25%}:host([width=three-quarters]){width:75%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}",it=new CSSStyleSheet;it.replaceSync(ne);class _ extends HTMLElement{static _shapeAttribute="shape";static _heightAttribute="height";static _widthAttribute="width";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(it)}static get observedAttributes(){return[_._shapeAttribute,_._heightAttribute,_._widthAttribute]}get shape(){return this.getAttribute(_._shapeAttribute)??"rect"}set shape(t){this.setAttribute(_._shapeAttribute,t)}get height(){return this.getAttribute(_._heightAttribute)??""}set height(t){this.setAttribute(_._heightAttribute,t)}connectedCallback(){this._render()}attributeChangedCallback(t,e,r){r!==e&&t===_._heightAttribute&&this._applyHeight(r)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=ae,this._applyHeight(this.height))}_applyHeight(t){const e=this.shadowRoot?.querySelector(".skeleton");e!=null&&t!==null&&t!==""&&(e.style.height=t)}}const le=Object.freeze(Object.defineProperty({__proto__:null,SkeletonComponent:_,selector:oe},Symbol.toStringTag,{value:"Module"})),de="ds-card",ce=`<div part="card" class="card">
|
|
78
82
|
<slot name="header" class="card-header-slot"></slot>
|
|
79
83
|
<div class="card-body">
|
|
80
84
|
<slot></slot>
|
|
81
85
|
</div>
|
|
82
86
|
<slot name="footer" class="card-footer-slot"></slot>
|
|
83
87
|
</div>
|
|
84
|
-
`,
|
|
88
|
+
`,ue='*{box-sizing:border-box}:host{display:block}.card{background:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--border-radius-xl);box-shadow:var(--shadow-md);overflow:hidden;transition:box-shadow var(--transition-fast),transform var(--transition-fast),border-color var(--transition-fast);font-family:var(--font-family-base);color:var(--color-text-primary);position:relative}.card:before{content:"";display:block;height:2px;background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-primary-light) 100%);opacity:0;transition:opacity var(--transition-fast)}:host([hoverable]) .card:hover{box-shadow:var(--shadow-xl);transform:translateY(-3px);border-color:var(--color-border-secondary)}:host([hoverable]) .card:hover:before{opacity:1}:host([variant=outlined]) .card{background:transparent;box-shadow:none;border:var(--border-width-2) solid var(--color-border-secondary)}:host([variant=elevated]) .card{background:var(--color-bg-primary);box-shadow:var(--shadow-xl);border:none}:host([variant=filled]) .card{background:var(--color-bg-secondary);border:none;box-shadow:none}.card-body{padding:var(--spacing-4) var(--spacing-5)}::slotted([slot=header]){display:block;padding:var(--spacing-5) var(--spacing-5) var(--spacing-2);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text-primary);letter-spacing:var(--letter-spacing-tight)}::slotted([slot=footer]){display:block;padding:var(--spacing-3) var(--spacing-5) var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-top:1px solid var(--color-border-primary)}',st=new CSSStyleSheet;st.replaceSync(ue);class x extends HTMLElement{static _variantAttribute="variant";static _hoverableAttribute="hoverable";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(st)}static get observedAttributes(){return[x._variantAttribute,x._hoverableAttribute]}get variant(){return this.getAttribute(x._variantAttribute)??"default"}set variant(t){this.setAttribute(x._variantAttribute,t)}get hoverable(){return this.hasAttribute(x._hoverableAttribute)}set hoverable(t){t?this.setAttribute(x._hoverableAttribute,""):this.removeAttribute(x._hoverableAttribute)}connectedCallback(){this._render()}attributeChangedCallback(t,e,r){}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=ce)}}const he=Object.freeze(Object.defineProperty({__proto__:null,BaseCardComponent:x,selector:de},Symbol.toStringTag,{value:"Module"})),be="ds-badge",ve=`<span part="badge" class="badge">
|
|
85
89
|
<slot></slot>
|
|
86
90
|
</span>
|
|
87
|
-
`,
|
|
91
|
+
`,ge="*{box-sizing:border-box}:host{display:inline-flex}.badge{display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-xs);padding-block:.2em;padding-inline:.6em;border-radius:var(--border-radius-full);font-family:var(--font-family-base);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);line-height:1.4;white-space:nowrap;background-color:var(--color-primary);color:#fff;border:1px solid transparent}:host([variant=secondary]) .badge{background-color:var(--color-bg-secondary);color:var(--color-text-primary);border-color:var(--color-border-primary)}:host([variant=success]) .badge{background-color:var(--color-success);color:#fff}:host([variant=warning]) .badge{background-color:var(--color-warning);color:#1a1a1a}:host([variant=error]) .badge{background-color:var(--color-error);color:#fff}:host([variant=info]) .badge{background-color:var(--color-info);color:#fff}:host([variant=outline]) .badge{background-color:transparent;color:var(--color-primary);border-color:var(--color-primary)}:host([size=sm]) .badge{font-size:.65rem;padding-block:.1em;padding-inline:.4em}:host([size=lg]) .badge{font-size:var(--font-size-sm);padding-block:.3em;padding-inline:.8em}:host([dot]) .badge{width:.5rem;height:.5rem;padding:0;font-size:0}",ot=new CSSStyleSheet;ot.replaceSync(ge);class m extends HTMLElement{static _variantAttribute="variant";static _sizeAttribute="size";static _dotAttribute="dot";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(ot)}static get observedAttributes(){return[m._variantAttribute,m._sizeAttribute,m._dotAttribute]}get variant(){return this.getAttribute(m._variantAttribute)??"primary"}set variant(t){this.setAttribute(m._variantAttribute,t)}get size(){return this.getAttribute(m._sizeAttribute)??"md"}set size(t){this.setAttribute(m._sizeAttribute,t)}get dot(){return this.hasAttribute(m._dotAttribute)}set dot(t){t?this.setAttribute(m._dotAttribute,""):this.removeAttribute(m._dotAttribute)}connectedCallback(){this._render()}attributeChangedCallback(t,e,r){}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=ve)}}const pe=Object.freeze(Object.defineProperty({__proto__:null,BadgeComponent:m,selector:be},Symbol.toStringTag,{value:"Module"})),fe="ds-alert",me=`<div part="alert" class="alert" role="alert">
|
|
88
92
|
<span class="alert-icon"></span>
|
|
89
93
|
<div class="alert-content">
|
|
90
94
|
<slot name="title" class="alert-title-slot"></slot>
|
|
@@ -99,7 +103,7 @@
|
|
|
99
103
|
<span class="close-icon">✕</span>
|
|
100
104
|
</button>
|
|
101
105
|
</div>
|
|
102
|
-
`,
|
|
106
|
+
`,ye='@charset "UTF-8";*{box-sizing:border-box}:host{display:block}:host([hidden]){display:none}.alert{display:flex;align-items:center;gap:var(--gap-sm);padding:var(--spacing-3);border-radius:var(--border-radius-lg);border-left:4px solid var(--color-primary);background-color:var(--color-bg-secondary);color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-sm);line-height:var(--line-height-normal);animation:alertIn var(--transition-fast) ease-out}:host([variant=success]) .alert{border-left-color:#22c55e;background-color:#1a3f1f;color:#d1fae5}:host([variant=warning]) .alert{border-left-color:#facc15;background-color:#3f3011;color:#e0c600}:host([variant=error]) .alert{border-left-color:#dc2626;background-color:color-mix(in srgb,#dc2626 10%,var(--color-bg-primary))}:host([variant=info]) .alert{border-left-color:var(--color-primary);background-color:color-mix(in srgb,var(--color-primary) 15%,var(--color-bg-primary));color:var(--color-text-primary)}.alert-icon{font-size:var(--font-size-lg);flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:1.25em;height:1.25em}:host([variant=success]) .alert-icon:before{content:"✓"}:host([variant=warning]) .alert-icon:before{content:"⚠"}:host([variant=error]) .alert-icon:before{content:"✕"}:host([variant=info]) .alert-icon:before{content:"ℹ"}.alert-content{flex:1;min-width:0;padding:0 var(--gap-sm);border-left:1px solid}::slotted([slot=title]){display:block;font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);margin-bottom:var(--spacing-1)}.alert-close{flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:var(--spacing-1);border-radius:var(--border-radius-sm);color:var(--color-text-secondary);font-size:var(--font-size-md);line-height:1;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast),color var(--transition-fast)}.alert-close:hover{background:var(--color-hover-bg-secondary);color:var(--color-text-primary)}:host(:not([dismissible])) .alert-close{display:none}@keyframes alertIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}',at=new CSSStyleSheet;at.replaceSync(ye);class R extends HTMLElement{static _variantAttribute="variant";static _dismissibleAttribute="dismissible";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(at)}static get observedAttributes(){return[R._variantAttribute,R._dismissibleAttribute]}get variant(){return this.getAttribute(R._variantAttribute)??"info"}set variant(t){this.setAttribute(R._variantAttribute,t)}get dismissible(){return this.hasAttribute(R._dismissibleAttribute)}set dismissible(t){t?this.setAttribute(R._dismissibleAttribute,""):this.removeAttribute(R._dismissibleAttribute)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,r){}_handleClose=()=>{this.dispatchEvent(new CustomEvent("ds-alert-dismiss",{bubbles:!0,composed:!0})),this.setAttribute("hidden","")};_addEventListeners(){this.shadowRoot?.querySelector(".alert-close")?.addEventListener("click",this._handleClose)}_removeEventListeners(){this.shadowRoot?.querySelector(".alert-close")?.removeEventListener("click",this._handleClose)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=me,this._addEventListeners())}}const Ae=Object.freeze(Object.defineProperty({__proto__:null,AlertComponent:R,selector:fe},Symbol.toStringTag,{value:"Module"})),_e="ds-tag",we=`<span part="tag" class="tag">
|
|
103
107
|
<slot></slot>
|
|
104
108
|
<button
|
|
105
109
|
part="remove-button"
|
|
@@ -110,16 +114,16 @@
|
|
|
110
114
|
✕
|
|
111
115
|
</button>
|
|
112
116
|
</span>
|
|
113
|
-
`,
|
|
117
|
+
`,Se="*{box-sizing:border-box}:host{display:inline-flex}.tag{display:inline-flex;align-items:center;gap:var(--gap-xs);padding-block:.25em;padding-inline:.75em;border-radius:var(--border-radius-full);font-family:var(--font-family-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);background-color:var(--color-bg-secondary);color:var(--color-text-primary);border:1px solid var(--color-border-primary);transition:all var(--transition-fast)}:host([variant=primary]) .tag{background-color:var(--color-primary);color:#fff;border-color:transparent}:host([variant=success]) .tag{background-color:var(--color-success);color:#fff;border-color:transparent}:host([variant=warning]) .tag{background-color:var(--color-warning);color:#1a1a1a;border-color:transparent}:host([variant=error]) .tag{background-color:var(--color-error);color:#fff;border-color:transparent}:host([size=sm]) .tag{font-size:var(--font-size-xs);padding-block:.15em;padding-inline:.5em}:host([size=lg]) .tag{font-size:var(--font-size-md);padding-block:.35em;padding-inline:1em}.tag-remove{display:none;background:transparent;border:none;cursor:pointer;padding:0;font-size:.75em;color:inherit;opacity:.7;line-height:1;border-radius:var(--border-radius-full);transition:opacity var(--transition-fast)}:host([removable]) .tag-remove{display:inline-flex;align-items:center;justify-content:center}.tag-remove:hover{opacity:1}",nt=new CSSStyleSheet;nt.replaceSync(Se);class w extends HTMLElement{static _variantAttribute="variant";static _sizeAttribute="size";static _removableAttribute="removable";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(nt)}static get observedAttributes(){return[w._variantAttribute,w._sizeAttribute,w._removableAttribute]}get variant(){return this.getAttribute(w._variantAttribute)??"default"}set variant(t){this.setAttribute(w._variantAttribute,t)}get removable(){return this.hasAttribute(w._removableAttribute)}set removable(t){t?this.setAttribute(w._removableAttribute,""):this.removeAttribute(w._removableAttribute)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,r){}_handleRemove=()=>{this.dispatchEvent(new CustomEvent("ds-tag-remove",{bubbles:!0,composed:!0})),this.remove()};_addEventListeners(){this.shadowRoot?.querySelector(".tag-remove")?.addEventListener("click",this._handleRemove)}_removeEventListeners(){this.shadowRoot?.querySelector(".tag-remove")?.removeEventListener("click",this._handleRemove)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=we,this._addEventListeners())}}const Ee=Object.freeze(Object.defineProperty({__proto__:null,TagComponent:w,selector:_e},Symbol.toStringTag,{value:"Module"})),ke="ds-avatar",Le=`<div part="avatar" class="avatar" role="img">
|
|
114
118
|
<img class="avatar-image" alt="" />
|
|
115
119
|
<span class="avatar-initials"></span>
|
|
116
120
|
<span class="avatar-icon">👤</span>
|
|
117
121
|
</div>
|
|
118
|
-
`,
|
|
122
|
+
`,xe="*{box-sizing:border-box}:host{display:inline-flex}.avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:var(--border-radius-full);background-color:var(--color-primary);color:#fff;font-family:var(--font-family-base);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);overflow:hidden;-webkit-user-select:none;user-select:none;flex-shrink:0}:host([size=xs]) .avatar{width:1.5rem;height:1.5rem;font-size:var(--font-size-xs)}:host([size=sm]) .avatar{width:2rem;height:2rem;font-size:var(--font-size-xs)}:host([size=md]) .avatar{width:2.5rem;height:2.5rem;font-size:var(--font-size-sm)}:host([size=lg]) .avatar{width:3.5rem;height:3.5rem;font-size:var(--font-size-lg)}:host([size=xl]) .avatar{width:5rem;height:5rem;font-size:var(--font-size-2xl)}:host([shape=square]) .avatar{border-radius:var(--border-radius-md)}:host([shape=rounded]) .avatar{border-radius:var(--border-radius-lg)}:host([color=secondary]) .avatar{background-color:var(--color-bg-secondary);color:var(--color-text-primary);border:1px solid var(--color-border-primary)}:host([color=success]) .avatar{background-color:var(--color-success)}:host([color=warning]) .avatar{background-color:var(--color-warning);color:#1a1a1a}:host([color=error]) .avatar{background-color:var(--color-error)}.avatar-image{width:100%;height:100%;object-fit:cover;display:none;border-radius:inherit}.avatar-initials{display:none;line-height:1}.avatar-icon{display:flex;font-size:1.2em;line-height:1}:host([src]) .avatar-image{display:block}:host([src]) .avatar-initials{display:none}:host([src]) .avatar-icon{display:none}:host([initials]:not([src])) .avatar-initials{display:block}:host([initials]:not([src])) .avatar-icon{display:none}",lt=new CSSStyleSheet;lt.replaceSync(xe);class l extends HTMLElement{static _srcAttribute="src";static _altAttribute="alt";static _initialsAttribute="initials";static _sizeAttribute="size";static _shapeAttribute="shape";static _colorAttribute="color";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(lt)}static get observedAttributes(){return[l._srcAttribute,l._altAttribute,l._initialsAttribute,l._sizeAttribute,l._shapeAttribute,l._colorAttribute]}get src(){return this.getAttribute(l._srcAttribute)??""}set src(t){t!==""&&t!==null&&t!==void 0?this.setAttribute(l._srcAttribute,t):this.removeAttribute(l._srcAttribute)}get alt(){return this.getAttribute(l._altAttribute)??""}set alt(t){this.setAttribute(l._altAttribute,t)}get initials(){return this.getAttribute(l._initialsAttribute)??""}set initials(t){t!==""&&t!==null&&t!==void 0?this.setAttribute(l._initialsAttribute,t.slice(0,2).toUpperCase()):this.removeAttribute(l._initialsAttribute)}get size(){return this.getAttribute(l._sizeAttribute)??"md"}set size(t){this.setAttribute(l._sizeAttribute,t)}connectedCallback(){this._render()}attributeChangedCallback(t,e,r){r!==e&&this._update(t,r)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Le,this._update(l._srcAttribute,this.src),this._update(l._initialsAttribute,this.initials),this._update(l._altAttribute,this.alt))}_update(t,e){if(t===l._srcAttribute){const r=this.shadowRoot?.querySelector(".avatar-image");r!=null&&(r.src=e??"")}else if(t===l._initialsAttribute){const r=this.shadowRoot?.querySelector(".avatar-initials");r!=null&&(r.textContent=e??"")}else if(t===l._altAttribute){const r=this.shadowRoot?.querySelector(".avatar-image"),s=this.shadowRoot?.querySelector(".avatar");r!=null&&(r.alt=e??""),s?.setAttribute("aria-label",e??"")}}}const Re=Object.freeze(Object.defineProperty({__proto__:null,AvatarComponent:l,selector:ke},Symbol.toStringTag,{value:"Module"})),ze="ds-tooltip",Me=`<slot></slot>
|
|
119
123
|
<div part="tooltip" class="tooltip" role="tooltip">
|
|
120
124
|
<slot name="content"></slot>
|
|
121
125
|
</div>
|
|
122
|
-
`,
|
|
126
|
+
`,Oe="*{box-sizing:border-box}:host{position:relative;display:inline-flex;align-items:center}.tooltip{position:absolute;z-index:var(--z-index-tooltip, 1070);bottom:calc(100% + .5rem);left:50%;transform:translate(-50%);padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-bg-tertiary, #1e1e2e);color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-xs);line-height:var(--line-height-normal);border-radius:var(--border-radius-md);box-shadow:var(--shadow-lg);white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity var(--transition-fast),visibility var(--transition-fast);max-width:16rem;white-space:normal;text-align:center}:host([placement=bottom]) .tooltip{bottom:auto;top:calc(100% + .5rem)}:host([placement=left]) .tooltip{bottom:auto;left:auto;right:calc(100% + .5rem);top:50%;transform:translateY(-50%)}:host([placement=right]) .tooltip{bottom:auto;left:calc(100% + .5rem);top:50%;transform:translateY(-50%)}:host([open]) .tooltip,:host(:hover) .tooltip,:host(:focus-within) .tooltip{opacity:1;visibility:visible}:host([follow-cursor]) .tooltip{position:fixed;bottom:auto;left:0;top:0;transform:none}:host([follow-cursor]) .tooltip{opacity:1;visibility:visible}",dt=new CSSStyleSheet;dt.replaceSync(Oe);class v extends HTMLElement{static _placementAttribute="placement";static _contentAttribute="content";static _openAttribute="open";static _followCursorAttribute="follow-cursor";_lastMouseX=0;_lastMouseY=0;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(dt)}static get observedAttributes(){return[v._placementAttribute,v._contentAttribute,v._openAttribute,v._followCursorAttribute]}get placement(){return this.getAttribute(v._placementAttribute)??"top"}set placement(t){this.setAttribute(v._placementAttribute,t)}get content(){return this.getAttribute(v._contentAttribute)??""}set content(t){this.setAttribute(v._contentAttribute,t),this._updateContent(t)}get open(){return this.hasAttribute(v._openAttribute)}set open(t){t?this.setAttribute(v._openAttribute,""):this.removeAttribute(v._openAttribute)}get followCursor(){return this.hasAttribute(v._followCursorAttribute)}set followCursor(t){t?this.setAttribute(v._followCursorAttribute,""):this.removeAttribute(v._followCursorAttribute)}connectedCallback(){this._render(),this._attachEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,r){r!==e&&(t===v._contentAttribute&&this._updateContent(r),t===v._followCursorAttribute&&(r!==null?this._attachEventListeners():this._removeEventListeners()))}_render(){if(this.shadowRoot===null)return;this.shadowRoot.innerHTML=Me,this._updateContent(this.content);const t=this.shadowRoot.querySelector(".tooltip");if(t!=null){const e=`tooltip-${Math.random().toString(36).slice(2,7)}`;t.id=e}}_attachEventListeners(){this.removeEventListener("mousemove",this._handleMouseMove),this.removeEventListener("mouseleave",this._handleMouseLeave),this.removeEventListener("mouseenter",this._handleMouseEnter),this.followCursor&&(this.addEventListener("mouseenter",this._handleMouseEnter),this.addEventListener("mousemove",this._handleMouseMove),this.addEventListener("mouseleave",this._handleMouseLeave))}_removeEventListeners(){this.removeEventListener("mousemove",this._handleMouseMove),this.removeEventListener("mouseleave",this._handleMouseLeave),this.removeEventListener("mouseenter",this._handleMouseEnter)}_handleMouseEnter=()=>{const t=this.shadowRoot?.querySelector(".tooltip");t!=null&&(t.style.opacity="1",t.style.visibility="visible")};_handleMouseMove=t=>{this.followCursor&&(this._lastMouseX=t.clientX,this._lastMouseY=t.clientY,this._updateTooltipPosition())};_handleMouseLeave=()=>{const t=this.shadowRoot?.querySelector(".tooltip");t!=null&&(t.style.opacity="0",t.style.visibility="hidden",t.style.left="",t.style.top="")};_updateTooltipPosition(){const t=this.shadowRoot?.querySelector(".tooltip");if(t==null)return;const e=10;t.style.position="fixed",t.style.left=`${this._lastMouseX+e}px`,t.style.top=`${this._lastMouseY+e}px`,t.style.transform="none"}_updateContent(t){const e=this.shadowRoot?.querySelector(".tooltip");if(e!=null&&t!==null&&t!==""){const r=e.querySelector("slot");(r===null||r.assignedNodes().length===0)&&(e.textContent=t)}}}const $e=Object.freeze(Object.defineProperty({__proto__:null,TooltipComponent:v,selector:ze},Symbol.toStringTag,{value:"Module"})),Ie="ds-text-input",Te=`<div part="wrapper" class="input-wrapper">
|
|
123
127
|
<label class="input-label" part="label"></label>
|
|
124
128
|
<div class="input-container">
|
|
125
129
|
<slot name="prefix" class="input-prefix"></slot>
|
|
@@ -128,11 +132,11 @@
|
|
|
128
132
|
</div>
|
|
129
133
|
<span class="input-helper" part="helper"></span>
|
|
130
134
|
</div>
|
|
131
|
-
`,
|
|
135
|
+
`,He="*{box-sizing:border-box}:host{display:block;width:100%}.input-wrapper{display:flex;flex-direction:column;gap:var(--gap-xs);font-family:var(--font-family-base)}.input-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.input-label:empty{display:none}.input-container{display:flex;align-items:center;background-color:var(--color-bg-primary);border:1px solid var(--color-border-primary);border-radius:var(--border-radius-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);overflow:hidden}.input-container:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 20%,transparent);outline:none}:host([state=error]) .input-container{border-color:#dc2626;box-shadow:none}:host([state=error]) .input-container:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,#dc2626 20%,transparent)}:host([state=success]) .input-container{border-color:var(--color-success)}.input{flex:1;min-width:0;padding:var(--spacing-2) var(--spacing-3);background:transparent;border:none;outline:none;font-family:var(--font-family-base);font-size:var(--font-size-sm);color:var(--color-text-primary);line-height:var(--line-height-normal)}.input::placeholder{color:var(--color-text-secondary);opacity:.7}.input:disabled{opacity:.5;cursor:not-allowed}:host([size=sm]) .input{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}:host([size=lg]) .input{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-md)}.input-helper{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.input-helper:empty{display:none}:host([state=error]) .input-helper{color:#dc2626}:host([state=success]) .input-helper{color:var(--color-success)}::slotted([slot=prefix]),::slotted([slot=suffix]){display:flex;align-items:center;padding-inline:var(--spacing-2);color:var(--color-text-secondary);font-size:var(--font-size-sm);flex-shrink:0}",ct=new CSSStyleSheet;ct.replaceSync(He);class o extends HTMLElement{static _labelAttribute="label";static _placeholderAttribute="placeholder";static _valueAttribute="value";static _typeAttribute="type";static _disabledAttribute="disabled";static _requiredAttribute="required";static _stateAttribute="state";static _helperAttribute="helper";static _sizeAttribute="size";static _nameAttribute="name";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(ct)}static get observedAttributes(){return[o._labelAttribute,o._placeholderAttribute,o._valueAttribute,o._typeAttribute,o._disabledAttribute,o._requiredAttribute,o._stateAttribute,o._helperAttribute,o._sizeAttribute,o._nameAttribute]}get value(){return this._inputElement?.value??this.getAttribute(o._valueAttribute)??""}set value(t){this.setAttribute(o._valueAttribute,t),this._inputElement!==null&&this._inputElement!==void 0&&(this._inputElement.value=t)}get label(){return this.getAttribute(o._labelAttribute)??""}set label(t){this.setAttribute(o._labelAttribute,t)}get placeholder(){return this.getAttribute(o._placeholderAttribute)??""}set placeholder(t){this.setAttribute(o._placeholderAttribute,t)}get disabled(){return this.hasAttribute(o._disabledAttribute)}set disabled(t){t?this.setAttribute(o._disabledAttribute,""):this.removeAttribute(o._disabledAttribute)}get state(){return this.getAttribute(o._stateAttribute)??"default"}set state(t){this.setAttribute(o._stateAttribute,t)}get helper(){return this.getAttribute(o._helperAttribute)??""}set helper(t){this.setAttribute(o._helperAttribute,t)}get _inputElement(){return this.shadowRoot?.querySelector(".input")??null}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,r){r!==e&&this._syncAttribute(t,r)}_handleInput=()=>{this.dispatchEvent(new CustomEvent("ds-input",{bubbles:!0,composed:!0,detail:{value:this._inputElement?.value}}))};_handleChange=()=>{this.dispatchEvent(new CustomEvent("ds-change",{bubbles:!0,composed:!0,detail:{value:this._inputElement?.value}}))};_addEventListeners(){this._inputElement?.addEventListener("input",this._handleInput),this._inputElement?.addEventListener("change",this._handleChange)}_removeEventListeners(){this._inputElement?.removeEventListener("input",this._handleInput),this._inputElement?.removeEventListener("change",this._handleChange)}_syncAttribute(t,e){const r=this._inputElement,s=this.shadowRoot?.querySelector(".input-label"),n=this.shadowRoot?.querySelector(".input-helper");switch(t){case o._labelAttribute:s!=null&&(s.textContent=e??"");break;case o._placeholderAttribute:r?.setAttribute("placeholder",e??"");break;case o._valueAttribute:r!=null&&(r.value=e??"");break;case o._typeAttribute:r?.setAttribute("type",e??"text");break;case o._disabledAttribute:e!==null?r?.setAttribute("disabled",""):r?.removeAttribute("disabled");break;case o._requiredAttribute:e!==null?r?.setAttribute("required",""):r?.removeAttribute("required");break;case o._helperAttribute:n!=null&&(n.textContent=e??"");break;case o._nameAttribute:e!==null&&e!==""?r?.setAttribute("name",e):r?.removeAttribute("name");break}}_render(){if(this.shadowRoot===null)return;this.shadowRoot.innerHTML=Te;const t=this._inputElement;if(t!==null){t.setAttribute("type",this.getAttribute(o._typeAttribute)??"text"),t.setAttribute("placeholder",this.placeholder),t.value=this.getAttribute(o._valueAttribute)??"",this.disabled&&t.setAttribute("disabled",""),this.hasAttribute(o._requiredAttribute)&&t.setAttribute("required","");const s=this.getAttribute(o._nameAttribute);s!==null&&s!==""&&t.setAttribute("name",s)}const e=this.shadowRoot.querySelector(".input-label");e!==null&&(e.textContent=this.label);const r=this.shadowRoot.querySelector(".input-helper");r!==null&&(r.textContent=this.helper),this._addEventListeners()}}const Ne=Object.freeze(Object.defineProperty({__proto__:null,TextInputComponent:o,selector:Ie},Symbol.toStringTag,{value:"Module"})),je="ds-toggle",Fe=`<label class="toggle-wrapper" part="wrapper">
|
|
132
136
|
<input class="toggle-input" type="checkbox" role="switch" />
|
|
133
137
|
<span class="toggle-track" part="track">
|
|
134
138
|
<span class="toggle-thumb" part="thumb"></span>
|
|
135
139
|
</span>
|
|
136
140
|
<span class="toggle-label" part="label"><slot></slot></span>
|
|
137
141
|
</label>
|
|
138
|
-
`,
|
|
142
|
+
`,qe="*{box-sizing:border-box}:host{display:inline-flex}.toggle-wrapper{display:inline-flex;align-items:center;gap:var(--gap-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-base);font-size:var(--font-size-sm);color:var(--color-text-primary)}.toggle-input{position:absolute;opacity:0;width:0;height:0}.toggle-track{position:relative;display:inline-flex;align-items:center;width:2.75rem;height:1.5rem;border-radius:var(--border-radius-full);background-color:var(--color-border-primary);transition:background-color var(--transition-fast);flex-shrink:0}.toggle-input:checked+.toggle-track{background-color:var(--color-primary)}.toggle-thumb{position:absolute;left:3px;width:1.125rem;height:1.125rem;border-radius:var(--border-radius-full);background-color:#fff;box-shadow:var(--shadow-sm);transition:transform var(--transition-fast)}.toggle-input:checked+.toggle-track .toggle-thumb{transform:translate(1.25rem)}.toggle-input:focus-visible+.toggle-track{outline:2px solid var(--color-primary);outline-offset:2px}.toggle-input:disabled+.toggle-track{opacity:.4;cursor:not-allowed}:host([disabled]) .toggle-wrapper{cursor:not-allowed;opacity:.5}:host([size=sm]) .toggle-track{width:2rem;height:1.125rem}:host([size=sm]) .toggle-thumb{width:.875rem;height:.875rem}:host([size=sm]) .toggle-input:checked+.toggle-track .toggle-thumb{transform:translate(.875rem)}:host([size=lg]) .toggle-track{width:3.5rem;height:2rem}:host([size=lg]) .toggle-thumb{width:1.5rem;height:1.5rem}:host([size=lg]) .toggle-input:checked+.toggle-track .toggle-thumb{transform:translate(1.5rem)}:host([variant=success]) .toggle-input:checked+.toggle-track{background-color:var(--color-success)}:host([variant=warning]) .toggle-input:checked+.toggle-track{background-color:var(--color-warning)}:host([variant=error]) .toggle-input:checked+.toggle-track{background-color:var(--color-error)}.toggle-label:empty{display:none}",ut=new CSSStyleSheet;ut.replaceSync(qe);class c extends HTMLElement{static _checkedAttribute="checked";static _disabledAttribute="disabled";static _variantAttribute="variant";static _sizeAttribute="size";static _nameAttribute="name";static _valueAttribute="value";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(ut)}static get observedAttributes(){return[c._checkedAttribute,c._disabledAttribute,c._variantAttribute,c._sizeAttribute]}get checked(){return this.hasAttribute(c._checkedAttribute)}set checked(t){t?this.setAttribute(c._checkedAttribute,""):this.removeAttribute(c._checkedAttribute);const e=this._inputElement;e!=null&&(e.checked=t)}get disabled(){return this.hasAttribute(c._disabledAttribute)}set disabled(t){t?this.setAttribute(c._disabledAttribute,""):this.removeAttribute(c._disabledAttribute);const e=this._inputElement;e!=null&&(e.disabled=t)}get _inputElement(){return this.shadowRoot?.querySelector(".toggle-input")??null}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,r){if(r===e)return;const s=this._inputElement;s!==null&&(t===c._checkedAttribute?s.checked=r!==null:t===c._disabledAttribute&&(s.disabled=r!==null))}_handleChange=()=>{const t=this._inputElement?.checked??!1;t?this.setAttribute(c._checkedAttribute,""):this.removeAttribute(c._checkedAttribute),this.dispatchEvent(new CustomEvent("ds-change",{bubbles:!0,composed:!0,detail:{checked:t}}))};_addEventListeners(){this._inputElement?.addEventListener("change",this._handleChange)}_removeEventListeners(){this._inputElement?.removeEventListener("change",this._handleChange)}_render(){if(this.shadowRoot===null)return;this.shadowRoot.innerHTML=Fe;const t=this._inputElement;t!=null&&(t.checked=this.checked,t.disabled=this.disabled,this.getAttribute(c._nameAttribute)!==null&&this.getAttribute(c._nameAttribute)!==""&&(t.name=this.getAttribute(c._nameAttribute)??""),this.getAttribute(c._valueAttribute)!==null&&this.getAttribute(c._valueAttribute)!==""&&(t.value=this.getAttribute(c._valueAttribute)??"on")),this._addEventListeners()}}const Pe=Object.freeze(Object.defineProperty({__proto__:null,ToggleComponent:c,selector:je},Symbol.toStringTag,{value:"Module"}));a.APPLICATION_NAME=T,a.Alert=Ae,a.Avatar=Re,a.Badge=pe,a.BarMenu=Xt,a.BaseButton=mt,a.BaseCard=he,a.BaseDialog=qt,a.CUSTOM_MESSAGES=H,a.CloseButton=Lt,a.ConfirmButton=Mt,a.ConfirmationDialog=Wt,a.HeaderBodyFooterDialog=Yt,a.NextButton=Nt,a.PreviousButton=It,a.ProgressBar=se,a.Skeleton=le,a.Spinner=te,a.Tag=Ee,a.TextInput=Ne,a.Toggle=Pe,a.Tooltip=$e,a.UndoButton=wt,a.WebComponentsRegistry=ht,a.clearThemes=K,a.switchTheme=vt,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));
|