@webority/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 +23 -0
- package/dist/ui-elements.global.js +62 -17
- package/dist/ui-elements.js +126 -63
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# @webority/ui-elements
|
|
2
|
+
|
|
3
|
+
Webority's internal `<wui-*>` custom elements — the shared behaviour behind the select,
|
|
4
|
+
autocomplete, multiselect, phone and date-picker controls, so both the React and Razor
|
|
5
|
+
component libraries run one implementation.
|
|
6
|
+
|
|
7
|
+
Published publicly so `npm install` needs no private registry. Built for Webority
|
|
8
|
+
products; no support commitment outside them.
|
|
9
|
+
|
|
10
|
+
You do not use these directly: write `<AppSelect>` (`@webority/ui-react`) or
|
|
11
|
+
`<app-select>` (`Webority.Ui.Razor`), which wrap them.
|
|
12
|
+
|
|
13
|
+
## Use
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install @webority/ui-elements
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
```js
|
|
20
|
+
import '@webority/ui-elements'; // registers the custom elements
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Component catalogue: <https://ui.webority.dev>
|
|
@@ -1,7 +1,52 @@
|
|
|
1
|
-
var WeborityUiElements=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t=
|
|
1
|
+
var WeborityUiElements=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t={success:`<rect width="174" height="174" rx="87" fill="var(--wui-success-5)"/>
|
|
2
|
+
<rect x="24" y="24" width="126" height="126" rx="63" stroke="var(--wui-success-20)" stroke-width="16"/>
|
|
3
|
+
<g clip-path="url(#wui_success_clip)">
|
|
4
|
+
<rect x="32" y="32" width="110" height="110" rx="55" fill="var(--wui-success-active)"/>
|
|
5
|
+
<rect x="108.758" y="67.5986" width="75.5044" height="49.155" transform="rotate(45 108.758 67.5986)" fill="var(--wui-success)"/>
|
|
6
|
+
<path d="M87.895 96.1046C89.7154 97.9249 89.7154 101.046 87.895 102.866L84.1243 106.637C82.3039 108.457 79.1833 108.457 77.3629 106.637L60.8496 89.9934C59.0293 88.173 59.0293 85.0524 60.8496 83.232L64.6204 79.4613C66.4408 77.6409 69.5614 77.6409 71.3817 79.4613L87.895 96.1046Z" fill="white"/>
|
|
7
|
+
<path d="M102.324 67.3672C104.144 65.5469 107.265 65.5469 109.085 67.3672L112.856 71.138C114.676 72.9583 114.676 76.079 112.856 77.8993L84.2499 106.375C82.4296 108.195 79.3089 108.195 77.4886 106.375L73.7178 102.604C71.8975 100.784 71.8975 97.6633 73.7178 95.8429L102.324 67.3672Z" fill="white"/>
|
|
8
|
+
</g>
|
|
9
|
+
<defs><clipPath id="wui_success_clip"><rect x="32" y="32" width="110" height="110" rx="55" fill="white"/></clipPath></defs>`,error:`<rect width="174" height="174" rx="87" fill="var(--wui-danger-5)"/>
|
|
10
|
+
<rect x="24" y="24" width="126" height="126" rx="63" stroke="var(--wui-danger-20)" stroke-width="16"/>
|
|
11
|
+
<g clip-path="url(#wui_error_clip0)">
|
|
12
|
+
<rect x="32" y="32" width="110" height="110" rx="55" fill="var(--wui-danger)"/>
|
|
13
|
+
<rect x="110.758" y="62" width="75.5044" height="69.9535" transform="rotate(45 110.758 62)" fill="var(--wui-danger-active)"/>
|
|
14
|
+
<g clip-path="url(#wui_error_clip1)">
|
|
15
|
+
<path d="M95.9285 87.0037L112.943 69.9887C114.823 68.1087 114.823 65.0608 112.943 63.1838L110.675 60.9155C108.795 59.0349 105.747 59.0349 103.87 60.9155L86.8552 77.9298L69.8403 60.9119C67.9603 59.032 64.9124 59.032 63.0353 60.9119L60.7635 63.1802C58.8835 65.0608 58.8835 68.1087 60.7635 69.9858L77.7814 87.0037L60.767 104.018C58.8865 105.899 58.8865 108.947 60.767 110.824L63.0353 113.092C64.9153 114.972 67.9632 114.972 69.8403 113.092L86.8552 96.0769L103.87 113.092C105.75 114.972 108.798 114.972 110.675 113.092L112.943 110.824C114.823 108.943 114.823 105.895 112.943 104.018L95.9285 87.0037Z" fill="white"/>
|
|
16
|
+
</g>
|
|
17
|
+
</g>
|
|
18
|
+
<defs><clipPath id="wui_error_clip0"><rect x="32" y="32" width="110" height="110" rx="55" fill="white"/></clipPath><clipPath id="wui_error_clip1"><rect width="55" height="55" fill="white" transform="translate(59.3535 59.502)"/></clipPath></defs>`,warning:`<rect width="174" height="174" rx="87" fill="var(--wui-warning-5)"/>
|
|
19
|
+
<rect x="24" y="24" width="126" height="126" rx="63" stroke="var(--wui-warning-20)" stroke-width="16"/>
|
|
20
|
+
<g clip-path="url(#wui_warning_clip)">
|
|
21
|
+
<rect x="32" y="32" width="110" height="110" rx="55" fill="var(--wui-warning)"/>
|
|
22
|
+
<path d="M93.7812 60.9731L156.173 123.365L113.082 166.456L60 113.5L97 109L93.7812 60.9731Z" fill="var(--wui-warning-active)"/>
|
|
23
|
+
<path d="M116.145 101.611L96.0431 62.7255C94.8912 60.6967 93.0607 59.1479 90.8656 58.3543C88.6768 57.5543 86.2768 57.5607 84.0945 58.3671C83.0001 58.7767 81.9953 59.3655 81.125 60.1079C80.2545 60.8567 79.5122 61.7527 78.9425 62.7703L57.8933 101.554C56.1525 104.594 56.1717 108.331 57.9317 111.358C59.6981 114.392 62.9427 116.248 66.4435 116.242H107.563C111.051 116.248 114.283 114.398 116.049 111.39C116.952 109.854 117.4 108.133 117.4 106.418C117.4 104.76 116.984 103.102 116.145 101.611ZM87.0064 105.714C85.0672 105.714 83.4929 104.146 83.4929 102.207C83.4929 100.267 85.0672 98.6993 87.0064 98.6993C88.9392 98.6993 90.5136 100.267 90.5136 102.207C90.5136 104.146 88.9392 105.714 87.0064 105.714ZM90.9104 78.098L88.0432 95.3266C88.0049 95.8706 87.5504 96.2994 87.0064 96.2994C86.4561 96.2994 86.0016 95.8706 85.9633 95.3266L83.0961 78.098C83.0385 77.8101 83.0065 77.522 83.0065 77.2405C83.0065 76.3125 83.3137 75.4037 83.8833 74.6485C84.6321 73.6629 85.7713 73.0549 87.0064 72.9717C88.2352 73.0549 89.3744 73.6629 90.1232 74.6485C90.872 75.6341 91.16 76.8885 90.9104 78.098Z" fill="white"/>
|
|
24
|
+
</g>
|
|
25
|
+
<defs><clipPath id="wui_warning_clip"><rect x="32" y="32" width="110" height="110" rx="55" fill="white"/></clipPath></defs>`,info:`<rect width="174" height="174" rx="87" fill="var(--wui-info-5)"/>
|
|
26
|
+
<rect x="24" y="24" width="126" height="126" rx="63" stroke="var(--wui-info-20)" stroke-width="16"/>
|
|
27
|
+
<g clip-path="url(#wui_info_clip)">
|
|
28
|
+
<rect x="32" y="32" width="110" height="110" rx="55" fill="var(--wui-info)"/>
|
|
29
|
+
<path d="M104.999 67.5L111.454 64L163.495 116.041L115.739 163.797L62.999 111L101.897 104.102L104.999 67.5Z" fill="var(--wui-info-active)"/>
|
|
30
|
+
<path d="M87 121C105.778 121 121 105.778 121 87C121 68.2223 105.778 53 87 53C68.2223 53 53 68.2223 53 87C53 105.778 68.2223 121 87 121Z" fill="white"/>
|
|
31
|
+
<path d="M87 75.542C89.3472 75.542 91.25 73.6392 91.25 71.292C91.25 68.9448 89.3472 67.042 87 67.042C84.6528 67.042 82.75 68.9448 82.75 71.292C82.75 73.6392 84.6528 75.542 87 75.542Z" fill="var(--wui-info-active)"/>
|
|
32
|
+
<path d="M86.9992 106.992C86.0975 106.992 85.2327 106.634 84.5951 105.996C83.9574 105.359 83.5992 104.494 83.5992 103.592V86.592C82.6975 86.592 81.8327 86.2338 81.1951 85.5962C80.5574 84.9585 80.1992 84.0937 80.1992 83.192C80.1992 82.2903 80.5574 81.4255 81.1951 80.7878C81.8327 80.1502 82.6975 79.792 83.5992 79.792H86.9992C87.901 79.792 88.7658 80.1502 89.4034 80.7878C90.041 81.4255 90.3992 82.2903 90.3992 83.192V103.592C90.3992 104.494 90.041 105.359 89.4034 105.996C88.7658 106.634 87.901 106.992 86.9992 106.992Z" fill="var(--wui-info-active)"/>
|
|
33
|
+
<path d="M90.3992 106.992H83.5992C82.6975 106.992 81.8327 106.634 81.1951 105.996C80.5574 105.358 80.1992 104.494 80.1992 103.592C80.1992 102.69 80.5574 101.825 81.1951 101.188C81.8327 100.55 82.6975 100.192 83.5992 100.192H90.3992C91.301 100.192 92.1658 100.55 92.8034 101.188C93.441 101.825 93.7992 102.69 93.7992 103.592C93.7992 104.494 93.441 105.358 92.8034 105.996C92.1658 106.634 91.301 106.992 90.3992 106.992Z" fill="var(--wui-info-active)"/>
|
|
34
|
+
</g>
|
|
35
|
+
<defs><clipPath id="wui_info_clip"><rect x="32" y="32" width="110" height="110" rx="55" fill="white"/></clipPath></defs>`,delete:`<rect width="174" height="174" rx="87" fill="var(--wui-danger-5)"/>
|
|
36
|
+
<rect x="24" y="24" width="126" height="126" rx="63" stroke="var(--wui-danger-20)" stroke-width="16"/>
|
|
37
|
+
<g clip-path="url(#wui_delete_clip0)">
|
|
38
|
+
<rect x="32" y="32" width="110" height="110" rx="55" fill="var(--wui-danger)"/>
|
|
39
|
+
<path d="M114.529 67.5672L163.249 116.287L116.354 163.183L67.6336 114.463L100.999 81.0975L64.999 77.5L58.999 69.5L114.529 67.5672Z" fill="var(--wui-danger-active)"/>
|
|
40
|
+
<path d="M103.5 79L100.5 105.5L76 113L69.5 83.5L103.5 79Z" fill="var(--wui-danger)"/>
|
|
41
|
+
<g clip-path="url(#wui_delete_clip1)">
|
|
42
|
+
<path d="M113.652 66.9993C108.895 66.5266 104.139 66.1721 99.3522 65.9061V65.8766L98.7022 62.0357C98.259 59.3175 97.609 55.2402 90.6954 55.2402H82.9545C76.0704 55.2402 75.4204 59.1402 74.9477 62.0061L74.3272 65.788C71.5795 65.9652 68.8318 66.1425 66.084 66.4084L60.0568 66.9993C58.8159 67.1175 57.9295 68.2107 58.0477 69.4221C58.1659 70.6334 59.2295 71.5198 60.4704 71.4016L66.4977 70.8107C81.9795 69.2743 97.5795 69.8652 113.239 71.4311C113.327 71.4311 113.386 71.4311 113.475 71.4311C114.598 71.4311 115.573 70.5743 115.691 69.4221C115.779 68.2107 114.893 67.1175 113.652 66.9993Z" fill="white"/>
|
|
43
|
+
<path d="M108.216 75.5971C107.507 74.8585 106.532 74.4448 105.527 74.4448H68.1816C67.177 74.4448 66.1725 74.8585 65.4929 75.5971C64.8134 76.3357 64.4293 77.3403 64.4884 78.3744L66.3202 108.688C66.6452 113.179 67.0588 118.793 77.3702 118.793H96.3384C106.65 118.793 107.063 113.208 107.388 108.688L109.22 78.4039C109.279 77.3403 108.895 76.3357 108.216 75.5971ZM91.7588 103.99H81.9202C80.7088 103.99 79.7043 102.986 79.7043 101.774C79.7043 100.563 80.7088 99.5585 81.9202 99.5585H91.7588C92.9702 99.5585 93.9747 100.563 93.9747 101.774C93.9747 102.986 92.9702 103.99 91.7588 103.99ZM94.2406 92.1721H79.4679C78.2566 92.1721 77.252 91.1676 77.252 89.9562C77.252 88.7448 78.2566 87.7403 79.4679 87.7403H94.2406C95.452 87.7403 96.4566 88.7448 96.4566 89.9562C96.4566 91.1676 95.452 92.1721 94.2406 92.1721Z" fill="white"/>
|
|
44
|
+
</g>
|
|
45
|
+
</g>
|
|
46
|
+
<defs><clipPath id="wui_delete_clip0"><rect x="32" y="32" width="110" height="110" rx="55" fill="white"/></clipPath><clipPath id="wui_delete_clip1"><rect width="65" height="65" fill="white" transform="translate(54.3535 54.502)"/></clipPath></defs>`},n=Object.keys(t),r=class extends HTMLElement{static get observedAttributes(){return[`tone`,`size`]}connectedCallback(){this.render()}attributeChangedCallback(){this.isConnected&&this.render()}render(){let e=this.getAttribute(`tone`),n=this.getAttribute(`size`)||`72`,r=t[e]||t.info;this.innerHTML=`<svg width="${n}" height="${n}" viewBox="0 0 174 174" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">${r}</svg>`}},i=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`value`,`placeholder`,`disabled`,`min-chars`,`debounce`,`remote`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,this._value=``,this._label=``,this._optionsProp=null,this._loading=!1,this._active=-1,this._timer=null}connectedCallback(){this._rendered||this.render()}attributeChangedCallback(e,t,n){this._rendered&&(e===`value`?this.value=n:this.render())}get value(){return this._value}set value(e){this._value=e==null?``:String(e),this._internals?.setFormValue(this._value);let t=this._readOptions().find(e=>String(e.value)===this._value);t&&(this._label=o(t.label)),this._syncInput()}set options(e){this._optionsProp=Array.isArray(e)?e:[],this._renderOptions()}get options(){return this._readOptions()}set loading(e){this._loading=!!e,this._renderLoading()}get loading(){return this._loading}get _remote(){return this.hasAttribute(`remote`)}get _minChars(){return Math.max(0,Number(this.getAttribute(`min-chars`))||+!!this._remote)}get _debounceMs(){let e=Number(this.getAttribute(`debounce`));return Number.isFinite(e)&&e>=0?e:250}_snapshotDeclared(){if(this._declared)return;let e=[...this.querySelectorAll(`:scope > wui-option`)];e.length&&(this._declared=e.map(e=>({value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML,selected:e.hasAttribute(`selected`)})))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}render(){this._snapshotDeclared();let e=this.getAttribute(`placeholder`)||`Search…`;this.innerHTML=`
|
|
2
47
|
<div class="search-select">
|
|
3
48
|
<div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false">
|
|
4
|
-
<input class="search-select-input search-select-ac-input" placeholder="${
|
|
49
|
+
<input class="search-select-input search-select-ac-input" placeholder="${a(e)}" aria-autocomplete="list" autocomplete="off"${this.hasAttribute(`disabled`)?` disabled`:``} />
|
|
5
50
|
<span class="search-select-spinner spinner-border spinner-border-sm" role="status" aria-hidden="true" hidden></span>
|
|
6
51
|
<button type="button" class="search-select-clear" aria-label="Clear" hidden><i class="bi bi-x" aria-hidden="true"></i></button>
|
|
7
52
|
</div>
|
|
@@ -10,54 +55,54 @@ var WeborityUiElements=(function(e){Object.defineProperty(e,Symbol.toStringTag,{
|
|
|
10
55
|
<div class="search-select-empty" hidden>No matches</div>
|
|
11
56
|
<div class="search-select-hint" hidden>Type to search…</div>
|
|
12
57
|
</div>
|
|
13
|
-
</div>`,this._rendered=!0,this._wire(),this._syncInput(),this._renderOptions()}_refs(){return{control:this.querySelector(`.search-select-control`),input:this.querySelector(`.search-select-ac-input`),menu:this.querySelector(`.search-select-menu`),spinner:this.querySelector(`.search-select-spinner`),clear:this.querySelector(`.search-select-clear`),optionsWrap:this.querySelector(`.search-select-options`),empty:this.querySelector(`.search-select-empty`),hint:this.querySelector(`.search-select-hint`)}}_optionEls(){return[...this.querySelectorAll(`.search-select-option`)]}_syncInput(){let{input:e,clear:t}=this._refs();e&&document.activeElement!==e&&(e.value=this._label),t&&(t.hidden=!this._value&&!e?.value)}_renderLoading(){let{spinner:e}=this._refs();e&&(e.hidden=!this._loading)}_renderOptions(e){let t=this._refs();if(!t.optionsWrap)return;let
|
|
58
|
+
</div>`,this._rendered=!0,this._wire(),this._syncInput(),this._renderOptions()}_refs(){return{control:this.querySelector(`.search-select-control`),input:this.querySelector(`.search-select-ac-input`),menu:this.querySelector(`.search-select-menu`),spinner:this.querySelector(`.search-select-spinner`),clear:this.querySelector(`.search-select-clear`),optionsWrap:this.querySelector(`.search-select-options`),empty:this.querySelector(`.search-select-empty`),hint:this.querySelector(`.search-select-hint`)}}_optionEls(){return[...this.querySelectorAll(`.search-select-option`)]}_syncInput(){let{input:e,clear:t}=this._refs();e&&document.activeElement!==e&&(e.value=this._label),t&&(t.hidden=!this._value&&!e?.value)}_renderLoading(){let{spinner:e}=this._refs();e&&(e.hidden=!this._loading)}_renderOptions(e){let t=this._refs();if(!t.optionsWrap)return;let n=(e??(t.input?t.input.value:``)).trim().toLowerCase(),r=this._readOptions();!this._remote&&n&&(r=r.filter(e=>o(e.label).toLowerCase().includes(n))),t.optionsWrap.innerHTML=r.map(e=>{let t=String(e.value)===String(this._value);return`<button type="button" role="option" class="search-select-option${t?` selected`:``}" data-value="${a(e.value)}" aria-selected="${t}">${e.label}</button>`}).join(``),this._active=-1;let i=n.length<this._minChars;t.hint&&(t.hint.hidden=!(this._remote&&i&&!r.length)),t.empty&&(t.empty.hidden=this._loading||r.length>0||this._remote&&i)}_wire(){let e=this._refs();if(!e.control||!e.input)return;let t=()=>{let t=e.control.getBoundingClientRect();e.menu.style.position=`fixed`,e.menu.style.top=`${t.bottom+4}px`,e.menu.style.left=`${t.left}px`,e.menu.style.width=`${t.width}px`},n=()=>this._optionEls().filter(e=>!e.hidden),r=e=>{let t=n();this._active=e;for(let e of this._optionEls())e.classList.remove(`is-active`);e>=0&&t[e]&&(t[e].classList.add(`is-active`),t[e].scrollIntoView({block:`nearest`}))},i=()=>!e.menu.hidden,a=()=>{e.menu.hidden=!1,e.control.setAttribute(`aria-expanded`,`true`),e.control.classList.add(`open`),t(),this._renderOptions()},s=()=>{e.menu.hidden=!0,e.control.setAttribute(`aria-expanded`,`false`),e.control.classList.remove(`open`),r(-1),this._syncInput()},c=t=>{this._value=t.dataset.value,this._label=o(t.innerHTML),this._internals?.setFormValue(this._value),e.input.value=this._label,this.dispatchEvent(new Event(`change`,{bubbles:!0})),s(),e.input.focus()};e.input.addEventListener(`focus`,()=>a()),e.input.addEventListener(`input`,()=>{let t=e.input.value;if(e.clear&&(e.clear.hidden=!t),i()||a(),this._remote){if(this._renderOptions(t),t.trim().length<this._minChars)return;clearTimeout(this._timer),this._timer=setTimeout(()=>{this.dispatchEvent(new CustomEvent(`search`,{bubbles:!0,detail:{query:t}}))},this._debounceMs)}else this._renderOptions(t)}),e.input.addEventListener(`keydown`,e=>{let t=n();e.key===`ArrowDown`?(e.preventDefault(),i()||a(),r(Math.min(this._active+1,t.length-1))):e.key===`ArrowUp`?(e.preventDefault(),r(Math.max(this._active-1,0))):e.key===`Enter`?t[this._active]&&(e.preventDefault(),c(t[this._active])):e.key===`Escape`&&s()}),e.optionsWrap.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&c(t)}),e.optionsWrap.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&r(this._optionEls().indexOf(t))}),e.clear?.addEventListener(`click`,()=>{this._value=``,this._label=``,this._internals?.setFormValue(``),e.input.value=``,e.clear.hidden=!0,this._renderOptions(``),this.dispatchEvent(new Event(`change`,{bubbles:!0})),e.input.focus()}),this._onDocClick=e=>{i()&&!this.contains(e.target)&&s()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{i()&&t()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick),clearTimeout(this._timer)}},a=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),o=e=>String(e??``).replace(/<[^>]*>/g,``),s=[`January`,`February`,`March`,`April`,`May`,`June`,`July`,`August`,`September`,`October`,`November`,`December`],c=[`Su`,`Mo`,`Tu`,`We`,`Th`,`Fr`,`Sa`],l=e=>String(e).padStart(2,`0`),u=(e,t,n)=>`${e}-${l(t+1)}-${l(n)}`,d=e=>{let t=/^(\d{4})-(\d{2})-(\d{2})$/.exec(e||``);return t?{y:+t[1],m:t[2]-1,d:+t[3]}:null},f=e=>{let t=d(e);return t?`${l(t.d)} ${s[t.m].slice(0,3)} ${t.y}`:``},p=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`value`,`min`,`max`,`placeholder`,`disabled`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,this._value=``;let e=new Date(2e3,0,1);this._viewY=e.getFullYear(),this._viewM=e.getMonth()}connectedCallback(){this._rendered||this.render()}attributeChangedCallback(e,t,n){this._rendered&&(e===`value`?(this._value=n||``,this._syncTrigger()):this.render())}get value(){return this._value}set value(e){this._value=e||``,this._internals?.setFormValue(this._value),this._syncTrigger(),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}render(){this._value=this.getAttribute(`value`)||this._value;let e=this.getAttribute(`placeholder`)||`Enter Date`,t=d(this._value);t&&(this._viewY=t.y,this._viewM=t.m),this.innerHTML=`
|
|
14
59
|
<div class="datepicker">
|
|
15
60
|
<button type="button" class="input datepicker-trigger" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute(`disabled`)?` disabled`:``}>
|
|
16
|
-
<span data-trigger-label class="${t?``:`search-select-placeholder`}">${t?
|
|
61
|
+
<span data-trigger-label class="${t?``:`search-select-placeholder`}">${t?f(this._value):e}</span>
|
|
17
62
|
<i class="bi bi-calendar3" aria-hidden="true"></i>
|
|
18
63
|
</button>
|
|
19
64
|
<div class="datepicker-pop" role="dialog" hidden></div>
|
|
20
|
-
</div>`,this._rendered=!0,this._wire()}_internalsSet(){this._internals?.setFormValue(this._value)}_syncTrigger(){let e=this.querySelector(`[data-trigger-label]`);if(!e)return;let t=
|
|
65
|
+
</div>`,this._rendered=!0,this._wire()}_internalsSet(){this._internals?.setFormValue(this._value)}_syncTrigger(){let e=this.querySelector(`[data-trigger-label]`);if(!e)return;let t=d(this._value);e.textContent=t?f(this._value):this.getAttribute(`placeholder`)||`Enter Date`,e.classList.toggle(`search-select-placeholder`,!t)}_renderMonth(){let e=this.querySelector(`.datepicker-pop`),t=new Date(this._viewY,this._viewM,1).getDay(),n=new Date(this._viewY,this._viewM+1,0).getDate(),r=d(this._value),i=d(this.getAttribute(`min`)),a=d(this.getAttribute(`max`)),o=(e,t,n)=>{let r=new Date(e,t,n).getTime();return!!(i&&r<new Date(i.y,i.m,i.d).getTime()||a&&r>new Date(a.y,a.m,a.d).getTime())},l=``;for(let e=0;e<t;e++)l+=`<span class="datepicker-day is-outside"></span>`;for(let e=1;e<=n;e++){let t=u(this._viewY,this._viewM,e),n=r&&r.y===this._viewY&&r.m===this._viewM&&r.d===e,i=o(this._viewY,this._viewM,e);l+=`<button type="button" class="datepicker-day${n?` selected`:``}" data-iso="${t}"${i?` disabled`:``}>${e}</button>`}e.innerHTML=`
|
|
21
66
|
<div class="datepicker-head">
|
|
22
67
|
<button type="button" class="datepicker-nav-btn" data-nav="-1" aria-label="Previous month"><i class="bi bi-chevron-left" aria-hidden="true"></i></button>
|
|
23
|
-
<span class="datepicker-month">${
|
|
68
|
+
<span class="datepicker-month">${s[this._viewM]} ${this._viewY}</span>
|
|
24
69
|
<button type="button" class="datepicker-nav-btn" data-nav="1" aria-label="Next month"><i class="bi bi-chevron-right" aria-hidden="true"></i></button>
|
|
25
70
|
</div>
|
|
26
|
-
<div class="datepicker-weekdays">${
|
|
27
|
-
<div class="datepicker-grid">${
|
|
28
|
-
<div class="datepicker-foot"><button type="button" class="datepicker-link" data-clear>Clear</button></div>`}_wire(){let e=this.querySelector(`.datepicker-trigger`),t=this.querySelector(`.datepicker-pop`);if(!e||!t)return;let n=()=>!t.hidden,r=()=>{this._renderMonth(),t.hidden=!1,e.setAttribute(`aria-expanded`,`true`)},i=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)};e.addEventListener(`click`,()=>n()?i():r()),t.addEventListener(`click`,e=>{let t=e.target.closest(`[data-nav]`);if(t){this._viewM+=Number(t.dataset.nav),this._viewM<0?(this._viewM=11,--this._viewY):this._viewM>11&&(this._viewM=0,this._viewY+=1),this._renderMonth();return}if(e.target.closest(`[data-clear]`)){this.value=``,i();return}let n=e.target.closest(`.datepicker-day[data-iso]`);n&&!n.disabled&&(this.value=n.dataset.iso,i())}),this._onDocClick=e=>{n()&&!this.contains(e.target)&&i()},document.addEventListener(`click`,this._onDocClick),document.addEventListener(`keydown`,e=>{n()&&e.key===`Escape`&&i()}),this._internalsSet()}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},
|
|
71
|
+
<div class="datepicker-weekdays">${c.map(e=>`<span>${e}</span>`).join(``)}</div>
|
|
72
|
+
<div class="datepicker-grid">${l}</div>
|
|
73
|
+
<div class="datepicker-foot"><button type="button" class="datepicker-link" data-clear>Clear</button></div>`}_wire(){let e=this.querySelector(`.datepicker-trigger`),t=this.querySelector(`.datepicker-pop`);if(!e||!t)return;let n=()=>!t.hidden,r=()=>{this._renderMonth(),t.hidden=!1,e.setAttribute(`aria-expanded`,`true`)},i=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)};e.addEventListener(`click`,()=>n()?i():r()),t.addEventListener(`click`,e=>{let t=e.target.closest(`[data-nav]`);if(t){this._viewM+=Number(t.dataset.nav),this._viewM<0?(this._viewM=11,--this._viewY):this._viewM>11&&(this._viewM=0,this._viewY+=1),this._renderMonth();return}if(e.target.closest(`[data-clear]`)){this.value=``,i();return}let n=e.target.closest(`.datepicker-day[data-iso]`);n&&!n.disabled&&(this.value=n.dataset.iso,i())}),this._onDocClick=e=>{n()&&!this.contains(e.target)&&i()},document.addEventListener(`click`,this._onDocClick),document.addEventListener(`keydown`,e=>{n()&&e.key===`Escape`&&i()}),this._internalsSet()}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},m=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`placeholder`,`search-placeholder`,`searchable`,`disabled`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,this._values=[],this._optionsProp=null,this._active=-1}connectedCallback(){if(!this._rendered){if(!this._valuesInit&&!this._optionsProp&&!this._values.length){let e=[...this.querySelectorAll(`:scope > wui-option[selected]`)].map(e=>e.getAttribute(`value`)??e.textContent.trim());e.length&&(this._values=e.map(String))}this._valuesInit=!0,this.render()}}attributeChangedCallback(){this._rendered&&this.render()}get values(){return this._values.slice()}set values(e){this._values=Array.isArray(e)?e.map(String):[],this._internals?.setFormValue(this._values.join(`,`)),this._rendered&&this._renderControl()}set options(e){this._optionsProp=Array.isArray(e)?e:null,this.isConnected&&this.render()}get options(){return this._readOptions()}_snapshotDeclared(){if(this._declared)return;let e=[...this.querySelectorAll(`:scope > wui-option`)];e.length&&(this._declared=e.map(e=>({value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML,selected:e.hasAttribute(`selected`)})))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}_labelFor(e){let t=this._readOptions().find(t=>String(t.value)===String(e));return t?t.label:e}render(){this._snapshotDeclared();let e=this.hasAttribute(`searchable`),t=this.getAttribute(`search-placeholder`)||`Search…`;this._internals?.setFormValue(this._values.join(`,`)),this.innerHTML=`
|
|
29
74
|
<div class="search-select">
|
|
30
75
|
<div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute(`disabled`)?` aria-disabled="true"`:``}>
|
|
31
76
|
<div class="ms-chips" data-chips></div>
|
|
32
77
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
33
78
|
</div>
|
|
34
79
|
<div class="search-select-menu search-select-menu-fixed" role="listbox" aria-multiselectable="true" tabindex="-1" hidden>
|
|
35
|
-
${e?`<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${
|
|
80
|
+
${e?`<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${h(t)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>`:``}
|
|
36
81
|
<div class="search-select-options"></div>
|
|
37
82
|
<div class="search-select-empty" hidden>No matches</div>
|
|
38
83
|
</div>
|
|
39
|
-
</div>`,this._rendered=!0,this._renderControl(),this._renderOptions(),this._wire()}_renderControl(){let e=this.querySelector(`[data-chips]`);if(!e)return;let t=this.getAttribute(`placeholder`)||`Select…`;if(!this._values.length){e.innerHTML=`<span class="search-select-placeholder">${p(t)}</span>`;return}e.innerHTML=this._values.map(e=>`<span class="chip chip-sm"><span class="chip-label">${this._labelFor(e)}</span><button type="button" class="chip-remove" data-remove="${f(e)}" aria-label="Remove"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join(``)}_renderOptions(e){let t=this.querySelector(`.search-select-options`),n=this.querySelector(`.search-select-empty`);if(!t)return;let r=(e||``).trim().toLowerCase(),i=this._readOptions();r&&(i=i.filter(e=>m(e.label).toLowerCase().includes(r))),t.innerHTML=i.map(e=>{let t=this._values.includes(String(e.value));return`<button type="button" role="option" class="search-select-option${t?` selected`:``}" data-value="${f(e.value)}" aria-selected="${t}"><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span><span class="ms-opt-label">${e.label}</span></button>`}).join(``),n&&(n.hidden=i.length>0),this._active=-1}_wire(){let e=this.querySelector(`.search-select-control`),t=this.querySelector(`.search-select-menu`),n=this.querySelector(`.search-select-input`),r=this.querySelector(`.search-select-clear`),i=this.querySelector(`.search-select-options`);if(!e||!t)return;let a=()=>this.hasAttribute(`disabled`),o=()=>{let n=e.getBoundingClientRect();t.style.position=`fixed`,t.style.top=`${n.bottom+4}px`,t.style.left=`${n.left}px`,t.style.width=`${n.width}px`},s=()=>[...this.querySelectorAll(`.search-select-option`)],c=()=>s().filter(e=>!e.hidden),l=e=>{let t=c();this._active=e;for(let e of s())e.classList.remove(`is-active`);e>=0&&t[e]&&(t[e].classList.add(`is-active`),t[e].scrollIntoView({block:`nearest`}))},u=()=>!t.hidden,d=()=>{a()||(t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),e.classList.add(`open`),o(),n&&(n.value=``,this._renderOptions(``),n.focus()))},f=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`),e.classList.remove(`open`),l(-1)},p=()=>{this._internals?.setFormValue(this._values.join(`,`)),this.dispatchEvent(new Event(`change`,{bubbles:!0}))},m=e=>{let t=String(e);this._values.includes(t)?this._values=this._values.filter(e=>e!==t):this._values=[...this._values,t],this._renderControl(),this._renderOptions(n?n.value:``),p()},h=e=>{this._values=this._values.filter(t=>t!==String(e)),this._renderControl(),this._renderOptions(n?n.value:``),p()};e.addEventListener(`click`,e=>{let t=e.target.closest(`[data-remove]`);if(t){e.stopPropagation(),h(t.dataset.remove);return}u()?f():d()}),i.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&(m(t.dataset.value),n?.focus())}),i.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&l(c().indexOf(t))}),n?.addEventListener(`input`,()=>{this._renderOptions(n.value),r&&(r.hidden=!n.value),l(-1)}),n?.addEventListener(`keydown`,t=>{let r=c();t.key===`ArrowDown`?(t.preventDefault(),l(Math.min(this._active+1,r.length-1))):t.key===`ArrowUp`?(t.preventDefault(),l(Math.max(this._active-1,0))):t.key===`Enter`?(t.preventDefault(),r[this._active]&&m(r[this._active].dataset.value)):t.key===`Escape`?(f(),e.focus()):t.key===`Backspace`&&!n.value&&this._values.length&&h(this._values[this._values.length-1])}),r?.addEventListener(`click`,()=>{n.value=``,this._renderOptions(``),r.hidden=!0,n.focus()}),e.addEventListener(`keydown`,e=>{!u()&&(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),d())}),this._onDocClick=e=>{u()&&!this.contains(e.target)&&f()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{u()&&o()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},f=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),p=e=>String(e??``).replace(/&/g,`&`).replace(/</g,`<`),m=e=>String(e??``).replace(/<[^>]*>/g,``),h=[[`AF`,`Afghanistan`,`93`],[`AX`,`Åland Islands`,`358`],[`AL`,`Albania`,`355`],[`DZ`,`Algeria`,`213`],[`AS`,`American Samoa`,`1`],[`AD`,`Andorra`,`376`],[`AO`,`Angola`,`244`],[`AI`,`Anguilla`,`1`],[`AG`,`Antigua & Barbuda`,`1`],[`AR`,`Argentina`,`54`],[`AM`,`Armenia`,`374`],[`AW`,`Aruba`,`297`],[`AC`,`Ascension Island`,`247`],[`AU`,`Australia`,`61`],[`AT`,`Austria`,`43`],[`AZ`,`Azerbaijan`,`994`],[`BS`,`Bahamas`,`1`],[`BH`,`Bahrain`,`973`],[`BD`,`Bangladesh`,`880`],[`BB`,`Barbados`,`1`],[`BY`,`Belarus`,`375`],[`BE`,`Belgium`,`32`],[`BZ`,`Belize`,`501`],[`BJ`,`Benin`,`229`],[`BM`,`Bermuda`,`1`],[`BT`,`Bhutan`,`975`],[`BO`,`Bolivia`,`591`],[`BA`,`Bosnia & Herzegovina`,`387`],[`BW`,`Botswana`,`267`],[`BR`,`Brazil`,`55`],[`IO`,`British Indian Ocean Territory`,`246`],[`VG`,`British Virgin Islands`,`1`],[`BN`,`Brunei`,`673`],[`BG`,`Bulgaria`,`359`],[`BF`,`Burkina Faso`,`226`],[`BI`,`Burundi`,`257`],[`KH`,`Cambodia`,`855`],[`CM`,`Cameroon`,`237`],[`CA`,`Canada`,`1`],[`CV`,`Cape Verde`,`238`],[`BQ`,`Caribbean Netherlands`,`599`],[`KY`,`Cayman Islands`,`1`],[`CF`,`Central African Republic`,`236`],[`TD`,`Chad`,`235`],[`CL`,`Chile`,`56`],[`CN`,`China`,`86`],[`CX`,`Christmas Island`,`61`],[`CC`,`Cocos (Keeling) Islands`,`61`],[`CO`,`Colombia`,`57`],[`KM`,`Comoros`,`269`],[`CG`,`Congo - Brazzaville`,`242`],[`CD`,`Congo - Kinshasa`,`243`],[`CK`,`Cook Islands`,`682`],[`CR`,`Costa Rica`,`506`],[`CI`,`Côte d’Ivoire`,`225`],[`HR`,`Croatia`,`385`],[`CU`,`Cuba`,`53`],[`CW`,`Curaçao`,`599`],[`CY`,`Cyprus`,`357`],[`CZ`,`Czechia`,`420`],[`DK`,`Denmark`,`45`],[`DJ`,`Djibouti`,`253`],[`DM`,`Dominica`,`1`],[`DO`,`Dominican Republic`,`1`],[`EC`,`Ecuador`,`593`],[`EG`,`Egypt`,`20`],[`SV`,`El Salvador`,`503`],[`GQ`,`Equatorial Guinea`,`240`],[`ER`,`Eritrea`,`291`],[`EE`,`Estonia`,`372`],[`SZ`,`Eswatini`,`268`],[`ET`,`Ethiopia`,`251`],[`FK`,`Falkland Islands`,`500`],[`FO`,`Faroe Islands`,`298`],[`FJ`,`Fiji`,`679`],[`FI`,`Finland`,`358`],[`FR`,`France`,`33`],[`GF`,`French Guiana`,`594`],[`PF`,`French Polynesia`,`689`],[`GA`,`Gabon`,`241`],[`GM`,`Gambia`,`220`],[`GE`,`Georgia`,`995`],[`DE`,`Germany`,`49`],[`GH`,`Ghana`,`233`],[`GI`,`Gibraltar`,`350`],[`GR`,`Greece`,`30`],[`GL`,`Greenland`,`299`],[`GD`,`Grenada`,`1`],[`GP`,`Guadeloupe`,`590`],[`GU`,`Guam`,`1`],[`GT`,`Guatemala`,`502`],[`GG`,`Guernsey`,`44`],[`GN`,`Guinea`,`224`],[`GW`,`Guinea-Bissau`,`245`],[`GY`,`Guyana`,`592`],[`HT`,`Haiti`,`509`],[`HN`,`Honduras`,`504`],[`HK`,`Hong Kong SAR China`,`852`],[`HU`,`Hungary`,`36`],[`IS`,`Iceland`,`354`],[`IN`,`India`,`91`],[`ID`,`Indonesia`,`62`],[`IR`,`Iran`,`98`],[`IQ`,`Iraq`,`964`],[`IE`,`Ireland`,`353`],[`IM`,`Isle of Man`,`44`],[`IL`,`Israel`,`972`],[`IT`,`Italy`,`39`],[`JM`,`Jamaica`,`1`],[`JP`,`Japan`,`81`],[`JE`,`Jersey`,`44`],[`JO`,`Jordan`,`962`],[`KZ`,`Kazakhstan`,`7`],[`KE`,`Kenya`,`254`],[`KI`,`Kiribati`,`686`],[`XK`,`Kosovo`,`383`],[`KW`,`Kuwait`,`965`],[`KG`,`Kyrgyzstan`,`996`],[`LA`,`Laos`,`856`],[`LV`,`Latvia`,`371`],[`LB`,`Lebanon`,`961`],[`LS`,`Lesotho`,`266`],[`LR`,`Liberia`,`231`],[`LY`,`Libya`,`218`],[`LI`,`Liechtenstein`,`423`],[`LT`,`Lithuania`,`370`],[`LU`,`Luxembourg`,`352`],[`MO`,`Macao SAR China`,`853`],[`MG`,`Madagascar`,`261`],[`MW`,`Malawi`,`265`],[`MY`,`Malaysia`,`60`],[`MV`,`Maldives`,`960`],[`ML`,`Mali`,`223`],[`MT`,`Malta`,`356`],[`MH`,`Marshall Islands`,`692`],[`MQ`,`Martinique`,`596`],[`MR`,`Mauritania`,`222`],[`MU`,`Mauritius`,`230`],[`YT`,`Mayotte`,`262`],[`MX`,`Mexico`,`52`],[`FM`,`Micronesia`,`691`],[`MD`,`Moldova`,`373`],[`MC`,`Monaco`,`377`],[`MN`,`Mongolia`,`976`],[`ME`,`Montenegro`,`382`],[`MS`,`Montserrat`,`1`],[`MA`,`Morocco`,`212`],[`MZ`,`Mozambique`,`258`],[`MM`,`Myanmar (Burma)`,`95`],[`NA`,`Namibia`,`264`],[`NR`,`Nauru`,`674`],[`NP`,`Nepal`,`977`],[`NL`,`Netherlands`,`31`],[`NC`,`New Caledonia`,`687`],[`NZ`,`New Zealand`,`64`],[`NI`,`Nicaragua`,`505`],[`NE`,`Niger`,`227`],[`NG`,`Nigeria`,`234`],[`NU`,`Niue`,`683`],[`NF`,`Norfolk Island`,`672`],[`KP`,`North Korea`,`850`],[`MK`,`North Macedonia`,`389`],[`MP`,`Northern Mariana Islands`,`1`],[`NO`,`Norway`,`47`],[`OM`,`Oman`,`968`],[`PK`,`Pakistan`,`92`],[`PW`,`Palau`,`680`],[`PS`,`Palestinian Territories`,`970`],[`PA`,`Panama`,`507`],[`PG`,`Papua New Guinea`,`675`],[`PY`,`Paraguay`,`595`],[`PE`,`Peru`,`51`],[`PH`,`Philippines`,`63`],[`PL`,`Poland`,`48`],[`PT`,`Portugal`,`351`],[`PR`,`Puerto Rico`,`1`],[`QA`,`Qatar`,`974`],[`RE`,`Réunion`,`262`],[`RO`,`Romania`,`40`],[`RU`,`Russia`,`7`],[`RW`,`Rwanda`,`250`],[`WS`,`Samoa`,`685`],[`SM`,`San Marino`,`378`],[`ST`,`São Tomé & Príncipe`,`239`],[`SA`,`Saudi Arabia`,`966`],[`SN`,`Senegal`,`221`],[`RS`,`Serbia`,`381`],[`SC`,`Seychelles`,`248`],[`SL`,`Sierra Leone`,`232`],[`SG`,`Singapore`,`65`],[`SX`,`Sint Maarten`,`1`],[`SK`,`Slovakia`,`421`],[`SI`,`Slovenia`,`386`],[`SB`,`Solomon Islands`,`677`],[`SO`,`Somalia`,`252`],[`ZA`,`South Africa`,`27`],[`KR`,`South Korea`,`82`],[`SS`,`South Sudan`,`211`],[`ES`,`Spain`,`34`],[`LK`,`Sri Lanka`,`94`],[`BL`,`St. Barthélemy`,`590`],[`SH`,`St. Helena`,`290`],[`KN`,`St. Kitts & Nevis`,`1`],[`LC`,`St. Lucia`,`1`],[`MF`,`St. Martin`,`590`],[`PM`,`St. Pierre & Miquelon`,`508`],[`VC`,`St. Vincent & Grenadines`,`1`],[`SD`,`Sudan`,`249`],[`SR`,`Suriname`,`597`],[`SJ`,`Svalbard & Jan Mayen`,`47`],[`SE`,`Sweden`,`46`],[`CH`,`Switzerland`,`41`],[`SY`,`Syria`,`963`],[`TW`,`Taiwan`,`886`],[`TJ`,`Tajikistan`,`992`],[`TZ`,`Tanzania`,`255`],[`TH`,`Thailand`,`66`],[`TL`,`Timor-Leste`,`670`],[`TG`,`Togo`,`228`],[`TK`,`Tokelau`,`690`],[`TO`,`Tonga`,`676`],[`TT`,`Trinidad & Tobago`,`1`],[`TA`,`Tristan da Cunha`,`290`],[`TN`,`Tunisia`,`216`],[`TR`,`Türkiye`,`90`],[`TM`,`Turkmenistan`,`993`],[`TC`,`Turks & Caicos Islands`,`1`],[`TV`,`Tuvalu`,`688`],[`VI`,`U.S. Virgin Islands`,`1`],[`UG`,`Uganda`,`256`],[`UA`,`Ukraine`,`380`],[`AE`,`United Arab Emirates`,`971`],[`GB`,`United Kingdom`,`44`],[`US`,`United States`,`1`],[`UY`,`Uruguay`,`598`],[`UZ`,`Uzbekistan`,`998`],[`VU`,`Vanuatu`,`678`],[`VA`,`Vatican City`,`39`],[`VE`,`Venezuela`,`58`],[`VN`,`Vietnam`,`84`],[`WF`,`Wallis & Futuna`,`681`],[`EH`,`Western Sahara`,`212`],[`YE`,`Yemen`,`967`],[`ZM`,`Zambia`,`260`],[`ZW`,`Zimbabwe`,`263`]],g=e=>(h.find(t=>t[0]===e)||[``,``,``])[2],_=e=>`wui-flag wui-flag-${String(e).toLowerCase()}`,v=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`value`,`country`,`placeholder`,`disabled`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,this._country=`IN`,this._national=``}connectedCallback(){this._rendered||this.render()}attributeChangedCallback(e,t,n){this._rendered&&(e===`country`&&(this._country=n||`IN`),this.render())}get value(){return`+${g(this._country)}${this._national}`}set value(e){this._national=String(e??``).replace(/[^0-9]/g,``),this._commit()}_commit(){this._internals?.setFormValue(this.value),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}render(){let e=this.getAttribute(`placeholder`)||`Enter phone number`;this._country=this.getAttribute(`country`)||this._country;let t=h.map(([e,t,n])=>`<button type="button" role="option" class="country-dropdown-item${e===this._country?` selected`:``}" data-iso="${e}"><span class="${_(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join(``);this.innerHTML=`
|
|
84
|
+
</div>`,this._rendered=!0,this._renderControl(),this._renderOptions(),this._wire()}_renderControl(){let e=this.querySelector(`[data-chips]`);if(!e)return;let t=this.getAttribute(`placeholder`)||`Select…`;if(!this._values.length){e.innerHTML=`<span class="search-select-placeholder">${g(t)}</span>`;return}e.innerHTML=this._values.map(e=>`<span class="chip chip-sm"><span class="chip-label">${this._labelFor(e)}</span><button type="button" class="chip-remove" data-remove="${h(e)}" aria-label="Remove"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join(``)}_renderOptions(e){let t=this.querySelector(`.search-select-options`),n=this.querySelector(`.search-select-empty`);if(!t)return;let r=(e||``).trim().toLowerCase(),i=this._readOptions();r&&(i=i.filter(e=>_(e.label).toLowerCase().includes(r))),t.innerHTML=i.map(e=>{let t=this._values.includes(String(e.value));return`<button type="button" role="option" class="search-select-option${t?` selected`:``}" data-value="${h(e.value)}" aria-selected="${t}"><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span><span class="ms-opt-label">${e.label}</span></button>`}).join(``),n&&(n.hidden=i.length>0),this._active=-1}_wire(){let e=this.querySelector(`.search-select-control`),t=this.querySelector(`.search-select-menu`),n=this.querySelector(`.search-select-input`),r=this.querySelector(`.search-select-clear`),i=this.querySelector(`.search-select-options`);if(!e||!t)return;let a=()=>this.hasAttribute(`disabled`),o=()=>{let n=e.getBoundingClientRect();t.style.position=`fixed`,t.style.top=`${n.bottom+4}px`,t.style.left=`${n.left}px`,t.style.width=`${n.width}px`},s=()=>[...this.querySelectorAll(`.search-select-option`)],c=()=>s().filter(e=>!e.hidden),l=e=>{let t=c();this._active=e;for(let e of s())e.classList.remove(`is-active`);e>=0&&t[e]&&(t[e].classList.add(`is-active`),t[e].scrollIntoView({block:`nearest`}))},u=()=>!t.hidden,d=()=>{a()||(t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),e.classList.add(`open`),o(),n&&(n.value=``,this._renderOptions(``),n.focus()))},f=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`),e.classList.remove(`open`),l(-1)},p=()=>{this._internals?.setFormValue(this._values.join(`,`)),this.dispatchEvent(new Event(`change`,{bubbles:!0}))},m=e=>{let t=String(e);this._values.includes(t)?this._values=this._values.filter(e=>e!==t):this._values=[...this._values,t],this._renderControl(),this._renderOptions(n?n.value:``),p()},h=e=>{this._values=this._values.filter(t=>t!==String(e)),this._renderControl(),this._renderOptions(n?n.value:``),p()};e.addEventListener(`click`,e=>{let t=e.target.closest(`[data-remove]`);if(t){e.stopPropagation(),h(t.dataset.remove);return}u()?f():d()}),i.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&(m(t.dataset.value),n?.focus())}),i.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&l(c().indexOf(t))}),n?.addEventListener(`input`,()=>{this._renderOptions(n.value),r&&(r.hidden=!n.value),l(-1)}),n?.addEventListener(`keydown`,t=>{let r=c();t.key===`ArrowDown`?(t.preventDefault(),l(Math.min(this._active+1,r.length-1))):t.key===`ArrowUp`?(t.preventDefault(),l(Math.max(this._active-1,0))):t.key===`Enter`?(t.preventDefault(),r[this._active]&&m(r[this._active].dataset.value)):t.key===`Escape`?(f(),e.focus()):t.key===`Backspace`&&!n.value&&this._values.length&&h(this._values[this._values.length-1])}),r?.addEventListener(`click`,()=>{n.value=``,this._renderOptions(``),r.hidden=!0,n.focus()}),e.addEventListener(`keydown`,e=>{!u()&&(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),d())}),this._onDocClick=e=>{u()&&!this.contains(e.target)&&f()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{u()&&o()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},h=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),g=e=>String(e??``).replace(/&/g,`&`).replace(/</g,`<`),_=e=>String(e??``).replace(/<[^>]*>/g,``),v=[[`AF`,`Afghanistan`,`93`],[`AX`,`Åland Islands`,`358`],[`AL`,`Albania`,`355`],[`DZ`,`Algeria`,`213`],[`AS`,`American Samoa`,`1`],[`AD`,`Andorra`,`376`],[`AO`,`Angola`,`244`],[`AI`,`Anguilla`,`1`],[`AG`,`Antigua & Barbuda`,`1`],[`AR`,`Argentina`,`54`],[`AM`,`Armenia`,`374`],[`AW`,`Aruba`,`297`],[`AC`,`Ascension Island`,`247`],[`AU`,`Australia`,`61`],[`AT`,`Austria`,`43`],[`AZ`,`Azerbaijan`,`994`],[`BS`,`Bahamas`,`1`],[`BH`,`Bahrain`,`973`],[`BD`,`Bangladesh`,`880`],[`BB`,`Barbados`,`1`],[`BY`,`Belarus`,`375`],[`BE`,`Belgium`,`32`],[`BZ`,`Belize`,`501`],[`BJ`,`Benin`,`229`],[`BM`,`Bermuda`,`1`],[`BT`,`Bhutan`,`975`],[`BO`,`Bolivia`,`591`],[`BA`,`Bosnia & Herzegovina`,`387`],[`BW`,`Botswana`,`267`],[`BR`,`Brazil`,`55`],[`IO`,`British Indian Ocean Territory`,`246`],[`VG`,`British Virgin Islands`,`1`],[`BN`,`Brunei`,`673`],[`BG`,`Bulgaria`,`359`],[`BF`,`Burkina Faso`,`226`],[`BI`,`Burundi`,`257`],[`KH`,`Cambodia`,`855`],[`CM`,`Cameroon`,`237`],[`CA`,`Canada`,`1`],[`CV`,`Cape Verde`,`238`],[`BQ`,`Caribbean Netherlands`,`599`],[`KY`,`Cayman Islands`,`1`],[`CF`,`Central African Republic`,`236`],[`TD`,`Chad`,`235`],[`CL`,`Chile`,`56`],[`CN`,`China`,`86`],[`CX`,`Christmas Island`,`61`],[`CC`,`Cocos (Keeling) Islands`,`61`],[`CO`,`Colombia`,`57`],[`KM`,`Comoros`,`269`],[`CG`,`Congo - Brazzaville`,`242`],[`CD`,`Congo - Kinshasa`,`243`],[`CK`,`Cook Islands`,`682`],[`CR`,`Costa Rica`,`506`],[`CI`,`Côte d’Ivoire`,`225`],[`HR`,`Croatia`,`385`],[`CU`,`Cuba`,`53`],[`CW`,`Curaçao`,`599`],[`CY`,`Cyprus`,`357`],[`CZ`,`Czechia`,`420`],[`DK`,`Denmark`,`45`],[`DJ`,`Djibouti`,`253`],[`DM`,`Dominica`,`1`],[`DO`,`Dominican Republic`,`1`],[`EC`,`Ecuador`,`593`],[`EG`,`Egypt`,`20`],[`SV`,`El Salvador`,`503`],[`GQ`,`Equatorial Guinea`,`240`],[`ER`,`Eritrea`,`291`],[`EE`,`Estonia`,`372`],[`SZ`,`Eswatini`,`268`],[`ET`,`Ethiopia`,`251`],[`FK`,`Falkland Islands`,`500`],[`FO`,`Faroe Islands`,`298`],[`FJ`,`Fiji`,`679`],[`FI`,`Finland`,`358`],[`FR`,`France`,`33`],[`GF`,`French Guiana`,`594`],[`PF`,`French Polynesia`,`689`],[`GA`,`Gabon`,`241`],[`GM`,`Gambia`,`220`],[`GE`,`Georgia`,`995`],[`DE`,`Germany`,`49`],[`GH`,`Ghana`,`233`],[`GI`,`Gibraltar`,`350`],[`GR`,`Greece`,`30`],[`GL`,`Greenland`,`299`],[`GD`,`Grenada`,`1`],[`GP`,`Guadeloupe`,`590`],[`GU`,`Guam`,`1`],[`GT`,`Guatemala`,`502`],[`GG`,`Guernsey`,`44`],[`GN`,`Guinea`,`224`],[`GW`,`Guinea-Bissau`,`245`],[`GY`,`Guyana`,`592`],[`HT`,`Haiti`,`509`],[`HN`,`Honduras`,`504`],[`HK`,`Hong Kong SAR China`,`852`],[`HU`,`Hungary`,`36`],[`IS`,`Iceland`,`354`],[`IN`,`India`,`91`],[`ID`,`Indonesia`,`62`],[`IR`,`Iran`,`98`],[`IQ`,`Iraq`,`964`],[`IE`,`Ireland`,`353`],[`IM`,`Isle of Man`,`44`],[`IL`,`Israel`,`972`],[`IT`,`Italy`,`39`],[`JM`,`Jamaica`,`1`],[`JP`,`Japan`,`81`],[`JE`,`Jersey`,`44`],[`JO`,`Jordan`,`962`],[`KZ`,`Kazakhstan`,`7`],[`KE`,`Kenya`,`254`],[`KI`,`Kiribati`,`686`],[`XK`,`Kosovo`,`383`],[`KW`,`Kuwait`,`965`],[`KG`,`Kyrgyzstan`,`996`],[`LA`,`Laos`,`856`],[`LV`,`Latvia`,`371`],[`LB`,`Lebanon`,`961`],[`LS`,`Lesotho`,`266`],[`LR`,`Liberia`,`231`],[`LY`,`Libya`,`218`],[`LI`,`Liechtenstein`,`423`],[`LT`,`Lithuania`,`370`],[`LU`,`Luxembourg`,`352`],[`MO`,`Macao SAR China`,`853`],[`MG`,`Madagascar`,`261`],[`MW`,`Malawi`,`265`],[`MY`,`Malaysia`,`60`],[`MV`,`Maldives`,`960`],[`ML`,`Mali`,`223`],[`MT`,`Malta`,`356`],[`MH`,`Marshall Islands`,`692`],[`MQ`,`Martinique`,`596`],[`MR`,`Mauritania`,`222`],[`MU`,`Mauritius`,`230`],[`YT`,`Mayotte`,`262`],[`MX`,`Mexico`,`52`],[`FM`,`Micronesia`,`691`],[`MD`,`Moldova`,`373`],[`MC`,`Monaco`,`377`],[`MN`,`Mongolia`,`976`],[`ME`,`Montenegro`,`382`],[`MS`,`Montserrat`,`1`],[`MA`,`Morocco`,`212`],[`MZ`,`Mozambique`,`258`],[`MM`,`Myanmar (Burma)`,`95`],[`NA`,`Namibia`,`264`],[`NR`,`Nauru`,`674`],[`NP`,`Nepal`,`977`],[`NL`,`Netherlands`,`31`],[`NC`,`New Caledonia`,`687`],[`NZ`,`New Zealand`,`64`],[`NI`,`Nicaragua`,`505`],[`NE`,`Niger`,`227`],[`NG`,`Nigeria`,`234`],[`NU`,`Niue`,`683`],[`NF`,`Norfolk Island`,`672`],[`KP`,`North Korea`,`850`],[`MK`,`North Macedonia`,`389`],[`MP`,`Northern Mariana Islands`,`1`],[`NO`,`Norway`,`47`],[`OM`,`Oman`,`968`],[`PK`,`Pakistan`,`92`],[`PW`,`Palau`,`680`],[`PS`,`Palestinian Territories`,`970`],[`PA`,`Panama`,`507`],[`PG`,`Papua New Guinea`,`675`],[`PY`,`Paraguay`,`595`],[`PE`,`Peru`,`51`],[`PH`,`Philippines`,`63`],[`PL`,`Poland`,`48`],[`PT`,`Portugal`,`351`],[`PR`,`Puerto Rico`,`1`],[`QA`,`Qatar`,`974`],[`RE`,`Réunion`,`262`],[`RO`,`Romania`,`40`],[`RU`,`Russia`,`7`],[`RW`,`Rwanda`,`250`],[`WS`,`Samoa`,`685`],[`SM`,`San Marino`,`378`],[`ST`,`São Tomé & Príncipe`,`239`],[`SA`,`Saudi Arabia`,`966`],[`SN`,`Senegal`,`221`],[`RS`,`Serbia`,`381`],[`SC`,`Seychelles`,`248`],[`SL`,`Sierra Leone`,`232`],[`SG`,`Singapore`,`65`],[`SX`,`Sint Maarten`,`1`],[`SK`,`Slovakia`,`421`],[`SI`,`Slovenia`,`386`],[`SB`,`Solomon Islands`,`677`],[`SO`,`Somalia`,`252`],[`ZA`,`South Africa`,`27`],[`KR`,`South Korea`,`82`],[`SS`,`South Sudan`,`211`],[`ES`,`Spain`,`34`],[`LK`,`Sri Lanka`,`94`],[`BL`,`St. Barthélemy`,`590`],[`SH`,`St. Helena`,`290`],[`KN`,`St. Kitts & Nevis`,`1`],[`LC`,`St. Lucia`,`1`],[`MF`,`St. Martin`,`590`],[`PM`,`St. Pierre & Miquelon`,`508`],[`VC`,`St. Vincent & Grenadines`,`1`],[`SD`,`Sudan`,`249`],[`SR`,`Suriname`,`597`],[`SJ`,`Svalbard & Jan Mayen`,`47`],[`SE`,`Sweden`,`46`],[`CH`,`Switzerland`,`41`],[`SY`,`Syria`,`963`],[`TW`,`Taiwan`,`886`],[`TJ`,`Tajikistan`,`992`],[`TZ`,`Tanzania`,`255`],[`TH`,`Thailand`,`66`],[`TL`,`Timor-Leste`,`670`],[`TG`,`Togo`,`228`],[`TK`,`Tokelau`,`690`],[`TO`,`Tonga`,`676`],[`TT`,`Trinidad & Tobago`,`1`],[`TA`,`Tristan da Cunha`,`290`],[`TN`,`Tunisia`,`216`],[`TR`,`Türkiye`,`90`],[`TM`,`Turkmenistan`,`993`],[`TC`,`Turks & Caicos Islands`,`1`],[`TV`,`Tuvalu`,`688`],[`VI`,`U.S. Virgin Islands`,`1`],[`UG`,`Uganda`,`256`],[`UA`,`Ukraine`,`380`],[`AE`,`United Arab Emirates`,`971`],[`GB`,`United Kingdom`,`44`],[`US`,`United States`,`1`],[`UY`,`Uruguay`,`598`],[`UZ`,`Uzbekistan`,`998`],[`VU`,`Vanuatu`,`678`],[`VA`,`Vatican City`,`39`],[`VE`,`Venezuela`,`58`],[`VN`,`Vietnam`,`84`],[`WF`,`Wallis & Futuna`,`681`],[`EH`,`Western Sahara`,`212`],[`YE`,`Yemen`,`967`],[`ZM`,`Zambia`,`260`],[`ZW`,`Zimbabwe`,`263`]],y=e=>(v.find(t=>t[0]===e)||[``,``,``])[2],b=e=>`wui-flag wui-flag-${String(e).toLowerCase()}`,x=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`value`,`country`,`placeholder`,`disabled`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,this._country=`IN`,this._national=``}connectedCallback(){this._rendered||this.render()}attributeChangedCallback(e,t,n){this._rendered&&(e===`country`&&(this._country=n||`IN`),this.render())}get value(){return`+${y(this._country)}${this._national}`}set value(e){this._national=String(e??``).replace(/[^0-9]/g,``),this._commit()}_commit(){this._internals?.setFormValue(this.value),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}render(){let e=this.getAttribute(`placeholder`)||`Enter phone number`;this._country=this.getAttribute(`country`)||this._country;let t=v.map(([e,t,n])=>`<button type="button" role="option" class="country-dropdown-item${e===this._country?` selected`:``}" data-iso="${e}"><span class="${b(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join(``);this.innerHTML=`
|
|
40
85
|
<div class="phone-input-wrap">
|
|
41
86
|
<div class="phone-country-adornment">
|
|
42
87
|
<button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute(`disabled`)?` disabled`:``}>
|
|
43
|
-
<span class="${
|
|
88
|
+
<span class="${b(this._country)}" data-flag aria-hidden="true"></span>
|
|
44
89
|
<i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
|
|
45
|
-
<span class="phone-dial" data-dial>+${
|
|
90
|
+
<span class="phone-dial" data-dial>+${y(this._country)}</span>
|
|
46
91
|
</button>
|
|
47
92
|
<div class="country-dropdown-menu" role="listbox" hidden>
|
|
48
93
|
<div class="dropdown-search-wrapper"><span class="dropdown-search-icon"><i class="bi bi-search" aria-hidden="true"></i></span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" /></div>
|
|
49
94
|
<div class="country-list-scroll">${t}<div class="country-empty" hidden>No countries found</div></div>
|
|
50
95
|
</div>
|
|
51
96
|
</div>
|
|
52
|
-
<input type="tel" class="input" placeholder="${
|
|
53
|
-
</div>`,this._rendered=!0,this._wire()}_wire(){let e=this.querySelector(`.country-toggle`),t=this.querySelector(`.country-dropdown-menu`),n=this.querySelector(`.dropdown-search-input`),r=this.querySelector(`.country-list-scroll`),i=this.querySelector(`.country-empty`),a=this.querySelector(`input[type=tel]`),o=this.querySelector(`[data-flag]`),s=this.querySelector(`[data-dial]`);if(!e||!t)return;let c=()=>!t.hidden,l=()=>{let n=e.getBoundingClientRect(),r=t.offsetWidth||320,i=t.offsetHeight||320,a=window.innerHeight-n.bottom,o=a<i+6&&n.top>a?n.top-i-6:n.bottom+6,s=Math.min(Math.max(8,n.left),Math.max(8,window.innerWidth-r-8));t.style.top=`${Math.max(8,o)}px`,t.style.left=`${s}px`},u=()=>{t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),n.value=``,f(``),l(),n.focus()},d=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)};this._reposition=()=>{c()&&l()},window.addEventListener(`scroll`,this._reposition,!0),window.addEventListener(`resize`,this._reposition);let f=e=>{let t=e.trim().toLowerCase(),n=0;for(let e of r.querySelectorAll(`.country-dropdown-item`)){let r=!t||e.textContent.toLowerCase().includes(t);e.hidden=!r,r&&(n+=1)}i&&(i.hidden=n>0)},p=e=>{this._country=e,this.setAttribute(`country`,e),o&&(o.className=
|
|
97
|
+
<input type="tel" class="input" placeholder="${S(e)}" value="${S(this._national)}"${this.hasAttribute(`disabled`)?` disabled`:``} />
|
|
98
|
+
</div>`,this._rendered=!0,this._wire()}_wire(){let e=this.querySelector(`.country-toggle`),t=this.querySelector(`.country-dropdown-menu`),n=this.querySelector(`.dropdown-search-input`),r=this.querySelector(`.country-list-scroll`),i=this.querySelector(`.country-empty`),a=this.querySelector(`input[type=tel]`),o=this.querySelector(`[data-flag]`),s=this.querySelector(`[data-dial]`);if(!e||!t)return;let c=()=>!t.hidden,l=()=>{let n=e.getBoundingClientRect(),r=t.offsetWidth||320,i=t.offsetHeight||320,a=window.innerHeight-n.bottom,o=a<i+6&&n.top>a?n.top-i-6:n.bottom+6,s=Math.min(Math.max(8,n.left),Math.max(8,window.innerWidth-r-8));t.style.top=`${Math.max(8,o)}px`,t.style.left=`${s}px`},u=()=>{t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),n.value=``,f(``),l(),n.focus()},d=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)};this._reposition=()=>{c()&&l()},window.addEventListener(`scroll`,this._reposition,!0),window.addEventListener(`resize`,this._reposition);let f=e=>{let t=e.trim().toLowerCase(),n=0;for(let e of r.querySelectorAll(`.country-dropdown-item`)){let r=!t||e.textContent.toLowerCase().includes(t);e.hidden=!r,r&&(n+=1)}i&&(i.hidden=n>0)},p=e=>{this._country=e,this.setAttribute(`country`,e),o&&(o.className=b(e)),s&&(s.textContent=`+${y(e)}`);for(let t of r.querySelectorAll(`.country-dropdown-item`))t.classList.toggle(`selected`,t.dataset.iso===e);d(),this._commit()};e.addEventListener(`click`,()=>c()?d():u()),n.addEventListener(`input`,()=>f(n.value)),r.addEventListener(`click`,e=>{let t=e.target.closest(`.country-dropdown-item`);t&&p(t.dataset.iso)}),a.addEventListener(`input`,()=>{this._national=a.value.replace(/[^0-9]/g,``),this._commit()}),this._onDocClick=e=>{c()&&!this.contains(e.target)&&d()},document.addEventListener(`click`,this._onDocClick),this._internals?.setFormValue(this.value)}disconnectedCallback(){this._reposition&&(window.removeEventListener(`scroll`,this._reposition,!0),window.removeEventListener(`resize`,this._reposition)),this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},S=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),C=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`value`,`placeholder`,`search-placeholder`,`searchable`,`disabled`,`compact`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,this._value=``,this._optionsProp=null,this._active=-1}connectedCallback(){this._rendered||this.render()}attributeChangedCallback(e,t,n){this._rendered&&(e===`value`?this.value=n:this.render())}get value(){return this._value}set value(e){this._value=e==null?``:String(e),this._internals?.setFormValue(this._value),this._syncSelected()}set options(e){this._optionsProp=Array.isArray(e)?e:null,this.isConnected&&this.render()}get options(){return this._readOptions()}_snapshotDeclared(){if(this._declared)return;let e=[...this.querySelectorAll(`:scope > wui-option`)];e.length&&(this._declared=e.map(e=>({value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML,selected:e.hasAttribute(`selected`)})))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}render(){this._snapshotDeclared();let e=this._readOptions(),t=this.hasAttribute(`searchable`),n=this.getAttribute(`placeholder`)||`Select...`,r=this.getAttribute(`search-placeholder`)||`Search...`,i=e.find(e=>String(e.value)===String(this._value))||e.find(e=>e.selected);i&&(this._value=String(i.value)),this._internals?.setFormValue(this._value);let a=e.map(e=>{let t=String(e.value)===String(this._value);return`<button type="button" role="option" class="search-select-option${t?` selected`:``}" data-value="${w(e.value)}" aria-selected="${t}">${e.label}</button>`}).join(``);this.innerHTML=`
|
|
54
99
|
<div class="search-select${this.hasAttribute(`compact`)?` search-select-compact`:``}">
|
|
55
100
|
<button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute(`disabled`)?` disabled`:``}>
|
|
56
101
|
<span class="${i?``:`search-select-placeholder`}" data-label>${i?i.label:n}</span>
|
|
57
102
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
58
103
|
</button>
|
|
59
104
|
<div class="search-select-menu search-select-menu-fixed" role="listbox" tabindex="-1" hidden>
|
|
60
|
-
${t?`<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${
|
|
105
|
+
${t?`<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${w(r)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>`:``}
|
|
61
106
|
<div class="search-select-options">${a}<div class="search-select-empty" hidden>No matches</div></div>
|
|
62
107
|
</div>
|
|
63
|
-
</div>`,this._rendered=!0,this._wire()}_refs(){return{control:this.querySelector(`.search-select-control`),menu:this.querySelector(`.search-select-menu`),label:this.querySelector(`[data-label]`),search:this.querySelector(`.search-select-input`),clear:this.querySelector(`.search-select-clear`),empty:this.querySelector(`.search-select-empty`),optionsWrap:this.querySelector(`.search-select-options`)}}_optionEls(){return[...this.querySelectorAll(`.search-select-option`)]}_visible(){return this._optionEls().filter(e=>!e.hidden)}_syncSelected(){let{label:e}=this._refs(),t=this._readOptions().find(e=>String(e.value)===String(this._value));for(let e of this._optionEls()){let t=e.dataset.value===String(this._value);e.classList.toggle(`selected`,t),e.setAttribute(`aria-selected`,String(t))}e&&(e.innerHTML=t?t.label:e.innerHTML,e.classList.toggle(`search-select-placeholder`,!t))}_wire(){let e=this._refs();if(!e.control||!e.menu)return;let t=()=>{let t=e.control.getBoundingClientRect();e.menu.style.position=`fixed`,e.menu.style.top=`${t.bottom+4}px`,e.menu.style.left=`${t.left}px`,e.menu.style.width=`${t.width}px`},n=e=>{let t=this._visible();this._active=e;for(let e of this._optionEls())e.classList.remove(`is-active`);e>=0&&t[e]&&(t[e].classList.add(`is-active`),t[e].scrollIntoView({block:`nearest`}))},r=t=>{let n=t.trim().toLowerCase(),r=0;for(let e of this._optionEls()){let t=!n||e.textContent.toLowerCase().includes(n);e.hidden=!t,t&&(r+=1)}e.empty&&(e.empty.hidden=r>0),e.clear&&(e.clear.hidden=!n)},i=()=>!e.menu.hidden,a=()=>{e.menu.hidden=!1,e.control.setAttribute(`aria-expanded`,`true`),e.control.classList.add(`open`),t(),e.search&&(e.search.value=``,r(``),e.search.focus()),n(this._optionEls().findIndex(e=>e.classList.contains(`selected`)))},o=()=>{e.menu.hidden=!0,e.control.setAttribute(`aria-expanded`,`false`),e.control.classList.remove(`open`),n(-1)},s=t=>{this.value=t.dataset.value,this.dispatchEvent(new Event(`change`,{bubbles:!0})),o(),e.control.focus()},c=t=>{let r=this._visible();t.key===`ArrowDown`?(t.preventDefault(),n(Math.min(this._active+1,r.length-1))):t.key===`ArrowUp`?(t.preventDefault(),n(Math.max(this._active-1,0))):t.key===`Enter`?(t.preventDefault(),r[this._active]&&s(r[this._active])):t.key===`Escape`&&(o(),e.control.focus())};e.control.addEventListener(`click`,()=>i()?o():a()),e.control.addEventListener(`keydown`,e=>{!i()&&(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),a())}),e.optionsWrap.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&s(t)}),e.optionsWrap.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&n(this._visible().indexOf(t))}),e.search?.addEventListener(`input`,()=>{r(e.search.value),n(-1)}),e.search?.addEventListener(`keydown`,c),e.clear?.addEventListener(`click`,()=>{e.search.value=``,r(``),e.search.focus()}),e.menu.addEventListener(`keydown`,c),this._onDocClick=e=>{i()&&!this.contains(e.target)&&o()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{i()&&t()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},
|
|
108
|
+
</div>`,this._rendered=!0,this._wire()}_refs(){return{control:this.querySelector(`.search-select-control`),menu:this.querySelector(`.search-select-menu`),label:this.querySelector(`[data-label]`),search:this.querySelector(`.search-select-input`),clear:this.querySelector(`.search-select-clear`),empty:this.querySelector(`.search-select-empty`),optionsWrap:this.querySelector(`.search-select-options`)}}_optionEls(){return[...this.querySelectorAll(`.search-select-option`)]}_visible(){return this._optionEls().filter(e=>!e.hidden)}_syncSelected(){let{label:e}=this._refs(),t=this._readOptions().find(e=>String(e.value)===String(this._value));for(let e of this._optionEls()){let t=e.dataset.value===String(this._value);e.classList.toggle(`selected`,t),e.setAttribute(`aria-selected`,String(t))}e&&(e.innerHTML=t?t.label:e.innerHTML,e.classList.toggle(`search-select-placeholder`,!t))}_wire(){let e=this._refs();if(!e.control||!e.menu)return;let t=()=>{let t=e.control.getBoundingClientRect();e.menu.style.position=`fixed`,e.menu.style.top=`${t.bottom+4}px`,e.menu.style.left=`${t.left}px`,e.menu.style.width=`${t.width}px`},n=e=>{let t=this._visible();this._active=e;for(let e of this._optionEls())e.classList.remove(`is-active`);e>=0&&t[e]&&(t[e].classList.add(`is-active`),t[e].scrollIntoView({block:`nearest`}))},r=t=>{let n=t.trim().toLowerCase(),r=0;for(let e of this._optionEls()){let t=!n||e.textContent.toLowerCase().includes(n);e.hidden=!t,t&&(r+=1)}e.empty&&(e.empty.hidden=r>0),e.clear&&(e.clear.hidden=!n)},i=()=>!e.menu.hidden,a=()=>{e.menu.hidden=!1,e.control.setAttribute(`aria-expanded`,`true`),e.control.classList.add(`open`),t(),e.search&&(e.search.value=``,r(``),e.search.focus()),n(this._optionEls().findIndex(e=>e.classList.contains(`selected`)))},o=()=>{e.menu.hidden=!0,e.control.setAttribute(`aria-expanded`,`false`),e.control.classList.remove(`open`),n(-1)},s=t=>{this.value=t.dataset.value,this.dispatchEvent(new Event(`change`,{bubbles:!0})),o(),e.control.focus()},c=t=>{let r=this._visible();t.key===`ArrowDown`?(t.preventDefault(),n(Math.min(this._active+1,r.length-1))):t.key===`ArrowUp`?(t.preventDefault(),n(Math.max(this._active-1,0))):t.key===`Enter`?(t.preventDefault(),r[this._active]&&s(r[this._active])):t.key===`Escape`&&(o(),e.control.focus())};e.control.addEventListener(`click`,()=>i()?o():a()),e.control.addEventListener(`keydown`,e=>{!i()&&(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),a())}),e.optionsWrap.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&s(t)}),e.optionsWrap.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&n(this._visible().indexOf(t))}),e.search?.addEventListener(`input`,()=>{r(e.search.value),n(-1)}),e.search?.addEventListener(`keydown`,c),e.clear?.addEventListener(`click`,()=>{e.search.value=``,r(``),e.search.focus()}),e.menu.addEventListener(`keydown`,c),this._onDocClick=e=>{i()&&!this.contains(e.target)&&o()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{i()&&t()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},w=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),T=`image/png,image/jpeg,image/webp`,E=5,D={"image/png":[`.png`],"image/jpeg":[`.jpg`,`.jpeg`],"image/webp":[`.webp`],"image/gif":[`.gif`],"image/svg+xml":[`.svg`],"application/pdf":[`.pdf`]},O={"image/png":`PNG`,"image/jpeg":`JPG`,"image/webp":`WEBP`,"image/gif":`GIF`,"image/svg+xml":`SVG`,"application/pdf":`PDF`,".png":`PNG`,".jpg":`JPG`,".jpeg":`JPG`,".webp":`WEBP`,".gif":`GIF`,".svg":`SVG`,".pdf":`PDF`},k=e=>String(e||``).split(`,`).map(e=>e.trim().toLowerCase()).filter(Boolean);function A(e){let t=[];for(let n of k(e)){let e=O[n]||(n.startsWith(`.`)?n.slice(1).toUpperCase():n.toUpperCase());t.includes(e)||t.push(e)}return t.length<=1?t[0]||`supported`:`${t.slice(0,-1).join(`, `)} or ${t[t.length-1]}`}function j(e,t){let n=k(t);if(!n.length)return!0;let r=(e.type||``).toLowerCase(),i=(e.name||``).toLowerCase();return n.some(e=>e.startsWith(`.`)?i.endsWith(e):e.endsWith(`/*`)?r.startsWith(e.slice(0,-1)):r&&r===e?!0:!r&&(D[e]||[]).some(e=>i.endsWith(e)))}function M(e,t={}){if(!e)return null;let n=t.accept===void 0?T:t.accept,r=t.maxSizeMb||5;return j(e,n)?e.size>r*1024*1024?`Keep the file under ${r} MB.`:null:`Choose a ${A(n)} file.`}var N=(e,t)=>{typeof customElements<`u`&&!customElements.get(e)&&customElements.define(e,t)};function P(){N(`wui-select`,C),N(`wui-phone`,x),N(`wui-datepicker`,p),N(`wui-autocomplete`,i),N(`wui-multiselect`,m),N(`wui-status-icon`,r)}return P(),e.DEFAULT_IMAGE_ACCEPT=T,e.DEFAULT_MAX_SIZE_MB=E,e.STATUS_TONES=n,e.WuiAutocomplete=i,e.WuiDatePicker=p,e.WuiMultiSelect=m,e.WuiPhone=x,e.WuiSelect=C,e.WuiStatusIcon=r,e.acceptLabel=A,e.defineWeborityElements=P,e.matchesAccept=j,e.validateFile=M,e})({});
|
package/dist/ui-elements.js
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
|
-
//#region src/
|
|
2
|
-
var e =
|
|
1
|
+
//#region src/statusIcons.js
|
|
2
|
+
var e = {
|
|
3
|
+
success: "<rect width=\"174\" height=\"174\" rx=\"87\" fill=\"var(--wui-success-5)\"/>\n<rect x=\"24\" y=\"24\" width=\"126\" height=\"126\" rx=\"63\" stroke=\"var(--wui-success-20)\" stroke-width=\"16\"/>\n<g clip-path=\"url(#wui_success_clip)\">\n<rect x=\"32\" y=\"32\" width=\"110\" height=\"110\" rx=\"55\" fill=\"var(--wui-success-active)\"/>\n<rect x=\"108.758\" y=\"67.5986\" width=\"75.5044\" height=\"49.155\" transform=\"rotate(45 108.758 67.5986)\" fill=\"var(--wui-success)\"/>\n<path d=\"M87.895 96.1046C89.7154 97.9249 89.7154 101.046 87.895 102.866L84.1243 106.637C82.3039 108.457 79.1833 108.457 77.3629 106.637L60.8496 89.9934C59.0293 88.173 59.0293 85.0524 60.8496 83.232L64.6204 79.4613C66.4408 77.6409 69.5614 77.6409 71.3817 79.4613L87.895 96.1046Z\" fill=\"white\"/>\n<path d=\"M102.324 67.3672C104.144 65.5469 107.265 65.5469 109.085 67.3672L112.856 71.138C114.676 72.9583 114.676 76.079 112.856 77.8993L84.2499 106.375C82.4296 108.195 79.3089 108.195 77.4886 106.375L73.7178 102.604C71.8975 100.784 71.8975 97.6633 73.7178 95.8429L102.324 67.3672Z\" fill=\"white\"/>\n</g>\n<defs><clipPath id=\"wui_success_clip\"><rect x=\"32\" y=\"32\" width=\"110\" height=\"110\" rx=\"55\" fill=\"white\"/></clipPath></defs>",
|
|
4
|
+
error: "<rect width=\"174\" height=\"174\" rx=\"87\" fill=\"var(--wui-danger-5)\"/>\n<rect x=\"24\" y=\"24\" width=\"126\" height=\"126\" rx=\"63\" stroke=\"var(--wui-danger-20)\" stroke-width=\"16\"/>\n<g clip-path=\"url(#wui_error_clip0)\">\n<rect x=\"32\" y=\"32\" width=\"110\" height=\"110\" rx=\"55\" fill=\"var(--wui-danger)\"/>\n<rect x=\"110.758\" y=\"62\" width=\"75.5044\" height=\"69.9535\" transform=\"rotate(45 110.758 62)\" fill=\"var(--wui-danger-active)\"/>\n<g clip-path=\"url(#wui_error_clip1)\">\n<path d=\"M95.9285 87.0037L112.943 69.9887C114.823 68.1087 114.823 65.0608 112.943 63.1838L110.675 60.9155C108.795 59.0349 105.747 59.0349 103.87 60.9155L86.8552 77.9298L69.8403 60.9119C67.9603 59.032 64.9124 59.032 63.0353 60.9119L60.7635 63.1802C58.8835 65.0608 58.8835 68.1087 60.7635 69.9858L77.7814 87.0037L60.767 104.018C58.8865 105.899 58.8865 108.947 60.767 110.824L63.0353 113.092C64.9153 114.972 67.9632 114.972 69.8403 113.092L86.8552 96.0769L103.87 113.092C105.75 114.972 108.798 114.972 110.675 113.092L112.943 110.824C114.823 108.943 114.823 105.895 112.943 104.018L95.9285 87.0037Z\" fill=\"white\"/>\n</g>\n</g>\n<defs><clipPath id=\"wui_error_clip0\"><rect x=\"32\" y=\"32\" width=\"110\" height=\"110\" rx=\"55\" fill=\"white\"/></clipPath><clipPath id=\"wui_error_clip1\"><rect width=\"55\" height=\"55\" fill=\"white\" transform=\"translate(59.3535 59.502)\"/></clipPath></defs>",
|
|
5
|
+
warning: "<rect width=\"174\" height=\"174\" rx=\"87\" fill=\"var(--wui-warning-5)\"/>\n<rect x=\"24\" y=\"24\" width=\"126\" height=\"126\" rx=\"63\" stroke=\"var(--wui-warning-20)\" stroke-width=\"16\"/>\n<g clip-path=\"url(#wui_warning_clip)\">\n<rect x=\"32\" y=\"32\" width=\"110\" height=\"110\" rx=\"55\" fill=\"var(--wui-warning)\"/>\n<path d=\"M93.7812 60.9731L156.173 123.365L113.082 166.456L60 113.5L97 109L93.7812 60.9731Z\" fill=\"var(--wui-warning-active)\"/>\n<path d=\"M116.145 101.611L96.0431 62.7255C94.8912 60.6967 93.0607 59.1479 90.8656 58.3543C88.6768 57.5543 86.2768 57.5607 84.0945 58.3671C83.0001 58.7767 81.9953 59.3655 81.125 60.1079C80.2545 60.8567 79.5122 61.7527 78.9425 62.7703L57.8933 101.554C56.1525 104.594 56.1717 108.331 57.9317 111.358C59.6981 114.392 62.9427 116.248 66.4435 116.242H107.563C111.051 116.248 114.283 114.398 116.049 111.39C116.952 109.854 117.4 108.133 117.4 106.418C117.4 104.76 116.984 103.102 116.145 101.611ZM87.0064 105.714C85.0672 105.714 83.4929 104.146 83.4929 102.207C83.4929 100.267 85.0672 98.6993 87.0064 98.6993C88.9392 98.6993 90.5136 100.267 90.5136 102.207C90.5136 104.146 88.9392 105.714 87.0064 105.714ZM90.9104 78.098L88.0432 95.3266C88.0049 95.8706 87.5504 96.2994 87.0064 96.2994C86.4561 96.2994 86.0016 95.8706 85.9633 95.3266L83.0961 78.098C83.0385 77.8101 83.0065 77.522 83.0065 77.2405C83.0065 76.3125 83.3137 75.4037 83.8833 74.6485C84.6321 73.6629 85.7713 73.0549 87.0064 72.9717C88.2352 73.0549 89.3744 73.6629 90.1232 74.6485C90.872 75.6341 91.16 76.8885 90.9104 78.098Z\" fill=\"white\"/>\n</g>\n<defs><clipPath id=\"wui_warning_clip\"><rect x=\"32\" y=\"32\" width=\"110\" height=\"110\" rx=\"55\" fill=\"white\"/></clipPath></defs>",
|
|
6
|
+
info: "<rect width=\"174\" height=\"174\" rx=\"87\" fill=\"var(--wui-info-5)\"/>\n<rect x=\"24\" y=\"24\" width=\"126\" height=\"126\" rx=\"63\" stroke=\"var(--wui-info-20)\" stroke-width=\"16\"/>\n<g clip-path=\"url(#wui_info_clip)\">\n<rect x=\"32\" y=\"32\" width=\"110\" height=\"110\" rx=\"55\" fill=\"var(--wui-info)\"/>\n<path d=\"M104.999 67.5L111.454 64L163.495 116.041L115.739 163.797L62.999 111L101.897 104.102L104.999 67.5Z\" fill=\"var(--wui-info-active)\"/>\n<path d=\"M87 121C105.778 121 121 105.778 121 87C121 68.2223 105.778 53 87 53C68.2223 53 53 68.2223 53 87C53 105.778 68.2223 121 87 121Z\" fill=\"white\"/>\n<path d=\"M87 75.542C89.3472 75.542 91.25 73.6392 91.25 71.292C91.25 68.9448 89.3472 67.042 87 67.042C84.6528 67.042 82.75 68.9448 82.75 71.292C82.75 73.6392 84.6528 75.542 87 75.542Z\" fill=\"var(--wui-info-active)\"/>\n<path d=\"M86.9992 106.992C86.0975 106.992 85.2327 106.634 84.5951 105.996C83.9574 105.359 83.5992 104.494 83.5992 103.592V86.592C82.6975 86.592 81.8327 86.2338 81.1951 85.5962C80.5574 84.9585 80.1992 84.0937 80.1992 83.192C80.1992 82.2903 80.5574 81.4255 81.1951 80.7878C81.8327 80.1502 82.6975 79.792 83.5992 79.792H86.9992C87.901 79.792 88.7658 80.1502 89.4034 80.7878C90.041 81.4255 90.3992 82.2903 90.3992 83.192V103.592C90.3992 104.494 90.041 105.359 89.4034 105.996C88.7658 106.634 87.901 106.992 86.9992 106.992Z\" fill=\"var(--wui-info-active)\"/>\n<path d=\"M90.3992 106.992H83.5992C82.6975 106.992 81.8327 106.634 81.1951 105.996C80.5574 105.358 80.1992 104.494 80.1992 103.592C80.1992 102.69 80.5574 101.825 81.1951 101.188C81.8327 100.55 82.6975 100.192 83.5992 100.192H90.3992C91.301 100.192 92.1658 100.55 92.8034 101.188C93.441 101.825 93.7992 102.69 93.7992 103.592C93.7992 104.494 93.441 105.358 92.8034 105.996C92.1658 106.634 91.301 106.992 90.3992 106.992Z\" fill=\"var(--wui-info-active)\"/>\n</g>\n<defs><clipPath id=\"wui_info_clip\"><rect x=\"32\" y=\"32\" width=\"110\" height=\"110\" rx=\"55\" fill=\"white\"/></clipPath></defs>",
|
|
7
|
+
delete: "<rect width=\"174\" height=\"174\" rx=\"87\" fill=\"var(--wui-danger-5)\"/>\n<rect x=\"24\" y=\"24\" width=\"126\" height=\"126\" rx=\"63\" stroke=\"var(--wui-danger-20)\" stroke-width=\"16\"/>\n<g clip-path=\"url(#wui_delete_clip0)\">\n<rect x=\"32\" y=\"32\" width=\"110\" height=\"110\" rx=\"55\" fill=\"var(--wui-danger)\"/>\n<path d=\"M114.529 67.5672L163.249 116.287L116.354 163.183L67.6336 114.463L100.999 81.0975L64.999 77.5L58.999 69.5L114.529 67.5672Z\" fill=\"var(--wui-danger-active)\"/>\n<path d=\"M103.5 79L100.5 105.5L76 113L69.5 83.5L103.5 79Z\" fill=\"var(--wui-danger)\"/>\n<g clip-path=\"url(#wui_delete_clip1)\">\n<path d=\"M113.652 66.9993C108.895 66.5266 104.139 66.1721 99.3522 65.9061V65.8766L98.7022 62.0357C98.259 59.3175 97.609 55.2402 90.6954 55.2402H82.9545C76.0704 55.2402 75.4204 59.1402 74.9477 62.0061L74.3272 65.788C71.5795 65.9652 68.8318 66.1425 66.084 66.4084L60.0568 66.9993C58.8159 67.1175 57.9295 68.2107 58.0477 69.4221C58.1659 70.6334 59.2295 71.5198 60.4704 71.4016L66.4977 70.8107C81.9795 69.2743 97.5795 69.8652 113.239 71.4311C113.327 71.4311 113.386 71.4311 113.475 71.4311C114.598 71.4311 115.573 70.5743 115.691 69.4221C115.779 68.2107 114.893 67.1175 113.652 66.9993Z\" fill=\"white\"/>\n<path d=\"M108.216 75.5971C107.507 74.8585 106.532 74.4448 105.527 74.4448H68.1816C67.177 74.4448 66.1725 74.8585 65.4929 75.5971C64.8134 76.3357 64.4293 77.3403 64.4884 78.3744L66.3202 108.688C66.6452 113.179 67.0588 118.793 77.3702 118.793H96.3384C106.65 118.793 107.063 113.208 107.388 108.688L109.22 78.4039C109.279 77.3403 108.895 76.3357 108.216 75.5971ZM91.7588 103.99H81.9202C80.7088 103.99 79.7043 102.986 79.7043 101.774C79.7043 100.563 80.7088 99.5585 81.9202 99.5585H91.7588C92.9702 99.5585 93.9747 100.563 93.9747 101.774C93.9747 102.986 92.9702 103.99 91.7588 103.99ZM94.2406 92.1721H79.4679C78.2566 92.1721 77.252 91.1676 77.252 89.9562C77.252 88.7448 78.2566 87.7403 79.4679 87.7403H94.2406C95.452 87.7403 96.4566 88.7448 96.4566 89.9562C96.4566 91.1676 95.452 92.1721 94.2406 92.1721Z\" fill=\"white\"/>\n</g>\n</g>\n<defs><clipPath id=\"wui_delete_clip0\"><rect x=\"32\" y=\"32\" width=\"110\" height=\"110\" rx=\"55\" fill=\"white\"/></clipPath><clipPath id=\"wui_delete_clip1\"><rect width=\"65\" height=\"65\" fill=\"white\" transform=\"translate(54.3535 54.502)\"/></clipPath></defs>"
|
|
8
|
+
}, t = Object.keys(e), n = class extends HTMLElement {
|
|
9
|
+
static get observedAttributes() {
|
|
10
|
+
return ["tone", "size"];
|
|
11
|
+
}
|
|
12
|
+
connectedCallback() {
|
|
13
|
+
this.render();
|
|
14
|
+
}
|
|
15
|
+
attributeChangedCallback() {
|
|
16
|
+
this.isConnected && this.render();
|
|
17
|
+
}
|
|
18
|
+
render() {
|
|
19
|
+
let t = this.getAttribute("tone"), n = this.getAttribute("size") || "72", r = e[t] || e.info;
|
|
20
|
+
this.innerHTML = `<svg width="${n}" height="${n}" viewBox="0 0 174 174" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">${r}</svg>`;
|
|
21
|
+
}
|
|
22
|
+
}, r = class extends HTMLElement {
|
|
3
23
|
static formAssociated = !0;
|
|
4
24
|
static get observedAttributes() {
|
|
5
25
|
return [
|
|
@@ -26,7 +46,7 @@ var e = class extends HTMLElement {
|
|
|
26
46
|
set value(e) {
|
|
27
47
|
this._value = e == null ? "" : String(e), this._internals?.setFormValue(this._value);
|
|
28
48
|
let t = this._readOptions().find((e) => String(e.value) === this._value);
|
|
29
|
-
t && (this._label =
|
|
49
|
+
t && (this._label = a(t.label)), this._syncInput();
|
|
30
50
|
}
|
|
31
51
|
set options(e) {
|
|
32
52
|
this._optionsProp = Array.isArray(e) ? e : [], this._renderOptions();
|
|
@@ -68,7 +88,7 @@ var e = class extends HTMLElement {
|
|
|
68
88
|
this.innerHTML = `
|
|
69
89
|
<div class="search-select">
|
|
70
90
|
<div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false">
|
|
71
|
-
<input class="search-select-input search-select-ac-input" placeholder="${
|
|
91
|
+
<input class="search-select-input search-select-ac-input" placeholder="${i(e)}" aria-autocomplete="list" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""} />
|
|
72
92
|
<span class="search-select-spinner spinner-border spinner-border-sm" role="status" aria-hidden="true" hidden></span>
|
|
73
93
|
<button type="button" class="search-select-clear" aria-label="Clear" hidden><i class="bi bi-x" aria-hidden="true"></i></button>
|
|
74
94
|
</div>
|
|
@@ -103,15 +123,15 @@ var e = class extends HTMLElement {
|
|
|
103
123
|
e && (e.hidden = !this._loading);
|
|
104
124
|
}
|
|
105
125
|
_renderOptions(e) {
|
|
106
|
-
let
|
|
107
|
-
if (!
|
|
108
|
-
let
|
|
109
|
-
!this._remote &&
|
|
110
|
-
let
|
|
111
|
-
return `<button type="button" role="option" class="search-select-option${
|
|
126
|
+
let t = this._refs();
|
|
127
|
+
if (!t.optionsWrap) return;
|
|
128
|
+
let n = (e ?? (t.input ? t.input.value : "")).trim().toLowerCase(), r = this._readOptions();
|
|
129
|
+
!this._remote && n && (r = r.filter((e) => a(e.label).toLowerCase().includes(n))), t.optionsWrap.innerHTML = r.map((e) => {
|
|
130
|
+
let t = String(e.value) === String(this._value);
|
|
131
|
+
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${i(e.value)}" aria-selected="${t}">${e.label}</button>`;
|
|
112
132
|
}).join(""), this._active = -1;
|
|
113
|
-
let o =
|
|
114
|
-
|
|
133
|
+
let o = n.length < this._minChars;
|
|
134
|
+
t.hint && (t.hint.hidden = !(this._remote && o && !r.length)), t.empty && (t.empty.hidden = this._loading || r.length > 0 || this._remote && o);
|
|
115
135
|
}
|
|
116
136
|
_wire() {
|
|
117
137
|
let e = this._refs();
|
|
@@ -119,21 +139,21 @@ var e = class extends HTMLElement {
|
|
|
119
139
|
let t = () => {
|
|
120
140
|
let t = e.control.getBoundingClientRect();
|
|
121
141
|
e.menu.style.position = "fixed", e.menu.style.top = `${t.bottom + 4}px`, e.menu.style.left = `${t.left}px`, e.menu.style.width = `${t.width}px`;
|
|
122
|
-
},
|
|
123
|
-
let t =
|
|
142
|
+
}, n = () => this._optionEls().filter((e) => !e.hidden), r = (e) => {
|
|
143
|
+
let t = n();
|
|
124
144
|
this._active = e;
|
|
125
145
|
for (let e of this._optionEls()) e.classList.remove("is-active");
|
|
126
146
|
e >= 0 && t[e] && (t[e].classList.add("is-active"), t[e].scrollIntoView({ block: "nearest" }));
|
|
127
|
-
},
|
|
147
|
+
}, i = () => !e.menu.hidden, o = () => {
|
|
128
148
|
e.menu.hidden = !1, e.control.setAttribute("aria-expanded", "true"), e.control.classList.add("open"), t(), this._renderOptions();
|
|
129
149
|
}, s = () => {
|
|
130
|
-
e.menu.hidden = !0, e.control.setAttribute("aria-expanded", "false"), e.control.classList.remove("open"),
|
|
150
|
+
e.menu.hidden = !0, e.control.setAttribute("aria-expanded", "false"), e.control.classList.remove("open"), r(-1), this._syncInput();
|
|
131
151
|
}, c = (t) => {
|
|
132
|
-
this._value = t.dataset.value, this._label =
|
|
152
|
+
this._value = t.dataset.value, this._label = a(t.innerHTML), this._internals?.setFormValue(this._value), e.input.value = this._label, this.dispatchEvent(new Event("change", { bubbles: !0 })), s(), e.input.focus();
|
|
133
153
|
};
|
|
134
154
|
e.input.addEventListener("focus", () => o()), e.input.addEventListener("input", () => {
|
|
135
155
|
let t = e.input.value;
|
|
136
|
-
if (e.clear && (e.clear.hidden = !t),
|
|
156
|
+
if (e.clear && (e.clear.hidden = !t), i() || o(), this._remote) {
|
|
137
157
|
if (this._renderOptions(t), t.trim().length < this._minChars) return;
|
|
138
158
|
clearTimeout(this._timer), this._timer = setTimeout(() => {
|
|
139
159
|
this.dispatchEvent(new CustomEvent("search", {
|
|
@@ -143,26 +163,26 @@ var e = class extends HTMLElement {
|
|
|
143
163
|
}, this._debounceMs);
|
|
144
164
|
} else this._renderOptions(t);
|
|
145
165
|
}), e.input.addEventListener("keydown", (e) => {
|
|
146
|
-
let t =
|
|
147
|
-
e.key === "ArrowDown" ? (e.preventDefault(),
|
|
166
|
+
let t = n();
|
|
167
|
+
e.key === "ArrowDown" ? (e.preventDefault(), i() || o(), r(Math.min(this._active + 1, t.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), r(Math.max(this._active - 1, 0))) : e.key === "Enter" ? t[this._active] && (e.preventDefault(), c(t[this._active])) : e.key === "Escape" && s();
|
|
148
168
|
}), e.optionsWrap.addEventListener("click", (e) => {
|
|
149
169
|
let t = e.target.closest(".search-select-option");
|
|
150
170
|
t && c(t);
|
|
151
171
|
}), e.optionsWrap.addEventListener("mousemove", (e) => {
|
|
152
172
|
let t = e.target.closest(".search-select-option");
|
|
153
|
-
t &&
|
|
173
|
+
t && r(this._optionEls().indexOf(t));
|
|
154
174
|
}), e.clear?.addEventListener("click", () => {
|
|
155
175
|
this._value = "", this._label = "", this._internals?.setFormValue(""), e.input.value = "", e.clear.hidden = !0, this._renderOptions(""), this.dispatchEvent(new Event("change", { bubbles: !0 })), e.input.focus();
|
|
156
176
|
}), this._onDocClick = (e) => {
|
|
157
|
-
|
|
177
|
+
i() && !this.contains(e.target) && s();
|
|
158
178
|
}, document.addEventListener("click", this._onDocClick), window.addEventListener("resize", () => {
|
|
159
|
-
|
|
179
|
+
i() && t();
|
|
160
180
|
});
|
|
161
181
|
}
|
|
162
182
|
disconnectedCallback() {
|
|
163
183
|
this._onDocClick && document.removeEventListener("click", this._onDocClick), clearTimeout(this._timer);
|
|
164
184
|
}
|
|
165
|
-
},
|
|
185
|
+
}, i = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), a = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), o = [
|
|
166
186
|
"January",
|
|
167
187
|
"February",
|
|
168
188
|
"March",
|
|
@@ -175,7 +195,7 @@ var e = class extends HTMLElement {
|
|
|
175
195
|
"October",
|
|
176
196
|
"November",
|
|
177
197
|
"December"
|
|
178
|
-
],
|
|
198
|
+
], s = [
|
|
179
199
|
"Su",
|
|
180
200
|
"Mo",
|
|
181
201
|
"Tu",
|
|
@@ -183,17 +203,17 @@ var e = class extends HTMLElement {
|
|
|
183
203
|
"Th",
|
|
184
204
|
"Fr",
|
|
185
205
|
"Sa"
|
|
186
|
-
],
|
|
206
|
+
], c = (e) => String(e).padStart(2, "0"), l = (e, t, n) => `${e}-${c(t + 1)}-${c(n)}`, u = (e) => {
|
|
187
207
|
let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e || "");
|
|
188
208
|
return t ? {
|
|
189
209
|
y: +t[1],
|
|
190
210
|
m: t[2] - 1,
|
|
191
211
|
d: +t[3]
|
|
192
212
|
} : null;
|
|
193
|
-
},
|
|
194
|
-
let t =
|
|
195
|
-
return t ? `${
|
|
196
|
-
},
|
|
213
|
+
}, d = (e) => {
|
|
214
|
+
let t = u(e);
|
|
215
|
+
return t ? `${c(t.d)} ${o[t.m].slice(0, 3)} ${t.y}` : "";
|
|
216
|
+
}, f = class extends HTMLElement {
|
|
197
217
|
static formAssociated = !0;
|
|
198
218
|
static get observedAttributes() {
|
|
199
219
|
return [
|
|
@@ -223,11 +243,11 @@ var e = class extends HTMLElement {
|
|
|
223
243
|
}
|
|
224
244
|
render() {
|
|
225
245
|
this._value = this.getAttribute("value") || this._value;
|
|
226
|
-
let e = this.getAttribute("placeholder") || "Enter Date", t =
|
|
246
|
+
let e = this.getAttribute("placeholder") || "Enter Date", t = u(this._value);
|
|
227
247
|
t && (this._viewY = t.y, this._viewM = t.m), this.innerHTML = `
|
|
228
248
|
<div class="datepicker">
|
|
229
249
|
<button type="button" class="input datepicker-trigger" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
230
|
-
<span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ?
|
|
250
|
+
<span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? d(this._value) : e}</span>
|
|
231
251
|
<i class="bi bi-calendar3" aria-hidden="true"></i>
|
|
232
252
|
</button>
|
|
233
253
|
<div class="datepicker-pop" role="dialog" hidden></div>
|
|
@@ -239,26 +259,26 @@ var e = class extends HTMLElement {
|
|
|
239
259
|
_syncTrigger() {
|
|
240
260
|
let e = this.querySelector("[data-trigger-label]");
|
|
241
261
|
if (!e) return;
|
|
242
|
-
let t =
|
|
243
|
-
e.textContent = t ?
|
|
262
|
+
let t = u(this._value);
|
|
263
|
+
e.textContent = t ? d(this._value) : this.getAttribute("placeholder") || "Enter Date", e.classList.toggle("search-select-placeholder", !t);
|
|
244
264
|
}
|
|
245
265
|
_renderMonth() {
|
|
246
|
-
let e = this.querySelector(".datepicker-pop"), t = new Date(this._viewY, this._viewM, 1).getDay(), n = new Date(this._viewY, this._viewM + 1, 0).getDate(),
|
|
266
|
+
let e = this.querySelector(".datepicker-pop"), t = new Date(this._viewY, this._viewM, 1).getDay(), n = new Date(this._viewY, this._viewM + 1, 0).getDate(), r = u(this._value), i = u(this.getAttribute("min")), a = u(this.getAttribute("max")), c = (e, t, n) => {
|
|
247
267
|
let r = new Date(e, t, n).getTime();
|
|
248
|
-
return !!(
|
|
268
|
+
return !!(i && r < new Date(i.y, i.m, i.d).getTime() || a && r > new Date(a.y, a.m, a.d).getTime());
|
|
249
269
|
}, d = "";
|
|
250
270
|
for (let e = 0; e < t; e++) d += "<span class=\"datepicker-day is-outside\"></span>";
|
|
251
271
|
for (let e = 1; e <= n; e++) {
|
|
252
|
-
let t =
|
|
253
|
-
d += `<button type="button" class="datepicker-day${n ? " selected" : ""}" data-iso="${t}"${
|
|
272
|
+
let t = l(this._viewY, this._viewM, e), n = r && r.y === this._viewY && r.m === this._viewM && r.d === e, i = c(this._viewY, this._viewM, e);
|
|
273
|
+
d += `<button type="button" class="datepicker-day${n ? " selected" : ""}" data-iso="${t}"${i ? " disabled" : ""}>${e}</button>`;
|
|
254
274
|
}
|
|
255
275
|
e.innerHTML = `
|
|
256
276
|
<div class="datepicker-head">
|
|
257
277
|
<button type="button" class="datepicker-nav-btn" data-nav="-1" aria-label="Previous month"><i class="bi bi-chevron-left" aria-hidden="true"></i></button>
|
|
258
|
-
<span class="datepicker-month">${
|
|
278
|
+
<span class="datepicker-month">${o[this._viewM]} ${this._viewY}</span>
|
|
259
279
|
<button type="button" class="datepicker-nav-btn" data-nav="1" aria-label="Next month"><i class="bi bi-chevron-right" aria-hidden="true"></i></button>
|
|
260
280
|
</div>
|
|
261
|
-
<div class="datepicker-weekdays">${
|
|
281
|
+
<div class="datepicker-weekdays">${s.map((e) => `<span>${e}</span>`).join("")}</div>
|
|
262
282
|
<div class="datepicker-grid">${d}</div>
|
|
263
283
|
<div class="datepicker-foot"><button type="button" class="datepicker-link" data-clear>Clear</button></div>`;
|
|
264
284
|
}
|
|
@@ -291,7 +311,7 @@ var e = class extends HTMLElement {
|
|
|
291
311
|
disconnectedCallback() {
|
|
292
312
|
this._onDocClick && document.removeEventListener("click", this._onDocClick);
|
|
293
313
|
}
|
|
294
|
-
},
|
|
314
|
+
}, p = class extends HTMLElement {
|
|
295
315
|
static formAssociated = !0;
|
|
296
316
|
static get observedAttributes() {
|
|
297
317
|
return [
|
|
@@ -354,7 +374,7 @@ var e = class extends HTMLElement {
|
|
|
354
374
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
355
375
|
</div>
|
|
356
376
|
<div class="search-select-menu search-select-menu-fixed" role="listbox" aria-multiselectable="true" tabindex="-1" hidden>
|
|
357
|
-
${e ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${
|
|
377
|
+
${e ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${m(t)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>` : ""}
|
|
358
378
|
<div class="search-select-options"></div>
|
|
359
379
|
<div class="search-select-empty" hidden>No matches</div>
|
|
360
380
|
</div>
|
|
@@ -365,18 +385,18 @@ var e = class extends HTMLElement {
|
|
|
365
385
|
if (!e) return;
|
|
366
386
|
let t = this.getAttribute("placeholder") || "Select…";
|
|
367
387
|
if (!this._values.length) {
|
|
368
|
-
e.innerHTML = `<span class="search-select-placeholder">${
|
|
388
|
+
e.innerHTML = `<span class="search-select-placeholder">${h(t)}</span>`;
|
|
369
389
|
return;
|
|
370
390
|
}
|
|
371
|
-
e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${this._labelFor(e)}</span><button type="button" class="chip-remove" data-remove="${
|
|
391
|
+
e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${this._labelFor(e)}</span><button type="button" class="chip-remove" data-remove="${m(e)}" aria-label="Remove"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join("");
|
|
372
392
|
}
|
|
373
393
|
_renderOptions(e) {
|
|
374
394
|
let t = this.querySelector(".search-select-options"), n = this.querySelector(".search-select-empty");
|
|
375
395
|
if (!t) return;
|
|
376
396
|
let r = (e || "").trim().toLowerCase(), i = this._readOptions();
|
|
377
|
-
r && (i = i.filter((e) =>
|
|
397
|
+
r && (i = i.filter((e) => g(e.label).toLowerCase().includes(r))), t.innerHTML = i.map((e) => {
|
|
378
398
|
let t = this._values.includes(String(e.value));
|
|
379
|
-
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${
|
|
399
|
+
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${m(e.value)}" aria-selected="${t}"><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span><span class="ms-opt-label">${e.label}</span></button>`;
|
|
380
400
|
}).join(""), n && (n.hidden = i.length > 0), this._active = -1;
|
|
381
401
|
}
|
|
382
402
|
_wire() {
|
|
@@ -433,7 +453,7 @@ var e = class extends HTMLElement {
|
|
|
433
453
|
disconnectedCallback() {
|
|
434
454
|
this._onDocClick && document.removeEventListener("click", this._onDocClick);
|
|
435
455
|
}
|
|
436
|
-
},
|
|
456
|
+
}, m = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), h = (e) => String(e ?? "").replace(/&/g, "&").replace(/</g, "<"), g = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), _ = [
|
|
437
457
|
[
|
|
438
458
|
"AF",
|
|
439
459
|
"Afghanistan",
|
|
@@ -1659,11 +1679,11 @@ var e = class extends HTMLElement {
|
|
|
1659
1679
|
"Zimbabwe",
|
|
1660
1680
|
"263"
|
|
1661
1681
|
]
|
|
1662
|
-
],
|
|
1682
|
+
], v = (e) => (_.find((t) => t[0] === e) || [
|
|
1663
1683
|
"",
|
|
1664
1684
|
"",
|
|
1665
1685
|
""
|
|
1666
|
-
])[2],
|
|
1686
|
+
])[2], y = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, b = class extends HTMLElement {
|
|
1667
1687
|
static formAssociated = !0;
|
|
1668
1688
|
static get observedAttributes() {
|
|
1669
1689
|
return [
|
|
@@ -1683,7 +1703,7 @@ var e = class extends HTMLElement {
|
|
|
1683
1703
|
this._rendered && (e === "country" && (this._country = n || "IN"), this.render());
|
|
1684
1704
|
}
|
|
1685
1705
|
get value() {
|
|
1686
|
-
return `+${
|
|
1706
|
+
return `+${v(this._country)}${this._national}`;
|
|
1687
1707
|
}
|
|
1688
1708
|
set value(e) {
|
|
1689
1709
|
this._national = String(e ?? "").replace(/[^0-9]/g, ""), this._commit();
|
|
@@ -1694,21 +1714,21 @@ var e = class extends HTMLElement {
|
|
|
1694
1714
|
render() {
|
|
1695
1715
|
let e = this.getAttribute("placeholder") || "Enter phone number";
|
|
1696
1716
|
this._country = this.getAttribute("country") || this._country;
|
|
1697
|
-
let t =
|
|
1717
|
+
let t = _.map(([e, t, n]) => `<button type="button" role="option" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}"><span class="${y(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join("");
|
|
1698
1718
|
this.innerHTML = `
|
|
1699
1719
|
<div class="phone-input-wrap">
|
|
1700
1720
|
<div class="phone-country-adornment">
|
|
1701
1721
|
<button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
1702
|
-
<span class="${
|
|
1722
|
+
<span class="${y(this._country)}" data-flag aria-hidden="true"></span>
|
|
1703
1723
|
<i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
|
|
1704
|
-
<span class="phone-dial" data-dial>+${
|
|
1724
|
+
<span class="phone-dial" data-dial>+${v(this._country)}</span>
|
|
1705
1725
|
</button>
|
|
1706
1726
|
<div class="country-dropdown-menu" role="listbox" hidden>
|
|
1707
1727
|
<div class="dropdown-search-wrapper"><span class="dropdown-search-icon"><i class="bi bi-search" aria-hidden="true"></i></span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" /></div>
|
|
1708
1728
|
<div class="country-list-scroll">${t}<div class="country-empty" hidden>No countries found</div></div>
|
|
1709
1729
|
</div>
|
|
1710
1730
|
</div>
|
|
1711
|
-
<input type="tel" class="input" placeholder="${
|
|
1731
|
+
<input type="tel" class="input" placeholder="${x(e)}" value="${x(this._national)}"${this.hasAttribute("disabled") ? " disabled" : ""} />
|
|
1712
1732
|
</div>`, this._rendered = !0, this._wire();
|
|
1713
1733
|
}
|
|
1714
1734
|
_wire() {
|
|
@@ -1733,7 +1753,7 @@ var e = class extends HTMLElement {
|
|
|
1733
1753
|
}
|
|
1734
1754
|
i && (i.hidden = n > 0);
|
|
1735
1755
|
}, p = (e) => {
|
|
1736
|
-
this._country = e, this.setAttribute("country", e), o && (o.className =
|
|
1756
|
+
this._country = e, this.setAttribute("country", e), o && (o.className = y(e)), s && (s.textContent = `+${v(e)}`);
|
|
1737
1757
|
for (let t of r.querySelectorAll(".country-dropdown-item")) t.classList.toggle("selected", t.dataset.iso === e);
|
|
1738
1758
|
d(), this._commit();
|
|
1739
1759
|
};
|
|
@@ -1749,7 +1769,7 @@ var e = class extends HTMLElement {
|
|
|
1749
1769
|
disconnectedCallback() {
|
|
1750
1770
|
this._reposition && (window.removeEventListener("scroll", this._reposition, !0), window.removeEventListener("resize", this._reposition)), this._onDocClick && document.removeEventListener("click", this._onDocClick);
|
|
1751
1771
|
}
|
|
1752
|
-
},
|
|
1772
|
+
}, x = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), S = class extends HTMLElement {
|
|
1753
1773
|
static formAssociated = !0;
|
|
1754
1774
|
static get observedAttributes() {
|
|
1755
1775
|
return [
|
|
@@ -1800,7 +1820,7 @@ var e = class extends HTMLElement {
|
|
|
1800
1820
|
i && (this._value = String(i.value)), this._internals?.setFormValue(this._value);
|
|
1801
1821
|
let a = e.map((e) => {
|
|
1802
1822
|
let t = String(e.value) === String(this._value);
|
|
1803
|
-
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${
|
|
1823
|
+
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${C(e.value)}" aria-selected="${t}">${e.label}</button>`;
|
|
1804
1824
|
}).join("");
|
|
1805
1825
|
this.innerHTML = `
|
|
1806
1826
|
<div class="search-select${this.hasAttribute("compact") ? " search-select-compact" : ""}">
|
|
@@ -1809,7 +1829,7 @@ var e = class extends HTMLElement {
|
|
|
1809
1829
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
1810
1830
|
</button>
|
|
1811
1831
|
<div class="search-select-menu search-select-menu-fixed" role="listbox" tabindex="-1" hidden>
|
|
1812
|
-
${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${
|
|
1832
|
+
${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${C(r)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>` : ""}
|
|
1813
1833
|
<div class="search-select-options">${a}<div class="search-select-empty" hidden>No matches</div></div>
|
|
1814
1834
|
</div>
|
|
1815
1835
|
</div>`, this._rendered = !0, this._wire();
|
|
@@ -1888,12 +1908,55 @@ var e = class extends HTMLElement {
|
|
|
1888
1908
|
disconnectedCallback() {
|
|
1889
1909
|
this._onDocClick && document.removeEventListener("click", this._onDocClick);
|
|
1890
1910
|
}
|
|
1891
|
-
},
|
|
1911
|
+
}, C = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), w = "image/png,image/jpeg,image/webp", T = 5, E = {
|
|
1912
|
+
"image/png": [".png"],
|
|
1913
|
+
"image/jpeg": [".jpg", ".jpeg"],
|
|
1914
|
+
"image/webp": [".webp"],
|
|
1915
|
+
"image/gif": [".gif"],
|
|
1916
|
+
"image/svg+xml": [".svg"],
|
|
1917
|
+
"application/pdf": [".pdf"]
|
|
1918
|
+
}, D = {
|
|
1919
|
+
"image/png": "PNG",
|
|
1920
|
+
"image/jpeg": "JPG",
|
|
1921
|
+
"image/webp": "WEBP",
|
|
1922
|
+
"image/gif": "GIF",
|
|
1923
|
+
"image/svg+xml": "SVG",
|
|
1924
|
+
"application/pdf": "PDF",
|
|
1925
|
+
".png": "PNG",
|
|
1926
|
+
".jpg": "JPG",
|
|
1927
|
+
".jpeg": "JPG",
|
|
1928
|
+
".webp": "WEBP",
|
|
1929
|
+
".gif": "GIF",
|
|
1930
|
+
".svg": "SVG",
|
|
1931
|
+
".pdf": "PDF"
|
|
1932
|
+
}, O = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
|
|
1933
|
+
function k(e) {
|
|
1934
|
+
let t = [];
|
|
1935
|
+
for (let n of O(e)) {
|
|
1936
|
+
let e = D[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
|
|
1937
|
+
t.includes(e) || t.push(e);
|
|
1938
|
+
}
|
|
1939
|
+
return t.length <= 1 ? t[0] || "supported" : `${t.slice(0, -1).join(", ")} or ${t[t.length - 1]}`;
|
|
1940
|
+
}
|
|
1941
|
+
function A(e, t) {
|
|
1942
|
+
let n = O(t);
|
|
1943
|
+
if (!n.length) return !0;
|
|
1944
|
+
let r = (e.type || "").toLowerCase(), i = (e.name || "").toLowerCase();
|
|
1945
|
+
return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (E[e] || []).some((e) => i.endsWith(e)));
|
|
1946
|
+
}
|
|
1947
|
+
function j(e, t = {}) {
|
|
1948
|
+
if (!e) return null;
|
|
1949
|
+
let n = t.accept === void 0 ? w : t.accept, r = t.maxSizeMb || 5;
|
|
1950
|
+
return A(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${k(n)} file.`;
|
|
1951
|
+
}
|
|
1952
|
+
//#endregion
|
|
1953
|
+
//#region src/index.js
|
|
1954
|
+
var M = (e, t) => {
|
|
1892
1955
|
typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
|
|
1893
1956
|
};
|
|
1894
|
-
function
|
|
1895
|
-
|
|
1957
|
+
function N() {
|
|
1958
|
+
M("wui-select", S), M("wui-phone", b), M("wui-datepicker", f), M("wui-autocomplete", r), M("wui-multiselect", p), M("wui-status-icon", n);
|
|
1896
1959
|
}
|
|
1897
|
-
|
|
1960
|
+
N();
|
|
1898
1961
|
//#endregion
|
|
1899
|
-
export {
|
|
1962
|
+
export { w as DEFAULT_IMAGE_ACCEPT, T as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, r as WuiAutocomplete, f as WuiDatePicker, p as WuiMultiSelect, b as WuiPhone, S as WuiSelect, n as WuiStatusIcon, k as acceptLabel, N as defineWeborityElements, A as matchesAccept, j as validateFile };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webority/ui-elements",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "Webority framework-agnostic UI custom elements (<wui-*>) — the single implementation of the interactive components, styled by @webority/theme. Used natively in Razor and wrapped by @webority/ui-react.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"type": "module",
|
|
@@ -30,6 +30,6 @@
|
|
|
30
30
|
"vite": "^8.0.12"
|
|
31
31
|
},
|
|
32
32
|
"scripts": {
|
|
33
|
-
"build": "vite build"
|
|
33
|
+
"build": "vite build && node ../../scripts/sync-rcl-assets.mjs elements"
|
|
34
34
|
}
|
|
35
35
|
}
|