@everymatrix/helper-filters 0.1.5 → 0.1.20

package/dist/cjs/{index-0c5bb1ff.js → index-4be1aa12.js}

@@ -263,6 +263,12 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
             classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
         }
+        else if (memberName === 'ref') {
+            // minifier will clean this up
+            if (newValue) {
+                newValue(elm);
+            }
+        }
         else if ((!isProp ) &&
             memberName[0] === 'o' &&
             memberName[1] === 'n') {
@@ -419,6 +425,7 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
     for (; startIdx <= endIdx; ++startIdx) {
         if ((vnode = vnodes[startIdx])) {
             elm = vnode.$elm$;
+            callNodeRefs(vnode);
             // remove the vnode's element from the dom
             elm.remove();
         }
@@ -502,11 +509,14 @@ const patch = (oldVNode, newVNode) => {
     const elm = (newVNode.$elm$ = oldVNode.$elm$);
     const oldChildren = oldVNode.$children$;
     const newChildren = newVNode.$children$;
+    const tag = newVNode.$tag$;
     const text = newVNode.$text$;
     if (text === null) {
         // element node
         {
-            {
+            if (tag === 'slot')
+                ;
+            else {
                 // either this is the first render of an element OR it's an update
                 // AND we already know it's possible it could have changed
                 // this updates the element's css classes, attrs, props, listeners, etc.
@@ -537,11 +547,22 @@ const patch = (oldVNode, newVNode) => {
         elm.data = text;
     }
 };
+const callNodeRefs = (vNode) => {
+    {
+        vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
+        vNode.$children$ && vNode.$children$.map(callNodeRefs);
+    }
+};
 const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
+    const cmpMeta = hostRef.$cmpMeta$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
     const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
     hostTagName = hostElm.tagName;
+    if (cmpMeta.$attrsToReflect$) {
+        rootVnode.$attrs$ = rootVnode.$attrs$ || {};
+        cmpMeta.$attrsToReflect$.map(([propName, attribute]) => (rootVnode.$attrs$[attribute] = hostElm[propName]));
+    }
     rootVnode.$tag$ = null;
     rootVnode.$flags$ |= 4 /* isHost */;
     hostRef.$vnode$ = rootVnode;
@@ -892,6 +913,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                 .map(([propName, m]) => {
                 const attrName = m[1] || propName;
                 attrNameToPropName.set(attrName, propName);
+                if (m[0] & 512 /* ReflectAttr */) {
+                    cmpMeta.$attrsToReflect$.push([propName, attrName]);
+                }
                 return attrName;
             });
         }
@@ -1052,6 +1076,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             {
                 cmpMeta.$listeners$ = compactMeta[3];
             }
+            {
+                cmpMeta.$attrsToReflect$ = [];
+            }
             const tagName = cmpMeta.$tagName$;
             const HostElement = class extends HTMLElement {
                 // StencilLazyHost

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0c5bb1ff.js');
+const index = require('./index-4be1aa12.js');
 
 /*
  Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["helper-filters.cjs",[[1,"helper-filters",{"showFilterId":[4,"show-filter-id"],"activateTicketSearch":[4,"activate-ticket-search"],"gameId":[1,"game-id"],"playerId":[1,"player-id"],"session":[1],"postMessage":[4,"post-message"],"language":[1],"showFilterModal":[32],"showClearButton":[32],"filterData":[32],"filterDataReset":[32]},[[0,"modalCloseEvent","modalCloseEvent"]]]]]], options);
+  return index.bootstrapLazy([["helper-filters_2.cjs",[[1,"helper-filters",{"showFilterId":[4,"show-filter-id"],"activateTicketSearch":[4,"activate-ticket-search"],"gameId":[1,"game-id"],"playerId":[1,"player-id"],"session":[1],"postMessage":[4,"post-message"],"language":[1],"quickFiltersActive":[4,"quick-filters-active"],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"showFilterModal":[32],"showClearButton":[32],"filterData":[32],"filterDataReset":[32],"limitStylingAppends":[32]},[[0,"modalCloseEvent","modalCloseEvent"]]],[1,"helper-modal",{"titleModal":[1,"title-modal"],"visible":[1540]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -7,6 +7,13 @@
     "version": "2.15.2",
     "typescriptVersion": "4.5.4"
   },
-  "collections": [],
+  "collections": [
+    {
+      "name": "@everymatrix/helper-modal",
+      "tags": [
+        "helper-modal"
+      ]
+    }
+  ],
   "bundles": []
 }

package/dist/collection/components/helper-filters/helper-filters.js

@@ -32,28 +32,56 @@ export class HelperFilters {
      * Language
      */
     this.language = 'en';
+    /**
+     * Notifies if the quick filters from tickets are active
+     */
+    this.quickFiltersActive = false;
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
     this.showFilterModal = false;
     this.showClearButton = false;
     this.filterData = {};
     this.filterDataReset = { ticketDrawId: '', filterFromCalendar: '', filterToCalendar: '' };
+    this.limitStylingAppends = false;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let cssFile = document.createElement('style');
+      setTimeout(() => {
+        cssFile.innerHTML = this.clientStylingUrlContent;
+        this.stylingContainer.prepend(cssFile);
+      }, 1);
+    };
   }
   // reset field values each time the filter modal opens
   componentDidRender() {
-    this.filterData.ticketDrawId = null;
-    this.filterData.filterFromCalendar = null;
-    this.filterData.filterToCalendar = null;
     // @TODO: to way binding?
     if (document.getElementById('#FilterById'))
       document.getElementById('#FilterById').value = '';
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrlContent)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
   }
   filterSelectionHandler(event) {
     if (this.postMessage)
       window.postMessage({ type: 'filterSelection', event }, window.location.href);
-    if (this.filterData.ticketDrawId)
-      this.filterDraw.emit(event);
-    if (this.filterData.filterFromCalendar || this.filterData.filterToCalendar)
+    if (this.filterData.ticketDrawId || this.filterData.filterFromCalendar || this.filterData.filterToCalendar)
       this.filterSelection.emit(event);
-    ;
   }
   filterSelectionResetHandler(event) {
     if (this.postMessage)
@@ -88,11 +116,14 @@ export class HelperFilters {
     this.filterData.filterToCalendar = new Date(event.target.value).toISOString();
   }
   render() {
-    return (h("div", { class: "HelperFilters" },
+    return (h("div", { class: "HelperFilters", ref: el => this.stylingContainer = el },
       h("div", { class: "FilterButtonsWrapper" },
         h("button", { class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate('filterOpen', this.language)),
-        this.showClearButton ? h("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate('filterClear', this.language)) : null),
-      h("helper-modal", { "title-modal": "Filter Modal", visible: this.showFilterModal },
+        (this.showClearButton || this.quickFiltersActive) ?
+          h("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate('filterClear', this.language))
+          :
+            null),
+      h("helper-modal", { "title-modal": "Filter Modal", visible: this.showFilterModal, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent },
         h("div", { class: "FilterModalHeader" },
           h("h3", { class: "FilterModalTitle" }, this.activateTicketSearch ? translate('filterModalTicketTitle', this.language) : translate('filterModalDrawTitle', this.language))),
         h("div", { class: "FilterModalBody" },
@@ -238,13 +269,68 @@ export class HelperFilters {
       "attribute": "language",
       "reflect": false,
       "defaultValue": "'en'"
+    },
+    "quickFiltersActive": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Notifies if the quick filters from tickets are active"
+      },
+      "attribute": "quick-filters-active",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "clientStyling": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via string"
+      },
+      "attribute": "client-styling",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "clientStylingUrlContent": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via url content"
+      },
+      "attribute": "client-styling-url-content",
+      "reflect": false,
+      "defaultValue": "''"
     }
   }; }
   static get states() { return {
     "showFilterModal": {},
     "showClearButton": {},
     "filterData": {},
-    "filterDataReset": {}
+    "filterDataReset": {},
+    "limitStylingAppends": {}
   }; }
   static get events() { return [{
       "method": "filterDraw",