@sankhyalabs/sankhyablocks 8.16.0-dev.11 → 8.16.0-dev.111

package/dist/components/snk-simple-form-config.d.ts

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

package/dist/components/snk-simple-form-config.js

@@ -0,0 +1,6 @@
+import { S as SnkSimpleFormConfig$1, d as defineCustomElement$1 } from './snk-simple-form-config2.js';
+
+const SnkSimpleFormConfig = SnkSimpleFormConfig$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SnkSimpleFormConfig, defineCustomElement };

package/dist/components/snk-simple-form-config2.js

@@ -0,0 +1,121 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import './DataFetcher.js';
+import './ISave.js';
+import '@sankhyalabs/core';
+import '@sankhyalabs/ezui/dist/collection/utils/constants';
+import '@sankhyalabs/core/dist/dataunit/metadata/UnitMetadata';
+import './dataunit-fetcher.js';
+import './filter-item-type.enum.js';
+import { F as FormConfigFetcher } from './form-config-fetcher.js';
+import './constants.js';
+
+const snkSimpleFormConfigCss = ":host{display:block}.config-container{display:flex;flex-direction:column;align-items:center;justify-content:space-between}.config-lists{margin-bottom:12px}.config-actions{display:flex;flex-direction:row;justify-content:flex-end;width:100%;gap:12px}";
+
+const SnkSimpleFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.snkConfigSaved = createEvent(this, "snkConfigSaved", 7);
+    this._formConfigFetcher = new FormConfigFetcher();
+    this.fieldsToSave = [];
+    this.dataUnit = undefined;
+    this.configName = undefined;
+    this.avaliableFields = [];
+    this.selectedFields = [];
+  }
+  /**
+   * Responsável por abrir o configurador.
+   */
+  async show() {
+    var _a;
+    await ((_a = this.ezDoubleListRef) === null || _a === void 0 ? void 0 : _a.resetSelectedLists());
+    await this.initializeFormConfig();
+    this.ezPopupRef.opened = true;
+  }
+  ;
+  async initializeFormConfig() {
+    if (!this.configName)
+      return;
+    const allFields = this.getAllVisibleFieldsFromDataUnit();
+    const displayedFieldNameList = await this.getConfig();
+    //Quando não retorna dados, é por quê não existe configuração do usuário salva.
+    if (displayedFieldNameList.length === 0) {
+      this.avaliableFields = [];
+      this.selectedFields = [...allFields];
+      this.fieldsToSave = [...this.selectedFields];
+      return;
+    }
+    const selectedFieldsAux = this.sortDisplayedFields(displayedFieldNameList, allFields);
+    const avaliableFieldsAux = allFields.filter(field => !displayedFieldNameList.includes(field.id));
+    this.avaliableFields = [...avaliableFieldsAux];
+    this.selectedFields = [...selectedFieldsAux];
+    this.fieldsToSave = [...this.selectedFields];
+  }
+  async getConfig() {
+    const fieldList = await this._formConfigFetcher.fetchSimpleFormConfig(this.configName);
+    return [...this.removeDuplicates(fieldList)];
+  }
+  removeDuplicates(strings) {
+    return strings.filter((item, index) => strings.indexOf(item) === index);
+  }
+  sortDisplayedFields(displayedFieldNameList, allFields) {
+    const selectedFieldsAux = [];
+    //É preciso garantir a ordem na qual os campos vieram na resposta do fetchSimpleFormConfig.
+    displayedFieldNameList.forEach(fieldName => {
+      const field = allFields.find(field => field.id === fieldName);
+      if (!field)
+        return;
+      selectedFieldsAux.push(field);
+    });
+    return selectedFieldsAux;
+  }
+  getAllVisibleFieldsFromDataUnit() {
+    var _a, _b, _c;
+    const visibleFields = ((_c = (_b = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.fields) !== null && _c !== void 0 ? _c : []).filter(field => field.visible);
+    return visibleFields.map(field => {
+      return { id: field.name, label: field.label };
+    });
+  }
+  close() {
+    this.ezPopupRef.opened = false;
+  }
+  async handleResetConfigs() {
+    await this._formConfigFetcher.restoreFormConfig(this.configName);
+    await this.initializeFormConfig();
+    await this.handleSave();
+  }
+  handleCancel() {
+    this.close();
+  }
+  async handleSave() {
+    const saveList = this.fieldsToSave.map(field => field.id);
+    await this._formConfigFetcher.saveSimpleFormConfig(this.configName, saveList);
+    this.close();
+    this.snkConfigSaved.emit();
+  }
+  render() {
+    return (h("ez-popup", { ref: (ref) => this.ezPopupRef = ref, heightMode: 'auto', size: 'auto', ezTitle: 'Configurar formul\u00E1rio' }, h("div", { class: 'config-container' }, h("div", { class: 'config-lists' }, h("ez-double-list", { ref: (ref) => this.ezDoubleListRef = ref, leftList: this.avaliableFields, leftTitle: 'Campos disponíveis', rightList: this.selectedFields, rightTitle: 'Campos selecionados', onEzRightListChanged: ({ detail }) => this.fieldsToSave = [...detail], entityLabel: 'campo', entityLabelPlural: 'campos' })), h("div", { class: 'config-actions' }, h("ez-button", { label: 'Restaurar', onClick: this.handleResetConfigs.bind(this), size: 'small' }), h("ez-button", { label: 'Cancelar', onClick: this.handleCancel.bind(this), size: 'small' }), h("ez-button", { label: 'Salvar', class: 'ez-button--primary', onClick: this.handleSave.bind(this), size: 'small' })))));
+  }
+  static get style() { return snkSimpleFormConfigCss; }
+}, [0, "snk-simple-form-config", {
+    "dataUnit": [16],
+    "configName": [1, "config-name"],
+    "avaliableFields": [32],
+    "selectedFields": [32],
+    "show": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-simple-form-config"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-simple-form-config":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SnkSimpleFormConfig);
+      }
+      break;
+  } });
+}
+
+export { SnkSimpleFormConfig as S, defineCustomElement as d };

package/dist/components/snk-tab-config2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import { ApplicationContext, ElementIDUtils } from '@sankhyalabs/core';
-import { C as CONFIG_EVENTS, b as CONFIG_SORTABLE_EVENTS, K as KEY_EVENTS, d as TYPE_ACTIONS, c as TAB_NAMES } from './constants.js';
+import { C as CONFIG_EVENTS, c as CONFIG_SORTABLE_EVENTS, K as KEY_EVENTS, e as TYPE_ACTIONS, d as TAB_NAMES } from './constants.js';
 
 class AbstractEvent {
 

package/dist/components/snk-taskbar2.js

@@ -1,12 +1,13 @@
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
-import { Action, StringUtils, ApplicationContext, OVERFLOWED_CLASS_NAME, OverflowWatcher, OverflowDirection, ElementIDUtils } from '@sankhyalabs/core';
+import { Action, LockManager, LockManagerOperation, SilentException, StringUtils, ApplicationContext, OVERFLOWED_CLASS_NAME, OverflowWatcher, OverflowDirection, ElementIDUtils } from '@sankhyalabs/core';
 import { A as AuthorizationConfig } from './AuthorizationConfig.js';
 import { P as PresentationMode } from './ISave.js';
 import { s as store } from './index2.js';
-import { d as defineCustomElement$4 } from './snk-actions-button2.js';
-import { d as defineCustomElement$3 } from './snk-data-exporter2.js';
-import { d as defineCustomElement$2 } from './snk-exporter-email-sender2.js';
-import { d as defineCustomElement$1 } from './taskbar-actions-button2.js';
+import { d as defineCustomElement$5 } from './snk-actions-button2.js';
+import { d as defineCustomElement$4 } from './snk-data-exporter2.js';
+import { d as defineCustomElement$3 } from './snk-exporter-email-sender2.js';
+import { d as defineCustomElement$2 } from './taskbar-actions-button2.js';
+import { d as defineCustomElement$1 } from './taskbar-split-button2.js';
 
 var TaskbarElement;
 (function (TaskbarElement) {
@@ -27,6 +28,7 @@ var TaskbarElement;
   TaskbarElement["DATA_EXPORTER"] = "DATA_EXPORTER";
   TaskbarElement["ATTACH"] = "ATTACH";
   TaskbarElement["ACTIONS_BUTTON"] = "ACTIONS_BUTTON";
+  TaskbarElement["UPDATE_MULTIPLE"] = "UPDATE_MULTIPLE";
 })(TaskbarElement || (TaskbarElement = {}));
 var AuthorizationElements;
 (function (AuthorizationElements) {
@@ -66,6 +68,8 @@ const buildElem = (element, className, dataElementId, getTitle, action, isEnable
       return iconButton("sync", element, className, dataElementId, title, action, isEnabled);
     case TaskbarElement.UPDATE:
       return iconButton("edit", element, className, dataElementId, title, action, isEnabled);
+    case TaskbarElement.UPDATE_MULTIPLE:
+      return iconButton("edit-table", element, className, dataElementId, title, action, isEnabled);
     case TaskbarElement.CLONE:
       return iconButton("copy", element, className, dataElementId, title, action, isEnabled);
     case TaskbarElement.REMOVE:
@@ -91,6 +95,9 @@ const buildElem = (element, className, dataElementId, getTitle, action, isEnable
     case TaskbarElement.FORM_MODE:
       return iconButton("list", element, className, dataElementId, title, action, isEnabled);
     case TaskbarElement.CONFIGURATOR:
+      if ((actions === null || actions === void 0 ? void 0 : actions.length) > 0) {
+        return splitButton("settings-inverted", element, className, title, dataElementId, isEnabled, actions, action);
+      }
       return iconButton("settings-inverted", element, className, dataElementId, title, action, isEnabled);
     case TaskbarElement.MORE_OPTIONS:
       return actionButton(element, className, dataElementId, title, isEnabled, actions, action);
@@ -115,6 +122,11 @@ function iconTextButton(iconName, name, className, dataElementId, text, title, a
   return h("ez-button", { key: dataElementId, title: title, label: text, size: "small", class: className, "data-taskbar-label": text, "data-taskbar-icon": iconName, "data-taskbar-element": name, "data-element-id": dataElementId, enabled: isEnabled(name), onClick: () => action(name) },
     h("ez-icon", { class: "ez-padding-right--small", slot: "leftIcon", iconName: iconName }));
 }
+function splitButton(iconName, element, className, title, dataElementId, isEnabled, actions, action) {
+  return actions && actions.length > 0
+    ? h("taskbar-split-button", { iconName: iconName, class: className, key: dataElementId, "data-taskbar-icon": iconName, "data-taskbar-label": title, "data-taskbar-element": element, "data-element-id": dataElementId, enabled: isEnabled(element), actions: actions, title: title, action: () => action(element) })
+    : undefined;
+}
 function actionButton(element, className, dataElementId, title, isEnabled, actions, action) {
   return actions && actions.length > 0
     ? h("taskbar-actions-button", { class: className, key: dataElementId, title: title, "data-taskbar-element": element, "data-element-id": dataElementId, enabled: isEnabled(element), actions: actions, onTaskbarActionSelected: (evt) => action(evt.detail.value) })
@@ -128,11 +140,14 @@ const SnkTaskbar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.actionClick = createEvent(this, "actionClick", 7);
+    this.taskbarSaveLocker = createEvent(this, "taskbarSaveLocker", 7);
+    this.taskbarSaveUnlocker = createEvent(this, "taskbarSaveUnlocker", 7);
     this.TASKBAR_ITEM_ID_PREFIX = 'TASKBAR_ITEM_';
     this.TASKBAR_CUSTOM_ELEMENTS_CONTAINER_CLASS_NAME = 'taskbar-custom-elements-container';
     this.ACTIONS_BUTTON_TAG = 'TASKBAR-ACTIONS-BUTTON';
     this.NOT_OVERFLOW_ELEMENTS = ["moreOptions", "dataExporter_snkDataExporter", "actionsButton_snkActionsButton"];
     this._titleKeyByElement = {
+      [TaskbarElement.UPDATE_MULTIPLE]: "snkTaskbar.titleUpdateMultiple",
       [TaskbarElement.UPDATE]: "snkTaskbar.titleUpdate",
       [TaskbarElement.PREVIOUS]: "snkTaskbar.titlePrevious",
       [TaskbarElement.NEXT]: "snkTaskbar.titleNext",
@@ -151,8 +166,10 @@ const SnkTaskbar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.onSaveEvent = (action) => {
       switch (action.type) {
         case Action.FIELD_INVALIDATED:
+        case Action.INVALIDATE_CLEAN:
         case Action.DATA_SAVED:
         case Action.SAVING_ERROR:
+        case Action.SAVING_CANCELED:
           this._isWaitingForSave = false;
           break;
         case Action.SAVING_DATA:
@@ -178,6 +195,7 @@ const SnkTaskbar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.buttons = undefined;
     this.customButtons = undefined;
     this.actionsList = undefined;
+    this.actionsSettingsList = undefined;
     this.primaryButton = undefined;
     this.disabledButtons = undefined;
     this.dataUnit = undefined;
@@ -189,6 +207,16 @@ const SnkTaskbar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.getCustomElements(true);
     }
   }
+  handleTaskbarSaveLocker() {
+    if (this._isWaitingForSave !== true) {
+      this._isWaitingForSave = true;
+    }
+  }
+  handleTaskbarSaveUnlocker() {
+    if (this._isWaitingForSave === true) {
+      this._isWaitingForSave = false;
+    }
+  }
   hasToSearchCustomElements(event) {
     return this.customSlotId === event.detail && !this._slotContainer;
   }
@@ -207,6 +235,14 @@ const SnkTaskbar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this._hasToUpdateOverFlow = true;
     }
   }
+  observeIsWaitingForSave(newValue, oldValue) {
+    if (newValue == true && oldValue == false) {
+      this.taskbarSaveLocker.emit();
+    }
+    if (newValue == false && oldValue == true) {
+      this.taskbarSaveUnlocker.emit();
+    }
+  }
   // Internal methods
   elementsFromString(strButtons) {
     const elements = [];
@@ -251,42 +287,50 @@ const SnkTaskbar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return key ? (_a = this.messagesBuilder) === null || _a === void 0 ? void 0 : _a.getMessage(key, {}) : "";
   }
   elementClick(elem) {
-    if (this.dataUnit) {
-      switch (elem) {
-        case TaskbarElement.PREVIOUS:
-          this.dataUnit.previousRecord();
-          break;
-        case TaskbarElement.NEXT:
-          this.dataUnit.nextRecord();
-          break;
-        case TaskbarElement.REFRESH:
-          this.dataUnit.loadData();
-          break;
-        case TaskbarElement.CLONE:
-          this.dataUnit.copySelected();
-          break;
-        case TaskbarElement.REMOVE:
-          this.dataUnit.removeSelectedRecords();
-          break;
-        case TaskbarElement.INSERT:
-          this.dataUnit.addRecord();
-          break;
-        case TaskbarElement.CANCEL:
-          this.dataUnit.cancelEdition();
-          break;
-        case TaskbarElement.SAVE:
-          if (!this._isWaitingForSave) {
-            this._isWaitingForSave = true;
-            this.dataUnit.saveData()
-              .finally(() => {
-              this._isWaitingForSave = false;
-            });
-          }
-          break;
+    LockManager.whenResolve(this._element, LockManagerOperation.TASKBAR_CLICK).then(() => {
+      if (this.dataUnit) {
+        switch (elem) {
+          case TaskbarElement.PREVIOUS:
+            this.dataUnit.previousRecord();
+            break;
+          case TaskbarElement.NEXT:
+            this.dataUnit.nextRecord();
+            break;
+          case TaskbarElement.REFRESH:
+            this.dataUnit.loadData();
+            break;
+          case TaskbarElement.CLONE:
+            this.dataUnit.copySelected();
+            break;
+          case TaskbarElement.REMOVE:
+            this.dataUnit.removeSelectedRecords();
+            break;
+          case TaskbarElement.INSERT:
+            this.dataUnit.addRecord();
+            break;
+          case TaskbarElement.CANCEL:
+            this.dataUnit.cancelEdition();
+            break;
+          case TaskbarElement.SAVE:
+            if (!this._isWaitingForSave) {
+              this._isWaitingForSave = true;
+              this.dataUnit.saveData().catch((err) => {
+                if (err instanceof SilentException) {
+                  return;
+                }
+                else {
+                  throw err;
+                }
+              }).finally(() => {
+                this._isWaitingForSave = false;
+              });
+            }
+            break;
+        }
       }
-    }
-    if (this.isEnabled(elem))
-      this.actionClick.emit(elem);
+      if (this.isEnabled(elem))
+        this.actionClick.emit(elem);
+    });
   }
   isEnabled(elem) {
     if (!this.isAllowed(elem)) {
@@ -308,7 +352,7 @@ const SnkTaskbar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const taskbarElement = TaskbarElement[def.toString()];
     const dataExporterStoreKey = this._element.dataset.exporterStoreKey || this.configName;
     if (taskbarElement) {
-      return buildElem(def, className, this.getIdElemBtnNative(def), elem => this.getTitle(elem), elem => this.elementClick(elem), elem => this.isEnabled(elem), this.buildDynamicActionsList(), dataExporterStoreKey, this.presentationMode);
+      return buildElem(def, className, this.getIdElemBtnNative(def), elem => this.getTitle(elem), elem => this.elementClick(elem), elem => this.isEnabled(elem), def !== TaskbarElement.CONFIGURATOR ? this.buildDynamicActionsList() : this.buildActionsSettingsList(), dataExporterStoreKey, this.presentationMode);
     }
     else {
       return buildCustomButton(def, className, this.getIdElemBtnCustom(def), elem => this.elementClick(elem), elem => this.isEnabled(elem));
@@ -317,10 +361,13 @@ const SnkTaskbar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   buildDynamicActionsList() {
     var _a;
     if (this._hiddenActionsList.length) {
-      return [...((_a = this.actionsList) !== null && _a !== void 0 ? _a : []), { type: 'divider', label: "", value: "" }, ...this._hiddenActionsList];
+      return [...((_a = this.actionsList) !== null && _a !== void 0 ? _a : []), ...this._hiddenActionsList];
     }
     return this.actionsList;
   }
+  buildActionsSettingsList() {
+    return this.actionsSettingsList;
+  }
   getIdElemBtnNative(taskbarElem) {
     return StringUtils.toCamelCase(taskbarElem);
   }
@@ -490,9 +537,10 @@ const SnkTaskbar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this._lastWidth = this._element.getBoundingClientRect().width;
   }
   disconnectedCallback() {
-    var _a;
+    var _a, _b;
+    (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.unsubscribe(this.onSaveEvent);
     this.unlinkAllCustomElements();
-    (_a = this._overFlowWatcher) === null || _a === void 0 ? void 0 : _a.destroy();
+    (_b = this._overFlowWatcher) === null || _b === void 0 ? void 0 : _b.destroy();
   }
   unlinkAllCustomElements() {
     var _a;
@@ -535,7 +583,8 @@ const SnkTaskbar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   static get watchers() { return {
     "buttons": ["observeButtons"],
     "disabledButtons": ["observeDisabledButtons"],
-    "_lastWidth": ["observeLastWidth"]
+    "_lastWidth": ["observeLastWidth"],
+    "_isWaitingForSave": ["observeIsWaitingForSave"]
   }; }
   static get style() { return snkTaskbarCss; }
 }, [6, "snk-taskbar", {
@@ -548,6 +597,7 @@ const SnkTaskbar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "buttons": [1],
     "customButtons": [16],
     "actionsList": [16],
+    "actionsSettingsList": [16],
     "primaryButton": [1, "primary-button"],
     "disabledButtons": [16],
     "dataUnit": [16],
@@ -562,12 +612,12 @@ const SnkTaskbar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "_lastWidth": [32],
     "_hasToUpdateOverFlow": [32],
     "_isWaitingForSave": [32]
-  }, [[8, "snkCustomSlotElementsLoaded", "handleCustomSlotElementsLoaded"]]]);
+  }, [[8, "snkCustomSlotElementsLoaded", "handleCustomSlotElementsLoaded"], [8, "taskbarSaveLocker", "handleTaskbarSaveLocker"], [8, "taskbarSaveUnlocker", "handleTaskbarSaveUnlocker"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["snk-taskbar", "snk-actions-button", "snk-data-exporter", "snk-exporter-email-sender", "taskbar-actions-button"];
+  const components = ["snk-taskbar", "snk-actions-button", "snk-data-exporter", "snk-exporter-email-sender", "taskbar-actions-button", "taskbar-split-button"];
   components.forEach(tagName => { switch (tagName) {
     case "snk-taskbar":
       if (!customElements.get(tagName)) {
@@ -576,20 +626,25 @@ function defineCustomElement() {
       break;
     case "snk-actions-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "snk-data-exporter":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "snk-exporter-email-sender":
       if (!customElements.get(tagName)) {
-        defineCustomElement$2();
+        defineCustomElement$3();
       }
       break;
     case "taskbar-actions-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "taskbar-split-button":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }

package/dist/components/snk-view-representation.d.ts

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

package/dist/components/snk-view-representation.js

@@ -0,0 +1,6 @@
+import { S as SnkViewRepresentation$1, d as defineCustomElement$1 } from './snk-view-representation2.js';
+
+const SnkViewRepresentation = SnkViewRepresentation$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SnkViewRepresentation, defineCustomElement };

package/dist/components/snk-view-representation2.js

@@ -0,0 +1,41 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { FormLayout } from '@sankhyalabs/ezui/dist/collection/utils';
+
+const snkViewRepresentationCss = ".sc-snk-view-representation-h{display:block}.svg-container.sc-snk-view-representation{display:flex;width:185px;height:125px;border-radius:8px;background-color:#f7f7f7;padding:10px 12px;box-sizing:border-box;position:relative}.svg-container__background.sc-snk-view-representation{display:flex;flex-direction:column;width:100%}.svg-container__header.sc-snk-view-representation{display:flex;gap:2px;margin-bottom:12px}.svg-container__circle.sc-snk-view-representation{width:9px;height:9px;border-radius:50%}.svg-container__circle--red.sc-snk-view-representation{background-color:#ed7678}.svg-container__circle--yellow.sc-snk-view-representation{background-color:#eddb76}.svg-container__circle--green.sc-snk-view-representation{background-color:#7ad08e}.svg-container__section.sc-snk-view-representation{width:100%}.svg-container__collumn.sc-snk-view-representation{width:100%;display:flex;flex-direction:column}.svg-container__inline.sc-snk-view-representation{display:flex;flex-direction:row;gap:6px}.svg-container__line.sc-snk-view-representation{height:13px;border-radius:4px;background-color:#d9d9d9;margin-bottom:4px}.svg-container__line--short.sc-snk-view-representation{width:39.68px;height:7px;border-radius:3.5px}.svg-container__line--long.sc-snk-view-representation{width:100%}";
+
+const SnkViewRepresentation = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.mode = FormLayout.SIDE_BY_SIDE;
+  }
+  renderCascadeLayout() {
+    return (h("div", { class: "svg-container__collumn" }, [...Array(3)].map(() => (h("div", { class: "svg-container__section" }, h("div", { class: "svg-container__line svg-container__line--short" }), h("div", { class: "svg-container__line svg-container__line--long" }))))));
+  }
+  renderSideBySideLayout() {
+    return (h("div", { class: "svg-container__inline" }, [...Array(2)].map(() => this.renderCascadeLayout())));
+  }
+  render() {
+    return (h("div", { class: "svg-container ez-margin-left--small" }, h("div", { class: "svg-container__background" }, h("div", { class: "svg-container__header" }, h("div", { class: "svg-container__circle svg-container__circle--red" }), h("div", { class: "svg-container__circle svg-container__circle--yellow" }), h("div", { class: "svg-container__circle svg-container__circle--green" })), this.mode === FormLayout.CASCADE
+      ? this.renderCascadeLayout()
+      : this.renderSideBySideLayout())));
+  }
+  static get style() { return snkViewRepresentationCss; }
+}, [2, "snk-view-representation", {
+    "mode": [8]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-view-representation"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-view-representation":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SnkViewRepresentation);
+      }
+      break;
+  } });
+}
+
+export { SnkViewRepresentation as S, defineCustomElement as d };

package/dist/components/taskbar-actions-button2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const taskbarActionsButtonCss = ".sc-taskbar-actions-button-h{display:flex;width:fit-content;height:fit-content}";
+const taskbarActionsButtonCss = ".sc-taskbar-actions-button-h{--ez-dropdown--min-width:150px;display:flex;width:fit-content;height:fit-content}.ez-dropdown-container.sc-taskbar-actions-button{position:relative;display:inline-block}.ez-dropdown--sticky.sc-taskbar-actions-button{position:absolute;display:block;min-width:var(--ez-dropdown--min-width)}";
 
 const TaskbarActionsButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -126,7 +126,7 @@ const TaskbarActionsButton = /*@__PURE__*/ proxyCustomElement(class extends HTML
     this.taskbarActionsButtonDisconnected.emit();
   }
   render() {
-    return (h(Host, null, h("div", { class: `${this.canShowDropdown() ? ' ez-elevation--16' : ''}` }, h("ez-button", { title: this.title, mode: 'icon', iconName: 'dots-vertical', size: 'small', enabled: this.enabled, onClick: () => this.controlDropdown() }), this.canShowDropdown() && h("ez-dropdown", { items: this.loadItems(), onEzClick: (evt) => this.onSelectAction(evt.detail), onEzOutsideClick: () => this._showDropdown = false, itemBuilder: (item, level) => this.dropdownItemBuilder(item, level) }))));
+    return (h(Host, null, h("div", { class: `${this.canShowDropdown() ? ' ez-elevation--16' : ''} ez-dropdown-container` }, h("ez-button", { title: this.title, mode: 'icon', iconName: 'dots-vertical', size: 'small', enabled: this.enabled, onClick: () => this.controlDropdown() }), this.canShowDropdown() && h("ez-dropdown", { class: `ez-dropdown--sticky`, items: this.loadItems(), onEzClick: (evt) => this.onSelectAction(evt.detail), onEzOutsideClick: () => this._showDropdown = false, itemBuilder: (item, level) => this.dropdownItemBuilder(item, level) }))));
   }
   get _element() { return this; }
   static get style() { return taskbarActionsButtonCss; }

package/dist/components/taskbar-split-button.d.ts

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

package/dist/components/taskbar-split-button.js

@@ -0,0 +1,6 @@
+import { T as TaskbarSplitButton$1, d as defineCustomElement$1 } from './taskbar-split-button2.js';
+
+const TaskbarSplitButton = TaskbarSplitButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TaskbarSplitButton, defineCustomElement };

package/dist/components/taskbar-split-button2.js

@@ -0,0 +1,87 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const taskbarSplitButtonCss = "";
+
+const TaskbarSplitButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this._showDropdown = false;
+    this.iconName = undefined;
+    this.action = undefined;
+    this.name = undefined;
+    this.className = undefined;
+    this.dataElementId = undefined;
+    this.title = undefined;
+    this.enabled = undefined;
+    this.actions = undefined;
+  }
+  initializeEagerItems() {
+    var _a;
+    (_a = this.actions) === null || _a === void 0 ? void 0 : _a.forEach(action => {
+      var _a;
+      if (action && action.eagerInitialize && action.itemBuilder) {
+        (_a = action.itemBuilder) === null || _a === void 0 ? void 0 : _a.call(action, this._splitButtonRef, action);
+      }
+    });
+  }
+  componentDidLoad() {
+    this.initializeEagerItems();
+  }
+  dropdownItemBuilder(item, _level) {
+    const itemAction = this.actions.find(action => action.value === item.id);
+    if (!itemAction || !itemAction.itemBuilder) {
+      return undefined;
+    }
+    const customContent = itemAction.itemBuilder(this._splitButtonRef, itemAction);
+    if (typeof customContent === 'string') {
+      return h("div", { innerHTML: customContent });
+    }
+    return customContent;
+  }
+  loadItems() {
+    return this.actions.filter(action => action !== undefined).map(action => {
+      var _a;
+      return {
+        id: action.value,
+        label: action.label,
+        value: action.value,
+        type: (_a = action.type) !== null && _a !== void 0 ? _a : 'item',
+        children: action.children,
+        iconName: action.iconName,
+        subAction: action.subAction,
+        group: action.group,
+        disableCloseOnSelect: action.disableCloseOnSelect,
+      };
+    });
+  }
+  render() {
+    return (h(Host, null, h("ez-split-button", { ref: (ref) => this._splitButtonRef = ref, key: this.dataElementId, class: `${this.className} "ez-split-button--tertiary ez-padding--medium"`, items: this.loadItems(), mode: "icon-only", iconName: this.iconName, enabled: this.enabled, show: this._showDropdown, onButtonClick: () => this.action(this.name), itemBuilder: (item, level) => this.dropdownItemBuilder(item, level) })));
+  }
+  static get style() { return taskbarSplitButtonCss; }
+}, [2, "taskbar-split-button", {
+    "iconName": [1, "icon-name"],
+    "action": [16],
+    "name": [1],
+    "className": [1, "class-name"],
+    "dataElementId": [1, "data-element-id"],
+    "title": [1],
+    "enabled": [4],
+    "actions": [16],
+    "_showDropdown": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["taskbar-split-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "taskbar-split-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TaskbarSplitButton);
+      }
+      break;
+  } });
+}
+
+export { TaskbarSplitButton as T, defineCustomElement as d };