@descope/web-components-ui 2.2.3 → 2.2.4
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 +21 -0
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +21 -0
- 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 +28 -28
- package/src/components/descope-modal/ModalClass.js +20 -0
- package/src/theme/components/modal.js +1 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[4139],{52079:(e,t
|
|
1
|
+
"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[4139],{52079:(e,r,t)=>{t.r(r),t.d(r,{ModalClass:()=>p,componentName:()=>d}),t(69117);var o=t(25964),a=t(9696),s=t(97810),l=t(79365);const d=(0,s.xE)("modal"),n=["opened"],p=(0,a.Zz)((0,l.RF)({mappings:{overlayBackdropColor:{property:()=>p.cssVarList.overlay.backdropColor},overlayBackgroundColor:{property:()=>p.cssVarList.overlay.backgroundColor},overlayShadow:{property:()=>p.cssVarList.overlay.shadow},overlayWidth:{property:()=>p.cssVarList.overlay.width},overlayBorderWidth:{property:()=>p.cssVarList.overlay.borderWidth},overlayBorderStyle:{property:()=>p.cssVarList.overlay.borderStyle},overlayBorderColor:{property:()=>p.cssVarList.overlay.borderColor}}}),(0,l.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"}],backdropColor:{selector:()=>"::part(backdrop)",property:"background-color"},borderStyle:{selector:()=>"::part(content)",property:"border-style"},borderWidth:{selector:()=>"::part(content)",property:"border-width"},borderColor:{selector:()=>"::part(content)",property:"border-color"},width:{selector:()=>"::part(overlay)",property:"width"},shadow:{selector:()=>"::part(overlay)",property:"box-shadow"}},forward:{include:!1,attributes:["opened","style"]}}),l.VO,l.tQ,e=>class extends e{static get observedAttributes(){return[].concat(e.observedAttributes||[],n)}get opened(){return"true"===this.getAttribute("opened")}handleOpened(){this.opened?this.style.display="":this.style.display="none"}attributeChangedCallback(e,r,t){super.attributeChangedCallback?.(e,r,t),"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,s.EA)(this,this.baseElement,{includeAttrs:["opened"]}),this.handleOpened()})}#e(){const e=this.baseElement.shadowRoot.querySelector("vaadin-dialog-overlay");e._attachOverlay=()=>{e.bringToFront(),(0,o.fz)("\n :host {\n display: flex!important;\n }\n ",this.baseElement)},e._detachOverlay=()=>{this.baseElement.style.display="none"},e._enterModalState=()=>{},e.close=()=>!1}})((0,l.tz)({slots:[""],wrappedEleName:"vaadin-dialog",style:()=>"\n vaaadin-dialog {\n display: flex!important;\n }\n ",excludeAttrsSync:["tabindex","opened","style"],componentName:d}));customElements.define(d,p)}}]);
|
|
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,SAExCC,EAAgB,CAAC,UAgFVC,GAAa,SACxB,QAAiB,CACfC,SAAU,CACRC,
|
|
1
|
+
{"version":3,"file":"descope-modal-index-js.js","mappings":"sPAWO,MAAMA,GAAgB,QAAiB,SAExCC,EAAgB,CAAC,UAgFVC,GAAa,SACxB,QAAiB,CACfC,SAAU,CACRC,qBAAsB,CAAEC,SAAU,IAAMH,EAAWI,WAAWC,QAAQC,eACtEC,uBAAwB,CAAEJ,SAAU,IAAMH,EAAWI,WAAWC,QAAQG,iBACxEC,cAAe,CAAEN,SAAU,IAAMH,EAAWI,WAAWC,QAAQK,QAC/DC,aAAc,CAAER,SAAU,IAAMH,EAAWI,WAAWC,QAAQO,OAC9DC,mBAAoB,CAAEV,SAAU,IAAMH,EAAWI,WAAWC,QAAQS,aACpEC,mBAAoB,CAAEZ,SAAU,IAAMH,EAAWI,WAAWC,QAAQW,aACpEC,mBAAoB,CAAEd,SAAU,IAAMH,EAAWI,WAAWC,QAAQa,iBAGxE,QAAY,CACVC,KAAM,UACNC,SAAU,GACVnB,SAAU,CACRoB,YAAa,CACXD,SAAU,IAAM,wBAChBjB,SAAU,UACVmB,WAAW,GAEbd,gBAAiB,CACf,CAAEY,SAAU,IAAM,kBAAmBjB,SAAU,oBAC/C,CAAEiB,SAAU,IAAM,kBAAmBjB,SAAU,qBAEjDG,cAAe,CACbc,SAAU,IAAM,mBAChBjB,SAAU,oBAEZa,YAAa,CACXI,SAAU,IAAM,kBAChBjB,SAAU,gBAEZW,YAAa,CACXM,SAAU,IAAM,kBAChBjB,SAAU,gBAEZe,YAAa,CACXE,SAAU,IAAM,kBAChBjB,SAAU,gBAEZS,MAAO,CAAEQ,SAAU,IAAM,kBAAmBjB,SAAU,SACtDO,OAAQ,CAAEU,SAAU,IAAM,kBAAmBjB,SAAU,eAEzDoB,QAAS,CACPC,SAAS,EACTC,WAAY,CAAC,SAAU,YAG3B,KACA,KAhImBC,GACnB,cAA8BA,EAC5B,6BAAWC,GACT,MAAO,GAAGC,OAAOF,EAAWC,oBAAsB,GAAI5B,EACxD,CAEA,UAAI8B,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,WAAW,KAITV,KAAKW,YAAYC,WACdC,cAAc,yBACdC,YAAYC,SAASC,cAAc,SAEtChB,MAAK,KACL,QAAaA,KAAMA,KAAKW,YAAa,CAAEM,aAAc,CAAC,YAMtDjB,KAAKE,gBAET,CAKA,KACE,MAAM3B,EAAUyB,KAAKW,YAAYC,WAAWC,cAAc,yBAE1DtC,EAAQ2C,eAAiB,KACvB3C,EAAQ4C,gBACR,QACE,qFAKAnB,KAAKW,cAGTpC,EAAQ6C,eAAiB,KACvBpB,KAAKW,YAAYR,MAAMC,QAAU,QAEnC7B,EAAQ8C,iBAAmB,OAE3B9C,EAAQ+C,MAAQ,KAAM,CACxB,GAGsB,EAqDxB,QAAY,CACVC,MAAO,CAAC,IACRC,eAAgB,gBAChBrB,MAAO,IAAM,4EAKbsB,iBAAkB,CAAC,WAAY,SAAU,SACzCzD,mBCxJJ0D,eAAeC,OAAO3D,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 overlayBackdropColor: { property: () => ModalClass.cssVarList.overlay.backdropColor },\n overlayBackgroundColor: { property: () => ModalClass.cssVarList.overlay.backgroundColor },\n overlayShadow: { property: () => ModalClass.cssVarList.overlay.shadow },\n overlayWidth: { property: () => ModalClass.cssVarList.overlay.width },\n overlayBorderWidth: { property: () => ModalClass.cssVarList.overlay.borderWidth },\n overlayBorderStyle: { property: () => ModalClass.cssVarList.overlay.borderStyle },\n overlayBorderColor: { property: () => ModalClass.cssVarList.overlay.borderColor },\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 backdropColor: {\n selector: () => '::part(backdrop)',\n property: 'background-color',\n },\n borderStyle: {\n selector: () => '::part(content)',\n property: 'border-style',\n },\n borderWidth: {\n selector: () => '::part(content)',\n property: 'border-width',\n },\n borderColor: {\n selector: () => '::part(content)',\n property: 'border-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","overlayBackdropColor","property","cssVarList","overlay","backdropColor","overlayBackgroundColor","backgroundColor","overlayShadow","shadow","overlayWidth","width","overlayBorderWidth","borderWidth","overlayBorderStyle","borderStyle","overlayBorderColor","borderColor","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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@descope/web-components-ui",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.4",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/cjs/index.cjs.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -50,10 +50,10 @@
|
|
|
50
50
|
"webpack": "^5.79.0",
|
|
51
51
|
"webpack-cli": "^6.0.0",
|
|
52
52
|
"webpack-dev-server": "^5.0.0",
|
|
53
|
-
"rollup-replace-plugin": "2.2.
|
|
54
|
-
"test-drivers": "2.2.
|
|
55
|
-
"webpack-extract-font-loader": "2.2.
|
|
56
|
-
"webpack-replace-plugin": "2.2.
|
|
53
|
+
"rollup-replace-plugin": "2.2.4",
|
|
54
|
+
"test-drivers": "2.2.4",
|
|
55
|
+
"webpack-extract-font-loader": "2.2.4",
|
|
56
|
+
"webpack-replace-plugin": "2.2.4"
|
|
57
57
|
},
|
|
58
58
|
"dependencies": {
|
|
59
59
|
"@vaadin/checkbox": "24.3.4",
|
|
@@ -77,29 +77,29 @@
|
|
|
77
77
|
"libphonenumber-js": "^1.11.12",
|
|
78
78
|
"lodash.debounce": "4.0.8",
|
|
79
79
|
"lodash.merge": "4.6.2",
|
|
80
|
-
"@descope-ui/common": "2.2.
|
|
81
|
-
"@descope-ui/descope-address-field": "2.2.
|
|
82
|
-
"@descope-ui/descope-apps-list": "2.2.
|
|
83
|
-
"@descope-ui/descope-autocomplete-field": "2.2.
|
|
84
|
-
"@descope-ui/descope-avatar": "2.2.
|
|
85
|
-
"@descope-ui/descope-badge": "2.2.
|
|
86
|
-
"@descope-ui/descope-button": "2.2.
|
|
87
|
-
"@descope-ui/descope-collapsible-container": "2.2.
|
|
88
|
-
"@descope-ui/descope-combo-box": "2.2.
|
|
89
|
-
"@descope-ui/descope-enriched-text": "2.2.
|
|
90
|
-
"@descope-ui/descope-icon": "2.2.
|
|
91
|
-
"@descope-ui/descope-image": "2.2.
|
|
92
|
-
"@descope-ui/descope-link": "2.2.
|
|
93
|
-
"@descope-ui/descope-list": "2.2.
|
|
94
|
-
"@descope-ui/descope-list-item": "2.2.
|
|
95
|
-
"@descope-ui/descope-outbound-app-button": "2.2.
|
|
96
|
-
"@descope-ui/descope-outbound-apps": "2.2.
|
|
97
|
-
"@descope-ui/descope-password-strength": "2.2.
|
|
98
|
-
"@descope-ui/descope-recovery-codes": "2.2.
|
|
99
|
-
"@descope-ui/descope-text": "2.2.
|
|
100
|
-
"@descope-ui/descope-timer": "2.2.
|
|
101
|
-
"@descope-ui/descope-timer-button": "2.2.
|
|
102
|
-
"@descope-ui/descope-trusted-devices": "2.2.
|
|
80
|
+
"@descope-ui/common": "2.2.4",
|
|
81
|
+
"@descope-ui/descope-address-field": "2.2.4",
|
|
82
|
+
"@descope-ui/descope-apps-list": "2.2.4",
|
|
83
|
+
"@descope-ui/descope-autocomplete-field": "2.2.4",
|
|
84
|
+
"@descope-ui/descope-avatar": "2.2.4",
|
|
85
|
+
"@descope-ui/descope-badge": "2.2.4",
|
|
86
|
+
"@descope-ui/descope-button": "2.2.4",
|
|
87
|
+
"@descope-ui/descope-collapsible-container": "2.2.4",
|
|
88
|
+
"@descope-ui/descope-combo-box": "2.2.4",
|
|
89
|
+
"@descope-ui/descope-enriched-text": "2.2.4",
|
|
90
|
+
"@descope-ui/descope-icon": "2.2.4",
|
|
91
|
+
"@descope-ui/descope-image": "2.2.4",
|
|
92
|
+
"@descope-ui/descope-link": "2.2.4",
|
|
93
|
+
"@descope-ui/descope-list": "2.2.4",
|
|
94
|
+
"@descope-ui/descope-list-item": "2.2.4",
|
|
95
|
+
"@descope-ui/descope-outbound-app-button": "2.2.4",
|
|
96
|
+
"@descope-ui/descope-outbound-apps": "2.2.4",
|
|
97
|
+
"@descope-ui/descope-password-strength": "2.2.4",
|
|
98
|
+
"@descope-ui/descope-recovery-codes": "2.2.4",
|
|
99
|
+
"@descope-ui/descope-text": "2.2.4",
|
|
100
|
+
"@descope-ui/descope-timer": "2.2.4",
|
|
101
|
+
"@descope-ui/descope-timer-button": "2.2.4",
|
|
102
|
+
"@descope-ui/descope-trusted-devices": "2.2.4"
|
|
103
103
|
},
|
|
104
104
|
"overrides": {
|
|
105
105
|
"@vaadin/avatar": "24.3.4",
|
|
@@ -94,9 +94,13 @@ const customMixin = (superclass) =>
|
|
|
94
94
|
export const ModalClass = compose(
|
|
95
95
|
createStyleMixin({
|
|
96
96
|
mappings: {
|
|
97
|
+
overlayBackdropColor: { property: () => ModalClass.cssVarList.overlay.backdropColor },
|
|
97
98
|
overlayBackgroundColor: { property: () => ModalClass.cssVarList.overlay.backgroundColor },
|
|
98
99
|
overlayShadow: { property: () => ModalClass.cssVarList.overlay.shadow },
|
|
99
100
|
overlayWidth: { property: () => ModalClass.cssVarList.overlay.width },
|
|
101
|
+
overlayBorderWidth: { property: () => ModalClass.cssVarList.overlay.borderWidth },
|
|
102
|
+
overlayBorderStyle: { property: () => ModalClass.cssVarList.overlay.borderStyle },
|
|
103
|
+
overlayBorderColor: { property: () => ModalClass.cssVarList.overlay.borderColor },
|
|
100
104
|
},
|
|
101
105
|
}),
|
|
102
106
|
portalMixin({
|
|
@@ -112,6 +116,22 @@ export const ModalClass = compose(
|
|
|
112
116
|
{ selector: () => '::part(content)', property: 'background-color' },
|
|
113
117
|
{ selector: () => '::part(overlay)', property: 'background-color' },
|
|
114
118
|
],
|
|
119
|
+
backdropColor: {
|
|
120
|
+
selector: () => '::part(backdrop)',
|
|
121
|
+
property: 'background-color',
|
|
122
|
+
},
|
|
123
|
+
borderStyle: {
|
|
124
|
+
selector: () => '::part(content)',
|
|
125
|
+
property: 'border-style',
|
|
126
|
+
},
|
|
127
|
+
borderWidth: {
|
|
128
|
+
selector: () => '::part(content)',
|
|
129
|
+
property: 'border-width',
|
|
130
|
+
},
|
|
131
|
+
borderColor: {
|
|
132
|
+
selector: () => '::part(content)',
|
|
133
|
+
property: 'border-color',
|
|
134
|
+
},
|
|
115
135
|
width: { selector: () => '::part(overlay)', property: 'width' },
|
|
116
136
|
shadow: { selector: () => '::part(overlay)', property: 'box-shadow' },
|
|
117
137
|
},
|
|
@@ -10,6 +10,7 @@ const modal = {
|
|
|
10
10
|
[compVars.overlayBackgroundColor]: globalRefs.colors.surface.main,
|
|
11
11
|
[compVars.overlayShadow]: globalRefs.shadow.wide['2xl'],
|
|
12
12
|
[compVars.overlayWidth]: '540px',
|
|
13
|
+
[compVars.overlayBackdropColor]: 'hsla(214, 53%, 23%, 0.16)',
|
|
13
14
|
};
|
|
14
15
|
|
|
15
16
|
export default modal;
|