@descope/web-components-ui 1.0.229 → 1.0.231
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +74 -47
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +65 -23
- 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 -24
- package/src/components/descope-notification/descope-notification-card/NotificationCardClass.js +61 -13
- package/src/theme/components/notificationCard.js +1 -4
package/dist/cjs/index.cjs.js
CHANGED
@@ -3,7 +3,6 @@
|
|
3
3
|
var merge = require('lodash.merge');
|
4
4
|
var set = require('lodash.set');
|
5
5
|
var Color = require('color');
|
6
|
-
require('@vaadin/notification');
|
7
6
|
|
8
7
|
const DESCOPE_PREFIX = 'descope';
|
9
8
|
const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
|
@@ -4274,14 +4273,14 @@ class RawLink extends createBaseClass({ componentName: componentName$m, baseSele
|
|
4274
4273
|
}
|
4275
4274
|
}
|
4276
4275
|
|
4277
|
-
const selectors$
|
4276
|
+
const selectors$2 = {
|
4278
4277
|
host: { selector: () => ':host' },
|
4279
4278
|
anchor: {},
|
4280
4279
|
wrapper: { selector: () => ':host > div' },
|
4281
4280
|
text: { selector: () => TextClass.componentName },
|
4282
4281
|
};
|
4283
4282
|
|
4284
|
-
const { anchor, text: text$1, host: host$a, wrapper: wrapper$1 } = selectors$
|
4283
|
+
const { anchor, text: text$1, host: host$a, wrapper: wrapper$1 } = selectors$2;
|
4285
4284
|
|
4286
4285
|
const LinkClass = compose(
|
4287
4286
|
createStyleMixin({
|
@@ -4725,12 +4724,12 @@ class RawLoaderLinear extends createBaseClass({ componentName: componentName$i,
|
|
4725
4724
|
}
|
4726
4725
|
}
|
4727
4726
|
|
4728
|
-
const selectors = {
|
4727
|
+
const selectors$1 = {
|
4729
4728
|
after: { selector: '::after' },
|
4730
4729
|
host: { selector: () => ':host' },
|
4731
4730
|
};
|
4732
4731
|
|
4733
|
-
const { after, host: host$7 } = selectors;
|
4732
|
+
const { after, host: host$7 } = selectors$1;
|
4734
4733
|
|
4735
4734
|
const LoaderLinearClass = compose(
|
4736
4735
|
createStyleMixin({
|
@@ -8357,7 +8356,7 @@ const notificationCardMixin = (superclass) =>
|
|
8357
8356
|
// if animation is not applied to the element, the node will not be removed
|
8358
8357
|
// from the DOM. We should avoid that. So, if in any case we allow
|
8359
8358
|
// customizing the animation - we should check if animation is applied
|
8360
|
-
// and if it's not applied - remove the
|
8359
|
+
// and if it's not applied - remove the element from the DOM and dispatch
|
8361
8360
|
// `card-closed` event.
|
8362
8361
|
this.baseElement.addEventListener('animationend', () => {
|
8363
8362
|
this.remove();
|
@@ -8366,38 +8365,68 @@ const notificationCardMixin = (superclass) =>
|
|
8366
8365
|
|
8367
8366
|
this.setAttribute('opened', 'false');
|
8368
8367
|
}
|
8368
|
+
|
8369
|
+
constructor() {
|
8370
|
+
super();
|
8371
|
+
|
8372
|
+
this.baseElement.innerHTML = `
|
8373
|
+
<div part="root">
|
8374
|
+
<div part="content">
|
8375
|
+
<slot></slot>
|
8376
|
+
</div>
|
8377
|
+
<div part="close">
|
8378
|
+
<slot name="close"></slot>
|
8379
|
+
</div>
|
8380
|
+
</div>
|
8381
|
+
`;
|
8382
|
+
|
8383
|
+
this.closeEle = this.shadowRoot.querySelector('[part="close"]');
|
8384
|
+
}
|
8385
|
+
|
8386
|
+
init() {
|
8387
|
+
super.init?.();
|
8388
|
+
|
8389
|
+
this.closeEle.onclick = () => {
|
8390
|
+
this.close();
|
8391
|
+
};
|
8392
|
+
}
|
8369
8393
|
};
|
8370
8394
|
|
8395
|
+
const selectors = {
|
8396
|
+
content: () => 'vaadin-notification-card::part(content)',
|
8397
|
+
overlay: () => 'vaadin-notification-card::part(overlay)',
|
8398
|
+
};
|
8399
|
+
|
8371
8400
|
const NotificationCardClass = compose(
|
8372
8401
|
createStyleMixin({
|
8373
8402
|
mappings: {
|
8374
|
-
hostMinWidth: { selector:
|
8403
|
+
hostMinWidth: { selector: selectors.content, property: 'min-width' },
|
8375
8404
|
fontFamily: {},
|
8376
8405
|
fontSize: {},
|
8377
|
-
backgroundColor: { selector:
|
8406
|
+
backgroundColor: { selector: selectors.content },
|
8378
8407
|
textColor: { property: 'color' },
|
8379
8408
|
boxShadow: {},
|
8380
|
-
borderWidth: { selector:
|
8381
|
-
borderColor: { selector:
|
8382
|
-
borderStyle: { selector:
|
8409
|
+
borderWidth: { selector: selectors.content, property: 'border-width' },
|
8410
|
+
borderColor: { selector: selectors.content, property: 'border-color' },
|
8411
|
+
borderStyle: { selector: selectors.content, property: 'border-style' },
|
8383
8412
|
borderRadius: [
|
8384
|
-
{ selector:
|
8385
|
-
{ selector:
|
8413
|
+
{ selector: selectors.content, property: 'border-radius' },
|
8414
|
+
{ selector: selectors.overlay, property: 'border-radius' },
|
8386
8415
|
],
|
8387
8416
|
verticalPadding: [
|
8388
|
-
{ selector:
|
8389
|
-
{ selector:
|
8417
|
+
{ selector: selectors.content, property: 'padding-top' },
|
8418
|
+
{ selector: selectors.content, property: 'padding-bottom' },
|
8390
8419
|
],
|
8391
8420
|
horizontalPadding: [
|
8392
|
-
{ selector:
|
8393
|
-
{ selector:
|
8421
|
+
{ selector: selectors.content, property: 'padding-right' },
|
8422
|
+
{ selector: selectors.content, property: 'padding-left' },
|
8394
8423
|
],
|
8395
8424
|
},
|
8396
8425
|
}),
|
8397
8426
|
notificationCardMixin
|
8398
8427
|
)(
|
8399
8428
|
createProxy({
|
8400
|
-
slots: [
|
8429
|
+
slots: [],
|
8401
8430
|
wrappedEleName: 'vaadin-notification-card',
|
8402
8431
|
style: () => `
|
8403
8432
|
vaadin-notification-card {
|
@@ -8407,14 +8436,30 @@ const NotificationCardClass = compose(
|
|
8407
8436
|
box-shadow: none;
|
8408
8437
|
background: none;
|
8409
8438
|
}
|
8439
|
+
|
8440
|
+
[part="close"] {
|
8441
|
+
cursor: pointer;
|
8442
|
+
display: flex;
|
8443
|
+
}
|
8444
|
+
|
8445
|
+
[part="content"] {
|
8446
|
+
display: flex;
|
8447
|
+
align-items: center;
|
8448
|
+
flex-grow: 1;
|
8449
|
+
}
|
8450
|
+
|
8451
|
+
[part="root"] {
|
8452
|
+
display: flex;
|
8453
|
+
align-items: center;
|
8454
|
+
justify-content: space-between;
|
8455
|
+
width: 100%;
|
8456
|
+
}
|
8410
8457
|
`,
|
8411
8458
|
excludeAttrsSync: ['tabindex'],
|
8412
8459
|
componentName: componentName$2,
|
8413
8460
|
})
|
8414
8461
|
);
|
8415
8462
|
|
8416
|
-
customElements.define(componentName$2, NotificationCardClass);
|
8417
|
-
|
8418
8463
|
const globalRefs = getThemeRefs(globals);
|
8419
8464
|
const vars$1 = NotificationCardClass.cssVarList;
|
8420
8465
|
|
@@ -8429,10 +8474,7 @@ const notification = {
|
|
8429
8474
|
[vars$1.boxShadow]: `${globalRefs.shadow.wide.xl} ${shadowColor}, ${globalRefs.shadow.narrow.xl} ${shadowColor}`,
|
8430
8475
|
[vars$1.verticalPadding]: '0.45em',
|
8431
8476
|
[vars$1.horizontalPadding]: '1em',
|
8432
|
-
[vars$1.verticalMargin]: '1em',
|
8433
|
-
[vars$1.horizontalMargin]: '1em',
|
8434
8477
|
[vars$1.borderRadius]: globalRefs.radius.md,
|
8435
|
-
[vars$1.contentSpacing]: '0.5em',
|
8436
8478
|
|
8437
8479
|
_bordered: {
|
8438
8480
|
[vars$1.borderWidth]: globalRefs.border.sm,
|
@@ -8699,7 +8741,7 @@ const NotificationMixin = (superclass) =>
|
|
8699
8741
|
if (!NotificationMixinClass._container.isConnected) {
|
8700
8742
|
// Then, we're adding the container to the parentNode, which is the desired location
|
8701
8743
|
// for us on the DOM
|
8702
|
-
that.parentNode.appendChild(NotificationMixinClass._container);
|
8744
|
+
setTimeout(() => that.parentNode.appendChild(NotificationMixinClass._container));
|
8703
8745
|
}
|
8704
8746
|
|
8705
8747
|
return NotificationMixinClass._container;
|
@@ -8712,13 +8754,12 @@ const NotificationMixin = (superclass) =>
|
|
8712
8754
|
},
|
8713
8755
|
});
|
8714
8756
|
|
8715
|
-
// we want to replace the card with vaadin's notification
|
8716
|
-
|
8717
|
-
|
8718
|
-
|
8719
|
-
|
8720
|
-
|
8721
|
-
};
|
8757
|
+
// we want to replace the card with vaadin's remove notification so it will not throw
|
8758
|
+
this.baseElement._removeNotificationCard = this.close.bind(this);
|
8759
|
+
}
|
8760
|
+
|
8761
|
+
close() {
|
8762
|
+
this.#card.close();
|
8722
8763
|
}
|
8723
8764
|
|
8724
8765
|
init() {
|
@@ -8734,8 +8775,9 @@ const NotificationMixin = (superclass) =>
|
|
8734
8775
|
};
|
8735
8776
|
}
|
8736
8777
|
|
8778
|
+
// eslint-disable-next-line class-methods-use-this
|
8737
8779
|
get isContainerEmpty() {
|
8738
|
-
return !
|
8780
|
+
return !NotificationMixinClass._container.children.length;
|
8739
8781
|
}
|
8740
8782
|
|
8741
8783
|
// eslint-disable-next-line class-methods-use-this
|
@@ -8754,21 +8796,6 @@ const NotificationMixin = (superclass) =>
|
|
8754
8796
|
this.#card = document.createElement('descope-notification-card');
|
8755
8797
|
this.#card.addEventListener('card-closed', this.removeNotification.bind(this));
|
8756
8798
|
}
|
8757
|
-
|
8758
|
-
// animatedRemoveNotificationCard() {
|
8759
|
-
// const vaadinCard = this.baseElement._card.shadowRoot.querySelector('vaadin-notification-card');
|
8760
|
-
// vaadinCard.setAttribute('closing', '');
|
8761
|
-
// const name = getComputedStyle(vaadinCard).getPropertyValue('animation-name');
|
8762
|
-
// if (name && name !== 'none') {
|
8763
|
-
// const listener = () => {
|
8764
|
-
// this._removeNotificationCard();
|
8765
|
-
// vaadinCard.removeEventListener('animationend', listener);
|
8766
|
-
// };
|
8767
|
-
// vaadinCard.addEventListener('animationend', listener);
|
8768
|
-
// } else {
|
8769
|
-
// this._removeNotificationCard();
|
8770
|
-
// }
|
8771
|
-
// }
|
8772
8799
|
};
|
8773
8800
|
|
8774
8801
|
const NotificationClass = compose(
|