@everymatrix/helper-pagination 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.
|
@@ -4,6 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-d76910e9.js');
|
|
6
6
|
|
|
7
|
+
const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
|
|
8
|
+
|
|
7
9
|
/**
|
|
8
10
|
* @name setClientStyling
|
|
9
11
|
* @description Method used to create and append to the passed element of the widget a style element with the content received
|
|
@@ -49,18 +51,75 @@ function setClientStylingURL(stylingContainer, clientStylingUrl) {
|
|
|
49
51
|
* @param {HTMLElement} stylingContainer The highest element of the widget
|
|
50
52
|
* @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
|
|
51
53
|
* @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
|
|
54
|
+
* @param {boolean} useAdoptedStyleSheets A flag to gradually enable testing of adoptedStyleSheets
|
|
52
55
|
*/
|
|
53
|
-
function setStreamStyling(stylingContainer, domain, subscription) {
|
|
54
|
-
if (window.emMessageBus)
|
|
55
|
-
const sheet = document.createElement('style');
|
|
56
|
+
function setStreamStyling(stylingContainer, domain, subscription, useAdoptedStyleSheets = false) {
|
|
57
|
+
if (!window.emMessageBus) return;
|
|
56
58
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
59
|
+
const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
|
|
60
|
+
|
|
61
|
+
if (!supportAdoptStyle || !useAdoptedStyleSheets) {
|
|
62
|
+
subscription = getStyleTagSubscription(stylingContainer, domain);
|
|
63
|
+
|
|
64
|
+
return subscription;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
if (!window[StyleCacheKey]) {
|
|
68
|
+
window[StyleCacheKey] = {};
|
|
63
69
|
}
|
|
70
|
+
subscription = getAdoptStyleSubscription(stylingContainer, domain);
|
|
71
|
+
|
|
72
|
+
const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
|
|
73
|
+
const wrappedUnsubscribe = () => {
|
|
74
|
+
if (window[StyleCacheKey][domain]) {
|
|
75
|
+
const cachedObject = window[StyleCacheKey][domain];
|
|
76
|
+
cachedObject.refCount > 1
|
|
77
|
+
? (cachedObject.refCount = cachedObject.refCount - 1)
|
|
78
|
+
: delete window[StyleCacheKey][domain];
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
originalUnsubscribe();
|
|
82
|
+
};
|
|
83
|
+
subscription.unsubscribe = wrappedUnsubscribe;
|
|
84
|
+
|
|
85
|
+
return subscription;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
function getStyleTagSubscription(stylingContainer, domain) {
|
|
89
|
+
const sheet = document.createElement('style');
|
|
90
|
+
|
|
91
|
+
return window.emMessageBus.subscribe(domain, (data) => {
|
|
92
|
+
if (stylingContainer) {
|
|
93
|
+
sheet.innerHTML = data;
|
|
94
|
+
stylingContainer.appendChild(sheet);
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
function getAdoptStyleSubscription(stylingContainer, domain) {
|
|
100
|
+
return window.emMessageBus.subscribe(domain, (data) => {
|
|
101
|
+
if (!stylingContainer) return;
|
|
102
|
+
|
|
103
|
+
const shadowRoot = stylingContainer.getRootNode();
|
|
104
|
+
const cacheStyleObject = window[StyleCacheKey];
|
|
105
|
+
let cachedStyle = cacheStyleObject[domain]?.sheet;
|
|
106
|
+
|
|
107
|
+
if (!cachedStyle) {
|
|
108
|
+
cachedStyle = new CSSStyleSheet();
|
|
109
|
+
cachedStyle.replaceSync(data);
|
|
110
|
+
cacheStyleObject[domain] = {
|
|
111
|
+
sheet: cachedStyle,
|
|
112
|
+
refCount: 1
|
|
113
|
+
};
|
|
114
|
+
} else {
|
|
115
|
+
cacheStyleObject[domain].refCount = cacheStyleObject[domain].refCount + 1;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
const currentSheets = shadowRoot.adoptedStyleSheets || [];
|
|
119
|
+
if (!currentSheets.includes(cachedStyle)) {
|
|
120
|
+
shadowRoot.adoptedStyleSheets = [...currentSheets, cachedStyle];
|
|
121
|
+
}
|
|
122
|
+
});
|
|
64
123
|
}
|
|
65
124
|
|
|
66
125
|
/**
|
|
@@ -244,7 +303,7 @@ const HelperPagination = class {
|
|
|
244
303
|
componentDidLoad() {
|
|
245
304
|
if (this.stylingContainer) {
|
|
246
305
|
if (window.emMessageBus != undefined) {
|
|
247
|
-
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style
|
|
306
|
+
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
|
|
248
307
|
}
|
|
249
308
|
else {
|
|
250
309
|
if (this.clientStyling)
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h } from './index-0483e183.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
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
55
|
+
const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
|
|
56
|
+
|
|
57
|
+
if (!supportAdoptStyle || !useAdoptedStyleSheets) {
|
|
58
|
+
subscription = getStyleTagSubscription(stylingContainer, domain);
|
|
59
|
+
|
|
60
|
+
return subscription;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
if (!window[StyleCacheKey]) {
|
|
64
|
+
window[StyleCacheKey] = {};
|
|
59
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
|
/**
|
|
@@ -240,7 +299,7 @@ const HelperPagination = class {
|
|
|
240
299
|
componentDidLoad() {
|
|
241
300
|
if (this.stylingContainer) {
|
|
242
301
|
if (window.emMessageBus != undefined) {
|
|
243
|
-
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style
|
|
302
|
+
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
|
|
244
303
|
}
|
|
245
304
|
else {
|
|
246
305
|
if (this.clientStyling)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,c as i,h as s}from"./index-0483e183.js";function
|
|
1
|
+
import{r as t,c as i,h as s}from"./index-0483e183.js";const e="__WIDGET_GLOBAL_STYLE_CACHE__";function n(t,i){if(t){const s=document.createElement("style");s.innerHTML=i,t.appendChild(s)}}function a(t,i){if(!t||!i)return;const s=new URL(i);fetch(s.href).then((t=>t.text())).then((i=>{const s=document.createElement("style");s.innerHTML=i,t&&t.appendChild(s)})).catch((t=>{console.error("There was an error while trying to load client styling from URL",t)}))}const o=t=>!!(t.toLowerCase().match(/android/i)||t.toLowerCase().match(/blackberry|bb/i)||t.toLowerCase().match(/iphone|ipad|ipod/i)||t.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i)),h={en:{firstPage:"First",previousPage:"Previous",nextPage:"Next",lastPage:"Last"},ro:{firstPage:"Prima",previousPage:"Anterior",nextPage:"Urmatoarea",lastPage:"Ultima"},fr:{firstPage:"First",previousPage:"Previous",nextPage:"Next",lastPage:"Last"},ar:{firstPage:"First",previousPage:"Previous",nextPage:"Next",lastPage:"Last"},hu:{firstPage:"First",previousPage:"Previous",nextPage:"Következő",lastPage:"Last"},hr:{firstPage:"Prva",previousPage:"Prethodna",nextPage:"Slijedeća",lastPage:"Zadnja"}},r=(t,i)=>h[void 0!==i&&i in h?i:"en"][t],l=class{constructor(s){t(this,s),this.hpPageChange=i(this,"hpPageChange",7),this.userAgent=window.navigator.userAgent,this.currentPage=1,this.navigateTo=t=>{switch(t){case"firstPage":this.offsetInt=0;break;case"lastPage":this.offsetInt=this.endInt*this.limitInt;break;case"previousPage":this.offsetInt-=this.limitInt;break;case"nextPage":this.offsetInt+=this.limitInt;break;case"fivePagesBack":this.offsetInt-=5*this.limitInt,this.offsetInt=this.offsetInt<=0?0:this.offsetInt;break;case"fivePagesForward":this.offsetInt+=5*this.limitInt,this.offsetInt=this.offsetInt/this.limitInt>=this.endInt?this.endInt*this.limitInt:this.offsetInt}this.previousPage=!!this.offsetInt,this.hpPageChange.emit({offset:this.offsetInt,limit:this.limitInt,total:this.totalInt})},this.paginationNavigation=(t,i)=>{this.previousPage=!0,isNaN(t)?0===i&&this.currentPage<=4?this.navigateTo("firstPage"):0===i&&this.currentPage>4?this.navigateTo("fivePagesBack"):4===i&&this.endInt-this.currentPage>=2&&this.navigateTo("fivePagesForward"):1===t?(this.offsetInt=t-1,this.previousPage=!1):this.offsetInt=(t-1)*this.limitInt,this.hpPageChange.emit({offset:this.offsetInt,limit:this.limitInt,total:this.totalInt})},this.nextPage="",this.prevPage="",this.offset=0,this.limit=1,this.total=1,this.language="en",this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.arrowsActive=void 0,this.secondaryArrowsActive=void 0,this.numberedNavActive=void 0,this.offsetInt=void 0,this.lastPage=!1,this.previousPage=!1,this.limitInt=void 0,this.totalInt=void 0,this.pagesArray=[],this.endInt=0}handleClientStylingChange(t,i){t!=i&&n(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,i){t!=i&&this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)}componentWillRender(){this.offsetInt=this.offset,this.limitInt=this.limit,this.currentPage=this.offsetInt/this.limitInt+1,this.limitInt=this.limit,this.totalInt=this.total,this.endInt=Math.ceil(this.totalInt/this.limitInt)-1,this.lastPage=!(this.offsetInt>=this.endInt*this.limitInt),1==this.currentPage||2==this.currentPage?(this.pagesArray=Array.from({length:4},((t,i)=>i+1)),this.pagesArray.push("...")):this.currentPage>=3&&this.endInt-this.currentPage>=2?(this.pagesArray=Array.from({length:3},((t,i)=>this.currentPage+i-1)),this.pagesArray.push("..."),this.pagesArray.unshift("...")):this.endInt-this.currentPage<3&&(this.pagesArray=Array.from({length:4},((t,i)=>this.endInt-2+i)),this.pagesArray.unshift("..."))}componentDidLoad(){this.stylingContainer&&(null!=window.emMessageBus?function(t,i,s,n=!1){if(!window.emMessageBus)return;if(!("adoptedStyleSheets"in Document.prototype)||!n)return function(t,i){const s=document.createElement("style");return window.emMessageBus.subscribe(i,(i=>{t&&(s.innerHTML=i,t.appendChild(s))}))}(t,i);window[e]||(window[e]={});const a=(s=function(t,i){return window.emMessageBus.subscribe(i,(s=>{if(!t)return;const n=t.getRootNode(),a=window[e];let o=a[i]?.sheet;o?a[i].refCount=a[i].refCount+1:(o=new CSSStyleSheet,o.replaceSync(s),a[i]={sheet:o,refCount:1});const h=n.adoptedStyleSheets||[];h.includes(o)||(n.adoptedStyleSheets=[...h,o])}))}(t,i)).unsubscribe.bind(s);s.unsubscribe=()=>{if(window[e][i]){const t=window[e][i];t.refCount>1?t.refCount=t.refCount-1:delete window[e][i]}a()}}(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription):(this.clientStyling&&n(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)))}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}render(){let t=s("ul",{class:"PaginationArea"},this.pagesArray.map(((t,i)=>s("li",{class:"PaginationItem"+(t===this.currentPage?" ActiveItem":" ")+" "+(o(this.userAgent)?"MobileButtons":"")},s("button",{disabled:t===this.currentPage,onClick:this.paginationNavigation.bind(this,t,i)},s("span",null,t)))))),i=s("button",{disabled:!this.prevPage,onClick:this.navigateTo.bind(this,"firstPage")},s("span",{class:"NavigationButton"},r("firstPage",this.language)),s("span",{class:"NavigationIcon"})),e=s("div",{class:"LeftItems"},this.secondaryArrowsActive&&i,s("button",{disabled:!this.prevPage,onClick:this.navigateTo.bind(this,"previousPage")},s("span",{class:"NavigationButton"},r("previousPage",this.language)),s("span",{class:"NavigationIcon"})));o(this.userAgent)&&(e=s("div",{class:"LeftItems"},s("button",{disabled:!this.prevPage,onClick:this.navigateTo.bind(this,"previousPage")},s("span",{class:"NavigationButton"},r("previousPage",this.language)),s("span",{class:"NavigationIcon"}))));let n=s("button",{disabled:!this.nextPage,onClick:this.navigateTo.bind(this,"lastPage")},s("span",{class:"NavigationButton"},r("lastPage",this.language)),s("span",{class:"NavigationIcon"})),a=s("div",{class:"RightItems"},s("button",{disabled:!this.nextPage,onClick:this.navigateTo.bind(this,"nextPage")},s("span",{class:"NavigationButton"},r("nextPage",this.language)),s("span",{class:"NavigationIcon"})),this.secondaryArrowsActive&&n);return o(this.userAgent)&&(a=s("div",{class:"RightItems"},s("button",{disabled:!this.nextPage,onClick:this.navigateTo.bind(this,"nextPage")},s("span",{class:"NavigationButton"},r("nextPage",this.language)),s("span",{class:"NavigationIcon"})))),s("div",{id:"PaginationContainer",ref:t=>this.stylingContainer=t},this.arrowsActive&&e,this.numberedNavActive&&t,this.arrowsActive&&a)}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}}};l.style='@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");:host{display:block;font-family:"Roboto", sans-serif}#PaginationContainer{width:100%;margin:20px 0;display:inline-flex;justify-content:space-between;align-items:center}.LeftItems button:not(:first-child),.RightItems button:not(:last-child){margin:0 10px}.LeftItems button,.RightItems button{padding:0;background-color:#009993;border-color:#009993}.PaginationArea{display:inline-flex;gap:10px;list-style:none}.PaginationArea li{margin:0;padding:0}.PaginationArea li button{width:24px;height:24px;display:flex;border:0;padding:0;justify-content:center;align-items:center;background-color:transparent;color:#000;cursor:pointer;pointer-events:all}.PaginationItem.ActiveItem button{background:#009993;border-color:#009993;color:#fff}.PaginationItem.ActiveItem button:disabled{pointer-events:none;cursor:not-allowed}.PaginationItem button:hover,.PaginationItem button:active{background:#009993;border-color:#009993;color:#fff;opacity:0.8}button{width:100px;height:32px;border:1px solid #524e52;border-radius:5px;background:#524e52;color:#fff;font-size:14px;font:inherit;cursor:pointer;transition:all 0.1s linear;text-transform:uppercase;text-align:center;letter-spacing:0}button:hover,button:active{background:#004D4A;border-color:#004D4A}button:disabled{background-color:#ccc;border-color:#ccc;color:#fff;cursor:not-allowed}@media screen and (max-width: 720px){button{width:90px;font-size:14px}}@media screen and (max-width: 480px){button{width:70px;font-size:14px}.paginationArea{padding:5px}}@media screen and (max-width: 320px){button{width:58px;font-size:12px}.paginationArea{padding:5px;gap:5px}}@media (hover: none){.paginationItem button:hover{background:inherit;border-color:inherit;color:inherit;opacity:1}.paginationItem.activeItem button:hover{background:#009993;border-color:#009993;color:#fff}}';export{l as helper_pagination}
|