@descope/web-components-ui 1.0.239 → 1.0.240

Sign up to get free protection for your applications and to get access to all the features.
Files changed (34) hide show
  1. package/dist/cjs/index.cjs.js +1418 -894
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +1401 -877
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/1438.js +374 -0
  6. package/dist/umd/1438.js.LICENSE.txt +5 -0
  7. package/dist/umd/1940.js +303 -0
  8. package/dist/umd/{849.js → 4595.js} +5 -5
  9. package/dist/umd/63.js +2 -0
  10. package/dist/umd/63.js.LICENSE.txt +5 -0
  11. package/dist/umd/6687.js +9 -0
  12. package/dist/umd/6687.js.LICENSE.txt +5 -0
  13. package/dist/umd/7583.js +113 -0
  14. package/dist/umd/{5977.js.LICENSE.txt → 7583.js.LICENSE.txt} +0 -6
  15. package/dist/umd/8866.js +183 -0
  16. package/dist/umd/8866.js.LICENSE.txt +11 -0
  17. package/dist/umd/9558.js +1 -1
  18. package/dist/umd/descope-combo-box-index-js.js +1 -1
  19. package/dist/umd/descope-grid-index-js.js +1 -1
  20. package/dist/umd/descope-modal-index-js.js +1 -1
  21. package/dist/umd/descope-multi-select-combo-box-index-js.js +1 -0
  22. package/dist/umd/index.js +1 -1
  23. package/dist/umd/phone-fields-descope-phone-field-index-js.js +1 -1
  24. package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -1
  25. package/package.json +2 -1
  26. package/src/components/descope-multi-select-combo-box/MultiSelectComboBoxClass.js +488 -0
  27. package/src/components/descope-multi-select-combo-box/index.js +6 -0
  28. package/src/theme/components/index.js +2 -0
  29. package/src/theme/components/inputWrapper.js +4 -4
  30. package/src/theme/components/multiSelectComboBox.js +57 -0
  31. package/dist/umd/1932.js +0 -310
  32. package/dist/umd/5977.js +0 -294
  33. /package/dist/umd/{1932.js.LICENSE.txt → 1940.js.LICENSE.txt} +0 -0
  34. /package/dist/umd/{849.js.LICENSE.txt → 4595.js.LICENSE.txt} +0 -0
@@ -0,0 +1,303 @@
1
+ /*! For license information please see 1940.js.LICENSE.txt */
2
+ "use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[1940],{1940:(e,t,r)=>{r(6687),r(9416);var o=r(510),s=r(6570);const i=s.iv`
3
+ /* Optical centering */
4
+ :host::before,
5
+ :host::after {
6
+ content: '';
7
+ flex-basis: 0;
8
+ flex-grow: 1;
9
+ }
10
+
11
+ :host::after {
12
+ flex-grow: 1.1;
13
+ }
14
+
15
+ [part='overlay'] {
16
+ border-radius: var(--lumo-border-radius-l);
17
+ box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-xl);
18
+ background-image: none;
19
+ outline: none;
20
+ -webkit-tap-highlight-color: transparent;
21
+ }
22
+
23
+ [part='content'] {
24
+ padding: var(--lumo-space-l);
25
+ }
26
+
27
+ :host(:is([has-header], [has-title])) [part='header'] + [part='content'] {
28
+ padding-top: 0;
29
+ }
30
+
31
+ [part='header'],
32
+ [part='header-content'],
33
+ [part='footer'] {
34
+ gap: var(--lumo-space-xs) var(--lumo-space-s);
35
+ line-height: var(--lumo-line-height-s);
36
+ }
37
+
38
+ [part='header'] {
39
+ padding: var(--lumo-space-m);
40
+ background-color: var(--lumo-base-color);
41
+ border-radius: var(--lumo-border-radius-l) var(--lumo-border-radius-l) 0 0; /* Needed for Safari */
42
+ }
43
+
44
+ [part='footer'] {
45
+ padding: var(--lumo-space-s) var(--lumo-space-m);
46
+ background-color: var(--lumo-contrast-5pct);
47
+ border-radius: 0 0 var(--lumo-border-radius-l) var(--lumo-border-radius-l); /* Needed for Safari */
48
+ }
49
+
50
+ [part='title'] {
51
+ font-size: var(--lumo-font-size-xl);
52
+ font-weight: 600;
53
+ color: var(--lumo-header-text-color);
54
+ margin-inline-start: calc(var(--lumo-space-l) - var(--lumo-space-m));
55
+ }
56
+
57
+ /* No padding */
58
+ :host([theme~='no-padding']) [part='content'] {
59
+ padding: 0 !important;
60
+ }
61
+
62
+ @media (min-height: 320px) {
63
+ :host([overflow~='top']) [part='header'] {
64
+ box-shadow: 0 1px 0 0 var(--lumo-contrast-10pct);
65
+ }
66
+ }
67
+
68
+ /* Animations */
69
+
70
+ :host([opening]),
71
+ :host([closing]) {
72
+ animation: 0.25s lumo-overlay-dummy-animation;
73
+ }
74
+
75
+ :host([opening]) [part='overlay'] {
76
+ animation: 0.12s 0.05s vaadin-dialog-enter cubic-bezier(0.215, 0.61, 0.355, 1) both;
77
+ }
78
+
79
+ @keyframes vaadin-dialog-enter {
80
+ 0% {
81
+ opacity: 0;
82
+ transform: scale(0.95);
83
+ }
84
+ }
85
+
86
+ :host([closing]) [part='overlay'] {
87
+ animation: 0.1s 0.03s vaadin-dialog-exit cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
88
+ }
89
+
90
+ :host([closing]) [part='backdrop'] {
91
+ animation-delay: 0.05s;
92
+ }
93
+
94
+ @keyframes vaadin-dialog-exit {
95
+ 100% {
96
+ opacity: 0;
97
+ transform: scale(1.02);
98
+ }
99
+ }
100
+ `;(0,s.hC)("vaadin-dialog-overlay",[o.I,i],{moduleId:"lumo-dialog"});var a=r(4241),n=r(2807),d=r(1914),l=r(6196),h=r(4457);const p=e=>class extends((0,h.F)(e)){static get properties(){return{headerTitle:{type:String},headerRenderer:{type:Object},footerRenderer:{type:Object}}}static get observers(){return["_headerFooterRendererChange(headerRenderer, footerRenderer, opened)","_headerTitleChanged(headerTitle, opened)"]}ready(){super.ready(),this.__resizeObserver=new ResizeObserver((()=>{this.__updateOverflow()})),this.__resizeObserver.observe(this.$.resizerContainer),this.$.content.addEventListener("scroll",(()=>{this.__updateOverflow()}))}__createContainer(e){const t=document.createElement("div");return t.setAttribute("slot",e),t}__clearContainer(e){e.innerHTML="",delete e._$litPart$}__initContainer(e,t){return e?this.__clearContainer(e):e=this.__createContainer(t),e}_headerFooterRendererChange(e,t,r){const o=this.__oldHeaderRenderer!==e;this.__oldHeaderRenderer=e;const s=this.__oldFooterRenderer!==t;this.__oldFooterRenderer=t;const i=this._oldOpenedFooterHeader!==r;this._oldOpenedFooterHeader=r,this.toggleAttribute("has-header",!!e),this.toggleAttribute("has-footer",!!t),o&&(e?this.headerContainer=this.__initContainer(this.headerContainer,"header-content"):this.headerContainer&&(this.headerContainer.remove(),this.headerContainer=null,this.__updateOverflow())),s&&(t?this.footerContainer=this.__initContainer(this.footerContainer,"footer"):this.footerContainer&&(this.footerContainer.remove(),this.footerContainer=null,this.__updateOverflow())),(e&&(o||i)||t&&(s||i))&&r&&this.requestContentUpdate()}_headerTitleChanged(e,t){this.toggleAttribute("has-title",!!e),t&&(e||this._oldHeaderTitle)&&this.requestContentUpdate(),this._oldHeaderTitle=e}_headerTitleRenderer(){this.headerTitle?(this.headerTitleElement||(this.headerTitleElement=document.createElement("h2"),this.headerTitleElement.setAttribute("slot","title"),this.headerTitleElement.classList.add("draggable")),this.appendChild(this.headerTitleElement),this.headerTitleElement.textContent=this.headerTitle):this.headerTitleElement&&(this.headerTitleElement.remove(),this.headerTitleElement=null)}requestContentUpdate(){super.requestContentUpdate(),this.headerContainer&&(this.headerContainer.parentElement||this.appendChild(this.headerContainer),this.headerRenderer&&this.headerRenderer.call(this.owner,this.headerContainer,this.owner)),this.footerContainer&&(this.footerContainer.parentElement||this.appendChild(this.footerContainer),this.footerRenderer&&this.footerRenderer.call(this.owner,this.footerContainer,this.owner)),this._headerTitleRenderer(),this.__updateOverflow()}setBounds(e){const t=this.$.overlay,r={...e};"absolute"!==t.style.position&&(t.style.position="absolute",this.setAttribute("has-bounds-set","")),Object.keys(r).forEach((e=>{"number"==typeof r[e]&&(r[e]=`${r[e]}px`)})),Object.assign(t.style,r)}getBounds(){const e=this.$.overlay.getBoundingClientRect(),t=this.getBoundingClientRect();return{top:e.top-t.top,left:e.left-t.left,width:e.width,height:e.height}}__updateOverflow(){let e="";if(this.hasAttribute("has-header")||this.hasAttribute("has-footer")||this.headerTitle){const t=this.$.content;t.scrollTop>0&&(e+=" top"),t.scrollTop<t.scrollHeight-t.clientHeight&&(e+=" bottom")}const t=e.trim();t.length>0&&this.getAttribute("overflow")!==t?this.setAttribute("overflow",t):0===t.length&&this.hasAttribute("overflow")&&this.removeAttribute("overflow")}};var c=r(9392);const u=c.iv`
101
+ [part='header'],
102
+ [part='header-content'],
103
+ [part='footer'] {
104
+ display: flex;
105
+ align-items: center;
106
+ flex-wrap: wrap;
107
+ flex: none;
108
+ pointer-events: none;
109
+ z-index: 1;
110
+ }
111
+
112
+ [part='header'] {
113
+ flex-wrap: nowrap;
114
+ }
115
+
116
+ ::slotted([slot='header-content']),
117
+ ::slotted([slot='title']),
118
+ ::slotted([slot='footer']) {
119
+ display: contents;
120
+ pointer-events: auto;
121
+ }
122
+
123
+ ::slotted([slot='title']) {
124
+ font: inherit !important;
125
+ overflow-wrap: anywhere;
126
+ }
127
+
128
+ [part='header-content'] {
129
+ flex: 1;
130
+ }
131
+
132
+ :host([has-title]) [part='header-content'],
133
+ [part='footer'] {
134
+ justify-content: flex-end;
135
+ }
136
+
137
+ :host(:not([has-title]):not([has-header])) [part='header'],
138
+ :host(:not([has-header])) [part='header-content'],
139
+ :host(:not([has-title])) [part='title'],
140
+ :host(:not([has-footer])) [part='footer'] {
141
+ display: none !important;
142
+ }
143
+
144
+ :host(:is([has-title], [has-header], [has-footer])) [part='content'] {
145
+ height: auto;
146
+ }
147
+
148
+ @media (min-height: 320px) {
149
+ :host(:is([has-title], [has-header], [has-footer])) .resizer-container {
150
+ overflow: hidden;
151
+ display: flex;
152
+ flex-direction: column;
153
+ }
154
+
155
+ :host(:is([has-title], [has-header], [has-footer])) [part='content'] {
156
+ flex: 1;
157
+ overflow: auto;
158
+ }
159
+ }
160
+
161
+ /*
162
+ NOTE(platosha): Make some min-width to prevent collapsing of the content
163
+ taking the parent width, e. g., <vaadin-grid> and such.
164
+ */
165
+ [part='content'] {
166
+ min-width: 12em; /* matches the default <vaadin-text-field> width */
167
+ }
168
+
169
+ :host([has-bounds-set]) [part='overlay'] {
170
+ max-width: none;
171
+ }
172
+
173
+ @media (forced-colors: active) {
174
+ [part='overlay'] {
175
+ outline: 3px solid !important;
176
+ }
177
+ }
178
+ `,g=c.iv`
179
+ [part='overlay'] {
180
+ position: relative;
181
+ overflow: visible;
182
+ max-height: 100%;
183
+ display: flex;
184
+ }
185
+
186
+ [part='content'] {
187
+ box-sizing: border-box;
188
+ height: 100%;
189
+ }
190
+
191
+ .resizer-container {
192
+ overflow: auto;
193
+ flex-grow: 1;
194
+ border-radius: inherit; /* prevent child elements being drawn outside part=overlay */
195
+ }
196
+
197
+ [part='overlay'][style] .resizer-container {
198
+ min-height: 100%;
199
+ width: 100%;
200
+ }
201
+
202
+ :host(:not([resizable])) .resizer {
203
+ display: none;
204
+ }
205
+
206
+ :host([resizable]) [part='title'] {
207
+ cursor: move;
208
+ -webkit-user-select: none;
209
+ user-select: none;
210
+ }
211
+
212
+ .resizer {
213
+ position: absolute;
214
+ height: 16px;
215
+ width: 16px;
216
+ }
217
+
218
+ .resizer.edge {
219
+ height: 8px;
220
+ width: 8px;
221
+ inset: -4px;
222
+ }
223
+
224
+ .resizer.edge.n {
225
+ width: auto;
226
+ bottom: auto;
227
+ cursor: ns-resize;
228
+ }
229
+
230
+ .resizer.ne {
231
+ top: -4px;
232
+ right: -4px;
233
+ cursor: nesw-resize;
234
+ }
235
+
236
+ .resizer.edge.e {
237
+ height: auto;
238
+ left: auto;
239
+ cursor: ew-resize;
240
+ }
241
+
242
+ .resizer.se {
243
+ bottom: -4px;
244
+ right: -4px;
245
+ cursor: nwse-resize;
246
+ }
247
+
248
+ .resizer.edge.s {
249
+ width: auto;
250
+ top: auto;
251
+ cursor: ns-resize;
252
+ }
253
+
254
+ .resizer.sw {
255
+ bottom: -4px;
256
+ left: -4px;
257
+ cursor: nesw-resize;
258
+ }
259
+
260
+ .resizer.edge.w {
261
+ height: auto;
262
+ right: auto;
263
+ cursor: ew-resize;
264
+ }
265
+
266
+ .resizer.nw {
267
+ top: -4px;
268
+ left: -4px;
269
+ cursor: nwse-resize;
270
+ }
271
+ `;(0,s.hC)("vaadin-dialog-overlay",[l.r,u,g],{moduleId:"vaadin-dialog-overlay-styles"});class v extends(p((0,d.U)((0,s.Tb)(a.H3)))){static get is(){return"vaadin-dialog-overlay"}static get template(){return a.dy`
272
+ <div id="backdrop" part="backdrop" hidden$="[[!withBackdrop]]"></div>
273
+ <div part="overlay" id="overlay" tabindex="0">
274
+ <section id="resizerContainer" class="resizer-container">
275
+ <header part="header">
276
+ <div part="title"><slot name="title"></slot></div>
277
+ <div part="header-content"><slot name="header-content"></slot></div>
278
+ </header>
279
+ <div part="content" id="content"><slot></slot></div>
280
+ <footer part="footer"><slot name="footer"></slot></footer>
281
+ </section>
282
+ </div>
283
+ `}}(0,n.M)(v);var m=r(2521),_=r(9320),f=r(262),y=r(1462);const b=e=>class extends e{static get properties(){return{opened:{type:Boolean,value:!1,notify:!0},noCloseOnOutsideClick:{type:Boolean,value:!1},noCloseOnEsc:{type:Boolean,value:!1},modeless:{type:Boolean,value:!1}}}ready(){super.ready();const e=this.$.overlay;e.addEventListener("vaadin-overlay-outside-click",this._handleOutsideClick.bind(this)),e.addEventListener("vaadin-overlay-escape-press",this._handleEscPress.bind(this)),this._overlayElement=e}connectedCallback(){super.connectedCallback(),this.__restoreOpened&&(this.opened=!0)}disconnectedCallback(){super.disconnectedCallback(),setTimeout((()=>{this.isConnected||(this.__restoreOpened=this.opened,this.opened=!1)}))}_onOverlayOpened(e){!1===e.detail.value&&(this.opened=!1)}_handleOutsideClick(e){this.noCloseOnOutsideClick&&e.preventDefault()}_handleEscPress(e){this.noCloseOnEsc&&e.preventDefault()}_bringOverlayToFront(){this.modeless&&this._overlayElement.bringToFront()}};var w=r(1037);function C(e){return e.touches?e.touches[0]:e}function z(e){return e.clientX>=0&&e.clientX<=window.innerWidth&&e.clientY>=0&&e.clientY<=window.innerHeight}const x=e=>class extends e{static get properties(){return{draggable:{type:Boolean,value:!1,reflectToAttribute:!0},_touchDevice:{type:Boolean,value:w.T},__dragHandleClassName:{type:String}}}async ready(){super.ready(),this._originalBounds={},this._originalMouseCoords={},this._startDrag=this._startDrag.bind(this),this._drag=this._drag.bind(this),this._stopDrag=this._stopDrag.bind(this),await new Promise(requestAnimationFrame),this.$.overlay.$.overlay.addEventListener("mousedown",this._startDrag),this.$.overlay.$.overlay.addEventListener("touchstart",this._startDrag)}_startDrag(e){if(!("touchstart"===e.type&&e.touches.length>1)&&this.draggable&&(0===e.button||e.touches)){const t=this.$.overlay.$.resizerContainer,r=e.target===t,o=e.offsetX>t.clientWidth||e.offsetY>t.clientHeight,s=e.target===this.$.overlay.$.content,i=e.composedPath().some(((e,t)=>{if(!e.classList)return!1;const r=e.classList.contains(this.__dragHandleClassName||"draggable"),o=e.classList.contains("draggable-leaf-only"),s=0===t;return o&&s||r&&(!o||s)}));if(r&&!o||s||i){i||e.preventDefault(),this._originalBounds=this.$.overlay.getBounds();const t=C(e);this._originalMouseCoords={top:t.pageY,left:t.pageX},window.addEventListener("mouseup",this._stopDrag),window.addEventListener("touchend",this._stopDrag),window.addEventListener("mousemove",this._drag),window.addEventListener("touchmove",this._drag),"absolute"!==this.$.overlay.$.overlay.style.position&&this.$.overlay.setBounds(this._originalBounds)}}}_drag(e){const t=C(e);if(z(t)){const e=this._originalBounds.top+(t.pageY-this._originalMouseCoords.top),r=this._originalBounds.left+(t.pageX-this._originalMouseCoords.left);this.$.overlay.setBounds({top:e,left:r})}}_stopDrag(){window.removeEventListener("mouseup",this._stopDrag),window.removeEventListener("touchend",this._stopDrag),window.removeEventListener("mousemove",this._drag),window.removeEventListener("touchmove",this._drag)}},E=e=>class extends e{static get properties(){return{renderer:{type:Object},headerTitle:String,headerRenderer:{type:Object},footerRenderer:{type:Object}}}requestContentUpdate(){this._overlayElement&&this._overlayElement.requestContentUpdate()}},L=e=>class extends e{static get properties(){return{resizable:{type:Boolean,value:!1,reflectToAttribute:!0}}}async ready(){super.ready(),this._originalBounds={},this._originalMouseCoords={},this._resizeListeners={start:{},resize:{},stop:{}},await new Promise(requestAnimationFrame),this._addResizeListeners()}_addResizeListeners(){["n","e","s","w","nw","ne","se","sw"].forEach((e=>{const t=document.createElement("div");this._resizeListeners.start[e]=t=>this._startResize(t,e),this._resizeListeners.resize[e]=t=>this._resize(t,e),this._resizeListeners.stop[e]=()=>this._stopResize(e),1===e.length&&t.classList.add("edge"),t.classList.add("resizer"),t.classList.add(e),t.addEventListener("mousedown",this._resizeListeners.start[e]),t.addEventListener("touchstart",this._resizeListeners.start[e]),this.$.overlay.$.resizerContainer.appendChild(t)}))}_startResize(e,t){if(!("touchstart"===e.type&&e.touches.length>1)&&(0===e.button||e.touches)){e.preventDefault(),this._originalBounds=this.$.overlay.getBounds();const r=C(e);this._originalMouseCoords={top:r.pageY,left:r.pageX},window.addEventListener("mousemove",this._resizeListeners.resize[t]),window.addEventListener("touchmove",this._resizeListeners.resize[t]),window.addEventListener("mouseup",this._resizeListeners.stop[t]),window.addEventListener("touchend",this._resizeListeners.stop[t]),"absolute"!==this.$.overlay.$.overlay.style.position&&this.$.overlay.setBounds(this._originalBounds)}}_resize(e,t){const r=C(e);if(z(r)){const e=40;t.split("").forEach((t=>{switch(t){case"n":{const t=this._originalBounds.height-(r.pageY-this._originalMouseCoords.top),o=this._originalBounds.top+(r.pageY-this._originalMouseCoords.top);t>e&&this.$.overlay.setBounds({top:o,height:t});break}case"e":{const t=this._originalBounds.width+(r.pageX-this._originalMouseCoords.left);t>e&&this.$.overlay.setBounds({width:t});break}case"s":{const t=this._originalBounds.height+(r.pageY-this._originalMouseCoords.top);t>e&&this.$.overlay.setBounds({height:t});break}case"w":{const t=this._originalBounds.width-(r.pageX-this._originalMouseCoords.left),o=this._originalBounds.left+(r.pageX-this._originalMouseCoords.left);t>e&&this.$.overlay.setBounds({left:o,width:t});break}}}))}}_stopResize(e){window.removeEventListener("mousemove",this._resizeListeners.resize[e]),window.removeEventListener("touchmove",this._resizeListeners.resize[e]),window.removeEventListener("mouseup",this._resizeListeners.stop[e]),window.removeEventListener("touchend",this._resizeListeners.stop[e]),this.dispatchEvent(new CustomEvent("resize",{detail:this._getResizeDimensions()}))}_getResizeDimensions(){const e=this.$.overlay.$.resizerContainer.scrollTop,{width:t,height:r}=getComputedStyle(this.$.overlay.$.overlay),o=this.$.overlay.$.content;o.setAttribute("style","position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: content-box; height: auto;");const{width:s,height:i}=getComputedStyle(o);return o.removeAttribute("style"),this.$.overlay.$.resizerContainer.scrollTop=e,{width:t,height:r,contentWidth:s,contentHeight:i}}};class $ extends(x(L(E(b((0,_.u)((0,y.I)((0,m.S)(a.H3)))))))){static get template(){return a.dy`
284
+ <style>
285
+ :host {
286
+ display: none !important;
287
+ }
288
+ </style>
289
+
290
+ <vaadin-dialog-overlay
291
+ id="overlay"
292
+ header-title="[[headerTitle]]"
293
+ on-opened-changed="_onOverlayOpened"
294
+ on-mousedown="_bringOverlayToFront"
295
+ on-touchstart="_bringOverlayToFront"
296
+ theme$="[[_theme]]"
297
+ modeless="[[modeless]]"
298
+ with-backdrop="[[!modeless]]"
299
+ resizable$="[[resizable]]"
300
+ restore-focus-on-close
301
+ focus-trap
302
+ ></vaadin-dialog-overlay>
303
+ `}static get is(){return"vaadin-dialog"}static get properties(){return{ariaLabel:{type:String,value:""}}}static get observers(){return["_openedChanged(opened)","_ariaLabelChanged(ariaLabel, headerTitle)","_rendererChanged(renderer, headerRenderer, footerRenderer)"]}ready(){super.ready(),this._overlayElement.setAttribute("role","dialog"),(0,f.k)(this)}_rendererChanged(e,t,r){this.$.overlay.setProperties({owner:this,renderer:e,headerRenderer:t,footerRenderer:r})}_openedChanged(e){this.$.overlay.opened=e}_ariaLabelChanged(e,t){e||t?this.$.overlay.setAttribute("aria-label",e||t):this.$.overlay.removeAttribute("aria-label")}}(0,n.M)($)}}]);