@everymatrix/general-multi-select 1.87.26 → 1.87.28
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/dist/cjs/{general-multi-select-d6d7ba29.js → general-multi-select-419c4b0d.js} +71 -12
- package/dist/cjs/general-multi-select.cjs.entry.js +1 -1
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/collection/components/general-multi-select/general-multi-select.css +4 -3
- package/dist/esm/{general-multi-select-34103e73.js → general-multi-select-b80416cd.js} +71 -12
- package/dist/esm/general-multi-select.entry.js +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/general-multi-select/general-multi-select-b80416cd.js +1 -0
- package/dist/general-multi-select/general-multi-select.entry.js +1 -1
- package/dist/general-multi-select/index.esm.js +1 -1
- package/package.json +1 -1
- package/dist/general-multi-select/general-multi-select-34103e73.js +0 -1
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
const index = require('./index-5b495c2d.js');
|
|
4
4
|
|
|
5
|
+
const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
|
|
6
|
+
|
|
5
7
|
/**
|
|
6
8
|
* @name setClientStyling
|
|
7
9
|
* @description Method used to create and append to the passed element of the widget a style element with the content received
|
|
@@ -47,21 +49,78 @@ function setClientStylingURL(stylingContainer, clientStylingUrl) {
|
|
|
47
49
|
* @param {HTMLElement} stylingContainer The highest element of the widget
|
|
48
50
|
* @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
|
|
49
51
|
* @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
|
|
52
|
+
* @param {boolean} useAdoptedStyleSheets A flag to gradually enable testing of adoptedStyleSheets
|
|
50
53
|
*/
|
|
51
|
-
function setStreamStyling(stylingContainer, domain, subscription) {
|
|
52
|
-
if (window.emMessageBus)
|
|
53
|
-
const sheet = document.createElement('style');
|
|
54
|
+
function setStreamStyling(stylingContainer, domain, subscription, useAdoptedStyleSheets = false) {
|
|
55
|
+
if (!window.emMessageBus) return;
|
|
54
56
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
57
|
+
const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
|
|
58
|
+
|
|
59
|
+
if (!supportAdoptStyle || !useAdoptedStyleSheets) {
|
|
60
|
+
subscription = getStyleTagSubscription(stylingContainer, domain);
|
|
61
|
+
|
|
62
|
+
return subscription;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
if (!window[StyleCacheKey]) {
|
|
66
|
+
window[StyleCacheKey] = {};
|
|
61
67
|
}
|
|
68
|
+
subscription = getAdoptStyleSubscription(stylingContainer, domain);
|
|
69
|
+
|
|
70
|
+
const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
|
|
71
|
+
const wrappedUnsubscribe = () => {
|
|
72
|
+
if (window[StyleCacheKey][domain]) {
|
|
73
|
+
const cachedObject = window[StyleCacheKey][domain];
|
|
74
|
+
cachedObject.refCount > 1
|
|
75
|
+
? (cachedObject.refCount = cachedObject.refCount - 1)
|
|
76
|
+
: delete window[StyleCacheKey][domain];
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
originalUnsubscribe();
|
|
80
|
+
};
|
|
81
|
+
subscription.unsubscribe = wrappedUnsubscribe;
|
|
82
|
+
|
|
83
|
+
return subscription;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
function getStyleTagSubscription(stylingContainer, domain) {
|
|
87
|
+
const sheet = document.createElement('style');
|
|
88
|
+
|
|
89
|
+
return window.emMessageBus.subscribe(domain, (data) => {
|
|
90
|
+
if (stylingContainer) {
|
|
91
|
+
sheet.innerHTML = data;
|
|
92
|
+
stylingContainer.appendChild(sheet);
|
|
93
|
+
}
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
function getAdoptStyleSubscription(stylingContainer, domain) {
|
|
98
|
+
return window.emMessageBus.subscribe(domain, (data) => {
|
|
99
|
+
if (!stylingContainer) return;
|
|
100
|
+
|
|
101
|
+
const shadowRoot = stylingContainer.getRootNode();
|
|
102
|
+
const cacheStyleObject = window[StyleCacheKey];
|
|
103
|
+
let cachedStyle = cacheStyleObject[domain]?.sheet;
|
|
104
|
+
|
|
105
|
+
if (!cachedStyle) {
|
|
106
|
+
cachedStyle = new CSSStyleSheet();
|
|
107
|
+
cachedStyle.replaceSync(data);
|
|
108
|
+
cacheStyleObject[domain] = {
|
|
109
|
+
sheet: cachedStyle,
|
|
110
|
+
refCount: 1
|
|
111
|
+
};
|
|
112
|
+
} else {
|
|
113
|
+
cacheStyleObject[domain].refCount = cacheStyleObject[domain].refCount + 1;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
const currentSheets = shadowRoot.adoptedStyleSheets || [];
|
|
117
|
+
if (!currentSheets.includes(cachedStyle)) {
|
|
118
|
+
shadowRoot.adoptedStyleSheets = [...currentSheets, cachedStyle];
|
|
119
|
+
}
|
|
120
|
+
});
|
|
62
121
|
}
|
|
63
122
|
|
|
64
|
-
const generalMultiSelectCss = ".multi-select-container{position:relative;font-family:\"Inter\", sans-serif;margin-top:4px;width:100%}.flex-row{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;padding:
|
|
123
|
+
const generalMultiSelectCss = ".multi-select-container{position:relative;font-family:\"Inter\", sans-serif;margin-top:4px;width:100%}.flex-row{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;padding:6px 10px;padding-right:6px;border-radius:0.25em;background:var(--emw-selector-color-background, #e8ebef);cursor:pointer}.control{flex:1;display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden}.control:focus-within{border-color:var(--emw--color-primary, #fed275);box-shadow:0 0 0 2px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15))}.chip{display:inline-flex;align-items:center;background:var(--emw--color-gray-50, #f5f5f5);color:var(--emw--color-dialog-typography, #000);border-radius:4px;padding:2px 8px;margin-right:6px;font-size:0.875rem;line-height:1.2;justify-content:space-between;flex:0 1 auto;min-width:0}.chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.overflow-chip{background:var(--emw--color-gray-100, #e6e6e6);color:var(--emw--color-gray-300, #333);width:20px;text-align:center;display:block}.remove-btn{background:none;border:none;font-size:1rem;margin-left:6px;cursor:pointer;color:var(--emw--color-gray-150, #6f6f6f)}.remove-btn:hover{color:var(--emw--color-error, red)}.placeholder{color:var(--emw--color-gray-150, #6f6f6f);font-size:0.875rem;padding:3px 8px;padding-left:0;line-height:1.2}.arrow{margin-left:auto;font-size:0.8rem;width:20px;color:var(--emw--color-gray-150, #6f6f6f)}.dropdown{position:absolute;top:calc(100% + 4px);left:0;width:100%;max-height:240px;overflow-y:auto;border:1px solid var(--emw--color-gray-100, #e6e6e6);border-radius:6px;background:var(--emw--color-dialog-background, #ffffff);box-shadow:0 4px 12px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));z-index:10}.dropdown-item{padding:10px 14px;cursor:pointer;font-size:0.875rem;line-height:1.4;transition:background 0.2s}.dropdown-item:hover{background:var(--emw--color-background-tertiary, #ccc);color:var(--emw--color-typography, #000)}.dropdown-item.selected{background:var(--emw--color-background-secondary, #f5f5f5);color:var(--emw--color-typography, #000);font-weight:500}.overflow-popover{position:absolute;top:var(--overflow-top, 0px);left:var(--overflow-left, 0px);max-width:200px;padding:12px;display:flex;flex-wrap:wrap;gap:6px;border:1px solid var(--emw--color-gray-100, #d0d5dd);border-radius:6px;background:var(--emw--color-background, #ffffff);box-shadow:0 4px 12px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));z-index:20}";
|
|
65
124
|
const GeneralMultiSelectStyle0 = generalMultiSelectCss;
|
|
66
125
|
|
|
67
126
|
const GeneralMultiSelect = class {
|
|
@@ -147,13 +206,13 @@ const GeneralMultiSelect = class {
|
|
|
147
206
|
}
|
|
148
207
|
handleMbSourceChange(newValue, oldValue) {
|
|
149
208
|
if (newValue != oldValue) {
|
|
150
|
-
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style
|
|
209
|
+
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
|
|
151
210
|
}
|
|
152
211
|
}
|
|
153
212
|
componentDidLoad() {
|
|
154
213
|
if (this.stylingContainer) {
|
|
155
214
|
if (this.mbSource)
|
|
156
|
-
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style
|
|
215
|
+
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
|
|
157
216
|
if (this.clientStyling)
|
|
158
217
|
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
159
218
|
if (this.clientStylingUrl)
|
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -11,9 +11,9 @@
|
|
|
11
11
|
flex-direction: row;
|
|
12
12
|
align-items: center;
|
|
13
13
|
flex-wrap: nowrap;
|
|
14
|
-
padding:
|
|
15
|
-
padding-right:
|
|
16
|
-
border-radius:
|
|
14
|
+
padding: 6px 10px;
|
|
15
|
+
padding-right: 6px;
|
|
16
|
+
border-radius: 0.25em;
|
|
17
17
|
background: var(--emw-selector-color-background, #e8ebef);
|
|
18
18
|
cursor: pointer;
|
|
19
19
|
}
|
|
@@ -81,6 +81,7 @@
|
|
|
81
81
|
color: var(--emw--color-gray-150, #6f6f6f);
|
|
82
82
|
font-size: 0.875rem;
|
|
83
83
|
padding: 3px 8px;
|
|
84
|
+
padding-left: 0;
|
|
84
85
|
line-height: 1.2;
|
|
85
86
|
}
|
|
86
87
|
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, g as getAssetPath, h } from './index-4b050939.js';
|
|
2
2
|
|
|
3
|
+
const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
|
|
4
|
+
|
|
3
5
|
/**
|
|
4
6
|
* @name setClientStyling
|
|
5
7
|
* @description Method used to create and append to the passed element of the widget a style element with the content received
|
|
@@ -45,21 +47,78 @@ function setClientStylingURL(stylingContainer, clientStylingUrl) {
|
|
|
45
47
|
* @param {HTMLElement} stylingContainer The highest element of the widget
|
|
46
48
|
* @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
|
|
47
49
|
* @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
|
|
50
|
+
* @param {boolean} useAdoptedStyleSheets A flag to gradually enable testing of adoptedStyleSheets
|
|
48
51
|
*/
|
|
49
|
-
function setStreamStyling(stylingContainer, domain, subscription) {
|
|
50
|
-
if (window.emMessageBus)
|
|
51
|
-
const sheet = document.createElement('style');
|
|
52
|
+
function setStreamStyling(stylingContainer, domain, subscription, useAdoptedStyleSheets = false) {
|
|
53
|
+
if (!window.emMessageBus) return;
|
|
52
54
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
55
|
+
const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
|
|
56
|
+
|
|
57
|
+
if (!supportAdoptStyle || !useAdoptedStyleSheets) {
|
|
58
|
+
subscription = getStyleTagSubscription(stylingContainer, domain);
|
|
59
|
+
|
|
60
|
+
return subscription;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
if (!window[StyleCacheKey]) {
|
|
64
|
+
window[StyleCacheKey] = {};
|
|
59
65
|
}
|
|
66
|
+
subscription = getAdoptStyleSubscription(stylingContainer, domain);
|
|
67
|
+
|
|
68
|
+
const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
|
|
69
|
+
const wrappedUnsubscribe = () => {
|
|
70
|
+
if (window[StyleCacheKey][domain]) {
|
|
71
|
+
const cachedObject = window[StyleCacheKey][domain];
|
|
72
|
+
cachedObject.refCount > 1
|
|
73
|
+
? (cachedObject.refCount = cachedObject.refCount - 1)
|
|
74
|
+
: delete window[StyleCacheKey][domain];
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
originalUnsubscribe();
|
|
78
|
+
};
|
|
79
|
+
subscription.unsubscribe = wrappedUnsubscribe;
|
|
80
|
+
|
|
81
|
+
return subscription;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
function getStyleTagSubscription(stylingContainer, domain) {
|
|
85
|
+
const sheet = document.createElement('style');
|
|
86
|
+
|
|
87
|
+
return window.emMessageBus.subscribe(domain, (data) => {
|
|
88
|
+
if (stylingContainer) {
|
|
89
|
+
sheet.innerHTML = data;
|
|
90
|
+
stylingContainer.appendChild(sheet);
|
|
91
|
+
}
|
|
92
|
+
});
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
function getAdoptStyleSubscription(stylingContainer, domain) {
|
|
96
|
+
return window.emMessageBus.subscribe(domain, (data) => {
|
|
97
|
+
if (!stylingContainer) return;
|
|
98
|
+
|
|
99
|
+
const shadowRoot = stylingContainer.getRootNode();
|
|
100
|
+
const cacheStyleObject = window[StyleCacheKey];
|
|
101
|
+
let cachedStyle = cacheStyleObject[domain]?.sheet;
|
|
102
|
+
|
|
103
|
+
if (!cachedStyle) {
|
|
104
|
+
cachedStyle = new CSSStyleSheet();
|
|
105
|
+
cachedStyle.replaceSync(data);
|
|
106
|
+
cacheStyleObject[domain] = {
|
|
107
|
+
sheet: cachedStyle,
|
|
108
|
+
refCount: 1
|
|
109
|
+
};
|
|
110
|
+
} else {
|
|
111
|
+
cacheStyleObject[domain].refCount = cacheStyleObject[domain].refCount + 1;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
const currentSheets = shadowRoot.adoptedStyleSheets || [];
|
|
115
|
+
if (!currentSheets.includes(cachedStyle)) {
|
|
116
|
+
shadowRoot.adoptedStyleSheets = [...currentSheets, cachedStyle];
|
|
117
|
+
}
|
|
118
|
+
});
|
|
60
119
|
}
|
|
61
120
|
|
|
62
|
-
const generalMultiSelectCss = ".multi-select-container{position:relative;font-family:\"Inter\", sans-serif;margin-top:4px;width:100%}.flex-row{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;padding:
|
|
121
|
+
const generalMultiSelectCss = ".multi-select-container{position:relative;font-family:\"Inter\", sans-serif;margin-top:4px;width:100%}.flex-row{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;padding:6px 10px;padding-right:6px;border-radius:0.25em;background:var(--emw-selector-color-background, #e8ebef);cursor:pointer}.control{flex:1;display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden}.control:focus-within{border-color:var(--emw--color-primary, #fed275);box-shadow:0 0 0 2px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15))}.chip{display:inline-flex;align-items:center;background:var(--emw--color-gray-50, #f5f5f5);color:var(--emw--color-dialog-typography, #000);border-radius:4px;padding:2px 8px;margin-right:6px;font-size:0.875rem;line-height:1.2;justify-content:space-between;flex:0 1 auto;min-width:0}.chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.overflow-chip{background:var(--emw--color-gray-100, #e6e6e6);color:var(--emw--color-gray-300, #333);width:20px;text-align:center;display:block}.remove-btn{background:none;border:none;font-size:1rem;margin-left:6px;cursor:pointer;color:var(--emw--color-gray-150, #6f6f6f)}.remove-btn:hover{color:var(--emw--color-error, red)}.placeholder{color:var(--emw--color-gray-150, #6f6f6f);font-size:0.875rem;padding:3px 8px;padding-left:0;line-height:1.2}.arrow{margin-left:auto;font-size:0.8rem;width:20px;color:var(--emw--color-gray-150, #6f6f6f)}.dropdown{position:absolute;top:calc(100% + 4px);left:0;width:100%;max-height:240px;overflow-y:auto;border:1px solid var(--emw--color-gray-100, #e6e6e6);border-radius:6px;background:var(--emw--color-dialog-background, #ffffff);box-shadow:0 4px 12px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));z-index:10}.dropdown-item{padding:10px 14px;cursor:pointer;font-size:0.875rem;line-height:1.4;transition:background 0.2s}.dropdown-item:hover{background:var(--emw--color-background-tertiary, #ccc);color:var(--emw--color-typography, #000)}.dropdown-item.selected{background:var(--emw--color-background-secondary, #f5f5f5);color:var(--emw--color-typography, #000);font-weight:500}.overflow-popover{position:absolute;top:var(--overflow-top, 0px);left:var(--overflow-left, 0px);max-width:200px;padding:12px;display:flex;flex-wrap:wrap;gap:6px;border:1px solid var(--emw--color-gray-100, #d0d5dd);border-radius:6px;background:var(--emw--color-background, #ffffff);box-shadow:0 4px 12px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));z-index:20}";
|
|
63
122
|
const GeneralMultiSelectStyle0 = generalMultiSelectCss;
|
|
64
123
|
|
|
65
124
|
const GeneralMultiSelect = class {
|
|
@@ -145,13 +204,13 @@ const GeneralMultiSelect = class {
|
|
|
145
204
|
}
|
|
146
205
|
handleMbSourceChange(newValue, oldValue) {
|
|
147
206
|
if (newValue != oldValue) {
|
|
148
|
-
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style
|
|
207
|
+
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
|
|
149
208
|
}
|
|
150
209
|
}
|
|
151
210
|
componentDidLoad() {
|
|
152
211
|
if (this.stylingContainer) {
|
|
153
212
|
if (this.mbSource)
|
|
154
|
-
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style
|
|
213
|
+
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
|
|
155
214
|
if (this.clientStyling)
|
|
156
215
|
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
157
216
|
if (this.clientStylingUrl)
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { G as general_multi_select } from './general-multi-select-
|
|
1
|
+
export { G as general_multi_select } from './general-multi-select-b80416cd.js';
|
|
2
2
|
import './index-4b050939.js';
|
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { G as GeneralMultiSelect } from './general-multi-select-
|
|
1
|
+
export { G as GeneralMultiSelect } from './general-multi-select-b80416cd.js';
|
|
2
2
|
import './index-4b050939.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,c as e,g as i,h as o}from"./index-4b050939.js";const s="__WIDGET_GLOBAL_STYLE_CACHE__";function r(t,e){if(t){const i=document.createElement("style");i.innerHTML=e,t.appendChild(i)}}function n(t,e){if(!t||!e)return;const i=new URL(e);fetch(i.href).then((t=>t.text())).then((e=>{const i=document.createElement("style");i.innerHTML=e,t&&t.appendChild(i)})).catch((t=>{console.error("There was an error while trying to load client styling from URL",t)}))}function a(t,e,i,o=!1){if(!window.emMessageBus)return;if(!("adoptedStyleSheets"in Document.prototype)||!o)return i=function(t,e){const i=document.createElement("style");return window.emMessageBus.subscribe(e,(e=>{t&&(i.innerHTML=e,t.appendChild(i))}))}(t,e),i;window[s]||(window[s]={}),i=function(t,e){return window.emMessageBus.subscribe(e,(i=>{if(!t)return;const o=t.getRootNode(),r=window[s];let n=r[e]?.sheet;n?r[e].refCount=r[e].refCount+1:(n=new CSSStyleSheet,n.replaceSync(i),r[e]={sheet:n,refCount:1});const a=o.adoptedStyleSheets||[];a.includes(n)||(o.adoptedStyleSheets=[...a,n])}))}(t,e);const r=i.unsubscribe.bind(i);return i.unsubscribe=()=>{if(window[s][e]){const t=window[s][e];t.refCount>1?t.refCount=t.refCount-1:delete window[s][e]}r()},i}const c=class{constructor(o){t(this,o),this.change=e(this,"change",7),this.handleOutsideClick=t=>{t.composedPath().includes(this.el)||(this.dropdownOpen=!1,this.overflowOpen=!1)},this.toggleDropdown=t=>{t.stopPropagation(),this.dropdownOpen=!this.dropdownOpen,this.overflowOpen=!1},this.isSelected=t=>this.selectedValues.includes(t),this.selectItem=t=>{this.isSelected(t.value)||(this.selectedValues=[...this.selectedValues,t.value],this.change.emit(this.selectedValues))},this.toggleItem=t=>{this.isSelected(t.value)?this.removeItem(t.value):this.selectItem(t)},this.removeItem=(t,e)=>{e&&e.stopPropagation(),this.selectedValues=this.selectedValues.filter((e=>e!==t)),this.change.emit(this.selectedValues)},this.downIcon=i("../static/dropdown.svg"),this.upIcon=i("../static/dropup.svg"),this.isTouch="ontouchstart"in window,this.openOverflow=()=>{this.isTouch||(this.computePopoverPosition(),this.overflowOpen=!0)},this.closeOverflow=()=>{this.isTouch||(this.overflowOpen=!1)},this.toggleOverflow=t=>{t.stopPropagation(),this.computePopoverPosition(),this.overflowOpen=!this.overflowOpen},this.mbSource=void 0,this.clientStyling=void 0,this.clientStylingUrl=void 0,this.options=[],this.maxVisibleChips=2,this.placeholder="",this.selectedValues=[],this.dropdownOpen=!1,this.overflowOpen=!1,this.popoverStyle={top:"0px",left:"0px"}}handleClientStylingChange(t,e){t!=e&&r(this.stylingContainer,this.clientStyling)}handleClientStylingUrlChange(t,e){t!=e&&n(this.stylingContainer,this.clientStylingUrl)}handleMbSourceChange(t,e){t!=e&&a(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription)}componentDidLoad(){this.stylingContainer&&(this.mbSource&&a(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription),this.clientStyling&&r(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&n(this.stylingContainer,this.clientStylingUrl))}async clear(){this.selectedValues=[],this.change.emit(this.selectedValues)}componentWillLoad(){document.addEventListener("click",this.handleOutsideClick)}disconnectedCallback(){document.removeEventListener("click",this.handleOutsideClick),this.stylingSubscription&&this.stylingSubscription.unsubscribe()}get selectedOptions(){return this.options.filter((t=>this.isSelected(t.value)))}get visibleChips(){return this.selectedOptions.slice(0,this.maxVisibleChips)}get hiddenChips(){return this.selectedOptions.slice(this.maxVisibleChips)}computePopoverPosition(){if(this.overflowChipEl&&this.el){const{left:t}=this.overflowChipEl.getBoundingClientRect(),{left:e,height:i}=this.el.getBoundingClientRect();this.popoverStyle={top:i-10+"px",left:t-e+"px"}}}render(){var t;return o("div",{key:"50b48397be3ede1907ab2c2abcd1cf2f43f69c13",class:"general-multi-select-container",ref:t=>this.stylingContainer=t},o("div",{key:"696a1bb1f221f8f5cf290fac040af10e2e5a115e",class:"multi-select-container",ref:t=>this.el=t},o("div",{key:"9ea92f01787b26d43054573a11896cf65065b073",class:"flex-row",onClick:this.toggleDropdown},o("div",{key:"f79720ca3ec383ee7f95b09483698ee18119c79a",class:"control"},this.visibleChips.map((t=>o("span",{class:"chip"},o("div",{class:"chip-text",title:t.text},t.text),o("div",{class:"remove-btn",onClick:e=>this.removeItem(t.value,e)},"×")))),this.hiddenChips.length>0&&o("span",{key:"25e9e527c33dd7a315dacb10cc51084fe69b9b7e",class:"chip overflow-chip",ref:t=>this.overflowChipEl=t,onMouseEnter:this.openOverflow,onMouseLeave:this.closeOverflow,onClick:this.toggleOverflow},"•••"),0===this.selectedValues.length&&o("span",{key:"b061de660a55f7a0d41ce9aa650108d3f38a9dc0",class:"placeholder"},this.placeholder)),o("div",{key:"f83b6517e88b3976cdc18590f8f1233cb2515230",class:"arrow"},o("img",{key:"1b61a49090237057b98e5ce8a4f7c1e3bfc9d4ba",class:"info-icon",src:this.dropdownOpen?this.upIcon:this.downIcon,style:{width:"18px"}}))),this.dropdownOpen&&o("div",{key:"e5b081007bcbdd251ce5ac235c1f19f17852c420",class:"dropdown"},this.options.map((t=>o("div",{class:{"dropdown-item":!0,selected:this.isSelected(t.value)},onClick:()=>this.toggleItem(t)},t.text)))),this.overflowOpen&&!!(null===(t=this.hiddenChips)||void 0===t?void 0:t.length)&&o("div",{key:"f8e3289042c69c569bebcd0a40d90f31261c6c12",class:"overflow-popover",style:{top:this.popoverStyle.top,left:this.popoverStyle.left},onMouseEnter:this.openOverflow,onMouseLeave:this.closeOverflow},this.hiddenChips.map((t=>o("span",{class:"chip"},o("span",{class:"chip-text",title:t.text},t.text),o("span",{class:"remove-btn",onClick:e=>this.removeItem(t.value,e)},"×")))))))}static get assetsDirs(){return["../static"]}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"],mbSource:["handleMbSourceChange"]}}};c.style='.multi-select-container{position:relative;font-family:"Inter", sans-serif;margin-top:4px;width:100%}.flex-row{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;padding:6px 10px;padding-right:6px;border-radius:0.25em;background:var(--emw-selector-color-background, #e8ebef);cursor:pointer}.control{flex:1;display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden}.control:focus-within{border-color:var(--emw--color-primary, #fed275);box-shadow:0 0 0 2px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15))}.chip{display:inline-flex;align-items:center;background:var(--emw--color-gray-50, #f5f5f5);color:var(--emw--color-dialog-typography, #000);border-radius:4px;padding:2px 8px;margin-right:6px;font-size:0.875rem;line-height:1.2;justify-content:space-between;flex:0 1 auto;min-width:0}.chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.overflow-chip{background:var(--emw--color-gray-100, #e6e6e6);color:var(--emw--color-gray-300, #333);width:20px;text-align:center;display:block}.remove-btn{background:none;border:none;font-size:1rem;margin-left:6px;cursor:pointer;color:var(--emw--color-gray-150, #6f6f6f)}.remove-btn:hover{color:var(--emw--color-error, red)}.placeholder{color:var(--emw--color-gray-150, #6f6f6f);font-size:0.875rem;padding:3px 8px;padding-left:0;line-height:1.2}.arrow{margin-left:auto;font-size:0.8rem;width:20px;color:var(--emw--color-gray-150, #6f6f6f)}.dropdown{position:absolute;top:calc(100% + 4px);left:0;width:100%;max-height:240px;overflow-y:auto;border:1px solid var(--emw--color-gray-100, #e6e6e6);border-radius:6px;background:var(--emw--color-dialog-background, #ffffff);box-shadow:0 4px 12px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));z-index:10}.dropdown-item{padding:10px 14px;cursor:pointer;font-size:0.875rem;line-height:1.4;transition:background 0.2s}.dropdown-item:hover{background:var(--emw--color-background-tertiary, #ccc);color:var(--emw--color-typography, #000)}.dropdown-item.selected{background:var(--emw--color-background-secondary, #f5f5f5);color:var(--emw--color-typography, #000);font-weight:500}.overflow-popover{position:absolute;top:var(--overflow-top, 0px);left:var(--overflow-left, 0px);max-width:200px;padding:12px;display:flex;flex-wrap:wrap;gap:6px;border:1px solid var(--emw--color-gray-100, #d0d5dd);border-radius:6px;background:var(--emw--color-background, #ffffff);box-shadow:0 4px 12px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));z-index:20}';export{c as G}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export{G as general_multi_select}from"./general-multi-select-
|
|
1
|
+
export{G as general_multi_select}from"./general-multi-select-b80416cd.js";import"./index-4b050939.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export{G as GeneralMultiSelect}from"./general-multi-select-
|
|
1
|
+
export{G as GeneralMultiSelect}from"./general-multi-select-b80416cd.js";import"./index-4b050939.js";
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as e,g as i,h as o}from"./index-4b050939.js";function s(t,e){if(t){const i=document.createElement("style");i.innerHTML=e,t.appendChild(i)}}function r(t,e){if(!t||!e)return;const i=new URL(e);fetch(i.href).then((t=>t.text())).then((e=>{const i=document.createElement("style");i.innerHTML=e,t&&t.appendChild(i)})).catch((t=>{console.error("There was an error while trying to load client styling from URL",t)}))}function a(t,e){if(window.emMessageBus){const i=document.createElement("style");window.emMessageBus.subscribe(e,(e=>{i.innerHTML=e,t&&t.appendChild(i)}))}}const c=class{constructor(o){t(this,o),this.change=e(this,"change",7),this.handleOutsideClick=t=>{t.composedPath().includes(this.el)||(this.dropdownOpen=!1,this.overflowOpen=!1)},this.toggleDropdown=t=>{t.stopPropagation(),this.dropdownOpen=!this.dropdownOpen,this.overflowOpen=!1},this.isSelected=t=>this.selectedValues.includes(t),this.selectItem=t=>{this.isSelected(t.value)||(this.selectedValues=[...this.selectedValues,t.value],this.change.emit(this.selectedValues))},this.toggleItem=t=>{this.isSelected(t.value)?this.removeItem(t.value):this.selectItem(t)},this.removeItem=(t,e)=>{e&&e.stopPropagation(),this.selectedValues=this.selectedValues.filter((e=>e!==t)),this.change.emit(this.selectedValues)},this.downIcon=i("../static/dropdown.svg"),this.upIcon=i("../static/dropup.svg"),this.isTouch="ontouchstart"in window,this.openOverflow=()=>{this.isTouch||(this.computePopoverPosition(),this.overflowOpen=!0)},this.closeOverflow=()=>{this.isTouch||(this.overflowOpen=!1)},this.toggleOverflow=t=>{t.stopPropagation(),this.computePopoverPosition(),this.overflowOpen=!this.overflowOpen},this.mbSource=void 0,this.clientStyling=void 0,this.clientStylingUrl=void 0,this.options=[],this.maxVisibleChips=2,this.placeholder="",this.selectedValues=[],this.dropdownOpen=!1,this.overflowOpen=!1,this.popoverStyle={top:"0px",left:"0px"}}handleClientStylingChange(t,e){t!=e&&s(this.stylingContainer,this.clientStyling)}handleClientStylingUrlChange(t,e){t!=e&&r(this.stylingContainer,this.clientStylingUrl)}handleMbSourceChange(t,e){t!=e&&a(this.stylingContainer,`${this.mbSource}.Style`)}componentDidLoad(){this.stylingContainer&&(this.mbSource&&a(this.stylingContainer,`${this.mbSource}.Style`),this.clientStyling&&s(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&r(this.stylingContainer,this.clientStylingUrl))}async clear(){this.selectedValues=[],this.change.emit(this.selectedValues)}componentWillLoad(){document.addEventListener("click",this.handleOutsideClick)}disconnectedCallback(){document.removeEventListener("click",this.handleOutsideClick),this.stylingSubscription&&this.stylingSubscription.unsubscribe()}get selectedOptions(){return this.options.filter((t=>this.isSelected(t.value)))}get visibleChips(){return this.selectedOptions.slice(0,this.maxVisibleChips)}get hiddenChips(){return this.selectedOptions.slice(this.maxVisibleChips)}computePopoverPosition(){if(this.overflowChipEl&&this.el){const{left:t}=this.overflowChipEl.getBoundingClientRect(),{left:e,height:i}=this.el.getBoundingClientRect();this.popoverStyle={top:i-10+"px",left:t-e+"px"}}}render(){var t;return o("div",{key:"50b48397be3ede1907ab2c2abcd1cf2f43f69c13",class:"general-multi-select-container",ref:t=>this.stylingContainer=t},o("div",{key:"696a1bb1f221f8f5cf290fac040af10e2e5a115e",class:"multi-select-container",ref:t=>this.el=t},o("div",{key:"9ea92f01787b26d43054573a11896cf65065b073",class:"flex-row",onClick:this.toggleDropdown},o("div",{key:"f79720ca3ec383ee7f95b09483698ee18119c79a",class:"control"},this.visibleChips.map((t=>o("span",{class:"chip"},o("div",{class:"chip-text",title:t.text},t.text),o("div",{class:"remove-btn",onClick:e=>this.removeItem(t.value,e)},"×")))),this.hiddenChips.length>0&&o("span",{key:"25e9e527c33dd7a315dacb10cc51084fe69b9b7e",class:"chip overflow-chip",ref:t=>this.overflowChipEl=t,onMouseEnter:this.openOverflow,onMouseLeave:this.closeOverflow,onClick:this.toggleOverflow},"•••"),0===this.selectedValues.length&&o("span",{key:"b061de660a55f7a0d41ce9aa650108d3f38a9dc0",class:"placeholder"},this.placeholder)),o("div",{key:"f83b6517e88b3976cdc18590f8f1233cb2515230",class:"arrow"},o("img",{key:"1b61a49090237057b98e5ce8a4f7c1e3bfc9d4ba",class:"info-icon",src:this.dropdownOpen?this.upIcon:this.downIcon,style:{width:"18px"}}))),this.dropdownOpen&&o("div",{key:"e5b081007bcbdd251ce5ac235c1f19f17852c420",class:"dropdown"},this.options.map((t=>o("div",{class:{"dropdown-item":!0,selected:this.isSelected(t.value)},onClick:()=>this.toggleItem(t)},t.text)))),this.overflowOpen&&!!(null===(t=this.hiddenChips)||void 0===t?void 0:t.length)&&o("div",{key:"f8e3289042c69c569bebcd0a40d90f31261c6c12",class:"overflow-popover",style:{top:this.popoverStyle.top,left:this.popoverStyle.left},onMouseEnter:this.openOverflow,onMouseLeave:this.closeOverflow},this.hiddenChips.map((t=>o("span",{class:"chip"},o("span",{class:"chip-text",title:t.text},t.text),o("span",{class:"remove-btn",onClick:e=>this.removeItem(t.value,e)},"×")))))))}static get assetsDirs(){return["../static"]}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"],mbSource:["handleMbSourceChange"]}}};c.style='.multi-select-container{position:relative;font-family:"Inter", sans-serif;margin-top:4px;width:100%}.flex-row{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;padding:8px 12px;padding-right:4px;border-radius:4px;background:var(--emw-selector-color-background, #e8ebef);cursor:pointer}.control{flex:1;display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden}.control:focus-within{border-color:var(--emw--color-primary, #fed275);box-shadow:0 0 0 2px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15))}.chip{display:inline-flex;align-items:center;background:var(--emw--color-gray-50, #f5f5f5);color:var(--emw--color-dialog-typography, #000);border-radius:4px;padding:2px 8px;margin-right:6px;font-size:0.875rem;line-height:1.2;justify-content:space-between;flex:0 1 auto;min-width:0}.chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.overflow-chip{background:var(--emw--color-gray-100, #e6e6e6);color:var(--emw--color-gray-300, #333);width:20px;text-align:center;display:block}.remove-btn{background:none;border:none;font-size:1rem;margin-left:6px;cursor:pointer;color:var(--emw--color-gray-150, #6f6f6f)}.remove-btn:hover{color:var(--emw--color-error, red)}.placeholder{color:var(--emw--color-gray-150, #6f6f6f);font-size:0.875rem;padding:3px 8px;line-height:1.2}.arrow{margin-left:auto;font-size:0.8rem;width:20px;color:var(--emw--color-gray-150, #6f6f6f)}.dropdown{position:absolute;top:calc(100% + 4px);left:0;width:100%;max-height:240px;overflow-y:auto;border:1px solid var(--emw--color-gray-100, #e6e6e6);border-radius:6px;background:var(--emw--color-dialog-background, #ffffff);box-shadow:0 4px 12px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));z-index:10}.dropdown-item{padding:10px 14px;cursor:pointer;font-size:0.875rem;line-height:1.4;transition:background 0.2s}.dropdown-item:hover{background:var(--emw--color-background-tertiary, #ccc);color:var(--emw--color-typography, #000)}.dropdown-item.selected{background:var(--emw--color-background-secondary, #f5f5f5);color:var(--emw--color-typography, #000);font-weight:500}.overflow-popover{position:absolute;top:var(--overflow-top, 0px);left:var(--overflow-left, 0px);max-width:200px;padding:12px;display:flex;flex-wrap:wrap;gap:6px;border:1px solid var(--emw--color-gray-100, #d0d5dd);border-radius:6px;background:var(--emw--color-background, #ffffff);box-shadow:0 4px 12px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));z-index:20}';export{c as G}
|