@sankhyalabs/sankhyablocks 10.1.0-dev.52 → 10.1.0-dev.53

package/dist/collection/components/snk-dynaform-form-config/snk-dynaform-config-header/snk-dynaform-config-header.js

@@ -0,0 +1,236 @@
+import { h, Host } from '@stencil/core';
+import { ApplicationUtils } from '@sankhyalabs/ezui/dist/collection/utils';
+export class SnkDynaformConfigHeader {
+  constructor() {
+    this.isEditingGuide = false;
+    this.isEditingGroup = false;
+    this.configOptions = [];
+    this.selectedConfig = undefined;
+    this.messagesBuilder = undefined;
+    this.hasChanges = false;
+    this.optionConfigChanged = false;
+  }
+  handleIsEditingGuideName({ detail }) {
+    this.isEditingGuide = detail;
+  }
+  handleIsEditingGroupName({ detail }) {
+    this.isEditingGroup = detail;
+  }
+  saveFormConfig() {
+    if (this.isEditingGuide || this.isEditingGroup) {
+      const title = this.getMessage('snkFormConfig.confirm.title');
+      const message = this.isEditingGuide
+        ? this.getMessage('snkFormConfig.alert.titleGuideEditing')
+        : this.getMessage('snkFormConfig.alert.titleGroupEditing');
+      ApplicationUtils.alert(title, message);
+      return;
+    }
+    this.saveConfig.emit();
+  }
+  async closeFormConfig() {
+    if (this.hasChanges) {
+      const title = this.getMessage('snkFormConfig.confirm.title');
+      const msg = this.getMessage('snkFormConfig.confirm.cancel');
+      const confirm = await ApplicationUtils.confirm(title, msg);
+      if (!confirm)
+        return;
+    }
+    this.configClose.emit();
+  }
+  getMessage(key, params) {
+    return this.messagesBuilder.getMessage(key, params);
+  }
+  openConfirmDialog(msg = '', title = this.getMessage('snkFormConfig.confirm.title')) {
+    return ApplicationUtils.confirm(title, msg);
+  }
+  async applyOptionConfig() {
+    var _a, _b;
+    const name = (_b = (_a = this.selectedConfig) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.getMessage('snkFormConfig.configs.selectedConfig');
+    const msg = this.getMessage('snkFormConfig.confirm.apply').replace('{0}', name);
+    const confirm = await this.openConfirmDialog(msg);
+    if (confirm) {
+      this.saveConfig.emit();
+    }
+  }
+  renderSaveActions() {
+    if (!this.hasChanges && !this.optionConfigChanged)
+      return;
+    if (this.hasChanges) {
+      return (h("div", { class: "right-group" }, h("ez-button", { title: this.getMessage('snkFormConfig.actions.cancel'), label: this.getMessage('snkFormConfig.actions.cancel'), onClick: this.closeFormConfig.bind(this), size: "medium" }), h("ez-button", { title: this.getMessage('snkFormConfig.actions.save'), label: this.getMessage('snkFormConfig.actions.save'), class: 'ez-button--primary ez-padding-left--medium', onClick: () => this.saveFormConfig(), size: "medium" })));
+    }
+    return (h("div", { class: "right-group" }, h("ez-button", { title: this.getMessage('snkFormConfig.actions.cancel'), label: this.getMessage('snkFormConfig.actions.cancel'), onClick: this.closeFormConfig.bind(this), size: "medium" }), h("ez-button", { title: this.getMessage('snkFormConfig.actions.save'), label: this.getMessage('snkFormConfig.applyConfig'), class: 'ez-button--primary ez-padding-left--medium', onClick: async () => await this.applyOptionConfig(), size: "medium" })));
+  }
+  render() {
+    return (h(Host, null, h("div", { class: 'left-group' }, h("ez-button", { mode: "icon", title: this.getMessage('snkFormConfig.goBackTitle'), iconName: "arrow_back", size: "small", onClick: this.closeFormConfig.bind(this), id: "formConfigToBack" }), h("h1", { class: "ez-title ez-title--primary ez-title--extra-large ez-padding--small" }, this.getMessage('snkFormConfig.title')), h("snk-dynaform-configs-button", { hasChanges: this.hasChanges, configOptions: this.configOptions, selectedConfig: this.selectedConfig, messagesBuilder: this.messagesBuilder })), this.renderSaveActions()));
+  }
+  static get is() { return "snk-dynaform-config-header"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-dynaform-config-header.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-dynaform-config-header.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "configOptions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<IUserConfig>",
+          "resolved": "IUserConfig[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "IUserConfig": {
+              "location": "import",
+              "path": "../../../lib/http/data-fetcher/fetchers/form-config-fetcher"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      },
+      "selectedConfig": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IUserConfig",
+          "resolved": "IUserConfig",
+          "references": {
+            "IUserConfig": {
+              "location": "import",
+              "path": "../../../lib/http/data-fetcher/fetchers/form-config-fetcher"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "messagesBuilder": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "SnkMessageBuilder",
+          "resolved": "SnkMessageBuilder",
+          "references": {
+            "SnkMessageBuilder": {
+              "location": "import",
+              "path": "../../../lib/message/SnkMessageBuilder"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "hasChanges": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "has-changes",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "optionConfigChanged": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "option-config-changed",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isEditingGuide": {},
+      "isEditingGroup": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "configClose",
+        "name": "configClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "saveConfig",
+        "name": "saveConfig",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "isEditingGuideName",
+        "method": "handleIsEditingGuideName",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "isEditingGroupName",
+        "method": "handleIsEditingGroupName",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/snk-dynaform-form-config/snk-dynaform-config-header/snk-dynaform-configs-button/snk-dynaform-configs-button.css

@@ -0,0 +1,41 @@
+.dropdown-container{
+  font-family: 'Roboto';
+  font-size: 12px;
+  font-weight: 400;
+  display: flex;
+  flex-direction: column;
+  color: #2b3a54;
+  width: 200px
+}
+
+.main-item{
+  padding: 12px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all .2s ease-in-out;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  justify-content: start;
+}
+
+.main-item ez-icon{
+  --ez-icon--color: #008561;
+}
+
+.main-item:nth-of-type(1){
+  padding-bottom: 6px;
+}
+
+.main-item:nth-of-type(2){
+  padding-top: 6px;
+}
+
+.main-item:hover{
+  background-color: #FAFCFF;
+}
+
+.item-label {
+  display: flex;
+}

package/dist/collection/components/snk-dynaform-form-config/snk-dynaform-config-header/snk-dynaform-configs-button/snk-dynaform-configs-button.js

@@ -0,0 +1,170 @@
+import { h, Host } from '@stencil/core';
+import { ObjectUtils } from '@sankhyalabs/core';
+import { ApplicationUtils } from '@sankhyalabs/ezui/dist/collection/utils';
+export class SnkDynaformConfigsButton {
+  constructor() {
+    this.configOptions = [];
+    this.selectedConfig = undefined;
+    this.hasChanges = false;
+    this.messagesBuilder = undefined;
+  }
+  getMessage(key, params) {
+    return this.messagesBuilder.getMessage(key, params);
+  }
+  async showShareConfigOptions() {
+    if (this._refOptionsPopover && this._refShareConfigBtn) {
+      await this._refOptionsPopover.showUnder(this._refShareConfigBtn);
+    }
+  }
+  async handleSelectOption(option) {
+    if (ObjectUtils.equals(option, this.selectedConfig))
+      return;
+    if (this.hasChanges) {
+      const title = this.getMessage('snkFormConfig.confirm.title');
+      const msg = this.getMessage('snkFormConfig.confirm.cancel');
+      const confirm = await ApplicationUtils.confirm(title, msg);
+      if (!confirm)
+        return;
+    }
+    this.selectedConfig = option;
+    this.formConfigOptionSelected.emit(option);
+    await this._refOptionsPopover.hide();
+  }
+  getButtonLabel() {
+    var _a, _b;
+    return (_b = (_a = this.selectedConfig) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.getMessage('snkFormConfig.configs.buttonLabel');
+  }
+  renderConfigOptions() {
+    return this.configOptions.map((option) => {
+      return (h("div", { class: `main-item`, onClick: async () => await this.handleSelectOption(option) }, h("span", { class: 'item-label' }, " ", option.name), this.renderCheckIcon(option)));
+    });
+  }
+  renderCheckIcon(option) {
+    if (this.selectedConfig && this.selectedConfig.origin === option.origin)
+      return h("ez-icon", { iconName: "check" });
+  }
+  render() {
+    return (h(Host, null, h("ez-button", { ref: ref => this._refShareConfigBtn = ref, label: this.getButtonLabel(), onClick: async () => await this.showShareConfigOptions() }, h("ez-icon", { slot: "rightIcon", iconName: "chevron-down" })), h("ez-popover-plus", { ref: ref => this._refOptionsPopover = ref, autoClose: true, overlayType: "none" }, h("div", { class: 'dropdown-container' }, this.renderConfigOptions()))));
+  }
+  static get is() { return "snk-dynaform-configs-button"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-dynaform-configs-button.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-dynaform-configs-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "configOptions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<IUserConfig>",
+          "resolved": "IUserConfig[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "IUserConfig": {
+              "location": "import",
+              "path": "../../../../lib/http/data-fetcher/fetchers/form-config-fetcher"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      },
+      "selectedConfig": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IUserConfig",
+          "resolved": "IUserConfig",
+          "references": {
+            "IUserConfig": {
+              "location": "import",
+              "path": "../../../../lib/http/data-fetcher/fetchers/form-config-fetcher"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "hasChanges": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "has-changes",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "messagesBuilder": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "SnkMessageBuilder",
+          "resolved": "SnkMessageBuilder",
+          "references": {
+            "SnkMessageBuilder": {
+              "location": "import",
+              "path": "../../../../lib/message/SnkMessageBuilder"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "formConfigOptionSelected",
+        "name": "formConfigOptionSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IUserConfig",
+          "resolved": "IUserConfig",
+          "references": {
+            "IUserConfig": {
+              "location": "import",
+              "path": "../../../../lib/http/data-fetcher/fetchers/form-config-fetcher"
+            }
+          }
+        }
+      }];
+  }
+}

package/dist/collection/components/snk-dynaform-form-config/snk-dynaform-field-item/snk-dynaform-field-config/snk-dynaform-field-config.css

@@ -0,0 +1,22 @@
+.field-config-container {
+  font-family: 'Roboto';
+  color: #2b3a54;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 330px;
+  justify-content: space-between;
+}
+
+.header {
+  display: flex;
+  font-weight: 500;
+  font-size: 16px;
+}
+
+.actions {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  gap: 12px;
+}