@zanichelli/albe-web-components 19.3.0-RC4 → 19.3.0-rc1

package/dist/collection/components/z-button/index.js

@@ -5,26 +5,35 @@ import { ButtonType, ButtonVariant, ControlSize, IconPosition } from "../../bean
  */
 export class ZButton {
     constructor() {
+        /** defines a string value that labels the internal interactive element. Used for accessibility. */
         this.ariaLabel = undefined;
+        /**
+         * **Deprecated:** Use `htmlrole` instead.
+         * @deprecated This prop has been deprecated in favor of `htmlrole` for better accessibility.
+         */
         this.role = "";
-        this.htmlrole = undefined;
-        this.href = undefined;
-        this.target = undefined;
-        this.htmlid = undefined;
-        this.name = undefined;
+        /** HTML button disabled attribute. */
         this.disabled = false;
+        /** HTML button type attribute. */
         this.type = ButtonType.BUTTON;
+        /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */
         this.variant = ButtonVariant.PRIMARY;
-        this.icon = undefined;
+        /** the button icon position. Defaults to `left` */
         this.iconPosition = IconPosition.LEFT;
+        /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
         this.size = ControlSize.BIG;
+        this.hasText = false;
     }
-    getAttributes() {
+    componentWillLoad() {
+        var _a;
+        this.hasText = !!((_a = this.hostElement.textContent) === null || _a === void 0 ? void 0 : _a.trim());
+    }
+    get attributes() {
         return {
             id: this.htmlid,
             class: {
                 "z-button--container": true,
-                "z-button--has-text": !!this.hostElement.textContent.trim(),
+                "z-button--has-text": this.hasText,
             },
         };
     }
@@ -32,10 +41,13 @@ export class ZButton {
         return this.icon && h("z-icon", { name: this.icon });
     }
     render() {
+        var _a, _b;
+        const normalizedAriaLabel = ((_a = this.ariaLabel) === null || _a === void 0 ? void 0 : _a.trim()) || undefined;
+        const normalizedRole = this.htmlrole || ((_b = this.role) === null || _b === void 0 ? void 0 : _b.trim()) || undefined;
         if (this.href) {
-            return (h("a", Object.assign({}, this.getAttributes(), { "aria-label": this.ariaLabel || undefined, href: this.href, target: this.target }), this.renderIcon(), h("slot", null)));
+            return (h("a", Object.assign({}, this.attributes, { "aria-label": normalizedAriaLabel, href: this.href, target: this.target }), this.renderIcon(), h("slot", null)));
         }
-        return (h("button", Object.assign({}, this.getAttributes(), { "aria-label": this.ariaLabel || undefined, name: this.name, type: this.type, disabled: this.disabled, role: this.htmlrole || this.role || undefined }), this.renderIcon(), h("slot", null)));
+        return (h("button", Object.assign({}, this.attributes, { "aria-label": normalizedAriaLabel, name: this.name, type: this.type, disabled: this.disabled, role: normalizedRole }), this.renderIcon(), h("slot", null)));
     }
     static get is() { return "z-button"; }
     static get encapsulation() { return "scoped"; }
@@ -65,8 +77,10 @@ export class ZButton {
                     "tags": [],
                     "text": "defines a string value that labels the internal interactive element. Used for accessibility."
                 },
-                "attribute": "aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "aria-label",
                 "defaultValue": "undefined"
             },
             "role": {
@@ -86,8 +100,10 @@ export class ZButton {
                         }],
                     "text": "**Deprecated:** Use `htmlrole` instead."
                 },
-                "attribute": "role",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "role",
                 "defaultValue": "\"\""
             },
             "htmlrole": {
@@ -104,8 +120,10 @@ export class ZButton {
                     "tags": [],
                     "text": "defines role attribute, used for accessibility."
                 },
-                "attribute": "htmlrole",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "htmlrole"
             },
             "href": {
                 "type": "string",
@@ -121,8 +139,10 @@ export class ZButton {
                     "tags": [],
                     "text": "HTML <a> href attribute. If it is set, it renders an HTML <a> tag."
                 },
-                "attribute": "href",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
             },
             "target": {
                 "type": "string",
@@ -138,8 +158,10 @@ export class ZButton {
                     "tags": [],
                     "text": "HTML a target attribute."
                 },
-                "attribute": "target",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
             },
             "htmlid": {
                 "type": "string",
@@ -155,8 +177,10 @@ export class ZButton {
                     "tags": [],
                     "text": "Identifier, should be unique."
                 },
-                "attribute": "htmlid",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "htmlid"
             },
             "name": {
                 "type": "string",
@@ -172,8 +196,10 @@ export class ZButton {
                     "tags": [],
                     "text": "HTML button name attribute."
                 },
-                "attribute": "name",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
             },
             "disabled": {
                 "type": "boolean",
@@ -189,8 +215,10 @@ export class ZButton {
                     "tags": [],
                     "text": "HTML button disabled attribute."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "type": {
@@ -203,7 +231,8 @@ export class ZButton {
                         "ButtonType": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ButtonType"
+                            "id": "src/beans/index.tsx::ButtonType",
+                            "referenceLocation": "ButtonType"
                         }
                     }
                 },
@@ -213,8 +242,10 @@ export class ZButton {
                     "tags": [],
                     "text": "HTML button type attribute."
                 },
-                "attribute": "type",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "type",
                 "defaultValue": "ButtonType.BUTTON"
             },
             "variant": {
@@ -227,7 +258,8 @@ export class ZButton {
                         "ButtonVariant": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ButtonVariant"
+                            "id": "src/beans/index.tsx::ButtonVariant",
+                            "referenceLocation": "ButtonVariant"
                         }
                     }
                 },
@@ -237,8 +269,10 @@ export class ZButton {
                     "tags": [],
                     "text": "Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`."
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "variant",
                 "defaultValue": "ButtonVariant.PRIMARY"
             },
             "icon": {
@@ -255,8 +289,10 @@ export class ZButton {
                     "tags": [],
                     "text": "`z-icon` name to use (optional)."
                 },
-                "attribute": "icon",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
             },
             "iconPosition": {
                 "type": "string",
@@ -268,7 +304,8 @@ export class ZButton {
                         "IconPosition": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::IconPosition"
+                            "id": "src/beans/index.tsx::IconPosition",
+                            "referenceLocation": "IconPosition"
                         }
                     }
                 },
@@ -278,8 +315,10 @@ export class ZButton {
                     "tags": [],
                     "text": "the button icon position. Defaults to `left`"
                 },
-                "attribute": "icon-position",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "icon-position",
                 "defaultValue": "IconPosition.LEFT"
             },
             "size": {
@@ -292,12 +331,14 @@ export class ZButton {
                         "ButtonSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ButtonSize"
+                            "id": "src/beans/index.tsx::ButtonSize",
+                            "referenceLocation": "ButtonSize"
                         },
                         "ControlSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ControlSize"
+                            "id": "src/beans/index.tsx::ControlSize",
+                            "referenceLocation": "ControlSize"
                         }
                     }
                 },
@@ -307,12 +348,13 @@ export class ZButton {
                     "tags": [],
                     "text": "Available sizes: `big`, `small` and `x-small`. Defaults to `big`."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "size",
                 "defaultValue": "ControlSize.BIG"
             }
         };
     }
     static get elementRef() { return "hostElement"; }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-button/index.stories.js

@@ -101,4 +101,3 @@ export const IconRight = {
         iconPosition: IconPosition.RIGHT,
     },
 };
-//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-button-sort/index.js

@@ -2,13 +2,13 @@ import { h } from "@stencil/core";
 import { Breakpoints } from "../../constants/breakpoints";
 export class ZButtonSort {
     constructor() {
-        this.buttonid = undefined;
-        this.label = undefined;
-        this.desclabel = undefined;
-        this.counter = undefined;
+        /** sort label content (ascending) (optional) */
         this.sortlabelasc = "A-Z";
+        /** sort label content (descending) (optional) */
         this.sortlabeldesc = "Z-A";
+        /** selected flag (optional) */
         this.isselected = false;
+        /** sortable flag (optional) */
         this.sortasc = true;
         this.allowTooltip = false;
     }
@@ -36,7 +36,7 @@ export class ZButtonSort {
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h("button", { key: '6aebfeebb2882a1207aa32859e4c463f785360c2', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: 'c7a7a840ef0365ad7d56bf8fa8a0a81b421f4bed', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: '76768e04bdb9409dbbc954da9097ce3d5bf2fd1b', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: '932bc97f8c6cd54907de7e970d3f0a1895026fde', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: 'b91e6422c7325bb5646211e2013a5a3226b30a7c', name: "caret-up-down", width: 16, height: 16 })));
+        return (h("button", { key: '30d0203657443c589241b25ae37155cfbd203f89', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '3934b6a866c2c791aa80e0de90197f5ae372aa88', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: '1bb900d3b3d364b912e67ae44e3f60cf245c0672', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: '066c842f00e3d26301e63fa91849dd4f414f05e8', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: '00b771b5c276eff3ca761acb28ba9df42b8d0a6c', name: "caret-up-down", width: 16, height: 16 })));
     }
     static get is() { return "z-button-sort"; }
     static get encapsulation() { return "shadow"; }
@@ -66,8 +66,10 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "id, should be unique"
                 },
-                "attribute": "buttonid",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "buttonid"
             },
             "label": {
                 "type": "string",
@@ -83,8 +85,10 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "label content (ascending)"
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
             "desclabel": {
                 "type": "string",
@@ -100,8 +104,10 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "label content (descending)"
                 },
-                "attribute": "desclabel",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "desclabel"
             },
             "counter": {
                 "type": "number",
@@ -117,8 +123,10 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "occurrences counter (optional)"
                 },
-                "attribute": "counter",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "counter"
             },
             "sortlabelasc": {
                 "type": "string",
@@ -134,8 +142,10 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "sort label content (ascending) (optional)"
                 },
-                "attribute": "sortlabelasc",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "sortlabelasc",
                 "defaultValue": "\"A-Z\""
             },
             "sortlabeldesc": {
@@ -152,8 +162,10 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "sort label content (descending) (optional)"
                 },
-                "attribute": "sortlabeldesc",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "sortlabeldesc",
                 "defaultValue": "\"Z-A\""
             },
             "isselected": {
@@ -170,8 +182,10 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "selected flag (optional)"
                 },
-                "attribute": "isselected",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "isselected",
                 "defaultValue": "false"
             },
             "sortasc": {
@@ -188,8 +202,10 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "sortable flag (optional)"
                 },
-                "attribute": "sortasc",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "sortasc",
                 "defaultValue": "true"
             }
         };
@@ -218,4 +234,3 @@ export class ZButtonSort {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-button-sort/index.stories.js

@@ -28,4 +28,3 @@ export const Ellipsis = {
         label: "Testo molto lungo lungo lungo lunghissimo lunghissimo lunghissimo ancora di più",
     },
 };
-//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-card/index.js

@@ -19,11 +19,13 @@ import { CardVariant } from "../../beans";
  */
 export class ZCard {
     constructor() {
-        this.variant = undefined;
-        this.coverIcon = undefined;
+        /** Enable shadow. Default: false. */
         this.showShadow = false;
+        /**
+         * Enable "clickable" styles like hover background and cursor, focus shadow on the whole card, etc.
+         * Always set this to `true` when putting an `<a>` tag in the `title` slot.
+         */
         this.clickable = false;
-        this.hasCoverImage = undefined;
     }
     componentWillLoad() {
         this.hasCoverImage = this.host.querySelector('[slot="cover"]') !== null;
@@ -80,7 +82,8 @@ export class ZCard {
                         "CardVariant": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::CardVariant"
+                            "id": "src/beans/index.tsx::CardVariant",
+                            "referenceLocation": "CardVariant"
                         }
                     }
                 },
@@ -90,8 +93,10 @@ export class ZCard {
                     "tags": [],
                     "text": "Card variant.\nCan be one of \"text\", \"border\", \"shadow\", \"overlay\".\nLeave it undefined for the default card."
                 },
-                "attribute": "variant",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant"
             },
             "coverIcon": {
                 "type": "string",
@@ -107,8 +112,10 @@ export class ZCard {
                     "tags": [],
                     "text": "Name of the icon to place over the image cover"
                 },
-                "attribute": "cover-icon",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cover-icon"
             },
             "showShadow": {
                 "type": "boolean",
@@ -124,8 +131,10 @@ export class ZCard {
                     "tags": [],
                     "text": "Enable shadow. Default: false."
                 },
-                "attribute": "show-shadow",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "show-shadow",
                 "defaultValue": "false"
             },
             "clickable": {
@@ -142,8 +151,10 @@ export class ZCard {
                     "tags": [],
                     "text": "Enable \"clickable\" styles like hover background and cursor, focus shadow on the whole card, etc.\nAlways set this to `true` when putting an `<a>` tag in the `title` slot."
                 },
-                "attribute": "clickable",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "clickable",
                 "defaultValue": "false"
             }
         };
@@ -155,4 +166,3 @@ export class ZCard {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-card/index.stories.js

@@ -300,4 +300,3 @@ export const WithImageAndClickListener = {
     <div id="click-alert-container">Card click count: 0</div>
   `,
 };
-//# sourceMappingURL=index.stories.js.map