@zanichelli/albe-web-components 7.0.0 → 7.1.1

package/readme.md

@@ -1,281 +1,281 @@
-![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
-```
-
----
-
-## Linting and autofixing of the code style
-
-There are some tools installed to help keeping uniformity of code style:
-
-- [Eslint](https://eslint.org/)
-- [Stylelint](https://stylelint.io/)
-- [Prettier](https://prettier.io/)
-
-> Install the related official extensions in your IDE to get live errors and warning while coding.
-
-### Run lint checks and auto-fix
-
-#### Prettier check
-
-```sh
-yarn prettier-check
-```
-
-#### Prettier auto-format
-
-```sh
-yarn prettify
-```
-
-#### TypeScript lint check
-
-```sh
-yarn lint.eslint
-```
-
-#### CSS lint check
-
-```sh
-yarn lint.stylelint
-```
-
-#### TypeScript auto-fix
-
-```sh
-yarn lint-fix.eslint
-```
-
-#### CSS auto-fix
-
-```sh
-yarn lint-fix.stylelint
-```
-
-## 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
-- Make sure you built the components with `yarn build`
-- 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.
-
----
-
-#### Plugins
-
-- [storybook-addon-stencil](https://github.com/ZanichelliEditore/storybook-addon-stencil) - custom Storybook plugin for Stencil
-- [@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)
-
-### Start Storybook:
-
-```sh
-# Start Storybook
-yarn start-storybook
-```
-
-local development with Storybook comes with live reloading.
-
-### Build Storybook:
-
-```sh
-# Build the library
-yarn build
-# Build Storybook
-yarn build-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
-// using jsDelivr
-<link
-  type="text/css"
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@zanichelli/albe-web-components/www/build/web-components-library.css"
-/>
-
-// using unpkg
-<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
-// using jsDelivr
-<script src="https://cdn.jsdelivr.net/npm/@zanichelli/albe-web-components/dist/web-components-library/web-components-library.esm.js"></script>
-
-// using unpkg
-<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 variant="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.tsx`         | Component markup and UI logics |
-| `styles.css`        | Component styles               |
-| `index.spec.ts`     | Component tests                |
-| `index.stories.mdx` | Component storybook file       |
-| `README.md`         | Component documentation        |
+![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
+```
+
+---
+
+## Linting and autofixing of the code style
+
+There are some tools installed to help keeping uniformity of code style:
+
+- [Eslint](https://eslint.org/)
+- [Stylelint](https://stylelint.io/)
+- [Prettier](https://prettier.io/)
+
+> Install the related official extensions in your IDE to get live errors and warning while coding.
+
+### Run lint checks and auto-fix
+
+#### Prettier check
+
+```sh
+yarn prettier-check
+```
+
+#### Prettier auto-format
+
+```sh
+yarn prettify
+```
+
+#### TypeScript lint check
+
+```sh
+yarn lint.eslint
+```
+
+#### CSS lint check
+
+```sh
+yarn lint.stylelint
+```
+
+#### TypeScript auto-fix
+
+```sh
+yarn lint-fix.eslint
+```
+
+#### CSS auto-fix
+
+```sh
+yarn lint-fix.stylelint
+```
+
+## 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
+- Make sure you built the components with `yarn build`
+- 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.
+
+---
+
+#### Plugins
+
+- [storybook-addon-stencil](https://github.com/ZanichelliEditore/storybook-addon-stencil) - custom Storybook plugin for Stencil
+- [@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)
+
+### Start Storybook:
+
+```sh
+# Start Storybook
+yarn start-storybook
+```
+
+local development with Storybook comes with live reloading.
+
+### Build Storybook:
+
+```sh
+# Build the library
+yarn build
+# Build Storybook
+yarn build-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
+// using jsDelivr
+<link
+  type="text/css"
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@zanichelli/albe-web-components/www/build/web-components-library.css"
+/>
+
+// using unpkg
+<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
+// using jsDelivr
+<script src="https://cdn.jsdelivr.net/npm/@zanichelli/albe-web-components/dist/web-components-library/web-components-library.esm.js"></script>
+
+// using unpkg
+<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 variant="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.tsx`         | Component markup and UI logics |
+| `styles.css`        | Component styles               |
+| `index.spec.ts`     | Component tests                |
+| `index.stories.mdx` | Component storybook file       |
+| `README.md`         | Component documentation        |

package/src-react/index.ts

@@ -0,0 +1 @@
+export * from "./components";

package/www/build/index.esm.js

@@ -1 +1 @@
-import{c as V}from"./p-925fcf33.js";export{o as AlertType,A as AvatarSize,c as ButtonSize,b as ButtonType,B as ButtonVariant,C as CardVariant,R as CarouselArrowsPosition,U as CarouselProgressMode,d as ControlSize,Q as CoverHeroContentPosition,M as CoverHeroVariant,p as Device,g as DividerOrientation,D as DividerSize,j as ExpandableListButtonAlign,E as ExpandableListStyle,J as InfoRevealPosition,e as InputStatus,I as InputType,f as KeyboardCode,K as KeyboardKeyCode,k as LabelPosition,L as LicenseType,l as ListDividerType,h as ListSize,m as ListType,N as NavigationTabsOrientation,a as NavigationTabsSize,n as NotificationType,O as OffCanvasVariant,q as PocketStatus,P as PopoverPosition,i as Size,S as SortDirection,T as ThemeVariant,r as ToastNotification,t as ToastNotificationPosition,s as ToastNotificationTransition,v as TransitionDirection,u as ZAriaAlertMode,x as ZChipType,z as ZDatePickerMode,F as ZDatePickerModeValue,G as ZDatePickerPosition,w as ZFileUploadType,H as ZRangePickerMode,y as ZSectionTitleDividerPosition,Z as ZTableRowExpandedType}from"./p-dfed050d.js";import"./p-e35d3552.js";const W={colorFromId:V};export{W as Utils}
+import{c as V}from"./p-dfc69cc3.js";export{o as AlertType,A as AvatarSize,c as ButtonSize,b as ButtonType,B as ButtonVariant,C as CardVariant,R as CarouselArrowsPosition,U as CarouselProgressMode,d as ControlSize,Q as CoverHeroContentPosition,M as CoverHeroVariant,p as Device,g as DividerOrientation,D as DividerSize,j as ExpandableListButtonAlign,E as ExpandableListStyle,J as InfoRevealPosition,e as InputStatus,I as InputType,f as KeyboardCode,K as KeyboardKeyCode,k as LabelPosition,L as LicenseType,l as ListDividerType,h as ListSize,m as ListType,N as NavigationTabsOrientation,a as NavigationTabsSize,n as NotificationType,O as OffCanvasVariant,q as PocketStatus,P as PopoverPosition,i as Size,S as SortDirection,T as ThemeVariant,r as ToastNotification,t as ToastNotificationPosition,s as ToastNotificationTransition,v as TransitionDirection,u as ZAriaAlertMode,x as ZChipType,z as ZDatePickerMode,F as ZDatePickerModeValue,G as ZDatePickerPosition,w as ZFileUploadType,H as ZRangePickerMode,y as ZSectionTitleDividerPosition,Z as ZTableRowExpandedType}from"./p-e1ac5c4e.js";import"./p-d69e14fb.js";const W={colorFromId:V};export{W as Utils}

package/www/build/{p-0c3f4eed.entry.js → p-01ba4a7c.entry.js}

@@ -1 +1 @@
-import{r as t,h as s,H as i}from"./p-d17ebc2f.js";import{A as a}from"./p-dfed050d.js";const e=class{constructor(s){var i,e;t(this,s),this.size=a.MEDIUM,this.textColor="text-white",this.backgroundColor="bg-grey-700",0===(null===(i=this.text)||void 0===i?void 0:i.length)&&0===(null===(e=this.image)||void 0===e?void 0:e.length)&&console.warn("z-avatar must contain at least one prop between text and image")}getTextSize(){return this.size===a.SMALL?"5":this.size===a.MEDIUM?"4":this.size===a.LARGE?"2":void 0}render(){return s(i,{class:{[this.size]:!0,[`body-${this.getTextSize()}-sb`]:!0},style:{color:`var(--${this.textColor})`,backgroundColor:`var(--${this.backgroundColor})`}},this.text&&!this.image&&s("span",null,this.text.substring(0,2)),this.image&&s("img",{src:this.image,onError:()=>this.image=""}))}};e.style=":host{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;background-color:var(--bg-grey-700);border-radius:50%;font-family:var(--font-family-sans);text-transform:uppercase}:host(.small),:host(.small)>img{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3)}:host(.medium),:host(.medium)>img{width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4)}:host(.large),:host(.large)>img{width:calc(var(--space-unit) * 5);height:calc(var(--space-unit) * 5)}:host>img{object-fit:cover}";export{e as z_avatar}
+import{r as t,h as s,H as i}from"./p-d17ebc2f.js";import{A as a}from"./p-e1ac5c4e.js";const e=class{constructor(s){var i,e;t(this,s),this.size=a.MEDIUM,this.textColor="text-white",this.backgroundColor="bg-grey-700",0===(null===(i=this.text)||void 0===i?void 0:i.length)&&0===(null===(e=this.image)||void 0===e?void 0:e.length)&&console.warn("z-avatar must contain at least one prop between text and image")}getTextSize(){return this.size===a.SMALL?"5":this.size===a.MEDIUM?"4":this.size===a.LARGE?"2":void 0}render(){return s(i,{class:{[this.size]:!0,[`body-${this.getTextSize()}-sb`]:!0},style:{color:`var(--${this.textColor})`,backgroundColor:`var(--${this.backgroundColor})`}},this.text&&!this.image&&s("span",null,this.text.substring(0,2)),this.image&&s("img",{src:this.image,onError:()=>this.image=""}))}};e.style=":host{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;background-color:var(--bg-grey-700);border-radius:50%;font-family:var(--font-family-sans);text-transform:uppercase}:host(.small),:host(.small)>img{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3)}:host(.medium),:host(.medium)>img{width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4)}:host(.large),:host(.large)>img{width:calc(var(--space-unit) * 5);height:calc(var(--space-unit) * 5)}:host>img{object-fit:cover}";export{e as z_avatar}