@zanichelli/albe-web-components 2.30.0-rc8 → 2.31.0-rc2

package/readme.md

@@ -1,236 +1,236 @@
-![Zanichelli logo](https://www.zanichelli.it/static/zanichelli/templates/zanichelli/_template_style/images/logo-print.png)
-
-# Zanichelli - Web Components Library
-
-Zanichelli's design system is widely documented on Zeroheight at this [link](https://zeroheight.com/485b31545).
-
-## Install
-
-```bash
-yarn add @zanichelli/albe-web-components
-```
-
-## Start Library Development Server
-```
-yarn start
-```
-
----
-
-## Create a component:
-
-```
-yarn generate component my-component
-```
-
-##### NB: component name must have a dash (`-`)
-
-----
-
-## Symlink Local Development
-
-#### Run
-
-```
-yarn link
-```
-
-#### In the destination project folder run
-
-```
-yarn link @zanichelli/albe-web-components
-```
-
-----
-
-## Tests
-
-#### Run all tests
-
-```
-yarn test
-```
-
-#### Run single test
-
-```
-yarn test --spec {componentPath}
-```
-
-#### Run e2e tests
-
-```
-yarn test.e2e
-```
-
-----
-
-## Release
-
-In this repository we follow the [Conventional Commits Specification](https://www.conventionalcommits.org/) and we use [standard-version](https://github.com/conventional-changelog/standard-version) to update the [CHANGELOG.md](./CHANGELOG.md) when publishing a new version of the package to NPM.
-
-Standard-version automatically detects the type of the update (patch, minor or major) following the [Semantic Versioning](https://semver.org/) specification.
-
-**Publish a new version on NPM registry**
-
-* Make sure you are logged in NPM
-* Run standard-version:
-
-```
-yarn release
-```
-
-**Specify a version**
-
-If you want to select a version or the update type, you can use the `--release-as` flag:
-
-```
-yarn release --release-as path
-yarn release --release-as 1.1.0
-```
-
-In general, you can pass any flag supported by standard-version, please refer to their [CLI usage](https://github.com/conventional-changelog/standard-version#cli-usage) documentation.
-
-**Publish the new release on GitHub**
-
-You need to [manually create the GitHub release](https://github.com/ZanichelliEditore/design-system/releases/new) in order to update the Storybook documentation.
-
-----
-
-## Documentation
-
-In order to correctly import Stencil Components into the Storybook, we need to build the library first. Stencil will generate properties documentation and it will store them in the `custom-elements.json` which is loaded by Storybook. At the moment, everytime you edit the library sources, you need to rebuild them to get the Storybook updated.
-
-#### Plugins
-
-* [@storybook/addon-a11y](https://www.npmjs.com/package/@storybook/addon-a11y)
-* [@storybook/addon-docs](https://www.npmjs.com/package/@storybook/addon-docs)
-* [@storybook/addon-knobs](https://www.npmjs.com/package/@storybook/addon-knobs)
-* [@storybook/addon-viewport](https://www.npmjs.com/package/@storybook/addon-viewport)
-* [storybook-addons-abstract](https://www.npmjs.com/package/storybook-addons-abstract)
-
-#### Start Storybook:
-
-```sh
-# Build the library
-yarn build
-# Start the Storybook
-yarn start-storybook
-```
-
-#### Build Storybook:
-
-```sh
-# Build the library
-yarn build
-# Build the Storybook
-yarn build-storybook
-```
-
-#### Developing with Storybook:
-
-Start the Stencil dev server:
-```sh
-yarn start
-```
-
-and, in a separate terminal window, run the Storybook:
-
-```sh
-yarn start-storybook
-```
-
-----
-
-## Build Library package
-```
-yarn build
-```
-
-# Environment Support
-
-- Modern browsers
-- Chromium Edge and Safari 10 with [polyfills](https://stackoverflow.com/questions/57020976/polyfills-in-2019-for-ie11)
-
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br> Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| > 16.16                                                                                                                                                                                                     | > 48                                                                                                                                                                                                            | > 69                                                                                                                                                                                                        | > 10.0                                                                                                                                                                                                        |
-
-## Usage
-
-### CSS Custom Properties
-
-The library provides a global css variables export. You can import the styles by ES6 import:
-
-```javascript
-import '@zanichelli/albe-web-components/www/build/web-components-library.css';
-```
-or via link tag:
-
-```html
-<link type="text/css" rel="stylesheet" href="https://unpkg.com/@zanichelli/albe-web-components/www/build/web-components-library.css" />
-```
-
-
-### Custom Elements
-
-You can use the library by importing the custom elements from npm package:
-
-```javascript
-import { defineCustomElements, applyPolyfills } from '@zanichelli/albe-web-components/loader';
-
-applyPolyfills().then(() => {
-  defineCustomElements(window);
-});
-```
-
-or via a script tag:
-
-```html
-<script src="https://unpkg.com/@zanichelli/albe-web-components/dist/web-components-library/web-components-library.esm.js"></script> 
-```
-
-Then use the relative tag as a usual component in your markup.
-
-```html
-<section>
-  <z-button label="button" type="primary">Click me!</z-button>
-</section>
-```
-
-### Using React bindings
-
-Albe's Web Components come with automatically generated React bindings. This means that you can use Web Components in a React application without the need to wrap component references, with full intellisense support thanks to TypeScript definition files for bindings.
-
-You still need to import and run polyfills, then you can import Component references from the React submodule:
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import '@zanichelli/albe-web-components/www/build/web-components-library.css';
-import { defineCustomElements, applyPolyfills } from '@zanichelli/albe-web-components/loader';
-import { ZButton } from '@zanichelli/albe-web-components/react';
-
-applyPolyfills().then(() => {
-  defineCustomElements(window);
-});
-
-ReactDOM.render(<ZButton>Click me</ZButton>, document.getElementById('root'));
-```
-
-## Component definition
-
-Each component is structured as follows:
-
-| File name       | Description                    |
-| --------------- | ------------------------------ |
-| `index-ts`      | Component markup and UI logics |
-| `styles.css`    | Component styles               |
-| `index.spec.ts` | Component tests                |
-| `index.stories.mdx` | Component storybook file                |
-| `README.md`     | Stencil documentation          |
-
-## Roadmap
-
-- 12 6 2020: Publishing repo v 1.0.0
-
+![Zanichelli logo](https://www.zanichelli.it/static/zanichelli/templates/zanichelli/_template_style/images/logo-print.png)
+
+# Zanichelli - Web Components Library
+
+Zanichelli's design system is widely documented on Zeroheight at this [link](https://zeroheight.com/485b31545).
+
+## Install
+
+```bash
+yarn add @zanichelli/albe-web-components
+```
+
+## Start Library Development Server
+```
+yarn start
+```
+
+---
+
+## Create a component:
+
+```
+yarn generate component my-component
+```
+
+##### NB: component name must have a dash (`-`)
+
+----
+
+## Symlink Local Development
+
+#### Run
+
+```
+yarn link
+```
+
+#### In the destination project folder run
+
+```
+yarn link @zanichelli/albe-web-components
+```
+
+----
+
+## Tests
+
+#### Run all tests
+
+```
+yarn test
+```
+
+#### Run single test
+
+```
+yarn test --spec {componentPath}
+```
+
+#### Run e2e tests
+
+```
+yarn test.e2e
+```
+
+----
+
+## Release
+
+In this repository we follow the [Conventional Commits Specification](https://www.conventionalcommits.org/) and we use [standard-version](https://github.com/conventional-changelog/standard-version) to update the [CHANGELOG.md](./CHANGELOG.md) when publishing a new version of the package to NPM.
+
+Standard-version automatically detects the type of the update (patch, minor or major) following the [Semantic Versioning](https://semver.org/) specification.
+
+**Publish a new version on NPM registry**
+
+* Make sure you are logged in NPM
+* Run standard-version:
+
+```
+yarn release
+```
+
+**Specify a version**
+
+If you want to select a version or the update type, you can use the `--release-as` flag:
+
+```
+yarn release --release-as path
+yarn release --release-as 1.1.0
+```
+
+In general, you can pass any flag supported by standard-version, please refer to their [CLI usage](https://github.com/conventional-changelog/standard-version#cli-usage) documentation.
+
+**Publish the new release on GitHub**
+
+You need to [manually create the GitHub release](https://github.com/ZanichelliEditore/design-system/releases/new) in order to update the Storybook documentation.
+
+----
+
+## Documentation
+
+In order to correctly import Stencil Components into the Storybook, we need to build the library first. Stencil will generate properties documentation and it will store them in the `custom-elements.json` which is loaded by Storybook. At the moment, everytime you edit the library sources, you need to rebuild them to get the Storybook updated.
+
+#### Plugins
+
+* [@storybook/addon-a11y](https://www.npmjs.com/package/@storybook/addon-a11y)
+* [@storybook/addon-docs](https://www.npmjs.com/package/@storybook/addon-docs)
+* [@storybook/addon-knobs](https://www.npmjs.com/package/@storybook/addon-knobs)
+* [@storybook/addon-viewport](https://www.npmjs.com/package/@storybook/addon-viewport)
+* [storybook-addons-abstract](https://www.npmjs.com/package/storybook-addons-abstract)
+
+#### Start Storybook:
+
+```sh
+# Build the library
+yarn build
+# Start the Storybook
+yarn start-storybook
+```
+
+#### Build Storybook:
+
+```sh
+# Build the library
+yarn build
+# Build the Storybook
+yarn build-storybook
+```
+
+#### Developing with Storybook:
+
+Start the Stencil dev server:
+```sh
+yarn start
+```
+
+and, in a separate terminal window, run the Storybook:
+
+```sh
+yarn start-storybook
+```
+
+----
+
+## Build Library package
+```
+yarn build
+```
+
+# Environment Support
+
+- Modern browsers
+- Chromium Edge and Safari 10 with [polyfills](https://stackoverflow.com/questions/57020976/polyfills-in-2019-for-ie11)
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br> Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| > 16.16                                                                                                                                                                                                     | > 48                                                                                                                                                                                                            | > 69                                                                                                                                                                                                        | > 10.0                                                                                                                                                                                                        |
+
+## Usage
+
+### CSS Custom Properties
+
+The library provides a global css variables export. You can import the styles by ES6 import:
+
+```javascript
+import '@zanichelli/albe-web-components/www/build/web-components-library.css';
+```
+or via link tag:
+
+```html
+<link type="text/css" rel="stylesheet" href="https://unpkg.com/@zanichelli/albe-web-components/www/build/web-components-library.css" />
+```
+
+
+### Custom Elements
+
+You can use the library by importing the custom elements from npm package:
+
+```javascript
+import { defineCustomElements, applyPolyfills } from '@zanichelli/albe-web-components/loader';
+
+applyPolyfills().then(() => {
+  defineCustomElements(window);
+});
+```
+
+or via a script tag:
+
+```html
+<script src="https://unpkg.com/@zanichelli/albe-web-components/dist/web-components-library/web-components-library.esm.js"></script> 
+```
+
+Then use the relative tag as a usual component in your markup.
+
+```html
+<section>
+  <z-button label="button" type="primary">Click me!</z-button>
+</section>
+```
+
+### Using React bindings
+
+Albe's Web Components come with automatically generated React bindings. This means that you can use Web Components in a React application without the need to wrap component references, with full intellisense support thanks to TypeScript definition files for bindings.
+
+You still need to import and run polyfills, then you can import Component references from the React submodule:
+
+```javascript
+import React from 'react';
+import ReactDOM from 'react-dom';
+import '@zanichelli/albe-web-components/www/build/web-components-library.css';
+import { defineCustomElements, applyPolyfills } from '@zanichelli/albe-web-components/loader';
+import { ZButton } from '@zanichelli/albe-web-components/react';
+
+applyPolyfills().then(() => {
+  defineCustomElements(window);
+});
+
+ReactDOM.render(<ZButton>Click me</ZButton>, document.getElementById('root'));
+```
+
+## Component definition
+
+Each component is structured as follows:
+
+| File name       | Description                    |
+| --------------- | ------------------------------ |
+| `index-ts`      | Component markup and UI logics |
+| `styles.css`    | Component styles               |
+| `index.spec.ts` | Component tests                |
+| `index.stories.mdx` | Component storybook file                |
+| `README.md`     | Stencil documentation          |
+
+## Roadmap
+
+- 12 6 2020: Publishing repo v 1.0.0
+

package/www/build/index.esm.js

@@ -1 +1 @@
-import{c as o}from"./p-e7304c42.js";import"./p-d63b9ed3.js";import"./p-d69e14fb.js";const p={colorFromId:o};export{p as Utils}
+import{c as o}from"./p-f53af59a.js";import"./p-acdb443b.js";import"./p-e35d3552.js";const p={colorFromId:o};export{p as Utils}

package/www/build/{p-35b1f338.entry.js → p-21ffb0b5.entry.js}

@@ -1 +1 @@
-import{r as t,c as e,h as i,H as s,g as a}from"./p-904a85e4.js";import{s as n}from"./p-d63b9ed3.js";import{m as r}from"./p-d69e14fb.js";import{h as o}from"./p-9912e411.js";const l=class{constructor(i){t(this,i),this.toastClose=e(this,"toastClose",7),this.pauseonfocusloss=!0,this.isdraggable=!0,this.draggablepercentage=80,this.isCloseEventCalled=!1,this.visibilityChangeEventHandler=()=>{"hidden"===document.visibilityState?this.timeoutHandle&&this.onBlur():this.elapsedTime&&this.onFocus()}}watchPropIsdraggable(t){t?this.sliderManager.get("pan").set({enable:!0}):this.sliderManager.get("pan").set({enable:!1})}watchPropAutoclose(t){clearTimeout(this.timeoutHandle),this.startClosingTimeout(t)}watchPropPauseonfocusloss(t){this.autoclose&&(t?document.addEventListener("visibilitychange",this.visibilityChangeEventHandler):document.removeEventListener("visibilitychange",this.visibilityChangeEventHandler))}emitToastClose(t){this.timeoutHandle=null,this.elapsedTime=null,this.hostElement.classList.add(t),this.toastClose.emit()}componentWillLoad(){this.isMobile=window.innerWidth<=r,this.validateAutoclose()}componentDidLoad(){this.isTextLong=this.detectWrap()||this.toastText.offsetHeight>20,this.startTime=Date.now(),this.autoclose&&this.pauseonfocusloss&&document.addEventListener("visibilitychange",this.visibilityChangeEventHandler),this.isdraggable&&this.handleSlideOutDragAnimation(),this.percentage=0}validateAutoclose(){this.autoclose||this.closebutton||console.error("At least one between autoclose and closebutton must be present")}mapSlideOutClass(){switch(this.transition){case n.slideInDown:return n.slideOutUp;case n.slideInUp:return n.slideOutDown;case n.slideInLeft:return n.slideOutRight;case n.slideInRight:return n.slideOutLeft}}calculateDraggedPercentage(t){const e=this.hostElement.getBoundingClientRect();return Math.round(100*t.deltaX/e.width)}handleSlideOutDragAnimation(){this.sliderManager=new o(this.hostElement),this.sliderManager.get("pan").set({direction:o.DIRECTION_HORIZONTAL}),this.sliderManager.on("pan",(t=>{this.percentage=this.calculateDraggedPercentage(t),this.hostElement.style.transition="none",this.hostElement.classList.remove(this.transition);const e={translate:"translateX( "+this.percentage+"% )",translateBack:"translateX(0)"};this.hostElement.style.opacity=100-Math.abs(this.percentage)+"%",t.eventType!==o.DIRECTION_LEFT&&t.eventType!==o.DIRECTION_RIGHT||(this.hostElement.style.transform=e.translate,Math.abs(this.percentage)>this.draggablepercentage&&!this.isCloseEventCalled&&(this.isCloseEventCalled=!0,this.emitToastClose(t.direction===o.DIRECTION_LEFT?"slide-out-left":"slide-out-right"))),t.isFinal&&Math.abs(this.percentage)<this.draggablepercentage&&(this.hostElement.style.transform=e.translateBack,this.hostElement.style.transition="all 1s",this.hostElement.style.opacity="100%",this.percentage=0)}))}onFocus(){let t;t=this.autoclose,this.elapsedTime&&(t=this.autoclose-this.elapsedTime),t>0&&this.startClosingTimeout(t)}onBlur(){this.elapsedTime=Date.now()-this.startTime,clearTimeout(this.timeoutHandle)}startClosingTimeout(t){this.timeoutHandle=setTimeout((()=>this.emitToastClose(this.mapSlideOutClass())),t)}detectWrap(){const t=this.container.offsetWidth,e=this.container.children;let i=0;for(let t=0;t<e.length;t++)i+=e[t].offsetWidth;return i>t}renderText(){return i("div",{id:"text",ref:t=>this.toastText=t},i("span",{class:"title"},this.heading),i("span",{class:"message"},this.message))}renderButton(){return i("div",{id:"button"},i("slot",{name:"button"}))}renderCloseIcon(){return this.closebutton&&i("div",{id:"icon"},i("z-icon",{tabIndex:0,name:"multiply-circled",width:15,height:15,onClick:()=>this.emitToastClose(this.mapSlideOutClass()),onKeyPress:t=>{32!=t.keyCode&&13!=t.keyCode||(t.preventDefault(),this.emitToastClose(this.mapSlideOutClass()))}}))}renderContainer(){return i("div",{tabIndex:0,id:"external-container",class:{[this.type]:!!this.type,"several-lines-padding":this.isTextLong},ref:t=>this.container=t},this.renderText(),this.renderButton(),this.renderCloseIcon())}renderMobileContainer(){return i("div",{id:"external-container",class:{[this.type]:!!this.type,"several-lines-padding":this.isTextLong,"mobile-wrapped":this.isTextLong}},i("div",{id:"flex-container",ref:t=>this.container=t},this.renderText(),this.renderButton()),this.renderCloseIcon())}render(){return i(s,{style:{"--percentuale":`${this.percentage}%`},class:this.transition?this.transition:n.slideInDown,onAnimationEnd:t=>{this.autoclose&&t.animationName.includes("slidein")&&this.startClosingTimeout(this.autoclose),t.animationName.includes("slideout")&&this.hostElement.parentNode.removeChild(this.hostElement)}},this.isMobile?this.renderMobileContainer():this.renderContainer())}get hostElement(){return a(this)}static get watchers(){return{isdraggable:["watchPropIsdraggable"],autoclose:["watchPropAutoclose"],pauseonfocusloss:["watchPropPauseonfocusloss"]}}};l.style=":host{display:inline-block;min-width:200px;width:100vw}: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%{transform:translateY(100%);opacity:0}100%{transform:translateY(0);opacity:100%}}@keyframes slideindown{0%{transform:translateY(-100%);opacity:0}100%{transform:translateY(0);opacity:100%}}@keyframes slideoutleft{0%{transform:translateX(var(--percentuale));opacity:calc(100-var(--percentuale))}100%{transform:translateX(-100%);opacity:0%}}@keyframes slideoutright{0%{transform:translateX(var(--percentuale));opacity:calc(100-var(--percentuale))}100%{transform:translateX(100%);opacity:0%}}@keyframes slideoutup{0%{transform:translateY(var(--percentuale));opacity:100%}100%{transform:translateY(-100%);opacity:0}}@keyframes slideoutdown{0%{transform:translateY(var(--percentuale));opacity:100%}100%{transform:translateY(100%);opacity:0}}:host>#external-container{font-family:var(--font-family-sans);font-weight:var(--font-rg);border-radius:4px;font-size:14px;letter-spacing:0.16px;box-sizing:border-box;min-height:52px;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow-3)}: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;flex-wrap:wrap;align-items:center;justify-content:space-between;width:100%}:host>#external-container #text{color:var(--color-white);line-height:20px;margin-right:calc(var(--space-unit) * 2);letter-spacing:0.16px;text-align:left}:host>#external-container #text>.title{margin-right:4px;font-weight:600}:host>#external-container.mobile-wrapped #button ::slotted(z-button){margin-top:calc(var(--space-unit) * 2)}:host>#external-container #icon{cursor:pointer;fill:var(--color-white);margin-left:calc(var(--space-unit) * 2)}:host>#external-container.dark{background:var(--gray800)}:host>#external-container.light{background:var(--color-background)}:host>#external-container.light #icon,:host>#external-container.warning #text,:host>#external-container.warning #icon{fill:var(--color-icon01)}:host>#external-container.light #text,:host>#external-container.warning #text{color:var(--grey800)}:host>#external-container.accent{background:var(--color-primary01)}:host>#external-container.error{background:var(--color-error-default)}:host>#external-container.success{background:var(--color-success-default)}:host>#external-container.warning{background:var(--color-warning-default)}@media only screen and (min-width: 768px){:host{width:unset;max-width:50vw}:host>#external-container>#flex-container{flex-wrap:nowrap}:host>#external-container #text{width:100%}}@media only screen and (min-width: 1366px){:host{width:unset;max-width:33vw}}";export{l as z_toast_notification}
+import{r as t,c as e,h as i,H as a,g as s}from"./p-904a85e4.js";import{s as n}from"./p-acdb443b.js";import{m as r}from"./p-e35d3552.js";import{h as o}from"./p-9912e411.js";const l=class{constructor(i){t(this,i),this.toastClose=e(this,"toastClose",7),this.pauseonfocusloss=!0,this.isdraggable=!0,this.draggablepercentage=80,this.isCloseEventCalled=!1,this.visibilityChangeEventHandler=()=>{"hidden"===document.visibilityState?this.timeoutHandle&&this.onBlur():this.elapsedTime&&this.onFocus()}}watchPropIsdraggable(t){t?this.sliderManager.get("pan").set({enable:!0}):this.sliderManager.get("pan").set({enable:!1})}watchPropAutoclose(t){clearTimeout(this.timeoutHandle),this.startClosingTimeout(t)}watchPropPauseonfocusloss(t){this.autoclose&&(t?document.addEventListener("visibilitychange",this.visibilityChangeEventHandler):document.removeEventListener("visibilitychange",this.visibilityChangeEventHandler))}emitToastClose(t){this.timeoutHandle=null,this.elapsedTime=null,this.hostElement.classList.add(t),this.toastClose.emit()}componentWillLoad(){this.isMobile=window.innerWidth<=r,this.validateAutoclose()}componentDidLoad(){this.isTextLong=this.detectWrap()||this.toastText.offsetHeight>20,this.startTime=Date.now(),this.autoclose&&this.pauseonfocusloss&&document.addEventListener("visibilitychange",this.visibilityChangeEventHandler),this.isdraggable&&this.handleSlideOutDragAnimation(),this.percentage=0}validateAutoclose(){this.autoclose||this.closebutton||console.error("At least one between autoclose and closebutton must be present")}mapSlideOutClass(){switch(this.transition){case n.slideInDown:return n.slideOutUp;case n.slideInUp:return n.slideOutDown;case n.slideInLeft:return n.slideOutRight;case n.slideInRight:return n.slideOutLeft}}calculateDraggedPercentage(t){const e=this.hostElement.getBoundingClientRect();return Math.round(100*t.deltaX/e.width)}handleSlideOutDragAnimation(){this.sliderManager=new o(this.hostElement),this.sliderManager.get("pan").set({direction:o.DIRECTION_HORIZONTAL}),this.sliderManager.on("pan",(t=>{this.percentage=this.calculateDraggedPercentage(t),this.hostElement.style.transition="none",this.hostElement.classList.remove(this.transition);const e={translate:"translateX( "+this.percentage+"% )",translateBack:"translateX(0)"};this.hostElement.style.opacity=100-Math.abs(this.percentage)+"%",t.eventType!==o.DIRECTION_LEFT&&t.eventType!==o.DIRECTION_RIGHT||(this.hostElement.style.transform=e.translate,Math.abs(this.percentage)>this.draggablepercentage&&!this.isCloseEventCalled&&(this.isCloseEventCalled=!0,this.emitToastClose(t.direction===o.DIRECTION_LEFT?"slide-out-left":"slide-out-right"))),t.isFinal&&Math.abs(this.percentage)<this.draggablepercentage&&(this.hostElement.style.transform=e.translateBack,this.hostElement.style.transition="all 1s",this.hostElement.style.opacity="100%",this.percentage=0)}))}onFocus(){let t;t=this.autoclose,this.elapsedTime&&(t=this.autoclose-this.elapsedTime),t>0&&this.startClosingTimeout(t)}onBlur(){this.elapsedTime=Date.now()-this.startTime,clearTimeout(this.timeoutHandle)}startClosingTimeout(t){this.timeoutHandle=setTimeout((()=>this.emitToastClose(this.mapSlideOutClass())),t)}detectWrap(){const t=this.container.offsetWidth,e=this.container.children;let i=0;for(let t=0;t<e.length;t++)i+=e[t].offsetWidth;return i>t}renderText(){return i("div",{id:"text",ref:t=>this.toastText=t},i("span",{class:"title"},this.heading),i("span",{class:"message"},this.message))}renderButton(){return i("div",{id:"button"},i("slot",{name:"button"}))}renderCloseIcon(){return this.closebutton&&i("div",{id:"icon"},i("z-icon",{tabIndex:0,name:"multiply-circled",width:15,height:15,onClick:()=>this.emitToastClose(this.mapSlideOutClass()),onKeyPress:t=>{32!=t.keyCode&&13!=t.keyCode||(t.preventDefault(),this.emitToastClose(this.mapSlideOutClass()))}}))}renderContainer(){return i("div",{tabIndex:0,id:"external-container",class:{[this.type]:!!this.type,"several-lines-padding":this.isTextLong},ref:t=>this.container=t},this.renderText(),this.renderButton(),this.renderCloseIcon())}renderMobileContainer(){return i("div",{id:"external-container",class:{[this.type]:!!this.type,"several-lines-padding":this.isTextLong,"mobile-wrapped":this.isTextLong}},i("div",{id:"flex-container",ref:t=>this.container=t},this.renderText(),this.renderButton()),this.renderCloseIcon())}render(){return i(a,{style:{"--percentuale":`${this.percentage}%`},class:this.transition?this.transition:n.slideInDown,onAnimationEnd:t=>{this.autoclose&&t.animationName.includes("slidein")&&this.startClosingTimeout(this.autoclose),t.animationName.includes("slideout")&&this.hostElement.parentNode.removeChild(this.hostElement)}},this.isMobile?this.renderMobileContainer():this.renderContainer())}get hostElement(){return s(this)}static get watchers(){return{isdraggable:["watchPropIsdraggable"],autoclose:["watchPropAutoclose"],pauseonfocusloss:["watchPropPauseonfocusloss"]}}};l.style=":host{display:inline-block;min-width:200px;width:100vw}: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%{transform:translateY(100%);opacity:0}100%{transform:translateY(0);opacity:100%}}@keyframes slideindown{0%{transform:translateY(-100%);opacity:0}100%{transform:translateY(0);opacity:100%}}@keyframes slideoutleft{0%{transform:translateX(var(--percentuale));opacity:calc(100-var(--percentuale))}100%{transform:translateX(-100%);opacity:0%}}@keyframes slideoutright{0%{transform:translateX(var(--percentuale));opacity:calc(100-var(--percentuale))}100%{transform:translateX(100%);opacity:0%}}@keyframes slideoutup{0%{transform:translateY(var(--percentuale));opacity:100%}100%{transform:translateY(-100%);opacity:0}}@keyframes slideoutdown{0%{transform:translateY(var(--percentuale));opacity:100%}100%{transform:translateY(100%);opacity:0}}:host>#external-container{font-family:var(--font-family-sans);font-weight:var(--font-rg);border-radius:4px;font-size:14px;letter-spacing:0.16px;box-sizing:border-box;min-height:52px;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow-3)}: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;flex-wrap:wrap;align-items:center;justify-content:space-between;width:100%}:host>#external-container #text{color:var(--color-white);line-height:20px;margin-right:calc(var(--space-unit) * 2);letter-spacing:0.16px;text-align:left}:host>#external-container #text>.title{margin-right:4px;font-weight:600}:host>#external-container.mobile-wrapped #button ::slotted(z-button){margin-top:calc(var(--space-unit) * 2)}:host>#external-container #icon{cursor:pointer;fill:var(--color-white);margin-left:calc(var(--space-unit) * 2)}:host>#external-container.dark{background:var(--gray800)}:host>#external-container.light{background:var(--color-background)}:host>#external-container.light #icon,:host>#external-container.warning #text,:host>#external-container.warning #icon{fill:var(--color-icon01)}:host>#external-container.light #text,:host>#external-container.warning #text{color:var(--grey800)}:host>#external-container.accent{background:var(--color-primary01)}:host>#external-container.error{background:var(--color-error-default)}:host>#external-container.success{background:var(--color-success-default)}:host>#external-container.warning{background:var(--color-warning-default)}@media only screen and (min-width: 768px){:host{width:unset;max-width:50vw}:host>#external-container>#flex-container{flex-wrap:nowrap}:host>#external-container #text{width:100%}}@media only screen and (min-width: 1366px){:host{width:unset;max-width:33vw}}";export{l as z_toast_notification}