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

package/dist/collection/components/navigation/z-app-header/styles.css

@@ -1,420 +0,0 @@
-:host {
-  --app-header-content-max-width: 100%;
-  --app-header-height: auto;
-  --app-header-typography-1-size: 24px;
-  --app-header-typography-2-size: 28px;
-  --app-header-typography-3-size: 32px;
-  --app-header-typography-4-size: 36px;
-  --app-header-typography-5-size: 42px;
-  --app-header-typography-6-size: 48px;
-  --app-header-typography-7-size: 54px;
-  --app-header-typography-8-size: 60px;
-  --app-header-typography-9-size: 68px;
-  --app-header-typography-10-size: 76px;
-  --app-header-typography-11-size: 84px;
-  --app-header-typography-12-size: 92px;
-  --app-header-typography-1-lineheight: 1.33;
-  --app-header-typography-2-lineheight: 1.29;
-  --app-header-typography-3-lineheight: 1.25;
-  --app-header-typography-4-lineheight: 1.24;
-  --app-header-typography-5-lineheight: 1.24;
-  --app-header-typography-6-lineheight: 1.25;
-  --app-header-typography-7-lineheight: 1.2;
-  --app-header-typography-8-lineheight: 1.26;
-  --app-header-typography-9-lineheight: 1.24;
-  --app-header-typography-10-lineheight: 1.26;
-  --app-header-typography-11-lineheight: 1.2;
-  --app-header-typography-12-lineheight: 1.2;
-  --app-header-typography-1-tracking: calc(-0.2 / 1em);
-  --app-header-typography-2-tracking: calc(-0.4 / 1em);
-  --app-header-typography-3-tracking: calc(-0.6 / 1em);
-  --app-header-typography-4-tracking: calc(-0.8 / 1em);
-  --app-header-typography-5-tracking: calc(-1 / 1em);
-  --app-header-typography-6-tracking: calc(-1.2 / 1em);
-  --app-header-typography-7-tracking: calc(-1.4 / 1em);
-  --app-header-typography-8-tracking: calc(-1.6 / 1em);
-  --app-header-typography-9-tracking: calc(-1.8 / 1em);
-  --app-header-typography-10-tracking: calc(-2 / 1em);
-  --app-header-typography-11-tracking: calc(-2.2 / 1em);
-  --app-header-typography-12-tracking: calc(-2.4 / 1em);
-
-  /**
-   * Variable to set stuck header and drawer's top offset. Useful when something is absolutely positioned above the header.
-   */
-  --app-header-top-offset: 48px;
-  --app-header-drawer-trigger-size: calc(var(--space-unit) * 4);
-
-  /* Variable to customize header background color. */
-  --app-header-bg: var(--color-white);
-
-  /* Variable to customize stuck header background color. */
-  --app-header-stucked-bg: var(--color-white);
-
-  /* Variable to customize text and icon color. */
-  --app-header-text-color: var(--gray800);
-
-  /* Variable to customize stuck header's text and icon color. */
-  --app-header-stucked-text-color: var(--gray800);
-
-  display: block;
-  color: var(--app-header-text-color);
-}
-
-:host,
-* {
-  box-sizing: border-box;
-}
-
-.heading-panel {
-  position: relative;
-  display: flex;
-  width: 100%;
-  max-width: var(--app-header-content-max-width);
-  height: var(--app-header-height);
-  flex-direction: column;
-  flex-grow: 0;
-  flex-shrink: 0;
-  align-items: baseline;
-  justify-content: flex-start;
-  padding: var(--grid-margin);
-  margin: 0 auto;
-  background: var(--app-header-bg);
-}
-
-:host(:empty) .heading-panel {
-  padding: 0;
-}
-
-.heading-title {
-  display: flex;
-  max-width: 100%;
-  flex-direction: row;
-  align-items: center;
-}
-
-:host(:not([menu-length="0"])) .heading-subtitle {
-  padding-left: calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 1.5));
-}
-
-.heading-stuck {
-  position: fixed;
-  z-index: 20;
-  top: var(--app-header-top-offset);
-  left: 0;
-  width: 100%;
-  max-width: 100%;
-  animation: slide-stuck-heading-in 250ms ease-out;
-  background: var(--app-header-stucked-bg);
-  box-shadow: var(--shadow-2);
-  color: var(--app-header-stucked-text-color);
-}
-
-.heading-stuck-content {
-  display: flex;
-  max-width: var(--app-header-content-max-width);
-  padding: var(--space-unit) var(--grid-margin);
-  margin: 0 auto;
-}
-
-.heading-stuck .heading-title,
-.heading-stuck .heading-title > *,
-.heading-stuck .heading-title ::slotted([slot="stucked-title"]) {
-  display: block;
-  overflow: hidden;
-  line-height: 1.2;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.heading-stuck .heading-title > *,
-::slotted([slot="title"]),
-::slotted([slot="stucked-title"]) {
-  margin: 0;
-  font-family: "IBM Plex Serif", serif;
-  font-size: var(--app-header-typography-3-size);
-  font-weight: 700;
-  letter-spacing: var(--app-header-typography-3-tracking);
-}
-
-::slotted([slot="title"]) {
-  line-height: 1;
-}
-
-::slotted([slot="subtitle"]) {
-  margin: var(--space-unit) 0 0;
-  font-family: var(--font-family-sans);
-  font-size: 20px;
-  font-style: italic;
-  font-weight: 500;
-  line-height: 1.2;
-}
-
-.heading-container {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  max-width: 100%;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  margin-right: auto;
-}
-
-.menu-container {
-  display: none;
-  flex-flow: row wrap;
-  align-items: baseline;
-}
-
-.menu-container ::slotted([open]) {
-  position: relative;
-  z-index: 3;
-}
-
-.menu-container ::slotted(*:not(:last-of-type)) {
-  margin-right: calc(var(--space-unit) * 4.5);
-}
-
-.drawer-trigger {
-  padding: 0;
-  border: 0;
-  margin: 0 calc(var(--space-unit) * 1.5) 0 0;
-  appearance: none;
-  background: none;
-  border-radius: 0;
-  color: inherit;
-  cursor: pointer;
-}
-
-.drawer-trigger z-icon {
-  --z-icon-width: var(--app-header-drawer-trigger-size);
-  --z-icon-height: var(--app-header-drawer-trigger-size);
-
-  fill: currentcolor;
-}
-
-.drawer-container {
-  position: fixed;
-  z-index: 100;
-  top: var(--app-header-top-offset);
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-
-.drawer-container .drawer-overlay {
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  background: var(--gray900);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 400ms ease-out;
-}
-
-.drawer-panel {
-  position: absolute;
-  z-index: 2;
-  top: 0;
-  left: 0;
-  display: flex;
-  width: 375px;
-  max-width: 100%;
-  height: 100%;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: calc(var(--space-unit) * 2) var(--space-unit);
-  background: var(--color-white);
-  color: var(--gray800);
-  pointer-events: none;
-  transform: translate3d(-100%, 0, 0);
-  transition: transform 400ms ease-out;
-}
-
-.drawer-content {
-  display: flex;
-  overflow: auto;
-  width: 100%;
-  flex: 1 auto;
-  flex-direction: column;
-  padding: calc(var(--space-unit) * 0.5) var(--space-unit);
-}
-
-.drawer-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);
-}
-
-.drawer-content::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-.drawer-content::-webkit-scrollbar-thumb {
-  width: 10px;
-  background-color: var(--color-primary01);
-  border-radius: var(--border-radius);
-}
-
-.drawer-content::-webkit-scrollbar-thumb:hover {
-  background-color: var(--color-hover-primary);
-}
-
-.drawer-content ::slotted(z-menu) {
-  width: 100%;
-}
-
-.drawer-content ::slotted(z-menu:not(:last-of-type)) {
-  margin-bottom: calc(var(--space-unit) * 2.5);
-}
-
-.drawer-close {
-  --z-icon-width: var(--app-header-drawer-trigger-size);
-  --z-icon-height: var(--app-header-drawer-trigger-size);
-
-  padding: 0;
-  border: 0;
-  margin: 0 0 calc(var(--space-unit) * 2.5) var(--space-unit);
-  appearance: none;
-  background: transparent;
-  border-radius: 0;
-  color: inherit;
-  cursor: pointer;
-  fill: currentcolor;
-  font-size: inherit;
-  outline: none;
-}
-
-.drawer-close:focus-visible {
-  box-shadow: var(--shadow-focus-primary);
-}
-
-:host([drawer-open]) .drawer-container .drawer-overlay {
-  opacity: 0.7;
-  pointer-events: all;
-}
-
-:host([drawer-open]) .drawer-container .drawer-panel {
-  pointer-events: all;
-  transform: none;
-}
-
-.hero-container {
-  position: absolute;
-  z-index: 0;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-:host([overlay]) .heading-panel .drawer-trigger z-icon,
-:host([overlay]) .heading-panel .heading-container,
-:host([overlay]) .heading-panel .menu-container {
-  color: var(--color-white);
-  fill: var(--color-white);
-}
-
-:host([overlay]) .heading-panel .menu-container ::slotted(z-menu:not([open])) {
-  --color-surface05: var(--color-white);
-}
-
-:host([overlay]) .hero-container::after {
-  position: absolute;
-  z-index: 0;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: var(--color-black);
-  content: "";
-  opacity: 0.5;
-}
-
-.hero-container img,
-.hero-container ::slotted(*) {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: top center;
-  -webkit-user-drag: none;
-}
-
-/* Tablet breakpoint */
-@media (min-width: 768px) {
-  :host(:not([flow="offcanvas"])) .heading-subtitle {
-    padding-left: 0;
-  }
-
-  :host(:not([flow="offcanvas"])) .menu-container {
-    display: flex;
-  }
-
-  :host(:not([flow="offcanvas"])) .heading-container .drawer-trigger {
-    display: none;
-  }
-
-  :host(:not([flow="offcanvas"], [menu-length="0"])) .heading-container:not(:last-child) {
-    margin-bottom: calc(var(--space-unit) * 3);
-  }
-
-  ::slotted([slot="title"]) {
-    font-size: var(--app-header-typography-6-size);
-    letter-spacing: var(--app-header-typography-6-tracking);
-  }
-
-  ::slotted([slot="subtitle"]) {
-    margin-top: calc(var(--space-unit) * 1.5);
-  }
-}
-
-/* Desktop breakpoint */
-@media (min-width: 1152px) {
-  :host(:not([flow="stack"])) .heading-panel {
-    flex-flow: row wrap;
-  }
-
-  ::slotted([slot="title"]) {
-    margin-right: var(--grid-gutter);
-    font-size: var(--app-header-typography-7-size);
-    letter-spacing: var(--app-header-typography-7-tracking);
-  }
-
-  :host(:not([flow="offcanvas"], [menu-length="0"])) .heading-container:not(:last-child) {
-    margin-bottom: calc(var(--space-unit) * 2);
-  }
-
-  .menu-container {
-    margin-top: var(--space-unit);
-  }
-}
-
-/* Wide breakpoint */
-@media (min-width: 1366px) {
-  ::slotted([slot="title"]) {
-    font-size: var(--app-header-typography-9-size);
-    letter-spacing: var(--app-header-typography-9-tracking);
-  }
-
-  :host(:not([flow="offcanvas"], [menu-length="0"])) .heading-container:not(:last-child) {
-    margin-bottom: 0;
-  }
-}
-
-@keyframes slide-stuck-heading-in {
-  0% {
-    transform: translate3d(0, -100%, 0);
-  }
-
-  100% {
-    transform: none;
-  }
-}

package/dist/collection/components/navigation/z-app-switcher/index.js

@@ -1,79 +0,0 @@
-import { h } from "@stencil/core";
-import { ThemeVariant } from "../../../beans";
-export class ZAppSwitcher {
-  constructor() {
-    /** theme variant, default 'dark' */
-    this.theme = ThemeVariant.DARK;
-    this.isopen = false;
-    this.emitAppButtonClick = this.emitAppButtonClick.bind(this);
-  }
-  emitAppButtonClick() {
-    this.isopen = !this.isopen;
-    this.appButtonClick.emit({ isopen: this.isopen });
-  }
-  render() {
-    return (h("button", { title: "app-switcher", onClick: () => this.emitAppButtonClick() }, h("z-icon", { name: "app-switcher", class: this.theme })));
-  }
-  static get is() { return "z-app-switcher"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "theme": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ThemeVariant",
-          "resolved": "ThemeVariant.DARK | ThemeVariant.LIGHT",
-          "references": {
-            "ThemeVariant": {
-              "location": "import",
-              "path": "../../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "theme variant, default 'dark'"
-        },
-        "attribute": "theme",
-        "reflect": false,
-        "defaultValue": "ThemeVariant.DARK"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isopen": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "appButtonClick",
-        "name": "appButtonClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "emitted on app button icon click, returns open/closed state"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-}

package/dist/collection/components/navigation/z-app-switcher/styles.css

@@ -1,23 +0,0 @@
-:host {
-  font-family: var(--dashboard-font);
-  font-weight: var(--font-rg);
-}
-
-button {
-  display: flex;
-  align-content: center;
-  justify-content: center;
-  padding: 0;
-  border: none;
-  background-color: transparent;
-}
-
-button > z-icon {
-  color: var(--bg-white);
-  fill: currentcolor;
-}
-
-button > z-icon.light {
-  color: var(--bg-grey-900);
-  fill: currentcolor;
-}