@popovandrii/ui-elements 0.3.0 → 0.4.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/README.md +26 -5
- package/dist/Button.d.ts +16 -1
- package/dist/ButtonGroup.d.ts +13 -1
- package/dist/Select.d.ts +10 -4
- package/dist/Switch.d.ts +11 -4
- package/dist/base.css +1 -0
- package/dist/index.cjs.js +1 -1
- package/dist/index.d.ts +7 -1
- package/dist/index.es.js +135 -127
- package/dist/index.umd.js +1 -1
- package/dist/style.css +1 -1
- package/dist/theme-dark-neon.css +1 -1
- package/dist/theme-dark.css +1 -1
- package/package.json +10 -4
package/README.md
CHANGED
|
@@ -74,6 +74,13 @@ Theming has two layers:
|
|
|
74
74
|
- **`theme-*.css`** — optional. Each provides one palette scoped under a higher-specificity
|
|
75
75
|
`html[data-theme="..."]` selector, so it overrides the `:root` default whenever the matching
|
|
76
76
|
`data-theme` is set — regardless of CSS import order.
|
|
77
|
+
- **`base.css`** — optional, opt-in. A small page normalize/reset (body, headings, links, form
|
|
78
|
+
controls, tables…). It is **not** bundled into `style.css` so importing the components never
|
|
79
|
+
restyles your page; import it only if you want the reset, alongside `style.css`/a theme.
|
|
80
|
+
|
|
81
|
+
When no `data-theme` is set, `style.css` also follows the OS via
|
|
82
|
+
`@media (prefers-color-scheme: dark)`, so the dark palette applies automatically in dark mode.
|
|
83
|
+
Any explicit `data-theme` always wins over this fallback.
|
|
77
84
|
|
|
78
85
|
Zero-config (light theme, no `data-theme` needed):
|
|
79
86
|
|
|
@@ -86,6 +93,7 @@ Add theme files only when you need other palettes or runtime switching:
|
|
|
86
93
|
```js
|
|
87
94
|
import "@popovandrii/ui-elements/style.css"; // required base (also = light default)
|
|
88
95
|
|
|
96
|
+
// import "@popovandrii/ui-elements/base.css"; // optional opt-in page normalize/reset
|
|
89
97
|
// import "@popovandrii/ui-elements/theme-dark.css";
|
|
90
98
|
// import "@popovandrii/ui-elements/theme-light-neon.css";
|
|
91
99
|
// import "@popovandrii/ui-elements/theme-dark-neon.css";
|
|
@@ -192,6 +200,11 @@ document.addEventListener("ui-select-change", (e) => {
|
|
|
192
200
|
|
|
193
201
|
## Programmatic `setValue`
|
|
194
202
|
|
|
203
|
+
Every component shares one signature: `setValue(el, value, options?)`, where `el`
|
|
204
|
+
is the component's root element and `options` is `{ silent?, flash? }` — `silent: true`
|
|
205
|
+
suppresses the change event, `flash: false` skips the flash animation (both default off /
|
|
206
|
+
on respectively). Button additionally accepts `{ label }`.
|
|
207
|
+
|
|
195
208
|
```js
|
|
196
209
|
const sp = new SpinBox();
|
|
197
210
|
sp.setValue(document.getElementById("mySpinbox"), 3.1415);
|
|
@@ -200,13 +213,16 @@ const sl = new Select();
|
|
|
200
213
|
sl.setValue(document.getElementById("mySelect"), "name"); // matches data-value
|
|
201
214
|
|
|
202
215
|
const sw = new Switch();
|
|
203
|
-
sw.setValue("
|
|
216
|
+
sw.setValue(document.getElementById("mySwitch"), true); // (el, boolean)
|
|
204
217
|
|
|
205
218
|
const bg = new ButtonGroup();
|
|
206
219
|
bg.setValue(document.getElementById("myGroup"), "btncheck2"); // matches input[value]
|
|
207
220
|
|
|
208
221
|
const btn = new Button();
|
|
209
|
-
btn.setValue(document.getElementById("myButton"), "/api/users/42", "Edit profile");
|
|
222
|
+
btn.setValue(document.getElementById("myButton"), "/api/users/42", { label: "Edit profile" });
|
|
223
|
+
|
|
224
|
+
// Quiet bulk fill — write the value without emitting or flashing:
|
|
225
|
+
sl.setValue(document.getElementById("mySelect"), "name", { silent: true, flash: false });
|
|
210
226
|
```
|
|
211
227
|
|
|
212
228
|
## Lifecycle (SPA-friendly)
|
|
@@ -415,10 +431,15 @@ npm publish --access public
|
|
|
415
431
|
npm info @popovandrii/ui-elements@latest
|
|
416
432
|
```
|
|
417
433
|
|
|
434
|
+
`npm publish` runs the `prepublishOnly` script (`node build.js`) automatically, so a
|
|
435
|
+
fresh `dist/` is always built before the tarball is packed — no manual build step
|
|
436
|
+
needed. (`npm pack` does **not** run it; build manually if you pack by hand.)
|
|
437
|
+
|
|
418
438
|
### Releasing
|
|
419
439
|
|
|
420
|
-
`dist/` is git-ignored
|
|
421
|
-
`vX.Y.Z` scheme and point at the merge commit on
|
|
440
|
+
`dist/` is git-ignored and never committed — it is generated at publish time by
|
|
441
|
+
`prepublishOnly`. Tags use the `vX.Y.Z` scheme and point at the merge commit on
|
|
442
|
+
`main`.
|
|
422
443
|
|
|
423
444
|
```sh
|
|
424
445
|
# 1. Bump the version on dev (no auto-tag — we tag on main after the merge)
|
|
@@ -433,7 +454,7 @@ git fetch origin
|
|
|
433
454
|
git tag -a v0.2.0 origin/main -m "Release 0.2.0"
|
|
434
455
|
git push origin v0.2.0
|
|
435
456
|
|
|
436
|
-
# 4.
|
|
457
|
+
# 4. Publish to npm (dist/ is built automatically) — see "Publishing" above
|
|
437
458
|
```
|
|
438
459
|
|
|
439
460
|
On GitLab, create the release from **Deploy → Releases → New release**, pick the
|
package/dist/Button.d.ts
CHANGED
|
@@ -18,7 +18,22 @@ export declare class Button {
|
|
|
18
18
|
constructor(selectors?: Partial<SelectorMap>, debug?: boolean, options?: InitOptions);
|
|
19
19
|
/** Watch the root for added/removed nodes and re-scan (debounced). */
|
|
20
20
|
private observe;
|
|
21
|
-
|
|
21
|
+
/**
|
|
22
|
+
* Sets the button's value (and, for an anchor, its `href`).
|
|
23
|
+
*
|
|
24
|
+
* Unified `setValue(el, value, options)` signature shared across components.
|
|
25
|
+
* Button emits no change event, so `silent` is accepted for signature
|
|
26
|
+
* parity but has no effect here.
|
|
27
|
+
* @param el The `.UIb` element to update.
|
|
28
|
+
* @param value New `data-value` (and `href` when `el` is an `<a>`).
|
|
29
|
+
* @param flash When `false`, the flash animation is skipped (default `true`).
|
|
30
|
+
* @param label Optional new text content for the button.
|
|
31
|
+
*/
|
|
32
|
+
setValue(el: HTMLElement, value: string, { flash, label, }?: {
|
|
33
|
+
silent?: boolean;
|
|
34
|
+
flash?: boolean;
|
|
35
|
+
label?: string;
|
|
36
|
+
}): void;
|
|
22
37
|
destroy(): void;
|
|
23
38
|
private disableEl;
|
|
24
39
|
private enableEl;
|
package/dist/ButtonGroup.d.ts
CHANGED
|
@@ -21,7 +21,19 @@ export declare class ButtonGroup {
|
|
|
21
21
|
/** Watch the root for added/removed nodes and re-scan (debounced). */
|
|
22
22
|
private observe;
|
|
23
23
|
destroy(): void;
|
|
24
|
-
|
|
24
|
+
/**
|
|
25
|
+
* Selects the option whose input `value` matches.
|
|
26
|
+
*
|
|
27
|
+
* Unified `setValue(el, value, options)` signature shared across components.
|
|
28
|
+
* @param el The `.UIbg` group element.
|
|
29
|
+
* @param value Value of the option to select.
|
|
30
|
+
* @param silent When `true`, the `ui-button-group-change` event is not emitted.
|
|
31
|
+
* @param flash When `false`, the flash animation is skipped (default `true`).
|
|
32
|
+
*/
|
|
33
|
+
setValue(el: HTMLElement, value: string, { silent, flash, }?: {
|
|
34
|
+
silent?: boolean;
|
|
35
|
+
flash?: boolean;
|
|
36
|
+
}): void;
|
|
25
37
|
/** Bind every not-yet-bound `.UIbg`. Safe to call repeatedly (SPA re-render). */
|
|
26
38
|
scan(): void;
|
|
27
39
|
private ripple;
|
package/dist/Select.d.ts
CHANGED
|
@@ -36,12 +36,18 @@ export declare class Select {
|
|
|
36
36
|
dispose(): void;
|
|
37
37
|
private disableEl;
|
|
38
38
|
/**
|
|
39
|
+
* Selects the option whose `data-value` matches.
|
|
39
40
|
*
|
|
40
|
-
*
|
|
41
|
-
* @param
|
|
42
|
-
* @
|
|
41
|
+
* Unified `setValue(el, value, options)` signature shared across components.
|
|
42
|
+
* @param el The `.UIselect` element.
|
|
43
|
+
* @param value Value of the option to select.
|
|
44
|
+
* @param silent When `true`, the `ui-select-change` event is not emitted.
|
|
45
|
+
* @param flash When `false`, the flash animation is skipped (default `true`).
|
|
43
46
|
*/
|
|
44
|
-
setValue(el: HTMLElement, value: string | number
|
|
47
|
+
setValue(el: HTMLElement, value: string | number, { silent, flash, }?: {
|
|
48
|
+
silent?: boolean;
|
|
49
|
+
flash?: boolean;
|
|
50
|
+
}): void;
|
|
45
51
|
/** Bind every not-yet-bound `.UIselect`. Safe to call repeatedly (SPA re-render). */
|
|
46
52
|
scan(): void;
|
|
47
53
|
private itemArrow;
|
package/dist/Switch.d.ts
CHANGED
|
@@ -23,11 +23,18 @@ export declare class Switch {
|
|
|
23
23
|
/** Bind every not-yet-bound `.UIsw`. Safe to call repeatedly (SPA re-render). */
|
|
24
24
|
scan(): void;
|
|
25
25
|
/**
|
|
26
|
-
* Sets the state of a
|
|
27
|
-
*
|
|
28
|
-
*
|
|
26
|
+
* Sets the state of a switch element.
|
|
27
|
+
*
|
|
28
|
+
* Unified `setValue(el, value, options)` signature shared across components.
|
|
29
|
+
* @param el The `.UIsw` element to update.
|
|
30
|
+
* @param value New checked state (true/false).
|
|
31
|
+
* @param silent When `true`, the `ui-switch-change` event is not emitted.
|
|
32
|
+
* @param flash When `false`, the flash animation is skipped (default `true`).
|
|
29
33
|
*/
|
|
30
|
-
setValue(
|
|
34
|
+
setValue(el: HTMLElement, value: boolean, { silent, flash, }?: {
|
|
35
|
+
silent?: boolean;
|
|
36
|
+
flash?: boolean;
|
|
37
|
+
}): void;
|
|
31
38
|
private ripple;
|
|
32
39
|
private customEvent;
|
|
33
40
|
}
|
package/dist/base.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
body{background-color:var(--c-g-50);color:var(--c-g-950);padding:0;transition:background .4s}html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{margin:.67em 0;font-size:2em}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{color:inherit;background-color:#0000;text-decoration:none}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}fieldset{border:1px solid var(--c-g-300);margin:0;padding:.35em .75em .625em}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}table{border-collapse:collapse;border-spacing:0}
|
package/dist/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=class{selectors;spinBoxes=null;abortController=new AbortController;debug;root;observer=null;rescanTimer=null;valueControls=new WeakMap;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={main:`UIsp`,btn:`UIsp__btn`,input:`UIsp__input`,disabledBtn:`disabled`};this.selectors={...r,...e},this.scan(),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}state=(e,t,n,r=0,i=0)=>{e==r||e<r?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1),i!==0&&(e==i||e>i?(n.classList.add(this.selectors.disabledBtn),n.disabled=!0):(n.classList.remove(this.selectors.disabledBtn),n.disabled=!1))};destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),this.abortController.abort(),this.spinBoxes?.forEach(e=>{delete e.dataset.uispBound,this.valueControls.delete(e)}),this.spinBoxes=null,this.abortController=new AbortController}disableEl(e){let t=e.querySelector(`.${this.selectors.input}`),n=e.querySelectorAll(`.${this.selectors.btn}`);t&&(t.disabled=!0),n.forEach(e=>{e.classList.add(this.selectors.disabledBtn),e.disabled=!0}),e.setAttribute(`tabindex`,`-1`),e.setAttribute(`aria-disabled`,`true`)}setValue(e,t,{silent:n=!1,flash:r=!0}={}){let i=e.querySelector(`.${this.selectors.input}`);if(!i){this.debug&&console.warn(`UISpinBox: input not found`);return}if(n){let n=this.valueControls.get(e);n?n(t,!0):i.value=String(t)}else i.value=String(t),i.dispatchEvent(new Event(`change`));r&&this.playFlash(e,i)}playFlash(e,t){e.closest(`.ui-no-flash`)||(e.classList.remove(`UIsp--flash`),e.offsetWidth,e.classList.add(`UIsp--flash`),t.addEventListener(`animationend`,()=>e.classList.remove(`UIsp--flash`),{once:!0}))}refresh(e){let t=this.valueControls.get(e);if(!t){this.debug&&console.warn(`UISpinBox: element not bound`);return}let n=e.querySelector(`.${this.selectors.input}`);if(!n){this.debug&&console.warn(`UISpinBox: input not found`);return}t(n.value,!0)}getValidDataNumber=(e,t)=>{let n=e.getAttribute(`data-${t}`);return n===null||n.trim()===``||isNaN(Number(n))?0:Number(n)};scan(){this.spinBoxes=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.spinBoxes.forEach(t=>{if(t.dataset.uispBound)return;t.dataset.uispBound=`1`;let n,r=t.querySelectorAll(`.${this.selectors.btn}`),i=t.querySelector(`.${this.selectors.input}`);this.debug&&(r||console.log(`Buttons (${this.selectors.btn}) not found in container`),i||console.log(`Input (${this.selectors.input}) not found in container`));let a=r[0],o=r[1];i.disabled=!1,[a,o].forEach(e=>{e.classList.remove(this.selectors.disabledBtn),e.disabled=!1}),t.setAttribute(`tabindex`,`0`),t.removeAttribute(`aria-disabled`);let s=t.hasAttribute(`data-decimals`)?this.getValidDataNumber(t,`decimals`):this.getValidDataNumber(t,`step`),c=Math.min(Math.max(Math.trunc(s),0),100),l=this.getValidDataNumber(t,`min`),u=this.getValidDataNumber(t,`max`);if(t.hasAttribute(`data-disabled`)){Number(i.value)<=l&&(i.value=l.toFixed(c)),u===0?i.value=Number(i.value).toFixed(c):Number(i.value)>=u&&(i.value=u.toFixed(c)),this.disableEl(t),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e});return}let d=e=>{t.setAttribute(`aria-valuenow`,String(e)),t.setAttribute(`aria-valuetext`,`${e} items`)},f=(e,t)=>{let n=Number(e);n<l&&(n=l),u!==0&&n>u&&(n=u),i.value=n.toFixed(c),this.state(n,a,o,l,u),d(i.value),t||this.customEvent(i,i.value)};this.valueControls.set(t,f),Number(i.value)<=l&&(i.value=l.toFixed(c)),u===0?i.value=Number(i.value).toFixed(c):(Number(i.value)>=u&&(i.value=u.toFixed(c)),u&&t.setAttribute(`aria-valuemax`,u.toFixed(c))),l&&t.setAttribute(`aria-valuemin`,l.toFixed(c)),this.state(Number(i.value),a,o,l,u),d(i.value);let p=null,m=(e,t=1)=>{i.value=String(Math.abs(Number(i.value)));let n=parseFloat(i.value)||0;return n+=e*t/10**c,e===1&&u!==0&&n>u&&(n=u),e===-1&&n<l&&(n=l),i.value=n.toFixed(c),this.state(Number(i.value),a,o,l,u),d(i.value),i.value},h=(e,t=150)=>{p===null&&(p=window.setInterval(e,t))},g=()=>{p!==null&&(clearInterval(p),p=null)};o.addEventListener(`mousedown`,e=>{let t=e.shiftKey?3:1;h(()=>m(1,t))},{signal:e}),o.addEventListener(`touchstart`,()=>h(()=>m(1)),{signal:e}),[`mouseup`,`mouseleave`,`mouseout`,`touchend`,`touchcancel`].forEach(t=>{o.addEventListener(t,g,{signal:e})}),o.addEventListener(`click`,e=>{let t=e.shiftKey?3:1;p===null&&(n=m(1,t),this.ripple(o),this.customEvent(i,n))},{signal:e}),a.addEventListener(`click`,e=>{let t=e.shiftKey?3:1;p===null&&(n=m(-1,t),this.ripple(a),this.customEvent(i,n))},{signal:e}),a.addEventListener(`mousedown`,e=>{let t=e.shiftKey?3:1;h(()=>m(-1,t),100)},{signal:e}),a.addEventListener(`touchstart`,()=>h(()=>m(-1),100),{signal:e}),[`mouseup`,`mouseleave`,`mouseout`,`touchend`,`touchcancel`].forEach(t=>{a.addEventListener(t,g,{signal:e})}),i.addEventListener(`keydown`,e=>{let t=e.key,n=e.shiftKey?5:1;if([`Backspace`,`Delete`,`ArrowLeft`,`ArrowRight`,`Tab`,`Enter`,`Home`,`End`].includes(t)||(e.ctrlKey||e.metaKey)&&[`a`,`c`,`v`,`x`].includes(t.toLowerCase()))return;if([`e`,`+`,`-`].includes(t)){e.preventDefault();return}if(t===`ArrowUp`||t===`ArrowDown`){e.preventDefault(),m(t===`ArrowUp`?1:-1,n);return}let r=t===`,`?`.`:t,a=/^[0-9]$/.test(r),o=r===`.`,s=i.value.includes(`.`);(c===0&&!a||c>0&&!(a||o)||o&&s)&&e.preventDefault()},{signal:e}),i.addEventListener(`keyup`,e=>{(e.key===`ArrowUp`||e.key===`ArrowDown`)&&this.customEvent(i,i.value)},{signal:e}),i.addEventListener(`change`,()=>f(i.value,!1),{signal:e})})}ripple(e){e.closest(`.ui-no-ripple`)||(e.classList.remove(`ui-ripple`),e.offsetWidth,e.classList.add(`ui-ripple`),e.addEventListener(`animationend`,()=>e.classList.remove(`ui-ripple`),{once:!0}))}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.debug&&console.log(`CustomEvent: data.detail `,n.detail),e.dispatchEvent(new CustomEvent(`ui-spinbox-change`,n))}},t=class{selectors;main=null;abortController=new AbortController;debug;root;observer=null;rescanTimer=null;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={main:`UIsw`,label:`UIsw-label`};this.selectors={...r,...e},this.scan(),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),this.abortController.abort(),this.main?.forEach(e=>delete e.dataset.uiswBound),this.main=null,this.abortController=new AbortController}scan(){this.main=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.main.forEach(t=>{if(t.dataset.uiswBound)return;t.dataset.uiswBound=`1`;let n=t.querySelector(`.${this.selectors.label}`),r=t.querySelector(`input`);n&&n.id&&t.setAttribute(`aria-labelledby`,n.id),t.hasAttribute(`data-originally-disabled`)||t.setAttribute(`data-originally-disabled`,String(r?.disabled??!1));let i=t.getAttribute(`data-originally-disabled`)===`true`;r&&(r.disabled=!1),t.setAttribute(`tabindex`,`0`),t.removeAttribute(`aria-disabled`),i&&(r&&(r.disabled=!0),t.setAttribute(`tabindex`,`-1`),t.setAttribute(`aria-disabled`,`true`),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e})),r&&(r.checked?t.setAttribute(`aria-checked`,`true`):t.setAttribute(`aria-checked`,`false`),r.addEventListener(`change`,()=>{t.setAttribute(`aria-checked`,String(r.checked)),this.customEvent(r,String(r.checked))},{signal:e}),t.addEventListener(`click`,e=>{if(e.target.tagName===`INPUT`)return;let n=e.target.closest(`label`);n||(r.checked=!r.checked),n||r.dispatchEvent(new Event(`change`));let i=t.querySelector(`.UIsw-slider`);i&&this.ripple(i)},{signal:e}),t.addEventListener(`keydown`,e=>{if(r.disabled)return;let n=null;if(e.key===`ArrowRight`?n=!0:e.key===`ArrowLeft`&&(n=!1),n!==null&&(e.preventDefault(),r.checked!==n)){r.checked=n,r.dispatchEvent(new Event(`change`));let e=t.querySelector(`.UIsw-slider`);e&&this.ripple(e)}},{signal:e}))})}setValue(e,t){this.main?.forEach(n=>{let r=n.querySelector(`input#${e}`);if(r){r.checked=t,this.debug&&console.log(`SetValue:`,r.checked),n.setAttribute(`aria-checked`,String(t)),this.customEvent(r,String(t));let e=n.querySelector(`.UIsw-slider`);e&&!n.closest(`.ui-no-flash`)&&(n.classList.remove(`UIsw--flash`),n.offsetWidth,n.classList.add(`UIsw--flash`),e.addEventListener(`animationend`,()=>n.classList.remove(`UIsw--flash`),{once:!0}))}})}ripple(e){e.closest(`.ui-no-ripple`)||(e.classList.remove(`ui-ripple`),e.offsetWidth,e.classList.add(`ui-ripple`),e.addEventListener(`animationend`,()=>e.classList.remove(`ui-ripple`),{once:!0}))}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.debug&&console.log(`CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-switch-change`,n))}},n=class e{selectors;main=null;itemArrowInitialized=new WeakSet;abortController=new AbortController;globalAbortController=new AbortController;debug;root;observer=null;rescanTimer=null;selectMap=new Map;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={idPrefix:`UI-option-`,main:`UIselect`,selected:`UIselect-selected`,arrow:`UIselect-arrow`,optionsList:`UIselect-options`,search:`UIselect-options__search`,items:`UIselect-options__items`,flash:`UIselect--flash`,excludedItems:[`divider`,`test`]};this.selectors={...r,...e},this.scan(),this.initGlobalListener(this.selectors),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}filterExcluded(e,t){return Array.from(e).filter(e=>!t.some(t=>typeof t==`string`?e.classList.contains(t)||e.id===t:e===t))}filterSearch(e,t){let n=t.trim().toLowerCase();return e.filter(e=>{let t=e.dataset.value?.toLowerCase()||``,r=e.textContent?.toLowerCase()||``;return t.includes(n)||r.includes(n)})}destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),e.closeAll(this.selectors),this.abortController.abort(),this.main?.forEach(e=>delete e.dataset.uiselBound),this.selectMap.clear(),this.itemArrowInitialized=new WeakSet,this.main=null,this.abortController=new AbortController}dispose(){this.destroy(),this.globalAbortController.abort()}disableEl(e){e.setAttribute(`tabindex`,`-1`),e.setAttribute(`aria-disabled`,`true`)}setValue(e,t){let n=this.selectMap.get(e);if(!n){this.debug&&console.warn(`UISelect: element not registered`);return}let{input:r,selected:i}=n,a=e.querySelector(`.${this.selectors.optionsList}`);if(!a)return;let o=Array.from(a.querySelectorAll(`.${this.selectors.items} ul li`)),s=this.filterExcluded(o,this.selectors.excludedItems),c=s.find(e=>String(e.dataset.value)===String(t));if(!c){this.debug&&console.warn(`UISelect: value "${t}" not found`);return}s.forEach(e=>e.removeAttribute(`aria-selected`)),c.setAttribute(`aria-selected`,`true`),i.textContent=c.textContent??``,r.value=String(t),r.setAttribute(`value`,String(t)),e.setAttribute(`aria-activedescendant`,c.id||`${this.selectors.idPrefix}${s.indexOf(c)}`),this.customEvent(e,String(t)),e.closest(`.ui-no-flash`)||(e.classList.remove(this.selectors.flash),e.offsetWidth,e.classList.add(this.selectors.flash),e.addEventListener(`animationend`,()=>e.classList.remove(this.selectors.flash),{once:!0}))}scan(){this.main=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.main.forEach(t=>{if(t.dataset.uiselBound)return;let n=t.querySelector(`input[type='hidden']`);try{if(!n)throw Error(`<input type="hidden" name="YourUniqueId">`)}catch(e){return console.warn(`Not found:`,e.message)}t.dataset.uiselBound=`1`;let r=t.querySelector(`.${this.selectors.selected}`),i=t.querySelector(`.${this.selectors.arrow}`),a=t.querySelector(`.${this.selectors.optionsList}`),o=t.querySelector(`.${this.selectors.search} input`);if(t.setAttribute(`tabindex`,`0`),t.removeAttribute(`aria-disabled`),t.hasAttribute(`data-disabled`)){this.disableEl(t),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e});return}this.selectMap.set(t,{input:n,selected:r}),i&&i.addEventListener(`click`,()=>{this.toggle(t,a)},{signal:e}),r.addEventListener(`click`,()=>{this.toggle(t,a)},{signal:e}),t.addEventListener(`click`,()=>{this.itemsPosition(a)},{signal:e});let s=a.querySelectorAll(`.${this.selectors.items} ul li`),c=this.filterExcluded(s,this.selectors.excludedItems),l=t.querySelector(`[aria-selected='true']`);l&&this.defaultSelect(t,l,r,n),o&&o.addEventListener(`input`,i=>{let o=i.target.value.trim(),l=o?new Set(this.filterSearch(c,o)):null;s.forEach(e=>{e.hidden=l?!l.has(e):!1}),this.itemArrow(t,a,r,n,e)},{signal:e}),this.itemArrow(t,a,r,n,e),this.items(t,a,c,r,n,e)})}itemArrow(e,t,n,r,i){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let a=-1,o=n.textContent?n.textContent:``,s=e.querySelector(`.${this.selectors.search} input`);e.addEventListener(`keydown`,i=>{if(i.key===`Tab`){this.close(e,t);return}s&&s.focus();let c=Array.from(t.querySelectorAll(`.${this.selectors.optionsList} ul li`)),l=this.filterExcluded(c,this.selectors.excludedItems),u=l.length;if(u!==0)if(i.key===`ArrowDown`){i.preventDefault(),e.getAttribute(`aria-expanded`)===`false`&&this.toggle(e,t),a=(a+1)%u,n.textContent=l[a].textContent,l.forEach(e=>e.removeAttribute(`aria-selected`)),l[a].setAttribute(`aria-selected`,`true`);let r=l[a].id||`${this.selectors.idPrefix}${a}`;e.setAttribute(`aria-activedescendant`,r),l[a].scrollIntoView({block:`nearest`})}else if(i.key===`ArrowUp`){i.preventDefault(),a=(a-1+u)%u,n.textContent=l[a].textContent,l.forEach(e=>e.removeAttribute(`aria-selected`)),l[a].setAttribute(`aria-selected`,`true`);let t=l[a].id||`${this.selectors.idPrefix}${a}`;e.setAttribute(`aria-activedescendant`,t),l[a].scrollIntoView({block:`nearest`})}else if(i.key===`Enter`)if(i.preventDefault(),a>=0){n.textContent=l[a].textContent,l.forEach(e=>e.removeAttribute(`aria-selected`)),l[a].setAttribute(`aria-selected`,`true`);let i=l[a].id||`${this.selectors.idPrefix}${a}`;e.setAttribute(`aria-activedescendant`,i),r.value=String(l[a].dataset.value),this.customEvent(e,r.value),this.close(e,t)}else this.toggle(e,t);else i.key===`Escape`&&(e.getAttribute(`aria-activedescendant`)||(n.textContent=o),this.close(e,t))},{signal:i})}itemsPosition(e){let t=e.querySelector(`[aria-selected="true"]`);t&&t.scrollIntoView({block:`nearest`})}items(e,t,n,r,i,a){n.forEach((o,s)=>{o.addEventListener(`click`,()=>{let a=n[s];if(a){r.textContent=a.textContent,n.forEach(e=>e.removeAttribute(`aria-selected`)),a.setAttribute(`aria-selected`,`true`);let o=a.id||`${this.selectors.idPrefix}${s}`;e.setAttribute(`aria-expanded`,`false`),e.setAttribute(`aria-activedescendant`,o),i.value=String(n[s].dataset.value),this.customEvent(e,i.value),this.close(e,t)}},{signal:a})})}defaultSelect(e,t,n,r){t&&(r.setAttribute(`value`,t.dataset.value??``),n.textContent=t.textContent??``,e.setAttribute(`aria-activedescendant`,t.id||``))}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.debug&&console.log(`CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-select-change`,n))}toggle(t,n){e.closeAll(this.selectors),n.hidden?(n.hidden=!1,t.setAttribute(`aria-expanded`,`true`)):this.close(t,n)}close(e,t){t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(t=>{let n=t.querySelector(`.${e.optionsList}`);n.hidden=!0,t.setAttribute(`aria-expanded`,`false`)})}initGlobalListener(t){document.addEventListener(`click`,n=>{let r=n.target;[...document.querySelectorAll(`.${t.main}`)].some(e=>e.contains(r))||e.closeAll(t)},{signal:this.globalAbortController.signal})}},r=class{selectors;main=null;abortController=new AbortController;debug;root;observer=null;rescanTimer=null;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={main:`UIbg`,btn:`UIbg-btn`,input:`UIbg-input`};this.selectors={...r,...e},this.scan(),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),this.abortController.abort(),this.main?.forEach(e=>delete e.dataset.uibgBound),this.main=null,this.abortController=new AbortController}setValue(e,t){let n=e.querySelectorAll(`.${this.selectors.input}`),r=e.querySelectorAll(`.${this.selectors.btn}`),i=Array.from(n).findIndex(e=>e.value===t&&!e.disabled);if(i===-1){this.debug&&console.warn(`UIButtonGroup: value "${t}" not found or disabled`);return}n.forEach((e,t)=>{e.checked=t===i,t===i?e.setAttribute(`checked`,``):e.removeAttribute(`checked`)}),r.forEach((e,t)=>{e.setAttribute(`aria-checked`,String(t===i)),e.setAttribute(`tabindex`,t===i?`0`:`-1`)}),this.customEvent(n[i]);let a=r[i];a&&!e.closest(`.ui-no-flash`)&&(a.classList.remove(`UIbg--flash`),a.offsetWidth,a.classList.add(`UIbg--flash`),a.addEventListener(`animationend`,()=>a.classList.remove(`UIbg--flash`),{once:!0}))}scan(){this.main=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.main.forEach(t=>{if(t.dataset.uibgBound)return;t.dataset.uibgBound=`1`,t.querySelectorAll(`.${this.selectors.input}`).forEach(e=>{e.hasAttribute(`data-originally-disabled`)||e.setAttribute(`data-originally-disabled`,String(e.disabled)),e.disabled=e.getAttribute(`data-originally-disabled`)===`true`}),t.removeAttribute(`aria-disabled`);let n=t.querySelector(`.${this.selectors.input}:checked`);n&&this.customEvent(n);let r=t.querySelectorAll(`.${this.selectors.btn}`);r.forEach(t=>{t.addEventListener(`click`,()=>{r.forEach(e=>{e.setAttribute(`aria-checked`,`false`),e.setAttribute(`tabindex`,`-1`)}),t.setAttribute(`aria-checked`,`true`),t.setAttribute(`tabindex`,`0`),t.focus(),this.ripple(t)},{signal:e}),t.addEventListener(`keydown`,e=>{let n=Array.from(r).indexOf(t);if(e.key===`ArrowRight`&&n++,e.key===`ArrowLeft`&&n--,n<0&&(n=r.length-1),n>=r.length&&(n=0),e.key===`Enter`){let t=i[n];t&&!t.disabled&&(i.forEach(e=>{e.checked=!1,e.removeAttribute(`checked`)}),t.checked=!0,t.setAttribute(`checked`,``),this.customEvent(t)),e.preventDefault();return}let a=r[n];a&&(r.forEach(e=>e.setAttribute(`tabindex`,`-1`)),a.setAttribute(`tabindex`,`0`),a.focus())},{signal:e})});let i=t.querySelectorAll(`.${this.selectors.input}`);i.forEach((t,n)=>{this.debug&&(t.id||console.error(`Input #${n} in group has no ID!`),(!t.value||t.value===`on`)&&console.warn(`Input #${t.id} does not have a value specified (currently "${t.value}")`));let a=r[n];a&&(t.tabIndex=-1,a.setAttribute(`role`,`radio`),a.setAttribute(`aria-checked`,String(t.checked)),a.setAttribute(`tabindex`,t.checked?`0`:`-1`),t.disabled?a.setAttribute(`aria-disabled`,`true`):a.removeAttribute(`aria-disabled`),t.addEventListener(`click`,()=>{i.forEach(e=>{e.checked=!1,e.removeAttribute(`checked`)}),i[n].checked=!0,i[n].setAttribute(`checked`,``),this.customEvent(t)},{signal:e}))});let a=Array.from(i).find(e=>e.checked&&!e.disabled)||Array.from(i).find(e=>!e.disabled);if(a){let e=t.querySelector(`label[for="${a.id}"]`);e&&e.setAttribute(`tabindex`,`0`)}})}ripple(e){e.closest(`.ui-no-ripple`)||(e.classList.remove(`ui-ripple`),e.offsetWidth,e.classList.add(`ui-ripple`),e.addEventListener(`animationend`,()=>e.classList.remove(`ui-ripple`),{once:!0}))}customEvent(e){let t={detail:{id:e.id,value:e.value},bubbles:!0};this.debug&&console.log(`CustomEvent:`,t.detail),e.dispatchEvent(new CustomEvent(`ui-button-group-change`,t))}},i=class{selectors;buttons=null;abortController=new AbortController;debug;root;observer=null;rescanTimer=null;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={main:`UIb`};this.selectors={...r,...e},this.scan(),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}setValue(e,t,n){e.dataset.value=t,e.tagName===`A`&&(e.href=t),n!==void 0&&(e.textContent=n),!e.closest(`.ui-no-flash`)&&(e.classList.remove(`UIb--flash`),e.offsetWidth,e.classList.add(`UIb--flash`),e.addEventListener(`animationend`,()=>e.classList.remove(`UIb--flash`),{once:!0}))}destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),this.abortController.abort(),this.buttons?.forEach(e=>delete e.dataset.uibBound),this.buttons=null,this.abortController=new AbortController}disableEl(e){e.tagName===`BUTTON`?e.disabled=!0:(e.setAttribute(`aria-disabled`,`true`),e.setAttribute(`tabindex`,`-1`))}enableEl(e){e.tagName===`BUTTON`?e.disabled=!1:(e.removeAttribute(`aria-disabled`),e.setAttribute(`tabindex`,`0`))}isDisabled(e){return e.tagName===`BUTTON`?e.disabled:e.getAttribute(`aria-disabled`)===`true`}setDisabled(e,t){e.setAttribute(`data-originally-disabled`,String(t)),t?this.disableEl(e):this.enableEl(e)}scan(){this.buttons=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.buttons.forEach(t=>{t.dataset.uibBound||(t.dataset.uibBound=`1`,t.hasAttribute(`data-originally-disabled`)||t.setAttribute(`data-originally-disabled`,String(this.isDisabled(t))),t.getAttribute(`data-originally-disabled`)===`true`?this.disableEl(t):this.enableEl(t),t.addEventListener(`click`,e=>{if(this.isDisabled(t)){e.preventDefault(),e.stopImmediatePropagation();return}t.tagName===`A`&&e.preventDefault(),this.ripple(t),this.customEvent(t,String(t.dataset.value))},{signal:e}))})}ripple(e){e.closest(`.ui-no-ripple`)||(e.classList.remove(`UIb--ripple`),e.offsetWidth,e.classList.add(`UIb--ripple`),e.addEventListener(`animationend`,()=>e.classList.remove(`UIb--ripple`),{once:!0}))}customEvent(e,t){if(!t||t===`undefined`||t.trim()===``){console.warn(`Button data-value="" Not set!`);return}let n={detail:{id:e.id,value:t},bubbles:!0};this.debug&&console.info(`Button CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-button-change`,n))}};function a(e=document){let t=new AbortController,n=()=>15*(parseFloat(getComputedStyle(document.documentElement).fontSize)||16),r=e=>{let t=e.querySelector(`.UIql__text`);if(!t)return;let r=e.getBoundingClientRect(),i=r.left+r.width/2,a=document.documentElement.clientWidth,o=n(),s=i-8,c=a-i-8;e.classList.remove(`UIql--left`,`UIql--right`),i-o/2>=8&&i+o/2<=a-8?t.style.maxWidth=``:c>=s?(e.classList.add(`UIql--right`),t.style.maxWidth=`${Math.min(o,c)}px`):(e.classList.add(`UIql--left`),t.style.maxWidth=`${Math.min(o,s)}px`)},i=e=>{let t=e.target?.closest?.(`.UIql`);t&&r(t)};return e.addEventListener(`pointerover`,i,{signal:t.signal}),e.addEventListener(`focusin`,i,{signal:t.signal}),window.addEventListener(`resize`,()=>{e.querySelectorAll(`.UIql:hover, .UIql:focus`).forEach(r)},{signal:t.signal}),()=>t.abort()}var o=null,s=null,c=null,l=null,u=null;function d(...e){return o??=new i(...e)}function f(...e){return u??=new r(...e)}function p(...e){return s??=new n(...e)}function m(...t){return c??=new e(...t)}function h(...e){return l??=new t(...e)}function g(){o=null,s=null,c=null,l=null,u=null}exports.Button=i,exports.ButtonGroup=r,exports.Select=n,exports.SpinBox=e,exports.Switch=t,exports.getButtonGroupManager=f,exports.getButtonManager=d,exports.getSelectManager=p,exports.getSpinBoxManager=m,exports.getSwitchManager=h,exports.initQuestionTooltips=a,exports.resetManagers=g;
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=class{selectors;spinBoxes=null;abortController=new AbortController;debug;root;observer=null;rescanTimer=null;valueControls=new WeakMap;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={main:`UIsp`,btn:`UIsp__btn`,input:`UIsp__input`,disabledBtn:`disabled`};this.selectors={...r,...e},this.scan(),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}state=(e,t,n,r=0,i=0)=>{e==r||e<r?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1),i!==0&&(e==i||e>i?(n.classList.add(this.selectors.disabledBtn),n.disabled=!0):(n.classList.remove(this.selectors.disabledBtn),n.disabled=!1))};destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),this.abortController.abort(),this.spinBoxes?.forEach(e=>{delete e.dataset.uispBound,this.valueControls.delete(e)}),this.spinBoxes=null,this.abortController=new AbortController}disableEl(e){let t=e.querySelector(`.${this.selectors.input}`),n=e.querySelectorAll(`.${this.selectors.btn}`);t&&(t.disabled=!0),n.forEach(e=>{e.classList.add(this.selectors.disabledBtn),e.disabled=!0}),e.setAttribute(`tabindex`,`-1`),e.setAttribute(`aria-disabled`,`true`)}setValue(e,t,{silent:n=!1,flash:r=!0}={}){let i=e.querySelector(`.${this.selectors.input}`);if(!i){this.debug&&console.warn(`UISpinBox: input not found`);return}if(n){let n=this.valueControls.get(e);n?n(t,!0):i.value=String(t)}else i.value=String(t),i.dispatchEvent(new Event(`change`));r&&this.playFlash(e,i)}playFlash(e,t){e.closest(`.ui-no-flash`)||(e.classList.remove(`UIsp--flash`),e.offsetWidth,e.classList.add(`UIsp--flash`),t.addEventListener(`animationend`,()=>e.classList.remove(`UIsp--flash`),{once:!0}))}refresh(e){let t=this.valueControls.get(e);if(!t){this.debug&&console.warn(`UISpinBox: element not bound`);return}let n=e.querySelector(`.${this.selectors.input}`);if(!n){this.debug&&console.warn(`UISpinBox: input not found`);return}t(n.value,!0)}getValidDataNumber=(e,t)=>{let n=e.getAttribute(`data-${t}`);return n===null||n.trim()===``||isNaN(Number(n))?0:Number(n)};scan(){this.spinBoxes=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.spinBoxes.forEach(t=>{if(t.dataset.uispBound)return;t.dataset.uispBound=`1`;let n,r=t.querySelectorAll(`.${this.selectors.btn}`),i=t.querySelector(`.${this.selectors.input}`),a=r[0],o=r[1];if(!i||!a||!o){this.debug&&(r.length<2&&console.log(`Buttons (${this.selectors.btn}) not found in container`),i||console.log(`Input (${this.selectors.input}) not found in container`));return}i.disabled=!1,[a,o].forEach(e=>{e.classList.remove(this.selectors.disabledBtn),e.disabled=!1}),t.setAttribute(`tabindex`,`0`),t.removeAttribute(`aria-disabled`);let s=t.hasAttribute(`data-decimals`)?this.getValidDataNumber(t,`decimals`):this.getValidDataNumber(t,`step`),c=Math.min(Math.max(Math.trunc(s),0),100),l=this.getValidDataNumber(t,`min`),u=this.getValidDataNumber(t,`max`),d=t.hasAttribute(`data-negative`);if(t.hasAttribute(`data-disabled`)){Number(i.value)<=l&&(i.value=l.toFixed(c)),u===0?i.value=Number(i.value).toFixed(c):Number(i.value)>=u&&(i.value=u.toFixed(c)),this.disableEl(t),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e});return}let f=t.getAttribute(`data-unit`)?.trim(),p=e=>{t.setAttribute(`aria-valuenow`,String(e)),t.setAttribute(`aria-valuetext`,f?`${e} ${f}`:String(e))},m=(e,t)=>{let n=Number(e);Number.isNaN(n)&&(n=l),n<l&&(n=l),u!==0&&n>u&&(n=u),i.value=n.toFixed(c),this.state(n,a,o,l,u),p(i.value),t||this.customEvent(i,i.value)};this.valueControls.set(t,m),Number(i.value)<=l&&(i.value=l.toFixed(c)),u===0?i.value=Number(i.value).toFixed(c):(Number(i.value)>=u&&(i.value=u.toFixed(c)),u&&t.setAttribute(`aria-valuemax`,u.toFixed(c))),l&&t.setAttribute(`aria-valuemin`,l.toFixed(c)),this.state(Number(i.value),a,o,l,u),p(i.value);let h=null,g=(e,t=1)=>{d||(i.value=String(Math.abs(Number(i.value))));let n=parseFloat(i.value)||0;return n+=e*t/10**c,e===1&&u!==0&&n>u&&(n=u),e===-1&&n<l&&(n=l),i.value=n.toFixed(c),this.state(Number(i.value),a,o,l,u),p(i.value),i.value},_=!1,v=(e,t=150)=>{h===null&&(_=!1,h=window.setInterval(e,t))},y=()=>{h!==null&&(clearInterval(h),h=null,_&&this.customEvent(i,i.value))},b=(e,t,n)=>{_=!0,g(e,t),n.disabled&&(y(),_=!1)},x=(t,r,a)=>{t.addEventListener(`mousedown`,e=>{let n=e.shiftKey?3:1;v(()=>b(r,n,t),a)},{signal:e}),t.addEventListener(`touchstart`,()=>v(()=>b(r,1,t),a),{signal:e}),[`mouseup`,`touchend`].forEach(n=>{t.addEventListener(n,y,{signal:e})}),[`mouseleave`,`touchcancel`].forEach(n=>{t.addEventListener(n,()=>{y(),_=!1},{signal:e})}),t.addEventListener(`click`,e=>{if(_){_=!1;return}h===null&&(n=g(r,e.shiftKey?3:1),this.ripple(t),this.customEvent(i,n))},{signal:e})};x(o,1,150),x(a,-1,100),i.addEventListener(`keydown`,e=>{let t=e.key,n=e.shiftKey?5:1;if([`Backspace`,`Delete`,`ArrowLeft`,`ArrowRight`,`Tab`,`Enter`,`Home`,`End`].includes(t)||(e.ctrlKey||e.metaKey)&&[`a`,`c`,`v`,`x`].includes(t.toLowerCase()))return;if([`e`,`+`].includes(t)){e.preventDefault();return}if(t===`-`){let t=i.selectionStart===0,n=(i.selectionEnd??0)>0;(!d||!t||i.value.includes(`-`)&&!n)&&e.preventDefault();return}if(t===`ArrowUp`||t===`ArrowDown`){e.preventDefault(),g(t===`ArrowUp`?1:-1,n);return}let r=t===`,`?`.`:t,a=/^[0-9]$/.test(r),o=r===`.`,s=i.value.includes(`.`);(c===0&&!a||c>0&&!(a||o)||o&&s)&&e.preventDefault()},{signal:e}),i.addEventListener(`keyup`,e=>{(e.key===`ArrowUp`||e.key===`ArrowDown`)&&this.customEvent(i,i.value)},{signal:e}),i.addEventListener(`change`,()=>m(i.value,!1),{signal:e})})}ripple(e){e.closest(`.ui-no-ripple`)||(e.classList.remove(`ui-ripple`),e.offsetWidth,e.classList.add(`ui-ripple`),e.addEventListener(`animationend`,()=>e.classList.remove(`ui-ripple`),{once:!0}))}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.debug&&console.log(`CustomEvent: data.detail `,n.detail),e.dispatchEvent(new CustomEvent(`ui-spinbox-change`,n))}},t=class{selectors;main=null;abortController=new AbortController;debug;root;observer=null;rescanTimer=null;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={main:`UIsw`,label:`UIsw-label`};this.selectors={...r,...e},this.scan(),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),this.abortController.abort(),this.main?.forEach(e=>delete e.dataset.uiswBound),this.main=null,this.abortController=new AbortController}scan(){this.main=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.main.forEach(t=>{if(t.dataset.uiswBound)return;t.dataset.uiswBound=`1`;let n=t.querySelector(`.${this.selectors.label}`),r=t.querySelector(`input`);n&&n.id&&t.setAttribute(`aria-labelledby`,n.id),t.hasAttribute(`data-originally-disabled`)||t.setAttribute(`data-originally-disabled`,String(r?.disabled??!1));let i=t.getAttribute(`data-originally-disabled`)===`true`;r&&(r.disabled=!1),t.setAttribute(`tabindex`,`0`),t.removeAttribute(`aria-disabled`),i&&(r&&(r.disabled=!0),t.setAttribute(`tabindex`,`-1`),t.setAttribute(`aria-disabled`,`true`),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e})),r&&(r.checked?t.setAttribute(`aria-checked`,`true`):t.setAttribute(`aria-checked`,`false`),r.addEventListener(`change`,()=>{t.setAttribute(`aria-checked`,String(r.checked)),this.customEvent(r,String(r.checked))},{signal:e}),t.addEventListener(`click`,e=>{if(e.target.tagName===`INPUT`)return;let n=e.target.closest(`label`);n||(r.checked=!r.checked),n||r.dispatchEvent(new Event(`change`));let i=t.querySelector(`.UIsw-slider`);i&&this.ripple(i)},{signal:e}),t.addEventListener(`keydown`,e=>{if(r.disabled)return;let n=null;if(e.key===`ArrowRight`?n=!0:e.key===`ArrowLeft`?n=!1:(e.key===` `||e.key===`Enter`)&&(n=!r.checked),n!==null&&(e.preventDefault(),r.checked!==n)){r.checked=n,r.dispatchEvent(new Event(`change`));let e=t.querySelector(`.UIsw-slider`);e&&this.ripple(e)}},{signal:e}))})}setValue(e,t,{silent:n=!1,flash:r=!0}={}){let i=e.querySelector(`input`);if(!i){this.debug&&console.warn(`UISwitch: input not found`);return}i.checked=t,this.debug&&console.log(`SetValue:`,i.checked),e.setAttribute(`aria-checked`,String(t)),n||this.customEvent(i,String(t));let a=e.querySelector(`.UIsw-slider`);r&&a&&!e.closest(`.ui-no-flash`)&&(e.classList.remove(`UIsw--flash`),e.offsetWidth,e.classList.add(`UIsw--flash`),a.addEventListener(`animationend`,()=>e.classList.remove(`UIsw--flash`),{once:!0}))}ripple(e){e.closest(`.ui-no-ripple`)||(e.classList.remove(`ui-ripple`),e.offsetWidth,e.classList.add(`ui-ripple`),e.addEventListener(`animationend`,()=>e.classList.remove(`ui-ripple`),{once:!0}))}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.debug&&console.log(`CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-switch-change`,n))}},n=class e{selectors;main=null;itemArrowInitialized=new WeakSet;abortController=new AbortController;globalAbortController=new AbortController;debug;root;observer=null;rescanTimer=null;selectMap=new Map;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={idPrefix:`UI-option-`,main:`UIselect`,selected:`UIselect-selected`,arrow:`UIselect-arrow`,optionsList:`UIselect-options`,search:`UIselect-options__search`,items:`UIselect-options__items`,flash:`UIselect--flash`,excludedItems:[`divider`,`test`]};this.selectors={...r,...e},this.scan(),this.initGlobalListener(this.selectors),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}filterExcluded(e,t){return Array.from(e).filter(e=>!t.some(t=>typeof t==`string`?e.classList.contains(t)||e.id===t:e===t))}filterSearch(e,t){let n=t.trim().toLowerCase();return e.filter(e=>{let t=e.dataset.value?.toLowerCase()||``,r=e.textContent?.toLowerCase()||``;return t.includes(n)||r.includes(n)})}destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),e.closeAll(this.selectors),this.abortController.abort(),this.main?.forEach(e=>delete e.dataset.uiselBound),this.selectMap.clear(),this.itemArrowInitialized=new WeakSet,this.main=null,this.abortController=new AbortController}dispose(){this.destroy(),this.globalAbortController.abort()}disableEl(e){e.setAttribute(`tabindex`,`-1`),e.setAttribute(`aria-disabled`,`true`)}setValue(e,t,{silent:n=!1,flash:r=!0}={}){let i=this.selectMap.get(e);if(!i){this.debug&&console.warn(`UISelect: element not registered`);return}let{input:a,selected:o}=i,s=e.querySelector(`.${this.selectors.optionsList}`);if(!s)return;let c=Array.from(s.querySelectorAll(`.${this.selectors.items} ul li`)),l=this.filterExcluded(c,this.selectors.excludedItems),u=l.find(e=>String(e.dataset.value)===String(t));if(!u){this.debug&&console.warn(`UISelect: value "${t}" not found`);return}l.forEach(e=>e.removeAttribute(`aria-selected`)),u.setAttribute(`aria-selected`,`true`),o.textContent=u.textContent??``,a.value=String(t),a.setAttribute(`value`,String(t)),e.setAttribute(`aria-activedescendant`,u.id||`${this.selectors.idPrefix}${l.indexOf(u)}`),n||this.customEvent(e,String(t)),r&&!e.closest(`.ui-no-flash`)&&(e.classList.remove(this.selectors.flash),e.offsetWidth,e.classList.add(this.selectors.flash),e.addEventListener(`animationend`,()=>e.classList.remove(this.selectors.flash),{once:!0}))}scan(){this.main=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.main.forEach(t=>{if(t.dataset.uiselBound)return;let n=t.querySelector(`input[type='hidden']`);try{if(!n)throw Error(`<input type="hidden" name="YourUniqueId">`)}catch(e){return console.warn(`Not found:`,e.message)}t.dataset.uiselBound=`1`;let r=t.querySelector(`.${this.selectors.selected}`),i=t.querySelector(`.${this.selectors.arrow}`),a=t.querySelector(`.${this.selectors.optionsList}`),o=t.querySelector(`.${this.selectors.search} input`);if(t.setAttribute(`tabindex`,`0`),t.removeAttribute(`aria-disabled`),t.hasAttribute(`data-disabled`)){this.disableEl(t),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e});return}this.selectMap.set(t,{input:n,selected:r}),i&&i.addEventListener(`click`,()=>{this.toggle(t,a)},{signal:e}),r.addEventListener(`click`,()=>{this.toggle(t,a)},{signal:e}),t.addEventListener(`click`,()=>{this.itemsPosition(a)},{signal:e});let s=a.querySelectorAll(`.${this.selectors.items} ul li`),c=this.filterExcluded(s,this.selectors.excludedItems),l=t.querySelector(`[aria-selected='true']`);l&&this.defaultSelect(t,l,r,n),o&&o.addEventListener(`input`,i=>{let o=i.target.value.trim(),l=o?new Set(this.filterSearch(c,o)):null;s.forEach(e=>{e.hidden=l?!l.has(e):!1}),this.itemArrow(t,a,r,n,e)},{signal:e}),this.itemArrow(t,a,r,n,e),this.items(t,a,c,r,n,e)})}itemArrow(e,t,n,r,i){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let a=n.textContent?n.textContent:``,o=e.querySelector(`.${this.selectors.search} input`);e.addEventListener(`keydown`,i=>{if(i.key===`Tab`){this.close(e,t);return}o&&o.focus();let s=Array.from(t.querySelectorAll(`.${this.selectors.items} ul li`)),c=this.filterExcluded(s,this.selectors.excludedItems).filter(e=>!e.hidden),l=c.length;if(l===0)return;let u=c.findIndex(e=>e.getAttribute(`aria-selected`)===`true`),d=t=>{let r=c[t];n.textContent=r.textContent,s.forEach(e=>e.removeAttribute(`aria-selected`)),r.setAttribute(`aria-selected`,`true`),e.setAttribute(`aria-activedescendant`,r.id||`${this.selectors.idPrefix}${t}`),r.scrollIntoView({block:`nearest`})};if(i.key===`ArrowDown`)i.preventDefault(),t.hidden&&this.toggle(e,t),d((u+1)%l);else if(i.key===`ArrowUp`)i.preventDefault(),d(u<=0?l-1:u-1);else if(i.key===`Enter`)if(i.preventDefault(),t.hidden)this.toggle(e,t);else if(u>=0){let i=c[u];n.textContent=i.textContent,e.setAttribute(`aria-activedescendant`,i.id||`${this.selectors.idPrefix}${u}`),r.value=String(i.dataset.value),this.customEvent(e,r.value),this.close(e,t)}else this.toggle(e,t);else i.key===`Escape`&&(e.getAttribute(`aria-activedescendant`)||(n.textContent=a),this.close(e,t))},{signal:i})}itemsPosition(e){let t=e.querySelector(`[aria-selected="true"]`);t&&t.scrollIntoView({block:`nearest`})}items(e,t,n,r,i,a){n.forEach((o,s)=>{o.addEventListener(`click`,()=>{let a=n[s];if(a){r.textContent=a.textContent,n.forEach(e=>e.removeAttribute(`aria-selected`)),a.setAttribute(`aria-selected`,`true`);let o=a.id||`${this.selectors.idPrefix}${s}`;e.setAttribute(`aria-expanded`,`false`),e.setAttribute(`aria-activedescendant`,o),i.value=String(n[s].dataset.value),this.customEvent(e,i.value),this.close(e,t)}},{signal:a})})}defaultSelect(e,t,n,r){t&&(r.setAttribute(`value`,t.dataset.value??``),n.textContent=t.textContent??``,e.setAttribute(`aria-activedescendant`,t.id||``))}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.debug&&console.log(`CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-select-change`,n))}toggle(t,n){e.closeAll(this.selectors),n.hidden?(n.hidden=!1,t.setAttribute(`aria-expanded`,`true`)):this.close(t,n)}close(e,t){t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(t=>{let n=t.querySelector(`.${e.optionsList}`);n&&(n.hidden=!0,t.setAttribute(`aria-expanded`,`false`))})}initGlobalListener(t){document.addEventListener(`click`,n=>{let r=n.target;[...document.querySelectorAll(`.${t.main}`)].some(e=>e.contains(r))||e.closeAll(t)},{signal:this.globalAbortController.signal})}},r=class{selectors;main=null;abortController=new AbortController;debug;root;observer=null;rescanTimer=null;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={main:`UIbg`,btn:`UIbg-btn`,input:`UIbg-input`};this.selectors={...r,...e},this.scan(),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),this.abortController.abort(),this.main?.forEach(e=>delete e.dataset.uibgBound),this.main=null,this.abortController=new AbortController}setValue(e,t,{silent:n=!1,flash:r=!0}={}){let i=e.querySelectorAll(`.${this.selectors.input}`),a=e.querySelectorAll(`.${this.selectors.btn}`),o=Array.from(i).findIndex(e=>e.value===t&&!e.disabled);if(o===-1){this.debug&&console.warn(`UIButtonGroup: value "${t}" not found or disabled`);return}i.forEach((e,t)=>{e.checked=t===o,t===o?e.setAttribute(`checked`,``):e.removeAttribute(`checked`)}),a.forEach((e,t)=>{e.setAttribute(`aria-checked`,String(t===o)),e.setAttribute(`tabindex`,t===o?`0`:`-1`)}),n||this.customEvent(i[o]);let s=a[o];r&&s&&!e.closest(`.ui-no-flash`)&&(s.classList.remove(`UIbg--flash`),s.offsetWidth,s.classList.add(`UIbg--flash`),s.addEventListener(`animationend`,()=>s.classList.remove(`UIbg--flash`),{once:!0}))}scan(){this.main=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.main.forEach(t=>{if(t.dataset.uibgBound)return;t.dataset.uibgBound=`1`;let n=t.querySelectorAll(`.${this.selectors.input}`);n.forEach(e=>{e.hasAttribute(`data-originally-disabled`)||e.setAttribute(`data-originally-disabled`,String(e.disabled)),e.disabled=e.getAttribute(`data-originally-disabled`)===`true`}),t.removeAttribute(`aria-disabled`);let r=t.querySelector(`.${this.selectors.input}:checked`);r&&this.customEvent(r);let i=t.querySelectorAll(`.${this.selectors.btn}`),a=e=>{let t=n[e],r=i[e];!t||t.disabled||!r||(n.forEach(e=>{e.checked=!1,e.removeAttribute(`checked`)}),t.checked=!0,t.setAttribute(`checked`,``),i.forEach(e=>{e.setAttribute(`aria-checked`,`false`),e.setAttribute(`tabindex`,`-1`)}),r.setAttribute(`aria-checked`,`true`),r.setAttribute(`tabindex`,`0`),r.focus(),this.ripple(r),this.customEvent(t))};i.forEach((t,r)=>{t.addEventListener(`click`,()=>{let e=n[r];!e||e.disabled||(i.forEach(e=>{e.setAttribute(`aria-checked`,`false`),e.setAttribute(`tabindex`,`-1`)}),t.setAttribute(`aria-checked`,`true`),t.setAttribute(`tabindex`,`0`),t.focus(),this.ripple(t))},{signal:e}),t.addEventListener(`keydown`,e=>{let r=Array.from(i).indexOf(t);if(e.key===` `||e.key===`Enter`){e.preventDefault(),a(r);return}let o=0;if(e.key===`ArrowRight`||e.key===`ArrowDown`)o=1;else if(e.key===`ArrowLeft`||e.key===`ArrowUp`)o=-1;else return;e.preventDefault();let s=r;for(let e=0;e<i.length&&(s+=o,s<0&&(s=i.length-1),s>=i.length&&(s=0),!(n[s]&&!n[s].disabled));e++);s!==r&&a(s)},{signal:e})}),n.forEach((t,r)=>{this.debug&&(t.id||console.error(`Input #${r} in group has no ID!`),(!t.value||t.value===`on`)&&console.warn(`Input #${t.id} does not have a value specified (currently "${t.value}")`));let a=i[r];a&&(t.tabIndex=-1,a.setAttribute(`role`,`radio`),a.setAttribute(`aria-checked`,String(t.checked)),a.setAttribute(`tabindex`,t.checked?`0`:`-1`),t.disabled?a.setAttribute(`aria-disabled`,`true`):a.removeAttribute(`aria-disabled`),t.addEventListener(`click`,()=>{n.forEach(e=>{e.checked=!1,e.removeAttribute(`checked`)}),n[r].checked=!0,n[r].setAttribute(`checked`,``),this.customEvent(t)},{signal:e}))});let o=Array.from(n).find(e=>e.checked&&!e.disabled)||Array.from(n).find(e=>!e.disabled);if(o){let e=t.querySelector(`label[for="${o.id}"]`);e&&e.setAttribute(`tabindex`,`0`)}})}ripple(e){e.closest(`.ui-no-ripple`)||(e.classList.remove(`ui-ripple`),e.offsetWidth,e.classList.add(`ui-ripple`),e.addEventListener(`animationend`,()=>e.classList.remove(`ui-ripple`),{once:!0}))}customEvent(e){let t={detail:{id:e.id,value:e.value},bubbles:!0};this.debug&&console.log(`CustomEvent:`,t.detail),e.dispatchEvent(new CustomEvent(`ui-button-group-change`,t))}},i=class{selectors;buttons=null;abortController=new AbortController;debug;root;observer=null;rescanTimer=null;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={main:`UIb`};this.selectors={...r,...e},this.scan(),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}setValue(e,t,{flash:n=!0,label:r}={}){e.dataset.value=t,e.tagName===`A`&&(e.href=t),r!==void 0&&(e.textContent=r),!(!n||e.closest(`.ui-no-flash`))&&(e.classList.remove(`UIb--flash`),e.offsetWidth,e.classList.add(`UIb--flash`),e.addEventListener(`animationend`,()=>e.classList.remove(`UIb--flash`),{once:!0}))}destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),this.abortController.abort(),this.buttons?.forEach(e=>delete e.dataset.uibBound),this.buttons=null,this.abortController=new AbortController}disableEl(e){e.tagName===`BUTTON`?e.disabled=!0:(e.setAttribute(`aria-disabled`,`true`),e.setAttribute(`tabindex`,`-1`))}enableEl(e){e.tagName===`BUTTON`?e.disabled=!1:(e.removeAttribute(`aria-disabled`),e.setAttribute(`tabindex`,`0`))}isDisabled(e){return e.tagName===`BUTTON`?e.disabled:e.getAttribute(`aria-disabled`)===`true`}setDisabled(e,t){e.setAttribute(`data-originally-disabled`,String(t)),t?this.disableEl(e):this.enableEl(e)}scan(){this.buttons=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.buttons.forEach(t=>{t.dataset.uibBound||(t.dataset.uibBound=`1`,t.hasAttribute(`data-originally-disabled`)||t.setAttribute(`data-originally-disabled`,String(this.isDisabled(t))),t.getAttribute(`data-originally-disabled`)===`true`?this.disableEl(t):this.enableEl(t),t.addEventListener(`click`,e=>{if(this.isDisabled(t)){e.preventDefault(),e.stopImmediatePropagation();return}if(t.tagName===`A`){let n=t.getAttribute(`href`);(!n||n===`#`)&&e.preventDefault()}this.ripple(t),this.customEvent(t,String(t.dataset.value))},{signal:e}))})}ripple(e){e.closest(`.ui-no-ripple`)||(e.classList.remove(`UIb--ripple`),e.offsetWidth,e.classList.add(`UIb--ripple`),e.addEventListener(`animationend`,()=>e.classList.remove(`UIb--ripple`),{once:!0}))}customEvent(e,t){if(!t||t===`undefined`||t.trim()===``){this.debug&&console.warn(`Button data-value="" Not set!`);return}let n={detail:{id:e.id,value:t},bubbles:!0};this.debug&&console.info(`Button CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-button-change`,n))}};function a(e=document){let t=new AbortController,n=()=>15*(parseFloat(getComputedStyle(document.documentElement).fontSize)||16),r=e=>{let t=e.querySelector(`.UIql__text`);if(!t)return;let r=e.getBoundingClientRect(),i=r.left+r.width/2,a=document.documentElement.clientWidth,o=n(),s=i-8,c=a-i-8;e.classList.remove(`UIql--left`,`UIql--right`),i-o/2>=8&&i+o/2<=a-8?t.style.maxWidth=``:c>=s?(e.classList.add(`UIql--right`),t.style.maxWidth=`${Math.min(o,c)}px`):(e.classList.add(`UIql--left`),t.style.maxWidth=`${Math.min(o,s)}px`)},i=e=>{let t=e.target?.closest?.(`.UIql`);t&&r(t)};return e.addEventListener(`pointerover`,i,{signal:t.signal}),e.addEventListener(`focusin`,i,{signal:t.signal}),window.addEventListener(`resize`,()=>{e.querySelectorAll(`.UIql:hover, .UIql:focus`).forEach(r)},{signal:t.signal}),()=>t.abort()}var o=null,s=null,c=null,l=null,u=null;function d(...e){return o??=new i(...e)}function f(...e){return u??=new r(...e)}function p(...e){return s??=new n(...e)}function m(...t){return c??=new e(...t)}function h(...e){return l??=new t(...e)}function g(){o?.destroy(),u?.destroy(),s?.dispose(),c?.destroy(),l?.destroy(),o=null,s=null,c=null,l=null,u=null}exports.Button=i,exports.ButtonGroup=r,exports.Select=n,exports.SpinBox=e,exports.Switch=t,exports.getButtonGroupManager=f,exports.getButtonManager=d,exports.getSelectManager=p,exports.getSpinBoxManager=m,exports.getSwitchManager=h,exports.initQuestionTooltips=a,exports.resetManagers=g;
|
package/dist/index.d.ts
CHANGED
|
@@ -14,5 +14,11 @@ export declare function getButtonGroupManager(...args: ConstructorParameters<typ
|
|
|
14
14
|
export declare function getSelectManager(...args: ConstructorParameters<typeof Select>): Select;
|
|
15
15
|
export declare function getSpinBoxManager(...args: ConstructorParameters<typeof SpinBox>): SpinBox;
|
|
16
16
|
export declare function getSwitchManager(...args: ConstructorParameters<typeof Switch>): Switch;
|
|
17
|
-
/**
|
|
17
|
+
/**
|
|
18
|
+
* Tear down the cached singletons and drop them so the next getXManager()
|
|
19
|
+
* builds a fresh one. Each teardown is idempotent, so this is safe even if the
|
|
20
|
+
* consumer already called destroy() on a manager. Select gets the full
|
|
21
|
+
* dispose() (its lifetime-scoped outside-click listener too); the rest only
|
|
22
|
+
* own scan-scoped listeners, which destroy() releases.
|
|
23
|
+
*/
|
|
18
24
|
export declare function resetManagers(): void;
|
package/dist/index.es.js
CHANGED
|
@@ -84,13 +84,15 @@ var e = class {
|
|
|
84
84
|
this.spinBoxes.forEach((t) => {
|
|
85
85
|
if (t.dataset.uispBound) return;
|
|
86
86
|
t.dataset.uispBound = "1";
|
|
87
|
-
let n, r = t.querySelectorAll(`.${this.selectors.btn}`), i = t.querySelector(`.${this.selectors.input}`);
|
|
88
|
-
|
|
89
|
-
|
|
87
|
+
let n, r = t.querySelectorAll(`.${this.selectors.btn}`), i = t.querySelector(`.${this.selectors.input}`), a = r[0], o = r[1];
|
|
88
|
+
if (!i || !a || !o) {
|
|
89
|
+
this.debug && (r.length < 2 && console.log(`Buttons (${this.selectors.btn}) not found in container`), i || console.log(`Input (${this.selectors.input}) not found in container`));
|
|
90
|
+
return;
|
|
91
|
+
}
|
|
90
92
|
i.disabled = !1, [a, o].forEach((e) => {
|
|
91
93
|
e.classList.remove(this.selectors.disabledBtn), e.disabled = !1;
|
|
92
94
|
}), t.setAttribute("tabindex", "0"), t.removeAttribute("aria-disabled");
|
|
93
|
-
let s = t.hasAttribute("data-decimals") ? this.getValidDataNumber(t, "decimals") : this.getValidDataNumber(t, "step"), c = Math.min(Math.max(Math.trunc(s), 0), 100), l = this.getValidDataNumber(t, "min"), u = this.getValidDataNumber(t, "max");
|
|
95
|
+
let s = t.hasAttribute("data-decimals") ? this.getValidDataNumber(t, "decimals") : this.getValidDataNumber(t, "step"), c = Math.min(Math.max(Math.trunc(s), 0), 100), l = this.getValidDataNumber(t, "min"), u = this.getValidDataNumber(t, "max"), d = t.hasAttribute("data-negative");
|
|
94
96
|
if (t.hasAttribute("data-disabled")) {
|
|
95
97
|
Number(i.value) <= l && (i.value = l.toFixed(c)), u === 0 ? i.value = Number(i.value).toFixed(c) : Number(i.value) >= u && (i.value = u.toFixed(c)), this.disableEl(t), t.addEventListener("click", (e) => {
|
|
96
98
|
e.preventDefault(), e.stopImmediatePropagation();
|
|
@@ -100,51 +102,42 @@ var e = class {
|
|
|
100
102
|
});
|
|
101
103
|
return;
|
|
102
104
|
}
|
|
103
|
-
let
|
|
104
|
-
t.setAttribute("aria-valuenow", String(e)), t.setAttribute("aria-valuetext", `${e}
|
|
105
|
-
},
|
|
105
|
+
let f = t.getAttribute("data-unit")?.trim(), p = (e) => {
|
|
106
|
+
t.setAttribute("aria-valuenow", String(e)), t.setAttribute("aria-valuetext", f ? `${e} ${f}` : String(e));
|
|
107
|
+
}, m = (e, t) => {
|
|
106
108
|
let n = Number(e);
|
|
107
|
-
n < l && (n = l), u !== 0 && n > u && (n = u), i.value = n.toFixed(c), this.state(n, a, o, l, u),
|
|
109
|
+
Number.isNaN(n) && (n = l), n < l && (n = l), u !== 0 && n > u && (n = u), i.value = n.toFixed(c), this.state(n, a, o, l, u), p(i.value), t || this.customEvent(i, i.value);
|
|
108
110
|
};
|
|
109
|
-
this.valueControls.set(t,
|
|
110
|
-
let
|
|
111
|
-
i.value = String(Math.abs(Number(i.value)));
|
|
111
|
+
this.valueControls.set(t, m), Number(i.value) <= l && (i.value = l.toFixed(c)), u === 0 ? i.value = Number(i.value).toFixed(c) : (Number(i.value) >= u && (i.value = u.toFixed(c)), u && t.setAttribute("aria-valuemax", u.toFixed(c))), l && t.setAttribute("aria-valuemin", l.toFixed(c)), this.state(Number(i.value), a, o, l, u), p(i.value);
|
|
112
|
+
let h = null, g = (e, t = 1) => {
|
|
113
|
+
d || (i.value = String(Math.abs(Number(i.value))));
|
|
112
114
|
let n = parseFloat(i.value) || 0;
|
|
113
|
-
return n += e * t / 10 ** c, e === 1 && u !== 0 && n > u && (n = u), e === -1 && n < l && (n = l), i.value = n.toFixed(c), this.state(Number(i.value), a, o, l, u),
|
|
114
|
-
},
|
|
115
|
-
|
|
116
|
-
},
|
|
117
|
-
|
|
115
|
+
return n += e * t / 10 ** c, e === 1 && u !== 0 && n > u && (n = u), e === -1 && n < l && (n = l), i.value = n.toFixed(c), this.state(Number(i.value), a, o, l, u), p(i.value), i.value;
|
|
116
|
+
}, _ = !1, v = (e, t = 150) => {
|
|
117
|
+
h === null && (_ = !1, h = window.setInterval(e, t));
|
|
118
|
+
}, y = () => {
|
|
119
|
+
h !== null && (clearInterval(h), h = null, _ && this.customEvent(i, i.value));
|
|
120
|
+
}, b = (e, t, n) => {
|
|
121
|
+
_ = !0, g(e, t), n.disabled && (y(), _ = !1);
|
|
122
|
+
}, x = (t, r, a) => {
|
|
123
|
+
t.addEventListener("mousedown", (e) => {
|
|
124
|
+
let n = e.shiftKey ? 3 : 1;
|
|
125
|
+
v(() => b(r, n, t), a);
|
|
126
|
+
}, { signal: e }), t.addEventListener("touchstart", () => v(() => b(r, 1, t), a), { signal: e }), ["mouseup", "touchend"].forEach((n) => {
|
|
127
|
+
t.addEventListener(n, y, { signal: e });
|
|
128
|
+
}), ["mouseleave", "touchcancel"].forEach((n) => {
|
|
129
|
+
t.addEventListener(n, () => {
|
|
130
|
+
y(), _ = !1;
|
|
131
|
+
}, { signal: e });
|
|
132
|
+
}), t.addEventListener("click", (e) => {
|
|
133
|
+
if (_) {
|
|
134
|
+
_ = !1;
|
|
135
|
+
return;
|
|
136
|
+
}
|
|
137
|
+
h === null && (n = g(r, e.shiftKey ? 3 : 1), this.ripple(t), this.customEvent(i, n));
|
|
138
|
+
}, { signal: e });
|
|
118
139
|
};
|
|
119
|
-
o.addEventListener("
|
|
120
|
-
let t = e.shiftKey ? 3 : 1;
|
|
121
|
-
h(() => m(1, t));
|
|
122
|
-
}, { signal: e }), o.addEventListener("touchstart", () => h(() => m(1)), { signal: e }), [
|
|
123
|
-
"mouseup",
|
|
124
|
-
"mouseleave",
|
|
125
|
-
"mouseout",
|
|
126
|
-
"touchend",
|
|
127
|
-
"touchcancel"
|
|
128
|
-
].forEach((t) => {
|
|
129
|
-
o.addEventListener(t, g, { signal: e });
|
|
130
|
-
}), o.addEventListener("click", (e) => {
|
|
131
|
-
let t = e.shiftKey ? 3 : 1;
|
|
132
|
-
p === null && (n = m(1, t), this.ripple(o), this.customEvent(i, n));
|
|
133
|
-
}, { signal: e }), a.addEventListener("click", (e) => {
|
|
134
|
-
let t = e.shiftKey ? 3 : 1;
|
|
135
|
-
p === null && (n = m(-1, t), this.ripple(a), this.customEvent(i, n));
|
|
136
|
-
}, { signal: e }), a.addEventListener("mousedown", (e) => {
|
|
137
|
-
let t = e.shiftKey ? 3 : 1;
|
|
138
|
-
h(() => m(-1, t), 100);
|
|
139
|
-
}, { signal: e }), a.addEventListener("touchstart", () => h(() => m(-1), 100), { signal: e }), [
|
|
140
|
-
"mouseup",
|
|
141
|
-
"mouseleave",
|
|
142
|
-
"mouseout",
|
|
143
|
-
"touchend",
|
|
144
|
-
"touchcancel"
|
|
145
|
-
].forEach((t) => {
|
|
146
|
-
a.addEventListener(t, g, { signal: e });
|
|
147
|
-
}), i.addEventListener("keydown", (e) => {
|
|
140
|
+
x(o, 1, 150), x(a, -1, 100), i.addEventListener("keydown", (e) => {
|
|
148
141
|
let t = e.key, n = e.shiftKey ? 5 : 1;
|
|
149
142
|
if ([
|
|
150
143
|
"Backspace",
|
|
@@ -161,23 +154,24 @@ var e = class {
|
|
|
161
154
|
"v",
|
|
162
155
|
"x"
|
|
163
156
|
].includes(t.toLowerCase())) return;
|
|
164
|
-
if ([
|
|
165
|
-
"e",
|
|
166
|
-
"+",
|
|
167
|
-
"-"
|
|
168
|
-
].includes(t)) {
|
|
157
|
+
if (["e", "+"].includes(t)) {
|
|
169
158
|
e.preventDefault();
|
|
170
159
|
return;
|
|
171
160
|
}
|
|
161
|
+
if (t === "-") {
|
|
162
|
+
let t = i.selectionStart === 0, n = (i.selectionEnd ?? 0) > 0;
|
|
163
|
+
(!d || !t || i.value.includes("-") && !n) && e.preventDefault();
|
|
164
|
+
return;
|
|
165
|
+
}
|
|
172
166
|
if (t === "ArrowUp" || t === "ArrowDown") {
|
|
173
|
-
e.preventDefault(),
|
|
167
|
+
e.preventDefault(), g(t === "ArrowUp" ? 1 : -1, n);
|
|
174
168
|
return;
|
|
175
169
|
}
|
|
176
170
|
let r = t === "," ? "." : t, a = /^[0-9]$/.test(r), o = r === ".", s = i.value.includes(".");
|
|
177
171
|
(c === 0 && !a || c > 0 && !(a || o) || o && s) && e.preventDefault();
|
|
178
172
|
}, { signal: e }), i.addEventListener("keyup", (e) => {
|
|
179
173
|
(e.key === "ArrowUp" || e.key === "ArrowDown") && this.customEvent(i, i.value);
|
|
180
|
-
}, { signal: e }), i.addEventListener("change", () =>
|
|
174
|
+
}, { signal: e }), i.addEventListener("change", () => m(i.value, !1), { signal: e });
|
|
181
175
|
});
|
|
182
176
|
}
|
|
183
177
|
ripple(e) {
|
|
@@ -251,7 +245,7 @@ var e = class {
|
|
|
251
245
|
}, { signal: e }), t.addEventListener("keydown", (e) => {
|
|
252
246
|
if (r.disabled) return;
|
|
253
247
|
let n = null;
|
|
254
|
-
if (e.key === "ArrowRight" ? n = !0 : e.key === "ArrowLeft" && (n = !
|
|
248
|
+
if (e.key === "ArrowRight" ? n = !0 : e.key === "ArrowLeft" ? n = !1 : (e.key === " " || e.key === "Enter") && (n = !r.checked), n !== null && (e.preventDefault(), r.checked !== n)) {
|
|
255
249
|
r.checked = n, r.dispatchEvent(new Event("change"));
|
|
256
250
|
let e = t.querySelector(".UIsw-slider");
|
|
257
251
|
e && this.ripple(e);
|
|
@@ -259,15 +253,15 @@ var e = class {
|
|
|
259
253
|
}, { signal: e }));
|
|
260
254
|
});
|
|
261
255
|
}
|
|
262
|
-
setValue(e, t) {
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
});
|
|
256
|
+
setValue(e, t, { silent: n = !1, flash: r = !0 } = {}) {
|
|
257
|
+
let i = e.querySelector("input");
|
|
258
|
+
if (!i) {
|
|
259
|
+
this.debug && console.warn("UISwitch: input not found");
|
|
260
|
+
return;
|
|
261
|
+
}
|
|
262
|
+
i.checked = t, this.debug && console.log("SetValue:", i.checked), e.setAttribute("aria-checked", String(t)), n || this.customEvent(i, String(t));
|
|
263
|
+
let a = e.querySelector(".UIsw-slider");
|
|
264
|
+
r && a && !e.closest(".ui-no-flash") && (e.classList.remove("UIsw--flash"), e.offsetWidth, e.classList.add("UIsw--flash"), a.addEventListener("animationend", () => e.classList.remove("UIsw--flash"), { once: !0 }));
|
|
271
265
|
}
|
|
272
266
|
ripple(e) {
|
|
273
267
|
e.closest(".ui-no-ripple") || (e.classList.remove("ui-ripple"), e.offsetWidth, e.classList.add("ui-ripple"), e.addEventListener("animationend", () => e.classList.remove("ui-ripple"), { once: !0 }));
|
|
@@ -341,20 +335,20 @@ var e = class {
|
|
|
341
335
|
disableEl(e) {
|
|
342
336
|
e.setAttribute("tabindex", "-1"), e.setAttribute("aria-disabled", "true");
|
|
343
337
|
}
|
|
344
|
-
setValue(e, t) {
|
|
345
|
-
let
|
|
346
|
-
if (!
|
|
338
|
+
setValue(e, t, { silent: n = !1, flash: r = !0 } = {}) {
|
|
339
|
+
let i = this.selectMap.get(e);
|
|
340
|
+
if (!i) {
|
|
347
341
|
this.debug && console.warn("UISelect: element not registered");
|
|
348
342
|
return;
|
|
349
343
|
}
|
|
350
|
-
let { input:
|
|
351
|
-
if (!
|
|
352
|
-
let
|
|
353
|
-
if (!
|
|
344
|
+
let { input: a, selected: o } = i, s = e.querySelector(`.${this.selectors.optionsList}`);
|
|
345
|
+
if (!s) return;
|
|
346
|
+
let c = Array.from(s.querySelectorAll(`.${this.selectors.items} ul li`)), l = this.filterExcluded(c, this.selectors.excludedItems), u = l.find((e) => String(e.dataset.value) === String(t));
|
|
347
|
+
if (!u) {
|
|
354
348
|
this.debug && console.warn(`UISelect: value "${t}" not found`);
|
|
355
349
|
return;
|
|
356
350
|
}
|
|
357
|
-
|
|
351
|
+
l.forEach((e) => e.removeAttribute("aria-selected")), u.setAttribute("aria-selected", "true"), o.textContent = u.textContent ?? "", a.value = String(t), a.setAttribute("value", String(t)), e.setAttribute("aria-activedescendant", u.id || `${this.selectors.idPrefix}${l.indexOf(u)}`), n || this.customEvent(e, String(t)), r && !e.closest(".ui-no-flash") && (e.classList.remove(this.selectors.flash), e.offsetWidth, e.classList.add(this.selectors.flash), e.addEventListener("animationend", () => e.classList.remove(this.selectors.flash), { once: !0 }));
|
|
358
352
|
}
|
|
359
353
|
scan() {
|
|
360
354
|
this.main = this.root.querySelectorAll(`.${this.selectors.main}`);
|
|
@@ -400,28 +394,27 @@ var e = class {
|
|
|
400
394
|
itemArrow(e, t, n, r, i) {
|
|
401
395
|
if (this.itemArrowInitialized.has(e)) return;
|
|
402
396
|
this.itemArrowInitialized.add(e);
|
|
403
|
-
let a =
|
|
397
|
+
let a = n.textContent ? n.textContent : "", o = e.querySelector(`.${this.selectors.search} input`);
|
|
404
398
|
e.addEventListener("keydown", (i) => {
|
|
405
399
|
if (i.key === "Tab") {
|
|
406
400
|
this.close(e, t);
|
|
407
401
|
return;
|
|
408
402
|
}
|
|
409
|
-
|
|
410
|
-
let
|
|
411
|
-
if (
|
|
412
|
-
|
|
413
|
-
let r =
|
|
414
|
-
e.setAttribute("aria-activedescendant", r),
|
|
415
|
-
}
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
e.setAttribute("aria-activedescendant", i), r.value = String(l[a].dataset.value), this.customEvent(e, r.value), this.close(e, t);
|
|
403
|
+
o && o.focus();
|
|
404
|
+
let s = Array.from(t.querySelectorAll(`.${this.selectors.items} ul li`)), c = this.filterExcluded(s, this.selectors.excludedItems).filter((e) => !e.hidden), l = c.length;
|
|
405
|
+
if (l === 0) return;
|
|
406
|
+
let u = c.findIndex((e) => e.getAttribute("aria-selected") === "true"), d = (t) => {
|
|
407
|
+
let r = c[t];
|
|
408
|
+
n.textContent = r.textContent, s.forEach((e) => e.removeAttribute("aria-selected")), r.setAttribute("aria-selected", "true"), e.setAttribute("aria-activedescendant", r.id || `${this.selectors.idPrefix}${t}`), r.scrollIntoView({ block: "nearest" });
|
|
409
|
+
};
|
|
410
|
+
if (i.key === "ArrowDown") i.preventDefault(), t.hidden && this.toggle(e, t), d((u + 1) % l);
|
|
411
|
+
else if (i.key === "ArrowUp") i.preventDefault(), d(u <= 0 ? l - 1 : u - 1);
|
|
412
|
+
else if (i.key === "Enter") if (i.preventDefault(), t.hidden) this.toggle(e, t);
|
|
413
|
+
else if (u >= 0) {
|
|
414
|
+
let i = c[u];
|
|
415
|
+
n.textContent = i.textContent, e.setAttribute("aria-activedescendant", i.id || `${this.selectors.idPrefix}${u}`), r.value = String(i.dataset.value), this.customEvent(e, r.value), this.close(e, t);
|
|
423
416
|
} else this.toggle(e, t);
|
|
424
|
-
else i.key === "Escape" && (e.getAttribute("aria-activedescendant") || (n.textContent =
|
|
417
|
+
else i.key === "Escape" && (e.getAttribute("aria-activedescendant") || (n.textContent = a), this.close(e, t));
|
|
425
418
|
}, { signal: i });
|
|
426
419
|
}
|
|
427
420
|
itemsPosition(e) {
|
|
@@ -462,7 +455,7 @@ var e = class {
|
|
|
462
455
|
static closeAll(e) {
|
|
463
456
|
document.querySelectorAll(`.${e.main}`).forEach((t) => {
|
|
464
457
|
let n = t.querySelector(`.${e.optionsList}`);
|
|
465
|
-
n.hidden = !0, t.setAttribute("aria-expanded", "false");
|
|
458
|
+
n && (n.hidden = !0, t.setAttribute("aria-expanded", "false"));
|
|
466
459
|
});
|
|
467
460
|
}
|
|
468
461
|
initGlobalListener(t) {
|
|
@@ -505,62 +498,73 @@ var e = class {
|
|
|
505
498
|
destroy() {
|
|
506
499
|
this.observer?.disconnect(), this.observer = null, this.rescanTimer !== null && (clearTimeout(this.rescanTimer), this.rescanTimer = null), this.abortController.abort(), this.main?.forEach((e) => delete e.dataset.uibgBound), this.main = null, this.abortController = new AbortController();
|
|
507
500
|
}
|
|
508
|
-
setValue(e, t) {
|
|
509
|
-
let
|
|
510
|
-
if (
|
|
501
|
+
setValue(e, t, { silent: n = !1, flash: r = !0 } = {}) {
|
|
502
|
+
let i = e.querySelectorAll(`.${this.selectors.input}`), a = e.querySelectorAll(`.${this.selectors.btn}`), o = Array.from(i).findIndex((e) => e.value === t && !e.disabled);
|
|
503
|
+
if (o === -1) {
|
|
511
504
|
this.debug && console.warn(`UIButtonGroup: value "${t}" not found or disabled`);
|
|
512
505
|
return;
|
|
513
506
|
}
|
|
514
|
-
|
|
515
|
-
e.checked = t ===
|
|
516
|
-
}),
|
|
517
|
-
e.setAttribute("aria-checked", String(t ===
|
|
518
|
-
}), this.customEvent(
|
|
519
|
-
let
|
|
520
|
-
|
|
507
|
+
i.forEach((e, t) => {
|
|
508
|
+
e.checked = t === o, t === o ? e.setAttribute("checked", "") : e.removeAttribute("checked");
|
|
509
|
+
}), a.forEach((e, t) => {
|
|
510
|
+
e.setAttribute("aria-checked", String(t === o)), e.setAttribute("tabindex", t === o ? "0" : "-1");
|
|
511
|
+
}), n || this.customEvent(i[o]);
|
|
512
|
+
let s = a[o];
|
|
513
|
+
r && s && !e.closest(".ui-no-flash") && (s.classList.remove("UIbg--flash"), s.offsetWidth, s.classList.add("UIbg--flash"), s.addEventListener("animationend", () => s.classList.remove("UIbg--flash"), { once: !0 }));
|
|
521
514
|
}
|
|
522
515
|
scan() {
|
|
523
516
|
this.main = this.root.querySelectorAll(`.${this.selectors.main}`);
|
|
524
517
|
let e = this.abortController.signal;
|
|
525
518
|
this.main.forEach((t) => {
|
|
526
519
|
if (t.dataset.uibgBound) return;
|
|
527
|
-
t.dataset.uibgBound = "1"
|
|
520
|
+
t.dataset.uibgBound = "1";
|
|
521
|
+
let n = t.querySelectorAll(`.${this.selectors.input}`);
|
|
522
|
+
n.forEach((e) => {
|
|
528
523
|
e.hasAttribute("data-originally-disabled") || e.setAttribute("data-originally-disabled", String(e.disabled)), e.disabled = e.getAttribute("data-originally-disabled") === "true";
|
|
529
524
|
}), t.removeAttribute("aria-disabled");
|
|
530
|
-
let
|
|
531
|
-
|
|
532
|
-
let
|
|
533
|
-
|
|
525
|
+
let r = t.querySelector(`.${this.selectors.input}:checked`);
|
|
526
|
+
r && this.customEvent(r);
|
|
527
|
+
let i = t.querySelectorAll(`.${this.selectors.btn}`), a = (e) => {
|
|
528
|
+
let t = n[e], r = i[e];
|
|
529
|
+
!t || t.disabled || !r || (n.forEach((e) => {
|
|
530
|
+
e.checked = !1, e.removeAttribute("checked");
|
|
531
|
+
}), t.checked = !0, t.setAttribute("checked", ""), i.forEach((e) => {
|
|
532
|
+
e.setAttribute("aria-checked", "false"), e.setAttribute("tabindex", "-1");
|
|
533
|
+
}), r.setAttribute("aria-checked", "true"), r.setAttribute("tabindex", "0"), r.focus(), this.ripple(r), this.customEvent(t));
|
|
534
|
+
};
|
|
535
|
+
i.forEach((t, r) => {
|
|
534
536
|
t.addEventListener("click", () => {
|
|
535
|
-
|
|
537
|
+
let e = n[r];
|
|
538
|
+
!e || e.disabled || (i.forEach((e) => {
|
|
536
539
|
e.setAttribute("aria-checked", "false"), e.setAttribute("tabindex", "-1");
|
|
537
|
-
}), t.setAttribute("aria-checked", "true"), t.setAttribute("tabindex", "0"), t.focus(), this.ripple(t);
|
|
540
|
+
}), t.setAttribute("aria-checked", "true"), t.setAttribute("tabindex", "0"), t.focus(), this.ripple(t));
|
|
538
541
|
}, { signal: e }), t.addEventListener("keydown", (e) => {
|
|
539
|
-
let
|
|
540
|
-
if (e.key === "
|
|
541
|
-
|
|
542
|
-
t && !t.disabled && (i.forEach((e) => {
|
|
543
|
-
e.checked = !1, e.removeAttribute("checked");
|
|
544
|
-
}), t.checked = !0, t.setAttribute("checked", ""), this.customEvent(t)), e.preventDefault();
|
|
542
|
+
let r = Array.from(i).indexOf(t);
|
|
543
|
+
if (e.key === " " || e.key === "Enter") {
|
|
544
|
+
e.preventDefault(), a(r);
|
|
545
545
|
return;
|
|
546
546
|
}
|
|
547
|
-
let
|
|
548
|
-
|
|
547
|
+
let o = 0;
|
|
548
|
+
if (e.key === "ArrowRight" || e.key === "ArrowDown") o = 1;
|
|
549
|
+
else if (e.key === "ArrowLeft" || e.key === "ArrowUp") o = -1;
|
|
550
|
+
else return;
|
|
551
|
+
e.preventDefault();
|
|
552
|
+
let s = r;
|
|
553
|
+
for (let e = 0; e < i.length && (s += o, s < 0 && (s = i.length - 1), s >= i.length && (s = 0), !(n[s] && !n[s].disabled)); e++);
|
|
554
|
+
s !== r && a(s);
|
|
549
555
|
}, { signal: e });
|
|
550
|
-
})
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
this.debug && (t.id || console.error(`Input #${n} in group has no ID!`), (!t.value || t.value === "on") && console.warn(`Input #${t.id} does not have a value specified (currently "${t.value}")`));
|
|
554
|
-
let a = r[n];
|
|
556
|
+
}), n.forEach((t, r) => {
|
|
557
|
+
this.debug && (t.id || console.error(`Input #${r} in group has no ID!`), (!t.value || t.value === "on") && console.warn(`Input #${t.id} does not have a value specified (currently "${t.value}")`));
|
|
558
|
+
let a = i[r];
|
|
555
559
|
a && (t.tabIndex = -1, a.setAttribute("role", "radio"), a.setAttribute("aria-checked", String(t.checked)), a.setAttribute("tabindex", t.checked ? "0" : "-1"), t.disabled ? a.setAttribute("aria-disabled", "true") : a.removeAttribute("aria-disabled"), t.addEventListener("click", () => {
|
|
556
|
-
|
|
560
|
+
n.forEach((e) => {
|
|
557
561
|
e.checked = !1, e.removeAttribute("checked");
|
|
558
|
-
}),
|
|
562
|
+
}), n[r].checked = !0, n[r].setAttribute("checked", ""), this.customEvent(t);
|
|
559
563
|
}, { signal: e }));
|
|
560
564
|
});
|
|
561
|
-
let
|
|
562
|
-
if (
|
|
563
|
-
let e = t.querySelector(`label[for="${
|
|
565
|
+
let o = Array.from(n).find((e) => e.checked && !e.disabled) || Array.from(n).find((e) => !e.disabled);
|
|
566
|
+
if (o) {
|
|
567
|
+
let e = t.querySelector(`label[for="${o.id}"]`);
|
|
564
568
|
e && e.setAttribute("tabindex", "0");
|
|
565
569
|
}
|
|
566
570
|
});
|
|
@@ -605,8 +609,8 @@ var e = class {
|
|
|
605
609
|
subtree: !0
|
|
606
610
|
});
|
|
607
611
|
}
|
|
608
|
-
setValue(e, t, n) {
|
|
609
|
-
e.dataset.value = t, e.tagName === "A" && (e.href = t),
|
|
612
|
+
setValue(e, t, { flash: n = !0, label: r } = {}) {
|
|
613
|
+
e.dataset.value = t, e.tagName === "A" && (e.href = t), r !== void 0 && (e.textContent = r), !(!n || e.closest(".ui-no-flash")) && (e.classList.remove("UIb--flash"), e.offsetWidth, e.classList.add("UIb--flash"), e.addEventListener("animationend", () => e.classList.remove("UIb--flash"), { once: !0 }));
|
|
610
614
|
}
|
|
611
615
|
destroy() {
|
|
612
616
|
this.observer?.disconnect(), this.observer = null, this.rescanTimer !== null && (clearTimeout(this.rescanTimer), this.rescanTimer = null), this.abortController.abort(), this.buttons?.forEach((e) => delete e.dataset.uibBound), this.buttons = null, this.abortController = new AbortController();
|
|
@@ -632,7 +636,11 @@ var e = class {
|
|
|
632
636
|
e.preventDefault(), e.stopImmediatePropagation();
|
|
633
637
|
return;
|
|
634
638
|
}
|
|
635
|
-
t.tagName === "A"
|
|
639
|
+
if (t.tagName === "A") {
|
|
640
|
+
let n = t.getAttribute("href");
|
|
641
|
+
(!n || n === "#") && e.preventDefault();
|
|
642
|
+
}
|
|
643
|
+
this.ripple(t), this.customEvent(t, String(t.dataset.value));
|
|
636
644
|
}, { signal: e }));
|
|
637
645
|
});
|
|
638
646
|
}
|
|
@@ -641,7 +649,7 @@ var e = class {
|
|
|
641
649
|
}
|
|
642
650
|
customEvent(e, t) {
|
|
643
651
|
if (!t || t === "undefined" || t.trim() === "") {
|
|
644
|
-
console.warn("Button data-value=\"\" Not set!");
|
|
652
|
+
this.debug && console.warn("Button data-value=\"\" Not set!");
|
|
645
653
|
return;
|
|
646
654
|
}
|
|
647
655
|
let n = {
|
|
@@ -689,7 +697,7 @@ function h(...e) {
|
|
|
689
697
|
return l ??= new t(...e);
|
|
690
698
|
}
|
|
691
699
|
function g() {
|
|
692
|
-
o = null, s = null, c = null, l = null, u = null;
|
|
700
|
+
o?.destroy(), u?.destroy(), s?.dispose(), c?.destroy(), l?.destroy(), o = null, s = null, c = null, l = null, u = null;
|
|
693
701
|
}
|
|
694
702
|
//#endregion
|
|
695
703
|
export { i as Button, r as ButtonGroup, n as Select, e as SpinBox, t as Switch, f as getButtonGroupManager, d as getButtonManager, p as getSelectManager, m as getSpinBoxManager, h as getSwitchManager, a as initQuestionTooltips, g as resetManagers };
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.UiElements={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t=class{selectors;spinBoxes=null;abortController=new AbortController;debug;root;observer=null;rescanTimer=null;valueControls=new WeakMap;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={main:`UIsp`,btn:`UIsp__btn`,input:`UIsp__input`,disabledBtn:`disabled`};this.selectors={...r,...e},this.scan(),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}state=(e,t,n,r=0,i=0)=>{e==r||e<r?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1),i!==0&&(e==i||e>i?(n.classList.add(this.selectors.disabledBtn),n.disabled=!0):(n.classList.remove(this.selectors.disabledBtn),n.disabled=!1))};destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),this.abortController.abort(),this.spinBoxes?.forEach(e=>{delete e.dataset.uispBound,this.valueControls.delete(e)}),this.spinBoxes=null,this.abortController=new AbortController}disableEl(e){let t=e.querySelector(`.${this.selectors.input}`),n=e.querySelectorAll(`.${this.selectors.btn}`);t&&(t.disabled=!0),n.forEach(e=>{e.classList.add(this.selectors.disabledBtn),e.disabled=!0}),e.setAttribute(`tabindex`,`-1`),e.setAttribute(`aria-disabled`,`true`)}setValue(e,t,{silent:n=!1,flash:r=!0}={}){let i=e.querySelector(`.${this.selectors.input}`);if(!i){this.debug&&console.warn(`UISpinBox: input not found`);return}if(n){let n=this.valueControls.get(e);n?n(t,!0):i.value=String(t)}else i.value=String(t),i.dispatchEvent(new Event(`change`));r&&this.playFlash(e,i)}playFlash(e,t){e.closest(`.ui-no-flash`)||(e.classList.remove(`UIsp--flash`),e.offsetWidth,e.classList.add(`UIsp--flash`),t.addEventListener(`animationend`,()=>e.classList.remove(`UIsp--flash`),{once:!0}))}refresh(e){let t=this.valueControls.get(e);if(!t){this.debug&&console.warn(`UISpinBox: element not bound`);return}let n=e.querySelector(`.${this.selectors.input}`);if(!n){this.debug&&console.warn(`UISpinBox: input not found`);return}t(n.value,!0)}getValidDataNumber=(e,t)=>{let n=e.getAttribute(`data-${t}`);return n===null||n.trim()===``||isNaN(Number(n))?0:Number(n)};scan(){this.spinBoxes=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.spinBoxes.forEach(t=>{if(t.dataset.uispBound)return;t.dataset.uispBound=`1`;let n,r=t.querySelectorAll(`.${this.selectors.btn}`),i=t.querySelector(`.${this.selectors.input}`);this.debug&&(r||console.log(`Buttons (${this.selectors.btn}) not found in container`),i||console.log(`Input (${this.selectors.input}) not found in container`));let a=r[0],o=r[1];i.disabled=!1,[a,o].forEach(e=>{e.classList.remove(this.selectors.disabledBtn),e.disabled=!1}),t.setAttribute(`tabindex`,`0`),t.removeAttribute(`aria-disabled`);let s=t.hasAttribute(`data-decimals`)?this.getValidDataNumber(t,`decimals`):this.getValidDataNumber(t,`step`),c=Math.min(Math.max(Math.trunc(s),0),100),l=this.getValidDataNumber(t,`min`),u=this.getValidDataNumber(t,`max`);if(t.hasAttribute(`data-disabled`)){Number(i.value)<=l&&(i.value=l.toFixed(c)),u===0?i.value=Number(i.value).toFixed(c):Number(i.value)>=u&&(i.value=u.toFixed(c)),this.disableEl(t),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e});return}let d=e=>{t.setAttribute(`aria-valuenow`,String(e)),t.setAttribute(`aria-valuetext`,`${e} items`)},f=(e,t)=>{let n=Number(e);n<l&&(n=l),u!==0&&n>u&&(n=u),i.value=n.toFixed(c),this.state(n,a,o,l,u),d(i.value),t||this.customEvent(i,i.value)};this.valueControls.set(t,f),Number(i.value)<=l&&(i.value=l.toFixed(c)),u===0?i.value=Number(i.value).toFixed(c):(Number(i.value)>=u&&(i.value=u.toFixed(c)),u&&t.setAttribute(`aria-valuemax`,u.toFixed(c))),l&&t.setAttribute(`aria-valuemin`,l.toFixed(c)),this.state(Number(i.value),a,o,l,u),d(i.value);let p=null,m=(e,t=1)=>{i.value=String(Math.abs(Number(i.value)));let n=parseFloat(i.value)||0;return n+=e*t/10**c,e===1&&u!==0&&n>u&&(n=u),e===-1&&n<l&&(n=l),i.value=n.toFixed(c),this.state(Number(i.value),a,o,l,u),d(i.value),i.value},h=(e,t=150)=>{p===null&&(p=window.setInterval(e,t))},g=()=>{p!==null&&(clearInterval(p),p=null)};o.addEventListener(`mousedown`,e=>{let t=e.shiftKey?3:1;h(()=>m(1,t))},{signal:e}),o.addEventListener(`touchstart`,()=>h(()=>m(1)),{signal:e}),[`mouseup`,`mouseleave`,`mouseout`,`touchend`,`touchcancel`].forEach(t=>{o.addEventListener(t,g,{signal:e})}),o.addEventListener(`click`,e=>{let t=e.shiftKey?3:1;p===null&&(n=m(1,t),this.ripple(o),this.customEvent(i,n))},{signal:e}),a.addEventListener(`click`,e=>{let t=e.shiftKey?3:1;p===null&&(n=m(-1,t),this.ripple(a),this.customEvent(i,n))},{signal:e}),a.addEventListener(`mousedown`,e=>{let t=e.shiftKey?3:1;h(()=>m(-1,t),100)},{signal:e}),a.addEventListener(`touchstart`,()=>h(()=>m(-1),100),{signal:e}),[`mouseup`,`mouseleave`,`mouseout`,`touchend`,`touchcancel`].forEach(t=>{a.addEventListener(t,g,{signal:e})}),i.addEventListener(`keydown`,e=>{let t=e.key,n=e.shiftKey?5:1;if([`Backspace`,`Delete`,`ArrowLeft`,`ArrowRight`,`Tab`,`Enter`,`Home`,`End`].includes(t)||(e.ctrlKey||e.metaKey)&&[`a`,`c`,`v`,`x`].includes(t.toLowerCase()))return;if([`e`,`+`,`-`].includes(t)){e.preventDefault();return}if(t===`ArrowUp`||t===`ArrowDown`){e.preventDefault(),m(t===`ArrowUp`?1:-1,n);return}let r=t===`,`?`.`:t,a=/^[0-9]$/.test(r),o=r===`.`,s=i.value.includes(`.`);(c===0&&!a||c>0&&!(a||o)||o&&s)&&e.preventDefault()},{signal:e}),i.addEventListener(`keyup`,e=>{(e.key===`ArrowUp`||e.key===`ArrowDown`)&&this.customEvent(i,i.value)},{signal:e}),i.addEventListener(`change`,()=>f(i.value,!1),{signal:e})})}ripple(e){e.closest(`.ui-no-ripple`)||(e.classList.remove(`ui-ripple`),e.offsetWidth,e.classList.add(`ui-ripple`),e.addEventListener(`animationend`,()=>e.classList.remove(`ui-ripple`),{once:!0}))}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.debug&&console.log(`CustomEvent: data.detail `,n.detail),e.dispatchEvent(new CustomEvent(`ui-spinbox-change`,n))}},n=class{selectors;main=null;abortController=new AbortController;debug;root;observer=null;rescanTimer=null;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={main:`UIsw`,label:`UIsw-label`};this.selectors={...r,...e},this.scan(),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),this.abortController.abort(),this.main?.forEach(e=>delete e.dataset.uiswBound),this.main=null,this.abortController=new AbortController}scan(){this.main=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.main.forEach(t=>{if(t.dataset.uiswBound)return;t.dataset.uiswBound=`1`;let n=t.querySelector(`.${this.selectors.label}`),r=t.querySelector(`input`);n&&n.id&&t.setAttribute(`aria-labelledby`,n.id),t.hasAttribute(`data-originally-disabled`)||t.setAttribute(`data-originally-disabled`,String(r?.disabled??!1));let i=t.getAttribute(`data-originally-disabled`)===`true`;r&&(r.disabled=!1),t.setAttribute(`tabindex`,`0`),t.removeAttribute(`aria-disabled`),i&&(r&&(r.disabled=!0),t.setAttribute(`tabindex`,`-1`),t.setAttribute(`aria-disabled`,`true`),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e})),r&&(r.checked?t.setAttribute(`aria-checked`,`true`):t.setAttribute(`aria-checked`,`false`),r.addEventListener(`change`,()=>{t.setAttribute(`aria-checked`,String(r.checked)),this.customEvent(r,String(r.checked))},{signal:e}),t.addEventListener(`click`,e=>{if(e.target.tagName===`INPUT`)return;let n=e.target.closest(`label`);n||(r.checked=!r.checked),n||r.dispatchEvent(new Event(`change`));let i=t.querySelector(`.UIsw-slider`);i&&this.ripple(i)},{signal:e}),t.addEventListener(`keydown`,e=>{if(r.disabled)return;let n=null;if(e.key===`ArrowRight`?n=!0:e.key===`ArrowLeft`&&(n=!1),n!==null&&(e.preventDefault(),r.checked!==n)){r.checked=n,r.dispatchEvent(new Event(`change`));let e=t.querySelector(`.UIsw-slider`);e&&this.ripple(e)}},{signal:e}))})}setValue(e,t){this.main?.forEach(n=>{let r=n.querySelector(`input#${e}`);if(r){r.checked=t,this.debug&&console.log(`SetValue:`,r.checked),n.setAttribute(`aria-checked`,String(t)),this.customEvent(r,String(t));let e=n.querySelector(`.UIsw-slider`);e&&!n.closest(`.ui-no-flash`)&&(n.classList.remove(`UIsw--flash`),n.offsetWidth,n.classList.add(`UIsw--flash`),e.addEventListener(`animationend`,()=>n.classList.remove(`UIsw--flash`),{once:!0}))}})}ripple(e){e.closest(`.ui-no-ripple`)||(e.classList.remove(`ui-ripple`),e.offsetWidth,e.classList.add(`ui-ripple`),e.addEventListener(`animationend`,()=>e.classList.remove(`ui-ripple`),{once:!0}))}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.debug&&console.log(`CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-switch-change`,n))}},r=class e{selectors;main=null;itemArrowInitialized=new WeakSet;abortController=new AbortController;globalAbortController=new AbortController;debug;root;observer=null;rescanTimer=null;selectMap=new Map;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={idPrefix:`UI-option-`,main:`UIselect`,selected:`UIselect-selected`,arrow:`UIselect-arrow`,optionsList:`UIselect-options`,search:`UIselect-options__search`,items:`UIselect-options__items`,flash:`UIselect--flash`,excludedItems:[`divider`,`test`]};this.selectors={...r,...e},this.scan(),this.initGlobalListener(this.selectors),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}filterExcluded(e,t){return Array.from(e).filter(e=>!t.some(t=>typeof t==`string`?e.classList.contains(t)||e.id===t:e===t))}filterSearch(e,t){let n=t.trim().toLowerCase();return e.filter(e=>{let t=e.dataset.value?.toLowerCase()||``,r=e.textContent?.toLowerCase()||``;return t.includes(n)||r.includes(n)})}destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),e.closeAll(this.selectors),this.abortController.abort(),this.main?.forEach(e=>delete e.dataset.uiselBound),this.selectMap.clear(),this.itemArrowInitialized=new WeakSet,this.main=null,this.abortController=new AbortController}dispose(){this.destroy(),this.globalAbortController.abort()}disableEl(e){e.setAttribute(`tabindex`,`-1`),e.setAttribute(`aria-disabled`,`true`)}setValue(e,t){let n=this.selectMap.get(e);if(!n){this.debug&&console.warn(`UISelect: element not registered`);return}let{input:r,selected:i}=n,a=e.querySelector(`.${this.selectors.optionsList}`);if(!a)return;let o=Array.from(a.querySelectorAll(`.${this.selectors.items} ul li`)),s=this.filterExcluded(o,this.selectors.excludedItems),c=s.find(e=>String(e.dataset.value)===String(t));if(!c){this.debug&&console.warn(`UISelect: value "${t}" not found`);return}s.forEach(e=>e.removeAttribute(`aria-selected`)),c.setAttribute(`aria-selected`,`true`),i.textContent=c.textContent??``,r.value=String(t),r.setAttribute(`value`,String(t)),e.setAttribute(`aria-activedescendant`,c.id||`${this.selectors.idPrefix}${s.indexOf(c)}`),this.customEvent(e,String(t)),e.closest(`.ui-no-flash`)||(e.classList.remove(this.selectors.flash),e.offsetWidth,e.classList.add(this.selectors.flash),e.addEventListener(`animationend`,()=>e.classList.remove(this.selectors.flash),{once:!0}))}scan(){this.main=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.main.forEach(t=>{if(t.dataset.uiselBound)return;let n=t.querySelector(`input[type='hidden']`);try{if(!n)throw Error(`<input type="hidden" name="YourUniqueId">`)}catch(e){return console.warn(`Not found:`,e.message)}t.dataset.uiselBound=`1`;let r=t.querySelector(`.${this.selectors.selected}`),i=t.querySelector(`.${this.selectors.arrow}`),a=t.querySelector(`.${this.selectors.optionsList}`),o=t.querySelector(`.${this.selectors.search} input`);if(t.setAttribute(`tabindex`,`0`),t.removeAttribute(`aria-disabled`),t.hasAttribute(`data-disabled`)){this.disableEl(t),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e});return}this.selectMap.set(t,{input:n,selected:r}),i&&i.addEventListener(`click`,()=>{this.toggle(t,a)},{signal:e}),r.addEventListener(`click`,()=>{this.toggle(t,a)},{signal:e}),t.addEventListener(`click`,()=>{this.itemsPosition(a)},{signal:e});let s=a.querySelectorAll(`.${this.selectors.items} ul li`),c=this.filterExcluded(s,this.selectors.excludedItems),l=t.querySelector(`[aria-selected='true']`);l&&this.defaultSelect(t,l,r,n),o&&o.addEventListener(`input`,i=>{let o=i.target.value.trim(),l=o?new Set(this.filterSearch(c,o)):null;s.forEach(e=>{e.hidden=l?!l.has(e):!1}),this.itemArrow(t,a,r,n,e)},{signal:e}),this.itemArrow(t,a,r,n,e),this.items(t,a,c,r,n,e)})}itemArrow(e,t,n,r,i){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let a=-1,o=n.textContent?n.textContent:``,s=e.querySelector(`.${this.selectors.search} input`);e.addEventListener(`keydown`,i=>{if(i.key===`Tab`){this.close(e,t);return}s&&s.focus();let c=Array.from(t.querySelectorAll(`.${this.selectors.optionsList} ul li`)),l=this.filterExcluded(c,this.selectors.excludedItems),u=l.length;if(u!==0)if(i.key===`ArrowDown`){i.preventDefault(),e.getAttribute(`aria-expanded`)===`false`&&this.toggle(e,t),a=(a+1)%u,n.textContent=l[a].textContent,l.forEach(e=>e.removeAttribute(`aria-selected`)),l[a].setAttribute(`aria-selected`,`true`);let r=l[a].id||`${this.selectors.idPrefix}${a}`;e.setAttribute(`aria-activedescendant`,r),l[a].scrollIntoView({block:`nearest`})}else if(i.key===`ArrowUp`){i.preventDefault(),a=(a-1+u)%u,n.textContent=l[a].textContent,l.forEach(e=>e.removeAttribute(`aria-selected`)),l[a].setAttribute(`aria-selected`,`true`);let t=l[a].id||`${this.selectors.idPrefix}${a}`;e.setAttribute(`aria-activedescendant`,t),l[a].scrollIntoView({block:`nearest`})}else if(i.key===`Enter`)if(i.preventDefault(),a>=0){n.textContent=l[a].textContent,l.forEach(e=>e.removeAttribute(`aria-selected`)),l[a].setAttribute(`aria-selected`,`true`);let i=l[a].id||`${this.selectors.idPrefix}${a}`;e.setAttribute(`aria-activedescendant`,i),r.value=String(l[a].dataset.value),this.customEvent(e,r.value),this.close(e,t)}else this.toggle(e,t);else i.key===`Escape`&&(e.getAttribute(`aria-activedescendant`)||(n.textContent=o),this.close(e,t))},{signal:i})}itemsPosition(e){let t=e.querySelector(`[aria-selected="true"]`);t&&t.scrollIntoView({block:`nearest`})}items(e,t,n,r,i,a){n.forEach((o,s)=>{o.addEventListener(`click`,()=>{let a=n[s];if(a){r.textContent=a.textContent,n.forEach(e=>e.removeAttribute(`aria-selected`)),a.setAttribute(`aria-selected`,`true`);let o=a.id||`${this.selectors.idPrefix}${s}`;e.setAttribute(`aria-expanded`,`false`),e.setAttribute(`aria-activedescendant`,o),i.value=String(n[s].dataset.value),this.customEvent(e,i.value),this.close(e,t)}},{signal:a})})}defaultSelect(e,t,n,r){t&&(r.setAttribute(`value`,t.dataset.value??``),n.textContent=t.textContent??``,e.setAttribute(`aria-activedescendant`,t.id||``))}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.debug&&console.log(`CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-select-change`,n))}toggle(t,n){e.closeAll(this.selectors),n.hidden?(n.hidden=!1,t.setAttribute(`aria-expanded`,`true`)):this.close(t,n)}close(e,t){t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(t=>{let n=t.querySelector(`.${e.optionsList}`);n.hidden=!0,t.setAttribute(`aria-expanded`,`false`)})}initGlobalListener(t){document.addEventListener(`click`,n=>{let r=n.target;[...document.querySelectorAll(`.${t.main}`)].some(e=>e.contains(r))||e.closeAll(t)},{signal:this.globalAbortController.signal})}},i=class{selectors;main=null;abortController=new AbortController;debug;root;observer=null;rescanTimer=null;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={main:`UIbg`,btn:`UIbg-btn`,input:`UIbg-input`};this.selectors={...r,...e},this.scan(),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),this.abortController.abort(),this.main?.forEach(e=>delete e.dataset.uibgBound),this.main=null,this.abortController=new AbortController}setValue(e,t){let n=e.querySelectorAll(`.${this.selectors.input}`),r=e.querySelectorAll(`.${this.selectors.btn}`),i=Array.from(n).findIndex(e=>e.value===t&&!e.disabled);if(i===-1){this.debug&&console.warn(`UIButtonGroup: value "${t}" not found or disabled`);return}n.forEach((e,t)=>{e.checked=t===i,t===i?e.setAttribute(`checked`,``):e.removeAttribute(`checked`)}),r.forEach((e,t)=>{e.setAttribute(`aria-checked`,String(t===i)),e.setAttribute(`tabindex`,t===i?`0`:`-1`)}),this.customEvent(n[i]);let a=r[i];a&&!e.closest(`.ui-no-flash`)&&(a.classList.remove(`UIbg--flash`),a.offsetWidth,a.classList.add(`UIbg--flash`),a.addEventListener(`animationend`,()=>a.classList.remove(`UIbg--flash`),{once:!0}))}scan(){this.main=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.main.forEach(t=>{if(t.dataset.uibgBound)return;t.dataset.uibgBound=`1`,t.querySelectorAll(`.${this.selectors.input}`).forEach(e=>{e.hasAttribute(`data-originally-disabled`)||e.setAttribute(`data-originally-disabled`,String(e.disabled)),e.disabled=e.getAttribute(`data-originally-disabled`)===`true`}),t.removeAttribute(`aria-disabled`);let n=t.querySelector(`.${this.selectors.input}:checked`);n&&this.customEvent(n);let r=t.querySelectorAll(`.${this.selectors.btn}`);r.forEach(t=>{t.addEventListener(`click`,()=>{r.forEach(e=>{e.setAttribute(`aria-checked`,`false`),e.setAttribute(`tabindex`,`-1`)}),t.setAttribute(`aria-checked`,`true`),t.setAttribute(`tabindex`,`0`),t.focus(),this.ripple(t)},{signal:e}),t.addEventListener(`keydown`,e=>{let n=Array.from(r).indexOf(t);if(e.key===`ArrowRight`&&n++,e.key===`ArrowLeft`&&n--,n<0&&(n=r.length-1),n>=r.length&&(n=0),e.key===`Enter`){let t=i[n];t&&!t.disabled&&(i.forEach(e=>{e.checked=!1,e.removeAttribute(`checked`)}),t.checked=!0,t.setAttribute(`checked`,``),this.customEvent(t)),e.preventDefault();return}let a=r[n];a&&(r.forEach(e=>e.setAttribute(`tabindex`,`-1`)),a.setAttribute(`tabindex`,`0`),a.focus())},{signal:e})});let i=t.querySelectorAll(`.${this.selectors.input}`);i.forEach((t,n)=>{this.debug&&(t.id||console.error(`Input #${n} in group has no ID!`),(!t.value||t.value===`on`)&&console.warn(`Input #${t.id} does not have a value specified (currently "${t.value}")`));let a=r[n];a&&(t.tabIndex=-1,a.setAttribute(`role`,`radio`),a.setAttribute(`aria-checked`,String(t.checked)),a.setAttribute(`tabindex`,t.checked?`0`:`-1`),t.disabled?a.setAttribute(`aria-disabled`,`true`):a.removeAttribute(`aria-disabled`),t.addEventListener(`click`,()=>{i.forEach(e=>{e.checked=!1,e.removeAttribute(`checked`)}),i[n].checked=!0,i[n].setAttribute(`checked`,``),this.customEvent(t)},{signal:e}))});let a=Array.from(i).find(e=>e.checked&&!e.disabled)||Array.from(i).find(e=>!e.disabled);if(a){let e=t.querySelector(`label[for="${a.id}"]`);e&&e.setAttribute(`tabindex`,`0`)}})}ripple(e){e.closest(`.ui-no-ripple`)||(e.classList.remove(`ui-ripple`),e.offsetWidth,e.classList.add(`ui-ripple`),e.addEventListener(`animationend`,()=>e.classList.remove(`ui-ripple`),{once:!0}))}customEvent(e){let t={detail:{id:e.id,value:e.value},bubbles:!0};this.debug&&console.log(`CustomEvent:`,t.detail),e.dispatchEvent(new CustomEvent(`ui-button-group-change`,t))}},a=class{selectors;buttons=null;abortController=new AbortController;debug;root;observer=null;rescanTimer=null;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={main:`UIb`};this.selectors={...r,...e},this.scan(),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}setValue(e,t,n){e.dataset.value=t,e.tagName===`A`&&(e.href=t),n!==void 0&&(e.textContent=n),!e.closest(`.ui-no-flash`)&&(e.classList.remove(`UIb--flash`),e.offsetWidth,e.classList.add(`UIb--flash`),e.addEventListener(`animationend`,()=>e.classList.remove(`UIb--flash`),{once:!0}))}destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),this.abortController.abort(),this.buttons?.forEach(e=>delete e.dataset.uibBound),this.buttons=null,this.abortController=new AbortController}disableEl(e){e.tagName===`BUTTON`?e.disabled=!0:(e.setAttribute(`aria-disabled`,`true`),e.setAttribute(`tabindex`,`-1`))}enableEl(e){e.tagName===`BUTTON`?e.disabled=!1:(e.removeAttribute(`aria-disabled`),e.setAttribute(`tabindex`,`0`))}isDisabled(e){return e.tagName===`BUTTON`?e.disabled:e.getAttribute(`aria-disabled`)===`true`}setDisabled(e,t){e.setAttribute(`data-originally-disabled`,String(t)),t?this.disableEl(e):this.enableEl(e)}scan(){this.buttons=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.buttons.forEach(t=>{t.dataset.uibBound||(t.dataset.uibBound=`1`,t.hasAttribute(`data-originally-disabled`)||t.setAttribute(`data-originally-disabled`,String(this.isDisabled(t))),t.getAttribute(`data-originally-disabled`)===`true`?this.disableEl(t):this.enableEl(t),t.addEventListener(`click`,e=>{if(this.isDisabled(t)){e.preventDefault(),e.stopImmediatePropagation();return}t.tagName===`A`&&e.preventDefault(),this.ripple(t),this.customEvent(t,String(t.dataset.value))},{signal:e}))})}ripple(e){e.closest(`.ui-no-ripple`)||(e.classList.remove(`UIb--ripple`),e.offsetWidth,e.classList.add(`UIb--ripple`),e.addEventListener(`animationend`,()=>e.classList.remove(`UIb--ripple`),{once:!0}))}customEvent(e,t){if(!t||t===`undefined`||t.trim()===``){console.warn(`Button data-value="" Not set!`);return}let n={detail:{id:e.id,value:t},bubbles:!0};this.debug&&console.info(`Button CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-button-change`,n))}};function o(e=document){let t=new AbortController,n=()=>15*(parseFloat(getComputedStyle(document.documentElement).fontSize)||16),r=e=>{let t=e.querySelector(`.UIql__text`);if(!t)return;let r=e.getBoundingClientRect(),i=r.left+r.width/2,a=document.documentElement.clientWidth,o=n(),s=i-8,c=a-i-8;e.classList.remove(`UIql--left`,`UIql--right`),i-o/2>=8&&i+o/2<=a-8?t.style.maxWidth=``:c>=s?(e.classList.add(`UIql--right`),t.style.maxWidth=`${Math.min(o,c)}px`):(e.classList.add(`UIql--left`),t.style.maxWidth=`${Math.min(o,s)}px`)},i=e=>{let t=e.target?.closest?.(`.UIql`);t&&r(t)};return e.addEventListener(`pointerover`,i,{signal:t.signal}),e.addEventListener(`focusin`,i,{signal:t.signal}),window.addEventListener(`resize`,()=>{e.querySelectorAll(`.UIql:hover, .UIql:focus`).forEach(r)},{signal:t.signal}),()=>t.abort()}var s=null,c=null,l=null,u=null,d=null;function f(...e){return s??=new a(...e)}function p(...e){return d??=new i(...e)}function m(...e){return c??=new r(...e)}function h(...e){return l??=new t(...e)}function g(...e){return u??=new n(...e)}function _(){s=null,c=null,l=null,u=null,d=null}e.Button=a,e.ButtonGroup=i,e.Select=r,e.SpinBox=t,e.Switch=n,e.getButtonGroupManager=p,e.getButtonManager=f,e.getSelectManager=m,e.getSpinBoxManager=h,e.getSwitchManager=g,e.initQuestionTooltips=o,e.resetManagers=_});
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.UiElements={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t=class{selectors;spinBoxes=null;abortController=new AbortController;debug;root;observer=null;rescanTimer=null;valueControls=new WeakMap;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={main:`UIsp`,btn:`UIsp__btn`,input:`UIsp__input`,disabledBtn:`disabled`};this.selectors={...r,...e},this.scan(),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}state=(e,t,n,r=0,i=0)=>{e==r||e<r?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1),i!==0&&(e==i||e>i?(n.classList.add(this.selectors.disabledBtn),n.disabled=!0):(n.classList.remove(this.selectors.disabledBtn),n.disabled=!1))};destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),this.abortController.abort(),this.spinBoxes?.forEach(e=>{delete e.dataset.uispBound,this.valueControls.delete(e)}),this.spinBoxes=null,this.abortController=new AbortController}disableEl(e){let t=e.querySelector(`.${this.selectors.input}`),n=e.querySelectorAll(`.${this.selectors.btn}`);t&&(t.disabled=!0),n.forEach(e=>{e.classList.add(this.selectors.disabledBtn),e.disabled=!0}),e.setAttribute(`tabindex`,`-1`),e.setAttribute(`aria-disabled`,`true`)}setValue(e,t,{silent:n=!1,flash:r=!0}={}){let i=e.querySelector(`.${this.selectors.input}`);if(!i){this.debug&&console.warn(`UISpinBox: input not found`);return}if(n){let n=this.valueControls.get(e);n?n(t,!0):i.value=String(t)}else i.value=String(t),i.dispatchEvent(new Event(`change`));r&&this.playFlash(e,i)}playFlash(e,t){e.closest(`.ui-no-flash`)||(e.classList.remove(`UIsp--flash`),e.offsetWidth,e.classList.add(`UIsp--flash`),t.addEventListener(`animationend`,()=>e.classList.remove(`UIsp--flash`),{once:!0}))}refresh(e){let t=this.valueControls.get(e);if(!t){this.debug&&console.warn(`UISpinBox: element not bound`);return}let n=e.querySelector(`.${this.selectors.input}`);if(!n){this.debug&&console.warn(`UISpinBox: input not found`);return}t(n.value,!0)}getValidDataNumber=(e,t)=>{let n=e.getAttribute(`data-${t}`);return n===null||n.trim()===``||isNaN(Number(n))?0:Number(n)};scan(){this.spinBoxes=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.spinBoxes.forEach(t=>{if(t.dataset.uispBound)return;t.dataset.uispBound=`1`;let n,r=t.querySelectorAll(`.${this.selectors.btn}`),i=t.querySelector(`.${this.selectors.input}`),a=r[0],o=r[1];if(!i||!a||!o){this.debug&&(r.length<2&&console.log(`Buttons (${this.selectors.btn}) not found in container`),i||console.log(`Input (${this.selectors.input}) not found in container`));return}i.disabled=!1,[a,o].forEach(e=>{e.classList.remove(this.selectors.disabledBtn),e.disabled=!1}),t.setAttribute(`tabindex`,`0`),t.removeAttribute(`aria-disabled`);let s=t.hasAttribute(`data-decimals`)?this.getValidDataNumber(t,`decimals`):this.getValidDataNumber(t,`step`),c=Math.min(Math.max(Math.trunc(s),0),100),l=this.getValidDataNumber(t,`min`),u=this.getValidDataNumber(t,`max`),d=t.hasAttribute(`data-negative`);if(t.hasAttribute(`data-disabled`)){Number(i.value)<=l&&(i.value=l.toFixed(c)),u===0?i.value=Number(i.value).toFixed(c):Number(i.value)>=u&&(i.value=u.toFixed(c)),this.disableEl(t),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e});return}let f=t.getAttribute(`data-unit`)?.trim(),p=e=>{t.setAttribute(`aria-valuenow`,String(e)),t.setAttribute(`aria-valuetext`,f?`${e} ${f}`:String(e))},m=(e,t)=>{let n=Number(e);Number.isNaN(n)&&(n=l),n<l&&(n=l),u!==0&&n>u&&(n=u),i.value=n.toFixed(c),this.state(n,a,o,l,u),p(i.value),t||this.customEvent(i,i.value)};this.valueControls.set(t,m),Number(i.value)<=l&&(i.value=l.toFixed(c)),u===0?i.value=Number(i.value).toFixed(c):(Number(i.value)>=u&&(i.value=u.toFixed(c)),u&&t.setAttribute(`aria-valuemax`,u.toFixed(c))),l&&t.setAttribute(`aria-valuemin`,l.toFixed(c)),this.state(Number(i.value),a,o,l,u),p(i.value);let h=null,g=(e,t=1)=>{d||(i.value=String(Math.abs(Number(i.value))));let n=parseFloat(i.value)||0;return n+=e*t/10**c,e===1&&u!==0&&n>u&&(n=u),e===-1&&n<l&&(n=l),i.value=n.toFixed(c),this.state(Number(i.value),a,o,l,u),p(i.value),i.value},_=!1,v=(e,t=150)=>{h===null&&(_=!1,h=window.setInterval(e,t))},y=()=>{h!==null&&(clearInterval(h),h=null,_&&this.customEvent(i,i.value))},b=(e,t,n)=>{_=!0,g(e,t),n.disabled&&(y(),_=!1)},x=(t,r,a)=>{t.addEventListener(`mousedown`,e=>{let n=e.shiftKey?3:1;v(()=>b(r,n,t),a)},{signal:e}),t.addEventListener(`touchstart`,()=>v(()=>b(r,1,t),a),{signal:e}),[`mouseup`,`touchend`].forEach(n=>{t.addEventListener(n,y,{signal:e})}),[`mouseleave`,`touchcancel`].forEach(n=>{t.addEventListener(n,()=>{y(),_=!1},{signal:e})}),t.addEventListener(`click`,e=>{if(_){_=!1;return}h===null&&(n=g(r,e.shiftKey?3:1),this.ripple(t),this.customEvent(i,n))},{signal:e})};x(o,1,150),x(a,-1,100),i.addEventListener(`keydown`,e=>{let t=e.key,n=e.shiftKey?5:1;if([`Backspace`,`Delete`,`ArrowLeft`,`ArrowRight`,`Tab`,`Enter`,`Home`,`End`].includes(t)||(e.ctrlKey||e.metaKey)&&[`a`,`c`,`v`,`x`].includes(t.toLowerCase()))return;if([`e`,`+`].includes(t)){e.preventDefault();return}if(t===`-`){let t=i.selectionStart===0,n=(i.selectionEnd??0)>0;(!d||!t||i.value.includes(`-`)&&!n)&&e.preventDefault();return}if(t===`ArrowUp`||t===`ArrowDown`){e.preventDefault(),g(t===`ArrowUp`?1:-1,n);return}let r=t===`,`?`.`:t,a=/^[0-9]$/.test(r),o=r===`.`,s=i.value.includes(`.`);(c===0&&!a||c>0&&!(a||o)||o&&s)&&e.preventDefault()},{signal:e}),i.addEventListener(`keyup`,e=>{(e.key===`ArrowUp`||e.key===`ArrowDown`)&&this.customEvent(i,i.value)},{signal:e}),i.addEventListener(`change`,()=>m(i.value,!1),{signal:e})})}ripple(e){e.closest(`.ui-no-ripple`)||(e.classList.remove(`ui-ripple`),e.offsetWidth,e.classList.add(`ui-ripple`),e.addEventListener(`animationend`,()=>e.classList.remove(`ui-ripple`),{once:!0}))}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.debug&&console.log(`CustomEvent: data.detail `,n.detail),e.dispatchEvent(new CustomEvent(`ui-spinbox-change`,n))}},n=class{selectors;main=null;abortController=new AbortController;debug;root;observer=null;rescanTimer=null;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={main:`UIsw`,label:`UIsw-label`};this.selectors={...r,...e},this.scan(),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),this.abortController.abort(),this.main?.forEach(e=>delete e.dataset.uiswBound),this.main=null,this.abortController=new AbortController}scan(){this.main=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.main.forEach(t=>{if(t.dataset.uiswBound)return;t.dataset.uiswBound=`1`;let n=t.querySelector(`.${this.selectors.label}`),r=t.querySelector(`input`);n&&n.id&&t.setAttribute(`aria-labelledby`,n.id),t.hasAttribute(`data-originally-disabled`)||t.setAttribute(`data-originally-disabled`,String(r?.disabled??!1));let i=t.getAttribute(`data-originally-disabled`)===`true`;r&&(r.disabled=!1),t.setAttribute(`tabindex`,`0`),t.removeAttribute(`aria-disabled`),i&&(r&&(r.disabled=!0),t.setAttribute(`tabindex`,`-1`),t.setAttribute(`aria-disabled`,`true`),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e})),r&&(r.checked?t.setAttribute(`aria-checked`,`true`):t.setAttribute(`aria-checked`,`false`),r.addEventListener(`change`,()=>{t.setAttribute(`aria-checked`,String(r.checked)),this.customEvent(r,String(r.checked))},{signal:e}),t.addEventListener(`click`,e=>{if(e.target.tagName===`INPUT`)return;let n=e.target.closest(`label`);n||(r.checked=!r.checked),n||r.dispatchEvent(new Event(`change`));let i=t.querySelector(`.UIsw-slider`);i&&this.ripple(i)},{signal:e}),t.addEventListener(`keydown`,e=>{if(r.disabled)return;let n=null;if(e.key===`ArrowRight`?n=!0:e.key===`ArrowLeft`?n=!1:(e.key===` `||e.key===`Enter`)&&(n=!r.checked),n!==null&&(e.preventDefault(),r.checked!==n)){r.checked=n,r.dispatchEvent(new Event(`change`));let e=t.querySelector(`.UIsw-slider`);e&&this.ripple(e)}},{signal:e}))})}setValue(e,t,{silent:n=!1,flash:r=!0}={}){let i=e.querySelector(`input`);if(!i){this.debug&&console.warn(`UISwitch: input not found`);return}i.checked=t,this.debug&&console.log(`SetValue:`,i.checked),e.setAttribute(`aria-checked`,String(t)),n||this.customEvent(i,String(t));let a=e.querySelector(`.UIsw-slider`);r&&a&&!e.closest(`.ui-no-flash`)&&(e.classList.remove(`UIsw--flash`),e.offsetWidth,e.classList.add(`UIsw--flash`),a.addEventListener(`animationend`,()=>e.classList.remove(`UIsw--flash`),{once:!0}))}ripple(e){e.closest(`.ui-no-ripple`)||(e.classList.remove(`ui-ripple`),e.offsetWidth,e.classList.add(`ui-ripple`),e.addEventListener(`animationend`,()=>e.classList.remove(`ui-ripple`),{once:!0}))}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.debug&&console.log(`CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-switch-change`,n))}},r=class e{selectors;main=null;itemArrowInitialized=new WeakSet;abortController=new AbortController;globalAbortController=new AbortController;debug;root;observer=null;rescanTimer=null;selectMap=new Map;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={idPrefix:`UI-option-`,main:`UIselect`,selected:`UIselect-selected`,arrow:`UIselect-arrow`,optionsList:`UIselect-options`,search:`UIselect-options__search`,items:`UIselect-options__items`,flash:`UIselect--flash`,excludedItems:[`divider`,`test`]};this.selectors={...r,...e},this.scan(),this.initGlobalListener(this.selectors),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}filterExcluded(e,t){return Array.from(e).filter(e=>!t.some(t=>typeof t==`string`?e.classList.contains(t)||e.id===t:e===t))}filterSearch(e,t){let n=t.trim().toLowerCase();return e.filter(e=>{let t=e.dataset.value?.toLowerCase()||``,r=e.textContent?.toLowerCase()||``;return t.includes(n)||r.includes(n)})}destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),e.closeAll(this.selectors),this.abortController.abort(),this.main?.forEach(e=>delete e.dataset.uiselBound),this.selectMap.clear(),this.itemArrowInitialized=new WeakSet,this.main=null,this.abortController=new AbortController}dispose(){this.destroy(),this.globalAbortController.abort()}disableEl(e){e.setAttribute(`tabindex`,`-1`),e.setAttribute(`aria-disabled`,`true`)}setValue(e,t,{silent:n=!1,flash:r=!0}={}){let i=this.selectMap.get(e);if(!i){this.debug&&console.warn(`UISelect: element not registered`);return}let{input:a,selected:o}=i,s=e.querySelector(`.${this.selectors.optionsList}`);if(!s)return;let c=Array.from(s.querySelectorAll(`.${this.selectors.items} ul li`)),l=this.filterExcluded(c,this.selectors.excludedItems),u=l.find(e=>String(e.dataset.value)===String(t));if(!u){this.debug&&console.warn(`UISelect: value "${t}" not found`);return}l.forEach(e=>e.removeAttribute(`aria-selected`)),u.setAttribute(`aria-selected`,`true`),o.textContent=u.textContent??``,a.value=String(t),a.setAttribute(`value`,String(t)),e.setAttribute(`aria-activedescendant`,u.id||`${this.selectors.idPrefix}${l.indexOf(u)}`),n||this.customEvent(e,String(t)),r&&!e.closest(`.ui-no-flash`)&&(e.classList.remove(this.selectors.flash),e.offsetWidth,e.classList.add(this.selectors.flash),e.addEventListener(`animationend`,()=>e.classList.remove(this.selectors.flash),{once:!0}))}scan(){this.main=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.main.forEach(t=>{if(t.dataset.uiselBound)return;let n=t.querySelector(`input[type='hidden']`);try{if(!n)throw Error(`<input type="hidden" name="YourUniqueId">`)}catch(e){return console.warn(`Not found:`,e.message)}t.dataset.uiselBound=`1`;let r=t.querySelector(`.${this.selectors.selected}`),i=t.querySelector(`.${this.selectors.arrow}`),a=t.querySelector(`.${this.selectors.optionsList}`),o=t.querySelector(`.${this.selectors.search} input`);if(t.setAttribute(`tabindex`,`0`),t.removeAttribute(`aria-disabled`),t.hasAttribute(`data-disabled`)){this.disableEl(t),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e});return}this.selectMap.set(t,{input:n,selected:r}),i&&i.addEventListener(`click`,()=>{this.toggle(t,a)},{signal:e}),r.addEventListener(`click`,()=>{this.toggle(t,a)},{signal:e}),t.addEventListener(`click`,()=>{this.itemsPosition(a)},{signal:e});let s=a.querySelectorAll(`.${this.selectors.items} ul li`),c=this.filterExcluded(s,this.selectors.excludedItems),l=t.querySelector(`[aria-selected='true']`);l&&this.defaultSelect(t,l,r,n),o&&o.addEventListener(`input`,i=>{let o=i.target.value.trim(),l=o?new Set(this.filterSearch(c,o)):null;s.forEach(e=>{e.hidden=l?!l.has(e):!1}),this.itemArrow(t,a,r,n,e)},{signal:e}),this.itemArrow(t,a,r,n,e),this.items(t,a,c,r,n,e)})}itemArrow(e,t,n,r,i){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let a=n.textContent?n.textContent:``,o=e.querySelector(`.${this.selectors.search} input`);e.addEventListener(`keydown`,i=>{if(i.key===`Tab`){this.close(e,t);return}o&&o.focus();let s=Array.from(t.querySelectorAll(`.${this.selectors.items} ul li`)),c=this.filterExcluded(s,this.selectors.excludedItems).filter(e=>!e.hidden),l=c.length;if(l===0)return;let u=c.findIndex(e=>e.getAttribute(`aria-selected`)===`true`),d=t=>{let r=c[t];n.textContent=r.textContent,s.forEach(e=>e.removeAttribute(`aria-selected`)),r.setAttribute(`aria-selected`,`true`),e.setAttribute(`aria-activedescendant`,r.id||`${this.selectors.idPrefix}${t}`),r.scrollIntoView({block:`nearest`})};if(i.key===`ArrowDown`)i.preventDefault(),t.hidden&&this.toggle(e,t),d((u+1)%l);else if(i.key===`ArrowUp`)i.preventDefault(),d(u<=0?l-1:u-1);else if(i.key===`Enter`)if(i.preventDefault(),t.hidden)this.toggle(e,t);else if(u>=0){let i=c[u];n.textContent=i.textContent,e.setAttribute(`aria-activedescendant`,i.id||`${this.selectors.idPrefix}${u}`),r.value=String(i.dataset.value),this.customEvent(e,r.value),this.close(e,t)}else this.toggle(e,t);else i.key===`Escape`&&(e.getAttribute(`aria-activedescendant`)||(n.textContent=a),this.close(e,t))},{signal:i})}itemsPosition(e){let t=e.querySelector(`[aria-selected="true"]`);t&&t.scrollIntoView({block:`nearest`})}items(e,t,n,r,i,a){n.forEach((o,s)=>{o.addEventListener(`click`,()=>{let a=n[s];if(a){r.textContent=a.textContent,n.forEach(e=>e.removeAttribute(`aria-selected`)),a.setAttribute(`aria-selected`,`true`);let o=a.id||`${this.selectors.idPrefix}${s}`;e.setAttribute(`aria-expanded`,`false`),e.setAttribute(`aria-activedescendant`,o),i.value=String(n[s].dataset.value),this.customEvent(e,i.value),this.close(e,t)}},{signal:a})})}defaultSelect(e,t,n,r){t&&(r.setAttribute(`value`,t.dataset.value??``),n.textContent=t.textContent??``,e.setAttribute(`aria-activedescendant`,t.id||``))}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.debug&&console.log(`CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-select-change`,n))}toggle(t,n){e.closeAll(this.selectors),n.hidden?(n.hidden=!1,t.setAttribute(`aria-expanded`,`true`)):this.close(t,n)}close(e,t){t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(t=>{let n=t.querySelector(`.${e.optionsList}`);n&&(n.hidden=!0,t.setAttribute(`aria-expanded`,`false`))})}initGlobalListener(t){document.addEventListener(`click`,n=>{let r=n.target;[...document.querySelectorAll(`.${t.main}`)].some(e=>e.contains(r))||e.closeAll(t)},{signal:this.globalAbortController.signal})}},i=class{selectors;main=null;abortController=new AbortController;debug;root;observer=null;rescanTimer=null;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={main:`UIbg`,btn:`UIbg-btn`,input:`UIbg-input`};this.selectors={...r,...e},this.scan(),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),this.abortController.abort(),this.main?.forEach(e=>delete e.dataset.uibgBound),this.main=null,this.abortController=new AbortController}setValue(e,t,{silent:n=!1,flash:r=!0}={}){let i=e.querySelectorAll(`.${this.selectors.input}`),a=e.querySelectorAll(`.${this.selectors.btn}`),o=Array.from(i).findIndex(e=>e.value===t&&!e.disabled);if(o===-1){this.debug&&console.warn(`UIButtonGroup: value "${t}" not found or disabled`);return}i.forEach((e,t)=>{e.checked=t===o,t===o?e.setAttribute(`checked`,``):e.removeAttribute(`checked`)}),a.forEach((e,t)=>{e.setAttribute(`aria-checked`,String(t===o)),e.setAttribute(`tabindex`,t===o?`0`:`-1`)}),n||this.customEvent(i[o]);let s=a[o];r&&s&&!e.closest(`.ui-no-flash`)&&(s.classList.remove(`UIbg--flash`),s.offsetWidth,s.classList.add(`UIbg--flash`),s.addEventListener(`animationend`,()=>s.classList.remove(`UIbg--flash`),{once:!0}))}scan(){this.main=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.main.forEach(t=>{if(t.dataset.uibgBound)return;t.dataset.uibgBound=`1`;let n=t.querySelectorAll(`.${this.selectors.input}`);n.forEach(e=>{e.hasAttribute(`data-originally-disabled`)||e.setAttribute(`data-originally-disabled`,String(e.disabled)),e.disabled=e.getAttribute(`data-originally-disabled`)===`true`}),t.removeAttribute(`aria-disabled`);let r=t.querySelector(`.${this.selectors.input}:checked`);r&&this.customEvent(r);let i=t.querySelectorAll(`.${this.selectors.btn}`),a=e=>{let t=n[e],r=i[e];!t||t.disabled||!r||(n.forEach(e=>{e.checked=!1,e.removeAttribute(`checked`)}),t.checked=!0,t.setAttribute(`checked`,``),i.forEach(e=>{e.setAttribute(`aria-checked`,`false`),e.setAttribute(`tabindex`,`-1`)}),r.setAttribute(`aria-checked`,`true`),r.setAttribute(`tabindex`,`0`),r.focus(),this.ripple(r),this.customEvent(t))};i.forEach((t,r)=>{t.addEventListener(`click`,()=>{let e=n[r];!e||e.disabled||(i.forEach(e=>{e.setAttribute(`aria-checked`,`false`),e.setAttribute(`tabindex`,`-1`)}),t.setAttribute(`aria-checked`,`true`),t.setAttribute(`tabindex`,`0`),t.focus(),this.ripple(t))},{signal:e}),t.addEventListener(`keydown`,e=>{let r=Array.from(i).indexOf(t);if(e.key===` `||e.key===`Enter`){e.preventDefault(),a(r);return}let o=0;if(e.key===`ArrowRight`||e.key===`ArrowDown`)o=1;else if(e.key===`ArrowLeft`||e.key===`ArrowUp`)o=-1;else return;e.preventDefault();let s=r;for(let e=0;e<i.length&&(s+=o,s<0&&(s=i.length-1),s>=i.length&&(s=0),!(n[s]&&!n[s].disabled));e++);s!==r&&a(s)},{signal:e})}),n.forEach((t,r)=>{this.debug&&(t.id||console.error(`Input #${r} in group has no ID!`),(!t.value||t.value===`on`)&&console.warn(`Input #${t.id} does not have a value specified (currently "${t.value}")`));let a=i[r];a&&(t.tabIndex=-1,a.setAttribute(`role`,`radio`),a.setAttribute(`aria-checked`,String(t.checked)),a.setAttribute(`tabindex`,t.checked?`0`:`-1`),t.disabled?a.setAttribute(`aria-disabled`,`true`):a.removeAttribute(`aria-disabled`),t.addEventListener(`click`,()=>{n.forEach(e=>{e.checked=!1,e.removeAttribute(`checked`)}),n[r].checked=!0,n[r].setAttribute(`checked`,``),this.customEvent(t)},{signal:e}))});let o=Array.from(n).find(e=>e.checked&&!e.disabled)||Array.from(n).find(e=>!e.disabled);if(o){let e=t.querySelector(`label[for="${o.id}"]`);e&&e.setAttribute(`tabindex`,`0`)}})}ripple(e){e.closest(`.ui-no-ripple`)||(e.classList.remove(`ui-ripple`),e.offsetWidth,e.classList.add(`ui-ripple`),e.addEventListener(`animationend`,()=>e.classList.remove(`ui-ripple`),{once:!0}))}customEvent(e){let t={detail:{id:e.id,value:e.value},bubbles:!0};this.debug&&console.log(`CustomEvent:`,t.detail),e.dispatchEvent(new CustomEvent(`ui-button-group-change`,t))}},a=class{selectors;buttons=null;abortController=new AbortController;debug;root;observer=null;rescanTimer=null;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={main:`UIb`};this.selectors={...r,...e},this.scan(),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}setValue(e,t,{flash:n=!0,label:r}={}){e.dataset.value=t,e.tagName===`A`&&(e.href=t),r!==void 0&&(e.textContent=r),!(!n||e.closest(`.ui-no-flash`))&&(e.classList.remove(`UIb--flash`),e.offsetWidth,e.classList.add(`UIb--flash`),e.addEventListener(`animationend`,()=>e.classList.remove(`UIb--flash`),{once:!0}))}destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),this.abortController.abort(),this.buttons?.forEach(e=>delete e.dataset.uibBound),this.buttons=null,this.abortController=new AbortController}disableEl(e){e.tagName===`BUTTON`?e.disabled=!0:(e.setAttribute(`aria-disabled`,`true`),e.setAttribute(`tabindex`,`-1`))}enableEl(e){e.tagName===`BUTTON`?e.disabled=!1:(e.removeAttribute(`aria-disabled`),e.setAttribute(`tabindex`,`0`))}isDisabled(e){return e.tagName===`BUTTON`?e.disabled:e.getAttribute(`aria-disabled`)===`true`}setDisabled(e,t){e.setAttribute(`data-originally-disabled`,String(t)),t?this.disableEl(e):this.enableEl(e)}scan(){this.buttons=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.buttons.forEach(t=>{t.dataset.uibBound||(t.dataset.uibBound=`1`,t.hasAttribute(`data-originally-disabled`)||t.setAttribute(`data-originally-disabled`,String(this.isDisabled(t))),t.getAttribute(`data-originally-disabled`)===`true`?this.disableEl(t):this.enableEl(t),t.addEventListener(`click`,e=>{if(this.isDisabled(t)){e.preventDefault(),e.stopImmediatePropagation();return}if(t.tagName===`A`){let n=t.getAttribute(`href`);(!n||n===`#`)&&e.preventDefault()}this.ripple(t),this.customEvent(t,String(t.dataset.value))},{signal:e}))})}ripple(e){e.closest(`.ui-no-ripple`)||(e.classList.remove(`UIb--ripple`),e.offsetWidth,e.classList.add(`UIb--ripple`),e.addEventListener(`animationend`,()=>e.classList.remove(`UIb--ripple`),{once:!0}))}customEvent(e,t){if(!t||t===`undefined`||t.trim()===``){this.debug&&console.warn(`Button data-value="" Not set!`);return}let n={detail:{id:e.id,value:t},bubbles:!0};this.debug&&console.info(`Button CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-button-change`,n))}};function o(e=document){let t=new AbortController,n=()=>15*(parseFloat(getComputedStyle(document.documentElement).fontSize)||16),r=e=>{let t=e.querySelector(`.UIql__text`);if(!t)return;let r=e.getBoundingClientRect(),i=r.left+r.width/2,a=document.documentElement.clientWidth,o=n(),s=i-8,c=a-i-8;e.classList.remove(`UIql--left`,`UIql--right`),i-o/2>=8&&i+o/2<=a-8?t.style.maxWidth=``:c>=s?(e.classList.add(`UIql--right`),t.style.maxWidth=`${Math.min(o,c)}px`):(e.classList.add(`UIql--left`),t.style.maxWidth=`${Math.min(o,s)}px`)},i=e=>{let t=e.target?.closest?.(`.UIql`);t&&r(t)};return e.addEventListener(`pointerover`,i,{signal:t.signal}),e.addEventListener(`focusin`,i,{signal:t.signal}),window.addEventListener(`resize`,()=>{e.querySelectorAll(`.UIql:hover, .UIql:focus`).forEach(r)},{signal:t.signal}),()=>t.abort()}var s=null,c=null,l=null,u=null,d=null;function f(...e){return s??=new a(...e)}function p(...e){return d??=new i(...e)}function m(...e){return c??=new r(...e)}function h(...e){return l??=new t(...e)}function g(...e){return u??=new n(...e)}function _(){s?.destroy(),d?.destroy(),c?.dispose(),l?.destroy(),u?.destroy(),s=null,c=null,l=null,u=null,d=null}e.Button=a,e.ButtonGroup=i,e.Select=r,e.SpinBox=t,e.Switch=n,e.getButtonGroupManager=p,e.getButtonManager=f,e.getSelectManager=m,e.getSpinBoxManager=h,e.getSwitchManager=g,e.initQuestionTooltips=o,e.resetManagers=_});
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.UIbg{--bg-50:var(--c-g-50);--bg-100:var(--c-g-100);--bg-300:var(--c-g-300);--bg-500:var(--c-g-500);--bg-700:var(--c-g-700);--bg-950:var(--c-g-950);grid-auto-columns:minmax(min-content,1fr);grid-auto-flow:column;align-content:center;gap:.5rem;display:grid}.UIbg.vertical{grid-auto-rows:min-content;grid-auto-flow:row}.UIbg-input{opacity:0;pointer-events:none;position:absolute}.UIbg-input:checked+.UIbg-btn{background-color:var(--bg-700);border-color:var(--bg-950);color:var(--bg-50)}.UIbg-input:disabled+.UIbg-btn{background-color:var(--bg-100);border-color:var(--bg-100);color:var(--bg-300);cursor:not-allowed}.UIbg-input:not(:disabled)+.UIbg-btn:hover{background-color:var(--bg-700);border-color:var(--bg-700);color:var(--bg-50)}.UIbg>.UIbg-btn{cursor:pointer;background-color:var(--bg-100);border:1px solid var(--bg-500);height:2.5rem;color:var(--bg-950);border-radius:.5rem;justify-content:center;align-items:center;padding:.125rem;font-size:1rem;transition:all .4s,color .4s;display:flex;position:relative;overflow:hidden}.UIbg>.UIbg-btn:after{content:"";border-radius:inherit;background:radial-gradient(circle at center, var(--bg-500) 0%, transparent 60%);opacity:0;pointer-events:none;position:absolute;inset:0;transform:scale(0)}.UIbg>.UIbg-btn.ui-ripple:after{animation:1s ease-out forwards ui-ripple}.UIbg>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--bg-700);border-color:var(--bg-700);color:var(--bg-950)}.UIbg>.UIbg-btn.UIbg--flash{--flash-start:var(--bg-50);--flash-mid:var(--bg-700);--flash-end:var(--bg-950);animation:.4s ease-out ui-flash}.UIbg.r-0>.UIbg-btn{border-radius:0}.UIbg.r-round>.UIbg-btn{border-radius:2.5rem}.UIbg.r-round.g-0>.UIbg-btn:first-of-type{border-radius:2.5rem 0 0 2.5rem}.UIbg.r-round.g-0>.UIbg-btn:last-of-type{border-radius:0 2.5rem 2.5rem 0}.UIbg.g-0{gap:0}.UIbg.g-0>.UIbg-btn{border:0;border-radius:0}.UIbg.g-1{gap:1rem}.UIbg.sm>.UIbg-btn{height:2rem;font-size:.9rem}.UIbg.lg>.UIbg-btn{height:3rem;font-size:1.1rem}.UIbg[aria-disabled=true]{opacity:.5;pointer-events:none;cursor:not-allowed}.UIbg.border{border:1px solid var(--bg-100);border-radius:.5rem;padding:5px}.UIbg.border:hover:not([aria-disabled=true]){border-color:var(--bg-700)}.UIbg.border.r-0{border-radius:0}.UIbg.border.r-round{border-radius:2.5rem}.UIbg.danger{--bg-50:var(--c-d-50);--bg-100:var(--c-d-100);--bg-300:var(--c-d-300);--bg-500:var(--c-d-500);--bg-700:var(--c-d-700);--bg-950:var(--c-d-950)}.UIbg.info{--bg-50:var(--c-i-50);--bg-100:var(--c-i-100);--bg-300:var(--c-i-300);--bg-500:var(--c-i-500);--bg-700:var(--c-i-700);--bg-950:var(--c-i-950)}.UIbg.primary{--bg-50:var(--c-p-50);--bg-100:var(--c-p-100);--bg-300:var(--c-p-300);--bg-500:var(--c-p-500);--bg-700:var(--c-p-700);--bg-950:var(--c-p-950)}.UIbg.success{--bg-50:var(--c-s-50);--bg-100:var(--c-s-100);--bg-300:var(--c-s-300);--bg-500:var(--c-s-500);--bg-700:var(--c-s-700);--bg-950:var(--c-s-950)}.UIbg.warning{--bg-50:var(--c-w-50);--bg-100:var(--c-w-100);--bg-300:var(--c-w-300);--bg-500:var(--c-w-500);--bg-700:var(--c-w-700);--bg-950:var(--c-w-950)}.UIb{--b-50:var(--c-g-50);--b-100:var(--c-g-100);--b-300:var(--c-g-300);--b-500:var(--c-g-500);--b-700:var(--c-g-700);--b-950:var(--c-g-950);grid-auto-flow:column;grid-auto-columns:minmax(min-content);cursor:pointer;background-color:var(--b-100);border:1px solid var(--b-500);height:2.5rem;color:var(--b-950);border-radius:.5rem;justify-content:center;align-items:center;gap:.5rem;padding:.125rem .75rem;font-size:1rem;transition:background-color .4s,color .1s;display:flex;position:relative;overflow:hidden}.UIb:after{content:"";border-radius:inherit;background:radial-gradient(circle at center, var(--b-500) 0%, transparent 60%);opacity:0;pointer-events:none;position:absolute;inset:0;transform:scale(0)}.UIb.UIb--ripple:after{animation:1s ease-out forwards ui-ripple}.UIb.UIb--flash{--flash-start:var(--b-50);--flash-mid:var(--b-700);--flash-end:var(--b-950);animation:.4s ease-out ui-flash}.UIb:hover:not(:disabled){background-color:var(--b-700);border-color:var(--b-700);color:var(--b-50)}.UIb:disabled,.UIb[aria-disabled=true]{background-color:var(--b-100);border-color:var(--b-100);color:var(--b-300);cursor:not-allowed;pointer-events:none}.UIb.expand{width:100%}.UIb.between{justify-content:space-between}.UIb.around{justify-content:space-around}.UIb.r-0{border-radius:0}.UIb.r-round{border-radius:2.5rem}.UIb.g-0{gap:0}.UIb.g-1{gap:1rem}.UIb.sm{height:2rem;font-size:.9rem}.UIb.lg{height:3rem;font-size:1.1rem}.UIb.danger{--b-50:var(--c-d-50);--b-100:var(--c-d-100);--b-300:var(--c-d-300);--b-500:var(--c-d-500);--b-700:var(--c-d-700);--b-950:var(--c-d-950)}.UIb.info{--b-50:var(--c-i-50);--b-100:var(--c-i-100);--b-300:var(--c-i-300);--b-500:var(--c-i-500);--b-700:var(--c-i-700);--b-950:var(--c-i-950)}.UIb.primary{--b-50:var(--c-p-50);--b-100:var(--c-p-100);--b-300:var(--c-p-300);--b-500:var(--c-p-500);--b-700:var(--c-p-700);--b-950:var(--c-p-950)}.UIb.success{--b-50:var(--c-s-50);--b-100:var(--c-s-100);--b-300:var(--c-s-300);--b-500:var(--c-s-500);--b-700:var(--c-s-700);--b-950:var(--c-s-950)}.UIb.warning{--b-50:var(--c-w-50);--b-100:var(--c-w-100);--b-300:var(--c-w-300);--b-500:var(--c-w-500);--b-700:var(--c-w-700);--b-950:var(--c-w-950)}.UIsp{--sp-50:var(--c-g-50);--sp-100:var(--c-g-100);--sp-300:var(--c-g-300);--sp-500:var(--c-g-500);--sp-700:var(--c-g-700);--sp-950:var(--c-g-950);grid-template-columns:min-content 1fr min-content;align-self:end;align-items:end;width:13rem;display:grid}.UIsp.UIsp--flash>.UIsp__btn,.UIsp.UIsp--flash>.UIsp__input{--flash-start:var(--sp-50);--flash-mid:var(--sp-700);--flash-end:var(--sp-950);animation:.4s ease-out ui-flash}.UIsp>.UIsp-label{grid-column:1/-1;padding:0 0 .075rem .25rem;font-size:1rem}.UIsp>.UIsp__input{text-align:center;background-color:var(--sp-50);height:2.5rem;color:var(--sp-700);border:none;border-top:1px solid var(--sp-500);border-bottom:1px solid var(--sp-500);box-sizing:border-box;outline:none;width:100%;min-width:3rem;padding:0;font-size:1.5rem;font-weight:700}.UIsp>.UIsp__input:focus{background-color:var(--sp-50);color:var(--sp-950)}.UIsp>.UIsp__input:disabled{opacity:.5;cursor:not-allowed}.UIsp__txt{font-weight:400}.UIsp>.UIsp__btn{cursor:pointer;background-color:var(--sp-100);border:none;border:1px solid var(--sp-500);width:3rem;height:2.5rem;color:var(--sp-950);border-radius:.5rem 0 0 .5rem;justify-content:center;align-items:center;padding:0;font-size:2rem;transition:background-color .4s,color .1s;display:flex;position:relative;overflow:hidden}.UIsp>.UIsp__btn:after{content:"";border-radius:inherit;background:radial-gradient(circle at center, var(--sp-500) 0%, transparent 60%);opacity:0;pointer-events:none;position:absolute;inset:0;transform:scale(0)}.UIsp>.UIsp__btn.ui-ripple:after{animation:1s ease-out forwards ui-ripple}.UIsp>.UIsp__btn:hover{background-color:var(--sp-700);color:var(--sp-50)}.UIsp>.disabled{background-color:var(--sp-100);border-color:var(--sp-500);color:var(--sp-300);pointer-events:none}.UIsp[aria-disabled=true]{pointer-events:none;cursor:not-allowed}.UIsp[aria-disabled=true]>button,.UIsp[aria-disabled=true]>input{border-color:var(--sp-100)}.UIsp[aria-disabled=true]>.UIsp-label{color:var(--sp-300)}.UIsp>.UIsp__btn:first-of-type{border-radius:.5rem 0 0 .5rem}.UIsp>.UIsp__btn:last-of-type{border-radius:0 .5rem .5rem 0}.UIsp.r-0>.UIsp__btn{border-radius:0}.UIsp.r-round>.UIsp__btn:first-of-type{border-radius:1.5rem 0 0 1.5rem}.UIsp.r-round>.UIsp__btn:last-of-type{border-radius:0 1.5rem 1.5rem 0}.UIsp.sm{width:10rem}.UIsp.sm>.UIsp-label{padding:0 0 0 .125rem;font-size:.8rem}.UIsp.sm>.UIsp__input,.UIsp.sm>.UIsp__btn{height:2rem;font-size:1rem}.UIsp.sm>.UIsp__btn{width:2rem}.UIsp.lg{width:16rem}.UIsp.lg>.UIsp__input,.UIsp.lg>.UIsp__btn{height:3rem;font-size:2rem}.UIsp.lg>.UIsp__btn{width:3rem}.UIsp.danger{--sp-50:var(--c-d-50);--sp-100:var(--c-d-100);--sp-300:var(--c-d-300);--sp-500:var(--c-d-500);--sp-700:var(--c-d-700);--sp-950:var(--c-d-950)}.UIsp.info{--sp-50:var(--c-i-50);--sp-100:var(--c-i-100);--sp-300:var(--c-i-300);--sp-500:var(--c-i-500);--sp-700:var(--c-i-700);--sp-950:var(--c-i-950)}.UIsp.primary{--sp-50:var(--c-p-50);--sp-100:var(--c-p-100);--sp-300:var(--c-p-300);--sp-500:var(--c-p-500);--sp-700:var(--c-p-700);--sp-950:var(--c-p-950)}.UIsp.success{--sp-50:var(--c-s-50);--sp-100:var(--c-s-100);--sp-300:var(--c-s-300);--sp-500:var(--c-s-500);--sp-700:var(--c-s-700);--sp-950:var(--c-s-950)}.UIsp.warning{--sp-50:var(--c-w-50);--sp-100:var(--c-w-100);--sp-300:var(--c-w-300);--sp-500:var(--c-w-500);--sp-700:var(--c-w-700);--sp-950:var(--c-w-950)}.UIselect{--sl-50:var(--c-g-50);--sl-100:var(--c-g-100);--sl-300:var(--c-g-300);--sl-500:var(--c-g-500);--sl-700:var(--c-g-700);--sl-900:var(--c-g-900);--sl-950:var(--c-g-950);--sl-item-hover-bg:var(--sl-500);--sl-item-hover-color:var(--sl-50);--sl-item-sel-bg:var(--sl-300);--sl-item-sel-color:var(--sl-950);background-color:var(--sl-500);cursor:pointer;box-sizing:border-box;white-space:nowrap;border-radius:.5rem;align-self:end;width:12rem;min-width:10rem;height:2.5rem;display:flex;position:relative}.UIselect:hover{background-color:var(--sl-700)}.UIselect:hover .UIselect-selected,.UIselect:hover .UIselect-arrow{background-color:var(--sl-700);color:var(--sl-50)}.UIselect-selected{background-color:var(--sl-100);color:var(--sl-900);border-radius:.5rem;align-items:center;width:100%;height:calc(100% - 2px);margin:1px;padding:0 .5rem;display:flex;overflow:hidden}.UIselect-selected>span{white-space:nowrap;text-align:center;max-width:100%;display:inline-block;overflow:hidden}.UIselect-selected.center>span{text-align:left;max-width:100%;margin:0 auto}.UIselect-arrow{background-color:var(--sl-100);width:2rem;height:calc(100% - 4px);color:var(--sl-700);border-radius:.5rem;place-content:center;align-items:center;margin:2px 5px;font-size:.8rem;position:absolute;top:0;right:0}.UIselect-arrow>svg{margin:0 auto;display:flex}.UIselect-options{width:inherit;background-color:var(--sl-100);color:var(--sl-950);z-index:2;box-sizing:border-box;border:1px solid var(--sl-500);border-radius:.5rem;margin:0;padding:0;list-style:none;position:absolute;left:0;overflow:hidden}.UIselect-options__search{padding:1px 2px;position:sticky;top:1px}.UIselect-options__search>input{width:100%;height:inherit;border:1px solid var(--sl-300);box-shadow:none;background-color:var(--sl-50);color:var(--sl-950);border-radius:.5rem;padding:0 7px;font-size:1.5rem}.UIselect-options__search>input:focus-visible{outline:none}.UIselect-options__items{max-height:20rem;overflow-y:auto}.UIselect-options__items>ul{margin:0;padding:0;list-style:none}.UIselect-options__items>ul>li{border-radius:.5rem;align-items:center;height:2.5rem;margin:1px;padding:0 .5rem;display:flex}.UIselect-options__items>ul>li[hidden]{display:none}.UIselect-options__items>ul>li:hover{background-color:var(--sl-item-hover-bg);color:var(--sl-item-hover-color)}.UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--sl-item-sel-bg);color:var(--sl-item-sel-color)}.UIselect-options__items>ul>li.divider{background-color:var(--sl-300);height:1px;margin:0 .25rem}.UIselect.r-0,.UIselect.r-0>.UIselect-selected,.UIselect.r-0>.UIselect-options,.UIselect.r-0>.UIselect-options>li.UIselect-options__search,.UIselect.r-0>.UIselect-options>li.UIselect-options__search>input,.UIselect.r-0>.UIselect-options>li>ul>li{border-radius:0}.UIselect.r-1,.UIselect.r-1>.UIselect-selected,.UIselect.r-1>.UIselect-arrow{border-radius:1.5rem}.UIselect.lg{width:16rem;min-width:12rem;height:3rem;font-size:1.1rem}.UIselect.lg>.UIselect-selected{overflow:hidden}.UIselect.lg .UIselect-options__search>input{height:3rem;font-size:1.7rem}.UIselect.lg .UIselect-options__items{max-height:25rem}.UIselect.lg .UIselect-options__items>ul>li{height:3rem}.UIselect.lg .UIselect-options__items>ul>li.divider{height:1px;margin:0 .5rem}.UIselect.sm{width:10rem;min-width:8rem;height:2rem;font-size:.9rem}.UIselect.sm .UIselect-options__search>input{height:2rem;font-size:1rem}.UIselect.sm .UIselect-options__items{max-height:15rem}.UIselect.sm .UIselect-options__items>ul>li{height:2rem}.UIselect.sm .UIselect-options__items>ul>li.divider{height:1px;margin:0 .25rem}.UIselect.expand{width:100%}.UIselect.UIselect--flash{--flash-start:var(--sl-50);--flash-mid:var(--sl-700);--flash-end:var(--sl-950);animation:.4s ease-out ui-flash}.UIselect[aria-disabled=true]{pointer-events:none;opacity:.5;cursor:not-allowed}.UIselect.danger{--sl-50:var(--c-d-50);--sl-100:var(--c-d-100);--sl-300:var(--c-d-300);--sl-500:var(--c-d-500);--sl-700:var(--c-d-700);--sl-900:var(--c-d-900);--sl-950:var(--c-d-950);--sl-item-hover-bg:var(--sl-300);--sl-item-hover-color:var(--sl-950);--sl-item-sel-bg:var(--sl-700);--sl-item-sel-color:var(--sl-50)}.UIselect.info{--sl-50:var(--c-i-50);--sl-100:var(--c-i-100);--sl-300:var(--c-i-300);--sl-500:var(--c-i-500);--sl-700:var(--c-i-700);--sl-900:var(--c-i-900);--sl-950:var(--c-i-950);--sl-item-hover-bg:var(--sl-300);--sl-item-hover-color:var(--sl-950);--sl-item-sel-bg:var(--sl-700);--sl-item-sel-color:var(--sl-50)}.UIselect.primary{--sl-50:var(--c-p-50);--sl-100:var(--c-p-100);--sl-300:var(--c-p-300);--sl-500:var(--c-p-500);--sl-700:var(--c-p-700);--sl-900:var(--c-p-900);--sl-950:var(--c-p-950);--sl-item-hover-bg:var(--sl-300);--sl-item-hover-color:var(--sl-950);--sl-item-sel-bg:var(--sl-700);--sl-item-sel-color:var(--sl-50)}.UIselect.success{--sl-50:var(--c-s-50);--sl-100:var(--c-s-100);--sl-300:var(--c-s-300);--sl-500:var(--c-s-500);--sl-700:var(--c-s-700);--sl-900:var(--c-s-900);--sl-950:var(--c-s-950);--sl-item-hover-bg:var(--sl-300);--sl-item-hover-color:var(--sl-950);--sl-item-sel-bg:var(--sl-700);--sl-item-sel-color:var(--sl-50)}.UIselect.warning{--sl-50:var(--c-w-50);--sl-100:var(--c-w-100);--sl-300:var(--c-w-300);--sl-500:var(--c-w-500);--sl-700:var(--c-w-700);--sl-900:var(--c-w-900);--sl-950:var(--c-w-950);--sl-item-hover-bg:var(--sl-300);--sl-item-hover-color:var(--sl-950);--sl-item-sel-bg:var(--sl-700);--sl-item-sel-color:var(--sl-50)}.UIsw{--sw-50:var(--c-g-50);--sw-100:var(--c-g-100);--sw-300:var(--c-g-300);--sw-500:var(--c-g-500);--sw-700:var(--c-g-700);--sw-950:var(--c-g-950);align-items:center;gap:1.5rem;display:inline-flex;position:relative}.UIsw-label{cursor:pointer;-webkit-user-select:none;user-select:none}.UIsw-label:hover{color:var(--sw-700)}.UIsw>input[type=checkbox]{display:none}.UIsw-slider{background-color:var(--sw-100);cursor:pointer;border:1px solid var(--sw-300);border-radius:1.5rem;width:5rem;height:2.5rem;transition:background-color .4s,border-color .4s;position:relative;overflow:hidden}.UIsw-slider:after{content:"";border-radius:inherit;background:radial-gradient(circle at center, var(--sw-700) 0%, transparent 60%);opacity:0;pointer-events:none;position:absolute;inset:0;transform:scale(0)}.UIsw-slider.ui-ripple:after{animation:1s ease-out forwards ui-ripple}.UIsw-slider:before{z-index:1;content:"";background-color:var(--sw-300);border-radius:1.5rem;width:2.5rem;height:2.5rem;transition:transform .1s;position:absolute;left:0}.UIsw-slider:hover{border-color:var(--sw-50);color:var(--sw-300)}.UIsw-slider:hover~.UIsw-slider__on,.UIsw-slider:hover~.UIsw-slider__off{color:var(--sw-300);transition:color .4s}.UIsw-slider__on,.UIsw-slider__off{color:var(--sw-950);cursor:pointer;transition:color .4s;position:absolute;right:3rem}.UIsw-slider__on:hover,.UIsw-slider__off:hover{color:var(--sw-300)}.UIsw-slider__off{color:var(--sw-700);right:.7rem}.UIsw.UIsw--flash>.UIsw-slider{--flash-start:var(--sw-50);--flash-mid:var(--sw-700);--flash-end:var(--sw-950);animation:.4s ease-out ui-flash}.UIsw[aria-disabled=true]{pointer-events:none;cursor:not-allowed}.UIsw[aria-disabled=true]>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--sw-300)}.UIsw[aria-disabled=true]>input[type=checkbox]:checked~.UIsw-slider{border-color:var(--sw-50)}.UIsw:has(>input:disabled){pointer-events:none;cursor:not-allowed}.UIsw:has(>input:disabled)>.UIsw-label{color:var(--sw-300)}.UIsw:has(>input:disabled)>span{color:var(--sw-300);border-color:var(--sw-50);background-color:var(--sw-50)}.UIsw:has(>input:disabled)>span:before{background-color:var(--sw-100)}:is(.UIsw:has(>input:disabled)>.UIsw-slider__on,.UIsw:has(>input:disabled)>.UIsw-slider__off){background-color:#0000}.UIsw>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--sw-100);border-color:var(--sw-700)}.UIsw>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--sw-700);transform:translate(2.5rem)}.UIsw>input[type=checkbox]:checked~.UIsw-slider:hover{border-color:var(--sw-50)}.UIsw:has(.UIsw-slider__on:hover,.UIsw-slider__off:hover) .UIsw-slider{border-color:var(--sw-50)}.UIsw>input[type=checkbox]:checked:has(~.UIsw-slider__on:hover,~.UIsw-slider__off:hover)~.UIsw-slider{border-color:var(--sw-50)}.UIsw.lg>.UIsw-slider{width:6rem;height:3rem}.UIsw.lg>.UIsw-slider:before{border-radius:1.5rem;width:3rem;height:3rem}.UIsw.lg>.UIsw-slider__on{font-size:1.2rem;right:3.8rem}.UIsw.lg>.UIsw-slider__off{font-size:1.2rem;right:1rem}.UIsw.lg>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(3rem)}.UIsw.sm{gap:1rem}.UIsw.sm>.UIsw-slider{width:4rem;height:2rem}.UIsw.sm>.UIsw-slider:before{border-radius:1.5rem;width:2rem;height:2rem}.UIsw.sm>.UIsw-slider__on,.UIsw.sm>.UIsw-slider__off{font-size:.9rem;right:2.5rem}.UIsw.sm>.UIsw-slider__off{right:.6rem}.UIsw.sm>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(2rem)}.UIsw.xsm{gap:.5rem}.UIsw.xsm>.UIsw-slider{width:2rem;height:1rem}.UIsw.xsm>.UIsw-slider:before{border-radius:1.5rem;width:1rem;height:1rem}.UIsw.xsm>.UIsw-slider__on,.UIsw.xsm>.UIsw-slider__off{font-size:.6rem;right:1.2rem}.UIsw.xsm>.UIsw-slider__off{right:.3rem}.UIsw.xsm>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(1rem)}.UIsw.r-0>.UIsw-slider,.UIsw.r-0>.UIsw-slider:before{border-radius:0}.UIsw.r-1>.UIsw-slider,.UIsw.r-1>.UIsw-slider:before{border-radius:.5rem}.UIsw.label-top{margin-top:1.5rem}.UIsw.label-top>.UIsw-label{white-space:nowrap;position:absolute;bottom:calc(100% + .25rem);left:0}.UIsw.danger{--sw-50:var(--c-d-50);--sw-100:var(--c-d-100);--sw-300:var(--c-d-300);--sw-700:var(--c-d-700);--sw-950:var(--c-d-950)}.UIsw.info{--sw-50:var(--c-i-50);--sw-100:var(--c-i-100);--sw-300:var(--c-i-300);--sw-700:var(--c-i-700);--sw-950:var(--c-i-950)}.UIsw.success{--sw-50:var(--c-s-50);--sw-100:var(--c-s-100);--sw-300:var(--c-s-300);--sw-700:var(--c-s-700);--sw-950:var(--c-s-950)}.UIsw.primary{--sw-50:var(--c-p-50);--sw-100:var(--c-p-100);--sw-300:var(--c-p-300);--sw-700:var(--c-p-700);--sw-950:var(--c-p-950)}.UIsw.warning{--sw-50:var(--c-w-50);--sw-100:var(--c-w-100);--sw-300:var(--c-w-300);--sw-700:var(--c-w-700);--sw-950:var(--c-w-950)}.UIsw.warning>.UIsw-slider__off{color:var(--sw-300)}.UIql{--ql-bg:var(--sp-100,var(--sw-100,var(--sl-100,var(--b-100,var(--bg-100,var(--c-g-100))))));--ql-fg:var(--sp-700,var(--sw-700,var(--sl-700,var(--b-700,var(--bg-700,var(--c-g-700))))));--ql-border:var(--sp-300,var(--sw-300,var(--sl-300,var(--b-300,var(--bg-300,var(--c-g-300))))));--ql-tip-bg:var(--sp-700,var(--sw-700,var(--sl-700,var(--b-700,var(--bg-700,var(--c-g-700))))));--ql-tip-fg:var(--sp-50,var(--sw-50,var(--sl-50,var(--b-50,var(--bg-50,var(--c-g-50))))));box-sizing:border-box;background-color:var(--ql-bg);width:1.15em;height:1.15em;color:var(--ql-fg);vertical-align:middle;cursor:help;-webkit-user-select:none;user-select:none;border-radius:50%;justify-content:center;align-items:center;margin-left:.35em;font-size:.8em;font-weight:700;line-height:1;transition:background-color .2s,color .2s;display:inline-flex;position:relative;top:-.2rem}.UIql:before{content:"?"}.UIql:hover,.UIql:focus{background-color:var(--ql-tip-bg);color:var(--ql-tip-fg);outline:none}.UIql>.UIql__text{--ql-shift-x:-50%;--ql-arrow-inset:.9rem;z-index:10;box-sizing:border-box;background-color:var(--ql-tip-bg);width:max-content;max-width:min(15rem,100vw - 1rem);color:var(--ql-tip-fg);text-align:left;white-space:normal;opacity:0;visibility:hidden;pointer-events:none;transform:translate(var(--ql-shift-x), .25em);border-radius:.5rem;padding:.4rem .6rem;font-size:.85rem;font-weight:400;line-height:1.35;transition:opacity .18s,transform .18s,visibility 0s linear .18s;position:absolute;bottom:calc(100% + .5em);left:50%;box-shadow:0 2px 8px #00000080}.UIql>.UIql__text:after{content:"";border:.35rem solid #0000;border-top-color:var(--ql-tip-bg);margin-left:-.35rem;position:absolute;top:100%;left:50%}.UIql.UIql--right>.UIql__text{--ql-shift-x:0;left:0;right:auto}.UIql.UIql--right>.UIql__text:after{left:var(--ql-arrow-inset);margin-left:-.35rem}.UIql.UIql--left>.UIql__text{--ql-shift-x:0;left:auto;right:0}.UIql.UIql--left>.UIql__text:after{left:auto;right:var(--ql-arrow-inset);margin-left:0;margin-right:-.35rem}.UIql:hover>.UIql__text,.UIql:focus>.UIql__text{opacity:1;visibility:visible;transform:translate(var(--ql-shift-x), 0);transition:opacity .18s,transform .18s,visibility}:root{--g-50:#f2f2f2;--g-100:#e6e6e6;--g-300:#b3b3b3;--g-500:gray;--g-700:#4d4d4d;--g-900:#1a1a1a;--g-950:#0d0d0d;--d-50:#ffe6ea;--d-100:#ffccd5;--d-300:#ff6680;--d-500:#ff002b;--d-700:#99001a;--d-900:#330009;--d-950:#1a0004;--i-50:#e7f8fe;--i-100:#cff1fc;--i-300:#6ed5f7;--i-500:#0db9f2;--i-700:#086f91;--i-900:#032530;--i-950:#011218;--p-50:#ececf9;--p-100:#d9d9f2;--p-300:#8c8cd9;--p-500:#4040bf;--p-700:#262673;--p-900:#0d0d26;--p-950:#060613;--s-50:#e9fbf2;--s-100:#d4f7e6;--s-300:#7de8b3;--s-500:#26d980;--s-700:#17824d;--s-900:#082b1a;--s-950:#04160d;--w-50:#fcf7e9;--w-100:#f9efd2;--w-300:#eccf79;--w-500:#dfaf20;--w-700:#866913;--w-900:#2d2306;--w-950:#161203;--c-d-50:var(--d-50);--c-d-100:var(--d-100);--c-d-300:var(--d-300);--c-d-500:var(--d-500);--c-d-700:var(--d-700);--c-d-900:var(--d-900);--c-d-950:var(--d-950);--c-i-50:var(--i-50);--c-i-100:var(--i-100);--c-i-300:var(--i-300);--c-i-500:var(--i-500);--c-i-700:var(--i-700);--c-i-900:var(--i-900);--c-i-950:var(--i-950);--c-p-50:var(--p-50);--c-p-100:var(--p-100);--c-p-300:var(--p-300);--c-p-500:var(--p-500);--c-p-700:var(--p-700);--c-p-900:var(--p-900);--c-p-950:var(--p-950);--c-s-50:var(--s-50);--c-s-100:var(--s-100);--c-s-300:var(--s-300);--c-s-500:var(--s-500);--c-s-700:var(--s-700);--c-s-900:var(--s-900);--c-s-950:var(--s-950);--c-g-50:var(--g-50);--c-g-100:var(--g-100);--c-g-300:var(--g-300);--c-g-500:var(--g-500);--c-g-700:var(--g-700);--c-g-900:var(--g-900);--c-g-950:var(--g-950);--c-w-50:var(--w-50);--c-w-100:var(--w-100);--c-w-300:var(--w-300);--c-w-500:var(--w-500);--c-w-700:var(--w-700);--c-w-900:var(--w-900);--c-w-950:var(--w-950)}body{background-color:var(--c-g-50);color:var(--c-g-950);padding:0;transition:background .4s}html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{margin:.67em 0;font-size:2em}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{color:inherit;background-color:#0000;text-decoration:none}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}fieldset{border:1px solid silver;margin:0;padding:.35em .75em .625em}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}table{border-collapse:collapse;border-spacing:0}@keyframes ui-ripple{0%{opacity:1;transform:scale(0)}to{opacity:0;transform:scale(5)}}@keyframes ui-flash{0%{box-shadow:0 0 0 0 var(--flash-start)}50%{box-shadow:0 0 5px 1px var(--flash-mid)}to{box-shadow:0 0 0 0 var(--flash-end)}}.UIFlash{--flash-start:var(--c-g-50);--flash-mid:var(--c-g-700);--flash-end:var(--c-g-950);animation:.4s ease-out ui-flash}
|
|
1
|
+
.UIbg{--bg-50:var(--c-g-50);--bg-100:var(--c-g-100);--bg-300:var(--c-g-300);--bg-500:var(--c-g-500);--bg-700:var(--c-g-700);--bg-950:var(--c-g-950);flex-shrink:0;grid-auto-columns:minmax(min-content,1fr);grid-auto-flow:column;align-content:center;gap:.5rem;display:grid}.UIbg.vertical{grid-auto-rows:min-content;grid-auto-flow:row}.UIbg-input{opacity:0;pointer-events:none;position:absolute}.UIbg-input:checked+.UIbg-btn{background-color:var(--bg-700);border-color:var(--bg-950);color:var(--bg-50)}.UIbg-input:disabled+.UIbg-btn{background-color:var(--bg-100);border-color:var(--bg-100);color:var(--bg-300);cursor:not-allowed}.UIbg-input:not(:disabled)+.UIbg-btn:hover{background-color:var(--bg-700);border-color:var(--bg-700);color:var(--bg-50)}.UIbg>.UIbg-btn{cursor:pointer;background-color:var(--bg-100);border:1px solid var(--bg-500);height:2.5rem;color:var(--bg-950);border-radius:.5rem;justify-content:center;align-items:center;padding:.125rem;font-size:1rem;transition:all .4s,color .4s;display:flex;position:relative;overflow:hidden}.UIbg>.UIbg-btn:after{content:"";border-radius:inherit;background:radial-gradient(circle at center, var(--bg-500) 0%, transparent 60%);opacity:0;pointer-events:none;position:absolute;inset:0;transform:scale(0)}.UIbg>.UIbg-btn.ui-ripple:after{animation:1s ease-out forwards ui-ripple}.UIbg>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--bg-700);border-color:var(--bg-700);color:var(--bg-950)}.UIbg>.UIbg-btn.UIbg--flash{--flash-start:var(--bg-50);--flash-mid:var(--bg-700);--flash-end:var(--bg-950);animation:.4s ease-out ui-flash}.UIbg.r-0>.UIbg-btn{border-radius:0}.UIbg.r-round>.UIbg-btn{border-radius:999px}.UIbg.r-round.g-0>.UIbg-btn:first-of-type{border-radius:999px 0 0 999px}.UIbg.r-round.g-0>.UIbg-btn:last-of-type{border-radius:0 999px 999px 0}.UIbg.g-0{gap:0}.UIbg.g-0>.UIbg-btn{border:0;border-radius:0}.UIbg.g-1{gap:1rem}.UIbg.sm>.UIbg-btn{height:2rem;font-size:.9rem}.UIbg.lg>.UIbg-btn{height:3rem;font-size:1.1rem}.UIbg[aria-disabled=true]{opacity:.5;pointer-events:none;cursor:not-allowed}.UIbg.border{border:1px solid var(--bg-100);border-radius:.5rem;padding:5px}.UIbg.border:hover:not([aria-disabled=true]){border-color:var(--bg-700)}.UIbg.border.r-0{border-radius:0}.UIbg.border.r-round{border-radius:999px}.UIbg.danger{--bg-50:var(--c-d-50);--bg-100:var(--c-d-100);--bg-300:var(--c-d-300);--bg-500:var(--c-d-500);--bg-700:var(--c-d-700);--bg-950:var(--c-d-950)}.UIbg.info{--bg-50:var(--c-i-50);--bg-100:var(--c-i-100);--bg-300:var(--c-i-300);--bg-500:var(--c-i-500);--bg-700:var(--c-i-700);--bg-950:var(--c-i-950)}.UIbg.primary{--bg-50:var(--c-p-50);--bg-100:var(--c-p-100);--bg-300:var(--c-p-300);--bg-500:var(--c-p-500);--bg-700:var(--c-p-700);--bg-950:var(--c-p-950)}.UIbg.success{--bg-50:var(--c-s-50);--bg-100:var(--c-s-100);--bg-300:var(--c-s-300);--bg-500:var(--c-s-500);--bg-700:var(--c-s-700);--bg-950:var(--c-s-950)}.UIbg.warning{--bg-50:var(--c-w-50);--bg-100:var(--c-w-100);--bg-300:var(--c-w-300);--bg-500:var(--c-w-500);--bg-700:var(--c-w-700);--bg-950:var(--c-w-950)}.UIb{--b-50:var(--c-g-50);--b-100:var(--c-g-100);--b-300:var(--c-g-300);--b-500:var(--c-g-500);--b-700:var(--c-g-700);--b-950:var(--c-g-950);cursor:pointer;background-color:var(--b-100);border:1px solid var(--b-500);height:2.5rem;color:var(--b-950);border-radius:.5rem;flex-shrink:0;justify-content:center;align-items:center;gap:.5rem;padding:.125rem .75rem;font-size:1rem;transition:background-color .4s,color .1s;display:flex;position:relative;overflow:hidden}.UIb:after{content:"";border-radius:inherit;background:radial-gradient(circle at center, var(--b-500) 0%, transparent 60%);opacity:0;pointer-events:none;position:absolute;inset:0;transform:scale(0)}.UIb.UIb--ripple:after{animation:1s ease-out forwards ui-ripple}.UIb.UIb--flash{--flash-start:var(--b-50);--flash-mid:var(--b-700);--flash-end:var(--b-950);animation:.4s ease-out ui-flash}.UIb:hover:not(:disabled){background-color:var(--b-700);border-color:var(--b-700);color:var(--b-50)}.UIb:disabled,.UIb[aria-disabled=true]{background-color:var(--b-100);border-color:var(--b-100);color:var(--b-300);cursor:not-allowed;pointer-events:none}.UIb.expand{width:100%}.UIb.between{justify-content:space-between}.UIb.around{justify-content:space-around}.UIb.r-0{border-radius:0}.UIb.r-round{border-radius:999px}.UIb.g-0{gap:0}.UIb.g-1{gap:1rem}.UIb.sm{height:2rem;font-size:.9rem}.UIb.lg{height:3rem;font-size:1.1rem}.UIb.danger{--b-50:var(--c-d-50);--b-100:var(--c-d-100);--b-300:var(--c-d-300);--b-500:var(--c-d-500);--b-700:var(--c-d-700);--b-950:var(--c-d-950)}.UIb.info{--b-50:var(--c-i-50);--b-100:var(--c-i-100);--b-300:var(--c-i-300);--b-500:var(--c-i-500);--b-700:var(--c-i-700);--b-950:var(--c-i-950)}.UIb.primary{--b-50:var(--c-p-50);--b-100:var(--c-p-100);--b-300:var(--c-p-300);--b-500:var(--c-p-500);--b-700:var(--c-p-700);--b-950:var(--c-p-950)}.UIb.success{--b-50:var(--c-s-50);--b-100:var(--c-s-100);--b-300:var(--c-s-300);--b-500:var(--c-s-500);--b-700:var(--c-s-700);--b-950:var(--c-s-950)}.UIb.warning{--b-50:var(--c-w-50);--b-100:var(--c-w-100);--b-300:var(--c-w-300);--b-500:var(--c-w-500);--b-700:var(--c-w-700);--b-950:var(--c-w-950)}.UIsp{--sp-50:var(--c-g-50);--sp-100:var(--c-g-100);--sp-300:var(--c-g-300);--sp-500:var(--c-g-500);--sp-700:var(--c-g-700);--sp-950:var(--c-g-950);flex-shrink:0;grid-template-columns:min-content 1fr min-content;align-self:end;align-items:end;width:13rem;display:grid}.UIsp.UIsp--flash>.UIsp__btn,.UIsp.UIsp--flash>.UIsp__input{--flash-start:var(--sp-50);--flash-mid:var(--sp-700);--flash-end:var(--sp-950);animation:.4s ease-out ui-flash}.UIsp>.UIsp-label{grid-column:1/-1;padding:0 0 .075rem .25rem;font-size:1rem}.UIsp>.UIsp__input{text-align:center;background-color:var(--sp-50);height:2.5rem;color:var(--sp-700);border:none;border-top:1px solid var(--sp-500);border-bottom:1px solid var(--sp-500);box-sizing:border-box;outline:none;width:100%;min-width:3rem;padding:0;font-size:1.5rem;font-weight:700}.UIsp>.UIsp__input:focus{background-color:var(--sp-50);color:var(--sp-950)}.UIsp>.UIsp__input:disabled{opacity:.5;cursor:not-allowed}.UIsp__txt{font-weight:400}.UIsp>.UIsp__btn{cursor:pointer;background-color:var(--sp-100);border:none;border:1px solid var(--sp-500);width:3rem;height:2.5rem;color:var(--sp-950);border-radius:.5rem 0 0 .5rem;justify-content:center;align-items:center;padding:0;font-size:2rem;transition:background-color .4s,color .1s;display:flex;position:relative;overflow:hidden}.UIsp>.UIsp__btn:after{content:"";border-radius:inherit;background:radial-gradient(circle at center, var(--sp-500) 0%, transparent 60%);opacity:0;pointer-events:none;position:absolute;inset:0;transform:scale(0)}.UIsp>.UIsp__btn.ui-ripple:after{animation:1s ease-out forwards ui-ripple}.UIsp>.UIsp__btn:hover{background-color:var(--sp-700);color:var(--sp-50)}.UIsp>.disabled{background-color:var(--sp-100);border-color:var(--sp-500);color:var(--sp-300);pointer-events:none}.UIsp[aria-disabled=true]{pointer-events:none;cursor:not-allowed}.UIsp[aria-disabled=true]>button,.UIsp[aria-disabled=true]>input{border-color:var(--sp-100)}.UIsp[aria-disabled=true]>.UIsp-label{color:var(--sp-300)}.UIsp>.UIsp__btn:first-of-type{border-radius:.5rem 0 0 .5rem}.UIsp>.UIsp__btn:last-of-type{border-radius:0 .5rem .5rem 0}.UIsp.r-0>.UIsp__btn{border-radius:0}.UIsp.r-round>.UIsp__btn:first-of-type{border-radius:999px 0 0 999px}.UIsp.r-round>.UIsp__btn:last-of-type{border-radius:0 999px 999px 0}.UIsp.sm{width:10rem}.UIsp.sm>.UIsp-label{padding:0 0 0 .125rem;font-size:.8rem}.UIsp.sm>.UIsp__input,.UIsp.sm>.UIsp__btn{height:2rem;font-size:1rem}.UIsp.sm>.UIsp__btn{width:2rem}.UIsp.lg{width:16rem}.UIsp.lg>.UIsp__input,.UIsp.lg>.UIsp__btn{height:3rem;font-size:2rem}.UIsp.lg>.UIsp__btn{width:3rem}.UIsp.danger{--sp-50:var(--c-d-50);--sp-100:var(--c-d-100);--sp-300:var(--c-d-300);--sp-500:var(--c-d-500);--sp-700:var(--c-d-700);--sp-950:var(--c-d-950)}.UIsp.info{--sp-50:var(--c-i-50);--sp-100:var(--c-i-100);--sp-300:var(--c-i-300);--sp-500:var(--c-i-500);--sp-700:var(--c-i-700);--sp-950:var(--c-i-950)}.UIsp.primary{--sp-50:var(--c-p-50);--sp-100:var(--c-p-100);--sp-300:var(--c-p-300);--sp-500:var(--c-p-500);--sp-700:var(--c-p-700);--sp-950:var(--c-p-950)}.UIsp.success{--sp-50:var(--c-s-50);--sp-100:var(--c-s-100);--sp-300:var(--c-s-300);--sp-500:var(--c-s-500);--sp-700:var(--c-s-700);--sp-950:var(--c-s-950)}.UIsp.warning{--sp-50:var(--c-w-50);--sp-100:var(--c-w-100);--sp-300:var(--c-w-300);--sp-500:var(--c-w-500);--sp-700:var(--c-w-700);--sp-950:var(--c-w-950)}.UIselect{--sl-50:var(--c-g-50);--sl-100:var(--c-g-100);--sl-300:var(--c-g-300);--sl-500:var(--c-g-500);--sl-700:var(--c-g-700);--sl-900:var(--c-g-900);--sl-950:var(--c-g-950);--sl-item-hover-bg:var(--sl-500);--sl-item-hover-color:var(--sl-50);--sl-item-sel-bg:var(--sl-300);--sl-item-sel-color:var(--sl-950);background-color:var(--sl-500);cursor:pointer;box-sizing:border-box;white-space:nowrap;border-radius:.5rem;align-self:end;width:12rem;min-width:10rem;height:2.5rem;display:flex;position:relative}.UIselect:hover{background-color:var(--sl-700)}.UIselect:hover .UIselect-selected,.UIselect:hover .UIselect-arrow{background-color:var(--sl-700);color:var(--sl-50)}.UIselect-selected{background-color:var(--sl-100);color:var(--sl-900);border-radius:.5rem;align-items:center;width:100%;height:calc(100% - 2px);margin:1px;padding:0 .5rem;display:flex;overflow:hidden}.UIselect-selected>span{white-space:nowrap;text-align:center;max-width:100%;display:inline-block;overflow:hidden}.UIselect-selected.center>span{text-align:left;max-width:100%;margin:0 auto}.UIselect-arrow{background-color:var(--sl-100);width:2rem;height:calc(100% - 4px);color:var(--sl-700);border-radius:.5rem;place-content:center;align-items:center;margin:2px 5px;font-size:.8rem;position:absolute;top:0;right:0}.UIselect-arrow>svg{margin:0 auto;display:flex}.UIselect-options{width:inherit;background-color:var(--sl-100);color:var(--sl-950);z-index:2;box-sizing:border-box;border:1px solid var(--sl-500);border-radius:.5rem;margin:0;padding:0;list-style:none;position:absolute;left:0;overflow:hidden}.UIselect-options__search{padding:1px 2px;position:sticky;top:1px}.UIselect-options__search>input{width:100%;height:inherit;border:1px solid var(--sl-300);box-shadow:none;background-color:var(--sl-50);color:var(--sl-950);border-radius:.5rem;padding:0 7px;font-size:1.5rem}.UIselect-options__search>input:focus-visible{outline:none}.UIselect-options__items{max-height:20rem;overflow-y:auto}.UIselect-options__items>ul{margin:0;padding:0;list-style:none}.UIselect-options__items>ul>li{border-radius:.5rem;align-items:center;height:2.5rem;margin:1px;padding:0 .5rem;display:flex}.UIselect-options__items>ul>li[hidden]{display:none}.UIselect-options__items>ul>li:hover{background-color:var(--sl-item-hover-bg);color:var(--sl-item-hover-color)}.UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--sl-item-sel-bg);color:var(--sl-item-sel-color)}.UIselect-options__items>ul>li.divider{background-color:var(--sl-300);height:1px;margin:0 .25rem}.UIselect.r-0,.UIselect.r-0>.UIselect-selected,.UIselect.r-0>.UIselect-options,.UIselect.r-0>.UIselect-options>li.UIselect-options__search,.UIselect.r-0>.UIselect-options>li.UIselect-options__search>input,.UIselect.r-0>.UIselect-options>li>ul>li{border-radius:0}.UIselect.r-round,.UIselect.r-round>.UIselect-selected,.UIselect.r-round>.UIselect-arrow{border-radius:999px}.UIselect.lg{width:16rem;min-width:12rem;height:3rem;font-size:1.1rem}.UIselect.lg>.UIselect-selected{overflow:hidden}.UIselect.lg .UIselect-options__search>input{height:3rem;font-size:1.7rem}.UIselect.lg .UIselect-options__items{max-height:25rem}.UIselect.lg .UIselect-options__items>ul>li{height:3rem}.UIselect.lg .UIselect-options__items>ul>li.divider{height:1px;margin:0 .5rem}.UIselect.sm{width:10rem;min-width:8rem;height:2rem;font-size:.9rem}.UIselect.sm .UIselect-options__search>input{height:2rem;font-size:1rem}.UIselect.sm .UIselect-options__items{max-height:15rem}.UIselect.sm .UIselect-options__items>ul>li{height:2rem}.UIselect.sm .UIselect-options__items>ul>li.divider{height:1px;margin:0 .25rem}.UIselect.expand{width:100%}.UIselect.UIselect--flash{--flash-start:var(--sl-50);--flash-mid:var(--sl-700);--flash-end:var(--sl-950);animation:.4s ease-out ui-flash}.UIselect[aria-disabled=true]{pointer-events:none;opacity:.5;cursor:not-allowed}.UIselect.danger{--sl-50:var(--c-d-50);--sl-100:var(--c-d-100);--sl-300:var(--c-d-300);--sl-500:var(--c-d-500);--sl-700:var(--c-d-700);--sl-900:var(--c-d-900);--sl-950:var(--c-d-950);--sl-item-hover-bg:var(--sl-300);--sl-item-hover-color:var(--sl-950);--sl-item-sel-bg:var(--sl-700);--sl-item-sel-color:var(--sl-50)}.UIselect.info{--sl-50:var(--c-i-50);--sl-100:var(--c-i-100);--sl-300:var(--c-i-300);--sl-500:var(--c-i-500);--sl-700:var(--c-i-700);--sl-900:var(--c-i-900);--sl-950:var(--c-i-950);--sl-item-hover-bg:var(--sl-300);--sl-item-hover-color:var(--sl-950);--sl-item-sel-bg:var(--sl-700);--sl-item-sel-color:var(--sl-50)}.UIselect.primary{--sl-50:var(--c-p-50);--sl-100:var(--c-p-100);--sl-300:var(--c-p-300);--sl-500:var(--c-p-500);--sl-700:var(--c-p-700);--sl-900:var(--c-p-900);--sl-950:var(--c-p-950);--sl-item-hover-bg:var(--sl-300);--sl-item-hover-color:var(--sl-950);--sl-item-sel-bg:var(--sl-700);--sl-item-sel-color:var(--sl-50)}.UIselect.success{--sl-50:var(--c-s-50);--sl-100:var(--c-s-100);--sl-300:var(--c-s-300);--sl-500:var(--c-s-500);--sl-700:var(--c-s-700);--sl-900:var(--c-s-900);--sl-950:var(--c-s-950);--sl-item-hover-bg:var(--sl-300);--sl-item-hover-color:var(--sl-950);--sl-item-sel-bg:var(--sl-700);--sl-item-sel-color:var(--sl-50)}.UIselect.warning{--sl-50:var(--c-w-50);--sl-100:var(--c-w-100);--sl-300:var(--c-w-300);--sl-500:var(--c-w-500);--sl-700:var(--c-w-700);--sl-900:var(--c-w-900);--sl-950:var(--c-w-950);--sl-item-hover-bg:var(--sl-300);--sl-item-hover-color:var(--sl-950);--sl-item-sel-bg:var(--sl-700);--sl-item-sel-color:var(--sl-50)}.UIsw{--sw-50:var(--c-g-50);--sw-100:var(--c-g-100);--sw-300:var(--c-g-300);--sw-700:var(--c-g-700);--sw-950:var(--c-g-950);flex-shrink:0;align-items:center;gap:1.5rem;display:inline-flex;position:relative}.UIsw-label{cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.UIsw-label:hover{color:var(--sw-700)}.UIsw>input[type=checkbox]{display:none}.UIsw-slider{background-color:var(--sw-100);cursor:pointer;border:1px solid var(--sw-300);border-radius:1.5rem;width:5rem;height:2.5rem;transition:background-color .4s,border-color .4s;position:relative;overflow:hidden}.UIsw-slider:after{content:"";border-radius:inherit;background:radial-gradient(circle at center, var(--sw-700) 0%, transparent 60%);opacity:0;pointer-events:none;position:absolute;inset:0;transform:scale(0)}.UIsw-slider.ui-ripple:after{animation:1s ease-out forwards ui-ripple}.UIsw-slider:before{z-index:1;content:"";background-color:var(--sw-300);border-radius:1.5rem;width:2.5rem;height:2.5rem;transition:transform .1s;position:absolute;left:0}.UIsw-slider:hover{border-color:var(--sw-50);color:var(--sw-300)}.UIsw-slider:hover~.UIsw-slider__on,.UIsw-slider:hover~.UIsw-slider__off{color:var(--sw-300);transition:color .4s}.UIsw-slider__on,.UIsw-slider__off{color:var(--sw-950);cursor:pointer;transition:color .4s;position:absolute;right:3rem}.UIsw-slider__on:hover,.UIsw-slider__off:hover{color:var(--sw-300)}.UIsw-slider__off{color:var(--sw-700);right:.7rem}.UIsw.UIsw--flash>.UIsw-slider{--flash-start:var(--sw-50);--flash-mid:var(--sw-700);--flash-end:var(--sw-950);animation:.4s ease-out ui-flash}.UIsw[aria-disabled=true]{pointer-events:none;cursor:not-allowed}.UIsw[aria-disabled=true]>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--sw-300)}.UIsw[aria-disabled=true]>input[type=checkbox]:checked~.UIsw-slider{border-color:var(--sw-50)}.UIsw:has(>input:disabled){pointer-events:none;cursor:not-allowed}.UIsw:has(>input:disabled)>.UIsw-label{color:var(--sw-300)}.UIsw:has(>input:disabled)>span{color:var(--sw-300);border-color:var(--sw-50);background-color:var(--sw-50)}.UIsw:has(>input:disabled)>span:before{background-color:var(--sw-100)}:is(.UIsw:has(>input:disabled)>.UIsw-slider__on,.UIsw:has(>input:disabled)>.UIsw-slider__off){background-color:#0000}.UIsw>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--sw-100);border-color:var(--sw-700)}.UIsw>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--sw-700);transform:translate(2.5rem)}.UIsw>input[type=checkbox]:checked~.UIsw-slider:hover{border-color:var(--sw-50)}.UIsw:has(.UIsw-slider__on:hover,.UIsw-slider__off:hover) .UIsw-slider{border-color:var(--sw-50)}.UIsw>input[type=checkbox]:checked:has(~.UIsw-slider__on:hover,~.UIsw-slider__off:hover)~.UIsw-slider{border-color:var(--sw-50)}.UIsw.lg>.UIsw-slider{width:6rem;height:3rem}.UIsw.lg>.UIsw-slider:before{border-radius:1.5rem;width:3rem;height:3rem}.UIsw.lg>.UIsw-slider__on{font-size:1.2rem;right:3.8rem}.UIsw.lg>.UIsw-slider__off{font-size:1.2rem;right:1rem}.UIsw.lg>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(3rem)}.UIsw.sm{gap:1rem}.UIsw.sm>.UIsw-slider{width:4rem;height:2rem}.UIsw.sm>.UIsw-slider:before{border-radius:1.5rem;width:2rem;height:2rem}.UIsw.sm>.UIsw-slider__on,.UIsw.sm>.UIsw-slider__off{font-size:.9rem;right:2.5rem}.UIsw.sm>.UIsw-slider__off{right:.6rem}.UIsw.sm>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(2rem)}.UIsw.xsm{gap:.5rem}.UIsw.xsm>.UIsw-slider{width:2rem;height:1rem}.UIsw.xsm>.UIsw-slider:before{border-radius:1.5rem;width:1rem;height:1rem}.UIsw.xsm>.UIsw-slider__on,.UIsw.xsm>.UIsw-slider__off{font-size:.6rem;right:1.2rem}.UIsw.xsm>.UIsw-slider__off{right:.3rem}.UIsw.xsm>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(1rem)}.UIsw.r-0>.UIsw-slider,.UIsw.r-0>.UIsw-slider:before{border-radius:0}.UIsw.r-1>.UIsw-slider,.UIsw.r-1>.UIsw-slider:before{border-radius:.5rem}.UIsw.label-top{margin-top:1.5rem}.UIsw.label-top>.UIsw-label{white-space:nowrap;position:absolute;bottom:calc(100% + .25rem);left:0}.UIsw.danger{--sw-50:var(--c-d-50);--sw-100:var(--c-d-100);--sw-300:var(--c-d-300);--sw-700:var(--c-d-700);--sw-950:var(--c-d-950)}.UIsw.info{--sw-50:var(--c-i-50);--sw-100:var(--c-i-100);--sw-300:var(--c-i-300);--sw-700:var(--c-i-700);--sw-950:var(--c-i-950)}.UIsw.success{--sw-50:var(--c-s-50);--sw-100:var(--c-s-100);--sw-300:var(--c-s-300);--sw-700:var(--c-s-700);--sw-950:var(--c-s-950)}.UIsw.primary{--sw-50:var(--c-p-50);--sw-100:var(--c-p-100);--sw-300:var(--c-p-300);--sw-700:var(--c-p-700);--sw-950:var(--c-p-950)}.UIsw.warning{--sw-50:var(--c-w-50);--sw-100:var(--c-w-100);--sw-300:var(--c-w-300);--sw-700:var(--c-w-700);--sw-950:var(--c-w-950)}.UIsw.warning>.UIsw-slider__off{color:var(--sw-300)}.UIql{--ql-bg:var(--sp-100,var(--sw-100,var(--sl-100,var(--b-100,var(--bg-100,var(--c-g-100))))));--ql-fg:var(--sp-700,var(--sw-700,var(--sl-700,var(--b-700,var(--bg-700,var(--c-g-700))))));--ql-tip-bg:var(--sp-700,var(--sw-700,var(--sl-700,var(--b-700,var(--bg-700,var(--c-g-700))))));--ql-tip-fg:var(--sp-50,var(--sw-50,var(--sl-50,var(--b-50,var(--bg-50,var(--c-g-50))))));--ql-tip-shadow:#00000080;box-sizing:border-box;background-color:var(--ql-bg);width:1.15em;height:1.15em;color:var(--ql-fg);vertical-align:middle;cursor:help;-webkit-user-select:none;user-select:none;border-radius:50%;justify-content:center;align-items:center;margin-left:.35em;font-size:.8em;font-weight:700;line-height:1;transition:background-color .2s,color .2s;display:inline-flex;position:relative;top:-.2rem}.UIql:before{content:"?"}.UIql:hover,.UIql:focus{background-color:var(--ql-tip-bg);color:var(--ql-tip-fg);outline:none}.UIql>.UIql__text{--ql-shift-x:-50%;--ql-arrow-inset:.9rem;z-index:10;box-sizing:border-box;background-color:var(--ql-tip-bg);width:max-content;max-width:min(15rem,100vw - 1rem);color:var(--ql-tip-fg);box-shadow:0 2px 8px var(--ql-tip-shadow);text-align:left;white-space:normal;opacity:0;visibility:hidden;pointer-events:none;transform:translate(var(--ql-shift-x), .25em);border-radius:.5rem;padding:.4rem .6rem;font-size:.85rem;font-weight:400;line-height:1.35;transition:opacity .18s,transform .18s,visibility 0s linear .18s;position:absolute;bottom:calc(100% + .5em);left:50%}.UIql>.UIql__text:after{content:"";border:.35rem solid #0000;border-top-color:var(--ql-tip-bg);margin-left:-.35rem;position:absolute;top:100%;left:50%}.UIql.UIql--right>.UIql__text{--ql-shift-x:0;left:0;right:auto}.UIql.UIql--right>.UIql__text:after{left:var(--ql-arrow-inset);margin-left:-.35rem}.UIql.UIql--left>.UIql__text{--ql-shift-x:0;left:auto;right:0}.UIql.UIql--left>.UIql__text:after{left:auto;right:var(--ql-arrow-inset);margin-left:0;margin-right:-.35rem}.UIql:hover>.UIql__text,.UIql:focus>.UIql__text{opacity:1;visibility:visible;transform:translate(var(--ql-shift-x), 0);transition:opacity .18s,transform .18s,visibility}:root{--g-50:#f2f2f2;--g-100:#e6e6e6;--g-300:#b3b3b3;--g-500:gray;--g-700:#4d4d4d;--g-900:#1a1a1a;--g-950:#0d0d0d;--d-50:#ffe6ea;--d-100:#ffccd5;--d-300:#ff6680;--d-500:#ff002b;--d-700:#99001a;--d-900:#330009;--d-950:#1a0004;--i-50:#e7f8fe;--i-100:#cff1fc;--i-300:#6ed5f7;--i-500:#0db9f2;--i-700:#086f91;--i-900:#032530;--i-950:#011218;--p-50:#ececf9;--p-100:#d9d9f2;--p-300:#8c8cd9;--p-500:#4040bf;--p-700:#262673;--p-900:#0d0d26;--p-950:#060613;--s-50:#e9fbf2;--s-100:#d4f7e6;--s-300:#7de8b3;--s-500:#26d980;--s-700:#17824d;--s-900:#082b1a;--s-950:#04160d;--w-50:#fcf7e9;--w-100:#f9efd2;--w-300:#eccf79;--w-500:#dfaf20;--w-700:#866913;--w-900:#2d2306;--w-950:#161203;--c-d-50:var(--d-50);--c-d-100:var(--d-100);--c-d-300:var(--d-300);--c-d-500:var(--d-500);--c-d-700:var(--d-700);--c-d-900:var(--d-900);--c-d-950:var(--d-950);--c-i-50:var(--i-50);--c-i-100:var(--i-100);--c-i-300:var(--i-300);--c-i-500:var(--i-500);--c-i-700:var(--i-700);--c-i-900:var(--i-900);--c-i-950:var(--i-950);--c-p-50:var(--p-50);--c-p-100:var(--p-100);--c-p-300:var(--p-300);--c-p-500:var(--p-500);--c-p-700:var(--p-700);--c-p-900:var(--p-900);--c-p-950:var(--p-950);--c-s-50:var(--s-50);--c-s-100:var(--s-100);--c-s-300:var(--s-300);--c-s-500:var(--s-500);--c-s-700:var(--s-700);--c-s-900:var(--s-900);--c-s-950:var(--s-950);--c-g-50:var(--g-50);--c-g-100:var(--g-100);--c-g-300:var(--g-300);--c-g-500:var(--g-500);--c-g-700:var(--g-700);--c-g-900:var(--g-900);--c-g-950:var(--g-950);--c-w-50:var(--w-50);--c-w-100:var(--w-100);--c-w-300:var(--w-300);--c-w-500:var(--w-500);--c-w-700:var(--w-700);--c-w-900:var(--w-900);--c-w-950:var(--w-950)}@media (prefers-color-scheme:dark){:root:not([data-theme]){--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--g-50:#f2f2f2;--g-100:#e6e6e6;--g-300:#b3b3b3;--g-500:gray;--g-700:#4d4d4d;--g-900:#1a1a1a;--g-950:#0d0d0d;--d-50:#ffe6ea;--d-100:#ffccd5;--d-300:#ff6680;--d-500:#ff002b;--d-700:#99001a;--d-900:#330009;--d-950:#1a0004;--i-50:#e7f8fe;--i-100:#cff1fc;--i-300:#6ed5f7;--i-500:#0db9f2;--i-700:#086f91;--i-900:#032530;--i-950:#011218;--p-50:#ececf9;--p-100:#d9d9f2;--p-300:#8c8cd9;--p-500:#4040bf;--p-700:#262673;--p-900:#0d0d26;--p-950:#060613;--s-50:#e9fbf2;--s-100:#d4f7e6;--s-300:#7de8b3;--s-500:#26d980;--s-700:#17824d;--s-900:#082b1a;--s-950:#04160d;--w-50:#fcf7e9;--w-100:#f9efd2;--w-300:#eccf79;--w-500:#dfaf20;--w-700:#866913;--w-900:#2d2306;--w-950:#161203;--c-d-50:var(--d-950);--c-d-100:var(--d-900);--c-d-300:var(--d-700);--c-d-500:var(--d-500);--c-d-700:var(--d-300);--c-d-900:var(--d-100);--c-d-950:var(--d-50);--c-i-50:var(--i-950);--c-i-100:var(--i-900);--c-i-300:var(--i-700);--c-i-500:var(--i-500);--c-i-700:var(--i-300);--c-i-900:var(--i-100);--c-i-950:var(--i-50);--c-p-50:var(--p-950);--c-p-100:var(--p-900);--c-p-300:var(--p-700);--c-p-500:var(--p-500);--c-p-700:var(--p-300);--c-p-900:var(--p-100);--c-p-950:var(--p-50);--c-s-50:var(--s-950);--c-s-100:var(--s-900);--c-s-300:var(--s-700);--c-s-500:var(--s-500);--c-s-700:var(--s-300);--c-s-900:var(--s-100);--c-s-950:var(--s-50);--c-g-50:var(--g-950);--c-g-100:var(--g-900);--c-g-300:var(--g-700);--c-g-500:var(--g-500);--c-g-700:var(--g-300);--c-g-900:var(--g-100);--c-g-950:var(--g-50);--c-w-50:var(--w-950);--c-w-100:var(--w-900);--c-w-300:var(--w-700);--c-w-500:var(--w-500);--c-w-700:var(--w-300);--c-w-900:var(--w-100);--c-w-950:var(--w-50)}}@keyframes ui-ripple{0%{opacity:1;transform:scale(0)}to{opacity:0;transform:scale(5)}}@keyframes ui-flash{0%{box-shadow:0 0 0 0 var(--flash-start)}50%{box-shadow:0 0 5px 1px var(--flash-mid)}to{box-shadow:0 0 0 0 var(--flash-end)}}
|
package/dist/theme-dark-neon.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
html[data-theme=dark-neon]{--g-50:#e6e6e6;--g-100:#bfbfbf;--g-300:#a6a6a6;--g-500:gray;--g-700:#595959;--g-900:#404040;--g-950:#1a1a1a;--d-50:#f5bea3;--d-100:#f2ae8c;--d-300:#ed8e5e;--d-500:#e65e1a;--d-700:#a14112;--d-900:#732f0d;--d-950:#2e1305;--i-50:#a3f5da;--i-100:#8cf2d0;--i-300:#5eedbe;--i-500:#1ae6a2;--i-700:#12a171;--i-900:#0d7351;--i-950:#052e20;--p-50:#a3daf5;--p-100:#8cd0f2;--p-300:#5ebeed;--p-500:#1aa1e6;--p-700:#1271a1;--p-900:#0d5173;--p-950:#05202e;--s-50:#
|
|
1
|
+
html[data-theme=dark-neon]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--g-50:#e6e6e6;--g-100:#bfbfbf;--g-300:#a6a6a6;--g-500:gray;--g-700:#595959;--g-900:#404040;--g-950:#1a1a1a;--d-50:#f5bea3;--d-100:#f2ae8c;--d-300:#ed8e5e;--d-500:#e65e1a;--d-700:#a14112;--d-900:#732f0d;--d-950:#2e1305;--i-50:#a3f5da;--i-100:#8cf2d0;--i-300:#5eedbe;--i-500:#1ae6a2;--i-700:#12a171;--i-900:#0d7351;--i-950:#052e20;--p-50:#a3daf5;--p-100:#8cd0f2;--p-300:#5ebeed;--p-500:#1aa1e6;--p-700:#1271a1;--p-900:#0d5173;--p-950:#05202e;--s-50:#a3f5a9;--s-100:#8cf293;--s-300:#5eed68;--s-500:#1ae627;--s-700:#12a11b;--s-900:#0d7314;--s-950:#052e08;--w-50:#f5daa3;--w-100:#f2d08c;--w-300:#edbe5e;--w-500:#e6a21a;--w-700:#a17112;--w-900:#73510d;--w-950:#2e2005;--c-d-50:var(--d-950);--c-d-100:var(--d-900);--c-d-300:var(--d-700);--c-d-500:var(--d-500);--c-d-700:var(--d-300);--c-d-900:var(--d-100);--c-d-950:var(--d-50);--c-i-50:var(--i-950);--c-i-100:var(--i-900);--c-i-300:var(--i-700);--c-i-500:var(--i-500);--c-i-700:var(--i-300);--c-i-900:var(--i-100);--c-i-950:var(--i-50);--c-p-50:var(--p-950);--c-p-100:var(--p-900);--c-p-300:var(--p-700);--c-p-500:var(--p-500);--c-p-700:var(--p-300);--c-p-900:var(--p-100);--c-p-950:var(--p-50);--c-s-50:var(--s-950);--c-s-100:var(--s-900);--c-s-300:var(--s-700);--c-s-500:var(--s-500);--c-s-700:var(--s-300);--c-s-900:var(--s-100);--c-s-950:var(--s-50);--c-g-50:var(--g-950);--c-g-100:var(--g-900);--c-g-300:var(--g-700);--c-g-500:var(--g-500);--c-g-700:var(--g-300);--c-g-900:var(--g-100);--c-g-950:var(--g-50);--c-w-50:var(--w-950);--c-w-100:var(--w-900);--c-w-300:var(--w-700);--c-w-500:var(--w-500);--c-w-700:var(--w-300);--c-w-900:var(--w-100);--c-w-950:var(--w-50)}
|
package/dist/theme-dark.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
html[data-theme=dark]{--g-50:#f2f2f2;--g-100:#e6e6e6;--g-300:#b3b3b3;--g-500:gray;--g-700:#4d4d4d;--g-900:#1a1a1a;--g-950:#0d0d0d;--d-50:#ffe6ea;--d-100:#ffccd5;--d-300:#ff6680;--d-500:#ff002b;--d-700:#99001a;--d-900:#330009;--d-950:#1a0004;--i-50:#e7f8fe;--i-100:#cff1fc;--i-300:#6ed5f7;--i-500:#0db9f2;--i-700:#086f91;--i-900:#032530;--i-950:#011218;--p-50:#ececf9;--p-100:#d9d9f2;--p-300:#8c8cd9;--p-500:#4040bf;--p-700:#262673;--p-900:#0d0d26;--p-950:#060613;--s-50:#e9fbf2;--s-100:#d4f7e6;--s-300:#7de8b3;--s-500:#26d980;--s-700:#17824d;--s-900:#082b1a;--s-950:#04160d;--w-50:#fcf7e9;--w-100:#f9efd2;--w-300:#eccf79;--w-500:#dfaf20;--w-700:#866913;--w-900:#2d2306;--w-950:#161203;--c-d-50:var(--d-950);--c-d-100:var(--d-900);--c-d-300:var(--d-700);--c-d-500:var(--d-500);--c-d-700:var(--d-300);--c-d-900:var(--d-100);--c-d-950:var(--d-50);--c-i-50:var(--i-950);--c-i-100:var(--i-900);--c-i-300:var(--i-700);--c-i-500:var(--i-500);--c-i-700:var(--i-300);--c-i-900:var(--i-100);--c-i-950:var(--i-50);--c-p-50:var(--p-950);--c-p-100:var(--p-900);--c-p-300:var(--p-700);--c-p-500:var(--p-500);--c-p-700:var(--p-300);--c-p-900:var(--p-100);--c-p-950:var(--p-50);--c-s-50:var(--s-950);--c-s-100:var(--s-900);--c-s-300:var(--s-700);--c-s-500:var(--s-500);--c-s-700:var(--s-300);--c-s-900:var(--s-100);--c-s-950:var(--s-50);--c-g-50:var(--g-950);--c-g-100:var(--g-900);--c-g-300:var(--g-700);--c-g-500:var(--g-500);--c-g-700:var(--g-300);--c-g-900:var(--g-100);--c-g-950:var(--g-50);--c-w-50:var(--w-950);--c-w-100:var(--w-900);--c-w-300:var(--w-700);--c-w-500:var(--w-500);--c-w-700:var(--w-300);--c-w-900:var(--w-100);--c-w-950:var(--w-50)}
|
|
1
|
+
html[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--g-50:#f2f2f2;--g-100:#e6e6e6;--g-300:#b3b3b3;--g-500:gray;--g-700:#4d4d4d;--g-900:#1a1a1a;--g-950:#0d0d0d;--d-50:#ffe6ea;--d-100:#ffccd5;--d-300:#ff6680;--d-500:#ff002b;--d-700:#99001a;--d-900:#330009;--d-950:#1a0004;--i-50:#e7f8fe;--i-100:#cff1fc;--i-300:#6ed5f7;--i-500:#0db9f2;--i-700:#086f91;--i-900:#032530;--i-950:#011218;--p-50:#ececf9;--p-100:#d9d9f2;--p-300:#8c8cd9;--p-500:#4040bf;--p-700:#262673;--p-900:#0d0d26;--p-950:#060613;--s-50:#e9fbf2;--s-100:#d4f7e6;--s-300:#7de8b3;--s-500:#26d980;--s-700:#17824d;--s-900:#082b1a;--s-950:#04160d;--w-50:#fcf7e9;--w-100:#f9efd2;--w-300:#eccf79;--w-500:#dfaf20;--w-700:#866913;--w-900:#2d2306;--w-950:#161203;--c-d-50:var(--d-950);--c-d-100:var(--d-900);--c-d-300:var(--d-700);--c-d-500:var(--d-500);--c-d-700:var(--d-300);--c-d-900:var(--d-100);--c-d-950:var(--d-50);--c-i-50:var(--i-950);--c-i-100:var(--i-900);--c-i-300:var(--i-700);--c-i-500:var(--i-500);--c-i-700:var(--i-300);--c-i-900:var(--i-100);--c-i-950:var(--i-50);--c-p-50:var(--p-950);--c-p-100:var(--p-900);--c-p-300:var(--p-700);--c-p-500:var(--p-500);--c-p-700:var(--p-300);--c-p-900:var(--p-100);--c-p-950:var(--p-50);--c-s-50:var(--s-950);--c-s-100:var(--s-900);--c-s-300:var(--s-700);--c-s-500:var(--s-500);--c-s-700:var(--s-300);--c-s-900:var(--s-100);--c-s-950:var(--s-50);--c-g-50:var(--g-950);--c-g-100:var(--g-900);--c-g-300:var(--g-700);--c-g-500:var(--g-500);--c-g-700:var(--g-300);--c-g-900:var(--g-100);--c-g-950:var(--g-50);--c-w-50:var(--w-950);--c-w-100:var(--w-900);--c-w-300:var(--w-700);--c-w-500:var(--w-500);--c-w-700:var(--w-300);--c-w-900:var(--w-100);--c-w-950:var(--w-50)}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"author": "Andrii Popov",
|
|
3
3
|
"name": "@popovandrii/ui-elements",
|
|
4
4
|
"description": "Lightweight TypeScript UI component library — SpinBox, Select with search, Switch, ButtonGroup (radio), Button. Zero dependencies, accessible (ARIA), themeable via CSS custom properties, supports destroy/reinitialize lifecycle.",
|
|
5
|
-
"version": "0.
|
|
5
|
+
"version": "0.4.0",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"keywords": [
|
|
8
8
|
"ui",
|
|
@@ -38,6 +38,7 @@
|
|
|
38
38
|
"require": "./dist/index.cjs.js"
|
|
39
39
|
},
|
|
40
40
|
"./style.css": "./dist/style.css",
|
|
41
|
+
"./base.css": "./dist/base.css",
|
|
41
42
|
"./theme-light.css": "./dist/theme-light.css",
|
|
42
43
|
"./theme-dark.css": "./dist/theme-dark.css",
|
|
43
44
|
"./theme-light-neon.css": "./dist/theme-light-neon.css",
|
|
@@ -49,12 +50,17 @@
|
|
|
49
50
|
"README.md"
|
|
50
51
|
],
|
|
51
52
|
"type": "module",
|
|
53
|
+
"sideEffects": [
|
|
54
|
+
"**/*.css"
|
|
55
|
+
],
|
|
52
56
|
"scripts": {
|
|
53
57
|
"dev": "vite --config playground/vite.config.js",
|
|
54
58
|
"build": "node build.js",
|
|
59
|
+
"prepublishOnly": "node build.js",
|
|
55
60
|
"preview": "vite preview",
|
|
56
|
-
"lint": "eslint src
|
|
57
|
-
"
|
|
61
|
+
"lint": "eslint src playground",
|
|
62
|
+
"typecheck": "tsc --noEmit && tsc --noEmit -p playground/tsconfig.json",
|
|
63
|
+
"format": "prettier --write \"{src,playground}/**/*.{ts,tsx,js,jsx,json,css,scss,md}\"",
|
|
58
64
|
"test": "vitest"
|
|
59
65
|
},
|
|
60
66
|
"devDependencies": {
|
|
@@ -71,4 +77,4 @@
|
|
|
71
77
|
"vite-plugin-dts": "^5.0.0",
|
|
72
78
|
"vitest": "^4.1.5"
|
|
73
79
|
}
|
|
74
|
-
}
|
|
80
|
+
}
|