@zanichelli/albe-web-components 18.3.1 → 18.3.3-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/CHANGELOG.md +0 -7
- package/dist/cjs/z-app-header_12.cjs.entry.js +2 -2
- package/dist/cjs/z-app-header_12.cjs.entry.js.map +1 -1
- package/dist/cjs/z-toast-notification.cjs.entry.js +43 -7
- package/dist/cjs/z-toast-notification.cjs.entry.js.map +1 -1
- package/dist/collection/components/z-input/index.js +2 -2
- package/dist/collection/components/z-input/index.js.map +1 -1
- package/dist/collection/components/z-input/index.stories.js +52 -48
- package/dist/collection/components/z-input/index.stories.js.map +1 -1
- package/dist/collection/components/z-toast-notification/index.js +43 -7
- package/dist/collection/components/z-toast-notification/index.js.map +1 -1
- package/dist/collection/components/z-toast-notification/index.stories.js +2 -30
- package/dist/collection/components/z-toast-notification/index.stories.js.map +1 -1
- package/dist/collection/components/z-toast-notification/styles.css +34 -25
- package/dist/components/index11.js +2 -2
- package/dist/components/index11.js.map +1 -1
- package/dist/components/z-toast-notification.js +44 -8
- package/dist/components/z-toast-notification.js.map +1 -1
- package/dist/esm/z-app-header_12.entry.js +2 -2
- package/dist/esm/z-app-header_12.entry.js.map +1 -1
- package/dist/esm/z-toast-notification.entry.js +44 -8
- package/dist/esm/z-toast-notification.entry.js.map +1 -1
- package/dist/types/components/z-toast-notification/index.d.ts +10 -1
- package/dist/types/components/z-toast-notification/index.stories.d.ts +2 -10
- package/dist/web-components-library/p-72c07bbd.entry.js +7 -0
- package/dist/web-components-library/p-72c07bbd.entry.js.map +1 -0
- package/{www/build/p-93150ae0.entry.js → dist/web-components-library/p-957d4244.entry.js} +2 -2
- package/{www/build/p-93150ae0.entry.js.map → dist/web-components-library/p-957d4244.entry.js.map} +1 -1
- package/dist/web-components-library/web-components-library.esm.js +1 -1
- package/package.json +1 -1
- package/www/build/{p-28efbaa8.js → p-0f3b0c17.js} +1 -1
- package/www/build/p-72c07bbd.entry.js +7 -0
- package/www/build/p-72c07bbd.entry.js.map +1 -0
- package/{dist/web-components-library/p-93150ae0.entry.js → www/build/p-957d4244.entry.js} +2 -2
- package/{dist/web-components-library/p-93150ae0.entry.js.map → www/build/p-957d4244.entry.js.map} +1 -1
- package/www/build/web-components-library.esm.js +1 -1
- package/www/index.html +1 -1
- package/dist/web-components-library/p-1dd6dff4.entry.js +0 -7
- package/dist/web-components-library/p-1dd6dff4.entry.js.map +0 -1
- package/www/build/p-1dd6dff4.entry.js +0 -7
- package/www/build/p-1dd6dff4.entry.js.map +0 -1
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-c8ceadeb.js';
|
|
2
|
-
import { r as ToastNotificationTransition
|
|
2
|
+
import { r as ToastNotificationTransition } from './index-fe87283d.js';
|
|
3
|
+
import { B as Breakpoints } from './breakpoints-d148bfde.js';
|
|
3
4
|
|
|
4
5
|
var hammer = {exports: {}};
|
|
5
6
|
|
|
@@ -2651,7 +2652,7 @@ if (typeof undefined$1 === 'function' && undefined$1.amd) {
|
|
|
2651
2652
|
|
|
2652
2653
|
const Hammer = hammer.exports;
|
|
2653
2654
|
|
|
2654
|
-
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;
|
|
2655
|
+
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;align-items:flex-start;justify-content:space-between;padding: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.mobile-wrapped>#icon{align-self:flex-start}:host>#external-container.several-lines-padding{padding:calc(var(--space-unit) * 2)}:host>#external-container>#flex-container{display:flex;width:100%;flex-wrap:wrap;align-items:center;justify-content:space-between}:host>#external-container #text{margin-right:calc(var(--space-unit) * 2);color:var(--color-text-inverse);letter-spacing:0.16px;line-height:20px;text-align:left}:host>#external-container #text>.title{margin-right:calc(var(--space-unit) / 2);font-weight:600}:host>#external-container.mobile-wrapped #button ::slotted(z-button){margin-top:calc(var(--space-unit) * 2)}:host>#external-container #icon{display:flex;height:20px;align-items:center;margin-left:calc(var(--space-unit) * 2);cursor:pointer;fill:var(--color-inverse-icon)}z-icon{display:inline-block;vertical-align:0}z-icon:focus{padding:calc(var(--space-unit) / 4);border-radius:50%;box-shadow:var(--shadow-focus-primary);outline:none !important}: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>#flex-container{flex-wrap:nowrap}:host>#external-container #text{width:100%}}@media (min-width: 1366px){:host{width:unset;max-width:33vw}}";
|
|
2655
2656
|
const ZToastNotificationStyle0 = stylesCss;
|
|
2656
2657
|
|
|
2657
2658
|
const ZToastNotification = class {
|
|
@@ -2699,10 +2700,12 @@ const ZToastNotification = class {
|
|
|
2699
2700
|
this.toastClose.emit();
|
|
2700
2701
|
}
|
|
2701
2702
|
componentWillLoad() {
|
|
2703
|
+
this.isMobile = window.innerWidth <= Breakpoints.MOBILE;
|
|
2702
2704
|
this.validateAutoclose();
|
|
2703
2705
|
this.percentage = 0;
|
|
2704
2706
|
}
|
|
2705
2707
|
componentDidLoad() {
|
|
2708
|
+
this.isTextLong = this.detectWrap() || this.toastText.offsetHeight > 20;
|
|
2706
2709
|
this.startTime = Date.now();
|
|
2707
2710
|
if (this.autoclose && this.pauseonfocusloss) {
|
|
2708
2711
|
document.addEventListener("visibilitychange", this.visibilityChangeEventHandler);
|
|
@@ -2783,23 +2786,56 @@ const ZToastNotification = class {
|
|
|
2783
2786
|
startClosingTimeout(time) {
|
|
2784
2787
|
this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass()), time);
|
|
2785
2788
|
}
|
|
2786
|
-
|
|
2787
|
-
|
|
2788
|
-
|
|
2789
|
+
detectWrap() {
|
|
2790
|
+
const parentWidth = this.container.offsetWidth;
|
|
2791
|
+
const children = this.container.children;
|
|
2792
|
+
let totalWidth = 0;
|
|
2793
|
+
for (let i = 0; i < children.length; i++) {
|
|
2794
|
+
totalWidth += children[i].offsetWidth;
|
|
2795
|
+
}
|
|
2796
|
+
return totalWidth > parentWidth;
|
|
2797
|
+
}
|
|
2798
|
+
renderText() {
|
|
2799
|
+
return (h("div", { id: "text", ref: (el) => (this.toastText = el) }, this.heading && h("span", { class: "title" }, this.heading), h("span", { class: "message" }, this.message)));
|
|
2800
|
+
}
|
|
2801
|
+
renderButton() {
|
|
2802
|
+
return (h("div", { id: "button" }, h("slot", { name: "button" })));
|
|
2803
|
+
}
|
|
2804
|
+
renderCloseIcon() {
|
|
2805
|
+
if (!this.closebutton) {
|
|
2806
|
+
return;
|
|
2807
|
+
}
|
|
2808
|
+
return (h("div", { id: "icon" }, h("z-icon", { tabIndex: 0, name: "multiply-circled", width: 15, height: 15, onClick: () => this.emitToastClose(this.mapSlideOutClass()), onKeyPress: (e) => {
|
|
2809
|
+
if (e.keyCode == 32 || e.keyCode == 13) {
|
|
2789
2810
|
e.preventDefault();
|
|
2790
2811
|
this.emitToastClose(this.mapSlideOutClass());
|
|
2791
2812
|
}
|
|
2792
|
-
} })))
|
|
2813
|
+
} })));
|
|
2814
|
+
}
|
|
2815
|
+
renderContainer() {
|
|
2816
|
+
return (h("div", { tabIndex: 0, id: "external-container", class: {
|
|
2817
|
+
[this.type]: !!this.type,
|
|
2818
|
+
"several-lines-padding": this.isTextLong,
|
|
2819
|
+
}, ref: (el) => (this.container = el) }, this.renderText(), this.renderButton(), this.renderCloseIcon()));
|
|
2820
|
+
}
|
|
2821
|
+
renderMobileContainer() {
|
|
2822
|
+
return (h("div", { id: "external-container", class: {
|
|
2823
|
+
[this.type]: !!this.type,
|
|
2824
|
+
"several-lines-padding": this.isTextLong,
|
|
2825
|
+
"mobile-wrapped": this.isTextLong,
|
|
2826
|
+
} }, h("div", { id: "flex-container", ref: (el) => (this.container = el) }, this.renderText(), this.renderButton()), this.renderCloseIcon()));
|
|
2793
2827
|
}
|
|
2794
2828
|
render() {
|
|
2795
|
-
return (h(Host, { key: '
|
|
2829
|
+
return (h(Host, { key: '1fcfaf1bf2d6d6701eabab75ef95d956e2886fb3', style: {
|
|
2830
|
+
"--percentuale": `${this.percentage}%`,
|
|
2831
|
+
}, class: this.transition ? this.transition : ToastNotificationTransition.SLIDE_IN_DOWN, onAnimationEnd: (e) => {
|
|
2796
2832
|
if (this.autoclose && e.animationName.includes("slidein")) {
|
|
2797
2833
|
this.startClosingTimeout(this.autoclose);
|
|
2798
2834
|
}
|
|
2799
2835
|
if (e.animationName.includes("slideout")) {
|
|
2800
2836
|
this.hostElement.parentNode.removeChild(this.hostElement);
|
|
2801
2837
|
}
|
|
2802
|
-
} }, this.
|
|
2838
|
+
} }, this.isMobile ? this.renderMobileContainer() : this.renderContainer()));
|
|
2803
2839
|
}
|
|
2804
2840
|
get hostElement() { return getElement(this); }
|
|
2805
2841
|
static get watchers() { return {
|