npm - @zanichelli/albe-web-components - Versions diffs - 19.0.2-rc → 19.1.1 - Mend

@zanichelli/albe-web-components 19.0.2-rc → 19.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/dist/collection/components/z-tag/index.js CHANGED Viewed

@@ -11,9 +11,12 @@ export class ZTag {
         this.expandable = undefined;
     }
     render() {
-        return (h(Host, { key: 'b1b99d8aa0ded75daaed090aa8fa490899e3b04e', class: {
-                expandable: this.expandable && !!this.icon,
-            } }, this.icon && h("z-icon", { key: 'b3f8b50efc5f7132515416a428ab3d10cf1329b9', name: this.icon }), h("div", { key: 'edf761fbadd249b2d50ad420a60bdec3ab296840' }, h("slot", { key: '932dd3ed45783430641d41f319482f27b9db2907' }))));
+        var _a;
+        const hasText = ((_a = this.host.textContent) === null || _a === void 0 ? void 0 : _a.trim().length) > 0;
+        return (h(Host, { key: '639a80328cf620c692ea9cda77ba077c45aeb2cc', class: {
+                "expandable": this.expandable && !!this.icon,
+                "has-text": hasText,
+            } }, this.icon && h("z-icon", { key: '46b90e5166a9794407ec7d59f6fffcaf5452829d', name: this.icon }), h("div", { key: '0ba235cee8da5c3fcc5229fbb3cb6abcd0b63db0' }, h("slot", { key: '647a88e3f9b0149e9091e3e84616b53bf78e38a7' }))));
     }
     static get is() { return "z-tag"; }
     static get encapsulation() { return "scoped"; }
@@ -65,5 +68,6 @@ export class ZTag {
             }
         };
     }
+    static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=index.js.map

package/dist/collection/components/z-tag/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-tag/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;~~AAEvD~~;;;;;GAKG;AAOH,MAAM,OAAO,IAAI;;;;;~~IASf~~,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,~~UAAU~~,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI;~~aAC3C~~;YAEA,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;YACzC;gBACE,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/*\n Ztag component.\n * @slot - The text of the z-tag.\n * @cssprop --z-tag-text-color - text and icon color using tokens.\n * @cssprop --z-tag-bg - background color of the z-tag.\n /\n@Component({\n tag: \"z-tag\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZTag {\n /* [optional] Tag icon /\n @Prop()\n icon?: string;\n\n /* [optional] Hide the text and show it on hover*/\n @Prop()\n expandable?: boolean;\n\n render(): HTMLZTagElement {\n return (\n <Host\n class={{\n expandable: this.expandable && !!this.icon,\n }}\n >\n {this.icon && <z-icon name={this.icon} />}\n <div>\n <slot />\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-tag/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEhE;;;;;GAKG;AAOH,MAAM,OAAO,IAAI;;;;;IAWf,MAAM;;QACJ,MAAM,OAAO,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,WAAW,0CAAE,IAAI,GAAG,MAAM,IAAG,CAAC,CAAC;QAEzD,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC5C,UAAU,EAAE,OAAO;aACpB;YAEA,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;YACzC;gBACE,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Host, Prop, h} from \"@stencil/core\";\n\n/*\n Ztag component.\n * @slot - The text of the z-tag.\n * @cssprop --z-tag-text-color - text and icon color using tokens.\n * @cssprop --z-tag-bg - background color of the z-tag.\n /\n@Component({\n tag: \"z-tag\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZTag {\n @Element() host: HTMLZTagElement;\n\n /* [optional] Tag icon /\n @Prop()\n icon?: string;\n\n /* [optional] Hide the text and show it on hover*/\n @Prop()\n expandable?: boolean;\n\n render(): HTMLZTagElement {\n const hasText = this.host.textContent?.trim().length > 0;\n\n return (\n <Host\n class={{\n \"expandable\": this.expandable && !!this.icon,\n \"has-text\": hasText,\n }}\n >\n {this.icon && <z-icon name={this.icon} />}\n <div>\n <slot />\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/z-tag/styles.css CHANGED Viewed

@@ -21,18 +21,17 @@
   text-transform: uppercase;
 }
-:host(.expandable) > z-icon {
+:host > z-icon {
+  margin-right: 0;
   transition: margin-right 0.3s ease-out;
 }
-:host(:not(.expandable)) > z-icon,
-:host(.expandable:hover) > z-icon {
+:host(.has-text):not(.expandable) > z-icon {
   margin-right: var(--space-unit);
-  transition: margin-right 0.3s ease-out 0s;
 }
-:host > z-icon:has(+ div:empty) {
-  margin-right: 0;
+:host(.has-text).expandable:hover > z-icon {
+  margin-right: var(--space-unit);
 }
 :host(.expandable) > div {

package/dist/collection/components/z-toast-notification/index.js CHANGED Viewed

@@ -2,6 +2,11 @@ import { Host, h } from "@stencil/core";
 import { KeyboardCode, ToastNotificationTransition } from "../../beans";
 import DOMPurify from "dompurify";
 import Hammer from "hammerjs";
+/**
+ * ZToastNotification component.
+ * @slot message - Custom HTML message
+ * @slot button - Custom button
+ */
 export class ZToastNotification {
     constructor() {
         this.isCloseEventCalled = false;
@@ -155,7 +160,7 @@ export class ZToastNotification {
             } })))));
     }
     render() {
-        return (h(Host, { key: '13bbdd7da7e5c74fb9881518dfa1a2b9d92eedf2', style: { "--percentuale": `${this.percentage}%` }, class: this.transition ? this.transition : "", onAnimationEnd: (e) => {
+        return (h(Host, { key: '63f39d1520294c046f4cf4f27387dae49254d306', style: { "--percentuale": `${this.percentage}%` }, class: this.transition ? this.transition : "", onAnimationEnd: (e) => {
                 if (this.autoclose && e.animationName.includes("slidein")) {
                     this.startClosingTimeout(this.autoclose);
                 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-toast-notification/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode, ToastNotification, ToastNotificationTransition} from \"../../beans\";\n\nimport DOMPurify from \"dompurify\";\nimport Hammer from \"hammerjs\";\n\n@Component({\n tag: \"z-toast-notification\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZToastNotification {\n @Element() hostElement: HTMLZToastNotificationElement;\n\n /** toast notification's title /\n @Prop()\n heading?: string;\n\n /* toast notification's message /\n @Prop()\n message: string;\n\n /* toggles closing button rendering /\n @Prop()\n closebutton: boolean;\n\n /* toast notification closing timeout (ms) /\n @Prop()\n autoclose?: number;\n\n /* toast notification autoclose can be paused /\n @Prop()\n pauseonfocusloss?: boolean = true;\n\n /* toast notification type: dark, light, accent, error, success, warning /\n @Prop()\n type?: ToastNotification;\n\n /* toast notification can be draggable/\n @Prop()\n isdraggable?: boolean = true;\n\n /* toast notification draggable percentage/\n @Prop()\n draggablepercentage?: number = 80;\n\n /* toast notification animation type: slide-in-left, slide-in-right, slide-in-down, slide-in-up/\n @Prop()\n transition?: ToastNotificationTransition;\n\n @State()\n percentage: number;\n\n private sliderManager: HammerManager;\n\n private elapsedTime: number;\n\n private timeoutHandle: number;\n\n private startTime: number;\n\n private isCloseEventCalled = false;\n\n @Watch(\"isdraggable\")\n watchPropIsdraggable(newValue: boolean): void {\n if (newValue) {\n this.sliderManager.get(\"pan\").set({enable: true});\n } else {\n this.sliderManager.get(\"pan\").set({enable: false});\n }\n }\n\n @Watch(\"autoclose\")\n watchPropAutoclose(newValue: number): void {\n clearTimeout(this.timeoutHandle);\n this.startClosingTimeout(newValue);\n }\n\n @Watch(\"pauseonfocusloss\")\n watchPropPauseonfocusloss(newValue: boolean): void {\n if (this.autoclose) {\n if (newValue) {\n document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n } else {\n document.removeEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n }\n }\n }\n\n /* notification close event /\n @Event()\n toastClose: EventEmitter;\n\n private emitToastClose(cssClass: string, stopTimer: boolean): void {\n if (stopTimer && this.timeoutHandle) {\n clearTimeout(this.timeoutHandle);\n }\n this.timeoutHandle = null;\n this.elapsedTime = null;\n this.toastClose.emit();\n if (cssClass) {\n this.hostElement.classList.add(cssClass);\n } else {\n this.hostElement.parentNode.removeChild(this.hostElement);\n }\n }\n\n componentWillLoad(): void {\n this.validateAutoclose();\n this.percentage = 0;\n }\n\n componentDidLoad(): void {\n this.startTime = Date.now();\n if (this.autoclose) {\n if (this.pauseonfocusloss) {\n document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n }\n if (!this.transition) {\n this.startClosingTimeout(this.autoclose);\n }\n }\n\n this.isdraggable && this.handleSlideOutDragAnimation();\n }\n\n private visibilityChangeEventHandler(): void {\n if (document.visibilityState === \"hidden\") {\n this.timeoutHandle && this.onBlur();\n } else {\n this.elapsedTime && this.onFocus();\n }\n }\n\n private validateAutoclose(): void {\n if (!this.autoclose && !this.closebutton) {\n console.error(\"At least one between autoclose and closebutton must be present\");\n }\n }\n\n private mapSlideOutClass(): ToastNotificationTransition {\n switch (this.transition) {\n case ToastNotificationTransition.SLIDE_IN_DOWN:\n return ToastNotificationTransition.SLIDE_OUT_UP;\n case ToastNotificationTransition.SLIDE_IN_UP:\n return ToastNotificationTransition.SLIDE_OUT_DOWN;\n case ToastNotificationTransition.SLIDE_IN_LEFT:\n return ToastNotificationTransition.SLIDE_OUT_RIGHT;\n case ToastNotificationTransition.SLIDE_IN_RIGHT:\n return ToastNotificationTransition.SLIDE_OUT_LEFT;\n default:\n return null;\n }\n }\n\n private calculateDraggedPercentage(e): number {\n const bounding = this.hostElement.getBoundingClientRect();\n\n return Math.round((100 e.deltaX) / bounding.width);\n }\n\n private handleSlideOutDragAnimation(): void {\n this.sliderManager = new Hammer(this.hostElement);\n this.sliderManager.get(\"pan\").set({\n direction: Hammer.DIRECTION_HORIZONTAL,\n });\n\n this.sliderManager.on(\"pan\", (e) => {\n this.percentage = this.calculateDraggedPercentage(e);\n this.hostElement.style.transition = \"none\";\n if (this.transition) {\n this.hostElement.classList.remove(this.transition);\n }\n const translateObj = {\n translate: `translateX(${this.percentage}%)`,\n translateBack: \"translateX(0)\",\n };\n\n this.hostElement.style.opacity = `${100 - Math.abs(this.percentage)}%`;\n if (e.eventType === Hammer.DIRECTION_LEFT \|\| e.eventType === Hammer.DIRECTION_RIGHT) {\n this.hostElement.style.transform = translateObj.translate;\n if (Math.abs(this.percentage) > this.draggablepercentage && !this.isCloseEventCalled) {\n this.isCloseEventCalled = true;\n this.emitToastClose(e.direction === Hammer.DIRECTION_LEFT ? \"slide-out-left\" : \"slide-out-right\", true);\n }\n }\n\n if (e.isFinal && Math.abs(this.percentage) < this.draggablepercentage) {\n this.hostElement.style.transform = translateObj.translateBack;\n this.hostElement.style.transition = \"all 1s\";\n this.hostElement.style.opacity = \"100%\";\n this.percentage = 0;\n }\n });\n }\n\n private onFocus(): void {\n let time = this.autoclose;\n if (this.elapsedTime) {\n time = this.autoclose - this.elapsedTime;\n }\n if (time > 0) {\n this.startClosingTimeout(time);\n }\n }\n\n private onBlur(): void {\n this.elapsedTime = Date.now() - this.startTime;\n clearTimeout(this.timeoutHandle);\n }\n\n private startClosingTimeout(time: number): void {\n this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass(), false), time);\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div\n id=\"external-container\"\n tabIndex={0}\n class={{[this.type]: !!this.type}}\n >\n <div id=\"inner-container\">\n <div id=\"text\">\n {this.heading && <span class=\"title\">{this.heading}</span>}\n <span class=\"message\">\n <slot name=\"message\">\n <span innerHTML={DOMPurify.sanitize(this.message \|\| \" \")} />\n </slot>\n </span>\n </div>\n <div id=\"button\">\n <slot name=\"button\" />\n </div>\n </div>\n <div id=\"icon\">\n {this.closebutton && (\n <z-icon\n tabIndex={0}\n name=\"multiply-circled\"\n width={15}\n height={15}\n onClick={() => this.emitToastClose(this.mapSlideOutClass(), true)}\n onKeyPress={(e) => {\n if (e.code == KeyboardCode.SPACE \|\| e.code == KeyboardCode.ENTER) {\n e.preventDefault();\n this.emitToastClose(this.mapSlideOutClass(), true);\n }\n }}\n />\n )}\n </div>\n </div>\n );\n }\n\n render(): HTMLZToastNotificationElement {\n return (\n <Host\n style={{\"--percentuale\": `${this.percentage}%`}}\n class={this.transition ? this.transition : \"\"}\n onAnimationEnd={(e: AnimationEvent) => {\n if (this.autoclose && e.animationName.includes(\"slidein\")) {\n this.startClosingTimeout(this.autoclose);\n }\n if (e.animationName.includes(\"slideout\")) {\n this.hostElement.parentNode.removeChild(this.hostElement);\n }\n }}\n >\n {this.renderContent()}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-toast-notification/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode, ToastNotification, ToastNotificationTransition} from \"../../beans\";\n\nimport DOMPurify from \"dompurify\";\nimport Hammer from \"hammerjs\";\n\n/*\n ZToastNotification component.\n * @slot message - Custom HTML message\n * @slot button - Custom button\n /\n@Component({\n tag: \"z-toast-notification\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZToastNotification {\n @Element() hostElement: HTMLZToastNotificationElement;\n\n /* toast notification's title /\n @Prop()\n heading?: string;\n\n /* toast notification's message /\n @Prop()\n message: string;\n\n /* toggles closing button rendering /\n @Prop()\n closebutton: boolean;\n\n /* toast notification closing timeout (ms) /\n @Prop()\n autoclose?: number;\n\n /* toast notification autoclose can be paused /\n @Prop()\n pauseonfocusloss?: boolean = true;\n\n /* toast notification type: dark, light, accent, error, success, warning /\n @Prop()\n type?: ToastNotification;\n\n /* toast notification can be draggable/\n @Prop()\n isdraggable?: boolean = true;\n\n /* toast notification draggable percentage/\n @Prop()\n draggablepercentage?: number = 80;\n\n /* toast notification animation type: slide-in-left, slide-in-right, slide-in-down, slide-in-up/\n @Prop()\n transition?: ToastNotificationTransition;\n\n @State()\n percentage: number;\n\n private sliderManager: HammerManager;\n\n private elapsedTime: number;\n\n private timeoutHandle: number;\n\n private startTime: number;\n\n private isCloseEventCalled = false;\n\n @Watch(\"isdraggable\")\n watchPropIsdraggable(newValue: boolean): void {\n if (newValue) {\n this.sliderManager.get(\"pan\").set({enable: true});\n } else {\n this.sliderManager.get(\"pan\").set({enable: false});\n }\n }\n\n @Watch(\"autoclose\")\n watchPropAutoclose(newValue: number): void {\n clearTimeout(this.timeoutHandle);\n this.startClosingTimeout(newValue);\n }\n\n @Watch(\"pauseonfocusloss\")\n watchPropPauseonfocusloss(newValue: boolean): void {\n if (this.autoclose) {\n if (newValue) {\n document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n } else {\n document.removeEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n }\n }\n }\n\n /* notification close event /\n @Event()\n toastClose: EventEmitter;\n\n private emitToastClose(cssClass: string, stopTimer: boolean): void {\n if (stopTimer && this.timeoutHandle) {\n clearTimeout(this.timeoutHandle);\n }\n this.timeoutHandle = null;\n this.elapsedTime = null;\n this.toastClose.emit();\n if (cssClass) {\n this.hostElement.classList.add(cssClass);\n } else {\n this.hostElement.parentNode.removeChild(this.hostElement);\n }\n }\n\n componentWillLoad(): void {\n this.validateAutoclose();\n this.percentage = 0;\n }\n\n componentDidLoad(): void {\n this.startTime = Date.now();\n if (this.autoclose) {\n if (this.pauseonfocusloss) {\n document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n }\n if (!this.transition) {\n this.startClosingTimeout(this.autoclose);\n }\n }\n\n this.isdraggable && this.handleSlideOutDragAnimation();\n }\n\n private visibilityChangeEventHandler(): void {\n if (document.visibilityState === \"hidden\") {\n this.timeoutHandle && this.onBlur();\n } else {\n this.elapsedTime && this.onFocus();\n }\n }\n\n private validateAutoclose(): void {\n if (!this.autoclose && !this.closebutton) {\n console.error(\"At least one between autoclose and closebutton must be present\");\n }\n }\n\n private mapSlideOutClass(): ToastNotificationTransition {\n switch (this.transition) {\n case ToastNotificationTransition.SLIDE_IN_DOWN:\n return ToastNotificationTransition.SLIDE_OUT_UP;\n case ToastNotificationTransition.SLIDE_IN_UP:\n return ToastNotificationTransition.SLIDE_OUT_DOWN;\n case ToastNotificationTransition.SLIDE_IN_LEFT:\n return ToastNotificationTransition.SLIDE_OUT_RIGHT;\n case ToastNotificationTransition.SLIDE_IN_RIGHT:\n return ToastNotificationTransition.SLIDE_OUT_LEFT;\n default:\n return null;\n }\n }\n\n private calculateDraggedPercentage(e): number {\n const bounding = this.hostElement.getBoundingClientRect();\n\n return Math.round((100 e.deltaX) / bounding.width);\n }\n\n private handleSlideOutDragAnimation(): void {\n this.sliderManager = new Hammer(this.hostElement);\n this.sliderManager.get(\"pan\").set({\n direction: Hammer.DIRECTION_HORIZONTAL,\n });\n\n this.sliderManager.on(\"pan\", (e) => {\n this.percentage = this.calculateDraggedPercentage(e);\n this.hostElement.style.transition = \"none\";\n if (this.transition) {\n this.hostElement.classList.remove(this.transition);\n }\n const translateObj = {\n translate: `translateX(${this.percentage}%)`,\n translateBack: \"translateX(0)\",\n };\n\n this.hostElement.style.opacity = `${100 - Math.abs(this.percentage)}%`;\n if (e.eventType === Hammer.DIRECTION_LEFT \|\| e.eventType === Hammer.DIRECTION_RIGHT) {\n this.hostElement.style.transform = translateObj.translate;\n if (Math.abs(this.percentage) > this.draggablepercentage && !this.isCloseEventCalled) {\n this.isCloseEventCalled = true;\n this.emitToastClose(e.direction === Hammer.DIRECTION_LEFT ? \"slide-out-left\" : \"slide-out-right\", true);\n }\n }\n\n if (e.isFinal && Math.abs(this.percentage) < this.draggablepercentage) {\n this.hostElement.style.transform = translateObj.translateBack;\n this.hostElement.style.transition = \"all 1s\";\n this.hostElement.style.opacity = \"100%\";\n this.percentage = 0;\n }\n });\n }\n\n private onFocus(): void {\n let time = this.autoclose;\n if (this.elapsedTime) {\n time = this.autoclose - this.elapsedTime;\n }\n if (time > 0) {\n this.startClosingTimeout(time);\n }\n }\n\n private onBlur(): void {\n this.elapsedTime = Date.now() - this.startTime;\n clearTimeout(this.timeoutHandle);\n }\n\n private startClosingTimeout(time: number): void {\n this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass(), false), time);\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div\n id=\"external-container\"\n tabIndex={0}\n class={{[this.type]: !!this.type}}\n >\n <div id=\"inner-container\">\n <div id=\"text\">\n {this.heading && <span class=\"title\">{this.heading}</span>}\n <span class=\"message\">\n <slot name=\"message\">\n <span innerHTML={DOMPurify.sanitize(this.message \|\| \" \")} />\n </slot>\n </span>\n </div>\n <div id=\"button\">\n <slot name=\"button\" />\n </div>\n </div>\n <div id=\"icon\">\n {this.closebutton && (\n <z-icon\n tabIndex={0}\n name=\"multiply-circled\"\n width={15}\n height={15}\n onClick={() => this.emitToastClose(this.mapSlideOutClass(), true)}\n onKeyPress={(e) => {\n if (e.code == KeyboardCode.SPACE \|\| e.code == KeyboardCode.ENTER) {\n e.preventDefault();\n this.emitToastClose(this.mapSlideOutClass(), true);\n }\n }}\n />\n )}\n </div>\n </div>\n );\n }\n\n render(): HTMLZToastNotificationElement {\n return (\n <Host\n style={{\"--percentuale\": `${this.percentage}%`}}\n class={this.transition ? this.transition : \"\"}\n onAnimationEnd={(e: AnimationEvent) => {\n if (this.autoclose && e.animationName.includes(\"slidein\")) {\n this.startClosingTimeout(this.autoclose);\n }\n if (e.animationName.includes(\"slideout\")) {\n this.hostElement.parentNode.removeChild(this.hostElement);\n }\n }}\n >\n {this.renderContent()}\n </Host>\n );\n }\n}\n"]}

package/dist/components/index26.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './index10.js';
-const stylesCss = ".sc-z-tag-h{--z-icon-width:14px;--z-icon-height:14px;display:flex;width:fit-content;max-width:inherit;height:fit-content;max-height:inherit;align-items:flex-start;padding:calc(var(--space-unit) / 2);background-color:var(--z-tag-bg, var(--color-hover-primary));border-radius:var(--border-radius);color:var(--z-tag-text-color, var(--color-text-inverse));fill:currentcolor;font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:14px;text-transform:uppercase}.expandable.sc-z-tag-h>z-icon.sc-z-tag{transition:margin-right 0.3s ease-out}.sc-z-tag-h:not(.expandable)>z-icon.sc-z-tag,.expandable.sc-z-tag-h:hover>z-icon.sc-z-tag{margin-right:var(--space-unit);transition:margin-right 0.3s ease-out 0s}.sc-z-tag-h>z-icon.sc-z-tag:has(+div.sc-z-tag:empty){margin-right:0}.expandable.sc-z-tag-h>div.sc-z-tag{overflow:hidden;max-width:0;max-height:0}.expandable.sc-z-tag-h:hover>div.sc-z-tag{max-width:100%;max-height:100%}";
+const stylesCss = ".sc-z-tag-h{--z-icon-width:14px;--z-icon-height:14px;display:flex;width:fit-content;max-width:inherit;height:fit-content;max-height:inherit;align-items:flex-start;padding:calc(var(--space-unit) / 2);background-color:var(--z-tag-bg, var(--color-hover-primary));border-radius:var(--border-radius);color:var(--z-tag-text-color, var(--color-text-inverse));fill:currentcolor;font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:14px;text-transform:uppercase}.sc-z-tag-h>z-icon.sc-z-tag{margin-right:0;transition:margin-right 0.3s ease-out}.has-text.sc-z-tag-h:not(.expandable)>z-icon.sc-z-tag{margin-right:var(--space-unit)}.has-text.expandable.sc-z-tag-h:hover>z-icon.sc-z-tag{margin-right:var(--space-unit)}.expandable.sc-z-tag-h>div.sc-z-tag{overflow:hidden;max-width:0;max-height:0}.expandable.sc-z-tag-h:hover>div.sc-z-tag{max-width:100%;max-height:100%}";
 const ZTagStyle0 = stylesCss;
 const ZTag = /*@__PURE__*/ proxyCustomElement(class ZTag extends HTMLElement {
@@ -12,10 +12,14 @@ const ZTag = /*@__PURE__*/ proxyCustomElement(class ZTag extends HTMLElement {
         this.expandable = undefined;
     }
     render() {
-        return (h(Host, { key: 'b1b99d8aa0ded75daaed090aa8fa490899e3b04e', class: {
-                expandable: this.expandable && !!this.icon,
-            } }, this.icon && h("z-icon", { key: 'b3f8b50efc5f7132515416a428ab3d10cf1329b9', name: this.icon }), h("div", { key: 'edf761fbadd249b2d50ad420a60bdec3ab296840' }, h("slot", { key: '932dd3ed45783430641d41f319482f27b9db2907' }))));
+        var _a;
+        const hasText = ((_a = this.host.textContent) === null || _a === void 0 ? void 0 : _a.trim().length) > 0;
+        return (h(Host, { key: '639a80328cf620c692ea9cda77ba077c45aeb2cc', class: {
+                "expandable": this.expandable && !!this.icon,
+                "has-text": hasText,
+            } }, this.icon && h("z-icon", { key: '46b90e5166a9794407ec7d59f6fffcaf5452829d', name: this.icon }), h("div", { key: '0ba235cee8da5c3fcc5229fbb3cb6abcd0b63db0' }, h("slot", { key: '647a88e3f9b0149e9091e3e84616b53bf78e38a7' }))));
     }
+    get host() { return this; }
     static get style() { return ZTagStyle0; }
 }, [6, "z-tag", {
         "icon": [1],

package/dist/components/index26.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"index26.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,~~y9BAAy9B~~,CAAC;~~AAC5+B~~,mBAAe,SAAS;;MCaX,IAAI;;;;;;;~~IASf~~,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,~~UAAU~~,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI;~~aAC3C~~,IAEA,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EACzC,8DACE,8DAAQ,CACJ,CACD,EACP;KACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["src/components/z-tag/styles.css?tag=z-tag&encapsulation=scoped","src/components/z-tag/index.tsx"],"sourcesContent":[":host {\n --z-icon-width: 14px;\n --z-icon-height: 14px;\n\n display: flex;\n width: fit-content;\n max-width: inherit;\n height: fit-content;\n max-height: inherit;\n align-items: flex-start;\n padding: calc(var(--space-unit) / 2);\n background-color: var(--z-tag-bg, var(--color-hover-primary));\n border-radius: var(--border-radius);\n color: var(--z-tag-text-color, var(--color-text-inverse));\n fill: currentcolor;\n font-family: var(--font-family-sans);\n font-size: var(--font-size-1);\n font-weight: var(--font-sb);\n letter-spacing: 0.32px;\n line-height: 14px;\n text-transform: uppercase;\n}\n\n:host~~(.expandable)~~ > z-icon {\n transition: margin-right 0.3s ease-out;\n}\n\n:host(~~:not(~~.~~expandable~~)~~) > z-icon,\n~~:~~host~~(.expandable~~:hover~~) > z-icon {\n margin-right: var(--space-unit);\n ~~transition: margin-right 0.3s ease-out 0s;\n~~}\n\n:host > z-icon~~:has(+~~ ~~div:empty)~~ {\n margin-right: 0;\n}\n\n:host(.expandable) > div {\n overflow: hidden;\n max-width: 0;\n max-height: 0;\n}\n\n:host(.expandable:hover) > div {\n max-width: 100%;\n max-height: 100%;\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/*\n Ztag component.\n * @slot - The text of the z-tag.\n * @cssprop --z-tag-text-color - text and icon color using tokens.\n * @cssprop --z-tag-bg - background color of the z-tag.\n /\n@Component({\n tag: \"z-tag\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZTag {\n /* [optional] Tag icon /\n @Prop()\n icon?: string;\n\n /* [optional] Hide the text and show it on hover*/\n @Prop()\n expandable?: boolean;\n\n render(): HTMLZTagElement {\n return (\n <Host\n class={{\n expandable: this.expandable && !!this.icon,\n }}\n >\n {this.icon && <z-icon name={this.icon} />}\n <div>\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"index26.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,i6BAAi6B,CAAC;AACp7B,mBAAe,SAAS;;MCaX,IAAI;;;;;;;IAWf,MAAM;;QACJ,MAAM,OAAO,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,WAAW,0CAAE,IAAI,GAAG,MAAM,IAAG,CAAC,CAAC;QAEzD,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC5C,UAAU,EAAE,OAAO;aACpB,IAEA,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EACzC,8DACE,8DAAQ,CACJ,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-tag/styles.css?tag=z-tag&encapsulation=scoped","src/components/z-tag/index.tsx"],"sourcesContent":[":host {\n --z-icon-width: 14px;\n --z-icon-height: 14px;\n\n display: flex;\n width: fit-content;\n max-width: inherit;\n height: fit-content;\n max-height: inherit;\n align-items: flex-start;\n padding: calc(var(--space-unit) / 2);\n background-color: var(--z-tag-bg, var(--color-hover-primary));\n border-radius: var(--border-radius);\n color: var(--z-tag-text-color, var(--color-text-inverse));\n fill: currentcolor;\n font-family: var(--font-family-sans);\n font-size: var(--font-size-1);\n font-weight: var(--font-sb);\n letter-spacing: 0.32px;\n line-height: 14px;\n text-transform: uppercase;\n}\n\n:host > z-icon {\n margin-right: 0;\n transition: margin-right 0.3s ease-out;\n}\n\n:host(.has-text):not(.expandable) > z-icon {\n margin-right: var(--space-unit);\n}\n\n:host(.has-text).expandable:hover > z-icon {\n margin-right: var(--space-unit);\n}\n\n:host(.expandable) > div {\n overflow: hidden;\n max-width: 0;\n max-height: 0;\n}\n\n:host(.expandable:hover) > div {\n max-width: 100%;\n max-height: 100%;\n}\n","import {Component, Element, Host, Prop, h} from \"@stencil/core\";\n\n/*\n Ztag component.\n * @slot - The text of the z-tag.\n * @cssprop --z-tag-text-color - text and icon color using tokens.\n * @cssprop --z-tag-bg - background color of the z-tag.\n /\n@Component({\n tag: \"z-tag\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZTag {\n @Element() host: HTMLZTagElement;\n\n /* [optional] Tag icon /\n @Prop()\n icon?: string;\n\n /* [optional] Hide the text and show it on hover*/\n @Prop()\n expandable?: boolean;\n\n render(): HTMLZTagElement {\n const hasText = this.host.textContent?.trim().length > 0;\n\n return (\n <Host\n class={{\n \"expandable\": this.expandable && !!this.icon,\n \"has-text\": hasText,\n }}\n >\n {this.icon && <z-icon name={this.icon} />}\n <div>\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/z-toast-notification.js CHANGED Viewed

@@ -4171,7 +4171,7 @@ const ZToastNotification$1 = /*@__PURE__*/ proxyCustomElement(class ZToastNotifi
             } })))));
     }
     render() {
-        return (h(Host, { key: '13bbdd7da7e5c74fb9881518dfa1a2b9d92eedf2', style: { "--percentuale": `${this.percentage}%` }, class: this.transition ? this.transition : "", onAnimationEnd: (e) => {
+        return (h(Host, { key: '63f39d1520294c046f4cf4f27387dae49254d306', style: { "--percentuale": `${this.percentage}%` }, class: this.transition ? this.transition : "", onAnimationEnd: (e) => {
                 if (this.autoclose && e.animationName.includes("slidein")) {
                     this.startClosingTimeout(this.autoclose);
                 }