@sankhyalabs/sankhyablocks 5.5.0 → 5.7.0

package/dist/collection/components/snk-filter-bar/filter-item/editors/enum/presentationMode.js

@@ -0,0 +1,5 @@
+export var EPresentationMode;
+(function (EPresentationMode) {
+  EPresentationMode[EPresentationMode["CHIP"] = 0] = "CHIP";
+  EPresentationMode[EPresentationMode["MODAL"] = 1] = "MODAL";
+})(EPresentationMode || (EPresentationMode = {}));

package/dist/collection/components/snk-filter-bar/filter-item/editors/snk-filter-binary-select.js

@@ -1,10 +1,12 @@
 import { ElementIDUtils } from '@sankhyalabs/core';
 import { h, Host } from '@stencil/core';
 import FilterItemType from '../filter-item-type.enum';
+import { EPresentationMode } from './enum/presentationMode';
 export class SnkFilterBinarySelect {
   constructor() {
     this.value = undefined;
     this.config = undefined;
+    this.presentationMode = EPresentationMode.CHIP;
   }
   isSelected(option) {
     return this.value == undefined || this.value === option;
@@ -39,6 +41,7 @@ export class SnkFilterBinarySelect {
     else {
       this.value = undefined;
     }
+    this.valueChanged.emit(this.value);
   }
   /**
    * Exibe o componente snk-filter-binary-select
@@ -51,6 +54,9 @@ export class SnkFilterBinarySelect {
       return undefined;
     }
     const [optOne, optTwo] = this.config.props.options;
+    if (this.presentationMode === EPresentationMode.MODAL) {
+      return (h(Host, null, h("div", { class: "ez-flex ez-flex--row ez-flex--align-items-center" }, h("label", { class: "ez-text ez-text--medium ez-text--primary", style: { flex: '1 1 0', width: '0px' } }, this.config.detailModal), h("ez-check", { compact: true, style: { flex: '1 1 0', width: '0px' }, id: `${this.config.id}_${optOne.name || "option1"}`, label: optOne.label, class: "sc-snk-filter-bar editor__ez-check", ref: (ref) => this._checkOne = ref, value: this.isSelected(optOne.name) }), h("ez-check", { compact: true, style: { flex: '1 1 0', width: '0px' }, id: `${this.config.id}_${optTwo.name || "option2"}`, label: optTwo.label, class: "sc-snk-filter-bar editor__ez-check", ref: (ref) => this._checkTwo = ref, value: this.isSelected(optTwo.name) }))));
+    }
     return (h(Host, null, h("ez-check", { id: `${this.config.id}_${optOne.name || "option1"}`, label: optOne.label, class: "sc-snk-filter-bar editor__ez-check", ref: (ref) => this._checkOne = ref, value: this.isSelected(optOne.name) }), h("ez-check", { id: `${this.config.id}_${optTwo.name || "option2"}`, label: optTwo.label, class: "sc-snk-filter-bar editor__ez-check", ref: (ref) => this._checkTwo = ref, value: this.isSelected(optTwo.name) })));
   }
   static get is() { return "snk-filter-binary-select"; }
@@ -92,9 +98,50 @@ export class SnkFilterBinarySelect {
           "tags": [],
           "text": "Define as configura\u00E7\u00F5es do componente snk-filter-binary-select"
         }
+      },
+      "presentationMode": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "EPresentationMode",
+          "resolved": "EPresentationMode.CHIP | EPresentationMode.MODAL",
+          "references": {
+            "EPresentationMode": {
+              "location": "import",
+              "path": "./enum/presentationMode"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a varia\u00E7\u00E3o do componente"
+        },
+        "attribute": "presentation-mode",
+        "reflect": false,
+        "defaultValue": "EPresentationMode.CHIP"
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "valueChanged",
+        "name": "valueChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o valor do filtro \u00E9 alterado."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get methods() {
     return {
       "show": {

package/dist/collection/components/snk-filter-bar/filter-item/editors/snk-filter-multi-select.js

@@ -11,6 +11,7 @@ export class SnkFilterMultiSelect {
    */
   ezChangeListener(evt) {
     this.value = evt.detail.value;
+    this.valueChanged.emit(this.value);
   }
   /**
    * Exibe o componente snk-filter-multi-select
@@ -71,6 +72,24 @@ export class SnkFilterMultiSelect {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "valueChanged",
+        "name": "valueChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o valor do filtro \u00E9 alterado."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get methods() {
     return {
       "show": {

package/dist/collection/components/snk-filter-bar/filter-item/editors/snk-filter-number.js

@@ -11,6 +11,7 @@ export class SnkFilterPeriod {
    */
   ezChangeListener(evt) {
     this.value = evt.detail;
+    this.valueChanged.emit(this.value);
   }
   /**
    * Exibe o componente snk-filter-number
@@ -72,6 +73,24 @@ export class SnkFilterPeriod {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "valueChanged",
+        "name": "valueChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o valor do filtro \u00E9 alterado."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get methods() {
     return {
       "show": {

package/dist/collection/components/snk-filter-bar/filter-item/editors/snk-filter-period.js

@@ -1,10 +1,12 @@
 import { ElementIDUtils } from '@sankhyalabs/core';
 import { h } from '@stencil/core';
 import FilterItemType from '../filter-item-type.enum';
+import { EPresentationMode } from './enum/presentationMode';
 export class SnkFilterPeriod {
   constructor() {
     this.config = undefined;
     this.value = undefined;
+    this.presentationMode = EPresentationMode.CHIP;
   }
   /**
    * Emitido quando acontece a alteração de valor do componente snk-filter-period
@@ -13,6 +15,7 @@ export class SnkFilterPeriod {
     const start = this._startDate.value;
     const end = this._endDate.value;
     this.value = (start || end ? { start, end } : undefined);
+    this.valueChanged.emit(this.value);
   }
   componentDidLoad() {
     if (this._element) {
@@ -37,11 +40,16 @@ export class SnkFilterPeriod {
   async show() {
     this._startDate.setFocus();
   }
+  buildLabel() {
+    if (this.presentationMode === EPresentationMode.CHIP) {
+      return h("label", { class: "ez-text ez-text--medium ez-text--primary ez-margin--medium" }, "at\u00E9");
+    }
+  }
   render() {
     if (!this.config || this.config.type !== FilterItemType.PERIOD) {
       return undefined;
     }
-    return (h("div", { class: "ez-col ez-col--nowrap" }, h("ez-date-input", { id: `${this.config.id}_start`, label: this.config.label, ref: ref => this._startDate = ref, value: this.getDate("start") }), h("label", { class: "ez-text ez-text--medium ez-text--primary ez-margin--medium" }, "at\u00E9"), h("ez-date-input", { id: `${this.config.id}_end`, label: this.config.label, ref: ref => this._endDate = ref, value: this.getDate("end") })));
+    return (h("div", { class: "ez-col ez-col--nowrap" }, h("ez-date-input", { id: `${this.config.id}_start`, class: this.presentationMode === EPresentationMode.MODAL ? 'ez-padding--small' : '', label: this.config.label, ref: ref => this._startDate = ref, value: this.getDate("start") }), this.buildLabel(), h("ez-date-input", { id: `${this.config.id}_end`, class: this.presentationMode === EPresentationMode.MODAL ? 'ez-padding--small' : '', label: this.config.label, ref: ref => this._endDate = ref, value: this.getDate("end") })));
   }
   static get is() { return "snk-filter-period"; }
   static get properties() {
@@ -82,9 +90,50 @@ export class SnkFilterPeriod {
         },
         "attribute": "value",
         "reflect": false
+      },
+      "presentationMode": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "EPresentationMode",
+          "resolved": "EPresentationMode.CHIP | EPresentationMode.MODAL",
+          "references": {
+            "EPresentationMode": {
+              "location": "import",
+              "path": "./enum/presentationMode"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a varia\u00E7\u00E3o do componente"
+        },
+        "attribute": "presentation-mode",
+        "reflect": false,
+        "defaultValue": "EPresentationMode.CHIP"
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "valueChanged",
+        "name": "valueChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o valor do filtro \u00E9 alterado."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get methods() {
     return {
       "show": {

package/dist/collection/components/snk-filter-bar/filter-item/editors/snk-filter-personalized.js

@@ -36,6 +36,7 @@ export class SnkFilterPersonalized {
     if (this.value.filter(item => item != undefined).length == 0) {
       this.value = null;
     }
+    this.valueChanged.emit(this.value || []);
   }
   doSearch(mode, argument, param) {
     const application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
@@ -171,6 +172,24 @@ export class SnkFilterPersonalized {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "valueChanged",
+        "name": "valueChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o valor do filtro \u00E9 alterado."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get methods() {
     return {
       "show": {

package/dist/collection/components/snk-filter-bar/filter-item/editors/snk-filter-search.js

@@ -11,6 +11,7 @@ export class SnkFilterSearch {
    */
   ezChangeListener(_evt) {
     this.value = this._searchInput.value;
+    this.valueChanged.emit(this.value);
   }
   componentDidLoad() {
     if (this._element) {
@@ -85,6 +86,24 @@ export class SnkFilterSearch {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "valueChanged",
+        "name": "valueChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o valor do filtro \u00E9 alterado."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get methods() {
     return {
       "show": {

package/dist/collection/components/snk-filter-bar/filter-item/editors/snk-filter-text.js

@@ -10,6 +10,7 @@ export class SnkFilterText {
    */
   ezChangeListener(evt) {
     this.value = evt.detail;
+    this.valueChanged.emit(this.value);
   }
   componentDidLoad() {
     if (this._element) {
@@ -64,6 +65,24 @@ export class SnkFilterText {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "valueChanged",
+        "name": "valueChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o valor do filtro \u00E9 alterado."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "_element"; }
   static get listeners() {
     return [{

package/dist/collection/components/snk-filter-bar/filter-item/filter-item-type.enum.js

@@ -8,5 +8,6 @@ var FilterItemType;
   FilterItemType["NUMBER"] = "NUMBER";
   FilterItemType["DEFAULT_FILTER"] = "DEFAULT_FILTER";
   FilterItemType["PERSONALIZED"] = "PERSONALIZED";
+  FilterItemType["MULTI_LIST"] = "MULTI_LIST";
 })(FilterItemType || (FilterItemType = {}));
 export default FilterItemType;

package/dist/collection/components/snk-filter-bar/filter-modal/snk-filter-modal.css

@@ -1,5 +1,34 @@
 
+ez-modal {
+  --ez-modal-content-padding: 24px 12px;
+}
+
 .snk-filter__modal-container{
-  width: 359px;
-  max-width: 359px;
+  width: 344px;
+  max-width: 344px;
+  overflow: hidden;
+}
+
+.snk-filter__modal-content{
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-height: 760px;
+  overflow-x: clip;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.snk-filter__modal-content::-webkit-scrollbar {
+  width: var(--space--small);
+  min-width: var(--space--small);
+  max-width: var(--space--small);
 }
+
+
+.snk-filter__modal-collapsible-box{
+  border: 1px solid #DCE0E8;
+  border-radius: var(--border--radius-medium);
+}
+
+