@zanichelli/albe-web-components 18.3.0 → 18.3.1-rc1
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.
- package/dist/cjs/z-toast-notification.cjs.entry.js +7 -43
- package/dist/cjs/z-toast-notification.cjs.entry.js.map +1 -1
- package/dist/collection/components/z-toast-notification/index.js +7 -43
- package/dist/collection/components/z-toast-notification/index.js.map +1 -1
- package/dist/collection/components/z-toast-notification/index.stories.js +30 -2
- package/dist/collection/components/z-toast-notification/index.stories.js.map +1 -1
- package/dist/collection/components/z-toast-notification/styles.css +25 -34
- package/dist/components/z-toast-notification.js +8 -44
- package/dist/components/z-toast-notification.js.map +1 -1
- package/dist/esm/z-toast-notification.entry.js +8 -44
- package/dist/esm/z-toast-notification.entry.js.map +1 -1
- package/dist/types/components/z-toast-notification/index.d.ts +1 -10
- package/dist/types/components/z-toast-notification/index.stories.d.ts +10 -2
- package/dist/web-components-library/p-1dd6dff4.entry.js +7 -0
- package/dist/web-components-library/p-1dd6dff4.entry.js.map +1 -0
- package/dist/web-components-library/web-components-library.esm.js +1 -1
- package/package.json +1 -1
- package/www/build/p-1dd6dff4.entry.js +7 -0
- package/www/build/p-1dd6dff4.entry.js.map +1 -0
- package/www/build/{p-15ea6e9d.js → p-28efbaa8.js} +1 -1
- package/www/build/web-components-library.esm.js +1 -1
- package/www/index.html +1 -1
- package/dist/web-components-library/p-72c07bbd.entry.js +0 -7
- package/dist/web-components-library/p-72c07bbd.entry.js.map +0 -1
- package/www/build/p-72c07bbd.entry.js +0 -7
- package/www/build/p-72c07bbd.entry.js.map +0 -1
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-96af6326.js');
|
|
6
6
|
const index$1 = require('./index-4f18c0e2.js');
|
|
7
|
-
const breakpoints = require('./breakpoints-8a1e87e0.js');
|
|
8
7
|
|
|
9
8
|
var hammer = {exports: {}};
|
|
10
9
|
|
|
@@ -2656,7 +2655,7 @@ if (typeof undefined$1 === 'function' && undefined$1.amd) {
|
|
|
2656
2655
|
|
|
2657
2656
|
const Hammer = hammer.exports;
|
|
2658
2657
|
|
|
2659
|
-
const stylesCss = ":host{display:inline-block;width:100vw;min-width:200px;--percentuale:0}:host(.slide-in-left){animation:slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-right){animation:slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-down){animation:slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-up){animation:slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-left){animation:slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-right){animation:slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-down){animation:slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-up){animation:slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}@keyframes slideinleft{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes slideinright{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}@keyframes slideinup{0%{opacity:0;transform:translateY(100%)}100%{opacity:1;transform:translateY(0)}}@keyframes slideindown{0%{opacity:0;transform:translateY(-100%)}100%{opacity:1;transform:translateY(0)}}@keyframes slideoutleft{0%{opacity:calc(100% - var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;transform:translateX(-100%)}}@keyframes slideoutright{0%{opacity:calc(100% - var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;transform:translateX(100%)}}@keyframes slideoutup{0%{opacity:1;transform:translateY(var(--percentuale))}100%{opacity:0;transform:translateY(-100%)}}@keyframes slideoutdown{0%{opacity:1;transform:translateY(var(--percentuale))}100%{opacity:0;transform:translateY(100%)}}:host>#external-container{display:flex;box-sizing:border-box;
|
|
2658
|
+
const stylesCss = ":host{display:inline-block;width:100vw;min-width:200px;--percentuale:0}:host(.slide-in-left){animation:slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-right){animation:slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-down){animation:slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-up){animation:slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-left){animation:slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-right){animation:slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-down){animation:slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-up){animation:slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}@keyframes slideinleft{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes slideinright{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}@keyframes slideinup{0%{opacity:0;transform:translateY(100%)}100%{opacity:1;transform:translateY(0)}}@keyframes slideindown{0%{opacity:0;transform:translateY(-100%)}100%{opacity:1;transform:translateY(0)}}@keyframes slideoutleft{0%{opacity:calc(100% - var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;transform:translateX(-100%)}}@keyframes slideoutright{0%{opacity:calc(100% - var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;transform:translateX(100%)}}@keyframes slideoutup{0%{opacity:1;transform:translateY(var(--percentuale))}100%{opacity:0;transform:translateY(-100%)}}@keyframes slideoutdown{0%{opacity:1;transform:translateY(var(--percentuale))}100%{opacity:0;transform:translateY(100%)}}:host>#external-container{display:flex;min-height:calc(var(--space-unit) * 8.5);box-sizing:border-box;justify-content:space-between;padding:calc(var(--space-unit) * 2) 14px calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);border-radius:var(--border-size-large);box-shadow:var(--shadow-3);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px}:host>#external-container>#inner-container{display:flex;width:100%;flex-direction:column;justify-content:space-between}:host>#external-container #inner-container #text{padding:var(--space-unit) 0;color:var(--color-text-inverse);letter-spacing:0.16px;line-height:20px;text-align:start}:host>#external-container #inner-container #text>.title{margin-right:calc(var(--space-unit) / 2);font-weight:var(--font-sb)}:host>#external-container #inner-container ::slotted([slot=\"button\"]){margin-top:var(--space-unit)}:host>#external-container #icon{padding-top:var(--space-unit);margin:0 calc(var(--space-unit) / 4);cursor:pointer;fill:var(--color-inverse-icon)}:host>#external-container #icon:focus-within{margin:0}:host>#external-container #icon z-icon{margin:0 0 0 14px}:host>#external-container #icon z-icon:focus{display:inline-block;padding:calc(var(--space-unit) / 4);border-radius:50%;box-shadow:var(--shadow-focus-primary)}:host>#external-container.dark{background:var(--color-surface05)}:host>#external-container.light{background:var(--color-surface01)}:host>#external-container.light #icon{fill:var(--color-primary01-icon)}:host>#external-container.light #text,:host>#external-container.warning #text{color:var(--color-default-text)}:host>#external-container.accent{background:var(--color-primary01)}:host>#external-container.error{background:var(--color-default-error)}:host>#external-container.success{background:var(--color-default-success)}:host>#external-container.warning{background:var(--color-default-warning)}:host>#external-container.warning #icon{fill:var(--color-default-icon)}@media (min-width: 768px){:host{width:unset;max-width:50vw}:host>#external-container #inner-container{flex-direction:row}:host>#external-container #inner-container ::slotted([slot=\"button\"]){margin:0 0 0 calc(var(--space-unit) * 2)}}@media (min-width: 1366px){:host{max-width:33vw}}";
|
|
2660
2659
|
const ZToastNotificationStyle0 = stylesCss;
|
|
2661
2660
|
|
|
2662
2661
|
const ZToastNotification = class {
|
|
@@ -2704,12 +2703,10 @@ const ZToastNotification = class {
|
|
|
2704
2703
|
this.toastClose.emit();
|
|
2705
2704
|
}
|
|
2706
2705
|
componentWillLoad() {
|
|
2707
|
-
this.isMobile = window.innerWidth <= breakpoints.Breakpoints.MOBILE;
|
|
2708
2706
|
this.validateAutoclose();
|
|
2709
2707
|
this.percentage = 0;
|
|
2710
2708
|
}
|
|
2711
2709
|
componentDidLoad() {
|
|
2712
|
-
this.isTextLong = this.detectWrap() || this.toastText.offsetHeight > 20;
|
|
2713
2710
|
this.startTime = Date.now();
|
|
2714
2711
|
if (this.autoclose && this.pauseonfocusloss) {
|
|
2715
2712
|
document.addEventListener("visibilitychange", this.visibilityChangeEventHandler);
|
|
@@ -2790,56 +2787,23 @@ const ZToastNotification = class {
|
|
|
2790
2787
|
startClosingTimeout(time) {
|
|
2791
2788
|
this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass()), time);
|
|
2792
2789
|
}
|
|
2793
|
-
|
|
2794
|
-
|
|
2795
|
-
|
|
2796
|
-
let totalWidth = 0;
|
|
2797
|
-
for (let i = 0; i < children.length; i++) {
|
|
2798
|
-
totalWidth += children[i].offsetWidth;
|
|
2799
|
-
}
|
|
2800
|
-
return totalWidth > parentWidth;
|
|
2801
|
-
}
|
|
2802
|
-
renderText() {
|
|
2803
|
-
return (index.h("div", { id: "text", ref: (el) => (this.toastText = el) }, this.heading && index.h("span", { class: "title" }, this.heading), index.h("span", { class: "message" }, this.message)));
|
|
2804
|
-
}
|
|
2805
|
-
renderButton() {
|
|
2806
|
-
return (index.h("div", { id: "button" }, index.h("slot", { name: "button" })));
|
|
2807
|
-
}
|
|
2808
|
-
renderCloseIcon() {
|
|
2809
|
-
if (!this.closebutton) {
|
|
2810
|
-
return;
|
|
2811
|
-
}
|
|
2812
|
-
return (index.h("div", { id: "icon" }, index.h("z-icon", { tabIndex: 0, name: "multiply-circled", width: 15, height: 15, onClick: () => this.emitToastClose(this.mapSlideOutClass()), onKeyPress: (e) => {
|
|
2813
|
-
if (e.keyCode == 32 || e.keyCode == 13) {
|
|
2790
|
+
renderContent() {
|
|
2791
|
+
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" }, 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()), onKeyPress: (e) => {
|
|
2792
|
+
if (e.code == index$1.KeyboardCode.SPACE || e.code == index$1.KeyboardCode.ENTER) {
|
|
2814
2793
|
e.preventDefault();
|
|
2815
2794
|
this.emitToastClose(this.mapSlideOutClass());
|
|
2816
2795
|
}
|
|
2817
|
-
} })));
|
|
2818
|
-
}
|
|
2819
|
-
renderContainer() {
|
|
2820
|
-
return (index.h("div", { tabIndex: 0, id: "external-container", class: {
|
|
2821
|
-
[this.type]: !!this.type,
|
|
2822
|
-
"several-lines-padding": this.isTextLong,
|
|
2823
|
-
}, ref: (el) => (this.container = el) }, this.renderText(), this.renderButton(), this.renderCloseIcon()));
|
|
2824
|
-
}
|
|
2825
|
-
renderMobileContainer() {
|
|
2826
|
-
return (index.h("div", { id: "external-container", class: {
|
|
2827
|
-
[this.type]: !!this.type,
|
|
2828
|
-
"several-lines-padding": this.isTextLong,
|
|
2829
|
-
"mobile-wrapped": this.isTextLong,
|
|
2830
|
-
} }, index.h("div", { id: "flex-container", ref: (el) => (this.container = el) }, this.renderText(), this.renderButton()), this.renderCloseIcon()));
|
|
2796
|
+
} })))));
|
|
2831
2797
|
}
|
|
2832
2798
|
render() {
|
|
2833
|
-
return (index.h(index.Host, { key: '
|
|
2834
|
-
"--percentuale": `${this.percentage}%`,
|
|
2835
|
-
}, class: this.transition ? this.transition : index$1.ToastNotificationTransition.SLIDE_IN_DOWN, onAnimationEnd: (e) => {
|
|
2799
|
+
return (index.h(index.Host, { key: 'f9b4a2fe7d3642b1cbbe6f2e433ddbbde49568fd', style: { "--percentuale": `${this.percentage}%` }, class: this.transition ? this.transition : index$1.ToastNotificationTransition.SLIDE_IN_DOWN, onAnimationEnd: (e) => {
|
|
2836
2800
|
if (this.autoclose && e.animationName.includes("slidein")) {
|
|
2837
2801
|
this.startClosingTimeout(this.autoclose);
|
|
2838
2802
|
}
|
|
2839
2803
|
if (e.animationName.includes("slideout")) {
|
|
2840
2804
|
this.hostElement.parentNode.removeChild(this.hostElement);
|
|
2841
2805
|
}
|
|
2842
|
-
} }, this.
|
|
2806
|
+
} }, this.renderContent()));
|
|
2843
2807
|
}
|
|
2844
2808
|
get hostElement() { return index.getElement(this); }
|
|
2845
2809
|
static get watchers() { return {
|