sf-i-events 1.0.753 → 1.0.754

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sf-i-events",
   "private": false,
-  "version": "1.0.753",
+  "version": "1.0.754",
   "description": "Superflows Navigation Component",
   "main": "sf-i-events.js",
   "module": "sf-i-events.js",

package/sf-i-events.js

@@ -2138,14 +2138,14 @@ let SfIEvents = class SfIEvents extends LitElement {
             var html = '';
             html += '<div class="mb-20 stream-event-list" part="stream-event-list-charts">';
             html += '<div class="align-center d-flex flex-wrap align-start justify-between mb-10 w-100-m-0" part="duration-title-container"><h4 part="duration-title" class="m-0">' + parametersTitle + '</h4>';
-            if (this.getFeatures().length > 0) {
+            if (this.getFeatures().length > 1) {
                 html += '<div class="filter-button-container"><button part="button-icon" id="filter-button" class="material-icons">filter_list</button>';
                 html += '<div id="filter-list-container" class="filter-list-container hide flex-col justify-center align-start p-10" part="filter-list-container" anchor="filter-button">';
-                html += `<div class="filter-input-container d-flex"><input class="input-select-feature-all" type="checkbox" ${this.selectedFeatures.length >= (this.getFeatures().length) ? 'checked' : ''} id="input-select-feature-all"  part="input-select-feature" name="all"></input><label for="input-select-feature-all" class="input-select-feature-label"  part="input-sellect-feature-label">all</label></div>`;
-                // html += `<div class="filter-input-container d-flex"><input class="input-select-feature-compliances" type="checkbox" ${this.selectedFeatures.indexOf('compliances') >= 0 ? 'checked' : ''} id="input-select-feature-compliances"  part="input-select-feature" name="compliances"></input><label for="input-select-feature-compliances" class="input-select-feature-label"  part="input-sellect-feature-label">compliances</label></div>`
+                html += `<div class="filter-input-container d-flex"><input class="input-select-feature-all" type="checkbox" ${this.selectedFeatures.length >= (this.getFeatures().length) ? 'checked' : ''} id="input-select-feature-all"  part="input-select-feature" name="all"></input><label for="input-select-feature-all" class="input-select-feature-label"  part="input-select-feature-label">all</label></div>`;
+                // html += `<div class="filter-input-container d-flex"><input class="input-select-feature-compliances" type="checkbox" ${this.selectedFeatures.indexOf('compliances') >= 0 ? 'checked' : ''} id="input-select-feature-compliances"  part="input-select-feature" name="compliances"></input><label for="input-select-feature-compliances" class="input-select-feature-label"  part="input-select-feature-label">compliances</label></div>`
                 for (let [index, feature] of this.getFeatures().entries()) {
                     console.log('rendering features', feature, this.selectedFeatures);
-                    html += `<div class="filter-input-container d-flex"><input class="input-select-feature" type="checkbox" ${this.selectedFeatures.indexOf(feature) >= 0 ? 'checked' : ''} id="input-select-feature-${index}"  part="input-select-feature" name="${feature}"></input><label for="input-select-feature-${index}" class="input-select-feature-label"  part="input-sellect-feature-label">${feature}</label></div>`;
+                    html += `<div class="filter-input-container d-flex"><input class="input-select-feature" type="checkbox" ${this.selectedFeatures.indexOf(feature) >= 0 ? 'checked' : ''} id="input-select-feature-${index}"  part="input-select-feature" name="${feature}"></input><label for="input-select-feature-${index}" class="input-select-feature-label"  part="input-select-feature-label">${feature}</label></div>`;
                 }
                 html += '</div></div>';
             }
@@ -20381,6 +20381,10 @@ SfIEvents.styles = css `
       border-radius: 5px
     }
 
+    .filter-button-container{
+      position: relative;
+    }
+
     @media (orientation: landscape) {
 
       .lb {

package/src/sf-i-events.ts

@@ -2650,6 +2650,10 @@ export class SfIEvents extends LitElement {
       border-radius: 5px
     }
 
+    .filter-button-container{
+      position: relative;
+    }
+
     @media (orientation: landscape) {
 
       .lb {
@@ -4228,14 +4232,14 @@ export class SfIEvents extends LitElement {
 
     html += '<div class="mb-20 stream-event-list" part="stream-event-list-charts">';
       html += '<div class="align-center d-flex flex-wrap align-start justify-between mb-10 w-100-m-0" part="duration-title-container"><h4 part="duration-title" class="m-0">' + parametersTitle + '</h4>'
-      if(this.getFeatures().length > 0){
+      if(this.getFeatures().length > 1){
         html += '<div class="filter-button-container"><button part="button-icon" id="filter-button" class="material-icons">filter_list</button>'
         html += '<div id="filter-list-container" class="filter-list-container hide flex-col justify-center align-start p-10" part="filter-list-container" anchor="filter-button">'
-        html += `<div class="filter-input-container d-flex"><input class="input-select-feature-all" type="checkbox" ${this.selectedFeatures.length >= (this.getFeatures().length) ? 'checked' : ''} id="input-select-feature-all"  part="input-select-feature" name="all"></input><label for="input-select-feature-all" class="input-select-feature-label"  part="input-sellect-feature-label">all</label></div>`
-        // html += `<div class="filter-input-container d-flex"><input class="input-select-feature-compliances" type="checkbox" ${this.selectedFeatures.indexOf('compliances') >= 0 ? 'checked' : ''} id="input-select-feature-compliances"  part="input-select-feature" name="compliances"></input><label for="input-select-feature-compliances" class="input-select-feature-label"  part="input-sellect-feature-label">compliances</label></div>`
+        html += `<div class="filter-input-container d-flex"><input class="input-select-feature-all" type="checkbox" ${this.selectedFeatures.length >= (this.getFeatures().length) ? 'checked' : ''} id="input-select-feature-all"  part="input-select-feature" name="all"></input><label for="input-select-feature-all" class="input-select-feature-label"  part="input-select-feature-label">all</label></div>`
+        // html += `<div class="filter-input-container d-flex"><input class="input-select-feature-compliances" type="checkbox" ${this.selectedFeatures.indexOf('compliances') >= 0 ? 'checked' : ''} id="input-select-feature-compliances"  part="input-select-feature" name="compliances"></input><label for="input-select-feature-compliances" class="input-select-feature-label"  part="input-select-feature-label">compliances</label></div>`
         for(let [index,feature] of this.getFeatures().entries()){
           console.log('rendering features', feature, this.selectedFeatures);
-          html += `<div class="filter-input-container d-flex"><input class="input-select-feature" type="checkbox" ${this.selectedFeatures.indexOf(feature) >= 0 ? 'checked' : ''} id="input-select-feature-${index}"  part="input-select-feature" name="${feature}"></input><label for="input-select-feature-${index}" class="input-select-feature-label"  part="input-sellect-feature-label">${feature}</label></div>`
+          html += `<div class="filter-input-container d-flex"><input class="input-select-feature" type="checkbox" ${this.selectedFeatures.indexOf(feature) >= 0 ? 'checked' : ''} id="input-select-feature-${index}"  part="input-select-feature" name="${feature}"></input><label for="input-select-feature-${index}" class="input-select-feature-label"  part="input-select-feature-label">${feature}</label></div>`
         }
         html += '</div></div>'
       }