@zanichelli/albe-web-components 19.2.2 → 19.2.3

package/dist/cjs/z-myz-card-alert.cjs.entry.js

@@ -56,7 +56,7 @@ const ZMyzCardAlert = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'cfc5ba625b1f657d2717a2ac5aae0ad070ad4177', class: "alert-external-wrapper " + this.retrieveClass() }, index.h("z-alert", { key: 'c74a674717764ac11f4e71dcaa034ba950c0a1f8', type: this.getAlertType() }, index.h("div", { key: 'e289a588eee12751d10964bd9244251d0fef88b4', class: "relative-container" }, index.h("z-icon", { key: 'afe5a16bd61de53fdb2ac55e722c3d64ecf22bdf', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), index.h("span", { key: 'e7b11a13ba83bcd214b11e0e8bb89ef7976b356c', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (index.h("span", { key: 'cb5e55bbfb7afdbd2a19b7b612b2412b1a35fa80', role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
+        return (index.h("div", { key: '4dde539d077258de85bceb9a99ce2245b5fb59b6', class: "alert-external-wrapper " + this.retrieveClass() }, index.h("z-alert", { key: '88285961e5ee72342253e3cbb8872df6bdb1d980', type: this.getAlertType() }, index.h("div", { key: 'fff86788515042337d0c03dd4fbf469d79a697a9', class: "relative-container" }, index.h("z-icon", { key: '1a70753172840860985935cf0a00ba7f7370fdc2', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), index.h("span", { key: 'a17dd5f7e173b10a8aa76ab6f77bcb8bb75508ca', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (index.h("span", { key: '026a58d486e4d0b2bd7c150b9e05695f8c3c1f26', role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
                 this.handleActionButtonClick(e);
             }, onKeyPress: (e) => {
                 this.handleSpaceKeyPress(e);

package/dist/cjs/z-myz-card-dictionary.cjs.entry.js

@@ -27,7 +27,7 @@ const ZMyzCardDictionary = class {
         this.cardFlipped.emit(showBack);
     }
     render() {
-        return (index.h("div", { key: 'e6ec0b5054975547584bbee8759d987b72134d29' }, index.h("z-myz-card", { key: 'b074508d5e487ab311aab750a9595c65d0bb182f' }, index.h("z-myz-card-header", { key: 'eace632cf520eac6a109790acb47d08f03f7f88c', titolo: this.name }), index.h("div", { key: '9fc66378a96351d6251e0d700c3f93046343cb64', class: `content ${this.flipped ? "flipped" : ""}` }, index.h("div", { key: '9a90a3b496bdb8dbbe53820536f41f91aca5fe8f', class: "front" }, index.h("z-myz-card-body", { key: 'b1a8aee7f1b172fb8070e06b5d929c9c726c870e' }, index.h("z-myz-card-cover", { key: '8e51755d66e3d0b1081f34cfbbcff860b325ac52', slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), index.h("z-button", { key: '9ebd9fcb0bf970b3ae9250048809a5427d7f7586', class: { "hide-info": this.hideinfobtn }, variant: index$1.ButtonVariant.SECONDARY, icon: "informationsource", size: index$1.ButtonSize.X_SMALL, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), index.h("div", { key: '03cc1ad4636d1cf4d36ef062f9f66d07a2960d38', class: "back" }, index.h("slot", { key: '2b766a05250d41a648cb07e072707a16fa45c484', name: "info" }))), index.h("slot", { key: '288e7018302b221aa6244b01fc5f4b8140297078' }))));
+        return (index.h("div", { key: '6b1346d29ca8d1c94dc5c3dd604315aedfa89e53' }, index.h("z-myz-card", { key: 'b55d663bd25dcf5907b2b568a8a7143b11dc34a6' }, index.h("z-myz-card-header", { key: '092cebee4734c33f36e6106d0df767f66ee53b72', titolo: this.name }), index.h("div", { key: 'd6e76b7417c31c4d4f130c70a97abc7dcbc5e35e', class: `content ${this.flipped ? "flipped" : ""}` }, index.h("div", { key: 'efa43a9507b952db1e1be06aa92ebc0663944031', class: "front" }, index.h("z-myz-card-body", { key: '3285eb249c09247fee8a05605c15bbd41a08c40a' }, index.h("z-myz-card-cover", { key: '6cf9e64d190cb385af2e53ddd86a0468e962c7f7', slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), index.h("z-button", { key: 'b8a4b8181709eb7e794c0a5c66ddee3423db4571', class: { "hide-info": this.hideinfobtn }, variant: index$1.ButtonVariant.SECONDARY, icon: "informationsource", size: index$1.ButtonSize.X_SMALL, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), index.h("div", { key: '3e728ca532b6eca130e888a6fceb6d8da630dd0a', class: "back" }, index.h("slot", { key: '173a377df9c1df6891ea4a724760b964ac00e410', name: "info" }))), index.h("slot", { key: '608d82ab5d4d322124f30b767be53280912f23f3' }))));
     }
 };
 ZMyzCardDictionary.style = ZMyzCardDictionaryStyle0;

package/dist/cjs/z-myz-card-footer-sections.cjs.entry.js

@@ -12,7 +12,7 @@ const ZMyzCardFooterSections = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: '77fe7b02b4f0d995fffd93907c4e1f6fcab7cf42' }, index.h("footer", { key: 'cdd0a1cb8a5484ae646233d0122604b29f1a6ca4' }, index.h("div", { key: '91c4312af89e212ab4c74bdc1580b21ae2ef946c', class: "top" }, index.h("slot", { key: '6a8ac121b135b904892e87c1b2cfa2021e1d0b96', name: "top" })), index.h("div", { key: '09544cbf8904f0ebfdfeeaf805d203d8a4025d76', class: "bottom" }, index.h("slot", { key: '7357332d8b3992a67c466aa9f65b5f9a18d5e69a', name: "bottom" })))));
+        return (index.h("div", { key: 'a46083ba1265bd19e0b0d04e6314e43691222cde' }, index.h("footer", { key: 'd57858f24d1ecb5a0d9b4e2856a00641b5766f78' }, index.h("div", { key: 'd1cda03a27089e0c66ec4568bd4a044250d5aabf', class: "top" }, index.h("slot", { key: '96db1d35ba09c57dff19c381a4c86b7fbc3759a3', name: "top" })), index.h("div", { key: 'debf288a71d568c50f4e76d2abf8b1b4cdc25b1e', class: "bottom" }, index.h("slot", { key: '3464db01d4ec966cf1c13edb53e2a4e63eea59d2', name: "bottom" })))));
     }
 };
 ZMyzCardFooterSections.style = ZMyzCardFooterSectionsStyle0;

package/dist/cjs/z-myz-card-footer.cjs.entry.js

@@ -64,7 +64,7 @@ const ZMyzCardFooter = class {
         return this.host.querySelector("[slot=list] > li a");
     }
     render() {
-        return (index.h("div", { key: '6e5881056e1db48d540e8ef21116bee2c196b8c4', class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, index.h("footer", { key: '243b4a819cba9325d9425d63a23fcee9f9876b3d', class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, index.h("span", { key: 'cfc887864e6bf0c7fc8d08be05f0005a38aa869d', class: "toggle" }, index.h("slot", { key: 'a9e65157596b4a26eb19d5eee5a7b1a57d1feea4', name: "toggle" })), this.titolo && index.h("p", { key: '15b6bd8c19394d7bef24eb4e09720c0bb0a1685c', class: { "custom-content": this.customContent } }, this.titolo), index.h("div", { key: 'ebc158163ecd3b334daec7edb050b7e7b9f7df47', class: { "content": true, "custom-content": this.customContent } }, index.h("div", { key: '60590d4b3f2bcb949c21cde6a6d6a8a837a089a3' }, index.h("p", { key: '9b2f3b97f5de7f0760d623fc3761920aa3b1c845', class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, index.h("span", { key: '807a82ffe180cec55e8d32124be8ca46eb572270', title: this.getTitleAuthors() }, index.h("span", { key: 'c9c790fcd14571bd4d15d991496b49392097990f', "aria-description": "Autori", class: "bold" }, this.autori))), index.h("p", { key: 'ca97678f9bc18bea8777c1a2ae994a954cab4cf3', class: "year-isbn" }, index.h("span", { key: '232aab4aaf39be78ace0ece41ea4060a4e355f9a', class: "isbn" }, index.h("span", { key: '301da712b177444f57a889ed25112a3837a65d2a' }, index.h("span", { key: 'e825aa9877d17cc64db355a0ddefc0d36195eab9', "aria-description": "ISBN edizione cartacea", class: "bold" }, this.isbn), " ", "(ed. cartacea)")))), index.h("div", { key: '91db300900421801d17073597173773e6df7f56d', class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, index.h("slot", { key: '88c704a8e47124becd3659dc9b2e23be2165cee3', name: "list" })))), this.customContent && index.h("slot", { key: '2f73c782577a5b7394a24af188229c6c6a750612', name: "content" })));
+        return (index.h("div", { key: 'b2c367deffbb414b14b26d4f9c6bc9da8164a350', class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, index.h("footer", { key: '4a5e9261262c078bbc6e36f6fe6188f914f3f892', class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, index.h("span", { key: 'd89f1c82507f524997001e23a667e2d7613d3db4', class: "toggle" }, index.h("slot", { key: '746bc0ef6b6e3b67d53027033a3125b1a88b6dbc', name: "toggle" })), this.titolo && index.h("p", { key: '9ab5fe483ca565306d185b1ad3757389880303c7', class: { "custom-content": this.customContent } }, this.titolo), index.h("div", { key: '3f13c2950c5c6b7a0a6eb5dcef9f66c2b5333755', class: { "content": true, "custom-content": this.customContent } }, index.h("div", { key: '33bc4ee1df0442430b252e89f5a5683dd090676f' }, index.h("p", { key: 'f8a74c735f1bfcccc7e53aac0339ea9bc23d70d5', class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, index.h("span", { key: 'e768282b621bd4918d02f79d7b6fb435328e2ff7', title: this.getTitleAuthors() }, index.h("span", { key: '51e3506af92802176f696db218326cbf1c4b276d', "aria-description": "Autori", class: "bold" }, this.autori))), index.h("p", { key: 'ffee18d90a03c7828e2683c1c18cc7b07098208f', class: "year-isbn" }, index.h("span", { key: 'e95af54bc544e76269fcc9f120c184a1c7fcc768', class: "isbn" }, index.h("span", { key: '0a2e1414b5c770a43d1971d5df38a5533a9f7589' }, index.h("span", { key: '735f3054ea25c564632ddfb5b09849bb05f9ea6d', "aria-description": "ISBN edizione cartacea", class: "bold" }, this.isbn), " ", "(ed. cartacea)")))), index.h("div", { key: '5f0cccd6077cadd792659c426d5eee35cb0528c1', class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, index.h("slot", { key: 'b147e0d5bd7a20bd562214e2a4274f1d2a7bd52b', name: "list" })))), this.customContent && index.h("slot", { key: '5ebdd6a9e733998f158f56718649d495cacb3c87', name: "content" })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/z-myz-card-icon.cjs.entry.js

@@ -15,7 +15,7 @@ const ZMyzCardIcon = class {
         this.ariaLabel = "";
     }
     render() {
-        return (index.h("button", { key: '6eeee51373c90e15a165b2511675c1df63974289', disabled: this.isdisabled, "aria-label": this.ariaLabel }, index.h("span", { key: '197d99ffec190c40dd72ab22176ac502cf410951' }, index.h("z-icon", { key: '9b5f1fae74c6cd7ee9a8d7f66e90bee09e5fa7e9', name: this.icon, width: 16, height: 16 }))));
+        return (index.h("button", { key: '6c7bbcbde5d35a54fafe344f2c1e4be78f8b2d29', disabled: this.isdisabled, "aria-label": this.ariaLabel }, index.h("span", { key: '81c38638c37f57c5e68e8d2db9f16db83752bc15' }, index.h("z-icon", { key: '8d1b8d34c61411f7079c4a492294fde70cd923e2', name: this.icon, width: 16, height: 16 }))));
     }
 };
 ZMyzCardIcon.style = ZMyzCardIconStyle0;

package/dist/cjs/z-myz-card-info.cjs.entry.js

@@ -122,7 +122,7 @@ const ZMyzCardInfo = class {
         return (index.h("section", { ref: (el) => (this.offlineLicenseWrapper = el) }, index.h("span", { class: "license-heading" }, index.h("span", null, "Licenza offline"), this.setExpirationLicenseMessage("offline")), "Scadenza il ", index.h("b", null, this.cardData.offlineLicense.expiration), index.h("br", null), "Installazioni disponibili: ", index.h("b", null, this.cardData.offlineLicense.installations)));
     }
     render() {
-        return (index.h("div", { key: 'e6ef5ad3c71c2b049d77bf7b58b4eed49aff7f07' }, this.renderCloseIcon(), index.h("div", { key: '3709fc8d09e49fa1e56c89a9fd3453c677b0837b', class: "content-wrapper", ref: (el) => (this.contentWrapper = el) }, this.renderGeneralSection(), this.renderTooltip(), this.renderOnlineLicenseSection(), this.renderOfflineLicenseSection()), index.h("div", { key: '06f65296b31493f7e948f7af4de260443bf45c4a', class: "cta-wrapper" }, index.h("slot", { key: '1cd54dc4feef61416039fbf9d43c6f9a6ed0be25' }))));
+        return (index.h("div", { key: '81d2f2e223da107bea1c15bb4df6640567a37990' }, this.renderCloseIcon(), index.h("div", { key: 'fed0c665a34ab4c264313d726b642a587e04bd61', class: "content-wrapper", ref: (el) => (this.contentWrapper = el) }, this.renderGeneralSection(), this.renderTooltip(), this.renderOnlineLicenseSection(), this.renderOfflineLicenseSection()), index.h("div", { key: '8978d9206d452b14843fadad6c8c6bacd976f77c', class: "cta-wrapper" }, index.h("slot", { key: '2d2431d4c8a8ed03c7428e77fc19a6556cd1cc35' }))));
     }
 };
 ZMyzCardInfo.style = ZMyzCardInfoStyle0;

package/dist/cjs/z-myz-card-list.cjs.entry.js

@@ -32,7 +32,7 @@ const ZMyzCardList = class {
         });
     }
     render() {
-        return index.h("ul", { key: '608a46eb635be05ab1bb225bb28354f0a5e4ca44' }, this.renderList(JSON.parse(this.listdata)));
+        return index.h("ul", { key: 'aa9fc5633a56ebb91f157bc65cb8cfb20cf1bacb' }, this.renderList(JSON.parse(this.listdata)));
     }
 };
 ZMyzCardList.style = ZMyzCardListStyle0;

package/dist/cjs/z-myz-card_4.cjs.entry.js

@@ -39,7 +39,7 @@ const ZMyzCardComponent = class {
         return elemClasses;
     }
     render() {
-        return (index.h("div", { key: 'fe9682514ff12467eff3a0f844690aaad51ac1e5', class: this.retrieveClass(), tabindex: "0" }, index.h("slot", { key: 'b38b157360d99c9f0fd6009343547877c51fd59a' })));
+        return (index.h("div", { key: 'f67975d8bf57387a4e4b0fc45df88e5b570c23e4', class: this.retrieveClass(), tabindex: "0" }, index.h("slot", { key: 'be9495f0b9a9c8270c22511d2afa68f940eae945' })));
     }
 };
 ZMyzCardComponent.style = ZMyzCardStyle0;
@@ -52,7 +52,7 @@ const ZMyzCardBody = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: 'ce8e2f29bbbe43340a86049182f38586e14b8e47' }, index.h("slot", { key: '2b3c1274ab1df4995039e7dfc82a06e10ac66be9', name: "alert" }), index.h("slot", { key: 'c92240268966ca58f7844e6a43693582152b59f5', name: "cover" })));
+        return (index.h("div", { key: 'f979e99bc3e8640e4c6ff7603d0bdba1bcd4f10f' }, index.h("slot", { key: 'e246c5398ab2e8d1917f3a42c1037c3caedee6fa', name: "alert" }), index.h("slot", { key: 'aa79cbf40366c68b839aa335b705ba4a8af20b7f', name: "cover" })));
     }
 };
 ZMyzCardBody.style = ZMyzCardBodyStyle0;
@@ -72,7 +72,7 @@ const ZMyzCardCover = class {
         this.img = this.defaultimg;
     }
     render() {
-        return (index.h("img", { key: '9474ee5c6352f5f253b4d976ff88a4a9079ad176', class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
+        return (index.h("img", { key: 'ca8f2207563979810f396544be243792903af17c', class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
     }
 };
 ZMyzCardCover.style = ZMyzCardCoverStyle0;
@@ -108,7 +108,7 @@ const ZMyzCardHeader = class {
         };
     }
     render() {
-        return (index.h("header", { key: 'f57af285c3ded847594f226cd57e29f47e96db29', class: this.retrieveClass() }, index.h("slot", { key: 'd4404802765f567dd4be757becef12bde5a0762c', name: "aria-heading" }), index.h("span", { key: '5906cbdb67aea281d0ccabe43711c7d2e34c0667', class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), index.h("slot", { key: '7f4dd40eb421872623556751133a9138a4381a98', name: "icon" })));
+        return (index.h("header", { key: '3a55d0bf3dfd589c1880526191ddbdd311ba6b86', class: this.retrieveClass() }, index.h("slot", { key: 'faedfbb21b4fd7f56bd08093e5347a4655797008', name: "aria-heading" }), index.h("span", { key: '53805e713dec6b891a878388d98f9f0749951f31', class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), index.h("slot", { key: '68479fd579921c6fd623fa92b27dafd24bc41d18', name: "icon" })));
     }
 };
 ZMyzCardHeader.style = ZMyzCardHeaderStyle0;

package/dist/cjs/z-myz-list-item.cjs.entry.js

@@ -33,7 +33,7 @@ const ZMyzListItem = class {
     }
     render() {
         const linkId = this.listitemid ? `link_${this.listitemid}` : "";
-        return (index.h("li", { key: 'b26b8dbeaf1a8f5beb9ce7c799bafc5dacc6d471', role: "button", id: this.listitemid, "data-action": this.action, onClick: (e) => this.emitZListItemClick(e, this.listitemid), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitZListItemClick, this.listitemid) }, index.h("span", { key: 'bd0de19c4f484bd249358e39df3ca4296e9eb360', class: this.underlined && "border" }, this.icon && index.h("z-icon", { key: '47edd1a371c2c4cbb34d07fb7120d6f96e51669e', name: this.icon }), this.link ? (index.h("a", { href: this.link ? this.link : null, target: this.linktarget, id: linkId, onClick: (e) => this.emitZListItemLinkClick(e, linkId), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitZListItemLinkClick, linkId), role: this.link ? "link" : "button", tabindex: "0" }, this.text)) : (index.h("span", { innerHTML: this.text })), index.h("slot", { key: '93a47ea9cf8cf341d9cacedbd13b34d8877d60fe' }))));
+        return (index.h("li", { key: 'e8054df30e0540b758ecac0133a03ba8c64762ea', role: "button", id: this.listitemid, "data-action": this.action, onClick: (e) => this.emitZListItemClick(e, this.listitemid), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitZListItemClick, this.listitemid) }, index.h("span", { key: 'e9fd1c5d30e270a4f1f5b6d309a2bcb40b023819', class: this.underlined && "border" }, this.icon && index.h("z-icon", { key: 'd714ad82aac6db611955e4c9669d272c44c5fbaf', name: this.icon }), this.link ? (index.h("a", { href: this.link ? this.link : null, target: this.linktarget, id: linkId, onClick: (e) => this.emitZListItemLinkClick(e, linkId), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitZListItemLinkClick, linkId), role: this.link ? "link" : "button", tabindex: "0" }, this.text)) : (index.h("span", { innerHTML: this.text })), index.h("slot", { key: '77595259e1f32f42f1d36beb2dfaf216a115d887' }))));
     }
 };
 ZMyzListItem.style = ZMyzListItemStyle0;

package/dist/cjs/z-myz-list.cjs.entry.js

@@ -26,7 +26,7 @@ const ZMyzList = class {
     }
     render() {
         const lastElem = this.list ? this.list.length - 1 : -1;
-        return (index.h("ul", { key: '97237c224248c304a8c70ddb938beb0e416d246d' }, this.list &&
+        return (index.h("ul", { key: '94453803cc1c6b3d3b81e19f107c09abc395bbff' }, this.list &&
             this.list.map((bean, i) => (index.h("z-myz-list-item", { listitemid: bean.listitemid, text: bean.text, link: bean.link, linktarget: bean.linktarget, icon: bean.icon, underlined: lastElem != i })))));
     }
     static get watchers() { return {

package/dist/cjs/z-notification.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-96af6326.js');
 
-const stylesCss = ":host{--z-notification--top-offset:0;display:flex;width:100%;box-sizing:border-box;align-items:flex-start;padding:calc(var(--space-unit) * 2);border-bottom:var(--border-size-medium) solid var(--color-surface03);font-family:var(--font-family-sans);outline:none}:host([sticky]){position:sticky;top:var(--z-notification--top-offset)}:host([sticky]),:host([showshadow]){box-shadow:var(--shadow-3)}:host([type=\"success\"]){background:var(--color-inverse-success)}:host([type=\"warning\"]){background:var(--color-inverse-warning)}:host([type=\"error\"]){background:var(--color-inverse-error)}.status-icon,.close-button{display:flex;height:20px;align-items:center}:host([type=\"success\"]) .status-icon{fill:var(--color-default-success)}:host([type=\"warning\"]) .status-icon{fill:var(--color-default-warning)}:host([type=\"error\"]) .status-icon{fill:var(--color-default-error)}:host>button,.content-container>button{padding:0;border:none;margin:0;background:transparent;cursor:pointer;font-family:inherit}.status-icon+.content-container{margin-left:var(--space-unit)}.content-container{display:flex;flex:1 auto;flex-wrap:wrap;align-items:baseline;justify-content:space-between;row-gap:calc(var(--space-unit) * 2)}.content-text{max-width:800px;color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:20px}.action-button{color:var(--color-primary01);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:16px}.action-button:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}.content-container+.close-button{margin-left:calc(var(--space-unit) * 2)}.close-button z-icon{fill:var(--color-primary01)}@media only screen and (min-width: 768px){.content-container{flex-wrap:nowrap}.content-text+.action-button{margin-left:calc(var(--space-unit) * 5)}}";
+const stylesCss = ":host{--z-notification--top-offset:0;--z-notification--content-max-width:100%;display:block;width:100%}.main-container{display:flex;max-width:var(--z-notification--content-max-width);align-items:flex-start;padding:calc(var(--space-unit) * 2);margin:0 auto;background-color:transparent;font-family:var(--font-family-sans)}:host([sticky]){position:sticky;top:var(--z-notification--top-offset)}:host([sticky]),:host([showshadow]){box-shadow:var(--shadow-3)}:host([type=\"success\"]){background:var(--color-inverse-success)}:host([type=\"warning\"]){background:var(--color-inverse-warning)}:host([type=\"error\"]){background:var(--color-inverse-error)}.status-icon,.close-button{display:flex;height:20px;align-items:center}:host([type=\"success\"]) .status-icon{fill:var(--color-default-success)}:host([type=\"warning\"]) .status-icon{fill:var(--color-default-warning)}:host([type=\"error\"]) .status-icon{fill:var(--color-default-error)}:host([borderposition=\"bottom\"]){border-bottom:var(--border-size-medium) solid var(--color-surface03)}:host([borderposition=\"top\"]){border-top:var(--border-size-medium) solid var(--color-surface03)}button{padding:0;border:none;margin:0;background:transparent;cursor:pointer;font-family:inherit}.status-icon+.content-container{margin-left:var(--space-unit)}.content-container{display:flex;flex:1 auto;flex-wrap:wrap;align-items:baseline;justify-content:space-between;row-gap:calc(var(--space-unit) * 2)}.content-text{color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:20px}.action-button{color:var(--color-primary01);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:16px}.action-button:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}.content-container+.close-button{margin-left:calc(var(--space-unit) * 2)}.close-button z-icon{fill:var(--color-primary01)}@media only screen and (min-width: 768px){.content-container{flex-wrap:nowrap}.content-text+.action-button{margin-left:calc(var(--space-unit) * 5)}}";
 const ZNotificationStyle0 = stylesCss;
 
 const ZNotification = class {
@@ -26,12 +26,13 @@ const ZNotification = class {
         this.showclose = false;
         this.showshadow = false;
         this.sticky = false;
+        this.borderposition = "bottom";
         this.handleActionButtonClick = this.handleActionButtonClick.bind(this);
         this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'aac3e6385d2f77e80c9933e666770e3da17c21a5' }, this.contenticonname && (index.h("z-icon", { key: '1ba77acd6db4e01ac47ae605c4ab05a345999462', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), index.h("div", { key: '9df24bcba7a1f49c803f339a0ac5ddafc08c03c9', class: "content-container" }, index.h("div", { key: 'bd1a76905a9c14fa77a1704a127a65a8ba9adab8', class: "content-text" }, index.h("slot", { key: 'b126d399950149b0d4cd94d3c2480678d7f91a97' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (index.h("button", { key: '63f56578ed42e720c20b57424c1d824729279e36', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (index.h("button", { key: '81ccf6858d6b559a23b1c9266d8af55e7bd3a2f2', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, index.h("z-icon", { key: '96c95d07ef561d4b900acefaef90e00d85dc3904', name: "multiply-circle", width: 16, height: 16 })))));
+        return (index.h(index.Host, { key: '7a717d8687d3e8e6de06c25192f9e2f14b6563c1' }, index.h("div", { key: 'eee4aa9a69678e7f353ead6ef4e805544e55426e', class: "main-container" }, this.contenticonname && (index.h("z-icon", { key: '8d582f822e1e4ad440c65002d9a4abb5e0294040', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), index.h("div", { key: '2779b5f3d772ee729c67b1616523ccac1b4646f0', class: "content-container" }, index.h("div", { key: '1e622f63cc7d8523ab52561360a9de5e8829e976', class: "content-text" }, index.h("slot", { key: 'f0c65317530288e6ddeb9b604d21243858f25220' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (index.h("button", { key: '2cefcdb30e39df9dd2e80f4ddd41f9c887d3594e', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (index.h("button", { key: '1a4d7a77ae2b9d6f86cfab0c7b72c77daff9d3da', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, index.h("z-icon", { key: '33377e8438a076a2c3eee32ab9f513885e15fbcf', name: "multiply-circle", width: 16, height: 16 }))))));
     }
 };
 ZNotification.style = ZNotificationStyle0;

package/dist/cjs/z-notification.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"z-notification.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,q0DAAq0D,CAAC;AACx1D,4BAAe,SAAS;;MCYX,aAAa;IAgChB,uBAAuB,CAAC,CAAa;QAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;KAChC;IAMO,sBAAsB,CAAC,CAAa;QAC1C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;KAC/B;IAED;;;;;;;yBA/BsB,KAAK;0BAOJ,KAAK;sBAIT,KAAK;QAqBtB,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACtE;IAED,MAAM;;QACJ,QACEA,QAACC,UAAI,uDACF,IAAI,CAAC,eAAe,KACnBD,qEACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAE,IAAI,CAAC,eAAe,EAC1B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACH,EACDA,kEAAK,KAAK,EAAC,mBAAmB,IAC5BA,kEAAK,KAAK,EAAC,cAAc,IACvBA,oEAAa,CACT,EACL,CAAC,EAAC,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI,EAAE,CAAA,KACxBA,qEACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,uBAAuB,IAEpC,IAAI,CAAC,UAAU,CACT,CACV,CACG,EACL,IAAI,CAAC,SAAS,KACbA,qEACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,sBAAsB,IAEpCA,qEACE,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,CACI,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/z-notification/styles.css?tag=z-notification&encapsulation=shadow","src/components/z-notification/index.tsx"],"sourcesContent":[":host {\n  --z-notification--top-offset: 0;\n\n  display: flex;\n  width: 100%;\n  box-sizing: border-box;\n  align-items: flex-start;\n  padding: calc(var(--space-unit) * 2);\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n  font-family: var(--font-family-sans);\n  outline: none;\n}\n\n:host([sticky]) {\n  position: sticky;\n  top: var(--z-notification--top-offset);\n}\n\n:host([sticky]),\n:host([showshadow]) {\n  box-shadow: var(--shadow-3);\n}\n\n:host([type=\"success\"]) {\n  background: var(--color-inverse-success);\n}\n\n:host([type=\"warning\"]) {\n  background: var(--color-inverse-warning);\n}\n\n:host([type=\"error\"]) {\n  background: var(--color-inverse-error);\n}\n\n.status-icon,\n.close-button {\n  /* simulate the line-height of the text\n  to make the icon look correctly aligned with it. */\n  display: flex;\n  height: 20px;\n  align-items: center;\n}\n\n:host([type=\"success\"]) .status-icon {\n  fill: var(--color-default-success);\n}\n\n:host([type=\"warning\"]) .status-icon {\n  fill: var(--color-default-warning);\n}\n\n:host([type=\"error\"]) .status-icon {\n  fill: var(--color-default-error);\n}\n\n:host > button,\n.content-container > button {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background: transparent;\n  cursor: pointer;\n  font-family: inherit;\n}\n\n.status-icon + .content-container {\n  margin-left: var(--space-unit);\n}\n\n.content-container {\n  display: flex;\n  flex: 1 auto;\n  flex-wrap: wrap;\n  align-items: baseline;\n  justify-content: space-between;\n  row-gap: calc(var(--space-unit) * 2);\n}\n\n.content-text {\n  max-width: 800px;\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 20px;\n}\n\n.action-button {\n  color: var(--color-primary01);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  letter-spacing: 0.32px;\n  line-height: 16px;\n}\n\n.action-button:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n.content-container + .close-button {\n  margin-left: calc(var(--space-unit) * 2);\n}\n\n.close-button z-icon {\n  fill: var(--color-primary01);\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  .content-container {\n    flex-wrap: nowrap;\n  }\n\n  .content-text + .action-button {\n    margin-left: calc(var(--space-unit) * 5);\n  }\n}\n","import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {NotificationType} from \"../../beans\";\n\n/**\n * Notification bar component.\n * @slot - The text of the notification.\n * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.\n */\n@Component({\n  tag: \"z-notification\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZNotification {\n  /** Name of the icon on the left of the content */\n  @Prop()\n  contenticonname?: string;\n\n  /** Action button text */\n  @Prop()\n  actiontext?: string;\n\n  /** Alert variant type */\n  @Prop({reflect: true})\n  type: NotificationType;\n\n  /** Enable close icon */\n  @Prop()\n  showclose?: boolean = false;\n\n  /**\n   * Enable shadow.\n   * @deprecated shadow is available only for the `sticky` version of the notification.\n   */\n  @Prop({reflect: true})\n  showshadow?: boolean = false;\n\n  /** Enable sticky notification bar. */\n  @Prop({reflect: true})\n  sticky?: boolean = false;\n\n  /** Call to action clicked */\n  @Event()\n  notificationAction: EventEmitter;\n\n  private handleActionButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationAction.emit();\n  }\n\n  /** Close button clicked */\n  @Event()\n  notificationClose: EventEmitter;\n\n  private handleCloseButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationClose.emit();\n  }\n\n  constructor() {\n    this.handleActionButtonClick = this.handleActionButtonClick.bind(this);\n    this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);\n  }\n\n  render(): HTMLZNotificationElement {\n    return (\n      <Host>\n        {this.contenticonname && (\n          <z-icon\n            class=\"status-icon\"\n            name={this.contenticonname}\n            width={16}\n            height={16}\n          />\n        )}\n        <div class=\"content-container\">\n          <div class=\"content-text\">\n            <slot></slot>\n          </div>\n          {!!this.actiontext?.trim() && (\n            <button\n              class=\"action-button\"\n              type=\"button\"\n              onClick={this.handleActionButtonClick}\n            >\n              {this.actiontext}\n            </button>\n          )}\n        </div>\n        {this.showclose && (\n          <button\n            class=\"close-button\"\n            type=\"button\"\n            onClick={this.handleCloseButtonClick}\n          >\n            <z-icon\n              name=\"multiply-circle\"\n              width={16}\n              height={16}\n            />\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"z-notification.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,4hEAA4hE,CAAC;AAC/iE,4BAAe,SAAS;;MCaX,aAAa;IAoChB,uBAAuB,CAAC,CAAa;QAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;KAChC;IAMO,sBAAsB,CAAC,CAAa;QAC1C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;KAC/B;IAED;;;;;;;yBAnCsB,KAAK;0BAOJ,KAAK;sBAIT,KAAK;8BAIY,QAAQ;QAqB1C,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACtE;IAED,MAAM;;QACJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,eAAe,KACnBA,qEACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAE,IAAI,CAAC,eAAe,EAC1B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACH,EACDA,kEAAK,KAAK,EAAC,mBAAmB,IAC5BA,kEAAK,KAAK,EAAC,cAAc,IACvBA,oEAAa,CACT,EACL,CAAC,EAAC,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI,EAAE,CAAA,KACxBA,qEACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,uBAAuB,IAEpC,IAAI,CAAC,UAAU,CACT,CACV,CACG,EACL,IAAI,CAAC,SAAS,KACbA,qEACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,sBAAsB,IAEpCA,qEACE,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,CACG,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/z-notification/styles.css?tag=z-notification&encapsulation=shadow","src/components/z-notification/index.tsx"],"sourcesContent":[":host {\n  --z-notification--top-offset: 0;\n  --z-notification--content-max-width: 100%;\n\n  display: block;\n  width: 100%;\n}\n\n.main-container {\n  display: flex;\n  max-width: var(--z-notification--content-max-width);\n  align-items: flex-start;\n  padding: calc(var(--space-unit) * 2);\n  margin: 0 auto;\n  background-color: transparent;\n  font-family: var(--font-family-sans);\n}\n\n:host([sticky]) {\n  position: sticky;\n  top: var(--z-notification--top-offset);\n}\n\n:host([sticky]),\n:host([showshadow]) {\n  box-shadow: var(--shadow-3);\n}\n\n:host([type=\"success\"]) {\n  background: var(--color-inverse-success);\n}\n\n:host([type=\"warning\"]) {\n  background: var(--color-inverse-warning);\n}\n\n:host([type=\"error\"]) {\n  background: var(--color-inverse-error);\n}\n\n.status-icon,\n.close-button {\n  /* simulate the line-height of the text\n  to make the icon look correctly aligned with it. */\n  display: flex;\n  height: 20px;\n  align-items: center;\n}\n\n:host([type=\"success\"]) .status-icon {\n  fill: var(--color-default-success);\n}\n\n:host([type=\"warning\"]) .status-icon {\n  fill: var(--color-default-warning);\n}\n\n:host([type=\"error\"]) .status-icon {\n  fill: var(--color-default-error);\n}\n\n:host([borderposition=\"bottom\"]) {\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\n:host([borderposition=\"top\"]) {\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n}\n\nbutton {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background: transparent;\n  cursor: pointer;\n  font-family: inherit;\n}\n\n.status-icon + .content-container {\n  margin-left: var(--space-unit);\n}\n\n.content-container {\n  display: flex;\n  flex: 1 auto;\n  flex-wrap: wrap;\n  align-items: baseline;\n  justify-content: space-between;\n  row-gap: calc(var(--space-unit) * 2);\n}\n\n.content-text {\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 20px;\n}\n\n.action-button {\n  color: var(--color-primary01);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  letter-spacing: 0.32px;\n  line-height: 16px;\n}\n\n.action-button:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n.content-container + .close-button {\n  margin-left: calc(var(--space-unit) * 2);\n}\n\n.close-button z-icon {\n  fill: var(--color-primary01);\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  .content-container {\n    flex-wrap: nowrap;\n  }\n\n  .content-text + .action-button {\n    margin-left: calc(var(--space-unit) * 5);\n  }\n}\n","import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {NotificationType} from \"../../beans\";\n\n/**\n * Notification bar component.\n * @slot - The text of the notification.\n * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.\n * @cssprop --z-notification--content-max-width - The max width of the notification content.\n */\n@Component({\n  tag: \"z-notification\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZNotification {\n  /** Name of the icon on the left of the content */\n  @Prop()\n  contenticonname?: string;\n\n  /** Action button text */\n  @Prop()\n  actiontext?: string;\n\n  /** Alert variant type */\n  @Prop({reflect: true})\n  type: NotificationType;\n\n  /** Enable close icon */\n  @Prop()\n  showclose?: boolean = false;\n\n  /**\n   * Enable shadow.\n   * @deprecated shadow is available only for the `sticky` version of the notification.\n   */\n  @Prop({reflect: true})\n  showshadow?: boolean = false;\n\n  /** Enable sticky notification bar. */\n  @Prop({reflect: true})\n  sticky?: boolean = false;\n\n  /** Border position */\n  @Prop({reflect: true})\n  borderposition?: \"top\" | \"bottom\" = \"bottom\";\n\n  /** Call to action clicked */\n  @Event()\n  notificationAction: EventEmitter;\n\n  private handleActionButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationAction.emit();\n  }\n\n  /** Close button clicked */\n  @Event()\n  notificationClose: EventEmitter;\n\n  private handleCloseButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationClose.emit();\n  }\n\n  constructor() {\n    this.handleActionButtonClick = this.handleActionButtonClick.bind(this);\n    this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);\n  }\n\n  render(): HTMLZNotificationElement {\n    return (\n      <Host>\n        <div class=\"main-container\">\n          {this.contenticonname && (\n            <z-icon\n              class=\"status-icon\"\n              name={this.contenticonname}\n              width={16}\n              height={16}\n            />\n          )}\n          <div class=\"content-container\">\n            <div class=\"content-text\">\n              <slot></slot>\n            </div>\n            {!!this.actiontext?.trim() && (\n              <button\n                class=\"action-button\"\n                type=\"button\"\n                onClick={this.handleActionButtonClick}\n              >\n                {this.actiontext}\n              </button>\n            )}\n          </div>\n          {this.showclose && (\n            <button\n              class=\"close-button\"\n              type=\"button\"\n              onClick={this.handleCloseButtonClick}\n            >\n              <z-icon\n                name=\"multiply-circle\"\n                width={16}\n                height={16}\n              />\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-otp.cjs.entry.js

@@ -24,7 +24,7 @@ const ZOtp = class {
         this.otpRef = [...Array(this.inputNum)];
     }
     render() {
-        return (index.h("div", { key: '9814a8c35149033a7ce7091ff7d9807cd400f50a', class: "otp-container" }, index.h("div", { key: 'f85cbf0862d6b50da4a015e8ca6651b56ba96b30', class: "digits-container" }, this.otp.map((_val, i) => (index.h("input", { class: this.status == index$1.InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
+        return (index.h("div", { key: '78c6a2c425f8b8d222be16db33bb9d12307015d1', class: "otp-container" }, index.h("div", { key: '18e0d6a908aabdfe49ce4613c094fb12166b0914', class: "digits-container" }, this.otp.map((_val, i) => (index.h("input", { class: this.status == index$1.InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
                 if (e.keyCode > 47) {
                     this.otpRef[i].value = "";
                 }
@@ -35,7 +35,7 @@ const ZOtp = class {
             }, onInput: (e) => {
                 this.otp[i] = e.target.value;
                 this.emitInputChange(this.otp.join(""));
-            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), index.h("z-input-message", { key: '666ac57e8c41d6f6c205839f05337c5ec29bf9ba', message: this.message, status: this.status })));
+            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), index.h("z-input-message", { key: '1d3207b1411926edb77efbc8a57e179972b77a2e', message: this.message, status: this.status })));
     }
 };
 ZOtp.style = ZOtpStyle0;

package/dist/cjs/z-panel-elem.cjs.entry.js

@@ -22,12 +22,12 @@ const ZPanelElem = class {
     }
     render() {
         const elemId = this.elemid ? this.elemid : "";
-        return (index.h("div", { key: '7ccde7a594052fb877c381d8f2db8df80d64e96e', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (index.h("div", { key: 'f925fb70d03baa4a8a7f96006c515c9116785ff7', "aria-hidden": "true", class: "panel-elem-icon" }, index.h("img", { key: 'b0349cf006ded4cc02f686e1ea1adfbd76550fb8', src: this.imgurl, alt: this.imgalt }))), index.h("div", { key: 'c9393757ba1c849c8558dc668189f6f27b232e94', class: "panel-elem-link" }, index.h("a", { key: '7c552ae67030c9bf12a6e52e8d8f6f82df88b4a2', class: {
+        return (index.h("div", { key: '5d734919b0fd927095c2e65ff1200ed550e48bd2', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (index.h("div", { key: '3d315fef58dfe7ecf601ade8f1652e447fdbe636', "aria-hidden": "true", class: "panel-elem-icon" }, index.h("img", { key: '47f8a1c400949b67c984d25c5bdf9f20ee3d846b', src: this.imgurl, alt: this.imgalt }))), index.h("div", { key: '9757e879ebe255ccdbdd815c7404a6cfe9f9cb1e', class: "panel-elem-link" }, index.h("a", { key: '4ee9897a9875081e871e4a72d7cdd9c6df23f6e1', class: {
                 "z-link": true,
                 "z-link-disabled": this.isdisabled,
                 "z-link-icon": true,
                 "z-link-blue": true,
-            }, id: elemId + "link_id", href: this.url, target: this.target }, index.h("z-icon", { key: 'f72a6a2634b41803ea7eaf8d51ba3439f095457a', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (index.h("div", { key: '6cd08ffd2e65f13d500f88682724f4f762c1f118', class: "panel-elem-desc" }, index.h("slot", { key: '01f55703602ee64f92eed8bc918ac5032927850c', name: this.descrSlotName })))));
+            }, id: elemId + "link_id", href: this.url, target: this.target }, index.h("z-icon", { key: 'b651e1ab06b937189e46634c0a91470afcde9168', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (index.h("div", { key: '5ab6f6ba7f8f3f50a3018b56b7ff3ea75f7e5aa5', class: "panel-elem-desc" }, index.h("slot", { key: 'c4d1f5928e8be8f25e36f1a3bf9a33f603b37148', name: this.descrSlotName })))));
     }
 };
 ZPanelElem.style = ZPanelElemStyle0;

package/dist/cjs/z-popover.cjs.entry.js

@@ -496,7 +496,7 @@ const ZPopover = class {
         cancelAnimationFrame(this.animationFrameRequestId);
     }
     render() {
-        return (index.h(index.Host, { key: 'c3483157f2664088a337118936d81f551dcf25b1', "current-position": this.currentPosition }, index.h("slot", { key: 'fc9856b30959fc041dbf295fe7bbf523ce6adaf6' })));
+        return (index.h(index.Host, { key: '0a8cd5736765d61bf31b6f19f6fd6b3b61ffb414', "current-position": this.currentPosition }, index.h("slot", { key: '269e9c027b0636583b199d91e724ca2093aac615' })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/z-skip-to-content.cjs.entry.js

@@ -52,7 +52,7 @@ const ZSkipToContent = class {
         this.visible = false;
     }
     render() {
-        return (index.h(index.Host, { key: '1a7ea404cfe0bc4dcf7f60787b218cdf58f28a28', class: {
+        return (index.h(index.Host, { key: 'b28906d64e95ddb5bac9fe36fc2b522b1b77f51d', class: {
                 [this.variant]: true,
                 "skip-to-content-visible": this.visible,
             } }, this.links.map((link, i) => {

package/dist/cjs/z-stepper-item.cjs.entry.js

@@ -24,7 +24,7 @@ const ZStepperItem = class {
         return Object.assign(Object.assign(Object.assign(Object.assign({}, href), role), current), tabindex);
     }
     render() {
-        return (index.h(index.Host, { key: 'eee285538af50ff09c49ead53e0589f20f810567', role: "listitem" }, index.h("button", Object.assign({ key: '0b354bc4e0ad809044e1cf0beb80a6259b2df43a', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), index.h("div", { key: '3227f3ce382e6340cfc9bec365cb2d7b79dba2ed', class: "indicator" }, this.checked ? index.h("z-icon", { name: "checkmark" }) : this.index), index.h("span", { key: '1099214dda81271f48d2453d1e111042a79207af' }, index.h("slot", { key: '50262e5fbb88d2b628de778243d52087225eec7b' })))));
+        return (index.h(index.Host, { key: '91f2e37b743cbd76bad5b23d6a7038377ed325c3', role: "listitem" }, index.h("button", Object.assign({ key: '8f9c85524aff451dfa316fe050295cd17a95d817', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), index.h("div", { key: '5f28d57cc6bc5508655297367ac09252f6df9452', class: "indicator" }, this.checked ? index.h("z-icon", { name: "checkmark" }) : this.index), index.h("span", { key: 'e24121243032ab104e2e19a373ec264db070525a' }, index.h("slot", { key: '06e7d27fa7a997c7fff44a539d065af3f7814880' })))));
     }
 };
 ZStepperItem.style = ZStepperItemStyle0;

package/dist/cjs/z-stepper.cjs.entry.js

@@ -12,7 +12,7 @@ const ZStepper = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'aa8c3ef6cca54442496944c748d1c224814ecc1a', role: "navigation" }, index.h("slot", { key: '9065c4077e08c252406e618e548f13aac5ed40d9' })));
+        return (index.h(index.Host, { key: '9328d928ff48b951720a6f0ca95b1d051a687cf4', role: "navigation" }, index.h("slot", { key: 'bd77ebf98a3eda51bf3124edae6aa96d0ad6cc7a' })));
     }
 };
 ZStepper.style = ZStepperStyle0;

package/dist/cjs/z-toast-notification-list.cjs.entry.js

@@ -46,7 +46,7 @@ const ZToastNotificationList = class {
         }
     }
     render() {
-        return index.h("slot", { key: 'f7657893cc0491e9d29c5801bfbae9df4b22a33b', name: "toasts" });
+        return index.h("slot", { key: '188e85fc561b690f63f4f66edbbf63a0ed434cdf', name: "toasts" });
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/z-toast-notification.cjs.entry.js

@@ -4164,19 +4164,19 @@ const ZToastNotification = class {
         this.isdraggable && this.handleSlideOutDragAnimation();
     }
     render() {
-        return (index.h(index.Host, { key: '4dddb200f4671bbd69e8d1470d0d441678da3039', style: { "--percentuale": `${this.percentage}%` }, class: { [this.transition]: !!this.transition, [this.type]: !!this.type }, onAnimationEnd: (e) => {
+        return (index.h(index.Host, { key: 'a5863e7ce8d266fba25e2a0503b57413ea276420', style: { "--percentuale": `${this.percentage}%` }, class: { [this.transition]: !!this.transition, [this.type]: !!this.type }, onAnimationEnd: (e) => {
                 if (this.autoclose && e.animationName.includes("slidein")) {
                     this.startClosingTimeout(this.autoclose);
                 }
                 if (e.animationName.includes("slideout")) {
                     this.hostElement.parentNode.removeChild(this.hostElement);
                 }
-            } }, index.h("div", { key: '424761a172e8f139e35d9c1b2139a4093e5ac48d', class: "toast-notification-container" }, index.h("div", { key: 'f1f8f3b2cfb8dde84ba0e136ac94631b47993975', class: "toast-notification-content" }, index.h("div", { key: '75c17b6a15c05dea66744ddb08a9abfcda21be28', class: "toast-notification-text" }, this.heading && index.h("span", { key: '94eda50ee38a39cec7056ee113b9863b54ed1555', class: "title" }, this.heading), index.h("span", { key: 'def713dd54fac1d0332c82c12ec4878672dddf1f', class: "message" }, index.h("slot", { key: '30cd97c7a2381c5a25e1b184524cb2fce29a549c', name: "message" }, this.message && index.h("span", { key: 'fc4c5cf459f595cb3727d5328ecb12419d1ea405', innerHTML: DOMPurify.sanitize(this.message) })))), index.h("div", { key: '994505f881dbe43ab69eb42c449afb0dc4d46336', class: "button-container", hidden: !this.hasSlottedButton }, index.h("slot", { key: 'b4a78b86c8d3b98750bcafee88d43bb47712558c', name: "button", onSlotchange: () => this.checkSlottedButton() }))), this.closebutton && (index.h("button", { key: '6658b9fe87e402ad434afe3bc50d4bf99f19b7a4', class: "close-button", "aria-label": "Chiudi notifica", onClick: () => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true), onKeyDown: (e) => {
+            } }, index.h("div", { key: '2ff98af17ebad39c00098acfc17b842784b268e0', class: "toast-notification-container" }, index.h("div", { key: '9e12233cc275ad5f4d00b72253005d1b6d45feab', class: "toast-notification-content" }, index.h("div", { key: 'a10e179aa0895c1ed51861e8818ae35eaeed195c', class: "toast-notification-text" }, this.heading && index.h("span", { key: '88d3e049e558a3f107e6a8fcab1f4c3835173def', class: "title" }, this.heading), index.h("span", { key: '73624c5b86d0d842477e9a5f0512d24359b6f939', class: "message" }, index.h("slot", { key: 'e7ad8066daef392d83fa77340a16d384204f59fc', name: "message" }, this.message && index.h("span", { key: '59582a721c306d09cd5c2ca12bfaac649b2e5a1f', innerHTML: DOMPurify.sanitize(this.message) })))), index.h("div", { key: '071e7a3a9a85f931bf8cc7d264c76f5109f69cc0', class: "button-container", hidden: !this.hasSlottedButton }, index.h("slot", { key: '3ff74ad6ce9cc2d4fca76032ff0aa68c7553f8de', name: "button", onSlotchange: () => this.checkSlottedButton() }))), this.closebutton && (index.h("button", { key: '26e256f736a3b04e5ccc7ed158305f69d806c42d', class: "close-button", "aria-label": "Chiudi notifica", onClick: () => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true), onKeyDown: (e) => {
                 if (e.code == index$1.KeyboardCode.SPACE || e.code == index$1.KeyboardCode.ENTER) {
                     e.preventDefault();
                     this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true);
                 }
-            } }, index.h("z-icon", { key: '2edf589b7755c20c21217a8161736eeee5859cc9', name: "multiply-circled" }))))));
+            } }, index.h("z-icon", { key: '25a4e24b16fb29ecd7148700367d319dbb9d9c6d', name: "multiply-circled" }))))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/z-toggle-button.cjs.entry.js

@@ -25,10 +25,10 @@ const ZToggleButton = class {
         this.toggleClick.emit(this.opened);
     }
     render() {
-        return (index.h("button", { key: '6df0aee8dfd4785cd9787b2940c12cc3d680ef0c', tabindex: this.avoidclick ? "-1" : "0", class: {
+        return (index.h("button", { key: '6e9fbd985e60b38770ced1d2b681c57952616cc3', tabindex: this.avoidclick ? "-1" : "0", class: {
                 "isopen": this.opened,
                 "avoid-clicks": this.avoidclick,
-            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, index.h("z-icon", { key: 'ab52cd6023b492b5bba8086fd189112e5329c3ad', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
+            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, index.h("z-icon", { key: '0a1cf5cd9da7ef67a5e62dcf77fe7af27d7328a6', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
     }
 };
 ZToggleButton.style = ZToggleButtonStyle0;

package/dist/cjs/z-toggle-switch.cjs.entry.js

@@ -33,14 +33,14 @@ const ZToggleSwitch = class {
         this.emitToggleClick();
     }
     render() {
-        return (index.h(index.Host, { key: 'b572a91e4ed2f91cbe0b7a393371425a5b9b896a' }, index.h("input", { key: 'acff3447044eba6dd7622feb954a03d5503111f1', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), index.h("label", { key: '58b70932d34e39bb1c078947eea614d6384b9660', htmlFor: this.htmlid, class: {
+        return (index.h(index.Host, { key: '8f4df999fbedf80bcc55745ccf2bc9e973b042b4' }, index.h("input", { key: '8b76f5a66b5d9d331338f50622c61021bb5a28f7', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), index.h("label", { key: '64a7c132da51820ebcd9b078cfc4981cf1981c30', htmlFor: this.htmlid, class: {
                 [this.labelPosition]: true,
                 disabled: this.disabled,
-            } }, index.h("span", { key: '824e029aeb434813b35f72891d991f19a90daded' }, index.h("slot", { key: '37e8bad4378c65f4a3411fee47a960b9220af5d3' })), index.h("span", { key: '55eaf2b824ce8e91b77b5f8f2677724b2834fad6', class: {
+            } }, index.h("span", { key: 'ea293ee5515a6c901c571d21f11689b442add25d' }, index.h("slot", { key: 'a20e7ec3dae106f9d5e0df3b0a8766092cc7b42a' })), index.h("span", { key: 'cb49f19d1cdc68d6cb2330a035e7a7720b21e863', class: {
                 container: true,
                 disabled: this.disabled,
                 checked: this.checked,
-            } }, index.h("span", { key: '41b7660f89b5ba9829782d3e6b041323357fdefa', class: "circle" }, this.checked && (index.h("z-icon", { key: 'ae68c35e2765c6eece7dcee8f7ad570a6fc0aa34', width: 12, height: 12, name: "checkmark" })))))));
+            } }, index.h("span", { key: 'b6fb8026f43c0bd12a65f1cee9bb90c476e4cf3c', class: "circle" }, this.checked && (index.h("z-icon", { key: 'a4e6313096647089e7fccdcb3fb40b42bf7ad2f3', width: 12, height: 12, name: "checkmark" })))))));
     }
 };
 ZToggleSwitch.style = ZToggleSwitchStyle0;

package/dist/cjs/z-tool.cjs.entry.js

@@ -192,10 +192,10 @@ const ZTool = class {
         (_a = this.mql) === null || _a === void 0 ? void 0 : _a.removeEventListener("change", this.onMobileViewChange);
     }
     render() {
-        return (index.h(index.Host, { key: '206a8594f395b3be01956358cb59968c69cc1317', class: { "z-tool-tooltip-open": this.tooltipOpen } }, index.h("button", { key: '0ad3f51d384386005f5cd4ca2bdf9e9c9b49c7d2', class: "z-tool", type: "button", ref: (el) => (this.buttonRef = el), "aria-pressed": this.hasSlottedContent ? undefined : this.active ? "true" : "false", "aria-expanded": this.hasSlottedContent ? (this.open ? "true" : "false") : undefined, "aria-haspopup": this.hasSlottedContent ? "true" : undefined, "aria-label": this.htmlAriaLabel || this.tooltip || undefined, disabled: this.disabled, onClick: this.handleClick, onMouseEnter: this.handleTooltipOpen, onMouseLeave: this.handleTooltipClose, onFocus: this.handleTooltipOpen, onBlur: this.handleTooltipClose }, index.h("z-icon", { key: '67a9360a49a09d6cb715314a610af87aec542608', ref: (el) => (this.iconRef = el), name: this.icon, indicatorColor: this.indicatorColor })), this.tooltip && (index.h("z-tooltip", { key: '7c66f173dc55e4757302c659d56f8d0acf310b76', class: "z-tool-tooltip", ref: (el) => (this.tooltipRef = el), bindTo: this.iconRef, open: this.tooltipOpen && !this.open, position: this.isNested ? index$1.PopoverPosition.BOTTOM : this.tooltipPosition, dark: true, onMouseLeave: this.handleTooltipClose, onBlur: this.handleTooltipClose, onOpenChange: this.onTooltipOpenChange }, index.h("span", { key: '7ceeeb537eb0292e629952da4aa932644a7468cf', class: "body-4" }, this.tooltip))), this.hasSlottedContent && (index.h("z-popover", { key: '27fde7bbc6dddb8f081bd47491dc91a70538271a', class: "z-tool-submenu", open: this.open, bindTo: this.isMobile && this.mainToolbar ? this.mainToolbar : this.hostElement, center: true,
+        return (index.h(index.Host, { key: 'e193d45ced8a7d4aa880d3a506d43614a76ffa71', class: { "z-tool-tooltip-open": this.tooltipOpen } }, index.h("button", { key: '6549559a4a5125d3db07d12d8b2ac4c68e8eee6a', class: "z-tool", type: "button", ref: (el) => (this.buttonRef = el), "aria-pressed": this.hasSlottedContent ? undefined : this.active ? "true" : "false", "aria-expanded": this.hasSlottedContent ? (this.open ? "true" : "false") : undefined, "aria-haspopup": this.hasSlottedContent ? "true" : undefined, "aria-label": this.htmlAriaLabel || this.tooltip || undefined, disabled: this.disabled, onClick: this.handleClick, onMouseEnter: this.handleTooltipOpen, onMouseLeave: this.handleTooltipClose, onFocus: this.handleTooltipOpen, onBlur: this.handleTooltipClose }, index.h("z-icon", { key: '0aac9cc6854a9d4a4ac83866eb34cc8d12140f69', ref: (el) => (this.iconRef = el), name: this.icon, indicatorColor: this.indicatorColor })), this.tooltip && (index.h("z-tooltip", { key: '2d403e91916f5d7909d0085f2f89db8514de32cc', class: "z-tool-tooltip", ref: (el) => (this.tooltipRef = el), bindTo: this.iconRef, open: this.tooltipOpen && !this.open, position: this.isNested ? index$1.PopoverPosition.BOTTOM : this.tooltipPosition, dark: true, onMouseLeave: this.handleTooltipClose, onBlur: this.handleTooltipClose, onOpenChange: this.onTooltipOpenChange }, index.h("span", { key: 'a94e6a413686d9668399137f331e499ceb9d6516', class: "body-4" }, this.tooltip))), this.hasSlottedContent && (index.h("z-popover", { key: '2d103f6d9b8643cc1dd30bc6bd238be593971586', class: "z-tool-submenu", open: this.open, bindTo: this.isMobile && this.mainToolbar ? this.mainToolbar : this.hostElement, center: true,
             /* disable auto-close to prevent unwanted close behaviors on mobile,
             when the bound element is the main toolbar */
-            closable: false, position: this.isMobile ? index$1.PopoverPosition.TOP : index$1.PopoverPosition.BOTTOM }, index.h("slot", { key: 'e31fd30c100e732f4aca6b038d277d99b6543589' })))));
+            closable: false, position: this.isMobile ? index$1.PopoverPosition.TOP : index$1.PopoverPosition.BOTTOM }, index.h("slot", { key: 'b8e79406df1de9fa4df0b8b4aa42b27477407a05' })))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/z-toolbar.cjs.entry.js

@@ -134,7 +134,7 @@ const ZToolbar = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'dc26c2f0e3a48566e671476dce7241e326cacac8', role: "toolbar", "aria-label": this.htmlAriaLabel }, index.h("slot", { key: 'ff7b8ae41331be87db8f71ff0cbaf4882a7d684d', onSlotchange: () => {
+        return (index.h(index.Host, { key: '5e00c2233560e5050ede29f987b8eb42e2af5935', role: "toolbar", "aria-label": this.htmlAriaLabel }, index.h("slot", { key: '9ea69fc40ffaa25d900ad80dc9ca42b8ddcb1140', onSlotchange: () => {
                 this.collectToolItems();
                 this.updateTabIndexes();
             } })));

package/dist/cjs/z-tooltip.cjs.entry.js

@@ -22,7 +22,7 @@ const ZTooltip = class {
         this.open = this.popoverEl.open;
     }
     render() {
-        return (index.h("z-popover", { key: '8290e0b20bc315ce438e6407ff40c51d227f719d', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true, onOpenChange: (event) => this.openChange.emit(event.detail) }, index.h("slot", { key: 'e4f62754fc30723f63f99b79d53d72310f2cae91' })));
+        return (index.h("z-popover", { key: 'cbfcd9d92fdb27c998b9293aea1520993bf6cc1a', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true, onOpenChange: (event) => this.openChange.emit(event.detail) }, index.h("slot", { key: '9638b5e67aba8472eea8894b1b39bf1aa5f2986e' })));
     }
 };
 ZTooltip.style = ZTooltipStyle0;

package/dist/collection/components/z-input/styles.css

@@ -7,14 +7,16 @@
   box-sizing: border-box;
 }
 
+/* GENERAL */
 input::-ms-clear,
 input::-ms-reveal {
   display: none;
 }
 
-/* GENERAL */
-:host input::-ms-clear,
-:host input::-ms-reveal {
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
   display: none;
 }
 

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

@@ -3,6 +3,7 @@ import { Host, h } from "@stencil/core";
  * Notification bar component.
  * @slot - The text of the notification.
  * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.
+ * @cssprop --z-notification--content-max-width - The max width of the notification content.
  */
 export class ZNotification {
     handleActionButtonClick(e) {
@@ -20,12 +21,13 @@ export class ZNotification {
         this.showclose = false;
         this.showshadow = false;
         this.sticky = false;
+        this.borderposition = "bottom";
         this.handleActionButtonClick = this.handleActionButtonClick.bind(this);
         this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);
     }
     render() {
         var _a;
-        return (h(Host, { key: 'aac3e6385d2f77e80c9933e666770e3da17c21a5' }, this.contenticonname && (h("z-icon", { key: '1ba77acd6db4e01ac47ae605c4ab05a345999462', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '9df24bcba7a1f49c803f339a0ac5ddafc08c03c9', class: "content-container" }, h("div", { key: 'bd1a76905a9c14fa77a1704a127a65a8ba9adab8', class: "content-text" }, h("slot", { key: 'b126d399950149b0d4cd94d3c2480678d7f91a97' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '63f56578ed42e720c20b57424c1d824729279e36', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '81ccf6858d6b559a23b1c9266d8af55e7bd3a2f2', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '96c95d07ef561d4b900acefaef90e00d85dc3904', name: "multiply-circle", width: 16, height: 16 })))));
+        return (h(Host, { key: '7a717d8687d3e8e6de06c25192f9e2f14b6563c1' }, h("div", { key: 'eee4aa9a69678e7f353ead6ef4e805544e55426e', class: "main-container" }, this.contenticonname && (h("z-icon", { key: '8d582f822e1e4ad440c65002d9a4abb5e0294040', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '2779b5f3d772ee729c67b1616523ccac1b4646f0', class: "content-container" }, h("div", { key: '1e622f63cc7d8523ab52561360a9de5e8829e976', class: "content-text" }, h("slot", { key: 'f0c65317530288e6ddeb9b604d21243858f25220' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '2cefcdb30e39df9dd2e80f4ddd41f9c887d3594e', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '1a4d7a77ae2b9d6f86cfab0c7b72c77daff9d3da', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '33377e8438a076a2c3eee32ab9f513885e15fbcf', name: "multiply-circle", width: 16, height: 16 }))))));
     }
     static get is() { return "z-notification"; }
     static get encapsulation() { return "shadow"; }
@@ -154,6 +156,24 @@ export class ZNotification {
                 "attribute": "sticky",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "borderposition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"top\" | \"bottom\"",
+                    "resolved": "\"bottom\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Border position"
+                },
+                "attribute": "borderposition",
+                "reflect": true,
+                "defaultValue": "\"bottom\""
             }
         };
     }

package/dist/collection/components/z-notification/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-notification/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC5E,OAAO,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAE7C;;;;GAIG;AAMH,MAAM,OAAO,aAAa;IAgChB,uBAAuB,CAAC,CAAa;QAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;IACjC,CAAC;IAMO,sBAAsB,CAAC,CAAa;QAC1C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;IAChC,CAAC;IAED;;;;yBA/BsB,KAAK;0BAOJ,KAAK;sBAIT,KAAK;QAqBtB,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACtE;IAED,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,eAAe,IAAI,CACvB,+DACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAE,IAAI,CAAC,eAAe,EAC1B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACH;YACD,4DAAK,KAAK,EAAC,mBAAmB;gBAC5B,4DAAK,KAAK,EAAC,cAAc;oBACvB,8DAAa,CACT;gBACL,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI,EAAE,CAAA,IAAI,CAC5B,+DACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,uBAAuB,IAEpC,IAAI,CAAC,UAAU,CACT,CACV,CACG;YACL,IAAI,CAAC,SAAS,IAAI,CACjB,+DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,sBAAsB;gBAEpC,+DACE,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {NotificationType} from \"../../beans\";\n\n/**\n * Notification bar component.\n * @slot - The text of the notification.\n * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.\n */\n@Component({\n  tag: \"z-notification\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZNotification {\n  /** Name of the icon on the left of the content */\n  @Prop()\n  contenticonname?: string;\n\n  /** Action button text */\n  @Prop()\n  actiontext?: string;\n\n  /** Alert variant type */\n  @Prop({reflect: true})\n  type: NotificationType;\n\n  /** Enable close icon */\n  @Prop()\n  showclose?: boolean = false;\n\n  /**\n   * Enable shadow.\n   * @deprecated shadow is available only for the `sticky` version of the notification.\n   */\n  @Prop({reflect: true})\n  showshadow?: boolean = false;\n\n  /** Enable sticky notification bar. */\n  @Prop({reflect: true})\n  sticky?: boolean = false;\n\n  /** Call to action clicked */\n  @Event()\n  notificationAction: EventEmitter;\n\n  private handleActionButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationAction.emit();\n  }\n\n  /** Close button clicked */\n  @Event()\n  notificationClose: EventEmitter;\n\n  private handleCloseButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationClose.emit();\n  }\n\n  constructor() {\n    this.handleActionButtonClick = this.handleActionButtonClick.bind(this);\n    this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);\n  }\n\n  render(): HTMLZNotificationElement {\n    return (\n      <Host>\n        {this.contenticonname && (\n          <z-icon\n            class=\"status-icon\"\n            name={this.contenticonname}\n            width={16}\n            height={16}\n          />\n        )}\n        <div class=\"content-container\">\n          <div class=\"content-text\">\n            <slot></slot>\n          </div>\n          {!!this.actiontext?.trim() && (\n            <button\n              class=\"action-button\"\n              type=\"button\"\n              onClick={this.handleActionButtonClick}\n            >\n              {this.actiontext}\n            </button>\n          )}\n        </div>\n        {this.showclose && (\n          <button\n            class=\"close-button\"\n            type=\"button\"\n            onClick={this.handleCloseButtonClick}\n          >\n            <z-icon\n              name=\"multiply-circle\"\n              width={16}\n              height={16}\n            />\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-notification/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC5E,OAAO,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAE7C;;;;;GAKG;AAMH,MAAM,OAAO,aAAa;IAoChB,uBAAuB,CAAC,CAAa;QAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;IACjC,CAAC;IAMO,sBAAsB,CAAC,CAAa;QAC1C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;IAChC,CAAC;IAED;;;;yBAnCsB,KAAK;0BAOJ,KAAK;sBAIT,KAAK;8BAIY,QAAQ;QAqB1C,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACtE;IAED,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,gBAAgB;gBACxB,IAAI,CAAC,eAAe,IAAI,CACvB,+DACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAE,IAAI,CAAC,eAAe,EAC1B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACH;gBACD,4DAAK,KAAK,EAAC,mBAAmB;oBAC5B,4DAAK,KAAK,EAAC,cAAc;wBACvB,8DAAa,CACT;oBACL,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI,EAAE,CAAA,IAAI,CAC5B,+DACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,uBAAuB,IAEpC,IAAI,CAAC,UAAU,CACT,CACV,CACG;gBACL,IAAI,CAAC,SAAS,IAAI,CACjB,+DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,sBAAsB;oBAEpC,+DACE,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {NotificationType} from \"../../beans\";\n\n/**\n * Notification bar component.\n * @slot - The text of the notification.\n * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.\n * @cssprop --z-notification--content-max-width - The max width of the notification content.\n */\n@Component({\n  tag: \"z-notification\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZNotification {\n  /** Name of the icon on the left of the content */\n  @Prop()\n  contenticonname?: string;\n\n  /** Action button text */\n  @Prop()\n  actiontext?: string;\n\n  /** Alert variant type */\n  @Prop({reflect: true})\n  type: NotificationType;\n\n  /** Enable close icon */\n  @Prop()\n  showclose?: boolean = false;\n\n  /**\n   * Enable shadow.\n   * @deprecated shadow is available only for the `sticky` version of the notification.\n   */\n  @Prop({reflect: true})\n  showshadow?: boolean = false;\n\n  /** Enable sticky notification bar. */\n  @Prop({reflect: true})\n  sticky?: boolean = false;\n\n  /** Border position */\n  @Prop({reflect: true})\n  borderposition?: \"top\" | \"bottom\" = \"bottom\";\n\n  /** Call to action clicked */\n  @Event()\n  notificationAction: EventEmitter;\n\n  private handleActionButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationAction.emit();\n  }\n\n  /** Close button clicked */\n  @Event()\n  notificationClose: EventEmitter;\n\n  private handleCloseButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationClose.emit();\n  }\n\n  constructor() {\n    this.handleActionButtonClick = this.handleActionButtonClick.bind(this);\n    this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);\n  }\n\n  render(): HTMLZNotificationElement {\n    return (\n      <Host>\n        <div class=\"main-container\">\n          {this.contenticonname && (\n            <z-icon\n              class=\"status-icon\"\n              name={this.contenticonname}\n              width={16}\n              height={16}\n            />\n          )}\n          <div class=\"content-container\">\n            <div class=\"content-text\">\n              <slot></slot>\n            </div>\n            {!!this.actiontext?.trim() && (\n              <button\n                class=\"action-button\"\n                type=\"button\"\n                onClick={this.handleActionButtonClick}\n              >\n                {this.actiontext}\n              </button>\n            )}\n          </div>\n          {this.showclose && (\n            <button\n              class=\"close-button\"\n              type=\"button\"\n              onClick={this.handleCloseButtonClick}\n            >\n              <z-icon\n                name=\"multiply-circle\"\n                width={16}\n                height={16}\n              />\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}