@everymatrix/pam-login 1.87.25 → 1.87.27

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.
Files changed (10) hide show
  1. package/dist/cjs/index.cjs.js +1 -1
  2. package/dist/cjs/{pam-login-3c7d882b.js → pam-login-268e2a6d.js} +69 -10
  3. package/dist/cjs/pam-login_2.cjs.entry.js +1 -1
  4. package/dist/esm/index.js +1 -1
  5. package/dist/esm/{pam-login-3272fe7e.js → pam-login-4de76194.js} +69 -10
  6. package/dist/esm/pam-login_2.entry.js +1 -1
  7. package/dist/pam-login/index.esm.js +1 -1
  8. package/dist/pam-login/{pam-login-3272fe7e.js → pam-login-4de76194.js} +110 -110
  9. package/dist/pam-login/pam-login_2.entry.js +1 -1
  10. package/package.json +1 -1
package/dist/cjs/index.cjs.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const pamLogin = require('./pam-login-3c7d882b.js');
5
+ const pamLogin = require('./pam-login-268e2a6d.js');
6
6
  require('./index-c5001c3e.js');
7
7
 
8
8
 
package/dist/cjs/{pam-login-3c7d882b.js → pam-login-268e2a6d.js} RENAMED
@@ -2,6 +2,8 @@
2
2
 
3
3
  const index = require('./index-c5001c3e.js');
4
4
 
5
+ const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
6
+
5
7
  /**
6
8
  * @name setClientStyling
7
9
  * @description Method used to create and append to the passed element of the widget a style element with the content received
@@ -47,18 +49,75 @@ function setClientStylingURL(stylingContainer, clientStylingUrl) {
47
49
  * @param {HTMLElement} stylingContainer The highest element of the widget
48
50
  * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
49
51
  * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
52
+ * @param {boolean} useAdoptedStyleSheets A flag to gradually enable testing of adoptedStyleSheets
50
53
  */
51
- function setStreamStyling(stylingContainer, domain, subscription) {
52
- if (window.emMessageBus) {
53
- const sheet = document.createElement('style');
54
+ function setStreamStyling(stylingContainer, domain, subscription, useAdoptedStyleSheets = false) {
55
+ if (!window.emMessageBus) return;
54
56
 
55
- window.emMessageBus.subscribe(domain, (data) => {
56
- sheet.innerHTML = data;
57
- if (stylingContainer) {
58
- stylingContainer.appendChild(sheet);
59
- }
60
- });
57
+ const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
58
+
59
+ if (!supportAdoptStyle || !useAdoptedStyleSheets) {
60
+ subscription = getStyleTagSubscription(stylingContainer, domain);
61
+
62
+ return subscription;
61
63
  }
64
+
65
+ if (!window[StyleCacheKey]) {
66
+ window[StyleCacheKey] = {};
67
+ }
68
+ subscription = getAdoptStyleSubscription(stylingContainer, domain);
69
+
70
+ const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
71
+ const wrappedUnsubscribe = () => {
72
+ if (window[StyleCacheKey][domain]) {
73
+ const cachedObject = window[StyleCacheKey][domain];
74
+ cachedObject.refCount > 1
75
+ ? (cachedObject.refCount = cachedObject.refCount - 1)
76
+ : delete window[StyleCacheKey][domain];
77
+ }
78
+
79
+ originalUnsubscribe();
80
+ };
81
+ subscription.unsubscribe = wrappedUnsubscribe;
82
+
83
+ return subscription;
84
+ }
85
+
86
+ function getStyleTagSubscription(stylingContainer, domain) {
87
+ const sheet = document.createElement('style');
88
+
89
+ return window.emMessageBus.subscribe(domain, (data) => {
90
+ if (stylingContainer) {
91
+ sheet.innerHTML = data;
92
+ stylingContainer.appendChild(sheet);
93
+ }
94
+ });
95
+ }
96
+
97
+ function getAdoptStyleSubscription(stylingContainer, domain) {
98
+ return window.emMessageBus.subscribe(domain, (data) => {
99
+ if (!stylingContainer) return;
100
+
101
+ const shadowRoot = stylingContainer.getRootNode();
102
+ const cacheStyleObject = window[StyleCacheKey];
103
+ let cachedStyle = cacheStyleObject[domain]?.sheet;
104
+
105
+ if (!cachedStyle) {
106
+ cachedStyle = new CSSStyleSheet();
107
+ cachedStyle.replaceSync(data);
108
+ cacheStyleObject[domain] = {
109
+ sheet: cachedStyle,
110
+ refCount: 1
111
+ };
112
+ } else {
113
+ cacheStyleObject[domain].refCount = cacheStyleObject[domain].refCount + 1;
114
+ }
115
+
116
+ const currentSheets = shadowRoot.adoptedStyleSheets || [];
117
+ if (!currentSheets.includes(cachedStyle)) {
118
+ shadowRoot.adoptedStyleSheets = [...currentSheets, cachedStyle];
119
+ }
120
+ });
62
121
  }
63
122
 
64
123
  const DEFAULT_LANGUAGE = 'en';
@@ -22608,7 +22667,7 @@ const PamLogin = class {
22608
22667
  componentDidLoad() {
22609
22668
  if (this.stylingContainer) {
22610
22669
  if (window.emMessageBus != undefined) {
22611
- setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
22670
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
22612
22671
  }
22613
22672
  else {
22614
22673
  if (this.clientStyling)
package/dist/cjs/pam-login_2.cjs.entry.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const pamLogin = require('./pam-login-3c7d882b.js');
5
+ const pamLogin = require('./pam-login-268e2a6d.js');
6
6
  const index = require('./index-c5001c3e.js');
7
7
 
8
8
  const uiSkeletonCss = ":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.SkeletonRectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 10px)}.SkeletonCircle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.SkeletonText{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.SkeletonText:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.SkeletonTitle{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 10px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.SkeletonImage{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, unset)}.SkeletonLogo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}";
package/dist/esm/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export { P as PamLogin } from './pam-login-3272fe7e.js';
1
+ export { P as PamLogin } from './pam-login-4de76194.js';
2
2
  import './index-a126c540.js';
package/dist/esm/{pam-login-3272fe7e.js → pam-login-4de76194.js} RENAMED
@@ -1,5 +1,7 @@
1
1
  import { r as registerInstance, h as h$2 } from './index-a126c540.js';
2
2
 
3
+ const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
4
+
3
5
  /**
4
6
  * @name setClientStyling
5
7
  * @description Method used to create and append to the passed element of the widget a style element with the content received
@@ -45,18 +47,75 @@ function setClientStylingURL(stylingContainer, clientStylingUrl) {
45
47
  * @param {HTMLElement} stylingContainer The highest element of the widget
46
48
  * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
47
49
  * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
50
+ * @param {boolean} useAdoptedStyleSheets A flag to gradually enable testing of adoptedStyleSheets
48
51
  */
49
- function setStreamStyling(stylingContainer, domain, subscription) {
50
- if (window.emMessageBus) {
51
- const sheet = document.createElement('style');
52
+ function setStreamStyling(stylingContainer, domain, subscription, useAdoptedStyleSheets = false) {
53
+ if (!window.emMessageBus) return;
52
54
 
53
- window.emMessageBus.subscribe(domain, (data) => {
54
- sheet.innerHTML = data;
55
- if (stylingContainer) {
56
- stylingContainer.appendChild(sheet);
57
- }
58
- });
55
+ const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
56
+
57
+ if (!supportAdoptStyle || !useAdoptedStyleSheets) {
58
+ subscription = getStyleTagSubscription(stylingContainer, domain);
59
+
60
+ return subscription;
59
61
  }
62
+
63
+ if (!window[StyleCacheKey]) {
64
+ window[StyleCacheKey] = {};
65
+ }
66
+ subscription = getAdoptStyleSubscription(stylingContainer, domain);
67
+
68
+ const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
69
+ const wrappedUnsubscribe = () => {
70
+ if (window[StyleCacheKey][domain]) {
71
+ const cachedObject = window[StyleCacheKey][domain];
72
+ cachedObject.refCount > 1
73
+ ? (cachedObject.refCount = cachedObject.refCount - 1)
74
+ : delete window[StyleCacheKey][domain];
75
+ }
76
+
77
+ originalUnsubscribe();
78
+ };
79
+ subscription.unsubscribe = wrappedUnsubscribe;
80
+
81
+ return subscription;
82
+ }
83
+
84
+ function getStyleTagSubscription(stylingContainer, domain) {
85
+ const sheet = document.createElement('style');
86
+
87
+ return window.emMessageBus.subscribe(domain, (data) => {
88
+ if (stylingContainer) {
89
+ sheet.innerHTML = data;
90
+ stylingContainer.appendChild(sheet);
91
+ }
92
+ });
93
+ }
94
+
95
+ function getAdoptStyleSubscription(stylingContainer, domain) {
96
+ return window.emMessageBus.subscribe(domain, (data) => {
97
+ if (!stylingContainer) return;
98
+
99
+ const shadowRoot = stylingContainer.getRootNode();
100
+ const cacheStyleObject = window[StyleCacheKey];
101
+ let cachedStyle = cacheStyleObject[domain]?.sheet;
102
+
103
+ if (!cachedStyle) {
104
+ cachedStyle = new CSSStyleSheet();
105
+ cachedStyle.replaceSync(data);
106
+ cacheStyleObject[domain] = {
107
+ sheet: cachedStyle,
108
+ refCount: 1
109
+ };
110
+ } else {
111
+ cacheStyleObject[domain].refCount = cacheStyleObject[domain].refCount + 1;
112
+ }
113
+
114
+ const currentSheets = shadowRoot.adoptedStyleSheets || [];
115
+ if (!currentSheets.includes(cachedStyle)) {
116
+ shadowRoot.adoptedStyleSheets = [...currentSheets, cachedStyle];
117
+ }
118
+ });
60
119
  }
61
120
 
62
121
  const DEFAULT_LANGUAGE = 'en';
@@ -22606,7 +22665,7 @@ const PamLogin = class {
22606
22665
  componentDidLoad() {
22607
22666
  if (this.stylingContainer) {
22608
22667
  if (window.emMessageBus != undefined) {
22609
- setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
22668
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
22610
22669
  }
22611
22670
  else {
22612
22671
  if (this.clientStyling)
package/dist/esm/pam-login_2.entry.js CHANGED
@@ -1,4 +1,4 @@
1
- export { P as pam_login } from './pam-login-3272fe7e.js';
1
+ export { P as pam_login } from './pam-login-4de76194.js';
2
2
  import { r as registerInstance, h, H as Host } from './index-a126c540.js';
3
3
 
4
4
  const uiSkeletonCss = ":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.SkeletonRectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 10px)}.SkeletonCircle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.SkeletonText{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.SkeletonText:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.SkeletonTitle{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 10px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.SkeletonImage{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, unset)}.SkeletonLogo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}";
package/dist/pam-login/index.esm.js CHANGED
@@ -1 +1 @@
1
- export{P as PamLogin}from"./pam-login-3272fe7e.js";import"./index-a126c540.js";
1
+ export{P as PamLogin}from"./pam-login-4de76194.js";import"./index-a126c540.js";