@zanichelli/albe-web-components 19.2.2 → 19.2.3-RC1

package/dist/collection/components/z-combobox/index.js

@@ -14,30 +14,32 @@ export class ZCombobox {
         this.comboboxChange.emit({ id: this.inputid, items: this.itemsList });
     }
     constructor() {
-        this.itemsList = [];
-        this.inputType = InputType.TEXT;
+        /** input unique id */
         this.inputid = `combo-${randomId()}`;
-        this.items = undefined;
-        this.label = undefined;
+        /** the combobox is disabled */
         this.disabled = false;
+        /** show search input flag (optional) */
         this.hassearch = false;
-        this.searchlabel = undefined;
-        this.searchplaceholder = undefined;
-        this.searchtitle = undefined;
+        /** no result text message */
         this.noresultslabel = "Nessun risultato";
+        /** toggle combo list opening flag */
         this.isopen = false;
+        /** fixed style flag */
         this.isfixed = false;
+        /** show "check all" checkbox (optional) */
         this.hascheckall = false;
+        /** check all label (optional) */
         this.checkalltext = "Seleziona tutti";
+        /** uncheck all label (optional) */
         this.uncheckalltext = "Deseleziona tutti";
+        /** max number of checkable items (0 = unlimited) */
         this.maxcheckableitems = 0;
-        this.hasgroupitems = undefined;
+        /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
         this.size = ControlSize.BIG;
-        this.htmlAriaLabel = undefined;
-        this.searchValue = undefined;
-        this.selectedCounter = undefined;
-        this.renderItemsList = [];
+        this.renderItemsList = []; // used for render only
         this.focusedItemId = "";
+        this.itemsList = [];
+        this.inputType = InputType.TEXT;
         this.toggleComboBox = this.toggleComboBox.bind(this);
         this.closeFilterItems = this.closeFilterItems.bind(this);
     }
@@ -292,7 +294,7 @@ export class ZCombobox {
         return (h("z-list-element", { class: "check-all-wrapper", role: "presentation", htmlTabindex: -1, dividerType: ListDividerType.ELEMENT, dividerColor: "gray800", size: this.getControlToListSize(), disabled: !!isDisabled }, h("span", { class: "option-wrap", role: "presentation", onClick: () => this.checkOption(optionId) }, h("z-icon", { name: allChecked ? "checkbox-checked" : "checkbox", class: this.focusedItemId === optionId ? "focused" : "" }), h("span", { id: optionId, role: isDisabled ? "presentation" : "option", "aria-selected": allChecked ? "true" : "false" }, allChecked ? this.uncheckalltext : this.checkalltext))));
     }
     render() {
-        return (h("div", { key: '3d2a5f02bd730efb2ff1390c4e21e96224a4e552', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
+        return (h("div", { key: 'f65a92eded2c6cd7d4bb42ddc5f667806a4f5582', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
     }
     static get is() { return "z-combobox"; }
     static get encapsulation() { return "shadow"; }
@@ -322,8 +324,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "input unique id"
                 },
-                "attribute": "inputid",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "inputid",
                 "defaultValue": "`combo-${randomId()}`"
             },
             "items": {
@@ -336,7 +340,8 @@ export class ZCombobox {
                         "ComboItem": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ComboItem"
+                            "id": "src/beans/index.tsx::ComboItem",
+                            "referenceLocation": "ComboItem"
                         }
                     }
                 },
@@ -346,8 +351,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "list items array"
                 },
-                "attribute": "items",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items"
             },
             "label": {
                 "type": "string",
@@ -363,8 +370,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "label text"
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
             "disabled": {
                 "type": "boolean",
@@ -380,8 +389,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "the combobox is disabled"
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "hassearch": {
@@ -398,8 +409,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "show search input flag (optional)"
                 },
-                "attribute": "hassearch",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "hassearch",
                 "defaultValue": "false"
             },
             "searchlabel": {
@@ -416,8 +429,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "search input label text (optional)"
                 },
-                "attribute": "searchlabel",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "searchlabel"
             },
             "searchplaceholder": {
                 "type": "string",
@@ -433,8 +448,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "search input placeholder text (optional)"
                 },
-                "attribute": "searchplaceholder",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "searchplaceholder"
             },
             "searchtitle": {
                 "type": "string",
@@ -450,8 +467,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "search input title text (optional)"
                 },
-                "attribute": "searchtitle",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "searchtitle"
             },
             "noresultslabel": {
                 "type": "string",
@@ -467,8 +486,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "no result text message"
                 },
-                "attribute": "noresultslabel",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "noresultslabel",
                 "defaultValue": "\"Nessun risultato\""
             },
             "isopen": {
@@ -485,8 +506,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "toggle combo list opening flag"
                 },
-                "attribute": "isopen",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "isopen",
                 "defaultValue": "false"
             },
             "isfixed": {
@@ -503,8 +526,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "fixed style flag"
                 },
-                "attribute": "isfixed",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "isfixed",
                 "defaultValue": "false"
             },
             "hascheckall": {
@@ -521,8 +546,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "show \"check all\" checkbox (optional)"
                 },
-                "attribute": "hascheckall",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "hascheckall",
                 "defaultValue": "false"
             },
             "checkalltext": {
@@ -539,8 +566,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "check all label (optional)"
                 },
-                "attribute": "checkalltext",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "checkalltext",
                 "defaultValue": "\"Seleziona tutti\""
             },
             "uncheckalltext": {
@@ -557,8 +586,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "uncheck all label (optional)"
                 },
-                "attribute": "uncheckalltext",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "uncheckalltext",
                 "defaultValue": "\"Deseleziona tutti\""
             },
             "maxcheckableitems": {
@@ -575,8 +606,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "max number of checkable items (0 = unlimited)"
                 },
-                "attribute": "maxcheckableitems",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "maxcheckableitems",
                 "defaultValue": "0"
             },
             "hasgroupitems": {
@@ -593,8 +626,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "group items by category"
                 },
-                "attribute": "hasgroupitems",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hasgroupitems"
             },
             "size": {
                 "type": "string",
@@ -606,7 +641,8 @@ export class ZCombobox {
                         "ControlSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ControlSize"
+                            "id": "src/beans/index.tsx::ControlSize",
+                            "referenceLocation": "ControlSize"
                         }
                     }
                 },
@@ -616,8 +652,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "Available sizes: `big`, `small` and `x-small`. Defaults to `big`."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "ControlSize.BIG"
             },
             "htmlAriaLabel": {
@@ -634,8 +672,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "the combobox aria-label"
                 },
-                "attribute": "html-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "html-aria-label"
             }
         };
     }
@@ -676,4 +716,3 @@ export class ZCombobox {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-combobox/index.stories.js

@@ -75,4 +75,3 @@ export const Disabled = {
         disabled: true,
     },
 };
-//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-cover-hero/index.js

@@ -13,8 +13,20 @@ import { CoverHeroContentPosition, CoverHeroVariant } from "../../beans";
  */
 export class ZCoverHero {
     constructor() {
+        /**
+         * Cover hero variant. Can be `OVERLAY` or `STACKED`.
+         */
         this.variant = CoverHeroVariant.OVERLAY;
+        /**
+         * Vertical content position (for `STACKED` variant).
+         */
         this.contentPosition = CoverHeroContentPosition.TOP;
+        /**
+         * Whether to keep the image aspect ratio.
+         * If set to `false`, the cssprop `--cover-hero-aspect-ratio` will not affect the component's size;
+         * instead, the height of the component follows the content's one.
+         * Note: it may be necessary to set a min and/or max height to the component.
+         */
         this.preserveAspectRatio = true;
     }
     /**
@@ -35,9 +47,9 @@ export class ZCoverHero {
         return (h("div", { class: "content-container" }, h("slot", { name: "content" })));
     }
     render() {
-        return (h(Host, { key: '1eb5d39f26e19f213d435c185167eb83500225f3' }, this.variant === CoverHeroVariant.STACKED &&
+        return (h(Host, { key: '0e8ec76a2293bbf7044d2a5d0ec951ac096adcd1' }, this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.TOP &&
-            this.renderContent(), h("div", { key: '61c495773839b7741f674719325fe98a65956986', class: "main-container" }, h("div", { key: '0ea2f83f40f60017fb2e7a4501cb67c34d954f6c', class: "cover-container" }, h("slot", { key: '68a40d93440b22ce2afb9ff8db3cb9ca90ec7263', name: "cover" })), h("slot", { key: 'c29feaf859382807e0e55bcf2db27a98387c2e96', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
+            this.renderContent(), h("div", { key: 'e2dd8963eb05d5a1a602b05d6275d52c01b8dbc9', class: "main-container" }, h("div", { key: '3b537c3b07906fd72795b105e4189252bf876b51', class: "cover-container" }, h("slot", { key: 'f99228a940cfc96ae4ff98a6b79df622d033e00d', name: "cover" })), h("slot", { key: '86b43980717df411f76b098628d83fa80c8dcff6', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.BOTTOM &&
             this.renderContent()));
     }
@@ -65,7 +77,8 @@ export class ZCoverHero {
                         "CoverHeroVariant": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::CoverHeroVariant"
+                            "id": "src/beans/index.tsx::CoverHeroVariant",
+                            "referenceLocation": "CoverHeroVariant"
                         }
                     }
                 },
@@ -75,8 +88,10 @@ export class ZCoverHero {
                     "tags": [],
                     "text": "Cover hero variant. Can be `OVERLAY` or `STACKED`."
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "variant",
                 "defaultValue": "CoverHeroVariant.OVERLAY"
             },
             "contentPosition": {
@@ -89,7 +104,8 @@ export class ZCoverHero {
                         "CoverHeroContentPosition": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::CoverHeroContentPosition"
+                            "id": "src/beans/index.tsx::CoverHeroContentPosition",
+                            "referenceLocation": "CoverHeroContentPosition"
                         }
                     }
                 },
@@ -99,8 +115,10 @@ export class ZCoverHero {
                     "tags": [],
                     "text": "Vertical content position (for `STACKED` variant)."
                 },
-                "attribute": "content-position",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "content-position",
                 "defaultValue": "CoverHeroContentPosition.TOP"
             },
             "preserveAspectRatio": {
@@ -117,8 +135,10 @@ export class ZCoverHero {
                     "tags": [],
                     "text": "Whether to keep the image aspect ratio.\nIf set to `false`, the cssprop `--cover-hero-aspect-ratio` will not affect the component's size;\ninstead, the height of the component follows the content's one.\nNote: it may be necessary to set a min and/or max height to the component."
                 },
-                "attribute": "preserve-aspect-ratio",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "preserve-aspect-ratio",
                 "defaultValue": "true"
             }
         };
@@ -134,4 +154,3 @@ export class ZCoverHero {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-cover-hero/index.stories.js

@@ -253,4 +253,3 @@ export const StackedVariant = {
     </div>
   `,
 };
-//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-divider/index.js

@@ -2,12 +2,15 @@ import { Host, h } from "@stencil/core";
 import { DividerOrientation, DividerSize } from "../../beans";
 export class ZDivider {
     constructor() {
+        /** [optional] Divider size */
         this.size = DividerSize.SMALL;
+        /** [optional] Divider color */
         this.color = "gray200";
+        /** [optional] Divider orintation */
         this.orientation = DividerOrientation.HORIZONTAL;
     }
     render() {
-        return (h(Host, { key: '84826110c0a563d1b6f2654c540df49cdd0dfc7c', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+        return (h(Host, { key: '2be45be46ca78f9c49d78bb39d88a49a3e226074', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
     }
     static get is() { return "z-divider"; }
     static get encapsulation() { return "scoped"; }
@@ -33,7 +36,8 @@ export class ZDivider {
                         "DividerSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::DividerSize"
+                            "id": "src/beans/index.tsx::DividerSize",
+                            "referenceLocation": "DividerSize"
                         }
                     }
                 },
@@ -43,8 +47,10 @@ export class ZDivider {
                     "tags": [],
                     "text": "[optional] Divider size"
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "DividerSize.SMALL"
             },
             "color": {
@@ -61,8 +67,10 @@ export class ZDivider {
                     "tags": [],
                     "text": "[optional] Divider color"
                 },
-                "attribute": "color",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "color",
                 "defaultValue": "\"gray200\""
             },
             "orientation": {
@@ -75,7 +83,8 @@ export class ZDivider {
                         "DividerOrientation": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::DividerOrientation"
+                            "id": "src/beans/index.tsx::DividerOrientation",
+                            "referenceLocation": "DividerOrientation"
                         }
                     }
                 },
@@ -85,11 +94,12 @@ export class ZDivider {
                     "tags": [],
                     "text": "[optional] Divider orintation"
                 },
-                "attribute": "orientation",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "orientation",
                 "defaultValue": "DividerOrientation.HORIZONTAL"
             }
         };
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-divider/index.stories.js

@@ -42,4 +42,3 @@ export const Default = {
     </div>`,
     name: "ZDivider",
 };
-//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-ghost-loading/index.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class ZGhostLoading {
     render() {
-        return h(Host, { key: '597d6715119bb24d4a8427f9cb3ebd3b5a20f5fc' });
+        return h(Host, { key: 'a966fb0e58408172c56e7bb48deb1b5c0e5e0bb8' });
     }
     static get is() { return "z-ghost-loading"; }
     static get encapsulation() { return "shadow"; }
@@ -16,4 +16,3 @@ export class ZGhostLoading {
         };
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-ghost-loading/index.stories.js

@@ -19,4 +19,3 @@ export const ZGhostLoading = {
         <div style="width:30%; height:50px;"><z-ghost-loading></z-ghost-loading></div>
       </div>`,
 };
-//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-icon/index.js

@@ -5,14 +5,6 @@ import { COLOR_INDICATOR_ICONS, ICONS } from "../../constants/iconset";
  * This component automatically recognizes icons that have an indicator (e.g. `bg-color`, `font-color`, etc.), that can be filled with a custom color via the `indicatorColor` prop.
  */
 export class ZIcon {
-    constructor() {
-        this.name = undefined;
-        this.height = undefined;
-        this.width = undefined;
-        this.iconid = undefined;
-        this.fill = undefined;
-        this.indicatorColor = undefined;
-    }
     /**
      * Selects either a `<path>` or `<polygon>` element based on the format of the icon data.
      * @param iconValue The SVG path data or polygon points from the ICONS set.
@@ -27,7 +19,7 @@ export class ZIcon {
         return (h("svg", { id: this.iconid || undefined, fill: this.fill ? `var(--${this.fill})` : undefined, viewBox: "0 0 1000 1000", width: this.width, height: this.height }, this.selectPathOrPolygon(ICONS[this.name])));
     }
     render() {
-        return (h(Host, { key: '8e6cee155a15fc1b19f9907a6f6155c8d607bfa4', "aria-hidden": "true" }, COLOR_INDICATOR_ICONS.includes(this.name) ? (h("div", { class: "icon-wrapper" }, h("svg", { class: "color-indicator", fill: this.indicatorColor || "#FFFFFF00", viewBox: "0 0 1000 1000", width: this.width, height: this.height }, this.selectPathOrPolygon(ICONS["picker-color"])), this.renderBaseIcon())) : (this.renderBaseIcon())));
+        return (h(Host, { key: '65da13cefdf22f1935d9e1dbc171522955b24f1b', "aria-hidden": "true" }, COLOR_INDICATOR_ICONS.includes(this.name) ? (h("div", { class: "icon-wrapper" }, h("svg", { class: "color-indicator", fill: this.indicatorColor || "#FFFFFF00", viewBox: "0 0 1000 1000", width: this.width, height: this.height }, this.selectPathOrPolygon(ICONS["picker-color"])), this.renderBaseIcon())) : (this.renderBaseIcon())));
     }
     static get is() { return "z-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -57,8 +49,10 @@ export class ZIcon {
                     "tags": [],
                     "text": "Icon name"
                 },
-                "attribute": "name",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
             },
             "height": {
                 "type": "any",
@@ -74,8 +68,10 @@ export class ZIcon {
                     "tags": [],
                     "text": "Icon height (optional)"
                 },
-                "attribute": "height",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height"
             },
             "width": {
                 "type": "any",
@@ -91,8 +87,10 @@ export class ZIcon {
                     "tags": [],
                     "text": "Icon width (optional)"
                 },
-                "attribute": "width",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
             },
             "iconid": {
                 "type": "string",
@@ -108,8 +106,10 @@ export class ZIcon {
                     "tags": [],
                     "text": "HTML `id` attribute (optional)"
                 },
-                "attribute": "iconid",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "iconid"
             },
             "fill": {
                 "type": "string",
@@ -125,8 +125,10 @@ export class ZIcon {
                     "tags": [],
                     "text": "Name of the CSS color token to use for the icon fill color (e.g. `blue500`)."
                 },
-                "attribute": "fill",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fill"
             },
             "indicatorColor": {
                 "type": "string",
@@ -142,10 +144,11 @@ export class ZIcon {
                     "tags": [],
                     "text": "Color to use to fill the icon's color indicator, if it has one.\nCan be any valid value for the `fill` svg attribute.\nIf the icon passed through the `name` prop doesn't have a color indicator, this prop has no effect."
                 },
-                "attribute": "indicator-color",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indicator-color"
             }
         };
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-icon/index.stories.js

@@ -68,4 +68,3 @@ export const ColorIndicator = {
       .indicatorColor=${args.indicatorColor}
     ></z-icon>`,
 };
-//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-info-box/index.js

@@ -4,14 +4,14 @@ import { h } from "@stencil/core";
  */
 export class ZInfoBox {
     constructor() {
-        this.boxid = undefined;
+        /** render close icon flag */
         this.isclosable = true;
     }
     emitInfoBoxClose() {
         this.infoBoxClose.emit({ boxid: this.boxid });
     }
     render() {
-        return (h("div", { key: '18298328abf8d0e88340408882bdc529b55c1a28', id: this.boxid }, h("slot", { key: '297bb1bbd8e6adc082e3552ac2222983b1b11211', name: "content" }), this.isclosable && (h("z-icon", { key: 'fa3fa5831984754d4c8533d23437a4773bf926a6', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
+        return (h("div", { key: 'fd98793fba98d03112f68de408227ecc8576ff1d', id: this.boxid }, h("slot", { key: '2bee1952cbc660bb9ff8bdbd0945e01f9204e019', name: "content" }), this.isclosable && (h("z-icon", { key: 'ec6380fd48bb52fb1aabca5d22af5641be539cf4', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
     }
     static get is() { return "z-info-box"; }
     static get encapsulation() { return "shadow"; }
@@ -41,8 +41,10 @@ export class ZInfoBox {
                     "tags": [],
                     "text": "info box unique id"
                 },
-                "attribute": "boxid",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "boxid"
             },
             "isclosable": {
                 "type": "boolean",
@@ -58,8 +60,10 @@ export class ZInfoBox {
                     "tags": [],
                     "text": "render close icon flag"
                 },
-                "attribute": "isclosable",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "isclosable",
                 "defaultValue": "true"
             }
         };
@@ -83,4 +87,3 @@ export class ZInfoBox {
             }];
     }
 }
-//# sourceMappingURL=index.js.map