@zanichelli/albe-web-components 19.0.1 → 19.1.0

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 (49) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/{index-de7a78d1.js → index-e84fb4e1.js} +2 -2
  3. package/dist/cjs/{index-de7a78d1.js.map → index-e84fb4e1.js.map} +1 -1
  4. package/dist/cjs/z-table.cjs.entry.js +1 -1
  5. package/dist/cjs/z-toast-notification.cjs.entry.js +2 -2
  6. package/dist/cjs/z-toast-notification.cjs.entry.js.map +1 -1
  7. package/dist/cjs/z-tr.cjs.entry.js +1 -1
  8. package/dist/collection/components/table/z-tr/styles.css +2 -2
  9. package/dist/collection/components/z-toast-notification/index.js +7 -2
  10. package/dist/collection/components/z-toast-notification/index.js.map +1 -1
  11. package/dist/collection/components/z-toast-notification/index.stories.js +49 -0
  12. package/dist/collection/components/z-toast-notification/index.stories.js.map +1 -1
  13. package/dist/collection/components/z-toast-notification-list/index.stories.js +36 -12
  14. package/dist/collection/components/z-toast-notification-list/index.stories.js.map +1 -1
  15. package/dist/components/z-toast-notification.js +2 -2
  16. package/dist/components/z-toast-notification.js.map +1 -1
  17. package/dist/components/z-tr.js +1 -1
  18. package/dist/components/z-tr.js.map +1 -1
  19. package/dist/esm/{index-bb674590.js → index-92064825.js} +2 -2
  20. package/dist/esm/{index-bb674590.js.map → index-92064825.js.map} +1 -1
  21. package/dist/esm/z-table.entry.js +1 -1
  22. package/dist/esm/z-toast-notification.entry.js +2 -2
  23. package/dist/esm/z-toast-notification.entry.js.map +1 -1
  24. package/dist/esm/z-tr.entry.js +1 -1
  25. package/dist/types/components/z-toast-notification/index.d.ts +5 -0
  26. package/dist/types/components/z-toast-notification/index.stories.d.ts +12 -0
  27. package/dist/types/components/z-toast-notification-list/index.stories.d.ts +6 -0
  28. package/dist/types/components.d.ts +12 -0
  29. package/dist/web-components-library/{p-b425f1c5.js → p-2bf54364.js} +2 -2
  30. package/dist/web-components-library/{p-b425f1c5.js.map → p-2bf54364.js.map} +1 -1
  31. package/dist/web-components-library/{p-46ea0b2e.entry.js → p-c778bf87.entry.js} +2 -2
  32. package/dist/web-components-library/{p-46ea0b2e.entry.js.map → p-c778bf87.entry.js.map} +1 -1
  33. package/dist/web-components-library/{p-e1d80057.entry.js → p-ce6e18f9.entry.js} +2 -2
  34. package/dist/web-components-library/{p-6c533bc0.entry.js → p-dc156429.entry.js} +2 -2
  35. package/dist/web-components-library/web-components-library.esm.js +1 -1
  36. package/package.json +1 -1
  37. package/www/build/{p-b425f1c5.js → p-2bf54364.js} +2 -2
  38. package/www/build/{p-b425f1c5.js.map → p-2bf54364.js.map} +1 -1
  39. package/www/build/{p-571c7d6a.js → p-c42295e7.js} +1 -1
  40. package/www/build/{p-46ea0b2e.entry.js → p-c778bf87.entry.js} +2 -2
  41. package/www/build/{p-46ea0b2e.entry.js.map → p-c778bf87.entry.js.map} +1 -1
  42. package/www/build/{p-e1d80057.entry.js → p-ce6e18f9.entry.js} +2 -2
  43. package/www/build/{p-6c533bc0.entry.js → p-dc156429.entry.js} +2 -2
  44. package/www/build/web-components-library.esm.js +1 -1
  45. package/www/index.html +1 -1
  46. /package/dist/web-components-library/{p-e1d80057.entry.js.map → p-ce6e18f9.entry.js.map} +0 -0
  47. /package/dist/web-components-library/{p-6c533bc0.entry.js.map → p-dc156429.entry.js.map} +0 -0
  48. /package/www/build/{p-e1d80057.entry.js.map → p-ce6e18f9.entry.js.map} +0 -0
  49. /package/www/build/{p-6c533bc0.entry.js.map → p-dc156429.entry.js.map} +0 -0
package/CHANGELOG.md CHANGED
@@ -2,6 +2,13 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
4
4
 
5
+ ## [19.1.0](https://github.com/ZanichelliEditore/design-system/compare/v19.0.1...v19.1.0) (2025-12-18)
6
+
7
+
8
+ ### Features
9
+
10
+ * add an optional slot as a message in the z-toast-notification component ([b840b98](https://github.com/ZanichelliEditore/design-system/commit/b840b98f5f7b509d29db2e787653092216117bf6))
11
+
5
12
  ## [19.0.1](https://github.com/ZanichelliEditore/design-system/compare/v19.0.0...v19.0.1) (2025-12-15)
6
13
 
7
14
 
@@ -5,7 +5,7 @@ const utils = require('./utils-3dc316f8.js');
5
5
  require('./index-09238e31.js');
6
6
  require('./index-66928615.js');
7
7
 
8
- const stylesCss = ":host{position:relative;display:grid;width:100%;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));--columns:1}*{box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-background)}:host(:hover) ::slotted(z-td),:host(:hover) ::slotted(z-th){background-color:var(--color-surface02);border-bottom:var(--border-size-small) solid var(--color-surface04);border-top:var(--border-size-small) solid var(--color-surface04)}:host(:focus){position:relative;z-index:20;box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container{display:flex;align-items:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:auto;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}.z-tr--focus-overlay{position:absolute;z-index:30;right:0;left:0;width:100%;border-radius:4px;box-shadow:none;inset:0;outline:none;pointer-events:none;transition:box-shadow 0.2s}:host(:focus) .z-tr--focus-overlay{box-shadow:0 0 0 2px var(--shadow-focus-primary),\n var(--shadow-focus-primary);outline:none}:host(:focus) ::slotted(*){border-bottom:none}:host(:focus) .z-tr--expand-button-container{border-bottom:none}";
8
+ const stylesCss = ":host{position:relative;display:grid;width:100%;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));--columns:1}*{box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-background)}:host(:hover) ::slotted(z-td),:host(:hover) ::slotted(z-th){border-top:var(--border-size-small) solid var(--color-surface04);border-bottom:var(--border-size-small) solid var(--color-surface04);background-color:var(--color-surface02)}:host(:focus){position:relative;z-index:20;box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container{display:flex;align-items:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:auto;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}.z-tr--focus-overlay{position:absolute;z-index:30;right:0;left:0;width:100%;border-radius:4px;box-shadow:none;inset:0;outline:none;pointer-events:none;transition:box-shadow 0.2s}:host(:focus) .z-tr--focus-overlay{box-shadow:0 0 0 2px var(--shadow-focus-primary),\n var(--shadow-focus-primary);outline:none}:host(:focus) ::slotted(*){border-bottom:none}:host(:focus) .z-tr--expand-button-container{border-bottom:none}";
9
9
  const ZTrStyle0 = stylesCss;
10
10
 
11
11
  const ZTr = class {
@@ -70,4 +70,4 @@ ZTr.style = ZTrStyle0;
70
70
 
71
71
  exports.ZTr = ZTr;
72
72
 
73
- //# sourceMappingURL=index-de7a78d1.js.map
73
+ //# sourceMappingURL=index-e84fb4e1.js.map
@@ -1 +1 @@
1
- {"file":"index-de7a78d1.js","mappings":"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","names":["randomId","h","Host"],"sources":["src/components/table/z-tr/styles.css?tag=z-tr&encapsulation=shadow","src/components/table/z-tr/index.tsx"],"sourcesContent":[":host {\n position: relative;\n display: grid;\n width: 100%;\n box-sizing: border-box;\n grid-auto-flow: column;\n grid-template-columns: var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));\n\n --columns: 1;\n}\n\n* {\n box-sizing: border-box;\n}\n\n.z-tr--expand-button-container,\n::slotted(*) {\n border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\n::slotted(*:not(:last-child)) {\n border-right: var(--z-table--cell-left-border, none);\n}\n\n:host([expandable]) {\n --show-expandable-button: visible;\n\n cursor: pointer;\n}\n\n:host([expandable]) ::slotted(*) {\n grid-row: 1;\n}\n\n:host([expandable]) ::slotted(:nth-last-child(2)) {\n border-right: none;\n}\n\n:host([expandable]) ::slotted(*:last-child) {\n border-left: 0;\n grid-column: 1 / span calc(var(--columns) + 1);\n grid-row: 2;\n}\n\n:host([expandable]:not([expanded])) ::slotted(*:last-child) {\n display: none;\n}\n\n:host([expanded]) {\n margin-bottom: 4px; /* prevents shadow to be cut by the next element */\n box-shadow: 0 4px 4px -2px var(--shadow-color-base);\n}\n\n:host([expanded]) .z-tr--expand-button-container,\n:host([expanded]) ::slotted(*) {\n background-color: var(--color-background);\n}\n\n:host(:hover) ::slotted(z-td),\n:host(:hover) ::slotted(z-th) {\n background-color: var(--color-surface02);\n border-bottom: var(--border-size-small) solid var(--color-surface04);\n border-top: var(--border-size-small) solid var(--color-surface04);\n}\n\n:host(:focus) {\n position: relative;\n z-index: 20;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n.z-tr--expand-button-container {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--z-table--cells-background, var(--color-surface01));\n}\n\n.z-tr--expand-button-container button {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n margin: auto;\n appearance: none;\n background: transparent;\n cursor: pointer;\n visibility: var(--show-expandable-button, hidden);\n}\n\n.z-tr--expand-button-container button z-icon {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n.z-tr--focus-overlay {\n position: absolute;\n z-index: 30;\n right: 0;\n left: 0;\n width: 100%;\n border-radius: 4px;\n box-shadow: none;\n inset: 0;\n outline: none;\n pointer-events: none;\n transition: box-shadow 0.2s;\n}\n\n:host(:focus) .z-tr--focus-overlay {\n box-shadow:\n 0 0 0 2px var(--shadow-focus-primary),\n var(--shadow-focus-primary);\n outline: none;\n}\n\n:host(:focus) ::slotted(*) {\n border-bottom: none;\n}\n\n:host(:focus) .z-tr--expand-button-container {\n border-bottom: none;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/**\n * ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n */\n@Component({\n tag: \"z-tr\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTr {\n @Element() host: HTMLZTrElement;\n\n /**\n * Whether the row is expandable.\n * Use a `z-td` as the last cell of the row for the additional content.\n * It will show a button to expand/collapse the row.\n * The last cell will be hidden until the button or row is clicked.\n *\n * If some element inside the expandable row contains the `prevent-expand` css class,\n * the row will not expand by clicking that element.\n */\n @Prop({reflect: true})\n expandable = false;\n\n /**\n * Whether the row is currently expanded.\n */\n @State()\n expanded = false;\n\n /**\n * HTML Id of the expandable content.\n * It is used to link the button to the content through the `aria-controls` attribute.\n */\n @State()\n expandableContentId: string;\n\n /** Row has been expanded */\n @Event()\n expand: EventEmitter;\n\n @Watch(\"expandable\")\n @Listen(\"colspanchange\")\n protected updateColumns(): void {\n const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement | HTMLZThElement>(\"z-td, z-th\"));\n if (this.expandable) {\n cells.pop();\n }\n\n const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);\n this.host.style.setProperty(\"--columns\", `${columns}`);\n\n if (this.expandable) {\n const expandableContent = cells.pop();\n expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;\n this.expandableContentId = expandableContent.id;\n }\n }\n\n /**\n * Handle click on row.\n * Skip expansion if the click is on a element with `prevent-expand` css class.\n */\n private onRowClick(event: MouseEvent): void {\n const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n if (!this.expandable || preventExpand) {\n return;\n }\n\n this.expanded = !this.expanded;\n this.expand.emit({expanded: this.expanded});\n }\n\n private onKeyDown(event: KeyboardEvent): void {\n if (!this.expandable) {\n return;\n }\n\n const active = document.activeElement;\n if (active !== this.host) {\n return;\n }\n\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n this.expanded = !this.expanded;\n this.expand.emit({expanded: this.expanded});\n }\n }\n\n componentWillLoad(): void {\n this.updateColumns();\n }\n\n render(): HTMLZTrElement {\n return (\n <Host\n role=\"row\"\n tabIndex={0}\n expanded={this.expanded}\n onClick={this.onRowClick.bind(this)}\n onKeyDown={this.onKeyDown.bind(this)}\n >\n <div\n class=\"z-tr--focus-overlay\"\n aria-hidden=\"true\"\n ></div>\n <div class=\"z-tr--expand-button-container\">\n {this.expandable && (\n <button\n tabIndex={-1}\n aria-expanded={this.expanded ? \"true\" : \"false\"}\n aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n aria-controls={this.expandableContentId}\n type=\"button\"\n >\n <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n </button>\n )}\n </div>\n <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"index-e84fb4e1.js","mappings":"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","names":["randomId","h","Host"],"sources":["src/components/table/z-tr/styles.css?tag=z-tr&encapsulation=shadow","src/components/table/z-tr/index.tsx"],"sourcesContent":[":host {\n position: relative;\n display: grid;\n width: 100%;\n box-sizing: border-box;\n grid-auto-flow: column;\n grid-template-columns: var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));\n\n --columns: 1;\n}\n\n* {\n box-sizing: border-box;\n}\n\n.z-tr--expand-button-container,\n::slotted(*) {\n border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\n::slotted(*:not(:last-child)) {\n border-right: var(--z-table--cell-left-border, none);\n}\n\n:host([expandable]) {\n --show-expandable-button: visible;\n\n cursor: pointer;\n}\n\n:host([expandable]) ::slotted(*) {\n grid-row: 1;\n}\n\n:host([expandable]) ::slotted(:nth-last-child(2)) {\n border-right: none;\n}\n\n:host([expandable]) ::slotted(*:last-child) {\n border-left: 0;\n grid-column: 1 / span calc(var(--columns) + 1);\n grid-row: 2;\n}\n\n:host([expandable]:not([expanded])) ::slotted(*:last-child) {\n display: none;\n}\n\n:host([expanded]) {\n margin-bottom: 4px; /* prevents shadow to be cut by the next element */\n box-shadow: 0 4px 4px -2px var(--shadow-color-base);\n}\n\n:host([expanded]) .z-tr--expand-button-container,\n:host([expanded]) ::slotted(*) {\n background-color: var(--color-background);\n}\n\n:host(:hover) ::slotted(z-td),\n:host(:hover) ::slotted(z-th) {\n border-top: var(--border-size-small) solid var(--color-surface04);\n border-bottom: var(--border-size-small) solid var(--color-surface04);\n background-color: var(--color-surface02);\n}\n\n:host(:focus) {\n position: relative;\n z-index: 20;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n.z-tr--expand-button-container {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--z-table--cells-background, var(--color-surface01));\n}\n\n.z-tr--expand-button-container button {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n margin: auto;\n appearance: none;\n background: transparent;\n cursor: pointer;\n visibility: var(--show-expandable-button, hidden);\n}\n\n.z-tr--expand-button-container button z-icon {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n.z-tr--focus-overlay {\n position: absolute;\n z-index: 30;\n right: 0;\n left: 0;\n width: 100%;\n border-radius: 4px;\n box-shadow: none;\n inset: 0;\n outline: none;\n pointer-events: none;\n transition: box-shadow 0.2s;\n}\n\n:host(:focus) .z-tr--focus-overlay {\n box-shadow:\n 0 0 0 2px var(--shadow-focus-primary),\n var(--shadow-focus-primary);\n outline: none;\n}\n\n:host(:focus) ::slotted(*) {\n border-bottom: none;\n}\n\n:host(:focus) .z-tr--expand-button-container {\n border-bottom: none;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/**\n * ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n */\n@Component({\n tag: \"z-tr\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTr {\n @Element() host: HTMLZTrElement;\n\n /**\n * Whether the row is expandable.\n * Use a `z-td` as the last cell of the row for the additional content.\n * It will show a button to expand/collapse the row.\n * The last cell will be hidden until the button or row is clicked.\n *\n * If some element inside the expandable row contains the `prevent-expand` css class,\n * the row will not expand by clicking that element.\n */\n @Prop({reflect: true})\n expandable = false;\n\n /**\n * Whether the row is currently expanded.\n */\n @State()\n expanded = false;\n\n /**\n * HTML Id of the expandable content.\n * It is used to link the button to the content through the `aria-controls` attribute.\n */\n @State()\n expandableContentId: string;\n\n /** Row has been expanded */\n @Event()\n expand: EventEmitter;\n\n @Watch(\"expandable\")\n @Listen(\"colspanchange\")\n protected updateColumns(): void {\n const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement | HTMLZThElement>(\"z-td, z-th\"));\n if (this.expandable) {\n cells.pop();\n }\n\n const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);\n this.host.style.setProperty(\"--columns\", `${columns}`);\n\n if (this.expandable) {\n const expandableContent = cells.pop();\n expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;\n this.expandableContentId = expandableContent.id;\n }\n }\n\n /**\n * Handle click on row.\n * Skip expansion if the click is on a element with `prevent-expand` css class.\n */\n private onRowClick(event: MouseEvent): void {\n const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n if (!this.expandable || preventExpand) {\n return;\n }\n\n this.expanded = !this.expanded;\n this.expand.emit({expanded: this.expanded});\n }\n\n private onKeyDown(event: KeyboardEvent): void {\n if (!this.expandable) {\n return;\n }\n\n const active = document.activeElement;\n if (active !== this.host) {\n return;\n }\n\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n this.expanded = !this.expanded;\n this.expand.emit({expanded: this.expanded});\n }\n }\n\n componentWillLoad(): void {\n this.updateColumns();\n }\n\n render(): HTMLZTrElement {\n return (\n <Host\n role=\"row\"\n tabIndex={0}\n expanded={this.expanded}\n onClick={this.onRowClick.bind(this)}\n onKeyDown={this.onKeyDown.bind(this)}\n >\n <div\n class=\"z-tr--focus-overlay\"\n aria-hidden=\"true\"\n ></div>\n <div class=\"z-tr--expand-button-container\">\n {this.expandable && (\n <button\n tabIndex={-1}\n aria-expanded={this.expanded ? \"true\" : \"false\"}\n aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n aria-controls={this.expandableContentId}\n type=\"button\"\n >\n <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n </button>\n )}\n </div>\n <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n </Host>\n );\n }\n}\n"],"version":3}
@@ -6,7 +6,7 @@ const index = require('./index-96af6326.js');
6
6
  require('./index-62712250.js');
7
7
  require('./index-1c7cd5df.js');
8
8
  require('./index-f011b2e3.js');
9
- require('./index-de7a78d1.js');
9
+ require('./index-e84fb4e1.js');
10
10
  require('./utils-3dc316f8.js');
11
11
  require('./index-97a4c18d.js');
12
12
  require('./breakpoints-8a1e87e0.js');
@@ -4164,7 +4164,7 @@ const ZToastNotification = class {
4164
4164
  this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass(), false), time);
4165
4165
  }
4166
4166
  renderContent() {
4167
- return (index.h("div", { id: "external-container", tabIndex: 0, class: { [this.type]: !!this.type } }, index.h("div", { id: "inner-container" }, index.h("div", { id: "text" }, this.heading && index.h("span", { class: "title" }, this.heading), index.h("span", { class: "message", innerHTML: DOMPurify.sanitize(this.message || " ") })), index.h("div", { id: "button" }, index.h("slot", { name: "button" }))), index.h("div", { id: "icon" }, this.closebutton && (index.h("z-icon", { tabIndex: 0, name: "multiply-circled", width: 15, height: 15, onClick: () => this.emitToastClose(this.mapSlideOutClass(), true), onKeyPress: (e) => {
4167
+ return (index.h("div", { id: "external-container", tabIndex: 0, class: { [this.type]: !!this.type } }, index.h("div", { id: "inner-container" }, index.h("div", { id: "text" }, this.heading && index.h("span", { class: "title" }, this.heading), index.h("span", { class: "message" }, index.h("slot", { name: "message" }, index.h("span", { innerHTML: DOMPurify.sanitize(this.message || " ") })))), index.h("div", { id: "button" }, index.h("slot", { name: "button" }))), index.h("div", { id: "icon" }, this.closebutton && (index.h("z-icon", { tabIndex: 0, name: "multiply-circled", width: 15, height: 15, onClick: () => this.emitToastClose(this.mapSlideOutClass(), true), onKeyPress: (e) => {
4168
4168
  if (e.code == index$1.KeyboardCode.SPACE || e.code == index$1.KeyboardCode.ENTER) {
4169
4169
  e.preventDefault();
4170
4170
  this.emitToastClose(this.mapSlideOutClass(), true);
@@ -4172,7 +4172,7 @@ const ZToastNotification = class {
4172
4172
  } })))));
4173
4173
  }
4174
4174
  render() {
4175
- return (index.h(index.Host, { key: 'e831b21d9178cad74415f78eac62002e5a7a13ab', style: { "--percentuale": `${this.percentage}%` }, class: this.transition ? this.transition : "", onAnimationEnd: (e) => {
4175
+ return (index.h(index.Host, { key: '63f39d1520294c046f4cf4f27387dae49254d306', style: { "--percentuale": `${this.percentage}%` }, class: this.transition ? this.transition : "", onAnimationEnd: (e) => {
4176
4176
  if (this.autoclose && e.animationName.includes("slidein")) {
4177
4177
  this.startClosingTimeout(this.autoclose);
4178
4178
  }