@sankhyalabs/sankhyablocks 10.1.0-dev.6 → 10.1.0-dev.60

package/dist/components/snk-dynaform-form-view2.js

@@ -0,0 +1,272 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { Action, UserInterface, ApplicationContext } from '@sankhyalabs/core';
+import { focusOnFieldSerch, SEARCH_FIELD_FULL_WIDTH, FormLayout } from '@sankhyalabs/ezui/dist/collection/utils';
+import { DataBinder } from '@sankhyalabs/ezui/dist/collection/utils/form';
+import { g as getPKs, d as defineCustomElement$1 } from './snk-image-input2.js';
+
+const snkDynaformFormViewCss = ".sc-snk-dynaform-form-view-h{display:flex;flex-direction:column;width:100%;flex-wrap:wrap;background-color:var(--background--xlight);padding:var(--space--12, 12px);padding-right:0;border-radius:var(--border--radius-medium);border:1px solid var(--color--petroleum-100, #C8CCD3);--ez-form-card-summary-field-content-weight:700}ez-form-view.sc-snk-dynaform-form-view{padding-right:var(--space--12, 12px);--ez-form-view__item--padding:0;min-height:0;overflow-y:auto;scrollbar-width:auto;scrollbar-color:var(--color--strokes, #E1E2E5) transparent}ez-form-view.sc-snk-dynaform-form-view::-webkit-scrollbar{width:14px;height:14px}ez-form-view.sc-snk-dynaform-form-view::-webkit-scrollbar-track{background:transparent}ez-form-view.sc-snk-dynaform-form-view::-webkit-scrollbar-thumb{background-color:var(--color--strokes, #E1E2E5);border-radius:999px;border:2px solid transparent;background-clip:padding-box}ez-form-view.sc-snk-dynaform-form-view::-webkit-scrollbar-thumb:hover{background-color:var(--color--petroleum-100, #C8CCD3);background-clip:padding-box}ez-form-view.sc-snk-dynaform-form-view::-webkit-scrollbar-corner{background:transparent}.level-path.sc-snk-dynaform-form-view{color:var(--color--title-primary, #2B3A54);font-weight:var(--text-weight--medium, 400);padding-right:3px}.summary-wrapper.sc-snk-dynaform-form-view{display:flex;overflow:hidden}.summary-header.sc-snk-dynaform-form-view{border-bottom:1px solid var(--color--strokes);margin-bottom:var(--space--medium);padding-bottom:var(--space--medium)}.summary-container.sc-snk-dynaform-form-view{display:flex;flex-direction:column}.summary-container.sc-snk-dynaform-form-view{padding-right:calc(var(--space--extra-large) / 1.5)}.summary-field.sc-snk-dynaform-form-view{min-width:30px;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.summary-field__title.sc-snk-dynaform-form-view{color:var(--text--primary, #626e82);font-size:var(--title--small);white-space:nowrap;font-weight:var(--text-weight--medium)}.summary-field__content.sc-snk-dynaform-form-view{color:var(--title--primary, #2b3a54);font-size:var(--text--large);font-weight:var(--ez-form-card-summary-field-content-weight)}";
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+const SnkDynaformFormView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.snkContentCardChanged = createEvent(this, "snkContentCardChanged", 7);
+    this.snkRequestClearFieldToFocus = createEvent(this, "snkRequestClearFieldToFocus", 7);
+    this._customEditors = new Map();
+    this._fieldProps = new Map();
+    this.dataUnitObserver = async (action) => {
+      var _a;
+      if (action.type === Action.RECORDS_COPIED) {
+        const sourcePK = this.buildSourceRecordPK(action);
+        (_a = this.getImageField()) === null || _a === void 0 ? void 0 : _a.forEach(async (field) => {
+          var _a;
+          (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.setFieldValue(field.name, JSON.stringify(sourcePK));
+        });
+      }
+    };
+    this.customUiBuilders = new Map([
+      [UserInterface.IMAGE, (_a) => {
+          var { name } = _a, props = __rest(_a, ["name"]);
+          return h("snk-image-input", Object.assign({ dataUnit: this.dataUnit, maxSize: Infinity, fieldName: name, entityName: this.entityPath }, props));
+        }
+      ]
+    ]);
+    this._singleColumn = false;
+    this._currentFormLayout = undefined;
+    this.fieldSearch = undefined;
+    this.label = undefined;
+    this.name = undefined;
+    this.fields = undefined;
+    this.formMetadata = undefined;
+    this.dataUnit = undefined;
+    this.recordsValidator = undefined;
+    this.fieldToFocus = undefined;
+    this.customEditors = undefined;
+    this.fieldsProps = undefined;
+    this.entityPath = undefined;
+  }
+  async showUp() {
+    var _a, _b;
+    if (this._formView) {
+      (_b = (_a = this._formView).showUp) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+  }
+  /**
+   * Registra um editor customizado para campos da grade e formulário
+   */
+  async addCustomEditor(fieldName, customEditor, detailContext) {
+    var _a, _b;
+    if (this._formView) {
+      (_b = (_a = this._formView).addCustomEditor) === null || _b === void 0 ? void 0 : _b.call(_a, fieldName, customEditor, detailContext);
+      return;
+    }
+    const newCustomEditors = new Map(this._customEditors);
+    newCustomEditors.set(fieldName, { customEditor, detailContext: detailContext !== null && detailContext !== void 0 ? detailContext : "" });
+    this._customEditors = newCustomEditors;
+  }
+  /**
+   * Altera/adiciona uma propriedade nos metadados do campo.
+   */
+  async setFieldProp(fieldName, propName, value) {
+    const props = this._fieldProps.get(fieldName) || [];
+    this._fieldProps.set(fieldName, [...props, { propName, value }]);
+  }
+  /**
+   * Exibe a busca de campos ancorada ao container de cabeçalho do snk-dynaform-form-view.
+   */
+  async showSearchField() {
+    if (!this._headerContainer || !this._ezPopoverFieldColumn)
+      return;
+    const container = this._headerContainer.getBoundingClientRect();
+    if (this.fieldSearch) {
+      await focusOnFieldSerch(this.fieldSearch);
+      this._ezPopoverFieldColumn.showUnder(this._headerContainer, { horizontalGap: container.width - (SEARCH_FIELD_FULL_WIDTH), verticalGap: container.height * -1 });
+    }
+  }
+  observePropsCustomEditor(newValue) {
+    for (const fieldName in newValue) {
+      this.addCustomEditor(fieldName, newValue[fieldName]);
+    }
+  }
+  async observeFieldsProps(newValue) {
+    for (const field in newValue) {
+      const fieldProps = newValue[field];
+      const propNames = Object.keys(fieldProps);
+      for (const propName of propNames) {
+        await this.setFieldProp(field, propName, fieldProps[propName]);
+      }
+    }
+  }
+  async observeDataUnit(newValue, oldValue) {
+    if (newValue !== oldValue && newValue) {
+      newValue.subscribe(this.dataUnitObserver);
+    }
+  }
+  bindFields(fields) {
+    var _a;
+    if (this._dataBinder == undefined && this.dataUnit != undefined) {
+      this._dataBinder = new DataBinder(this.dataUnit);
+    }
+    if (this._dataBinder && this.dataUnit && this.formMetadata) {
+      this._dataBinder.bind(fields, (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.dataUnitId, this.formMetadata, this.recordsValidator);
+    }
+  }
+  disconnectedCallback() {
+    if (this._dataBinder != undefined) {
+      this._dataBinder.onDisconnectedCallback();
+    }
+    if (this.dataUnit) {
+      this.dataUnit.unsubscribe(this.dataUnitObserver);
+    }
+  }
+  async componentWillLoad() {
+    await this.initLayoutFormConfig();
+  }
+  componentDidLoad() {
+    if (this.customEditors) {
+      this.observePropsCustomEditor(this.customEditors);
+    }
+    if (this.fieldsProps) {
+      this.observeFieldsProps(this.fieldsProps);
+    }
+  }
+  async initLayoutFormConfig() {
+    const _application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    const layoutFormConfig = await (_application === null || _application === void 0 ? void 0 : _application.getLayoutFormConfig());
+    if (layoutFormConfig) {
+      this.setSingleColumn(layoutFormConfig);
+      this.registerNotifyListeners(layoutFormConfig);
+    }
+  }
+  setSingleColumn(layoutFormConfig) {
+    this._singleColumn = (layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config) === FormLayout.CASCADE || (layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config) === FormLayout.CLASSIC_CASCADE;
+    this._currentFormLayout = layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config;
+  }
+  registerNotifyListeners(layoutFormConfig) {
+    var _a;
+    if (!layoutFormConfig)
+      return;
+    (_a = layoutFormConfig.onConfigChange) === null || _a === void 0 ? void 0 : _a.call(layoutFormConfig, (config) => {
+      this._singleColumn = (config === FormLayout.CASCADE || config === FormLayout.CLASSIC_CASCADE);
+      this._currentFormLayout = config;
+    });
+  }
+  componentDidRender() {
+    var _a;
+    this.setCustomEditors();
+    this.setFieldProps();
+    if (!this.fieldToFocus) {
+      return;
+    }
+    if (!((_a = this.fields) === null || _a === void 0 ? void 0 : _a.some(item => item.name === this.fieldToFocus))) {
+      return;
+    }
+    requestAnimationFrame(() => {
+      var _a, _b;
+      (_a = this._dataBinder) === null || _a === void 0 ? void 0 : _a.setFocus(this.fieldToFocus);
+      (_b = this.snkRequestClearFieldToFocus) === null || _b === void 0 ? void 0 : _b.emit();
+    });
+  }
+  setCustomEditors() {
+    var _a, _b;
+    if (!this._formView) {
+      return;
+    }
+    for (const [fieldName, customEditorProps] of this._customEditors) {
+      (_b = (_a = this._formView).addCustomEditor) === null || _b === void 0 ? void 0 : _b.call(_a, fieldName, customEditorProps.customEditor, customEditorProps.detailContext);
+      this._customEditors.delete(fieldName);
+    }
+  }
+  setFieldProps() {
+    if (!this._formView) {
+      return;
+    }
+    for (const [fieldName, propsToChange] of this._fieldProps) {
+      propsToChange.forEach(prop => {
+        var _a, _b;
+        (_b = (_a = this._formView).setFieldProp) === null || _b === void 0 ? void 0 : _b.call(_a, fieldName, prop.propName, prop.value);
+        this._fieldProps.delete(fieldName);
+      });
+    }
+  }
+  buildSourceRecordPK(action) {
+    var _a, _b, _c;
+    const currentRecord = ((_a = action.payload) === null || _a === void 0 ? void 0 : _a[0]) || {};
+    const sourceBase64 = currentRecord["__record__source__id__"];
+    const sourceRecord = JSON.parse(atob(sourceBase64 || ''));
+    delete sourceRecord["__DATA_UNIT_NAME__"];
+    if (!this.dataUnit) {
+      return {};
+    }
+    const pks = (_b = getPKs(this.dataUnit)) !== null && _b !== void 0 ? _b : {};
+    const pkFields = Object.keys(pks);
+    const filteredSourceRecord = {};
+    for (const pkField of pkFields) {
+      filteredSourceRecord[pkField] = (_c = sourceRecord[pkField]) === null || _c === void 0 ? void 0 : _c.value;
+    }
+    return filteredSourceRecord;
+  }
+  getImageField() {
+    var _a;
+    return (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.metadata.fields.filter(field => field.userInterface === UserInterface.IMAGE);
+  }
+  render() {
+    return (h(Host, null, h("slot", null), h("ez-form-view", { ref: (ref) => this._formView = ref, fields: this.fields, onEzContentReady: evt => this.bindFields(evt.detail), singleColumn: this._singleColumn, customUiBuilders: this.customUiBuilders, formLayout: this._currentFormLayout }), this.fieldSearch && h("ez-popover", { ref: elem => (this._ezPopoverFieldColumn = elem), overlayType: "none" }, this.fieldSearch)));
+  }
+  static get watchers() { return {
+    "customEditors": ["observePropsCustomEditor"],
+    "fieldsProps": ["observeFieldsProps"],
+    "dataUnit": ["observeDataUnit"]
+  }; }
+  static get style() { return snkDynaformFormViewCss; }
+}, [6, "snk-dynaform-form-view", {
+    "fieldSearch": [16],
+    "label": [1],
+    "name": [1],
+    "fields": [16],
+    "formMetadata": [8, "form-metadata"],
+    "dataUnit": [16],
+    "recordsValidator": [16],
+    "fieldToFocus": [1, "field-to-focus"],
+    "customEditors": [16],
+    "fieldsProps": [16],
+    "entityPath": [1, "entity-path"],
+    "_singleColumn": [32],
+    "_currentFormLayout": [32],
+    "showUp": [64],
+    "addCustomEditor": [64],
+    "setFieldProp": [64],
+    "showSearchField": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-dynaform-form-view", "snk-image-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-dynaform-form-view":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SnkDynaformFormView);
+      }
+      break;
+    case "snk-image-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { SnkDynaformFormView as S, defineCustomElement as d };

package/dist/components/snk-dynaform-guides-configurator.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SnkDynaformGuidesConfigurator extends Components.SnkDynaformGuidesConfigurator, HTMLElement {}
+export const SnkDynaformGuidesConfigurator: {
+  prototype: SnkDynaformGuidesConfigurator;
+  new (): SnkDynaformGuidesConfigurator;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/snk-dynaform-guides-configurator.js

@@ -0,0 +1,6 @@
+import { S as SnkDynaformGuidesConfigurator$1, d as defineCustomElement$1 } from './snk-dynaform-guides-configurator2.js';
+
+const SnkDynaformGuidesConfigurator = SnkDynaformGuidesConfigurator$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SnkDynaformGuidesConfigurator, defineCustomElement };

package/dist/components/snk-dynaform-guides-configurator2.js

@@ -0,0 +1,173 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { ObjectUtils } from '@sankhyalabs/core';
+import { ApplicationUtils } from '@sankhyalabs/ezui/dist/collection/utils';
+
+const snkDynaformGuidesConfiguratorCss = ".guides-tab-configurator.sc-snk-dynaform-guides-configurator{display:flex;flex-direction:column;width:100%;gap:var(--spece--8, 8px)}.tab-bar-row.sc-snk-dynaform-guides-configurator{display:flex;flex-direction:row;align-items:center;gap:var(--space--12, 12px);width:100%}.guides-tabselector.sc-snk-dynaform-guides-configurator{flex:1;min-width:0}.tab-actions.sc-snk-dynaform-guides-configurator{display:inline-flex;align-items:center;gap:var(--space--2, 2px);margin-left:var(--space--6, 6px)}.tab-actions.sc-snk-dynaform-guides-configurator ez-button.sc-snk-dynaform-guides-configurator{width:var(--space--20, 20px);align-items:center;justify-content:center;display:flex}.hidden-guides-bar.sc-snk-dynaform-guides-configurator{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--space--8, 8px);padding:var(--space--8, 8px) 0;border-top:1px solid #dce0e8}.hidden-guides-label.sc-snk-dynaform-guides-configurator{font-size:var(--space--12, 12px);color:#afb6c0;white-space:nowrap}.hidden-guide-chip.sc-snk-dynaform-guides-configurator{display:flex;align-items:center;gap:4px;padding:2px var(--space--8, 8px);border:1px solid #dce0e8;border-radius:var(--space--12, 12px);background:#f5f7fa;transition:background 0.15s ease-in-out}.hidden-guide-chip.sc-snk-dynaform-guides-configurator:hover{background:#e2eaf4}.hidden-guide-chip.sc-snk-dynaform-guides-configurator ez-button.sc-snk-dynaform-guides-configurator{width:var(--space--20, 20px);align-items:center;justify-content:center;display:flex}.chip-label.sc-snk-dynaform-guides-configurator{font-size:13px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}";
+
+const SnkDynaformGuidesConfigurator = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.guideSelected = createEvent(this, "guideSelected", 7);
+    this.guideListChanged = createEvent(this, "guideListChanged", 7);
+    this.guideDeleted = createEvent(this, "guideDeleted", 7);
+    this.createNewGuide = createEvent(this, "createNewGuide", 7);
+    this.sortLogic = (a, b) => {
+      var _a, _b;
+      const orderA = (_a = a.order) !== null && _a !== void 0 ? _a : Number.MAX_VALUE;
+      const orderB = (_b = b.order) !== null && _b !== void 0 ? _b : Number.MAX_VALUE;
+      return orderA - orderB;
+    };
+    this.handleAddGuide = () => {
+      this.createNewGuide.emit();
+    };
+    this.mainGuide = undefined;
+    this.visibleGuides = [];
+    this.hiddenGuides = [];
+    this.guidesList = [];
+    this.selectedGuide = undefined;
+    this.mainGuideName = undefined;
+    this.messagesBuilder = undefined;
+  }
+  observeGuidesList(newGuides) {
+    this.initGuidesConfig(newGuides);
+  }
+  observeMainGuideName() {
+    this.initGuidesConfig(this.guidesList);
+  }
+  observeSelectedGuide(newGuide) {
+    this.guideSelected.emit(newGuide);
+  }
+  componentWillLoad() {
+    this.initGuidesConfig(this.guidesList);
+  }
+  getMessage(key, params) {
+    return this.messagesBuilder.getMessage(key, params);
+  }
+  initGuidesConfig(newGuides) {
+    const mainName = this.mainGuideName;
+    const isMain = (guide) => !!mainName && guide.name === mainName;
+    const visibleAux = newGuides.filter(guide => guide.visible && !isMain(guide));
+    const hiddenAux = newGuides.filter(guide => !guide.visible && !isMain(guide));
+    this.visibleGuides = [...visibleAux].sort(this.sortLogic);
+    this.hiddenGuides = [...hiddenAux].sort(this.sortLogic);
+    this.mainGuide = newGuides.find(g => isMain(g));
+  }
+  handleSelectGuide(guide, evt) {
+    evt.stopPropagation();
+    this.selectedGuide = guide;
+  }
+  toggleGuideVisibility(guide, evt) {
+    evt.stopPropagation();
+    const updatedGuide = Object.assign(Object.assign({}, guide), { visible: !guide.visible });
+    let visibleAux;
+    let hiddenAux;
+    if (guide.visible) {
+      visibleAux = this.visibleGuides.filter(g => g.name !== guide.name);
+      hiddenAux = [...this.hiddenGuides, updatedGuide];
+    }
+    else {
+      visibleAux = [...this.visibleGuides, updatedGuide];
+      hiddenAux = this.hiddenGuides.filter(g => g.name !== guide.name);
+    }
+    this.applyGuidesUpdate([...visibleAux, ...hiddenAux]);
+  }
+  adjustListOrder(guideList) {
+    return guideList.map((g, index) => (Object.assign(Object.assign({}, g), { order: index })));
+  }
+  applyGuidesUpdate(updatedGuideList) {
+    let newGuidesList = this.adjustListOrder(updatedGuideList);
+    if (this.mainGuide) {
+      newGuidesList = [this.mainGuide, ...newGuidesList];
+    }
+    if (!ObjectUtils.equals(newGuidesList, this.guidesList)) {
+      this.guideListChanged.emit(newGuidesList);
+    }
+  }
+  async handleDeleteGuide(guide, e) {
+    e.stopPropagation();
+    const title = this.getMessage('snkFormConfig.confirm.title');
+    const message = this.getMessage('snkFormConfig.confirm.deleteGuide').replace('{0}', guide.label);
+    const canRemove = await ApplicationUtils.confirm(title, message);
+    if (!canRemove)
+      return;
+    this.guideDeleted.emit(guide);
+    const deletedMessage = this.getMessage('snkFormConfig.info.successfullyGuideDeleted').replace('{0}', guide.label);
+    ApplicationUtils.info(deletedMessage);
+  }
+  buildTabs() {
+    return this.visibleGuides.map((guide, i) => ({
+      tabKey: guide.name,
+      label: guide.label,
+      index: i,
+    }));
+  }
+  handleTabChange(tab) {
+    var _a;
+    if (!tab)
+      return;
+    const guide = this.guidesList.find(g => g.name === tab.tabKey);
+    if (guide && guide.name !== ((_a = this.selectedGuide) === null || _a === void 0 ? void 0 : _a.name)) {
+      this.selectedGuide = guide;
+    }
+  }
+  handleReorder(reorderedTabs) {
+    const visibleReordered = reorderedTabs
+      .map(t => this.visibleGuides.find(g => g.name === t.tabKey))
+      .filter(Boolean);
+    this.applyGuidesUpdate([...visibleReordered, ...this.hiddenGuides]);
+  }
+  renderTabActions() {
+    return this.visibleGuides.map((guide, i) => {
+      const slotIndex = i;
+      const isProtected = guide.isCustom || guide.isDetail;
+      return (h("div", { key: guide.name, slot: `tab${slotIndex}`, class: "tab-actions", onClick: (e) => e.stopPropagation() }, h("ez-button", { mode: "icon", class: "ez-button--tertiary tab-action-btn", size: "small", iconName: "eye-off", title: this.getMessage('snkFormConfig.guidesConfigurator.actions.hide'), onClick: (e) => this.toggleGuideVisibility(guide, e) }), h("ez-button", { mode: "icon", class: "ez-button--tertiary tab-action-btn", size: "small", iconName: "delete", isDisabled: isProtected, title: isProtected
+          ? this.getMessage('snkFormConfig.guidesConfigurator.canNotDeleteCustomGuide')
+          : this.getMessage('snkFormConfig.guidesConfigurator.actions.delete'), onClick: (e) => this.handleDeleteGuide(guide, e) })));
+    });
+  }
+  renderHiddenGuidesBar() {
+    if (this.hiddenGuides.length === 0)
+      return null;
+    return (h("div", { class: "hidden-guides-bar" }, h("span", { class: "hidden-guides-label" }, this.getMessage('snkFormConfig.guidesConfigurator.hiddenGuides'), ":"), this.hiddenGuides.map(guide => {
+      const isProtected = guide.isCustom || guide.isDetail;
+      return (h("div", { key: guide.name, class: "hidden-guide-chip", title: guide.label }, h("span", { class: "chip-label", onClick: (e) => this.handleSelectGuide(guide, e) }, guide.label), h("ez-button", { mode: "icon", class: "ez-button--tertiary", size: "small", iconName: "eye", title: this.getMessage('snkFormConfig.guidesConfigurator.actions.show'), onClick: (e) => this.toggleGuideVisibility(guide, e) }), h("ez-button", { mode: "icon", class: "ez-button--tertiary", size: "small", iconName: "delete", isDisabled: isProtected, title: isProtected
+          ? this.getMessage('snkFormConfig.guidesConfigurator.canNotDeleteCustomGuide')
+          : this.getMessage('snkFormConfig.guidesConfigurator.actions.delete'), onClick: (e) => this.handleDeleteGuide(guide, e) })));
+    })));
+  }
+  render() {
+    var _a;
+    const tabs = this.buildTabs();
+    return (h("div", { class: "guides-tab-configurator" }, h("div", { class: "tab-bar-row" }, h("ez-tabselector", { class: "guides-tabselector", tabs: tabs, selectedTab: (_a = this.selectedGuide) === null || _a === void 0 ? void 0 : _a.name, reorderable: true, onEzChange: (evt) => this.handleTabChange(evt.detail), onEzReorder: (evt) => this.handleReorder(evt.detail) }, this.renderTabActions()), h("ez-button", { label: this.getMessage('snkFormConfig.guidesConfigurator.createNewGuide'), variant: "secondary", size: "medium", leftIconName: "plus", onClick: this.handleAddGuide })), this.renderHiddenGuidesBar()));
+  }
+  static get watchers() { return {
+    "guidesList": ["observeGuidesList"],
+    "mainGuideName": ["observeMainGuideName"],
+    "selectedGuide": ["observeSelectedGuide"]
+  }; }
+  static get style() { return snkDynaformGuidesConfiguratorCss; }
+}, [2, "snk-dynaform-guides-configurator", {
+    "guidesList": [16],
+    "selectedGuide": [16],
+    "mainGuideName": [1, "main-guide-name"],
+    "messagesBuilder": [1040],
+    "mainGuide": [32],
+    "visibleGuides": [32],
+    "hiddenGuides": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-dynaform-guides-configurator"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-dynaform-guides-configurator":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SnkDynaformGuidesConfigurator);
+      }
+      break;
+  } });
+}
+
+export { SnkDynaformGuidesConfigurator as S, defineCustomElement as d };

package/dist/components/snk-dynaform-guides-view.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SnkDynaformGuidesView extends Components.SnkDynaformGuidesView, HTMLElement {}
+export const SnkDynaformGuidesView: {
+  prototype: SnkDynaformGuidesView;
+  new (): SnkDynaformGuidesView;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/snk-dynaform-guides-view.js

@@ -0,0 +1,6 @@
+import { b as SnkDynaformGuidesViewer, d as defineCustomElement$1 } from './snk-dynaform-detail-view2.js';
+
+const SnkDynaformGuidesView = SnkDynaformGuidesViewer;
+const defineCustomElement = defineCustomElement$1;
+
+export { SnkDynaformGuidesView, defineCustomElement };

package/dist/components/snk-dynaform.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SnkDynaform extends Components.SnkDynaform, HTMLElement {}
+export const SnkDynaform: {
+  prototype: SnkDynaform;
+  new (): SnkDynaform;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;