UNPKG

monphind-ui

Version:

A reactive component library built on top of the Web Components API

monphind.micropue.com.cn

Micropue/monphind-ui

154 lines • 79.4 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
var monphind=function(o){"use strict" const t=":host{\n -moz-user-select: none;\n user-select: none;\n -webkit-user-select: none;\n -webkit-tap-highlight-color: transparent;\n font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n line-height: normal;\n}",e=(o,e)=>{try{!function(o){const e=new CSSStyleSheet e.replaceSync(t),o.adoptedStyleSheets.push(e)}(o) const n=new CSSStyleSheet n.replaceSync(e??""),o.adoptedStyleSheets.push(n)}catch{const n=document.createElement("style") n.textContent=t+"\n"+e,o.insertBefore(n,o.firstChild)}},n=o=>{class t extends HTMLElement{static observedAttributes=Object.keys(o.props||{}) static defineElement(){customElements.define(o.name,this)}#o={} #t=(()=>{const t={} for(const e in o.props)t[e]=typeof o.props[e] return t})() constructor(){super() const t=this.attachShadow({mode:"open"}) t.innerHTML=o.template??"",e(t,o.style) const{props:n}=o||{props:{}} this.#o={...n} for(const t in n)Object.defineProperty(this,t,{get:()=>this.#o?.[t],set:e=>{const n=this.getAttribute(t) let r switch(this.#t[t]){case"number":r=Number(e) break case"boolean":r="true"==e break default:r=String(e)}if(this.#o[t]!=e&&(this.#o[t]=r,o?.dispatch?.propChanged?.call?.(this,t,e)),n==e)return const l=t.toLowerCase() o.syncProps?.includes(t)&&this.setAttribute(l,e)}}) const r=o?.setup?.call(this,t)||{} for(const o in r)Object.defineProperty(this,o,{get:()=>r[o]})}connectedCallback(){o.dispatch?.connected?.call(this)}disconnectedCallback(){o.dispatch?.disconnected?.call(this)}attributeChangedCallback(o,t,e){this[o]=e??""}}return t},r={type:"",disabled:!1,value:""} class l extends(n({name:"m-button",template:'<slot name="start"></slot>\n <slot></slot>\n<slot name="end"></slot>',style:":host {\n min-width:85px;\n height:40px;\n box-sizing: border-box;\n padding:10px;\n border-radius: 14px;\n background-color: var(--m-button-default-backgroundColor,white);\n display: inline-flex;\n align-items: center;\n justify-content:center;\n font-size: 0.85em;\n transition: transform 0.2s, box-shadow 0.4s, background-color 0.3s, color 0.3s;\n color: var(--m-button-default-textColor,black);\n vertical-align:middle;\n}\n::slotted(m-icon[slot=start]),::slotted(m-circular-progress[slot=start]) , ::slotted(svg[slot=start]) {\n color:currentColor;\n fill:currentColor;\n width: 20px;\n height: 20px;\n display:initial;\n}\n::slotted(m-icon[slot=end]) ,::slotted(m-circular-progress[slot=end]) , ::slotted(svg[slot=end]) {\n color:currentColor;\n fill:currentColor;\n width: 20px;\n height: 20px;\n display:initial;\n}\n::slotted([slot=start]){\n margin-right:10px;\n}\n::slotted([slot=end]){\n margin-left:10px;\n}\n:host(:not([disabled=true]):hover) {\n transform: translateY(-2px);\n cursor: pointer;\n box-shadow: 0px 4px 30px var(--m-button-default-hover-boxShadowColor,rgba(70,70,70,0.237));\n}\n:host(:not([disabled=true]):active) {\n transform: scale(0.95);\n cursor: pointer;\n box-shadow: 0px 4px 30px var(--m-button-default-active-boxShadowColor,#2ea1f9d6);\n background-color: var(--m-button-default-active-backgroundColor,#2EA2F9);\n color: var(--m-button-default-active-textColor,white);\n}\n:host([disabled=true]) {\n background-color: var(--m-button-default-disabled-backgroundColor,#EFEFEF);\n color: var(--m-button-default-disabled-textColor,#BABABA);\n}\n:host([type=outlined]) {\n background-color: transparent;\n border: 1.5px solid var(--m-button-outlined-borderColor,#2EA2F9);\n transition: border 0.2s, background-color 0.2s, filter 0.2s;\n color: var(--m-button-outlined-textColor,#2EA2F9);\n}\n:host([type=outlined]:not([disabled=true]):hover) {\n box-shadow: none;\n background-color: var(--m-button-outlined-hover-backgroundColor,#2EA2F9);\n color: var(--m-button-outlined-hover-textColor,white);\n transform: none;\n}\n:host([type=outlined]:not([disabled=true]):active) {\n filter:brightness(90%);\n}\n:host([type=outlined][disabled=true]) {\n border: 1.5px solid var(--m-button-outlined-disabled-borderColor,#EFEFEF);\n color: var(--m-button-outlined-disabled-textColor,#BABABA);\n}\n:host([type=text]) {\n background-color: transparent;\n transition: background-color 0.2s, color 0.2s;\n color: var(--m-button-text-textColor,black);\n}\n:host([type=text]:not([disabled=true]):hover) {\n box-shadow: none;\n transform: none;\n background-color: var(--m-button-text-hover-backgroundColor,#EFEFEF);\n}\n:host([type=text]:not([disabled=true]):active) {\n background-color: var(--m-button-text-active-backgroundColor,#2EA2F9);\n}\n:host([type=text][disabled=true]) {\n color: var(--m-button-outlined-disabled-textColor,#BABABA);\n}\n:host([type=filled]){\n background-color:var(--m-button-filled-backgroundColor,#2EA2F9);\n color:var(--m-button-filled-textColor,white);\n transition:all 0.2s;\n}\n:host([type=filled]:hover){\n transform:none;\n box-shadow:none;\n filter:brightness(95%);\n}\n:host([type=filled][disabled=true]){\n background-color:var(--m-button-filled-disabled-backgroundColor,#EFEFEF);\n color:var(--m-button-filled-disabled-textColor,#BABABA);\n}\n:host([type=filled]:active){\n filter:brightness(90%);\n}\n:host([disabled=true]){\n pointer-events:none;\n}",syncProps:["disabled","type","value"],dispatch:{propChanged(o,t){"value"===o&&(this.innerText=String(t))}},props:r})){}l.defineElement() const a={search:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"></path></svg>',home:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"></path></svg>',menu:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"></path></svg>',close:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"></path></svg>',settings:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"></path></svg>',done:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"></path></svg>',favorite:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z"></path></svg>',add:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"></path></svg>',delete:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"></path></svg>',star:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m354-287 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143ZM233-120l65-281L80-590l288-25 112-265 112 265 288 25-218 189 65 281-247-149-247 149Zm247-350Z"></path></svg>',arrow_back:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"></path></svg>',arrow_forward:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"></path></svg>',arrow_upward:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M440-160v-487L216-423l-56-57 320-320 320 320-56 57-224-224v487h-80Z"></path></svg>',array_downward:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M440-800v487L216-537l-56 57 320 320 320-320-56-57-224 224v-487h-80Z"></path></svg>',refresh:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"></path></svg>',more:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400Z"></path></svg>',download:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>',upload:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M440-320v-326L336-542l-56-58 200-200 200 200-56 58-104-104v326h-80ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>',token:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M480-80 120-280v-400l360-200 360 200v400L480-80ZM364-590q23-24 53-37t63-13q33 0 63 13t53 37l120-67-236-131-236 131 120 67Zm76 396v-131q-54-14-87-57t-33-98q0-11 1-20.5t4-19.5l-125-70v263l240 133Zm40-206q33 0 56.5-23.5T560-480q0-33-23.5-56.5T480-560q-33 0-56.5 23.5T400-480q0 33 23.5 56.5T480-400Zm40 206 240-133v-263l-125 70q3 10 4 19.5t1 20.5q0 55-33 98t-87 57v131Z"></path></svg>',user:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M560-680v-80h320v80H560Zm0 160v-80h320v80H560Zm0 160v-80h320v80H560Zm-240-40q-50 0-85-35t-35-85q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35ZM80-160v-76q0-21 10-40t28-30q45-27 95.5-40.5T320-360q56 0 106.5 13.5T522-306q18 11 28 30t10 40v76H80Zm86-80h308q-35-20-74-30t-80-10q-41 0-80 10t-74 30Zm154-240q17 0 28.5-11.5T360-520q0-17-11.5-28.5T320-560q-17 0-28.5 11.5T280-520q0 17 11.5 28.5T320-480Zm0-40Zm0 280Z"></path></svg>',password:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M80-200v-80h800v80H80Zm46-242-52-30 34-60H40v-60h68l-34-58 52-30 34 58 34-58 52 30-34 58h68v60h-68l34 60-52 30-34-60-34 60Zm320 0-52-30 34-60h-68v-60h68l-34-58 52-30 34 58 34-58 52 30-34 58h68v60h-68l34 60-52 30-34-60-34 60Zm320 0-52-30 34-60h-68v-60h68l-34-58 52-30 34 58 34-58 52 30-34 58h68v60h-68l34 60-52 30-34-60-34 60Z"></path></svg>',mail:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z"></path></svg>',github:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9 23.5 23.2 38.1 55.4 38.1 91v112.5c0.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"></path></svg>',sun:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M440-760v-160h80v160h-80Zm266 110-55-55 112-115 56 57-113 113Zm54 210v-80h160v80H760ZM440-40v-160h80v160h-80ZM254-652 140-763l57-56 113 113-56 54Zm508 512L651-255l54-54 114 110-57 59ZM40-440v-80h160v80H40Zm157 300-56-57 112-112 29 27 29 28-114 114Zm283-100q-100 0-170-70t-70-170q0-100 70-170t170-70q100 0 170 70t70 170q0 100-70 170t-170 70Zm0-80q66 0 113-47t47-113q0-66-47-113t-113-47q-66 0-113 47t-47 113q0 66 47 113t113 47Zm0-160Z"></path></svg>',moon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M524-40q-84 0-157.5-32t-128-86.5Q184-213 152-286.5T120-444q0-146 93-257.5T450-840q-18 99 11 193.5T561-481q71 71 165.5 100T920-370q-26 144-138 237T524-40Zm0-80q88 0 163-44t118-121q-86-8-163-43.5T504-425q-61-61-97-138t-43-163q-77 43-120.5 118.5T200-444q0 135 94.5 229.5T524-120Zm-20-305Z"></path></svg>'},i={name:""} class d extends(n({name:"m-icon",template:"<slot></slot>",style:"\n:host {\n display: inline-flex;\n fill:currentColor;\n width:24px;\n height:24px;\n justify-content:center;\n align-items:center;\n box-sizing:border-box;\n}\n::slotted(*),svg,img{\n width:100%;\n height:100%;\n}\n",props:i,syncProps:["name"],dispatch:{propChanged(o,t){if("name"==o){if(!a[t])throw new Error("This icon does not exist in the built-in icon.") this.innerHTML=a[t]}}},setup(){const o=this.getAttribute("name") if(o&&""===this.innerHTML){if(null==a[o])throw new Error("This icon does not exist in the built-in icon.") this.innerHTML=a[o]}return{}}})){}d.defineElement() const s={disabled:!1,type:""} class c extends(n({template:"<slot>icon</slot>",style:":host {\n padding: 8px;\n box-sizing: border-box;\n border-radius: 50%;\n background-color: var(--m-icon-button-default-backgroundColor,white);\n display: inline-flex;\n align-items: center;\n vertical-align:middle;\n justify-content:space-between;\n transition: transform 0.2s, box-shadow 0.4s, background-color 0.3s, color 0.3s;\n}\n::slotted(m-icon),::slotted(m-circular-progress) , ::slotted(svg) {\n color:currentColor;\n fill:currentColor;\n width: 20px;\n height: 20px;\n display:initial;\n}\n\n:host(:not([disabled=true]):hover) {\n transform: translateY(-2px);\n cursor: pointer;\n box-shadow: 0px 4px 30px var(--m-icon-button-default-hover-boxShadowColor,rgba(70,70,70,0.237));\n}\n:host(:not([disabled=true]):active) {\n transform: scale(0.95);\n cursor: pointer;\n box-shadow: 0px 4px 30px var(--m-icon-button-default-active-boxShadowColor,#2ea1f9d6);\n background-color: var(--m-icon-button-default-active-backgroundColor,#2EA2F9);\n color: var(--m-icon-button-default-active-textColor,white);\n}\n:host([disabled=true]) {\n background-color: var(--m-icon-button-default-disabled-backgroundColor,#EFEFEF);\n color: var(--m-icon-button-default-disabled-textColor,#BABABA);\n}\n:host([type=outlined]) {\n background-color: transparent;\n border: 1.5px solid var(--m-icon-button-outlined-borderColor,#2EA2F9);\n transition: border 0.2s, background-color 0.2s;\n color:var(--m-icon-button-outlined-color,#2EA2F9);\n}\n:host([type=outlined]:not([disabled=true]):hover) {\n box-shadow: none;\n background-color: var(--m-icon-button-outlined-hover-backgroundColor,#2EA2F9);\n color: var(--m-icon-button-outlined-hover-textColor,white);\n transform: none;\n}\n:host([type=outlined]:not([disabled=true]):active) {\n filter:brightness(90%);\n}\n:host([type=outlined][disabled=true]) {\n border: 1.5px solid var(--m-icon-button-outlined-disabled-borderColor,#EFEFEF);\n color: var(--m-icon-button-outlined-disabled-textColor,#BABABA);\n}\n:host([type=text]) {\n background-color: transparent;\n transition: background-color 0.2s, color 0.2s;\n}\n:host([type=text]:not([disabled=true]):hover) {\n box-shadow: none;\n transform: none;\n background-color: var(--m-icon-button-text-hover-backgroundColor,#EFEFEF);\n}\n:host([type=text]:not([disabled=true]):active) {\n background-color: var(--m-icon-button-text-active-backgroundColor,#2EA2F9);\n}\n:host([type=text][disabled=true]) {\n color: var(--m-icon-button-outlined-disabled-textColor,#BABABA);\n}\n:host([type=filled]){\n background-color:var(--m-icon-button-filled-backgroundColor,#2EA2F9);\n color:var(--m-icon-button-filled-textColor,white);\n transition:all 0.2s;\n}\n:host([type=filled]:hover){\n transform:none;\n box-shadow:none;\n filter:brightness(95%);\n}\n:host([type=filled][disabled=true]){\n background-color:var(--m-icon-button-filled-disabled-backgroundColor,#EFEFEF);\n color:var(--m-icon-button-filled-disabled-textColor,#BABABA);\n}\n:host([type=filled]:active){\n filter:brightness(90%);\n}\n:host([disabled=true]){\n pointer-events:none;\n}",props:s,name:"m-icon-button",syncProps:["disabled","type"]})){}c.defineElement() const u={disabled:!1} class h extends(n({name:"m-fab",style:":host {\ndisplay: inline-flex;\nalign-items: center;\nbackground-color: var(--m-fab-backgroundColor,white);\nborder-radius: 15px;\npadding:10px;\nbox-sizing:border-box;\nfont-size: 14px;\ntransition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;\njustify-content:center;\nmin-width:60px;\nmin-height:60px;\nvertical-align:middle;\n}\n::slotted(m-circular-progress),::slotted(m-icon),::slotted(m-icon[slot=start]),::slotted(m-circular-progress[slot=start]) , ::slotted(svg[slot=start]) {\n color:currentColor;\n fill:currentColor;\n width: 35px;\n height: 35px;\n display:initial;\n}\n::slotted(m-icon[slot=end]) ,::slotted(m-circular-progress[slot=end]) , ::slotted(svg[slot=end]) {\n color:currentColor;\n fill:currentColor;\n width: 35px;\n height: 35px;\n display:initial;\n}\n::slotted([slot=start]){\nmargin-right:10px;\n}\n::slotted([slot=end]){\nmargin-left:10px;\n}\n:host(:not([disabled=true]):hover) {\ntransform: translateY(-3px);\ncursor: pointer;\nbackground-color: var(--m-fab-hover-backgroundColor,rgb(247,247,247));\nbox-shadow: 0px 4px 15px var(--m-fab-hover-boxShadowColor,rgba(70,70,70,0.237));\n}\n:host(:not([disabled=true]):active) {\ntransform: scale(0.95);\nbackground-color: var(--m-fab-active-backgroundColor,#2EA2F9);\ncolor: var(--m-fab-active-color,white);\nbox-shadow: 0px 4px 20px var(--m-fab-active-boxShadowColor,#2ea1f9d6);\n}\n:host([disabled=true]){\nbackground-color:var(--m-fab-disabled-backgroundColor,#EFEFEF);\ncolor:var(--m-fab-disabled-color,#BABABA);\npointer-events:none;\n}\n",template:'<slot name="start"></slot>\n<slot></slot>\n<slot name="end"></slot>',props:u,syncProps:["disabled"]})){}h.defineElement() const m={checked:!1,indeterminate:!1,disabled:!1} class b extends(n({name:"m-checkbox",template:'\n <div class="checkbox">\n <div class="checked">\n <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">\n <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"></path>\n </svg>\n </div>\n <div class="indeterminate">\n <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">\n <path d="M200-440v-80h560v80H200Z"></path>\n </svg>\n </div>\n </div>\n <slot></slot>',style:":host {\ndisplay: inline-flex;\nalign-items: center;\n}\n:host(:hover) {\ncursor: pointer;\nfilter: brightness(90%);\n}\n:host slot {\ntransition: color 0.3s;\n}\n:host .checkbox {\nwidth: 18px;\nheight: 18px;\nborder: 2px solid var(--m-checkbox-borderColor,black);\nmargin-right: 10px;\nborder-radius: 8px;\ntransition: color 0.3s, background-color 0.3s;\nposition: relative;\n}\n:host svg {\nfill: currentColor;\n}\n:host .checked,\n:host .indeterminate {\ntransform: scale(0.5);\nopacity: 0;\ntransition: transform 0.3s, opacity 0.3s;\ncolor: var(--m-checkbox-checked-svg-color,white);\nposition: absolute;\ntop: 0;\nbottom: 0;\nleft: 0;\nright: 0;\n}\n:host([checked=true]:not([indeterminate=true])) .checkbox {\nborder: 2px solid var(--m-checkbox-checked-color,#2EA2F9);\nbackground-color: var(--m-checkbox-checked-color,#2EA2F9);\n}\n:host([checked=true]:not([indeterminate=true])) .checked {\ntransform: scale(1);\nopacity: 1;\n}\n:host([checked=true]:not([indeterminate=true])) slot {\ncolor: var(--m-checkbox-checked-color,#2EA2F9);\n}\n:host([checked=true][indeterminate=true]) .checkbox {\nborder: 2px solid var(--m-checkbox-checked-indeterminate-color,rgb(131,130,130));\nbackground-color: var(--m-checkbox-checked-indeterminate-color,rgb(131,130,130));\n}\n:host([checked=true][indeterminate=true]) .indeterminate {\ntransform: scale(1);\nopacity: 1;\n}\n:host([checked=true][indeterminate=true]) slot {\ncolor: var(--m-checkbox-checked-indeterminate-color,rgb(131,130,130));\n}\n:host([disabled=true]) {\ncolor: var(--m-checkbox-disabled-color,#BABABA) !important;\npointer-events: none;\n}\n:host([disabled=true]) slot {\ncolor: var(--m-checkbox-disabled-color,#BABABA) !important;\n}\n:host([disabled=true][checked=true]) .checkbox {\nbackground-color: var(--m-checkbox-disabled-color,#BABABA) !important;\n}\n:host([disabled=true]) .checkbox {\nborder: 2px solid var(--m-checkbox-disabled-color,#BABABA) !important;\n}",props:m,setup(){return this.addEventListener("click",(()=>{this.checked=!this.checked,this.dispatchEvent(new Event("change"))})),{}},syncProps:["disabled","indeterminate","checked"]})){}b.defineElement() const v=(o,t,e)=>{const n=o.querySelectorAll(t),r=new Array o:for(const o of n){for(const t in e)if(o?.[t]!=e[t])continue o r.push(o)}return r},p="m-radio",g={name:"",value:"",checked:!1,disabled:!1} function k(){const o=this.name if(o){v(document.body,p,{name:o}).forEach((o=>{o.checked=!1,o!=this&&o.dispatchEvent(new Event("change"))}))}this.dispatchEvent(new Event("change")),this.checked=!0}class x extends(n({name:p,template:'\n<div class="radio">\n<div class="checked"></div>\n</div>\n<slot></slot>',style:":host {\ndisplay: inline-flex;\nalign-items: center;\n}\n:host(:hover) {\ncursor: pointer;\nfilter: brightness(90%);\n}\n:host slot {\ntransition: color 0.3s;\n}\n:host .radio {\nwidth: 18px;\nheight: 18px;\nborder: 2px solid var(--m-radio-borderColor,black);\nmargin-right: 10px;\nborder-radius: 100%;\ntransition: color 0.3s;\nposition: relative;\n}\n:host .radio .checked {\nposition: absolute;\ntop: 0;\nbottom: 0;\nleft: 0;\nright: 0;\nborder-radius: 100%;\nmargin: auto;\nwidth: 14px;\nheight: 14px;\nbackground-color: var(--m-radio-checked-color,#2EA2F9);\ntransform: scale(0.8);\nopacity: 0;\ntransition: transform 0.3s, opacity 0.3s;\n}\n:host([checked=true]) .radio {\nborder: 2px solid var(--m-radio-checked-color,#2EA2F9);\n}\n:host([checked=true]) .radio .checked {\ntransform: scale(1);\nopacity: 1;\n}\n:host([checked=true]) slot {\ncolor: var(--m-radio-checked-color,#2EA2F9);\n}\n:host([disabled=true]) {\npointer-events: none;\n}\n:host([disabled=true]) .radio {\nborder: 2px solid var(--m-radio-disabled-color,#BABABA);\n}\n:host([disabled=true]) .radio .checked {\nbackground-color: var(--m-radio-disabled-color,#BABABA);\n}\n:host([disabled=true]) slot {\ncolor: var(--m-radio-disabled-color,#BABABA) !important;\n}",props:g,syncProps:["name","checked","disabled","value"],dispatch:{propChanged(o,t){if("value"!==o)return const e=this.name v(document.body,p,{name:e}).forEach((o=>{o.checked=!1})) v(document.body,p,{name:e,value:t})[0].checked=!0}},setup(){return this.addEventListener("click",(()=>{k.apply(this)})),{}}})){}x.defineElement() const f={disabled:!1,labeled:!1,min:0,max:100,value:0,step:1},w=(o,t,e,n,r)=>{if(!r)return const l=.5*(e-t)+t o.hiddened.textContent=`${n}/${e}`,o.normal.textContent=`${n}/${e}`,n<l?(o.normal.style.display="none",o.hiddened.style.display="initial"):(o.hiddened.style.display="none",o.normal.style.display="initial")} class C extends(n({name:"m-slider",style:":host {\n display: flex;\n flex-direction: column;\n justify-content: start;\n align-items: start;\n width: 300px;\n height: 40px;\n background-color: var(--m-slider-backgroundColor,#EFEFEF);\n border-radius: 12px;\n position: relative;\n overflow:hidden;\n cursor:pointer;\n}\n:host p.hidden-value {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: auto;\n width: -moz-fit-content;\n width: fit-content;\n height: -moz-fit-content;\n height: fit-content;\n font-size: 13px;\n color: var(--m-slider-hiddenlabel-color,gray);\n pointer-events: none;\n display: none;\n}\n:host p.value {\n position: absolute;\n width: -moz-fit-content;\n width: fit-content;\n left: 0;\n bottom: 0;\n top: 0;\n right: 0;\n height: -moz-fit-content;\n height: fit-content;\n font-size: 13px;\n color: var(--m-slider-label-color,rgb(255,255,255));\n margin: auto;\n pointer-events: none;\n display: none;\n}\n:host[labeled=true] p.value, :host[labeled=true] p.hidden-value {\n display: initial;\n}\n:host .slider {\n width: 0%;\n height: 100%;\n border-radius: 12px;\n background-color: var(--m-slider-slider-backgroundColor,#2EA2F9);\n position: relative;\n}\n:host .slider .slider-bar {\n position: absolute;\n right: 5px;\n top: 0;\n bottom: 0;\n margin: auto;\n width: 2px;\n border-radius: 100px;\n height: 15px;\n background-color: white;\n}\n:host([disabled=true]) {\n cursor: default;\n pointer-events:none;\n}\n:host([disabled=true]) .slider-bar {\n display: none;\n}",template:'\n <div class="slider">\n <p class="value"></p>\n <div class="slider-bar"></div>\n </div>\n <p class="hidden-value"></p>',props:f,syncProps:["disabled","labeled","value","min","max","step"],dispatch:{propChanged(o,t){if("value"===o){let o=Number(t) o<this.min&&(o=this.min),o>this.max&&(o=this.max) const e=(o-this.min)/(this.max-this.min)*100,n=this.shadowRoot?.querySelector(".slider") n.style.width=`${e}%` const r={hiddened:this.shadowRoot?.querySelector(".hidden-value"),normal:this.shadowRoot?.querySelector(".value")} w(r,this.min,this.max,o,this.labeled),this.value!==o&&(this.value=o)}},connected(){const o={hiddened:this.shadowRoot?.querySelector(".hidden-value"),normal:this.shadowRoot?.querySelector(".value")} w(o,this.min,this.max,this.value,this.labeled)}},setup(){const o=this.shadowRoot?.querySelector(".slider") let t,e=!1 const n=null!==this.value?Number(this.value):this.min o.style.width=(n-this.min)/(this.max-this.min)*100+"%" const r={hiddened:this.shadowRoot?.querySelector(".hidden-value"),normal:this.shadowRoot?.querySelector(".value")} let l return this?.addEventListener("mousedown",(n=>{t=n.clientX,e=!0,l=parseInt(getComputedStyle(o).width)/this.getBoundingClientRect().width*100})),document?.addEventListener("mouseup",(()=>e=!1)),document?.addEventListener("mousemove",(n=>{if(!e)return const{width:a,left:i}=this.getBoundingClientRect(),d=t-i let s=(n.clientX-i-d)/a*100+l s>=100?s=100:s<=0&&(s=0),o.style.width=`${s}%` const c=Number((Math.round((this.max-this.min)*s/100/this.step)*this.step+this.min).toFixed(2)) this.value=c>this.max?this.max:c,w(r,this.min,this.max,this.value,this.labeled),this.dispatchEvent(new Event("input"))})),this?.addEventListener("touchstart",(n=>{t=n.touches[0].clientX,e=!0,l=parseInt(getComputedStyle(o).width)/this.getBoundingClientRect().width*100})),document?.addEventListener("touchend",(()=>e=!1)),document?.addEventListener("touchmove",(n=>{if(!e)return const{width:a,left:i}=this.getBoundingClientRect(),d=t-i let s=(n.touches[0].clientX-i-d)/a*100+l s>=100?s=100:s<=0&&(s=0),o.style.width=`${s}%` const c=Number((Math.round((this.max-this.min)*s/100/this.step)*this.step+this.min).toFixed(2)) this.value=c>this.max?this.max:c,w(r,this.min,this.max,this.value,this.labeled),this.dispatchEvent(new Event("input"))})),{}}})){}C.defineElement() var y=(o,t)=>{let e return function(...n){e=setTimeout((()=>{clearTimeout(e),o.apply(this,[...n])}),t)}} const E={value:"",index:0} class A extends(n({name:"m-segmented-button",style:":host {\n width: -moz-fit-content;\n display:block;\n width: fit-content;\n border-radius: 10000000px;\n padding: 5px;\n position: relative;\n background-color: var(--m-segmented-button-backgroundColor,white);\n}\n:host .selected-slider {\n position: absolute;\n top: 0;\n left: 5px;\n bottom: 0;\n margin: auto;\n height: -moz-fit-content;\n height: fit-content;\n padding: 10px 0;\n font-size: 14px;\n border-radius: 10000000px;\n z-index: 1;\n background-color: var(--m-segmented-button-slider-backgroundColor,#2EA2F9);\n color: white;\n transition: left 0.3s, box-shadow 0.3s, transform 0.2s, width 0.3s;\n cursor: pointer;\n text-align:center;\n white-space:nowrap;\n display:none;\n}\n:host .selected-slider:hover {\n box-shadow: 0px 4px 20px var(--m-segmented-button-slider-hover-boxShadowColor,#2ea1f9d6);\n}\n:host .selected-slider:active {\n transform: scale(0.96);\n}\n:host slot {\n display: flex;\n width: -moz-fit-content;\n width: 100%;\n}\n",template:'\n <div class="selected-slider"></div>\n <slot></slot>',syncProps:["value"],props:E,dispatch:{propChanged(o,t){if("value"===o){const o=this.querySelectorAll("m-segmented-button-item") for(const e in o)if(o[e].value==t){this.index=Number(e) break}const{left:e,width:n}=o[this.index].getBoundingClientRect(),{offsetLeft:r}=this,l=this.shadowRoot?.querySelector(".selected-slider") l.style.left=e-r+"px",l.style.width=`${n}px`,l.innerHTML=o[this.index].innerHTML}},connected(){let o=this.offsetLeft,t=this.getBoundingClientRect().width const e=this.shadowRoot?.querySelector(".selected-slider"),n=getComputedStyle(e).transition,r=v(this,"m-segmented-button-item",{selected:!0}) if(r[0]){const t=this.querySelectorAll("m-segmented-button-item") for(let o=0;o<t.length;o++)if(t[o]===r[0]){this.index=o break}const n=r[0].innerHTML,l=r[0].value||"",{width:a,left:i}=r[0].getBoundingClientRect(),d=i-o e.style.left=`${d}px`,e.style.width=`${a}px`,e.innerHTML=n,this.value=l}else{let t=0 const n=this.querySelectorAll("m-segmented-button-item") if(!0===n[t].disabled){t=NaN for(const o in n)if(!1===n[o].disabled){t=Number(o) break}}if("NaN"===t.toString())throw new Error("The default selection is misinitialized. Be sure to have at least one non-disabled element in the group list.") const r=n[t].innerHTML,l=n[t].value||"",{width:a,left:i}=n[t].getBoundingClientRect() e.style.left=i-o+"px",e.style.width=`${a}px`,e.innerHTML=r,this.value=l,this.index=t}const l=this.querySelectorAll("m-segmented-button-item") for(let t=0;t<l.length;t++)l[t].addEventListener("click",(()=>{if(t===this.index)return this.index=t const{value:n,innerHTML:r}=l[t],{width:a,left:i}=l[t].getBoundingClientRect() e.style.width=`${a}px`,e.style.left=i-o+"px",this.value=n,e.innerHTML=r,this.dispatchEvent(new Event("change"))})) const a=y(((o,t)=>{t.style.transition=o}),300),i=new ResizeObserver((r=>{const i=r[0].contentRect.width if(i!=t){t=i,o=this.offsetLeft const r={newWidth:l[this.index].getBoundingClientRect().width,newLeft:l[this.index].getBoundingClientRect().left} e.style.transition="none",e.style.width=`${r.newWidth}px`,e.style.left=r.newLeft-o+"px",a(n,e)}})) i.observe(this),e.style.display="initial"}},setup:()=>({})})){}A.defineElement() const B={selected:!1,value:"",disabled:!1} class q extends(n({name:"m-segmented-button-item",props:B,style:":host {\n padding: 10px 20px;\n font-size: 14px;\n border-radius: 10000000px;\n cursor: pointer;\n transition: background-color 0.3s;\n width:100%;\n text-align:center;\n display:flex;\n justify-content:center;\n align-items:center;\n}\n:host slot{\n white-space:nowrap;\n}\n:host(:hover) {\n background-color: var(--m-segmented-button-item-hover-backgroundColor,#F2F2F2);\n}\n:host(:active) {\n background-color: var(--m-segmented-button-item-active-backgroundColor,#e2e2e2);\n}\n:host([disabled=true]){\n pointer-events:none;\n color:gray;\n}",template:"<slot></slot>",syncProps:["disabled"]})){}q.defineElement() const F={unknown:!1,value:0,max:100} class S extends(n({name:"m-linear-progress",style:":host {\n background-color: var(--m-linear-progress-thumb-color,#EFEFEF);\n height: 3px;\n width: 300px;\n border-radius: 10px;\n overflow: hidden;\n position: relative;\n display:block;\n}\n:host .value {\n background-color: var(--m-linear-progress-value-color,#2EA2F9);\n position: absolute;\n top: 0;\n left: 0;\n width: 0%;\n height: 100%;\n border-radius: 10px;\n}\n:host([unknown=true]) .value {\n width: 30%;\n animation: unknow-value cubic-bezier(0, 0, 0, 0) 3s infinite normal;\n}\n@keyframes unknow-value {\n 0% {\n left: -30%;\n width: 30%;\n }\n 50% {\n width: 10%;\n }\n 100% {\n width: 30%;\n left: 130%;\n }\n}",template:'<div class="value"></div>',props:F,syncProps:["value"],dispatch:{propChanged(o,t){if("value"==o){const o=t||0,e=this.max let n=Number(o)/e*100 n>100&&(n=100),n<0&&(n=0) const r=this.shadowRoot?.querySelector(".value") r.style.width=`${n}%`}}},setup(o){let t=(this.value||0)/(this.max||100)*100 t>100&&(t=100),t<0&&(t=0) const e=o?.querySelector(".value") return e.style.width=`${t}%`,{}}})){}S.defineElement() const T=320*Math.PI,Z=`:host {\n display: block;\n width: 40px;\n height: 40px;\n color: var(--m-circular-progress-fillColor,#2EA2F9);\n}\n:host svg{\n width: inherit;\n height: inherit;\n color: currentColor;\n}\n:host svg ellipse {\n stroke: currentColor;\n stroke-dasharray: ${T}px;\n stroke-dashoffset: var(--dashoffset,${T}px);\n stroke-linecap: round;\n}\n:host([unknown=true]) svg {\n animation: unknown-value 1s linear infinite;\n}\n:host([unknown=true]) svg ellipse {\n stroke-dasharray: ${T}px;\n stroke-linecap: round;\n stroke-dashoffset: 314;\n}\n@keyframes unknown-value {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}`,L={unknown:!1,value:100,max:100} class M extends(n({name:"m-circular-progress",template:'<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">\n <defs></defs>\n <ellipse style="fill: none; stroke-width: 30px; " cx="250" cy="250" rx="160"\n ry="160"></ellipse>\n </svg>',style:Z,props:L,syncProps:["unknown","value"],dispatch:{propChanged(o,t){if("value"===o){const o=this.max,e=this.shadowRoot?.querySelector("svg") e?.style.setProperty("--dashoffset",String(T*(1-Number(t)/o)))}}},setup(o){const t=this.value,e=this.max,n=o?.querySelector("svg") return n?.style.setProperty("--dashoffset",String(T*(1-t/e))),{}}})){}M.defineElement() const H={disabled:!1,checked:!1} class R extends(n({name:"m-switch",style:":host {\n width: 50.4px;\n border-radius: 100000px;\n display: inline-flex;\n vertical-align: middle;\n position: relative;\n background-color: var(--m-switch-backgroundColor,#EFEFEF);\n box-shadow: inset 0px 3px 10px rgba(0, 0, 0, 0.0666666667);\n transition: background-color 0.3s;\n cursor: pointer;\n aspect-ratio: 50.4 / 28;\n}\n:host([checked=true]) {\n background-color: var(--m-switch-checked-backgroundColor,#2EA2F9);\n}\n:host .trigger-block {\n position: absolute;\n transition: transform 0.3s;\n height: 80%;\n display: flex;\n top: 0;\n bottom: 0;\n margin: auto;\n left: 2.8px;\n justify-content: center;\n align-items: center;\n background-color: var(--m-switch-trigger-backgroundColor,white);\n border-radius: 50%;\n color: black;\n aspect-ratio: 1 / 1;\n}\n:host .trigger-block ::slotted(m-icon),\n:host .trigger-block ::slotted(m-circular-progress),\n:host .trigger-block ::slotted(svg) {\n color: currentColor;\n width: 80%;\n height: 80%;\n transition: all 0.3s;\n}\n:host .trigger-block ::slotted(m-icon[slot=status-default]),\n:host .trigger-block ::slotted(m-circular-progress[slot=status-default]),\n:host .trigger-block ::slotted(svg[slot=status-default]) {\n color: currentColor;\n width: 80%;\n height: 80%;\n transition: all 0.3s;\n}\n:host .trigger-block ::slotted(m-icon[slot=status-checked]),\n:host .trigger-block ::slotted(m-circular-progress[slot=status-checked]),\n:host .trigger-block ::slotted(svg[slot=status-checked]) {\n color: currentColor;\n width: 80%;\n height: 80%;\n transition: all 0.3s;\n}\n:host .trigger-block m-icon,\n:host .trigger-block m-circular-progress,\n:host .trigger-block svg {\n color: currentColor;\n width: 80%;\n height: 80%;\n transition: all 0.3s;\n}\n:host([checked=true]) .trigger-block {\n color: var(--m-switch-checked-foreColor,#2EA2F9);\n transform: translateX(100%);\n}\n:host([checked=true]) .trigger-block ::slotted(m-icon[slot=status-default]),\n:host([checked=true]) .trigger-block ::slotted(m-circular-progress[slot=status-default]),\n:host([checked=true]) .trigger-block ::slotted(svg[slot=status-default]){\n display:none;\n}\n:host(:not([checked=true])) .trigger-block ::slotted(m-icon[slot=status-checked]),\n:host(:not([checked=true])) .trigger-block ::slotted(m-circular-progress[slot=status-checked]),\n:host(:not([checked=true])) .trigger-block ::slotted(svg[slot=status-checked]){\n display:none;\n}\n:host([disabled=true]) {\n background-color: var(--m-switch-disabled-backgroundColor,#EBEBEB);\n box-shadow: none;\n pointer-events: none;\n}\n:host([disabled=true]) .trigger-block {\n color: var(--m-switch-disabled-trigger-foreColor,white);\n background-color: var(--m-switch-disabled-trigger-backgroundColor,#BABABA);\n}",template:'<div class="trigger-block"><slot></slot><slot name="status-default"></slot><slot name="status-checked"></slot></div>',props:H,syncProps:["checked","disabled"],setup(){return this.addEventListener("click",(()=>{this.checked=!this.checked,this.dispatchEvent(new Event("change"))})),{}}})){}R.defineElement() const z={disabled:!1,label:"",value:"",error:!1,maxlength:-1,readonly:!1,count:0,type:"text",min:0,max:100} function P(o,t){switch(o){case"number":t.type="number" break case"password":t.type="password" break case"text":t.type="text"}}class _ extends(n({name:"m-input",style:":host {\n display: inline-flex;\n vertical-align: middle;\n background-color: var(--m-input-backgroundColor,white);\n width: 250px;\n height: 40px;\n border-radius: 15px;\n padding: 3px 13px;\n transition: outline 0.2s;\n outline: 2px solid transparent;\n}\n:host input{\n color: var(--m-input-textColor,black);\n}\n:host([readonly=true]) input{\n color:var(--m-input-readonly-color,rgb(178,178,178));\n}\n:host([focused=true]) {\n outline: 2px solid var(--m-input-focused-outline-color,#2ea1f9d6);\n}\n:host([focused=true]) .container .input .label {\n color: var(--m-input-focused-label-color,#2EA2F9);\n top: -100%;\n bottom: 100%;\n}\n:host([error=true]){\n outline: 2px solid var(--m-input-error-outline-color,rgba(255,0,0,0.507));\n}\n:host([error=true]) .container .input .label{\n color:var(--m-input-error-label-color,rgba(255,0,0,0.507));\n}\n:host .container .input[has_text=true] .label{\n top: -100%;\n bottom: 100%;\n}\n:host([focused=true]) .container .input[has_icon=true] .label{\n left: -37px;\n}\n:host .container .input[has_icon=true][has_text=true] .label{\n left: -37px;\n}\n:host([disabled=true]) {\n pointer-events: none;\n outline: none;\n background-color: var(--m-input-disabled-backgroundColor,#EFEFEF);\n}\n:host([disabled=true]) .container .input .label {\n color: var(--m-input-disabled-label-color,rgb(178,178,178));\n}\n:host([disabled=true]) .container .input input {\n color: var(--m-input-disabled-color,rgb(178,178,178));\n}\n:host .container {\n width: 100%;\n height: 100%;\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n:host .container ::slotted([slot=icon]),\n:host .container [slot=icon],\n:host .container ::slotted(svg[slot=icon]),\n:host .container ::slotted(img[slot=icon]) {\n pointer-events: none;\n margin-right: 10px;\n width: 24px;\n height: 24px;\n aspect-ratio: 1/1;\n}\n:host .container .input {\n position: relative;\n width: 100%;\n height: 100%;\n\n}\n:host .container .input input {\n width: 100%;\n height: 100%;\n border: none;\n border-radius: 0px;\n outline: none;\n box-sizing: border-box;\n font-size: 14px;\n background-color: transparent;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\n:host .container .input input::-moz-selection {\n background-color: var(--m-input-selection-backgroundColor,var(selection_backgroundColor));\n color: var(--m-input-selection-textColor,var(selection_textColor));\n}\n:host .container .input input::selection {\n background-color: var(--m-input-selection-backgroundColor,var(selection_backgroundColor));\n color: var(--m-input-selection-textColor,var(selection_textColor));\n}\n:host .container .input .label {\n position: absolute;\n left: 3px;\n top: 0;\n bottom: 0;\n margin: auto;\n pointer-events: none;\n height: -moz-fit-content;\n height: fit-content;\n width: -moz-fit-content;\n width: fit-content;\n color: var(--m-input-default-label-color,rgb(178,178,178));\n font-size: 12px;\n transition: all 0.3s;\n font-weight: 300;\n white-space: nowrap;\n max-width: 100%;\n overflow: hidden;\n}\n",template:'<div class="container">\n <slot name="icon"></slot>\n <div class="input">\n <p class="label"></p>\n <input type="text">\n </div>\n <slot name="action"></slot>\n </div>',props:z,syncProps:["disabled","label","value","error","readonly","maxlength","type"],dispatch:{propChanged(o,t){const e=this.shadowRoot?.querySelector(".input"),n=this.shadowRoot?.querySelector("input"),r=this.shadowRoot?.querySelector(".label") switch(o){case"value":n.value!==t&&(n.value=t,this.count=n.value.length,e.setAttribute("has_text",n.value?"true":"false")) break case"readonly":!1===this.readonly?n.removeAttribute("readOnly"):n.readOnly=!0 break case"type":P(this.type,n) break case"disabled":n.disabled="true"===t break case"min":n.min=String(t) break case"max":n.max=String(t) break case"label":r.textContent=String(t)}},connected(){const o=this.shadowRoot?.querySelector("input"),t=this.shadowRoot?.querySelector(".input"),e=this.shadowRoot?.querySelector(".label") e.textContent=this.label,P(this.type,o),t.setAttribute("has_text",o.value?"true":"false"),this.value&&(o.value=this.value),this.readonly&&(o.readOnly=!0),this.disabled&&(o.disabled=!0),o.min=this.min.toString(),o.max=this.max.toString(),this.count=o.value.length}},setup(o){const t=o.querySelector("input"),e=o.querySelector(".input") return this.querySelector("[slot=icon]")?e.setAttribute("has_icon","true"):e.setAttribute("has_icon","false"),this.shadowRoot.onslotchange=()=>{this.querySelector("[slot=icon]")?e.setAttribute("has_icon","true"):e.setAttribute("has_icon","false")},t.addEventListener("focus",(()=>{this.setAttribute("focused","true")})),t.addEventListener("blur",(()=>{this.setAttribute("focused","false")})),t.addEventListener("input",(()=>{if(-1!==this.maxlength)return t.value=t.value.slice(0,this.maxlength),this.count=t.value.length,void e.setAttribute("has_text",""==t.value?"false":"true") this.count=t.value.length,this.value=t.value,e.setAttribute("has_text",""==t.value?"false":"true")})),{}}})){}_.defineElement() const $={disabled:!1,label:"",value:"",count:0,readonly:!1,adaptive:!1,error:!1} class N extends(n({name:"m-textarea",props:$,style:':host {\n display: block;\n width: 250px;\n height: 200px;\n border-radius: 15px;\n background-color: var(--m-textarea-default-backgroundColor,white);\n position: relative;\n outline: 0px solid transparent;\n transition: outline 0.2s;\n}\n:host textarea {\n width: 100%;\n height: 100%;\n resize: none;\n outline: none;\n border: none;\n border-radius: 15px;\n padding: 13px;\n font-size: 14px;\n background-color: transparent;\n box-sizing: border-box;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;\n color: var(--m-textarea-textColor ,black);\n}\n:host p.label {\n position: absolute;\n left: 16px;\n top: 13px;\n margin: 0;\n font-weight: 300;\n font-size: 12px;\n color: var(--m-textarea-default-label-color,rgb(178,178,178));\n width: -moz-fit-content;\n width: fit-content;\n height: -moz-fit-content;\n height: fit-content;\n pointer-events: none;\n transition: transform 0.3s;\n}\n:host([focused=true]) p.label {\n color: var(--m-textarea-focused-label-color,#2EA2F9);\n transform: translateY(-37px);\n}\n:host textarea[has_text=true] ~ p.label {\n transform: translateY(-37px);\n}\n:host([focused=true]) {\n outline: 2px solid var(--m-textarea-focused-outline-color,#2ea1f9d6);\n}\n:host([disabled=true]) {\n background-color: var(--m-textarea-disabled-backgroundColor,#EFEFEF);\n}\n:host([disabled=true]) p.label {\n color: var(--m-textarea-disabled-label-color,rgb(178,178,178));\n}\n:host([error=true]) {\n outline: 2px solid var(--m-textarea-error-outline-color,rgba(255,0,0,0.507));\n}\n:host([error=true]) p.label {\n color: var(--m-textarea-error-label-color,rgba(255,0,0,0.507));\n}\n:host([readonly=true]) textarea {\n color: var(--m-textarea-readonly-color,rgb(178,178,178));\n}',template:'<textarea></textarea>\n <p class="label"></p>',syncProps:["adaptive","disabled","label","readonly","value","error"],setup:()=>({}),dispatch:{connected(){const o=this.label,t=this.shadowRoot?.querySelector(".label") t.textContent=o const e=this.shadowRoot?.querySelector("textarea") e.addEventListener("input",(()=>{this.value=e.value,this.count=e.value.length})),e.addEventListener("focus",(()=>{this.setAttribute("focused","true")})),e.addEventListener("blur",(()=>{this.setAttribute("focused","false")}))},propChanged(o,t){const e=this.shadowRoot?.querySelector(".label"),n=this.shadowRoot?.querySelector("textarea") switch(o){case"adaptive":this.setAttribute("auto-height",String("true"===String(t))),"true"===t&&(this.style.height="auto",this.style.height=n.scrollHeight+"px") break case"disabled":"true"===t?n.disabled=!0:(n.disabled=!1,n.removeAttribute("disabled")) break case"label":e.textContent=String(t) break case"readonly":"true"===t?n.readOnly=!0:(n.readOnly=!1,n.removeAttribute("readonly")) break case"value":n.value=String(t),n.setAttribute("has_text",String(t).length?"true":"false"),this.count=String(t).length,"true"===this.getAttribute("auto-height")&&(this.style.height="auto",this.style.height=`${n.scrollHeight}px`)}}}})){}N.defineElement() const O={disabled:!1,label:"",value:""} class j extends(n({name:"m-picker",style:":host {\n display: inline-flex;\n vertical-align: middle;\n position: relative;\n}\n:host .view {\n height: 25px;\n width: inherit;\n min-width: 100px;\n padding: 5px 13px;\n background-color: var(--m-picker-default-view-backgroundColor,white);\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-radius: 15px;\n position: relative;\n transition: all 0.3s;\n outline: 2px solid transparent;\n}\n:host .view .label {\n color: var(--m-picker-default-label-color,rgb(178,178,178));\n position: absolute;\n font-size: 12px;\n pointer-events: none;\n height: -moz-fit-content;\n height: fit-content;\n width: -moz-fit-content;\n width: fit-content;\n transition: all 0.3s;\n top: 0;\n bottom: 0;\n margin: auto;\n max-width: calc(100% - 26px - 20px);\n overflow-x: hidden;\n white-space: nowrap;\n font-weight: 300;\n}\n:host .view .text {\n color: var(--m-picker-default-text-color,black);\n font-size: 13px;\n}\n:host .view .icon {\n width: 20px;\n height: 20px;\n color: var(--m-picker-default-icon-color,black);\n transition: transform 0.2s;\n margin-left: 20px;\n}\n:host .view .icon svg {\n stroke: currentColor;\n width: inherit;\n height: inherit;\n fill: currentColor;\n}\n:host .view[has_text=true] .label {\n top: -100%;\n bottom: 100%;\n margin: auto;\n}\n:host .options {\n position: absolute;\n border-radius: 10px;\n box-shadow: 0px 4px 20px var(--m-picker-default-options-boxShadow-color,rgba(89,89,89,0.122));\n background-color: var(--m-picker-default-options-backgroundColor,white);\n overflow-y: scroll;\n opacity: 0;\n transform: scale(0.98);\n pointer-events: none;\n transition: all 0.3s;\n max-height: 50vh;\n z-index: 1;\n transform: scaleY(0%);\n transform-origin: top;\n}\n:host .options::-webkit-scrollbar{\n display: none;\n}\n:host .options:not([direction=north]) {\n top: calc(100% + 10px);\n transform-origin: top;\n}\n:host .options[direction=north] {\n bottom: calc(100% + 30px);\n transform-origin: bottom;\n}\n:host .o