@zanichelli/albe-web-components 5.6.2 → 6.0.0

package/dist/collection/components/z-table/z-table-row/index.js

@@ -1,8 +1,9 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { ZTableRowExpandedType } from "../../../beans";
 export class ZTableRow {
   constructor() {
-    this.expandedType = ZTableRowExpandedType.none;
+    /** Table row expanded type */
+    this.expandedType = ZTableRowExpandedType.NONE;
     this.expanded = false;
   }
   emitOnExpand() {
@@ -13,20 +14,19 @@ export class ZTableRow {
     this.emitOnExpand();
   }
   renderExpandButton() {
-    if (this.expandedType == ZTableRowExpandedType.expandable) {
+    if (this.expandedType == ZTableRowExpandedType.EXPANDABLE) {
       return (h("z-table-cell", { style: { borderRight: "none" } }, h("z-icon", { name: this.expanded ? "minus-circled" : "plus-circled" })));
     }
     return (h("z-table-cell", { style: { borderRight: "none" } }, h("div", { class: "z-icon-placeholder" })));
   }
   render() {
     return (h(Host, { role: "row", expanded: this.expanded, onClick: (event) => {
-        const contextualMenuClick = event.target.nodeName === 'Z-CONTEXTUAL-MENU';
-        const isExpandable = this.expandedType === ZTableRowExpandedType.expandable;
+        const contextualMenuClick = event.target.nodeName === "Z-CONTEXTUAL-MENU";
+        const isExpandable = this.expandedType === ZTableRowExpandedType.EXPANDABLE;
         if (isExpandable && !contextualMenuClick) {
           this.handleExpand();
         }
-      } }, this.expandedType !== ZTableRowExpandedType.none &&
-      this.renderExpandButton(), h("slot", null)));
+      } }, this.expandedType !== ZTableRowExpandedType.NONE && this.renderExpandButton(), h("slot", null)));
   }
   static get is() { return "z-table-row"; }
   static get originalStyleUrls() {
@@ -46,7 +46,7 @@ export class ZTableRow {
         "mutable": false,
         "complexType": {
           "original": "ZTableRowExpandedType",
-          "resolved": "ZTableRowExpandedType.expandable | ZTableRowExpandedType.none | ZTableRowExpandedType.padding",
+          "resolved": "ZTableRowExpandedType.EXPANDABLE | ZTableRowExpandedType.NONE | ZTableRowExpandedType.PADDING",
           "references": {
             "ZTableRowExpandedType": {
               "location": "import",
@@ -58,11 +58,11 @@ export class ZTableRow {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Table row expanded type"
         },
         "attribute": "expanded-type",
         "reflect": true,
-        "defaultValue": "ZTableRowExpandedType.none"
+        "defaultValue": "ZTableRowExpandedType.NONE"
       }
     };
   }
@@ -80,7 +80,7 @@ export class ZTableRow {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Row has been expanded"
         },
         "complexType": {
           "original": "any",

package/dist/collection/components/z-table/z-table-row/styles.css

@@ -7,33 +7,27 @@ z-table-row[expanded-type="expandable"]:hover {
   cursor: pointer;
 }
 
-z-table-row[expanded-type="expandable"]
-  > z-table-cell:first-child,
-z-table-row[expanded-type="padding"]
-  > z-table-cell:first-child {
+z-table-row[expanded-type="expandable"] > z-table-cell:first-child,
+z-table-row[expanded-type="padding"] > z-table-cell:first-child {
   --z-icon-width: 16px;
   --z-icon-height: 16px;
 
   width: 24px;
-  padding-left: 16px;
-  padding-right: 0px;
   box-sizing: border-box;
-  text-align: center;
-
+  padding-right: 0;
+  padding-left: 16px;
   fill: var(--gray800);
-
+  text-align: center;
   user-select: none;
 }
 
 .z-icon-placeholder {
   width: 24px;
-  padding-right: 0px;
+  padding-right: 0;
 }
 
-z-table-row[expanded-type="expandable"]
-  > z-table-cell:nth-child(2),
-z-table-row[expanded-type="padding"]
-  > z-table-cell:nth-child(2) {
+z-table-row[expanded-type="expandable"] > z-table-cell:nth-child(2),
+z-table-row[expanded-type="padding"] > z-table-cell:nth-child(2) {
   padding-left: 8px;
 }
 
@@ -42,13 +36,10 @@ z-table-row[expanded-type]:hover > z-table-cell:first-child {
 }
 
 z-table-row[expanded] > z-table-cell {
+  border-bottom: none;
   background-color: var(--gray50);
 }
 
 z-table-row[expanded] + z-table-expanded-row {
   display: table-row;
 }
-
-z-table-row[expanded] > z-table-cell {
-  border-bottom: none;
-}

package/dist/collection/components/z-table/z-table-sticky-footer/index.js

@@ -1,10 +1,10 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 /**
  * @slot - table sticky footer content
  */
 export class ZTableStickyFooter {
   render() {
-    return (h("slot", null));
+    return h("slot", null);
   }
   static get is() { return "z-table-sticky-footer"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-table/z-table-sticky-footer/styles.css

@@ -1,11 +1,11 @@
 :host {
-  display: block;
   position: sticky;
   left: 0;
+  display: block;
   padding: var(--basex2);
-  background-color: var(--bg-white);
+  border-width: var(--border-size-small) 0 var(--border-base);
   border-style: solid;
   border-color: var(--gray200);
-  border-width: var(--border-size-small) 0 var(--border-base);
+  background-color: var(--bg-white);
   font-weight: var(--font-rg);
-}
+}

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

@@ -9,7 +9,7 @@ export class ZTag {
   render() {
     return (h(Host, { class: {
         "body-5-sb": true,
-        expandable: this.expandable && !!this.icon,
+        "expandable": this.expandable && !!this.icon,
       } }, this.icon && h("z-icon", { name: this.icon }), h("div", null, h("slot", null))));
   }
   static get is() { return "z-tag"; }

package/dist/collection/components/z-tag/styles.css

@@ -1,27 +1,22 @@
 :host {
   --z-icon-width: 14px;
   --z-icon-height: 14px;
-
   --z-tag-text-color: var(--color-primary03);
   --z-tag-bg: var(--color-hover-primary);
 
-  font-family: var(--font-family-sans);
-
-  border-radius: var(--border-radius);
-  padding: calc(var(--space-unit) / 2);
-  text-transform: uppercase;
-
   display: flex;
   width: fit-content;
-  height: fit-content;
-
   max-width: inherit;
+  height: fit-content;
   max-height: inherit;
-
+  padding: calc(var(--space-unit) / 2);
+  background-color: var(--z-tag-bg);
+  border-radius: var(--border-radius);
   color: var(--z-tag-text-color);
   fill: var(--z-tag-text-color);
-  background-color: var(--z-tag-bg);
+  font-family: var(--font-family-sans);
   line-height: 14px;
+  text-transform: uppercase;
 }
 
 :host > z-icon {
@@ -40,9 +35,9 @@
 }
 
 :host(.expandable) > div {
+  overflow: hidden;
   max-width: 0;
   max-height: 0;
-  overflow: hidden;
 }
 
 :host(.expandable:hover) > div {

package/dist/collection/components/z-visually-hidden/styles.css

@@ -1,12 +1,12 @@
 :host {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
   border: 0;
+  margin: 0 -1px -1px 0;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
-  height: 1px;
-  margin: 0 -1px -1px 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
   white-space: nowrap;
 }

package/dist/collection/constants/icons.js

@@ -1,6 +1,6 @@
 const icons = {
   iconuserlogo: "user.png",
   iconarrowup: "arrowUp.png",
-  iconarrowdown: "arrowDown.png"
+  iconarrowdown: "arrowDown.png",
 };
 export default icons;

package/dist/collection/deprecated/pagination/z-pagination-bar/index.js

@@ -17,7 +17,7 @@ export class ZPaginationBar {
   }
   componentDidLoad() {
     this.scrollPage = this.scrollPage.bind(this);
-    let mc = new Hammer(this.bar);
+    const mc = new Hammer(this.bar);
     // listen to events...
     mc.on("swiperight", this.scrollPage);
     mc.on("swipeleft", this.scrollPage);
@@ -38,28 +38,18 @@ export class ZPaginationBar {
     this.listhistoryrow = [...JSON.parse(historyraw)];
   }
   scrollPage(ev) {
-    let vel = Math.round(Math.abs(ev.velocity)) * this.velocityConstantMultiplier;
+    const vel = Math.round(Math.abs(ev.velocity)) * this.velocityConstantMultiplier;
     const deltaPage = Math.max(1, vel);
     switch (ev.type) {
       case "swiperight":
-        if (!this.canNavigateLeft())
-          break;
-        const newstartPage1 = this.startpage - deltaPage;
-        if (newstartPage1 > 1)
-          this.emitChangeStartPage(newstartPage1);
-        else
-          this.emitChangeStartPage(1);
+        if (this.canNavigateLeft()) {
+          this.emitChangeStartPage(Math.max(1, this.startpage - deltaPage));
+        }
         break;
       case "swipeleft":
-        if (!this.canNavigateRight())
-          break;
-        const newstartPage2 = this.startpage + deltaPage;
-        if (newstartPage2 < this.pages - this.visiblepages + 1)
-          this.emitChangeStartPage(newstartPage2);
-        else
-          this.emitChangeStartPage(this.pages - this.visiblepages + 1);
-        break;
-      default:
+        if (this.canNavigateRight()) {
+          this.emitChangeStartPage(Math.min(this.startpage + deltaPage, this.pages - this.visiblepages + 1));
+        }
         break;
     }
   }
@@ -72,10 +62,6 @@ export class ZPaginationBar {
     this.startpage = startpage;
     this.changeStartPage.emit({ startpage: startpage });
   }
-  emitAddPageToHistory(page) {
-    this.listhistoryrow.push(page);
-    this.changeStartPage.emit({ page: page });
-  }
   loadPages() {
     this.currentPages.splice(0);
     const lastPage = this.pageWindow();
@@ -108,7 +94,7 @@ export class ZPaginationBar {
     }
   }
   render() {
-    return (h("div", { ref: el => (this.bar = el) }, h("z-icon", { name: "chevron-left", class: !this.canNavigateLeft() && "disabled", onClick: () => this.navigateLeft(), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.navigateLeft), tabindex: this.canNavigateLeft() ? 0 : -1 }), this.currentPages.map(page => (h("z-pagination-page", { value: page, isselected: page === this.currentpage, onClick: () => this.emitGoToPage(page), onKeyDown: (ev) => handleKeyboardSubmit(ev, this.emitGoToPage, page), isvisited: this.listhistoryrow.includes(page) }))), h("z-icon", { name: "chevron-right", class: !this.canNavigateRight() && "disabled", onClick: () => this.navigateRight(), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.navigateRight), tabindex: this.canNavigateRight() ? 0 : -1 })));
+    return (h("div", { ref: (el) => (this.bar = el) }, h("z-icon", { name: "chevron-left", class: !this.canNavigateLeft() && "disabled", onClick: () => this.navigateLeft(), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.navigateLeft), tabindex: this.canNavigateLeft() ? 0 : -1 }), this.currentPages.map((page) => (h("z-pagination-page", { value: page, isselected: page === this.currentpage, onClick: () => this.emitGoToPage(page), onKeyDown: (ev) => handleKeyboardSubmit(ev, this.emitGoToPage, page), isvisited: this.listhistoryrow.includes(page) }))), h("z-icon", { name: "chevron-right", class: !this.canNavigateRight() && "disabled", onClick: () => this.navigateRight(), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.navigateRight), tabindex: this.canNavigateRight() ? 0 : -1 })));
   }
   static get is() { return "z-pagination-bar"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/deprecated/pagination/z-pagination-bar/styles.css

@@ -1,23 +1,22 @@
 :host > div {
+  display: flex;
   height: 48px;
-	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
-	justify-content: space-around;
-	align-items: center;
-	align-content: center;
+  flex-flow: row nowrap;
+  align-content: center;
+  align-items: center;
+  justify-content: space-around;
 }
 
 :host > div > z-icon {
-  cursor: pointer;
   margin: calc(var(--space-unit) * 2) 0;
   color: var(--color-primary01);
+  cursor: pointer;
   fill: var(--color-primary01);
 }
 
 :host > div > z-icon.disabled {
-  cursor: default;
-  pointer-events: none;
   color: var(--color-disabled01);
+  cursor: default;
   fill: var(--color-disabled01);
+  pointer-events: none;
 }

package/dist/collection/deprecated/pagination/z-pagination-page/styles.css

@@ -1,34 +1,34 @@
 :host {
+  display: inline-block;
   font-family: var(--font-family-sans);
   font-weight: var(--font-sb);
-  display: inline-block;
 }
 
 :host > button {
-  cursor: pointer;
-  outline: none;
   display: inline-block;
-  box-sizing: border-box;
-  margin: 0;
+  min-width: 56px;
   height: 48px;
-  line-height: 48px;
-  text-align: center;
+  box-sizing: border-box;
   border: none;
   border-bottom: var(--border-size-large) solid transparent;
+  margin: 0;
+  background: transparent;
   color: var(--color-primary01);
-  font-size: var(--font-size-2);
+  cursor: pointer;
   font-family: var(--font-family-sans);
+  font-size: var(--font-size-2);
   font-weight: inherit;
-  background: transparent;
+  line-height: 48px;
+  outline: none;
+  text-align: center;
   text-decoration: none;
   transition: border-bottom 0.2s ease, font-size 0.2s ease;
-  min-width: 56px;
 }
 
 :host > button[disabled] {
-  pointer-events: none;
-  cursor: default;
   color: var(--color-disabled02);
+  cursor: default;
+  pointer-events: none;
 }
 
 :host > button:hover {
@@ -40,8 +40,8 @@
 
 :host > button:focus {
   border-bottom: var(--border-size-large) solid var(--color-hover-light);
-  box-shadow: var(--shadow-focus-primary);
   background-color: var(--color-background);
+  box-shadow: var(--shadow-focus-primary);
   text-decoration: none;
 }
 

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

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
-import classNames from "classnames";
-import { ButtonVariantEnum, ButtonTypeEnum, ButtonSizeEnum, } from "../../beans";
+import { ButtonVariant, ButtonType, ButtonSize } from "../../beans";
 /**
  * @slot - button label
  */
@@ -9,11 +8,11 @@ export class ZButtonDeprecated {
     /** HTML button disabled attribute. */
     this.disabled = false;
     /** HTML button type attribute. */
-    this.type = ButtonTypeEnum.button;
+    this.type = ButtonType.BUTTON;
     /** Graphical variant: `primary`, `secondary`, `tertiary`, `dark-bg`. Defaults to `primary`. */
-    this.variant = ButtonVariantEnum.primary;
+    this.variant = ButtonVariant.PRIMARY;
     /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
-    this.size = ButtonSizeEnum.big;
+    this.size = ButtonSize.BIG;
     /** Reduce button size (deprecated).
      * @deprecated Use `size` prop.
      */
@@ -23,7 +22,12 @@ export class ZButtonDeprecated {
   }
   render() {
     this.hostElement.style.pointerEvents = this.disabled ? "none" : "auto";
-    return (h("slot", { name: "element" }, h("button", { id: this.htmlid, name: this.name, type: this.type, disabled: this.disabled, class: classNames(this.variant, this.size, { issmall: this.issmall }, { square: this.square }) }, this.icon && h("z-icon", { name: this.icon, width: 16, height: 16 }), h("slot", null))));
+    return (h("slot", { name: "element" }, h("button", { id: this.htmlid, name: this.name, type: this.type, disabled: this.disabled, class: {
+        [this.variant]: true,
+        [this.size]: true,
+        issmall: this.issmall,
+        square: this.square,
+      } }, this.icon && (h("z-icon", { name: this.icon, width: 16, height: 16 })), h("slot", null))));
   }
   static get is() { return "z-button-deprecated"; }
   static get encapsulation() { return "shadow"; }
@@ -95,11 +99,12 @@ export class ZButtonDeprecated {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "HTMLButtonElement[\"type\"]",
-          "resolved": "string",
+          "original": "ButtonType",
+          "resolved": "ButtonType.BUTTON | ButtonType.RESET | ButtonType.SUBMIT",
           "references": {
-            "HTMLButtonElement": {
-              "location": "global"
+            "ButtonType": {
+              "location": "import",
+              "path": "../../beans"
             }
           }
         },
@@ -111,16 +116,16 @@ export class ZButtonDeprecated {
         },
         "attribute": "type",
         "reflect": false,
-        "defaultValue": "ButtonTypeEnum.button"
+        "defaultValue": "ButtonType.BUTTON"
       },
       "variant": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "ButtonVariantBean",
-          "resolved": "(typeof ButtonVariantEnum)[\"dark-bg\"] | ButtonVariantEnum.primary | ButtonVariantEnum.secondary | ButtonVariantEnum.tertiary",
+          "original": "ButtonVariant",
+          "resolved": "ButtonVariant.DARK_BG | ButtonVariant.PRIMARY | ButtonVariant.SECONDARY | ButtonVariant.TERTIARY",
           "references": {
-            "ButtonVariantBean": {
+            "ButtonVariant": {
               "location": "import",
               "path": "../../beans"
             }
@@ -134,7 +139,7 @@ export class ZButtonDeprecated {
         },
         "attribute": "variant",
         "reflect": true,
-        "defaultValue": "ButtonVariantEnum.primary"
+        "defaultValue": "ButtonVariant.PRIMARY"
       },
       "icon": {
         "type": "string",
@@ -157,10 +162,10 @@ export class ZButtonDeprecated {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "ButtonSizeEnum",
-          "resolved": "(typeof ButtonSizeEnum)[\"x-small\"] | ButtonSizeEnum.big | ButtonSizeEnum.small",
+          "original": "ButtonSize",
+          "resolved": "ButtonSize.BIG | ButtonSize.SMALL | ButtonSize.X_SMALL",
           "references": {
-            "ButtonSizeEnum": {
+            "ButtonSize": {
               "location": "import",
               "path": "../../beans"
             }
@@ -174,7 +179,7 @@ export class ZButtonDeprecated {
         },
         "attribute": "size",
         "reflect": true,
-        "defaultValue": "ButtonSizeEnum.big"
+        "defaultValue": "ButtonSize.BIG"
       },
       "issmall": {
         "type": "boolean",