@sankhyalabs/sankhyablocks 0.0.0-feat-dev-kb-4158.0

package/dist/collection/components/snk-crud/subcomponents/snk-form-view.css

@@ -0,0 +1,52 @@
+:host {
+  display: flex;
+  width: 100%;
+  --ez-form-card-summary-field-content-weight: 700;
+}
+
+.level-path{
+  color: var(--color--title-primary, #2B3A54);
+  font-weight: var(--text-weight--medium, 400);
+  padding-right: 3px;
+}
+
+.summary-wrapper{
+  display: flex;
+  overflow: hidden;
+}
+
+.summary-header {
+  border-bottom: 1px solid var(--color--strokes);
+  margin-bottom: var(--space--medium);
+  padding-bottom: var(--space--medium);
+}
+
+.summary-container{
+  display: flex;
+  flex-direction: column;
+}
+
+.summary-container {
+  padding-right: calc(var(--space--extra-large) / 1.5);
+}
+
+.summary-field{
+  min-width: 30px;
+  max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.summary-field__title{
+  color: var(--text--primary, #626e82);
+  font-size: var(--title--small);
+  white-space: nowrap;
+  font-weight: var(--text-weight--medium);
+}
+
+.summary-field__content{
+  color: var(--title--primary, #2b3a54);
+  font-size: var(--text--large);
+  font-weight: var(--ez-form-card-summary-field-content-weight);
+}

package/dist/collection/components/snk-crud/subcomponents/snk-form-view.js

@@ -0,0 +1,376 @@
+import { ElementIDUtils } from "@sankhyalabs/core";
+import { Host, h } from "@stencil/core";
+import { DataBinder } from "@sankhyalabs/ezui/dist/collection/utils/form";
+export class SnkFormView {
+  constructor() {
+    this.levelPath = undefined;
+    this.label = undefined;
+    this.name = undefined;
+    this.fields = undefined;
+    this.formMetadata = undefined;
+    this.dataUnit = undefined;
+    this.contracted = undefined;
+    this.fixed = false;
+    this.summaryFields = undefined;
+    this.canExpand = true;
+    this.canFix = true;
+    this.recordsValidator = undefined;
+  }
+  async showUp() {
+    if (this._formView) {
+      this._formView.showUp();
+    }
+  }
+  changeFix() {
+    this.fixed = !this.fixed;
+    this.emitEvent("fixed");
+  }
+  changeContracted() {
+    this.contracted = !this.contracted;
+    this.emitEvent("presentation");
+  }
+  emitEvent(propertyChanged) {
+    this.snkContentCardChanged.emit({
+      formName: this.name,
+      cardConfig: {
+        fixed: this.fixed,
+        presentation: this.contracted ? "CONTRACTED" : "EXPANDED"
+      },
+      propertyChanged
+    });
+  }
+  getCardSummary() {
+    const summary = {};
+    this.getSummaryFields().forEach(({ field, label }) => {
+      var _a;
+      const value = this.dataUnit.getFormattedValue(field);
+      if (value !== "") {
+        if (label == undefined) {
+          label = (_a = this.dataUnit.getField(field)) === null || _a === void 0 ? void 0 : _a.label;
+        }
+        summary[label] = value;
+      }
+    });
+    return summary;
+  }
+  getSummaryFields() {
+    if (this.summaryFields == undefined) {
+      return this.fields.map(field => {
+        const descriptor = this.dataUnit.getField(field.name);
+        return { field: field.name, label: field.label || (descriptor === null || descriptor === void 0 ? void 0 : descriptor.label) };
+      });
+    }
+    return this.summaryFields;
+  }
+  bindFields(fields) {
+    if (this._dataBinder == undefined && this.dataUnit != undefined) {
+      this._dataBinder = new DataBinder(this.dataUnit);
+    }
+    if (this._dataBinder) {
+      this._dataBinder.bind(fields, this.dataUnit.dataUnitId, this.formMetadata, this.recordsValidator);
+    }
+  }
+  disconnectedCallback() {
+    if (this._dataBinder != undefined) {
+      this._dataBinder.onDisconnectedCallback();
+    }
+  }
+  render() {
+    return (h(Host, { class: "ez-box__container" }, h("div", { class: "summary-header ez-flex ez-size-width--full" }, h("div", { class: "ez-flex ez-text ez-title--primary ez-text--bold ez-flex--justify-start ez-flex--align-items-center ez-col--sd-9" }, this.levelPath ? h("span", { class: "level-path" }, this.levelPath + " /") : undefined, this.label), h("div", { class: "ez-flex ez-flex--justify-end ez-col--sd-3" }, this.canFix &&
+      h("ez-button", { class: "ez-padding-left--medium", mode: "icon", size: "small", iconName: this.fixed ? "un-pin" : "push-pin", "data-element-id": ElementIDUtils.getInternalIDInfo("toggleFixed_ezFormCard"), onClick: () => this.changeFix(), title: this.fixed ? "Desafixar" : "Fixar" }), this.canExpand &&
+      h("ez-button", { class: "ez-padding-left--medium", mode: "icon", size: "small", iconName: this.contracted ? "chevron-down" : "chevron-up", "data-element-id": ElementIDUtils.getInternalIDInfo("toggleExpand_ezFormCard"), onClick: () => this.changeContracted(), title: this.contracted ? "Expandir" : "Resumir" }))), h("slot", null), this.contracted
+      ?
+        h("snk-form-summary", { summary: this.getCardSummary() })
+      :
+        h("ez-form-view", { ref: ref => this._formView = ref, fields: this.fields, onEzContentReady: evt => this.bindFields(evt.detail) })));
+  }
+  static get is() { return "snk-form-view"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-form-view.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-form-view.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "levelPath": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Caminho amig\u00E1vel para se chegar a este detalhe."
+        },
+        "attribute": "level-path",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto para ser apresentado como t\u00EDtulo do componente"
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Identificador \u00FAnico do componente, esse \u00E9 utilizado para identificar o\ncomponente no evento de `snkContentCardChanged`"
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "fields": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<IFormViewField>",
+          "resolved": "IFormViewField[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "IFormViewField": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/types/components/ez-form-view/interfaces/IFormViewField"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Lista de campos para serem apresentados\nno formul\u00E1rio."
+        }
+      },
+      "formMetadata": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "FormMetadata",
+          "resolved": "FormMetadata",
+          "references": {
+            "FormMetadata": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/collection/utils/form"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Metadados de campos que definem quais campos s\u00E3o obrigat\u00F3rios,\nquais devem ser limpos durante a c\u00F3pia de registros e valores\npad\u00F5es dos campos."
+        },
+        "attribute": "form-metadata",
+        "reflect": false
+      },
+      "dataUnit": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DataUnit",
+          "resolved": "DataUnit",
+          "references": {
+            "DataUnit": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a inst\u00E2ncia do DataUnit que deve se ligar ao formul\u00E1rio."
+        }
+      },
+      "contracted": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o componente ser\u00E1 apresentado no modo default ou no modo\nresumido."
+        },
+        "attribute": "contracted",
+        "reflect": false
+      },
+      "fixed": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o card est\u00E1 fixado ou n\u00E3o."
+        },
+        "attribute": "fixed",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "summaryFields": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<ISummaryField>",
+          "resolved": "ISummaryField[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "ISummaryField": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/types/utils/form/interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "canExpand": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o bot\u00E3o de expandir deve ser apresentado."
+        },
+        "attribute": "can-expand",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "canFix": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o bot\u00E3o de fixar deve ser apresentado."
+        },
+        "attribute": "can-fix",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "recordsValidator": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IRecordValidator",
+          "resolved": "IRecordValidator",
+          "references": {
+            "IRecordValidator": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/types/utils/form/interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Validador respons\u00E1vel por checar a integridade das informa\u00E7\u00F5es do registro."
+        }
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "snkContentCardChanged",
+        "name": "snkContentCardChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando a configura\u00E7\u00E3o do card \u00E9 alterada."
+        },
+        "complexType": {
+          "original": "{ formName: string, cardConfig: IFormCardConfig, propertyChanged: string }",
+          "resolved": "{ formName: string; cardConfig: IFormCardConfig; propertyChanged: string; }",
+          "references": {
+            "IFormCardConfig": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/types/utils/form/interfaces"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "showUp": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+}

package/dist/collection/components/snk-crud/subcomponents/snk-guides-viewer.css

@@ -0,0 +1,91 @@
+:host {
+    /*@doc Define o espaçamento maior utilizado no componente.*/
+    --snk-guides-viewer--space-large: var(--space--large, 24px);
+    /*@doc Define o espaçamento médio utilizado no componente.*/
+    --snk-guides-viewer--space-medium: var(--space--medium, 12px);
+    /*@doc Define a altura mínima do cabeçalho do componente.*/
+    --snk-guides-viewer__header--min-height: 94px;
+    /*@doc Define a posição de z-index do cabeçalho do componente.*/
+    --snk-guides-viewer__header--z-index: var(--more-visible, 2);
+    /*@doc Define a cor de fundo do cabeçalho do componente.*/
+    --snk-guides-viewer__header--background-color: var(--background--body, #fafcff);
+    /*@doc Define a largura do guide-navigator do componente.*/
+    --snk-guides-viewer__guide-navigator--width: 340px;
+
+    /*private*/
+    display: block;
+}
+
+snk-form-view {
+    width: 100%;
+}
+
+.snk-guides-viewer {
+    /*private*/
+    position: relative;
+    padding-left: 0px;
+    padding-top: 0px;
+    
+    /*public*/
+    padding-right: var(--snk-guides-viewer--space-large);
+    padding-bottom: var(--snk-guides-viewer--space-large);
+}
+
+.snk-guides-viewer__detail-container{
+    display: flex;
+    row-gap: 24px;
+    flex-direction: column;
+}
+
+.snk-guides-viewer__header {
+    /*private*/
+    position: sticky;
+    align-items: center;
+    top: 0;
+
+    /*public*/
+    z-index: var(--snk-guides-viewer__header--z-index);
+    background-color: var(--snk-guides-viewer__header--background-color);
+    min-height: var(--snk-guides-viewer__header--min-height);
+    width: calc(100% + (var(--snk-guides-viewer--space-large) * 2));
+    padding-left: var(--snk-guides-viewer--space-large);
+    padding-right: var(--snk-guides-viewer--space-large);
+    padding-top: var(--snk-guides-viewer--space-large);
+    padding-bottom: var(--snk-guides-viewer--space-medium);
+    margin-left: calc(var(--snk-guides-viewer--space-large) * -1);
+    margin-right: calc(var(--snk-guides-viewer--space-large) * -1);
+    margin-bottom: var(--snk-guides-viewer--space-medium);
+}
+
+.snk-guides-viewer__container {
+    /*private*/
+    display: grid;
+    grid-template-columns: minmax(0, auto) minmax(0, 100%);
+    height: 100%;
+
+    /*public*/
+    column-gap: var(--snk-guides-viewer--space-large);
+}
+
+.snk-guides-viewer__guide-navigator {
+    /*private*/
+    position: sticky;
+
+    /*public*/
+    top: calc(var(--snk-guides-viewer__header--min-height) + var(--snk-guides-viewer--space-medium));
+    height: calc(100vh - var(--snk-guides-viewer__header--min-height) - var(--snk-guides-viewer--space-large) - var(--snk-guides-viewer--space-medium));
+}
+
+.snk-guides-viewer__guide-navigator[open] {
+    /*public*/
+    width: var(--snk-guides-viewer__guide-navigator--width);
+    max-width: var(--snk-guides-viewer__guide-navigator--width);
+    min-width: var(--snk-guides-viewer__guide-navigator--width);
+}
+
+.snk-guides-viewer__detail-content {
+    /*private*/
+    min-height: 100%;
+    align-items: flex-start;
+    align-content: flex-start;
+}