npm - @zanichelli/albe-web-components - Versions diffs - 18.4.2 → 18.5.0 - Mend

@zanichelli/albe-web-components 18.4.2 → 18.5.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 (158) hide show

package/dist/cjs/z-tr.cjs.entry.js CHANGED Viewed

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-f67078cb.js');
+const index = require('./index-fb88ce4a.js');
 require('./index-96af6326.js');
 require('./utils-714b7a92.js');
 require('./index-be0b8cf5.js');
 require('./breakpoints-8a1e87e0.js');
-require('./index-e98b419e.js');
-require('./index-443b084a.js');
+require('./index-299de208.js');
+require('./index-e1eead16.js');

package/dist/collection/components/table/cells/z-td/index.js CHANGED Viewed

@@ -29,7 +29,7 @@ export class ZTd {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: 'c9c2a31f99dc72acd54744c8c1abdbb56b0a7df3', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: 'f503630802052c5c3566b725aba40ea0923d60da', class: "cell--content" }, h("slot", { key: 'e26dc22a7b21eef5475d10124312384593957bf8' }), this.showMenu && (h("div", { key: '4c7204766c53e4502ff24e51e9ea751620246278', class: "cell--menu-container prevent-expand" }, h("z-button", { key: '3d0f59414241c2b195dd45cf74f678b15e957cac', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: '68d2f577c442c9a72009dd6365cd4182e9333d5a', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'c90cf570174b2e2af659ae02e217d725a1951cb4', name: "contextual-menu" })))))));
+        return (h(Host, { key: '8c866902e986231a18c02c447bc390d14f55aecf', role: "cell", "menu-open": this.isMenuOpen, tabIndex: 0 }, h("div", { key: '83b6e697548f7fec6705e74111253564066005d8', class: "cell--content" }, h("slot", { key: '4129469503f265975bf5a28aa1ea576fa2e3311b' }), this.showMenu && (h("div", { key: 'd70b2bb104a891270515e7428593ce9cedbd882c', class: "cell--menu-container prevent-expand" }, h("z-button", { key: 'cacd10ac34bb695883c1e0d63dc96623fa3c59e9', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: 'e6fdca5d2ba1047264c0703a222c3c5a5c30480b', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'e3e996e448fd49d4248d98d219a899ea254d7fd1', name: "contextual-menu" })))))));
     }
     static get is() { return "z-td"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/cells/z-td/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/table/cells/z-td/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACnG,OAAO,EAAC,aAAa,EAAE,WAAW,EAAE,eAAe,EAAE,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AAEnG;;;GAGG;AAMH,MAAM,OAAO,GAAG;;;sBAaL,KAAK;wBAQkB,IAAI;+BAMA,eAAe,CAAC,IAAI;0BAM3C,KAAK;;IAgBR,aAAa;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;QACtD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;QAChD,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;IAC7C,CAAC;IAEO,iBAAiB,CAAC,EAAc;QACtC,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,eACA,IAAI,CAAC,UAAU;~~YAE1B~~,4DAAK,KAAK,EAAC,eAAe;gBACxB,8DAAa;gBACZ,IAAI,CAAC,QAAQ,IAAI,CAChB,4DAAK,KAAK,EAAC,qCAAqC;oBAC9C,iEACE,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAwB,CAAC,EAC1D,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAC1C;oBACF,kEACE,KAAK,EAAC,cAAc,EACpB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAA0B,EACvC,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,QAAQ,EAAE,IAAI,CAAC,eAAe;wBAE9B,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, VisibilityCondition} from \"../../../../beans\";\n\n/*\n ZTd component.\n * @slot - ZTd content.\n /\n@Component({\n tag: \"z-td\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTd {\n @Element() host: HTMLZTdElement;\n\n /\n Number of columns that the cell should span.\n /\n @Prop()\n colspan: number;\n\n /\n Whether the cell should stick.\n /\n @Prop({reflect: true})\n sticky = false;\n\n /\n Enables the contextual menu.\n * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n * Set a nullish value to hide the menu button.\n /\n @Prop({reflect: true})\n showMenu: VisibilityCondition = null;\n\n /\n Set the popover position, the default is \"auto\".\n /\n @Prop()\n popoverPosition?: PopoverPosition = PopoverPosition.AUTO;\n\n /\n Store the open state of the menu.\n /\n @State()\n isMenuOpen = false;\n\n private menuTrigger: HTMLZButtonElement;\n\n private popoverEl: HTMLZPopoverElement;\n\n /\n Emitted when the value of the `colspan` changes.\n */\n @Event({\n bubbles: true,\n cancelable: false,\n })\n colspanChange: EventEmitter<number>;\n\n @Watch(\"colspan\")\n protected updateColspan(): void {\n if (this.colspan) {\n this.host.style.gridColumn = `span ${this.colspan}`;\n } else {\n this.host.style.removeProperty(\"grid-column\");\n }\n\n this.colspanChange.emit(this.colspan \|\| 1);\n }\n\n private onMenuButtonClick(ev: MouseEvent): void {\n ev.stopPropagation();\n this.popoverEl.open = !this.popoverEl.open;\n }\n\n componentWillLoad(): void {\n this.updateColspan();\n }\n\n render(): HTMLZTdElement {\n return (\n <Host\n role=\"cell\"\n menu-open={this.isMenuOpen}\n >\n <div class=\"cell--content\">\n <slot></slot>\n {this.showMenu && (\n <div class=\"cell--menu-container prevent-expand\">\n <z-button\n variant={ButtonVariant.TERTIARY}\n icon=\"contextual-menu\"\n size={ControlSize.X_SMALL}\n ref={(el) => (this.menuTrigger = el as HTMLZButtonElement)}\n onClick={this.onMenuButtonClick.bind(this)}\n />\n <z-popover\n class=\"cell-popover\"\n ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n bindTo={this.menuTrigger as HTMLElement}\n onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n position={this.popoverPosition}\n >\n <slot name=\"contextual-menu\"></slot>\n </z-popover>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/table/cells/z-td/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACnG,OAAO,EAAC,aAAa,EAAE,WAAW,EAAE,eAAe,EAAE,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AAEnG;;;GAGG;AAMH,MAAM,OAAO,GAAG;;;sBAaL,KAAK;wBAQkB,IAAI;+BAMA,eAAe,CAAC,IAAI;0BAM3C,KAAK;;IAgBR,aAAa;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;QACtD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;QAChD,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;IAC7C,CAAC;IAEO,iBAAiB,CAAC,EAAc;QACtC,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,eACA,IAAI,CAAC,UAAU,EAC1B,QAAQ,EAAE,CAAC;YAEX,4DAAK,KAAK,EAAC,eAAe;gBACxB,8DAAa;gBACZ,IAAI,CAAC,QAAQ,IAAI,CAChB,4DAAK,KAAK,EAAC,qCAAqC;oBAC9C,iEACE,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAwB,CAAC,EAC1D,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAC1C;oBACF,kEACE,KAAK,EAAC,cAAc,EACpB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAA0B,EACvC,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,QAAQ,EAAE,IAAI,CAAC,eAAe;wBAE9B,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, VisibilityCondition} from \"../../../../beans\";\n\n/*\n ZTd component.\n * @slot - ZTd content.\n /\n@Component({\n tag: \"z-td\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTd {\n @Element() host: HTMLZTdElement;\n\n /\n Number of columns that the cell should span.\n /\n @Prop()\n colspan: number;\n\n /\n Whether the cell should stick.\n /\n @Prop({reflect: true})\n sticky = false;\n\n /\n Enables the contextual menu.\n * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n * Set a nullish value to hide the menu button.\n /\n @Prop({reflect: true})\n showMenu: VisibilityCondition = null;\n\n /\n Set the popover position, the default is \"auto\".\n /\n @Prop()\n popoverPosition?: PopoverPosition = PopoverPosition.AUTO;\n\n /\n Store the open state of the menu.\n /\n @State()\n isMenuOpen = false;\n\n private menuTrigger: HTMLZButtonElement;\n\n private popoverEl: HTMLZPopoverElement;\n\n /\n Emitted when the value of the `colspan` changes.\n */\n @Event({\n bubbles: true,\n cancelable: false,\n })\n colspanChange: EventEmitter<number>;\n\n @Watch(\"colspan\")\n protected updateColspan(): void {\n if (this.colspan) {\n this.host.style.gridColumn = `span ${this.colspan}`;\n } else {\n this.host.style.removeProperty(\"grid-column\");\n }\n\n this.colspanChange.emit(this.colspan \|\| 1);\n }\n\n private onMenuButtonClick(ev: MouseEvent): void {\n ev.stopPropagation();\n this.popoverEl.open = !this.popoverEl.open;\n }\n\n componentWillLoad(): void {\n this.updateColspan();\n }\n\n render(): HTMLZTdElement {\n return (\n <Host\n role=\"cell\"\n menu-open={this.isMenuOpen}\n tabIndex={0}\n >\n <div class=\"cell--content\">\n <slot></slot>\n {this.showMenu && (\n <div class=\"cell--menu-container prevent-expand\">\n <z-button\n variant={ButtonVariant.TERTIARY}\n icon=\"contextual-menu\"\n size={ControlSize.X_SMALL}\n ref={(el) => (this.menuTrigger = el as HTMLZButtonElement)}\n onClick={this.onMenuButtonClick.bind(this)}\n />\n <z-popover\n class=\"cell-popover\"\n ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n bindTo={this.menuTrigger as HTMLElement}\n onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n position={this.popoverPosition}\n >\n <slot name=\"contextual-menu\"></slot>\n </z-popover>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/table/cells/z-td/styles.css CHANGED Viewed

@@ -25,6 +25,12 @@
   z-index: 2;
 }
+:host(:focus) {
+  z-index: 20;
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
 .cell--content {
   display: flex;
   width: 100%;

package/dist/collection/components/table/cells/z-th/styles.css CHANGED Viewed

@@ -25,6 +25,12 @@
   z-index: 2;
 }
+:host(:focus) {
+  z-index: 20;
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
 .cell--content {
   display: flex;
   width: 100%;
@@ -120,8 +126,3 @@
   background-color: transparent;
   content: "";
 }
-:host([sorted]) .z-th--sort-button::after,
-.z-th--sort-button:focus:focus-visible::after {
-  box-shadow: var(--shadow-focus-primary);
-}

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

@@ -43,7 +43,7 @@ export class ZTr {
         this.updateColumns();
     }
     render() {
-        return (h(Host, { key: 'c7aef75dce7ad486aa08145e3df1a9a4fbc0a086', role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, h("div", { key: '474efb8147efb3045b2d671081674330209674ae', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: 'd4f77c52514979ee1e52483d1031d222f8b60dfd', "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: 'a488e44b2b9119f2b96aeb42c2880f16650685a6', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: '03ec3ec33b29e7ec504282289fa0daf8990deef5', onSlotchange: this.updateColumns.bind(this) })));
+        return (h(Host, { key: '6b028d12da65adf37eb6637ddf9bfd06d9f0db24', role: "row", tabIndex: 0, expanded: this.expanded, onClick: this.onRowClick.bind(this) }, h("div", { key: '598c2865ff6df8c8b6335e08a559407c6074bc6a', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: 'b6b1ec7c8817f0a2494b509f536d640d54012620', "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: 'ed1dee7ce70dfee25497d7ba33ce3655217f6d0f', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: '13d5eea11840b0a28dff58fe144791d8e9cfaca5', onSlotchange: this.updateColumns.bind(this) })));
     }
     static get is() { return "z-tr"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/table/z-tr/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC3G,OAAO,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAC9C,OAAO,qBAAqB,CAAC;AAC7B,OAAO,qBAAqB,CAAC;AAE7B;;;;;GAKG;AAMH,MAAM,OAAO,GAAG;;0BAaD,KAAK;wBAMP,KAAK;;;IAeN,aAAa;QACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAkC,YAAY,CAAC,CAAC,CAAC;QACpG,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,KAAK,CAAC,GAAG,EAAE,CAAC;QACd,CAAC;QAED,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAClF,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;QAEvD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,MAAM,iBAAiB,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;YACtC,iBAAiB,CAAC,EAAE,GAAG,iBAAiB,CAAC,EAAE,IAAI,2BAA2B,QAAQ,EAAE,EAAE,CAAC;YACvF,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,EAAE,CAAC;QAClD,CAAC;IACH,CAAC;IAED;;;OAGG;IACK,UAAU,CAAC,KAAiB;QAClC,MAAM,aAAa,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAC/E,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,aAAa,EAAE,CAAC;YACtC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;IAC9C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,EACV,~~OAAO~~,EAAE,IAAI,CAAC,~~UAAU~~,~~CAAC~~,IAAI,CAAC,~~IAAI~~,CAAC,~~EACnC~~,~~QAAQ~~,~~EAAE,~~IAAI,CAAC~~,QAAQ~~;~~YAEvB~~,4DAAK,KAAK,EAAC,+BAA+B,IACvC,IAAI,CAAC,UAAU,IAAI,CAClB,gFACiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBACnC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,mBAC7C,IAAI,CAAC,mBAAmB,EACvC,IAAI,EAAC,QAAQ;gBAEb,+DAAQ,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,GAAW,CAClE,CACV,CACG;YACN,6DAAM,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACrD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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 componentWillLoad(): void {\n this.updateColumns();\n }\n\n render(): HTMLZTrElement {\n return (\n <Host\n role=\"row\"\n ~~onClick~~={~~this.onRowClick.bind(this)~~}\n expanded={this.expanded}\n >\n <div class=\"z-tr--expand-button-container\">\n {this.expandable && (\n <button\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"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/table/z-tr/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC3G,OAAO,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAC9C,OAAO,qBAAqB,CAAC;AAC7B,OAAO,qBAAqB,CAAC;AAE7B;;;;;GAKG;AAMH,MAAM,OAAO,GAAG;;0BAaD,KAAK;wBAMP,KAAK;;;IAeN,aAAa;QACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAkC,YAAY,CAAC,CAAC,CAAC;QACpG,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,KAAK,CAAC,GAAG,EAAE,CAAC;QACd,CAAC;QAED,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAClF,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;QAEvD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,MAAM,iBAAiB,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;YACtC,iBAAiB,CAAC,EAAE,GAAG,iBAAiB,CAAC,EAAE,IAAI,2BAA2B,QAAQ,EAAE,EAAE,CAAC;YACvF,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,EAAE,CAAC;QAClD,CAAC;IACH,CAAC;IAED;;;OAGG;IACK,UAAU,CAAC,KAAiB;QAClC,MAAM,aAAa,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAC/E,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,aAAa,EAAE,CAAC;YACtC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;IAC9C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;YAEnC,4DAAK,KAAK,EAAC,+BAA+B,IACvC,IAAI,CAAC,UAAU,IAAI,CAClB,gFACiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBACnC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,mBAC7C,IAAI,CAAC,mBAAmB,EACvC,IAAI,EAAC,QAAQ;gBAEb,+DAAQ,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,GAAW,CAClE,CACV,CACG;YACN,6DAAM,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACrD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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 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 >\n <div class=\"z-tr--expand-button-container\">\n {this.expandable && (\n <button\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"]}

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

@@ -55,6 +55,19 @@
   background-color: var(--color-background);
 }
+:host(:focus) {
+  position: relative;
+  z-index: 20;
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
+:host(:hover) {
+  position: relative;
+  z-index: 10;
+  box-shadow: 0 4px 4px -2px var(--shadow-color-base, rgb(0 0 0 / 20%));
+}
 .z-tr--expand-button-container {
   display: flex;
   align-items: center;

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

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { KeyboardCode, ToastNotificationTransition } from "../../beans";
+import DOMPurify from "dompurify";
 import Hammer from "hammerjs";
 export class ZToastNotification {
     constructor() {
@@ -37,11 +38,19 @@ export class ZToastNotification {
             }
         }
     }
-    emitToastClose(cssClass) {
+    emitToastClose(cssClass, stopTimer) {
+        if (stopTimer && this.timeoutHandle) {
+            clearTimeout(this.timeoutHandle);
+        }
         this.timeoutHandle = null;
         this.elapsedTime = null;
-        this.hostElement.classList.add(cssClass);
         this.toastClose.emit();
+        if (cssClass) {
+            this.hostElement.classList.add(cssClass);
+        }
+        else {
+            this.hostElement.parentNode.removeChild(this.hostElement);
+        }
     }
     componentWillLoad() {
         this.validateAutoclose();
@@ -49,8 +58,13 @@ export class ZToastNotification {
     }
     componentDidLoad() {
         this.startTime = Date.now();
-        if (this.autoclose && this.pauseonfocusloss) {
-            document.addEventListener("visibilitychange", this.visibilityChangeEventHandler);
+        if (this.autoclose) {
+            if (this.pauseonfocusloss) {
+                document.addEventListener("visibilitychange", this.visibilityChangeEventHandler);
+            }
+            if (!this.transition) {
+                this.startClosingTimeout(this.autoclose);
+            }
         }
         this.isdraggable && this.handleSlideOutDragAnimation();
     }
@@ -77,6 +91,8 @@ export class ZToastNotification {
                 return ToastNotificationTransition.SLIDE_OUT_RIGHT;
             case ToastNotificationTransition.SLIDE_IN_RIGHT:
                 return ToastNotificationTransition.SLIDE_OUT_LEFT;
+            default:
+                return null;
         }
     }
     calculateDraggedPercentage(e) {
@@ -91,7 +107,9 @@ export class ZToastNotification {
         this.sliderManager.on("pan", (e) => {
             this.percentage = this.calculateDraggedPercentage(e);
             this.hostElement.style.transition = "none";
-            this.hostElement.classList.remove(this.transition);
+            if (this.transition) {
+                this.hostElement.classList.remove(this.transition);
+            }
             const translateObj = {
                 translate: `translateX(${this.percentage}%)`,
                 translateBack: "translateX(0)",
@@ -101,7 +119,7 @@ export class ZToastNotification {
                 this.hostElement.style.transform = translateObj.translate;
                 if (Math.abs(this.percentage) > this.draggablepercentage && !this.isCloseEventCalled) {
                     this.isCloseEventCalled = true;
-                    this.emitToastClose(e.direction === Hammer.DIRECTION_LEFT ? "slide-out-left" : "slide-out-right");
+                    this.emitToastClose(e.direction === Hammer.DIRECTION_LEFT ? "slide-out-left" : "slide-out-right", true);
                 }
             }
             if (e.isFinal && Math.abs(this.percentage) < this.draggablepercentage) {
@@ -126,18 +144,18 @@ export class ZToastNotification {
         clearTimeout(this.timeoutHandle);
     }
     startClosingTimeout(time) {
-        this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass()), time);
+        this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass(), false), time);
     }
     renderContent() {
-        return (h("div", { id: "external-container", tabIndex: 0, class: { [this.type]: !!this.type } }, h("div", { id: "inner-container" }, h("div", { id: "text" }, this.heading && h("span", { class: "title" }, this.heading), h("span", { class: "message" }, this.message)), h("div", { id: "button" }, h("slot", { name: "button" }))), h("div", { id: "icon" }, this.closebutton && (h("z-icon", { tabIndex: 0, name: "multiply-circled", width: 15, height: 15, onClick: () => this.emitToastClose(this.mapSlideOutClass()), onKeyPress: (e) => {
+        return (h("div", { id: "external-container", tabIndex: 0, class: { [this.type]: !!this.type } }, h("div", { id: "inner-container" }, h("div", { id: "text" }, this.heading && h("span", { class: "title" }, this.heading), h("span", { class: "message", innerHTML: DOMPurify.sanitize(this.message || " ") })), h("div", { id: "button" }, h("slot", { name: "button" }))), h("div", { id: "icon" }, this.closebutton && (h("z-icon", { tabIndex: 0, name: "multiply-circled", width: 15, height: 15, onClick: () => this.emitToastClose(this.mapSlideOutClass(), true), onKeyPress: (e) => {
                 if (e.code == KeyboardCode.SPACE || e.code == KeyboardCode.ENTER) {
                     e.preventDefault();
-                    this.emitToastClose(this.mapSlideOutClass());
+                    this.emitToastClose(this.mapSlideOutClass(), true);
                 }
             } })))));
     }
     render() {
-        return (h(Host, { key: '6a0c16ee6c98368459dd43e1a6b9e1917e333d21', style: { "--percentuale": `${this.percentage}%` }, class: this.transition ? this.transition : ToastNotificationTransition.SLIDE_IN_DOWN, onAnimationEnd: (e) => {
+        return (h(Host, { key: '5bb937ac057201c971f4aa0e96a08c683c7e6c95', 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 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): void {\n this.timeoutHandle = null;\n this.elapsedTime = null;\n this.hostElement.classList.add(cssClass);\n this.toastClose.emit();\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 && this.pauseonfocusloss) {\n document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\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 }\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 this.hostElement.classList.remove(this.transition);\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\");\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()), 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\">{this.message}</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())}\n onKeyPress={(e) => {\n if (e.code == KeyboardCode.SPACE \|\| e.code == KeyboardCode.ENTER) {\n e.preventDefault();\n this.emitToastClose(this.mapSlideOutClass());\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 : ToastNotificationTransition.SLIDE_IN_DOWN}\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@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\n class=\"message\"\n innerHTML={DOMPurify.sanitize(this.message \|\| \" \")}\n />\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/collection/components/z-toast-notification/index.stories.js CHANGED Viewed

@@ -42,12 +42,20 @@ const StoryMeta = {
         type: ToastNotification.DARK,
         isdraggable: true,
         draggablepercentage: 80,
-        transition: ToastNotificationTransition.SLIDE_IN_RIGHT,
     },
     render: (args) => template(args),
 };
 export default StoryMeta;
-export const SlideInRight = {};
+export const NoSlideIn = {
+    args: {
+        message: "Messaggio con <b>grassetto</b> e altro <i>html</i> renderizzato",
+    },
+};
+export const SlideInRight = {
+    args: {
+        transition: ToastNotificationTransition.SLIDE_IN_RIGHT,
+    },
+};
 export const SlideInLeft = {
     args: {
         transition: ToastNotificationTransition.SLIDE_IN_LEFT,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-toast-notification/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAsB,MAAM,KAAK,CAAC;AAE9C,OAAO,EAAC,iBAAiB,EAAE,2BAA2B,EAAC,MAAM,aAAa,CAAC;AAC3E,OAAO,mBAAmB,CAAC;AAC3B,OAAO,SAAS,CAAC;AAEjB,MAAM,QAAQ,GACZ,uKAAuK,CAAC;AAE1K,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAkB,EAAE,CACxC,IAAI,CAAA;;iBAEW,IAAI,CAAC,OAAO;iBACZ,IAAI,CAAC,OAAO;qBACR,IAAI,CAAC,WAAW;mBAClB,IAAI,CAAC,SAAS;0BACP,IAAI,CAAC,gBAAgB;cACjC,IAAI,CAAC,IAAI;qBACF,IAAI,CAAC,WAAW;6BACR,IAAI,CAAC,mBAAmB;oBACjC,IAAI,CAAC,UAAU;;SAE1B,CAAC;AAEV,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,sBAAsB;IACjC,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,iBAAiB,CAAC;SAC1C;QACD,UAAU,EAAE;YACV,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,2BAA2B,CAAC;SACpD;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,QAAQ;QACjB,OAAO,EAAE,iCAAiC;QAC1C,WAAW,EAAE,IAAI;QACjB,SAAS,EAAE,IAAI;QACf,gBAAgB,EAAE,KAAK;QACvB,IAAI,EAAE,iBAAiB,CAAC,IAAI;QAC5B,WAAW,EAAE,IAAI;QACjB,mBAAmB,EAAE,EAAE;~~QACvB,UAAU,EAAE,2BAA2B,CAAC,cAAc~~;~~KACvD;~~IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CACE,CAAC;AAErC,eAAe,SAAS,CAAC;AAGzB,MAAM,CAAC,MAAM,YAAY,GAAG,~~EAAkB~~,CAAC;~~AAE/C~~,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,aAAa;KACtD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,aAAa;QACrD,WAAW,EAAE,KAAK;KACnB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,WAAW;QACnD,OAAO,EAAE,QAAQ;KAClB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,aAAa;KACtD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;mBAEW,IAAI,CAAC,OAAO;mBACZ,IAAI,CAAC,OAAO;uBACR,IAAI,CAAC,WAAW;qBAClB,IAAI,CAAC,SAAS;4BACP,IAAI,CAAC,gBAAgB;gBACjC,IAAI,CAAC,IAAI;uBACF,IAAI,CAAC,WAAW;+BACR,IAAI,CAAC,mBAAmB;sBACjC,IAAI,CAAC,UAAU;;;;;;;;;WAS1B;CACM,CAAC;AAElB,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,aAAa;KACtD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;kBAGU,QAAQ;uBACH,IAAI,CAAC,WAAW;qBAClB,IAAI,CAAC,SAAS;4BACP,IAAI,CAAC,gBAAgB;gBACjC,IAAI,CAAC,IAAI;uBACF,IAAI,CAAC,WAAW;+BACR,IAAI,CAAC,mBAAmB;sBACjC,IAAI,CAAC,UAAU;;;;;;;;;WAS1B;CACM,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {type ZToastNotification} from \".\";\nimport {ToastNotification, ToastNotificationTransition} from \"../../beans\";\nimport \"../z-button/index\";\nimport \"./index\";\n\nconst longText =\n \"Testo decisamente lungo, che non sta su 1 sola riga. Questo testo occupa varie righe ed è un esempio di come vengono posizionati gli elementi in caso di testo lungo.\";\n\nconst template = (args): TemplateResult =>\n html`<div class=\"toast-container\">\n <z-toast-notification\n heading=\"${args.heading}\"\n message=\"${args.message}\"\n closebutton=\"${args.closebutton}\"\n autoclose=\"${args.autoclose}\"\n pauseonfocusloss=\"${args.pauseonfocusloss}\"\n type=\"${args.type}\"\n isdraggable=\"${args.isdraggable}\"\n draggablepercentage=\"${args.draggablepercentage}\"\n transition=\"${args.transition}\"\n ></z-toast-notification>\n </div>`;\n\nconst StoryMeta = {\n title: \"ZToastNotification\",\n component: \"z-toast-notification\",\n argTypes: {\n type: {\n control: {\n type: \"select\",\n },\n options: Object.values(ToastNotification),\n },\n transition: {\n control: {\n type: \"select\",\n },\n options: Object.values(ToastNotificationTransition),\n },\n },\n args: {\n heading: \"Titolo\",\n message: \"Questo è un messaggio di prova.\",\n closebutton: true,\n autoclose: null,\n pauseonfocusloss: false,\n type: ToastNotification.DARK,\n isdraggable: true,\n draggablepercentage: 80,\n ~~transition: ToastNotificationTransition.SLIDE_IN_RIGHT,\n~~ },\n render: (args) => template(args),\n} satisfies Meta<ZToastNotification>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZToastNotification>;\nexport const SlideInRight = {} satisfies Story;\n\nexport const SlideInLeft = {\n args: {\n transition: ToastNotificationTransition.SLIDE_IN_LEFT,\n },\n} satisfies Story;\n\nexport const SlideInDownNoCloseButton = {\n args: {\n transition: ToastNotificationTransition.SLIDE_IN_DOWN,\n closebutton: false,\n },\n} satisfies Story;\n\nexport const SlideInUpLongText = {\n args: {\n transition: ToastNotificationTransition.SLIDE_IN_UP,\n message: longText,\n },\n} satisfies Story;\n\nexport const SlottedButton = {\n args: {\n transition: ToastNotificationTransition.SLIDE_IN_DOWN,\n },\n render: (args) =>\n html`<div class=\"toast-container slotted-button\">\n <z-toast-notification\n heading=\"${args.heading}\"\n message=\"${args.message}\"\n closebutton=\"${args.closebutton}\"\n autoclose=\"${args.autoclose}\"\n pauseonfocusloss=\"${args.pauseonfocusloss}\"\n type=\"${args.type}\"\n isdraggable=\"${args.isdraggable}\"\n draggablepercentage=\"${args.draggablepercentage}\"\n transition=\"${args.transition}\"\n >\n <z-button\n slot=\"button\"\n size=\"small\"\n variant=\"tertiary\"\n >button</z-button\n >\n </z-toast-notification>\n </div>`,\n} satisfies Story;\n\nexport const SlottedButtonLongText = {\n args: {\n transition: ToastNotificationTransition.SLIDE_IN_DOWN,\n },\n render: (args) =>\n html`<div class=\"toast-container slotted-button\">\n <z-toast-notification\n heading=\"Titolo abbastanza lungo\"\n message=${longText}\n closebutton=\"${args.closebutton}\"\n autoclose=\"${args.autoclose}\"\n pauseonfocusloss=\"${args.pauseonfocusloss}\"\n type=\"${args.type}\"\n isdraggable=\"${args.isdraggable}\"\n draggablepercentage=\"${args.draggablepercentage}\"\n transition=\"${args.transition}\"\n >\n <z-button\n slot=\"button\"\n size=\"small\"\n variant=\"tertiary\"\n >button</z-button\n >\n </z-toast-notification>\n </div>`,\n} satisfies Story;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-toast-notification/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAsB,MAAM,KAAK,CAAC;AAE9C,OAAO,EAAC,iBAAiB,EAAE,2BAA2B,EAAC,MAAM,aAAa,CAAC;AAC3E,OAAO,mBAAmB,CAAC;AAC3B,OAAO,SAAS,CAAC;AAEjB,MAAM,QAAQ,GACZ,uKAAuK,CAAC;AAE1K,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAkB,EAAE,CACxC,IAAI,CAAA;;iBAEW,IAAI,CAAC,OAAO;iBACZ,IAAI,CAAC,OAAO;qBACR,IAAI,CAAC,WAAW;mBAClB,IAAI,CAAC,SAAS;0BACP,IAAI,CAAC,gBAAgB;cACjC,IAAI,CAAC,IAAI;qBACF,IAAI,CAAC,WAAW;6BACR,IAAI,CAAC,mBAAmB;oBACjC,IAAI,CAAC,UAAU;;SAE1B,CAAC;AAEV,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,sBAAsB;IACjC,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,iBAAiB,CAAC;SAC1C;QACD,UAAU,EAAE;YACV,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,2BAA2B,CAAC;SACpD;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,QAAQ;QACjB,OAAO,EAAE,iCAAiC;QAC1C,WAAW,EAAE,IAAI;QACjB,SAAS,EAAE,IAAI;QACf,gBAAgB,EAAE,KAAK;QACvB,IAAI,EAAE,iBAAiB,CAAC,IAAI;QAC5B,WAAW,EAAE,IAAI;QACjB,mBAAmB,EAAE,EAAE;KACxB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CACE,CAAC;AAErC,eAAe,SAAS,CAAC;AAGzB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE;QACJ,OAAO,EAAE,iEAAiE;KAC3E;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,cAAc;KACvD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,aAAa;KACtD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,aAAa;QACrD,WAAW,EAAE,KAAK;KACnB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,WAAW;QACnD,OAAO,EAAE,QAAQ;KAClB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,aAAa;KACtD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;mBAEW,IAAI,CAAC,OAAO;mBACZ,IAAI,CAAC,OAAO;uBACR,IAAI,CAAC,WAAW;qBAClB,IAAI,CAAC,SAAS;4BACP,IAAI,CAAC,gBAAgB;gBACjC,IAAI,CAAC,IAAI;uBACF,IAAI,CAAC,WAAW;+BACR,IAAI,CAAC,mBAAmB;sBACjC,IAAI,CAAC,UAAU;;;;;;;;;WAS1B;CACM,CAAC;AAElB,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,aAAa;KACtD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;kBAGU,QAAQ;uBACH,IAAI,CAAC,WAAW;qBAClB,IAAI,CAAC,SAAS;4BACP,IAAI,CAAC,gBAAgB;gBACjC,IAAI,CAAC,IAAI;uBACF,IAAI,CAAC,WAAW;+BACR,IAAI,CAAC,mBAAmB;sBACjC,IAAI,CAAC,UAAU;;;;;;;;;WAS1B;CACM,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {type ZToastNotification} from \".\";\nimport {ToastNotification, ToastNotificationTransition} from \"../../beans\";\nimport \"../z-button/index\";\nimport \"./index\";\n\nconst longText =\n \"Testo decisamente lungo, che non sta su 1 sola riga. Questo testo occupa varie righe ed è un esempio di come vengono posizionati gli elementi in caso di testo lungo.\";\n\nconst template = (args): TemplateResult =>\n html`<div class=\"toast-container\">\n <z-toast-notification\n heading=\"${args.heading}\"\n message=\"${args.message}\"\n closebutton=\"${args.closebutton}\"\n autoclose=\"${args.autoclose}\"\n pauseonfocusloss=\"${args.pauseonfocusloss}\"\n type=\"${args.type}\"\n isdraggable=\"${args.isdraggable}\"\n draggablepercentage=\"${args.draggablepercentage}\"\n transition=\"${args.transition}\"\n ></z-toast-notification>\n </div>`;\n\nconst StoryMeta = {\n title: \"ZToastNotification\",\n component: \"z-toast-notification\",\n argTypes: {\n type: {\n control: {\n type: \"select\",\n },\n options: Object.values(ToastNotification),\n },\n transition: {\n control: {\n type: \"select\",\n },\n options: Object.values(ToastNotificationTransition),\n },\n },\n args: {\n heading: \"Titolo\",\n message: \"Questo è un messaggio di prova.\",\n closebutton: true,\n autoclose: null,\n pauseonfocusloss: false,\n type: ToastNotification.DARK,\n isdraggable: true,\n draggablepercentage: 80,\n },\n render: (args) => template(args),\n} satisfies Meta<ZToastNotification>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZToastNotification>;\nexport const NoSlideIn = {\n args: {\n message: \"Messaggio con <b>grassetto</b> e altro <i>html</i> renderizzato\",\n },\n} satisfies Story;\n\nexport const SlideInRight = {\n args: {\n transition: ToastNotificationTransition.SLIDE_IN_RIGHT,\n },\n} satisfies Story;\n\nexport const SlideInLeft = {\n args: {\n transition: ToastNotificationTransition.SLIDE_IN_LEFT,\n },\n} satisfies Story;\n\nexport const SlideInDownNoCloseButton = {\n args: {\n transition: ToastNotificationTransition.SLIDE_IN_DOWN,\n closebutton: false,\n },\n} satisfies Story;\n\nexport const SlideInUpLongText = {\n args: {\n transition: ToastNotificationTransition.SLIDE_IN_UP,\n message: longText,\n },\n} satisfies Story;\n\nexport const SlottedButton = {\n args: {\n transition: ToastNotificationTransition.SLIDE_IN_DOWN,\n },\n render: (args) =>\n html`<div class=\"toast-container slotted-button\">\n <z-toast-notification\n heading=\"${args.heading}\"\n message=\"${args.message}\"\n closebutton=\"${args.closebutton}\"\n autoclose=\"${args.autoclose}\"\n pauseonfocusloss=\"${args.pauseonfocusloss}\"\n type=\"${args.type}\"\n isdraggable=\"${args.isdraggable}\"\n draggablepercentage=\"${args.draggablepercentage}\"\n transition=\"${args.transition}\"\n >\n <z-button\n slot=\"button\"\n size=\"small\"\n variant=\"tertiary\"\n >button</z-button\n >\n </z-toast-notification>\n </div>`,\n} satisfies Story;\n\nexport const SlottedButtonLongText = {\n args: {\n transition: ToastNotificationTransition.SLIDE_IN_DOWN,\n },\n render: (args) =>\n html`<div class=\"toast-container slotted-button\">\n <z-toast-notification\n heading=\"Titolo abbastanza lungo\"\n message=${longText}\n closebutton=\"${args.closebutton}\"\n autoclose=\"${args.autoclose}\"\n pauseonfocusloss=\"${args.pauseonfocusloss}\"\n type=\"${args.type}\"\n isdraggable=\"${args.isdraggable}\"\n draggablepercentage=\"${args.draggablepercentage}\"\n transition=\"${args.transition}\"\n >\n <z-button\n slot=\"button\"\n size=\"small\"\n variant=\"tertiary\"\n >button</z-button\n >\n </z-toast-notification>\n </div>`,\n} satisfies Story;\n"]}

package/dist/components/_commonjsHelpers.js ADDED Viewed

@@ -0,0 +1,5 @@
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+export { commonjsGlobal as c };
+//# sourceMappingURL=_commonjsHelpers.js.map

package/dist/components/_commonjsHelpers.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"_commonjsHelpers.js","mappings":";;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/utils2.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { c as commonjsGlobal } from './_commonjsHelpers.js';
 import { F as ZDatePickerPosition, y as ZDatePickerMode, z as ZDatePickerModeValue } from './index2.js';
 var HOOKS = [
@@ -2549,8 +2550,6 @@ if (typeof window !== "undefined") {
     window.flatpickr = flatpickr;
 }
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 var it = {exports: {}};
 (function (module, exports) {
@@ -2700,6 +2699,6 @@ function setMonthsAriaOptions(calendar, prevMonthArrow, nextMonthArrow) {
     nextMonthArrow.setAttribute("aria-label", "Anno successivo");
 }
-export { setFlatpickrPosition as a, commonjsGlobal as c, flatpickr as f, it as i, setAriaOptions as s, validateDate as v };
+export { setFlatpickrPosition as a, flatpickr as f, it as i, setAriaOptions as s, validateDate as v };
 //# sourceMappingURL=utils2.js.map