@sankhyalabs/sankhyablocks 1.3.30 → 1.3.31-beta.10

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

@@ -0,0 +1,230 @@
+import { ApplicationContext } from '@sankhyalabs/core';
+import { Component, Element, Event, h, Prop, State } from '@stencil/core';
+export class SnkForm {
+  getFormConfig() {
+    return (this._dataState && this._dataState.insertionMode ? this._insertionFormConfig : this._editionFormConfig);
+  }
+  getInsertionHiddenFields(formConfig) {
+    const hiddenFields = [];
+    formConfig === null || formConfig === void 0 ? void 0 : formConfig.forEach(cfg => {
+      const def = this._dataUnit.getField(cfg.name);
+      if (def === null || def === void 0 ? void 0 : def.readOnly) {
+        hiddenFields.push(cfg.name);
+      }
+    });
+    return hiddenFields;
+  }
+  exitForm() {
+    if (this._dataUnit.isDirty()) {
+      this._dataUnit.cancelEdition({ after: () => this.exit.emit() });
+    }
+    else {
+      this.exit.emit();
+    }
+  }
+  getDisabledButtons() {
+    const disabled = [];
+    if (!this._dataState.hasPrevious) {
+      disabled.push("PREVIOUS");
+    }
+    if (!this._dataState.hasNext) {
+      disabled.push("NEXT");
+    }
+    return disabled;
+  }
+  loadInsertionConfig() {
+    if (this._dataUnit && this._configLoaded) {
+      this._insertionFormConfig = this._editionFormConfig.filter(fieldCfg => {
+        const def = this._dataUnit.getField(fieldCfg.name);
+        if (def === null || def === void 0 ? void 0 : def.readOnly) {
+          return false;
+        }
+        return true;
+      });
+    }
+  }
+  i18n(key) {
+    const pt_br = {
+      "components.back": "Voltar"
+    };
+    return pt_br[key];
+  }
+  componentWillLoad() {
+    const snkApplication = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    if (snkApplication) {
+      snkApplication.loadFormConfig(this.configName).then(cfg => {
+        this._configLoaded = true;
+        this._editionFormConfig = cfg;
+        this.loadInsertionConfig();
+      });
+      //Forçamos a carga dos acessos pra aproveitar a request inicial.
+      snkApplication.getAllAccess();
+    }
+    let parent = this._element.parentElement;
+    while (parent) {
+      if (parent.tagName.toUpperCase() === "SNK-DATA-UNIT") {
+        this._snkDataUnit = parent;
+        this._dataUnit = this._snkDataUnit.dataUnit;
+        this._dataState = this._snkDataUnit.dataState;
+        if (this._dataUnit) {
+          this.loadInsertionConfig();
+        }
+        else {
+          this._snkDataUnit.addEventListener("dataUnitReady", (evt) => {
+            this._dataUnit = evt.detail;
+            this.loadInsertionConfig();
+          });
+        }
+        this._snkDataUnit.addEventListener("dataStateChange", (evt) => {
+          this._dataState = evt.detail;
+        });
+        break;
+      }
+      parent = parent.parentElement;
+    }
+  }
+  render() {
+    if (!this._configLoaded || !this._dataUnit || !this._dataState) {
+      return undefined;
+    }
+    return (h("section", { class: "snk-form" },
+      h("div", { class: "snk-form__header snk-form__header--fixed ez-row" },
+        h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6", key: "formHeader" },
+          h("ez-button", { title: this.i18n("components.back"), mode: "icon", iconName: "arrow_back", class: "ez-padding-right--medium", size: "small", onClick: () => this.exitForm() }),
+          h("h1", { class: "ez-title ez-title--primary ez-title--xlarge ez-align--middle" }, this.formTitle)),
+        h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6 ez-align--right" },
+          h("snk-taskbar", { key: "formTaskbar", buttons: this._dataState.isDirty ? "CANCEL,SAVE" : "PREVIOUS,NEXT,DIVIDER,CLONE,REMOVE,MORE_OPTIONS,DIVIDER,GRID_MODE,INSERT", primaryButton: this._dataState.isDirty ? "SAVE" : "INSERT", disabledButtons: this.getDisabledButtons(), actionsList: this.actionsList, dataUnit: this._dataUnit }))),
+      h("section", null,
+        h("div", { class: "ez-row" },
+          h("div", { class: "ez-col ez-col--sd-12" },
+            h("ez-form", { key: "ezForm" + this._snkDataUnit.entityName, dataUnit: this._dataUnit, config: this.getFormConfig(), recordsValidator: this.recordsValidator }))))));
+  }
+  static get is() { return "snk-form"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["snk-form.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["snk-form.css"]
+  }; }
+  static get properties() { return {
+    "formTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Texto que aparece de forma descritiva no cabe\u00E7alho do form"
+      },
+      "attribute": "form-title",
+      "reflect": false
+    },
+    "configName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Nome usado para guardar/recuperar as configura\u00E7\u00F5es do formul\u00E1rio"
+      },
+      "attribute": "config-name",
+      "reflect": false
+    },
+    "recordsValidator": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "RecordValidator",
+        "resolved": "RecordValidator",
+        "references": {
+          "RecordValidator": {
+            "location": "import",
+            "path": "@sankhyalabs/ezui/dist/types/components/ez-form/ez-form"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Validador respons\u00E1vel por checar a integridade das informa\u00E7\u00F5es do registro"
+      },
+      "attribute": "records-validator",
+      "reflect": false
+    },
+    "actionsList": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Array<Action>",
+        "resolved": "Action[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          },
+          "Action": {
+            "location": "import",
+            "path": "../snk-taskbar/snk-taskbar"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Lista de a\u00E7\u00F5es que devem ser usadas no bot\u00E3o \"Mais op\u00E7\u00F5es\""
+      }
+    }
+  }; }
+  static get states() { return {
+    "_dataUnit": {},
+    "_configLoaded": {},
+    "_dataState": {},
+    "_editionFormConfig": {},
+    "_insertionFormConfig": {}
+  }; }
+  static get events() { return [{
+      "method": "exit",
+      "name": "exit",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitido quando o bot\u00E3o de voltar \u00E9 acionado"
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "actionClick",
+      "name": "actionClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitido sempre que houver click de bot\u00E3o ou a\u00E7\u00E3o"
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "_element"; }
+}

package/dist/collection/components/snk-grid/snk-grid.css

@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}

package/dist/collection/components/snk-grid/snk-grid.js

@@ -0,0 +1,148 @@
+import { ApplicationContext } from '@sankhyalabs/core';
+import { Component, Element, h, Prop, State, Event } from '@stencil/core';
+import { TaskbarElement } from '../snk-taskbar/elements/taskbar-elements';
+export class SnkGrid {
+  getHeaderButtons() {
+    return this._dataState && this._dataState.selectedRecords.length > 0 ? "UPDATE,CLONE,REMOVE,MORE_OPTIONS,DIVIDER,REFRESH" : "REFRESH";
+  }
+  actionClickHandler(evt) {
+    if (evt.detail === TaskbarElement.CONFIG_GRID && this._grid) {
+      this._grid.openGridConfig();
+    }
+  }
+  saveConfig(config) {
+    const snkApplication = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    if (snkApplication) {
+      snkApplication.saveGridConfig(config);
+    }
+  }
+  componentWillLoad() {
+    const snkApplication = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    if (snkApplication) {
+      snkApplication.loadGridConfig(this.configName).then(cfg => {
+        this._gridConfig = cfg;
+        this._configLoaded = true;
+      });
+      //Forçamos a carga dos acessos pra aproveitar a request inicial.
+      snkApplication.getAllAccess();
+    }
+    let parent = this._element.parentElement;
+    while (parent) {
+      if (parent.tagName.toUpperCase() === "SNK-DATA-UNIT") {
+        this._snkDataUnit = parent;
+        this._dataUnit = this._snkDataUnit.dataUnit;
+        if (!this._dataUnit) {
+          this._snkDataUnit.addEventListener("dataUnitReady", (evt) => {
+            this._dataUnit = evt.detail;
+          });
+        }
+        this._snkDataUnit.addEventListener("dataStateChange", (evt) => {
+          this._dataState = evt.detail;
+        });
+        break;
+      }
+      parent = parent.parentElement;
+    }
+  }
+  render() {
+    if (!this._configLoaded || !this._dataUnit) {
+      return undefined;
+    }
+    return (h("div", { class: "ez-flex ez-flex--column ez-flex-item--auto ez-padding--large" },
+      h("div", { class: "ez-row ez-padding-bottom--medium ez-margin-bottom--medium" },
+        h("div", { class: "ez-col ez-col--sd-9 ez-col--tb-9 ez-align--bottom" },
+          h("slot", null)),
+        h("div", { class: "ez-col ez-col--sd-3 ez-col--tb-3 ez-align--right" },
+          h("snk-taskbar", { onActionClick: evt => this.actionClickHandler(evt), key: "topTaskbar", dataUnit: this._dataUnit, buttons: "FORM_MODE,CONFIG_GRID,INSERT", primaryButton: "INSERT" }))),
+      h("ez-grid", { ref: ref => this._grid = ref, dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: evt => { this.saveConfig(evt.detail); }, onEzDoubleClick: () => this.gridDoubleClick.emit() },
+        h("snk-taskbar", { dataUnit: this._dataUnit, buttons: this.getHeaderButtons(), slot: "leftButtons", actionsList: this.actionsList }))));
+  }
+  static get is() { return "snk-grid"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["snk-grid.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["snk-grid.css"]
+  }; }
+  static get properties() { return {
+    "configName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Nome usado para salvar/recuperar a configura\u00E7\u00E3o"
+      },
+      "attribute": "config-name",
+      "reflect": false
+    },
+    "actionsList": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Array<Action>",
+        "resolved": "Action[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          },
+          "Action": {
+            "location": "import",
+            "path": "../snk-taskbar/snk-taskbar"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Lista de a\u00E7\u00F5es que devem ser usadas no bot\u00E3o \"Mais op\u00E7\u00F5es\""
+      }
+    }
+  }; }
+  static get states() { return {
+    "_dataUnit": {},
+    "_configLoaded": {},
+    "_dataState": {},
+    "_gridConfig": {}
+  }; }
+  static get events() { return [{
+      "method": "actionClick",
+      "name": "actionClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitido sempre que houver click de bot\u00E3o ou a\u00E7\u00E3o"
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "gridDoubleClick",
+      "name": "gridDoubleClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitido sempre que houver duplo click na grade"
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "_element"; }
+}

package/dist/collection/components/snk-pesquisa/snk-pesquisa.css

@@ -1,30 +1,39 @@
 :host {
+  /* general */
   /*@doc Define o tamanho da fonte do componente.*/
   --snk-pesquisa--font-size: var(--text--medium, 14px);
-  
   /*@doc Define a família da fonte do componente.*/
   --snk-pesquisa--font-family: var(--font-pattern, Arial);
-  
   /*@doc Define o peso da fonte do componente.*/
   --snk-pesquisa--font-weight: var(--text-weight--medium, 400);
   
+  /* records */
   /*@doc Define a cor da fonte do indicador de registros do componente.*/
   --snk-pesquisa__records--color: var(--text--primary, #626e82);
-  
   /*@doc Define o espaçamento vertical do indicador de registros do componente.*/
   --snk-pesquisa__records--padding-vertical: var(--space--medium, 12px);
 
+  /* content */
   /*@doc Define o espaçamento da direita no conteúdo do componente.*/
   --snk-pesquisa__content--padding-right: var(--space--small, 6px);
 
+  /* scrollbar */
   /*@doc Define a cor da barra de rolagem do componente.*/
-  --snk-pesquisa__content-scrollbar--background-color: var(--text--primary, #626e82);
-
+  --snk-pesquisa__content-scrollbar--background-color-primary: var(--scrollbar--primary, #2B3A54);
+  /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+  --snk-pesquisa__content-scrollbar--background-color-secondary: var(--scrollbar--secondary, #E5EAF0);
   /*@doc Define o raio da borda da barra de rolagem do componente.*/
-  --snk-pesquisa__content-scrollbar--border-radius: var(--border--radius-medium, 12px);
-
+  --snk-pesquisa__content-scrollbar--border-radius: var(--border--radius-small, 6px);
   /*@doc Define a largura da barra de rolagem do componente.*/
-  --snk-pesquisa__content-scrollbar--width: var(--space--medium, 12px) display: block;
+  --snk-pesquisa__content-scrollbar--width: var(--space--medium, 12px);
+
+  /* buttons */
+  /*@doc Define a cor do botão de pesquisa do componente.*/
+  --snk-pesquisa__btn--color: var(--title--primary, #2B3A54);
+  /*@doc Define a cor do botão de pesquisa do componente quando desabilitado.*/
+  --snk-pesquisa__btn-disabled--color: var(--text--disable, #AFB6C0);
+  /*@doc Define a cor do botão de pesquisa do componente quando o mouse está sobre ele.*/
+  --snk-pesquisa__btn-hover--color: var(--color--primary, #4e4e4e);
 
   max-height: 100%;
   height: 100%;
@@ -47,8 +56,11 @@
   padding-right: 4px;
 }
 
-.snk-pesquisa__input-close {
-  cursor: pointer;
+.snk-pesquisa__input ez-icon {
+  --ez-icon--color: inherit;
+
+  /*public*/
+  font-weight: var(--text-weight--large, 600);
 }
 
 .snk-pesquisa__content {
@@ -56,13 +68,15 @@
   flex-direction: column;
   height: 100%;
   overflow-y: auto;
+  scrollbar-width: thin;
 
   /*public*/
+  scrollbar-color: var(--snk-pesquisa__content-scrollbar--background-color-primary) var(--snk-pesquisa__content-scrollbar--background-color-secondary);
   padding-right: var(--snk-pesquisa__content--padding-right);
 }
 
 .snk-pesquisa__content::-webkit-scrollbar-track {
-  background-color: #f0f2f5;
+  background-color: var(--snk-pesquisa__content-scrollbar--background-color-secondary);
 
   /*public*/
   border-radius: var(--snk-pesquisa__content-scrollbar--border-radius);
@@ -70,12 +84,12 @@
 
 .snk-pesquisa__content::-webkit-scrollbar-thumb {
   /*public*/
-  background-color: var(--snk-pesquisa__content-scrollbar--background-color);
+  background-color: var(--snk-pesquisa__content-scrollbar--background-color-primary);
   border-radius: var(--snk-pesquisa__content-scrollbar--border-radius);
 }
 
 .snk-pesquisa__content::-webkit-scrollbar {
-  background-color: #f0f2f5;
+  background-color: var(--snk-pesquisa__content-scrollbar--background-color-secondary);
 
   /*public*/
   width: var(--snk-pesquisa__content-scrollbar--width);
@@ -91,4 +105,33 @@
   color: var(--snk-pesquisa__records--color);
   padding-bottom: var(--snk-pesquisa__records--padding-vertical);
   padding-top: var(--snk-pesquisa__records--padding-vertical);
+}
+
+.snk-pesquisa__btn {
+  outline: none;
+  border: none;
+  background: none;
+  cursor: pointer;
+
+  /*public*/
+  color: var(--snk-pesquisa__btn--color);
+}
+
+.snk-pesquisa__btn:disabled {
+  cursor: unset;
+
+  /*public*/
+  color: var(--snk-pesquisa__btn-disabled--color);
+}
+
+.snk-pesquisa__btn:disabled:hover {
+  cursor: unset;
+
+  /*public*/
+  color: var(--snk-pesquisa__btn-disabled--color);
+}
+
+.snk-pesquisa__btn:hover {
+  /*public*/
+  color: var(--snk-pesquisa__btn-hover--color);
 }

package/dist/collection/components/snk-pesquisa/snk-pesquisa.js

@@ -291,12 +291,16 @@ export class SnkPesquisa {
         : 'Os resultados de sua pesquisa aparecerão aqui...';
   }
   render() {
+    var _a;
     return (h(Host, null,
       h("div", { class: "snk-pesquisa" },
         h("div", { class: "snk-pesquisa__input" },
           h("ez-text-input", { label: "Buscar", class: "ez-margin-right--medium", canShowError: false, ref: (ref) => this._textInput = ref, onEzChange: (event) => this.onChangeValue(event), value: this.argument },
             h("ez-icon", { slot: "leftIcon", iconName: "search" }),
-            h("ez-icon", { class: "snk-pesquisa__input-close", slot: "rightIcon", iconName: "close", onClick: () => { this.clearSearch(); } })),
+            this.argument && ((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value)
+              ? h("button", { slot: "rightIcon", class: "snk-pesquisa__btn", onClick: () => this.clearSearch() },
+                h("ez-icon", { iconName: "close" }))
+              : undefined),
           h("ez-button", { class: "ez-button--primary", label: "Pesquisar", onClick: () => this.onClickSearch() })),
         h("label", { class: "snk-pesquisa__records" }, this.getMessageView()),
         h("div", { class: "snk-pesquisa__content" }, this._itemList && this._itemList.map((item) => {

package/dist/collection/components/snk-taskbar/elements/taskbar-elements.js

@@ -0,0 +1,65 @@
+import { h } from "@stencil/core";
+export var TaskbarElement;
+(function (TaskbarElement) {
+  TaskbarElement["PREVIOUS"] = "PREVIOUS";
+  TaskbarElement["NEXT"] = "NEXT";
+  TaskbarElement["REFRESH"] = "REFRESH";
+  TaskbarElement["UPDATE"] = "UPDATE";
+  TaskbarElement["CLONE"] = "CLONE";
+  TaskbarElement["REMOVE"] = "REMOVE";
+  TaskbarElement["INSERT"] = "INSERT";
+  TaskbarElement["CANCEL"] = "CANCEL";
+  TaskbarElement["SAVE"] = "SAVE";
+  TaskbarElement["GRID_MODE"] = "GRID_MODE";
+  TaskbarElement["FORM_MODE"] = "FORM_MODE";
+  TaskbarElement["CONFIG_GRID"] = "CONFIG_GRID";
+  TaskbarElement["MORE_OPTIONS"] = "MORE_OPTIONS";
+  TaskbarElement["DIVIDER"] = "DIVIDER";
+})(TaskbarElement || (TaskbarElement = {}));
+export var AuthorizationElements;
+(function (AuthorizationElements) {
+  AuthorizationElements["UPDATE"] = "UPDATE";
+  AuthorizationElements["CLONE"] = "CLONE";
+  AuthorizationElements["REMOVE"] = "REMOVE";
+  AuthorizationElements["INSERT"] = "INSERT";
+  AuthorizationElements["CONFIG_GRID"] = "CONFIG_GRID";
+})(AuthorizationElements || (AuthorizationElements = {}));
+export const buildElem = (element, className, getTitle, action, isEnabled, actions) => {
+  switch (element) {
+    case TaskbarElement.PREVIOUS:
+      return iconButton("chevron-left", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.NEXT:
+      return iconButton("chevron-right", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.REFRESH:
+      return iconButton("sync", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.UPDATE:
+      return iconButton("edit", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.CLONE:
+      return iconButton("copy", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.REMOVE:
+      return iconButton("delete", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.INSERT:
+      return iconTextButton("plus", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.CANCEL:
+      return h("ez-button", { label: getTitle(element), size: "small", enabled: isEnabled(element), onClick: () => action(element) });
+    case TaskbarElement.SAVE:
+      return iconTextButton("save", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.GRID_MODE:
+      return iconButton("table", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.FORM_MODE:
+      return iconButton("list", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.CONFIG_GRID:
+      return iconButton("settings-inverted", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.MORE_OPTIONS:
+      return actions && actions.length > 0 ? h("ez-actions-button", { title: getTitle(element), size: "small", class: className, enabled: isEnabled(element), onEzAction: (evt) => action(evt.detail.value), actions: actions }) : undefined;
+    case TaskbarElement.DIVIDER:
+      return h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-horizontal--medium" });
+  }
+};
+function iconButton(iconName, element, className, getTitle, action, isEnabled) {
+  return h("ez-button", { key: iconName, title: getTitle(element), mode: "icon", size: "small", class: className, iconName: iconName, enabled: isEnabled(element), onClick: () => action(element) });
+}
+function iconTextButton(iconName, element, className, getTitle, action, isEnabled) {
+  return h("ez-button", { key: iconName, title: getTitle(element), label: getTitle(element), size: "small", class: className, enabled: isEnabled(element), onClick: () => action(element) },
+    h("ez-icon", { class: "ez-padding-right--small", slot: "leftIcon", iconName: iconName }));
+}

package/dist/collection/components/snk-taskbar/snk-taskbar.css

@@ -0,0 +1,3 @@
+:host {
+  display: flex;
+}