@descope/web-components-ui 1.0.230 → 1.0.232
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +74 -26
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +5 -0
- package/dist/index.esm.js +65 -17
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/descope-notification-descope-notification-card-index-js.js +1 -1
- package/dist/umd/descope-notification-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-notification/NotificationClass.js +9 -9
- package/src/components/descope-notification/descope-notification-card/NotificationCardClass.js +61 -13
- package/src/index.d.ts +5 -0
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[7401],{5400:(e,t,
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[7401],{5400:(e,t,n)=>{n.r(t),n.d(t,{NotificationCardClass:()=>c}),n(6542);var o=n(2061),r=n(4567),i=n(1e3);const s=(0,r.iY)("notification-card"),a={content:()=>"vaadin-notification-card::part(content)",overlay:()=>"vaadin-notification-card::part(overlay)"},c=(0,o.qC)((0,i.yk)({mappings:{hostMinWidth:{selector:a.content,property:"min-width"},fontFamily:{},fontSize:{},backgroundColor:{selector:a.content},textColor:{property:"color"},boxShadow:{},borderWidth:{selector:a.content,property:"border-width"},borderColor:{selector:a.content,property:"border-color"},borderStyle:{selector:a.content,property:"border-style"},borderRadius:[{selector:a.content,property:"border-radius"},{selector:a.overlay,property:"border-radius"}],verticalPadding:[{selector:a.content,property:"padding-top"},{selector:a.content,property:"padding-bottom"}],horizontalPadding:[{selector:a.content,property:"padding-right"},{selector:a.content,property:"padding-left"}]}}),(e=>class extends e{close(){this.baseElement.addEventListener("animationend",(()=>{this.remove(),this.dispatchEvent(new Event("card-closed"))})),this.setAttribute("opened","false")}constructor(){super(),this.baseElement.innerHTML='\n <div part="root">\n <div part="content">\n <slot></slot>\n </div>\n <div part="close">\n <slot name="close"></slot>\n </div>\n </div>\n ',this.closeEle=this.shadowRoot.querySelector('[part="close"]')}init(){super.init?.(),this.closeEle.onclick=()=>{this.close()}}}))((0,i.DM)({slots:[],wrappedEleName:"vaadin-notification-card",style:()=>'\n vaadin-notification-card {\n box-shadow: none;\n }\n ::part(overlay) {\n box-shadow: none;\n background: none;\n }\n\n [part="close"] {\n cursor: pointer;\n display: flex;\n }\n\n [part="content"] {\n display: flex;\n align-items: center;\n flex-grow: 1;\n }\n\n [part="root"] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n }\n ',excludeAttrsSync:["tabindex"],componentName:s}));customElements.define(s,c)}}]);
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9655],{1845:(e,t,n)=>{n.r(t),n.d(t,{NotificationClass:()=>s}),n(6542);var i=n(4567);const
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9655],{1845:(e,t,n)=>{n.r(t),n.d(t,{NotificationClass:()=>s}),n(6542);var i=n(4567);const o=window.customElements.get("vaadin-notification-container");if(!o)throw new Error("could not get vaadin-notification-container class");customElements.define((0,i.iY)("notification-container"),class extends o{}),n(5400);var a=n(2061),c=n(1e3);const r=(0,i.iY)("notification"),s=(0,a.qC)(c.e4,c.Ae,c._A,(e=>class t extends e{#e;constructor(){super();const e=this;Object.defineProperty(this.baseElement,"_container",{get:()=>(t._container||(t._container=document.createElement("descope-notification-container"),document.body.appendChild(t._container)),t._container.isConnected||setTimeout((()=>e.parentNode.appendChild(t._container))),t._container)}),Object.defineProperty(this.baseElement,"_card",{get:()=>e.#e}),this.baseElement._removeNotificationCard=this.close.bind(this)}close(){this.#e.close()}init(){super.init?.(),this.createCard(),(0,i.oP)(this,this.#e),(0,i.tg)(this.#e,this,{includeAttrs:["opened"]}),this.baseElement.renderer=e=>{Array.from(this.childNodes).forEach((t=>e.appendChild(t)))}}get isContainerEmpty(){return!t._container.children.length}removeContainer(){t._container.remove()}removeNotification(){this.remove(),this.isContainerEmpty&&this.removeContainer()}createCard(){this.#e=document.createElement("descope-notification-card"),this.#e.addEventListener("card-closed",this.removeNotification.bind(this))}}))((0,c.DM)({wrappedEleName:"vaadin-notification",excludeAttrsSync:["tabindex"],componentName:r}));customElements.define(r,s)}}]);
|
package/package.json
CHANGED
@@ -33,7 +33,7 @@ const NotificationMixin = (superclass) =>
|
|
33
33
|
if (!NotificationMixinClass._container.isConnected) {
|
34
34
|
// Then, we're adding the container to the parentNode, which is the desired location
|
35
35
|
// for us on the DOM
|
36
|
-
that.parentNode.appendChild(NotificationMixinClass._container);
|
36
|
+
setTimeout(() => that.parentNode.appendChild(NotificationMixinClass._container));
|
37
37
|
}
|
38
38
|
|
39
39
|
return NotificationMixinClass._container;
|
@@ -46,13 +46,12 @@ const NotificationMixin = (superclass) =>
|
|
46
46
|
},
|
47
47
|
});
|
48
48
|
|
49
|
-
// we want to replace the card with vaadin's notification
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
};
|
49
|
+
// we want to replace the card with vaadin's remove notification so it will not throw
|
50
|
+
this.baseElement._removeNotificationCard = this.close.bind(this);
|
51
|
+
}
|
52
|
+
|
53
|
+
close() {
|
54
|
+
this.#card.close();
|
56
55
|
}
|
57
56
|
|
58
57
|
init() {
|
@@ -68,8 +67,9 @@ const NotificationMixin = (superclass) =>
|
|
68
67
|
};
|
69
68
|
}
|
70
69
|
|
70
|
+
// eslint-disable-next-line class-methods-use-this
|
71
71
|
get isContainerEmpty() {
|
72
|
-
return !
|
72
|
+
return !NotificationMixinClass._container.children.length;
|
73
73
|
}
|
74
74
|
|
75
75
|
// eslint-disable-next-line class-methods-use-this
|
package/src/components/descope-notification/descope-notification-card/NotificationCardClass.js
CHANGED
@@ -10,7 +10,7 @@ const notificationCardMixin = (superclass) =>
|
|
10
10
|
// if animation is not applied to the element, the node will not be removed
|
11
11
|
// from the DOM. We should avoid that. So, if in any case we allow
|
12
12
|
// customizing the animation - we should check if animation is applied
|
13
|
-
// and if it's not applied - remove the
|
13
|
+
// and if it's not applied - remove the element from the DOM and dispatch
|
14
14
|
// `card-closed` event.
|
15
15
|
this.baseElement.addEventListener('animationend', () => {
|
16
16
|
this.remove();
|
@@ -19,38 +19,68 @@ const notificationCardMixin = (superclass) =>
|
|
19
19
|
|
20
20
|
this.setAttribute('opened', 'false');
|
21
21
|
}
|
22
|
+
|
23
|
+
constructor() {
|
24
|
+
super();
|
25
|
+
|
26
|
+
this.baseElement.innerHTML = `
|
27
|
+
<div part="root">
|
28
|
+
<div part="content">
|
29
|
+
<slot></slot>
|
30
|
+
</div>
|
31
|
+
<div part="close">
|
32
|
+
<slot name="close"></slot>
|
33
|
+
</div>
|
34
|
+
</div>
|
35
|
+
`;
|
36
|
+
|
37
|
+
this.closeEle = this.shadowRoot.querySelector('[part="close"]');
|
38
|
+
}
|
39
|
+
|
40
|
+
init() {
|
41
|
+
super.init?.();
|
42
|
+
|
43
|
+
this.closeEle.onclick = () => {
|
44
|
+
this.close();
|
45
|
+
};
|
46
|
+
}
|
22
47
|
};
|
23
48
|
|
49
|
+
const selectors = {
|
50
|
+
content: () => 'vaadin-notification-card::part(content)',
|
51
|
+
overlay: () => 'vaadin-notification-card::part(overlay)',
|
52
|
+
};
|
53
|
+
|
24
54
|
export const NotificationCardClass = compose(
|
25
55
|
createStyleMixin({
|
26
56
|
mappings: {
|
27
|
-
hostMinWidth: { selector:
|
57
|
+
hostMinWidth: { selector: selectors.content, property: 'min-width' },
|
28
58
|
fontFamily: {},
|
29
59
|
fontSize: {},
|
30
|
-
backgroundColor: { selector:
|
60
|
+
backgroundColor: { selector: selectors.content },
|
31
61
|
textColor: { property: 'color' },
|
32
62
|
boxShadow: {},
|
33
|
-
borderWidth: { selector:
|
34
|
-
borderColor: { selector:
|
35
|
-
borderStyle: { selector:
|
63
|
+
borderWidth: { selector: selectors.content, property: 'border-width' },
|
64
|
+
borderColor: { selector: selectors.content, property: 'border-color' },
|
65
|
+
borderStyle: { selector: selectors.content, property: 'border-style' },
|
36
66
|
borderRadius: [
|
37
|
-
{ selector:
|
38
|
-
{ selector:
|
67
|
+
{ selector: selectors.content, property: 'border-radius' },
|
68
|
+
{ selector: selectors.overlay, property: 'border-radius' },
|
39
69
|
],
|
40
70
|
verticalPadding: [
|
41
|
-
{ selector:
|
42
|
-
{ selector:
|
71
|
+
{ selector: selectors.content, property: 'padding-top' },
|
72
|
+
{ selector: selectors.content, property: 'padding-bottom' },
|
43
73
|
],
|
44
74
|
horizontalPadding: [
|
45
|
-
{ selector:
|
46
|
-
{ selector:
|
75
|
+
{ selector: selectors.content, property: 'padding-right' },
|
76
|
+
{ selector: selectors.content, property: 'padding-left' },
|
47
77
|
],
|
48
78
|
},
|
49
79
|
}),
|
50
80
|
notificationCardMixin
|
51
81
|
)(
|
52
82
|
createProxy({
|
53
|
-
slots: [
|
83
|
+
slots: [],
|
54
84
|
wrappedEleName: 'vaadin-notification-card',
|
55
85
|
style: () => `
|
56
86
|
vaadin-notification-card {
|
@@ -60,6 +90,24 @@ export const NotificationCardClass = compose(
|
|
60
90
|
box-shadow: none;
|
61
91
|
background: none;
|
62
92
|
}
|
93
|
+
|
94
|
+
[part="close"] {
|
95
|
+
cursor: pointer;
|
96
|
+
display: flex;
|
97
|
+
}
|
98
|
+
|
99
|
+
[part="content"] {
|
100
|
+
display: flex;
|
101
|
+
align-items: center;
|
102
|
+
flex-grow: 1;
|
103
|
+
}
|
104
|
+
|
105
|
+
[part="root"] {
|
106
|
+
display: flex;
|
107
|
+
align-items: center;
|
108
|
+
justify-content: space-between;
|
109
|
+
width: 100%;
|
110
|
+
}
|
63
111
|
`,
|
64
112
|
excludeAttrsSync: ['tabindex'],
|
65
113
|
componentName,
|
package/src/index.d.ts
CHANGED
@@ -33,6 +33,11 @@ export { NewPasswordClass } from './components/descope-new-password';
|
|
33
33
|
export { RecaptchaClass } from './components/descope-recaptcha';
|
34
34
|
export { UploadFileClass } from './components/descope-upload-file';
|
35
35
|
export { ButtonSelectionGroupClass } from './components/descope-button-selection-group/ButtonSelectionGroupClass';
|
36
|
+
export { GridClass } from './components/descope-grid/GridClass';
|
37
|
+
export { GridTextColumnClass } from './components/descope-grid/descope-grid-text-column/index';
|
38
|
+
export { GridSelectionColumnClass } from './components/descope-grid/descope-grid-selection-column/index';
|
39
|
+
export { ModalClass } from './components/descope-modal/ModalClass';
|
40
|
+
export { NotificationClass } from './components/descope-notification/';
|
36
41
|
|
37
42
|
export type Theme = {
|
38
43
|
globals: {
|