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

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

@@ -0,0 +1,557 @@
+import { ApplicationContext, ObjectUtils } from '@sankhyalabs/core';
+import { buildFormConfigFromDataUnit } from '@sankhyalabs/ezui/dist/collection/utils/form';
+import { h, Host } from '@stencil/core';
+import { ApplicationUtils } from '@sankhyalabs/ezui/dist/collection/utils';
+import { UserConfigType } from '../../lib/http/data-fetcher/fetchers/form-config-fetcher';
+import { GROUP_NAMES, TAB_NAMES } from '../../lib/utils/constants';
+import { buildChildrenGuides, buildCustomGuides, buildGuides, buildGuidesMap, buildNewGuideName, getFieldsToSave, updateTabInFieldsFromGroupList, } from './FormConfigHelper';
+export class SnkDynaformFormConfig {
+  constructor() {
+    this.guidesMap = new Map();
+    this.availableFields = [];
+    this.guidesList = [];
+    this.groupsList = [];
+    this.mainGuide = undefined;
+    this.mainGroupsList = [];
+    this.selectedGuide = undefined;
+    this._formConfig = {};
+    this.configOptions = [];
+    this.originalConfigSelected = undefined;
+    this.configSelected = undefined;
+    this.hasChanges = false;
+    this.optionConfigChanged = false;
+    this.dataUnit = undefined;
+    this.configManager = undefined;
+    this.ignoreReadOnlyFormFields = undefined;
+    this.messagesBuilder = undefined;
+    this.customGuidesConfig = [];
+  }
+  handleFieldConfigChanged() {
+    this.hasChanges = true;
+  }
+  async handleFormConfigOptionSelected({ detail }) {
+    this.configSelected = detail;
+    this.selectedGuide = undefined;
+    await this.loadConfigByUser();
+    this.optionConfigChanged = !ObjectUtils.equals(this.configSelected, this.originalConfigSelected);
+    if (this.configSelected.origin === UserConfigType.DEFAULT) {
+      this.hasChanges = false;
+    }
+  }
+  async handleAddFieldToGuide({ detail: fieldItem }) {
+    var _a, _b;
+    const hasValidSecondaryGuide = this.selectedGuide
+      && !this.selectedGuide.isCustom
+      && !this.selectedGuide.isDetail;
+    if (!hasValidSecondaryGuide && this.selectedGuide && (this.selectedGuide.isCustom || this.selectedGuide.isDetail)) {
+      this.showCanNotAddFieldToGuideDialog();
+      return;
+    }
+    if (!hasValidSecondaryGuide && !this.mainGuide) {
+      this.showNoGuideSelectedDialog();
+      return;
+    }
+    this.availableFields = [...this.availableFields.filter(f => f.name !== fieldItem.name)];
+    if (hasValidSecondaryGuide) {
+      await ((_a = this.refFieldsLayout) === null || _a === void 0 ? void 0 : _a.addFieldToLayout(fieldItem));
+    }
+    else {
+      await ((_b = this.refMainFieldsLayout) === null || _b === void 0 ? void 0 : _b.addFieldToLayout(fieldItem));
+    }
+  }
+  async handleSetFieldAsAvailable({ detail }) {
+    const hasField = this.availableFields.some(f => f.name === detail.name);
+    if (hasField)
+      return;
+    this.availableFields = [...this.availableFields, detail];
+  }
+  async handleRemoveFieldFromAvailable({ detail }) {
+    this.availableFields = this.availableFields.filter(f => f.name !== detail.name);
+  }
+  observeSelectedGuide(guide) {
+    var _a, _b;
+    if ((guide === null || guide === void 0 ? void 0 : guide.name) && ((_a = this.mainGuide) === null || _a === void 0 ? void 0 : _a.name) && guide.name === this.mainGuide.name) {
+      this.selectedGuide = undefined;
+      return;
+    }
+    const guideGroups = (_b = this.guidesMap.get(guide === null || guide === void 0 ? void 0 : guide.name)) !== null && _b !== void 0 ? _b : [];
+    this.groupsList = [...guideGroups];
+  }
+  observeConfigManager() {
+    this.loadFormConfig();
+  }
+  showNoGuideSelectedDialog() {
+    const title = this.getMessage('snkFormConfig.noGuideSelected.title');
+    const message = this.getMessage('snkFormConfig.noGuideSelected.message');
+    ApplicationUtils.alert(title, message);
+  }
+  showCanNotAddFieldToGuideDialog() {
+    const title = this.getMessage('snkFormConfig.canNotAddFieldToGuide.title');
+    const message = this.getMessage('snkFormConfig.canNotAddFieldToGuide.message');
+    ApplicationUtils.alert(title, message);
+  }
+  /**
+   * Conforme mecanismo de mensagens, é possível customizar as mensagens dos blocos de construção
+   * através de um pequeno modulo na estrutura da aplicação:
+   * - Criar um arquivo no seguinte caminho: /messages/appmessages.msg.js.
+   * Para conhecer os detalhes do módulo, vide o arquivo neste projeto "/src/lib/message/resources/snk-form.msg.ts"
+   */
+  getMessage(key, params) {
+    return this.messagesBuilder.getMessage(key, params);
+  }
+  async initializeUserConfig() {
+    if (this.configManager == undefined)
+      return;
+    try {
+      const userConfig = await this.configManager.fetchUserAvailableConfigs();
+      this.configOptions = userConfig;
+      const isDefault = this._formConfig != undefined ? this._formConfig.defaultConfiguration : true;
+      const origin = (isDefault ? UserConfigType.DEFAULT : UserConfigType.USER);
+      this.configSelected = userConfig === null || userConfig === void 0 ? void 0 : userConfig.find((config) => config.origin === origin);
+      this.originalConfigSelected = userConfig === null || userConfig === void 0 ? void 0 : userConfig.find((config) => config.origin === origin);
+    }
+    catch (error) {
+      console.error(this.getMessage('snkFormConfig.errors.failFetchUserConfig'));
+      console.error(error);
+    }
+  }
+  async loadConfigByUser() {
+    if (!this.configManager || !this.configSelected)
+      return;
+    if (this.isConfigDefaultSelected()) {
+      await this.handleLoadDefaultConfig();
+    }
+    else {
+      this.loadFormConfig();
+    }
+  }
+  async handleLoadDefaultConfig() {
+    const defaultConfig = await this.configManager.fetchDefaultConfig();
+    if (defaultConfig) {
+      this.loadFormConfig(defaultConfig);
+      return;
+    }
+    const emptyConfig = this.configManager.getEmptyConfig();
+    if (emptyConfig) {
+      this.loadFormConfig(emptyConfig);
+    }
+  }
+  isConfigDefaultSelected() {
+    return this.configSelected.origin === UserConfigType.DEFAULT;
+  }
+  loadFormConfig(config) {
+    this._formConfig = config ? config : this.getConfig();
+    this.loadGuides();
+    this.initializeAvailableFields();
+  }
+  initializeAvailableFields() {
+    var _a;
+    if (((_a = this._formConfig) === null || _a === void 0 ? void 0 : _a.fields) == undefined)
+      return;
+    const fieldsFormConfig = [...this._formConfig.fields];
+    const fieldsMetadata = this.dataUnit.metadata.fields;
+    this.availableFields = fieldsMetadata.filter(({ name: fieldName, visible: fieldVisible, properties }) => {
+      const hasCfg = fieldsFormConfig.some(({ name: fieldFormName }) => fieldFormName === fieldName);
+      /**
+       * Quando a visibilidade de um campo é alterada pelo dataunit, mas o desenvolvedor deseja que o mesmo continue
+       * sendo apresentado no configurador, precisamos fazer essa tratativa, verificando se o campo não tem configuração
+       */
+      if (!hasCfg && properties.visibleOnConfig === true && !fieldVisible)
+        return properties.visibleOnConfig;
+      return fieldVisible === true && hasCfg === false;
+    });
+  }
+  getInitialOrder(guidesList) {
+    var _a, _b;
+    if (Array.isArray((_a = this._formConfig) === null || _a === void 0 ? void 0 : _a.tabs)) {
+      return (_b = this._formConfig.tabs) === null || _b === void 0 ? void 0 : _b.length;
+    }
+    if (guidesList.length > 0) {
+      return Math.max(...guidesList.map(g => g.order));
+    }
+    return 0;
+  }
+  loadGuides() {
+    var _a, _b, _c, _d;
+    this.guidesList = [];
+    this.guidesList.push(...buildGuides(this._formConfig, this.getMessage('snkFormConfig.form.mainArea'), this.dataUnit, TAB_NAMES.general));
+    this.guidesList.push(...buildChildrenGuides(this.dataUnit, this.getInitialOrder(this.guidesList), this.guidesList));
+    this.guidesList.push(...buildCustomGuides(this.customGuidesConfig, this.guidesList));
+    this.guidesMap = buildGuidesMap((_a = this._formConfig) === null || _a === void 0 ? void 0 : _a.fields, this.guidesList, this.dataUnit, TAB_NAMES.general);
+    this.mainGuide = this.guidesList.find(g => g.name === TAB_NAMES.main);
+    this.mainGroupsList = ((_b = this.mainGuide) === null || _b === void 0 ? void 0 : _b.name)
+      ? [...((_d = (_c = this.guidesMap) === null || _c === void 0 ? void 0 : _c.get(this.mainGuide.name)) !== null && _d !== void 0 ? _d : [])]
+      : [];
+    this.ensureSelectedGuide();
+  }
+  ensureSelectedGuide() {
+    const stillValid = this.selectedGuide
+      && this.guidesList.some(g => g.name === this.selectedGuide.name);
+    if (stillValid)
+      return;
+    const firstSelectable = this.guidesList
+      .filter(g => { var _a; return g.visible && g.name !== ((_a = this.mainGuide) === null || _a === void 0 ? void 0 : _a.name); })
+      .sort((a, b) => { var _a, _b; return ((_a = a.order) !== null && _a !== void 0 ? _a : Number.MAX_VALUE) - ((_b = b.order) !== null && _b !== void 0 ? _b : Number.MAX_VALUE); })[0];
+    this.selectedGuide = firstSelectable;
+  }
+  getConfig() {
+    let config = this.configManager.getConfig(this.dataUnit, false);
+    if (config.fields && config.fields.length === 0) {
+      config = undefined;
+    }
+    if (config == undefined) {
+      config = buildFormConfigFromDataUnit(this.dataUnit);
+    }
+    return ObjectUtils.copy(config);
+  }
+  handleSelectGuide({ detail: selectedGuide }) {
+    this.selectedGuide = selectedGuide;
+  }
+  handleLayoutChanged({ detail: newGroupList }) {
+    if (!this.selectedGuide)
+      return;
+    this.hasChanges = true;
+    this.groupsList = [...newGroupList];
+    this.guidesMap.set(this.selectedGuide.name, [...newGroupList]);
+  }
+  handleMainLayoutChanged({ detail: newGroupList }) {
+    var _a;
+    if (!((_a = this.mainGuide) === null || _a === void 0 ? void 0 : _a.name))
+      return;
+    this.hasChanges = true;
+    this.mainGroupsList = [...newGroupList];
+    this.guidesMap.set(this.mainGuide.name, [...newGroupList]);
+  }
+  getIsDefaultConfig() {
+    var _a;
+    const optionSelected = (_a = this.configSelected) === null || _a === void 0 ? void 0 : _a.origin;
+    return optionSelected === UserConfigType.DEFAULT
+      && this.optionConfigChanged === true
+      && this.hasChanges === false;
+  }
+  getTabsToSave() {
+    return this.guidesList.map(tab => {
+      return {
+        name: tab.name,
+        label: tab.name === TAB_NAMES.main ? tab.name : tab.label,
+        order: tab.name === TAB_NAMES.main ? 0 : tab.order,
+        visible: tab.visible,
+      };
+    });
+  }
+  async handleSaveConfig() {
+    var _a;
+    const savedConfig = await this.configManager.saveConfig(this.buildConfigToSave());
+    this.configSelected = (_a = this.configOptions) === null || _a === void 0 ? void 0 : _a.find((config) => {
+      return config.origin === (this.hasChanges ? UserConfigType.USER : UserConfigType.DEFAULT);
+    });
+    this.originalConfigSelected = this.configSelected;
+    this.hasChanges = false;
+    this.optionConfigChanged = false;
+    ApplicationUtils.info(this.getMessage('snkFormConfig.info.successfullyConfigSaved'), { iconName: 'check' });
+    this.configChange.emit(savedConfig);
+  }
+  buildConfigToSave() {
+    const formConfig = ObjectUtils.copy(this._formConfig);
+    formConfig.tabs = this.getTabsToSave();
+    formConfig.fields = getFieldsToSave(this.guidesMap);
+    formConfig.defaultConfiguration = this.getIsDefaultConfig();
+    return formConfig;
+  }
+  handleAvailableFieldListChanged({ detail: updatedList }) {
+    this.availableFields = [...updatedList];
+  }
+  handleSetFieldListAsAvailable({ detail: updatedList }) {
+    this.availableFields = [...this.availableFields, ...updatedList];
+  }
+  handleGuideDeleted({ detail: guide }) {
+    var _a, _b;
+    const guideName = guide.name;
+    const guideGroups = (_a = this.guidesMap.get(guideName)) !== null && _a !== void 0 ? _a : [];
+    const fieldsToAvailable = [];
+    guideGroups.forEach(group => fieldsToAvailable.push(...group.fields));
+    this.availableFields = [...this.availableFields, ...fieldsToAvailable];
+    this.guidesList = [...this.guidesList.filter(g => g.name !== guideName)];
+    this.guidesMap.delete(guideName);
+    if (((_b = this.selectedGuide) === null || _b === void 0 ? void 0 : _b.name) === guideName) {
+      this.selectedGuide = undefined;
+      this.ensureSelectedGuide();
+    }
+    this.hasChanges = true;
+  }
+  handleGuideListChanged({ detail: updatedList }) {
+    this.hasChanges = true;
+    this.guidesList = [...updatedList];
+  }
+  handleGuideRenamed({ detail: updatedName }) {
+    var _a;
+    const previousGuide = this.selectedGuide;
+    if (!(previousGuide === null || previousGuide === void 0 ? void 0 : previousGuide.name))
+      return;
+    const previousName = previousGuide.name;
+    const guideGroups = (_a = this.guidesMap.get(previousName)) !== null && _a !== void 0 ? _a : [];
+    const updatedGroups = updateTabInFieldsFromGroupList(guideGroups, updatedName);
+    this.guidesMap.delete(previousName);
+    this.guidesMap.set(updatedName, updatedGroups);
+    const updatedGuide = {
+      name: updatedName,
+      label: updatedName,
+      visible: previousGuide.visible,
+      order: previousGuide.order,
+    };
+    this.guidesList = [...this.guidesList.map(guide => (guide.name === previousName) ? updatedGuide : guide)];
+    this.groupsList = [...updatedGroups];
+    this.selectedGuide = updatedGuide;
+    this.hasChanges = true;
+  }
+  handleCreateNewGuide() {
+    const newGuideName = buildNewGuideName(this.guidesList, this.getMessage.bind(this));
+    const newGuide = {
+      name: newGuideName,
+      label: newGuideName,
+      visible: true,
+      order: this.guidesList.length + 1,
+    };
+    const newGuideFixedGroup = {
+      name: GROUP_NAMES.noGroup,
+      fields: [],
+    };
+    this.guidesList = [...this.guidesList, newGuide];
+    this.guidesMap.set(newGuideName, [newGuideFixedGroup]);
+    this.selectedGuide = newGuide;
+    this.hasChanges = true;
+  }
+  getGuideNames() {
+    return [
+      ...this.guidesList.map(g => g.name.toLowerCase()),
+      this.getMessage('snkFormConfig.form.mainArea').toLowerCase(),
+    ];
+  }
+  async componentWillRender() {
+    if (this.messagesBuilder == undefined) {
+      const application = ApplicationContext.getContextValue('__SNK__APPLICATION__');
+      this.messagesBuilder = application.messagesBuilder;
+    }
+  }
+  async componentWillLoad() {
+    this.loadFormConfig();
+    await this.initializeUserConfig();
+  }
+  render() {
+    var _a;
+    return (h(Host, null, h("snk-dynaform-config-header", { configOptions: this.configOptions, selectedConfig: this.configSelected, messagesBuilder: this.messagesBuilder, hasChanges: this.hasChanges, optionConfigChanged: this.optionConfigChanged, onConfigClose: () => this.configClose.emit(), onSaveConfig: async () => await this.handleSaveConfig() }), h("div", { class: "form-config-body" }, h("div", { class: "form-config-layout" }, h("snk-dynaform-fields-selector", { dataUnit: this.dataUnit, availableFields: this.availableFields, onFieldListChanged: this.handleAvailableFieldListChanged.bind(this), messagesBuilder: this.messagesBuilder }), h("div", { class: "main-editing-area" }, this.mainGuide && (h("div", { class: "main-fields-section" }, h("snk-dynaform-fields-layout", { ref: ref => this.refMainFieldsLayout = ref, selectedGuide: this.mainGuide, guideNames: this.getGuideNames(), groupsList: this.mainGroupsList, messagesBuilder: this.messagesBuilder, dataUnit: this.dataUnit, isMainSection: true, onLayoutChanged: this.handleMainLayoutChanged.bind(this), onSetFieldListAsAvailable: this.handleSetFieldListAsAvailable.bind(this) }))), h("snk-dynaform-guides-configurator", { messagesBuilder: this.messagesBuilder, guidesList: this.guidesList, selectedGuide: this.selectedGuide, mainGuideName: (_a = this.mainGuide) === null || _a === void 0 ? void 0 : _a.name, onGuideSelected: this.handleSelectGuide.bind(this), onGuideListChanged: this.handleGuideListChanged.bind(this), onCreateNewGuide: this.handleCreateNewGuide.bind(this), onGuideDeleted: this.handleGuideDeleted.bind(this) }), h("snk-dynaform-fields-layout", { ref: ref => this.refFieldsLayout = ref, selectedGuide: this.selectedGuide, guideNames: this.getGuideNames(), groupsList: this.groupsList, messagesBuilder: this.messagesBuilder, dataUnit: this.dataUnit, onGuideRenamed: this.handleGuideRenamed.bind(this), onLayoutChanged: this.handleLayoutChanged.bind(this), onSetFieldListAsAvailable: this.handleSetFieldListAsAvailable.bind(this) }))))));
+  }
+  static get is() { return "snk-dynaform-form-config"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-dynaform-form-config.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-dynaform-form-config.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "dataUnit": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DataUnit",
+          "resolved": "DataUnit",
+          "references": {
+            "DataUnit": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Reposit\u00F3rio de dados, controla a manipula\u00E7\u00E3o dos dados."
+        }
+      },
+      "configManager": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "SnkFormConfigManager",
+          "resolved": "SnkFormConfigManager",
+          "references": {
+            "SnkFormConfigManager": {
+              "location": "import",
+              "path": "./SnkFormConfigManager"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Campos de configura\u00E7\u00E3o de formul\u00E1rio."
+        }
+      },
+      "ignoreReadOnlyFormFields": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Ignora os campos \"somente leitura\" no modo de inser\u00E7\u00E3o."
+        },
+        "attribute": "ignore-read-only-form-fields",
+        "reflect": 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": "Respons\u00E1vel por flexibilizar e padronizar o uso de mensagens nos blocos de constru\u00E7\u00E3o."
+        }
+      },
+      "customGuidesConfig": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<CustomGuideItem>",
+          "resolved": "CustomGuideItem[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "CustomGuideItem": {
+              "location": "import",
+              "path": "../snk-crud/subcomponents/snk-guides-viewer"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Informa\u00E7\u00F5es das guias personalizadas."
+        },
+        "defaultValue": "[]"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "availableFields": {},
+      "guidesList": {},
+      "groupsList": {},
+      "mainGuide": {},
+      "mainGroupsList": {},
+      "selectedGuide": {},
+      "_formConfig": {},
+      "configOptions": {},
+      "originalConfigSelected": {},
+      "configSelected": {},
+      "hasChanges": {},
+      "optionConfigChanged": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "configClose",
+        "name": "configClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido ao fechar as configura\u00E7\u00F5es."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "configChange",
+        "name": "configChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido ao salvar as configura\u00E7\u00F5es."
+        },
+        "complexType": {
+          "original": "IFormConfig",
+          "resolved": "IFormConfig",
+          "references": {
+            "IFormConfig": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/types/utils/form/interfaces"
+            }
+          }
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "selectedGuide",
+        "methodName": "observeSelectedGuide"
+      }, {
+        "propName": "configManager",
+        "methodName": "observeConfigManager"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "fieldConfigChanged",
+        "method": "handleFieldConfigChanged",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "formConfigOptionSelected",
+        "method": "handleFormConfigOptionSelected",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "addFieldToGuide",
+        "method": "handleAddFieldToGuide",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "setFieldAsAvailable",
+        "method": "handleSetFieldAsAvailable",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "removeFieldFromAvailable",
+        "method": "handleRemoveFieldFromAvailable",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/snk-dynaform-form-config/snk-dynaform-guides-configurator/snk-dynaform-guides-configurator.css

@@ -0,0 +1,80 @@
+.guides-tab-configurator {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: var(--spece--8, 8px);
+}
+
+.tab-bar-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space--12, 12px);
+  width: 100%;
+}
+
+.guides-tabselector {
+  flex: 1;
+  min-width: 0;
+}
+
+.tab-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space--2, 2px);
+  margin-left: var(--space--6, 6px);
+}
+
+.tab-actions ez-button {
+  width: var(--space--20, 20px);
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+
+.hidden-guides-bar {
+  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 {
+  font-size: var(--space--12, 12px);
+  color: #afb6c0;
+  white-space: nowrap;
+}
+
+.hidden-guide-chip {
+  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:hover {
+  background: #e2eaf4;
+}
+
+.hidden-guide-chip ez-button {
+  width: var(--space--20, 20px);
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+
+.chip-label {
+  font-size: 13px;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}