@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
|
@@ -4,6 +4,7 @@ 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');
|
|
7
8
|
|
|
8
9
|
var hammer = {exports: {}};
|
|
9
10
|
|
|
@@ -2655,7 +2656,7 @@ if (typeof undefined$1 === 'function' && undefined$1.amd) {
|
|
|
2655
2656
|
|
|
2656
2657
|
const Hammer = hammer.exports;
|
|
2657
2658
|
|
|
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;
|
|
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;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}}";
|
|
2659
2660
|
const ZToastNotificationStyle0 = stylesCss;
|
|
2660
2661
|
|
|
2661
2662
|
const ZToastNotification = class {
|
|
@@ -2703,10 +2704,12 @@ const ZToastNotification = class {
|
|
|
2703
2704
|
this.toastClose.emit();
|
|
2704
2705
|
}
|
|
2705
2706
|
componentWillLoad() {
|
|
2707
|
+
this.isMobile = window.innerWidth <= breakpoints.Breakpoints.MOBILE;
|
|
2706
2708
|
this.validateAutoclose();
|
|
2707
2709
|
this.percentage = 0;
|
|
2708
2710
|
}
|
|
2709
2711
|
componentDidLoad() {
|
|
2712
|
+
this.isTextLong = this.detectWrap() || this.toastText.offsetHeight > 20;
|
|
2710
2713
|
this.startTime = Date.now();
|
|
2711
2714
|
if (this.autoclose && this.pauseonfocusloss) {
|
|
2712
2715
|
document.addEventListener("visibilitychange", this.visibilityChangeEventHandler);
|
|
@@ -2787,23 +2790,56 @@ const ZToastNotification = class {
|
|
|
2787
2790
|
startClosingTimeout(time) {
|
|
2788
2791
|
this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass()), time);
|
|
2789
2792
|
}
|
|
2790
|
-
|
|
2791
|
-
|
|
2792
|
-
|
|
2793
|
+
detectWrap() {
|
|
2794
|
+
const parentWidth = this.container.offsetWidth;
|
|
2795
|
+
const children = this.container.children;
|
|
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) {
|
|
2793
2814
|
e.preventDefault();
|
|
2794
2815
|
this.emitToastClose(this.mapSlideOutClass());
|
|
2795
2816
|
}
|
|
2796
|
-
} })))
|
|
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()));
|
|
2797
2831
|
}
|
|
2798
2832
|
render() {
|
|
2799
|
-
return (index.h(index.Host, { key: '
|
|
2833
|
+
return (index.h(index.Host, { key: '1fcfaf1bf2d6d6701eabab75ef95d956e2886fb3', style: {
|
|
2834
|
+
"--percentuale": `${this.percentage}%`,
|
|
2835
|
+
}, class: this.transition ? this.transition : index$1.ToastNotificationTransition.SLIDE_IN_DOWN, onAnimationEnd: (e) => {
|
|
2800
2836
|
if (this.autoclose && e.animationName.includes("slidein")) {
|
|
2801
2837
|
this.startClosingTimeout(this.autoclose);
|
|
2802
2838
|
}
|
|
2803
2839
|
if (e.animationName.includes("slideout")) {
|
|
2804
2840
|
this.hostElement.parentNode.removeChild(this.hostElement);
|
|
2805
2841
|
}
|
|
2806
|
-
} }, this.
|
|
2842
|
+
} }, this.isMobile ? this.renderMobileContainer() : this.renderContainer()));
|
|
2807
2843
|
}
|
|
2808
2844
|
get hostElement() { return index.getElement(this); }
|
|
2809
2845
|
static get watchers() { return {
|