@mozaic-ds/web-components 0.30.0-beta.0 → 0.30.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -73
- package/package.json +1 -1
- package/public/adeo/components/autocomplete/Autocomplete.js +1 -1
- package/public/adeo/components/autocomplete/Autocomplete.js.map +1 -1
- package/public/adeo/components/autocomplete/Autocomplete.svelte +3 -0
- package/public/adeo/components/listbox/Listbox.nested.js +1 -1
- package/public/adeo/components/listbox/Listbox.nested.js.map +1 -1
- package/public/adeo/components/listbox/Listbox.nested.svelte +19 -2
- package/public/adeo/components/textinput/Textinput.nested.js +1 -1
- package/public/adeo/components/textinput/Textinput.nested.js.map +1 -1
- package/public/adeo/components/textinput/Textinput.nested.svelte +1 -0
- package/public/adeo/utilities/stories/autocomplete/Autocomplete.stories.d.ts.map +1 -1
- package/public/bricoman/components/autocomplete/Autocomplete.js +1 -1
- package/public/bricoman/components/autocomplete/Autocomplete.js.map +1 -1
- package/public/bricoman/components/autocomplete/Autocomplete.svelte +3 -0
- package/public/bricoman/components/listbox/Listbox.nested.js +1 -1
- package/public/bricoman/components/listbox/Listbox.nested.js.map +1 -1
- package/public/bricoman/components/listbox/Listbox.nested.svelte +19 -2
- package/public/bricoman/components/textinput/Textinput.nested.js +1 -1
- package/public/bricoman/components/textinput/Textinput.nested.js.map +1 -1
- package/public/bricoman/components/textinput/Textinput.nested.svelte +1 -0
- package/public/bricoman/utilities/stories/autocomplete/Autocomplete.stories.d.ts.map +1 -1
- package/public/components/autocomplete/Autocomplete.js +1 -1
- package/public/components/autocomplete/Autocomplete.js.map +1 -1
- package/public/components/autocomplete/Autocomplete.svelte +3 -0
- package/public/components/listbox/Listbox.nested.js +1 -1
- package/public/components/listbox/Listbox.nested.js.map +1 -1
- package/public/components/listbox/Listbox.nested.svelte +19 -2
- package/public/components/textinput/Textinput.nested.js +1 -1
- package/public/components/textinput/Textinput.nested.js.map +1 -1
- package/public/components/textinput/Textinput.nested.svelte +1 -0
- package/public/utilities/stories/autocomplete/Autocomplete.stories.d.ts.map +1 -1
package/README.md
CHANGED
|
@@ -1,47 +1,39 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img alt="ADEO Design system - Core library" src="./.storybook/assets/images/adeo-design-system-web-component-banner.svg" />
|
|
3
|
+
</p>
|
|
4
|
+
|
|
1
5
|
<h1 align="center">
|
|
2
|
-
|
|
6
|
+
ADEO Design system - Web Components (Svelte)
|
|
3
7
|
</h1>
|
|
4
8
|
|
|
5
9
|
<p align="center">
|
|
6
|
-
<a href="https://
|
|
7
|
-
<img src=".storybook/assets/images/adeo-design-system.svg"/>
|
|
8
|
-
</a>
|
|
9
|
-
|
|
10
|
-
<a href="https://svelte.dev/">
|
|
11
|
-
<img src=".storybook/assets/images/made-with-svelte.svg"/>
|
|
12
|
-
</a>
|
|
10
|
+
A library of <a href="https://svelte.dev/">Svelte</a> and <a href="https://developer.mozilla.org/fr/docs/Web/API/Web_components">Web Component</a> implementing ADEO Design system guidelines.
|
|
13
11
|
</p>
|
|
14
12
|
|
|
15
13
|
<p align="center">
|
|
14
|
+
<a href="https://www.npmjs.com/package/@mozaic-ds/web-components/v/beta">
|
|
15
|
+
<img src="https://img.shields.io/npm/v/@mozaic-ds/web-components/beta?label=NPM&logo=npm&color=yellow" alt="npm beta version">
|
|
16
|
+
</a>
|
|
16
17
|
<a href="https://github.com/adeo/mozaic-web-components/blob/master/CONTRIBUTING.md">
|
|
17
18
|
<img src="https://img.shields.io/badge/PRs-welcome-blue.svg?logo=github" alt="PRs welcome" />
|
|
18
19
|
</a>
|
|
19
|
-
<a href="#-contributors">
|
|
20
|
-
<img src="https://img.shields.io/badge/all_contributors-35-brightgreen.svg?style=" alt="contributors" />
|
|
21
|
-
</a>
|
|
22
20
|
<a href="https://app.slack.com/client/T4R6RCZFA/C021A2J25C4">
|
|
23
21
|
<img src="https://img.shields.io/badge/Slack-mozaic_web_components-611f69.svg?logo=slack" alt="Slack mozaic-web-components" />
|
|
24
22
|
</a>
|
|
25
|
-
<a href="https://adeo.
|
|
26
|
-
<img src="https://img.shields.io/badge/
|
|
23
|
+
<a href="https://keys.adeo.com/keys/ls/space/2583429798460717/adeo-adeo-design-system">
|
|
24
|
+
<img src="https://img.shields.io/badge/KEYS-Adeo_Design_System-4526ce.svg" alt="KEYS ADEO Design system" />
|
|
27
25
|
</a>
|
|
28
26
|
</p>
|
|
29
27
|
|
|
30
|
-
<p align="center">
|
|
31
|
-
This project contains <a href="https://svelte.dev/">Svelte</a> components and <a href="https://developer.mozilla.org/fr/docs/Web/API/Web_components">Web Components</a> that implements the <a href="https://mozaic.adeo.cloud/">ADEO Design system</a> guidelines.
|
|
32
|
-
</p>
|
|
33
|
-
|
|
34
28
|
## 🎨 Getting started
|
|
35
29
|
|
|
36
30
|
**ADEO Design system** is a global and collaborative design system that facilitates the designer and developer experience, enabling them to create universal interfaces perfectly aligned with the business strategy of [Adeo](https://www.adeo.com/).
|
|
37
31
|
|
|
38
|
-
Learn more about the vision and guidelines by visiting the [main documentation website](https://mozaic.adeo.cloud/).
|
|
39
|
-
|
|
40
32
|
## 📦 Install
|
|
41
33
|
|
|
42
34
|
All the available components are showcased in our [Storybook](https://ubiquitous-giggle-7b5b6e33.pages.github.io/?path=/story/components-button--solid).
|
|
43
35
|
|
|
44
|
-
To install `
|
|
36
|
+
To install mozaic `web-components` in your project, you will need to run the following command using `npm`:
|
|
45
37
|
|
|
46
38
|
```
|
|
47
39
|
npm install --save @mozaic-ds/web-components
|
|
@@ -64,7 +56,7 @@ Import the Button component:
|
|
|
64
56
|
```js
|
|
65
57
|
import Button from '@mozaic-ds/web-components/public/components/button/Button.svelte';
|
|
66
58
|
// import Mozaic icons as web component
|
|
67
|
-
import '@mozaic-ds/
|
|
59
|
+
import '@mozaic-ds/icons-svelte';
|
|
68
60
|
```
|
|
69
61
|
|
|
70
62
|
To avoid declaring the Svelte components as Web Component, you need to change a little your `rollup.config.js` file.
|
|
@@ -109,7 +101,7 @@ Import component gloabally:
|
|
|
109
101
|
// load the full library
|
|
110
102
|
import '@mozaic-ds/web-components/public/bundle.js';
|
|
111
103
|
// import Mozaic icons as web component
|
|
112
|
-
import '@mozaic-ds/
|
|
104
|
+
import '@mozaic-ds/icons-svelte';
|
|
113
105
|
```
|
|
114
106
|
|
|
115
107
|
Import component individually:
|
|
@@ -121,16 +113,13 @@ If you do not want to use all the components of the library, but only some of th
|
|
|
121
113
|
|
|
122
114
|
import Button from '@mozaic-ds/web-components/public/components/button/Button.js';
|
|
123
115
|
if (!customElements.get('m-button')) {
|
|
124
|
-
customElements.define('m-button', Button);
|
|
116
|
+
customElements.define('m-button', Button.element);
|
|
125
117
|
}
|
|
126
118
|
// For icons
|
|
127
|
-
import
|
|
119
|
+
import ChevronRight20 from '@mozaic-ds/icons-svelte/custom-elements/ChevronRight20/ChevronRight20.js';
|
|
128
120
|
|
|
129
|
-
if (!customElements.get('
|
|
130
|
-
customElements.define(
|
|
131
|
-
'navigation-arrow-arrow--right-16px',
|
|
132
|
-
ArrowArrowRight16,
|
|
133
|
-
);
|
|
121
|
+
if (!customElements.get('ui-chevron-right-20')) {
|
|
122
|
+
customElements.define('ui-chevron-right-20', ChevronRight20.element);
|
|
134
123
|
}
|
|
135
124
|
```
|
|
136
125
|
|
|
@@ -156,63 +145,31 @@ import '@mozaic-ds/web-components/public/adeo/...';
|
|
|
156
145
|
|
|
157
146
|
> NOTE: This is for global or individual imports
|
|
158
147
|
|
|
159
|
-
##
|
|
148
|
+
## Ressources
|
|
160
149
|
|
|
161
150
|
To learn more about the web components approach, we've written a couple of articles:
|
|
162
151
|
|
|
163
|
-
[Web Components: Learnings From ADEO Design
|
|
164
|
-
|
|
165
|
-
[ADEO Design system: Building a Web Component library with Svelte and Rollup](https://medium.com/adeo-tech/adeo-design-system-building-a-web-component-library-with-svelte-and-rollup-72d65de50163)
|
|
166
|
-
|
|
167
|
-
## 📰 Changelog
|
|
168
|
-
|
|
169
|
-
Releases are managed with **GitHub Releases**, including the changelog for each one.<br/>
|
|
170
|
-
Access to the [Changelog](/CHANGELOG.md) to find out about the detailed changes to each release.
|
|
152
|
+
[Web Components: Learnings From ADEO Design System](https://medium.com/adeo-tech/web-components-learnings-from-adeo-design-system-9414acc1d1e2)
|
|
171
153
|
|
|
172
|
-
|
|
154
|
+
[ADEO Design System: Building a Web Component library with Svelte and Rollup](https://medium.com/adeo-tech/adeo-design-system-building-a-web-component-library-with-svelte-and-rollup-72d65de50163)
|
|
173
155
|
|
|
174
|
-
|
|
175
|
-
- Join the [#mozaic-support](https://app.slack.com/client/T4R6RCZFA/CKQJZL7C4/) channel on **Slack**
|
|
176
|
-
- Join our [Workplace group](https://adeo.workplace.com/groups/427492661454646/)
|
|
177
|
-
|
|
178
|
-
## 🐞 Bugs and feature requests
|
|
179
|
-
|
|
180
|
-
Have a bug or a feature request?<br/>
|
|
181
|
-
Please [open an issue](https://github.com/adeo/mozaic-styles/issues/new/choose) and use the template associated with your request.
|
|
182
|
-
|
|
183
|
-
However, if you are able to contribute and fix bugs, build new features, or help to improve the project documentation, feel free to do it! _(more information below)_
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
## ✍️ Contributing
|
|
187
|
-
|
|
188
|
-
Setup the project to start contributing.
|
|
156
|
+
## Project setup
|
|
189
157
|
|
|
190
158
|
```
|
|
191
159
|
npm ci
|
|
192
|
-
npm run build:icons
|
|
193
160
|
```
|
|
194
161
|
|
|
195
|
-
Compiles and hot-reloads for development
|
|
162
|
+
### Compiles and hot-reloads for development
|
|
196
163
|
|
|
197
164
|
```
|
|
198
165
|
npm run start
|
|
199
166
|
```
|
|
200
167
|
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
## 🧑💻 Contributors
|
|
204
|
-
|
|
205
|
-
**Owners**
|
|
206
|
-
|
|
207
|
-
**[ADEO Design system Team](https://github.com/orgs/adeo/teams/adeo-design-system)**
|
|
208
|
-
|
|
209
|
-
**Maintainers**
|
|
168
|
+
## ✍️ Contributing
|
|
210
169
|
|
|
211
|
-
|
|
212
|
-
- **[Trésor Iloyi](https://github.com/tiloyi)**
|
|
213
|
-
- **[David Martin](https://github.com/dmartinds)**
|
|
170
|
+
We're always looking for contributors to help us fix bugs, build features, or help us improve the documentation. If you're intersted chec out our [Contribution Guide](https://github.com/adeo/mozaic-web-components/wiki/Contributing).
|
|
214
171
|
|
|
215
|
-
|
|
172
|
+
### Contributors
|
|
216
173
|
|
|
217
174
|
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
|
|
218
175
|
<!-- prettier-ignore-start -->
|
|
@@ -275,7 +232,3 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
|
|
|
275
232
|
<!-- prettier-ignore-end -->
|
|
276
233
|
|
|
277
234
|
<!-- ALL-CONTRIBUTORS-LIST:END -->
|
|
278
|
-
|
|
279
|
-
## 📄 Licensing
|
|
280
|
-
|
|
281
|
-
This project is licensed under the Apache V2 License. See [LICENSE](LICENSE) for more information.
|
package/package.json
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{S as e,i as t,a as l,b as a,f as i,s,K as n,L as o,c as r,e as c,d,E as u,n as m,h as p,M as h,j as g,t as $,k as f,F as x,N as b,x as v,B as w,z as y,A as _,O as k,l as z,m as q,G as j,P as S,o as C,q as N,r as O,u as T,Q as E,C as J,R as L,T as M,D as R,U,V as Y}from"../../index-c222d0b7.js";import{E as A}from"../../EventHandler-f7ee47ca.js";import{c as B}from"../../ClickOutside-63071e7a.js";import H from"../tag/Tag.nested.js";import D from"../loader/Loader.nested.js";import F from"../textinput/Textinput.nested.js";import G from"../listbox/Listbox.nested.js";function K(e,t,l){const a=e.slice();return a[74]=t[l],a}function P(e,t,l){const a=e.slice();return a[74]=t[l],a[78]=l,a}function Q(e){let t,l,i,s={id:e[1]?e[1]:`autocompleteTag-${e[33]}`,label:e[32](),size:"s",type:"removable",dark:!1,disabled:!1,href:"",name:"",value:"",selected:!1};return l=new H({props:s}),e[52](l),l.$on("tag-removed",e[34]),{c(){t=c("div"),u(l.$$.fragment),p(t,"class","mc-autocomplete__tag")},m(e,s){a(e,t,s),x(l,t,null),i=!0},p(e,t){const a={};2&t[0]&&(a.id=e[1]?e[1]:`autocompleteTag-${e[33]}`),2&t[1]&&(a.label=e[32]()),l.$set(a)},i(e){i||(w(l.$$.fragment,e),i=!0)},o(e){y(l.$$.fragment,e),i=!1},d(a){a&&q(t),e[52](null),j(l)}}}function V(e){let t,l;return t=new D({props:{size:"s",theme:"primary",text:"",class:"mc-autocomplete__loader"}}),{c(){u(t.$$.fragment)},m(e,a){x(t,e,a),l=!0},i(e){l||(w(t.$$.fragment,e),l=!0)},o(e){y(t.$$.fragment,e),l=!1},d(e){j(t,e)}}}function W(e){let t,l,i;return{c(){t=c("button"),t.innerHTML='<navigation-control-tag--cross-24px></navigation-control-tag--cross-24px> \n <span class="mc-autocomplete__clear-text">Clear</span>',p(t,"class","mc-autocomplete__clear"),p(t,"type","button")},m(s,n){a(s,t,n),l||(i=v(t,"click",E(e[57])),l=!0)},p:m,d(e){e&&q(t),l=!1,i()}}}function I(e){let t,l,a;function i(t){e[58](t)}let s={items:JSON.stringify(e[31]),name:e[7],multiple:e[10],isfiltered:e[27],emptysearchlabel:e[11],maxwidth:e[0],datatextexpr:e[12],datavalueexpr:e[13],selectall:e[18],labelselectall:e[19],overlay:!0,width:e[0]};return void 0!==e[20]&&(s.value=e[20]),t=new G({props:s}),n.push((()=>o(t,"value",i))),t.$on("change",e[36]),t.$on("scrollend",e[40]),t.$on("select-all",e[41]),{c(){u(t.$$.fragment)},m(e,l){x(t,e,l),a=!0},p(e,a){const i={};1&a[1]&&(i.items=JSON.stringify(e[31])),128&a[0]&&(i.name=e[7]),1024&a[0]&&(i.multiple=e[10]),134217728&a[0]&&(i.isfiltered=e[27]),2048&a[0]&&(i.emptysearchlabel=e[11]),1&a[0]&&(i.maxwidth=e[0]),4096&a[0]&&(i.datatextexpr=e[12]),8192&a[0]&&(i.datavalueexpr=e[13]),262144&a[0]&&(i.selectall=e[18]),524288&a[0]&&(i.labelselectall=e[19]),1&a[0]&&(i.width=e[0]),!l&&1048576&a[0]&&(l=!0,i.value=e[20],k((()=>l=!1))),t.$set(i)},i(e){a||(w(t.$$.fragment,e),a=!0)},o(e){y(t.$$.fragment,e),a=!1},d(e){j(t,e)}}}function X(e){let t,l,i,s=e[28],n=[];for(let t=0;t<s.length;t+=1)n[t]=le(P(e,s,t));const o=e=>y(n[e],1,1,(()=>{n[e]=null}));let r=e[20].length>e[16]&&ae(e);return{c(){t=c("div");for(let e=0;e<n.length;e+=1)n[e].c();l=d(),r&&r.c(),p(t,"class","tags-selected")},m(e,s){a(e,t,s);for(let e=0;e<n.length;e+=1)n[e]&&n[e].m(t,null);f(t,l),r&&r.m(t,null),i=!0},p(e,a){if(302055432&a[0]|2048&a[1]){let i;for(s=e[28],i=0;i<s.length;i+=1){const o=P(e,s,i);n[i]?(n[i].p(o,a),w(n[i],1)):(n[i]=le(o),n[i].c(),w(n[i],1),n[i].m(t,l))}for(J(),i=s.length;i<n.length;i+=1)o(i);_()}e[20].length>e[16]?r?(r.p(e,a),1114112&a[0]&&w(r,1)):(r=ae(e),r.c(),w(r,1),r.m(t,null)):r&&(J(),y(r,1,1,(()=>{r=null})),_())},i(e){if(!i){for(let e=0;e<s.length;e+=1)w(n[e]);w(r),i=!0}},o(e){n=n.filter(Boolean);for(let e=0;e<n.length;e+=1)y(n[e]);y(r),i=!1},d(e){e&&q(t),L(n,e),r&&r.d()}}}function Z(e){let t,l,i,s;const n=[te,ee],o=[];function r(e,t){return e[3]?0:1}return l=r(e),i=o[l]=n[l](e),{c(){t=c("div"),i.c(),p(t,"class","tag-selected")},m(e,i){a(e,t,i),o[l].m(t,null),s=!0},p(e,a){let s=l;l=r(e),l===s?o[l].p(e,a):(J(),y(o[s],1,1,(()=>{o[s]=null})),_(),i=o[l],i?i.p(e,a):(i=o[l]=n[l](e),i.c()),w(i,1),i.m(t,null))},i(e){s||(w(i),s=!0)},o(e){y(i),s=!1},d(e){e&&q(t),o[l].d()}}}function ee(e){let t,l;let a={id:e[74].id||"",label:e[74].label,size:"s",type:"removable",dark:!1,disabled:!1,href:"",name:"",value:"",selected:!1};return t=new H({props:a}),e[59](t),t.$on("tag-removed",(function(){return e[60](e[74])})),{c(){u(t.$$.fragment)},m(e,a){x(t,e,a),l=!0},p(l,a){e=l;const i={};268435456&a[0]&&(i.id=e[74].id||""),268435456&a[0]&&(i.label=e[74].label),t.$set(i)},i(e){l||(w(t.$$.fragment,e),l=!0)},o(e){y(t.$$.fragment,e),l=!1},d(l){e[59](null),j(t,l)}}}function te(e){let t,l;return t=new H({props:{id:e[74].id||"",label:e[74].label,size:"s",type:"link",dark:!0,disabled:!1,href:"",name:"",value:"",selected:!1}}),{c(){u(t.$$.fragment)},m(e,a){x(t,e,a),l=!0},p(e,l){const a={};268435456&l[0]&&(a.id=e[74].id||""),268435456&l[0]&&(a.label=e[74].label),t.$set(a)},i(e){l||(w(t.$$.fragment,e),l=!0)},o(e){y(t.$$.fragment,e),l=!1},d(e){j(t,e)}}}function le(e){let t,l,i=e[78]<e[16]&&Z(e);return{c(){i&&i.c(),t=M()},m(e,s){i&&i.m(e,s),a(e,t,s),l=!0},p(e,l){e[78]<e[16]?i?(i.p(e,l),65536&l[0]&&w(i,1)):(i=Z(e),i.c(),w(i,1),i.m(t.parentNode,t)):i&&(J(),y(i,1,1,(()=>{i=null})),_())},i(e){l||(w(i),l=!0)},o(e){y(i),l=!1},d(e){i&&i.d(e),e&&q(t)}}}function ae(e){let t,l,i,s,n;return l=new H({props:{id:"id-tag",label:"("+e[20].length+") "+e[15]+" ",size:"s",type:"link",dark:!1,disabled:!1,href:"",name:"",value:"",selected:!1}}),{c(){t=c("div"),u(l.$$.fragment),p(t,"class","tag-selected")},m(o,r){a(o,t,r),x(l,t,null),i=!0,s||(n=v(t,"click",e[61]),s=!0)},p(e,t){const a={};1081344&t[0]&&(a.label="("+e[20].length+") "+e[15]+" "),l.$set(a)},i(e){i||(w(l.$$.fragment,e),i=!0)},o(e){y(l.$$.fragment,e),i=!1},d(e){e&&q(t),j(l),s=!1,n()}}}function ie(e){let t,l,i,s,n,o,r=e[28],d=[];for(let t=0;t<r.length;t+=1)d[t]=oe(K(e,r,t));return{c(){t=c("div"),l=c("m-layer"),i=c("small"),s=c("div");for(let e=0;e<d.length;e+=1)d[e].c();p(s,"class","tags-selected"),p(i,"slot","content"),R(l,"title",e[14]),R(l,"layertitletag","h3"),R(l,"isopen",e[29])},m(r,c){a(r,t,c),f(t,l),f(l,i),f(i,s);for(let e=0;e<d.length;e+=1)d[e]&&d[e].m(s,null);n||(o=v(l,"layer-closed",e[63]),n=!0)},p(e,t){if(268435464&t[0]|2048&t[1]){let l;for(r=e[28],l=0;l<r.length;l+=1){const a=K(e,r,l);d[l]?d[l].p(a,t):(d[l]=oe(a),d[l].c(),d[l].m(s,null))}for(;l<d.length;l+=1)d[l].d(1);d.length=r.length}16384&t[0]&&R(l,"title",e[14]),536870912&t[0]&&R(l,"isopen",e[29])},d(e){e&&q(t),L(d,e),n=!1,o()}}}function se(e){let t,l,i,s,n;function o(){return e[62](e[74])}return{c(){t=c("m-tag"),R(t,"id",l=e[74].id),R(t,"label",i=e[74].label),R(t,"size","s"),R(t,"type","removable")},m(e,l){a(e,t,l),s||(n=v(t,"tag-removed",o),s=!0)},p(a,s){e=a,268435456&s[0]&&l!==(l=e[74].id)&&R(t,"id",l),268435456&s[0]&&i!==(i=e[74].label)&&R(t,"label",i)},d(e){e&&q(t),s=!1,n()}}}function ne(e){let t,l,i;return{c(){t=c("m-tag"),R(t,"type","text"),R(t,"id",l=e[74].id),R(t,"label",i=e[74].label),R(t,"size","s")},m(e,l){a(e,t,l)},p(e,a){268435456&a[0]&&l!==(l=e[74].id)&&R(t,"id",l),268435456&a[0]&&i!==(i=e[74].label)&&R(t,"label",i)},d(e){e&&q(t)}}}function oe(e){let t,l;function i(e,t){return e[3]?ne:se}let s=i(e),n=s(e);return{c(){t=c("div"),n.c(),l=d(),p(t,"class","tag-selected")},m(e,i){a(e,t,i),n.m(t,null),f(t,l)},p(e,a){s===(s=i(e))&&n?n.p(e,a):(n.d(1),n=s(e),n&&(n.c(),n.m(t,l)))},d(e){e&&q(t),n.d()}}}function re(e){let t,l,i,s,C,N,O,T,E,L,M,R,U,Y,A,H,D,G,K,P=e[10]&&e[20].length>0&&!e[17]&&Q(e);function Z(t){e[53](t)}let ee={classinput:"mc-autocomplete__trigger",style:"padding-left: calc(2.9375rem + var(--autocomplete-tag-width))",name:e[6],placeholder:e[2],inputtype:"text",isinvalid:e[5],disabled:e[3],size:e[4],required:e[9],iconname:"navigation-display-search-24px",rightalign:!1,isvalid:!1,min:"",max:""};void 0!==e[30]&&(ee.value=e[30]),s=new F({props:ee}),n.push((()=>o(s,"value",Z))),s.$on("input",e[39]),s.$on("click",e[54]),s.$on("change",e[55]),s.$on("blur",e[56]);let te=e[8]&&V(),le=null!=e[30]&&""!=e[30]&&!e[3]&&W(e),ae=e[22]&&I(e),se=e[10]&&e[17]&&X(e),ne=e[10]&&e[17]&&ie(e),oe=[{class:"mc-autocomplete"},{style:H="--autocomplete-tag-width: "+e[26]+"; --autocomplete-width: "+e[0]+";"},e[23]],re={};for(let e=0;e<oe.length;e+=1)re=r(re,oe[e]);return{c(){t=c("div"),l=c("div"),P&&P.c(),i=d(),u(s.$$.fragment),N=d(),O=c("div"),te&&te.c(),T=d(),le&&le.c(),E=d(),ae&&ae.c(),L=d(),se&&se.c(),M=d(),R=c("span"),U=d(),Y=c("span"),A=d(),ne&&ne.c(),this.c=m,p(O,"class","mc-autocomplete__tools"),p(l,"class","mc-autocomplete__main"),p(R,"class","mc-autocomplete__loader"),h(R,"display","none"),p(Y,"class","mc-text-input mc-autocomplete__trigger"),h(Y,"display","none"),g(t,re),$(t,"mc-autocomplete--multi",e[10])},m(n,o){a(n,t,o),f(t,l),P&&P.m(l,null),f(l,i),x(s,l,null),f(l,N),f(l,O),te&&te.m(O,null),f(O,T),le&&le.m(O,null),f(t,E),ae&&ae.m(t,null),f(t,L),se&&se.m(t,null),f(t,M),f(t,R),f(t,U),f(t,Y),f(t,A),ne&&ne.m(t,null),e[64](t),D=!0,G||(K=[b(B.call(null,t)),v(t,"outclick",e[35])],G=!0)},p(e,a){e[10]&&e[20].length>0&&!e[17]?P?(P.p(e,a),1180672&a[0]&&w(P,1)):(P=Q(e),P.c(),w(P,1),P.m(l,i)):P&&(J(),y(P,1,1,(()=>{P=null})),_());const n={};64&a[0]&&(n.name=e[6]),4&a[0]&&(n.placeholder=e[2]),32&a[0]&&(n.isinvalid=e[5]),8&a[0]&&(n.disabled=e[3]),16&a[0]&&(n.size=e[4]),512&a[0]&&(n.required=e[9]),!C&&1073741824&a[0]&&(C=!0,n.value=e[30],k((()=>C=!1))),s.$set(n),e[8]?te?256&a[0]&&w(te,1):(te=V(),te.c(),w(te,1),te.m(O,T)):te&&(J(),y(te,1,1,(()=>{te=null})),_()),null==e[30]||""==e[30]||e[3]?le&&(le.d(1),le=null):le?le.p(e,a):(le=W(e),le.c(),le.m(O,null)),e[22]?ae?(ae.p(e,a),4194304&a[0]&&w(ae,1)):(ae=I(e),ae.c(),w(ae,1),ae.m(t,L)):ae&&(J(),y(ae,1,1,(()=>{ae=null})),_()),e[10]&&e[17]?se?(se.p(e,a),132096&a[0]&&w(se,1)):(se=X(e),se.c(),w(se,1),se.m(t,M)):se&&(J(),y(se,1,1,(()=>{se=null})),_()),e[10]&&e[17]?ne?ne.p(e,a):(ne=ie(e),ne.c(),ne.m(t,null)):ne&&(ne.d(1),ne=null),g(t,re=z(oe,[{class:"mc-autocomplete"},(!D||67108865&a[0]&&H!==(H="--autocomplete-tag-width: "+e[26]+"; --autocomplete-width: "+e[0]+";"))&&{style:H},8388608&a[0]&&e[23]])),$(t,"mc-autocomplete--multi",e[10])},i(e){D||(w(P),w(s.$$.fragment,e),w(te),w(ae),w(se),D=!0)},o(e){y(P),y(s.$$.fragment,e),y(te),y(ae),y(se),D=!1},d(l){l&&q(t),P&&P.d(),j(s),te&&te.d(),le&&le.d(),ae&&ae.d(),se&&se.d(),ne&&ne.d(),e[64](null),G=!1,S(K)}}}function ce(e,t,l){let a,i,s,o,c,d,u;const m=["maxwidth","tagid","taglabel","placeholder","filter","nofilter","disabled","size","isinvalid","inputvalue","id","name","loading","required","items","value","open","multiple","emptysearchlabel","datatextexpr","datavalueexpr","nosort","layertitle","showmoretagslabel","maxnumbertoshowtags","alltags","selectall","labelselectall"];let p,h=C(t,m),{maxwidth:g="100%"}=t,{tagid:$}=t,{taglabel:f=""}=t,{placeholder:x}=t,{filter:b=!0}=t,{nofilter:v=!1}=t,{disabled:w=!1}=t,{size:y="m"}=t,{isinvalid:_}=t,{inputvalue:k}=t,{id:z}=t,{name:q}=t,{loading:j=!1}=t,{required:S=!1}=t,{items:E}=t,{value:J}=t,{open:L=!1}=t,{multiple:M=!1}=t,{emptysearchlabel:R="No results found"}=t,{datatextexpr:B="label"}=t,{datavalueexpr:H="value"}=t,{nosort:D=!1}=t,{layertitle:F="Title layer"}=t,{showmoretagslabel:G="Show more"}=t,{maxnumbertoshowtags:K=12}=t,{alltags:P=!1}=t,{selectall:Q=!1}=t,{labelselectall:V="Select all"}=t;const W=Math.random();let I,X,Z,ee=new A(N(),O()),te="0px",le=!1,ae=[],ie=null;function se(){w||(l(20,o=M?[]:""),ne(),ee.dispatch("clear",!0))}function ne(){l(22,d=!1),M&&!D?function(){Z=i;const e=oe();Z.sort(((t,l)=>{const a=e.includes(t),i=e.includes(l);return a===i?t[H]-l[H]:a<i?1:-1})),l(31,s=Z)}():l(31,s=i)}function oe(e){const t=e||o;return i.filter((e=>M?t.includes(e[H]):t===e[H]))}function re(){l(29,ie=!0)}function ce(){l(29,ie=null)}function de(e){l(20,o=o.filter((t=>t!==e))),ee.dispatch("onchange",o)}return e.$$set=e=>{t=r(r({},t),T(e)),l(73,h=C(t,m)),"maxwidth"in e&&l(0,g=e.maxwidth),"tagid"in e&&l(1,$=e.tagid),"taglabel"in e&&l(43,f=e.taglabel),"placeholder"in e&&l(2,x=e.placeholder),"filter"in e&&l(44,b=e.filter),"nofilter"in e&&l(45,v=e.nofilter),"disabled"in e&&l(3,w=e.disabled),"size"in e&&l(4,y=e.size),"isinvalid"in e&&l(5,_=e.isinvalid),"inputvalue"in e&&l(46,k=e.inputvalue),"id"in e&&l(6,z=e.id),"name"in e&&l(7,q=e.name),"loading"in e&&l(8,j=e.loading),"required"in e&&l(9,S=e.required),"items"in e&&l(47,E=e.items),"value"in e&&l(48,J=e.value),"open"in e&&l(49,L=e.open),"multiple"in e&&l(10,M=e.multiple),"emptysearchlabel"in e&&l(11,R=e.emptysearchlabel),"datatextexpr"in e&&l(12,B=e.datatextexpr),"datavalueexpr"in e&&l(13,H=e.datavalueexpr),"nosort"in e&&l(50,D=e.nosort),"layertitle"in e&&l(14,F=e.layertitle),"showmoretagslabel"in e&&l(15,G=e.showmoretagslabel),"maxnumbertoshowtags"in e&&l(16,K=e.maxnumbertoshowtags),"alltags"in e&&l(17,P=e.alltags),"selectall"in e&&l(18,Q=e.selectall),"labelselectall"in e&&l(19,V=e.labelselectall)},e.$$.update=()=>{if(32768&e.$$.dirty[1]&&l(30,a=k),65536&e.$$.dirty[1]&&l(21,i=E?JSON.parse(E):[]),2097152&e.$$.dirty[0]&&l(31,s=i),1024&e.$$.dirty[0]|131072&e.$$.dirty[1]&&l(20,o=!J&&M?[]:J?JSON.parse(J):J),1048576&e.$$.dirty[0]|4096&e.$$.dirty[1]&&l(32,c=()=>o.length.toString()+" "+f),1048576&e.$$.dirty[0]&&async function(e){try{if(await U(),l(28,ae=oe(e)),M)l(51,X=e);else{const e=ae.map((e=>e[B]));l(30,a=e.join(", "))}}catch(e){console.error(e)}}(o),1048576&e.$$.dirty[1]&&async function(e){var t;try{await U(),l(26,te=I&&e&&e.length?`${null===(t=null==p?void 0:p.querySelector(".mc-tag-removable"))||void 0===t?void 0:t.clientWidth}px`:"0px")}catch(e){console.error(e)}}(X),262144&e.$$.dirty[1]&&l(22,d=L),4194304&e.$$.dirty[0]){const e=d?"open":"close";ee.dispatch(e,d)}l(23,u=Object.assign({},h)),8388608&e.$$.dirty[0]&&delete u.class},[g,$,x,w,y,_,z,q,j,S,M,R,B,H,F,G,K,P,Q,V,o,i,d,u,p,I,te,le,ae,ie,a,s,c,W,se,ne,function(){ee.dispatch("onchange",o),M||ne()},re,ce,function(e){const t=e.target.value;!function(e){ee.dispatch("oninput",e)}(t),function(e){!v&&b&&(e.length?l(31,s=i.filter((t=>t[B].toUpperCase().includes(e.toUpperCase())))):l(31,s=i),l(27,le=!s.length),ee.dispatch("onfilter",s))}(t)},function(){ee.dispatch("scrollend",!0)},function(e){ee.dispatch("select-all",e.detail)},de,f,b,v,k,E,J,L,D,X,function(e){n[e?"unshift":"push"]((()=>{I=e,l(25,I)}))},function(e){a=e,l(30,a),l(46,k)},()=>l(22,d=!0),function(t){Y.call(this,e,t)},function(t){Y.call(this,e,t)},()=>{l(30,a=""),l(31,s=i),l(27,le=!1),M||se()},function(e){o=e,l(20,o),l(48,J),l(10,M)},function(e){n[e?"unshift":"push"]((()=>{I=e,l(25,I)}))},e=>de(e.id),()=>re(),e=>de(e.id),()=>ce(),function(e){n[e?"unshift":"push"]((()=>{p=e,l(24,p)}))}]}class de extends e{constructor(e){super();const n=document.createElement("style");n.textContent=".mc-autocomplete{-ms-flex-item-align:start;align-self:start;position:relative;min-width:var(--autocomplete-min-width, 6rem);max-width:var(--autocomplete-width, auto);width:100%}.mc-autocomplete__main{position:relative}.mc-autocomplete__tag,.mc-autocomplete__tools{position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);z-index:var(--autocomplete-tag-z-index, 2)}.mc-autocomplete__tag{left:2.75rem}.mc-autocomplete__trigger{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-autocomplete__tools{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#ffffff;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.5rem;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;right:0.75rem}.mc-autocomplete__clear{margin:0;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;-webkit-transition:-webkit-box-shadow 150ms ease;transition:-webkit-box-shadow 150ms ease;transition:box-shadow 150ms ease;transition:box-shadow 150ms ease, -webkit-box-shadow 150ms ease;background:none;border-radius:50%}.mc-autocomplete__clear:focus{-webkit-box-shadow:0 0 0 2px #758992;box-shadow:0 0 0 2px #758992}.mc-autocomplete__clear,.mc-autocomplete__clear-icon{height:1.5rem;width:1.5rem}.mc-autocomplete__clear-icon{fill:#666666}.mc-autocomplete__clear-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.mc-autocomplete__error{font-size:0.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:0.25rem}.mc-autocomplete--multi .mc-autocomplete__trigger{padding-left:calc(2.9375rem + var(--autocomplete-tag-width, 0px))}.mc-autocomplete{min-width:auto}.mc-autocomplete__tag{position:absolute !important}.mc-autocomplete--multi .mc-autocomplete__trigger{padding-left:calc(2.9375rem + var(--autocomplete-tag-width)) !important}.tags-selected{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-wrap:wrap;flex-wrap:wrap}.tag-selected{margin-top:1em;margin-left:5px;margin-right:5px}.mc-listbox--overlay{top:calc(100% + 4px)}",this.shadowRoot.appendChild(n),t(this,{target:this.shadowRoot,props:l(this.attributes),customElement:!0},ce,re,s,{maxwidth:0,tagid:1,taglabel:43,placeholder:2,filter:44,nofilter:45,disabled:3,size:4,isinvalid:5,inputvalue:46,id:6,name:7,loading:8,required:9,items:47,value:48,open:49,multiple:10,emptysearchlabel:11,datatextexpr:12,datavalueexpr:13,nosort:50,layertitle:14,showmoretagslabel:15,maxnumbertoshowtags:16,alltags:17,selectall:18,labelselectall:19},null,[-1,-1,-1]),e&&(e.target&&a(e.target,this,e.anchor),e.props&&(this.$set(e.props),i()))}static get observedAttributes(){return["maxwidth","tagid","taglabel","placeholder","filter","nofilter","disabled","size","isinvalid","inputvalue","id","name","loading","required","items","value","open","multiple","emptysearchlabel","datatextexpr","datavalueexpr","nosort","layertitle","showmoretagslabel","maxnumbertoshowtags","alltags","selectall","labelselectall"]}get maxwidth(){return this.$$.ctx[0]}set maxwidth(e){this.$$set({maxwidth:e}),i()}get tagid(){return this.$$.ctx[1]}set tagid(e){this.$$set({tagid:e}),i()}get taglabel(){return this.$$.ctx[43]}set taglabel(e){this.$$set({taglabel:e}),i()}get placeholder(){return this.$$.ctx[2]}set placeholder(e){this.$$set({placeholder:e}),i()}get filter(){return this.$$.ctx[44]}set filter(e){this.$$set({filter:e}),i()}get nofilter(){return this.$$.ctx[45]}set nofilter(e){this.$$set({nofilter:e}),i()}get disabled(){return this.$$.ctx[3]}set disabled(e){this.$$set({disabled:e}),i()}get size(){return this.$$.ctx[4]}set size(e){this.$$set({size:e}),i()}get isinvalid(){return this.$$.ctx[5]}set isinvalid(e){this.$$set({isinvalid:e}),i()}get inputvalue(){return this.$$.ctx[46]}set inputvalue(e){this.$$set({inputvalue:e}),i()}get id(){return this.$$.ctx[6]}set id(e){this.$$set({id:e}),i()}get name(){return this.$$.ctx[7]}set name(e){this.$$set({name:e}),i()}get loading(){return this.$$.ctx[8]}set loading(e){this.$$set({loading:e}),i()}get required(){return this.$$.ctx[9]}set required(e){this.$$set({required:e}),i()}get items(){return this.$$.ctx[47]}set items(e){this.$$set({items:e}),i()}get value(){return this.$$.ctx[48]}set value(e){this.$$set({value:e}),i()}get open(){return this.$$.ctx[49]}set open(e){this.$$set({open:e}),i()}get multiple(){return this.$$.ctx[10]}set multiple(e){this.$$set({multiple:e}),i()}get emptysearchlabel(){return this.$$.ctx[11]}set emptysearchlabel(e){this.$$set({emptysearchlabel:e}),i()}get datatextexpr(){return this.$$.ctx[12]}set datatextexpr(e){this.$$set({datatextexpr:e}),i()}get datavalueexpr(){return this.$$.ctx[13]}set datavalueexpr(e){this.$$set({datavalueexpr:e}),i()}get nosort(){return this.$$.ctx[50]}set nosort(e){this.$$set({nosort:e}),i()}get layertitle(){return this.$$.ctx[14]}set layertitle(e){this.$$set({layertitle:e}),i()}get showmoretagslabel(){return this.$$.ctx[15]}set showmoretagslabel(e){this.$$set({showmoretagslabel:e}),i()}get maxnumbertoshowtags(){return this.$$.ctx[16]}set maxnumbertoshowtags(e){this.$$set({maxnumbertoshowtags:e}),i()}get alltags(){return this.$$.ctx[17]}set alltags(e){this.$$set({alltags:e}),i()}get selectall(){return this.$$.ctx[18]}set selectall(e){this.$$set({selectall:e}),i()}get labelselectall(){return this.$$.ctx[19]}set labelselectall(e){this.$$set({labelselectall:e}),i()}}export{de as default};
|
|
1
|
+
import{S as e,i as t,a as l,b as a,f as i,s,K as n,L as o,c as r,e as c,d as u,E as d,n as m,h as p,M as h,j as g,t as $,k as f,F as b,N as x,x as v,B as w,z as y,A as _,O as z,l as k,m as q,G as j,P as S,o as C,q as N,r as O,u as T,Q as E,C as J,R as L,T as M,D as R,U,V as Y}from"../../index-c222d0b7.js";import{E as A}from"../../EventHandler-f7ee47ca.js";import{c as B}from"../../ClickOutside-63071e7a.js";import H from"../tag/Tag.nested.js";import D from"../loader/Loader.nested.js";import F from"../textinput/Textinput.nested.js";import G from"../listbox/Listbox.nested.js";function K(e,t,l){const a=e.slice();return a[76]=t[l],a}function P(e,t,l){const a=e.slice();return a[76]=t[l],a[80]=l,a}function Q(e){let t,l,i,s={id:e[1]?e[1]:`autocompleteTag-${e[34]}`,label:e[33](),size:"s",type:"removable",dark:!1,disabled:!1,href:"",name:"",value:"",selected:!1};return l=new H({props:s}),e[53](l),l.$on("tag-removed",e[35]),{c(){t=c("div"),d(l.$$.fragment),p(t,"class","mc-autocomplete__tag")},m(e,s){a(e,t,s),b(l,t,null),i=!0},p(e,t){const a={};2&t[0]&&(a.id=e[1]?e[1]:`autocompleteTag-${e[34]}`),4&t[1]&&(a.label=e[33]()),l.$set(a)},i(e){i||(w(l.$$.fragment,e),i=!0)},o(e){y(l.$$.fragment,e),i=!1},d(a){a&&q(t),e[53](null),j(l)}}}function V(e){let t,l;return t=new D({props:{size:"s",theme:"primary",text:"",class:"mc-autocomplete__loader"}}),{c(){d(t.$$.fragment)},m(e,a){b(t,e,a),l=!0},i(e){l||(w(t.$$.fragment,e),l=!0)},o(e){y(t.$$.fragment,e),l=!1},d(e){j(t,e)}}}function W(e){let t,l,i;return{c(){t=c("button"),t.innerHTML='<navigation-control-tag--cross-24px></navigation-control-tag--cross-24px> \n <span class="mc-autocomplete__clear-text">Clear</span>',p(t,"class","mc-autocomplete__clear"),p(t,"type","button")},m(s,n){a(s,t,n),l||(i=v(t,"click",E(e[59])),l=!0)},p:m,d(e){e&&q(t),l=!1,i()}}}function I(e){let t,l,a;function i(t){e[60](t)}let s={items:JSON.stringify(e[32]),name:e[7],multiple:e[10],isfiltered:e[28],emptysearchlabel:e[11],maxwidth:e[0],datatextexpr:e[12],datavalueexpr:e[13],selectall:e[18],labelselectall:e[19],labelautosize:e[20],overlay:!0,width:e[0]};return void 0!==e[21]&&(s.value=e[21]),t=new G({props:s}),n.push((()=>o(t,"value",i))),t.$on("change",e[37]),t.$on("scrollend",e[41]),t.$on("select-all",e[42]),{c(){d(t.$$.fragment)},m(e,l){b(t,e,l),a=!0},p(e,a){const i={};2&a[1]&&(i.items=JSON.stringify(e[32])),128&a[0]&&(i.name=e[7]),1024&a[0]&&(i.multiple=e[10]),268435456&a[0]&&(i.isfiltered=e[28]),2048&a[0]&&(i.emptysearchlabel=e[11]),1&a[0]&&(i.maxwidth=e[0]),4096&a[0]&&(i.datatextexpr=e[12]),8192&a[0]&&(i.datavalueexpr=e[13]),262144&a[0]&&(i.selectall=e[18]),524288&a[0]&&(i.labelselectall=e[19]),1048576&a[0]&&(i.labelautosize=e[20]),1&a[0]&&(i.width=e[0]),!l&&2097152&a[0]&&(l=!0,i.value=e[21],z((()=>l=!1))),t.$set(i)},i(e){a||(w(t.$$.fragment,e),a=!0)},o(e){y(t.$$.fragment,e),a=!1},d(e){j(t,e)}}}function X(e){let t,l,i,s=e[29],n=[];for(let t=0;t<s.length;t+=1)n[t]=le(P(e,s,t));const o=e=>y(n[e],1,1,(()=>{n[e]=null}));let r=e[21].length>e[16]&&ae(e);return{c(){t=c("div");for(let e=0;e<n.length;e+=1)n[e].c();l=u(),r&&r.c(),p(t,"class","tags-selected")},m(e,s){a(e,t,s);for(let e=0;e<n.length;e+=1)n[e]&&n[e].m(t,null);f(t,l),r&&r.m(t,null),i=!0},p(e,a){if(604045320&a[0]|4096&a[1]){let i;for(s=e[29],i=0;i<s.length;i+=1){const o=P(e,s,i);n[i]?(n[i].p(o,a),w(n[i],1)):(n[i]=le(o),n[i].c(),w(n[i],1),n[i].m(t,l))}for(J(),i=s.length;i<n.length;i+=1)o(i);_()}e[21].length>e[16]?r?(r.p(e,a),2162688&a[0]&&w(r,1)):(r=ae(e),r.c(),w(r,1),r.m(t,null)):r&&(J(),y(r,1,1,(()=>{r=null})),_())},i(e){if(!i){for(let e=0;e<s.length;e+=1)w(n[e]);w(r),i=!0}},o(e){n=n.filter(Boolean);for(let e=0;e<n.length;e+=1)y(n[e]);y(r),i=!1},d(e){e&&q(t),L(n,e),r&&r.d()}}}function Z(e){let t,l,i,s;const n=[te,ee],o=[];function r(e,t){return e[3]?0:1}return l=r(e),i=o[l]=n[l](e),{c(){t=c("div"),i.c(),p(t,"class","tag-selected")},m(e,i){a(e,t,i),o[l].m(t,null),s=!0},p(e,a){let s=l;l=r(e),l===s?o[l].p(e,a):(J(),y(o[s],1,1,(()=>{o[s]=null})),_(),i=o[l],i?i.p(e,a):(i=o[l]=n[l](e),i.c()),w(i,1),i.m(t,null))},i(e){s||(w(i),s=!0)},o(e){y(i),s=!1},d(e){e&&q(t),o[l].d()}}}function ee(e){let t,l;let a={id:e[76].id||"",label:e[76].label,size:"s",type:"removable",dark:!1,disabled:!1,href:"",name:"",value:"",selected:!1};return t=new H({props:a}),e[61](t),t.$on("tag-removed",(function(){return e[62](e[76])})),{c(){d(t.$$.fragment)},m(e,a){b(t,e,a),l=!0},p(l,a){e=l;const i={};536870912&a[0]&&(i.id=e[76].id||""),536870912&a[0]&&(i.label=e[76].label),t.$set(i)},i(e){l||(w(t.$$.fragment,e),l=!0)},o(e){y(t.$$.fragment,e),l=!1},d(l){e[61](null),j(t,l)}}}function te(e){let t,l;return t=new H({props:{id:e[76].id||"",label:e[76].label,size:"s",type:"link",dark:!0,disabled:!1,href:"",name:"",value:"",selected:!1}}),{c(){d(t.$$.fragment)},m(e,a){b(t,e,a),l=!0},p(e,l){const a={};536870912&l[0]&&(a.id=e[76].id||""),536870912&l[0]&&(a.label=e[76].label),t.$set(a)},i(e){l||(w(t.$$.fragment,e),l=!0)},o(e){y(t.$$.fragment,e),l=!1},d(e){j(t,e)}}}function le(e){let t,l,i=e[80]<e[16]&&Z(e);return{c(){i&&i.c(),t=M()},m(e,s){i&&i.m(e,s),a(e,t,s),l=!0},p(e,l){e[80]<e[16]?i?(i.p(e,l),65536&l[0]&&w(i,1)):(i=Z(e),i.c(),w(i,1),i.m(t.parentNode,t)):i&&(J(),y(i,1,1,(()=>{i=null})),_())},i(e){l||(w(i),l=!0)},o(e){y(i),l=!1},d(e){i&&i.d(e),e&&q(t)}}}function ae(e){let t,l,i,s,n;return l=new H({props:{id:"id-tag",label:"("+e[21].length+") "+e[15]+" ",size:"s",type:"link",dark:!1,disabled:!1,href:"",name:"",value:"",selected:!1}}),{c(){t=c("div"),d(l.$$.fragment),p(t,"class","tag-selected")},m(o,r){a(o,t,r),b(l,t,null),i=!0,s||(n=v(t,"click",e[63]),s=!0)},p(e,t){const a={};2129920&t[0]&&(a.label="("+e[21].length+") "+e[15]+" "),l.$set(a)},i(e){i||(w(l.$$.fragment,e),i=!0)},o(e){y(l.$$.fragment,e),i=!1},d(e){e&&q(t),j(l),s=!1,n()}}}function ie(e){let t,l,i,s,n,o,r=e[29],u=[];for(let t=0;t<r.length;t+=1)u[t]=oe(K(e,r,t));return{c(){t=c("div"),l=c("m-layer"),i=c("small"),s=c("div");for(let e=0;e<u.length;e+=1)u[e].c();p(s,"class","tags-selected"),p(i,"slot","content"),R(l,"title",e[14]),R(l,"layertitletag","h3"),R(l,"isopen",e[30])},m(r,c){a(r,t,c),f(t,l),f(l,i),f(i,s);for(let e=0;e<u.length;e+=1)u[e]&&u[e].m(s,null);n||(o=v(l,"layer-closed",e[65]),n=!0)},p(e,t){if(536870920&t[0]|4096&t[1]){let l;for(r=e[29],l=0;l<r.length;l+=1){const a=K(e,r,l);u[l]?u[l].p(a,t):(u[l]=oe(a),u[l].c(),u[l].m(s,null))}for(;l<u.length;l+=1)u[l].d(1);u.length=r.length}16384&t[0]&&R(l,"title",e[14]),1073741824&t[0]&&R(l,"isopen",e[30])},d(e){e&&q(t),L(u,e),n=!1,o()}}}function se(e){let t,l,i,s,n;function o(){return e[64](e[76])}return{c(){t=c("m-tag"),R(t,"id",l=e[76].id),R(t,"label",i=e[76].label),R(t,"size","s"),R(t,"type","removable")},m(e,l){a(e,t,l),s||(n=v(t,"tag-removed",o),s=!0)},p(a,s){e=a,536870912&s[0]&&l!==(l=e[76].id)&&R(t,"id",l),536870912&s[0]&&i!==(i=e[76].label)&&R(t,"label",i)},d(e){e&&q(t),s=!1,n()}}}function ne(e){let t,l,i;return{c(){t=c("m-tag"),R(t,"type","text"),R(t,"id",l=e[76].id),R(t,"label",i=e[76].label),R(t,"size","s")},m(e,l){a(e,t,l)},p(e,a){536870912&a[0]&&l!==(l=e[76].id)&&R(t,"id",l),536870912&a[0]&&i!==(i=e[76].label)&&R(t,"label",i)},d(e){e&&q(t)}}}function oe(e){let t,l;function i(e,t){return e[3]?ne:se}let s=i(e),n=s(e);return{c(){t=c("div"),n.c(),l=u(),p(t,"class","tag-selected")},m(e,i){a(e,t,i),n.m(t,null),f(t,l)},p(e,a){s===(s=i(e))&&n?n.p(e,a):(n.d(1),n=s(e),n&&(n.c(),n.m(t,l)))},d(e){e&&q(t),n.d()}}}function re(e){let t,l,i,s,C,N,O,T,E,L,M,R,U,Y,A,H,D,G,K,P=e[10]&&e[21].length>0&&!e[17]&&Q(e);function Z(t){e[54](t)}let ee={classinput:"mc-autocomplete__trigger",style:"padding-left: calc(2.9375rem + var(--autocomplete-tag-width))",name:e[6],placeholder:e[2],inputtype:"text",isinvalid:e[5],disabled:e[3],size:e[4],required:e[9],iconname:"navigation-display-search-24px",rightalign:!1,isvalid:!1,min:"",max:""};void 0!==e[31]&&(ee.value=e[31]),s=new F({props:ee}),n.push((()=>o(s,"value",Z))),s.$on("input",e[40]),s.$on("click",e[55]),s.$on("change",e[56]),s.$on("blur",e[57]),s.$on("keydown",e[58]);let te=e[8]&&V(),le=null!=e[31]&&""!=e[31]&&!e[3]&&W(e),ae=e[23]&&I(e),se=e[10]&&e[17]&&X(e),ne=e[10]&&e[17]&&ie(e),oe=[{class:"mc-autocomplete"},{style:H="--autocomplete-tag-width: "+e[27]+"; --autocomplete-width: "+e[0]+";"},e[24]],re={};for(let e=0;e<oe.length;e+=1)re=r(re,oe[e]);return{c(){t=c("div"),l=c("div"),P&&P.c(),i=u(),d(s.$$.fragment),N=u(),O=c("div"),te&&te.c(),T=u(),le&&le.c(),E=u(),ae&&ae.c(),L=u(),se&&se.c(),M=u(),R=c("span"),U=u(),Y=c("span"),A=u(),ne&&ne.c(),this.c=m,p(O,"class","mc-autocomplete__tools"),p(l,"class","mc-autocomplete__main"),p(R,"class","mc-autocomplete__loader"),h(R,"display","none"),p(Y,"class","mc-text-input mc-autocomplete__trigger"),h(Y,"display","none"),g(t,re),$(t,"mc-autocomplete--multi",e[10])},m(n,o){a(n,t,o),f(t,l),P&&P.m(l,null),f(l,i),b(s,l,null),f(l,N),f(l,O),te&&te.m(O,null),f(O,T),le&&le.m(O,null),f(t,E),ae&&ae.m(t,null),f(t,L),se&&se.m(t,null),f(t,M),f(t,R),f(t,U),f(t,Y),f(t,A),ne&&ne.m(t,null),e[66](t),D=!0,G||(K=[x(B.call(null,t)),v(t,"outclick",e[36])],G=!0)},p(e,a){e[10]&&e[21].length>0&&!e[17]?P?(P.p(e,a),2229248&a[0]&&w(P,1)):(P=Q(e),P.c(),w(P,1),P.m(l,i)):P&&(J(),y(P,1,1,(()=>{P=null})),_());const n={};64&a[0]&&(n.name=e[6]),4&a[0]&&(n.placeholder=e[2]),32&a[0]&&(n.isinvalid=e[5]),8&a[0]&&(n.disabled=e[3]),16&a[0]&&(n.size=e[4]),512&a[0]&&(n.required=e[9]),!C&&1&a[1]&&(C=!0,n.value=e[31],z((()=>C=!1))),s.$set(n),e[8]?te?256&a[0]&&w(te,1):(te=V(),te.c(),w(te,1),te.m(O,T)):te&&(J(),y(te,1,1,(()=>{te=null})),_()),null==e[31]||""==e[31]||e[3]?le&&(le.d(1),le=null):le?le.p(e,a):(le=W(e),le.c(),le.m(O,null)),e[23]?ae?(ae.p(e,a),8388608&a[0]&&w(ae,1)):(ae=I(e),ae.c(),w(ae,1),ae.m(t,L)):ae&&(J(),y(ae,1,1,(()=>{ae=null})),_()),e[10]&&e[17]?se?(se.p(e,a),132096&a[0]&&w(se,1)):(se=X(e),se.c(),w(se,1),se.m(t,M)):se&&(J(),y(se,1,1,(()=>{se=null})),_()),e[10]&&e[17]?ne?ne.p(e,a):(ne=ie(e),ne.c(),ne.m(t,null)):ne&&(ne.d(1),ne=null),g(t,re=k(oe,[{class:"mc-autocomplete"},(!D||134217729&a[0]&&H!==(H="--autocomplete-tag-width: "+e[27]+"; --autocomplete-width: "+e[0]+";"))&&{style:H},16777216&a[0]&&e[24]])),$(t,"mc-autocomplete--multi",e[10])},i(e){D||(w(P),w(s.$$.fragment,e),w(te),w(ae),w(se),D=!0)},o(e){y(P),y(s.$$.fragment,e),y(te),y(ae),y(se),D=!1},d(l){l&&q(t),P&&P.d(),j(s),te&&te.d(),le&&le.d(),ae&&ae.d(),se&&se.d(),ne&&ne.d(),e[66](null),G=!1,S(K)}}}function ce(e,t,l){let a,i,s,o,c,u,d;const m=["maxwidth","tagid","taglabel","placeholder","filter","nofilter","disabled","size","isinvalid","inputvalue","id","name","loading","required","items","value","open","multiple","emptysearchlabel","datatextexpr","datavalueexpr","nosort","layertitle","showmoretagslabel","maxnumbertoshowtags","alltags","selectall","labelselectall","labelautosize"];let p,h=C(t,m),{maxwidth:g="100%"}=t,{tagid:$}=t,{taglabel:f=""}=t,{placeholder:b}=t,{filter:x=!0}=t,{nofilter:v=!1}=t,{disabled:w=!1}=t,{size:y="m"}=t,{isinvalid:_}=t,{inputvalue:z}=t,{id:k}=t,{name:q}=t,{loading:j=!1}=t,{required:S=!1}=t,{items:E}=t,{value:J}=t,{open:L=!1}=t,{multiple:M=!1}=t,{emptysearchlabel:R="No results found"}=t,{datatextexpr:B="label"}=t,{datavalueexpr:H="value"}=t,{nosort:D=!1}=t,{layertitle:F="Title layer"}=t,{showmoretagslabel:G="Show more"}=t,{maxnumbertoshowtags:K=12}=t,{alltags:P=!1}=t,{selectall:Q=!1}=t,{labelselectall:V="Select all"}=t,{labelautosize:W=!1}=t;const I=Math.random();let X,Z,ee,te=new A(N(),O()),le="0px",ae=!1,ie=[],se=null;function ne(){w||(l(21,o=M?[]:""),oe(),te.dispatch("clear",!0))}function oe(){l(23,u=!1),M&&!D?function(){ee=i;const e=re();ee.sort(((t,l)=>{const a=e.includes(t),i=e.includes(l);return a===i?t[H]-l[H]:a<i?1:-1})),l(32,s=ee)}():l(32,s=i)}function re(e){const t=e||o;return i.filter((e=>M?t.includes(e[H]):t===e[H]))}function ce(){l(30,se=!0)}function ue(){l(30,se=null)}function de(e){l(21,o=o.filter((t=>t!==e))),te.dispatch("onchange",o)}return e.$$set=e=>{t=r(r({},t),T(e)),l(75,h=C(t,m)),"maxwidth"in e&&l(0,g=e.maxwidth),"tagid"in e&&l(1,$=e.tagid),"taglabel"in e&&l(44,f=e.taglabel),"placeholder"in e&&l(2,b=e.placeholder),"filter"in e&&l(45,x=e.filter),"nofilter"in e&&l(46,v=e.nofilter),"disabled"in e&&l(3,w=e.disabled),"size"in e&&l(4,y=e.size),"isinvalid"in e&&l(5,_=e.isinvalid),"inputvalue"in e&&l(47,z=e.inputvalue),"id"in e&&l(6,k=e.id),"name"in e&&l(7,q=e.name),"loading"in e&&l(8,j=e.loading),"required"in e&&l(9,S=e.required),"items"in e&&l(48,E=e.items),"value"in e&&l(49,J=e.value),"open"in e&&l(50,L=e.open),"multiple"in e&&l(10,M=e.multiple),"emptysearchlabel"in e&&l(11,R=e.emptysearchlabel),"datatextexpr"in e&&l(12,B=e.datatextexpr),"datavalueexpr"in e&&l(13,H=e.datavalueexpr),"nosort"in e&&l(51,D=e.nosort),"layertitle"in e&&l(14,F=e.layertitle),"showmoretagslabel"in e&&l(15,G=e.showmoretagslabel),"maxnumbertoshowtags"in e&&l(16,K=e.maxnumbertoshowtags),"alltags"in e&&l(17,P=e.alltags),"selectall"in e&&l(18,Q=e.selectall),"labelselectall"in e&&l(19,V=e.labelselectall),"labelautosize"in e&&l(20,W=e.labelautosize)},e.$$.update=()=>{if(65536&e.$$.dirty[1]&&l(31,a=z),131072&e.$$.dirty[1]&&l(22,i=E?JSON.parse(E):[]),4194304&e.$$.dirty[0]&&l(32,s=i),1024&e.$$.dirty[0]|262144&e.$$.dirty[1]&&l(21,o=!J&&M?[]:J?JSON.parse(J):J),2097152&e.$$.dirty[0]|8192&e.$$.dirty[1]&&l(33,c=()=>o.length.toString()+" "+f),2097152&e.$$.dirty[0]&&async function(e){try{if(await U(),l(29,ie=re(e)),M)l(52,Z=e);else{const e=ie.map((e=>e[B]));l(31,a=e.join(", "))}}catch(e){console.error(e)}}(o),2097152&e.$$.dirty[1]&&async function(e){var t;try{await U(),l(27,le=X&&e&&e.length?`${null===(t=null==p?void 0:p.querySelector(".mc-tag-removable"))||void 0===t?void 0:t.clientWidth}px`:"0px")}catch(e){console.error(e)}}(Z),524288&e.$$.dirty[1]&&l(23,u=L),8388608&e.$$.dirty[0]){const e=u?"open":"close";te.dispatch(e,u)}l(24,d=Object.assign({},h)),16777216&e.$$.dirty[0]&&delete d.class},[g,$,b,w,y,_,k,q,j,S,M,R,B,H,F,G,K,P,Q,V,W,o,i,u,d,p,X,le,ae,ie,se,a,s,c,I,ne,oe,function(){te.dispatch("onchange",o),M||oe()},ce,ue,function(e){const t=e.target.value;!function(e){te.dispatch("oninput",e)}(t),function(e){!v&&x&&(e.length?l(32,s=i.filter((t=>t[B].toUpperCase().includes(e.toUpperCase())))):l(32,s=i),l(28,ae=!s.length),te.dispatch("onfilter",s))}(t)},function(){te.dispatch("scrollend",!0)},function(e){te.dispatch("select-all",e.detail)},de,f,x,v,z,E,J,L,D,Z,function(e){n[e?"unshift":"push"]((()=>{X=e,l(26,X)}))},function(e){a=e,l(31,a),l(47,z)},()=>l(23,u=!0),function(t){Y.call(this,e,t)},function(t){Y.call(this,e,t)},function(t){Y.call(this,e,t)},()=>{l(31,a=""),l(32,s=i),l(28,ae=!1),M||ne()},function(e){o=e,l(21,o),l(49,J),l(10,M)},function(e){n[e?"unshift":"push"]((()=>{X=e,l(26,X)}))},e=>de(e.id),()=>ce(),e=>de(e.id),()=>ue(),function(e){n[e?"unshift":"push"]((()=>{p=e,l(25,p)}))}]}class ue extends e{constructor(e){super();const n=document.createElement("style");n.textContent=".mc-autocomplete{-ms-flex-item-align:start;align-self:start;position:relative;min-width:var(--autocomplete-min-width, 6rem);max-width:var(--autocomplete-width, auto);width:100%}.mc-autocomplete__main{position:relative}.mc-autocomplete__tag,.mc-autocomplete__tools{position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);z-index:var(--autocomplete-tag-z-index, 2)}.mc-autocomplete__tag{left:2.75rem}.mc-autocomplete__trigger{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-autocomplete__tools{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#ffffff;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.5rem;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;right:0.75rem}.mc-autocomplete__clear{margin:0;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;-webkit-transition:-webkit-box-shadow 150ms ease;transition:-webkit-box-shadow 150ms ease;transition:box-shadow 150ms ease;transition:box-shadow 150ms ease, -webkit-box-shadow 150ms ease;background:none;border-radius:50%}.mc-autocomplete__clear:focus{-webkit-box-shadow:0 0 0 2px #758992;box-shadow:0 0 0 2px #758992}.mc-autocomplete__clear,.mc-autocomplete__clear-icon{height:1.5rem;width:1.5rem}.mc-autocomplete__clear-icon{fill:#666666}.mc-autocomplete__clear-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.mc-autocomplete__error{font-size:0.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:0.25rem}.mc-autocomplete--multi .mc-autocomplete__trigger{padding-left:calc(2.9375rem + var(--autocomplete-tag-width, 0px))}.mc-autocomplete{min-width:auto}.mc-autocomplete__tag{position:absolute !important}.mc-autocomplete--multi .mc-autocomplete__trigger{padding-left:calc(2.9375rem + var(--autocomplete-tag-width)) !important}.tags-selected{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-wrap:wrap;flex-wrap:wrap}.tag-selected{margin-top:1em;margin-left:5px;margin-right:5px}.mc-listbox--overlay{top:calc(100% + 4px)}",this.shadowRoot.appendChild(n),t(this,{target:this.shadowRoot,props:l(this.attributes),customElement:!0},ce,re,s,{maxwidth:0,tagid:1,taglabel:44,placeholder:2,filter:45,nofilter:46,disabled:3,size:4,isinvalid:5,inputvalue:47,id:6,name:7,loading:8,required:9,items:48,value:49,open:50,multiple:10,emptysearchlabel:11,datatextexpr:12,datavalueexpr:13,nosort:51,layertitle:14,showmoretagslabel:15,maxnumbertoshowtags:16,alltags:17,selectall:18,labelselectall:19,labelautosize:20},null,[-1,-1,-1]),e&&(e.target&&a(e.target,this,e.anchor),e.props&&(this.$set(e.props),i()))}static get observedAttributes(){return["maxwidth","tagid","taglabel","placeholder","filter","nofilter","disabled","size","isinvalid","inputvalue","id","name","loading","required","items","value","open","multiple","emptysearchlabel","datatextexpr","datavalueexpr","nosort","layertitle","showmoretagslabel","maxnumbertoshowtags","alltags","selectall","labelselectall","labelautosize"]}get maxwidth(){return this.$$.ctx[0]}set maxwidth(e){this.$$set({maxwidth:e}),i()}get tagid(){return this.$$.ctx[1]}set tagid(e){this.$$set({tagid:e}),i()}get taglabel(){return this.$$.ctx[44]}set taglabel(e){this.$$set({taglabel:e}),i()}get placeholder(){return this.$$.ctx[2]}set placeholder(e){this.$$set({placeholder:e}),i()}get filter(){return this.$$.ctx[45]}set filter(e){this.$$set({filter:e}),i()}get nofilter(){return this.$$.ctx[46]}set nofilter(e){this.$$set({nofilter:e}),i()}get disabled(){return this.$$.ctx[3]}set disabled(e){this.$$set({disabled:e}),i()}get size(){return this.$$.ctx[4]}set size(e){this.$$set({size:e}),i()}get isinvalid(){return this.$$.ctx[5]}set isinvalid(e){this.$$set({isinvalid:e}),i()}get inputvalue(){return this.$$.ctx[47]}set inputvalue(e){this.$$set({inputvalue:e}),i()}get id(){return this.$$.ctx[6]}set id(e){this.$$set({id:e}),i()}get name(){return this.$$.ctx[7]}set name(e){this.$$set({name:e}),i()}get loading(){return this.$$.ctx[8]}set loading(e){this.$$set({loading:e}),i()}get required(){return this.$$.ctx[9]}set required(e){this.$$set({required:e}),i()}get items(){return this.$$.ctx[48]}set items(e){this.$$set({items:e}),i()}get value(){return this.$$.ctx[49]}set value(e){this.$$set({value:e}),i()}get open(){return this.$$.ctx[50]}set open(e){this.$$set({open:e}),i()}get multiple(){return this.$$.ctx[10]}set multiple(e){this.$$set({multiple:e}),i()}get emptysearchlabel(){return this.$$.ctx[11]}set emptysearchlabel(e){this.$$set({emptysearchlabel:e}),i()}get datatextexpr(){return this.$$.ctx[12]}set datatextexpr(e){this.$$set({datatextexpr:e}),i()}get datavalueexpr(){return this.$$.ctx[13]}set datavalueexpr(e){this.$$set({datavalueexpr:e}),i()}get nosort(){return this.$$.ctx[51]}set nosort(e){this.$$set({nosort:e}),i()}get layertitle(){return this.$$.ctx[14]}set layertitle(e){this.$$set({layertitle:e}),i()}get showmoretagslabel(){return this.$$.ctx[15]}set showmoretagslabel(e){this.$$set({showmoretagslabel:e}),i()}get maxnumbertoshowtags(){return this.$$.ctx[16]}set maxnumbertoshowtags(e){this.$$set({maxnumbertoshowtags:e}),i()}get alltags(){return this.$$.ctx[17]}set alltags(e){this.$$set({alltags:e}),i()}get selectall(){return this.$$.ctx[18]}set selectall(e){this.$$set({selectall:e}),i()}get labelselectall(){return this.$$.ctx[19]}set labelselectall(e){this.$$set({labelselectall:e}),i()}get labelautosize(){return this.$$.ctx[20]}set labelautosize(e){this.$$set({labelautosize:e}),i()}}export{ue as default};
|
|
2
2
|
//# sourceMappingURL=Autocomplete.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Autocomplete.js","sources":["../../../../src/components/autocomplete/Autocomplete.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import { tick } from 'svelte';\n import {\n get_current_component,\n createEventDispatcher,\n } from 'svelte/internal';\n import { EventHandler } from '../../utilities/EventHandler';\n import { clickOutside } from '../../utilities/ClickOutside';\n import type { ListboxItems } from '../listbox/listbox.types';\n import type { TextInputSize } from '../textinput/textinput.types';\n\n import Tag from '../tag/Tag.nested.svelte';\n import Loader from '../loader/Loader.nested.svelte';\n import TextInput from '../textinput/Textinput.nested.svelte';\n import Listbox from '../listbox/Listbox.nested.svelte';\n\n export let maxwidth = '100%';\n export let tagid: string;\n export let taglabel = '';\n export let placeholder: string;\n export let filter = true;\n export let nofilter = false;\n export let disabled = false;\n export let size: TextInputSize = 'm';\n export let isinvalid: boolean;\n export let inputvalue: string;\n export let id: string;\n export let name: string;\n export let loading = false;\n export let required = false;\n export let items: string;\n export let value: any;\n export let open = false;\n export let multiple = false;\n export let emptysearchlabel = 'No results found';\n export let datatextexpr = 'label';\n export let datavalueexpr = 'value';\n export let nosort = false;\n export let layertitle = 'Title layer';\n export let showmoretagslabel = 'Show more';\n export let maxnumbertoshowtags = 12;\n export let alltags = false;\n export let selectall = false;\n export let labelselectall = 'Select all';\n\n let component: HTMLDivElement;\n const uuid = Math.random();\n let eventHandler = new EventHandler(\n get_current_component(),\n createEventDispatcher(),\n );\n let tag: any;\n let tagWidth = '0px';\n let tagValue: any;\n let sortedListItems: any;\n let isfiltered = false;\n let selectedItems: ListboxItems[] = [];\n let openLayer: any = null;\n\n $: localInputValue = inputvalue;\n $: parsedItems = items ? (JSON.parse(items) as ListboxItems[]) : [];\n $: localItems = parsedItems;\n $: listboxValue = !value && multiple ? [] : value ? JSON.parse(value) : value;\n $: setTagLabel = () => {\n return listboxValue.length.toString() + ' ' + taglabel;\n };\n $: watchListboxValue(listboxValue);\n $: setTagWidth(tagValue);\n $: openState = open;\n $: {\n const eventName = openState ? 'open' : 'close';\n eventHandler.dispatch(eventName, openState);\n }\n $: attributes = { ...$$restProps };\n $: delete attributes.class;\n\n function clearListbox() {\n if (!disabled) {\n listboxValue = multiple ? [] : '';\n closeListBox();\n eventHandler.dispatch('clear', true);\n }\n }\n\n function closeListBox() {\n openState = false;\n\n if (multiple && !nosort) {\n sortItems();\n } else {\n localItems = parsedItems;\n }\n }\n\n function onChange() {\n eventHandler.dispatch('onchange', listboxValue);\n\n if (!multiple) {\n closeListBox();\n }\n }\n\n function getSelectedItems(val?: string) {\n const value = val ? val : listboxValue;\n\n const selectedItems = parsedItems.filter((item: ListboxItems) => {\n return multiple\n ? value.includes(item[datavalueexpr])\n : value === item[datavalueexpr];\n });\n return selectedItems;\n }\n\n function sortItems() {\n sortedListItems = parsedItems;\n const selectedItems = getSelectedItems();\n\n sortedListItems.sort((a: any, b: any) => {\n const hasItemA = selectedItems.includes(a);\n const hasItemB = selectedItems.includes(b);\n\n if (hasItemA === hasItemB) {\n return a[datavalueexpr] - b[datavalueexpr];\n } else if (hasItemA < hasItemB) {\n return 1;\n } else {\n return -1;\n }\n });\n\n localItems = sortedListItems;\n }\n\n function openLayerFn() {\n openLayer = true;\n }\n\n function closeLayerFn() {\n openLayer = null;\n }\n\n function handleInputValue(value: any) {\n eventHandler.dispatch('oninput', value);\n }\n\n function filterListbox(value: any) {\n if (nofilter || !filter) {\n return;\n }\n\n if (value.length) {\n localItems = parsedItems.filter((item: any) =>\n item[datatextexpr].toUpperCase().includes(value.toUpperCase()),\n );\n } else {\n localItems = parsedItems;\n }\n\n isfiltered = !localItems.length;\n\n eventHandler.dispatch('onfilter', localItems);\n }\n\n function onInput(e: Event) {\n const value = (e.target as HTMLInputElement).value;\n handleInputValue(value);\n filterListbox(value);\n }\n\n function onScrollEnd() {\n eventHandler.dispatch('scrollend', true);\n }\n\n function onSelectAll(e: CustomEvent) {\n eventHandler.dispatch('select-all', e.detail);\n }\n\n function removeTagSelected(itemSelectedId: any) {\n listboxValue = listboxValue.filter(\n (value: any) => value !== itemSelectedId,\n );\n eventHandler.dispatch('onchange', listboxValue);\n }\n\n // Watch Functions\n async function watchListboxValue(value: any) {\n try {\n await tick();\n selectedItems = getSelectedItems(value);\n if (!multiple) {\n const seletedLabels = selectedItems.map((item) => item[datatextexpr]);\n localInputValue = seletedLabels.join(', ');\n } else {\n tagValue = value;\n }\n } catch (e) {\n console.error(e);\n }\n }\n\n async function setTagWidth(tagValue: any) {\n try {\n await tick();\n\n tagWidth =\n tag && tagValue && tagValue.length\n ? `${component?.querySelector('.mc-tag-removable')?.clientWidth}px`\n : '0px';\n } catch (e) {\n console.error(e);\n }\n }\n</script>\n\n<div\n class=\"mc-autocomplete\"\n class:mc-autocomplete--multi={multiple}\n style=\"--autocomplete-tag-width: {tagWidth}; --autocomplete-width: {maxwidth};\"\n use:clickOutside\n on:outclick={closeListBox}\n {...attributes}\n bind:this={component}\n>\n <div class=\"mc-autocomplete__main\">\n <!-- TAG REMOVABLE -->\n {#if multiple && listboxValue.length > 0 && !alltags}\n <div class=\"mc-autocomplete__tag\">\n <Tag\n id={tagid ? tagid : `autocompleteTag-${uuid}`}\n label={setTagLabel()}\n size=\"s\"\n type=\"removable\"\n dark={false}\n disabled={false}\n href=\"\"\n name=\"\"\n value=\"\"\n selected={false}\n bind:this={tag}\n on:tag-removed={clearListbox}\n />\n </div>\n {/if}\n\n <!-- TEXT INPUT -->\n <TextInput\n classinput=\"mc-autocomplete__trigger\"\n style=\"padding-left: calc(2.9375rem + var(--autocomplete-tag-width))\"\n name={id}\n bind:value={localInputValue}\n {placeholder}\n inputtype=\"text\"\n {isinvalid}\n {disabled}\n {size}\n {required}\n iconname=\"navigation-display-search-24px\"\n rightalign={false}\n isvalid={false}\n min=\"\"\n max=\"\"\n on:input={onInput}\n on:click={() => (openState = true)}\n on:change\n on:blur\n />\n\n <div class=\"mc-autocomplete__tools\">\n <!-- LOADER -->\n {#if loading}\n <Loader\n size=\"s\"\n theme=\"primary\"\n text=\"\"\n class=\"mc-autocomplete__loader\"\n />\n {/if}\n\n <!-- CLEAR BUTTON -->\n {#if localInputValue != null && localInputValue != '' && !disabled}\n <button\n class=\"mc-autocomplete__clear\"\n type=\"button\"\n on:click|stopPropagation={() => {\n localInputValue = '';\n localItems = parsedItems;\n isfiltered = false;\n if (!multiple) {\n clearListbox();\n }\n }}\n >\n <navigation-control-tag--cross-24px />\n <span class=\"mc-autocomplete__clear-text\">Clear</span>\n </button>\n {/if}\n </div>\n </div>\n\n <!-- LISTBOX -->\n {#if openState}\n <Listbox\n items={JSON.stringify(localItems)}\n {name}\n {multiple}\n {isfiltered}\n {emptysearchlabel}\n {maxwidth}\n {datatextexpr}\n {datavalueexpr}\n {selectall}\n {labelselectall}\n overlay={true}\n width={maxwidth}\n bind:value={listboxValue}\n on:change={onChange}\n on:scrollend={onScrollEnd}\n on:select-all={onSelectAll}\n />\n {/if}\n\n {#if multiple && alltags}\n <div class=\"tags-selected\">\n {#each selectedItems as selectedItem, index}\n {#if index < maxnumbertoshowtags}\n <div class=\"tag-selected\">\n {#if disabled}\n <Tag\n id={selectedItem.id || ''}\n label={selectedItem.label}\n size=\"s\"\n type=\"link\"\n dark={true}\n disabled={false}\n href=\"\"\n name=\"\"\n value=\"\"\n selected={false}\n />\n {:else}\n <Tag\n id={selectedItem.id || ''}\n label={selectedItem.label}\n size=\"s\"\n type=\"removable\"\n dark={false}\n disabled={false}\n href=\"\"\n name=\"\"\n value=\"\"\n selected={false}\n bind:this={tag}\n on:tag-removed={() => removeTagSelected(selectedItem.id)}\n />\n {/if}\n </div>\n {/if}\n {/each}\n {#if listboxValue.length > maxnumbertoshowtags}\n <!-- svelte-ignore a11y-click-events-have-key-events -->\n <div class=\"tag-selected\" on:click={() => openLayerFn()}>\n <Tag\n id=\"id-tag\"\n label=\"({listboxValue.length}) {showmoretagslabel} \"\n size=\"s\"\n type=\"link\"\n dark={false}\n disabled={false}\n href=\"\"\n name=\"\"\n value=\"\"\n selected={false}\n />\n </div>\n {/if}\n </div>\n {/if}\n\n <!-- <span class=\"mc-autocomplete__tag\" style=\"display:none;\" /> -->\n <span class=\"mc-autocomplete__loader\" style=\"display:none;\" />\n <span class=\"mc-text-input mc-autocomplete__trigger\" style=\"display:none;\" />\n\n {#if multiple && alltags}\n <div>\n <m-layer\n title={layertitle}\n layertitletag=\"h3\"\n isopen={openLayer}\n on:layer-closed={() => closeLayerFn()}\n >\n <small slot=\"content\">\n <div class=\"tags-selected\">\n {#each selectedItems as selectedItem}\n <div class=\"tag-selected\">\n {#if disabled}\n <m-tag\n type=\"text\"\n id={selectedItem.id}\n label={selectedItem.label}\n size=\"s\"\n />\n {:else}\n <m-tag\n id={selectedItem.id}\n label={selectedItem.label}\n size=\"s\"\n type=\"removable\"\n on:tag-removed={() => removeTagSelected(selectedItem.id)}\n />\n {/if}\n </div>\n {/each}\n </div>\n </small>\n </m-layer>\n </div>\n {/if}\n</div>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/all-settings';\n @import '@mozaic-ds/styles/components/c.autocomplete';\n\n // Autocomplete\n // NOTE: These styles with the \"!important\" allow to overload the edge effects\n // due to the scoping applied by Svelte on the CSS selectors\n .mc-autocomplete {\n min-width: auto;\n\n &__tag {\n position: absolute !important; // due to the Svelte CSS scope\n }\n\n &--multi {\n .mc-autocomplete__trigger {\n padding-left: calc(\n 2.9375rem + var(--autocomplete-tag-width)\n ) !important;\n }\n }\n }\n\n // Selected Tags\n .tags-selected {\n display: flex;\n position: absolute;\n flex-wrap: wrap;\n }\n\n .tag-selected {\n margin-top: 1em;\n margin-left: 5px;\n margin-right: 5px;\n }\n\n // Listbox\n .mc-listbox {\n &--overlay {\n top: calc(100% + 4px);\n }\n }\n</style>\n"],"names":["ctx","insert","target","div","anchor","button","JSON","stringify","length","i","create_if_block_3","each_blocks","id","label","dirty","tag_1_changes","if_block","create_if_block_4","div1","append","m_layer","small","div0","set_custom_element_data","m_tag","m_tag_id_value","m_tag_label_value","create_if_block_1","if_block0","create_if_block_9","create_if_block_8","if_block2","create_if_block_7","create_if_block_6","if_block4","create_if_block_2","if_block5","create_if_block","style","div2_style_value","div2","span0","span1","current","component","maxwidth","$$props","tagid","taglabel","placeholder","filter","nofilter","disabled","size","isinvalid","inputvalue","name","loading","required","items","value","open","multiple","emptysearchlabel","datatextexpr","datavalueexpr","nosort","layertitle","showmoretagslabel","maxnumbertoshowtags","alltags","selectall","labelselectall","uuid","Math","random","tag","tagValue","sortedListItems","eventHandler","EventHandler","get_current_component","createEventDispatcher","tagWidth","isfiltered","selectedItems","openLayer","clearListbox","listboxValue","closeListBox","dispatch","$$invalidate","openState","parsedItems","getSelectedItems","sort","a","b","hasItemA","includes","hasItemB","localItems","sortItems","val","item","openLayerFn","closeLayerFn","removeTagSelected","itemSelectedId","localInputValue","parse","setTagLabel","toString","async","tick","seletedLabels","map","join","e","console","error","watchListboxValue","_a","querySelector","clientWidth","setTagWidth","eventName","attributes","Object","assign","$$restProps","class","handleInputValue","toUpperCase","filterListbox","detail","$$value","value$1","selectedItem"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Autocomplete.js","sources":["../../../../src/components/autocomplete/Autocomplete.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import { tick } from 'svelte';\n import {\n get_current_component,\n createEventDispatcher,\n } from 'svelte/internal';\n import { EventHandler } from '../../utilities/EventHandler';\n import { clickOutside } from '../../utilities/ClickOutside';\n import type { ListboxItems } from '../listbox/listbox.types';\n import type { TextInputSize } from '../textinput/textinput.types';\n\n import Tag from '../tag/Tag.nested.svelte';\n import Loader from '../loader/Loader.nested.svelte';\n import TextInput from '../textinput/Textinput.nested.svelte';\n import Listbox from '../listbox/Listbox.nested.svelte';\n\n export let maxwidth = '100%';\n export let tagid: string;\n export let taglabel = '';\n export let placeholder: string;\n export let filter = true;\n export let nofilter = false;\n export let disabled = false;\n export let size: TextInputSize = 'm';\n export let isinvalid: boolean;\n export let inputvalue: string;\n export let id: string;\n export let name: string;\n export let loading = false;\n export let required = false;\n export let items: string;\n export let value: any;\n export let open = false;\n export let multiple = false;\n export let emptysearchlabel = 'No results found';\n export let datatextexpr = 'label';\n export let datavalueexpr = 'value';\n export let nosort = false;\n export let layertitle = 'Title layer';\n export let showmoretagslabel = 'Show more';\n export let maxnumbertoshowtags = 12;\n export let alltags = false;\n export let selectall = false;\n export let labelselectall = 'Select all';\n export let labelautosize = false;\n\n let component: HTMLDivElement;\n const uuid = Math.random();\n let eventHandler = new EventHandler(\n get_current_component(),\n createEventDispatcher(),\n );\n let tag: any;\n let tagWidth = '0px';\n let tagValue: any;\n let sortedListItems: any;\n let isfiltered = false;\n let selectedItems: ListboxItems[] = [];\n let openLayer: any = null;\n\n $: localInputValue = inputvalue;\n $: parsedItems = items ? (JSON.parse(items) as ListboxItems[]) : [];\n $: localItems = parsedItems;\n $: listboxValue = !value && multiple ? [] : value ? JSON.parse(value) : value;\n $: setTagLabel = () => {\n return listboxValue.length.toString() + ' ' + taglabel;\n };\n $: watchListboxValue(listboxValue);\n $: setTagWidth(tagValue);\n $: openState = open;\n $: {\n const eventName = openState ? 'open' : 'close';\n eventHandler.dispatch(eventName, openState);\n }\n $: attributes = { ...$$restProps };\n $: delete attributes.class;\n\n function clearListbox() {\n if (!disabled) {\n listboxValue = multiple ? [] : '';\n closeListBox();\n eventHandler.dispatch('clear', true);\n }\n }\n\n function closeListBox() {\n openState = false;\n\n if (multiple && !nosort) {\n sortItems();\n } else {\n localItems = parsedItems;\n }\n }\n\n function onChange() {\n eventHandler.dispatch('onchange', listboxValue);\n\n if (!multiple) {\n closeListBox();\n }\n }\n\n function getSelectedItems(val?: string) {\n const value = val ? val : listboxValue;\n\n const selectedItems = parsedItems.filter((item: ListboxItems) => {\n return multiple\n ? value.includes(item[datavalueexpr])\n : value === item[datavalueexpr];\n });\n return selectedItems;\n }\n\n function sortItems() {\n sortedListItems = parsedItems;\n const selectedItems = getSelectedItems();\n\n sortedListItems.sort((a: any, b: any) => {\n const hasItemA = selectedItems.includes(a);\n const hasItemB = selectedItems.includes(b);\n\n if (hasItemA === hasItemB) {\n return a[datavalueexpr] - b[datavalueexpr];\n } else if (hasItemA < hasItemB) {\n return 1;\n } else {\n return -1;\n }\n });\n\n localItems = sortedListItems;\n }\n\n function openLayerFn() {\n openLayer = true;\n }\n\n function closeLayerFn() {\n openLayer = null;\n }\n\n function handleInputValue(value: any) {\n eventHandler.dispatch('oninput', value);\n }\n\n function filterListbox(value: any) {\n if (nofilter || !filter) {\n return;\n }\n\n if (value.length) {\n localItems = parsedItems.filter((item: any) =>\n item[datatextexpr].toUpperCase().includes(value.toUpperCase()),\n );\n } else {\n localItems = parsedItems;\n }\n\n isfiltered = !localItems.length;\n\n eventHandler.dispatch('onfilter', localItems);\n }\n\n function onInput(e: Event) {\n const value = (e.target as HTMLInputElement).value;\n handleInputValue(value);\n filterListbox(value);\n }\n\n function onScrollEnd() {\n eventHandler.dispatch('scrollend', true);\n }\n\n function onSelectAll(e: CustomEvent) {\n eventHandler.dispatch('select-all', e.detail);\n }\n\n function removeTagSelected(itemSelectedId: any) {\n listboxValue = listboxValue.filter(\n (value: any) => value !== itemSelectedId,\n );\n eventHandler.dispatch('onchange', listboxValue);\n }\n\n // Watch Functions\n async function watchListboxValue(value: any) {\n try {\n await tick();\n selectedItems = getSelectedItems(value);\n if (!multiple) {\n const seletedLabels = selectedItems.map((item) => item[datatextexpr]);\n localInputValue = seletedLabels.join(', ');\n } else {\n tagValue = value;\n }\n } catch (e) {\n console.error(e);\n }\n }\n\n async function setTagWidth(tagValue: any) {\n try {\n await tick();\n\n tagWidth =\n tag && tagValue && tagValue.length\n ? `${component?.querySelector('.mc-tag-removable')?.clientWidth}px`\n : '0px';\n } catch (e) {\n console.error(e);\n }\n }\n</script>\n\n<div\n class=\"mc-autocomplete\"\n class:mc-autocomplete--multi={multiple}\n style=\"--autocomplete-tag-width: {tagWidth}; --autocomplete-width: {maxwidth};\"\n use:clickOutside\n on:outclick={closeListBox}\n {...attributes}\n bind:this={component}\n>\n <div class=\"mc-autocomplete__main\">\n <!-- TAG REMOVABLE -->\n {#if multiple && listboxValue.length > 0 && !alltags}\n <div class=\"mc-autocomplete__tag\">\n <Tag\n id={tagid ? tagid : `autocompleteTag-${uuid}`}\n label={setTagLabel()}\n size=\"s\"\n type=\"removable\"\n dark={false}\n disabled={false}\n href=\"\"\n name=\"\"\n value=\"\"\n selected={false}\n bind:this={tag}\n on:tag-removed={clearListbox}\n />\n </div>\n {/if}\n\n <!-- TEXT INPUT -->\n <TextInput\n classinput=\"mc-autocomplete__trigger\"\n style=\"padding-left: calc(2.9375rem + var(--autocomplete-tag-width))\"\n name={id}\n bind:value={localInputValue}\n {placeholder}\n inputtype=\"text\"\n {isinvalid}\n {disabled}\n {size}\n {required}\n iconname=\"navigation-display-search-24px\"\n rightalign={false}\n isvalid={false}\n min=\"\"\n max=\"\"\n on:input={onInput}\n on:click={() => (openState = true)}\n on:change\n on:blur\n on:keydown\n />\n\n <div class=\"mc-autocomplete__tools\">\n <!-- LOADER -->\n {#if loading}\n <Loader\n size=\"s\"\n theme=\"primary\"\n text=\"\"\n class=\"mc-autocomplete__loader\"\n />\n {/if}\n\n <!-- CLEAR BUTTON -->\n {#if localInputValue != null && localInputValue != '' && !disabled}\n <button\n class=\"mc-autocomplete__clear\"\n type=\"button\"\n on:click|stopPropagation={() => {\n localInputValue = '';\n localItems = parsedItems;\n isfiltered = false;\n if (!multiple) {\n clearListbox();\n }\n }}\n >\n <navigation-control-tag--cross-24px />\n <span class=\"mc-autocomplete__clear-text\">Clear</span>\n </button>\n {/if}\n </div>\n </div>\n\n <!-- LISTBOX -->\n {#if openState}\n <Listbox\n items={JSON.stringify(localItems)}\n {name}\n {multiple}\n {isfiltered}\n {emptysearchlabel}\n {maxwidth}\n {datatextexpr}\n {datavalueexpr}\n {selectall}\n {labelselectall}\n {labelautosize}\n overlay={true}\n width={maxwidth}\n bind:value={listboxValue}\n on:change={onChange}\n on:scrollend={onScrollEnd}\n on:select-all={onSelectAll}\n />\n {/if}\n\n {#if multiple && alltags}\n <div class=\"tags-selected\">\n {#each selectedItems as selectedItem, index}\n {#if index < maxnumbertoshowtags}\n <div class=\"tag-selected\">\n {#if disabled}\n <Tag\n id={selectedItem.id || ''}\n label={selectedItem.label}\n size=\"s\"\n type=\"link\"\n dark={true}\n disabled={false}\n href=\"\"\n name=\"\"\n value=\"\"\n selected={false}\n />\n {:else}\n <Tag\n id={selectedItem.id || ''}\n label={selectedItem.label}\n size=\"s\"\n type=\"removable\"\n dark={false}\n disabled={false}\n href=\"\"\n name=\"\"\n value=\"\"\n selected={false}\n bind:this={tag}\n on:tag-removed={() => removeTagSelected(selectedItem.id)}\n />\n {/if}\n </div>\n {/if}\n {/each}\n {#if listboxValue.length > maxnumbertoshowtags}\n <!-- svelte-ignore a11y-click-events-have-key-events -->\n <div class=\"tag-selected\" on:click={() => openLayerFn()}>\n <Tag\n id=\"id-tag\"\n label=\"({listboxValue.length}) {showmoretagslabel} \"\n size=\"s\"\n type=\"link\"\n dark={false}\n disabled={false}\n href=\"\"\n name=\"\"\n value=\"\"\n selected={false}\n />\n </div>\n {/if}\n </div>\n {/if}\n\n <!-- <span class=\"mc-autocomplete__tag\" style=\"display:none;\" /> -->\n <span class=\"mc-autocomplete__loader\" style=\"display:none;\" />\n <span class=\"mc-text-input mc-autocomplete__trigger\" style=\"display:none;\" />\n\n {#if multiple && alltags}\n <div>\n <m-layer\n title={layertitle}\n layertitletag=\"h3\"\n isopen={openLayer}\n on:layer-closed={() => closeLayerFn()}\n >\n <small slot=\"content\">\n <div class=\"tags-selected\">\n {#each selectedItems as selectedItem}\n <div class=\"tag-selected\">\n {#if disabled}\n <m-tag\n type=\"text\"\n id={selectedItem.id}\n label={selectedItem.label}\n size=\"s\"\n />\n {:else}\n <m-tag\n id={selectedItem.id}\n label={selectedItem.label}\n size=\"s\"\n type=\"removable\"\n on:tag-removed={() => removeTagSelected(selectedItem.id)}\n />\n {/if}\n </div>\n {/each}\n </div>\n </small>\n </m-layer>\n </div>\n {/if}\n</div>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/all-settings';\n @import '@mozaic-ds/styles/components/c.autocomplete';\n\n // Autocomplete\n // NOTE: These styles with the \"!important\" allow to overload the edge effects\n // due to the scoping applied by Svelte on the CSS selectors\n .mc-autocomplete {\n min-width: auto;\n\n &__tag {\n position: absolute !important; // due to the Svelte CSS scope\n }\n\n &--multi {\n .mc-autocomplete__trigger {\n padding-left: calc(\n 2.9375rem + var(--autocomplete-tag-width)\n ) !important;\n }\n }\n }\n\n // Selected Tags\n .tags-selected {\n display: flex;\n position: absolute;\n flex-wrap: wrap;\n }\n\n .tag-selected {\n margin-top: 1em;\n margin-left: 5px;\n margin-right: 5px;\n }\n\n // Listbox\n .mc-listbox {\n &--overlay {\n top: calc(100% + 4px);\n }\n }\n</style>\n"],"names":["ctx","insert","target","div","anchor","button","JSON","stringify","length","i","create_if_block_3","each_blocks","id","label","dirty","tag_1_changes","if_block","create_if_block_4","div1","append","m_layer","small","div0","set_custom_element_data","m_tag","m_tag_id_value","m_tag_label_value","create_if_block_1","if_block0","create_if_block_9","create_if_block_8","if_block2","create_if_block_7","create_if_block_6","if_block4","create_if_block_2","if_block5","create_if_block","style","div2_style_value","div2","span0","span1","current","component","maxwidth","$$props","tagid","taglabel","placeholder","filter","nofilter","disabled","size","isinvalid","inputvalue","name","loading","required","items","value","open","multiple","emptysearchlabel","datatextexpr","datavalueexpr","nosort","layertitle","showmoretagslabel","maxnumbertoshowtags","alltags","selectall","labelselectall","labelautosize","uuid","Math","random","tag","tagValue","sortedListItems","eventHandler","EventHandler","get_current_component","createEventDispatcher","tagWidth","isfiltered","selectedItems","openLayer","clearListbox","listboxValue","closeListBox","dispatch","$$invalidate","openState","parsedItems","getSelectedItems","sort","a","b","hasItemA","includes","hasItemB","localItems","sortItems","val","item","openLayerFn","closeLayerFn","removeTagSelected","itemSelectedId","localInputValue","parse","setTagLabel","toString","async","tick","seletedLabels","map","join","e","console","error","watchListboxValue","_a","querySelector","clientWidth","setTagWidth","eventName","attributes","Object","assign","$$restProps","class","handleInputValue","toUpperCase","filterListbox","detail","$$value","value$1","selectedItem"],"mappings":"ytBAuOcA,EAAK,GAAGA,EAAK,sBAAsBA,EAAI,YACpCA,EAAW,sCAGZ,YACI,qCAIA,0DAEMA,EAAY,kFAbhCC,EAeKC,EAAAC,EAAAC,qDAbGJ,EAAK,GAAGA,EAAK,sBAAsBA,EAAI,wBACpCA,EAAW,+mBAoDpBC,EAcQC,EAAAG,EAAAD,8HAQHE,KAAKC,UAAUP,EAAU,6LAWvB,QACFA,EAAQ,gBACS,IAAZA,EAAY,cAAZA,EAAY,oEACbA,EAAQ,uBACLA,EAAW,wBACVA,EAAW,qFAhBnBM,KAAKC,UAAUP,EAAU,oWAYzBA,EAAQ,oCACHA,EAAY,uIASjBA,EAAa,yBAAlBQ,OAAIC,GAAA,mEAmCDT,EAAY,IAACQ,OAASR,EAAmB,KAAAU,GAAAV,kHApChDC,EAqDKC,EAAAC,EAAAC,gIApDIJ,EAAa,YAAlBQ,OAAIC,GAAA,EAAA,uGAAJD,OAAIC,EAAAE,EAAAH,OAAAC,GAAA,WAmCDT,EAAY,IAACQ,OAASR,EAAmB,2IAnC5CQ,OAAIC,GAAA,mMAGKT,EAAQ,GAAA,2FADfC,EA8BKC,EAAAC,EAAAC,mQAdKJ,EAAY,IAACY,IAAM,GAChBC,MAAAb,MAAaa,sCAGd,YACI,qCAIA,sLATNb,EAAY,IAACY,IAAM,IAChB,UAAAE,EAAA,KAAAC,EAAAF,MAAAb,MAAaa,8JAdhBb,EAAY,IAACY,IAAM,GAChBC,MAAAb,MAAaa,iCAGd,YACI,qCAIA,0FATNb,EAAY,IAACY,IAAM,IAChB,UAAAE,EAAA,KAAAC,EAAAF,MAAAb,MAAaa,wHALvBG,EAAAhB,MAAQA,EAAmB,KAAAiB,EAAAjB,uEAA3BA,MAAQA,EAAmB,4PAuCnBA,EAAY,IAACQ,OAAM,KAAIR,EAAiB,IAAA,+BAG3C,YACI,qCAIA,0EAXdC,EAaKC,EAAAC,EAAAC,iGAVQJ,EAAY,IAACQ,OAAM,KAAIR,EAAiB,IAAA,+IA6B1CA,EAAa,yBAAlBQ,OAAIC,GAAA,qLAPHT,EAAU,4CAETA,EAAS,aAJrBC,EAgCKC,EAAAgB,EAAAd,GA/BHe,EA8BSD,EAAAE,GAxBPD,EAuBOC,EAAAC,GAtBLF,EAqBKE,EAAAC,2IApBItB,EAAa,YAAlBQ,OAAIC,GAAA,EAAA,kHAAJD,+BAPCR,EAAU,mCAETA,EAAS,2HAgBDuB,EAAAC,EAAA,KAAAC,EAAAzB,MAAaY,IACVW,EAAAC,EAAA,QAAAE,EAAA1B,MAAaa,uDAFtBZ,EAMCC,EAAAsB,EAAApB,gDALK,UAAAU,EAAA,IAAAW,KAAAA,EAAAzB,MAAaY,iBACV,UAAAE,EAAA,IAAAY,KAAAA,EAAA1B,MAAaa,oHAPhBU,EAAAC,EAAA,KAAAC,EAAAzB,MAAaY,IACVW,EAAAC,EAAA,QAAAE,EAAA1B,MAAaa,+BAHtBZ,EAKCC,EAAAsB,EAAApB,WAHK,UAAAU,EAAA,IAAAW,KAAAA,EAAAzB,MAAaY,iBACV,UAAAE,EAAA,IAAAY,KAAAA,EAAA1B,MAAaa,qFAJnBb,EAAQ,GAAA2B,8FADf1B,EAiBKC,EAAAC,EAAAC,0KA3LVwB,EAAA5B,OAAYA,EAAY,IAACQ,OAAS,IAAMR,EAAO,KAAA6B,EAAA7B,mJAuB5CA,EAAE,gJASI,WACH,sBATkB,IAAfA,EAAe,eAAfA,EAAe,oEAYjBA,EAAO,kGASZA,EAAO,IAAA8B,IAUPC,GAAmB,MAAnB/B,OAA8C,IAAnBA,EAAmB,MAAOA,EAAQ,IAAAgC,EAAAhC,MAqBjEA,EAAS,KAAAiC,EAAAjC,GAsBTkC,GAAAlC,OAAYA,EAAO,KAAAmC,EAAAnC,GA6DnBoC,GAAApC,OAAYA,EAAO,KAAAqC,GAAArC,kCAvKUsC,MAAAC,EAAA,6BAAAvC,iCAAkCA,EAAQ,GAAA,KAGxEA,EAAU,8fAJgBA,EAAQ,aAFxCC,EA6MKC,EAAAsC,EAAApC,GApMHe,EA2EKqB,EAAAtB,4CA9BHC,EA6BKD,EAAAI,mGAoFPH,EAA6DqB,EAAAC,UAC7DtB,EAA4EqB,EAAAE,iFAnK/D1C,EAAY,oBAMlBA,OAAYA,EAAY,IAACQ,OAAS,IAAMR,EAAO,sIAuB5CA,EAAE,oKACIA,EAAe,6BAqBtBA,EAAO,kGAUY,MAAnBA,OAA8C,IAAnBA,EAAmB,KAAOA,EAAQ,oEAqBjEA,EAAS,oHAsBTA,OAAYA,EAAO,mHA6DnBA,OAAYA,EAAO,+GAvKU2C,GAAA,UAAA7B,EAAA,IAAAyB,KAAAA,EAAA,6BAAAvC,iCAAkCA,EAAQ,GAAA,OAAA,CAAAsC,MAAAC,kBAGxEvC,EAAU,oCAJgBA,EAAQ,ymBA3KlC4C,YA9BOC,SAAAA,EAAW,QAAMC,SACjBC,GAAaD,GACbE,SAAAA,EAAW,IAAEF,eACbG,GAAmBH,GACnBI,OAAAA,GAAS,GAAIJ,GACbK,SAAAA,GAAW,GAAKL,GAChBM,SAAAA,GAAW,GAAKN,GAChBO,KAAAA,EAAsB,KAAGP,aACzBQ,GAAkBR,cAClBS,GAAkBT,MAClBlC,GAAUkC,QACVU,GAAYV,GACZW,QAAAA,GAAU,GAAKX,GACfY,SAAAA,GAAW,GAAKZ,SAChBa,GAAab,SACbc,GAAUd,GACVe,KAAAA,GAAO,GAAKf,GACZgB,SAAAA,GAAW,GAAKhB,GAChBiB,iBAAAA,EAAmB,oBAAkBjB,GACrCkB,aAAAA,EAAe,SAAOlB,GACtBmB,cAAAA,EAAgB,SAAOnB,GACvBoB,OAAAA,GAAS,GAAKpB,GACdqB,WAAAA,EAAa,eAAarB,GAC1BsB,kBAAAA,EAAoB,aAAWtB,GAC/BuB,oBAAAA,EAAsB,IAAEvB,GACxBwB,QAAAA,GAAU,GAAKxB,GACfyB,UAAAA,GAAY,GAAKzB,GACjB0B,eAAAA,EAAiB,cAAY1B,GAC7B2B,cAAAA,GAAgB,GAAK3B,QAG1B4B,EAAOC,KAAKC,SACd,IAIAC,EAEAC,EACAC,GAPAC,GAAmB,IAAAC,EACrBC,IACAC,KAGEC,GAAW,MAGXC,IAAa,EACbC,GAAa,GACbC,GAAiB,cAmBZC,KACFpC,SACHqC,EAAe3B,EAAQ,GAAQ,IAC/B4B,KACAV,GAAaW,SAAS,SAAS,aAI1BD,KACPE,EAAA,GAAAC,GAAY,GAER/B,IAAaI,aA2BjBa,GAAkBe,EACZ,MAAAR,EAAgBS,KAEtBhB,GAAgBiB,MAAM,CAAAC,EAAQC,KACtB,MAAAC,EAAWb,EAAcc,SAASH,GAClCI,EAAWf,EAAcc,SAASF,GAEpC,OAAAC,IAAaE,EACRJ,EAAEhC,GAAiBiC,EAAEjC,GACnBkC,EAAWE,EACb,GAEC,KAIZT,EAAA,GAAAU,EAAavB,IA1CXwB,GAEAX,EAAA,GAAAU,EAAaR,GAYR,SAAAC,GAAiBS,GAClB,MAAA5C,EAAQ4C,GAAYf,SAEJK,EAAY5C,QAAQuD,GACjC3C,EACHF,EAAMwC,SAASK,EAAKxC,IACpBL,IAAU6C,EAAKxC,cAyBdyC,KACPd,EAAA,GAAAL,IAAY,YAGLoB,KACPf,EAAA,GAAAL,GAAY,MAuCL,SAAAqB,GAAkBC,QACzBpB,EAAeA,EAAavC,QACzBU,GAAeA,IAAUiD,KAE5B7B,GAAaW,SAAS,WAAYF,8nCA1HnCG,EAAA,GAAEkB,EAAkBvD,yBACpBqC,EAAA,GAAEE,EAAcnC,EAASrD,KAAKyG,MAAMpD,GAAK,2BACzCiC,EAAA,GAAEU,EAAaR,4CACbF,EAAA,GAAAH,GAAgB7B,GAASE,KAAgBF,EAAQtD,KAAKyG,MAAMnD,GAASA,kDACrEoD,EAAW,IACLvB,EAAajF,OAAOyG,WAAa,IAAMjE,0BAyHjCkE,eAAkBtD,gBAEvBuD,SACN7B,GAAgBS,GAAiBnC,IAC5BE,EAIH8B,EAAA,GAAAd,EAAWlB,OAJA,OACLwD,EAAgB9B,GAAc+B,KAAKZ,GAASA,EAAKzC,KACvD4B,EAAA,GAAAkB,EAAkBM,EAAcE,KAAK,cAIhCC,GACPC,QAAQC,MAAMF,IAlIfG,CAAkBjC,0BAsINyB,eAAYpC,mBAEjBqC,IAENvB,EAAA,GAAAR,GACEP,GAAOC,GAAYA,EAAStE,OACpC,GAAA,QAAAmH,EAAe/E,eAAAA,EAAWgF,cAAc,4BAAxC,IAAAD,SAAAA,EAA8DE,gBAClD,aACCN,GACPC,QAAQC,MAAMF,IA9IfO,CAAYhD,yBACdc,EAAA,GAAEC,EAAYhC,yBACd,CACO,MAAAkE,EAAYlC,EAAY,OAAS,QACvCb,GAAaW,SAASoC,EAAWlC,QAEhCmC,EAALC,OAAAC,UAAuBC,mCACXH,EAAWI,mGAqBnBpD,GAAaW,SAAS,WAAYF,GAE7B3B,GACH4B,YAiEK,SAAQ6B,GACT,MAAA3D,EAAS2D,EAAErH,OAA4B0D,OAvBtC,SAAiBA,GACxBoB,GAAaW,SAAS,UAAW/B,GAuBjCyE,CAAiBzE,GApBV,SAAcA,IACjBT,GAAaD,IAIbU,EAAMpD,OACRoF,EAAA,GAAAU,EAAaR,EAAY5C,QAAQuD,GAC/BA,EAAKzC,GAAcsE,cAAclC,SAASxC,EAAM0E,kBAGlD1C,EAAA,GAAAU,EAAaR,QAGfT,IAAciB,EAAW9F,QAEzBwE,GAAaW,SAAS,WAAYW,IAMlCiC,CAAc3E,eAIdoB,GAAaW,SAAS,aAAa,IAG5B,SAAY4B,GACnBvC,GAAaW,SAAS,aAAc4B,EAAEiB,sEAgErB3D,EAAG4D,0BAWN3B,EAAelD,mBAaV,IAAAgC,EAAA,GAAAC,GAAY,kGAuBvBD,EAAA,GAAAkB,EAAkB,IAClBlB,EAAA,GAAAU,EAAaR,GACbF,EAAA,GAAAP,IAAa,GACRvB,GACH0B,kBA2BIC,EAAYiD,mEAqCH7D,EAAG4D,iBACQ7B,GAAkB+B,EAAa/H,QAQnB8F,QA+CRE,GAAkB+B,EAAa/H,QAnB1C+F,6CAzKlB/D,EAAS6F"}
|
|
@@ -44,6 +44,7 @@
|
|
|
44
44
|
export let alltags = false;
|
|
45
45
|
export let selectall = false;
|
|
46
46
|
export let labelselectall = 'Select all';
|
|
47
|
+
export let labelautosize = false;
|
|
47
48
|
|
|
48
49
|
let component: HTMLDivElement;
|
|
49
50
|
const uuid = Math.random();
|
|
@@ -265,6 +266,7 @@
|
|
|
265
266
|
on:click={() => (openState = true)}
|
|
266
267
|
on:change
|
|
267
268
|
on:blur
|
|
269
|
+
on:keydown
|
|
268
270
|
/>
|
|
269
271
|
|
|
270
272
|
<div class="mc-autocomplete__tools">
|
|
@@ -312,6 +314,7 @@
|
|
|
312
314
|
{datavalueexpr}
|
|
313
315
|
{selectall}
|
|
314
316
|
{labelselectall}
|
|
317
|
+
{labelautosize}
|
|
315
318
|
overlay={true}
|
|
316
319
|
width={maxwidth}
|
|
317
320
|
bind:value={listboxValue}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{H as e,i as t,s as l,I as s,e as i,h as o,M as a,t as b,b as c,n,m as x,q as r,r as d,V as m,a0 as v,v as h,k as y,y as u,d as p,N as _,R as f,x as q,P as g,a1 as w}from"../../index-c222d0b7.js";import{E as k}from"../../EventHandler-f7ee47ca.js";function E(e){s(e,"svelte-12bqyx9",".mc-checkbox__input.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9{font-family:\"Roboto\", sans-serif;font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;margin:0;-webkit-box-shadow:none;box-shadow:none;border:none;min-width:20px;min-height:20px;width:1.25rem;height:1.25rem;border-radius:4px;border:2px solid #666666;background-color:#ffffff;position:relative;-webkit-transition:all 200ms ease;transition:all 200ms ease;cursor:pointer}.mc-checkbox__input.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9::-ms-check{background-color:#ffffff;border:2px solid #666666;border-radius:4px;color:#ffffff}.mc-checkbox__input.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9:hover{border-color:#191919}.mc-checkbox__input.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9:hover::-ms-check{border-color:#191919}.mc-checkbox__input.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9:focus{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #758992;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #758992}.mc-checkbox__input.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9:focus::-ms-check{box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #758992}.mc-checkbox__input.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9:checked,.mc-checkbox__input.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9:indeterminate{background-color:#00919f;border-color:#00919f;background-size:1rem 1rem}.mc-checkbox__input.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\");background-position:center center}.mc-checkbox__input.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9:checked::-ms-check{background-color:#00919f;border-color:#00919f}.mc-checkbox__input.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9:checked:hover:not(:disabled){border-color:#004e57}.mc-checkbox__input.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9:checked:hover:not(:disabled)::-ms-check{border-color:#004e57}.mc-checkbox__input.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9:indeterminate{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\")}.mc-checkbox__input.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9:disabled{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-checkbox__input.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9:disabled::-ms-check{background-color:#e6e6e6;border-color:#e6e6e6}.mc-checkbox__input.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9:disabled:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\")}.mc-checkbox__input.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9:disabled:indeterminate{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\")}.mc-listbox.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9{background-color:#ffffff;border:1px solid #666666;border-radius:3px;overflow-y:auto;max-width:var(--listbox-maxwidth, none);width:var(--listbox-width, auto)}.mc-listbox.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9::-webkit-scrollbar{background-color:#e6e6e6;width:0.25rem}.mc-listbox.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9::-webkit-scrollbar-thumb{background:#666666}.mc-listbox__list.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9{list-style:none;margin-left:0;padding-left:0;margin-top:0;margin-right:0;margin-bottom:0}.mc-listbox__tile.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.5rem;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;padding-left:0.75rem;padding-right:0.75rem;position:relative}.mc-listbox__tile.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9:not(.mc-listbox__tile--empty):not(.is-disabled):hover,.mc-listbox__tile.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9:has(.mc-listbox__input:focus),.mc-listbox__tile.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9:has(.mc-listbox__label:focus){background-color:#e6e6e6;-webkit-box-shadow:inset 9px 0 0 -7px #191919;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox__tile--empty.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9{color:#666666;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-listbox__tile--empty.svelte-12bqyx9 .mc-listbox__label.svelte-12bqyx9.svelte-12bqyx9{cursor:default}.mc-listbox__tile.is-disabled.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9{-webkit-box-shadow:none;box-shadow:none;background-color:#cccccc;color:#666666;pointer-events:none}.mc-listbox__label.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9{font-size:1rem;line-height:1.375;color:currentColor;cursor:pointer;white-space:nowrap;outline:transparent}.mc-listbox__label.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9::after{content:\"\";position:absolute;inset:0;z-index:var(--listbox-label-z-index, 2)}.mc-listbox__input.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9{margin-left:auto;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.mc-listbox.svelte-12bqyx9:not(.mc-listbox--multi) .mc-listbox__input.svelte-12bqyx9.svelte-12bqyx9{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.mc-listbox--options.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9{max-height:13.8125rem;min-width:var(--listbox-minwidth, 6rem)}.mc-listbox--options.svelte-12bqyx9 .mc-listbox__tile.svelte-12bqyx9.svelte-12bqyx9{height:3rem}.mc-listbox--options.svelte-12bqyx9 .mc-listbox__tile.svelte-12bqyx9.svelte-12bqyx9:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--options.svelte-12bqyx9 .mc-listbox__tile.is-selected .mc-listbox__label.svelte-12bqyx9.svelte-12bqyx9::before{visibility:visible}.mc-listbox--options.svelte-12bqyx9 .mc-listbox__tile.is-selected.is-disabled .mc-listbox__label.svelte-12bqyx9.svelte-12bqyx9::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options.svelte-12bqyx9 .mc-listbox__input.svelte-12bqyx9:checked+.mc-listbox__label.svelte-12bqyx9::before{visibility:visible}.mc-listbox--options.svelte-12bqyx9 .mc-listbox__input.svelte-12bqyx9:checked:disabled+.mc-listbox__label.svelte-12bqyx9::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options.svelte-12bqyx9 .mc-listbox__label.svelte-12bqyx9.svelte-12bqyx9::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191919' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\");background-position:center;background-repeat:no-repeat;background-size:1.5rem;content:\"\";height:1.5rem;position:absolute;right:0.75rem;top:0;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);width:1.5rem;visibility:hidden}.mc-listbox--overlay.svelte-12bqyx9.svelte-12bqyx9.svelte-12bqyx9{position:absolute;z-index:var(--listbox-overlay-z-index, 10)}")}function C(e,t,l){const s=e.slice();return s[30]=t[l],s[32]=l,s}function z(e){let t,l,s;return{c(){t=i("div"),l=i("span"),s=h(e[4]),o(l,"class","mc-listbox__label svelte-12bqyx9"),o(t,"class","mc-listbox__tile mc-listbox__tile--empty svelte-12bqyx9")},m(e,i){c(e,t,i),y(t,l),y(l,s)},p(e,t){16&t[0]&&u(s,e[4])},d(e){e&&x(t)}}}function $(e){let t,l,s,a,b=e[2]&&e[9]&&B(e),n=e[14],r=[];for(let t=0;t<n.length;t+=1)r[t]=j(C(e,n,t));return{c(){t=i("ul"),b&&b.c(),l=p();for(let e=0;e<r.length;e+=1)r[e].c();o(t,"role","listbox"),o(t,"class","mc-listbox__list svelte-12bqyx9"),o(t,"aria-labelledby","listbox")},m(i,o){c(i,t,o),b&&b.m(t,null),y(t,l);for(let e=0;e<r.length;e+=1)r[e]&&r[e].m(t,null);s||(a=_(e[18].call(null,t)),s=!0)},p(e,s){if(e[2]&&e[9]?b?b.p(e,s):(b=B(e),b.c(),b.m(t,l)):b&&(b.d(1),b=null),147687&s[0]){let l;for(n=e[14],l=0;l<n.length;l+=1){const i=C(e,n,l);r[l]?r[l].p(i,s):(r[l]=j(i),r[l].c(),r[l].m(t,null))}for(;l<r.length;l+=1)r[l].d(1);r.length=n.length}},d(e){e&&x(t),b&&b.d(),f(r,e),s=!1,a()}}}function B(e){let t,l,s,a,b,n,r;return{c(){t=i("li"),l=i("input"),s=p(),a=i("label"),b=h(e[10]),o(l,"id","select-all"),o(l,"class","mc-listbox__input mc-checkbox__input svelte-12bqyx9"),o(l,"type","checkbox"),l.indeterminate=e[16],o(a,"for","select-all"),o(a,"class","mc-listbox__label svelte-12bqyx9"),o(t,"class","mc-listbox__tile svelte-12bqyx9")},m(i,o){c(i,t,o),y(t,l),l.checked=e[15],y(t,s),y(t,a),y(a,b),n||(r=[q(l,"change",e[23]),q(l,"change",e[19])],n=!0)},p(e,t){65536&t[0]&&(l.indeterminate=e[16]),32768&t[0]&&(l.checked=e[15]),1024&t[0]&&u(b,e[10])},d(e){e&&x(t),n=!1,g(r)}}}function M(e){let t,l,s,a,b,n,r,d=!1;return b=w(e[25][0]),{c(){t=i("input"),o(t,"id",e[17](e[32])),o(t,"class","mc-listbox__input mc-checkbox__input svelte-12bqyx9"),o(t,"type","checkbox"),t.__value=l=e[30][e[6]],t.value=t.__value,t.checked=s=e[0].includes(e[30][e[6]]),t.disabled=a=Boolean(e[30][e[7]]),b.p(t)},m(l,s){c(l,t,s),t.checked=~(e[0]||[]).indexOf(t.__value),n||(r=[q(t,"change",e[26]),q(t,"change",e[22])],n=!0)},p(e,i){16448&i[0]&&l!==(l=e[30][e[6]])&&(t.__value=l,t.value=t.__value,d=!0),16449&i[0]&&s!==(s=e[0].includes(e[30][e[6]]))&&(t.checked=s),16512&i[0]&&a!==(a=Boolean(e[30][e[7]]))&&(t.disabled=a),(d||16385&i[0])&&(t.checked=~(e[0]||[]).indexOf(t.__value))},d(e){e&&x(t),b.r(),n=!1,g(r)}}}function H(e){let t,l,s,a,n,r,d=!1;return a=w(e[25][0]),{c(){t=i("input"),o(t,"id",e[17](e[32])),o(t,"class","mc-listbox__input svelte-12bqyx9"),o(t,"type","radio"),t.__value=l=e[30][e[6]],t.value=t.__value,o(t,"name",e[1]),t.disabled=s=Boolean(e[30][e[7]]),b(t,"is-disabled",e[30][e[7]]),a.p(t)},m(l,s){c(l,t,s),t.checked=t.__value===e[0],n||(r=[q(t,"change",e[24]),q(t,"change",e[21])],n=!0)},p(e,i){16448&i[0]&&l!==(l=e[30][e[6]])&&(t.__value=l,t.value=t.__value,d=!0),2&i[0]&&o(t,"name",e[1]),16512&i[0]&&s!==(s=Boolean(e[30][e[7]]))&&(t.disabled=s),(d||16385&i[0])&&(t.checked=t.__value===e[0]),16512&i[0]&&b(t,"is-disabled",e[30][e[7]])},d(e){e&&x(t),a.r(),n=!1,g(r)}}}function j(e){let t,l,s,a,n,r=e[30][e[5]]+"";function d(e,t){return e[2]?M:H}let m=d(e),v=m(e);return{c(){t=i("li"),v.c(),l=p(),s=i("label"),a=h(r),n=p(),o(s,"for",e[17](e[32])),o(s,"class","mc-listbox__label svelte-12bqyx9"),o(t,"class","mc-listbox__tile svelte-12bqyx9"),b(t,"is-disabled",e[30][e[7]])},m(e,i){c(e,t,i),v.m(t,null),y(t,l),y(t,s),y(s,a),y(t,n)},p(e,s){m===(m=d(e))&&v?v.p(e,s):(v.d(1),v=m(e),v&&(v.c(),v.m(t,l))),16416&s[0]&&r!==(r=e[30][e[5]]+"")&&u(a,r),16512&s[0]&&b(t,"is-disabled",e[30][e[7]])},d(e){e&&x(t),v.d()}}}function L(e){let t;function l(e,t){return e[3]?z:$}let s=l(e),r=s(e);return{c(){t=i("div"),r.c(),o(t,"class","mc-listbox svelte-12bqyx9"),a(t,"--listbox-maxwidth",e[8]),a(t,"--listbox-width",e[12]),a(t,"--listbox-minwidth",e[12]),b(t,"mc-listbox--options","options"===e[13]),b(t,"mc-listbox--multi",e[2]),b(t,"mc-listbox--overlay",e[11])},m(e,l){c(e,t,l),r.m(t,null)},p(e,i){s===(s=l(e))&&r?r.p(e,i):(r.d(1),r=s(e),r&&(r.c(),r.m(t,null))),256&i[0]&&a(t,"--listbox-maxwidth",e[8]),4096&i[0]&&a(t,"--listbox-width",e[12]),4096&i[0]&&a(t,"--listbox-minwidth",e[12]),8192&i[0]&&b(t,"mc-listbox--options","options"===e[13]),4&i[0]&&b(t,"mc-listbox--multi",e[2]),2048&i[0]&&b(t,"mc-listbox--overlay",e[11])},i:n,o:n,d(e){e&&x(t),r.d()}}}function O(e,t,l){let s,i,o;const a=Math.random();let{name:b=`listboxradio-${a}`}=t,{items:c}=t,{value:n}=t,{multiple:x}=t,{isfiltered:h}=t,{emptysearchlabel:y="No results found"}=t,{datatextexpr:u="label"}=t,{datavalueexpr:p="value"}=t,{datadisabledexpr:_="disabled"}=t,{maxwidth:f}=t,{selectall:q=!1}=t,{labelselectall:g="Select all"}=t,{overlay:w}=t,{width:E}=t,{type:C="options"}=t,z=new k(r(),d());const $=[[]];return e.$$set=e=>{"name"in e&&l(1,b=e.name),"items"in e&&l(20,c=e.items),"value"in e&&l(0,n=e.value),"multiple"in e&&l(2,x=e.multiple),"isfiltered"in e&&l(3,h=e.isfiltered),"emptysearchlabel"in e&&l(4,y=e.emptysearchlabel),"datatextexpr"in e&&l(5,u=e.datatextexpr),"datavalueexpr"in e&&l(6,p=e.datavalueexpr),"datadisabledexpr"in e&&l(7,_=e.datadisabledexpr),"maxwidth"in e&&l(8,f=e.maxwidth),"selectall"in e&&l(9,q=e.selectall),"labelselectall"in e&&l(10,g=e.labelselectall),"overlay"in e&&l(11,w=e.overlay),"width"in e&&l(12,E=e.width),"type"in e&&l(13,C=e.type)},e.$$.update=()=>{512&e.$$.dirty[0]&&l(15,s=null!=q&&q),1048576&e.$$.dirty[0]&&l(14,i=c?JSON.parse(c):[]),1&e.$$.dirty[0]&&l(0,n=n?(l(15,s=!1),l(16,o=!1),n&&0===n.length?(l(15,s=!1),l(16,o=!1)):n&&n.length<i.length?l(16,o=!0):n&&n.length===i.length&&l(15,s=!0),n):[])},l(16,o=!0),[n,b,x,h,y,u,p,_,f,q,g,w,E,C,i,s,o,function(e){return`listboxItem-${e+a}`},function(e){e.addEventListener("scroll",(()=>{e.offsetHeight+e.scrollTop>=e.scrollHeight&&z.dispatch("scrollend",{})}))},function(e){const t=e.target.checked;l(15,s=!!t),s?i.map((e=>{e[_]||-1!==n.indexOf(e[p])||n.push(e[p])})):l(0,n=[]),z.dispatch("select-all",n),l(0,n)},c,function(t){m.call(this,e,t)},function(t){m.call(this,e,t)},function(){s=this.checked,l(15,s),l(9,q)},function(){n=this.__value,l(0,n)},$,function(){n=v($[0],this.__value,this.checked),l(0,n)}]}class A extends e{constructor(e){super(),t(this,e,O,L,l,{name:1,items:20,value:0,multiple:2,isfiltered:3,emptysearchlabel:4,datatextexpr:5,datavalueexpr:6,datadisabledexpr:7,maxwidth:8,selectall:9,labelselectall:10,overlay:11,width:12,type:13},E,[-1,-1])}}export{A as default};
|
|
1
|
+
import{H as e,i as t,s as l,I as b,e as s,h as i,M as o,t as a,b as c,n,m as r,q as p,r as d,V as m,a0 as v,v as x,k as h,y,d as u,N as _,R as f,x as g,P as w,a1 as k}from"../../index-c222d0b7.js";import{E as z}from"../../EventHandler-f7ee47ca.js";function E(e){b(e,"svelte-1ptybb2",".mc-checkbox__input.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2{font-family:\"Roboto\", sans-serif;font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;margin:0;-webkit-box-shadow:none;box-shadow:none;border:none;min-width:20px;min-height:20px;width:1.25rem;height:1.25rem;border-radius:4px;border:2px solid #666666;background-color:#ffffff;position:relative;-webkit-transition:all 200ms ease;transition:all 200ms ease;cursor:pointer}.mc-checkbox__input.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2::-ms-check{background-color:#ffffff;border:2px solid #666666;border-radius:4px;color:#ffffff}.mc-checkbox__input.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2:hover{border-color:#191919}.mc-checkbox__input.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2:hover::-ms-check{border-color:#191919}.mc-checkbox__input.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2:focus{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #758992;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #758992}.mc-checkbox__input.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2:focus::-ms-check{box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #758992}.mc-checkbox__input.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2:checked,.mc-checkbox__input.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2:indeterminate{background-color:#00919f;border-color:#00919f;background-size:1rem 1rem}.mc-checkbox__input.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\");background-position:center center}.mc-checkbox__input.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2:checked::-ms-check{background-color:#00919f;border-color:#00919f}.mc-checkbox__input.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2:checked:hover:not(:disabled){border-color:#004e57}.mc-checkbox__input.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2:checked:hover:not(:disabled)::-ms-check{border-color:#004e57}.mc-checkbox__input.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2:indeterminate{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\")}.mc-checkbox__input.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2:disabled{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-checkbox__input.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2:disabled::-ms-check{background-color:#e6e6e6;border-color:#e6e6e6}.mc-checkbox__input.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2:disabled:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\")}.mc-checkbox__input.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2:disabled:indeterminate{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\")}.mc-listbox.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2{background-color:#ffffff;border:1px solid #666666;border-radius:3px;overflow-y:auto;max-width:var(--listbox-maxwidth, none);width:var(--listbox-width, auto)}.mc-listbox.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2::-webkit-scrollbar{background-color:#e6e6e6;width:0.25rem}.mc-listbox.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2::-webkit-scrollbar-thumb{background:#666666}.mc-listbox__list.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2{list-style:none;margin-left:0;padding-left:0;margin-top:0;margin-right:0;margin-bottom:0}.mc-listbox__tile.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.5rem;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;padding-left:0.75rem;padding-right:0.75rem;position:relative}.mc-listbox__tile.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2:not(.mc-listbox__tile--empty):not(.is-disabled):hover,.mc-listbox__tile.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2:has(.mc-listbox__input:focus),.mc-listbox__tile.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2:has(.mc-listbox__label:focus){background-color:#e6e6e6;-webkit-box-shadow:inset 9px 0 0 -7px #191919;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox__tile--empty.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2{color:#666666;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-listbox__tile--empty.svelte-1ptybb2 .mc-listbox__label.svelte-1ptybb2.svelte-1ptybb2{cursor:default}.mc-listbox__tile.is-disabled.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2{-webkit-box-shadow:none;box-shadow:none;background-color:#cccccc;color:#666666;pointer-events:none}.mc-listbox__label.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2{font-size:1rem;line-height:1.375;color:currentColor;cursor:pointer;white-space:nowrap;outline:transparent}.mc-listbox__label.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2::after{content:\"\";position:absolute;inset:0;z-index:var(--listbox-label-z-index, 2)}.mc-listbox__input.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2{margin-left:auto;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.mc-listbox.svelte-1ptybb2:not(.mc-listbox--multi) .mc-listbox__input.svelte-1ptybb2.svelte-1ptybb2{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.mc-listbox--options.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2{max-height:13.8125rem;min-width:var(--listbox-minwidth, 6rem)}.mc-listbox--options.svelte-1ptybb2 .mc-listbox__tile.svelte-1ptybb2.svelte-1ptybb2{height:3rem}.mc-listbox--options.svelte-1ptybb2 .mc-listbox__tile.svelte-1ptybb2.svelte-1ptybb2:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--options.svelte-1ptybb2 .mc-listbox__tile.is-selected .mc-listbox__label.svelte-1ptybb2.svelte-1ptybb2::before{visibility:visible}.mc-listbox--options.svelte-1ptybb2 .mc-listbox__tile.is-selected.is-disabled .mc-listbox__label.svelte-1ptybb2.svelte-1ptybb2::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options.svelte-1ptybb2 .mc-listbox__input.svelte-1ptybb2:checked+.mc-listbox__label.svelte-1ptybb2::before{visibility:visible}.mc-listbox--options.svelte-1ptybb2 .mc-listbox__input.svelte-1ptybb2:checked:disabled+.mc-listbox__label.svelte-1ptybb2::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options.svelte-1ptybb2 .mc-listbox__label.svelte-1ptybb2.svelte-1ptybb2::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191919' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\");background-position:center;background-repeat:no-repeat;background-size:1.5rem;content:\"\";height:1.5rem;position:absolute;right:0.75rem;top:0;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);width:1.5rem;visibility:hidden}.mc-listbox--overlay.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2{position:absolute;z-index:var(--listbox-overlay-z-index, 10)}.mc-listbox__tile--auto-size.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2{height:auto !important;min-height:3rem}.mc-listbox__label--no-overflow.svelte-1ptybb2.svelte-1ptybb2.svelte-1ptybb2{white-space:break-spaces}")}function C(e,t,l){const b=e.slice();return b[31]=t[l],b[33]=l,b}function $(e){let t,l,b;return{c(){t=s("div"),l=s("span"),b=x(e[4]),i(l,"class","mc-listbox__label svelte-1ptybb2"),i(t,"class","mc-listbox__tile mc-listbox__tile--empty svelte-1ptybb2")},m(e,s){c(e,t,s),h(t,l),h(l,b)},p(e,t){16&t[0]&&y(b,e[4])},d(e){e&&r(t)}}}function B(e){let t,l,b,o,a=e[2]&&e[9]&&M(e),n=e[15],p=[];for(let t=0;t<n.length;t+=1)p[t]=L(C(e,n,t));return{c(){t=s("ul"),a&&a.c(),l=u();for(let e=0;e<p.length;e+=1)p[e].c();i(t,"role","listbox"),i(t,"class","mc-listbox__list svelte-1ptybb2"),i(t,"aria-labelledby","listbox")},m(s,i){c(s,t,i),a&&a.m(t,null),h(t,l);for(let e=0;e<p.length;e+=1)p[e]&&p[e].m(t,null);b||(o=_(e[19].call(null,t)),b=!0)},p(e,b){if(e[2]&&e[9]?a?a.p(e,b):(a=M(e),a.c(),a.m(t,l)):a&&(a.d(1),a=null),311527&b[0]){let l;for(n=e[15],l=0;l<n.length;l+=1){const s=C(e,n,l);p[l]?p[l].p(s,b):(p[l]=L(s),p[l].c(),p[l].m(t,null))}for(;l<p.length;l+=1)p[l].d(1);p.length=n.length}},d(e){e&&r(t),a&&a.d(),f(p,e),b=!1,o()}}}function M(e){let t,l,b,o,a,n,p;return{c(){t=s("li"),l=s("input"),b=u(),o=s("label"),a=x(e[10]),i(l,"id","select-all"),i(l,"class","mc-listbox__input mc-checkbox__input svelte-1ptybb2"),i(l,"type","checkbox"),l.indeterminate=e[17],i(o,"for","select-all"),i(o,"class","mc-listbox__label svelte-1ptybb2"),i(t,"class","mc-listbox__tile svelte-1ptybb2")},m(s,i){c(s,t,i),h(t,l),l.checked=e[16],h(t,b),h(t,o),h(o,a),n||(p=[g(l,"change",e[24]),g(l,"change",e[20])],n=!0)},p(e,t){131072&t[0]&&(l.indeterminate=e[17]),65536&t[0]&&(l.checked=e[16]),1024&t[0]&&y(a,e[10])},d(e){e&&r(t),n=!1,w(p)}}}function H(e){let t,l,b,o,a,n,p,d=!1;return a=k(e[26][0]),{c(){t=s("input"),i(t,"id",e[18](e[33])),i(t,"class","mc-listbox__input mc-checkbox__input svelte-1ptybb2"),i(t,"type","checkbox"),t.__value=l=e[31][e[6]],t.value=t.__value,t.checked=b=e[0].includes(e[31][e[6]]),t.disabled=o=Boolean(e[31][e[7]]),a.p(t)},m(l,b){c(l,t,b),t.checked=~(e[0]||[]).indexOf(t.__value),n||(p=[g(t,"change",e[27]),g(t,"change",e[23])],n=!0)},p(e,s){32832&s[0]&&l!==(l=e[31][e[6]])&&(t.__value=l,t.value=t.__value,d=!0),32833&s[0]&&b!==(b=e[0].includes(e[31][e[6]]))&&(t.checked=b),32896&s[0]&&o!==(o=Boolean(e[31][e[7]]))&&(t.disabled=o),(d||32769&s[0])&&(t.checked=~(e[0]||[]).indexOf(t.__value))},d(e){e&&r(t),a.r(),n=!1,w(p)}}}function j(e){let t,l,b,o,n,p,d=!1;return o=k(e[26][0]),{c(){t=s("input"),i(t,"id",e[18](e[33])),i(t,"class","mc-listbox__input svelte-1ptybb2"),i(t,"type","radio"),t.__value=l=e[31][e[6]],t.value=t.__value,i(t,"name",e[1]),t.disabled=b=Boolean(e[31][e[7]]),a(t,"is-disabled",e[31][e[7]]),o.p(t)},m(l,b){c(l,t,b),t.checked=t.__value===e[0],n||(p=[g(t,"change",e[25]),g(t,"change",e[22])],n=!0)},p(e,s){32832&s[0]&&l!==(l=e[31][e[6]])&&(t.__value=l,t.value=t.__value,d=!0),2&s[0]&&i(t,"name",e[1]),32896&s[0]&&b!==(b=Boolean(e[31][e[7]]))&&(t.disabled=b),(d||32769&s[0])&&(t.checked=t.__value===e[0]),32896&s[0]&&a(t,"is-disabled",e[31][e[7]])},d(e){e&&r(t),o.r(),n=!1,w(p)}}}function L(e){let t,l,b,o,n,p=e[31][e[5]]+"";function d(e,t){return e[2]?H:j}let m=d(e),v=m(e);return{c(){t=s("li"),v.c(),l=u(),b=s("label"),o=x(p),n=u(),i(b,"for",e[18](e[33])),i(b,"class","mc-listbox__label svelte-1ptybb2"),a(b,"mc-listbox__label--no-overflow",e[14]),i(t,"class","mc-listbox__tile svelte-1ptybb2"),a(t,"is-disabled",e[31][e[7]]),a(t,"mc-listbox__tile--auto-size",e[14])},m(e,s){c(e,t,s),v.m(t,null),h(t,l),h(t,b),h(b,o),h(t,n)},p(e,s){m===(m=d(e))&&v?v.p(e,s):(v.d(1),v=m(e),v&&(v.c(),v.m(t,l))),32800&s[0]&&p!==(p=e[31][e[5]]+"")&&y(o,p),16384&s[0]&&a(b,"mc-listbox__label--no-overflow",e[14]),32896&s[0]&&a(t,"is-disabled",e[31][e[7]]),16384&s[0]&&a(t,"mc-listbox__tile--auto-size",e[14])},d(e){e&&r(t),v.d()}}}function O(e){let t;function l(e,t){return e[3]?$:B}let b=l(e),p=b(e);return{c(){t=s("div"),p.c(),i(t,"class","mc-listbox svelte-1ptybb2"),o(t,"--listbox-maxwidth",e[8]),o(t,"--listbox-width",e[12]),o(t,"--listbox-minwidth",e[12]),a(t,"mc-listbox--options","options"===e[13]),a(t,"mc-listbox--multi",e[2]),a(t,"mc-listbox--overlay",e[11])},m(e,l){c(e,t,l),p.m(t,null)},p(e,s){b===(b=l(e))&&p?p.p(e,s):(p.d(1),p=b(e),p&&(p.c(),p.m(t,null))),256&s[0]&&o(t,"--listbox-maxwidth",e[8]),4096&s[0]&&o(t,"--listbox-width",e[12]),4096&s[0]&&o(t,"--listbox-minwidth",e[12]),8192&s[0]&&a(t,"mc-listbox--options","options"===e[13]),4&s[0]&&a(t,"mc-listbox--multi",e[2]),2048&s[0]&&a(t,"mc-listbox--overlay",e[11])},i:n,o:n,d(e){e&&r(t),p.d()}}}function A(e,t,l){let b,s,i;const o=Math.random();let{name:a=`listboxradio-${o}`}=t,{items:c}=t,{value:n}=t,{multiple:r}=t,{isfiltered:x}=t,{emptysearchlabel:h="No results found"}=t,{datatextexpr:y="label"}=t,{datavalueexpr:u="value"}=t,{datadisabledexpr:_="disabled"}=t,{maxwidth:f}=t,{selectall:g=!1}=t,{labelselectall:w="Select all"}=t,{overlay:k}=t,{width:E}=t,{type:C="options"}=t,{labelautosize:$=!1}=t,B=new z(p(),d());const M=[[]];return e.$$set=e=>{"name"in e&&l(1,a=e.name),"items"in e&&l(21,c=e.items),"value"in e&&l(0,n=e.value),"multiple"in e&&l(2,r=e.multiple),"isfiltered"in e&&l(3,x=e.isfiltered),"emptysearchlabel"in e&&l(4,h=e.emptysearchlabel),"datatextexpr"in e&&l(5,y=e.datatextexpr),"datavalueexpr"in e&&l(6,u=e.datavalueexpr),"datadisabledexpr"in e&&l(7,_=e.datadisabledexpr),"maxwidth"in e&&l(8,f=e.maxwidth),"selectall"in e&&l(9,g=e.selectall),"labelselectall"in e&&l(10,w=e.labelselectall),"overlay"in e&&l(11,k=e.overlay),"width"in e&&l(12,E=e.width),"type"in e&&l(13,C=e.type),"labelautosize"in e&&l(14,$=e.labelautosize)},e.$$.update=()=>{512&e.$$.dirty[0]&&l(16,b=null!=g&&g),2097152&e.$$.dirty[0]&&l(15,s=c?JSON.parse(c):[]),1&e.$$.dirty[0]&&l(0,n=n?(l(16,b=!1),l(17,i=!1),n&&0===n.length?(l(16,b=!1),l(17,i=!1)):n&&n.length<s.length?l(17,i=!0):n&&n.length===s.length&&l(16,b=!0),n):[])},l(17,i=!0),[n,a,r,x,h,y,u,_,f,g,w,k,E,C,$,s,b,i,function(e){return`listboxItem-${e+o}`},function(e){e.addEventListener("scroll",(()=>{e.offsetHeight+e.scrollTop>=e.scrollHeight&&B.dispatch("scrollend",{})}))},function(e){const t=e.target.checked;l(16,b=!!t),b?s.map((e=>{e[_]||-1!==n.indexOf(e[u])||n.push(e[u])})):l(0,n=[]),B.dispatch("select-all",n),l(0,n)},c,function(t){m.call(this,e,t)},function(t){m.call(this,e,t)},function(){b=this.checked,l(16,b),l(9,g)},function(){n=this.__value,l(0,n)},M,function(){n=v(M[0],this.__value,this.checked),l(0,n)}]}class N extends e{constructor(e){super(),t(this,e,A,O,l,{name:1,items:21,value:0,multiple:2,isfiltered:3,emptysearchlabel:4,datatextexpr:5,datavalueexpr:6,datadisabledexpr:7,maxwidth:8,selectall:9,labelselectall:10,overlay:11,width:12,type:13,labelautosize:14},E,[-1,-1])}}export{N as default};
|
|
2
2
|
//# sourceMappingURL=Listbox.nested.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Listbox.nested.js","sources":["../../../../src/components/listbox/Listbox.nested.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import type { ListboxItems } from './listbox.types';\n import { EventHandler } from '../../utilities/EventHandler';\n import {\n get_current_component,\n createEventDispatcher,\n } from 'svelte/internal';\n\n const uuid = Math.random();\n\n export let name: string = `listboxradio-${uuid}`;\n export let items: string;\n export let value: any;\n export let multiple: boolean;\n export let isfiltered: boolean;\n export let emptysearchlabel = 'No results found';\n export let datatextexpr = 'label';\n export let datavalueexpr = 'value';\n export let datadisabledexpr = 'disabled';\n export let maxwidth: string;\n export let selectall = false;\n export let labelselectall = 'Select all';\n export let overlay: boolean;\n export let width: string;\n export let type = 'options';\n\n let eventHandler = new EventHandler(\n get_current_component(),\n createEventDispatcher(),\n );\n\n $: allSelected = selectall ?? false;\n $: parsedItems = items ? (JSON.parse(items) as ListboxItems[]) : [];\n $: value = value ? (determineSelectionState() as []) : [];\n $: selectAllIndeterminate = true;\n\n function determineSelectionState(): [] {\n allSelected = false;\n selectAllIndeterminate = false;\n if (value && value.length === 0) {\n allSelected = false;\n selectAllIndeterminate = false;\n } else if (value && value.length < parsedItems.length) {\n selectAllIndeterminate = true;\n } else if (value && value.length === parsedItems.length) {\n allSelected = true;\n }\n\n return value;\n }\n\n function setItemId(index: number) {\n return `listboxItem-${index + uuid}`;\n }\n\n function scrollEnd(node: HTMLElement) {\n node.addEventListener('scroll', () => {\n if (node.offsetHeight + node.scrollTop >= node.scrollHeight) {\n eventHandler.dispatch('scrollend', {});\n }\n });\n }\n\n function onSelectAll(e: Event) {\n const ischecked = (<HTMLInputElement>e.target).checked;\n allSelected = ischecked ? true : false;\n if (allSelected) {\n parsedItems.map((item) => {\n if (\n !item[datadisabledexpr] &&\n value.indexOf(item[datavalueexpr]) === -1\n )\n value.push(item[datavalueexpr]);\n });\n } else {\n value = [];\n }\n eventHandler.dispatch('select-all', value);\n value = value;\n }\n</script>\n\n<div\n class=\"mc-listbox\"\n class:mc-listbox--options={type === 'options'}\n class:mc-listbox--multi={multiple}\n class:mc-listbox--overlay={overlay}\n style=\"--listbox-maxwidth: {maxwidth}; --listbox-width: {width}; --listbox-minwidth: {width};\"\n>\n {#if !isfiltered}\n <ul\n role=\"listbox\"\n class=\"mc-listbox__list\"\n aria-labelledby=\"listbox\"\n use:scrollEnd\n >\n {#if multiple && selectall}\n <li class=\"mc-listbox__tile\">\n <input\n id=\"select-all\"\n class=\"mc-listbox__input mc-checkbox__input\"\n type=\"checkbox\"\n indeterminate={selectAllIndeterminate}\n bind:checked={allSelected}\n on:change={onSelectAll}\n />\n <label for=\"select-all\" class=\"mc-listbox__label\">\n {labelselectall}\n </label>\n </li>\n {/if}\n {#each parsedItems as item, index}\n <li
|
|
1
|
+
{"version":3,"file":"Listbox.nested.js","sources":["../../../../src/components/listbox/Listbox.nested.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import type { ListboxItems } from './listbox.types';\n import { EventHandler } from '../../utilities/EventHandler';\n import {\n get_current_component,\n createEventDispatcher,\n } from 'svelte/internal';\n\n const uuid = Math.random();\n\n export let name: string = `listboxradio-${uuid}`;\n export let items: string;\n export let value: any;\n export let multiple: boolean;\n export let isfiltered: boolean;\n export let emptysearchlabel = 'No results found';\n export let datatextexpr = 'label';\n export let datavalueexpr = 'value';\n export let datadisabledexpr = 'disabled';\n export let maxwidth: string;\n export let selectall = false;\n export let labelselectall = 'Select all';\n export let overlay: boolean;\n export let width: string;\n export let type = 'options';\n export let labelautosize = false;\n\n let eventHandler = new EventHandler(\n get_current_component(),\n createEventDispatcher(),\n );\n\n $: allSelected = selectall ?? false;\n $: parsedItems = items ? (JSON.parse(items) as ListboxItems[]) : [];\n $: value = value ? (determineSelectionState() as []) : [];\n $: selectAllIndeterminate = true;\n\n function determineSelectionState(): [] {\n allSelected = false;\n selectAllIndeterminate = false;\n if (value && value.length === 0) {\n allSelected = false;\n selectAllIndeterminate = false;\n } else if (value && value.length < parsedItems.length) {\n selectAllIndeterminate = true;\n } else if (value && value.length === parsedItems.length) {\n allSelected = true;\n }\n\n return value;\n }\n\n function setItemId(index: number) {\n return `listboxItem-${index + uuid}`;\n }\n\n function scrollEnd(node: HTMLElement) {\n node.addEventListener('scroll', () => {\n if (node.offsetHeight + node.scrollTop >= node.scrollHeight) {\n eventHandler.dispatch('scrollend', {});\n }\n });\n }\n\n function onSelectAll(e: Event) {\n const ischecked = (<HTMLInputElement>e.target).checked;\n allSelected = ischecked ? true : false;\n if (allSelected) {\n parsedItems.map((item) => {\n if (\n !item[datadisabledexpr] &&\n value.indexOf(item[datavalueexpr]) === -1\n )\n value.push(item[datavalueexpr]);\n });\n } else {\n value = [];\n }\n eventHandler.dispatch('select-all', value);\n value = value;\n }\n</script>\n\n<div\n class=\"mc-listbox\"\n class:mc-listbox--options={type === 'options'}\n class:mc-listbox--multi={multiple}\n class:mc-listbox--overlay={overlay}\n style=\"--listbox-maxwidth: {maxwidth}; --listbox-width: {width}; --listbox-minwidth: {width};\"\n>\n {#if !isfiltered}\n <ul\n role=\"listbox\"\n class=\"mc-listbox__list\"\n aria-labelledby=\"listbox\"\n use:scrollEnd\n >\n {#if multiple && selectall}\n <li class=\"mc-listbox__tile\">\n <input\n id=\"select-all\"\n class=\"mc-listbox__input mc-checkbox__input\"\n type=\"checkbox\"\n indeterminate={selectAllIndeterminate}\n bind:checked={allSelected}\n on:change={onSelectAll}\n />\n <label for=\"select-all\" class=\"mc-listbox__label\">\n {labelselectall}\n </label>\n </li>\n {/if}\n {#each parsedItems as item, index}\n <li\n class=\"mc-listbox__tile\"\n class:is-disabled={item[datadisabledexpr]}\n class:mc-listbox__tile--auto-size={labelautosize}\n >\n {#if !multiple}\n <input\n id={setItemId(index)}\n class=\"mc-listbox__input\"\n class:is-disabled={item[datadisabledexpr]}\n type=\"radio\"\n value={item[datavalueexpr]}\n {name}\n disabled={Boolean(item[datadisabledexpr])}\n bind:group={value}\n on:change\n />\n {:else}\n <input\n id={setItemId(index)}\n class=\"mc-listbox__input mc-checkbox__input\"\n type=\"checkbox\"\n value={item[datavalueexpr]}\n checked={value.includes(item[datavalueexpr])}\n disabled={Boolean(item[datadisabledexpr])}\n bind:group={value}\n on:change\n />\n {/if}\n\n <label\n for={setItemId(index)}\n class=\"mc-listbox__label\"\n class:mc-listbox__label--no-overflow={labelautosize}\n >\n {item[datatextexpr]}\n </label>\n </li>\n {/each}\n </ul>\n {:else}\n <div class=\"mc-listbox__tile mc-listbox__tile--empty\">\n <span class=\"mc-listbox__label\">{emptysearchlabel}</span>\n </div>\n {/if}\n</div>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/all-settings';\n @import '@mozaic-ds/styles/components/c.checkbox';\n @import '@mozaic-ds/styles/components/c.listbox';\n\n .mc-listbox__tile--auto-size {\n height: auto !important;\n min-height: 3rem;\n }\n .mc-listbox__label--no-overflow {\n white-space: break-spaces;\n }\n</style>\n"],"names":["ctx","insert","target","div","anchor","append","span","if_block","create_if_block_2","length","i","ul","li","input","label","attr","__value","input_value_value","checked","input_checked_value","includes","Boolean","indexOf","dirty","toggle_class","t1_value","create_if_block_1","set_data","t1","create_if_block","uuid","Math","random","name","$$props","items","value","multiple","isfiltered","emptysearchlabel","datatextexpr","datavalueexpr","datadisabledexpr","maxwidth","selectall","labelselectall","overlay","width","type","labelautosize","eventHandler","EventHandler","get_current_component","createEventDispatcher","$$invalidate","allSelected","parsedItems","JSON","parse","selectAllIndeterminate","index","node","addEventListener","offsetHeight","scrollTop","scrollHeight","dispatch","e","ischecked","map","item","push","this","get_binding_group_value","$$binding_groups"],"mappings":"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"}
|