@zanichelli/albe-web-components 6.6.10-test → 6.7.0

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

@@ -0,0 +1,156 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot modalContent - set the content of the modal
+ * @slot modalCloseButton - accept custom close button
+ */
+export class ZModal {
+  constructor() {
+    /** aria-label for close button (optional) */
+    this.closeButtonLabel = "close modal";
+  }
+  emitModalClose() {
+    this.modalClose.emit({ modalid: this.modalid });
+  }
+  emitModalHeaderActive() {
+    this.modalHeaderActive.emit({ modalid: this.modalid });
+  }
+  emitBackgroundClick() {
+    this.modalBackgroundClick.emit({ modalid: this.modalid });
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "modal-container", id: this.modalid, role: "dialog" }, h("header", { onClick: this.emitModalHeaderActive.bind(this) }, h("div", null, this.modaltitle && h("h1", null, this.modaltitle), this.modalsubtitle && h("h2", null, this.modalsubtitle)), h("slot", { name: "modalCloseButton" }, h("button", { "aria-label": this.closeButtonLabel, onClick: this.emitModalClose.bind(this) }, h("z-icon", { name: "multiply-circle-filled" })))), h("div", { class: "modal-content" }, h("slot", { name: "modalContent" }))), h("div", { class: "modal-background", "data-action": "modalBackground", "data-modal": this.modalid, onClick: this.emitBackgroundClick.bind(this) })));
+  }
+  static get is() { return "z-modal"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "modalid": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "unique id"
+        },
+        "attribute": "modalid",
+        "reflect": false
+      },
+      "modaltitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "title text (optional)"
+        },
+        "attribute": "modaltitle",
+        "reflect": false
+      },
+      "modalsubtitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "subtitle (optional)"
+        },
+        "attribute": "modalsubtitle",
+        "reflect": false
+      },
+      "closeButtonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "aria-label for close button (optional)"
+        },
+        "attribute": "close-button-label",
+        "reflect": false,
+        "defaultValue": "\"close modal\""
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "modalClose",
+        "name": "modalClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "emitted on close button click, returns modalid"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "modalHeaderActive",
+        "name": "modalHeaderActive",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "emitted on modal header click, returns modalid"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "modalBackgroundClick",
+        "name": "modalBackgroundClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "emitted on background click, returns modalid"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+}

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

@@ -0,0 +1,179 @@
+:host {
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: row;
+  justify-content: center;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+.modal-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--gray900);
+  opacity: 0.7;
+}
+
+.modal-container {
+  z-index: 1010;
+  display: flex;
+  overflow: -moz-scrollbars-none;
+  overflow: hidden;
+  width: 100%;
+  height: 100vh;
+  flex-direction: column;
+}
+
+.modal-container > header {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);
+  background: var(--color-surface02);
+}
+
+.modal-container > header button {
+  padding: 0;
+  border: none;
+  margin: 0;
+  margin-left: auto;
+  background: transparent;
+  cursor: pointer;
+}
+
+.modal-container > header z-icon {
+  --z-icon-width: calc(var(--space-unit) * 2.5);
+  --z-icon-height: calc(var(--space-unit) * 2.5);
+
+  display: flex;
+  fill: var(--color-icon01);
+}
+
+.modal-container > header > div {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  margin-right: calc(var(--space-unit) * 2);
+}
+
+.modal-container > header h1,
+.modal-container > header h2 {
+  padding: 0;
+  margin: 0;
+  color: var(--color-text01);
+  font-weight: var(--font-rg);
+}
+
+.modal-container > header h1 {
+  font-size: var(--font-size-5);
+  letter-spacing: 0;
+  line-height: 1.4;
+}
+
+.modal-container > header h2 {
+  font-size: var(--font-size-3);
+  letter-spacing: 0;
+  line-height: 1.5;
+}
+
+.modal-container > header > div *:empty {
+  display: none;
+}
+
+.modal-container > header h1 + h2 {
+  margin-top: calc(var(--space-unit) * 0.5);
+}
+
+.modal-container > .modal-content {
+  overflow: auto;
+  flex: 1 auto;
+  background: var(--color-surface01);
+  overflow-x: hidden;
+}
+
+.modal-container .modal-content::-webkit-scrollbar {
+  width: 10px;
+  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
+  border-radius: var(--border-radius);
+}
+
+.modal-container .modal-content::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+.modal-container .modal-content::-webkit-scrollbar-thumb {
+  width: 10px;
+  background-color: var(--color-primary01);
+  border-radius: var(--border-radius);
+}
+
+.modal-container .modal-content::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-hover-primary);
+}
+
+/* Firefox */
+.modal-container .modal-content {
+  scrollbar-color: var(--color-primary01) transparent;
+}
+
+/* Tablet / Desktop */
+@media only screen and (min-width: 768px) {
+  .modal-container {
+    position: fixed;
+    top: calc(var(--space-unit) * 6);
+    left: 50%;
+    width: auto;
+    min-width: calc(var(--space-unit) * 40);
+    height: auto;
+    min-height: calc(var(--space-unit) * 40);
+    max-height: calc(100vh - calc(var(--space-unit) * 6 * 2));
+    border-radius: var(--border-radius);
+    transform: translateX(-50%);
+  }
+
+  .modal-container > header z-icon {
+    --z-icon-width: calc(var(--space-unit) * 3);
+    --z-icon-height: calc(var(--space-unit) * 3);
+  }
+}
+
+/* Tablet */
+@media only screen and (min-width: 768px) and (max-width: 1151px) {
+  .modal-container > header {
+    padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 3);
+  }
+}
+
+/* Desktop */
+@media only screen and (min-width: 1152px) {
+  .modal-container > header {
+    padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 4);
+  }
+
+  .modal-container > header h1 {
+    font-size: var(--font-size-6);
+    letter-spacing: 0;
+    line-height: 1.33;
+  }
+
+  .modal-container > header h2 {
+    font-size: var(--font-size-4);
+    letter-spacing: 0;
+    line-height: 1.5;
+  }
+
+  .modal-container > header h1 + h2 {
+    margin-top: 0;
+  }
+}

package/dist/collection/components/navigation/tabs/navigation-tab.css

@@ -0,0 +1,136 @@
+z-navigation-tab > button,
+z-navigation-tab-link > a {
+  position: relative;
+  z-index: 0;
+  display: inline-flex;
+  width: auto;
+  align-items: center;
+  justify-content: center;
+  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);
+  border: none;
+  margin: 0;
+  background-color: unset;
+  border-radius: var(--border-no-radius);
+  color: var(--color-primary01);
+  cursor: pointer;
+  fill: currentcolor;
+  font-family: var(--font-family-sans);
+  font-size: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  outline: none;
+  text-align: center;
+  white-space: nowrap;
+}
+
+z-navigation-tab-link > a {
+  text-decoration: none;
+}
+
+z-navigation-tab *,
+z-navigation-tab-link *,
+z-navigation-tab *::before,
+z-navigation-tab *::after,
+z-navigation-tab-link *::before,
+z-navigation-tab-link *::after {
+  box-sizing: border-box;
+}
+
+z-navigation-tab > *:focus:focus-visible,
+z-navigation-tab-link > *:focus:focus-visible {
+  box-shadow: inset var(--shadow-focus-primary);
+}
+
+z-navigation-tab:not([disabled]):hover > *,
+z-navigation-tab[selected] > *,
+z-navigation-tab-link:not([disabled]):hover > *,
+z-navigation-tab-link[selected] > * {
+  color: var(--color-hover-secondary);
+  fill: currentcolor;
+}
+
+z-navigation-tab:not([disabled]):hover > *::after,
+z-navigation-tab[selected] > *::after,
+z-navigation-tab-link:not([disabled]):hover > *::after,
+z-navigation-tab-link[selected] > *::after {
+  position: absolute;
+  background-color: var(--color-hover-secondary);
+  content: "";
+}
+
+z-navigation-tab[orientation="horizontal"]:not([disabled]):hover > *::after,
+z-navigation-tab[orientation="horizontal"][selected] > *::after,
+z-navigation-tab-link[orientation="horizontal"]:not([disabled]):hover > *::after,
+z-navigation-tab-link[orientation="horizontal"][selected] > *::after {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: var(--border-size-large);
+}
+
+z-navigation-tab z-icon,
+z-navigation-tab-link z-icon {
+  --z-icon-width: calc(var(--space-unit) * 2);
+  --z-icon-height: calc(var(--space-unit) * 2);
+
+  display: flex;
+  margin: 0;
+}
+
+z-navigation-tab[orientation="horizontal"] z-icon,
+z-navigation-tab-link[orientation="horizontal"] z-icon {
+  margin-right: var(--space-unit);
+}
+
+z-navigation-tab:not([disabled]):hover > * {
+  background-color: var(--color-background);
+}
+
+z-navigation-tab[disabled] > * {
+  color: var(--gray500);
+  cursor: not-allowed;
+  fill: currentcolor;
+  pointer-events: all;
+}
+
+/* Size small (only available for horizontal) */
+z-navigation-tab[size="small"] > *,
+z-navigation-tab-link[size="small"] > * {
+  font-size: var(--font-size-2);
+  letter-spacing: 0.16px;
+  line-height: 1.4;
+}
+
+z-navigation-tab[size="small"][orientation="horizontal"] > *,
+z-navigation-tab-link[size="small"][orientation="horizontal"] > * {
+  padding: var(--space-unit) calc(var(--space-unit) * 2);
+}
+
+z-navigation-tab[size="small"][orientation="horizontal"]:not([disabled]):hover > *::after,
+z-navigation-tab[size="small"][orientation="horizontal"][selected] > *::after,
+z-navigation-tab-link[size="small"][orientation="horizontal"]:hover > *::after,
+z-navigation-tab-link[size="small"][orientation="horizontal"][selected] > *::after {
+  height: var(--border-size-medium);
+}
+
+z-navigation-tab[size="small"]:not([orientation="vertical"]) z-icon,
+z-navigation-tab-link[size="small"]:not([orientation="vertical"]) z-icon {
+  --z-icon-width: 14px;
+  --z-icon-height: 14px;
+}
+
+/* Orientation Vertical */
+z-navigation-tab[orientation="vertical"] > *,
+z-navigation-tab-link[orientation="vertical"] > * {
+  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);
+}
+
+z-navigation-tab[orientation="vertical"]:hover:not([disabled]) > *::after,
+z-navigation-tab[orientation="vertical"][selected] > *::after,
+z-navigation-tab-link[orientation="vertical"]:hover > *::after,
+z-navigation-tab-link[orientation="vertical"][selected] > *::after {
+  top: 0;
+  right: 0;
+  width: var(--border-size-large);
+  height: 100%;
+}

package/dist/collection/components/navigation/tabs/z-navigation-tab/index.js

@@ -0,0 +1,242 @@
+import { h } from "@stencil/core";
+import { NavigationTabsOrientation, NavigationTabsSize } from "../../../../beans";
+import { ICONS } from "../../../icons/icons";
+/**
+ * Single tab component to use inside `z-navigation-tabs`. It renders a button.
+ */
+export class ZNavigationTab {
+  constructor() {
+    /**
+     * Whether the tab is selected.
+     */
+    this.selected = false;
+    /**
+     * Whether the tab is disabled.
+     */
+    this.disabled = false;
+    /**
+     * Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this.
+     */
+    this.orientation = NavigationTabsOrientation.HORIZONTAL;
+    /**
+     * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.
+     */
+    this.size = NavigationTabsSize.BIG;
+  }
+  /**
+   * Scroll into view to center the tab.
+   */
+  scrollToTab({ target: button }) {
+    const scrollOptions = this.orientation === NavigationTabsOrientation.HORIZONTAL
+      ? { block: "nearest", inline: "center" }
+      : { block: "center", inline: "nearest" };
+    button.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
+  }
+  onClick() {
+    if (!this.disabled) {
+      this.selected = true;
+    }
+  }
+  onSelected() {
+    if (this.selected) {
+      this.selectedEvent.emit();
+    }
+  }
+  /**
+   * Render the icon component using the icon's name passed from prop.
+   * Use the `filled` version when the tab is `selected`.
+   * @returns {HTMLElement}
+   */
+  renderIcon() {
+    let icon = this.icon;
+    const iconFilled = `${icon.replace(/-filled$/, "")}-filled`;
+    if (this.selected && Object.keys(ICONS).includes(iconFilled)) {
+      icon = iconFilled;
+    }
+    return h("z-icon", { name: icon });
+  }
+  render() {
+    return (h("button", { role: "tab", disabled: this.disabled, title: this.htmlTitle, onFocus: this.scrollToTab.bind(this) }, this.icon && this.renderIcon(), this.orientation === NavigationTabsOrientation.HORIZONTAL && this.label));
+  }
+  static get is() { return "z-navigation-tab"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../navigation-tab.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../navigation-tab.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "selected": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Whether the tab is selected."
+        },
+        "attribute": "selected",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Whether the tab is disabled."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "orientation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "NavigationTabsOrientation",
+          "resolved": "NavigationTabsOrientation.HORIZONTAL | NavigationTabsOrientation.VERTICAL",
+          "references": {
+            "NavigationTabsOrientation": {
+              "location": "import",
+              "path": "../../../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this."
+        },
+        "attribute": "orientation",
+        "reflect": true,
+        "defaultValue": "NavigationTabsOrientation.HORIZONTAL"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "NavigationTabsSize",
+          "resolved": "NavigationTabsSize.BIG | NavigationTabsSize.SMALL",
+          "references": {
+            "NavigationTabsSize": {
+              "location": "import",
+              "path": "../../../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tab size. Do not set this manually: `z-navigation-tabs` will handle this."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "NavigationTabsSize.BIG"
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of the icon to use.\nThe `filled` version will be automatically used (if found) when the tab is `selected`."
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label to show in the tab."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "htmlTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Html `title` attribute for the button."
+        },
+        "attribute": "html-title",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "selectedEvent",
+        "name": "selected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "The tab has been selected."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "selected",
+        "methodName": "onSelected"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "onClick",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}