@descope/web-components-ui 1.0.223 → 1.0.225

Sign up to get free protection for your applications and to get access to all the features.
Files changed (66) hide show
  1. package/dist/cjs/index.cjs.js +895 -627
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +970 -610
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/1000.js +1 -1
  6. package/dist/umd/1037.js +1 -1
  7. package/dist/umd/1419.js +360 -0
  8. package/dist/umd/1419.js.LICENSE.txt +23 -0
  9. package/dist/umd/1932.js +1 -1
  10. package/dist/umd/1990.js +2 -2
  11. package/dist/umd/2066.js +2 -0
  12. package/dist/umd/2066.js.LICENSE.txt +5 -0
  13. package/dist/umd/2873.js +738 -0
  14. package/dist/umd/2873.js.LICENSE.txt +21 -0
  15. package/dist/umd/3003.js +2 -0
  16. package/dist/umd/3003.js.LICENSE.txt +9 -0
  17. package/dist/umd/{9515.js → 3092.js} +88 -88
  18. package/dist/umd/3660.js +2 -2
  19. package/dist/umd/422.js +1 -1
  20. package/dist/umd/4222.js +2 -0
  21. package/dist/umd/{7196.js.LICENSE.txt → 4222.js.LICENSE.txt} +0 -18
  22. package/dist/umd/4447.js +2 -1
  23. package/dist/umd/4447.js.LICENSE.txt +5 -0
  24. package/dist/umd/4567.js +1 -0
  25. package/dist/umd/4746.js +123 -0
  26. package/dist/umd/4905.js +2 -0
  27. package/dist/umd/4905.js.LICENSE.txt +5 -0
  28. package/dist/umd/5977.js +289 -0
  29. package/dist/umd/5977.js.LICENSE.txt +17 -0
  30. package/dist/umd/6551.js +1 -0
  31. package/dist/umd/{7101.js → 6770.js} +5 -5
  32. package/dist/umd/{6116.js → 7514.js} +2 -2
  33. package/dist/umd/9189.js +2 -0
  34. package/dist/umd/9189.js.LICENSE.txt +5 -0
  35. package/dist/umd/9629.js +2 -0
  36. package/dist/umd/9629.js.LICENSE.txt +5 -0
  37. package/dist/umd/9671.js +1 -0
  38. package/dist/umd/9680.js +2 -0
  39. package/dist/umd/9680.js.LICENSE.txt +5 -0
  40. package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
  41. package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
  42. package/dist/umd/descope-combo-box-index-js.js +1 -1
  43. package/dist/umd/descope-grid-descope-grid-selection-column-index-js.js +1 -0
  44. package/dist/umd/descope-grid-descope-grid-status-column-index-js.js +1 -0
  45. package/dist/umd/descope-grid-descope-grid-text-column-index-js.js +1 -0
  46. package/dist/umd/descope-grid-index-js.js +1 -0
  47. package/dist/umd/descope-text-area-index-js.js +1 -1
  48. package/dist/umd/index.js +1 -1
  49. package/package.json +2 -1
  50. package/src/components/descope-grid/GridClass.js +229 -0
  51. package/src/components/descope-grid/descope-grid-selection-column/index.js +62 -0
  52. package/src/components/descope-grid/descope-grid-status-column/index.js +25 -0
  53. package/src/components/descope-grid/descope-grid-text-column/index.js +11 -0
  54. package/src/components/descope-grid/helpers.js +9 -0
  55. package/src/components/descope-grid/index.js +10 -0
  56. package/src/index.js +1 -0
  57. package/src/theme/components/grid.js +38 -0
  58. package/src/theme/components/index.js +2 -0
  59. package/dist/umd/3952.js +0 -123
  60. package/dist/umd/4273.js +0 -289
  61. package/dist/umd/4273.js.LICENSE.txt +0 -33
  62. package/dist/umd/7196.js +0 -360
  63. /package/dist/umd/{7101.js.LICENSE.txt → 3092.js.LICENSE.txt} +0 -0
  64. /package/dist/umd/{3952.js.LICENSE.txt → 4746.js.LICENSE.txt} +0 -0
  65. /package/dist/umd/{9515.js.LICENSE.txt → 6770.js.LICENSE.txt} +0 -0
  66. /package/dist/umd/{6116.js.LICENSE.txt → 7514.js.LICENSE.txt} +0 -0
@@ -0,0 +1,62 @@
1
+ /* eslint-disable class-methods-use-this */
2
+ /* eslint-disable no-param-reassign */
3
+ import { GridSelectionColumn } from '@vaadin/grid/vaadin-grid-selection-column';
4
+ import '../../boolean-fields/descope-checkbox';
5
+ import { getComponentName } from '../../../helpers/componentHelpers';
6
+
7
+ export const componentName = getComponentName('grid-selection-column');
8
+
9
+ const createCheckboxEle = () => {
10
+ const checkbox = document.createElement('descope-checkbox');
11
+
12
+ checkbox.setAttribute('bordered', 'true');
13
+ checkbox.setAttribute('size', 'xs');
14
+
15
+ return checkbox;
16
+ };
17
+
18
+ const getIsAllItemsSelected = (grid) => grid.selectedItems.length === grid.items?.length;
19
+
20
+ export class GridSelectionColumnClass extends GridSelectionColumn {
21
+ _onHeaderRendererOrBindingChanged() {}
22
+
23
+ _headerRenderer(cell) {
24
+ const grid = cell.parentNode;
25
+
26
+ let checkbox = cell.querySelector('descope-checkbox');
27
+ if (!checkbox) {
28
+ checkbox = createCheckboxEle();
29
+
30
+ checkbox.addEventListener('input', () => {
31
+ const isAllItemsSelected = getIsAllItemsSelected(grid);
32
+ if (isAllItemsSelected) {
33
+ grid.selectedItems = [];
34
+ } else {
35
+ grid.selectedItems = grid.items;
36
+ }
37
+ });
38
+
39
+ cell.appendChild(checkbox);
40
+ }
41
+
42
+ checkbox.setAttribute('checked', getIsAllItemsSelected(grid));
43
+ }
44
+
45
+ _defaultRenderer(cell, col, model) {
46
+ const grid = cell.parentNode;
47
+
48
+ let checkbox = cell.querySelector('descope-checkbox');
49
+ if (!checkbox) {
50
+ checkbox = createCheckboxEle();
51
+ cell.appendChild(checkbox);
52
+ }
53
+
54
+ checkbox.onchange = () => {
55
+ checkbox.checked ? grid.selectItem(model.item) : grid.deselectItem(model.item);
56
+ };
57
+
58
+ checkbox.setAttribute('checked', model.selected);
59
+ }
60
+ }
61
+
62
+ customElements.define(componentName, GridSelectionColumnClass);
@@ -0,0 +1,25 @@
1
+ /* eslint-disable no-param-reassign */
2
+ import { GridColumn } from '@vaadin/grid/vaadin-grid-column';
3
+ import { getComponentName } from '../../../helpers/componentHelpers';
4
+
5
+ export const componentName = getComponentName('grid-status-column');
6
+ class GridStatusColumnClass extends GridColumn {
7
+ _defaultRenderer(cell, _col, model) {
8
+ const contentAttr = this.getAttribute('status');
9
+ if (!contentAttr) {
10
+ cell.innerHTML = model.item[this.path];
11
+ return;
12
+ }
13
+
14
+ const [active, inactive] = contentAttr.split(',');
15
+ const label = model.item[this.path] ? active : inactive;
16
+
17
+ cell.innerHTML = `<div style="padding:0 0.25em; border-radius:4px; background:${
18
+ model.item[this.path] ? 'lightgreen' : 'pink'
19
+ };">${label}</div>`;
20
+ }
21
+ }
22
+
23
+ customElements.define(componentName, GridStatusColumnClass);
24
+
25
+ export { GridStatusColumnClass };
@@ -0,0 +1,11 @@
1
+ import { GridColumn } from '@vaadin/grid/vaadin-grid-column';
2
+ import '../../descope-button';
3
+ import { getComponentName } from '../../../helpers/componentHelpers';
4
+
5
+ export const componentName = getComponentName('grid-text-column');
6
+
7
+ class GridTextColumnClass extends GridColumn {}
8
+
9
+ customElements.define(componentName, GridTextColumnClass);
10
+
11
+ export { GridTextColumnClass };
@@ -0,0 +1,9 @@
1
+ export const isValidDataType = (data) => {
2
+ const isValid = Array.isArray(data);
3
+ if (!isValid) {
4
+ // eslint-disable-next-line no-console
5
+ console.error('data must be an array, received:', data);
6
+ }
7
+
8
+ return isValid;
9
+ };
@@ -0,0 +1,10 @@
1
+ import '@vaadin/grid';
2
+ import './descope-grid-text-column';
3
+ import './descope-grid-status-column';
4
+ import './descope-grid-selection-column';
5
+
6
+ import { componentName, GridClass } from './GridClass';
7
+
8
+ customElements.define(componentName, GridClass);
9
+
10
+ export { GridClass };
package/src/index.js CHANGED
@@ -24,6 +24,7 @@ export * from './components/descope-recaptcha';
24
24
  export * from './components/descope-upload-file';
25
25
  export * from './components/descope-button-selection-group';
26
26
  export * from './components/descope-button-selection-group/descope-button-selection-group-item';
27
+ export * from './components/descope-grid';
27
28
 
28
29
  export {
29
30
  globalsThemeToStyle,
@@ -0,0 +1,38 @@
1
+ import globals from '../globals';
2
+ import { getThemeRefs } from '../../helpers/themeHelpers';
3
+ import { GridClass } from '../../components/descope-grid/GridClass';
4
+ import { refs } from './inputWrapper';
5
+
6
+ const globalRefs = getThemeRefs(globals);
7
+ const vars = GridClass.cssVarList;
8
+
9
+ export const grid = {
10
+ [vars.hostWidth]: '100%',
11
+ [vars.hostHeight]: '100%',
12
+ [vars.hostMinHeight]: '400px',
13
+
14
+ [vars.fontSize]: refs.fontSize,
15
+ [vars.fontFamily]: refs.fontFamily,
16
+
17
+ [vars.sortIndicatorsColor]: globalRefs.colors.primary.main,
18
+ [vars.activeSortIndicator]: globalRefs.colors.primary.main,
19
+ [vars.resizeHandleColor]: globalRefs.colors.surface.main,
20
+
21
+ [vars.inputBorderWidth]: refs.borderWidth,
22
+ [vars.inputBorderStyle]: refs.borderStyle,
23
+ [vars.inputBorderRadius]: refs.borderRadius,
24
+ [vars.inputBorderColor]: 'transparent',
25
+
26
+ [vars.separatorColor]: refs.borderColor,
27
+
28
+ [vars.valueTextColor]: globalRefs.colors.surface.contrast,
29
+ [vars.selectedBackgroundColor]: globalRefs.colors.primary.main,
30
+ [vars.selectedTextColor]: globalRefs.colors.primary.contrast,
31
+
32
+ _bordered: {
33
+ [vars.inputBorderColor]: refs.borderColor,
34
+ },
35
+ };
36
+
37
+ export default grid;
38
+ export { vars };
@@ -24,6 +24,7 @@ import * as uploadFile from './uploadFile';
24
24
  import * as buttonSelectionGroupItem from './buttonSelectionGroup/buttonSelectionGroupItem';
25
25
  import * as buttonSelectionGroup from './buttonSelectionGroup/buttonSelectionGroup';
26
26
  import * as modal from './modal';
27
+ import * as grid from './grid';
27
28
 
28
29
  const components = {
29
30
  button,
@@ -53,6 +54,7 @@ const components = {
53
54
  buttonSelectionGroupItem,
54
55
  buttonSelectionGroup,
55
56
  modal,
57
+ grid,
56
58
  };
57
59
 
58
60
  const theme = Object.keys(components).reduce(
package/dist/umd/3952.js DELETED
@@ -1,123 +0,0 @@
1
- /*! For license information please see 3952.js.LICENSE.txt */
2
- "use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[3952],{2223:(e,t,o)=>{o.d(t,{T8:()=>l}),o(7894);let s=!1,n=[],i=[];function r(){s=!0,requestAnimationFrame((function(){s=!1,function(e){for(;e.length;)a(e.shift())}(n),setTimeout((function(){!function(e){for(let t=0,o=e.length;t<o;t++)a(e.shift())}(i)}))}))}function a(e){const t=e[0],o=e[1],s=e[2];try{o.apply(t,s)}catch(e){setTimeout((()=>{throw e}))}}function l(e,t,o){s||r(),i.push([e,t,o])}},962:(e,t,o)=>{o.d(t,{Ry:()=>d});let s=new WeakMap,n=new WeakMap,i={},r=0;const a=e=>e&&e.nodeType===Node.ELEMENT_NODE,l=(...e)=>{console.error(`Error: ${e.join(" ")}. Skip setting aria-hidden.`)},d=(e,t=document.body,o="data-aria-hidden")=>{const d=Array.from(Array.isArray(e)?e:[e]);return t&&d.push(...Array.from(t.querySelectorAll("[aria-live]"))),((e,t,o,d)=>{const h=((e,t)=>a(e)?t.map((t=>{if(!a(t))return l(t,"is not a valid element"),null;let o=t;for(;o&&o!==e;){if(e.contains(o))return t;o=o.getRootNode().host}return l(t,"is not contained inside",e),null})).filter((e=>Boolean(e))):(l(e,"is not a valid element"),[]))(t,Array.isArray(e)?e:[e]);i[o]||(i[o]=new WeakMap);const c=i[o],u=[],p=new Set,_=new Set(h),m=e=>{if(!e||p.has(e))return;p.add(e);const t=e.assignedSlot;t&&m(t),m(e.parentNode||e.host)};h.forEach(m);const v=e=>{if(!e||_.has(e))return;const t=e.shadowRoot;(t?[...e.children,...t.children]:[...e.children]).forEach((e=>{if(!["template","script","style"].includes(e.localName))if(p.has(e))v(e);else{const t=e.getAttribute(d),i=null!==t&&"false"!==t,r=(s.get(e)||0)+1,a=(c.get(e)||0)+1;s.set(e,r),c.set(e,a),u.push(e),1===r&&i&&n.set(e,!0),1===a&&e.setAttribute(o,"true"),i||e.setAttribute(d,"true")}}))};return v(t),p.clear(),r+=1,()=>{u.forEach((e=>{const t=s.get(e)-1,i=c.get(e)-1;s.set(e,t),c.set(e,i),t||(n.has(e)?n.delete(e):e.removeAttribute(d)),i||e.removeAttribute(o)})),r-=1,r||(s=new WeakMap,s=new WeakMap,n=new WeakMap,i={})}})(d,t,o,"aria-hidden")};HTMLElement.prototype},9320:(e,t,o)=>{o.d(t,{u:()=>s});const s=e=>class extends e{static get properties(){return{overlayClass:{type:String},_overlayElement:{type:Object}}}static get observers(){return["__updateOverlayClassNames(overlayClass, _overlayElement)"]}__updateOverlayClassNames(e,t){if(!t)return;if(void 0===e)return;const{classList:o}=t;if(this.__initialClasses||(this.__initialClasses=new Set(o)),Array.isArray(this.__previousClasses)){const e=this.__previousClasses.filter((e=>!this.__initialClasses.has(e)));e.length>0&&o.remove(...e)}const s="string"==typeof e?e.split(" "):[];s.length>0&&o.add(...s),this.__previousClasses=s}}},7673:(e,t,o)=>{o.d(t,{F:()=>m});var s=o(2223),n=o(1037),i=o(962);class r{constructor(e,t){this.host=e,this.callback="function"==typeof t?t:()=>e}showModal(){const e=this.callback();this.__showOthers=(0,i.Ry)(e)}close(){this.__showOthers&&(this.__showOthers(),this.__showOthers=null)}}var a=o(3550);class l{saveFocus(e){this.focusNode=e||(0,a.Gf)()}restoreFocus(){const e=this.focusNode;e&&((0,a.Gf)()===document.body?setTimeout((()=>e.focus())):e.focus(),this.focusNode=null)}}const d=[];class h{constructor(e){this.host=e,this.__trapNode=null,this.__onKeyDown=this.__onKeyDown.bind(this)}get __focusableElements(){return(0,a.GO)(this.__trapNode)}get __focusedElementIndex(){const e=this.__focusableElements;return e.indexOf(e.filter(a.Qw).pop())}hostConnected(){document.addEventListener("keydown",this.__onKeyDown)}hostDisconnected(){document.removeEventListener("keydown",this.__onKeyDown)}trapFocus(e){if(this.__trapNode=e,0===this.__focusableElements.length)throw this.__trapNode=null,new Error("The trap node should have at least one focusable descendant or be focusable itself.");d.push(this),-1===this.__focusedElementIndex&&this.__focusableElements[0].focus()}releaseFocus(){this.__trapNode=null,d.pop()}__onKeyDown(e){if(this.__trapNode&&this===Array.from(d).pop()&&"Tab"===e.key){e.preventDefault();const t=e.shiftKey;this.__focusNextElement(t)}}__focusNextElement(e=!1){const t=this.__focusableElements,o=e?-1:1,s=this.__focusedElementIndex,n=t[(t.length+s+o)%t.length];n.focus(),"input"===n.localName&&n.select()}}var c=o(6155);const u=e=>class extends((0,c.k)(e)){static get properties(){return{focusTrap:{type:Boolean,value:!1},restoreFocusOnClose:{type:Boolean,value:!1},restoreFocusNode:{type:HTMLElement}}}constructor(){super(),this.__ariaModalController=new r(this),this.__focusTrapController=new h(this),this.__focusRestorationController=new l}ready(){super.ready(),this.addController(this.__ariaModalController),this.addController(this.__focusTrapController),this.addController(this.__focusRestorationController)}_resetFocus(){this.focusTrap&&(this.__ariaModalController.close(),this.__focusTrapController.releaseFocus()),this.restoreFocusOnClose&&this._shouldRestoreFocus()&&this.__focusRestorationController.restoreFocus()}_saveFocus(){this.restoreFocusOnClose&&this.__focusRestorationController.saveFocus(this.restoreFocusNode)}_trapFocus(){this.focusTrap&&(this.__ariaModalController.showModal(),this.__focusTrapController.trapFocus(this.$.overlay))}_shouldRestoreFocus(){const e=(0,a.Gf)();return e===document.body||this._deepContains(e)}_deepContains(e){if(this.contains(e))return!0;let t=e;const o=e.ownerDocument;for(;t&&t!==o&&t!==this;)t=t.parentNode||t.host;return t===this}},p=()=>Array.from(document.body.children).filter((e=>e instanceof HTMLElement&&e._hasOverlayStackMixin&&!e.hasAttribute("closing"))).sort(((e,t)=>e.__zIndex-t.__zIndex||0)),_=e=>class extends e{constructor(){super(),this._hasOverlayStackMixin=!0}get _last(){return this===p().pop()}bringToFront(){let e="";const t=p().filter((e=>e!==this)).pop();t&&(e=t.__zIndex+1),this.style.zIndex=e,this.__zIndex=e||parseFloat(getComputedStyle(this).zIndex)}_enterModalState(){"none"!==document.body.style.pointerEvents&&(this._previousDocumentPointerEvents=document.body.style.pointerEvents,document.body.style.pointerEvents="none"),p().forEach((e=>{e!==this&&(e.$.overlay.style.pointerEvents="none")}))}_exitModalState(){void 0!==this._previousDocumentPointerEvents&&(document.body.style.pointerEvents=this._previousDocumentPointerEvents,delete this._previousDocumentPointerEvents);const e=p();let t;for(;(t=e.pop())&&(t===this||(t.$.overlay.style.removeProperty("pointer-events"),t.modeless)););}},m=e=>class extends(u(_(e))){static get properties(){return{opened:{type:Boolean,notify:!0,observer:"_openedChanged",reflectToAttribute:!0},owner:{type:Object},model:{type:Object},renderer:{type:Object},modeless:{type:Boolean,value:!1,reflectToAttribute:!0,observer:"_modelessChanged"},hidden:{type:Boolean,reflectToAttribute:!0,observer:"_hiddenChanged"},withBackdrop:{type:Boolean,value:!1,reflectToAttribute:!0}}}static get observers(){return["_rendererOrDataChanged(renderer, owner, model, opened)"]}constructor(){super(),this._boundMouseDownListener=this._mouseDownListener.bind(this),this._boundMouseUpListener=this._mouseUpListener.bind(this),this._boundOutsideClickListener=this._outsideClickListener.bind(this),this._boundKeydownListener=this._keydownListener.bind(this),n.gn&&(this._boundIosResizeListener=()=>this._detectIosNavbar())}ready(){super.ready(),this.addEventListener("click",(()=>{})),this.$.backdrop.addEventListener("click",(()=>{}))}connectedCallback(){super.connectedCallback(),this._boundIosResizeListener&&(this._detectIosNavbar(),window.addEventListener("resize",this._boundIosResizeListener))}disconnectedCallback(){super.disconnectedCallback(),this._boundIosResizeListener&&window.removeEventListener("resize",this._boundIosResizeListener)}requestContentUpdate(){this.renderer&&this.renderer.call(this.owner,this,this.owner,this.model)}close(e){const t=new CustomEvent("vaadin-overlay-close",{bubbles:!0,cancelable:!0,detail:{sourceEvent:e}});this.dispatchEvent(t),t.defaultPrevented||(this.opened=!1)}_detectIosNavbar(){if(!this.opened)return;const e=window.innerHeight,t=window.innerWidth>e,o=document.documentElement.clientHeight;t&&o>e?this.style.setProperty("--vaadin-overlay-viewport-bottom",o-e+"px"):this.style.setProperty("--vaadin-overlay-viewport-bottom","0")}_addGlobalListeners(){document.addEventListener("mousedown",this._boundMouseDownListener),document.addEventListener("mouseup",this._boundMouseUpListener),document.documentElement.addEventListener("click",this._boundOutsideClickListener,!0)}_removeGlobalListeners(){document.removeEventListener("mousedown",this._boundMouseDownListener),document.removeEventListener("mouseup",this._boundMouseUpListener),document.documentElement.removeEventListener("click",this._boundOutsideClickListener,!0)}_rendererOrDataChanged(e,t,o,s){const n=this._oldOwner!==t||this._oldModel!==o;this._oldModel=o,this._oldOwner=t;const i=this._oldRenderer!==e;this._oldRenderer=e;const r=this._oldOpened!==s;this._oldOpened=s,i&&(this.innerHTML="",delete this._$litPart$),s&&e&&(i||r||n)&&this.requestContentUpdate()}_modelessChanged(e){e?(this._removeGlobalListeners(),this._exitModalState()):this.opened&&(this._addGlobalListeners(),this._enterModalState())}_openedChanged(e,t){e?(this._saveFocus(),this._animatedOpening(),(0,s.T8)(this,(()=>{this._trapFocus();const e=new CustomEvent("vaadin-overlay-open",{bubbles:!0});this.dispatchEvent(e)})),document.addEventListener("keydown",this._boundKeydownListener),this.modeless||this._addGlobalListeners()):t&&(this._resetFocus(),this._animatedClosing(),document.removeEventListener("keydown",this._boundKeydownListener),this.modeless||this._removeGlobalListeners())}_hiddenChanged(e){e&&this.hasAttribute("closing")&&this._flushAnimation("closing")}_shouldAnimate(){const e=getComputedStyle(this),t=e.getPropertyValue("animation-name");return!("none"===e.getPropertyValue("display"))&&t&&"none"!==t}_enqueueAnimation(e,t){const o=`__${e}Handler`,s=e=>{e&&e.target!==this||(t(),this.removeEventListener("animationend",s),delete this[o])};this[o]=s,this.addEventListener("animationend",s)}_flushAnimation(e){const t=`__${e}Handler`;"function"==typeof this[t]&&this[t]()}_animatedOpening(){this.parentNode===document.body&&this.hasAttribute("closing")&&this._flushAnimation("closing"),this._attachOverlay(),this.modeless||this._enterModalState(),this.setAttribute("opening",""),this._shouldAnimate()?this._enqueueAnimation("opening",(()=>{this._finishOpening()})):this._finishOpening()}_attachOverlay(){this._placeholder=document.createComment("vaadin-overlay-placeholder"),this.parentNode.insertBefore(this._placeholder,this),document.body.appendChild(this),this.bringToFront()}_finishOpening(){this.removeAttribute("opening")}_finishClosing(){this._detachOverlay(),this.$.overlay.style.removeProperty("pointer-events"),this.removeAttribute("closing"),this.dispatchEvent(new CustomEvent("vaadin-overlay-closed"))}_animatedClosing(){this.hasAttribute("opening")&&this._flushAnimation("opening"),this._placeholder&&(this._exitModalState(),this.setAttribute("closing",""),this.dispatchEvent(new CustomEvent("vaadin-overlay-closing")),this._shouldAnimate()?this._enqueueAnimation("closing",(()=>{this._finishClosing()})):this._finishClosing())}_detachOverlay(){this._placeholder.parentNode.insertBefore(this,this._placeholder),this._placeholder.parentNode.removeChild(this._placeholder)}_mouseDownListener(e){this._mouseDownInside=e.composedPath().indexOf(this.$.overlay)>=0}_mouseUpListener(e){this._mouseUpInside=e.composedPath().indexOf(this.$.overlay)>=0}_shouldCloseOnOutsideClick(e){return this._last}_outsideClickListener(e){if(e.composedPath().includes(this.$.overlay)||this._mouseDownInside||this._mouseUpInside)return this._mouseDownInside=!1,void(this._mouseUpInside=!1);if(!this._shouldCloseOnOutsideClick(e))return;const t=new CustomEvent("vaadin-overlay-outside-click",{bubbles:!0,cancelable:!0,detail:{sourceEvent:e}});this.dispatchEvent(t),this.opened&&!t.defaultPrevented&&this.close(e)}_keydownListener(e){if(this._last&&(!this.modeless||e.composedPath().includes(this.$.overlay))&&"Escape"===e.key){const t=new CustomEvent("vaadin-overlay-escape-press",{bubbles:!0,cancelable:!0,detail:{sourceEvent:e}});this.dispatchEvent(t),this.opened&&!t.defaultPrevented&&this.close(e)}}}},6196:(e,t,o)=>{o.d(t,{r:()=>s});const s=o(9897).iv`
3
- :host {
4
- z-index: 200;
5
- position: fixed;
6
-
7
- /* Despite of what the names say, <vaadin-overlay> is just a container
8
- for position/sizing/alignment. The actual overlay is the overlay part. */
9
-
10
- /* Default position constraints: the entire viewport. Note: themes can
11
- override this to introduce gaps between the overlay and the viewport. */
12
- inset: 0;
13
- bottom: var(--vaadin-overlay-viewport-bottom);
14
-
15
- /* Use flexbox alignment for the overlay part. */
16
- display: flex;
17
- flex-direction: column; /* makes dropdowns sizing easier */
18
- /* Align to center by default. */
19
- align-items: center;
20
- justify-content: center;
21
-
22
- /* Allow centering when max-width/max-height applies. */
23
- margin: auto;
24
-
25
- /* The host is not clickable, only the overlay part is. */
26
- pointer-events: none;
27
-
28
- /* Remove tap highlight on touch devices. */
29
- -webkit-tap-highlight-color: transparent;
30
-
31
- /* CSS API for host */
32
- --vaadin-overlay-viewport-bottom: 0;
33
- }
34
-
35
- :host([hidden]),
36
- :host(:not([opened]):not([closing])) {
37
- display: none !important;
38
- }
39
-
40
- [part='overlay'] {
41
- -webkit-overflow-scrolling: touch;
42
- overflow: auto;
43
- pointer-events: auto;
44
-
45
- /* Prevent overflowing the host */
46
- max-width: 100%;
47
- box-sizing: border-box;
48
-
49
- -webkit-tap-highlight-color: initial; /* reenable tap highlight inside */
50
- }
51
-
52
- [part='backdrop'] {
53
- z-index: -1;
54
- content: '';
55
- background: rgba(0, 0, 0, 0.5);
56
- position: fixed;
57
- inset: 0;
58
- pointer-events: auto;
59
- }
60
- `},510:(e,t,o)=>{o.d(t,{I:()=>n}),o(1195),o(9416),o(9849),o(4173);var s=o(6570);const n=s.iv`
61
- :host {
62
- top: var(--lumo-space-m);
63
- right: var(--lumo-space-m);
64
- bottom: var(--lumo-space-m);
65
- left: var(--lumo-space-m);
66
- /* Workaround for Edge issue (only on Surface), where an overflowing vaadin-list-box inside vaadin-select-overlay makes the overlay transparent */
67
- /* stylelint-disable-next-line */
68
- outline: 0px solid transparent;
69
- }
70
-
71
- [part='overlay'] {
72
- background-color: var(--lumo-base-color);
73
- background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
74
- border-radius: var(--lumo-border-radius-m);
75
- box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-m);
76
- color: var(--lumo-body-text-color);
77
- font-family: var(--lumo-font-family);
78
- font-size: var(--lumo-font-size-m);
79
- font-weight: 400;
80
- line-height: var(--lumo-line-height-m);
81
- letter-spacing: 0;
82
- text-transform: none;
83
- -webkit-text-size-adjust: 100%;
84
- -webkit-font-smoothing: antialiased;
85
- -moz-osx-font-smoothing: grayscale;
86
- }
87
-
88
- [part='content'] {
89
- padding: var(--lumo-space-xs);
90
- }
91
-
92
- [part='backdrop'] {
93
- background-color: var(--lumo-shade-20pct);
94
- animation: 0.2s lumo-overlay-backdrop-enter both;
95
- will-change: opacity;
96
- }
97
-
98
- @keyframes lumo-overlay-backdrop-enter {
99
- 0% {
100
- opacity: 0;
101
- }
102
- }
103
-
104
- :host([closing]) [part='backdrop'] {
105
- animation: 0.2s lumo-overlay-backdrop-exit both;
106
- }
107
-
108
- @keyframes lumo-overlay-backdrop-exit {
109
- 100% {
110
- opacity: 0;
111
- }
112
- }
113
-
114
- @keyframes lumo-overlay-dummy-animation {
115
- 0% {
116
- opacity: 1;
117
- }
118
-
119
- 100% {
120
- opacity: 1;
121
- }
122
- }
123
- `;(0,s.hC)("",n,{moduleId:"lumo-overlay"})}}]);