@genexus/genexus-ide-ui 0.0.61 → 0.0.63

package/dist/collection/collection-manifest.json

@@ -1,14 +1,15 @@
 {
   "entries": [
-    "./components/application-declaration/bpm-app-declaration.js",
-    "./components/container/container.js",
+    "./components/bpm-application-declaration/bpm-app-declaration.js",
+    "./components/_helpers/title/title.js",
+    "./components/_helpers/container/container.js",
     "./components/create-kb-from-server/create-kb-from-server.js",
-    "./components/directory-selector/directory-selector.js",
-    "./components/entity-selector/entity-selector.js",
+    "./components/_helpers/directory-selector/directory-selector.js",
+    "./components/_helpers/entity-selector/entity-selector.js",
     "./components/file-selector/file-selector.js",
     "./components/kb-manager-export/kb-manager-export.js",
-    "./components/list-selector/list-selector-item/list-selector-item.js",
-    "./components/list-selector/list-selector.js",
+    "./components/_helpers/list-selector/list-selector-item/list-selector-item.js",
+    "./components/_helpers/list-selector/list-selector.js",
     "./components/kb-manager-import/kb-manager-import.js",
     "./components/new-environment/new-environment.js",
     "./components/new-kb/new-kb.js",
@@ -16,16 +17,18 @@
     "./components/object-selector/object-selector.js",
     "./components/references/references.js",
     "./components/share-kb/share-kb.js",
-    "./components/team-dev-commit/team-dev-commit.js",
-    "./components/team-dev-select-recent-comment/team-dev-select-recent-comment.js",
-    "./components/team-dev-update/team-dev-update.js",
-    "./components/team-dev-update-partial-selection/team-dev-update-partial-selection.js",
-    "./components/team-dev-update-to-revision/team-dev-update-to-revision.js",
+    "./components/team-dev/commit/team-dev-commit.js",
+    "./components/team-dev/select-recent-comment/team-dev-select-recent-comment.js",
+    "./components/team-dev/update/team-dev-update.js",
+    "./components/team-dev/update-partial-selection/team-dev-update-partial-selection.js",
+    "./components/team-dev/update-to-revision/team-dev-update-to-revision.js",
     "./components/ww-images/ww-images.js",
-    "./components/_template/template.js",
-    "./components/_test/test.js",
-    "./components/status-buttons/gx-ide-status-buttons.js",
-    "./components/top-bar/top-bar.js"
+    "./components/_helpers/status-buttons/gx-ide-status-buttons.js",
+    "./components/_helpers/switcher/switcher.js",
+    "./components/_helpers/switcher/switch-panel/switch-panel.js",
+    "./components/_helpers/top-bar/top-bar.js",
+    "./components/_starting-template/template.js",
+    "./components/_test/test.js"
   ],
   "compiler": {
     "name": "@stencil/core",
@@ -66,6 +69,7 @@
         "ch-intersection-observer",
         "ch-next-data-modeling",
         "ch-next-data-modeling-item",
+        "ch-next-data-modeling-render",
         "ch-next-progress-bar",
         "ch-notifications",
         "ch-notifications-item",
@@ -87,14 +91,15 @@
         "ch-test-action-group",
         "ch-test-dropdown",
         "ch-test-suggest",
-        "ch-test-tree-x",
         "ch-textblock",
         "ch-timer",
         "ch-tooltip",
         "ch-tree",
         "ch-tree-item",
-        "ch-tree-x",
-        "ch-tree-x-list-item",
+        "ch-tree-view",
+        "ch-tree-view-item",
+        "ch-tree-view-render",
+        "ch-tree-view-render-wrapper",
         "ch-window",
         "ch-window-close",
         "gx-grid-chameleon",
@@ -156,6 +161,7 @@
         "gxg-options-item",
         "gxg-paginator",
         "gxg-pill",
+        "gxg-pills",
         "gxg-progress-bar",
         "gxg-scroll",
         "gxg-select",
@@ -176,6 +182,7 @@
         "gxg-test",
         "gxg-text",
         "gxg-title",
+        "gxg-title-editable",
         "gxg-toggle",
         "gxg-toolbar",
         "gxg-toolbar-item",

package/dist/collection/common/config.js

@@ -7,7 +7,11 @@ export const config = {
       type: "text-regular",
       textAlign: "center",
       padding: "m",
-      maxWidth: "200px"
+      maxWidth: "200px",
+      minHeight: "300px"
     }
+  },
+  gxIdeContainer: {
+    slimmerFooter: true
   }
 };

package/dist/collection/common/grid.js

@@ -1,5 +1,6 @@
 export const gridCommon = {
   colSize: {
+    minContent: "min-content",
     auto: "auto",
     common: "minmax(100px, 1fr)",
     commonDouble: "minmax(100px, 2fr)"

package/dist/collection/common/render-list-item.js

@@ -0,0 +1,12 @@
+/* STENCIL IMPORTS */
+import { h } from "@stencil/core";
+export const renderListItems = (itemsData) => {
+  const listItemsArray = [];
+  itemsData.forEach(item => {
+    const id = item.itemId;
+    const value = item.itemValue;
+    const icon = item.itemIcon;
+    listItemsArray.push(h("gx-ide-list-selector-item", { itemId: id, itemValue: value, icon: icon }));
+  });
+  return listItemsArray;
+};

package/dist/collection/components/{container → _helpers/container}/container.css

@@ -355,7 +355,8 @@ HOST / GENERAL
 
 .heading,
 .content,
-.footer {
+.footer,
+.footer-above {
   padding: var(--gxg-container--padding);
 }
 
@@ -417,6 +418,13 @@ HEADING
 .heading--inactive {
   color: var(--gxg-color--disabled);
 }
+.heading--padding-top {
+  padding: var(--gxg-container--padding) 0 0 0;
+}
+.heading--slimmer {
+  padding-top: var(--spacing-comp-02);
+  padding-bottom: var(--spacing-comp-02);
+}
 
 /*******************************
 CONTENT
@@ -476,10 +484,34 @@ CONTENT
 .content--justify-content-end {
   justify-content: end;
 }
+.content--border-end {
+  border-inline-end: 1px solid var(--gx-ide-container-border-color);
+}
+
+/*only content*/
+.container--only-content {
+  grid-template-rows: 1fr;
+}
 
 /*******************************
 FOOTER
 ********************************/
+/*ABOVE*/
+.footer-above {
+  border-top: 1px solid var(--gx-ide-container-border-color);
+}
+.footer-above--no-border-top {
+  border-top: 0;
+}
+.footer-above--slimmer {
+  padding-top: var(--spacing-comp-02);
+  padding-bottom: var(--spacing-comp-02);
+}
+.footer-above--no-padding {
+  padding: 0;
+}
+
+/*START and END*/
 .footer {
   display: flex;
   gap: var(--gxg-container-elements-spacing);

package/dist/collection/components/{container → _helpers/container}/container.js

@@ -5,9 +5,11 @@ export class GxIdeContainer {
       return {
         "heading": true,
         "heading--inactive": this.inactiveTitle,
+        "heading--slimmer": this.titleType === "secondary",
         "heading--no-border": this.noHeadingBorder || this.hasOnlyHeading,
         [`heading--justify-${this.headingJustify}`]: true,
-        ["heading--no-padding"]: this.noHeadingPadding
+        "heading--no-padding": this.noHeadingPadding && !this.headingPaddingTop,
+        "heading--padding-top": this.headingPaddingTop
       };
     };
     this.contentClasses = () => {
@@ -17,10 +19,19 @@ export class GxIdeContainer {
         "content--no-padding": this.noContentPadding,
         "content--no-gap": this.noContentGap,
         "content--no-border-top": this.noContentBorderTop,
+        "content--border-end": this.contentBorderEnd,
         [`content--align-items-${this.alignItems}`]: this.alignItems !== undefined,
         [`content--justify-content-${this.justifyContent}`]: this.justifyContent !== undefined
       };
     };
+    this.aboveFooter = () => {
+      return this.hasAboveFooterSlot ? (h("footer", { class: {
+          "footer-above": true,
+          "footer-above--no-border-top": this.noBorderAboveFooter,
+          "footer-above--no-padding": this.noAboveFooterPadding,
+          "footer-above--slimmer": this.slimmerFooter
+        } }, h("slot", { name: "footer-above" }))) : null;
+    };
     this.footer = () => {
       return this.hasFooterSlot ? (h("footer", { class: {
           "footer": true,
@@ -29,13 +40,14 @@ export class GxIdeContainer {
             this.noBorderFooter,
           [`footer--justify-${this.footerJustify}`]: true,
           [`footer--justify-${this.footerJustify}`]: true,
-          ["footer--no-padding"]: this.noFooterPadding,
+          "footer--no-padding": this.noFooterPadding,
           "footer--slimmer": this.slimmerFooter,
           "footer--subtle-shadow": this.footerSubtleShadow
         } }, h("div", { class: "footer__start" }, h("slot", { name: "footer-start" })), h("div", { class: "footer__end" }, h("slot", { name: "footer-end" })))) : null;
     };
     this.inactiveTitle = false;
     this.containerTitle = undefined;
+    this.titleType = "primary";
     this.displayBorder = false;
     this.displayBorderTop = false;
     this.displayBorderEnd = false;
@@ -45,6 +57,7 @@ export class GxIdeContainer {
     this.titleAlignment = "center";
     this.noHeadingBorder = false;
     this.noHeadingPadding = false;
+    this.headingPaddingTop = false;
     this.headingJustify = "center";
     this.flexContent = false;
     this.noContentBorderTop = false;
@@ -52,6 +65,10 @@ export class GxIdeContainer {
     this.noContentGap = false;
     this.alignItems = undefined;
     this.justifyContent = undefined;
+    this.contentBorderEnd = false;
+    this.slimmerAboveFooter = false;
+    this.noAboveFooterPadding = false;
+    this.noBorderAboveFooter = false;
     this.slimmerFooter = false;
     this.noFooterPadding = false;
     this.footerJustify = "end";
@@ -60,7 +77,9 @@ export class GxIdeContainer {
     this.hasHeaderSlot = false;
     this.hasSlottedContent = false;
     this.hasFooterSlot = false;
+    this.hasAboveFooterSlot = false;
     this.hasOnlyHeading = false;
+    this.hasOnlyContent = false;
     this.hasOnlyFooter = false;
   }
   // 4.PUBLIC PROPERTY API /
@@ -84,17 +103,34 @@ export class GxIdeContainer {
       this.hasSlottedContent = true;
     }
     // footer
+    const footerAboveSlot = this.el.querySelectorAll(':scope >  [slot="footer-above"]');
     const footerStartSlot = this.el.querySelectorAll(':scope >  [slot="footer-start"]');
     const footerEndSlot = this.el.querySelectorAll(':scope >  [slot="footer-end"]');
     if (footerStartSlot.length || footerEndSlot.length) {
       this.hasFooterSlot = true;
     }
+    if (footerAboveSlot.length) {
+      this.hasAboveFooterSlot = true;
+    }
   }
   evaluateSections() {
-    if (!this.hasSlottedContent && !this.hasFooterSlot) {
+    // has only heading
+    if (!this.hasSlottedContent &&
+      !this.hasFooterSlot &&
+      !this.hasAboveFooterSlot) {
       this.hasOnlyHeading = true;
     }
-    if (!this.hasSlottedContent && !this.containerTitle) {
+    // has only content
+    if (this.hasSlottedContent &&
+      !this.containerTitle &&
+      !this.hasAboveFooterSlot &&
+      !this.hasFooterSlot) {
+      this.hasOnlyContent = true;
+    }
+    // has only footer
+    if (!this.hasSlottedContent &&
+      !this.containerTitle &&
+      !this.hasAboveFooterSlot) {
       this.hasOnlyFooter = true;
     }
   }
@@ -102,8 +138,9 @@ export class GxIdeContainer {
   render() {
     this.evaluateSections();
     const result = [
-      this.containerTitle || this.hasHeaderSlot ? (h("header", { class: this.headingClasses() }, this.containerTitle ? (h("gxg-title", { type: "title-04", alignment: this.titleAlignment }, this.containerTitle)) : null, this.hasHeaderSlot ? (h("div", { class: "heading__inner-wrapper" }, h("slot", { name: "header" }))) : null)) : null,
+      this.containerTitle || this.hasHeaderSlot ? (h("header", { class: this.headingClasses() }, this.containerTitle ? (h("gx-ide-title", { type: this.titleType, alignment: this.titleAlignment }, this.containerTitle)) : null, this.hasHeaderSlot ? (h("div", { class: "heading__inner-wrapper" }, h("slot", { name: "header" }))) : null)) : null,
       this.hasSlottedContent ? (h("div", { class: this.contentClasses(), part: "content" }, h("slot", null))) : null,
+      this.aboveFooter(),
       this.footer()
     ];
     return (h(Host, null, h("div", { class: {
@@ -114,7 +151,8 @@ export class GxIdeContainer {
         "container--display-border-end": this.displayBorderEnd,
         "container--display-border-bottom": this.displayBorderBottom,
         "container--display-border-start": this.displayBorderStart,
-        "container--overflow-hidden-y": this.footerSubtleShadow
+        "container--overflow-hidden-y": this.footerSubtleShadow,
+        "container--only-content": this.hasOnlyContent
       } }, result)));
   }
   static get is() { return "gx-ide-container"; }
@@ -166,6 +204,29 @@ export class GxIdeContainer {
         "attribute": "container-title",
         "reflect": false
       },
+      "titleType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TitleType",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {
+            "TitleType": {
+              "location": "import",
+              "path": "../title/title"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The title of the container"
+        },
+        "attribute": "title-type",
+        "reflect": false,
+        "defaultValue": "\"primary\""
+      },
       "displayBorder": {
         "type": "boolean",
         "mutable": false,
@@ -337,6 +398,24 @@ export class GxIdeContainer {
         "reflect": false,
         "defaultValue": "false"
       },
+      "headingPaddingTop": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds padding to the top of the heading"
+        },
+        "attribute": "heading-padding-top",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "headingJustify": {
         "type": "string",
         "mutable": false,
@@ -475,6 +554,78 @@ export class GxIdeContainer {
         "reflect": false,
         "defaultValue": "undefined"
       },
+      "contentBorderEnd": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Display border end on the content"
+        },
+        "attribute": "content-border-end",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "slimmerAboveFooter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Makes the above footer vertical padding slimmer"
+        },
+        "attribute": "slimmer-above-footer",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "noAboveFooterPadding": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Removes the above padding from the footer"
+        },
+        "attribute": "no-above-footer-padding",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "noBorderAboveFooter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Removes the above border top"
+        },
+        "attribute": "no-border-above-footer",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "slimmerFooter": {
         "type": "boolean",
         "mutable": false,
@@ -576,7 +727,9 @@ export class GxIdeContainer {
       "hasHeaderSlot": {},
       "hasSlottedContent": {},
       "hasFooterSlot": {},
+      "hasAboveFooterSlot": {},
       "hasOnlyHeading": {},
+      "hasOnlyContent": {},
       "hasOnlyFooter": {}
     };
   }

package/dist/collection/components/{entity-selector → _helpers/entity-selector}/entity-selector.js

@@ -113,7 +113,7 @@ export class GxIdeEntitySelector {
           "references": {
             "EntityData": {
               "location": "import",
-              "path": "../../common/types"
+              "path": "../../../common/types"
             }
           }
         },
@@ -168,7 +168,7 @@ export class GxIdeEntitySelector {
         "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "false",
+          "original": "boolean",
           "resolved": "boolean",
           "references": {}
         },
@@ -211,7 +211,7 @@ export class GxIdeEntitySelector {
             },
             "EntityData": {
               "location": "import",
-              "path": "../../common/types"
+              "path": "../../../common/types"
             }
           }
         },
@@ -231,7 +231,7 @@ export class GxIdeEntitySelector {
           "references": {
             "EntityData": {
               "location": "import",
-              "path": "../../common/types"
+              "path": "../../../common/types"
             }
           }
         },
@@ -269,7 +269,7 @@ export class GxIdeEntitySelector {
           "references": {
             "EntityData": {
               "location": "import",
-              "path": "../../common/types"
+              "path": "../../../common/types"
             }
           }
         }

package/dist/collection/components/{list-selector → _helpers/list-selector}/list-selector-item/list-selector-item.css

@@ -21,7 +21,7 @@ gx-ide-list-selector-item:hover input:checked + .label {
 }
 
 gx-ide-list-selector-item:not(:first-child) {
-  border-block-start: 1px solid var(--gx-ide-container-border-color);
+  border-block-start: var(--gx-ide-list-items-border);
 }
 
 /*change border color if checked*/
@@ -62,6 +62,9 @@ input:checked + .label {
 }
 
 /*label*/
+.label__index {
+  align-self: baseline;
+}
 .label__wrapper {
   display: flex;
   min-height: 28px;
@@ -71,8 +74,11 @@ input:checked + .label {
   padding: var(--spacing-comp-01) var(--spacing-comp-02);
   width: 100%;
 }
-.label__wrapper__description {
+.label__description {
   flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-comp-02);
 }
 
 /*no border*/
@@ -85,4 +91,6 @@ gx-ide-list-selector-item[no-border] {
   display: flex;
   align-items: center;
   justify-content: center;
-}
+}
+
+/*universal slot end*/

package/dist/collection/components/{list-selector → _helpers/list-selector}/list-selector-item/list-selector-item.js

@@ -4,6 +4,7 @@ import { Host, h } from "@stencil/core";
 export class GxIdeListSelectorItem {
   constructor() {
     this.hasUniversalSlot = false;
+    this.index = undefined;
     // 6.COMPONENT LIFECYCLE METHODS //
     // 7.LISTENERS //
     // 8.PUBLIC METHODS API //
@@ -67,6 +68,19 @@ export class GxIdeListSelectorItem {
         this.parentList.listName &&
         (this.name = this.parentList.listName);
     };
+    this.evaluateOrderedList = () => {
+      if (this.parentIsListSelector && this.parentList.ordered) {
+        let index = Array.from(this.parentList.children).indexOf(this.el) + 1;
+        if (index < 10) {
+          // This will make descriptions to be nicely aligned, between one digit, and two digit indexes items.
+          index = `0${index}`;
+        }
+        else {
+          index = `${index}`;
+        }
+        this.index = index;
+      }
+    };
     this.evaluateIconColor = () => {
       this.parentIsListSelector &&
         this.parentList.iconsColor &&
@@ -94,6 +108,7 @@ export class GxIdeListSelectorItem {
     this.iconColor = undefined;
     this.iconSize = undefined;
     this.noBorder = false;
+    this.universalSlotEnd = false;
   }
   // 5.EVENTS (EMIT) //
   componentWillLoad() {
@@ -107,10 +122,11 @@ export class GxIdeListSelectorItem {
     this.evaluateBorder();
     this.evaluateUniversalSlot();
     this.assignName();
+    this.evaluateOrderedList();
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { role: "listitem" }, h("input", { type: this.type, id: this.itemId, name: this.name, value: this.itemValue, checked: this.itemChecked, onChange: this.onChangeHandler, disabled: this.readonly, part: "input" }), h("label", { class: "label", htmlFor: this.itemId, part: "label" }, h("div", { class: "label__wrapper" }, this.icon ? (h("gxg-icon", { class: "label__icon", type: this.icon, size: this.iconSize, color: this.iconColor, part: "icon" })) : null, this.hasUniversalSlot ? (h("span", { class: "label__universal-slot", part: "universal-slot" }, h("slot", { name: "universal" }))) : null, h("span", { class: "label__description", part: "description" }, this.itemValue)))));
+    return (h(Host, { role: "listitem" }, h("input", { type: this.type, id: this.itemId, name: this.name, value: this.itemValue, checked: this.itemChecked, onChange: this.onChangeHandler, disabled: this.readonly, part: "input" }), h("label", { class: "label", htmlFor: this.itemId, part: "label" }, h("div", { class: "label__wrapper" }, this.index ? (h("span", { class: "label__index" }, this.index, ". ")) : null, this.icon ? (h("gxg-icon", { class: "label__icon", type: this.icon, size: this.iconSize, color: this.iconColor, part: "icon" })) : null, this.hasUniversalSlot ? (h("span", { class: "label__universal-slot", part: "universal-slot" }, h("slot", { name: "universal" }))) : null, h("span", { class: "label__description", part: "description" }, this.itemValue ? this.itemValue : h("slot", null))))));
   }
   static get is() { return "gx-ide-list-selector-item"; }
   static get originalStyleUrls() {
@@ -289,6 +305,24 @@ export class GxIdeListSelectorItem {
         "attribute": "no-border",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "universalSlotEnd": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "false",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Displays the universal slot at the end, instead of at the benign"
+        },
+        "attribute": "universal-slot-end",
+        "reflect": true,
+        "defaultValue": "false"
       }
     };
   }
@@ -305,7 +339,7 @@ export class GxIdeListSelectorItem {
         },
         "complexType": {
           "original": "ItemData",
-          "resolved": "{ itemId: string; itemValue: string; }",
+          "resolved": "{ itemId: string; itemValue: string; itemIcon?: string; }",
           "references": {
             "ItemData": {
               "location": "local"

package/dist/collection/components/{list-selector → _helpers/list-selector}/list-selector.js

@@ -136,7 +136,7 @@ export class GxIdeListSelector {
         "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "false",
+          "original": "boolean",
           "resolved": "boolean",
           "references": {}
         },
@@ -154,7 +154,7 @@ export class GxIdeListSelector {
         "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "false",
+          "original": "boolean",
           "resolved": "boolean",
           "references": {}
         },

package/dist/collection/components/_helpers/switcher/switch-panel/switch-panel.css

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

package/dist/collection/components/_helpers/switcher/switch-panel/switch-panel.js

@@ -0,0 +1,18 @@
+import { Host, h } from "@stencil/core";
+export class GxIdeSwitchPanel {
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get is() { return "gx-ide-switch-panel"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["switch-panel.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["switch-panel.css"]
+    };
+  }
+}

package/dist/collection/components/_helpers/switcher/switcher.css

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