@webority/ui-elements 0.2.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 +157 -74
- 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();
|
|
@@ -50,18 +70,25 @@ var e = class extends HTMLElement {
|
|
|
50
70
|
let e = Number(this.getAttribute("debounce"));
|
|
51
71
|
return Number.isFinite(e) && e >= 0 ? e : 250;
|
|
52
72
|
}
|
|
53
|
-
|
|
54
|
-
|
|
73
|
+
_snapshotDeclared() {
|
|
74
|
+
if (this._declared) return;
|
|
75
|
+
let e = [...this.querySelectorAll(":scope > wui-option")];
|
|
76
|
+
e.length && (this._declared = e.map((e) => ({
|
|
55
77
|
value: e.getAttribute("value") ?? e.textContent.trim(),
|
|
56
|
-
label: e.innerHTML
|
|
57
|
-
|
|
78
|
+
label: e.innerHTML,
|
|
79
|
+
selected: e.hasAttribute("selected")
|
|
80
|
+
})));
|
|
81
|
+
}
|
|
82
|
+
_readOptions() {
|
|
83
|
+
return this._optionsProp ? this._optionsProp : (this._snapshotDeclared(), this._declared || []);
|
|
58
84
|
}
|
|
59
85
|
render() {
|
|
86
|
+
this._snapshotDeclared();
|
|
60
87
|
let e = this.getAttribute("placeholder") || "Search…";
|
|
61
88
|
this.innerHTML = `
|
|
62
89
|
<div class="search-select">
|
|
63
90
|
<div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false">
|
|
64
|
-
<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" : ""} />
|
|
65
92
|
<span class="search-select-spinner spinner-border spinner-border-sm" role="status" aria-hidden="true" hidden></span>
|
|
66
93
|
<button type="button" class="search-select-clear" aria-label="Clear" hidden><i class="bi bi-x" aria-hidden="true"></i></button>
|
|
67
94
|
</div>
|
|
@@ -96,15 +123,15 @@ var e = class extends HTMLElement {
|
|
|
96
123
|
e && (e.hidden = !this._loading);
|
|
97
124
|
}
|
|
98
125
|
_renderOptions(e) {
|
|
99
|
-
let
|
|
100
|
-
if (!
|
|
101
|
-
let
|
|
102
|
-
!this._remote &&
|
|
103
|
-
let
|
|
104
|
-
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>`;
|
|
105
132
|
}).join(""), this._active = -1;
|
|
106
|
-
let o =
|
|
107
|
-
|
|
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);
|
|
108
135
|
}
|
|
109
136
|
_wire() {
|
|
110
137
|
let e = this._refs();
|
|
@@ -112,21 +139,21 @@ var e = class extends HTMLElement {
|
|
|
112
139
|
let t = () => {
|
|
113
140
|
let t = e.control.getBoundingClientRect();
|
|
114
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`;
|
|
115
|
-
},
|
|
116
|
-
let t =
|
|
142
|
+
}, n = () => this._optionEls().filter((e) => !e.hidden), r = (e) => {
|
|
143
|
+
let t = n();
|
|
117
144
|
this._active = e;
|
|
118
145
|
for (let e of this._optionEls()) e.classList.remove("is-active");
|
|
119
146
|
e >= 0 && t[e] && (t[e].classList.add("is-active"), t[e].scrollIntoView({ block: "nearest" }));
|
|
120
|
-
},
|
|
147
|
+
}, i = () => !e.menu.hidden, o = () => {
|
|
121
148
|
e.menu.hidden = !1, e.control.setAttribute("aria-expanded", "true"), e.control.classList.add("open"), t(), this._renderOptions();
|
|
122
149
|
}, s = () => {
|
|
123
|
-
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();
|
|
124
151
|
}, c = (t) => {
|
|
125
|
-
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();
|
|
126
153
|
};
|
|
127
154
|
e.input.addEventListener("focus", () => o()), e.input.addEventListener("input", () => {
|
|
128
155
|
let t = e.input.value;
|
|
129
|
-
if (e.clear && (e.clear.hidden = !t),
|
|
156
|
+
if (e.clear && (e.clear.hidden = !t), i() || o(), this._remote) {
|
|
130
157
|
if (this._renderOptions(t), t.trim().length < this._minChars) return;
|
|
131
158
|
clearTimeout(this._timer), this._timer = setTimeout(() => {
|
|
132
159
|
this.dispatchEvent(new CustomEvent("search", {
|
|
@@ -136,26 +163,26 @@ var e = class extends HTMLElement {
|
|
|
136
163
|
}, this._debounceMs);
|
|
137
164
|
} else this._renderOptions(t);
|
|
138
165
|
}), e.input.addEventListener("keydown", (e) => {
|
|
139
|
-
let t =
|
|
140
|
-
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();
|
|
141
168
|
}), e.optionsWrap.addEventListener("click", (e) => {
|
|
142
169
|
let t = e.target.closest(".search-select-option");
|
|
143
170
|
t && c(t);
|
|
144
171
|
}), e.optionsWrap.addEventListener("mousemove", (e) => {
|
|
145
172
|
let t = e.target.closest(".search-select-option");
|
|
146
|
-
t &&
|
|
173
|
+
t && r(this._optionEls().indexOf(t));
|
|
147
174
|
}), e.clear?.addEventListener("click", () => {
|
|
148
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();
|
|
149
176
|
}), this._onDocClick = (e) => {
|
|
150
|
-
|
|
177
|
+
i() && !this.contains(e.target) && s();
|
|
151
178
|
}, document.addEventListener("click", this._onDocClick), window.addEventListener("resize", () => {
|
|
152
|
-
|
|
179
|
+
i() && t();
|
|
153
180
|
});
|
|
154
181
|
}
|
|
155
182
|
disconnectedCallback() {
|
|
156
183
|
this._onDocClick && document.removeEventListener("click", this._onDocClick), clearTimeout(this._timer);
|
|
157
184
|
}
|
|
158
|
-
},
|
|
185
|
+
}, i = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), a = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), o = [
|
|
159
186
|
"January",
|
|
160
187
|
"February",
|
|
161
188
|
"March",
|
|
@@ -168,7 +195,7 @@ var e = class extends HTMLElement {
|
|
|
168
195
|
"October",
|
|
169
196
|
"November",
|
|
170
197
|
"December"
|
|
171
|
-
],
|
|
198
|
+
], s = [
|
|
172
199
|
"Su",
|
|
173
200
|
"Mo",
|
|
174
201
|
"Tu",
|
|
@@ -176,17 +203,17 @@ var e = class extends HTMLElement {
|
|
|
176
203
|
"Th",
|
|
177
204
|
"Fr",
|
|
178
205
|
"Sa"
|
|
179
|
-
],
|
|
206
|
+
], c = (e) => String(e).padStart(2, "0"), l = (e, t, n) => `${e}-${c(t + 1)}-${c(n)}`, u = (e) => {
|
|
180
207
|
let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e || "");
|
|
181
208
|
return t ? {
|
|
182
209
|
y: +t[1],
|
|
183
210
|
m: t[2] - 1,
|
|
184
211
|
d: +t[3]
|
|
185
212
|
} : null;
|
|
186
|
-
},
|
|
187
|
-
let t =
|
|
188
|
-
return t ? `${
|
|
189
|
-
},
|
|
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 {
|
|
190
217
|
static formAssociated = !0;
|
|
191
218
|
static get observedAttributes() {
|
|
192
219
|
return [
|
|
@@ -216,11 +243,11 @@ var e = class extends HTMLElement {
|
|
|
216
243
|
}
|
|
217
244
|
render() {
|
|
218
245
|
this._value = this.getAttribute("value") || this._value;
|
|
219
|
-
let e = this.getAttribute("placeholder") || "Enter Date", t =
|
|
246
|
+
let e = this.getAttribute("placeholder") || "Enter Date", t = u(this._value);
|
|
220
247
|
t && (this._viewY = t.y, this._viewM = t.m), this.innerHTML = `
|
|
221
248
|
<div class="datepicker">
|
|
222
249
|
<button type="button" class="input datepicker-trigger" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
223
|
-
<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>
|
|
224
251
|
<i class="bi bi-calendar3" aria-hidden="true"></i>
|
|
225
252
|
</button>
|
|
226
253
|
<div class="datepicker-pop" role="dialog" hidden></div>
|
|
@@ -232,26 +259,26 @@ var e = class extends HTMLElement {
|
|
|
232
259
|
_syncTrigger() {
|
|
233
260
|
let e = this.querySelector("[data-trigger-label]");
|
|
234
261
|
if (!e) return;
|
|
235
|
-
let t =
|
|
236
|
-
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);
|
|
237
264
|
}
|
|
238
265
|
_renderMonth() {
|
|
239
|
-
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) => {
|
|
240
267
|
let r = new Date(e, t, n).getTime();
|
|
241
|
-
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());
|
|
242
269
|
}, d = "";
|
|
243
270
|
for (let e = 0; e < t; e++) d += "<span class=\"datepicker-day is-outside\"></span>";
|
|
244
271
|
for (let e = 1; e <= n; e++) {
|
|
245
|
-
let t =
|
|
246
|
-
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>`;
|
|
247
274
|
}
|
|
248
275
|
e.innerHTML = `
|
|
249
276
|
<div class="datepicker-head">
|
|
250
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>
|
|
251
|
-
<span class="datepicker-month">${
|
|
278
|
+
<span class="datepicker-month">${o[this._viewM]} ${this._viewY}</span>
|
|
252
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>
|
|
253
280
|
</div>
|
|
254
|
-
<div class="datepicker-weekdays">${
|
|
281
|
+
<div class="datepicker-weekdays">${s.map((e) => `<span>${e}</span>`).join("")}</div>
|
|
255
282
|
<div class="datepicker-grid">${d}</div>
|
|
256
283
|
<div class="datepicker-foot"><button type="button" class="datepicker-link" data-clear>Clear</button></div>`;
|
|
257
284
|
}
|
|
@@ -284,7 +311,7 @@ var e = class extends HTMLElement {
|
|
|
284
311
|
disconnectedCallback() {
|
|
285
312
|
this._onDocClick && document.removeEventListener("click", this._onDocClick);
|
|
286
313
|
}
|
|
287
|
-
},
|
|
314
|
+
}, p = class extends HTMLElement {
|
|
288
315
|
static formAssociated = !0;
|
|
289
316
|
static get observedAttributes() {
|
|
290
317
|
return [
|
|
@@ -321,17 +348,24 @@ var e = class extends HTMLElement {
|
|
|
321
348
|
get options() {
|
|
322
349
|
return this._readOptions();
|
|
323
350
|
}
|
|
324
|
-
|
|
325
|
-
|
|
351
|
+
_snapshotDeclared() {
|
|
352
|
+
if (this._declared) return;
|
|
353
|
+
let e = [...this.querySelectorAll(":scope > wui-option")];
|
|
354
|
+
e.length && (this._declared = e.map((e) => ({
|
|
326
355
|
value: e.getAttribute("value") ?? e.textContent.trim(),
|
|
327
|
-
label: e.innerHTML
|
|
328
|
-
|
|
356
|
+
label: e.innerHTML,
|
|
357
|
+
selected: e.hasAttribute("selected")
|
|
358
|
+
})));
|
|
359
|
+
}
|
|
360
|
+
_readOptions() {
|
|
361
|
+
return this._optionsProp ? this._optionsProp : (this._snapshotDeclared(), this._declared || []);
|
|
329
362
|
}
|
|
330
363
|
_labelFor(e) {
|
|
331
364
|
let t = this._readOptions().find((t) => String(t.value) === String(e));
|
|
332
365
|
return t ? t.label : e;
|
|
333
366
|
}
|
|
334
367
|
render() {
|
|
368
|
+
this._snapshotDeclared();
|
|
335
369
|
let e = this.hasAttribute("searchable"), t = this.getAttribute("search-placeholder") || "Search…";
|
|
336
370
|
this._internals?.setFormValue(this._values.join(",")), this.innerHTML = `
|
|
337
371
|
<div class="search-select">
|
|
@@ -340,7 +374,7 @@ var e = class extends HTMLElement {
|
|
|
340
374
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
341
375
|
</div>
|
|
342
376
|
<div class="search-select-menu search-select-menu-fixed" role="listbox" aria-multiselectable="true" tabindex="-1" hidden>
|
|
343
|
-
${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>` : ""}
|
|
344
378
|
<div class="search-select-options"></div>
|
|
345
379
|
<div class="search-select-empty" hidden>No matches</div>
|
|
346
380
|
</div>
|
|
@@ -351,18 +385,18 @@ var e = class extends HTMLElement {
|
|
|
351
385
|
if (!e) return;
|
|
352
386
|
let t = this.getAttribute("placeholder") || "Select…";
|
|
353
387
|
if (!this._values.length) {
|
|
354
|
-
e.innerHTML = `<span class="search-select-placeholder">${
|
|
388
|
+
e.innerHTML = `<span class="search-select-placeholder">${h(t)}</span>`;
|
|
355
389
|
return;
|
|
356
390
|
}
|
|
357
|
-
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("");
|
|
358
392
|
}
|
|
359
393
|
_renderOptions(e) {
|
|
360
394
|
let t = this.querySelector(".search-select-options"), n = this.querySelector(".search-select-empty");
|
|
361
395
|
if (!t) return;
|
|
362
396
|
let r = (e || "").trim().toLowerCase(), i = this._readOptions();
|
|
363
|
-
r && (i = i.filter((e) =>
|
|
397
|
+
r && (i = i.filter((e) => g(e.label).toLowerCase().includes(r))), t.innerHTML = i.map((e) => {
|
|
364
398
|
let t = this._values.includes(String(e.value));
|
|
365
|
-
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>`;
|
|
366
400
|
}).join(""), n && (n.hidden = i.length > 0), this._active = -1;
|
|
367
401
|
}
|
|
368
402
|
_wire() {
|
|
@@ -419,7 +453,7 @@ var e = class extends HTMLElement {
|
|
|
419
453
|
disconnectedCallback() {
|
|
420
454
|
this._onDocClick && document.removeEventListener("click", this._onDocClick);
|
|
421
455
|
}
|
|
422
|
-
},
|
|
456
|
+
}, m = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), h = (e) => String(e ?? "").replace(/&/g, "&").replace(/</g, "<"), g = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), _ = [
|
|
423
457
|
[
|
|
424
458
|
"AF",
|
|
425
459
|
"Afghanistan",
|
|
@@ -1645,11 +1679,11 @@ var e = class extends HTMLElement {
|
|
|
1645
1679
|
"Zimbabwe",
|
|
1646
1680
|
"263"
|
|
1647
1681
|
]
|
|
1648
|
-
],
|
|
1682
|
+
], v = (e) => (_.find((t) => t[0] === e) || [
|
|
1649
1683
|
"",
|
|
1650
1684
|
"",
|
|
1651
1685
|
""
|
|
1652
|
-
])[2],
|
|
1686
|
+
])[2], y = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, b = class extends HTMLElement {
|
|
1653
1687
|
static formAssociated = !0;
|
|
1654
1688
|
static get observedAttributes() {
|
|
1655
1689
|
return [
|
|
@@ -1669,7 +1703,7 @@ var e = class extends HTMLElement {
|
|
|
1669
1703
|
this._rendered && (e === "country" && (this._country = n || "IN"), this.render());
|
|
1670
1704
|
}
|
|
1671
1705
|
get value() {
|
|
1672
|
-
return `+${
|
|
1706
|
+
return `+${v(this._country)}${this._national}`;
|
|
1673
1707
|
}
|
|
1674
1708
|
set value(e) {
|
|
1675
1709
|
this._national = String(e ?? "").replace(/[^0-9]/g, ""), this._commit();
|
|
@@ -1680,21 +1714,21 @@ var e = class extends HTMLElement {
|
|
|
1680
1714
|
render() {
|
|
1681
1715
|
let e = this.getAttribute("placeholder") || "Enter phone number";
|
|
1682
1716
|
this._country = this.getAttribute("country") || this._country;
|
|
1683
|
-
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("");
|
|
1684
1718
|
this.innerHTML = `
|
|
1685
1719
|
<div class="phone-input-wrap">
|
|
1686
1720
|
<div class="phone-country-adornment">
|
|
1687
1721
|
<button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
1688
|
-
<span class="${
|
|
1722
|
+
<span class="${y(this._country)}" data-flag aria-hidden="true"></span>
|
|
1689
1723
|
<i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
|
|
1690
|
-
<span class="phone-dial" data-dial>+${
|
|
1724
|
+
<span class="phone-dial" data-dial>+${v(this._country)}</span>
|
|
1691
1725
|
</button>
|
|
1692
1726
|
<div class="country-dropdown-menu" role="listbox" hidden>
|
|
1693
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>
|
|
1694
1728
|
<div class="country-list-scroll">${t}<div class="country-empty" hidden>No countries found</div></div>
|
|
1695
1729
|
</div>
|
|
1696
1730
|
</div>
|
|
1697
|
-
<input type="tel" class="input" placeholder="${
|
|
1731
|
+
<input type="tel" class="input" placeholder="${x(e)}" value="${x(this._national)}"${this.hasAttribute("disabled") ? " disabled" : ""} />
|
|
1698
1732
|
</div>`, this._rendered = !0, this._wire();
|
|
1699
1733
|
}
|
|
1700
1734
|
_wire() {
|
|
@@ -1719,7 +1753,7 @@ var e = class extends HTMLElement {
|
|
|
1719
1753
|
}
|
|
1720
1754
|
i && (i.hidden = n > 0);
|
|
1721
1755
|
}, p = (e) => {
|
|
1722
|
-
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)}`);
|
|
1723
1757
|
for (let t of r.querySelectorAll(".country-dropdown-item")) t.classList.toggle("selected", t.dataset.iso === e);
|
|
1724
1758
|
d(), this._commit();
|
|
1725
1759
|
};
|
|
@@ -1735,7 +1769,7 @@ var e = class extends HTMLElement {
|
|
|
1735
1769
|
disconnectedCallback() {
|
|
1736
1770
|
this._reposition && (window.removeEventListener("scroll", this._reposition, !0), window.removeEventListener("resize", this._reposition)), this._onDocClick && document.removeEventListener("click", this._onDocClick);
|
|
1737
1771
|
}
|
|
1738
|
-
},
|
|
1772
|
+
}, x = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), S = class extends HTMLElement {
|
|
1739
1773
|
static formAssociated = !0;
|
|
1740
1774
|
static get observedAttributes() {
|
|
1741
1775
|
return [
|
|
@@ -1768,19 +1802,25 @@ var e = class extends HTMLElement {
|
|
|
1768
1802
|
get options() {
|
|
1769
1803
|
return this._readOptions();
|
|
1770
1804
|
}
|
|
1771
|
-
|
|
1772
|
-
|
|
1805
|
+
_snapshotDeclared() {
|
|
1806
|
+
if (this._declared) return;
|
|
1807
|
+
let e = [...this.querySelectorAll(":scope > wui-option")];
|
|
1808
|
+
e.length && (this._declared = e.map((e) => ({
|
|
1773
1809
|
value: e.getAttribute("value") ?? e.textContent.trim(),
|
|
1774
1810
|
label: e.innerHTML,
|
|
1775
1811
|
selected: e.hasAttribute("selected")
|
|
1776
|
-
}));
|
|
1812
|
+
})));
|
|
1813
|
+
}
|
|
1814
|
+
_readOptions() {
|
|
1815
|
+
return this._optionsProp ? this._optionsProp : (this._snapshotDeclared(), this._declared || []);
|
|
1777
1816
|
}
|
|
1778
1817
|
render() {
|
|
1818
|
+
this._snapshotDeclared();
|
|
1779
1819
|
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);
|
|
1780
1820
|
i && (this._value = String(i.value)), this._internals?.setFormValue(this._value);
|
|
1781
1821
|
let a = e.map((e) => {
|
|
1782
1822
|
let t = String(e.value) === String(this._value);
|
|
1783
|
-
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>`;
|
|
1784
1824
|
}).join("");
|
|
1785
1825
|
this.innerHTML = `
|
|
1786
1826
|
<div class="search-select${this.hasAttribute("compact") ? " search-select-compact" : ""}">
|
|
@@ -1789,7 +1829,7 @@ var e = class extends HTMLElement {
|
|
|
1789
1829
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
1790
1830
|
</button>
|
|
1791
1831
|
<div class="search-select-menu search-select-menu-fixed" role="listbox" tabindex="-1" hidden>
|
|
1792
|
-
${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>` : ""}
|
|
1793
1833
|
<div class="search-select-options">${a}<div class="search-select-empty" hidden>No matches</div></div>
|
|
1794
1834
|
</div>
|
|
1795
1835
|
</div>`, this._rendered = !0, this._wire();
|
|
@@ -1868,12 +1908,55 @@ var e = class extends HTMLElement {
|
|
|
1868
1908
|
disconnectedCallback() {
|
|
1869
1909
|
this._onDocClick && document.removeEventListener("click", this._onDocClick);
|
|
1870
1910
|
}
|
|
1871
|
-
},
|
|
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) => {
|
|
1872
1955
|
typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
|
|
1873
1956
|
};
|
|
1874
|
-
function
|
|
1875
|
-
|
|
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);
|
|
1876
1959
|
}
|
|
1877
|
-
|
|
1960
|
+
N();
|
|
1878
1961
|
//#endregion
|
|
1879
|
-
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
|
}
|