@descope/web-components-ui 1.36.0 → 1.37.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/dist/cjs/index.cjs.js +17 -3
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +21 -7
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/DescopeDev.js.map +1 -1
- package/dist/umd/descope-modal-index-js.js +1 -1
- package/dist/umd/descope-modal-index-js.js.map +1 -1
- package/package.json +1 -1
- package/src/components/descope-modal/ModalClass.js +15 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[4139],{52079:(e,t,o)=>{o.r(t),o.d(t,{ModalClass:()=>
|
|
1
|
+
"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[4139],{52079:(e,t,o)=>{o.r(t),o.d(t,{ModalClass:()=>i,componentName:()=>l}),o(69117);var a=o(25964),s=o(9696),r=o(97810),n=o(79365);const l=(0,r.xE)("modal"),d=["opened"],i=(0,s.Zz)((0,n.RF)({mappings:{overlayBackgroundColor:{property:()=>i.cssVarList.overlay.backgroundColor},overlayShadow:{property:()=>i.cssVarList.overlay.shadow},overlayWidth:{property:()=>i.cssVarList.overlay.width}}}),(0,n.mA)({name:"overlay",selector:"",mappings:{hostDisplay:{selector:()=>":host(.descope-modal)",property:"display",important:!0},backgroundColor:[{selector:()=>"::part(content)",property:"background-color"},{selector:()=>"::part(overlay)",property:"background-color"}],width:{selector:()=>"::part(overlay)",property:"width"},shadow:{selector:()=>"::part(overlay)",property:"box-shadow"}},forward:{include:!1,attributes:["opened","style"]}}),n.VO,n.tQ,(e=>class extends e{static get observedAttributes(){return[].concat(e.observedAttributes||[],d)}get opened(){return"true"===this.getAttribute("opened")}handleOpened(){this.opened?this.style.display="":this.style.display="none"}attributeChangedCallback(e,t,o){super.attributeChangedCallback?.(e,t,o),"opened"===e&&this.handleOpened()}init(){super.init?.(),this.style.display="none",setTimeout((()=>{this.baseElement.shadowRoot.querySelector("vaadin-dialog-overlay").appendChild(document.createElement("slot")),this.#e(),(0,r.EA)(this,this.baseElement,{includeAttrs:["opened"]}),this.handleOpened()}))}#e(){const e=this.baseElement.shadowRoot.querySelector("vaadin-dialog-overlay");e._attachOverlay=()=>{e.bringToFront(),(0,a.fz)("\n :host {\n display: flex!important;\n }\n ",this.baseElement)},e._detachOverlay=()=>{this.baseElement.style.display="none"},e._enterModalState=()=>{},e.close=()=>!1}}))((0,n.tz)({slots:[""],wrappedEleName:"vaadin-dialog",style:()=>"\n vaaadin-dialog {\n display: flex!important;\n }\n ",excludeAttrsSync:["tabindex","opened","style"],componentName:l}));customElements.define(l,i)}}]);
|
|
2
2
|
//# sourceMappingURL=descope-modal-index-js.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"descope-modal-index-js.js","mappings":"sPAWO,MAAMA,GAAgB,QAAiB,
|
|
1
|
+
{"version":3,"file":"descope-modal-index-js.js","mappings":"sPAWO,MAAMA,GAAgB,QAAiB,SAExCC,EAAgB,CAAC,UAgFVC,GAAa,SACxB,QAAiB,CACfC,SAAU,CACRC,uBAAwB,CAAEC,SAAU,IAAMH,EAAWI,WAAWC,QAAQC,iBACxEC,cAAe,CAAEJ,SAAU,IAAMH,EAAWI,WAAWC,QAAQG,QAC/DC,aAAc,CAAEN,SAAU,IAAMH,EAAWI,WAAWC,QAAQK,WAGlE,QAAY,CACVC,KAAM,UACNC,SAAU,GACVX,SAAU,CACRY,YAAa,CACXD,SAAU,IAAM,wBAChBT,SAAU,UACVW,WAAW,GAEbR,gBAAiB,CACf,CAAEM,SAAU,IAAM,kBAAmBT,SAAU,oBAC/C,CAAES,SAAU,IAAM,kBAAmBT,SAAU,qBAEjDO,MAAO,CAAEE,SAAU,IAAM,kBAAmBT,SAAU,SACtDK,OAAQ,CAAEI,SAAU,IAAM,kBAAmBT,SAAU,eAEzDY,QAAS,CACPC,SAAS,EACTC,WAAY,CAAC,SAAU,YAG3B,KACA,MA5GmBC,GACnB,cAA8BA,EAC5B,6BAAWC,GACT,MAAO,GAAGC,OAAOF,EAAWC,oBAAsB,GAAIpB,EACxD,CAEA,UAAIsB,GACF,MAAuC,SAAhCC,KAAKC,aAAa,SAC3B,CAEA,YAAAC,GACMF,KAAKD,OACPC,KAAKG,MAAMC,QAAU,GAErBJ,KAAKG,MAAMC,QAAU,MAEzB,CAEA,wBAAAC,CAAyBhB,EAAMiB,EAAUC,GACvCC,MAAMH,2BAA2BhB,EAAMiB,EAAUC,GAEpC,WAATlB,GACFW,KAAKE,cAET,CAEA,IAAAO,GACED,MAAMC,SACNT,KAAKG,MAAMC,QAAU,OAKrBM,YAAW,KAITV,KAAKW,YAAYC,WACdC,cAAc,yBACdC,YAAYC,SAASC,cAAc,SAEtChB,MAAK,KACL,QAAaA,KAAMA,KAAKW,YAAa,CAAEM,aAAc,CAAC,YAMtDjB,KAAKE,cAAc,GAEvB,CAKA,KACE,MAAMnB,EAAUiB,KAAKW,YAAYC,WAAWC,cAAc,yBAE1D9B,EAAQmC,eAAiB,KACvBnC,EAAQoC,gBACR,QACE,qFAKAnB,KAAKW,YACN,EAEH5B,EAAQqC,eAAiB,KACvBpB,KAAKW,YAAYR,MAAMC,QAAU,MAAM,EAEzCrB,EAAQsC,iBAAmB,OAE3BtC,EAAQuC,MAAQ,KAAM,CACxB,IAGsB,EAiCxB,QAAY,CACVC,MAAO,CAAC,IACRC,eAAgB,gBAChBrB,MAAO,IAAM,4EAKbsB,iBAAkB,CAAC,WAAY,SAAU,SACzCjD,mBCpIJkD,eAAeC,OAAOnD,EAAeE,E","sources":["webpack://@descope/web-components-ui/./src/components/descope-modal/ModalClass.js","webpack://@descope/web-components-ui/./src/components/descope-modal/index.js"],"sourcesContent":["import { injectStyle } from '@descope-ui/common/components-helpers';\nimport { compose } from '../../helpers';\nimport { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';\nimport {\n createStyleMixin,\n draggableMixin,\n createProxy,\n componentNameValidationMixin,\n portalMixin,\n} from '../../mixins';\n\nexport const componentName = getComponentName('modal');\n\nconst observedAttrs = ['opened'];\n\nconst customMixin = (superclass) =>\n class ModalMixinClass extends superclass {\n static get observedAttributes() {\n return [].concat(superclass.observedAttributes || [], observedAttrs);\n }\n\n get opened() {\n return this.getAttribute('opened') === 'true';\n }\n\n handleOpened() {\n if (this.opened) {\n this.style.display = '';\n } else {\n this.style.display = 'none';\n }\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n\n if (name === 'opened') {\n this.handleOpened();\n }\n }\n\n init() {\n super.init?.();\n this.style.display = 'none';\n\n // vaadin-dialog might not be loaded in time\n // in order to make sure it's loaded before this block is running\n // we are wrapping it with setTimeout\n setTimeout(() => {\n // we want to sync descope-modal content through vaadin-dialog into the overlay\n // so we are adding a slot to the overlay, which allows us to forward the content from\n // vaadin-dialog to vaadin-dialog-overlay\n this.baseElement.shadowRoot\n .querySelector('vaadin-dialog-overlay')\n .appendChild(document.createElement('slot'));\n\n this.#overrideOverlaySettings();\n forwardAttrs(this, this.baseElement, { includeAttrs: ['opened'] });\n\n // we need to always open the modal in `opened=false`\n // to prevent it from rendering outside the dialog\n // first, we have to run `overrideOverlaySettings` to setup\n // the component.\n this.handleOpened();\n });\n }\n\n // the default vaadin behavior is to attach the overlay to the body when opened\n // we do not want that because it's difficult to style the overlay in this way\n // so we override it to open inside the shadow DOM\n #overrideOverlaySettings() {\n const overlay = this.baseElement.shadowRoot.querySelector('vaadin-dialog-overlay');\n\n overlay._attachOverlay = () => {\n overlay.bringToFront();\n injectStyle(\n `\n :host {\n display: flex!important;\n }\n `,\n this.baseElement\n );\n };\n overlay._detachOverlay = () => {\n this.baseElement.style.display = 'none';\n };\n overlay._enterModalState = () => {};\n\n overlay.close = () => false;\n }\n };\n\nexport const ModalClass = compose(\n createStyleMixin({\n mappings: {\n overlayBackgroundColor: { property: () => ModalClass.cssVarList.overlay.backgroundColor },\n overlayShadow: { property: () => ModalClass.cssVarList.overlay.shadow },\n overlayWidth: { property: () => ModalClass.cssVarList.overlay.width },\n },\n }),\n portalMixin({\n name: 'overlay',\n selector: '',\n mappings: {\n hostDisplay: {\n selector: () => ':host(.descope-modal)',\n property: 'display',\n important: true,\n },\n backgroundColor: [\n { selector: () => '::part(content)', property: 'background-color' },\n { selector: () => '::part(overlay)', property: 'background-color' },\n ],\n width: { selector: () => '::part(overlay)', property: 'width' },\n shadow: { selector: () => '::part(overlay)', property: 'box-shadow' },\n },\n forward: {\n include: false,\n attributes: ['opened', 'style'],\n },\n }),\n draggableMixin,\n componentNameValidationMixin,\n customMixin\n)(\n createProxy({\n slots: [''],\n wrappedEleName: 'vaadin-dialog',\n style: () => `\n vaaadin-dialog {\n display: flex!important;\n }\n `,\n excludeAttrsSync: ['tabindex', 'opened', 'style'],\n componentName,\n })\n);\n","import '@vaadin/dialog';\nimport { componentName, ModalClass } from './ModalClass';\n\ncustomElements.define(componentName, ModalClass);\n\nexport { ModalClass, componentName };\n"],"names":["componentName","observedAttrs","ModalClass","mappings","overlayBackgroundColor","property","cssVarList","overlay","backgroundColor","overlayShadow","shadow","overlayWidth","width","name","selector","hostDisplay","important","forward","include","attributes","superclass","observedAttributes","concat","opened","this","getAttribute","handleOpened","style","display","attributeChangedCallback","oldValue","newValue","super","init","setTimeout","baseElement","shadowRoot","querySelector","appendChild","document","createElement","includeAttrs","_attachOverlay","bringToFront","_detachOverlay","_enterModalState","close","slots","wrappedEleName","excludeAttrsSync","customElements","define"],"sourceRoot":""}
|
package/package.json
CHANGED
|
@@ -11,14 +11,19 @@ import {
|
|
|
11
11
|
|
|
12
12
|
export const componentName = getComponentName('modal');
|
|
13
13
|
|
|
14
|
+
const observedAttrs = ['opened'];
|
|
15
|
+
|
|
14
16
|
const customMixin = (superclass) =>
|
|
15
17
|
class ModalMixinClass extends superclass {
|
|
18
|
+
static get observedAttributes() {
|
|
19
|
+
return [].concat(superclass.observedAttributes || [], observedAttrs);
|
|
20
|
+
}
|
|
21
|
+
|
|
16
22
|
get opened() {
|
|
17
23
|
return this.getAttribute('opened') === 'true';
|
|
18
24
|
}
|
|
19
25
|
|
|
20
26
|
handleOpened() {
|
|
21
|
-
forwardAttrs(this, this.baseElement, { includeAttrs: ['opened'] });
|
|
22
27
|
if (this.opened) {
|
|
23
28
|
this.style.display = '';
|
|
24
29
|
} else {
|
|
@@ -26,6 +31,14 @@ const customMixin = (superclass) =>
|
|
|
26
31
|
}
|
|
27
32
|
}
|
|
28
33
|
|
|
34
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
35
|
+
super.attributeChangedCallback?.(name, oldValue, newValue);
|
|
36
|
+
|
|
37
|
+
if (name === 'opened') {
|
|
38
|
+
this.handleOpened();
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
29
42
|
init() {
|
|
30
43
|
super.init?.();
|
|
31
44
|
this.style.display = 'none';
|
|
@@ -42,6 +55,7 @@ const customMixin = (superclass) =>
|
|
|
42
55
|
.appendChild(document.createElement('slot'));
|
|
43
56
|
|
|
44
57
|
this.#overrideOverlaySettings();
|
|
58
|
+
forwardAttrs(this, this.baseElement, { includeAttrs: ['opened'] });
|
|
45
59
|
|
|
46
60
|
// we need to always open the modal in `opened=false`
|
|
47
61
|
// to prevent it from rendering outside the dialog
|