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

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

@@ -1,156 +0,0 @@
-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

@@ -1,179 +0,0 @@
-: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

@@ -1,136 +0,0 @@
-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

@@ -1,242 +0,0 @@
-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
-      }];
-  }
-}