@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
package/dist/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: {
|
package/dist/index.esm.js
CHANGED
@@ -1918,12 +1918,12 @@ class RawLoaderLinear extends createBaseClass({ componentName: componentName$y,
|
|
1918
1918
|
}
|
1919
1919
|
}
|
1920
1920
|
|
1921
|
-
const selectors$
|
1921
|
+
const selectors$2 = {
|
1922
1922
|
after: { selector: '::after' },
|
1923
1923
|
host: { selector: () => ':host' },
|
1924
1924
|
};
|
1925
1925
|
|
1926
|
-
const { after: after$1, host: host$d } = selectors$
|
1926
|
+
const { after: after$1, host: host$d } = selectors$2;
|
1927
1927
|
|
1928
1928
|
const LoaderLinearClass = compose(
|
1929
1929
|
createStyleMixin({
|
@@ -2353,14 +2353,14 @@ class RawLink extends createBaseClass({ componentName: componentName$s, baseSele
|
|
2353
2353
|
}
|
2354
2354
|
}
|
2355
2355
|
|
2356
|
-
const selectors = {
|
2356
|
+
const selectors$1 = {
|
2357
2357
|
host: { selector: () => ':host' },
|
2358
2358
|
anchor: {},
|
2359
2359
|
wrapper: { selector: () => ':host > div' },
|
2360
2360
|
text: { selector: () => TextClass.componentName },
|
2361
2361
|
};
|
2362
2362
|
|
2363
|
-
const { anchor, text: text$2, host: host$a, wrapper: wrapper$1 } = selectors;
|
2363
|
+
const { anchor, text: text$2, host: host$a, wrapper: wrapper$1 } = selectors$1;
|
2364
2364
|
|
2365
2365
|
const LinkClass = compose(
|
2366
2366
|
createStyleMixin({
|
@@ -8690,7 +8690,7 @@ const notificationCardMixin = (superclass) =>
|
|
8690
8690
|
// if animation is not applied to the element, the node will not be removed
|
8691
8691
|
// from the DOM. We should avoid that. So, if in any case we allow
|
8692
8692
|
// customizing the animation - we should check if animation is applied
|
8693
|
-
// and if it's not applied - remove the
|
8693
|
+
// and if it's not applied - remove the element from the DOM and dispatch
|
8694
8694
|
// `card-closed` event.
|
8695
8695
|
this.baseElement.addEventListener('animationend', () => {
|
8696
8696
|
this.remove();
|
@@ -8699,38 +8699,68 @@ const notificationCardMixin = (superclass) =>
|
|
8699
8699
|
|
8700
8700
|
this.setAttribute('opened', 'false');
|
8701
8701
|
}
|
8702
|
+
|
8703
|
+
constructor() {
|
8704
|
+
super();
|
8705
|
+
|
8706
|
+
this.baseElement.innerHTML = `
|
8707
|
+
<div part="root">
|
8708
|
+
<div part="content">
|
8709
|
+
<slot></slot>
|
8710
|
+
</div>
|
8711
|
+
<div part="close">
|
8712
|
+
<slot name="close"></slot>
|
8713
|
+
</div>
|
8714
|
+
</div>
|
8715
|
+
`;
|
8716
|
+
|
8717
|
+
this.closeEle = this.shadowRoot.querySelector('[part="close"]');
|
8718
|
+
}
|
8719
|
+
|
8720
|
+
init() {
|
8721
|
+
super.init?.();
|
8722
|
+
|
8723
|
+
this.closeEle.onclick = () => {
|
8724
|
+
this.close();
|
8725
|
+
};
|
8726
|
+
}
|
8702
8727
|
};
|
8703
8728
|
|
8729
|
+
const selectors = {
|
8730
|
+
content: () => 'vaadin-notification-card::part(content)',
|
8731
|
+
overlay: () => 'vaadin-notification-card::part(overlay)',
|
8732
|
+
};
|
8733
|
+
|
8704
8734
|
const NotificationCardClass = compose(
|
8705
8735
|
createStyleMixin({
|
8706
8736
|
mappings: {
|
8707
|
-
hostMinWidth: { selector:
|
8737
|
+
hostMinWidth: { selector: selectors.content, property: 'min-width' },
|
8708
8738
|
fontFamily: {},
|
8709
8739
|
fontSize: {},
|
8710
|
-
backgroundColor: { selector:
|
8740
|
+
backgroundColor: { selector: selectors.content },
|
8711
8741
|
textColor: { property: 'color' },
|
8712
8742
|
boxShadow: {},
|
8713
|
-
borderWidth: { selector:
|
8714
|
-
borderColor: { selector:
|
8715
|
-
borderStyle: { selector:
|
8743
|
+
borderWidth: { selector: selectors.content, property: 'border-width' },
|
8744
|
+
borderColor: { selector: selectors.content, property: 'border-color' },
|
8745
|
+
borderStyle: { selector: selectors.content, property: 'border-style' },
|
8716
8746
|
borderRadius: [
|
8717
|
-
{ selector:
|
8718
|
-
{ selector:
|
8747
|
+
{ selector: selectors.content, property: 'border-radius' },
|
8748
|
+
{ selector: selectors.overlay, property: 'border-radius' },
|
8719
8749
|
],
|
8720
8750
|
verticalPadding: [
|
8721
|
-
{ selector:
|
8722
|
-
{ selector:
|
8751
|
+
{ selector: selectors.content, property: 'padding-top' },
|
8752
|
+
{ selector: selectors.content, property: 'padding-bottom' },
|
8723
8753
|
],
|
8724
8754
|
horizontalPadding: [
|
8725
|
-
{ selector:
|
8726
|
-
{ selector:
|
8755
|
+
{ selector: selectors.content, property: 'padding-right' },
|
8756
|
+
{ selector: selectors.content, property: 'padding-left' },
|
8727
8757
|
],
|
8728
8758
|
},
|
8729
8759
|
}),
|
8730
8760
|
notificationCardMixin
|
8731
8761
|
)(
|
8732
8762
|
createProxy({
|
8733
|
-
slots: [
|
8763
|
+
slots: [],
|
8734
8764
|
wrappedEleName: 'vaadin-notification-card',
|
8735
8765
|
style: () => `
|
8736
8766
|
vaadin-notification-card {
|
@@ -8740,6 +8770,24 @@ const NotificationCardClass = compose(
|
|
8740
8770
|
box-shadow: none;
|
8741
8771
|
background: none;
|
8742
8772
|
}
|
8773
|
+
|
8774
|
+
[part="close"] {
|
8775
|
+
cursor: pointer;
|
8776
|
+
display: flex;
|
8777
|
+
}
|
8778
|
+
|
8779
|
+
[part="content"] {
|
8780
|
+
display: flex;
|
8781
|
+
align-items: center;
|
8782
|
+
flex-grow: 1;
|
8783
|
+
}
|
8784
|
+
|
8785
|
+
[part="root"] {
|
8786
|
+
display: flex;
|
8787
|
+
align-items: center;
|
8788
|
+
justify-content: space-between;
|
8789
|
+
width: 100%;
|
8790
|
+
}
|
8743
8791
|
`,
|
8744
8792
|
excludeAttrsSync: ['tabindex'],
|
8745
8793
|
componentName,
|